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

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

@@ -92,7 +92,23 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const SingleSelection: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable
+    :data="data"
+    :columns="columns"
+    selectionMode="single"
+    v-model:selection="selection"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any },
     setup () {
@@ -116,7 +132,23 @@ export const SingleSelection: Story = {
 }
 
 export const MultipleSelection: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable
+    :data="data"
+    :columns="columns"
+    selectionMode="multiple"
+    v-model:selection="selection"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any },
     setup () {
@@ -140,7 +172,23 @@ export const MultipleSelection: Story = {
 }
 
 export const Sortable: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable
+    :data="sortedData"
+    :columns="sortableColumns"
+    v-model:sortBy="sortBy"
+    v-model:sortOrder="sortOrder"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any },
     setup () {
@@ -177,7 +225,18 @@ export const Sortable: Story = {
 }
 
 export const ColumnTypes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable :data="data" :columns="typeColumns" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any },
     setup: () => ({ data: sampleData, typeColumns }),
@@ -190,7 +249,27 @@ export const ColumnTypes: Story = {
 }
 
 export const CustomSlots: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable :data="data" :columns="columns">
+    <template #status="{ value }">
+      <Tag :color="value === 'active' ? 'success' : 'default'">
+        {{ value }}
+      </Tag>
+    </template>
+    <template #amount="{ value }">
+      <span class="font-mono font-medium">\${{ Number(value).toFixed(2) }}</span>
+    </template>
+  </DataTable>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any, Tag },
     setup: () => ({ data: sampleData, slotColumns }),
@@ -212,7 +291,32 @@ export const CustomSlots: Story = {
 }
 
 export const SlotEmptyFallback: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable :data="data" :columns="columns">
+    <template #status="{ value }">
+      <Tag
+        v-if="value === 'active' || value === 'inactive'"
+        :color="value === 'active' ? 'success' : 'default'"
+      >
+        {{ value }}
+      </Tag>
+    </template>
+    <template #action="{ value }">
+      <button v-if="value" class="text-sm text-primary underline">
+        {{ value }}
+      </button>
+    </template>
+  </DataTable>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any, Tag },
     setup () {
@@ -252,7 +356,14 @@ export const SlotEmptyFallback: Story = {
 }
 
 export const EmptyState: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DataTable :data="[]" :columns="columns" />',
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any },
     setup: () => ({ basicColumns }),
@@ -265,7 +376,26 @@ export const EmptyState: Story = {
 }
 
 export const FooterSlot: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable :data="data" :columns="columns">
+    <template #footer>
+      <tr class="h-12 border-t text-sm font-medium">
+        <td class="px-4">Total</td>
+        <td class="px-4" colspan="2"></td>
+        <td class="px-4 font-mono">\${{ data.reduce((sum, r) => sum + r.amount, 0).toFixed(2) }}</td>
+      </tr>
+    </template>
+  </DataTable>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any, Tag },
     setup: () => ({ data: sampleData, slotColumns }),
@@ -286,7 +416,27 @@ export const FooterSlot: Story = {
 }
 
 export const FrozenColumns: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable
+    :data="data"
+    :columns="frozenColumns"
+    selectionMode="multiple"
+    v-model:selection="selection"
+  >
+    <template #id>
+      <button class="text-sm text-primary underline">Edit</button>
+    </template>
+  </DataTable>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any },
     setup () {
@@ -311,7 +461,14 @@ export const FrozenColumns: Story = {
 }
 
 export const Loading: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DataTable :data="data" :columns="columns" loading />',
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any },
     setup: () => ({ data: sampleData, basicColumns }),
@@ -324,7 +481,23 @@ export const Loading: Story = {
 }
 
 export const RowClick: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable
+    :data="data"
+    :columns="columns"
+    clickable
+    @rowClick="row => lastClicked = row"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { DataTable: DataTable as any },
     setup () {

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

@@ -56,7 +56,14 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const MonthPicker: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DatePicker v-model="month" type="month" placeholder="Pick a month" />',
+      },
+    },
+  },
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -73,7 +80,14 @@ export const MonthPicker: Story = {
 }
 
 export const YearPicker: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DatePicker v-model="year" type="year" placeholder="Pick a year" />',
+      },
+    },
+  },
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -90,7 +104,14 @@ export const YearPicker: Story = {
 }
 
 export const WithTime: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DatePicker v-model="date" showTime />',
+      },
+    },
+  },
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -107,7 +128,14 @@ export const WithTime: Story = {
 }
 
 export const Preselected: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DatePicker v-model="preselected" />',
+      },
+    },
+  },
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -124,7 +152,14 @@ export const Preselected: Story = {
 }
 
 export const ValueFormat: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DatePicker v-model="formatted" valueFormat="yyyy-MM-dd" placeholder="Pick a date" />',
+      },
+    },
+  },
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -141,7 +176,14 @@ export const ValueFormat: Story = {
 }
 
 export const Disabled: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DatePicker v-model="date" disabled />',
+      },
+    },
+  },
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -157,7 +199,14 @@ export const Disabled: Story = {
 }
 
 export const Readonly: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DatePicker v-model="date" readonly />',
