@falcondev-oss/nuxt-layers-base 0.37.2 → 0.38.1

package/app/assets/css/base.css

@@ -13,7 +13,7 @@
   }
 
   body {
-    background: var(--ui-color-neutral-50);
+    background: color-mix(in oklch, var(--ui-color-neutral-50) 50%, white);
   }
 
   button:not(:disabled),
@@ -28,4 +28,8 @@
   fieldset > label {
     cursor: pointer;
   }
+
+  .iconify {
+    flex-shrink: 0;
+  }
 }

package/app/assets/css/theme.css

@@ -23,6 +23,7 @@
   --color-brand-secondary-900: color-mix(in oklch, var(--color-brand-secondary), black 55%);
   --color-brand-secondary-950: color-mix(in oklch, var(--color-brand-secondary), black 64%);
 
+  /* force usage of Nuxt UI gray classes */
   --color-slate-*: initial;
   --color-gray-*: initial;
   --color-zinc-*: initial;

package/app/assets/css/variants.css

@@ -0,0 +1,3 @@
+@custom-variant self-hover (&[class*="self-hover"]:hover:not(:has([class*="self-hover"]:hover)));
+
+@custom-variant self-focus-within (&[class*="self-focus-within"]:focus-within:not(:has([class*="self-focus-within"]:focus-within)));

package/app/components/ForwardSlots.tsx

@@ -0,0 +1,30 @@
+import type { Component, Slot, VNode } from 'vue'
+
+/**
+ * Passes a set of slot functions on to the component in the default slot.
+ *
+ * Slots can only be declared where a component is written, so forwarding a dynamic set of them has
+ * to happen from the outside: the target's vnode is re-created with `slots` merged into the slots
+ * written inline. Inline slots win on conflict.
+ */
+export default defineSetupComponent(
+  (_: {
+    props: {
+      slots: Record<string, Slot | undefined>
+    }
+    slots: { default: () => VNode[] }
+  }) =>
+    options(_, {
+      props: ['slots'],
+      emits: [],
+      setup: (props, ctx) => () => {
+        const [target] = ctx.slots.default?.() ?? []
+        if (!target) return null
+
+        // dropping `_` makes Vue re-normalize the merged slots instead of treating them as stable
+        const { _: _slotFlag, ...inlineSlots } = (target.children ?? {}) as Record<string, unknown>
+
+        return h(target.type as Component, target.props, { ...props.slots, ...inlineSlots })
+      },
+    }),
+)

