From ef51666772a1db004d31b805b474ac4fc1a7a061 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Thu, 24 Oct 2024 12:21:59 +0200
Subject: [PATCH] refact(KtPaginatio): typescript and composition api
Co-Authored-By: Santiago Balladares <744091+santiagoballadares@users.noreply.github.com>
---
.../pages/usage/components/pagination.vue | 55 ++---
.../source/kotti-pagination/KtPagination.vue | 207 ++++++++----------
.../components/PaginationExpanded.vue | 10 +-
.../components/PaginationFlexible.vue | 148 ++++++-------
.../components/PaginationFractionated.vue | 19 +-
.../kotti-ui/source/kotti-pagination/index.ts | 6 +-
.../kotti-ui/source/kotti-pagination/types.ts | 21 ++
packages/kotti-ui/source/types/kotti.ts | 1 +
8 files changed, 224 insertions(+), 243 deletions(-)
create mode 100644 packages/kotti-ui/source/kotti-pagination/types.ts
diff --git a/packages/documentation/pages/usage/components/pagination.vue b/packages/documentation/pages/usage/components/pagination.vue
index b0abf33814..95f36dba76 100644
--- a/packages/documentation/pages/usage/components/pagination.vue
+++ b/packages/documentation/pages/usage/components/pagination.vue
@@ -4,7 +4,7 @@
## Basic Usage
-
+
```html
@@ -14,11 +14,11 @@
## Default Page
-
+
```html
-
+
```
## Styles
@@ -26,7 +26,7 @@
#### Expanded
-
+
```html
@@ -36,7 +36,7 @@
#### Fraction
-
+
```html
@@ -46,7 +46,7 @@
#### Flexible
-
+
```html
@@ -56,12 +56,12 @@
#### Extra Options
-
-
-
+
+
+
-
-
+
+
```html
@@ -90,31 +90,10 @@
```
-
-## Usage
-
-### Props
-
-| Attribute | Description | Type | Accepted Values | Default |
-| :--------------- | :------------------------------------------- | :-------- | :--------------------------- | :--------- |
-| `adjacentAmount` | number of pairs of adjacent pages to display | `Number` | -- | `1` |
-| `fixedWidth` | set width based on max number of elements | `Boolean` | `True`, `False` | `False` |
-| `page` | the default page to show | `Number` | -- | -- |
-| `pageSize` | amount of items each page | `Number` | -- | `10` |
-| `pagingStyle` | style of the pagination | `String` | `expand`, `flex`, `fraction` | `expand` |
-| `total` | total amount of items | `Number` | -- | `Required` |
-
-### Events
-
-| Event Name | Description | Parameters |
-| :-------------------- | :---------------------------------------- | :------------------------------------- |
-| `currentPageChange` | trigger when number clicked | `(event: Event, payload: currentPage)` |
-| `nextPageClicked` | trigger when next page button clicked | `(event: Event, payload: currentPage)` |
-| `previousPageClicked` | trigger when previous page button clicked | `(event: Event, payload: currentPage)` |
-.pagination {
+
diff --git a/packages/kotti-ui/source/kotti-pagination/index.ts b/packages/kotti-ui/source/kotti-pagination/index.ts
index 57ab2cd6e0..4ad4b3858c 100644
--- a/packages/kotti-ui/source/kotti-pagination/index.ts
+++ b/packages/kotti-ui/source/kotti-pagination/index.ts
@@ -2,6 +2,7 @@ import { MetaDesignType } from '../types/kotti'
import { attachMeta, makeInstallable } from '../utilities'
import KtPaginationVue from './KtPagination.vue'
+import { KottiPagination } from './types'
export const KtPagination = attachMeta(makeInstallable(KtPaginationVue), {
addedVersion: '0.0.6',
@@ -11,5 +12,8 @@ export const KtPagination = attachMeta(makeInstallable(KtPaginationVue), {
url: 'https://www.figma.com/file/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=101%3A1106',
},
slots: {},
- typeScript: null,
+ typeScript: {
+ namespace: 'KottiPagination',
+ schema: KottiPagination.propsSchema,
+ },
})
diff --git a/packages/kotti-ui/source/kotti-pagination/types.ts b/packages/kotti-ui/source/kotti-pagination/types.ts
new file mode 100644
index 0000000000..7340ee3e1c
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-pagination/types.ts
@@ -0,0 +1,21 @@
+import { z } from 'zod'
+
+export namespace KottiPagination {
+ export enum PagingStyle {
+ EXPAND = 'expand',
+ FLEX = 'flex',
+ FRACTION = 'fraction',
+ }
+
+ export const propsSchema = z.object({
+ adjacentAmount: z.number().default(1),
+ fixedWidth: z.boolean().default(false),
+ page: z.number(),
+ pageSize: z.number().default(10),
+ pagingStyle: z.nativeEnum(PagingStyle).default(PagingStyle.EXPAND),
+ total: z.number(),
+ })
+
+ export type PropsInternal = z.output
+ export type Props = z.input
+}
diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
index f8bf2b9129..049f2af80a 100644
--- a/packages/kotti-ui/source/types/kotti.ts
+++ b/packages/kotti-ui/source/types/kotti.ts
@@ -62,6 +62,7 @@ export type { KottiI18n as I18n } from '../kotti-i18n/types'
export { KottiLine as Line } from '../kotti-line/types'
export { KottiModal as Modal } from '../kotti-modal/types'
export { KottiNavbar as Navbar } from '../kotti-navbar/types'
+export { KottiPagination as Pagination } from '../kotti-pagination/types'
export { KottiPopover as Popover } from '../kotti-popover/types'
export { KottiRow as Row } from '../kotti-row/types'
export { KottiTableLegacy as TableLegacy } from '../kotti-table-legacy/types'