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

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

@@ -0,0 +1,89 @@
+// import type { VNode } from 'vue'
+// import { UCard, UDropdownMenu, UField, UForm, UInput } from '#components'
+// import { z } from 'zod'
+
+/* eslint-disable ts/no-empty-object-type */
+// @ts-expect-error FIXME: empty emits causes type error
+export default defineSetupComponent((_: { props: { name: string }; emits: {}; slots: {} }) => ({
+  props: props(_, ['name']),
+  emits: emits(_, []),
+  setup: (props) => {
+    console.log(props)
+    // 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,58 @@
+import { UButton, UCard } from '#components'
+import { setup } from '../../../app/utils/define-setup-component'
+
+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: setup(_, (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/components/layout/LayoutSidebar.vue

@@ -7,6 +7,7 @@ import type {
   NavigationMenuItem,
   NavigationMenuProps,
 } from '@nuxt/ui'
+import { mergeSlotClass } from '~/utils/ui'
 
 defineProps<{
   sidebar?: DashboardSidebarProps
@@ -43,8 +44,8 @@ const config = useRuntimeConfig()
       collapsible
       :ui="{
         ...sidebar?.ui,
-        header: [sidebar?.ui?.header, 'border-b border-default'],
-        footer: [sidebar?.ui?.footer, 'border-t border-default'],
+        header: mergeSlotClass(sidebar?.ui?.header, 'border-b border-default'),
+        footer: mergeSlotClass(sidebar?.ui?.footer, 'border-t border-default'),
       }"
     >
       <template

package/app/components/u/UField.vue

@@ -4,6 +4,7 @@ import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useForwardProps } from 'reka-ui'
 import * as R from 'remeda'
+import { mergeSlotClass } from '~/utils/ui'
 
 type InputProps<T> = {
   'modelValue': T
@@ -99,8 +100,8 @@ const [DefineErrorTemplate, ErrorTemplate] = createReusableTemplate({
     v-bind="formFieldProps"
     :ui="{
       ...formFieldProps.ui,
-      hint: [formFieldProps.ui?.hint, isOverMaxLength ? 'text-error' : ''],
-      error: [formFieldProps.ui?.error, 'mt-1!'],
+      hint: mergeSlotClass(formFieldProps.ui?.hint, isOverMaxLength ? 'text-error' : ''),
+      error: mergeSlotClass(formFieldProps.ui?.error, 'mt-1!'),
     }"
     :error="!!field.errors"
     :class="props.class"

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,113 @@
+/* eslint-disable ts/no-empty-object-type */
+import type { AllUnionFields, 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 setup<
+  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>,
+  // eslint-disable-next-line no-shadow
+>(_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/app/utils/ui.ts

@@ -0,0 +1,13 @@
+import type { SlotClass, SlotClassReplacer } from '@nuxt/ui'
+import type { ClassValue } from 'tailwind-variants'
+import { cnMerge } from 'tailwind-variants'
+
+export function mergeSlotClass(ui: SlotClass, extend: ClassValue): SlotClassReplacer {
+  return (defaults) => {
+    const withBase = cnMerge(defaults, extend)() ?? ''
+    if (typeof ui === 'function') {
+      return ui(withBase)
+    }
+    return cnMerge(withBase, ui)() ?? ''
+  }
+}

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,59 +1,62 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.33.2",
+  "version": "0.35.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
-  "repository": "github:falcondev-oss/nuxt-layers",
+  "repository": {
+    "type": "git",
+    "url": "github:falcondev-oss/nuxt-layers"
+  },
   "bugs": {
     "url": "https://github.com/falcondev-oss/nuxt-layers/issues"
   },
   "main": "./nuxt.config.ts",
   "engines": {
     "node": "24",
-    "pnpm": "10"
+    "pnpm": "11"
   },
   "peerDependencies": {
-    "@falcondev-oss/form-core": ">=0.22.4",
-    "@falcondev-oss/form-vue": ">=0.22.4",
-    "@internationalized/date": ">=3.12.0",
-    "@nuxt/ui": ">=4.6.1"
+    "@falcondev-oss/form-core": ">=0.23.5",
+    "@falcondev-oss/form-vue": ">=0.23.5",
+    "@internationalized/date": ">=3.12.1",
+    "@nuxt/ui": ">=4.9.0",
+    "reka-ui": ">=2.9.10",
+    "tailwind-variants": ">=3.2.2"
   },
   "dependencies": {
     "@falcondev-oss/trpc-typed-form-data": "^0.4.3",
-    "@falcondev-oss/trpc-vue-query": "^0.5.3",
-    "@iconify-json/lucide": "^1.2.101",
-    "@nuxt/icon": "^2.2.1",
-    "@nuxtjs/color-mode": "^4.0.0",
-    "@tanstack/vue-query": "^5.97.0",
-    "@trpc/client": "^11.16.0",
-    "@trpc/server": "^11.16.0",
-    "@vue/devtools-api": "^8.1.1",
-    "@vueuse/core": "^14.2.1",
-    "@vueuse/nuxt": "^14.2.1",
-    "@vueuse/router": "^14.2.1",
+    "@falcondev-oss/trpc-vue-query": "^0.5.4",
+    "@iconify-json/lucide": "^1.2.114",
+    "@nuxt/icon": "^2.2.3",
+    "@nuxtjs/color-mode": "^4.0.1",
+    "@tanstack/vue-query": "^5.101.0",
+    "@trpc/client": "^11.18.0",
+    "@trpc/server": "^11.18.0",
+    "@vue/devtools-api": "^8.1.3",
+    "@vueuse/core": "^14.3.0",
+    "@vueuse/nuxt": "^14.3.0",
+    "@vueuse/router": "^14.3.0",
     "arkregex": "^0.0.5",
     "consola": "^3.4.2",
     "defu": "^6.1.7",
     "maska": "^3.2.0",
-    "reka-ui": "^2.9.5",
-    "remeda": "^2.33.7",
+    "remeda": "^2.39.0",
     "superjson": "^2.2.6",
-    "tailwindcss": "^4.2.2",
-    "trpc-nuxt": "^2.0.2",
-    "type-fest": "^5.5.0",
-    "vue": "^3.5.32",
-    "vue-router": "^5.0.4"
+    "tailwindcss": "^4.3.1",
+    "trpc-nuxt": "^2.1.1",
+    "type-fest": "^5.7.0",
+    "vue": "^3.5.38",
+    "vue-router": "^5.1.0"
   },
   "devDependencies": {
-    "nuxt": "^4.4.2",
+    "nuxt": "^4.4.8",
     "typescript": "^5.9.3",
-    "vue-tsc": "^3.2.6",
-    "zod": "^4.3.6"
+    "vue-tsc": "^3.3.5",
+    "zod": "^4.4.3"
   },
   "scripts": {
     "dev": "nuxi dev .playground",
-    "dev:prepare": "nuxt prepare .playground",
     "type-check": "vue-tsc --build",
     "lint": "pnpm -w eslint:cmd \"$PWD\" && pnpm -w prettier:cmd \"$PWD\" --check",
     "lint:fix": "pnpm -w eslint:cmd \"$PWD\" --fix && pnpm -w prettier:cmd \"$PWD\" --write"