@falcondev-oss/nuxt-layers-base 0.33.2 → 0.34.0

package/.playground/app/components/FormCard.tsx

@@ -0,0 +1,100 @@
+import type { VNode } from 'vue'
+import { UCard, UDropdownMenu, UField, UForm, UInput } from '#components'
+import { Component } from 'vue'
+import { z } from 'zod'
+
+// https://github.com/vuejs/language-tools/blob/master/packages/component-type-helpers/index.ts
+type ComponentSlots<T> = T extends new (...args: any) => { $slots: infer S }
+  ? NonNullable<S>
+  : T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }, ...args: any) => any
+    ? NonNullable<S>
+    : {}
+
+type ComponentProps<T> = T extends new (...args: any) => { $props: infer P }
+  ? NonNullable<P>
+  : T extends (props: infer P, ...args: any) => any
+    ? P
+    : {}
+
+/* eslint-disable ts/no-empty-object-type */
+export default defineSetupComponent((_: { props: {}; emits: {}; slots: {} }) => ({
+  props: [],
+  emits: [],
+  setup: () => {
+    const form = useForm({
+      schema: z.object({
+        duration: z.number().meta({ title: 'Duration' }),
+        dateIso: z.string().meta({ title: 'Datum' }),
+        text: z
+          .string()
+          .length(8)
+          // .max(8)
+          .meta({
+            title: 'Text',
+            description: 'Beschreibung',
+            default: 'Default Wert',
+            examples: ['Hier könnte ein Beispieltext stehen', '123'],
+          }),
+      }),
+      sourceValues: () => ({
+        dateIso: null,
+        duration: null,
+        text: '',
+      }),
+      async submit({ values }) {
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+        console.log(values)
+      },
+    })
+
+    return () => (
+      <UCard
+        class="max-w-sm"
+        ui={{
+          body: 'flex flex-col gap-4 items-start ',
+        }}
+      >
+        <UForm form={form} successToast={{ title: 'Success' }} class="flex flex-col gap-4">
+          {form.data}
+
+          {/* <UField
+            field={form.fields.text.$use()}
+            error-inline
+            vSlots={vSlots(UField, {
+              default({ bind }) {
+                return <UInput class="w-full" {...bind} />
+              },
+            })}
+          ></UField> */}
+        </UForm>
+        {/* <UForm
+          :form
+          :success-toast="{
+            title: 'test',
+            description: 'wow',
+          }"
+          class="flex flex-col gap-4"
+        >
+          {{ form.data }}
+          <UField v-slot="{ bind, field }" :field="form.fields.text.$use()" error-inline>
+            {{ field.schema }}
+            <UInput class="w-full" v-bind="bind" />
+          </UField>
+          <UField
+            v-slot="{ bind }"
+            :field="
+              form.fields.dateIso.$use({
+                translate: dateValueIsoTranslator(),
+              })
+            "
+          >
+            <UInputDatePicker class="w-full" v-bind="bind" />
+          </UField>
+          <UField v-slot="{ bind }" :field="form.fields.duration.$use()">
+            <UInputDurationMinutes class="w-full" v-bind="bind" />
+          </UField>
+        </UForm> */}
+      </UCard>
+    )
+  },
+}))

package/.playground/app/components/Select.tsx

@@ -0,0 +1,57 @@
+import { UButton, UCard } from '#components'
+
+export type ListItems = { label: string; value: string }[]
+
+export default defineSetupComponent(
+  <T extends ListItems>(_: {
+    props: {
+      items: T
+    }
+    emits: {
+      choose: (value: T[number]) => void
+    }
+    slots: {
+      selected: (props: { item: T[number] }) => any
+    }
+  }) => ({
+    props: props(_, ['items']),
+    // props: ['items'],
+    emits: emits(_, ['choose']),
+    // emits: ['choose'],
+    setup: generic(_, (props, { emit, slots }) => {
+      const selected = ref<T[number]>()
+
+      return () => (
+        <UCard
+          class="w-fit"
+          vSlots={vSlots(UCard, {
+            header: () => <h1>Select an item</h1>,
+          })}
+        >
+          <div class="flex flex-col gap-2">
+            {props.items.map((item) => (
+              <UButton
+                variant="subtle"
+                key={item.value}
+                class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+                onClick={() => {
+                  selected.value = item
+                  emit('choose', item)
+                }}
+                vSlots={vSlots(UButton, {
+                  leading: () => `[${selected.value?.value === item.value ? 'x' : ' '}] `,
+                })}
+              >
+                {item.label}
+              </UButton>
+            ))}
+
+            {slots.selected && selected.value ? (
+              <div class="mt-4">{slots.selected({ item: selected.value })}</div>
+            ) : null}
+          </div>
+        </UCard>
+      )
+    }),
+  }),
+)

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

