@falcondev-oss/nuxt-layers-base 0.1.0

package/app/components/u/UInputDurationMinutes.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { InputEmits, InputProps } from '@nuxt/ui'
+import type { MaskOptions } from 'maska'
+import { regex } from 'arkregex'
+import { vMaska } from 'maska/vue'
+import { useForwardPropsEmits } from 'reka-ui'
+
+const props =
+  defineProps<Omit<InputProps<string>, 'modelValue' | 'defaultValue' | 'modelModifiers'>>()
+const emit = defineEmits<Omit<InputEmits<string>, 'update:modelValue'>>()
+const forwardedProps = useForwardPropsEmits(props, emit)
+
+const model = defineModel<number | null>({
+  required: true,
+})
+
+// eslint-disable-next-line unicorn/prefer-string-raw
+const parser = regex('^-?(?<hours>\\d{1,}):?(?<minutes>\\d{1,2})?$')
+const duration = computed({
+  get: () => {
+    if (model.value === null) return null
+
+    const absoluteMinutes = Math.abs(model.value)
+
+    const hours = Math.floor(absoluteMinutes / 60)
+    const minutes = absoluteMinutes % 60
+    const sign = model.value < 0 ? '-' : ''
+
+    // don't always add :00 if minutes is 0
+    if (minutes > 0)
+      return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
+
+    return `${sign}${hours.toString()}`
+  },
+  set: (val) => {
+    if (!val) {
+      model.value = null
+      return
+    }
+
+    const parsed = parser.exec(val)
+    if (!parsed) {
+      model.value = null
+      return
+    }
+
+    const isNegative = val.startsWith('-')
+
+    const hours = Number.parseInt(parsed.groups.hours) * 60
+    const minutes = parsed.groups.minutes ? Number.parseInt(parsed.groups.minutes) : 0
+
+    model.value = isNegative ? (hours + minutes) * -1 : hours + minutes
+  },
+})
+
+const maskOptions: MaskOptions = {
+  // S: sign, H: hours (unlimited), 5: tens digit of minutes, D: digit of minutes
+  mask: 'SH:5D',
+  tokens: {
+    'S': { pattern: /[-+]/, optional: true },
+    'D': { pattern: /\d/ },
+    'H': { pattern: /\d/, multiple: true },
+    '5': {
+      pattern: /[0-5]/,
+      transform(char) {
+        // clamp char to max 5, otherwise maska would just block input if user tries to input 6-9
+        const num = Number.parseInt(char)
+        if (Number.isNaN(num)) return char
+        return num > 5 ? '5' : char
+      },
+    },
+  },
+}
+</script>
+
+<template>
+  <UInput
+    v-bind="forwardedProps"
+    v-model="duration"
+    v-maska="maskOptions"
+    :model-modifiers="{
+      nullable: true,
+      lazy: true,
+    }"
+    placeholder="HH:mm"
+    trailing-icon="ph:timer"
+  />
+</template>

package/app/components/u/UTableCard.vue

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

package/app/composables/useConfirm.ts

@@ -0,0 +1,16 @@
+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/composables/usePreventPageLeave.ts

@@ -0,0 +1,31 @@
+import { onBeforeRouteLeave } from '#app'
+import { useConfirm } from './useConfirm'
+
+export function usePreventPageLeave(
+  preventPageLeave: MaybeRefOrGetter<boolean> = true,
+  opts?: {
+    leaveTitle?: string
+    leaveDescription?: string
+  },
+) {
+  useEventListener('beforeunload', (event) => {
+    if (!toValue(preventPageLeave)) return
+    event.returnValue = opts?.leaveDescription
+    return opts?.leaveDescription
+  })
+
+  const confirm = useConfirm()
+
+  onBeforeRouteLeave(async (_, __, next) => {
+    if (!toValue(preventPageLeave)) return next()
+
+    const allowLeave = await confirm.confirmDestructive({
+      title: opts?.leaveTitle || 'Unsaved Changes',
+      description:
+        opts?.leaveDescription ||
+        'You have unsaved changes. Are you sure you want to leave this page?',
+      submitLabel: 'Leave Page',
+    })
+    if (allowLeave) return next()
+  })
+}

