@polymarbot/nuxt-layer-shadcn-ui 0.1.10 → 0.2.0

package/app/assets/styles/colors.css

@@ -24,11 +24,11 @@
 
   /* Status */
   --status-foreground: oklch(0.985 0 0);
-  --success: oklch(0.58 0.17 163.225);
-  --info: oklch(0.58 0.15 221.723);
-  --help: oklch(0.53 0.21 293.541);
-  --warn: oklch(0.55 0.18 62.823);
-  --danger: oklch(0.56 0.25 27.325);
+  --success: oklch(0.58 0.19 150.81);
+  --info: oklch(0.58 0.195 253.83);
+  --help: oklch(0.58 0.21 293.541);
+  --warn: oklch(0.58 0.158 72.33);
+  --danger: oklch(0.58 0.233 25.74);
 }
 
 .dark {
@@ -55,11 +55,11 @@
 
   /* Status */
   --status-foreground: oklch(0.145 0 0);
-  --success: oklch(0.696 0.17 162.48);
-  --info: oklch(0.685 0.121 220.7);
-  --help: oklch(0.627 0.22 293.541);
-  --warn: oklch(0.762 0.148 62.823);
-  --danger: oklch(0.637 0.237 25.331);
+  --success: oklch(0.73 0.19 150.81);
+  --info: oklch(0.72 0.19 253.83);
+  --help: oklch(0.72 0.22 293.541);
+  --warn: oklch(0.78 0.14 72.33);
+  --danger: oklch(0.70 0.22 25.74);
 }
 
 /* Register colors in Tailwind v4 theme (supports opacity modifier) */

package/app/components/ui/Accordion/index.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { AccordionItem } from './types'
 import Icon from '../Icon/index.vue'
 import Surface from '../Surface/index.vue'
