@falcondev-oss/nuxt-layers-base 0.21.0 → 0.23.0

package/.playground/app/pages/index.vue

@@ -7,12 +7,14 @@ const overlay = useOverlay()
 
 const form = useForm({
   schema: z.object({
-    duration: z.number(),
-    dateIso: z.string(),
+    duration: z.number().meta({ title: 'Duration' }),
+    dateIso: z.string().meta({ title: 'Datum' }),
+    text: z.string().max(10).meta({ title: 'Text' }),
   }),
   sourceValues: () => ({
     dateIso: null,
     duration: null,
+    text: '',
   }),
   async submit({ values }) {
     await new Promise((resolve) => setTimeout(resolve, 2000))
@@ -67,86 +69,85 @@ const columns = useTableColumns<typeof data>(
 </script>
 
 <template>
-  <LayoutDashboard
-    :sidebar="{
-      items: [
-        {
-          label: 'Home',
-          icon: 'i-lucide-house',
-          active: true,
-        },
-        {
-          label: 'Inbox',
-          icon: 'i-lucide-inbox',
-          badge: '4',
-        },
-        {
-          label: 'Contacts',
-          icon: 'i-lucide-users',
-        },
-        {
-          label: 'Settings',
-          icon: 'i-lucide-settings',
-          defaultOpen: true,
-          children: [
-            {
-              label: 'General',
-            },
-            {
-              label: 'Members',
-            },
-            {
-              label: 'Notifications',
-            },
-          ],
-        },
-      ],
-      bottomItems: [
-        {
-          label: 'Home',
-          icon: 'i-lucide-house',
-          active: true,
-        },
-        {
-          label: 'Inbox',
-          icon: 'i-lucide-inbox',
-          badge: '4',
-        },
-        {
-          label: 'Contacts',
-          icon: 'i-lucide-users',
-        },
-        {
-          label: 'Settings',
-          icon: 'i-lucide-settings',
-          defaultOpen: true,
-          children: [
-            {
-              label: 'General',
-            },
-            {
-              label: 'Members',
-            },
-            {
-              label: 'Notifications',
-            },
-          ],
-        },
-      ],
-      userMenu: {
-        name: 'Benjamin Canac',
-        avatarSrc: 'https://github.com/benjamincanac.png',
+  <LayoutSidebar
+    :items="[
+      {
+        label: 'Home',
+        icon: 'i-lucide-house',
+        active: true,
+      },
+      {
+        label: 'Inbox',
+        icon: 'i-lucide-inbox',
+        badge: '4',
+      },
+      {
+        label: 'Contacts',
+        icon: 'i-lucide-users',
+      },
+      {
+        label: 'Settings',
+        icon: 'i-lucide-settings',
+        defaultOpen: true,
+        children: [
+          {
+            label: 'General',
+          },
+          {
+            label: 'Members',
+          },
+          {
+            label: 'Notifications',
+          },
+        ],
+      },
+    ]"
+    :bottom-items="[
+      {
+        label: 'Home',
+        icon: 'i-lucide-house',
+        active: true,
+      },
+      {
+        label: 'Inbox',
+        icon: 'i-lucide-inbox',
+        badge: '4',
+      },
+      {
+        label: 'Contacts',
+        icon: 'i-lucide-users',
+      },
+      {
+        label: 'Settings',
+        icon: 'i-lucide-settings',
+        defaultOpen: true,
+        children: [
+          {
+            label: 'General',
+          },
+          {
+            label: 'Members',
+          },
+          {
+            label: 'Notifications',
+          },
+        ],
       },
+    ]"
+    :user-menu="{
+      name: 'Benjamin Canac',
+      avatarSrc: 'https://github.com/benjamincanac.png',
     }"
-    :panel="{
-      navbar: {
+  >
+    <LayoutNavbar
+      :navbar="{
         title: 'Dashboard',
         ui: {
           root: 'relative',
           title: 'flex-1 absolute inset-0 w-full',
         },
-      },
-      toolbar: {
+      }"
+      :toolbar="{
         items: [
           {
             label: 'General',
@@ -177,85 +178,90 @@ const columns = useTableColumns<typeof data>(
             icon: 'i-lucide-bell',
           },
         ],
-      },
-    }"
-  >
-    <template #navbar-title>
-      <div class="w-full text-center">title</div>
-    </template>
-
-    <UTableCard>
-      <UTable :data :columns @select="() => {}" />
-    </UTableCard>
-    <UCard
-      :ui="{
-        body: 'flex flex-col gap-4 items-start',
-      }"
-    >
-      <UButton
-        label="Confirm"
-        variant="subtle"
-        @click="
-          () => {
-            confirm.confirmDestructive({
-              title: 'Are you sure?',
-              description: 'This action cannot be undone.',
-              submitLabel: 'Yes, delete it',
-            })
-          }
-        "
-      />
-      <UButton
-        label="Actions"
-        variant="subtle"
-        @click="
-          () => {
-            overlay.create(LazyOverlayModalActions, {
-              defaultOpen: true,
-              props: {
-                title: 'Actions',
-                description: 'Choose an action to perform',
-                actions: [
-                  {
-                    label: 'Action 1',
-                  },
-                  {
-                    label: 'Action 2',
-                  },
-                ],
-              },
-            })
-          }
-        "
-      />
-    </UCard>
-    <UCard
-      :ui="{
-        body: 'flex flex-col gap-4 items-start ',
       }"
     >
