feat(Select/SelectMenu): handle size prop (#133)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2026-01-14 20:19:34 +01:00 · 2024-07-02 12:03:10 +02:00
parent 57a49877ae
commit b61696cdca
42 changed files with 816 additions and 750 deletions
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -83,6 +83,7 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
 }))

 function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
  const event = new Event('change', { target: { value } })
  emits('change', event)
  emitFormChange()
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -262,7 +262,7 @@ const groups = computed(() => {
                  </slot>

                  <ComboboxItemIndicator as-child>
-                    <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingSelectedIcon()" />
+                    <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon()" />
                  </ComboboxItemIndicator>
                </span>
              </slot>
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -29,10 +29,10 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'custom'>, Pi
  select?(e: Event): void
 }

-type DropdownVariants = VariantProps<typeof dropdownMenu>
+type DropdownMenuVariants = VariantProps<typeof dropdownMenu>

 export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>, Pick<DropdownMenuTriggerProps, 'disabled'> {
-  size?: DropdownVariants['size']
+  size?: DropdownMenuVariants['size']
  items?: T[] | T[][]
  /**
   * The content of the menu.
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -94,8 +94,8 @@ export type InputMenuEmits<T> = ComboboxRootEmits<T> & {
 type SlotProps<T> = (props: { item: T, index: number }) => any

 export type InputMenuSlots<T> = {
-  'leading'(props: { modelValue: T, open: boolean }): any
-  'trailing'(props: { modelValue: T, open: boolean }): any
+  'leading'(props: { modelValue: T, open: boolean, ui: any }): any
+  'trailing'(props: { modelValue: T, open: boolean, ui: any }): any
  'empty'(props: { searchTerm?: string }): any
  'item': SlotProps<T>
  'item-leading': SlotProps<T>
@@ -193,6 +193,7 @@ onMounted(() => {
 })

 function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
  const event = new Event('change', { target: { value } })
  emits('change', event)
  emitFormChange()
@@ -280,13 +281,13 @@ function onUpdateOpen(value: boolean) {
      />

      <span v-if="isLeading || !!slots.leading" :class="ui.leading()">
-        <slot name="leading" :model-value="(modelValue as T)" :open="open">
+        <slot name="leading" :model-value="(modelValue as T)" :open="open" :ui="ui">
          <UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" />
        </slot>
      </span>

      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="ui.trailing()">
-        <slot name="trailing" :model-value="(modelValue as T)" :open="open">
+        <slot name="trailing" :model-value="(modelValue as T)" :open="open" :ui="ui">
          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon()" />
        </slot>
      </ComboboxTrigger>
@@ -334,7 +335,7 @@ function onUpdateOpen(value: boolean) {
                    <slot name="item-trailing" :item="(item as T)" :index="index" />

                    <ComboboxItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingSelectedIcon()" />
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon()" />
                    </ComboboxItemIndicator>
                  </span>
                </slot>
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -95,6 +95,7 @@ const normalizedItems = computed(() => {
 })

 function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
  const event = new Event('change', { target: { value } })
  emits('change', event)
  emitFormChange()
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -72,8 +72,8 @@ export type SelectEmits = SelectRootEmits & {
 type SlotProps<T> = (props: { item: T, index: number }) => any

 export interface SelectSlots<T> {
-  'leading'(props: { modelValue: string, open: boolean }): any
-  'trailing'(props: { modelValue: string, open: boolean }): any
+  'leading'(props: { modelValue: string, open: boolean, ui: any }): any
+  'trailing'(props: { modelValue: string, open: boolean, ui: any }): any
  'item': SlotProps<T>
  'item-leading': SlotProps<T>
  'item-label': SlotProps<T>
@@ -118,6 +118,7 @@ const ui = computed(() => tv({ extend: select, slots: props.ui })({
 const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectItem[][] : [])

 function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
  const event = new Event('change', { target: { value } })
  emits('change', event)

@@ -148,7 +149,7 @@ function onUpdateOpen(value: boolean) {
  >
    <SelectTrigger :class="ui.base({ class: props.class })">
      <span v-if="isLeading || !!slots.leading" :class="ui.leading()">
-        <slot name="leading" :model-value="modelValue" :open="open">
+        <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
          <UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" />
        </slot>
      </span>
@@ -156,7 +157,7 @@ function onUpdateOpen(value: boolean) {
      <SelectValue :placeholder="placeholder ?? '&nbsp;'" :class="ui.value()" />

      <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing()">
-        <slot name="trailing" :model-value="modelValue" :open="open">
+        <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon()" />
        </slot>
      </span>
@@ -174,11 +175,11 @@ function onUpdateOpen(value: boolean) {
              <SelectItem v-else :class="ui.item()" :disabled="item.disabled" :value="typeof item === 'object' ? item.value : item">
                <slot name="item" :item="(item as T)" :index="index">
                  <slot name="item-leading" :item="(item as T)" :index="index">
-                    <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar()" />
+                    <UAvatar v-if="item.avatar" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar()" />
                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon()" />
                    <UChip
                      v-else-if="item.chip"
-                      size="md"
+                      :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
                      inset
                      standalone
                      v-bind="item.chip"
@@ -196,7 +197,7 @@ function onUpdateOpen(value: boolean) {
                    <slot name="item-trailing" :item="(item as T)" :index="index" />

                    <SelectItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingSelectedIcon()" />
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon()" />
                    </SelectItemIndicator>
                  </span>
                </slot>
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -81,9 +81,9 @@ export type SelectMenuEmits<T> = ComboboxRootEmits<T> & {
 type SlotProps<T> = (props: { item: T, index: number }) => any

 export type SelectMenuSlots<T> = {
-  'leading'(props: { modelValue: T, open: boolean }): any
+  'leading'(props: { modelValue: T, open: boolean, ui: any }): any
  'default'(props: { modelValue: T, open: boolean }): any
-  'trailing'(props: { modelValue: T, open: boolean }): any
+  'trailing'(props: { modelValue: T, open: boolean, ui: any }): any
  'empty'(props: { searchTerm?: string }): any
  'item': SlotProps<T>
  'item-leading': SlotProps<T>
@@ -119,12 +119,12 @@ const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color,
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))

-const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
+const selectSize = computed(() => buttonGroupSize.value || formGroupSize.value)

 const ui = computed(() => tv({ extend: selectMenu, slots: props.ui })({
  color: color.value,
  variant: props.variant,
-  size: inputSize?.value,
+  size: selectSize?.value,
  loading: props.loading,
  leading: isLeading.value || !!slots.leading,
  trailing: isTrailing.value || !!slots.trailing,
@@ -166,6 +166,7 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
 const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectMenuItem[][] : [])

 function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
  const event = new Event('change', { target: { value } })
  emits('change', event)
  emitFormChange()
@@ -201,7 +202,7 @@ function onUpdateOpen(value: boolean) {
    <ComboboxAnchor as-child>
      <ComboboxTrigger :class="ui.base({ class: props.class })" tabindex="0">
        <span v-if="isLeading || !!slots.leading" :class="ui.leading()">
-          <slot name="leading" :model-value="(modelValue as T)" :open="open">
+          <slot name="leading" :model-value="(modelValue as T)" :open="open" :ui="ui">
            <UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" />
          </slot>
        </span>
@@ -216,7 +217,7 @@ function onUpdateOpen(value: boolean) {
        </slot>

        <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing()">
-          <slot name="trailing" :model-value="(modelValue as T)" :open="open">
+          <slot name="trailing" :model-value="(modelValue as T)" :open="open" :ui="ui">
            <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon()" />
          </slot>
        </span>
@@ -245,11 +246,11 @@ function onUpdateOpen(value: boolean) {
              <ComboboxItem v-else :class="ui.item()" :disabled="item.disabled" :value="item">
                <slot name="item" :item="(item as T)" :index="index">
                  <slot name="item-leading" :item="(item as T)" :index="index">
-                    <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar()" />
+                    <UAvatar v-if="item.avatar" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar()" />
                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon()" />
                    <UChip
                      v-else-if="item.chip"
-                      size="md"
+                      :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
                      inset
                      standalone
                      v-bind="item.chip"
@@ -267,7 +268,7 @@ function onUpdateOpen(value: boolean) {
                    <slot name="item-trailing" :item="(item as T)" :index="index" />

                    <ComboboxItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingSelectedIcon()" />
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon()" />
                    </ComboboxItemIndicator>
                  </span>
                </slot>
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -84,6 +84,7 @@ const ui = computed(() => tv({ extend: slider, slots: props.ui })({
 }))

 function onChange(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
  const event = new Event('change', { target: { value } })
  emits('change', event)
  emitFormChange()
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -76,6 +76,7 @@ const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
 }))

 function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
  const event = new Event('change', { target: { value } })
  emits('change', event)
  emitFormChange()
--- a/src/theme/command-palette.ts
+++ b/src/theme/command-palette.ts
@@ -15,7 +15,7 @@ export default (options: Required<ModuleOptions>) => ({
    itemLeadingAvatar: 'shrink-0',
    itemLeadingChip: 'shrink-0 mx-1.5',
    itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
-    itemTrailingSelectedIcon: 'shrink-0 size-5',
+    itemTrailingIcon: 'shrink-0 size-5',
    itemTrailingHighlightedIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 hidden group-data-highlighted:inline-flex',
    itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
    itemLabel: 'truncate space-x-1',
--- a/src/theme/context-menu.ts
+++ b/src/theme/context-menu.ts
@@ -30,8 +30,8 @@ export default (options: Required<ModuleOptions>) => ({
    },
    size: {
      xs: {
-        label: 'gap-1 p-1 text-xs',
-        item: 'gap-1 p-1 text-xs',
+        label: 'p-1 text-xs gap-1',
+        item: 'p-1 text-xs gap-1',
        itemLeadingIcon: 'size-4',
        itemLeadingAvatarSize: '3xs',
        itemTrailingIcon: 'size-4',
@@ -39,8 +39,8 @@ export default (options: Required<ModuleOptions>) => ({
        itemTrailingKbdsSize: 'sm'
      },
      sm: {
-        label: 'gap-1.5 p-1.5 text-xs',
-        item: 'gap-1.5 p-1.5 text-xs',
+        label: 'p-1.5 text-xs gap-1.5',
+        item: 'p-1.5 text-xs gap-1.5',
        itemLeadingIcon: 'size-4',
        itemLeadingAvatarSize: '3xs',
        itemTrailingIcon: 'size-4',
@@ -48,8 +48,8 @@ export default (options: Required<ModuleOptions>) => ({
        itemTrailingKbdsSize: 'sm'
      },
      md: {
-        label: 'gap-1.5 p-1.5 text-sm',
-        item: 'gap-1.5 p-1.5 text-sm',
+        label: 'p-1.5 text-sm gap-1.5',
+        item: 'p-1.5 text-sm gap-1.5',
        itemLeadingIcon: 'size-5',
        itemLeadingAvatarSize: '2xs',
        itemTrailingIcon: 'size-5',
@@ -57,8 +57,8 @@ export default (options: Required<ModuleOptions>) => ({
        itemTrailingKbdsSize: 'md'
      },
      lg: {
-        label: 'gap-2 p-2 text-sm',
-        item: 'gap-2 p-2 text-sm',
+        label: 'p-2 text-sm gap-2',
+        item: 'p-2 text-sm gap-2',
        itemLeadingIcon: 'size-5',
        itemLeadingAvatarSize: '2xs',
        itemTrailingIcon: 'size-5',
@@ -66,8 +66,8 @@ export default (options: Required<ModuleOptions>) => ({
        itemTrailingKbdsSize: 'md'
      },
      xl: {
-        label: 'gap-2 p-2 text-base',
-        item: 'gap-2 p-2 text-base',
+        label: 'p-2 text-base gap-2',
+        item: 'p-2 text-base gap-2',
        itemLeadingIcon: 'size-6',
        itemLeadingAvatarSize: 'xs',
        itemTrailingIcon: 'size-6',
--- a/src/theme/dropdown-menu.ts
+++ b/src/theme/dropdown-menu.ts
@@ -31,8 +31,8 @@ export default (options: Required<ModuleOptions>) => ({
    },
    size: {
      xs: {
-        label: 'gap-1 p-1 text-xs',
-        item: 'gap-1 p-1 text-xs',
+        label: 'p-1 text-xs gap-1',
+        item: 'p-1 text-xs gap-1',
        itemLeadingIcon: 'size-4',
        itemLeadingAvatarSize: '3xs',
        itemTrailingIcon: 'size-4',
@@ -40,8 +40,8 @@ export default (options: Required<ModuleOptions>) => ({
        itemTrailingKbdsSize: 'sm'
      },
      sm: {
-        label: 'gap-1.5 p-1.5 text-xs',
-        item: 'gap-1.5 p-1.5 text-xs',
+        label: 'p-1.5 text-xs gap-1.5',
+        item: 'p-1.5 text-xs gap-1.5',
        itemLeadingIcon: 'size-4',
        itemLeadingAvatarSize: '3xs',
        itemTrailingIcon: 'size-4',
@@ -49,8 +49,8 @@ export default (options: Required<ModuleOptions>) => ({
        itemTrailingKbdsSize: 'sm'
      },
      md: {
-        label: 'gap-1.5 p-1.5 text-sm',
-        item: 'gap-1.5 p-1.5 text-sm',
+        label: 'p-1.5 text-sm gap-1.5',
+        item: 'p-1.5 text-sm gap-1.5',
        itemLeadingIcon: 'size-5',
        itemLeadingAvatarSize: '2xs',
        itemTrailingIcon: 'size-5',
--- a/src/theme/input-menu.ts
+++ b/src/theme/input-menu.ts
@@ -17,7 +17,7 @@ export default (options: Required<ModuleOptions>) => {
      itemLeadingAvatar: 'shrink-0',
      itemLeadingChip: 'shrink-0 mx-1.5',
      itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
-      itemTrailingSelectedIcon: 'shrink-0 size-5',
+      itemTrailingIcon: 'shrink-0 size-5',
      itemLabel: 'truncate',
      tagsItem: 'px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75',
      tagsItemText: 'truncate',
--- a/src/theme/select.ts
+++ b/src/theme/select.ts
@@ -11,15 +11,64 @@ export default (options: Required<ModuleOptions>) => {
      viewport: 'divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1',
      group: 'p-1 isolate',
      empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
-      label: 'p-1.5 text-xs font-semibold text-gray-900 dark:text-white',
+      label: 'font-semibold text-gray-900 dark:text-white',
      separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
-      item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
-      itemLeadingIcon: ['shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.transitions && 'transition-colors'],
+      item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
+      itemLeadingIcon: ['shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.transitions && 'transition-colors'],
      itemLeadingAvatar: 'shrink-0',
+      itemLeadingAvatarSize: '',
      itemLeadingChip: 'shrink-0 mx-1.5',
+      itemLeadingChipSize: '',
      itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
-      itemTrailingSelectedIcon: 'shrink-0 size-5',
+      itemTrailingIcon: 'shrink-0',
      itemLabel: 'truncate'
+    },
+    variants: {
+      size: {
+        xs: {
+          label: 'p-1 text-[10px]/3 gap-1',
+          item: 'p-1 text-xs gap-1',
+          itemLeadingIcon: 'size-4',
+          itemLeadingAvatarSize: '3xs',
+          itemLeadingChipSize: 'sm',
+          itemTrailingIcon: 'size-4'
+        },
+        sm: {
+          label: 'p-1.5 text-[10px]/3 gap-1.5',
+          item: 'p-1.5 text-xs gap-1.5',
+          itemLeadingIcon: 'size-4',
+          itemLeadingAvatarSize: '3xs',
+          itemLeadingChipSize: 'sm',
+          itemTrailingIcon: 'size-4'
+        },
+        md: {
+          label: 'p-1.5 text-xs gap-1.5',
+          item: 'p-1.5 text-sm gap-1.5',
+          itemLeadingIcon: 'size-5',
+          itemLeadingAvatarSize: '2xs',
+          itemLeadingChipSize: 'md',
+          itemTrailingIcon: 'size-5'
+        },
+        lg: {
+          label: 'p-2 text-xs gap-2',
+          item: 'p-2 text-sm gap-2',
+          itemLeadingIcon: 'size-5',
+          itemLeadingAvatarSize: '2xs',
+          itemLeadingChipSize: 'md',
+          itemTrailingIcon: 'size-5'
+        },
+        xl: {
+          label: 'p-2 text-sm gap-2',
+          item: 'p-2 text-base gap-2',
+          itemLeadingIcon: 'size-6',
+          itemLeadingAvatarSize: 'xs',
+          itemLeadingChipSize: 'lg',
+          itemTrailingIcon: 'size-6'
+        }
+      }
+    },
+    defaultVariants: {
+      size: 'md'
    }
  }, {
    slots: {