add-zod(5): Add makeProps

packages/documentation/pages/examples/layouts.vue

@@ -121,7 +121,6 @@ export default {
 			},
 			userMenuData: [
 				{
-					title: 'Switch To',
 					links: [
 						{
 							link: '#',
@@ -132,9 +131,9 @@ export default {
 							title: 'Service Panel',
 						},
 					],
+					title: 'Switch To',
 				},
 				{
-					title: 'Recent Service',
 					links: [
 						{
 							link: '#',
@@ -149,6 +148,7 @@ export default {
 							title: '4YOURMIND Service',
 						},
 					],
+					title: 'Recent Service',
 				},
 				{
 					links: [
@@ -161,6 +161,7 @@ export default {
 							title: 'Logout (Close Example)',
 						},
 					],
+					title: null,
 				},
 			],
 			actionbarMenu: [

packages/kotti-ui/source/kotti-user-menu/KtUserMenu.vue

@@ -55,32 +55,38 @@ import { mixin as clickaway } from 'vue-clickaway'
 
 import { KtAvatar } from '../kotti-avatar'
 import { IS_NAVBAR_NARROW } from '../kotti-navbar/constants'
+import { propValidator } from '../props'
 import { Kotti } from '../types'
 
 import { KottiUserMenu } from './types'
 
-const linkIsValid = (link: KottiUserMenu.SectionLink) => Boolean(link.title)
-
-const sectionIsValid = (section: KottiUserMenu.Section) =>
-	Array.isArray(section.links) &&
-	Boolean(section.links.length) &&
-	section.links.every(linkIsValid)
-
 export default defineComponent<KottiUserMenu.PropsInternal>({
 	name: 'KtUserMenu',
 	components: {
 		KtAvatar,
 	},
 	mixins: [clickaway],
 	props: {
-		userAvatar: { type: String, default: null },
 		sections: {
+			required: true,
 			type: Array,
+			validator: propValidator(KottiUserMenu.propsInternalSchema, 'sections'),
+		},
+		userAvatar: {
+			default: null,
+			type: String,
+			validator: propValidator(KottiUserMenu.propsInternalSchema, 'userAvatar'),
+		},
+		userName: {
+			default: null,
+			type: String,
+			validator: propValidator(KottiUserMenu.propsInternalSchema, 'userName'),
+		},
+		userStatus: {
 			required: true,
-			validator: (sections) => sections.every(sectionIsValid),
+			type: String,
+			validator: propValidator(KottiUserMenu.propsInternalSchema, 'userStatus'),
 		},
-		userName: { type: String, default: null },
-		userStatus: { type: String, required: true },
 	},
 	setup() {
 		const isMenuShow = ref(false)

packages/kotti-ui/source/kotti-user-menu/types.ts

@@ -1,16 +1,27 @@
-import { KottiNavbar } from '../kotti-navbar/types'
+import { z } from 'zod'
+
 import { SpecifyRequiredProps } from '../types/utilities'
 
 export namespace KottiUserMenu {
-	export type SectionLink = KottiNavbar.SectionLink
-	export type Section = KottiNavbar.Section
+	export const sectionLinkSchema = z.object({
+		title: z.string(),
+	})
+	export type SectionLink = z.infer<typeof sectionLinkSchema>
+
+	export const sectionSchema = z.object({
+		links: z.array(sectionLinkSchema).nonempty(),
+		title: z.string().nullable(),
+	})
+
+	export type Section = z.infer<typeof sectionSchema>
 
-	export type PropsInternal = {
-		sections: Array<KottiUserMenu.Section>
-		userAvatar: string | null
-		userName: string | null
-		userStatus: string
-	}
+	export const propsInternalSchema = z.object({
+		sections: z.array(sectionSchema),
+		userAvatar: z.string().nullable(),
+		userName: z.string().nullable(),
+		userStatus: z.string(),
+	})
+	export type PropsInternal = z.infer<typeof propsInternalSchema>
 
 	export type Props = SpecifyRequiredProps<
 		KottiUserMenu.PropsInternal,