@@ -278,6 +278,20 @@ const columns = useTableColumns<typeof data>(
           </UField>
         </UForm>
       </UCard>
+      <Select
+        :items="[
+          { label: 'One', value: '1' },
+          { label: 'Two', value: '2' },
+        ]"
+        @choose="console.warn"
+      >
+        <template #selected="{ item }">
+          <div class="flex items-center gap-2">
+            <span>Selected:</span>
+            <span>{{ item.label }}</span>
+          </div>
+        </template>
+      </Select>
     </LayoutNavbar>
   </LayoutSidebar>
 </template>

package/app/components/layout/LayoutPage.vue

@@ -20,6 +20,7 @@ defineProps<{
     navigation?: NavigationMenuProps
     actions?: ButtonProps[]
     ui?: HeaderProps['ui']
+    mobileActions?: ButtonProps[]
   }
   footer?: {
     items?: NavigationMenuItem[]
@@ -96,6 +97,14 @@ const footerSlots = computed(() =>
 
       <template v-if="header.actions || slots['header-right']" #right>
         <slot name="header-right">
+          <UActions
+            v-if="header.mobileActions"
+            class="md:hidden"
+            :actions="header.mobileActions"
+            :defaults="{
+              variant: 'subtle',
+            }"
+          />
           <UActions
             v-if="header.actions"
             class="max-sm:hidden"

package/app/utils/define-setup-component-old.ts

@@ -0,0 +1,55 @@
+/* eslint-disable ts/no-empty-object-type */
+import type { AllUnionFields, UnionToTuple } from 'type-fest'
+import type {
+  ComponentOptionsMixin,
+  CreateComponentPublicInstanceWithMixins,
+  EmitsOptions,
+  EmitsToProps,
+  PublicProps,
+  RenderFunction,
+  SetupContext,
+  SlotsType,
+} from 'vue'
+
+export function defineSetupComponentOld<
+  const Opts extends {
+    props: Record<string, any>
+    emits: Record<string, any>
+    slots: Record<string, any>
+  },
+  Setup extends (
+    props: Props,
+    ctx: SetupContext<Opts['emits'], SlotsType<Partial<Opts['slots']>>>,
+  ) => RenderFunction | Promise<RenderFunction>,
+  const PropsRuntime extends Readonly<UnionToTuple<keyof AllUnionFields<Opts['props']>>>,
+  E extends EmitsOptions = Opts['emits'],
+  Props extends Record<string, any> = Opts['props'] & EmitsToProps<E>,
+  PP = PublicProps & { vSlots?: Opts['slots'] },
+  S extends SlotsType<Partial<Opts['slots']>> = SlotsType<Partial<Opts['slots']>>,
+>(
+  define: (opts: Opts) => { props: PropsRuntime },
+  setup: Setup,
+): new (
+  props: Opts['props'],
+) => CreateComponentPublicInstanceWithMixins<
+  Props,
+  {},
+  {},
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  E,
+  PP,
+  {},
+  false,
+  {},
+  S
+> {
+  // eslint-disable-next-line ts/no-unsafe-argument
+  const opts = define({} as any)
+  // eslint-disable-next-line ts/no-unsafe-return
+  return defineComponent(setup, {
+    props: opts.props as unknown as string[],
+  }) as any
+}

package/app/utils/define-setup-component.ts

@@ -0,0 +1,112 @@
+/* eslint-disable ts/no-empty-object-type */
+import type { AllUnionFields, Schema, UnionToTuple } from 'type-fest'
+import type {
+  ComponentOptionsMixin,
+  CreateComponentPublicInstanceWithMixins,
+  EmitsToProps,
+  ObjectEmitsOptions,
+  PublicProps,
+  RenderFunction,
+  SetupContext,
+  Slots as SlotOptions,
+  SlotsType,
+} from 'vue'
+
+declare module 'vue' {
+  interface ComponentCustomProps {
+    vSlots?: SlotOptions
+  }
+}
+
+export function defineSetupComponent<
+  const Opts extends {
+    props: Record<string, any>
+    emits: ObjectEmitsOptions
+    slots: Record<string, any>
+  },
+  Slots extends SlotsType<Partial<Opts['slots']>>,
+  Props extends Opts['props'] & EmitsToProps<Opts['emits']>,
+  Setup extends (
+    props: Props,
+    ctx: SetupContext<Opts['emits'], Slots>,
+  ) => RenderFunction | Promise<RenderFunction>,
+  const RuntimeProps extends Readonly<UnionToTuple<keyof AllUnionFields<Opts['props']>>>,
+  const RuntimeEmits extends Readonly<UnionToTuple<keyof AllUnionFields<Opts['emits']>>>,
+>(
+  define: (opts: Opts) => {
+    props: NoInfer<RuntimeProps>
+    emits: NoInfer<RuntimeEmits>
+    setup: NoInfer<Setup>
+  },
+): new (
+  props: Opts['props'],
+) => CreateComponentPublicInstanceWithMixins<
+  Props,
+  {},
+  {},
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  Opts['emits'],
+  PublicProps & { vSlots?: Opts['slots'] },
+  {},
+  false,
+  {},
+  Slots
+> {
+  // eslint-disable-next-line ts/no-unsafe-argument
+  const opts = define({} as any)
+  // eslint-disable-next-line ts/no-unsafe-return, ts/no-unsafe-argument
+  return defineComponent(opts.setup as any, {
+    props: opts.props as unknown as string[],
+    emits: opts.emits as unknown as string[],
+  }) as any
+}
+
+export function props<
+  const Opts extends {
+    props: Record<string, any>
+  },
+  const RuntimeProps extends UnionToTuple<keyof AllUnionFields<Opts['props']>>,
+  // eslint-disable-next-line no-shadow
+>(_opts: Opts, props: NoInfer<RuntimeProps>): NoInfer<RuntimeProps> {
+  return props
+}
+
+export function emits<
+  const Opts extends {
+    emits: ObjectEmitsOptions
+  },
+  const RuntimeEmits extends UnionToTuple<keyof AllUnionFields<Opts['emits']>>,
+  // eslint-disable-next-line no-shadow
+>(_opts: Opts, emits: NoInfer<RuntimeEmits>): NoInfer<RuntimeEmits> {
+  return emits
+}
+
+export function generic<
+  const Opts extends {
+    props: Record<string, any>
+    emits: ObjectEmitsOptions
+    slots: Record<string, any>
+  },
+  Slots extends SlotsType<Partial<Opts['slots']>>,
+  Props extends Opts['props'] & EmitsToProps<Opts['emits']>,
+  Setup extends (
+    props: Props,
+    ctx: SetupContext<Opts['emits'], Slots>,
+  ) => RenderFunction | Promise<RenderFunction>,
+>(_opts: Opts, setup: Setup): NoInfer<Setup> {
+  return setup
+}
+
+// https://github.com/vuejs/language-tools/blob/master/packages/component-type-helpers/index.ts
+type ComponentSlots<T> = T extends new (...args: any) => { $slots: infer S }
+  ? NonNullable<S>
+  : T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }, ...args: any) => any
+    ? NonNullable<S>
+    : {}
+
+export function vSlots<C>(component: C, slots: ComponentSlots<C>) {
+  return slots
+}

