@falcondev-oss/nuxt-layers-base 0.18.0 → 0.19.0

package/.playground/app/assets/test.css

@@ -0,0 +1,4 @@
+:root {
+  --color-brand-primary: #43a4e6;
+  --color-secondary-primary: #fa057c;
+}

package/.playground/app/pages/index.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { LazyOverlayModalActions } from '#components'
+import z from 'zod'
+
+const confirm = useConfirm()
+const overlay = useOverlay()
+
+const form = useForm({
+  schema: z.object({
+    duration: z.number(),
+    dateIso: z.string(),
+  }),
+  sourceValues: () => ({
+    dateIso: null,
+    duration: null,
+  }),
+  async submit({ values }) {
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+    console.log(values)
+  },
+})
+
+const data = ref([
+  {
+    hey: '',
+    ho: 1,
+  },
+])
+
+const columns = useTableColumns<typeof data>(
+  () => [
+    {
+      accessorKey: 'hey',
+    },
+    {
+      accessorKey: 'ho',
+    },
+  ],
+  {
+    headerActions: [
+      {
+        label: 'Add Row',
+        onClick: () => {
+          data.value.push({ hey: 'new', ho: data.value.length + 1 })
+        },
+      },
+      {
+        label: 'Add Row 2',
+        onClick: () => {
+          data.value.push({ hey: 'new', ho: data.value.length + 1 })
+        },
+      },
+    ],
+    onDelete(row) {
+      data.value = data.value.filter((_, i) => i !== row.index)
+    },
+    rowActions: [
+      {
+        icon: 'lucide:pencil',
+        onClick: () => {
+          console.log('Edit row')
+        },
+      },
+    ],
+  },
+)
+</script>
+
+<template>
+  <LayoutDashboard
+    :sidebar="{
+      items: [
+        {
+          label: 'Home',
+          icon: 'i-lucide-house',
+          active: true,
+        },
+        {
+          label: 'Inbox',
+          icon: 'i-lucide-inbox',
+          badge: '4',
+        },
+        {
+          label: 'Contacts',
+          icon: 'i-lucide-users',
+        },
+        {
+          label: 'Settings',
+          icon: 'i-lucide-settings',
+          defaultOpen: true,
+          children: [
+            {
+              label: 'General',
+            },
+            {
+              label: 'Members',
+            },
+            {
+              label: 'Notifications',
+            },
+          ],
+        },
+      ],
+      bottomItems: [
+        {
+          label: 'Home',
+          icon: 'i-lucide-house',
+          active: true,
+        },
+        {
+          label: 'Inbox',
+          icon: 'i-lucide-inbox',
+          badge: '4',
+        },
+        {
+          label: 'Contacts',
+          icon: 'i-lucide-users',
+        },
+        {
+          label: 'Settings',
+          icon: 'i-lucide-settings',
+          defaultOpen: true,
+          children: [
+            {
+              label: 'General',
+            },
+            {
+              label: 'Members',
+            },
+            {
+              label: 'Notifications',
+            },
+          ],
+        },
+      ],
+      userMenu: {
+        name: 'Benjamin Canac',
+        avatarSrc: 'https://github.com/benjamincanac.png',
+      },
+    }"
+    :panel="{
+      navbar: {
+        title: 'Dashboard',
+        ui: {
+          root: 'relative',
+          title: 'flex-1 absolute inset-0 w-full',
+        },
+      },
+      toolbar: {
+        items: [
+          {
+            label: 'General',
+            icon: 'i-lucide-user',
+            active: true,
+          },
+          {
+            label: 'Members',
+            icon: 'i-lucide-users',
+          },
+          {
+            label: 'Notifications',
+            icon: 'i-lucide-bell',
+          },
+        ],
+        itemsEnd: [
+          {
+            label: 'General',
+            icon: 'i-lucide-user',
+            active: true,
+          },
+          {
+            label: 'Members',
+            icon: 'i-lucide-users',
+          },
+          {
+            label: 'Notifications',
+            icon: 'i-lucide-bell',
+          },
+        ],
+      },
+    }"
+  >
+    <template #navbar-title>
+      <div class="w-full text-center">title</div>
+    </template>
+
+    <UTableCard>
+      <UTable :data :columns @select="() => {}" />
+    </UTableCard>
+    <UCard
+      :ui="{
+        body: 'flex flex-col gap-4 items-start',
+      }"
+    >
+      <UButton
+        label="Confirm"
+        variant="subtle"
+        @click="
+          () => {
+            confirm.confirmDestructive({
+              title: 'Are you sure?',
+              description: 'This action cannot be undone.',
+              submitLabel: 'Yes, delete it',
+            })
+          }
+        "
+      />
+      <UButton
+        label="Actions"
+        variant="subtle"
+        @click="
+          () => {
+            overlay.create(LazyOverlayModalActions, {
+              defaultOpen: true,
+              props: {
+                title: 'Actions',
+                description: 'Choose an action to perform',
+                actions: [
+                  {
+                    label: 'Action 1',
+                  },
+                  {
+                    label: 'Action 2',
+                  },
+                ],
+              },
+            })
+          }
+        "
+      />
+    </UCard>
+    <UCard
+      :ui="{
+        body: 'flex flex-col gap-4 items-start ',
+      }"
+    >
+      <UForm
+        :form
+        :success-toast="{
+          title: 'test',
+          description: 'wow',
+        }"
+      >
+        {{ form.data }}
+        <UField
+          v-slot="props"
+          :field="
+            form.fields.dateIso.$use({
+              translate: dateValueIsoTranslator(),
+            })
+          "
+        >
+          <UInputDatePicker v-bind="props" />
+        </UField>
+        <UField v-slot="props" :field="form.fields.duration.$use()">
+          <UInputDurationMinutes v-bind="props" />
+        </UField>
+      </UForm>
+    </UCard>
+  </LayoutDashboard>
+</template>

