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

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

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

@@ -1,66 +1,140 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { DateRangePickerValue } from './types'
 import DateRangePicker from './index.vue'
 
 const meta = {
   title: 'UI/DateRangePicker',
   component: DateRangePicker,
   argTypes: {
+    modelValue: { control: 'object' },
     showTime: { control: 'boolean' },
     disabled: { control: 'boolean' },
+    readonly: { control: 'boolean' },
+    startPlaceholder: { control: 'text' },
+    endPlaceholder: { control: 'text' },
+    minDate: { control: 'date' },
+    maxDate: { control: 'date' },
     maxSpanDays: { control: 'number' },
+    valueFormat: { control: 'text' },
+    autoApply: { control: 'boolean' },
+    class: { control: 'text' },
   },
   args: {
+    modelValue: { start: null, end: null },
     showTime: false,
     disabled: false,
+    readonly: false,
+    startPlaceholder: '',
+    endPlaceholder: '',
+    minDate: undefined,
+    maxDate: undefined,
     maxSpanDays: undefined,
+    valueFormat: '',
+    autoApply: false,
+    class: '',
   },
+  render: args => ({
+    components: { DateRangePicker },
+    setup () {
+      const range = ref<DateRangePickerValue>({ start: null, end: null })
+      return { args, range }
+    },
+    template: `
+      <div class="max-w-lg">
+        <DateRangePicker v-model="range" v-bind="args" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ range }}</div>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof DateRangePicker>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const WithTime: Story = {
+  render: () => ({
+    components: { DateRangePicker },
+    setup () {
+      const withTime = ref<DateRangePickerValue>({ start: null, end: null })
+      return { withTime }
+    },
+    template: `
+      <div class="max-w-lg">
+        <DateRangePicker v-model="withTime" showTime />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ withTime }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const MaxSpanDays: Story = {
+  render: () => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref({ start: null, end: null })
-      const withTime = ref({ start: null, end: null })
-      const maxSpan = ref({ start: null, end: null })
-      const preselected = ref({
+      const maxSpan = ref<DateRangePickerValue>({ start: null, end: null })
+      return { maxSpan }
+    },
+    template: `
+      <div class="max-w-lg">
+        <DateRangePicker v-model="maxSpan" :maxSpanDays="7" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ maxSpan }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Preselected: Story = {
+  render: () => ({
+    components: { DateRangePicker },
+    setup () {
+      const preselected = ref<DateRangePickerValue>({
         start: new Date(2025, 5, 1),
         end: new Date(2025, 5, 15),
       })
-      return { args, range, withTime, maxSpan, preselected }
+      return { preselected }
     },
     template: `
-      <div class="max-w-lg space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <DateRangePicker v-model="range" v-bind="args" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ range }}</div>
-        </section>
-
-        <!-- With Time -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Time</h3>
-          <DateRangePicker v-model="withTime" showTime />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ withTime }}</div>
-        </section>
+      <div class="max-w-lg">
+        <DateRangePicker v-model="preselected" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ preselected }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Max Span (7 days) -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Max Span (7 days)</h3>
-          <DateRangePicker v-model="maxSpan" :maxSpanDays="7" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ maxSpan }}</div>
-        </section>
+export const Disabled: Story = {
+  render: () => ({
+    components: { DateRangePicker },
+    setup () {
+      const range = ref<DateRangePickerValue>({
+        start: new Date(2025, 5, 1),
+        end: new Date(2025, 5, 15),
+      })
+      return { range }
+    },
+    template: `
+      <div class="max-w-lg">
+        <DateRangePicker v-model="range" disabled />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Preselected -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Preselected</h3>
-          <DateRangePicker v-model="preselected" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ preselected }}</div>
-        </section>
+export const Readonly: Story = {
+  render: () => ({
+    components: { DateRangePicker },
+    setup () {
+      const range = ref<DateRangePickerValue>({
+        start: new Date(2025, 5, 1),
+        end: new Date(2025, 5, 15),
+      })
+      return { range }
+    },
+    template: `
+      <div class="max-w-lg">
+        <DateRangePicker v-model="range" readonly />
       </div>
     `,
   }),

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

@@ -1,41 +1,63 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Divider from './index.vue'
 
+const types = [ 'horizontal', 'vertical' ] as const
+
 const meta = {
   title: 'UI/Divider',
   component: Divider,
+  argTypes: {
+    type: { control: 'select', options: types },
+  },
+  args: {
+    type: 'horizontal',
+  },
+  render: args => ({
+    components: { Divider },
+    setup: () => ({ args }),
+    template: `
+      <div v-if="args.type === 'vertical'" class="flex h-8 items-center gap-4">
+        <span>Left</span>
+        <Divider v-bind="args" />
+        <span>Right</span>
+      </div>
+      <div v-else class="space-y-4">
+        <p>Content above</p>
+        <Divider v-bind="args" />
+        <p>Content below</p>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof Divider>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Horizontal: Story = {
+  render: () => ({
     components: { Divider },
-    setup: () => ({ args }),
     template: `
-      <div class="space-y-10">
-        <!-- Horizontal -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Horizontal</h3>
-          <div class="space-y-4">
-            <p>Content above</p>
-            <Divider />
-            <p>Content below</p>
-          </div>
-        </section>
+      <div class="space-y-4">
+        <p>Content above</p>
+        <Divider />
+        <p>Content below</p>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Vertical -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Vertical</h3>
-          <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>
-        </section>
+export const Vertical: Story = {
+  render: () => ({
+    components: { Divider },
+    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>
     `,
   }),

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Separator } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/separator'
+import { Separator } from '../../shadcn/separator'
 import type { DividerProps } from './types'
 
 withDefaults(defineProps<DividerProps>(), {