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

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

@@ -9,7 +9,7 @@ const form = useForm({
   schema: z.object({
     duration: z.number().meta({ title: 'Duration' }),
     dateIso: z.string().meta({ title: 'Datum' }),
-    text: z.string().max(10).meta({ title: 'Text' }).optional(),
+    text: z.string().max(10).meta({ title: 'Text' }),
   }),
   sourceValues: () => ({
     dateIso: null,
@@ -69,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',
@@ -179,90 +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
-      class="max-w-sm"
-      :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',
         }"
-        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>
-        <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 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>
-  </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

@@ -1,19 +1,9 @@
 <script setup lang="ts">
 import { de } from '@nuxt/ui/locale'
 import { Settings } from 'luxon'
-import { authRedirect } from './middleware/auth.global'
-import { channel } from './utils/channel'
 
 Settings.throwOnInvalid = true
 Settings.defaultLocale = 'de'
-
-// redirect when auth status changes through broadcast channel
-const route = useRoute()
-useEventListener<MessageEvent>(channel, 'message', (event) => {
-  if (event.data.type === 'auth') {
-    authRedirect(route)
-  }
-})
 </script>
 
 <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,31 +1,27 @@
-<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 * 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: (slot: {
-      props: Omit<FieldSlotProps<T>, 'modelModifiers'>
-      field: FormField<T>
-    }) => any
+    default: (slot: { props: InputSlotProps<T, Nullable>; field: FormField<T> }) => any
   } & Omit<FormFieldSlots, 'default'>
 >()
 
@@ -67,11 +63,11 @@ const inputProps = computed(() => {
     'onBlur': () => field.handleBlur(),
     'disabled': field.disabled,
     'loading': field.isPending,
-    'modelModifiers': {
-      nullable: true,
-    },
+    'modelModifiers': (props.nullable === true
+      ? { nullable: true }
+      : undefined) as true extends Nullable ? { nullable: true } : never,
     placeholder,
-  } satisfies FieldSlotProps<T>
+  } satisfies InputSlotProps<T, Nullable>
 })
 </script>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.22.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.21.0",
-    "@falcondev-oss/form-vue": "^0.21.0",
+    "@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": {