@polymarbot/nuxt-layer-shadcn-ui 0.3.10 → 0.4.1

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

@@ -38,85 +38,40 @@ export const Default: Story = {}
 
 export const UsdSymbol: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { InputCurrency },
-    setup () {
-      const value = ref(49.99)
-      return { value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputCurrency v-model="value" currency="USD" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
+  args: {
+    currency: 'USD',
+    currencyDisplay: 'symbol',
+  },
 }
 
 export const EurCodeDisplay: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { InputCurrency },
-    setup () {
-      const value = ref(29.99)
-      return { value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputCurrency v-model="value" currency="EUR" currencyDisplay="code" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
+  args: {
+    currency: 'EUR',
+    currencyDisplay: 'code',
+  },
 }
 
 export const CadSymbol: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { InputCurrency },
-    setup () {
-      const value = ref(79.99)
-      return { value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputCurrency v-model="value" currency="CAD" currencyDisplay="symbol" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
+  args: {
+    currency: 'CAD',
+    currencyDisplay: 'symbol',
+  },
 }
 
 export const CadNarrowSymbol: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { InputCurrency },
-    setup () {
-      const value = ref(79.99)
-      return { value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputCurrency v-model="value" currency="CAD" currencyDisplay="narrowSymbol" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
+  args: {
+    currency: 'CAD',
+    currencyDisplay: 'narrowSymbol',
+  },
 }
 
 export const JpyNameDisplay: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { InputCurrency },
-    setup () {
-      const value = ref(5000)
-      return { value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputCurrency v-model="value" currencyDisplay="name" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
+  args: {
+    currency: 'JPY',
+    currencyDisplay: 'name',
+  },
 }

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import InputNumber from './index.vue'
 
 const meta = {
@@ -46,82 +47,54 @@ export const Default: Story = {}
 
 export const WithMinMax: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { InputNumber },
-    setup () {
-      const value = ref(5)
-      return { value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputNumber v-model="value" :min="0" :max="10" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
+  args: {
+    min: 0,
+    max: 10,
+  },
 }
 
 export const CustomStep: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { InputNumber },
-    setup () {
-      const value = ref(0)
-      return { value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputNumber v-model="value" :step="5" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
+  args: {
+    step: 5,
+  },
 }
 
 export const WithoutButtons: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { InputNumber },
-    setup () {
-      const value = ref(0)
-      return { value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputNumber v-model="value" :showButtons="false" />
-      </div>
-    `,
-  }),
+  args: {
+    showButtons: false,
+  },
 }
 
 export const Disabled: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { InputNumber },
-    setup () {
-      const value = ref(0)
-      return { value }
-    },
-    template: `
-      <div class="max-w-xs">
-        <InputNumber v-model="value" disabled />
-      </div>
-    `,
-  }),
+  args: {
+    disabled: true,
+  },
 }
 
 export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
+export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({
-    components: { InputNumber },
-    setup () {
-      const value = ref(0)
-      return { value }
-    },
+    components: { InputNumber, EventLog },
+    setup: () => ({ value: ref(0) }),
     template: `
-      <div class="max-w-xs">
-        <InputNumber v-model="value" invalid />
-      </div>
+      <EventLog v-slot="{ record }">
+        <div class="max-w-xs">
+          <InputNumber
+            v-model="value"
+            @update:modelValue="(v) => record('update:modelValue', v)"
+          />
+        </div>
+      </EventLog>
     `,
   }),
 }

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

@@ -1,32 +1,30 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import InputOtp from './index.vue'
 
 const meta = {
   title: 'UI/InputOtp',
   component: InputOtp,
   argTypes: {
-    disabled: { control: 'boolean' },
+    modelValue: { control: 'text' },
     length: { control: 'number' },
+    disabled: { control: 'boolean' },
   },
   args: {
-    disabled: false,
+    modelValue: '',
     length: 6,
+    disabled: false,
   },
   render: args => ({
     components: { InputOtp },
     setup () {
       const otp = ref('')
-      const completed = ref('')
-      function onComplete (value: string) {
-        completed.value = value
-      }
-      return { args, otp, completed, onComplete }
+      return { args, otp }
     },
     template: `
       <div class="space-y-4">
-        <InputOtp v-model="otp" v-bind="args" @complete="onComplete" />
+        <InputOtp v-model="otp" v-bind="args" />
         <div class="text-sm text-muted-foreground">Value: {{ otp }}</div>
-        <div v-if="completed" class="text-sm text-success">Completed: {{ completed }}</div>
       </div>
     `,
   }),
@@ -35,4 +33,38 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
+
+export const CustomLength: Story = {
+  parameters: noControls,
+  args: {
+    length: 4,
+  },
+}
+
+export const Disabled: Story = {
+  parameters: noControls,
+  args: {
+    disabled: true,
+    modelValue: '123456',
+  },
+}
+
+export const EventHandling: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { InputOtp, EventLog },
+    setup: () => ({ otp: ref('') }),
+    template: `
+      <EventLog v-slot="{ record }">
+        <InputOtp
+          v-model="otp"
+          @update:modelValue="(v) => record('update:modelValue', v)"
+          @complete="(v) => record('complete', v)"
+        />
+      </EventLog>
+    `,
+  }),
+}

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

@@ -4,12 +4,8 @@ import InputPercent from './index.vue'
 const meta = {
   title: 'UI/InputPercent',
   component: InputPercent,
-  argTypes: {
-    disabled: { control: 'boolean' },
-  },
-  args: {
-    disabled: false,
-  },
+  argTypes: {},
+  args: {},
   render: args => ({
     components: { InputPercent },
     setup () {
@@ -23,7 +19,7 @@ const meta = {
       </div>
     `,
   }),
-} satisfies Meta
+} satisfies Meta<typeof InputPercent>
 
 export default meta
 type Story = StoryObj<typeof meta>

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

@@ -1,24 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import InputRange from './index.vue'
 
 const meta = {
   title: 'UI/InputRange',
   component: InputRange,
   argTypes: {
-    disabled: { control: 'boolean' },
+    start: { control: 'number' },
+    end: { control: 'number' },
     min: { control: 'number' },
     max: { control: 'number' },
+    disabled: { control: 'boolean' },
   },
   args: {
-    disabled: false,
+    start: 20,
+    end: 80,
     min: 0,
     max: 100,
+    disabled: false,
   },
   render: args => ({
     components: { InputRange },
     setup () {
-      const start = ref(20)
-      const end = ref(80)
+      const start = ref<number | undefined>(args.start)
+      const end = ref<number | undefined>(args.end)
       return { args, start, end }
     },
     template: `
@@ -33,4 +38,46 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
+
+export const CustomBounds: Story = {
+  parameters: noControls,
+  args: {
+    start: -50,
+    end: 50,
+    min: -100,
+    max: 100,
+  },
+}
+
+export const Disabled: Story = {
+  parameters: noControls,
+  args: {
+    disabled: true,
+  },
+}
+
+export const EventHandling: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { InputRange, EventLog },
+    setup: () => ({
+      start: ref<number | undefined>(20),
+      end: ref<number | undefined>(80),
+    }),
+    template: `
+      <EventLog v-slot="{ record }">
+        <div class="max-w-md">
+          <InputRange
+            v-model:start="start"
+            v-model:end="end"
+            @update:start="(v) => record('update:start', v)"
+            @update:end="(v) => record('update:end', v)"
+          />
+        </div>
+      </EventLog>
+    `,
+  }),
+}

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

@@ -25,7 +25,22 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const CustomSize: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex items-end gap-6">
+    <Loading class="size-6" />
+    <Loading class="size-10" />
+    <Loading class="size-16" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Loading },
     template: `

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

@@ -46,4 +46,13 @@ console.log(greeting)</code></pre>
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
+
+export const HideTitle: Story = {
+  parameters: noControls,
+  args: {
+    hideTitle: true,
+  },
+}

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import type { ModalContentType } from '../ModalContent/types'
+import EventLog from '#storybook/EventLog.vue'
 import Button from '../Button/index.vue'
 import Input from '../Input/index.vue'
 import Modal from './index.vue'
@@ -67,7 +68,27 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const WithDescription: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Modal
+    v-model:visible="visible"
+    title="Delete Project"
+    description="This will permanently remove the project and all its data. This action cannot be undone."
+    showCancel
+    confirmVariant="destructive"
+    confirmText="Delete"
+  >
+    <p>Are you sure you want to continue?</p>
+  </Modal>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Modal, Button },
     setup () {
@@ -93,7 +114,24 @@ export const WithDescription: Story = {
 }
 
 export const ScrollableContent: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Modal 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>
+  </Modal>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Modal, Button },
     setup () {
@@ -116,7 +154,32 @@ export const ScrollableContent: Story = {
 }
 
 export const Types: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Modal v-model:visible="typeInfo" title="Information" type="info" showCancel>
+    <p>Your session will expire in 5 minutes.</p>
+  </Modal>
+  <Modal v-model:visible="typeSuccess" title="Success" type="success">
+    <p>Your payment has been processed successfully.</p>
+  </Modal>
+  <Modal v-model:visible="typeHelp" title="Help" type="help" showCancel>
+    <p>Need assistance? Check our documentation or contact support.</p>
+  </Modal>
+  <Modal v-model:visible="typeWarn" title="Warning" type="warn" showCancel confirmVariant="destructive">
+    <p>This operation may affect your existing data.</p>
+  </Modal>
+  <Modal v-model:visible="typeDanger" title="Delete Account" type="danger" showCancel confirmVariant="destructive" confirmText="Delete">
+    <p>All data will be permanently removed. This action cannot be undone.</p>
+  </Modal>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Modal, Button },
     setup () {
@@ -156,32 +219,86 @@ export const Types: Story = {
   }),
 }
 
-export const EventHandling: Story = {
-  parameters: noControls,
+export const WithTrigger: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Modal title="Modal with Trigger">
+    <template #trigger>
+      <Button>Open Modal</Button>
+    </template>
+    <p>The trigger slot lets the consumer place the open button directly inside the Modal, without managing visible state.</p>
+  </Modal>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Modal, Button },
-    setup () {
-      const visible = ref(false)
-      return { visible }
+    template: `
+      <Modal title="Modal with Trigger">
+        <template #trigger>
+          <Button>Open Modal</Button>
+        </template>
+        <p>The trigger slot lets the consumer place the open button directly inside the Modal, without managing visible state.</p>
+      </Modal>
+    `,
+  }),
+}
+
+export const EventHandling: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Modal
+    v-model:visible="visible"
+    title="Event Demo"
+    description="Each emitted event will be appended to the log below."
+    showCancel
+    confirmText="Confirm"
+    @open="onOpen"
+    @close="onClose"
+    @closed="onClosed"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+    @update:visible="onVisibleUpdate"
+  >
+    <p>Click Confirm, Cancel, or the close button to see events fire.</p>
+  </Modal>
+</template>
+`.trim(),
+      },
     },
+  },
+  render: () => ({
+    components: { Modal, Button, EventLog },
+    setup: () => ({ visible: ref(false) }),
     template: `
-      <div>
+      <EventLog v-slot="{ record }">
         <Button @click="visible = true">Open Modal</Button>
         <Modal
           v-model:visible="visible"
           title="Event Demo"
-          description="Open the Actions panel to see emitted events."
+          description="Each emitted event will be appended to the log below."
           showCancel
           confirmText="Confirm"
-          @open="() => {}"
-          @close="() => {}"
-          @closed="() => {}"
-          @confirm="() => {}"
-          @cancel="() => {}"
+          @open="record('open')"
+          @close="record('close')"
+          @closed="record('closed')"
+          @confirm="record('confirm')"
+          @cancel="record('cancel')"
+          @update:visible="(v) => record('update:visible', v)"
         >
           <p>Click Confirm, Cancel, or the close button to see events fire.</p>
         </Modal>
-      </div>
+      </EventLog>
     `,
   }),
 }