@polymarbot/nuxt-layer-shadcn-ui 0.1.9 → 0.2.0-w

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

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

@@ -1,11 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { AvatarShape, AvatarSize } from './types'
 import Avatar from './index.vue'
 
-type AvatarSize = 'small' | 'normal' | 'large' | 'xlarge'
-type AvatarShape = 'circle' | 'square'
-
-const sizes: AvatarSize[] = [ 'small', 'normal', 'large', 'xlarge' ]
-const shapes: AvatarShape[] = [ 'circle', 'square' ]
+const sizes = [ 'small', 'normal', 'large', 'xlarge' ] as const satisfies readonly AvatarSize[]
+const shapes = [ 'circle', 'square' ] as const satisfies readonly AvatarShape[]
 
 const meta = {
   title: 'UI/Avatar',
@@ -20,64 +18,71 @@ const meta = {
   args: {
     size: 'normal',
     shape: 'circle',
+    image: '',
     label: 'AB',
+    fallbackLabel: '',
   },
+  render: args => ({
+    components: { Avatar },
+    setup: () => ({ args }),
+    template: '<Avatar v-bind="args" />',
+  }),
 } satisfies Meta<typeof Avatar>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Sizes: Story = {
+  render: () => ({
     components: { Avatar },
-    setup: () => ({ args, sizes, shapes }),
+    setup: () => ({ sizes }),
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Avatar v-bind="args" />
-        </section>
-
-        <!-- Sizes -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
-          <div class="flex items-end gap-4">
-            <div v-for="s in sizes" :key="s" class="flex flex-col items-center gap-2">
-              <Avatar :size="s" label="AB" />
-              <span class="text-xs text-muted-foreground">{{ s }}</span>
-            </div>
-          </div>
-        </section>
+      <div class="flex items-end gap-4">
+        <div v-for="s in sizes" :key="s" class="flex flex-col items-center gap-2">
+          <Avatar :size="s" label="AB" />
+          <span class="text-xs text-muted-foreground">{{ s }}</span>
+        </div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Shapes -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Shapes</h3>
-          <div class="flex items-center gap-4">
-            <div v-for="sh in shapes" :key="sh" class="flex flex-col items-center gap-2">
-              <Avatar :shape="sh" label="AB" size="large" />
-              <span class="text-xs text-muted-foreground">{{ sh }}</span>
-            </div>
-          </div>
-        </section>
+export const Shapes: Story = {
+  render: () => ({
+    components: { Avatar },
+    setup: () => ({ shapes }),
+    template: `
+      <div class="flex items-center gap-4">
+        <div v-for="sh in shapes" :key="sh" class="flex flex-col items-center gap-2">
+          <Avatar :shape="sh" label="AB" size="large" />
+          <span class="text-xs text-muted-foreground">{{ sh }}</span>
+        </div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Image -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Image</h3>
-          <div class="flex items-center gap-4">
-            <Avatar image="https://i.pravatar.cc/150?u=1" size="large" />
-            <Avatar image="https://i.pravatar.cc/150?u=2" size="large" shape="square" />
-          </div>
-        </section>
+export const WithImage: Story = {
+  render: () => ({
+    components: { Avatar },
+    template: `
+      <div class="flex items-center gap-4">
+        <Avatar image="https://i.pravatar.cc/150?u=1" size="large" />
+        <Avatar image="https://i.pravatar.cc/150?u=2" size="large" shape="square" />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Fallback Label -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Fallback Label</h3>
-          <div class="flex items-center gap-4">
-            <Avatar label="John Doe" fallback-label="JD" />
-            <Avatar fallback-label="??" />
-          </div>
-        </section>
+export const FallbackLabel: Story = {
+  render: () => ({
+    components: { Avatar },
+    template: `
+      <div class="flex items-center gap-4">
+        <Avatar label="John Doe" fallback-label="JD" />
+        <Avatar fallback-label="??" />
       </div>
     `,
   }),

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

@@ -3,7 +3,7 @@ import {
   Avatar as ShadcnAvatar,
   AvatarFallback,
   AvatarImage,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/avatar'
+} from '../../shadcn/avatar'
 import type { AvatarProps } from './types'
 
 const props = withDefaults(defineProps<AvatarProps>(), {

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

@@ -1,8 +1,11 @@
+export type AvatarSize = 'small' | 'normal' | 'large' | 'xlarge'
+export type AvatarShape = 'circle' | 'square'
+
 export interface AvatarProps {
   image?: string
   label?: string
   fallbackLabel?: string
-  size?: 'small' | 'normal' | 'large' | 'xlarge'
-  shape?: 'circle' | 'square'
+  size?: AvatarSize
+  shape?: AvatarShape
   class?: ClassValue
 }

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

@@ -1,10 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { BadgeVariant } from './types'
 import Icon from '../Icon/index.vue'
 import Badge from './index.vue'
 
-type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive'
-
-const variants: BadgeVariant[] = [ 'default', 'secondary', 'outline', 'destructive' ]
+const variants = [ 'default', 'secondary', 'outline', 'destructive' ] as const satisfies readonly BadgeVariant[]
 
 const meta = {
   title: 'UI/Badge',
@@ -15,52 +14,53 @@ const meta = {
   args: {
     variant: 'default',
   },
+  render: args => ({
+    components: { Badge },
+    setup: () => ({ args }),
+    template: '<Badge v-bind="args">Badge</Badge>',
+  }),
 } satisfies Meta<typeof Badge>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
-    components: { Badge, Icon },
-    setup: () => ({ args, variants }),
-    template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Badge v-bind="args">Badge</Badge>
-        </section>
+export const Default: Story = {}
 
-        <!-- Variants -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Variants</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Badge v-for="v in variants" :key="v" :variant="v">{{ v }}</Badge>
-          </div>
-        </section>
+export const Variants: Story = {
+  render: () => ({
+    components: { Badge },
+    setup: () => ({ variants }),
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Badge v-for="v in variants" :key="v" :variant="v">{{ v }}</Badge>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Numeric -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Numeric</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Badge>1</Badge>
-            <Badge variant="secondary">42</Badge>
-            <Badge variant="destructive">99+</Badge>
-            <Badge variant="outline">0</Badge>
-          </div>
-        </section>
+export const Numeric: Story = {
+  render: () => ({
+    components: { Badge },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Badge>1</Badge>
+        <Badge variant="secondary">42</Badge>
+        <Badge variant="destructive">99+</Badge>
+        <Badge variant="outline">0</Badge>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Icons -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Icons</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Badge><Icon name="check" /> Approved</Badge>
-            <Badge variant="secondary"><Icon name="clock" /> Pending</Badge>
-            <Badge variant="destructive"><Icon name="x" /> Rejected</Badge>
-            <Badge variant="outline"><Icon name="star" /> Featured</Badge>
-          </div>
-        </section>
+export const WithIcons: Story = {
+  render: () => ({
+    components: { Badge, Icon },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Badge><Icon name="check" /> Approved</Badge>
+        <Badge variant="secondary"><Icon name="clock" /> Pending</Badge>
+        <Badge variant="destructive"><Icon name="x" /> Rejected</Badge>
+        <Badge variant="outline"><Icon name="star" /> Featured</Badge>
       </div>
     `,
   }),

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge as ShadcnBadge } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/badge'
+import { Badge as ShadcnBadge } from '../../shadcn/badge'
 import type { BadgeProps } from './types'
 
 defineProps<BadgeProps>()

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

@@ -1,3 +1,5 @@
-import type { BadgeVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/badge'
+import type { BadgeVariants } from '../../shadcn/badge'
+
+export type BadgeVariant = NonNullable<BadgeVariants['variant']>
 
 export interface BadgeProps extends /* @vue-ignore */ BadgeVariants {}

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

@@ -1,52 +1,63 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { BreadcrumbItem } from './types'
 import Breadcrumb from './index.vue'
 
+const home: BreadcrumbItem = { label: 'Home', icon: 'house', href: '/' }
+
+const basicItems: BreadcrumbItem[] = [
+  { label: 'Products', href: '/products' },
+  { label: 'Electronics', href: '/products/electronics' },
+  { label: 'Laptops' },
+]
+
+const withIconItems: BreadcrumbItem[] = [
+  { label: 'Settings', icon: 'settings', href: '/settings' },
+  { label: 'Profile' },
+]
+
 const meta = {
   title: 'UI/Breadcrumb',
   component: Breadcrumb,
+  argTypes: {
+    model: { control: 'object' },
+    home: { control: 'object' },
+  },
+  args: {
+    model: basicItems,
+    home,
+  },
+  render: args => ({
+    components: { Breadcrumb },
+    setup: () => ({ args }),
+    template: '<Breadcrumb v-bind="args" />',
+  }),
 } satisfies Meta<typeof Breadcrumb>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const WithHome: Story = {
+  render: () => ({
+    components: { Breadcrumb },
+    setup: () => ({ home, basicItems }),
+    template: '<Breadcrumb :home="home" :model="basicItems" />',
+  }),
+}
+
+export const WithIcons: Story = {
+  render: () => ({
+    components: { Breadcrumb },
+    setup: () => ({ home, withIconItems }),
+    template: '<Breadcrumb :home="home" :model="withIconItems" />',
+  }),
+}
+
+export const SingleItem: Story = {
   render: () => ({
     components: { Breadcrumb },
-    setup () {
-      const home = { label: 'Home', icon: 'house', href: '/' }
-      const basicItems = [
-        { label: 'Products', href: '/products' },
-        { label: 'Electronics', href: '/products/electronics' },
-        { label: 'Laptops' },
-      ]
-      const withIcons = [
-        { label: 'Settings', icon: 'settings', href: '/settings' },
-        { label: 'Profile' },
-      ]
-      return { home, basicItems, withIcons }
-    },
-    template: `
-      <div class="space-y-10">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Basic</h3>
-          <Breadcrumb :model="basicItems" />
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Home</h3>
-          <Breadcrumb :home="home" :model="basicItems" />
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Icons</h3>
-          <Breadcrumb :home="home" :model="withIcons" />
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Single Item</h3>
-          <Breadcrumb :home="home" />
-        </section>
-      </div>
-    `,
+    setup: () => ({ home }),
+    template: '<Breadcrumb :home="home" />',
   }),
 }

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

@@ -6,7 +6,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/breadcrumb'
+} from '../../shadcn/breadcrumb'
 import type { BreadcrumbItem as BreadcrumbItemType, BreadcrumbProps } from './types'
 
 const props = defineProps<BreadcrumbProps>()