@polymarbot/nuxt-layer-shadcn-ui 0.1.10 → 0.2.0-w

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

@@ -1,127 +1,181 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Select from './index.vue'
 
+const frameworks = [
+  { label: 'React', value: 'react' },
+  { label: 'Vue', value: 'vue' },
+  { label: 'Angular', value: 'angular' },
+  { label: 'Svelte', value: 'svelte' },
+]
+
+const withDisabled = [
+  { label: 'React', value: 'react' },
+  { label: 'Vue', value: 'vue' },
+  { label: 'Angular', value: 'angular', disabled: true },
+  { label: 'Svelte', value: 'svelte' },
+]
+
+const manyOptions = Array.from({ length: 50 }, (_, i) => ({
+  label: `Option ${i + 1}`,
+  value: `option-${i + 1}`,
+}))
+
+const withGroups = [
+  { label: 'React', value: 'react', group: 'Frontend' },
+  { label: 'Vue', value: 'vue', group: 'Frontend' },
+  { label: 'Angular', value: 'angular', group: 'Frontend' },
+  { label: 'Node.js', value: 'node', group: 'Backend' },
+  { label: 'Django', value: 'django', group: 'Backend' },
+  { label: 'Rails', value: 'rails', group: 'Backend' },
+]
+
 const meta = {
   title: 'UI/Select',
   component: Select as any,
   argTypes: {
+    placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    filter: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    searchPlaceholder: { control: 'text' },
+    emptyText: { control: 'text' },
   },
   args: {
+    placeholder: 'Select an option',
     disabled: false,
+    filter: false,
+    multiple: false,
+    searchPlaceholder: '',
+    emptyText: '',
   },
+  render: args => ({
+    components: { Select },
+    setup () {
+      const value = ref<string>()
+      return { args, value, frameworks }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Select v-model="value" :options="frameworks" v-bind="args" />
+        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
+      </div>
+    `,
+  }),
 } satisfies Meta
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const WithFilter: Story = {
+  render: () => ({
     components: { Select },
     setup () {
-      const selected = ref<string>()
-      const filtered = ref<string>()
-      const multiple = ref<string[]>([])
-      const scrollable = ref<string>()
-      const grouped = ref<string>()
-
-      const frameworks = [
-        { label: 'React', value: 'react' },
-        { label: 'Vue', value: 'vue' },
-        { label: 'Angular', value: 'angular' },
-        { label: 'Svelte', value: 'svelte' },
-      ]
-
-      const withDisabled = [
-        { label: 'React', value: 'react' },
-        { label: 'Vue', value: 'vue' },
-        { label: 'Angular', value: 'angular', disabled: true },
-        { label: 'Svelte', value: 'svelte' },
-      ]
-
-      const manyOptions = Array.from({ length: 50 }, (_, i) => ({
-        label: `Option ${i + 1}`,
-        value: `option-${i + 1}`,
-      }))
-
-      const withGroups = [
-        { label: 'React', value: 'react', group: 'Frontend' },
-        { label: 'Vue', value: 'vue', group: 'Frontend' },
-        { label: 'Angular', value: 'angular', group: 'Frontend' },
-        { label: 'Node.js', value: 'node', group: 'Backend' },
-        { label: 'Django', value: 'django', group: 'Backend' },
-        { label: 'Rails', value: 'rails', group: 'Backend' },
-      ]
-
-      return { args, selected, filtered, multiple, scrollable, grouped, frameworks, withDisabled, manyOptions, withGroups }
+      const value = ref<string>()
+      return { value, manyOptions }
     },
     template: `
-      <div class="space-y-10 max-w-sm">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Select
-            v-model="selected"
-            :options="frameworks"
-            v-bind="args"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ selected ?? 'none' }}</div>
-        </section>
+      <div class="max-w-sm">
+        <Select
+          v-model="value"
+          :options="manyOptions"
+          placeholder="Search and select"
+          filter
+        />
+        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Filter -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Filter</h3>
-          <Select
-            v-model="filtered"
-            :options="manyOptions"
-            placeholder="Search and select"
-            filter
-          />
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ filtered ?? 'none' }}</div>
-        </section>
+export const Multiple: Story = {
+  render: () => ({
+    components: { Select },
+    setup () {
+      const value = ref<string[]>([])
+      return { value, frameworks }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Select
+          v-model="value"
+          :options="frameworks"
+          placeholder="Select frameworks"
+          multiple
+        />
+        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value.length > 0 ? value.join(', ') : 'none' }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Multiple -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Multiple</h3>
-          <Select
-            v-model="multiple"
-            :options="frameworks"
-            placeholder="Select frameworks"
-            multiple
-          />
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ multiple.length > 0 ? multiple.join(', ') : 'none' }}</div>
-        </section>
+export const WithDisabledOptions: Story = {
+  render: () => ({
+    components: { Select },
+    setup () {
+      return { withDisabled }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Select
+          :options="withDisabled"
+          placeholder="Select a framework"
+        />
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Disabled Options -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Disabled Options</h3>
-          <Select
-            :options="withDisabled"
-            placeholder="Select a framework"
-          />
-        </section>
+export const Scrollable: Story = {
+  render: () => ({
+    components: { Select },
+    setup () {
+      const value = ref<string>()
+      return { value, manyOptions }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Select
+          v-model="value"
+          :options="manyOptions"
+          placeholder="Select an option"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Scrollable (50 items) -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Scrollable (50 items)</h3>
-          <Select
-            v-model="scrollable"
-            :options="manyOptions"
-            placeholder="Select an option"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ scrollable ?? 'none' }}</div>
-        </section>
+export const Grouped: Story = {
+  render: () => ({
+    components: { Select },
+    setup () {
+      const value = ref<string>()
+      return { value, withGroups }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Select
+          v-model="value"
+          :options="withGroups"
+          placeholder="Select a framework"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Grouped -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Grouped</h3>
-          <Select
-            v-model="grouped"
-            :options="withGroups"
-            placeholder="Select a framework"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ grouped ?? 'none' }}</div>
-        </section>
+export const Disabled: Story = {
+  render: () => ({
+    components: { Select },
+    setup () {
+      return { frameworks }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Select :options="frameworks" placeholder="Disabled select" disabled />
       </div>
     `,
   }),

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

@@ -7,17 +7,17 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/command'
+} from '../../shadcn/command'
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/input-group'
+} from '../../shadcn/input-group'
 import {
   Popover as ShadcnPopover,
   PopoverContent,
   PopoverTrigger,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/popover'
+} from '../../shadcn/popover'
 import type { SelectOption, SelectProps } from './types'
 
 type Option = SelectOption<TValue, TMeta>

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

@@ -12,44 +12,41 @@ const meta = {
     width: '200px',
     height: '20px',
   },
+  render: args => ({
+    components: { Skeleton },
+    setup: () => ({ args }),
+    template: '<Skeleton v-bind="args" />',
+  }),
 } satisfies Meta<typeof Skeleton>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const VariousSizes: Story = {
+  render: () => ({
     components: { Skeleton },
-    setup: () => ({ args }),
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Skeleton v-bind="args" />
-        </section>
-
-        <!-- Various Sizes -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Various Sizes</h3>
-          <div class="space-y-3">
-            <Skeleton width="100%" height="12px" />
-            <Skeleton width="80%" height="12px" />
-            <Skeleton width="60%" height="12px" />
-          </div>
-        </section>
+      <div class="space-y-3">
+        <Skeleton width="100%" height="12px" />
+        <Skeleton width="80%" height="12px" />
+        <Skeleton width="60%" height="12px" />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Card Skeleton -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Card Skeleton</h3>
-          <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>
-        </section>
+export const CardSkeleton: Story = {
+  render: () => ({
+    components: { Skeleton },
+    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>
     `,
   }),

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Skeleton as ShadcnSkeleton } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/skeleton'
+import { Skeleton as ShadcnSkeleton } from '../../shadcn/skeleton'
 import type { SkeletonProps } from './types'
 
 defineProps<SkeletonProps>()

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

@@ -5,55 +5,97 @@ const meta = {
   title: 'UI/Slider',
   component: Slider,
   argTypes: {
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
     disabled: { control: 'boolean' },
+    orientation: { control: 'select', options: [ 'horizontal', 'vertical' ]},
   },
   args: {
+    min: 0,
+    max: 100,
+    step: 1,
     disabled: false,
+    orientation: 'horizontal',
   },
+  render: args => ({
+    components: { Slider },
+    setup () {
+      const value = ref(50)
+      return { args, value }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Slider v-model="value" v-bind="args" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof Slider>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Range: Story = {
+  render: () => ({
     components: { Slider },
     setup () {
-      const single = ref(50)
       const range = ref([ 20, 80 ])
-      const stepped = ref(50)
-      const custom = ref(500)
-      return { args, single, range, stepped, custom }
+      return { range }
     },
     template: `
-      <div class="space-y-10 max-w-sm">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Slider v-model="single" v-bind="args" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ single }}</div>
-        </section>
+      <div class="max-w-sm">
+        <Slider v-model="range" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ range }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Range (Two Thumbs) -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Range (Two Thumbs)</h3>
-          <Slider v-model="range" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ range }}</div>
-        </section>
+export const WithStep: Story = {
+  render: () => ({
+    components: { Slider },
+    setup () {
+      const stepped = ref(50)
+      return { stepped }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Slider v-model="stepped" :step="25" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ stepped }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Step -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Step (25)</h3>
-          <Slider v-model="stepped" :step="25" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ stepped }}</div>
-        </section>
+export const CustomMinMax: Story = {
+  render: () => ({
+    components: { Slider },
+    setup () {
+      const custom = ref(500)
+      return { custom }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Slider v-model="custom" :min="0" :max="1000" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ custom }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Custom Min / Max -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Custom Min / Max (0 - 1000)</h3>
-          <Slider v-model="custom" :min="0" :max="1000" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ custom }}</div>
-        </section>
+export const Disabled: Story = {
+  render: () => ({
+    components: { Slider },
+    setup () {
+      const value = ref(50)
+      return { value }
+    },
+    template: `
+      <div class="max-w-sm">
+        <Slider v-model="value" disabled />
       </div>
     `,
   }),

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Slider as ShadcnSlider } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/slider'
+import { Slider as ShadcnSlider } from '../../shadcn/slider'
 import type { SliderProps } from './types'
 
 const props = withDefaults(defineProps<SliderProps>(), {

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

@@ -1,49 +1,75 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { SurfaceColor, SurfaceVariant } from './types'
 import Surface from './index.vue'
 
-type SurfaceType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
-type SurfaceVariant = 'solid' | 'soft' | 'bordered' | 'flat'
-
-const types: SurfaceType[] = [ 'default', 'success', 'info', 'help', 'warn', 'danger' ]
+const colors: SurfaceColor[] = [ 'default', 'primary', 'success', 'info', 'help', 'warn', 'danger' ]
 const variants: SurfaceVariant[] = [ 'solid', 'soft', 'bordered', 'flat' ]
 
 const meta = {
   title: 'UI/Surface',
   component: Surface,
   argTypes: {
-    type: { control: 'select', options: types },
+    color: { control: 'select', options: colors },
     variant: { control: 'select', options: variants },
   },
   args: {
-    type: 'default',
+    color: 'default',
     variant: 'soft',
   },
+  render: args => ({
+    components: { Surface },
+    setup: () => ({ args }),
+    template: '<Surface v-bind="args" class="p-4">This is a surface.</Surface>',
+  }),
 } satisfies Meta<typeof Surface>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Colors: Story = {
+  render: () => ({
     components: { Surface },
-    setup: () => ({ args, types, variants }),
+    setup: () => ({ colors }),
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Surface v-bind="args" class="p-4">This is a controlled surface.</Surface>
-        </section>
+      <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>
+    `,
+  }),
+}
 
-        <!-- All Variants × All Types -->
-        <section v-for="v in variants" :key="v">
-          <h3 class="mb-4 text-lg font-medium">Variant: {{ v }}</h3>
+export const Variants: Story = {
+  render: () => ({
+    components: { Surface },
+    setup: () => ({ variants }),
+    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>
+    `,
+  }),
+}
+
+export const VariantColorMatrix: Story = {
+  render: () => ({
+    components: { Surface },
+    setup: () => ({ colors, variants }),
+    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="t in types" :key="t" :variant="v" :type="t" class="p-4">
-              <strong>{{ t }}</strong> surface
+            <Surface v-for="c in colors" :key="c" :variant="v" :color="c" class="p-4">
+              <strong>{{ c }}</strong> surface
             </Surface>
           </div>
-        </section>
+        </div>
       </div>
     `,
   }),