@polymarbot/nuxt-layer-shadcn-ui 0.5.4 → 0.6.0

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

@@ -28,11 +28,11 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
-    placeholder: '',
+    placeholder: undefined,
     minDate: undefined,
     maxDate: undefined,
-    valueFormat: '',
-    autoApply: false,
+    valueFormat: undefined,
+    autoApply: true,
     class: '',
   },
   render: args => ({
@@ -43,7 +43,7 @@ const meta = {
     },
     template: `
       <div class="max-w-xs">
-        <DatePicker v-model="value" v-bind="args" />
+        <DatePicker v-bind="args" v-model="value" />
         <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,

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

@@ -1,48 +1,53 @@
 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' },
+    start: { control: 'date' },
+    end: { control: 'date' },
+    minDate: { control: 'date' },
+    maxDate: { control: 'date' },
     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: [ null, null ],
+    start: null,
+    end: null,
+    minDate: undefined,
+    maxDate: undefined,
     showTime: false,
     disabled: false,
     readonly: false,
-    startPlaceholder: '',
-    endPlaceholder: '',
-    minDate: undefined,
-    maxDate: undefined,
+    startPlaceholder: undefined,
+    endPlaceholder: undefined,
     maxSpanDays: undefined,
-    valueFormat: '',
-    autoApply: false,
+    valueFormat: undefined,
+    autoApply: true,
     class: '',
   },
   render: args => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref<DateRangePickerValue>([ null, null ])
-      return { args, range }
+      const start = ref<Date | string | null>(args.start ?? null)
+      const end = ref<Date | string | null>(args.end ?? null)
+      return { args, start, end }
     },
     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>
+        <DateRangePicker v-bind="args" v-model:start="start" v-model:end="end" />
+        <div class="mt-2 text-sm text-muted-foreground">
+          <div>Start: {{ start }}</div>
+          <div>End: {{ end }}</div>
+        </div>
       </div>
     `,
   }),
@@ -60,20 +65,24 @@ export const WithTime: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="withTime" showTime />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" showTime />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const withTime = ref<DateRangePickerValue>([ null, null ])
-      return { withTime }
+      const start = ref<Date | string | null>(null)
+      const end = ref<Date | string | null>(null)
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="withTime" showTime />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ withTime }}</div>
+        <DateRangePicker v-model:start="start" v-model:end="end" showTime />
+        <div class="mt-2 text-sm text-muted-foreground">
+          <div>Start: {{ start }}</div>
+          <div>End: {{ end }}</div>
+        </div>
       </div>
     `,
   }),
@@ -84,20 +93,24 @@ export const MaxSpanDays: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="maxSpan" :maxSpanDays="7" />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" :maxSpanDays="7" />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const maxSpan = ref<DateRangePickerValue>([ null, null ])
-      return { maxSpan }
+      const start = ref<Date | string | null>(null)
+      const end = ref<Date | string | null>(null)
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="maxSpan" :maxSpanDays="7" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ maxSpan }}</div>
+        <DateRangePicker v-model:start="start" v-model:end="end" :maxSpanDays="7" />
+        <div class="mt-2 text-sm text-muted-foreground">
+          <div>Start: {{ start }}</div>
+          <div>End: {{ end }}</div>
+        </div>
       </div>
     `,
   }),
@@ -108,23 +121,24 @@ export const Preselected: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="preselected" />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const preselected = ref<DateRangePickerValue>([
-        new Date(2025, 5, 1),
-        new Date(2025, 5, 15),
-      ])
-      return { preselected }
+      const start = ref<Date | string | null>(new Date(2025, 5, 1))
+      const end = ref<Date | string | null>(new Date(2025, 5, 15))
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="preselected" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ preselected }}</div>
+        <DateRangePicker v-model:start="start" v-model:end="end" />
+        <div class="mt-2 text-sm text-muted-foreground">
+          <div>Start: {{ start }}</div>
+          <div>End: {{ end }}</div>
+        </div>
       </div>
     `,
   }),
@@ -135,22 +149,20 @@ export const Disabled: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="range" disabled />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" disabled />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref<DateRangePickerValue>([
-        new Date(2025, 5, 1),
-        new Date(2025, 5, 15),
-      ])
-      return { range }
+      const start = ref<Date | string | null>(new Date(2025, 5, 1))
+      const end = ref<Date | string | null>(new Date(2025, 5, 15))
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="range" disabled />
+        <DateRangePicker v-model:start="start" v-model:end="end" disabled />
       </div>
     `,
   }),
