feat(InputMenu): handle multiple

Resolves #91
2026-01-21 23:40:39 +01:00 · 2024-05-14 12:37:51 +02:00
parent 27ffb8d8ab
commit fe3ab652b4
16 changed files with 324 additions and 238 deletions
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -27,7 +27,7 @@ export interface InputMenuItem extends Pick<ComboboxItemProps, 'disabled'> {

 type InputMenuVariants = VariantProps<typeof inputMenu>

-export interface InputMenuProps<T> extends Omit<ComboboxRootProps<T>, 'asChild' | 'dir' | 'filterFunction' | 'displayValue' | 'multiple'>, UseComponentIconsProps {
+export interface InputMenuProps<T> extends Omit<ComboboxRootProps<T>, 'asChild' | 'dir' | 'filterFunction' | 'displayValue'>, UseComponentIconsProps {
  id?: string
  type?: InputHTMLAttributes['type']
  /** The placeholder text when the input is empty. */
@@ -48,6 +48,12 @@ export interface InputMenuProps<T> extends Omit<ComboboxRootProps<T>, 'asChild'
   * @defaultValue `appConfig.ui.icons.check`
   */
  selectedIcon?: string
+  /**
+   * The icon displayed to delete a tag.
+   * Works only when `multiple` is `true`.
+   * @defaultValue `appConfig.ui.icons.close`
+   */
+  deleteIcon?: string
  content?: Omit<ComboboxContentProps, 'asChild' | 'forceMount'>
  arrow?: boolean | Omit<ComboboxArrowProps, 'asChild'>
  portal?: boolean
@@ -74,12 +80,14 @@ export type InputMenuSlots<T> = {
  'item-leading': SlotProps<T>
  'item-label': SlotProps<T>
  'item-trailing': SlotProps<T>
+  'tags-item-text': SlotProps<T>
+  'tags-item-delete': SlotProps<T>
 }
 </script>

 <script setup lang="ts" generic="T extends InputMenuItem | AcceptableValue">
 import { computed, ref, toRef, onMounted } from 'vue'
-import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig, useFormField, useButtonGroup, useComponentIcons } from '#imports'
@@ -100,7 +108,7 @@ const slots = defineSlots<InputMenuSlots<T>>()
 const searchTerm = defineModel<string>('searchTerm', { default: '' })

 const appConfig = useAppConfig()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
 const { emitFormBlur, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
@@ -115,6 +123,7 @@ const ui = computed(() => tv({ extend: inputMenu, slots: props.ui })({
  loading: props.loading,
  leading: isLeading.value || !!slots.leading,
  trailing: isTrailing.value || !!slots.trailing,
+  multiple: props.multiple,
  buttonGroup: orientation.value
 }))

@@ -174,11 +183,47 @@ onMounted(() => {
    :display-value="displayValue"
    :filter-function="filterFunction"
    :class="ui.root({ class: props.class })"
+    :as-child="!!multiple"
    @update:model-value="emitFormChange()"
    @keydown.enter="$event.preventDefault()"
  >
-    <ComboboxAnchor as-child>
+    <ComboboxAnchor :as-child="!multiple" :class="ui.base()">
+      <TagsInputRoot
+        v-if="multiple"
+        v-slot="{ modelValue: tags }: { modelValue: AcceptableValue[] }"
+        :model-value="(modelValue as string[])"
+        :disabled="disabled"
+        delimiter=""
+        as-child
+      >
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="(item as string)" :class="ui.tagsItem()">
+          <TagsInputItemText :class="ui.tagsItemText()">
+            <slot name="tags-item-text" :item="(item as T)" :index="index">
+              {{ typeof item === 'object' ? item.label : item }}
+            </slot>
+          </TagsInputItemText>
+
+          <TagsInputItemDelete :class="ui.tagsItemDelete()" :disabled="disabled">
+            <slot name="tags-item-delete" :item="(item as T)" :index="index">
+              <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.tagsItemDeleteIcon()" />
+            </slot>
+          </TagsInputItemDelete>
+        </TagsInputItem>
+
+        <ComboboxInput as-child>
+          <TagsInputInput
+            ref="inputRef"
+            v-bind="$attrs"
+            :placeholder="placeholder"
+            :required="required"
+            :class="ui.tagsInput()"
+            @keydown.enter.prevent
+          />
+        </ComboboxInput>
+      </TagsInputRoot>
+
      <ComboboxInput
+        v-else
        ref="inputRef"
        v-bind="$attrs"
        :type="type"
--- a/src/runtime/composables/useComponentIcons.ts
+++ b/src/runtime/composables/useComponentIcons.ts
@@ -26,7 +26,7 @@ export function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentI

  const props = computed(() => toValue(componentProps))

-  const isLeading = computed(() => (props.value.icon && props.value.leading) || (props.value.icon && !props.value.trailing) || (props.value.loading && !props.value.trailing && !props.value.trailingIcon) || !!props.value.leadingIcon)
+  const isLeading = computed(() => (props.value.icon && props.value.leading) || (props.value.icon && !props.value.trailing) || (props.value.loading && !props.value.trailing) || !!props.value.leadingIcon)
  const isTrailing = computed(() => (props.value.icon && props.value.trailing) || (props.value.loading && props.value.trailing) || !!props.value.trailingIcon)

  const leadingIconName = computed(() => {
--- a/src/theme/input-menu.ts
+++ b/src/theme/input-menu.ts
@@ -17,11 +17,50 @@ export default (config: { colors: string[] }) => {
      itemLeadingChip: 'shrink-0 mx-1.5',
      itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
      itemTrailingSelectedIcon: 'shrink-0 size-5',
-      itemLabel: 'truncate'
+      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',
+      tagsItemDelete: 'inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none transition-colors',
+      tagsItemDeleteIcon: '',
+      tagsInput: 'border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
    }
  }, {
    slots: {
+      base: 'rounded-md',
      trailing: 'absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75'
+    },
+    variants: {
+      multiple: {
+        true: {
+          root: 'flex-wrap',
+          base: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary-500 dark:has-[:focus-visible]:ring-primary-400'
+        },
+        false: {
+          base: 'w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
+        }
+      },
+      size: {
+        xs: {
+          tagsItem: 'text-[10px]/3',
+          tagsItemDeleteIcon: 'size-3'
+        },
+        sm: {
+          tagsItem: 'text-[10px]/3',
+          tagsItemDeleteIcon: 'size-3'
+        },
+        md: {
+          tagsItem: 'text-xs',
+          tagsItemDeleteIcon: 'size-3.5'
+        },
+        lg: {
+          tagsItem: 'text-xs',
+          tagsItemDeleteIcon: 'size-3.5'
+        },
+        xl: {
+          tagsItem: 'text-sm',
+          tagsItemDeleteIcon: 'size-4'
+        }
+      }
    }
  }, input(config))
 }
--- a/src/theme/input.ts
+++ b/src/theme/input.ts
@@ -15,35 +15,35 @@ export default (config: { colors: string[] }) => {
      ...buttonGroupVariantWithRoot,
      size: {
        xs: {
-          base: 'px-2 py-1 text-xs',
+          base: 'px-2 py-1 text-xs gap-1',
          leading: 'pl-2',
          trailing: 'pr-2',
          leadingIcon: 'size-4',
          trailingIcon: 'size-4'
        },
        sm: {
-          base: 'px-2.5 py-1.5 text-xs',
+          base: 'px-2.5 py-1.5 text-xs gap-1.5',
          leading: 'pl-2.5',
          trailing: 'pr-2.5',
          leadingIcon: 'size-4',
          trailingIcon: 'size-4'
        },
        md: {
-          base: 'px-2.5 py-1.5 text-sm',
+          base: 'px-2.5 py-1.5 text-sm gap-1.5',
          leading: 'pl-2.5',
          trailing: 'pr-2.5',
          leadingIcon: 'size-5',
          trailingIcon: 'size-5'
        },
        lg: {
-          base: 'px-3 py-2 text-sm',
+          base: 'px-3 py-2 text-sm gap-2',
          leading: 'pl-3',
          trailing: 'pr-3',
          leadingIcon: 'size-5',
          trailingIcon: 'size-5'
        },
        xl: {
-          base: 'px-3 py-2 text-base',
+          base: 'px-3 py-2 text-base gap-2',
          leading: 'pl-3',
          trailing: 'pr-3',
          leadingIcon: 'size-6',