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'