@falcondev-oss/nuxt-layers-base 0.40.3 → 0.41.1

package/app/components/u/URibbonCard.tsx

@@ -0,0 +1,54 @@
+import type { CardProps, CardSlots } from '@nuxt/ui'
+import type { VNode } from 'vue'
+import { useForwardProps } from 'reka-ui'
+import { omit } from 'remeda'
+import { UCard } from '#components'
+import { mergeSlotClass } from '../../utils/ui'
+
+export default defineSetupComponent(
+  (_: {
+    props: CardProps
+    slots: CardSlots & {
+      /** Ribbon strip above the body — fill it with `URibbonSection`s. */
+      ribbon?: () => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'URibbonCard',
+      props: ['as', 'title', 'description', 'variant', 'class', 'ui'],
+      emits: [],
+      inheritAttrs: false,
+      setup: (props, { slots, attrs }) => {
+        const forwarded = useForwardProps(props)
+
+        return () => (
+          <div class="flex flex-col">
+            {slots.ribbon ? (
+              // the ribbon's lower edge runs behind the card, so the card keeps its own rounded top
+              <div
+                class={[
+                  'divide-default ring-default bg-elevated flex items-stretch divide-x overflow-x-auto rounded-t-lg shadow-[inset_0_2px_3px_-2px_rgb(0_0_0/0.06),inset_2px_0_3px_-2px_rgb(0_0_0/0.06),inset_-2px_0_3px_-2px_rgb(0_0_0/0.06)] ring',
+                  slots.default ? '-mb-2 pb-2' : 'rounded-b-lg',
+                ]}
+              >
+                {slots.ribbon()}
+              </div>
+            ) : null}
+
+            {slots.default ? (
+              <UCard
+                {...attrs}
+                {...forwarded.value}
+                ui={{
+                  ...forwarded.value.ui,
+                  body: mergeSlotClass(forwarded.value.ui?.body, 'p-0!'),
+                }}
+                class="relative shadow-[0_-2px_3px_-1px_rgb(0_0_0/0.08)]"
+                v-slots={vSlots(UCard, omit(slots, ['ribbon']))}
+              />
+            ) : null}
+          </div>
+        )
+      },
+    }),
+)

package/app/components/u/URibbonSection.tsx

@@ -0,0 +1,36 @@
+import type { VNode } from 'vue'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      title?: string
+      end?: boolean
+    }
+    slots: {
+      default: () => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'URibbonSection',
+      inheritAttrs: false,
+      props: ['title', 'end'],
+      emits: [],
+      setup:
+        (props, { slots, attrs }) =>
+        () => (
+          <div
+            data-end={props.end || undefined}
+            class={[
+              'flex shrink-0 flex-col gap-1.5 px-3 py-2',
+              props.end &&
+                'border-default [&:not([data-end]~*)]:ml-auto [&:not([data-end]~*)]:border-l',
+            ]}
+          >
+            {props.title ? <p class="text-dimmed text-[10px] leading-none">{props.title}</p> : null}
+            <div class="flex flex-1 flex-wrap items-center gap-1" {...attrs}>
+              {slots.default?.()}
+            </div>
+          </div>
+        ),
+    }),
+)

package/app/components/u/USwitchCard.tsx

