@falcondev-oss/nuxt-layers-base 0.25.0 → 0.26.0

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

@@ -244,21 +244,21 @@ const columns = useTableColumns<typeof data>(
           class="flex flex-col gap-4"
         >
           {{ form.data }}
-          <UField v-slot="{ props }" :field="form.fields.text.$use()">
-            <UInput class="w-full" v-bind="props" />
+          <UField v-slot="{ bind }" :field="form.fields.text.$use()">
+            <UInput class="w-full" v-bind="bind" />
           </UField>
           <UField
-            v-slot="{ props }"
+            v-slot="{ bind }"
             :field="
               form.fields.dateIso.$use({
                 translate: dateValueIsoTranslator(),
               })
             "
           >
-            <UInputDatePicker class="w-full" v-bind="props" />
+            <UInputDatePicker class="w-full" v-bind="bind" />
           </UField>
-          <UField v-slot="{ props }" :field="form.fields.duration.$use()">
-            <UInputDurationMinutes class="w-full" v-bind="props" />
+          <UField v-slot="{ bind }" :field="form.fields.duration.$use()">
+            <UInputDurationMinutes class="w-full" v-bind="bind" />
           </UField>
         </UForm>
       </UCard>

package/.playground/nuxt.config.ts

@@ -6,15 +6,5 @@ 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,27 +1,32 @@
-<script setup lang="ts" generic="T, const Nullable extends boolean = false">
+<script setup lang="ts" generic="T">
 import type { FormField } from '@falcondev-oss/form-core'
 import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui'
 import { useForwardProps } from 'reka-ui'
 import * as R from 'remeda'
 
-type InputSlotProps<T, Nullable extends boolean> = {
+type InputProps<T> = {
   'modelValue': T
   'onUpdate:modelValue': (value: T) => void
   'onBlur': () => void
   'disabled': boolean
   'loading': boolean
-  'modelModifiers': true extends Nullable ? { nullable: true } : undefined
+  'modelModifiers': { nullable: true }
   'placeholder'?: string
 }
 
 const props = defineProps<
   FormFieldProps & {
     field: FormField<T>
-  } & { nullable?: Nullable }
+  }
 >()
+
 const slots = defineSlots<
   {
-    default: (slot: { props: InputSlotProps<T, Nullable>; field: FormField<T> }) => any
+    default: (slot: {
+      bind: InputProps<T>
+      model: WritableComputedRef<T>
+      field: FormField<T>
+    }) => any
   } & Omit<FormFieldSlots, 'default'>
 >()
 
@@ -52,7 +57,7 @@ const formFieldProps = computed<FormFieldProps>(() => {
   }
 })
 
-const inputProps = computed(() => {
+const bind = computed(() => {
   const field = forwardedProps.value.field
 
   const placeholder = field.errors && field.errors.join('\n')
@@ -63,12 +68,21 @@ const inputProps = computed(() => {
     'onBlur': () => field.handleBlur(),
     'disabled': field.disabled,
     'loading': field.isPending,
-    'modelModifiers': (props.nullable === true
-      ? { nullable: true }
-      : undefined) as true extends Nullable ? { nullable: true } : undefined,
     placeholder,
-  } satisfies InputSlotProps<T, Nullable>
+    'modelModifiers': { nullable: true },
+  } satisfies InputProps<T>
 })
+
+const model = computed({
+  get() {
+    return forwardedProps.value.field.value
+  },
+  set(value: T) {
+    forwardedProps.value.field.handleChange(value)
+  },
+})
+
+const model_ = { model }
 </script>
 
 <template>
@@ -101,7 +115,7 @@ const inputProps = computed(() => {
       </span>
     </template>
 
-    <slot v-bind="{ props: inputProps, field: forwardedProps.field }">
+    <slot v-bind="{ bind, model: model_.model, field: forwardedProps.field }">
       <DevOnly>
         <p class="font-black text-red-500">UField missing slot</p>
       </DevOnly>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",
@@ -24,7 +24,6 @@
     "@iconify-json/lucide": "^1.2.94",
     "@internationalized/date": "^3.11.0",
     "@nuxt/icon": "^2.2.1",
-    "@nuxt/ui": "~4.5.0",
     "@nuxtjs/color-mode": "^4.0.0",
     "@tanstack/vue-query": "^5.92.9",
     "@trpc/client": "^11.10.0",