-      <UForm
-        :form
-        :success-toast="{
-          title: 'test',
-          description: 'wow',
+      <template #navbar-title>
+        <div class="w-full text-center">title</div>
+      </template>
+
+      <UTableCard>
+        <UTable :data :columns @select="() => {}" />
+      </UTableCard>
+      <UCard
+        :ui="{
+          body: 'flex flex-col gap-4 items-start',
         }"
       >
-        {{ form.data }}
-        <UField
-          v-slot="props"
-          :field="
-            form.fields.dateIso.$use({
-              translate: dateValueIsoTranslator(),
-            })
+        <UButton
+          label="Confirm"
+          variant="subtle"
+          @click="
+            () => {
+              confirm.confirmDestructive({
+                title: 'Are you sure?',
+                description: 'This action cannot be undone.',
+                submitLabel: 'Yes, delete it',
+              })
+            }
           "
+        />
+        <UButton
+          label="Actions"
+          variant="subtle"
+          @click="
+            () => {
+              overlay.create(LazyOverlayModalActions, {
+                defaultOpen: true,
+                props: {
+                  title: 'Actions',
+                  description: 'Choose an action to perform',
+                  actions: [
+                    {
+                      label: 'Action 1',
+                    },
+                    {
+                      label: 'Action 2',
+                    },
+                  ],
+                },
+              })
+            }
+          "
+        />
+      </UCard>
+      <UCard
+        class="max-w-sm"
+        :ui="{
+          body: 'flex flex-col gap-4 items-start ',
+        }"
+      >
+        <UForm
+          :form
+          :success-toast="{
+            title: 'test',
+            description: 'wow',
+          }"
+          class="flex flex-col gap-4"
         >
-          <UInputDatePicker v-bind="props" />
-        </UField>
-        <UField v-slot="props" :field="form.fields.duration.$use()">
-          <UInputDurationMinutes v-bind="props" />
-        </UField>
-      </UForm>
-    </UCard>
-  </LayoutDashboard>
+          {{ form.data }}
+          <UField v-slot="{ props }" :field="form.fields.text.$use()">
+            <UInput class="w-full" v-bind="props" />
+          </UField>
+          <UField
+            v-slot="{ props }"
+            :field="
+              form.fields.dateIso.$use({
+                translate: dateValueIsoTranslator(),
+              })
+            "
+          >
+            <UInputDatePicker class="w-full" v-bind="props" />
+          </UField>
+          <UField v-slot="{ props }" :field="form.fields.duration.$use()">
+            <UInputDurationMinutes class="w-full" v-bind="props" />
+          </UField>
+        </UForm>
+      </UCard>
+    </LayoutNavbar>
+  </LayoutSidebar>
 </template>