package/eslint.config.js

@@ -13,10 +13,6 @@ export default eslintConfig({
     '.output/',
     '.temp/',
     '.data/',
-    'drizzle/',
-    'prisma/generated/',
-    'convex/_generated/',
     'pnpm-lock.yaml',
-    '.playground/',
   ],
 })

package/nuxt.config.ts

@@ -38,6 +38,7 @@ export default defineNuxtConfig({
           noImplicitOverride: true,
           noUncheckedIndexedAccess: true,
         },
+        exclude: ['.playground/'],
       },
       strict: true,
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.33.2",
+  "version": "0.34.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",
@@ -11,7 +11,7 @@
   "main": "./nuxt.config.ts",
   "engines": {
     "node": "24",
-    "pnpm": "10"
+    "pnpm": "11"
   },
   "peerDependencies": {
     "@falcondev-oss/form-core": ">=0.22.4",
@@ -21,11 +21,11 @@
   },
   "dependencies": {
     "@falcondev-oss/trpc-typed-form-data": "^0.4.3",
-    "@falcondev-oss/trpc-vue-query": "^0.5.3",
-    "@iconify-json/lucide": "^1.2.101",
+    "@falcondev-oss/trpc-vue-query": "^0.5.4",
+    "@iconify-json/lucide": "^1.2.103",
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/color-mode": "^4.0.0",
-    "@tanstack/vue-query": "^5.97.0",
+    "@tanstack/vue-query": "^5.100.1",
     "@trpc/client": "^11.16.0",
     "@trpc/server": "^11.16.0",
     "@vue/devtools-api": "^8.1.1",
@@ -36,19 +36,19 @@
     "consola": "^3.4.2",
     "defu": "^6.1.7",
     "maska": "^3.2.0",
-    "reka-ui": "^2.9.5",
+    "reka-ui": "^2.9.6",
     "remeda": "^2.33.7",
     "superjson": "^2.2.6",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.4",
     "trpc-nuxt": "^2.0.2",
-    "type-fest": "^5.5.0",
-    "vue": "^3.5.32",
-    "vue-router": "^5.0.4"
+    "type-fest": "^5.6.0",
+    "vue": "^3.5.33",
+    "vue-router": "^5.0.6"
   },
   "devDependencies": {
     "nuxt": "^4.4.2",
     "typescript": "^5.9.3",
-    "vue-tsc": "^3.2.6",
+    "vue-tsc": "^3.2.7",
     "zod": "^4.3.6"
   },
   "scripts": {