@polymarbot/nuxt-layer-shadcn-ui 0.6.2 → 0.6.3

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

@@ -201,9 +201,9 @@ export const Disabled: Story = {
         code: `
 <template>
   <Button variant="default" disabled>default</Button>
+  <Button variant="secondary" disabled>secondary</Button>
   <Button variant="destructive" disabled>destructive</Button>
   <Button variant="outline" disabled>outline</Button>
-  <Button variant="secondary" disabled>secondary</Button>
   <Button variant="ghost" disabled>ghost</Button>
   <Button variant="link" disabled>link</Button>
 </template>
@@ -230,10 +230,10 @@ export const Rounded: Story = {
         code: `
 <template>
   <Button rounded>Rounded</Button>
-  <Button rounded variant="outline">Outline</Button>
   <Button rounded variant="secondary">Secondary</Button>
-  <Button rounded size="icon" variant="outline" icon="plus" />
+  <Button rounded variant="outline">Outline</Button>
   <Button rounded size="icon" variant="secondary" icon="sun" />
+  <Button rounded size="icon" variant="outline" icon="plus" />
 </template>
 `.trim(),
       },
@@ -244,10 +244,10 @@ export const Rounded: Story = {
     template: `
       <div class="flex flex-wrap items-center gap-3">
         <Button rounded>Rounded</Button>
-        <Button rounded variant="outline">Outline</Button>
         <Button rounded variant="secondary">Secondary</Button>
-        <Button rounded size="icon" variant="outline" icon="plus" />
+        <Button rounded variant="outline">Outline</Button>
         <Button rounded size="icon" variant="secondary" icon="sun" />
+        <Button rounded size="icon" variant="outline" icon="plus" />
       </div>
     `,
   }),

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

@@ -38,13 +38,12 @@ const meta = {
   render: args => ({
     components: { DatePicker },
     setup () {
-      const value = ref<Date | string | null>(null)
-      return { args, value }
+      return { args }
     },
     template: `
       <div class="max-w-xs">
-        <DatePicker v-bind="args" v-model="value" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+        <DatePicker v-bind="args" @update:modelValue="v => args.modelValue = v" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
       </div>
     `,
   }),

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

@@ -37,16 +37,18 @@ const meta = {
   render: args => ({
     components: { DateRangePicker },
     setup () {
-      const start = ref<Date | string | null>(args.start ?? null)
-      const end = ref<Date | string | null>(args.end ?? null)
-      return { args, start, end }
+      return { args }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-bind="args" v-model:start="start" v-model:end="end" />
+        <DateRangePicker
+          v-bind="args"
+          @update:start="v => args.start = v"
+          @update:end="v => args.end = v"
+        />
         <div class="mt-2 text-sm text-muted-foreground">
-          <div>Start: {{ start }}</div>
-          <div>End: {{ end }}</div>
+          <div>Start: {{ args.start }}</div>
+          <div>End: {{ args.end }}</div>
         </div>
       </div>
     `,

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

@@ -18,13 +18,12 @@ const meta = {
   render: args => ({
     components: { InputOtp },
     setup () {
-      const otp = ref('')
-      return { args, otp }
+      return { args }
     },
     template: `
       <div class="space-y-4">
-        <InputOtp v-bind="args" v-model="otp" />
-        <div class="text-sm text-muted-foreground">Value: {{ otp }}</div>
+        <InputOtp v-bind="args" @update:modelValue="v => args.modelValue = v" />
+        <div class="text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
       </div>
     `,
   }),

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

@@ -26,14 +26,16 @@ const meta = {
   render: args => ({
     components: { InputRange },
     setup () {
-      const start = ref<number | undefined>(args.start)
-      const end = ref<number | undefined>(args.end)
-      return { args, start, end }
+      return { args }
     },
     template: `
       <div class="max-w-md">
-        <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>
+        <InputRange
+          v-bind="args"
+          @update:start="v => args.start = v"
+          @update:end="v => args.end = v"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">Start: {{ args.start }}, End: {{ args.end }}</div>
       </div>
     `,
   }),

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

@@ -51,13 +51,12 @@ const meta = {
   render: args => ({
     components: { RadioCardGroup },
     setup () {
-      const selected = ref(args.modelValue ?? '')
-      return { args, selected }
+      return { args }
     },
     template: `
       <div class="max-w-md space-y-4">
-        <RadioCardGroup v-bind="args" v-model="selected" />
-        <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
+        <RadioCardGroup v-bind="args" @update:modelValue="v => args.modelValue = v" />
+        <div class="text-sm text-muted-foreground">Selected: {{ args.modelValue }}</div>
       </div>
     `,
   }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "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": "fa45348c0fd5ef56ec2c3e57b835dbd9774d6c8c"
+  "gitHead": "93045d977de0e19a823787d21ba9631a3d5b7ee8"
 }