@@ -161,22 +173,20 @@ export const Readonly: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="range" readonly />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" readonly />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref<DateRangePickerValue>([
-        new Date(2025, 5, 1),
-        new Date(2025, 5, 15),
-      ])
-      return { range }
+      const start = ref<Date | string | null>(new Date(2025, 5, 1))
+      const end = ref<Date | string | null>(new Date(2025, 5, 15))
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="range" readonly />
+        <DateRangePicker v-model:start="start" v-model:end="end" readonly />
       </div>
     `,
   }),

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { DateRangePickerProps, DateRangePickerValue } from './types'
+import type { DateRangePickerProps } from './types'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<DateRangePickerProps>(), {
-  modelValue: () => [ null, null ],
+  start: null,
+  end: null,
   showTime: false,
   disabled: false,
   readonly: false,
@@ -19,81 +20,69 @@ const props = withDefaults(defineProps<DateRangePickerProps>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: DateRangePickerValue]
+  'update:start': [value: Date | string | null]
+  'update:end': [value: Date | string | null]
 }>()
 
 const T = useTranslations('components.ui.DateRangePicker')
 
-const startDate = ref<Date | string | null>(props.modelValue?.[0] ?? null)
-const endDate = ref<Date | string | null>(props.modelValue?.[1] ?? null)
-
-watch(() => props.modelValue, val => {
-  startDate.value = val?.[0] ?? null
-  endDate.value = val?.[1] ?? null
+const start = computed({
+  get: () => props.start,
+  set: value => emit('update:start', value),
 })
 
-function emitRange () {
-  emit('update:modelValue', [ startDate.value, endDate.value ])
-}
-
-function handleStartUpdate (value: Date | string | null) {
-  startDate.value = value
-  emitRange()
-}
-
-function handleEndUpdate (value: Date | string | null) {
-  // If time is disabled, set end time to end of day
-  if (value instanceof Date && !props.showTime) {
-    const adjusted = new Date(value)
-    adjusted.setHours(23, 59, 59, 999)
-    endDate.value = adjusted
-  } else {
-    endDate.value = value
-  }
-  emitRange()
-}
+const end = computed({
+  get: () => props.end,
+  set: value => {
+    // When time is disabled, normalize end to end of day so range is inclusive
+    if (value instanceof Date && !props.showTime) {
+      const adjusted = new Date(value)
+      adjusted.setHours(23, 59, 59, 999)
+      emit('update:end', adjusted)
+    } else {
+      emit('update:end', value)
+    }
+  },
+})
 
-// Helper functions for date constraints
 function addDays (date: Date, days: number): Date {
   const result = new Date(date)
   result.setDate(result.getDate() + days)
   return result
 }
 
-function toDate (value: Date | string | null): Date | undefined {
+function toDate (value: Date | string | null | undefined): Date | undefined {
   if (!value) return undefined
   return value instanceof Date ? value : new Date(value)
 }
 
-// Start picker constraints
 const startMinDate = computed(() => {
   const min = props.minDate
-  const spanLimit = props.maxSpanDays && endDate.value
-    ? addDays(toDate(endDate.value)!, -(props.maxSpanDays - 1))
+  const spanLimit = props.maxSpanDays && props.end
+    ? addDays(toDate(props.end)!, -(props.maxSpanDays - 1))
     : undefined
   if (min && spanLimit) return new Date(Math.max(+new Date(min), +spanLimit))
   return min ?? spanLimit
 })
 
 const startMaxDate = computed(() => {
-  const end = toDate(endDate.value)
+  const endDate = toDate(props.end)
   const max = props.maxDate
-  if (end && max) return new Date(Math.min(+end, +new Date(max)))
-  return end ?? max
+  if (endDate && max) return new Date(Math.min(+endDate, +new Date(max)))
+  return endDate ?? max
 })
 
-// End picker constraints
 const endMinDate = computed(() => {
-  const start = toDate(startDate.value)
+  const startDate = toDate(props.start)
   const min = props.minDate
-  if (start && min) return new Date(Math.max(+start, +new Date(min)))
-  return start ?? min
+  if (startDate && min) return new Date(Math.max(+startDate, +new Date(min)))
+  return startDate ?? min
 })
 
 const endMaxDate = computed(() => {
   const max = props.maxDate
-  const spanLimit = props.maxSpanDays && startDate.value
-    ? addDays(toDate(startDate.value)!, props.maxSpanDays - 1)
+  const spanLimit = props.maxSpanDays && props.start
+    ? addDays(toDate(props.start)!, props.maxSpanDays - 1)
     : undefined
   if (max && spanLimit) return new Date(Math.min(+new Date(max), +spanLimit))
   return max ?? spanLimit
@@ -103,7 +92,7 @@ const endMaxDate = computed(() => {
 <template>
   <div :class="cn('gap-2 flex items-center', props.class)">
     <DatePicker
-      :modelValue="startDate"
+      v-model="start"
       :showTime="showTime"
       :disabled="disabled"
       :readonly="readonly"
@@ -113,13 +102,12 @@ const endMaxDate = computed(() => {
       :valueFormat="valueFormat"
       :autoApply="autoApply"
       v-bind="$attrs"
-      @update:modelValue="handleStartUpdate"
     />
     <span class="text-muted-foreground shrink-0">
       {{ T('to') }}
     </span>
     <DatePicker
-      :modelValue="endDate"
+      v-model="end"
       :showTime="showTime"
       :disabled="disabled"
       :readonly="readonly"
@@ -129,7 +117,6 @@ const endMaxDate = computed(() => {
       :valueFormat="valueFormat"
       :autoApply="autoApply"
       v-bind="$attrs"
-      @update:modelValue="handleEndUpdate"
     />
   </div>
 </template>

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

@@ -1,12 +1,12 @@
 import type { DatePickerTimeConfig } from '../DatePicker/types'
 
-export type DateRangePickerValue = [
-  start: Date | string | null,
-  end: Date | string | null,
-]
-
 export interface DateRangePickerProps {
-  modelValue?: DateRangePickerValue
+  start?: Date | string | null
+  end?: Date | string | null
+  /** Minimum selectable date */
+  minDate?: Date | string
+  /** Maximum selectable date */
+  maxDate?: Date | string
   /** Enable time selection, or pass DatePickerTimeConfig for fine-grained control */
   showTime?: boolean | DatePickerTimeConfig
   /** Disable the date range picker */
@@ -17,10 +17,6 @@ export interface DateRangePickerProps {
   startPlaceholder?: string
   /** Placeholder for end date input */
   endPlaceholder?: string
-  /** Minimum selectable date */
-  minDate?: Date | string
-  /** Maximum selectable date */
-  maxDate?: Date | string
   /** Maximum span in days between start and end date */
   maxSpanDays?: number
   /** v-model output format (e.g. 'yyyy-MM-dd', 'timestamp', 'iso') */

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

@@ -57,7 +57,7 @@ const meta = {
     template: `
       <div>
         <Button @click="visible = true">Open Drawer</Button>
