@falcondev-oss/nuxt-layers-base 0.38.0 → 0.39.0

package/app/assets/css/base.css

@@ -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/utilities.css

@@ -1,3 +1,7 @@
 @utility z-full {
   z-index: 2147483647;
 }
+
+@utility no-scrollbar {
+  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
+}

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/modals/ConfirmModal.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts" generic="const O extends RadioGroupItem[], R extends ConfirmModalResult<O>">
+import type { ButtonProps, RadioGroupItem, RadioGroupProps } from '@nuxt/ui'
+import type { ComponentPublicInstance } from 'vue'
+import type { ConfirmModalResult } from '~/composables/confirm'
+import type { templateParts } from '~/utils/display'
+
+export type ConfirmModalProps<O extends RadioGroupItem[]> = {
+  title: string
+  confirmLabel: string
+  confirmDisabled?: () => boolean
+  text?: string | ReturnType<typeof templateParts>
+  slotRef?: ComponentPublicInstance
+  options?: O
+  color?: ButtonProps['color']
+}
+
+defineProps<ConfirmModalProps<O>>()
+
+const emit = defineEmits<{
+  close: [result: R]
+}>()
+
+const selectedOption = ref<RadioGroupProps<O>['modelValue']>()
+</script>
+
+<template>
+  <UModal
+    :title
+    :close="{ onClick: () => emit('close', false as R) }"
+    :dismissible="false"
+    :ui="{ header: 'border-b-0!', body: 'pt-0!' }"
+  >
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <p v-if="text && typeof text === 'string'">{{ text }}</p>
+        <TemplateText v-else-if="text && typeof text === 'object'" :text />
+
+        <SlotRef :slot-ref />
+
+        <URadioGroup
+          v-model="selectedOption"
+          :items="options"
+          variant="table"
+          :color="color ?? 'error'"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton
+          color="neutral"
+          variant="soft"
+          label="Abbrechen"
+          @click="() => emit('close', false as R)"
+        />
+        <UButton
+          :color="color ?? 'error'"
+          :label="confirmLabel"
+          :disabled="(!!options?.length && selectedOption === undefined) || confirmDisabled?.()"
+          @click="() => emit('close', (selectedOption ?? true) as R)"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/modals/EntityCrudModal.vue