package/app/composables/useRouteParamString.ts

@@ -0,0 +1,22 @@
+import { useRouteParams } from '@vueuse/router'
+
+export function useRouteParamString(paramName: string) {
+  const param = useRouteParams<string>(paramName)
+
+  const paramRef = ref(param.value)
+  const stop = watch(
+    param,
+    () => {
+      if (typeof param.value !== 'string') throw new Error(`${paramName} must be string`)
+      paramRef.value = param.value
+    },
+    { immediate: true },
+  )
+
+  onBeforeRouteLeave((_, __, next) => {
+    stop()
+    next()
+  })
+
+  return paramRef
+}

package/app/composables/useTableColumns.tsx

@@ -0,0 +1,68 @@
+import type { ButtonProps, TableColumn, TableRow } from '@nuxt/ui'
+import type { UnwrapRef } from 'vue'
+import { UActions } from '#components'
+
+interface ActionsOptions<T> {
+  onDelete?: (row: TableRow<T>) => any
+  headerActions?: ButtonProps[]
+  rowActions?: ButtonProps[] | ((row: TableRow<T>) => ButtonProps[])
+}
+
+type GetRowType<T extends MaybeRef<Record<string, any>[] | undefined | null>> = NonNullable<
+  UnwrapRef<T>
+>[number]
+
+const rowActionDefaults = {
+  variant: 'ghost',
+} satisfies ButtonProps
+const headerActionDefaults = {
+  variant: 'subtle',
+} satisfies ButtonProps
+
+export function useTableColumns<T extends MaybeRef<Record<string, any>[] | undefined | null>>(
+  columns: MaybeRefOrGetter<TableColumn<GetRowType<T>>[]>,
+  actions?: ActionsOptions<GetRowType<T>>,
+) {
+  return computed(() => {
+    const cols = [...toValue(columns)]
+    if (!actions) return cols
+
+    return [
+      ...cols,
+      {
+        id: '$actions',
+        header: () => (
+          <UActions
+            defaults={headerActionDefaults}
+            class="justify-end"
+            actions={actions.headerActions}
+          />
+        ),
+        cell: ({ row }) => {
+          const rowActions = [
+            ...((typeof actions.rowActions === 'function'
+              ? actions.rowActions(row)
+              : actions.rowActions) ?? []),
+          ]
+          if (actions.onDelete)
+            rowActions.push({
+              icon: 'ph:trash',
+              color: 'error',
+              loadingAuto: true,
+              onClick: async () => {
+                await actions.onDelete?.(row)
+              },
+            })
+
+          return (
+            <UActions
+              defaults={rowActionDefaults}
+              class="justify-end gap-2!"
+              actions={rowActions}
+            />
+          )
+        },
+      },
+    ] satisfies TableColumn<GetRowType<T>>[]
+  })
+}

package/app/composables/useToast.ts

@@ -0,0 +1,40 @@
+import type { Toast } from '#ui/composables'
+import { useToast as useNuxtUiToast } from '#ui/composables'
+
+const presets = {
+  success: {
+    color: 'success',
+    icon: 'ph:check-circle',
+  },
+  error: {
+    color: 'error',
+    icon: 'ph:x-circle',
+  },
+  warning: {
+    color: 'warning',
+    icon: 'ph:warning-circle',
+  },
+} as const satisfies Record<string, Partial<Toast>>
+
+interface ToastOptions extends Partial<Toast> {
+  preset?: keyof typeof presets
+}
+
+export const useToast = createGlobalState(() => {
+  const toast = useNuxtUiToast()
+
+  return {
+    ...toast,
+    add: (toastOpts: ToastOptions) => {
+      const { preset, ...opts } = toastOpts
+      return toast.add(
+        preset
+          ? {
+              ...presets[preset],
+              ...opts,
+            }
+          : opts,
+      )
+    },
+  }
+})