package/.playground/app/pages/login.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { AuthFormField } from '@nuxt/ui'
+
+const fields: AuthFormField[] = [
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+    required: true,
+  },
+  {
+    name: 'password',
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter your password',
+    required: true,
+  },
+  {
+    name: 'remember',
+    label: 'Remember me',
+    type: 'checkbox',
+  },
+]
+</script>
+
+<template>
+  <UAuthForm :fields />
+</template>

package/.playground/app/pages/page.vue

@@ -0,0 +1,31 @@
+<template>
+  <LayoutPage
+    :header="{
+      navigation: {
+        variant: 'pill',
+        items: [
+          {
+            label: 'test',
+            to: '/',
+          },
+        ],
+      },
+    }"
+    :footer="{
+      items: [
+        {
+          label: 'hallo',
+          to: '/',
+        },
+      ],
+      ui: {
+        root: 'bg-primary-200',
+      },
+    }"
+  >
+    <UContainer>test</UContainer>
+
+    <template #footer-left>left</template>
+    <template #footer-bottom>bottom</template>
+  </LayoutPage>
+</template>

package/.playground/app/plugins/trpc.ts

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin(
+  trpcPlugin({
+    url: '/trpc',
+  }),
+)

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

@@ -0,0 +1 @@
+export default defineNuxtPlugin(vueQueryPlugin())

package/.playground/nuxt.config.ts

@@ -0,0 +1,10 @@
+export default defineNuxtConfig({
+  extends: ['..'],
+  ssr: false,
+  runtimeConfig: {
+    public: {
+      projectId: 'my-project',
+    },
+  },
+  css: ['~/assets/test.css'],
+})

package/.playground/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": []
+}

package/app/app.config.ts

@@ -3,7 +3,7 @@ export default defineAppConfig({
     colors: {
       primary: 'brand-primary',
       secondary: 'brand-secondary',
-      neutral: 'slate',
+      neutral: 'neutral',
     },
   },
 })

package/app/composables/createUsable.ts

@@ -0,0 +1,15 @@
+const emptyArgsSymbol = Symbol('emptyArgs')
+// https://github.com/vueuse/vueuse/blob/6f880000165cebcb76e4f8a1f031bb98f99f37d6/packages/shared/createGlobalState/index.ts
+export function createUsable<Fn extends (...args: any[]) => any>(stateFactory: Fn): Fn {
+  const states = new WeakMap<object | symbol, any>()
+
+  return ((...args: any[]) => {
+    const key = args.length === 0 ? emptyArgsSymbol : args
+    if (!states.has(key)) {
+      // eslint-disable-next-line ts/no-unsafe-argument
+      states.set(key, stateFactory(...args))
+    }
+    // eslint-disable-next-line ts/no-unsafe-return
+    return states.get(key)
+  }) as Fn
+}

package/app/composables/useTableColumns.tsx

@@ -57,7 +57,7 @@ export function useTableColumns<T extends MaybeRef<Record<string, any>[] | undef
           return (
             <UActions
               defaults={rowActionDefaults}
-              class="justify-end gap-2!"
+              class="gap-2! justify-end"
               actions={rowActions}
             />
           )

package/eslint.config.js

@@ -0,0 +1,22 @@
+// @ts-check
+import eslintConfig from '@falcondev-oss/configs/eslint'
+
+export default eslintConfig({
+  tsconfigPath: './tsconfig.json',
+  nuxt: true,
+}).append({
+  ignores: [
+    'node_modules/',
+    'dist/',
+    '.nuxt/',
+    '.nitro/',
+    '.output/',
+    '.temp/',
+    '.data/',
+    'drizzle/',
+    'prisma/generated/',
+    'convex/_generated/',
+    'pnpm-lock.yaml',
+    '.playground/',
+  ],
+})

package/nuxt.config.ts

@@ -20,6 +20,12 @@ export default defineNuxtConfig({
     experimental: {
       tasks: true,
     },
+    esbuild: {
+      // enable top-level await in nitro
+      options: {
+        target: 'esnext',
+      },
+    },
     typescript: {
       tsConfig: {
         compilerOptions: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",
@@ -45,9 +45,6 @@
     "vue-router": "^4.6.4"
   },
   "devDependencies": {
-    "@falcondev-oss/configs": "^5.0.2",
-    "eslint": "^9.39.2",
-    "prettier": "^3.8.1",
     "typescript": "^5.9.3",
     "vue-tsc": "^3.2.4",
     "zod": "^4.3.6"
@@ -56,8 +53,7 @@
     "dev": "nuxi dev .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 ."
+    "lint": "pnpm -w eslint:cmd \"$PWD\" && pnpm -w prettier:cmd \"$PWD\" --check",
+    "lint:fix": "pnpm -w eslint:cmd \"$PWD\" --fix && pnpm -w prettier:cmd \"$PWD\" --write"
   }
 }