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

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

@@ -27,7 +27,22 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const VariousSizes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="space-y-3">
+    <Skeleton width="100%" height="12px" />
+    <Skeleton width="80%" height="12px" />
+    <Skeleton width="60%" height="12px" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Skeleton },
     template: `
@@ -41,7 +56,24 @@ export const VariousSizes: Story = {
 }
 
 export const CardSkeleton: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex items-center gap-4">
+    <Skeleton width="48px" height="48px" class="rounded-full" />
+    <div class="space-y-2">
+      <Skeleton width="160px" height="16px" />
+      <Skeleton width="120px" height="12px" />
+    </div>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Skeleton },
     template: `

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import Slider from './index.vue'
 
 const meta = {
@@ -41,7 +42,18 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Range: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Slider v-model="range" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Slider },
     setup () {
@@ -58,7 +70,18 @@ export const Range: Story = {
 }
 
 export const WithStep: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Slider v-model="value" :step="25" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Slider },
     setup () {
@@ -75,7 +98,18 @@ export const WithStep: Story = {
 }
 
 export const CustomMinMax: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Slider v-model="value" :min="0" :max="1000" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Slider },
     setup () {
@@ -92,7 +126,18 @@ export const CustomMinMax: Story = {
 }
 
 export const Disabled: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Slider v-model="value" disabled />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Slider },
     setup () {
@@ -106,3 +151,21 @@ export const Disabled: Story = {
     `,
   }),
 }
+
+export const EventHandling: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Slider, EventLog },
+    setup: () => ({ value: ref(50) }),
+    template: `
+      <EventLog v-slot="{ record }">
+        <div class="max-w-sm">
+          <Slider
+            v-model="value"
+            @update:modelValue="(v) => record('update:modelValue', v)"
+          />
+        </div>
+      </EventLog>
+    `,
+  }),
+}

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

@@ -11,10 +11,14 @@ const meta = {
   argTypes: {
     color: { control: 'select', options: colors },
     variant: { control: 'select', options: variants },
+    active: { control: 'boolean' },
+    selectable: { control: 'boolean' },
   },
   args: {
     color: 'default',
     variant: 'soft',
+    active: false,
+    selectable: false,
   },
   render: args => ({
     components: { Surface },
@@ -31,7 +35,22 @@ 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="grid grid-cols-2 gap-3 md:grid-cols-3">
+    <Surface v-for="c in colors" :key="c" :color="c" class="p-4">
+      <strong>{{ c }}</strong> surface
+    </Surface>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Surface },
     setup: () => ({ colors }),
@@ -46,7 +65,22 @@ export const Colors: Story = {
 }
 
 export const Variants: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="grid grid-cols-2 gap-3 md:grid-cols-4">
+    <Surface v-for="v in variants" :key="v" :variant="v" class="p-4">
+      <strong>{{ v }}</strong> surface
+    </Surface>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Surface },
     setup: () => ({ variants }),
@@ -61,16 +95,63 @@ export const Variants: Story = {
 }
 
 export const VariantColorMatrix: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="space-y-6">
+    <div v-for="v in variants" :key="v">
+      <div class="mb-2 text-sm text-muted-foreground">{{ v }}</div>
+      <div class="grid grid-cols-2 gap-3 md:grid-cols-3">
+        <Surface
+          v-for="c in colors"
+          :key="c"
+          :variant="v"
+          :color="c"
+          selectable
+          :active="selected === keyFor(v, c)"
+          class="p-4"
+          @click="selected = keyFor(v, c)"
+        >
+          <strong>{{ c }}</strong> surface
+        </Surface>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const selected = ref('')
+const keyFor = (v: string, c: string) => \`\${v}:\${c}\`
+</script>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Surface },
-    setup: () => ({ colors, variants }),
+    setup () {
+      const selected = ref('')
+      const keyFor = (v: string, c: string) => `${v}:${c}`
+      return { colors, variants, selected, keyFor }
+    },
     template: `
       <div class="space-y-6">
         <div v-for="v in variants" :key="v">
           <div class="mb-2 text-sm text-muted-foreground">{{ v }}</div>
           <div class="grid grid-cols-2 gap-3 md:grid-cols-3">
-            <Surface v-for="c in colors" :key="c" :variant="v" :color="c" class="p-4">
+            <Surface
+              v-for="c in colors"
+              :key="c"
+              :variant="v"
+              :color="c"
+              selectable
+              :active="selected === keyFor(v, c)"
+              class="p-4"
+              @click="selected = keyFor(v, c)"
+            >
               <strong>{{ c }}</strong> surface
             </Surface>
           </div>

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

@@ -21,11 +21,19 @@ const surfaceVariants = cva(
         warn: '',
         danger: '',
       },
+      active: {
+        true: 'ring-[3px]',
+        false: '',
+      },
+      selectable: {
+        true: 'cursor-pointer transition-colors',
+        false: '',
+      },
     },
     compoundVariants: [
       // solid — full color background
       { variant: 'solid', color: 'default', class: `
-        border-transparent bg-accent text-accent-foreground
+        bg-accent text-accent-foreground border-transparent
       ` },
       { variant: 'solid', color: 'primary', class: `
         border-primary bg-primary text-primary-foreground
@@ -93,10 +101,105 @@ const surfaceVariants = cva(
       { variant: 'flat', color: 'help', class: 'bg-help/10 text-help' },
       { variant: 'flat', color: 'warn', class: 'bg-warn/10 text-warn' },
       { variant: 'flat', color: 'danger', class: 'bg-danger/10 text-danger' },
+      // active — color-matched border + soft ring (mirrors Input focus)
+      { active: true, color: 'default', class: 'border-ring ring-ring/50' },
+      { active: true, color: 'primary', class: 'border-primary ring-primary/50' },
+      { active: true, color: 'success', class: 'border-success ring-success/50' },
+      { active: true, color: 'info', class: 'border-info ring-info/50' },
+      { active: true, color: 'help', class: 'border-help ring-help/50' },
+      { active: true, color: 'warn', class: 'border-warn ring-warn/50' },
+      { active: true, color: 'danger', class: 'border-danger ring-danger/50' },
+      // selectable — hover bg, one step up the variant's intensity ladder
+      { selectable: true, variant: 'solid', color: 'default', class: `
+        hover:bg-accent/80
+      ` },
+      { selectable: true, variant: 'solid', color: 'primary', class: `
+        hover:bg-primary/90
+      ` },
+      { selectable: true, variant: 'solid', color: 'success', class: `
+        hover:bg-success/90
+      ` },
+      { selectable: true, variant: 'solid', color: 'info', class: `
+        hover:bg-info/90
+      ` },
+      { selectable: true, variant: 'solid', color: 'help', class: `
+        hover:bg-help/90
+      ` },
+      { selectable: true, variant: 'solid', color: 'warn', class: `
+        hover:bg-warn/90
+      ` },
+      { selectable: true, variant: 'solid', color: 'danger', class: `
+        hover:bg-danger/90
+      ` },
+      { selectable: true, variant: 'soft', color: 'default', class: `
+        hover:bg-secondary/70
+      ` },
+      { selectable: true, variant: 'soft', color: 'primary', class: `
+        hover:bg-primary/20
+      ` },
+      { selectable: true, variant: 'soft', color: 'success', class: `
+        hover:bg-success/20
+      ` },
+      { selectable: true, variant: 'soft', color: 'info', class: `
+        hover:bg-info/20
+      ` },
+      { selectable: true, variant: 'soft', color: 'help', class: `
+        hover:bg-help/20
+      ` },
+      { selectable: true, variant: 'soft', color: 'warn', class: `
+        hover:bg-warn/20
+      ` },
+      { selectable: true, variant: 'soft', color: 'danger', class: `
+        hover:bg-danger/20
+      ` },
+      { selectable: true, variant: 'bordered', color: 'default', class: `
+        hover:bg-accent/50
+      ` },
+      { selectable: true, variant: 'bordered', color: 'primary', class: `
+        hover:bg-primary/10
+      ` },
+      { selectable: true, variant: 'bordered', color: 'success', class: `
+        hover:bg-success/10
+      ` },
+      { selectable: true, variant: 'bordered', color: 'info', class: `
+        hover:bg-info/10
+      ` },
+      { selectable: true, variant: 'bordered', color: 'help', class: `
+        hover:bg-help/10
+      ` },
+      { selectable: true, variant: 'bordered', color: 'warn', class: `
+        hover:bg-warn/10
+      ` },
+      { selectable: true, variant: 'bordered', color: 'danger', class: `
+        hover:bg-danger/10
+      ` },
+      { selectable: true, variant: 'flat', color: 'default', class: `
+        hover:bg-secondary/70
+      ` },
+      { selectable: true, variant: 'flat', color: 'primary', class: `
+        hover:bg-primary/20
+      ` },
+      { selectable: true, variant: 'flat', color: 'success', class: `
+        hover:bg-success/20
+      ` },
+      { selectable: true, variant: 'flat', color: 'info', class: `
+        hover:bg-info/20
+      ` },
+      { selectable: true, variant: 'flat', color: 'help', class: `
+        hover:bg-help/20
+      ` },
+      { selectable: true, variant: 'flat', color: 'warn', class: `
+        hover:bg-warn/20
+      ` },
+      { selectable: true, variant: 'flat', color: 'danger', class: `
+        hover:bg-danger/20
+      ` },
     ],
     defaultVariants: {
       variant: 'soft',
       color: 'default',
+      active: false,
+      selectable: false,
     },
   },
 )
@@ -104,11 +207,21 @@ const surfaceVariants = cva(
 const props = withDefaults(defineProps<SurfaceProps>(), {
   color: 'default',
   variant: 'soft',
+  active: false,
+  selectable: false,
   class: undefined,
 })
 
 const mergedClass = computed(() =>
-  cn(surfaceVariants({ color: props.color, variant: props.variant }), props.class),
+  cn(
+    surfaceVariants({
+      color: props.color,
+      variant: props.variant,
+      active: props.active,
+      selectable: props.selectable,
+    }),
+    props.class,
+  ),
 )
 </script>
 

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

@@ -4,5 +4,7 @@ export type SurfaceVariant = 'solid' | 'soft' | 'bordered' | 'flat'
 export interface SurfaceProps {
   color?: SurfaceColor
   variant?: SurfaceVariant
+  selectable?: boolean
+  active?: boolean
   class?: ClassValue
 }

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 },
@@ -63,68 +68,59 @@ export const Default: Story = {}
 
 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 }),
@@ -147,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>
+    `,
+  }),
+}