@dnax/ui 0.0.20 → 0.0.21

package/components/QAutocomplete.vue

@@ -280,6 +280,15 @@ const onClear = () => {
   emit("clear")
 }
 
+// Clear du champ de recherche du panneau (sheet/modal) : vide la recherche
+// sans effacer la sélection, garde le focus dans l'input
+const onSearchClear = () => {
+  query.value = ""
+  emit("update:inputValue", "")
+  activeIndex.value = 0
+  nextTick(() => panelInput.value?.focus())
+}
+
 const isSelected = (opt: any) => getValue(opt) === props.modelValue
 
 // À la perte de focus : si le texte saisi ne correspond exactement à aucune
@@ -502,6 +511,15 @@ watch(open, (v) => {
                 @input="onInput"
                 @keydown="onKeydown"
               />
+              <button
+                v-if="query !== ''"
+                type="button"
+                class="q-autocomplete__search-clear"
+                aria-label="Effacer la recherche"
+                @mousedown.prevent="onSearchClear"
+              >
+                <Icon :icon="icons.x" aria-hidden="true" />
+              </button>
             </div>
             <div
               ref="popupRef"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -3571,6 +3571,27 @@ html.dark body {
 .q-autocomplete__search-input::placeholder {
   color: rgb(0 0 0 / 0.45);
 }
+.q-autocomplete__search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 0.15);
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.q-autocomplete__search-clear:hover {
+  background: rgb(0 0 0 / 0.25);
+}
+.q-autocomplete__search-clear svg {
+  width: 12px;
+  height: 12px;
+}
 .q-autocomplete__sheet-list {
   overflow-y: auto;
   padding: 6px;