@polymarbot/nuxt-layer-shadcn-ui 0.3.9 → 0.4.0

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import Switch from './index.vue'
 
 const meta = {
@@ -28,4 +29,49 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
+
+export const Disabled: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex items-center gap-4">
+    <Switch :modelValue="false" disabled />
+    <Switch :modelValue="true" disabled />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Switch },
+    template: `
+      <div class="flex items-center gap-4">
+        <Switch :modelValue="false" disabled />
+        <Switch :modelValue="true" disabled />
+      </div>
+    `,
+  }),
+}
+
+export const EventHandling: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Switch, EventLog },
+    setup: () => ({ on: ref(false) }),
+    template: `
+      <EventLog v-slot="{ record }">
+        <Switch
+          v-model="on"
+          @update:modelValue="(v) => record('update:modelValue', v)"
+        />
+      </EventLog>
+    `,
+  }),
+}

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import Card from '../Card/index.vue'
 import type { TabsItem } from './types'
 import Tabs from './index.vue'
@@ -39,6 +40,8 @@ const meta = {
     defaultValue: { control: 'text' },
     rounded: { control: 'boolean' },
     iconOnly: { control: 'boolean' },
+    listClass: { control: 'text' },
+    triggerClass: { control: 'text' },
   },
   args: {
     items,
@@ -46,6 +49,8 @@ const meta = {
     defaultValue: 'account',
     rounded: false,
     iconOnly: false,
+    listClass: '',
+    triggerClass: '',
   },
   render: args => ({
     components: { Tabs },
@@ -61,87 +66,61 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Controlled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Tabs },
-    setup () {
-      const value = ref<string>('account')
-      return { items, value }
-    },
-    template: `
-      <div class="max-w-md space-y-3">
-        <Tabs v-model="value" :items="items" />
-        <div class="text-sm text-muted-foreground">Active: {{ value }}</div>
-      </div>
-    `,
-  }),
-}
-
 export const IconOnly: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Tabs },
-    setup: () => ({ items }),
-    template: `
-      <Tabs
-        icon-only
-        :items="items"
-        default-value="account"
-        class="max-w-md"
-      />
-    `,
-  }),
+  args: {
+    iconOnly: true,
+  },
 }
 
 export const Rounded: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Tabs },
-    setup: () => ({ items }),
-    template: `
-      <Tabs
-        rounded
-        :items="items"
-        default-value="account"
-        class="max-w-md"
-      />
-    `,
-  }),
+  args: {
+    rounded: true,
+  },
 }
 
 export const DisabledItem: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Tabs },
-    setup: () => ({ disabledItems }),
-    template: `
-      <Tabs
-        :items="disabledItems"
-        default-value="account"
-        class="max-w-md"
-      />
-    `,
-  }),
+  args: {
+    items: disabledItems,
+  },
 }
 
 export const NoContent: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Tabs },
-    setup: () => ({ navItems }),
-    template: `
-      <Tabs
-        :items="navItems"
-        default-value="account"
-        class="max-w-md"
-      />
-    `,
-  }),
+  args: {
+    items: navItems,
+  },
 }
 
 export const CustomSlots: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Tabs
+    :items="items"
+    default-value="account"
+    list-class="w-full"
+    class="max-w-md"
+  >
+    <template #title="{ item, active }">
+      <span :class="active ? 'font-semibold' : ''">{{ item.title }}</span>
+    </template>
+    <template #content="{ item }">
+      <Card>
+        <p class="text-sm text-muted-foreground">{{ item.content }}</p>
+      </Card>
+    </template>
+  </Tabs>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Tabs, Card },
     setup: () => ({ items }),
@@ -164,3 +143,21 @@ export const CustomSlots: Story = {
     `,
   }),
 }
+
+export const EventHandling: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Tabs, EventLog },
+    setup: () => ({ items, value: ref('account') }),
+    template: `
+      <EventLog v-slot="{ record }">
+        <Tabs
+          v-model="value"
+          :items="items"
+          class="max-w-md"
+          @update:modelValue="(v) => record('update:modelValue', v)"
+        />
+      </EventLog>
+    `,
+  }),
+}

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

@@ -31,7 +31,20 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Colors: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <Tag v-for="c in colors" :key="c" :color="c">{{ c }}</Tag>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Tag },
     setup: () => ({ colors }),
@@ -44,7 +57,20 @@ export const Colors: Story = {
 }
 
 export const Variants: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <Tag v-for="v in variants" :key="v" :variant="v">{{ v }}</Tag>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Tag },
     setup: () => ({ variants }),
@@ -57,7 +83,23 @@ export const Variants: Story = {
 }
 
 export const VariantColorMatrix: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="space-y-3">
+    <div v-for="v in variants" :key="v" class="flex flex-wrap items-center gap-3">
+      <span class="w-20 text-sm text-muted-foreground">{{ v }}</span>
+      <Tag v-for="c in colors" :key="c" :color="c" :variant="v">{{ c }}</Tag>
+    </div>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Tag },
     setup: () => ({ colors, variants }),

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import Textarea from './index.vue'
 
 const meta = {
@@ -10,8 +11,6 @@ const meta = {
     rows: { control: 'number' },
     invalid: { control: 'boolean' },
     class: { control: 'text' },
-    disabled: { control: 'boolean' },
-    readonly: { control: 'boolean' },
   },
   args: {
     modelValue: '',
@@ -19,8 +18,6 @@ const meta = {
     rows: undefined,
     invalid: false,
     class: '',
-    disabled: false,
-    readonly: false,
   },
   render: args => ({
     components: { Textarea },
@@ -31,7 +28,7 @@ const meta = {
       </div>
     `,
   }),