@@ -0,0 +1,109 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    Schema extends FormSchema,
+    QueryData extends NonNullable<FormSourceValues<Schema>>,
+    Select extends QueryData = QueryData,
+    Id extends string | null = string | null
+  "
+>
+import type { FormSchema, FormSourceValues, FormSubmitValues } from '@falcondev-oss/form-core'
+import type { DefaultError, UseQueryOptions } from '@tanstack/vue-query'
+import type { If, IsNever } from 'type-fest'
+import { useForm } from '@falcondev-oss/form-vue'
+import { useQuery } from '@tanstack/vue-query'
+import modalTheme from '#build/ui/modal'
+
+const props = defineProps<{
+  id: Id
+  name: string
+  schema: Schema
+  getQueryOptions: (
+    id: Id,
+  ) => UseQueryOptions<If<IsNever<Select>, QueryData, any>, DefaultError, Select>
+  newValues: NonNullable<FormSourceValues<Schema>>
+  mutate: (values: FormSubmitValues<Schema> & { id: Id }) => Promise<unknown>
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+defineSlots<{
+  default: (props: { form: ReturnType<typeof useForm<Schema>>; data: typeof data.value }) => any
+}>()
+
+const toast = useToast()
+const appConfig = useAppConfig()
+
+const { data, isLoading } = useQuery(computed(() => props.getQueryOptions(props.id)))
+
+const form = useForm({
+  schema: props.schema,
+  sourceValues: () => {
+    if (isLoading.value) return
+
+    return data.value ?? props.newValues
+  },
+  async submit({ values }) {
+    await props.mutate({
+      ...values,
+      id: props.id,
+    })
+
+    emit('close')
+    toast.add({
+      title: `${props.name} ${props.id ? 'aktualisiert' : 'erstellt'}`,
+      color: 'success',
+      icon: 'lucide:check',
+    })
+  },
+})
+
+const formActionsTeleportId = useId()
+const closeHandle = ref<(() => void) | null>(null)
+
+// const { tryLeave, onLeave } = usePreventLeave()
+// onLeave(() => {
+//   console.warn('leave')
+//   closeHandle.value?.()
+// })
+</script>
+
+<template>
+  <UModal :close="false" :title="`${name} ${id ? 'bearbeiten' : 'erstellen'}`" :dismissible="false">
+    <template #actions>
+      <UButton
+        :class="modalTheme.slots.close"
+        :icon="appConfig.ui.icons.close"
+        color="neutral"
+        variant="ghost"
+        aria-label="Schließen"
+        loading-auto
+        @click="
+          async () => {
+            // if (!(await tryLeave())) return
+            closeHandle?.()
+          }
+        "
+      />
+    </template>
+    <template #body="{ close }">
+      <Sync v-model:output="closeHandle" :input="close" />
+      <UForm
+        class="flex flex-col gap-2"
+        :form
+        :submit-label="id ? 'Speichern' : 'Erstellen'"
+        :actions-teleport-to="`#${formActionsTeleportId}`"
+      >
+        <slot :form :data />
+      </UForm>
+    </template>
+    <template #footer>
+      <div :id="formActionsTeleportId" class="flex w-full justify-end gap-2">
+        <UButton color="neutral" variant="soft" label="Abbrechen" @click="() => emit('close')" />
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/u/USwitchCard.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  title: string
+  icon?: string
+  loading?: boolean
+  alwaysExpanded?: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: [value: boolean, controller: AbortController]
+}>()
+
+defineSlots<{
+  default: () => any
+}>()
+
+const model = defineModel<boolean>({ required: true })
+
+const expanded = computed(() => props.alwaysExpanded || model.value)
+
+function onToggle(value: boolean) {
+  const controller = new AbortController()
+  emit('toggle', value, controller)
+  if (controller.signal.aborted) return
+
+  model.value = value
+}
+</script>
+
+<template>
+  <UCard
+    class="m-px"
+    variant="subtle"
+    :ui="{
+      header: `text-sm font-semibold py-2 px-3! ${expanded ? '' : 'border-b-0'}`,
+      body: `p-3! ${expanded ? '' : 'hidden'}`,
+    }"
+  >
+    <template #header>
+      <div class="flex items-center justify-between gap-8">
+        <span class="flex items-center gap-2">
+          <UIcon v-if="icon" :name="icon" class="text-muted size-5" />
+          {{ title }}
+        </span>
+        <USwitch :model-value="model" :loading @update:model-value="(value) => onToggle(value)" />
+      </div>
+    </template>
+
+    <slot />
+  </UCard>
+</template>

package/app/components/util/SlotRef.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+
+defineProps<{
+  slotRef?: ComponentPublicInstance
+}>()
+
+defineSlots<{
+  default: () => any
+}>()
+</script>
+
+<template>
+  <component :is="slotRef.$slots.default" v-if="slotRef" />
+  <!-- eslint-disable-next-line vue/no-lone-template -->
+  <template v-else />
+</template>

package/app/components/util/TemplateText.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { templateParts } from '~/utils/display'
+
+defineProps<{
+  text: ReturnType<typeof templateParts>
+}>()
+</script>
+
+<template>
+  <p>
+    <span v-for="(string, index) in text.strings" :key="index">
+      <span>{{ string }}</span>
+      <strong v-if="text.values[index]" class="font-semibold">
+        <UBadge variant="soft" color="neutral" size="lg" class="h-6! p-1! font-semibold">
+          {{ text.values[index] }}
+        </UBadge>
+      </strong>
+    </span>
+  </p>
+</template>

package/app/composables/confirm.ts

