fix: bugs

src/components/form/SelectField.vue

@@ -15,6 +15,15 @@
       @click="toggle"
     >
       <span class="select-field__value">{{ selectedLabel }}</span>
+      <button
+        v-if="showClear"
+        type="button"
+        class="select-field__clear"
+        aria-label="پاک کردن"
+        @click.stop="clearSelection"
+      >
+        <SvgIcon name="close" :size="14" color="currentColor" />
+      </button>
       <SvgIcon
         name="caret-down"
         :size="20"
@@ -90,6 +99,7 @@ const props = defineProps({
   optionLabel: { type: String, default: 'name' },
   optionValue: { type: String, default: 'id' },
   multiple: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
   disabled: { type: Boolean, default: false },
   error: { type: String, default: '' },
   vibration: { type: Boolean, default: false },
@@ -130,6 +140,20 @@ const selectedLabel = computed(() => {
   return found ? found[props.optionLabel] : props.placeholder
 })
 
+const hasValue = computed(() =>
+  props.multiple
+    ? Array.isArray(props.modelValue) && props.modelValue.length > 0
+    : props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== ''
+)
+
+const showClear = computed(() => props.clearable && !props.disabled && hasValue.value)
+
+const clearSelection = () => {
+  const cleared = props.multiple ? [] : null
+  emit('update:modelValue', cleared)
+  emit('change', cleared)
+}
+
 const select = (opt) => {
   if (props.disabled) return
   const value = opt[props.optionValue]
@@ -275,6 +299,24 @@ onBeforeUnmount(() => unmountFloating())
     }
   }
 
+  &__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-inline-end: 0.375rem;
+    border: none;
+    background: transparent;
+    color: var(--color-thd-gray);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color 0.15s;
+
+    &:hover {
+      color: var(--color-error);
+    }
+  }
+
   &__error {
     margin-top: 0.25rem;
     font-family: var(--font-family-fa);