-} satisfies Meta
+} satisfies Meta<typeof Textarea>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -40,25 +37,19 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Controlled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Textarea },
-    setup () {
-      const value = ref('')
-      return { value }
-    },
-    template: `
-      <div class="max-w-sm space-y-2">
-        <Textarea v-model="value" placeholder="Type your message here..." />
-        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
-}
-
 export const WithRows: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Textarea :rows="6" placeholder="6 rows of height" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Textarea },
     template: `
@@ -71,36 +62,74 @@ export const WithRows: Story = {
 
 export const Invalid: Story = {
   parameters: noControls,
+  args: {
+    invalid: true,
+    modelValue: 'Invalid content',
+  },
+}
+
+export const Disabled: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Textarea disabled model-value="Disabled textarea" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Textarea },
     template: `
       <div class="max-w-sm">
-        <Textarea invalid model-value="Invalid content" />
+        <Textarea disabled model-value="Disabled textarea" />
       </div>
     `,
   }),
 }
 
-export const Disabled: Story = {
-  parameters: noControls,
+export const Readonly: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Textarea readonly model-value="Readonly content" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Textarea },
     template: `
       <div class="max-w-sm">
-        <Textarea disabled model-value="Disabled textarea" />
+        <Textarea readonly model-value="Readonly content" />
       </div>
     `,
   }),
 }
 
-export const Readonly: Story = {
+export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({
-    components: { Textarea },
+    components: { Textarea, EventLog },
+    setup: () => ({ value: ref('') }),
     template: `
-      <div class="max-w-sm">
-        <Textarea readonly model-value="Readonly content" />
-      </div>
+      <EventLog v-slot="{ record }">
+        <div class="max-w-sm">
+          <Textarea
+            v-model="value"
+            placeholder="Type to see events"
+            @update:modelValue="(v) => record('update:modelValue', v)"
+            @change="(v) => record('change', v)"
+          />
+        </div>
+      </EventLog>
     `,
   }),
 }

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

@@ -37,7 +37,35 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Types: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+
+const showDefault = () => toast('This is a default toast')
+const showSuccess = () => toast.success('Operation completed successfully')
+const showError = () => toast.error('Something went wrong')
+const showInfo = () => toast.info('Here is some information')
+const showWarning = () => toast.warning('Please be careful')
+</script>
+
+<template>
+  <Toast position="bottom-right" />
+  <div class="flex flex-wrap gap-3">
+    <Button variant="outline" @click="showDefault">Default</Button>
+    <Button variant="outline" @click="showSuccess">Success</Button>
+    <Button variant="outline" @click="showError">Error</Button>
+    <Button variant="outline" @click="showInfo">Info</Button>
+    <Button variant="outline" @click="showWarning">Warning</Button>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Toast, Button },
     setup () {
@@ -64,7 +92,27 @@ export const Types: Story = {
 }
 
 export const WithDescription: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+
+const show = () => toast('Event created', {
+  description: 'Your event has been scheduled for tomorrow at 3:00 PM.',
+})
+</script>
+
+<template>
+  <Toast position="bottom-right" />
+  <Button variant="outline" @click="show">Show Toast with Description</Button>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Toast, Button },
     setup () {
@@ -83,7 +131,33 @@ export const WithDescription: Story = {
 }
 
 export const Positions: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+
+const positions = [ 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center' ] as const
+const current = ref<typeof positions[number]>('bottom-right')
+
+const show = (pos: typeof positions[number]) => {
+  current.value = pos
+  nextTick(() => toast(\`Toast at \${pos}\`))
+}
+</script>
+
+<template>
+  <Toast :position="current" />
+  <div class="flex flex-wrap gap-3">
+    <Button v-for="p in positions" :key="p" variant="outline" @click="show(p)">{{ p }}</Button>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Toast, Button },
     setup () {

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import Button from '../Button/index.vue'
 import Tooltip from './index.vue'
 
@@ -12,12 +13,14 @@ const meta = {
     position: { control: 'select', options: positions },
     disabled: { control: 'boolean' },
     disableClosingTrigger: { control: 'boolean' },
+    class: { control: 'text' },
   },
   args: {
     text: 'This is a tooltip',
     position: 'top',
     disabled: false,
     disableClosingTrigger: false,
+    class: '',
   },
   render: args => ({
     components: { Tooltip, Button },
@@ -38,7 +41,31 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Positions: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex flex-wrap items-center gap-4 py-10 justify-center">
+    <Tooltip text="Top tooltip" position="top">
+      <Button variant="outline">Top</Button>
+    </Tooltip>
+    <Tooltip text="Bottom tooltip" position="bottom">
+      <Button variant="outline">Bottom</Button>
+    </Tooltip>
+    <Tooltip text="Left tooltip" position="left">
+      <Button variant="outline">Left</Button>
+    </Tooltip>
+    <Tooltip text="Right tooltip" position="right">
+      <Button variant="outline">Right</Button>
+    </Tooltip>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Tooltip, Button },
     template: `
@@ -61,7 +88,20 @@ export const Positions: Story = {
 }
 
 export const LongText: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Tooltip text="This is a longer tooltip message that demonstrates how the tooltip handles multi-line content and wraps properly within its container.">
+    <Button variant="outline">Long Tooltip</Button>
+  </Tooltip>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Tooltip, Button },
     template: `
@@ -71,3 +111,21 @@ export const LongText: Story = {
     `,
   }),
 }
+
+export const EventHandling: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Tooltip, Button, EventLog },
+    template: `
+      <EventLog v-slot="{ record }">
+        <Tooltip
+          text="Hover or focus to fire events"
+          @open="record('open')"
+          @close="record('close')"
+        >
+          <Button variant="outline">Hover me</Button>
+        </Tooltip>
+      </EventLog>
+    `,
+  }),
+}