@@ -0,0 +1,64 @@
+import type { VNode } from 'vue'
+import { UCard, UIcon, USwitch } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      title: string
+      modelValue: boolean
+      icon?: string
+      loading?: boolean
+      alwaysExpanded?: boolean
+    }
+    emits: {
+      'toggle': (value: boolean, controller: AbortController) => void
+      'update:modelValue': (value: boolean) => void
+    }
+    slots: {
+      default: () => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'USwitchCard',
+      props: ['title', 'modelValue', 'icon', 'loading', 'alwaysExpanded'],
+      emits: ['toggle', 'update:modelValue'],
+      setup: (props, { emit, slots }) => {
+        const expanded = computed(() => props.alwaysExpanded || props.modelValue)
+
+        function onToggle(value: boolean) {
+          const controller = new AbortController()
+          emit('toggle', value, controller)
+          if (controller.signal.aborted) return
+
+          emit('update:modelValue', value)
+        }
+
+        return () => (
+          <UCard
+            class="m-px"
+            variant="subtle"
+            ui={{
+              header: `text-sm font-semibold py-2 px-3! ${expanded.value ? '' : 'border-b-0'}`,
+              body: `p-3! ${expanded.value ? '' : 'hidden'}`,
+            }}
+            v-slots={vSlots(UCard, {
+              header: () => [
+                <div class="flex items-center justify-between gap-8">
+                  <span class="flex items-center gap-2">
+                    {props.icon ? <UIcon name={props.icon} class="text-muted size-5" /> : null}
+                    {props.title}
+                  </span>
+                  <USwitch
+                    modelValue={props.modelValue}
+                    loading={props.loading}
+                    onUpdate:modelValue={(value) => onToggle(value)}
+                  />
+                </div>,
+              ],
+              default: () => slots.default?.() ?? [],
+            })}
+          />
+        )
+      },
+    }),
+)

package/app/components/u/UToggleButton.tsx

@@ -0,0 +1,46 @@
+import { Icon, UButton } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      modelValue: boolean
+      label: string
+      icon: string
+    }
+    emits: { 'update:modelValue': (value: boolean) => void }
+  }) =>
+    options(_, {
+      name: 'UToggleButton',
+      props: ['modelValue', 'label', 'icon'],
+      emits: ['update:modelValue'],
+      setup:
+        (props, { emit }) =>
+        () => (
+          <UButton
+            color="neutral"
+            variant="soft"
+            class={['ring-accented px-1.5! ring', props.modelValue && 'bg-accented']}
+            aria-pressed={props.modelValue}
+            onClick={() => {
+              emit('update:modelValue', !props.modelValue)
+            }}
+          >
+            {{
+              leading: () => (
+                <span
+                  class={[
+                    'flex size-5 items-center justify-center rounded-sm transition-colors',
+                    props.modelValue
+                      ? 'bg-primary text-inverted'
+                      : 'ring-accented text-muted ring inset-ring-0',
+                  ]}
+                >
+                  <Icon name={props.icon} class="size-4" />
+                </span>
+              ),
+              default: () => props.label,
+            }}
+          </UButton>
+        ),
+    }),
+)

package/app/components/util/Define.tsx

@@ -0,0 +1,21 @@
+import type { VNode } from 'vue'
+
+export default defineSetupComponent(
+  <T extends object>(_: {
+    props: {
+      value: T
+    }
+    slots: {
+      default: (props: T) => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'Define',
+      props: ['value'],
+      emits: [],
+      setup:
+        (props, { slots }) =>
+        () =>
+          slots.default?.(props.value),
+    }),
+)

package/app/components/util/SlotRef.tsx

@@ -0,0 +1,21 @@
+import type { ComponentPublicInstance, VNode } from 'vue'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      slotRef?: ComponentPublicInstance
+    }
+    slots: {
+      default: () => VNode[]
+    }
+  }) =>
+    options(_, {
+      name: 'SlotRef',
+      props: ['slotRef'],
+      emits: [],
+      setup: (props) => () => {
+        const slot = props.slotRef?.$slots.default
+        return slot ? h(slot) : null
+      },
+    }),
+)

package/app/components/util/Sync.tsx

@@ -0,0 +1,37 @@
+function renderNothing() {
+  return null
+}
+
+export default defineSetupComponent(
+  <T,>(_: {
+    props: {
+      input: T
+      output: T
+      deep?: boolean
+      once?: boolean
+    }
+    emits: {
+      'update:output': (value: T) => void
+    }
+  }) =>
+    options(_, {
+      name: 'Sync',
+      props: ['input', 'output', 'deep', 'once'],
+      emits: ['update:output'],
+      setup: (props, { emit }) => {
+        watch(
+          () => props.input,
+          () => {
+            emit('update:output', props.input)
+          },
+          {
+            immediate: true,
+            deep: props.deep,
+            once: props.once,
+          },
+        )
+
+        return renderNothing
+      },
+    }),
+)