-        <Drawer v-model:visible="visible" v-bind="args">
+        <Drawer v-bind="args" v-model:visible="visible">
           <p>This is the drawer content.</p>
           <Input class="mt-4" placeholder="Try interacting with this input" />
         </Drawer>

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

@@ -22,7 +22,7 @@ const meta = {
     },
     template: `
       <div class="max-w-xs">
-        <InputCurrency v-model="value" v-bind="args" />
+        <InputCurrency v-bind="args" v-model="value" />
         <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,

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

@@ -31,7 +31,7 @@ const meta = {
     },
     template: `
       <div class="max-w-xs">
-        <InputNumber v-model="value" v-bind="args" />
+        <InputNumber v-bind="args" v-model="value" />
         <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,

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

@@ -23,7 +23,7 @@ const meta = {
     },
     template: `
       <div class="space-y-4">
-        <InputOtp v-model="otp" v-bind="args" />
+        <InputOtp v-bind="args" v-model="otp" />
         <div class="text-sm text-muted-foreground">Value: {{ otp }}</div>
       </div>
     `,

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

@@ -14,7 +14,7 @@ const meta = {
     },
     template: `
       <div class="max-w-xs space-y-4">
-        <InputPercent v-model="percent" v-bind="args" />
+        <InputPercent v-bind="args" v-model="percent" />
         <div class="text-sm text-muted-foreground">Value: {{ percent }}</div>
       </div>
     `,

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

@@ -28,7 +28,7 @@ const meta = {
     },
     template: `
       <div class="max-w-md">
-        <InputRange v-model:start="start" v-model:end="end" v-bind="args" />
+        <InputRange v-bind="args" v-model:start="start" v-model:end="end" />
         <div class="mt-2 text-sm text-muted-foreground">Start: {{ start }}, End: {{ end }}</div>
       </div>
     `,

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

@@ -7,7 +7,7 @@ const props = withDefaults(defineProps<InputRangeProps>(), {
   start: undefined,
   end: undefined,
   min: 0,
-  max: 100,
+  max: undefined,
 })
 
 const emit = defineEmits<{
@@ -27,7 +27,7 @@ const end = computed({
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
+  <div class="gap-2 flex items-center">
     <InputNumber
       v-model="start"
       v-bind="$attrs"

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

@@ -51,7 +51,7 @@ const meta = {
     template: `
       <div>
         <Button @click="visible = true">Open Modal</Button>
-        <Modal v-model:visible="visible" v-bind="args">
+        <Modal v-bind="args" v-model:visible="visible">
           <p>This is the modal content.</p>
           <Input class="mt-4" placeholder="Try interacting with this input" />
         </Modal>

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

@@ -57,7 +57,7 @@ const meta = {
     },
     template: `
       <div class="max-w-sm">
-        <Select v-model="value" :options="frameworks" v-bind="args" />
+        <Select v-bind="args" v-model="value" :options="frameworks" />
         <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
       </div>
     `,

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

@@ -27,7 +27,7 @@ const meta = {
     },
     template: `
       <div class="max-w-sm">
-        <Slider v-model="value" v-bind="args" />
+        <Slider v-bind="args" v-model="value" />
         <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,

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

@@ -19,7 +19,7 @@ const meta = {
     },
     template: `
       <div class="flex items-center gap-4">
-        <Switch v-model="on" v-bind="args" />
+        <Switch v-bind="args" v-model="on" />
         <div class="text-sm text-muted-foreground">Value: {{ on }}</div>
       </div>
     `,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "fc48f5b21d76aa2ff0badd6ac6d9ccc5be906f26"
+  "gitHead": "750dccbf085f045771b445f9ac7fe0d722cd1a4c"
 }