package/.playground/app.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { de } from '@nuxt/ui/locale'
+import { Settings } from 'luxon'
+
+Settings.throwOnInvalid = true
+Settings.defaultLocale = 'de'
+</script>
+
+<template>
+  <UCustomApp
+    :app="{
+      locale: de,
+    }"
+  />
+</template>

package/.playground/nuxt.config.ts

@@ -6,5 +6,15 @@ export default defineNuxtConfig({
       projectId: 'my-project',
     },
   },
+  typescript: {
+    tsConfig: {
+      vueCompilerOptions: {
+        strictTemplates: true,
+        strictVModel: false,
+        htmlAttributes: ['aria-*'],
+        dataAttributes: ['data-*'],
+      },
+    },
+  },
   css: ['~/assets/test.css'],
 })

package/app/components/u/UField.vue

@@ -1,66 +1,123 @@
-<script setup lang="ts" generic="T">
+<script setup lang="ts" generic="T, const Nullable extends boolean = false">
 import type { FormField } from '@falcondev-oss/form-core'
 import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui'
-import type { ModelModifiers } from '@nuxt/ui/runtime/types/input.js'
 import { useForwardProps } from 'reka-ui'
-import { omit } from 'remeda'
+import * as R from 'remeda'
 
-type FieldSlotProps<T> = {
+type InputSlotProps<T, Nullable extends boolean> = {
   'modelValue': T
   'onUpdate:modelValue': (value: T) => void
   'onBlur': () => void
   'disabled': boolean
   'loading': boolean
-  'modelModifiers'?: Pick<ModelModifiers, 'nullable'>
+  'modelModifiers': true extends Nullable ? { nullable: true } : never
+  'placeholder'?: string
 }
 
 const props = defineProps<
   FormFieldProps & {
     field: FormField<T>
-  }
+  } & { nullable?: Nullable }
 >()
 const slots = defineSlots<
   {
-    default: (props: Omit<FieldSlotProps<T>, 'modelModifiers'>) => any
+    default: (slot: { props: InputSlotProps<T, Nullable>; field: FormField<T> }) => any
   } & Omit<FormFieldSlots, 'default'>
 >()
 
 const forwardedProps = useForwardProps(props)
 
