@dnax/ui 0.0.17 → 0.0.19

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"

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.17",
+  "version": "0.0.19",
   "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);
+  /* espace dédié entre l'icône gauche et la valeur (gap 6px du control + 6px
+     = 12px) — l'icône ne doit jamais être collée au texte */
+  margin-right: 6px;
 }
 
 .q-field__clear {