feat(SelectMenu): add clearable icon to reset modelValue

docs/content/3.components/select-menu.md

@@ -615,6 +615,33 @@ props:
 ---
 ::
 
+### Clearable
+
+Use the `clearable` prop to add a clear icon and enable `modelValue` clearing.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+  - class
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  clearable: true
+  trailing: false
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+  class: 'w-48'
+---
+::
+
 ## Examples
 
 ### With items type

playground/app/pages/components/select-menu.vue

@@ -12,6 +12,7 @@ const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
 
 const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Vegetables', type: 'label' }, ...vegetables]]
 const selectedItems = ref([fruits[0]!, vegetables[0]!])
+const selectedItem = ref(fruits[0]!)
 
 const statuses = [{
   label: 'Backlog',
@@ -89,6 +90,8 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
       <USelectMenu :items="items" placeholder="Disabled" disabled />
       <USelectMenu :items="items" placeholder="Required" required />
       <USelectMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
+      <USelectMenu v-model="selectedItem" :items="items" clearable />
+      <USelectMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple clearable />
       <USelectMenu :items="items" loading placeholder="Search..." />
     </div>
     <div class="flex items-center gap-4">
@@ -98,6 +101,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
         :items="items"
         placeholder="Search..."
         :size="size"
+        clearable
         class="w-48"
       />
     </div>

src/runtime/components/SelectMenu.vue

@@ -56,6 +56,11 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
    */
   size?: SelectMenuVariants['size']
   required?: boolean
+  /**
+   * Determines if user can clear the `modelValue` with icon click
+   * @defaultValue false
+   */
+  clearable?: boolean
   /**
    * The icon displayed to open the menu.
    * @defaultValue appConfig.ui.icons.chevronDown
@@ -68,6 +73,11 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
    * @IconifyIcon
    */
   selectedIcon?: string
+  /**
+   * The icon displayed to clear the value.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  clearIcon?: string
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
@@ -166,7 +176,8 @@ const props = withDefaults(defineProps<SelectMenuProps<T, I, V, M>>(), {
   portal: true,
   searchInput: true,
   labelKey: 'label' as never,
-  resetSearchTermOnBlur: true
+  resetSearchTermOnBlur: true,
+  clearable: false
 })
 const emits = defineEmits<SelectMenuEmits<T, V, M>>()
 const slots = defineSlots<SelectMenuSlots<T, M>>()
@@ -214,6 +225,14 @@ function displayValue(value: T | T[]): string {
   return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
+const isEmpty = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.length === 0
+  }
+
+  return !(props.modelValue)
+})
+
 const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectMenuItem[][] : [])
 // eslint-disable-next-line vue/no-dupe-keys
 const items = computed(() => groups.value.flatMap(group => group) as T[])
@@ -290,6 +309,11 @@ function onUpdateOpen(value: boolean) {
     clearTimeout(timeoutId)
   }
 }
+
+function onClear() {
+  const newValue = props.multiple ? [] : null
+  emits('update:modelValue', newValue as SelectModelValue<T, V, M>)
+}
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
@@ -342,6 +366,7 @@ function onUpdateOpen(value: boolean) {
         </slot>
 
         <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+          <UIcon v-if="props.clearable && !isEmpty" :name="clearIcon || appConfig.ui.icons.close" :class="ui.clearIcon({ class: props.ui?.clearIcon })" @click.prevent.stop="onClear()" />
           <slot name="trailing" :model-value="(modelValue as M extends true ? T[] : T)" :open="open" :ui="ui">
             <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
           </slot>

src/theme/select-menu.ts

@@ -6,7 +6,8 @@ export default (options: Required<ModuleOptions>) => {
   return defu({
     slots: {
       input: 'border-b border-(--ui-border)',
-      focusScope: 'flex flex-col min-h-0'
+      focusScope: 'flex flex-col min-h-0',
+      clearIcon: 'shrink-0 text-[var(--ui-text-dimmed)]'
     }
   }, select(options))
 }

test/components/SelectMenu.spec.ts

@@ -81,11 +81,12 @@
     ['with item slot', { props, slots: { item: () => 'Item slot' } }],
     ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }],
     ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }],
-    ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }]
+    ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }],
+    ['with clearable', { props: { clearable: true } }]
     // ['with create-item-label slot', { props: { ...props, searchTerm: 'New value', createItem: true }, slots: { 'create-item-label': () => 'Create item slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SelectMenuProps<typeof items[number]>, slots?: Partial<SelectMenuSlots<typeof items[number], false>> }) => {
     const html = await ComponentRender(nameOrHtml, options, SelectMenu)
     expect(html).toMatchSnapshot()
   })
 
   describe('emits', () => {