package/app/components/util/TemplateText.tsx

@@ -0,0 +1,31 @@
+import type { templateParts } from '../../utils/display'
+import { UBadge } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      text: ReturnType<typeof templateParts>
+    }
+  }) =>
+    options(_, {
+      name: 'TemplateText',
+      props: ['text'],
+      emits: [],
+      setup: (props) => () => (
+        <p>
+          {props.text.strings.map((string, index) => (
+            <span key={index}>
+              <span>{string}</span>
+              {props.text.values[index] ? (
+                <strong class="font-semibold">
+                  <UBadge variant="soft" color="neutral" size="lg" class="h-6! p-1! font-semibold">
+                    {props.text.values[index]}
+                  </UBadge>
+                </strong>
+              ) : null}
+            </span>
+          ))}
+        </p>
+      ),
+    }),
+)

package/app/composables/confirm.ts

@@ -1,5 +1,5 @@
 import type { RadioGroupItem } from '@nuxt/ui'
-import type { ConfirmModalProps } from '../components/modals/ConfirmModal.vue'
+import type { ConfirmModalProps } from '../components/modals/ConfirmModal'
 import { LazyConfirmModal } from '#components'
 
 export type ConfirmModalSuccess<O extends RadioGroupItem[]> = 0 extends O['length']

package/app/error.tsx

@@ -0,0 +1,24 @@
+import type { NuxtError } from '#app'
+import { UApp, UError } from '#components'
+
+export default defineSetupComponent(
+  (_: {
+    props: {
+      error: NuxtError
+    }
+  }) =>
+    options(_, {
+      name: 'Error',
+      props: ['error'],
+      emits: [],
+      setup: (props) => {
+        console.error(props.error)
+
+        return () => (
+          <UApp>
+            <UError error={props.error} />
+          </UApp>
+        )
+      },
+    }),
+)

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

@@ -15,11 +15,14 @@ import { defineComponent } from 'vue'
 
 declare module 'vue' {
   interface ComponentCustomProps {
-    // Deliberately loose: this only makes `vSlots` an accepted prop name on every
+    // `v-slots` is what `@vue/babel-plugin-jsx` turns into slot children, so the name has
+    // to be spelled that way to reach the runtime at all.
+    //
+    // Deliberately loose: this only makes `v-slots` an accepted prop name on every
     // component. `Slots` would reject it for any component whose slots are declared as an
     // interface without an index signature (most of @nuxt/ui). The real check is the
     // `vSlots()` helper below, which types the object against the target's own slots.
-    vSlots?: Record<string, any>
+    'v-slots'?: Record<string, any>
   }
 }
 