-import type { AccordionItem } from './types'
 import Accordion from './index.vue'
 
 const items: AccordionItem[] = [
@@ -38,71 +38,75 @@ const meta = {
     collapsible: true,
     disabled: false,
   },
+  render: args => ({
+    components: { Accordion, Surface },
+    setup: () => ({ args, items }),
+    template: `
+      <Surface variant="bordered" class="max-w-md px-4">
+        <Accordion v-bind="args" :items="items" default-value="shipping" />
+      </Surface>
+    `,
+  }),
 } satisfies Meta
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
-    components: { Accordion, Surface, Icon },
+export const Default: Story = {}
+
+export const Multiple: Story = {
+  render: () => ({
+    components: { Accordion, Surface },
     setup () {
-      const singleValue = ref<string>('shipping')
-      const multipleValue = ref<string[]>([ 'shipping', 'returns' ])
-      const slotValue = ref<string>('shipping')
-      return { args, items, singleValue, multipleValue, slotValue }
+      const value = ref<string[]>([ 'shipping', 'returns' ])
+      return { items, value }
     },
     template: `
-      <div class="max-w-md space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Surface variant="bordered" class="px-4">
-            <Accordion
-              v-model="singleValue"
-              v-bind="args"
-              :items="items"
-            />
-          </Surface>
-          <div class="mt-3 text-sm text-muted-foreground">Open: {{ singleValue || '(none)' }}</div>
-        </section>
+      <div class="max-w-md">
+        <Surface variant="bordered" class="px-4">
+          <Accordion v-model="value" type="multiple" :items="items" />
+        </Surface>
+        <div class="mt-3 text-sm text-muted-foreground">Open: {{ value.join(', ') || '(none)' }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Multiple -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Multiple</h3>
-          <Surface variant="bordered" class="px-4">
-            <Accordion
-              v-model="multipleValue"
-              type="multiple"
-              :items="items"
-            />
-          </Surface>
-          <div class="mt-3 text-sm text-muted-foreground">Open: {{ multipleValue.join(', ') || '(none)' }}</div>
-        </section>
+export const Disabled: Story = {
+  render: () => ({
+    components: { Accordion, Surface },
+    setup: () => ({ items }),
+    template: `
+      <Surface variant="bordered" class="max-w-md px-4">
+        <Accordion disabled :items="items" default-value="shipping" />
+      </Surface>
+    `,
+  }),
+}
 
-        <!-- Custom Slots -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Custom Slots</h3>
-          <Surface variant="bordered" class="px-4">
-            <Accordion
-              v-model="slotValue"
-              :items="items"
-            >
-              <template #title="{ item, open }">
-                <span class="flex items-center gap-2">
-                  <span class="inline-flex size-5 items-center justify-center rounded-full bg-primary/15 text-primary">
-                    <Icon :name="open ? 'minus' : 'plus'" class="size-3" />
-                  </span>
-                  {{ item.title }}
-                </span>
-              </template>
-              <template #content="{ item }">
-                <p class="text-muted-foreground">{{ item.content }}</p>
-              </template>
-            </Accordion>
-          </Surface>
-        </section>
-      </div>
+export const CustomSlots: Story = {
+  render: () => ({
+    components: { Accordion, Surface, Icon },
+    setup () {
+      const value = ref<string>('shipping')
+      return { items, value }
+    },
+    template: `
+      <Surface variant="bordered" class="max-w-md px-4">
+        <Accordion v-model="value" :items="items">
+          <template #title="{ item, open }">
+            <span class="flex items-center gap-2">
+              <span class="inline-flex size-5 items-center justify-center rounded-full bg-primary/15 text-primary">
+                <Icon :name="open ? 'minus' : 'plus'" class="size-3" />
+              </span>
+              {{ item.title }}
+            </span>
+          </template>
+          <template #content="{ item }">
+            <p class="text-muted-foreground">{{ item.content }}</p>
+          </template>
+        </Accordion>
+      </Surface>
     `,
   }),
 }

package/app/components/ui/Accordion/index.vue

@@ -4,7 +4,7 @@ import {
   AccordionContent,
   AccordionItem as ShadcnAccordionItem,
   AccordionTrigger,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/accordion'
+} from '../../shadcn/accordion'
 import type { AccordionRootProps } from 'reka-ui'
 import type { AccordionItem, AccordionProps } from './types'
 

package/app/components/ui/AdminLayout/SidebarMenus.vue

@@ -140,7 +140,6 @@ function hasActiveChild (item: AdminLayoutSidebarMenuItem): boolean {
             <WebLink
               v-if="isLink(item)"
               :href="item.href"
-              :externalIcon="false"
               unstyled
             >
               <Icon
@@ -215,7 +214,6 @@ function hasActiveChild (item: AdminLayoutSidebarMenuItem): boolean {
             <WebLink
               v-if="isLink(item)"
               :href="item.href"
-              :externalIcon="false"
               unstyled
             >
               <Icon

package/app/components/ui/AdminLayout/index.stories.ts

@@ -6,6 +6,9 @@ import Breadcrumb from '../Breadcrumb/index.vue'
 import Button from '../Button/index.vue'
 import Card from '../Card/index.vue'
 
+const variants = [ 'sidebar', 'floating', 'inset' ] as const
+const collapsibles = [ 'icon', 'offcanvas', 'none' ] as const
+
 const menus: AdminLayoutSidebarMenuItem[] = [
   {
     label: 'Dashboard',
@@ -91,17 +94,15 @@ const meta = {
   title: 'UI/AdminLayout',
   component: AdminLayout,
   argTypes: {
-    variant: {
-      control: 'select',
-      options: [ 'sidebar', 'floating', 'inset' ],
-    },
-    collapsible: {
-      control: 'select',
-      options: [ 'icon', 'offcanvas', 'none' ],
-    },
+    menus: { control: 'object' },
+    headerDropdown: { control: 'object' },
+    footerDropdown: { control: 'object' },
+    variant: { control: 'select', options: variants },
+    collapsible: { control: 'select', options: collapsibles },
   },
   args: {
     menus,
+    headerDropdown: undefined,
     footerDropdown: { profile, menuItems },
     variant: 'sidebar',
     collapsible: 'icon',

package/app/components/ui/Alert/index.stories.ts

@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { AlertType } from './types'
 import Alert from './index.vue'
 
-type AlertType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
-
 const types: AlertType[] = [ 'default', 'success', 'info', 'help', 'warn', 'danger' ]
 
 const meta = {
@@ -14,39 +13,42 @@ const meta = {
   },
   args: {
     type: 'default',
+    icon: '',
   },
+  render: args => ({
+    components: { Alert },
+    setup: () => ({ args }),
+    template: '<Alert v-bind="args">This is an alert message.</Alert>',
+  }),
 } satisfies Meta<typeof Alert>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Types: Story = {
+  render: () => ({
     components: { Alert },
-    setup: () => ({ args, types }),
+    setup: () => ({ types }),
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Alert v-bind="args">This is a controlled alert message.</Alert>
-        </section>
-
-        <!-- All Types -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">All Types</h3>
-          <div class="space-y-3">
-            <Alert v-for="t in types" :key="t" :type="t">
-              This is a <strong>{{ t }}</strong> alert message.
-            </Alert>
-          </div>
-        </section>
+      <div class="space-y-3">
+        <Alert v-for="t in types" :key="t" :type="t">
+          This is a <strong>{{ t }}</strong> alert message.
+        </Alert>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Custom Icon -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Custom Icon</h3>
-          <Alert type="info" icon="bell">Alert with a custom bell icon.</Alert>
-        </section>
+export const WithIcons: Story = {
+  render: () => ({
+    components: { Alert },
+    template: `
+      <div class="space-y-3">
+        <Alert type="info" icon="bell">Alert with a custom bell icon.</Alert>
+        <Alert type="success" icon="sparkles">Alert with a custom sparkles icon.</Alert>
+        <Alert type="warn" icon="flag">Alert with a custom flag icon.</Alert>
       </div>
     `,
   }),

package/app/components/ui/Alert/index.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { Alert as ShadcnAlert } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/alert'
+import { Alert as ShadcnAlert } from '../../shadcn/alert'
 import type { AlertProps, AlertType } from './types'
 
-const typeIconNameMap: Record<AlertType, string> = {
-  default: 'info',
+const typeIconNameMap: Partial<Record<AlertType, string>> = {
   success: 'circle-check',
   info: 'info',
   help: 'circle-question-mark',
@@ -27,7 +26,8 @@ const props = withDefaults(defineProps<AlertProps>(), {
 })
 
 const defaultIconName = computed(() => {
-  if (props.icon) return undefined
+  // null explicitly hides the icon; any truthy value is an explicit icon.
+  if (props.icon || props.icon === null) return undefined
   return typeIconNameMap[props.type]
 })
 
@@ -42,7 +42,7 @@ const mergedClass = computed(() =>
 <template>
   <ShadcnAlert :class="mergedClass">
     <Icon
-      v-if="typeof icon === 'string'"
+      v-if="typeof icon === 'string' && icon"
       :name="icon"
     />
     <component
@@ -54,7 +54,7 @@ const mergedClass = computed(() =>
       v-else-if="defaultIconName"
       :name="defaultIconName"
     />
-    <div>
+    <div class="col-start-2">
       <slot />
     </div>
   </ShadcnAlert>

package/app/components/ui/Alert/types.ts

@@ -4,6 +4,7 @@ export type AlertType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'dang
 
 export interface AlertProps {
   type?: AlertType
-  icon?: string | Component
+  /** Pass `null` to explicitly hide the icon; leave undefined to use the type's default. */
+  icon?: string | Component | null
   class?: ClassValue
 }

package/app/components/ui/AlertDialog/index.stories.ts

@@ -12,30 +12,79 @@ const meta = {
       template: '<div><story /><AlertDialog /></div>',
     }),
   ],
+  render: () => ({
+    components: { Button },
+    setup () {
+      const { confirm } = useDialog()
+      const result = ref('')
+      async function handleConfirm () {
+        const ok = await confirm({ title: 'Confirm', message: 'Do you want to proceed?' })
+        result.value = `confirm → ${ok}`
+      }
+      return { handleConfirm, result }
+    },
+    template: `
+      <div class="space-y-4">
+        <Button @click="handleConfirm">Confirm</Button>
+        <div v-if="result" class="rounded-md bg-muted p-4 text-sm">Result: {{ result }}</div>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof AlertDialog>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const Alert: Story = {
   render: () => ({
     components: { Button },
     setup () {
-      const { confirm, alert, destroy } = useDialog()
+      const { alert } = useDialog()
       const result = ref('')
-
-      async function handleConfirm () {
-        const ok = await confirm({ title: 'Confirm', message: 'Do you want to proceed?' })
-        result.value = `confirm → ${ok}`
-      }
       async function handleAlert () {
         await alert({ title: 'Error', type: 'error', message: 'Something went wrong.' })
         result.value = 'alert → closed'
       }
+      return { handleAlert, result }
+    },
+    template: `
+      <div class="space-y-4">
+        <Button variant="outline" @click="handleAlert">Alert</Button>
+        <div v-if="result" class="rounded-md bg-muted p-4 text-sm">Result: {{ result }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Destroy: Story = {
+  render: () => ({
+    components: { Button },
+    setup () {
+      const { destroy } = useDialog()
+      const result = ref('')
       async function handleDestroy () {
         const ok = await destroy({ title: 'Delete Item', message: 'This action cannot be undone.' })
         result.value = `destroy → ${ok}`
       }
+      return { handleDestroy, result }
+    },
+    template: `
+      <div class="space-y-4">
+        <Button variant="destructive" @click="handleDestroy">Destroy</Button>
+        <div v-if="result" class="rounded-md bg-muted p-4 text-sm">Result: {{ result }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const MultiDialog: Story = {
+  render: () => ({
+    components: { Button },
+    setup () {
+      const { confirm, alert, destroy } = useDialog()
+      const result = ref('')
       async function handleMulti () {
         result.value = 'waiting...'
         const r1 = confirm({ title: 'Dialog 1', message: 'First confirm dialog' })
@@ -44,6 +93,23 @@ export const Default: Story = {
         const [ v1, , v3 ] = await Promise.all([ r1, r2, r3 ])
         result.value = `multi → confirm: ${v1}, alert: done, destroy: ${v3}`
       }
+      return { handleMulti, result }
+    },
+    template: `
+      <div class="space-y-4">
+        <Button variant="secondary" @click="handleMulti">Multi Dialog</Button>
+        <div v-if="result" class="rounded-md bg-muted p-4 text-sm">Result: {{ result }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const WithTypes: Story = {
+  render: () => ({
+    components: { Button },
+    setup () {
+      const { confirm, alert, destroy } = useDialog()
+      const result = ref('')
       async function handleWithType () {
         const ok = await confirm({ title: 'Warning', type: 'warn', message: 'This operation may affect your data. Do you want to continue?' })
         result.value = `typed confirm → ${ok}`
@@ -52,55 +118,24 @@ export const Default: Story = {
         await alert({ title: 'Information', type: 'info', message: 'Your changes have been saved successfully.' })
         result.value = 'typed alert → closed'
       }
-      async function handleDestroyDanger () {
-        const ok = await destroy({ title: 'Delete Account', message: 'All data will be permanently removed. This action cannot be undone.' })
-        result.value = `typed destroy → ${ok}`
-      }
       async function handleSuccess () {
         await alert({ title: 'Success', type: 'success', message: 'Payment completed successfully.' })
         result.value = 'success alert → closed'
       }
-
-      return { handleConfirm, handleAlert, handleDestroy, handleMulti, handleWithType, handleAlertInfo, handleDestroyDanger, handleSuccess, result }
+      async function handleDestroyDanger () {
+        const ok = await destroy({ title: 'Delete Account', message: 'All data will be permanently removed. This action cannot be undone.' })
+        result.value = `typed destroy → ${ok}`
+      }
+      return { handleWithType, handleAlertInfo, handleSuccess, handleDestroyDanger, result }
     },
     template: `
-      <div class="space-y-10">
-        <!-- Confirm -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Confirm</h3>
-          <Button @click="handleConfirm">Confirm</Button>
-        </section>
-
-        <!-- Alert -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Alert</h3>
-          <Button variant="outline" @click="handleAlert">Alert</Button>
-        </section>
-
-        <!-- Destroy -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Destroy</h3>
-          <Button variant="destructive" @click="handleDestroy">Destroy</Button>
-        </section>
-
-        <!-- Multi Dialog -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Multi Dialog</h3>
-          <Button variant="secondary" @click="handleMulti">Multi Dialog</Button>
-        </section>
-
-        <!-- With Type (ModalContent) -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Type (ModalContent)</h3>
-          <div class="flex gap-2">
-            <Button variant="outline" @click="handleWithType">Warn Confirm</Button>
-            <Button variant="outline" @click="handleAlertInfo">Info Alert</Button>
-            <Button variant="outline" @click="handleSuccess">Success Alert</Button>
-            <Button variant="destructive" @click="handleDestroyDanger">Danger Destroy</Button>
-          </div>
-        </section>
-
-        <!-- Result -->
+      <div class="space-y-4">
+        <div class="flex gap-2">
+          <Button variant="outline" @click="handleWithType">Warn Confirm</Button>
+          <Button variant="outline" @click="handleAlertInfo">Info Alert</Button>
+          <Button variant="outline" @click="handleSuccess">Success Alert</Button>
+          <Button variant="destructive" @click="handleDestroyDanger">Danger Destroy</Button>
+        </div>
         <div v-if="result" class="rounded-md bg-muted p-4 text-sm">Result: {{ result }}</div>
       </div>
     `,

package/app/components/ui/AsyncDataTable/index.stories.ts

@@ -1,10 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import type { AsyncDataTableBatchAction, AsyncDataTableFetchParams, AsyncDataTableFetchResult } from './types'
 import type { DataTableColumn } from '../DataTable/types'
-import AsyncDataTableRaw from './index.vue'
-
-// Cast generic component for Storybook compatibility
-const AsyncDataTable = AsyncDataTableRaw as any
+import AsyncDataTable from './index.vue'
 
 interface User {
   id: number
@@ -59,50 +56,70 @@ function mockFetch (params: AsyncDataTableFetchParams): Promise<AsyncDataTableFe
   })
 }
 
+const batchActions: AsyncDataTableBatchAction<User>[] = [
+  {
+    label: 'Delete',
+    icon: 'trash-2',
+    color: 'danger',
+    action: items => console.debug(`Delete ${items.length} items`),
+  },
+  {
+    label: 'Export',
+    icon: 'download',
+    action: items => console.debug(`Export ${items.length} items`),
+  },
+]
+
 const meta = {
   title: 'UI/AsyncDataTable',
-  component: AsyncDataTable,
-} satisfies Meta
+  component: AsyncDataTable as any,
+  argTypes: {
+    columns: { control: 'object' },
+    fetchMethod: { control: false },
+    autoFetch: { control: 'boolean' },
+    data: { control: 'object' },
+    filters: { control: 'object' },
+    showTopToolbar: { control: 'boolean' },
+    showBottomToolbar: { control: 'boolean' },
+    pageSizeOptions: { control: 'object' },
+    showPagination: { control: 'boolean' },
+    selectable: { control: 'boolean' },
+    batchActions: { control: 'object' },
+    selection: { control: 'object' },
+  },
+  args: {
+    columns,
+    fetchMethod: mockFetch,
+    autoFetch: true,
+    data: [],
+    filters: undefined,
+    showTopToolbar: undefined,
+    showBottomToolbar: true,
+    pageSizeOptions: [ 10, 20, 50 ],
+    showPagination: true,
+    selectable: false,
+    batchActions: [],
+    selection: [],
+  },
+  render: args => ({
+    components: { AsyncDataTable },
+    setup: () => ({ args }),
+    template: '<AsyncDataTable v-bind="args" />',
+  }),
+} satisfies Meta<typeof AsyncDataTable>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 /** Async fetch with pagination, sorting, page size selector */
-export const Default: Story = {
-  render: () => ({
-    components: { AsyncDataTable },
-    setup: () => ({ columns, mockFetch }),
-    template: `
-      <AsyncDataTable
-        :columns="columns"
-        :fetchMethod="mockFetch"
-        :pageSizeOptions="[10, 20, 50]"
-      />
-    `,
-  }),
-}
+export const Default: Story = {}
 
 /** Batch actions with row selection and dual toolbars */
-export const BatchActions: Story = {
+export const WithBatchActions: Story = {
   render: () => ({
     components: { AsyncDataTable },
     setup () {
       const selection = ref<User[]>([])
-
-      const batchActions: AsyncDataTableBatchAction<User>[] = [
-        {
-          label: 'Delete',
-          icon: 'trash-2',
-          color: 'danger',
-          action: items => console.debug(`Delete ${items.length} items`),
-        },
-        {
-          label: 'Export',
-          icon: 'download',
-          action: items => console.debug(`Export ${items.length} items`),
-        },
-      ]
-
       return { columns, mockFetch, selection, batchActions }
     },
     template: `
@@ -121,7 +138,7 @@ export const BatchActions: Story = {
 }
 
 /** Custom toolbar slot with action button */
-export const CustomToolbar: Story = {
+export const WithCustomToolbar: Story = {
   render: () => ({
     components: { AsyncDataTable },
     setup: () => ({ columns, mockFetch }),