@dnax/ui 0.0.16 → 0.0.18

package/components/QAutocomplete.vue

@@ -47,6 +47,8 @@ interface Props {
   height?: string
   /** Titre du panneau (défaut : label → placeholder) */
   title?: string
+  /** Icône Iconify à gauche (remplacée par le slot #prepend s'il est fourni) */
+  iconLeft?: string
   /** Options spécifiques au mode sheet (width, height, title, style, class, searchPlaceholder) */
   sheetOptions?: QAutocompleteModeOptions
   /** Options spécifiques au mode modal */
@@ -97,6 +99,7 @@ const emit = defineEmits<{
 
 defineSlots<{
   default?: (props: Record<string, any>) => any // option : { option, index, selected, active }
+  prepend?: () => any
   noOptions?: () => any
   error?: () => any
   hint?: () => any
@@ -335,6 +338,9 @@ watch(open, (v) => {
   <div ref="rootEl" class="q-autocomplete" :class="fieldClasses" :style="roundedStyle" v-bind="$attrs">
     <label v-if="label" class="q-field__label-stack">{{ label }}</label>
     <div class="q-field__control">
+      <slot name="prepend">
+        <Icon v-if="iconLeft" :icon="iconLeft" class="q-field__icon" aria-hidden="true" />
+      </slot>
       <input
         class="q-field__native"
         :value="inputDisplay"
@@ -360,6 +366,12 @@ watch(open, (v) => {
       >
         <Icon :icon="icons.x" aria-hidden="true" />
       </button>
+      <Icon
+        :icon="icons.chevronDown"
+        class="q-autocomplete__arrow"
+        :class="{ 'q-autocomplete__arrow--rotated': open }"
+        aria-hidden="true"
+      />
     </div>
     <div v-if="error" class="q-field__bottom">
       <div class="q-field__error">

package/components/QSelect.vue

@@ -81,6 +81,8 @@ interface Props {
   noOptionsLabel?: string
   /** Icône Iconify de la flèche (défaut : lucide:chevron-down) */
   dropdownIcon?: string
+  /** Icône Iconify à gauche (remplacée par le slot #prepend s'il est fourni) */
+  iconLeft?: string
   /** Recherche floue fuse.js : true (défauts) ou { keys, threshold } — champ de recherche séparé affiché avant la liste */
   useSearch?: boolean | UseSearchOptions
   /** Placeholder du champ de recherche (useSearch) */
@@ -519,7 +521,9 @@ const sheetClass = computed(() => [`q-select__sheet--${props.mode}`, modeOptions
   <div ref="rootEl" class="q-select" :class="fieldClasses" :style="fieldRadiusStyle">
     <label v-if="label" class="q-field__label-stack">{{ label }}</label>
     <div class="q-field__control" @click="onControlClick">
-      <slot name="prepend" />
+      <slot name="prepend">
+        <Icon v-if="iconLeft" :icon="iconLeft" class="q-field__icon" aria-hidden="true" />
+      </slot>
 
       <!-- Chips : uniquement en multiple + use-chips (comme Quasar — un select
            simple avec use-chips affiche juste le texte du display) -->

package/package.json

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

package/styles/main.css

@@ -1951,6 +1951,9 @@ html.dark body {
   display: inline-flex;
   flex-shrink: 0;
   color: rgb(0 0 0 / 0.45);
+  /* petit espace dédié entre l'icône gauche et la valeur (gap 6px du
+     control + 2px = 8px) — évite l'icône collée au texte */
+  margin-right: 2px;
 }
 
 .q-field__clear {
@@ -3366,6 +3369,18 @@ html.dark body {
   flex-shrink: 0;
 }
 
+.q-autocomplete__arrow {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: rgb(0 0 0 / 0.6);
+  transition: transform 0.2s ease;
+}
+
+.q-autocomplete__arrow--rotated {
+  transform: rotate(180deg);
+}
+
 .q-autocomplete__popup {
   position: absolute;
   top: calc(100% + 4px);