refactor(kottiPagination): add prop types, zod schema and add to expo…

…rted kotti types
3YOURMIND · Oct 14, 2021 · 7364b8a · 7364b8a
1 parent ec52a7d
commit 7364b8a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 16 deletions.
diff --git a/packages/kotti-ui/source/kotti-pagination/KtPagination.vue b/packages/kotti-ui/source/kotti-pagination/KtPagination.vue
@@ -20,32 +20,24 @@
 import { Yoco } from '@3yourmind/yoco'
 import { computed, defineComponent, ref } from '@vue/composition-api'
 
+import { makeProps } from '../make-props'
+
 import PaginationExpanded from './components/PaginationExpanded.vue'
 import PaginationFlexible from './components/PaginationFlexible.vue'
 import PaginationFractionated from './components/PaginationFractionated.vue'
+import { KottiPagination } from './types'
 
-export default defineComponent<{
-	adjacentAmount: number
-	fixedWidth: boolean
-	fractionStyle: boolean
-	page: number
-	pageSize: number
-	pagingStyle: 'default' | 'flex' | 'fraction'
-	total: number
-}>({
+export default defineComponent<
+	KottiPagination.PropsInternal & { fractionStyle: boolean }
+>({
 	name: 'KtPagination',
 	components: {
 		PaginationExpanded,
 		PaginationFlexible,
 		PaginationFractionated,
 	},
 	props: {
-		adjacentAmount: { type: Number, default: 1 },
-		fixedWidth: { type: Boolean, default: false },
-		page: { type: Number, default: 1 },
-		pageSize: { type: Number, default: 10 },
-		pagingStyle: { type: String, default: 'expand' },
-		total: { type: Number, required: true },
+		...makeProps(KottiPagination.propsSchema),
 
 		/**
 		 * @deprecated

diff --git 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
@@ -0,0 +1,21 @@
+import { z } from 'zod'
+
+export namespace KottiPagination {
+	export enum PagingStyle {
+		DEFAULT = 'default',
+		FLEX = 'flex',
+		FRACTION = 'fraction',
+	}
+
+	export const propsSchema = z.object({
+		adjacentAmount: z.number().nullable().default(null),
+		fixedWidth: z.boolean().nullable().default(null),
+		page: z.number().nullable().default(null),
+		pageSize: z.number().nullable().default(null),
+		pagingStyle: z.nativeEnum(PagingStyle).nullable().default(null),
+		total: z.number(),
+	})
+
+	export type PropsInternal = z.output<typeof propsSchema>
+	export type Props = z.input<typeof propsSchema>
+}
diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
@@ -40,6 +40,7 @@ export { 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'