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

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

@@ -15,7 +15,7 @@ const options: RadioCardGroupOption[] = [
   },
 ]
 
-const manyOptions: RadioCardGroupOption[] = [
+const planOptions: RadioCardGroupOption[] = [
   {
     value: 'free',
     title: 'Free',
@@ -38,53 +38,44 @@ const meta = {
   title: 'UI/RadioCardGroup',
   component: RadioCardGroup,
   argTypes: {
+    modelValue: { control: 'text' },
+    options: { control: 'object' },
     disabled: { control: 'boolean' },
   },
   args: {
+    modelValue: 'current',
     options,
     disabled: false,
   },
-} satisfies Meta<typeof RadioCardGroup>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
   render: args => ({
     components: { RadioCardGroup },
     setup () {
-      const selected = ref('current')
-      return { args, selected, options }
+      const selected = ref(args.modelValue ?? '')
+      return { args, selected }
     },
     template: `
       <div class="max-w-md space-y-4">
-        <RadioCardGroup
-          v-model="selected"
-          :options="options"
-          :disabled="args.disabled"
-        />
+        <RadioCardGroup v-bind="args" v-model="selected" />
         <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
       </div>
     `,
   }),
-}
+} satisfies Meta<typeof RadioCardGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
 
 export const WithDisabledOption: Story = {
-  render: args => ({
-    components: { RadioCardGroup },
-    setup () {
-      const selected = ref('pro')
-      return { args, selected, manyOptions }
-    },
-    template: `
-      <div class="max-w-md space-y-4">
-        <RadioCardGroup
-          v-model="selected"
-          :options="manyOptions"
-          :disabled="args.disabled"
-        />
-        <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
-      </div>
-    `,
-  }),
+  args: {
+    modelValue: 'pro',
+    options: planOptions,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
 }

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

@@ -2,7 +2,7 @@
 import {
   RadioGroup,
   RadioGroupItem,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/radio-group'
+} from '../../shadcn/radio-group'
 import type { RadioCardGroupProps } from './types'
 
 const props = withDefaults(defineProps<RadioCardGroupProps>(), {

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

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { RadioGroupItem } from './types'
+import RadioGroup from './index.vue'
+
+const options: RadioGroupItem[] = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+]
+
+const plans: RadioGroupItem[] = [
+  { value: 'free', label: 'Free - $0/month' },
+  { value: 'pro', label: 'Pro - $9/month' },
+  { value: 'enterprise', label: 'Enterprise - $29/month', disabled: true },
+]
+
+const meta = {
+  title: 'UI/RadioGroup',
+  component: RadioGroup,
+  argTypes: {
+    items: { control: 'object' },
+    modelValue: { control: 'text' },
+    disabled: { control: 'boolean' },
+    orientation: { control: 'inline-radio', options: [ 'vertical', 'horizontal' ]},
+  },
+  args: {
+    items: options,
+    modelValue: 'option1',
+    disabled: false,
+    orientation: 'vertical',
+  },
+  render: args => ({
+    components: { RadioGroup },
+    setup: () => ({ args }),
+    template: '<RadioGroup v-bind="args" />',
+  }),
+} satisfies Meta<typeof RadioGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Controlled: Story = {
+  render: () => ({
+    components: { RadioGroup },
+    setup () {
+      const selected = ref('option1')
+      return { options, selected }
+    },
+    template: `
+      <div class="space-y-2">
+        <RadioGroup v-model="selected" :items="options" />
+        <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Horizontal: Story = {
+  render: () => ({
+    components: { RadioGroup },
+    setup () {
+      const selected = ref('option1')
+      return { options, selected }
+    },
+    template: `
+      <div class="space-y-2">
+        <RadioGroup v-model="selected" :items="options" orientation="horizontal" />
+        <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const WithDisabledItem: Story = {
+  render: () => ({
+    components: { RadioGroup },
+    setup () {
+      const plan = ref('pro')
+      return { plans, plan }
+    },
+    template: `
+      <div class="space-y-2">
+        <RadioGroup v-model="plan" :items="plans" />
+        <div class="text-sm text-muted-foreground">Plan: {{ plan }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { RadioGroup },
+    setup () {
+      const selected = ref('option1')
+      return { options, selected }
+    },
+    template: '<RadioGroup v-model="selected" :items="options" disabled />',
+  }),
+}
+
+export const CustomSlots: Story = {
+  render: () => ({
+    components: { RadioGroup },
+    setup () {
+      const plan = ref('pro')
+      return { plans, plan }
+    },
+    template: `
+      <div class="space-y-2">
+        <RadioGroup v-model="plan" :items="plans">
+          <template #label="{ item, checked }">
+            <span :class="checked ? 'font-semibold text-primary' : 'text-foreground'">
+              {{ item.label }}
+            </span>
+          </template>
+        </RadioGroup>
+        <div class="text-sm text-muted-foreground">Plan: {{ plan }}</div>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import {
+  RadioGroup as ShadcnRadioGroup,
+  RadioGroupItem as ShadcnRadioGroupItem,
+} from '../../shadcn/radio-group'
+import type { RadioGroupItem, RadioGroupProps } from './types'
+
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+  items: () => [],
+  modelValue: undefined,
+  disabled: false,
+  orientation: 'vertical',
+  class: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+defineSlots<{
+  label?: (props: { item: RadioGroupItem, checked: boolean }) => unknown
+}>()
+
+const model = computed({
+  get: () => props.modelValue,
+  set: value => {
+    if (value !== undefined) emit('update:modelValue', value)
+  },
+})
+
+const orientationClass = {
+  horizontal: 'flex-row flex-wrap items-center',
+  vertical: 'flex-col',
+} as const
+
+const mergedClass = computed(() => cn(
+  'flex gap-3',
+  orientationClass[props.orientation],
+  props.class,
+))
+</script>
+
+<template>
+  <ShadcnRadioGroup
+    v-model="model"
+    :disabled="disabled"
+    :orientation="orientation"
+    :class="mergedClass"
+  >
+    <label
+      v-for="item in items"
+      :key="item.value"
+      class="
+        flex cursor-pointer items-center gap-2
+        has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50
+      "
+    >
+      <ShadcnRadioGroupItem
+        :value="item.value"
+        :disabled="item.disabled"
+      />
+      <span class="text-sm">
+        <slot
+          name="label"
+          :item="item"
+          :checked="model === item.value"
+        >
+          {{ item.label ?? item.value }}
+        </slot>
+      </span>
+    </label>
+  </ShadcnRadioGroup>
+</template>

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

@@ -0,0 +1,13 @@
+export interface RadioGroupItem {
+  value: string
+  label?: string
+  disabled?: boolean
+}
+
+export interface RadioGroupProps {
+  modelValue?: string
+  items?: RadioGroupItem[]
+  disabled?: boolean
+  orientation?: 'vertical' | 'horizontal'
+  class?: ClassValue
+}

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

@@ -1,65 +1,97 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import ScrollArea from './index.vue'
 
+const types = [ 'auto', 'always', 'scroll', 'hover' ] as const
+
 const meta = {
   title: 'UI/ScrollArea',
   component: ScrollArea,
   argTypes: {
     fadeMask: { control: 'boolean' },
+    type: { control: 'select', options: types },
+    dir: { control: 'select', options: [ 'ltr', 'rtl' ]},
+    scrollHideDelay: { control: 'number' },
   },
   args: {
     fadeMask: false,
+    type: 'hover',
+    dir: 'ltr',
+    scrollHideDelay: 600,
   },
+  render: args => ({
+    components: { ScrollArea },
+    setup () {
+      const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`)
+      return { args, items }
+    },
+    template: `
+      <div class="h-[250px] w-[250px] rounded-md border bg-card">
+        <ScrollArea class="h-full" v-bind="args">
+          <div class="p-4 space-y-2">
+            <div
+              v-for="item in items"
+              :key="item"
+              class="rounded-md border bg-muted px-3 py-2 text-sm"
+            >
+              {{ item }}
+            </div>
+          </div>
+        </ScrollArea>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof ScrollArea>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const FadeMask: Story = {
+  render: () => ({
     components: { ScrollArea },
     setup () {
       const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`)
-      const fewItems = Array.from({ length: 3 }, (_, i) => `Item ${i + 1}`)
-      return { args, items, fewItems }
+      return { items }
     },
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <div class="h-[250px] w-[250px] rounded-md border bg-card">
-            <ScrollArea class="h-full" v-bind="args">
-              <div class="p-4 space-y-2">
-                <div
-                  v-for="item in items"
-                  :key="item"
-                  class="rounded-md border bg-muted px-3 py-2 text-sm"
-                >
-                  {{ item }}
-                </div>
-              </div>
-            </ScrollArea>
+      <div class="h-[250px] w-[250px] rounded-md border bg-card">
+        <ScrollArea class="h-full" fadeMask>
+          <div class="p-4 space-y-2">
+            <div
+              v-for="item in items"
+              :key="item"
+              class="rounded-md border bg-muted px-3 py-2 text-sm"
+            >
+              {{ item }}
+            </div>
           </div>
-        </section>
+        </ScrollArea>
+      </div>
+    `,
+  }),
+}
 
-        <!-- No Overflow -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">No Overflow</h3>
-          <div class="h-[250px] w-[250px] rounded-md border bg-card">
-            <ScrollArea class="h-full" fadeMask>
-              <div class="p-4 space-y-2">
-                <div
-                  v-for="item in fewItems"
-                  :key="item"
-                  class="rounded-md border bg-muted px-3 py-2 text-sm"
-                >
-                  {{ item }}
-                </div>
-              </div>
-            </ScrollArea>
+export const NoOverflow: Story = {
+  render: () => ({
+    components: { ScrollArea },
+    setup () {
+      const fewItems = Array.from({ length: 3 }, (_, i) => `Item ${i + 1}`)
+      return { fewItems }
+    },
+    template: `
+      <div class="h-[250px] w-[250px] rounded-md border bg-card">
+        <ScrollArea class="h-full" fadeMask>
+          <div class="p-4 space-y-2">
+            <div
+              v-for="item in fewItems"
+              :key="item"
+              class="rounded-md border bg-muted px-3 py-2 text-sm"
+            >
+              {{ item }}
+            </div>
           </div>
-        </section>
+        </ScrollArea>
       </div>
     `,
   }),

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {
   ScrollArea as ShadcnScrollArea,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/scroll-area'
+} from '../../shadcn/scroll-area'
 import { useResizeObserver } from '@vueuse/core'
 import type { ScrollAreaProps } from './types'
 

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

@@ -31,95 +31,133 @@ function mockLoadValueOptionMethod (value: string) {
   })
 }
 
+const defaultOptions = [
+  { label: 'All Items', value: 'all' },
+  { label: 'Featured', value: 'featured' },
+]
+
 const meta = {
   title: 'UI/SearchSelect',
   component: SearchSelect as any,
   argTypes: {
+    placeholder: { control: 'text' },
+    searchPlaceholder: { control: 'text' },
+    emptyText: { control: 'text' },
+    searchEmptyText: { control: 'text' },
+    createNewTo: { control: 'text' },
+    createNewText: { control: 'text' },
+    loadLimit: { control: 'number' },
     autoLoad: { control: 'boolean' },
     disabled: { control: 'boolean' },
   },
   args: {
+    placeholder: '',
+    searchPlaceholder: '',
+    emptyText: '',
+    searchEmptyText: '',
+    createNewTo: '',
+    createNewText: '',
+    loadLimit: 20,
     autoLoad: false,
     disabled: false,
   },
+  render: args => ({
+    components: { SearchSelect },
+    setup () {
+      const value = ref<string>()
+      return { args, value, mockLoadMethod }
+    },
+    template: `
+      <div class="max-w-sm">
+        <SearchSelect
+          v-model="value"
+          :loadMethod="mockLoadMethod"
+          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 Preselected: Story = {
+  render: () => ({
     components: { SearchSelect },
     setup () {
-      const selected = ref<string>()
-      const withPreselect = ref<string>('item-42')
-      const withDefaults = ref<string>()
-      const withCreateNew = ref<string>()
-
-      const defaultOptions = [
-        { label: 'All Items', value: 'all' },
-        { label: 'Featured', value: 'featured' },
-      ]
-
-      return {
-        args,
-        selected,
-        withPreselect,
-        withDefaults,
-        withCreateNew,
-        defaultOptions,
-        mockLoadMethod,
-        mockLoadValueOptionMethod,
-      }
+      const value = ref<string>('item-42')
+      return { value, mockLoadMethod, mockLoadValueOptionMethod }
     },
     template: `
-      <div class="space-y-10 max-w-sm">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <SearchSelect
-            v-model="selected"
-            :loadMethod="mockLoadMethod"
-            v-bind="args"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ selected ?? 'none' }}</div>
-        </section>
+      <div class="max-w-sm">
+        <SearchSelect
+          v-model="value"
+          :loadMethod="mockLoadMethod"
+          :loadValueOptionMethod="mockLoadValueOptionMethod"
+          autoLoad
+        />
+        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Pre-selected Value -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Pre-selected Value (item-42)</h3>
-          <SearchSelect
-            v-model="withPreselect"
-            :loadMethod="mockLoadMethod"
-            :loadValueOptionMethod="mockLoadValueOptionMethod"
-            autoLoad
-          />
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ withPreselect ?? 'none' }}</div>
-        </section>
+export const WithDefaultOptions: Story = {
+  render: () => ({
+    components: { SearchSelect },
+    setup () {
+      const value = ref<string>()
+      return { value, mockLoadMethod, defaultOptions }
+    },
+    template: `
+      <div class="max-w-sm">
+        <SearchSelect
+          v-model="value"
+          :loadMethod="mockLoadMethod"
+          :defaultOptions="defaultOptions"
+          autoLoad
+        />
+        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Default Options -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Default Options</h3>
-          <SearchSelect
-            v-model="withDefaults"
-            :loadMethod="mockLoadMethod"
-            :defaultOptions="defaultOptions"
-            autoLoad
-          />
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ withDefaults ?? 'none' }}</div>
-        </section>
+export const WithCreateNew: Story = {
+  render: () => ({
+    components: { SearchSelect },
+    setup () {
+      const value = ref<string>()
+      return { value, mockLoadMethod }
+    },
+    template: `
+      <div class="max-w-sm">
+        <SearchSelect
+          v-model="value"
+          :loadMethod="mockLoadMethod"
+          createNewTo="/create"
+          autoLoad
+        />
+        <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Create New -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Create New</h3>
-          <SearchSelect
-            v-model="withCreateNew"
-            :loadMethod="mockLoadMethod"
-            createNewTo="/create"
-            autoLoad
-          />
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ withCreateNew ?? 'none' }}</div>
-        </section>
+export const Disabled: Story = {
+  render: () => ({
+    components: { SearchSelect },
+    setup () {
+      const value = ref<string>()
+      return { value, mockLoadMethod }
+    },
+    template: `
+      <div class="max-w-sm">
+        <SearchSelect v-model="value" :loadMethod="mockLoadMethod" disabled />
       </div>
     `,
   }),