@polymarbot/nuxt-layer-shadcn-ui 0.4.2 → 0.5.1

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

@@ -79,6 +79,7 @@ const timeConfig = computed(() => {
     :yearPicker="type === 'year'"
     :autoApply="autoApply"
     :inputAttrs="{ clearable: false }"
+    :teleport="true"
     textInput
   >
     <template #dp-input="{ value, onInput, onEnter, onTab, onClear, onBlur, onFocus, openMenu }">
@@ -98,7 +99,7 @@ const timeConfig = computed(() => {
           <template #prefix>
             <Icon
               name="calendar-days"
-              class="cursor-pointer text-muted-foreground"
+              class="text-muted-foreground cursor-pointer"
               @click="openMenu"
             />
           </template>

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

@@ -20,7 +20,7 @@ const meta = {
     class: { control: 'text' },
   },
   args: {
-    modelValue: { start: null, end: null },
+    modelValue: [ null, null ],
     showTime: false,
     disabled: false,
     readonly: false,
@@ -36,7 +36,7 @@ const meta = {
   render: args => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref<DateRangePickerValue>({ start: null, end: null })
+      const range = ref<DateRangePickerValue>([ null, null ])
       return { args, range }
     },
     template: `
@@ -67,7 +67,7 @@ export const WithTime: Story = {
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const withTime = ref<DateRangePickerValue>({ start: null, end: null })
+      const withTime = ref<DateRangePickerValue>([ null, null ])
       return { withTime }
     },
     template: `
@@ -91,7 +91,7 @@ export const MaxSpanDays: Story = {
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const maxSpan = ref<DateRangePickerValue>({ start: null, end: null })
+      const maxSpan = ref<DateRangePickerValue>([ null, null ])
       return { maxSpan }
     },
     template: `
@@ -115,10 +115,10 @@ export const Preselected: Story = {
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const preselected = ref<DateRangePickerValue>({
-        start: new Date(2025, 5, 1),
-        end: new Date(2025, 5, 15),
-      })
+      const preselected = ref<DateRangePickerValue>([
+        new Date(2025, 5, 1),
+        new Date(2025, 5, 15),
+      ])
       return { preselected }
     },
     template: `
@@ -142,10 +142,10 @@ export const Disabled: Story = {
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref<DateRangePickerValue>({
-        start: new Date(2025, 5, 1),
-        end: new Date(2025, 5, 15),
-      })
+      const range = ref<DateRangePickerValue>([
+        new Date(2025, 5, 1),
+        new Date(2025, 5, 15),
+      ])
       return { range }
     },
     template: `
@@ -168,10 +168,10 @@ export const Readonly: Story = {
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref<DateRangePickerValue>({
-        start: new Date(2025, 5, 1),
-        end: new Date(2025, 5, 15),
-      })
+      const range = ref<DateRangePickerValue>([
+        new Date(2025, 5, 1),
+        new Date(2025, 5, 15),
+      ])
       return { range }
     },
     template: `

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

@@ -4,7 +4,7 @@ import type { DateRangePickerProps, DateRangePickerValue } from './types'
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<DateRangePickerProps>(), {
-  modelValue: () => ({ start: null, end: null }),
+  modelValue: () => [ null, null ],
   showTime: false,
   disabled: false,
   readonly: false,
@@ -24,19 +24,16 @@ const emit = defineEmits<{
 
 const T = useTranslations('components.ui.DateRangePicker')
 
-const startDate = ref<Date | string | null>(props.modelValue?.start ?? null)
-const endDate = ref<Date | string | null>(props.modelValue?.end ?? null)
+const startDate = ref<Date | string | null>(props.modelValue?.[0] ?? null)
+const endDate = ref<Date | string | null>(props.modelValue?.[1] ?? null)
 
 watch(() => props.modelValue, val => {
-  startDate.value = val?.start ?? null
-  endDate.value = val?.end ?? null
+  startDate.value = val?.[0] ?? null
+  endDate.value = val?.[1] ?? null
 })
 
 function emitRange () {
-  emit('update:modelValue', {
-    start: startDate.value,
-    end: endDate.value,
-  })
+  emit('update:modelValue', [ startDate.value, endDate.value ])
 }
 
 function handleStartUpdate (value: Date | string | null) {
@@ -104,7 +101,7 @@ const endMaxDate = computed(() => {
 </script>
 
 <template>
-  <div :class="cn('flex items-center gap-2', props.class)">
+  <div :class="cn('gap-2 flex items-center', props.class)">
     <DatePicker
       :modelValue="startDate"
       :showTime="showTime"
@@ -118,7 +115,7 @@ const endMaxDate = computed(() => {
       v-bind="$attrs"
       @update:modelValue="handleStartUpdate"
     />
-    <span class="shrink-0 text-muted-foreground">
+    <span class="text-muted-foreground shrink-0">
       {{ T('to') }}
     </span>
     <DatePicker

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

@@ -1,9 +1,9 @@
 import type { DatePickerTimeConfig } from '../DatePicker/types'
 
-export interface DateRangePickerValue {
-  start: Date | string | null
-  end: Date | string | null
-}
+export type DateRangePickerValue = [
+  start: Date | string | null,
+  end: Date | string | null,
+]
 
 export interface DateRangePickerProps {
   modelValue?: DateRangePickerValue

package/app/components/ui/Dropdown/ItemContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import ItemIcon from './ItemIcon.vue'
+import type { DropdownActionItem } from './types'
+
+defineProps<{
+  item: DropdownActionItem
+}>()
+</script>
+
+<template>
+  <ItemIcon
+    :icon="item.icon"
+    :iconColor="item.iconColor"
+  />
+  <span class="flex-1">
+    {{ item.label }}
+  </span>
+  <Icon
+    v-if="item.active"
+    name="check"
+    class="size-4"
+  />
+</template>

package/app/components/ui/Dropdown/ItemIcon.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority'
+import type { DropdownActionItem } from './types'
+
+const props = defineProps<{
+  /** Icon name (lucide kebab-case) or a Vue component. */
+  icon: DropdownActionItem['icon']
+  /** Override icon color independently of the surrounding item color. */
+  iconColor?: DropdownActionItem['iconColor']
+}>()
+
+const iconColorVariants = cva('', {
+  variants: {
+    color: {
+      default: '',
+      primary: 'text-primary',
+      success: 'text-success',
+      info: 'text-info',
+      help: 'text-help',
+      warn: 'text-warn',
+      danger: 'text-danger',
+    },
+  },
+  defaultVariants: { color: 'default' },
+})
+
+const colorClass = computed(() => iconColorVariants({ color: props.iconColor }))
+</script>
+
+<template>
+  <Icon
+    v-if="typeof icon === 'string'"
+    :name="icon"
+    :class="colorClass"
+  />
+  <component
+    :is="icon"
+    v-else-if="icon"
+    :class="cn('size-4', colorClass)"
+  />
+</template>

package/app/components/ui/Dropdown/MenuItems.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import {
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '../../shadcn/dropdown-menu'
+import { cva } from 'class-variance-authority'
+import ItemContent from './ItemContent.vue'
+import SlotRenderer from './SlotRenderer.vue'
+import type {
+  DropdownActionItem,
+  DropdownCustomActionItem,
+  DropdownItem,
+} from './types'
+
+const actionColorVariants = cva('', {
+  variants: {
+    color: {
+      default: '',
+      primary: `
+        text-primary
+        focus:bg-primary/10 focus:text-primary
+        data-[state=open]:bg-primary/10 data-[state=open]:text-primary
+      `,
+      success: `
+        text-success
+        focus:bg-success/10 focus:text-success
+        data-[state=open]:bg-success/10 data-[state=open]:text-success
+      `,
+      info: `
+        text-info
+        focus:bg-info/10 focus:text-info
+        data-[state=open]:bg-info/10 data-[state=open]:text-info
+      `,
+      help: `
+        text-help
+        focus:bg-help/10 focus:text-help
+        data-[state=open]:bg-help/10 data-[state=open]:text-help
+      `,
+      warn: `
+        text-warn
+        focus:bg-warn/10 focus:text-warn
+        data-[state=open]:bg-warn/10 data-[state=open]:text-warn
+      `,
+      danger: `
+        text-danger
+        focus:bg-danger/10 focus:text-danger
+        data-[state=open]:bg-danger/10 data-[state=open]:text-danger
+      `,
+    },
+  },
+  defaultVariants: { color: 'default' },
+})
+
+defineProps<{
+  menus: DropdownItem[]
+}>()
+
+const ctx = inject(dropdownContextKey)
+
+const handleItemAction = (
+  item: DropdownActionItem | DropdownCustomActionItem,
+  event?: Event,
+) => {
+  if (item.disabled) {
+    event?.preventDefault()
+    return
+  }
+  item.command?.()
+  ctx?.hide()
+}
+</script>
+
+<template>
+  <template
+    v-for="(menu, index) in menus"
+    :key="index"
+  >
+    <!-- Built-in: separator -->
+    <DropdownMenuSeparator v-if="menu.type === 'separator'" />
+    <!-- Built-in: group label -->
+    <DropdownMenuLabel
+      v-else-if="menu.type === 'label'"
+      class="text-xs font-normal text-muted-foreground"
+    >
+      {{ menu.label }}
+    </DropdownMenuLabel>
+    <!-- Custom label: content via named slot -->
+    <DropdownMenuLabel
+      v-else-if="menu.type === 'custom-label'"
+      :class="cn('p-0 font-normal', menu.class)"
+    >
+      <SlotRenderer
+        :slotName="menu.slot"
+        :item="menu"
+      />
+    </DropdownMenuLabel>
+    <!-- Custom action: content via named slot -->
+    <DropdownMenuItem
+      v-else-if="menu.type === 'custom-action'"
+      :disabled="menu.disabled"
+      :class="cn(actionColorVariants({ color: menu.color }), menu.class)"
+      @click="handleItemAction(menu, $event)"
+    >
+      <SlotRenderer
+        :slotName="menu.slot"
+        :item="menu"
+      />
+      <Icon
+        v-if="menu.active"
+        name="check"
+        class="size-4 ml-auto"
+      />
+    </DropdownMenuItem>
+    <!-- Action with sub-menu -->
+    <DropdownMenuSub v-else-if="menu.subMenus?.length">
+      <DropdownMenuSubTrigger
+        :disabled="menu.disabled"
+        :class="cn(actionColorVariants({ color: menu.color }), menu.class)"
+      >
+        <ItemContent :item="menu" />
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent :style="ctx?.contentStyle.value">
+        <MenuItems :menus="menu.subMenus" />
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+    <!-- Built-in: action (default). When `href` is set, asChild merges
+         our props (incl. @click) onto the WebLink, so the click handler
+         only needs to live here. -->
+    <DropdownMenuItem
+      v-else
+      :disabled="menu.disabled"
+      :asChild="!!menu.href"
+      :class="cn(actionColorVariants({ color: menu.color }), menu.class)"
+      @click="handleItemAction(menu, $event)"
+    >
+      <WebLink
+        v-if="menu.href"
+        unstyled
+        :href="menu.href"
+        :target="menu.target"
+        class="gap-2 flex w-full items-center"
+      >
+        <ItemContent :item="menu" />
+        <Icon
+          v-if="isUrl(menu.href)"
+          name="external-link"
+          class="size-3.5 text-muted-foreground"
+        />
+      </WebLink>
+      <ItemContent
+        v-else
+        :item="menu"
+      />
+    </DropdownMenuItem>
+  </template>
+</template>

package/app/components/ui/Dropdown/SlotRenderer.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  /** Name of the slot on the root Dropdown to render. */
+  slotName: string
+  /** Forwarded to the slot scope as `{ item }`. */
+  item: object
+}>()
+
+const ctx = inject(dropdownContextKey)
+</script>
+
+<template>
+  <component
+    :is="ctx.slots[slotName]"
+    v-if="ctx?.slots[slotName]"
+    :item="item"
+  />
+</template>

package/app/components/ui/Dropdown/en.json

@@ -0,0 +1,3 @@
+{
+  "empty": "No items"
+}

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

@@ -23,7 +23,7 @@ const accountMenus: DropdownItem[] = [
 ]
 
 const linkMenus: DropdownItem[] = [
-  { label: 'Documentation', icon: 'book-open', href: 'https://example.com/docs', target: '_blank' },
+  { label: 'Documentation', icon: 'book-open', href: 'https://example.com/docs', target: '_blank', active: true },
   { label: 'Support', icon: 'life-buoy', href: 'https://example.com/support', target: '_blank' },
 ]
 
@@ -56,6 +56,53 @@ const customMenus: DropdownItem[] = [
   },
 ]
 
+const iconColorMenus: DropdownItem[] = [
+  { label: 'Default item', icon: 'circle' },
+  { label: 'Primary icon only', icon: 'star', iconColor: 'primary' },
+  { label: 'Success icon only', icon: 'circle-check', iconColor: 'success' },
+  { label: 'Warn icon only', icon: 'triangle-alert', iconColor: 'warn' },
+  { label: 'Danger icon only', icon: 'shield-alert', iconColor: 'danger' },
+  { type: 'separator' },
+  { label: 'Both danger', icon: 'trash-2', color: 'danger', iconColor: 'danger' },
+  { label: 'Danger label, info icon', icon: 'info', color: 'danger', iconColor: 'info' },
+]
+
+const subMenus: DropdownItem[] = [
+  { label: 'New File', icon: 'file-plus' },
+  { label: 'New Folder', icon: 'folder-plus' },
+  { type: 'separator' },
+  {
+    label: 'Share',
+    icon: 'share-2',
+    subMenus: [
+      { label: 'Email link', icon: 'mail' },
+      { label: 'Copy link', icon: 'link' },
+      { type: 'separator' },
+      {
+        label: 'Social',
+        icon: 'globe',
+        subMenus: [
+          { label: 'Twitter', icon: 'twitter' },
+          { label: 'Facebook', icon: 'facebook' },
+          { label: 'LinkedIn', icon: 'linkedin' },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Move to',
+    icon: 'folder-symlink',
+    active: true,
+    subMenus: [
+      { label: 'Documents', icon: 'folder' },
+      { label: 'Downloads', icon: 'folder', active: true },
+      { label: 'Trash', icon: 'trash-2', color: 'danger', iconColor: 'danger' },
+    ],
+  },
+  { type: 'separator' },
+  { label: 'Delete', icon: 'trash-2', color: 'danger' },
+]
+
 const meta = {
   title: 'UI/Dropdown',
   component: Dropdown,
@@ -65,6 +112,7 @@ const meta = {
     side: { control: 'select', options: sides },
     align: { control: 'select', options: aligns },
     sideOffset: { control: 'number' },
+    minWidth: { control: 'text' },
   },
   args: {
     menus: basicMenus,
@@ -72,6 +120,7 @@ const meta = {
     side: undefined,
     align: undefined,
     sideOffset: undefined,
+    minWidth: undefined,
   },
   render: args => ({
     components: { Dropdown, Button },
@@ -123,6 +172,47 @@ export const WithGroups: Story = {
   },
 }
 
+export const WithIconColor: Story = {
+  parameters: noControls,
+  args: {
+    menus: iconColorMenus,
+    trigger: 'click',
+  },
+}
+
+export const WithSubMenus: Story = {
+  parameters: noControls,
+  args: {
+    menus: subMenus,
+    trigger: 'click',
+  },
+}
+
+export const WithSubMenusHover: Story = {
+  parameters: noControls,
+  args: {
+    menus: subMenus,
+    trigger: 'hover',
+  },
+}
+
+export const WithMinWidth: Story = {
+  parameters: noControls,
+  args: {
+    menus: subMenus,
+    trigger: 'click',
+    minWidth: 240,
+  },
+}
+
+export const EmptyMenus: Story = {
+  parameters: noControls,
+  args: {
+    menus: [],
+    trigger: 'click',
+  },
+}
+
 export const CustomSlots: Story = {
   parameters: {
     ...noControls,

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

@@ -2,50 +2,10 @@
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../shadcn/dropdown-menu'
-import { cva } from 'class-variance-authority'
-import type {
-  DropdownActionItem,
-  DropdownCustomActionItem,
-  DropdownProps,
-} from './types'
-
-const actionColorVariants = cva('', {
-  variants: {
-    color: {
-      default: '',
-      primary: `
-        text-primary
-        focus:bg-primary/10 focus:text-primary
-      `,
-      success: `
-        text-success
-        focus:bg-success/10 focus:text-success
-      `,
-      info: `
-        text-info
-        focus:bg-info/10 focus:text-info
-      `,
-      help: `
-        text-help
-        focus:bg-help/10 focus:text-help
-      `,
-      warn: `
-        text-warn
-        focus:bg-warn/10 focus:text-warn
-      `,
-      danger: `
-        text-danger
-        focus:bg-danger/10 focus:text-danger
-      `,
-    },
-  },
-  defaultVariants: { color: 'default' },
-})
+import MenuItems from './MenuItems.vue'
+import type { DropdownProps } from './types'
 
 defineOptions({ inheritAttrs: false })
 
@@ -53,14 +13,23 @@ const props = withDefaults(defineProps<DropdownProps>(), {
   menus: () => [],
   trigger: 'hover',
   class: undefined,
+  minWidth: undefined,
+})
+
+const contentStyle = computed<{ minWidth?: string } | undefined>(() => {
+  if (props.minWidth == null) return undefined
+  const value = typeof props.minWidth === 'number' ? `${props.minWidth}px` : props.minWidth
+  return { minWidth: value }
 })
 
-defineSlots<{
-  default?: () => unknown
-  popup?: (props: { hide: () => void }) => unknown
-  [key: string]: ((props?: any) => unknown) | undefined
+const slots = defineSlots<{
+  default?: () => any
+  popup?: (props: { hide: () => void }) => any
+  empty?: () => any
+  [key: string]: ((props?: any) => any) | undefined
 }>()
 
+const T = useTranslations('components.ui.Dropdown')
 const { isMobile } = useDevice()
 
 // Force click trigger on mobile devices for better touch experience
@@ -107,17 +76,11 @@ const handleMenuLeave = () => {
   }
 }
 
-const handleItemAction = (
-  item: DropdownActionItem | DropdownCustomActionItem,
-  event?: Event,
-) => {
-  if (item.disabled) {
-    event?.preventDefault()
-    return
-  }
-  item.command?.()
-  hide()
-}
+provide(dropdownContextKey, {
+  hide,
+  slots,
+  contentStyle,
+})
 
 onBeforeUnmount(() => {
   clearHideTimeout()
@@ -139,6 +102,7 @@ onBeforeUnmount(() => {
     <DropdownMenuContent
       v-bind="$attrs"
       :class="props.class"
+      :style="contentStyle"
       @mouseenter="handleMenuEnter"
       @mouseleave="handleMenuLeave"
     >
@@ -151,109 +115,29 @@ onBeforeUnmount(() => {
       </template>
 
       <!-- Default menu dropdown -->
-      <template v-else>
-        <template
-          v-for="(item, index) in menus"
-          :key="index"
+      <MenuItems
+        v-else-if="menus.length"
+        :menus="menus"
+      />
+
+      <!-- Empty placeholder. Default content is wrapped; #empty slot is not. -->
+      <slot
+        v-else
+        name="empty"
+      >
+        <div
+          class="
+            gap-2 px-2 py-4 text-sm text-muted-foreground flex flex-col
+            items-center
+          "
         >
-          <!-- Built-in: separator -->
-          <DropdownMenuSeparator v-if="item.type === 'separator'" />
-          <!-- Built-in: group label -->
-          <DropdownMenuLabel
-            v-else-if="item.type === 'label'"
-            class="text-xs font-normal text-muted-foreground"
-          >
-            {{ item.label }}
-          </DropdownMenuLabel>
-          <!-- Custom label: content via named slot -->
-          <DropdownMenuLabel
-            v-else-if="item.type === 'custom-label'"
-            :class="cn('p-0 font-normal', item.class)"
-          >
-            <slot
-              :name="item.slot"
-              :item="item"
-            />
-          </DropdownMenuLabel>
-          <!-- Custom action: content via named slot -->
-          <DropdownMenuItem
-            v-else-if="item.type === 'custom-action'"
-            :disabled="item.disabled"
-            :class="cn(actionColorVariants({ color: item.color }), item.class)"
-            @click="handleItemAction(item, $event)"
-          >
-            <slot
-              :name="item.slot"
-              :item="item"
-            />
-            <Icon
-              v-if="item.active"
-              name="check"
-              class="size-4 ml-auto"
-            />
-          </DropdownMenuItem>
-          <!-- Built-in: action (default) -->
-          <DropdownMenuItem
-            v-else
-            :disabled="item.disabled"
-            :asChild="!!item.href"
-            :class="cn(actionColorVariants({ color: item.color }), item.class)"
-            @click="!item.href && handleItemAction(item, $event)"
-          >
-            <template v-if="item.href">
-              <WebLink
-                unstyled
-                :href="item.href"
-                :target="item.target"
-                class="gap-2 flex w-full items-center"
-                @click="handleItemAction(item, $event)"
-              >
-                <Icon
-                  v-if="typeof item.icon === 'string'"
-                  :name="item.icon"
-                />
-                <component
-                  :is="item.icon"
-                  v-else-if="item.icon"
-                  class="size-4"
-                />
-                <span class="flex-1">
-                  {{ item.label }}
-                </span>
-                <Icon
-                  v-if="isUrl(item.href)"
-                  name="external-link"
-                  class="size-3.5 text-muted-foreground"
-                />
-                <Icon
-                  v-if="item.active"
-                  name="check"
-                  class="size-4"
-                />
-              </WebLink>
-            </template>
-            <template v-else>
-              <Icon
-                v-if="typeof item.icon === 'string'"
-                :name="item.icon"
-              />
-              <component
-                :is="item.icon"
-                v-else-if="item.icon"
-                class="size-4"
-              />
-              <span class="flex-1">
-                {{ item.label }}
-              </span>
-              <Icon
-                v-if="item.active"
-                name="check"
-                class="size-4"
-              />
-            </template>
-          </DropdownMenuItem>
-        </template>
-      </template>
+          <Icon
+            name="inbox"
+            class="size-6"
+          />
+          <span>{{ T('empty') }}</span>
+        </div>
+      </slot>
     </DropdownMenuContent>
   </DropdownMenu>
 </template>

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

@@ -1,29 +1,45 @@
 import type { DropdownMenuContentProps } from 'reka-ui'
-import type { Component } from 'vue'
+import type { Component, ComputedRef, InjectionKey, Slots } from 'vue'
 
+/** Semantic color, matches project-wide color scheme. */
 export type DropdownItemColor = 'default' | 'primary' | 'success' | 'info' | 'help' | 'warn' | 'danger'
 
 export interface DropdownActionItem {
-  /** Defaults to 'action' when omitted. */
+  /** Item kind. Defaults to 'action' when omitted. */
   type?: 'action'
-  /** Semantic color, matches project-wide color scheme. Defaults to 'default'. */
+  /** Foreground color of the whole item (label + focus background). */
   color?: DropdownItemColor
+  /** Override icon color independently of `color`. */
+  iconColor?: DropdownItemColor
+  /** Display text shown in the item. */
   label?: string
+  /** Icon name (lucide kebab-case) or a Vue component. */
   icon?: string | Component
+  /** Click handler. Ignored when `subMenus` is set. */
   command?: () => void
+  /** Disabled items are non-interactive and visually muted. */
   disabled?: boolean
+  /** Renders a trailing check icon to indicate selected/active state. */
   active?: boolean
+  /** Extra class merged onto the item element. */
   class?: ClassValue
+  /** Render the item as a link. Ignored when `subMenus` is set. */
   href?: string
+  /** Anchor target. Only meaningful with `href`. */
   target?: string
+  /** Nested sub-menu items. When provided, `command` / `href` are ignored. */
+  subMenus?: DropdownItem[]
 }
 
 export interface DropdownSeparatorItem {
+  /** Item kind. */
   type: 'separator'
 }
 
 export interface DropdownLabelItem {
+  /** Item kind. */
   type: 'label'
+  /** Group header text. */
   label: string
 }
 
@@ -33,14 +49,21 @@ export interface DropdownLabelItem {
  * to the slot as `item` for rendering.
  */
 export interface DropdownCustomActionItem {
+  /** Item kind. */
   type: 'custom-action'
-  /** Semantic color, matches project-wide color scheme. Defaults to 'default'. */
+  /** Foreground color of the whole item (label + focus background). */
   color?: DropdownItemColor
+  /** Name of the slot that renders this item's content. */
   slot: string
+  /** Click handler. */
   command?: () => void
+  /** Disabled items are non-interactive and visually muted. */
   disabled?: boolean
+  /** Renders a trailing check icon to indicate selected/active state. */
   active?: boolean
+  /** Extra class merged onto the item element. */
   class?: ClassValue
+  /** Arbitrary extra data forwarded to the slot as `item`. */
   [field: string]: unknown
 }
 
@@ -50,9 +73,13 @@ export interface DropdownCustomActionItem {
  * to the slot as `item` for rendering.
  */
 export interface DropdownCustomLabelItem {
+  /** Item kind. */
   type: 'custom-label'
+  /** Name of the slot that renders this label's content. */
   slot: string
+  /** Extra class merged onto the label element. */
   class?: ClassValue
+  /** Arbitrary extra data forwarded to the slot as `item`. */
   [field: string]: unknown
 }
 
@@ -73,10 +100,25 @@ export type DropdownItem
     | DropdownCustomLabelItem
 
 export interface DropdownProps extends /* @vue-ignore */ DropdownMenuContentProps {
-  /** Menu items to display in the dropdown (not required when using popup slot) */
+  /** Menu items to display in the dropdown. Not required when using the `popup` slot. */
   menus?: DropdownItem[]
   /** Trigger mode for showing the dropdown. Defaults to 'hover'. */
   trigger?: 'click' | 'hover'
   /** Extra class for the dropdown content container. */
   class?: ClassValue
+  /** Min-width applied to the root content and all sub-menus. Numbers are treated as px. */
+  minWidth?: string | number
 }
+
+/** Context shared from the root Dropdown to nested MenuItems via provide/inject. */
+export interface DropdownContext {
+  /** Closes the entire dropdown (root + any open sub-menus). */
+  hide: () => void
+  /** The root Dropdown's slots, used to render `custom-label` / `custom-action` items. */
+  slots: Slots
+  /** Inline style applied to root content and all sub-menus (currently min-width). */
+  contentStyle: ComputedRef<{ minWidth?: string } | undefined>
+}
+
+/** Provide/inject key for the shared DropdownContext. */
+export const dropdownContextKey: InjectionKey<DropdownContext> = Symbol('dropdown-context')

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

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Progress from './index.vue'
+
+const meta = {
+  title: 'UI/Progress',
+  component: Progress,
+  argTypes: {
+    modelValue: { control: { type: 'number', min: 0, max: 100 }},
+    max: { control: 'number' },
+  },
+  args: {
+    modelValue: 50,
+    max: 100,
+  },
+  render: args => ({
+    components: { Progress },
+    setup: () => ({ args }),
+    template: `
+      <div class="max-w-sm">
+        <Progress v-bind="args" />
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof Progress>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
+export const Default: Story = {}
+
+export const CustomMax: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Progress :modelValue="150" :max="200" />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Progress },
+    template: `
+      <div class="max-w-sm space-y-2">
+        <Progress :modelValue="150" :max="200" />
+        <div class="text-sm text-muted-foreground">150 / 200</div>
+      </div>
+    `,
+  }),
+}
+
+export const Animated: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Progress :modelValue="value" />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Progress },
+    setup () {
+      const value = ref(0)
+      const id = setInterval(() => {
+        value.value = (value.value + 5) % 105
+      }, 300)
+      onUnmounted(() => clearInterval(id))
+      return { value }
+    },
+    template: `
+      <div class="max-w-sm space-y-2">
+        <Progress :modelValue="value" />
+        <div class="text-sm text-muted-foreground">{{ value }}%</div>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Progress as ShadcnProgress } from '../../shadcn/progress'
+import type { ProgressProps } from './types'
+
+defineProps<ProgressProps>()
+</script>
+
+<template>
+  <ShadcnProgress />
+</template>

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

@@ -0,0 +1,3 @@
+import type { ProgressRootProps } from 'reka-ui'
+
+export interface ProgressProps extends /* @vue-ignore */ ProgressRootProps {}

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

@@ -98,6 +98,9 @@ export const VariantColorMatrix: Story = {
   parameters: {
     ...noControls,
     docs: {
+      description: {
+        story: 'Surfaces in this matrix are clickable — click any cell to toggle its active state.',
+      },
       source: {
         code: `
 <template>

package/i18n/messages/ar.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "تاريخ البداية",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "لا توجد عناصر"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} من {total}"
       },

package/i18n/messages/de.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Startdatum",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Keine Elemente"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} von {total}"
       },

package/i18n/messages/en.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Start date",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "No items"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} of {total}"
       },

package/i18n/messages/es.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Fecha de inicio",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Sin elementos"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} de {total}"
       },

package/i18n/messages/fr.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Date de début",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Aucun élément"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} sur {total}"
       },

package/i18n/messages/hi.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "प्रारंभ तारीख",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "कोई आइटम नहीं"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} में से {total}"
       },

package/i18n/messages/id.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Tanggal awal",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Tidak ada item"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} dari {total}"
       },

package/i18n/messages/it.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Data di inizio",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Nessun elemento"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} di {total}"
       },

package/i18n/messages/ja.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "開始日",
         "to": "〜"
       },
+      "Dropdown": {
+        "empty": "アイテムなし"
+      },
       "Pagination": {
         "pageReport": "{first}〜{last}件 / 全{total}件"
       },

package/i18n/messages/ko.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "시작 날짜",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "항목 없음"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} / {total}"
       },

package/i18n/messages/nl.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Startdatum",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Geen items"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} van {total}"
       },

package/i18n/messages/pl.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Data początkowa",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Brak elementów"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} z {total}"
       },

package/i18n/messages/pt.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Data inicial",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Sem itens"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} de {total}"
       },

package/i18n/messages/ru.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Дата начала",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Нет элементов"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} из {total}"
       },

package/i18n/messages/th.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "วันที่เริ่มต้น",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "ไม่มีรายการ"
+      },
       "Pagination": {
         "pageReport": "รายการที่ {first}–{last} จากทั้งหมด {total}"
       },

package/i18n/messages/tr.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Başlangıç tarihi",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Öğe yok"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} / {total}"
       },

package/i18n/messages/vi.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "Ngày bắt đầu",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "Không có mục"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} của {total}"
       },

package/i18n/messages/zh-CN.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "开始日期",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "无项目"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} 共 {total}"
       },

package/i18n/messages/zh-TW.json

@@ -46,6 +46,9 @@
         "startPlaceholder": "開始日期",
         "to": "–"
       },
+      "Dropdown": {
+        "empty": "沒有項目"
+      },
       "Pagination": {
         "pageReport": "{first}–{last} 共 {total}"
       },

package/nuxt.config.ts

@@ -52,9 +52,15 @@ export default defineNuxtConfig({
   css: [ join(currentDir, 'app/assets/styles/globals.css') ],
 
   components: [
-    // Layer's own components (absolute paths required)
-    { path: join(currentDir, 'app/components/ui'), pathPrefix: false, extensions: [ 'vue' ]},
-    { path: join(currentDir, 'app/components'), pathPrefix: true, ignore: [ 'shadcn/**' ], extensions: [ 'vue' ]},
+    // Auto-import only first-level UI components: `Foo.vue` or `Foo/index.vue`.
+    // Files nested inside a component folder (e.g. `Dropdown/MenuItems.vue`)
+    // are intentionally skipped — those should be imported explicitly by their
+    // owning component. shadcn/* is excluded by the pattern (no nested scan).
+    {
+      path: join(currentDir, 'app/components/ui'),
+      pathPrefix: true,
+      pattern: '{*.vue,*/index.vue}',
+    },
   ],
 
   imports: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "704765b43899093b99abeeb363fc417bef1135f9"
+  "gitHead": "715490d2d8fd6d2511c0c57828b17f47238bcd45"
 }