@falcondev-oss/nuxt-layers-base 0.29.0 → 0.30.0

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

@@ -11,8 +11,8 @@ const form = useForm({
     dateIso: z.string().meta({ title: 'Datum' }),
     text: z
       .string()
-      .min(3)
-      .max(10)
+      .length(8)
+      // .max(8)
       .meta({
         title: 'Text',
         description: 'Beschreibung',
@@ -253,7 +253,8 @@ const columns = useTableColumns<typeof data>(
           class="flex flex-col gap-4"
         >
           {{ form.data }}
-          <UField v-slot="{ bind }" :field="form.fields.text.$use()">
+          <UField v-slot="{ bind, field }" :field="form.fields.text.$use()">
+            {{ field.schema }}
             <UInput class="w-full" v-bind="bind" />
           </UField>
           <UField

package/app/components/u/UField.vue

@@ -44,7 +44,7 @@ const formFieldProps = computed<FormFieldProps>(() => {
   const { field, ...rest } = forwardedProps.value
 
   const hint =
-    field.schema.maxLength === undefined
+    field.schema.maxLength === undefined || field.schema.maxLength === field.schema.minLength
       ? undefined
       : `${(field.value as string | number | null)?.toString().length ?? 0}/${field.schema.maxLength}`
 
@@ -123,7 +123,7 @@ const model_ = { model }
       </span>
     </template>
 
-    <template #help>
+    <template v-if="field.schema.examples" #help>
       <template v-if="Array.isArray(field.schema.examples)">
         <ul>
           <li v-for="(example, index) in field.schema.examples" :key="index">
@@ -131,7 +131,7 @@ const model_ = { model }
           </li>
         </ul>
       </template>
-      <p v-else-if="field.schema.examples">
+      <p v-else>
         {{ field.schema.examples }}
       </p>
     </template>

package/app/components/u/UForm.vue

@@ -70,14 +70,17 @@ const rootErrors = computed(() => props.form.errors?.filter((error) => error.pat
 <template>
   <form class="w-full" @submit.prevent="() => form.submit()">
     <slot />
-    <div class="col-span-full flex w-full flex-col gap-4">
+    <div
+      v-show="rootErrors?.length || !actionsTeleportTo"
+      class="col-span-full flex w-full flex-col gap-4"
+    >
       <ul v-if="rootErrors?.length" class="text-error text-sm">
         <li v-for="error of rootErrors" :key="`${error.path}:${error.message}`">
           {{ error.path }}:{{ error.message }}
         </li>
       </ul>
-      <div class="flex items-center justify-end gap-4">
-        <Teleport defer :disabled="!props.actionsTeleportTo" :to="props.actionsTeleportTo">
+      <div v-show="!actionsTeleportTo" class="flex items-center justify-end gap-4">
+        <Teleport defer :disabled="!actionsTeleportTo" :to="actionsTeleportTo">
           <UActions :defaults="{ variant: 'subtle' }" :actions="actionsWithSubmit" />
         </Teleport>
       </div>

package/app/components/u/UInputDatePicker.vue

@@ -1,17 +1,38 @@
 <script setup lang="ts">
 import type { DateValue } from '@internationalized/date'
+import type { CalendarProps, InputDateProps } from '@nuxt/ui'
+
+defineProps<{
+  input?: InputDateProps
+  calendar?: CalendarProps
+  disabled?: boolean
+  loading?: boolean
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  blur: []
+}>()
 
 const inputDate = useTemplateRef('inputDate')
 
 const model = defineModel<DateValue | null>({ required: true })
 const open = ref(false)
+
+watch(open, () => {
+  if (!open.value) emit('blur')
+})
 </script>
 
 <template>
   <UInputDate
     ref="inputDate"
-    :model-value="model"
+    v-bind="input"
+    :disabled
+    :loading
     :range="false"
+    :model-value="model"
+    @blur="() => emit('blur')"
     @update:model-value="
       (val) => {
         model = val ?? null
@@ -25,6 +46,7 @@ const open = ref(false)
         <template #content>
           <div class="p-2">
             <UCalendar
+              v-bind="calendar"
               :model-value="model ?? undefined"
               :multiple="false"
               :range="false"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",
@@ -14,20 +14,20 @@
     "pnpm": "10"
   },
   "peerDependencies": {
+    "@falcondev-oss/form-core": "^0.22.4",
+    "@falcondev-oss/form-vue": "^0.22.4",
+    "@internationalized/date": "^3.12.0",
     "@nuxt/ui": "~4.5.0"
   },
   "dependencies": {
-    "@falcondev-oss/form-core": "^0.22.1",
-    "@falcondev-oss/form-vue": "^0.22.1",
     "@falcondev-oss/trpc-typed-form-data": "^0.4.1",
     "@falcondev-oss/trpc-vue-query": "^0.5.2",
-    "@iconify-json/lucide": "^1.2.95",
-    "@internationalized/date": "^3.11.0",
+    "@iconify-json/lucide": "^1.2.96",
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/color-mode": "^4.0.0",
     "@tanstack/vue-query": "^5.92.9",
-    "@trpc/client": "^11.11.0",
-    "@trpc/server": "^11.11.0",
+    "@trpc/client": "^11.12.0",
+    "@trpc/server": "^11.12.0",
     "@vue/devtools-api": "^8.0.7",
     "@vueuse/core": "^14.2.1",
     "@vueuse/nuxt": "^14.2.1",
@@ -36,13 +36,13 @@
     "consola": "^3.4.2",
     "defu": "^6.1.4",
     "maska": "^3.2.0",
-    "reka-ui": "^2.8.2",
+    "reka-ui": "^2.9.1",
     "remeda": "^2.33.6",
     "superjson": "^2.2.6",
     "tailwindcss": "^4.2.1",
     "trpc-nuxt": "^2.0.1",
     "type-fest": "^5.4.4",
-    "vue": "^3.5.29",
+    "vue": "^3.5.30",
     "vue-router": "^4.6.4"
   },
   "devDependencies": {