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

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

@@ -6,15 +6,78 @@ import {
 } from '../../shadcn/popover'
 import type { PopoverProps } from './types'
 
-const props = defineProps<PopoverProps>()
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<PopoverProps>(), {
+  trigger: 'click',
+  class: undefined,
+})
+
+const { isMobile } = useDevice()
+
+// Force click trigger on mobile devices for better touch experience
+const effectiveTrigger = computed(() => isMobile.value ? 'click' : props.trigger)
+
+const isOpen = ref(false)
+let hideTimeout: ReturnType<typeof setTimeout> | null = null
+
+const clearHideTimeout = () => {
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+}
+
+const hide = () => {
+  isOpen.value = false
+}
+
+const handleTriggerEnter = () => {
+  if (effectiveTrigger.value === 'hover') {
+    clearHideTimeout()
+    isOpen.value = true
+  }
+}
+
+const handleTriggerLeave = () => {
+  if (effectiveTrigger.value === 'hover') {
+    hideTimeout = setTimeout(hide, 100)
+  }
+}
+
+const handleContentEnter = () => {
+  if (effectiveTrigger.value === 'hover') {
+    clearHideTimeout()
+  }
+}
+
+const handleContentLeave = () => {
+  if (effectiveTrigger.value === 'hover') {
+    hideTimeout = setTimeout(hide, 100)
+  }
+}
+
+onBeforeUnmount(() => {
+  clearHideTimeout()
+})
 </script>
 
 <template>
-  <ShadcnPopover>
-    <PopoverTrigger asChild>
+  <ShadcnPopover v-model:open="isOpen">
+    <PopoverTrigger
+      v-if="$slots.trigger"
+      asChild
+      @mouseenter="handleTriggerEnter"
+      @mouseleave="handleTriggerLeave"
+    >
       <slot name="trigger" />
     </PopoverTrigger>
-    <PopoverContent :class="props.class">
+    <PopoverContent
+      v-bind="$attrs"
+      :class="props.class"
+      @mouseenter="handleContentEnter"
+      @mouseleave="handleContentLeave"
+    >
       <slot />
     </PopoverContent>
   </ShadcnPopover>

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

@@ -1,5 +1,8 @@
-import type { PopoverRootProps } from 'reka-ui'
+import type { PopoverContentProps } from 'reka-ui'
 
-export interface PopoverProps extends /* @vue-ignore */ PopoverRootProps {
+export interface PopoverProps extends /* @vue-ignore */ PopoverContentProps {
+  /** Trigger mode for showing the popover. Defaults to 'click'. */
+  trigger?: 'click' | 'hover'
+  /** Extra class for the popover content container. */
   class?: ClassValue
 }

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

@@ -29,7 +29,21 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const DynamicContent: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <input v-model="url" placeholder="Enter URL or text" />
+  <div class="size-48">
+    <Qrcode :content="url" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Qrcode },
     setup () {
@@ -52,7 +66,23 @@ export const DynamicContent: Story = {
 }
 
 export const Sizes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="size-24">
+    <Qrcode content="https://example.com/small" />
+  </div>
+  <div class="size-48">
+    <Qrcode content="https://example.com/medium" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Qrcode },
     template: `

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import type { RadioCardGroupOption } from './types'
 import RadioCardGroup from './index.vue'
 
@@ -70,7 +71,18 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const WithDisabledOption: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <RadioCardGroup v-model="selected" :options="planOptions" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { RadioCardGroup },
     setup () {
@@ -88,17 +100,44 @@ export const WithDisabledOption: Story = {
 
 export const Disabled: Story = {
   parameters: noControls,
+  args: {
+    disabled: true,
+  },
+}
+
+export const EventHandling: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <RadioCardGroup
+    v-model="selected"
+    :options="options"
+    @update:modelValue="onUpdate"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
-    components: { RadioCardGroup },
+    components: { RadioCardGroup, EventLog },
     setup () {
       const selected = ref('current')
       return { selected, options }
     },
     template: `
