@polymarbot/nuxt-layer-shadcn-ui 0.3.10 → 0.4.0

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

@@ -56,8 +56,26 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Multiple: Story = {
+export const Disabled: Story = {
   parameters: noControls,
+  args: {
+    disabled: true,
+  },
+}
+
+export const Multiple: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Accordion v-model="value" type="multiple" :items="items" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Accordion, Surface },
     setup () {
@@ -75,21 +93,31 @@ export const Multiple: Story = {
   }),
 }
 
-export const Disabled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Accordion, Surface },
-    setup: () => ({ items }),
-    template: `
-      <Surface variant="bordered" class="max-w-md px-4">
-        <Accordion disabled :items="items" default-value="shipping" />
-      </Surface>
-    `,
-  }),
-}
-
 export const CustomSlots: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Accordion, Surface, Icon },
     setup () {

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

@@ -191,26 +191,18 @@ type Story = StoryObj<typeof meta>
 
 const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
-const renderAdminLayoutVariant = (variant: 'floating' | 'inset') => () => ({
-  components: { AdminLayout, Avatar, Breadcrumb, Button, Card },
-  setup () {
-    const breadcrumb = [
-      { label: 'Dashboard', href: '#' },
-      { label: 'Overview' },
-    ]
-    return { menus, footerDropdown: { profile, menuItems }, breadcrumb, variant }
-  },
-  template: `<AdminLayout :variant="variant" collapsible="icon" :menus="menus" :footer-dropdown="footerDropdown">${layoutContent}</AdminLayout>`,
-})
-
 export const Default: Story = {}
 
 export const Floating: Story = {
   parameters: noControls,
-  render: renderAdminLayoutVariant('floating'),
+  args: {
+    variant: 'floating',
+  },
 }
 
 export const Inset: Story = {
   parameters: noControls,
-  render: renderAdminLayoutVariant('inset'),
+  args: {
+    variant: 'inset',
+  },
 }

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

@@ -30,7 +30,22 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Types: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Alert },
     setup: () => ({ types }),
@@ -45,7 +60,22 @@ export const Types: Story = {
 }
 
 export const WithIcons: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Alert },
     template: `

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

@@ -37,10 +37,55 @@ type Story = StoryObj<typeof meta>
 
 const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
-export const Default: Story = {}
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<script setup lang="ts">
+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}\`
+}
+</script>
+
+<template>
+  <Button @click="handleConfirm">Confirm</Button>
+  <div v-if="result">Result: {{ result }}</div>
+</template>
+`.trim(),
+      },
+    },
+  },
+}
 
 export const Alert: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<script setup lang="ts">