package/app/composables/useTrpc.ts

@@ -0,0 +1,3 @@
+export function useTrpc() {
+  return useNuxtApp().$trpc
+}

package/app/error.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps<{
+  error: NuxtError
+}>()
+
+console.error(props.error)
+</script>
+
+<template>
+  <UApp>
+    <UError :error />
+  </UApp>
+</template>

package/app/pages/index.vue

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

package/app/utils/form-field-translators.ts

@@ -0,0 +1,41 @@
+import type { FormFieldTranslator } from '@falcondev-oss/form-core'
+import type { DateValue } from 'reka-ui'
+import { parseDate } from '@internationalized/date'
+
+export function nullUndefinedTranslator<T>() {
+  return {
+    get(v: T | null) {
+      return v ?? undefined
+    },
+    set(v: T | undefined) {
+      return v ?? null
+    },
+  }
+}
+export function nullIndeterminateTranslator(): FormFieldTranslator<
+  boolean | null,
+  boolean | 'indeterminate'
+> {
+  return {
+    get: (v) => v ?? ('indeterminate' as const),
+    set: (v) => (v === 'indeterminate' ? null : v),
+  }
+}
+export function indeterminateFalseTranslator(): FormFieldTranslator<
+  boolean,
+  boolean | 'indeterminate'
+> {
+  return {
+    get: (v) => (v === false ? 'indeterminate' : v),
+    set: (v) => (v === 'indeterminate' ? false : v),
+  }
+}
+export function dateValueIsoTranslator(): FormFieldTranslator<string | null, DateValue | null> {
+  return {
+    get: (v) => (v ? parseDate(v) : null),
+    set: (v) => {
+      if (!v) return null
+      return v.toString()
+    },
+  }
+}

package/app/utils/plugins.ts

@@ -0,0 +1,95 @@
+import type { DehydratedState, QueryClientConfig, VueQueryPluginOptions } from '@tanstack/vue-query'
+import type { AnyTRPCRouter } from '@trpc/server'
+import type { ObjectPlugin } from 'nuxt/app'
+import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query'
+import {
+  dehydrate,
+  hydrate,
+  QueryClient,
+  useQueryClient,
+  VueQueryPlugin,
+} from '@tanstack/vue-query'
+import { httpSubscriptionLink, splitLink } 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
+  vuePluginOptions?: VueQueryPluginOptions
+}
+export function vueQueryPlugin(opts?: VueQueryNuxtPluginOptions) {
+  return {
+    name: 'vue-query',
+    setup(nuxt) {
+      const vueQueryState = useState<DehydratedState | null>('vue-query')
+
+      const queryClient = new QueryClient(defu(opts?.queryClientOptions, {}))
+      const options: VueQueryPluginOptions = { queryClient, ...opts?.vuePluginOptions }
+
+      nuxt.vueApp.use(VueQueryPlugin, options)
+
+      if (import.meta.server) {
+        nuxt.hooks.hook('app:rendered', () => {
+          vueQueryState.value = dehydrate(queryClient)
+        })
+      }
+
+      if (import.meta.client) {
+        nuxt.hooks.hook('app:created', () => {
+          hydrate(queryClient, vueQueryState.value)
+        })
+      }
+    },
+  } satisfies ObjectPlugin
+}
+
+interface TrpcNuxtPluginOptions {
+  url: string
+}
+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 trpc = createTRPCVueQueryClient<Router>({
+        queryClient,
+        trpc: {
+          links: [
+            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,
+                }),
+                false: httpBatchLink({
+                  transformer: superjson,
+                  url: opts.url,
+                  maxURLLength: 2000,
+                  headers,
+                }),
+              }),
+            }),
+          ],
+        },
+      })
+      return {
+        provide: {
+          trpc,
+        },
+      }
+    },
+  } satisfies ObjectPlugin
+}