@@ -29,7 +32,7 @@ interface ComponentTypes {
   slots?: Record<string, any>
   /**
    * Prop names to register when they are deliberately fewer than `keyof props`; the rest
-   * arrive as `attrs`. See `docs/agents/vue-to-tsx-migration.md` for when that is right.
+   * arrive as `attrs`.
    */
   propKeys?: string
   /**
@@ -167,7 +170,7 @@ export function defineSetupComponent<const T extends ComponentTypes>(
   ComponentOptionsMixin,
   Field<T, 'emits'>,
   // `Partial`, to match `SlotsType<Partial<...>>` below and the partial type `vSlots()`
-  PublicProps & { vSlots?: Partial<Field<T, 'slots'>> },
+  PublicProps & { 'v-slots'?: Partial<Field<T, 'slots'>> },
   {},
   false,
   {},
@@ -190,7 +193,38 @@ type ComponentSlots<T> = T extends new (...args: any) => { $slots: infer S }
     ? NonNullable<S>
     : {}
 
-export function vSlots<C>(component: C, slots: ComponentSlots<C>) {
+/**
+ * A slot whose declared type intersects several call signatures, collapsed into one that takes
+ * the intersection of their props.
+ *
+ * `@nuxt/ui` builds `TableSlots` by intersecting a `Record` over header props with one over cell
+ * props, each carrying a `string` index signature. The names those `Record`s spell out keep
+ * their own props, but any other name — a column id that is no key of the row type — resolves to
+ * both signatures at once, which no single function satisfies. Intersecting their props leaves
+ * it writable, and its props inferrable.
+ */
+type MergeSlotSignatures<S> = S extends {
+  (props: infer A): infer R
+  (props: infer B): any
+}
+  ? // a slot declared with one signature matches the pattern too, inferring the same props
+    // twice; rewriting it would turn `() => VNode[]` into `(props: unknown) => VNode[]`
+    Same<A, B> extends true
+    ? S
+    : (props: A & B) => R
+  : S
+
+/** Whether `A` and `B` are the same type, wrapped in tuples so neither side distributes. */
+type Same<A, B> = [A] extends [B] ? ([B] extends [A] ? true : false) : false
+
+export function vSlots<C>(
+  component: C,
+  slots: {
+    [Name in keyof ComponentSlots<C>]?: MergeSlotSignatures<ComponentSlots<C>[Name]>
+  },
+): Partial<ComponentSlots<C>> {
+  // the parameter type only relaxes *how* a slot may be written; what comes back is the target's
+  // own slots, which is what its `v-slots` prop is declared as
   return slots
 }
 

package/nuxt.config.ts

@@ -16,6 +16,14 @@ export default defineNuxtConfig({
   },
 
   // dev
+  vite: {
+    // `@vitejs/plugin-vue-jsx` only wires up HMR for exports whose initializer calls one of
+    // these names. Every component here is `export default defineSetupComponent(...)`, so
+    // without this no module is an HMR boundary and every edit escalates to a full reload.
+    vueJsx: {
+      defineComponentName: ['defineComponent', 'defineSetupComponent'],
+    },
+  },
   typescript: {
     strict: true,
     tsConfig: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.40.3",
+  "version": "0.41.1",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": {
@@ -57,14 +57,15 @@
     "vue-router": "^5.2.0"
   },
   "devDependencies": {
+    "@types/luxon": "^3.7.5",
+    "luxon": "^3.7.2",
     "nuxt": "^4.5.2",
     "typescript": "^5.9.3",
-    "vue-tsc": "^3.3.11",
     "zod": "^4.4.3"
   },
   "scripts": {
     "dev": "nuxi dev .playground",
-    "type-check": "vue-tsc --build",
+    "type-check": "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"
   }

package/app/app.vue

@@ -1,3 +0,0 @@
-<template>
-  <UCustomApp />
-</template>

package/app/components/layout/LayoutAuth.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-defineSlots<{
-  default: any
-}>()
-</script>
-
-<template>
-  <div class="flex min-h-full flex-col items-center justify-center gap-4 p-4">
-    <UPageCard class="w-full max-w-md">
-      <slot />
-    </UPageCard>
-  </div>
-</template>

package/app/components/layout/LayoutNavbar.vue

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import type {
-  BreadcrumbItem,
-  BreadcrumbProps,
-  DashboardNavbarProps,
-  DashboardNavbarSlots,
-  DashboardPanelProps,
-  DashboardToolbarProps,
-  NavigationMenuItem,
-  NavigationMenuProps,
-} from '@nuxt/ui'
-import type { MaybeRefOrGetter, Ref } from 'vue'
-import type { ToolbarTool } from '../../composables/useToolbar'
-import type { AddPropertyPrefix } from '../../types/helpers'
-import * as R from 'remeda'
-import { toolbarToolsKey } from '../../composables/useToolbar'
-import { mergeSlotClass } from '../../utils/ui'
-
-const props = defineProps<{
-  panel?: DashboardPanelProps
-  navbar?: {
-    sidebarToggle?: boolean
-    title?: string
-    breadcrumb?: BreadcrumbItem[]
-    breadcrumbUi?: BreadcrumbProps<BreadcrumbItem>['ui']
-    ui?: DashboardNavbarProps['ui']
-  }
-  tabs?: {
-    items?: NavigationMenuItem[]
-    ui?: NavigationMenuProps['ui']
-  }
-  tools?: {
-    items?: NavigationMenuItem[]
-    ui?: NavigationMenuProps['ui']
-  }
-  toolbarUi?: DashboardToolbarProps['ui']
-}>()
-
-const slots = defineSlots<
-  {
-    'default': any
-    'navbar-title'?: any
-    'navbar-trailing'?: any
-    'navbar-actions'?: any
-  } & AddPropertyPrefix<DashboardNavbarSlots, 'navbar'>
->()
-
-// rendered manually in the `left` slot below
-const omitNavbarSlots = [
-  'navbar-left',
-  'navbar-leading',
-  'navbar-title',
-  'navbar-trailing',
-  'navbar-right',
-  'navbar-actions',
-] satisfies (keyof typeof slots)[]
-const navbarSlots = computed(() =>
-  R.pipe(
-    slots,
-    R.pickBy((_, key) => key.startsWith('navbar-')),
-    R.omit(omitNavbarSlots),
-    R.mapKeys((key) => key.replace('navbar-', '')),
-  ),
-)
-
-// added by the content rendered inside this navbar through `useToolbar()`
-// `ref()`'s deep unwrapping blows up on the recursive `NavigationMenuItem` type
-const providedTools = ref([]) as Ref<MaybeRefOrGetter<ToolbarTool>[]>
-provide(toolbarToolsKey, providedTools)
-
-const toolItems = computed(() => [
-  ...(props.tools?.items ?? []),
-  ...providedTools.value.map((tool) => toValue(tool)),
-])
-
-const navbarUi = computed<DashboardNavbarProps['ui']>(() => ({
-  ...props.navbar?.ui,
-  toggle: mergeSlotClass(props.navbar?.ui?.toggle, '-ml-1'),
-  ...(props.navbar?.breadcrumb && {
-    root: mergeSlotClass(props.navbar.ui?.root, 'h-auto min-h-(--ui-header-height) py-2'),
-  }),
-}))
-</script>
-
-<template>
-  <UDashboardPanel v-bind="panel">
-    <template #header>
-      <ForwardSlots v-if="navbar" :slots="navbarSlots">
-        <UDashboardNavbar :ui="navbarUi" class="bg-white" :title="navbar.title">
-          <template #left>
-            <UDashboardSidebarCollapse v-if="navbar.sidebarToggle" class="-ml-1" />
-
-            <div class="flex min-w-0 flex-col items-start gap-0.5">
-              <div class="flex min-w-0 items-center gap-1.5">
-                <h1 class="text-highlighted truncate font-semibold">
-                  <slot name="navbar-title">{{ navbar.title }}</slot>
-                </h1>
-                <slot name="navbar-trailing" />
-              </div>
-
-              <UBreadcrumb
-                v-if="navbar.breadcrumb"
-                :items="navbar.breadcrumb"
-                :ui="{
-                  ...navbar.breadcrumbUi,
-                  link: mergeSlotClass(navbar.breadcrumbUi?.link, 'text-xs'),
-                  separatorIcon: mergeSlotClass(navbar.breadcrumbUi?.separatorIcon, 'size-3.5'),
-                }"
-              />
-            </div>
-          </template>
-
-          <template #right>
-            <!-- eslint-disable-next-line vue/require-explicit-slots -->
-            <slot name="navbar-right" />
-            <div id="navbar-actions" class="flex items-center gap-2">
-              <slot name="navbar-actions" />
-            </div>
-          </template>
-        </UDashboardNavbar>
-      </ForwardSlots>
-      <UDashboardToolbar
-        v-if="tabs || toolItems.length"
-        :ui="toolbarUi"
-        class="bg-white *:first:-ml-2"
-      >
-        <template #left>
-          <UNavigationMenu v-if="tabs" :items="tabs.items" highlight variant="link" :ui="tabs.ui" />
-          <UNavigationMenu v-else :items="toolItems" highlight :ui="tools?.ui" />
-        </template>
-        <template v-if="tabs" #right>
-          <UNavigationMenu :items="toolItems" highlight :ui="tools?.ui" />
-        </template>
-      </UDashboardToolbar>
-    </template>
-    <template #body>
-      <slot />
-    </template>
-  </UDashboardPanel>
-</template>