@@ -0,0 +1,22 @@
+import type { RadioGroupItem } from '@nuxt/ui'
+import type { ConfirmModalProps } from '~/components/modals/ConfirmModal.vue'
+import { LazyConfirmModal } from '#components'
+
+export type ConfirmModalSuccess<O extends RadioGroupItem[]> = 0 extends O['length']
+  ? true
+  : {
+      [K in keyof O]: O[K] extends { value: infer V } ? V : never
+    }[number]
+
+export type ConfirmModalResult<O extends RadioGroupItem[]> = false | ConfirmModalSuccess<O>
+
+export const useConfirm = createGlobalState(() => {
+  const overlay = useOverlay()
+
+  return async <const O extends RadioGroupItem[]>(props: ConfirmModalProps<O>) =>
+    overlay
+      .create(LazyConfirmModal, {
+        destroyOnClose: true,
+      })
+      .open(props).result as Promise<ConfirmModalResult<O>>
+})

package/app/composables/usePreventPageLeave.ts

@@ -1,5 +1,5 @@
 import { onBeforeRouteLeave } from '#app'
-import { useConfirm } from './useConfirm'
+import { useConfirm } from './confirm'
 
 export function usePreventPageLeave(
   preventPageLeave: MaybeRefOrGetter<boolean> = true,
@@ -10,6 +10,7 @@ export function usePreventPageLeave(
 ) {
   useEventListener('beforeunload', (event) => {
     if (!toValue(preventPageLeave)) return
+    // eslint-disable-next-line ts/no-unsafe-member-access
     event.returnValue = opts?.leaveDescription
     return opts?.leaveDescription
   })
@@ -19,11 +20,11 @@ export function usePreventPageLeave(
   onBeforeRouteLeave(async (_, __, next) => {
     if (!toValue(preventPageLeave)) return next()
 
-    const allowLeave = await confirm.confirmDestructive({
+    const allowLeave = await confirm({
       title: opts?.leaveTitle || 'Ungespeicherte Änderungen',
-      description:
+      text:
         opts?.leaveDescription || 'Es gibt ungespeicherte Änderungen. Seite trotzdem verlassen?',
-      submitLabel: 'Verlassen',
+      confirmLabel: 'Verlassen',
     })
     if (allowLeave) return next()
   })

package/app/index.d.ts

@@ -0,0 +1,7 @@
+declare module 'vue' {
+  interface ComponentCustomProps {
+    'aria-label'?: string
+  }
+}
+
+export {}

package/app/utils/display.ts

@@ -1,6 +1,20 @@
-export function formatEurosAmount(amount: number) {
+export function formatEuros(amount: number) {
   return new Intl.NumberFormat('de-DE', {
     style: 'currency',
     currency: 'EUR',
   }).format(amount)
 }
+
+export function pluralize(count: number, singular: string, plural: string) {
+  return count === 1 ? singular : plural
+}
+
+export function templateParts(
+  strings: TemplateStringsArray,
+  ...values: unknown[]
+): { strings: string[]; values: string[] } {
+  return {
+    strings: [...strings],
+    values: values.map(String),
+  }
+}

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

@@ -43,7 +43,19 @@ export default defineNuxtConfig({
       strict: true,
     },
   },
+  components: [
+    {
+      // layer configs resolve `~` against the consuming project, so use absolute paths
+      path: path.join(currentDir, './app/components'),
+      pathPrefix: false,
+    },
+  ],
   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 +72,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.38.0",
+  "version": "0.39.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": {

package/app/composables/useConfirm.ts

@@ -1,16 +0,0 @@
-import { OverlayModalConfirm } from '#components'
-
-export const useConfirm = createGlobalState(() => {
-  const overlay = useOverlay()
-
-  return {
-    confirmDestructive: async (props: {
-      description: string
-      submitLabel: string
-      title: string
-    }) => {
-      const modal = overlay.create(OverlayModalConfirm)
-      return modal.open(props).result as Promise<boolean>
-    },
-  }
-})

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
-}