feat: Enhance dynamic Zod schema generation, improve CRUD error handling, and update user menu with theme selection.

Author: clifordpereira

playground/app/app.config.ts

@@ -2,7 +2,7 @@ export default defineAppConfig({
   ui: {
     colors: {
       primary: 'green',
-      neutral: 'zinc',
-    },
-  },
+      neutral: 'zinc'
+    }
+  }
 })

playground/app/app.vue

@@ -7,14 +7,14 @@ useHead({
   meta: [
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    { key: 'theme-color', name: 'theme-color', content: color },
+    { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'icon', href: '/favicon.ico' },
+    { rel: 'icon', href: '/favicon.ico' }
   ],
   htmlAttrs: {
-    lang: 'en',
-  },
+    lang: 'en'
+  }
 })
 
 const title = 'Nuxt Dashboard Template'
@@ -27,7 +27,7 @@ useSeoMeta({
   ogDescription: description,
   ogImage: 'https://ui.nuxt.com/assets/templates/nuxt/dashboard-light.png',
   twitterImage: 'https://ui.nuxt.com/assets/templates/nuxt/dashboard-light.png',
-  twitterCard: 'summary_large_image',
+  twitterCard: 'summary_large_image'
 })
 
 const { user } = useUserSession()

playground/app/components/LoginModal.vue

@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{
   color: 'primary',
   variant: 'solid',
   size: 'lg',
-  class: '',
+  class: ''
 })
 
 const isOpen = ref(false)
@@ -19,7 +19,7 @@ const { fetch: refreshSession } = useUserSession()
 
 const state = reactive({
   email: 'admin@example.com',
-  password: '$1Password',
+  password: '$1Password'
 })
 
 const loading = ref(false)
@@ -29,18 +29,17 @@ async function onSubmit() {
   try {
     await $fetch('/api/auth/login', {
       method: 'POST',
-      body: state,
+      body: state
     })
     await refreshSession()
     isOpen.value = false
     // Redirect to dashboard after successful login
     await navigateTo('/dashboard')
-  }
-  catch (err: unknown) {
+  } catch (err: unknown) {
     toast.add({
       title: 'Error',
       description: (err as { data?: { message?: string } }).data?.message || 'Invalid credentials',
-      color: 'error',
+      color: 'error'
     })
     loading.value = false
   }

playground/app/components/UserMenu.vue

@@ -18,8 +18,8 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
   label: user.value?.name || undefined,
   avatar: {
     src: user.value?.avatar || '',
-    alt: user.value?.name || '',
-  },
+    alt: user.value?.name || ''
+  }
 }], [{
   label: 'Theme',
   icon: 'i-lucide-palette',
@@ -29,7 +29,7 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
     chip: appConfig.ui.colors.primary,
     content: {
       align: 'center',
-      collisionPadding: 16,
+      collisionPadding: 16
     },
     children: colors.map(color => ({
       label: color,
@@ -41,15 +41,15 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
         e.preventDefault()
 
         appConfig.ui.colors.primary = color
-      },
-    })),
+      }
+    }))
   }, {
     label: 'Neutral',
     slot: 'chip',
     chip: appConfig.ui.colors.neutral === 'neutral' ? 'old-neutral' : appConfig.ui.colors.neutral,
     content: {
       align: 'end',
-      collisionPadding: 16,
+      collisionPadding: 16
     },
     children: neutrals.map(color => ({
       label: color,
@@ -61,9 +61,9 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
         e.preventDefault()
 
         appConfig.ui.colors.neutral = color
-      },
-    })),
-  }],
+      }
+    }))
+  }]
 }, {
   label: 'Appearance',
   icon: 'i-lucide-sun-moon',
@@ -76,7 +76,7 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
       e.preventDefault()
 
       colorMode.preference = 'light'
-    },
+    }
   }, {
     label: 'Dark',
     icon: 'i-lucide-moon',
@@ -89,26 +89,26 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
     },
     onSelect(e: Event) {
       e.preventDefault()
-    },
-  }],
+    }
+  }]
 }], [{
   label: 'Documentation',
   icon: 'i-lucide-book-open',
   to: 'https://auto-crud.clifland.in/',
-  target: '_blank',
+  target: '_blank'
 }, {
   label: 'GitHub repository',
   icon: 'i-simple-icons-github',
   to: 'https://github.com/clifordpereira/nuxt-auto-crud',
-  target: '_blank',
+  target: '_blank'
 }, {
   label: 'Log out',
   icon: 'i-lucide-log-out',
   onSelect: async () => {
     await $fetch('/api/auth/logout', { method: 'POST' })
     // Force a reload to ensure layout changes (admin -> guest) are applied
     window.location.href = '/'
-  },
+  }
 }]]))
 </script>
 
@@ -124,15 +124,15 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
         name: user?.name || undefined,
         avatar: user?.avatar ? { src: user.avatar, alt: user?.name || undefined } : undefined,
         label: collapsed ? undefined : (user?.name || undefined),
-        trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down',
+        trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
       }"
       color="neutral"
       variant="ghost"
       block
       :square="collapsed"
       class="data-[state=open]:bg-elevated"
       :ui="{
-        trailingIcon: 'text-dimmed',
+        trailingIcon: 'text-dimmed'
       }"
     />
 
@@ -142,7 +142,7 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
           class="rounded-full ring ring-bg bg-(--chip-light) dark:bg-(--chip-dark) size-2"
           :style="{
             '--chip-light': `var(--color-${(item as any).chip}-500)`,
-            '--chip-dark': `var(--color-${(item as any).chip}-400)`,
+            '--chip-dark': `var(--color-${(item as any).chip}-400)`
           }"
         />
       </div>

