@falcondev-oss/nuxt-layers-base 0.1.0 → 0.2.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 falconDev OSS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/app/assets/css/utilities.css

@@ -0,0 +1,3 @@
+@utility z-full {
+  z-index: 2147483647;
+}

package/app/components/Define.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts" generic="T extends object">
+defineProps<{
+  value: T
+}>()
+
+defineSlots<{
+  default: (props: T) => any
+}>()
+</script>
+
+<template>
+  <slot v-bind="value" />
+</template>

package/app/components/layout/LayoutDashboard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ButtonProps, NavigationMenuItem } from '@nuxt/ui'
+import type { NavigationMenuItem } from '@nuxt/ui'
 
 defineProps<{
   sidebar?: {

package/app/components/u/UField.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts" generic="T">
 import type { FormField } from '@falcondev-oss/form-core'
-import type { FormFieldProps } from '@nuxt/ui'
+import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui'
 import type { ModelModifiers } from '@nuxt/ui/runtime/types/input.js'
 import { useForwardProps } from 'reka-ui'
+import { omit } from 'remeda'
 
 type FieldSlotProps<T> = {
   'modelValue': T
@@ -18,15 +19,16 @@ const props = defineProps<
     field: FormField<T>
   }
 >()
-defineSlots<{
-  default: (props: Omit<FieldSlotProps<T>, 'modelModifiers'>) => any
-}>()
+const slots = defineSlots<
+  {
+    default: (props: Omit<FieldSlotProps<T>, 'modelModifiers'>) => any
+  } & Omit<FormFieldSlots, 'default'>
+>()
 
 const forwardedProps = useForwardProps(props)
 
 const formFieldProps = computed(() => {
   const { field, ...rest } = forwardedProps.value
-
   return rest
 })
 
@@ -50,6 +52,15 @@ const slotProps = computed(
     v-bind="formFieldProps"
     :error="forwardedProps.field.errors && forwardedProps.field.errors.join('\n')"
   >
-    <slot v-bind="slotProps" />
+    <slot v-bind="slotProps">
+      <DevOnly>
+        <p class="font-black text-red-500">UField missing slot</p>
+      </DevOnly>
+    </slot>
+
+    <template v-for="(_, name) in omit(slots, ['default'])" #[name]="slotData">
+      <!-- @vue-ignore -->
+      <slot :name="name" v-bind="slotData || {}" />
+    </template>
   </UFormField>
 </template>

package/app/components/u/UForm.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { Toast } from '#ui/composables'
+import type { FormHandle } from '@falcondev-oss/form-core'
+import type { ButtonProps } from '@nuxt/ui'
+
+const props = withDefaults(
+  defineProps<{
+    submitLabel?: string
+    submitButtonProps?: ButtonProps
+    actions?: ButtonProps[]
+    form: FormHandle
+    disableSubmitIfUnchanged?: boolean
+    successToast?: Partial<Toast>
+    preventPageLeave?: boolean
+  }>(),
+  {
+    disableSubmitIfUnchanged: true,
+    preventPageLeave: true,
+  },
+)
+
+defineSlots<{
+  default: any
+}>()
+
+usePreventPageLeave(() => props.preventPageLeave && props.form.isChanged && !props.form.isLoading)
+
+const toast = useToast()
+let unhook: (() => void) | null = null
+watch(
+  () => props.form,
+  (form) => {
+    unhook?.()
+    unhook = form.hooks.addHooks({
+      afterSubmit(result) {
+        if (!result.success || !props.successToast) return
+
+        toast.add({
+          preset: 'success',
+          ...props.successToast,
+        })
+      },
+    })
+  },
+  {
+    immediate: true,
+  },
+)
+
+const actionsWithSubmit = computed(() => {
+  const submit = {
+    ...props.submitButtonProps,
+    variant: 'solid',
+    label: props.submitButtonProps?.label ?? props.submitLabel ?? 'Submit',
+    disabled: props.disableSubmitIfUnchanged
+      ? !props.form.isChanged || props.form.isLoading
+      : props.form.isLoading,
+    loading: props.form.isLoading,
+    onClick: async () => {
+      await props.form.submit()
+    },
+  } satisfies ButtonProps
+  if (!props.actions) return [submit]
+
+  return [...props.actions, submit]
+})
+
+const rootErrors = computed(() => props.form.errors?.filter((error) => error.path?.length === 0))
+</script>
+
+<template>
+  <form class="w-full" @submit.prevent="() => form.submit()">
+    <slot />
+    <div class="col-span-full flex w-full flex-col gap-4">
+      <ul v-if="rootErrors?.length" class="text-error text-sm">
+        <li v-for="error of rootErrors" :key="`${error.path}:${error.message}`">
+          {{ error.path }}:{{ error.message }}
+        </li>
+      </ul>
+      <div class="flex items-center justify-end gap-4">
+        <UActions
+          :defaults="{
+            variant: 'subtle',
+          }"
+          :actions="actionsWithSubmit"
+        />
+      </div>
+    </div>
+  </form>
+</template>

package/app/components/u/UInputDurationMinutes.vue

@@ -83,6 +83,6 @@ const maskOptions: MaskOptions = {
       lazy: true,
     }"
     placeholder="HH:mm"
-    trailing-icon="ph:timer"
+    trailing-icon="lucide:timer"
   />
 </template>

package/app/composables/useTableColumns.tsx

@@ -46,7 +46,7 @@ export function useTableColumns<T extends MaybeRef<Record<string, any>[] | undef
           ]
           if (actions.onDelete)
             rowActions.push({
-              icon: 'ph:trash',
+              icon: 'lucide:trash',
               color: 'error',
               loadingAuto: true,
               onClick: async () => {

package/app/composables/useToast.ts

@@ -4,15 +4,15 @@ import { useToast as useNuxtUiToast } from '#ui/composables'
 const presets = {
   success: {
     color: 'success',
-    icon: 'ph:check-circle',
+    icon: 'lucide:circle-check',
   },
   error: {
     color: 'error',
-    icon: 'ph:x-circle',
+    icon: 'lucide:circle-x',
   },
   warning: {
     color: 'warning',
-    icon: 'ph:warning-circle',
+    icon: 'lucide:circle-alert',
   },
 } as const satisfies Record<string, Partial<Toast>>
 

package/app/utils/debug.ts

@@ -0,0 +1,48 @@
+function mulberry32(seed: number) {
+  return function () {
+    let t = (seed += 0x6d_2b_79_f5)
+    t = Math.imul(t ^ (t >>> 15), t | 1)
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+    return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296
+  }
+}
+
+export function debug(label: string, ...ref: MaybeRefOrGetter<unknown>[]) {
+  let error: Error | undefined
+  try {
+    // eslint-disable-next-line unicorn/error-message
+    throw new Error()
+  } catch (err: unknown) {
+    if (!(err instanceof Error)) return
+    err.name = 'LookAtThisCallstackError'
+    err.stack = err.stack
+      ?.split('\n')
+      .filter((_, i) => [0, 2].includes(i))
+      .join('\n')
+    error = err
+  }
+
+  const random = mulberry32([...label].reduce((acc, c) => acc + c.codePointAt(0)!, 0))()
+
+  watch(
+    () => ref.map(toValue),
+    (value) => {
+      // eslint-disable-next-line no-console
+      console.groupCollapsed(
+        `%c ${label} `,
+        `font-weight: normal !important; background: hsl(${Math.floor(
+          random * 360,
+        )}, 70%, 70%); color: #111;`,
+        ...value,
+      )
+      console.debug(error)
+      // eslint-disable-next-line no-console
+      console.groupEnd()
+    },
+    {
+      immediate: true,
+      flush: 'sync',
+      deep: true,
+    },
+  )
+}

package/app/utils/files.ts

@@ -0,0 +1,22 @@
+export function downloadStringAsFile({
+  content,
+  fileName,
+  contentType,
+}: {
+  content: string | BlobPart
+  fileName: string
+  contentType: string
+}) {
+  const blob = new Blob([content], { type: `${contentType};charset=utf-8` })
+  const url = URL.createObjectURL(blob)
+
+  const a = document.createElement('a')
+  a.href = url
+  a.download = fileName
+  document.body.append(a)
+
+  a.click()
+  a.remove()
+
+  URL.revokeObjectURL(url)
+}

package/app/utils/plugins.ts

@@ -5,27 +5,69 @@ import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query'
 import {
   dehydrate,
   hydrate,
+  MutationCache,
   QueryClient,
   useQueryClient,
   VueQueryPlugin,
 } from '@tanstack/vue-query'
-import { httpSubscriptionLink, splitLink } from '@trpc/client'
+import { httpSubscriptionLink, isTRPCClientError, splitLink, TRPCClientError } from '@trpc/client'
 import defu from 'defu'
 import { useState } from 'nuxt/app'
 import superjson from 'superjson'
 import { httpBatchLink, httpLink } from 'trpc-nuxt/client'
 
 interface VueQueryNuxtPluginOptions {
-  queryClientOptions: QueryClientConfig
+  queryClientOptions?: QueryClientConfig
   vuePluginOptions?: VueQueryPluginOptions
 }
 export function vueQueryPlugin(opts?: VueQueryNuxtPluginOptions) {
   return {
     name: 'vue-query',
     setup(nuxt) {
+      const toast = useToast()
       const vueQueryState = useState<DehydratedState | null>('vue-query')
 
-      const queryClient = new QueryClient(defu(opts?.queryClientOptions, {}))
+      const queryClient = new QueryClient(
+        defu<QueryClientConfig, QueryClientConfig[]>(opts?.queryClientOptions, {
+          defaultOptions: {
+            queries: {
+              experimental_prefetchInRender: true,
+              retry(failureCount, error) {
+                if (
+                  isTRPCClientError<AnyTRPCRouter>(error) &&
+                  error.data &&
+                  // eslint-disable-next-line ts/no-unsafe-member-access
+                  error.data.httpStatus >= 400 &&
+                  // eslint-disable-next-line ts/no-unsafe-member-access
+                  error.data.httpStatus < 500
+                )
+                  return false
+                return failureCount < 3
+              },
+            },
+          },
+          mutationCache: new MutationCache({
+            onError(err) {
+              console.error(err)
+
+              if (err instanceof TRPCClientError) {
+                toast.add({
+                  preset: 'error',
+                  title: 'Request Error',
+                  description: err.message,
+                  duration: 5000,
+                })
+              }
+
+              toast.add({
+                preset: 'error',
+                title: 'An unknown error occurred',
+                duration: 5000,
+              })
+            },
+          }),
+        }),
+      )
       const options: VueQueryPluginOptions = { queryClient, ...opts?.vuePluginOptions }
 
       nuxt.vueApp.use(VueQueryPlugin, options)
@@ -55,7 +97,6 @@ export function trpcPlugin<Router extends AnyTRPCRouter>(opts: TrpcNuxtPluginOpt
     dependsOn: ['vue-query'] as any,
     setup() {
       const queryClient = useQueryClient()
-      const headers = useRequestHeaders()
 
       const trpc = createTRPCVueQueryClient<Router>({
         queryClient,
@@ -72,13 +113,11 @@ export function trpcPlugin<Router extends AnyTRPCRouter>(opts: TrpcNuxtPluginOpt
                 true: httpLink({
                   transformer: superjson,
                   url: opts.url,
-                  headers,
                 }),
                 false: httpBatchLink({
                   transformer: superjson,
                   url: opts.url,
                   maxURLLength: 2000,
-                  headers,
                 }),
               }),
             }),

package/package.json

@@ -1,13 +1,23 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.2",
+  "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
+  "license": "MIT",
+  "repository": "github:falcondev-oss/nuxt-layers",
+  "bugs": {
+    "url": "https://github.com/falcondev-oss/nuxt-layers/issues"
+  },
   "main": "./nuxt.config.ts",
+  "engines": {
+    "node": "24",
+    "pnpm": "10"
+  },
   "dependencies": {
     "@falcondev-oss/form-core": "^0.18.5",
     "@falcondev-oss/form-vue": "^0.18.5",
     "@falcondev-oss/trpc-vue-query": "^0.5.2",
-    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/lucide": "^1.2.2",
     "@internationalized/date": "^3.10.1",
     "@nuxt/icon": "^2.2.0",
     "@nuxt/ui": "4.3.0",
@@ -20,6 +30,7 @@
     "@vueuse/nuxt": "^14.1.0",
     "@vueuse/router": "^14.1.0",
     "arkregex": "^0.0.5",
+    "consola": "^3.4.2",
     "defu": "^6.1.4",
     "maska": "^3.2.0",
     "reka-ui": "^2.7.0",
@@ -37,10 +48,15 @@
     "typescript": "^5.9.3",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4",
+    "vue-tsc": "^3.2.2",
     "zod": "^4.3.5"
   },
   "scripts": {
     "dev": "nuxi dev .playground",
-    "dev:prepare": "nuxt prepare .playground"
+    "dev:prepare": "nuxt prepare .playground",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint --cache . && prettier --check --cache .",
+    "lint:ci": "eslint --cache --cache-strategy content . && prettier --check --cache --cache-strategy content .",
+    "lint:fix": "eslint --fix --cache . && prettier --write --cache ."
   }
 }

package/server/plugins/error.ts

@@ -0,0 +1,20 @@
+import type { H3Error } from 'h3'
+import { consola } from 'consola'
+
+const nitroLogger = consola.withTag('nitro')
+
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('error', (error, { event }) => {
+    filterStackLines(error)
+
+    if (!event) {
+      nitroLogger.error(error)
+      return
+    }
+
+    const logger = nitroLogger.withTag(event.method).withTag(event.path)
+    const _error = error as H3Error
+
+    logger.error(_error.statusCode, error)
+  })
+})

package/server/utils/error.ts

@@ -0,0 +1,24 @@
+const ignoreStackLinesRegEx = /\(<anonymous>\)|node_modules|node:internal/
+const indexRegEx = /index \d+/
+
+export function filterStackLines(error: Error) {
+  if (error.cause instanceof Error && error.cause.message === error.message) {
+    delete error.cause
+  }
+
+  error.stack = error.stack
+    ?.split(/\n\s*at /)
+    .filter((line, index, stack) => {
+      if (ignoreStackLinesRegEx.test(line)) return false
+
+      if (indexRegEx.test(line)) {
+        const previousItem = stack[index + 1]
+        if (!previousItem) return false
+        if (ignoreStackLinesRegEx.test(previousItem) || index === stack.length - 1) return false
+      }
+
+      return true
+    })
+    .join('\nat ')
+    .trim()
+}

package/shared/types/helpers.ts

@@ -0,0 +1,27 @@
+import type { OverrideProperties } from 'type-fest'
+
+export type Falsy = false | null | undefined | 0 | ''
+
+type TypedBroadcastChannelEventMap<T> = OverrideProperties<
+  BroadcastChannelEventMap,
+  {
+    message: MessageEvent<T>
+    messageerror: MessageEvent<T>
+  }
+>
+
+export interface TypedBroadcastChannel<T> extends BroadcastChannel {
+  onmessage: ((this: BroadcastChannel, ev: MessageEvent<T>) => any) | null
+  onmessageerror: ((this: BroadcastChannel, ev: MessageEvent<T>) => any) | null
+  postMessage: (message: T) => void
+  addEventListener: <K extends keyof TypedBroadcastChannelEventMap<T>>(
+    type: K,
+    listener: (this: BroadcastChannel, ev: TypedBroadcastChannelEventMap<T>[K]) => any,
+    options?: boolean | AddEventListenerOptions,
+  ) => void
+  removeEventListener: <K extends keyof TypedBroadcastChannelEventMap<T>>(
+    type: K,
+    listener: (this: BroadcastChannel, ev: TypedBroadcastChannelEventMap<T>[K]) => any,
+    options?: boolean | EventListenerOptions,
+  ) => void
+}

package/shared/utils/helpers.ts

@@ -0,0 +1,3 @@
+export function as<T>(input: unknown) {
+  return input as T
+}