+const { alert } = useDialog()
+const result = ref('')
+
+async function handleAlert () {
+  await alert({ title: 'Error', type: 'error', message: 'Something went wrong.' })
+  result.value = 'alert → closed'
+}
+</script>
+
+<template>
+  <Button variant="outline" @click="handleAlert">Alert</Button>
+  <div v-if="result">Result: {{ result }}</div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     setup () {
@@ -62,7 +107,29 @@ export const Alert: Story = {
 }
 
 export const Destroy: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<script setup lang="ts">
+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}\`
+}
+</script>
+
+<template>
+  <Button variant="destructive" @click="handleDestroy">Destroy</Button>
+  <div v-if="result">Result: {{ result }}</div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     setup () {
@@ -84,7 +151,33 @@ export const Destroy: Story = {
 }
 
 export const MultiDialog: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<script setup lang="ts">
+const { confirm, alert, destroy } = useDialog()
+const result = ref('')
+
+async function handleMulti () {
+  result.value = 'waiting...'
+  const r1 = confirm({ title: 'Dialog 1', message: 'First confirm dialog' })
+  const r2 = alert({ title: 'Dialog 2', message: 'Second alert dialog' })
+  const r3 = destroy({ title: 'Dialog 3', message: 'Third destroy dialog' })
+  const [ v1, , v3 ] = await Promise.all([ r1, r2, r3 ])
+  result.value = \`multi → confirm: \${v1}, alert: done, destroy: \${v3}\`
+}
+</script>
+
+<template>
+  <Button variant="secondary" @click="handleMulti">Multi Dialog</Button>
+  <div v-if="result">Result: {{ result }}</div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     setup () {
@@ -110,7 +203,23 @@ export const MultiDialog: Story = {
 }
 
 export const WithTypes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<script setup lang="ts">
+const { confirm, alert, destroy } = useDialog()
+
+confirm({ title: 'Warning', type: 'warn', message: 'This operation may affect your data.' })
+alert({ title: 'Information', type: 'info', message: 'Your changes have been saved.' })
+alert({ title: 'Success', type: 'success', message: 'Payment completed successfully.' })
+destroy({ title: 'Delete Account', message: 'All data will be permanently removed.' })
+</script>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     setup () {

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

@@ -120,7 +120,24 @@ export const Default: Story = {}
 
 /** Batch actions with row selection and dual toolbars */
 export const WithBatchActions: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <AsyncDataTable
+    :columns="columns"
+    :fetchMethod="mockFetch"
+    :batchActions="batchActions"
+    v-model:selection="selection"
+    showTopToolbar
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { AsyncDataTable },
     setup () {
@@ -144,7 +161,24 @@ export const WithBatchActions: Story = {
 
 /** Custom toolbar slot with action button */
 export const WithCustomToolbar: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <AsyncDataTable :columns="columns" :fetchMethod="mockFetch" showTopToolbar>
+    <template #toolbar>
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground">
+        + Add User
+      </button>
+    </template>
+  </AsyncDataTable>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { AsyncDataTable },
     setup: () => ({ columns, mockFetch }),

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

@@ -37,7 +37,20 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Sizes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex items-end gap-4">
+    <Avatar v-for="s in sizes" :key="s" :size="s" label="AB" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Avatar },
     setup: () => ({ sizes }),
@@ -53,7 +66,20 @@ export const Sizes: Story = {
 }
 
 export const Shapes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex items-center gap-4">
+    <Avatar v-for="sh in shapes" :key="sh" :shape="sh" label="AB" size="large" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Avatar },
     setup: () => ({ shapes }),
@@ -69,7 +95,21 @@ export const Shapes: Story = {
 }
 
 export const WithImage: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Avatar },
     template: `
@@ -82,7 +122,21 @@ export const WithImage: Story = {
 }
 
 export const FallbackLabel: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex items-center gap-4">
+    <Avatar label="John Doe" fallback-label="JD" />
+    <Avatar fallback-label="??" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Avatar },
     template: `

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

@@ -29,7 +29,20 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Variants: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <Badge v-for="v in variants" :key="v" :variant="v">{{ v }}</Badge>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Badge },
     setup: () => ({ variants }),
@@ -42,7 +55,23 @@ export const Variants: Story = {
 }
 
 export const Numeric: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Badge },
     template: `
@@ -57,7 +86,23 @@ export const Numeric: Story = {
 }
 
 export const WithIcons: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Badge, Icon },
     template: `

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

@@ -40,29 +40,18 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const WithHome: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Breadcrumb },
-    setup: () => ({ home, basicItems }),
-    template: '<Breadcrumb :home="home" :model="basicItems" />',
-  }),
-}
-
 export const WithIcons: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Breadcrumb },
-    setup: () => ({ home, withIconItems }),
-    template: '<Breadcrumb :home="home" :model="withIconItems" />',
-  }),
+  args: {
+    home,
+    model: withIconItems,
+  },
 }
 
 export const SingleItem: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Breadcrumb },
-    setup: () => ({ home }),
-    template: '<Breadcrumb :home="home" />',
-  }),
+  args: {
+    home,
+    model: undefined,
+  },
 }