-const formFieldProps = computed(() => {
+const isOverMaxLength = computed(() => {
+  const field = forwardedProps.value.field
+
+  return field.schema.maxLength === undefined || field.value == null
+    ? false
+    : (field.value as string | number)?.toString().length > field.schema.maxLength
+})
+
+const formFieldProps = computed<FormFieldProps>(() => {
   const { field, ...rest } = forwardedProps.value
-  return rest
+
+  const hint =
+    field.schema.maxLength === undefined
+      ? undefined
+      : `${(field.value as string | number | null)?.toString().length ?? 0}/${field.schema.maxLength}`
+
+  return {
+    required: field.schema.required,
+    label: field.schema.title,
+    description: field.schema.description,
+    hint,
+    ...R.omitBy(rest, (v) => v === undefined),
+  }
 })
 
-const slotProps = computed(
-  () =>
-    ({
-      'modelValue': forwardedProps.value.field.value,
-      'onUpdate:modelValue': (value) => forwardedProps.value.field.handleChange(value),
-      'onBlur': () => forwardedProps.value.field.handleBlur(),
-      'disabled': forwardedProps.value.field.disabled,
-      'loading': forwardedProps.value.field.isPending,
-      'modelModifiers': {
-        nullable: true,
-      },
-    }) satisfies FieldSlotProps<T>,
-)
+const inputProps = computed(() => {
+  const field = forwardedProps.value.field
+
+  const placeholder = field.errors && field.errors.join('\n')
+
+  return {
+    'modelValue': field.value,
+    'onUpdate:modelValue': (value) => field.handleChange(value),
+    'onBlur': () => field.handleBlur(),
+    'disabled': field.disabled,
+    'loading': field.isPending,
+    'modelModifiers': (props.nullable === true
+      ? { nullable: true }
+      : undefined) as true extends Nullable ? { nullable: true } : never,
+    placeholder,
+  } satisfies InputSlotProps<T, Nullable>
+})
 </script>
 
 <template>
   <UFormField
     v-bind="formFieldProps"
-    :error="forwardedProps.field.errors && forwardedProps.field.errors.join('\n')"
+    :ui="{
+      hint: isOverMaxLength ? 'text-error' : '',
+    }"
+    :error="!!field.errors"
   >
-    <slot v-bind="slotProps">
+    <template #hint="{ hint }">
+      <span class="flex items-center gap-1.5">
+        <UPopover
+          v-if="!!field.errors"
+          mode="hover"
+          :delay-duration="0"
+          :ui="{
+            content: 'bg-error-50 ring-error-200! rounded py-1 px-2',
+          }"
+        >
+          <UIcon name="lucide:circle-alert" class="text-error" />
+          <template #content>
+            <p class="text-(--ui-color-neutral-800) max-w-sm whitespace-normal text-xs">
+              {{ field.errors.join('\n') }}
+            </p>
+          </template>
+        </UPopover>
+
+        {{ hint }}
+      </span>
+    </template>
+
+    <slot v-bind="{ props: inputProps, field: forwardedProps.field }">
       <DevOnly>
         <p class="font-black text-red-500">UField missing slot</p>
       </DevOnly>
     </slot>
 
-    <template v-for="(_, name) in omit(slots, ['default'])" #[name]="slotData">
+    <template v-for="(_, name) in R.omit(slots, ['default'])" #[name]="slotData">
       <!-- @vue-ignore -->
       <slot :name="name" v-bind="slotData || {}" />
     </template>
   </UFormField>
 </template>
+
+<style scoped>
+:deep([aria-invalid='true']) {
+  &::placeholder {
+    color: var(--ui-color-error-400);
+  }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",
@@ -14,11 +14,11 @@
     "pnpm": "10"
   },
   "dependencies": {
-    "@falcondev-oss/form-core": "^0.19.3",
-    "@falcondev-oss/form-vue": "^0.19.3",
+    "@falcondev-oss/form-core": "^0.21.1",
+    "@falcondev-oss/form-vue": "^0.21.1",
     "@falcondev-oss/trpc-typed-form-data": "^0.4.1",
     "@falcondev-oss/trpc-vue-query": "^0.5.2",
-    "@iconify-json/lucide": "^1.2.90",
+    "@iconify-json/lucide": "^1.2.94",
     "@internationalized/date": "^3.11.0",
     "@nuxt/icon": "^2.2.1",
     "@nuxt/ui": "4.4.0",
@@ -34,19 +34,19 @@
     "consola": "^3.4.2",
     "defu": "^6.1.4",
     "maska": "^3.2.0",
-    "reka-ui": "^2.8.0",
+    "reka-ui": "^2.8.2",
     "remeda": "^2.33.6",
     "superjson": "^2.2.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "trpc-nuxt": "^2.0.1",
     "type-fest": "^5.4.4",
-    "vue": "^3.5.28",
+    "vue": "^3.5.29",
     "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "nuxt": "^4.3.1",
     "typescript": "^5.9.3",
-    "vue-tsc": "^3.2.4",
+    "vue-tsc": "^3.2.5",
     "zod": "^4.3.6"
   },
   "scripts": {