+      },
+    },
+  },
   render: () => ({
     components: { DatePicker },
     setup () {

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

@@ -56,7 +56,14 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const WithTime: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DateRangePicker v-model="withTime" showTime />',
+      },
+    },
+  },
   render: () => ({
     components: { DateRangePicker },
     setup () {
@@ -73,7 +80,14 @@ export const WithTime: Story = {
 }
 
 export const MaxSpanDays: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DateRangePicker v-model="maxSpan" :maxSpanDays="7" />',
+      },
+    },
+  },
   render: () => ({
     components: { DateRangePicker },
     setup () {
@@ -90,7 +104,14 @@ export const MaxSpanDays: Story = {
 }
 
 export const Preselected: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DateRangePicker v-model="preselected" />',
+      },
+    },
+  },
   render: () => ({
     components: { DateRangePicker },
     setup () {
@@ -110,7 +131,14 @@ export const Preselected: Story = {
 }
 
 export const Disabled: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DateRangePicker v-model="range" disabled />',
+      },
+    },
+  },
   render: () => ({
     components: { DateRangePicker },
     setup () {
@@ -129,7 +157,14 @@ export const Disabled: Story = {
 }
 
 export const Readonly: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<DateRangePicker v-model="range" readonly />',
+      },
+    },
+  },
   render: () => ({
     components: { DateRangePicker },
     setup () {

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

@@ -37,22 +37,25 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Horizontal: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Divider },
-    template: `
-      <div class="space-y-4">
-        <p>Content above</p>
-        <Divider />
-        <p>Content below</p>
-      </div>
-    `,
-  }),
-}
-
 export const Vertical: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex h-8 items-center gap-4">
+    <span>Left</span>
+    <Divider type="vertical" />
+    <span>Center</span>
+    <Divider type="vertical" />
+    <span>Right</span>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Divider },
     template: `

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

@@ -1,10 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import Button from '../Button/index.vue'
 import Input from '../Input/index.vue'
+import type { ButtonVariant } from '../Button/types'
 import type { DrawerSide } from './types'
 import Drawer from './index.vue'
 
 const sides: DrawerSide[] = [ 'top', 'right', 'bottom', 'left' ]
+const buttonVariants: ButtonVariant[] = [ 'default', 'destructive', 'outline', 'secondary', 'ghost', 'link' ]
 
 const meta = {
   title: 'UI/Drawer',
@@ -23,6 +26,9 @@ const meta = {
     description: { control: 'text' },
     confirmText: { control: 'text' },
     cancelText: { control: 'text' },
+    confirmVariant: { control: 'select', options: buttonVariants },
+    cancelVariant: { control: 'select', options: buttonVariants },
+    class: { control: 'text' },
   },
   args: {
     loading: false,
@@ -38,6 +44,9 @@ const meta = {
     description: '',
     confirmText: 'OK',
     cancelText: 'Cancel',
+    confirmVariant: 'default',
+    cancelVariant: 'outline',
+    class: '',
   },
   render: args => ({
     components: { Drawer, Button, Input },
@@ -65,7 +74,29 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const WithDescription: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Drawer
+    v-model:visible="visible"
+    title="Edit Profile"
+    description="Update your personal information. Changes will be visible to other users immediately."
+    showCancel
+    confirmText="Save"
+  >
+    <div class="space-y-3">
+      <Input placeholder="Name" />
+      <Input placeholder="Email" />
+    </div>
+  </Drawer>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Drawer, Button, Input },
     setup () {
@@ -93,7 +124,24 @@ export const WithDescription: Story = {
 }
 
 export const ScrollableContent: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Drawer v-model:visible="visible" title="Terms of Service" showCancel confirmText="Accept">
+    <div class="space-y-4">
+      <p v-for="i in 20" :key="i">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
+      </p>
+    </div>
+  </Drawer>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Drawer, Button },
     setup () {
@@ -116,7 +164,29 @@ export const ScrollableContent: Story = {
 }
 
 export const Sides: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Drawer v-model:visible="sideTop" side="top" title="Top Drawer">
+    <p>Slides in from the top.</p>
+  </Drawer>
+  <Drawer v-model:visible="sideRight" side="right" title="Right Drawer">
+    <p>Slides in from the right.</p>
+  </Drawer>
+  <Drawer v-model:visible="sideBottom" side="bottom" title="Bottom Drawer">
+    <p>Slides in from the bottom.</p>
+  </Drawer>
+  <Drawer v-model:visible="sideLeft" side="left" title="Left Drawer">
+    <p>Slides in from the left.</p>
+  </Drawer>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Drawer, Button },
     setup () {
@@ -151,32 +221,61 @@ export const Sides: Story = {
   }),
 }
 
+export const WithTrigger: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Drawer title="Drawer with Trigger">
+    <template #trigger>
+      <Button>Open Drawer</Button>
+    </template>
+    <p>The trigger slot lets the consumer place the open button directly inside the Drawer, without managing visible state.</p>
+  </Drawer>
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Drawer, Button },
+    template: `
+      <Drawer title="Drawer with Trigger">
+        <template #trigger>
+          <Button>Open Drawer</Button>
+        </template>
+        <p>The trigger slot lets the consumer place the open button directly inside the Drawer, without managing visible state.</p>
+      </Drawer>
+    `,
+  }),
+}
+
 export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({
-    components: { Drawer, Button },
-    setup () {
-      const visible = ref(false)
-      return { visible }
-    },
+    components: { Drawer, Button, EventLog },
+    setup: () => ({ visible: ref(false) }),
     template: `
-      <div>
+      <EventLog v-slot="{ record }">
         <Button @click="visible = true">Open Drawer</Button>
         <Drawer
           v-model:visible="visible"
           title="Event Demo"
-          description="Open the Actions panel to see emitted events."
+          description="Each emitted event will be appended to the log below."
           showCancel
           confirmText="Confirm"
-          @open="() => {}"
-          @close="() => {}"
-          @closed="() => {}"
-          @confirm="() => {}"
-          @cancel="() => {}"
+          @open="record('open')"
+          @close="record('close')"
+          @closed="record('closed')"
+          @confirm="record('confirm')"
+          @cancel="record('cancel')"
+          @update:visible="(v) => record('update:visible', v)"
         >
           <p>Click Confirm, Cancel, or the close button to see events fire.</p>
         </Drawer>
-      </div>
+      </EventLog>
     `,
   }),
 }