feat(SelectMenu): add clearable prop to clear the seleted value

docs/components/content/examples/SelectMenuExampleClearable.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+const selected2 = ref([people[0]])
+</script>
+
+<template>
+ single: <USelectMenu v-model="selected" :options="people" clearable />
+ multiple: <USelectMenu v-model="selected2" :options="people" clearable multiple />
+</template>

docs/components/content/examples/SelectMenuExampleClearableIcon.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+ <USelectMenu v-model="selected" :options="people" clearable clearable-icon="i-heroicons-archive-box-x-mark" />
+</template>

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

@@ -186,6 +186,30 @@ componentProps:
 ---
 ::
 
+## Clearable
+
+Use the `clearable` prop to open clear button, click the button clear the selected value.
+
+::component-example
+---
+component: 'select-menu-example-clearable'
+componentProps:
+ class: 'w-full lg:w-48'
+---
+::
+
+### ClearableIcon
+
+Use the `clearable-icon` prop to change the default clear icon. Defaults to `i-heroicons-x-mark-20-solid`.
+
+::component-example
+---
+component: 'select-menu-example-clearable-icon'
+componentProps:
+ class: 'w-full lg:w-48'
+---
+::
+
 ## Popper
 
 Use the `popper` prop to customize the popper instance.

src/runtime/components/forms/SelectMenu.vue

@@ -42,7 +42,7 @@
 
  <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
  <slot name="trailing" :disabled="disabled" :loading="loading">
- <UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+ <UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" @click="onTrailingClick" />
  </slot>
  </span>
  </button>
@@ -221,6 +221,14 @@ export default defineComponent({
  type: Boolean,
  default: false
  },
+ clearable: {
+ type: Boolean,
+ default: false
+ },
+ clearableIcon: {
+ type: String,
+ default: 'i-heroicons-x-mark-20-solid'
+ },
  leading: {
  type: Boolean,
  default: false
@@ -410,6 +418,9 @@ export default defineComponent({
  if (props.loading && !isLeading.value) {
  return props.loadingIcon
  }
+ if (props.clearable && (Array.isArray(props.modelValue) ? props.modelValue.length : props.modelValue)) {
+ return props.clearableIcon
+ }
 
  return props.trailingIcon || props.icon
  })
@@ -440,11 +451,16 @@ export default defineComponent({
  })
 
  const trailingIconClass = computed(() => {
+ let clearableClass = ''
+ if (props.clearable && (Array.isArray(props.modelValue) ? props.modelValue.length : props.modelValue)) {
+ clearableClass = 'hover:bg-gray-500 dark:hover:bg-gray-400 cursor-pointer pointer-events-auto'
+ }
  return twJoin(
  ui.value.icon.base,
  color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
  ui.value.icon.size[size.value],
- props.loading && !isLeading.value && ui.value.icon.loading
+ props.loading && !isLeading.value && ui.value.icon.loading,
+ clearableClass
  )
  })
 
@@ -515,6 +531,13 @@ export default defineComponent({
  query.value = event.target.value
  }
 
+ function onTrailingClick (event: any) {
+ if (props.clearable && (Array.isArray(props.modelValue) ? props.modelValue.length : props.modelValue)) {
+ event.stopPropagation()
+ emit('update:modelValue', Array.isArray(props.modelValue) ? [] : '')
+ }
+ }
+
  provideUseId(() => useId())
 
  return {
@@ -546,7 +569,8 @@ export default defineComponent({
  // eslint-disable-next-line vue/no-dupe-keys
  query,
  onUpdate,
- onQueryChange
+ onQueryChange,
+ onTrailingClick
  }
  }
 })