package/app/utils/reactivity.ts

@@ -0,0 +1,17 @@
+export function refEffect<T>(getter: MaybeRefOrGetter<T>) {
+  const getterRef = toRef(getter)
+  const __ref = ref(getterRef.value as T)
+  const _ref = __ref as typeof __ref & { reset: () => void }
+
+  watchEffect(() => {
+    // eslint-disable-next-line ts/no-unsafe-assignment
+    _ref.value = getterRef.value
+  })
+
+  _ref.reset = () => {
+    // eslint-disable-next-line ts/no-unsafe-assignment
+    _ref.value = getterRef.value
+  }
+
+  return _ref
+}

package/nuxt.config.ts

@@ -0,0 +1,85 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const currentDir = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+
+  // dev
+  typescript: {
+    tsConfig: {
+      vueCompilerOptions: {
+        strictTemplates: true,
+        htmlAttributes: ['aria-*'],
+        dataAttributes: ['data-*'],
+        strictVModel: true,
+      },
+    },
+    strict: true,
+  },
+  nitro: {
+    typescript: {
+      strict: true,
+    },
+  },
+  imports: {
+    imports: [
+      {
+        from: '@falcondev-oss/form-vue',
+        name: 'useForm',
+      },
+      {
+        name: 'useToast',
+        from: path.join(currentDir, './app/composables/useToast'),
+        priority: 10,
+      },
+    ],
+  },
+
+  // runtime
+  experimental: {
+    defaults: {
+      nuxtLink: {
+        prefetch: true,
+      },
+    },
+  },
+  css: [path.join(currentDir, './app/assets/css/base.css')],
+  runtimeConfig: {
+    public: {
+      /**
+       * used as a unique identifier in all sorts of places
+       */
+      projectId: 'base',
+    },
+  },
+
+  // modules
+  modules: ['@nuxt/ui', '@vueuse/nuxt'],
+  ui: {
+    theme: {
+      colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
+    },
+  },
+  colorMode: {
+    preference: 'light',
+    fallback: 'light',
+  },
+  icon: {
+    cssLayer: 'base',
+    provider: 'server',
+    localApiEndpoint: '/_icons',
+  },
+  app: {
+    head: {
+      meta: [
+        {
+          name: 'robots',
+          content: 'noindex',
+        },
+      ],
+    },
+  },
+})

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@falcondev-oss/nuxt-layers-base",
+  "type": "module",
+  "version": "0.1.0",
+  "main": "./nuxt.config.ts",
+  "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",
+    "@internationalized/date": "^3.10.1",
+    "@nuxt/icon": "^2.2.0",
+    "@nuxt/ui": "4.3.0",
+    "@nuxtjs/color-mode": "^4.0.0",
+    "@tanstack/vue-query": "^5.92.5",
+    "@trpc/client": "^11.8.1",
+    "@trpc/server": "^11.8.1",
+    "@vue/devtools-api": "^8.0.5",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/nuxt": "^14.1.0",
+    "@vueuse/router": "^14.1.0",
+    "arkregex": "^0.0.5",
+    "defu": "^6.1.4",
+    "maska": "^3.2.0",
+    "reka-ui": "^2.7.0",
+    "remeda": "^2.33.1",
+    "superjson": "^2.2.6",
+    "tailwindcss": "^4.1.18",
+    "trpc-nuxt": "^2.0.1"
+  },
+  "devDependencies": {
+    "@falcondev-oss/configs": "^5.0.2",
+    "eslint": "^9.39.2",
+    "nuxt": "^4.2.2",
+    "prettier": "^3.7.4",
+    "type-fest": "^5.3.1",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.26",
+    "vue-router": "^4.6.4",
+    "zod": "^4.3.5"
+  },
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "dev:prepare": "nuxt prepare .playground"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
+  - unrs-resolver
+  - vue-demi

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ],
+  "files": []
+}