package/app/components/layout/LayoutNavbar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type {
+  BreadcrumbItem,
+  BreadcrumbProps,
   DashboardNavbarProps,
   DashboardNavbarSlots,
   DashboardPanelProps,
@@ -7,67 +9,128 @@ import type {
   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'
 
-defineProps<{
+const props = defineProps<{
   panel?: DashboardPanelProps
   navbar?: {
-    showSidebarToggle?: boolean
+    sidebarToggle?: boolean
     title?: string
+    breadcrumb?: BreadcrumbItem[]
+    breadcrumbUi?: BreadcrumbProps<BreadcrumbItem>['ui']
     ui?: DashboardNavbarProps['ui']
   }
-  toolbar?: {
+  tabs?: {
     items?: NavigationMenuItem[]
-    itemsEnd?: NavigationMenuItem[]
-    ui?: DashboardToolbarProps['ui']
-    itemsUi?: NavigationMenuProps['ui']
-    itemsEndUi?: NavigationMenuProps['ui']
+    ui?: NavigationMenuProps['ui']
   }
+  tools?: {
+    items?: NavigationMenuItem[]
+    ui?: NavigationMenuProps['ui']
+  }
+  toolbarUi?: DashboardToolbarProps['ui']
 }>()
 
 const slots = defineSlots<
   {
-    default: any
+    'default': any
+    'navbar-title': any
+    'navbar-trailing': any
+    'navbar-actions': any
   } & AddPropertyPrefix<DashboardNavbarSlots, 'navbar'>
 >()
 
-const omitNavbarSlots = ['navbar-leading'] satisfies (keyof typeof slots)[]
+// 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.keys(),
-    R.pullObject(
-      (key) => key.replace('navbar-', ''),
-      (key) => key,
-    ),
+    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>
-      <UDashboardNavbar v-if="navbar" :ui="navbar.ui" class="bg-white" :title="navbar.title">
-        <template v-if="navbar.showSidebarToggle" #leading>
-          <UDashboardSidebarCollapse />
-        </template>
+      <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>
 
-        <template v-for="(originalName, slotName) in navbarSlots" #[slotName]="slotData">
-          <!-- @vue-ignore -->
-          <slot :name="originalName" v-bind="slotData || {}" />
+              <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>
-      </UDashboardNavbar>
-      <UDashboardToolbar v-if="toolbar" :ui="toolbar.ui" class="bg-white">
-        <UNavigationMenu :items="toolbar.items" highlight :ui="toolbar.itemsUi" />
-        <UNavigationMenu
-          :items="toolbar.itemsEnd"
-          class="ml-auto"
-          highlight
-          :ui="toolbar.itemsEndUi"
-        />
       </UDashboardToolbar>
     </template>
     <template #body>

package/app/components/layout/LayoutSidebar.vue

@@ -2,6 +2,7 @@
 import type {
   ArrayOrNested,
   AvatarProps,
+  DashboardSearchProps,
   DashboardSidebarProps,
   DropdownMenuItem,
   NavigationMenuItem,
@@ -15,6 +16,7 @@ defineProps<{
     src?: string
     iconSrc?: string
   }
+  search?: DashboardSearchProps
   items?: NavigationMenuItem[]
   bottomItems?: NavigationMenuItem[]
   userMenu?: {
@@ -55,18 +57,21 @@ const config = useRuntimeConfig()
         <slot v-if="!collapsed" name="logo">
           <img v-if="logo?.src" class="h-5 w-auto shrink-0" :src="logo.src" />
         </slot>
-        <slot v-if="collapsed || (!logo?.src && !slots.logo)" name="icon">
-          <img
-            v-if="logo?.iconSrc"
-            class="size-5"
-            :src="logo.iconSrc"
-            :class="{
-              'mx-auto': collapsed,
-            }"
-          />
-        </slot>
+        <div v-if="collapsed || (!logo?.src && !slots.logo)" :class="{ 'mx-auto': collapsed }">
+          <slot name="icon">
+            <img v-if="logo?.iconSrc" class="size-5" :src="logo.iconSrc" />
+          </slot>
+        </div>
       </template>
       <template #default="{ collapsed }">
+        <!-- height and negative margins line the border up with the `LayoutNavbar` toolbar's, cancelling the sidebar body's padding -->
+        <div
+          v-if="search"
+          class="border-default -mx-4 -mt-2 -mb-2 flex h-[calc(--spacing(12)+1px)] shrink-0 items-center border-b px-4 sm:max-lg:-mx-6 sm:max-lg:px-6"
+        >
+          <UDashboardSearchButton :collapsed="collapsed" variant="outline" tooltip block />
+        </div>
+
         <UNavigationMenu
           v-if="items"
           :collapsed="collapsed"
@@ -105,6 +110,8 @@ const config = useRuntimeConfig()
       </template>
     </UDashboardSidebar>
 
+    <UDashboardSearch v-if="search" :color-mode="false" v-bind="search" />
+
     <slot />
   </UDashboardGroup>
 </template>

package/app/components/u/URibbonCard.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { CardProps, CardSlots } from '@nuxt/ui'
+import { useForwardProps } from 'reka-ui'
+
+const props = defineProps<CardProps>()
+const slots = defineSlots<
+  CardSlots & {
+    /** Ribbon strip above the body — fill it with `URibbonSection`s. */
+    ribbon?: () => any
+  }
+>()
+
+const forwarded = useForwardProps(props)
+
+const cardSlots = computed(
+  () => Object.keys(slots).filter((name) => name !== 'ribbon') as (keyof CardSlots)[],
+)
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <!-- the ribbon's lower edge runs behind the card, so the card keeps its own rounded top -->
+    <div
+      v-if="slots.ribbon"
+      class="divide-default ring-default bg-elevated -mb-2 flex items-stretch divide-x overflow-x-auto rounded-t-lg pb-2 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"
+    >
+      <slot name="ribbon" />
+    </div>
+
+    <UCard
+      v-bind="forwarded"
+      :ui="{
+        body: 'p-0!',
+        ...forwarded.ui,
+      }"
+      class="ring-accented relative shadow-[0_-2px_3px_-1px_rgb(0_0_0/0.08)]"
+    >
+      <template v-for="name of cardSlots" #[name]>
+        <slot :name />
+      </template>
+    </UCard>
+  </div>
+</template>

package/app/components/u/URibbonSection.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  title?: string
+  end?: boolean
+}>()
+
+defineSlots<{
+  default: () => any
+}>()
+</script>
+
+<template>
+  <div
+    :data-end="end || undefined"
+    class="flex shrink-0 flex-col gap-1.5 px-3 py-2"
+    :class="end && 'border-default [&:not([data-end]~*)]:ml-auto [&:not([data-end]~*)]:border-l'"
+  >
+    <p v-if="title" class="text-dimmed text-[10px] leading-none">
+      {{ title }}
+    </p>
+    <div class="flex flex-1 flex-wrap items-center gap-1" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>

package/app/composables/useStableColumnWidths.ts

@@ -0,0 +1,41 @@
+/**
+ * pins a table's column widths at their measured auto-layout size, so filtering rows out can't
+ * resize the columns underneath the user
+ *
+ * pass the `UTable` template ref — the widths re-measure when the table resizes or a column is
+ * shown or hidden, and `freeze()` re-measures them by hand once late data has rendered
+ */
+export function useStableColumnWidths(
+  table: MaybeRefOrGetter<{ $el?: HTMLElement } | null | undefined>,
+) {
+  const tableEl = computed(() => toValue(table)?.$el?.querySelector('table') ?? null)
+  const headerRow = computed(() => tableEl.value?.tHead?.rows[0] ?? null)
+
+  /** the table width the current widths were measured at */
+  let measuredAt = 0
+
+  function freeze() {
+    const el = tableEl.value
+    const cells = headerRow.value && [...headerRow.value.cells]
+    if (!el || !cells) return
+
+    // measure the natural layout first — the pinned widths would otherwise fix the old one in place
+    el.style.tableLayout = ''
+    for (const cell of cells) cell.style.width = ''
+
+    const widths = cells.map((cell) => cell.getBoundingClientRect().width)
+    for (const [index, cell] of cells.entries()) cell.style.width = `${widths[index]!}px`
+    el.style.tableLayout = 'fixed'
+    measuredAt = el.getBoundingClientRect().width
+  }
+
+  onMounted(freeze)
+  // a resize gives the columns a different share of the table, so they re-measure
+  useResizeObserver(tableEl, () => {
+    if (tableEl.value?.getBoundingClientRect().width !== measuredAt) freeze()
+  })
+  // showing or hiding a column adds or removes header cells, so the pinned widths no longer line up
+  useMutationObserver(headerRow, freeze, { childList: true })
+
+  return { freeze }
+}

package/app/composables/useToolbar.ts

@@ -0,0 +1,42 @@
+import type { NavigationMenuItem } from '@nuxt/ui'
+import type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+
+export type ToolbarTool = NavigationMenuItem
+
+export const toolbarToolsKey = Symbol('toolbar-tools') as InjectionKey<
+  Ref<MaybeRefOrGetter<ToolbarTool>[]>
+>
+
+/**
+ * Tools of the enclosing `LayoutNavbar`'s toolbar, so that anything rendered inside it — a nested
+ * `NuxtPage`, a deeply nested component — can contribute to it. Whoever renders `LayoutNavbar`
+ * itself passes its tools as props instead.
+ */
+export function useToolbar() {
+  const injected = inject(toolbarToolsKey)
+  if (!injected) throw new Error('useToolbar() has to be called inside a `LayoutNavbar`')
+  const toolSources = injected
+
+  /**
+   * Appends a tool to the toolbar. Pass a getter to keep the tool reactive.
+   *
+   * The tool is removed again when the calling scope is disposed, i.e. when the component that
+   * added it unmounts.
+   */
+  function addTool(tool: MaybeRefOrGetter<ToolbarTool>) {
+    toolSources.value.push(tool)
+
+    const remove = () => {
+      const index = toolSources.value.indexOf(tool)
+      if (index !== -1) toolSources.value.splice(index, 1)
+    }
+    onScopeDispose(remove, true)
+
+    return remove
+  }
+
+  return {
+    tools: computed(() => toolSources.value.map((tool) => toValue(tool))),
+    addTool,
+  }
+}

package/app/utils/plugins/helper/request-error.ts

@@ -0,0 +1,82 @@
+import type { TRPCClientError } from '@trpc/client'
+import type { AnyTRPCRouter, TRPC_ERROR_CODE_KEY, TRPCDefaultErrorData } from '@trpc/server'
+import type { ToastOptions } from '../../../composables/useToast'
+import { isTRPCClientError } from '@trpc/client'
+
+export interface ToastOpts {
+  title?: string
+  description?: string
+}
+
+/** a request that never got a response, i.e. `fetch` itself failed (offline, DNS, CORS, …) */
+function isNetworkError(err: unknown) {
+  return isTRPCClientError<AnyTRPCRouter>(err) && !err.meta?.response
+}
+
+/** `AnyTRPCRouter` widens the error shape to `any` */
+function errorData(err: TRPCClientError<AnyTRPCRouter>) {
+  return err.data as TRPCDefaultErrorData | undefined
+}
+
+const retryableHttpStatuses = new Set([408, 425, 429, 502, 503, 504])
+
+export function isRetryableError(err: unknown) {
+  // unknown errors are usually a bug in the query fn, which a retry won't fix
+  if (!isTRPCClientError<AnyTRPCRouter>(err)) return false
+
+  return isNetworkError(err) || retryableHttpStatuses.has(errorData(err)?.httpStatus ?? 0)
+}
+
+/** zod reports its issues as a JSON-encoded list in the error message */
+function isSchemaIssueList(message: string) {
+  if (!message.startsWith('[')) return false
+
+  try {
+    const issues = JSON.parse(message) as unknown[]
+    return (
+      issues.length > 0 &&
+      issues.every((issue) => typeof (issue as { message?: unknown }).message === 'string')
+    )
+  } catch {
+    return false
+  }
+}
+
+const errorTitles: Partial<Record<TRPC_ERROR_CODE_KEY, string>> = {
+  BAD_REQUEST: 'Ungültige Eingabe',
+  UNAUTHORIZED: 'Nicht angemeldet',
+  FORBIDDEN: 'Keine Berechtigung',
+  NOT_FOUND: 'Nicht vorhanden',
+}
+
+function requestErrorToast(err: unknown): ToastOpts {
+  if (isNetworkError(err))
+    return { title: 'Keine Verbindung', description: 'Der Server ist nicht erreichbar.' }
+
+  if (!isTRPCClientError<AnyTRPCRouter>(err)) return { title: 'Unbekannter Fehler' }
+
+  // internal errors leak implementation details and mean nothing to the user
+  if (errorData(err)?.httpStatus === 500) return { title: 'Server-Fehler' }
+
+  const code = errorData(err)?.code
+
+  return {
+    title: (code && errorTitles[code]) ?? 'Anfrage-Fehler',
+    description: isSchemaIssueList(err.message) ? 'Bitte Eingaben überprüfen.' : err.message,
+  }
+}
+
+/** during SSR a toast would be serialized into the payload and pop up after hydration */
+export function toastAdd(opts: ToastOptions) {
+  if (import.meta.server) return
+
+  useToast().add({ duration: 5000, ...opts })
+}
+
+/** toasts a failed request, using `opts` if given, otherwise a generic message */
+export function toastRequestError(err: unknown, opts?: ToastOpts) {
+  toastAdd({
+    preset: 'error',
+    ...(opts ?? requestErrorToast(err)),
+  })
+}

package/app/utils/plugins/index.ts

@@ -0,0 +1,3 @@
+export { requestErrorToastLink, trpcPlugin } from './trpc'
+export { vueQueryPlugin } from './vue-query'
+export type { CustomMeta } from './vue-query'

package/app/utils/plugins/trpc.ts

@@ -0,0 +1,120 @@
+import type { OperationLink, TRPCLink } from '@trpc/client'
+import type { AnyTRPCRouter } from '@trpc/server'
+import type { FetchOptions } from 'ofetch'
+import type { ObjectPlugin } from '#app'
+import { typedFormDataLink } from '@falcondev-oss/trpc-typed-form-data/client'
+import { createTRPCVueQueryClient, vueQueryContext } from '@falcondev-oss/trpc-vue-query'
+import { useQueryClient } from '@tanstack/vue-query'
+import { httpSubscriptionLink, splitLink } from '@trpc/client'
+import { observable } from '@trpc/server/observable'
+import superjsonDefault from 'superjson'
+import { httpBatchLink, httpLink } from 'trpc-nuxt/client'
+import { toastRequestError } from './helper/request-error'
+
+/**
+ * Toasts errors of requests that vue-query doesn't handle itself, i.e. plain
+ * `.query()` / `.mutate()` calls. Requests made through vue-query get their toast
+ * from the query/mutation cache instead.
+ */
+const toastRequestErrors: OperationLink<AnyTRPCRouter> = ({ op, next }) =>
+  observable((observer) => {
+    const subscription = next(op).subscribe({
+      next: (value) => observer.next(value),
+      complete: () => observer.complete(),
+      error(err) {
+        if (!op.context[vueQueryContext] && op.type !== 'subscription') {
+          console.error(err)
+          toastRequestError(err)
+        }
+
+        observer.error(err)
+      },
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  })
+export const requestErrorToastLink: TRPCLink<AnyTRPCRouter> = () => toastRequestErrors
+
+interface TrpcNuxtPluginOptions {
+  url: string
+  /**
+   * ofetch options passed to the HTTP links.
+   * @see https://github.com/unjs/ofetch
+   */
+  fetchOptions?: FetchOptions
+  /**
+   * ofetch options for queries, merged over `fetchOptions`.
+   */
+  queryFetchOptions?: FetchOptions
+  /**
+   * ofetch options for mutations, merged over `fetchOptions`.
+   */
+  mutationFetchOptions?: FetchOptions
+  /**
+   * Custom superjson instance, e.g. one with registered custom transformers.
+   * @default superjson
+   */
+  transformer?: typeof superjsonDefault
+  /**
+   * Batching options passed to the `httpBatchLink`.
+   */
+  batchOptions?: {
+    maxURLLength?: number
+    maxItems?: number
+    methodOverride?: 'POST'
+  }
+}
+export function trpcPlugin<Router extends AnyTRPCRouter>(opts: TrpcNuxtPluginOptions) {
+  return {
+    name: 'trpc',
+    // eslint-disable-next-line ts/no-unsafe-assignment
+    dependsOn: ['vue-query'] as any,
+    setup() {
+      const queryClient = useQueryClient()
+      const headers = useRequestHeaders()
+      const superjson = opts.transformer ?? superjsonDefault
+
+      const trpc = createTRPCVueQueryClient<Router>({
+        queryClient,
+        trpc: {
+          links: [
+            requestErrorToastLink,
+            typedFormDataLink<AnyTRPCRouter>({ transformer: superjson }),
+            splitLink({
+              condition: (op) => op.type === 'subscription',
+              true: httpSubscriptionLink({
+                url: opts.url,
+                transformer: superjson,
+              }),
+              false: splitLink({
+                condition: (op) => op.type === 'mutation',
+                true: httpLink({
+                  transformer: superjson,
+                  url: opts.url,
+                  headers,
+                  fetchOptions: { ...opts.fetchOptions, ...opts.mutationFetchOptions },
+                }),
+                false: httpBatchLink({
+                  transformer: superjson,
+                  url: opts.url,
+                  headers,
+                  maxURLLength: 2000,
+                  ...opts.batchOptions,
+                  fetchOptions: { ...opts.fetchOptions, ...opts.queryFetchOptions },
+                }),
+              }),
+            }),
+          ],
+        },
+      })
+
+      return {
+        provide: {
+          trpc,
+        },
+      }
+    },
+  } satisfies ObjectPlugin
+}

package/app/utils/plugins/vue-query.ts

@@ -0,0 +1,131 @@
+import type {
+  DefaultOptions,
+  DehydratedState,
+  QueryClientConfig,
+  VueQueryPluginOptions,
+} from '@tanstack/vue-query'
+import type { ObjectPlugin } from '#app'
+import type { ToastOpts } from './helper/request-error'
+import {
+  dehydrate,
+  hydrate,
+  MutationCache,
+  QueryCache,
+  QueryClient,
+  useIsFetching,
+  VueQueryPlugin,
+} from '@tanstack/vue-query'
+import defu from 'defu'
+import { useState } from '#app'
+import { isRetryableError, toastAdd, toastRequestError } from './helper/request-error'
+
+interface VueQueryNuxtPluginOptions {
+  queryDefaultOptions?: DefaultOptions
+  vuePluginOptions?: VueQueryPluginOptions
+}
+
+export interface CustomMeta {
+  queryMeta: {
+    toast?: {
+      error?: ToastOpts
+    }
+  }
+  mutationMeta: {
+    toast?: {
+      success?: ToastOpts
+      error?: ToastOpts
+    }
+  }
+}
+
+declare module '@tanstack/vue-query' {
+  interface Register extends CustomMeta {}
+}
+
+export function vueQueryPlugin(opts?: VueQueryNuxtPluginOptions) {
+  return {
+    name: 'vue-query',
+    setup(nuxt) {
+      const vueQueryState = useState<Partial<DehydratedState>>('vue-query', () => ({}))
+
+      const queryClient = new QueryClient(
+        defu<QueryClientConfig, QueryClientConfig[]>(
+          { defaultOptions: opts?.queryDefaultOptions },
+          {
+            defaultOptions: {
+              queries: {
+                retry(failureCount, error) {
+                  if (!isRetryableError(error)) return false
+
+                  return failureCount < 3
+                },
+              },
+            },
+            queryCache: new QueryCache({
+              onError(err, query) {
+                console.error(err)
+
+                toastRequestError(err, query.meta?.toast?.error)
+              },
+            }),
+            mutationCache: new MutationCache({
+              onSuccess(_res, _input, _onMutateRes, mutation) {
+                if (mutation.meta?.toast?.success) {
+                  toastAdd({
+                    preset: 'success',
+                    ...mutation.meta.toast.success,
+                  })
+                }
+              },
+              onError(err, _input, __onMutateRes, mutation) {
+                console.error(err)
+
+                toastRequestError(err, mutation.meta?.toast?.error)
+              },
+            }),
+          },
+        ),
+      )
+
+      const options: VueQueryPluginOptions = { queryClient, ...opts?.vuePluginOptions }
+      nuxt.vueApp.use(VueQueryPlugin, options)
+
+      if (import.meta.server) {
+        nuxt.hooks.hook('app:rendered', () => {
+          try {
+            vueQueryState.value = dehydrate(queryClient)
+          } catch (err) {
+            console.error('[vue-query] dehydrating state failed:', err)
+          }
+        })
+      }
+
+      if (import.meta.client) {
+        nuxt.hooks.hook('app:created', () => {
+          try {
+            hydrate(queryClient, vueQueryState.value)
+          } catch (err) {
+            console.error('[vue-query] hydrating state failed:', err)
+          }
+        })
+      }
+
+      // global nuxt loading indicator
+      const loadingIndicator = useLoadingIndicator()
+      const isFetching = useIsFetching()
+
+      let timeout: ReturnType<typeof setTimeout> | null = null
+      watch(isFetching, () => {
+        if (isFetching.value > 0) {
+          loadingIndicator.start()
+          timeout = setTimeout(() => {
+            loadingIndicator.set(0)
+          }, 300)
+        } else {
+          if (timeout) clearTimeout(timeout)
+          loadingIndicator.finish()
+        }
+      })
+    },
+  } satisfies ObjectPlugin
+}

package/nuxt.config.ts

@@ -44,6 +44,11 @@ export default defineNuxtConfig({
     },
   },
   imports: {
+    dirs: [
+      // layer configs resolve `~` against the consuming project, so use absolute paths
+      path.join(currentDir, './app/types'),
+      path.join(currentDir, './app/utils/*/index.ts'),
+    ],
     imports: [
       {
         from: '@falcondev-oss/form-vue',
@@ -60,6 +65,10 @@ export default defineNuxtConfig({
       },
     ],
   },
+  sourcemap: {
+    client: 'hidden',
+    server: true,
+  },
 
   // runtime
   experimental: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.37.2",
+  "version": "0.38.1",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": {

package/app/components/u/UTableCard.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { CardProps, CardSlots } from '@nuxt/ui'
-import { useForwardProps } from 'reka-ui'
-const props = defineProps<CardProps>()
-const slots = defineSlots<CardSlots>()
-
-const forwarded = useForwardProps(props)
-</script>
-
-<template>
-  <UCard
-    v-bind="forwarded"
-    :ui="{
-      body: 'p-0!',
-      ...forwarded.ui,
-    }"
-  >
-    <template v-for="(_, name) of slots" #[name]>
-      <slot :name />
-    </template>
-  </UCard>
-</template>

package/app/pages/index.vue

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

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

@@ -1,55 +0,0 @@
-/* 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/plugins.ts

@@ -1,295 +0,0 @@
-import type { DehydratedState, QueryClientConfig, VueQueryPluginOptions } from '@tanstack/vue-query'
-import type { OperationLink, TRPCClientError, TRPCLink } from '@trpc/client'
-import type { AnyTRPCRouter, TRPC_ERROR_CODE_KEY, TRPCDefaultErrorData } from '@trpc/server'
-import type { FetchOptions } from 'ofetch'
-import type { ObjectPlugin } from '#app'
-import type { ToastOptions } from '../composables/useToast'
-import { typedFormDataLink } from '@falcondev-oss/trpc-typed-form-data/client'
-import { createTRPCVueQueryClient, vueQueryContext } from '@falcondev-oss/trpc-vue-query'
-import {
-  dehydrate,
-  hydrate,
-  MutationCache,
-  QueryCache,
-  QueryClient,
-  useIsFetching,
-  useQueryClient,
-  VueQueryPlugin,
-} from '@tanstack/vue-query'
-import { httpSubscriptionLink, isTRPCClientError, splitLink } from '@trpc/client'
-import { observable } from '@trpc/server/observable'
-import defu from 'defu'
-import superjson from 'superjson'
-import { httpBatchLink, httpLink } from 'trpc-nuxt/client'
-import { useState } from '#app'
-
-interface VueQueryNuxtPluginOptions {
-  queryClientOptions?: QueryClientConfig
-  vuePluginOptions?: VueQueryPluginOptions
-}
-
-interface ToastOpts {
-  title?: string
-  description?: string
-}
-
-export interface CustomMeta {
-  queryMeta: {
-    toast?: {
-      error?: ToastOpts
-    }
-  }
-  mutationMeta: {
-    toast?: {
-      success?: ToastOpts
-      error?: ToastOpts
-    }
-  }
-}
-
-declare module '@tanstack/vue-query' {
-  interface Register extends CustomMeta {}
-}
-
-/** a request that never got a response, i.e. `fetch` itself failed (offline, DNS, CORS, …) */
-function isNetworkError(err: unknown) {
-  return isTRPCClientError<AnyTRPCRouter>(err) && !err.meta?.response
-}
-
-/** `AnyTRPCRouter` widens the error shape to `any` */
-function errorData(err: TRPCClientError<AnyTRPCRouter>) {
-  return err.data as TRPCDefaultErrorData | undefined
-}
-
-const retryableHttpStatuses = new Set([408, 425, 429, 502, 503, 504])
-
-function isRetryableError(err: unknown) {
-  // unknown errors are usually a bug in the query fn, which a retry won't fix
-  if (!isTRPCClientError<AnyTRPCRouter>(err)) return false
-
-  return isNetworkError(err) || retryableHttpStatuses.has(errorData(err)?.httpStatus ?? 0)
-}
-
-/** zod reports its issues as a JSON-encoded list in the error message */
-function isSchemaIssueList(message: string) {
-  if (!message.startsWith('[')) return false
-
-  try {
-    const issues = JSON.parse(message) as unknown[]
-    return (
-      issues.length > 0 &&
-      issues.every((issue) => typeof (issue as { message?: unknown }).message === 'string')
-    )
-  } catch {
-    return false
-  }
-}
-
-const errorTitles: Partial<Record<TRPC_ERROR_CODE_KEY, string>> = {
-  BAD_REQUEST: 'Ungültige Eingabe',
-  UNAUTHORIZED: 'Nicht angemeldet',
-  FORBIDDEN: 'Keine Berechtigung',
-  NOT_FOUND: 'Nicht vorhanden',
-}
-
-function requestErrorToast(err: unknown): ToastOpts {
-  if (isNetworkError(err))
-    return { title: 'Keine Verbindung', description: 'Der Server ist nicht erreichbar.' }
-
-  if (!isTRPCClientError<AnyTRPCRouter>(err)) return { title: 'Unbekannter Fehler' }
-
-  // internal errors leak implementation details and mean nothing to the user
-  if (errorData(err)?.httpStatus === 500) return { title: 'Server-Fehler' }
-
-  const code = errorData(err)?.code
-
-  return {
-    title: (code && errorTitles[code]) ?? 'Anfrage-Fehler',
-    description: isSchemaIssueList(err.message) ? 'Bitte Eingaben überprüfen.' : err.message,
-  }
-}
-
-/** during SSR a toast would be serialized into the payload and pop up after hydration */
-function toastAdd(opts: ToastOptions) {
-  if (import.meta.server) return
-
-  useToast().add({ duration: 5000, ...opts })
-}
-
-/** toasts a failed request, using `opts` if given, otherwise a generic message */
-function toastRequestError(err: unknown, opts?: ToastOpts) {
-  toastAdd({
-    preset: 'error',
-    ...(opts ?? requestErrorToast(err)),
-  })
-}
-
-export function vueQueryPlugin(opts?: VueQueryNuxtPluginOptions) {
-  return {
-    name: 'vue-query',
-    setup(nuxt) {
-      const vueQueryState = useState<Partial<DehydratedState>>('vue-query', () => ({}))
-
-      const queryClient = new QueryClient(
-        defu<QueryClientConfig, QueryClientConfig[]>(opts?.queryClientOptions, {
-          defaultOptions: {
-            queries: {
-              retry(failureCount, error) {
-                if (!isRetryableError(error)) return false
-
-                return failureCount < 3
-              },
-            },
-          },
-          queryCache: new QueryCache({
-            onError(err, query) {
-              console.error(err)
-
-              toastRequestError(err, query.meta?.toast?.error)
-            },
-          }),
-          mutationCache: new MutationCache({
-            onSuccess(_res, _input, _onMutateRes, mutation) {
-              if (mutation.meta?.toast?.success) {
-                toastAdd({
-                  preset: 'success',
-                  ...mutation.meta.toast.success,
-                })
-              }
-            },
-            onError(err, _input, __onMutateRes, mutation) {
-              console.error(err)
-
-              toastRequestError(err, mutation.meta?.toast?.error)
-            },
-          }),
-        }),
-      )
-
-      const options: VueQueryPluginOptions = { queryClient, ...opts?.vuePluginOptions }
-      nuxt.vueApp.use(VueQueryPlugin, options)
-
-      if (import.meta.server) {
-        nuxt.hooks.hook('app:rendered', () => {
-          try {
-            vueQueryState.value = dehydrate(queryClient)
-          } catch (err) {
-            console.error('[vue-query] dehydrating state failed:', err)
-          }
-        })
-      }
-
-      if (import.meta.client) {
-        nuxt.hooks.hook('app:created', () => {
-          try {
-            hydrate(queryClient, vueQueryState.value)
-          } catch (err) {
-            console.error('[vue-query] hydrating state failed:', err)
-          }
-        })
-      }
-
-      // global nuxt loading indicator
-      const loadingIndicator = useLoadingIndicator()
-      const isFetching = useIsFetching()
-
-      let timeout: ReturnType<typeof setTimeout> | null = null
-      watch(isFetching, () => {
-        if (isFetching.value > 0) {
-          loadingIndicator.start()
-          timeout = setTimeout(() => {
-            loadingIndicator.set(0)
-          }, 300)
-        } else {
-          if (timeout) clearTimeout(timeout)
-          loadingIndicator.finish()
-        }
-      })
-    },
-  } satisfies ObjectPlugin
-}
-
-/**
- * Toasts errors of requests that vue-query doesn't handle itself, i.e. plain
- * `.query()` / `.mutate()` calls. Requests made through vue-query get their toast
- * from the query/mutation cache instead.
- */
-const toastRequestErrors: OperationLink<AnyTRPCRouter> = ({ op, next }) =>
-  observable((observer) => {
-    const subscription = next(op).subscribe({
-      next: (value) => observer.next(value),
-      complete: () => observer.complete(),
-      error(err) {
-        if (!op.context[vueQueryContext] && op.type !== 'subscription') {
-          console.error(err)
-          toastRequestError(err)
-        }
-
-        observer.error(err)
-      },
-    })
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  })
-export const requestErrorToastLink: TRPCLink<AnyTRPCRouter> = () => toastRequestErrors
-
-interface TrpcNuxtPluginOptions {
-  url: string
-  /**
-   * ofetch options passed to the HTTP links.
-   * @see https://github.com/unjs/ofetch
-   */
-  fetchOptions?: FetchOptions
-}
-export function trpcPlugin<Router extends AnyTRPCRouter>(opts: TrpcNuxtPluginOptions) {
-  return {
-    name: 'trpc',
-    // eslint-disable-next-line ts/no-unsafe-assignment
-    dependsOn: ['vue-query'] as any,
-    setup() {
-      const queryClient = useQueryClient()
-
-      const trpc = createTRPCVueQueryClient<Router>({
-        queryClient,
-        trpc: {
-          links: [
-            requestErrorToastLink,
-            splitLink({
-              condition: (op) => op.type === 'subscription',
-              true: httpSubscriptionLink({
-                url: opts.url,
-                transformer: superjson,
-              }),
-              false: splitLink({
-                condition: (op) => op.type === 'mutation',
-                true: [
-                  typedFormDataLink<AnyTRPCRouter>({
-                    transformer: superjson,
-                  }),
-                  httpLink({
-                    transformer: superjson,
-                    url: opts.url,
-                    fetchOptions: opts.fetchOptions,
-                  }),
-                ],
-                false: httpBatchLink({
-                  transformer: superjson,
-                  url: opts.url,
-                  maxURLLength: 2000,
-                  fetchOptions: opts.fetchOptions,
-                }),
-              }),
-            }),
-          ],
-        },
-      })
-      return {
-        provide: {
-          trpc,
-        },
-      }
-    },
-  } satisfies ObjectPlugin
-}