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

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import Select from './index.vue'
 
 const frameworks = [
@@ -71,7 +72,23 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const WithFilter: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Select
+    v-model="value"
+    :options="manyOptions"
+    placeholder="Search and select"
+    filter
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Select },
     setup () {
@@ -93,7 +110,23 @@ export const WithFilter: Story = {
 }
 
 export const Multiple: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Select
+    v-model="value"
+    :options="frameworks"
+    placeholder="Select frameworks"
+    multiple
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Select },
     setup () {
@@ -115,7 +148,21 @@ export const Multiple: Story = {
 }
 
 export const WithDisabledOptions: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Select
+    :options="withDisabled"
+    placeholder="Select a framework"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Select },
     setup () {
@@ -133,7 +180,22 @@ export const WithDisabledOptions: Story = {
 }
 
 export const Scrollable: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Select
+    v-model="value"
+    :options="manyOptions"
+    placeholder="Select an option"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Select },
     setup () {
@@ -154,7 +216,22 @@ export const Scrollable: Story = {
 }
 
 export const Grouped: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Select
+    v-model="value"
+    :options="withGroups"
+    placeholder="Select a framework"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Select },
     setup () {
@@ -175,7 +252,18 @@ export const Grouped: Story = {
 }
 
 export const Disabled: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Select :options="frameworks" placeholder="Disabled select" disabled />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Select },
     setup () {
@@ -188,3 +276,30 @@ export const Disabled: Story = {
     `,
   }),
 }
+
+export const EventHandling: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Select, EventLog },
+    setup () {
+      const value = ref<string>()
+      return { value, frameworks }
+    },
+    template: `
+      <EventLog v-slot="{ record }">
+        <div class="max-w-sm">
+          <Select
+            v-model="value"
+            :options="frameworks"
+            filter
+            placeholder="Pick a framework"
+            @update:modelValue="(v) => record('update:modelValue', v)"
+            @search="(q) => record('search', q)"
+            @open="record('open')"
+            @close="record('close')"
+          />
+        </div>
+      </EventLog>
+    `,
+  }),
+}

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

@@ -156,16 +156,16 @@ function handleClear (event: MouseEvent) {
         :data-disabled="disabled || undefined"
         :data-state="open ? 'open' : 'closed'"
         class="
+          data-[state=open]:border-ring data-[state=open]:ring-ring/50
           cursor-pointer
-          data-[state=open]:border-ring data-[state=open]:ring-[3px]
-          data-[state=open]:ring-ring/50
+          data-[state=open]:ring-[3px]
         "
       >
         <span
           class="
-            line-clamp-1 flex flex-1 items-center gap-2 px-3 py-1 text-base
-            whitespace-nowrap
+            gap-2 px-3 py-1 text-base
             md:text-sm
+            line-clamp-1 flex flex-1 items-center whitespace-nowrap
           "
         >
           <template v-if="multiple && selectedOptions.length > 0">
@@ -196,6 +196,7 @@ function handleClear (event: MouseEvent) {
           align="inline-end"
         >
           <InputGroupButton
+            type="button"
             size="icon-xs"
             @click="handleClear"
           >
@@ -210,7 +211,7 @@ function handleClear (event: MouseEvent) {
         </InputGroupAddon>
       </InputGroup>
     </PopoverTrigger>
-    <PopoverContent class="w-(--reka-popover-trigger-width) p-0">
+    <PopoverContent class="p-0 w-(--reka-popover-trigger-width)">
       <Command
         :modelValue="commandModelValue"
         :filterFunction="commandFilterFunction"
@@ -250,7 +251,7 @@ function handleClear (event: MouseEvent) {
                 <Icon
                   name="check"
                   :class="cn(
-                    'ml-auto size-4 shrink-0',
+                    'size-4 ml-auto shrink-0',
                     isSelected(option.value) ? 'opacity-100' : 'opacity-0',
                   )"
                 />

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
+      ` },
+      { 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
 }