-      <div class="max-w-md space-y-4">
-        <RadioCardGroup v-model="selected" :options="options" disabled />
-        <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
-      </div>
+      <EventLog v-slot="{ record }">
+        <div class="max-w-md">
+          <RadioCardGroup
+            v-model="selected"
+            :options="options"
+            @update:modelValue="(v) => record('update:modelValue', v)"
+          />
+        </div>
+      </EventLog>
     `,
   }),
 }

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import type { RadioGroupItem } from './types'
 import RadioGroup from './index.vue'
 
@@ -45,52 +46,45 @@ export const Default: Story = {}
 
 export const Horizontal: Story = {
   parameters: noControls,
-  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>
-    `,
-  }),
+  args: {
+    orientation: 'horizontal',
+  },
 }
 
 export const WithDisabledItem: Story = {
   parameters: noControls,
-  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>
-    `,
-  }),
+  args: {
+    items: plans,
+    modelValue: 'pro',
+  },
 }
 
 export const Disabled: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { RadioGroup },
-    setup () {
-      const selected = ref('option1')
-      return { options, selected }
-    },
-    template: '<RadioGroup v-model="selected" :items="options" disabled />',
-  }),
+  args: {
+    disabled: true,
+  },
 }
 
 export const CustomSlots: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <RadioGroup v-model="plan" :items="plans">
+    <template #label="{ item, checked }">
+      <span :class="checked ? 'font-semibold text-primary' : 'text-foreground'">
+        {{ item.label }}
+      </span>
+    </template>
+  </RadioGroup>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { RadioGroup },
     setup () {
@@ -111,3 +105,38 @@ export const CustomSlots: Story = {
     `,
   }),
 }
+
+export const EventHandling: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <RadioGroup
+    v-model="selected"
+    :items="options"
+    @update:modelValue="onUpdate"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { RadioGroup, EventLog },
+    setup () {
+      const selected = ref('option1')
+      return { options, selected }
+    },
+    template: `
+      <EventLog v-slot="{ record }">
+        <RadioGroup
+          v-model="selected"
+          :items="options"
+          @update:modelValue="(v) => record('update:modelValue', v)"
+        />
+      </EventLog>
+    `,
+  }),
+}

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

@@ -51,32 +51,30 @@ export const Default: Story = {}
 
 export const FadeMask: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { ScrollArea },
-    setup () {
-      const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`)
-      return { items }
-    },
-    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 items"
-              :key="item"
-              class="rounded-md border bg-muted px-3 py-2 text-sm"
-            >
-              {{ item }}
-            </div>
-          </div>
-        </ScrollArea>
-      </div>
-    `,
-  }),
+  args: {
+    fadeMask: true,
+  },
 }
 
 export const NoOverflow: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { ScrollArea },
     setup () {

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import type { SearchSelectLoadMethodParams, SearchSelectLoadMethodResult } from './types'
 import SearchSelect from './index.vue'
 
@@ -88,7 +89,23 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Preselected: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <SearchSelect
+    v-model="value"
+    :loadMethod="loadMethod"
+    :loadValueOptionMethod="loadValueOptionMethod"
+    autoLoad
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { SearchSelect },
     setup () {
@@ -110,7 +127,23 @@ export const Preselected: Story = {
 }
 
 export const WithDefaultOptions: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <SearchSelect
+    v-model="value"
+    :loadMethod="loadMethod"
+    :defaultOptions="defaultOptions"
+    autoLoad
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { SearchSelect },
     setup () {
@@ -133,38 +166,54 @@ export const WithDefaultOptions: Story = {
 
 export const WithCreateNew: Story = {
   parameters: noControls,
-  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>
-    `,
-  }),
+  args: {
+    createNewTo: '/create',
+    autoLoad: true,
+  },
 }
 
 export const Disabled: Story = {
   parameters: noControls,
+  args: {
+    disabled: true,
+  },
+}
+
+export const EventHandling: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <SearchSelect
+    v-model="value"
+    :loadMethod="loadMethod"
+    autoLoad
+    @update:modelValue="onUpdate"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
-    components: { SearchSelect },
+    components: { SearchSelect, EventLog },
     setup () {
       const value = ref<string>()
       return { value, mockLoadMethod }
     },
     template: `
-      <div class="max-w-sm">
-        <SearchSelect v-model="value" :loadMethod="mockLoadMethod" disabled />
-      </div>
+      <EventLog v-slot="{ record }">
+        <div class="max-w-sm">
+          <SearchSelect
+            v-model="value"
+            :loadMethod="mockLoadMethod"
+            autoLoad
+            @update:modelValue="(v) => record('update:modelValue', v)"
+          />
+        </div>
+      </EventLog>
     `,
   }),
 }

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