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

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>(), {

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

@@ -1,8 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Button from '../Button/index.vue'
 import Input from '../Input/index.vue'
+import type { DrawerSide } from './types'
 import Drawer from './index.vue'
 
+const sides: DrawerSide[] = [ 'top', 'right', 'bottom', 'left' ]
+
 const meta = {
   title: 'UI/Drawer',
   component: Drawer,
@@ -14,110 +17,157 @@ const meta = {
     showClose: { control: 'boolean' },
     hideHeader: { control: 'boolean' },
     hideFooter: { control: 'boolean' },
-    side: {
-      control: 'select',
-      options: [ 'top', 'right', 'bottom', 'left' ],
-    },
+    side: { control: 'select', options: sides },
+    title: { control: 'text' },
+    description: { control: 'text' },
+    confirmText: { control: 'text' },
+    cancelText: { control: 'text' },
   },
   args: {
     loading: false,
     disabled: false,
     confirmDisabled: false,
-    showCancel: false,
+    showCancel: true,
     showClose: true,
     hideHeader: false,
     hideFooter: false,
     side: 'right',
+    title: 'Drawer Title',
+    description: '',
+    confirmText: 'OK',
+    cancelText: 'Cancel',
   },
-} satisfies Meta
+  render: args => ({
+    components: { Drawer, Button, Input },
+    setup () {
+      const visible = ref(false)
+      return { args, visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Drawer</Button>
+        <Drawer v-model:visible="visible" v-bind="args">
+          <p>This is the drawer content.</p>
+          <Input class="mt-4" placeholder="Try interacting with this input" />
+        </Drawer>
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof Drawer>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const WithDescription: Story = {
+  render: () => ({
     components: { Drawer, Button, Input },
     setup () {
-      const controlled = ref(false)
-      const withDescription = ref(false)
+      const visible = ref(false)
+      return { visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Drawer</Button>
+        <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>
+      </div>
+    `,
+  }),
+}
+
+export const ScrollableContent: Story = {
+  render: () => ({
+    components: { Drawer, Button },
+    setup () {
+      const visible = ref(false)
+      return { visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Drawer</Button>
+        <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. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+            </p>
+          </div>
+        </Drawer>
+      </div>
+    `,
+  }),
+}
+
+export const Sides: Story = {
+  render: () => ({
+    components: { Drawer, Button },
+    setup () {
       const sideTop = ref(false)
       const sideRight = ref(false)
       const sideBottom = ref(false)
       const sideLeft = ref(false)
-      const scrollable = ref(false)
-      return { args, controlled, withDescription, sideTop, sideRight, sideBottom, sideLeft, scrollable }
+      return { sideTop, sideRight, sideBottom, sideLeft }
     },
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Button @click="controlled = true">Open Drawer</Button>
-          <Drawer
-            v-model:visible="controlled"
-            v-bind="args"
-            title="Drawer Title"
-            confirmText="OK"
-            cancelText="Cancel"
-          >
-            <p>This is the drawer content.</p>
-            <Input class="mt-4" placeholder="Try interacting with this input" />
-          </Drawer>
-        </section>
-
-        <!-- With Description -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Description</h3>
-          <Button @click="withDescription = true">Open Drawer</Button>
-          <Drawer
-            v-model:visible="withDescription"
-            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>
-        </section>
-
-        <!-- Scrollable Content -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Scrollable Content</h3>
-          <Button @click="scrollable = true">Open Drawer</Button>
-          <Drawer v-model:visible="scrollable" 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. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
-              </p>
-            </div>
-          </Drawer>
-        </section>
+      <div>
+        <div class="flex gap-2">
+          <Button variant="outline" @click="sideTop = true">Top</Button>
+          <Button variant="outline" @click="sideRight = true">Right</Button>
+          <Button variant="outline" @click="sideBottom = true">Bottom</Button>
+          <Button variant="outline" @click="sideLeft = true">Left</Button>
+        </div>
+        <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>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Side Variants -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Side</h3>
-          <div class="flex gap-2">
-            <Button variant="outline" @click="sideTop = true">Top</Button>
-            <Button variant="outline" @click="sideRight = true">Right</Button>
-            <Button variant="outline" @click="sideBottom = true">Bottom</Button>
-            <Button variant="outline" @click="sideLeft = true">Left</Button>
-          </div>
-          <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>
-        </section>
+export const EventHandling: Story = {
+  render: () => ({
+    components: { Drawer, Button },
+    setup () {
+      const visible = ref(false)
+      return { visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Drawer</Button>
+        <Drawer
+          v-model:visible="visible"
+          title="Event Demo"
+          description="Open the Actions panel to see emitted events."
+          showCancel
+          confirmText="Confirm"
+          @open="() => {}"
+          @close="() => {}"
+          @closed="() => {}"
+          @confirm="() => {}"
+          @cancel="() => {}"
+        >
+          <p>Click Confirm, Cancel, or the close button to see events fire.</p>
+        </Drawer>
       </div>
     `,
   }),

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

@@ -7,7 +7,7 @@ import {
   SheetFooter,
   SheetHeader,
   SheetTitle,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/sheet'
+} from '../../shadcn/sheet'
 import type { DrawerProps } from './types'
 
 const props = withDefaults(defineProps<DrawerProps>(), {

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

@@ -1,4 +1,4 @@
-import type { ButtonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import type { ButtonVariants } from '../../shadcn/button'
 
 export type DrawerSide = 'top' | 'right' | 'bottom' | 'left'