playground/app/components/common/Pagination.vue

@@ -21,7 +21,7 @@ const searchedItems = computed(() => {
     Object.values(row)
       .join(' ')
       .toLowerCase()
-      .includes(search.value.toLowerCase()),
+      .includes(search.value.toLowerCase())
   )
 })
 
@@ -37,7 +37,7 @@ watch(
   () => {
     emit('update:paginated', paginatedItems.value)
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 watch([search], () => {

playground/app/components/common/Password.vue

@@ -8,12 +8,12 @@ function checkStrength(str: string) {
     { regex: /.{8,}/, text: 'At least 8 characters' },
     { regex: /\d/, text: 'At least 1 number' },
     { regex: /[a-z]/, text: 'At least 1 lowercase letter' },
-    { regex: /[A-Z]/, text: 'At least 1 uppercase letter' },
+    { regex: /[A-Z]/, text: 'At least 1 uppercase letter' }
   ]
 
   return requirements.map(req => ({
     met: req.regex.test(str),
-    text: req.text,
+    text: req.text
   }))
 }
 

playground/app/components/crud/EditRow.vue

@@ -12,7 +12,7 @@ const state = computed(() => {
   if (!props.schema) return {}
   // exclude system fields
   const filteredFields = props.schema.fields.filter(
-    field => field.name !== 'created_at' && field.name !== 'updated_at' && field.name !== 'id',
+    field => field.name !== 'created_at' && field.name !== 'updated_at' && field.name !== 'id'
   )
 
   return useFormState(filteredFields, props.row)

playground/app/components/crud/Form.vue

@@ -28,7 +28,7 @@ const emit = defineEmits<{
 
 // filter out system fields
 const filteredFields = props.schema.fields.filter(
-  field => field.name !== 'created_at' && field.name !== 'updated_at' && field.name !== 'id',
+  field => field.name !== 'created_at' && field.name !== 'updated_at' && field.name !== 'id'
 )
 
 // dynamically build zod schema
@@ -44,9 +44,7 @@ const state = reactive<Record<string, unknown>>(
       // Case 1: value is an object with id (e.g. customer_id: { id: 1, ... })
       if ((field.name.endsWith('_id') || field.name.endsWith('Id')) && value && typeof value === 'object' && 'id' in value) {
         value = (value as { id: unknown }).id
-      }
-      // Case 2: value is undefined, but there might be a relation object (e.g. field is customer_id, but props has customer: { id: 1 })
-      else if ((field.name.endsWith('_id') || field.name.endsWith('Id')) && value === undefined) {
+      } else if ((field.name.endsWith('_id') || field.name.endsWith('Id')) && value === undefined) {
         const relationName = field.name.endsWith('_id') ? field.name.replace('_id', '') : field.name.replace('Id', '')
         const relationValue = props.initialState?.[relationName]
         if (relationValue && typeof relationValue === 'object' && 'id' in relationValue) {
@@ -57,8 +55,8 @@ const state = reactive<Record<string, unknown>>(
       acc[field.name] = value ?? (field.type === 'boolean' ? false : undefined)
       return acc
     },
-    {} as Record<string, unknown>,
-  ),
+    {} as Record<string, unknown>
+  )
 )
 
 // processedFields with capitalized label for display
@@ -67,16 +65,15 @@ const processedFields = computed(() =>
     let label = field.name
     if (label.endsWith('_id')) {
       label = label.replace('_id', '')
-    }
-    else if (label.endsWith('Id')) {
+    } else if (label.endsWith('Id')) {
       label = label.replace('Id', '')
     }
     label = useChangeCase(label, 'capitalCase').value
     return {
       ...field,
-      label,
+      label
     }
-  }),
+  })
 )
 
 function handleSubmit(event: FormSubmitEvent<Record<string, unknown>>) {

playground/app/components/crud/NameList.vue

@@ -12,8 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 let urlPath = ''
 if (props.tableName) {
   urlPath = props.tableName
-}
-else if (props.fieldName) {
+} else if (props.fieldName) {
   const baseName = props.fieldName.replace(/(_id|Id)$/, '')
   urlPath = pluralize(baseName) // e.g., user_id → users
 }
@@ -29,18 +28,18 @@ const { data: options } = await useFetch(() => `${crudBaseUrl}/${urlPath}`, {
       return {
         label: r.name || r.title || `#${r.id}`,
         value: r.id,
-        extra: r.email,
+        extra: r.email
       }
     }),
   lazy: true,
-  headers: crudHeaders(),
+  headers: crudHeaders()
 })
 
 const selected = computed({
   get: () => options.value?.find(opt => opt.value == props.modelValue),
   set: (val: { value: string | number } | null) => {
     emit('update:modelValue', val?.value)
-  },
+  }
 })
 </script>
 

playground/app/components/crud/Table.vue

@@ -14,7 +14,7 @@ const config = useRuntimeConfig().public
 const crudBaseUrl = config.crudBaseUrl || '/api'
 
 const { data } = await useFetch(`${crudBaseUrl}/${props.resource}`, {
-  headers: crudHeaders(),
+  headers: crudHeaders()
 })
 
 // Fetch relations
@@ -37,7 +37,7 @@ const paginatedItems = ref<Record<string, unknown>[]>([])
       root: 'divide-y divide-gray-200 dark:divide-gray-700',
       header: 'px-4 py-5',
       body: 'divide-y divide-gray-200 dark:divide-gray-700',
-      footer: 'p-4',
+      footer: 'p-4'
     }"
   >
     <!-- Filters / Pagination Area -->