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

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

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import type { DataTableColumn } from './types'
-import DataTableRaw from './index.vue'
-
-// Cast generic component for Storybook compatibility
-const DataTable = DataTableRaw as any
+import DataTable from './index.vue'
 
 interface User {
   id: number
@@ -30,37 +27,122 @@ const basicColumns: DataTableColumn[] = [
   { field: 'status', title: 'Status', width: '100px' },
 ]
 
+const sortableColumns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px', sortable: true },
+  { field: 'email', title: 'Email', minWidth: '200px' },
+  { field: 'role', title: 'Role', width: '100px', sortable: true },
+  { field: 'amount', title: 'Amount', width: '120px', type: 'currency', sortable: true },
+  { field: 'createdAt', title: 'Created', width: '140px', type: 'date', sortable: true },
+]
+
+const typeColumns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px' },
+  { field: 'amount', title: 'Amount', width: '120px', type: 'currency' },
+  { field: 'createdAt', title: 'Date', width: '140px', type: 'date' },
+  { field: 'status', title: 'Empty', width: '100px', type: 'empty' },
+]
+
+const slotColumns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px' },
+  { field: 'email', title: 'Email', minWidth: '200px' },
+  { field: 'status', title: 'Status', width: '120px' },
+  { field: 'amount', title: 'Amount', width: '120px' },
+]
+
+const frozenColumns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px', fixed: 'left' },
+  { field: 'email', title: 'Email', width: '250px', fixed: 'left' },
+  { field: 'role', title: 'Role', width: '150px' },
+  { field: 'status', title: 'Status', width: '150px' },
+  { field: 'amount', title: 'Amount', width: '150px' },
+  { field: 'createdAt', title: 'Created', width: '180px', type: 'date' },
+  { field: 'id', title: 'Actions', width: '100px', fixed: 'right' },
+]
+
 const meta = {
   title: 'UI/DataTable',
-  component: DataTable,
+  component: DataTable as any,
   argTypes: {
+    selectionMode: { control: 'select', options: [ undefined, 'single', 'multiple' ]},
     loading: { control: 'boolean' },
+    sortBy: { control: 'text' },
+    sortOrder: { control: 'select', options: [ null, 1, -1 ]},
   },
   args: {
+    selectionMode: undefined,
     loading: false,
+    sortBy: null,
+    sortOrder: null,
   },
+  render: args => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ args, data: sampleData, basicColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="basicColumns" v-bind="args" />
+      </div>
+    `,
+  }),
 } satisfies Meta
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
-    components: { DataTable },
+export const Default: Story = {}
+
+export const SingleSelection: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup () {
+      const selection = ref<User | null>(null)
+      return { data: sampleData, basicColumns, selection }
+    },
+    template: `
+      <div class="w-full">
+        <DataTable
+          :data="data"
+          :columns="basicColumns"
+          selectionMode="single"
+          v-model:selection="selection"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">
+          Selected: {{ selection?.name ?? 'none' }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const MultipleSelection: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup () {
+      const selection = ref<User[]>([])
+      return { data: sampleData, basicColumns, selection }
+    },
+    template: `
+      <div class="w-full">
+        <DataTable
+          :data="data"
+          :columns="basicColumns"
+          selectionMode="multiple"
+          v-model:selection="selection"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">
+          Selected: {{ selection.length > 0 ? selection.map(r => r.name).join(', ') : 'none' }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const Sortable: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
     setup () {
-      const singleSelection = ref(null)
-      const multipleSelection = ref([])
       const sortBy = ref<string | null>(null)
       const sortOrder = ref<number | null>(null)
 
-      const sortableColumns: DataTableColumn[] = [
-        { field: 'name', title: 'Name', width: '120px', sortable: true },
-        { field: 'email', title: 'Email', minWidth: '200px' },
-        { field: 'role', title: 'Role', width: '100px', sortable: true },
-        { field: 'amount', title: 'Amount', width: '120px', type: 'currency', sortable: true },
-        { field: 'createdAt', title: 'Created', width: '140px', type: 'date', sortable: true },
-      ]
-
       const sortedData = computed(() => {
         if (!sortBy.value || !sortOrder.value) return sampleData
         return [ ...sampleData ].sort((a, b) => {
@@ -72,159 +154,127 @@ export const Default: Story = {
         })
       })
 
-      const typeColumns: DataTableColumn[] = [
-        { field: 'name', title: 'Name', width: '120px' },
-        { field: 'amount', title: 'Amount', width: '120px', type: 'currency' },
-        { field: 'createdAt', title: 'Date', width: '140px', type: 'date' },
-        { field: 'status', title: 'Empty', width: '100px', type: 'empty' },
-      ]
-
-      const slotColumns: DataTableColumn[] = [
-        { field: 'name', title: 'Name', width: '120px' },
-        { field: 'email', title: 'Email', minWidth: '200px' },
-        { field: 'status', title: 'Status', width: '120px' },
-        { field: 'amount', title: 'Amount', width: '120px' },
-      ]
-
-      const frozenColumns: DataTableColumn[] = [
-        { field: 'name', title: 'Name', width: '120px', fixed: 'left' },
-        { field: 'email', title: 'Email', width: '250px', fixed: 'left' },
-        { field: 'role', title: 'Role', width: '150px' },
-        { field: 'status', title: 'Status', width: '150px' },
-        { field: 'amount', title: 'Amount', width: '150px', type: 'currency' },
-        { field: 'createdAt', title: 'Created', width: '180px', type: 'date' },
-        { field: 'id', title: 'Actions', width: '100px', fixed: 'right' },
-      ]
-
-      return {
-        args,
-        data: sampleData,
-        basicColumns,
-        sortableColumns,
-        typeColumns,
-        slotColumns,
-        frozenColumns,
-        singleSelection,
-        multipleSelection,
-        sortBy,
-        sortOrder,
-        sortedData,
-      }
+      return { sortableColumns, sortBy, sortOrder, sortedData }
     },
     template: `
-      <div class="w-full space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <DataTable :data="data" :columns="basicColumns" v-bind="args" />
-        </section>
-
-        <!-- Single Selection -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Single Selection</h3>
-          <DataTable
-            :data="data"
-            :columns="basicColumns"
-            selectionMode="single"
-            v-model:selection="singleSelection"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">
-            Selected: {{ singleSelection?.name ?? 'none' }}
-          </div>
-        </section>
-
-        <!-- Multiple Selection -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Multiple Selection</h3>
-          <DataTable
-            :data="data"
-            :columns="basicColumns"
-            selectionMode="multiple"
-            v-model:selection="multipleSelection"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">
-            Selected: {{ multipleSelection.length > 0 ? multipleSelection.map(r => r.name).join(', ') : 'none' }}
-          </div>
-        </section>
-
-        <!-- Sortable -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Sortable Columns</h3>
-          <DataTable
-            :data="sortedData"
-            :columns="sortableColumns"
-            v-model:sortBy="sortBy"
-            v-model:sortOrder="sortOrder"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">
-            Sort: {{ sortBy ?? 'none' }} / {{ sortOrder ?? 'none' }}
-          </div>
-        </section>
-
-        <!-- Column Types -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Column Types (text, currency, date, empty)</h3>
-          <DataTable :data="data" :columns="typeColumns" />
-        </section>
-
-        <!-- Custom Slots -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Custom Cell Slots</h3>
-          <DataTable :data="data" :columns="slotColumns">
-            <template #status="{ value }">
-              <span
-                :class="[
-                  'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-                  value === 'active'
-                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                    : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
-                ]"
-              >
-                {{ value }}
-              </span>
-            </template>
-            <template #amount="{ value }">
-              <span class="font-mono font-medium">\${{ Number(value).toFixed(2) }}</span>
-            </template>
-          </DataTable>
-        </section>
-
-        <!-- Empty State -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Empty State</h3>
-          <DataTable :data="[]" :columns="basicColumns" />
-        </section>
-
-        <!-- Footer Slot -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Footer Slot</h3>
-          <DataTable :data="data" :columns="slotColumns">
-            <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>
-        </section>
-
-        <!-- Frozen Columns -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Frozen Columns (scroll horizontally)</h3>
-          <div class="max-w-[600px]">
-            <DataTable
-              :data="data"
-              :columns="frozenColumns"
-              selectionMode="multiple"
-              v-model:selection="multipleSelection"
+      <div class="w-full">
+        <DataTable
+          :data="sortedData"
+          :columns="sortableColumns"
+          v-model:sortBy="sortBy"
+          v-model:sortOrder="sortOrder"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">
+          Sort: {{ sortBy ?? 'none' }} / {{ sortOrder ?? 'none' }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const ColumnTypes: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ data: sampleData, typeColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="typeColumns" />
+      </div>
+    `,
+  }),
+}
+
+export const CustomSlots: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ data: sampleData, slotColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="slotColumns">
+          <template #status="{ value }">
+            <span
+              :class="[
+                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                value === 'active'
+                  ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                  : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
+              ]"
             >
-              <template #id>
-                <button class="text-sm text-primary underline">Edit</button>
-              </template>
-            </DataTable>
-          </div>
-        </section>
+              {{ value }}
+            </span>
+          </template>
+          <template #amount="{ value }">
+            <span class="font-mono font-medium">\${{ Number(value).toFixed(2) }}</span>
+          </template>
+        </DataTable>
+      </div>
+    `,
+  }),
+}
+
+export const EmptyState: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ basicColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="[]" :columns="basicColumns" />
+      </div>
+    `,
+  }),
+}
+
+export const FooterSlot: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ data: sampleData, slotColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="slotColumns">
+          <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>
+      </div>
+    `,
+  }),
+}
+
+export const FrozenColumns: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup () {
+      const selection = ref<User[]>([])
+      return { data: sampleData, frozenColumns, selection }
+    },
+    template: `
+      <div class="max-w-[600px]">
+        <DataTable
+          :data="data"
+          :columns="frozenColumns"
+          selectionMode="multiple"
+          v-model:selection="selection"
+        >
+          <template #id>
+            <button class="text-sm text-primary underline">Edit</button>
+          </template>
+        </DataTable>
+      </div>
+    `,
+  }),
+}
+
+export const Loading: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ data: sampleData, basicColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="basicColumns" loading />
       </div>
     `,
   }),

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

@@ -10,7 +10,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/table'
+} from '../../shadcn/table'
 import type {
   DataTableColumn,
   DataTableProps,

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

@@ -1,69 +1,163 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { DatePickerType } from './types'
 import DatePicker from './index.vue'
 
+const types: DatePickerType[] = [ 'date', 'month', 'year' ]
+
 const meta = {
   title: 'UI/DatePicker',
   component: DatePicker,
   argTypes: {
+    modelValue: { control: 'date' },
+    type: { control: 'select', options: types },
     showTime: { control: 'boolean' },
     disabled: { control: 'boolean' },
+    readonly: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    minDate: { control: 'date' },
+    maxDate: { control: 'date' },
+    valueFormat: { control: 'text' },
+    autoApply: { control: 'boolean' },
+    class: { control: 'text' },
   },
   args: {
+    modelValue: null,
+    type: 'date',
     showTime: false,
     disabled: false,
+    readonly: false,
+    placeholder: '',
+    minDate: undefined,
+    maxDate: undefined,
+    valueFormat: '',
+    autoApply: false,
+    class: '',
   },
+  render: args => ({
+    components: { DatePicker },
+    setup () {
+      const value = ref<Date | string | null>(null)
+      return { args, value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <DatePicker v-model="value" v-bind="args" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof DatePicker>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const MonthPicker: Story = {
+  render: () => ({
     components: { DatePicker },
     setup () {
-      const date = ref<Date | null>(null)
-      const preselected = ref<Date>(new Date(2025, 5, 15))
-      const formatted = ref<string | null>(null)
       const month = ref<Date | null>(null)
+      return { month }
+    },
+    template: `
+      <div class="max-w-xs">
+        <DatePicker v-model="month" type="month" placeholder="Pick a month" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ month }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const YearPicker: Story = {
+  render: () => ({
+    components: { DatePicker },
+    setup () {
       const year = ref<Date | null>(null)
-      return { args, date, month, year, preselected, formatted }
+      return { year }
     },
     template: `
-      <div class="space-y-10 max-w-xs">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <DatePicker v-model="date" v-bind="args" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ date }}</div>
-        </section>
+      <div class="max-w-xs">
+        <DatePicker v-model="year" type="year" placeholder="Pick a year" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ year }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Month Picker -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Month Picker</h3>
-          <DatePicker v-model="month" type="month" placeholder="Pick a month" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ month }}</div>
-        </section>
+export const WithTime: Story = {
+  render: () => ({
+    components: { DatePicker },
+    setup () {
+      const date = ref<Date | null>(null)
+      return { date }
+    },
+    template: `
+      <div class="max-w-xs">
+        <DatePicker v-model="date" showTime />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ date }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Year Picker -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Year Picker</h3>
-          <DatePicker v-model="year" type="year" placeholder="Pick a year" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ year }}</div>
-        </section>
+export const Preselected: Story = {
+  render: () => ({
+    components: { DatePicker },
+    setup () {
+      const preselected = ref<Date>(new Date(2025, 5, 15))
+      return { preselected }
+    },
+    template: `
+      <div class="max-w-xs">
+        <DatePicker v-model="preselected" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ preselected }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Preselected -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Preselected</h3>
-          <DatePicker v-model="preselected" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ preselected }}</div>
-        </section>
+export const ValueFormat: Story = {
+  render: () => ({
+    components: { DatePicker },
+    setup () {
+      const formatted = ref<string | null>(null)
+      return { formatted }
+    },
+    template: `
+      <div class="max-w-xs">
+        <DatePicker v-model="formatted" valueFormat="yyyy-MM-dd" placeholder="Pick a date" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ formatted }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { DatePicker },
+    setup () {
+      const date = ref<Date>(new Date(2025, 5, 15))
+      return { date }
+    },
+    template: `
+      <div class="max-w-xs">
+        <DatePicker v-model="date" disabled />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Value Format -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Value Format (yyyy-MM-dd)</h3>
-          <DatePicker v-model="formatted" valueFormat="yyyy-MM-dd" placeholder="Pick a date" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ formatted }}</div>
-        </section>
+export const Readonly: Story = {
+  render: () => ({
+    components: { DatePicker },
+    setup () {
+      const date = ref<Date>(new Date(2025, 5, 15))
+      return { date }
+    },
+    template: `
+      <div class="max-w-xs">
+        <DatePicker v-model="date" readonly />
       </div>
     `,
   }),