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

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>
@@ -41,7 +38,18 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 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: `
@@ -54,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>
+    `,
+  }),
+}

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

@@ -39,7 +39,18 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const ExternalLink: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <WebLink href="https://example.com">Visit Example.com</WebLink>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { WebLink },
     template: `
@@ -53,26 +64,36 @@ export const ExternalLink: Story = {
 
 export const ExternalWithoutIcon: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { WebLink },
-    template: `
-      <WebLink href="https://example.com" :externalIcon="false">No trailing icon</WebLink>
-    `,
-  }),
+  args: {
+    href: 'https://example.com',
+    externalIcon: false,
+  },
 }
 
 export const WithExplicitTarget: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { WebLink },
-    template: `
-      <WebLink href="https://example.com" target="_self">Same Tab External Link</WebLink>
-    `,
-  }),
+  args: {
+    href: 'https://example.com',
+    target: '_self',
+  },
 }
 
 export const Unstyled: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex flex-col gap-2">
+    <WebLink href="/settings" unstyled>Unstyled internal link (no color or underline)</WebLink>
+    <WebLink href="https://example.com" unstyled>Unstyled external link (icon still shows)</WebLink>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { WebLink },
     template: `
@@ -85,7 +106,24 @@ export const Unstyled: Story = {
 }
 
 export const InlineUsage: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <p class="text-sm">
+    Please read our
+    <WebLink href="https://example.com/terms">Terms of Service</WebLink>
+    and
+    <WebLink href="https://example.com/privacy">Privacy Policy</WebLink>
+    before continuing.
+  </p>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { WebLink },
     template: `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.3.10",
+  "version": "0.4.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": "aba25283d8cf93bf3223b3b59da5ff8016615f98"
+  "gitHead": "7002e8d3028a6ac324296d4657cb313d7ed888e7"
 }