From be840460d891bb6e446a8a319f36e5766435e475 Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Fri, 25 Apr 2025 23:37:03 +0800
Subject: [PATCH] feat: vbenSelect support prop `allowClear` (#6043)

---
 .../src/components/select/select.vue          | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue b/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
index 66525c02..24b8ea2a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { CircleX } from '@vben-core/icons';
+
 import {
   Select,
   SelectContent,
@@ -8,17 +10,33 @@ import {
 } from '../../ui';
 
 interface Props {
+  allowClear?: boolean;
   class?: any;
   options?: Array<{ label: string; value: string }>;
   placeholder?: string;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  allowClear: false,
+});
+
+const modelValue = defineModel<string>();
+
+function handleClear() {
+  modelValue.value = undefined;
+}
 </script>
 <template>
-  <Select>
-    <SelectTrigger :class="props.class">
-      <SelectValue :placeholder="placeholder" />
+  <Select v-model="modelValue">
+    <SelectTrigger :class="props.class" class="flex w-full items-center">
+      <SelectValue class="flex-auto text-left" :placeholder="placeholder" />
+      <CircleX
+        @pointerdown.stop
+        @click.stop.prevent="handleClear"
+        v-if="allowClear && modelValue"
+        data-clear-button
+        class="mr-1 size-4 cursor-pointer opacity-50 hover:opacity-100"
+      />
     </SelectTrigger>
     <SelectContent>
       <template v-for="item in options" :key="item.value">