@dnax/ui 0.0.15 → 0.0.17

package/components/QAutocomplete.vue

@@ -47,6 +47,25 @@ interface Props {
   height?: string
   /** Titre du panneau (défaut : label → placeholder) */
   title?: string
+  /** Options spécifiques au mode sheet (width, height, title, style, class, searchPlaceholder) */
+  sheetOptions?: QAutocompleteModeOptions
+  /** Options spécifiques au mode modal */
+  modalOptions?: QAutocompleteModeOptions
+}
+
+export interface QAutocompleteModeOptions {
+  /** Largeur du panneau (remplace width) */
+  width?: string
+  /** Hauteur de la liste scrollable (remplace height) */
+  height?: string
+  /** Titre du panneau (remplace title) */
+  title?: string
+  /** Style appliqué au panneau */
+  style?: Record<string, string>
+  /** Classes ajoutées au panneau */
+  class?: string
+  /** Placeholder du champ de recherche du panneau */
+  searchPlaceholder?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -98,23 +117,42 @@ const activeIndex = ref(0)
 // — Mode panneau (modal / sheet) —
 const panelMode = computed(() => props.mode !== "inline")
 
+// Options du mode courant (sheet/modal) — surchargent les props directes
+const modeOptions = computed<QAutocompleteModeOptions | undefined>(() => {
+  if (props.mode === "sheet") return props.sheetOptions
+  if (props.mode === "modal") return props.modalOptions
+  return undefined
+})
+
+const panelWidth = computed(() => modeOptions.value?.width ?? props.width)
+const panelHeight = computed(() => modeOptions.value?.height ?? props.height)
+const panelSearchPlaceholder = computed(
+  () => modeOptions.value?.searchPlaceholder ?? props.placeholder ?? "Search…",
+)
+
 // « Retour » navigateur → ferme le panneau au lieu de naviguer
 const panelOpen = computed(() => panelMode.value && open.value)
 useOverlayBack(panelOpen, () => closePopup(), "QAutocomplete")
 
 const sheetStyle = computed<Record<string, string>>(() => {
   const style: Record<string, string> = {}
-  if (props.mode !== "inline" && props.width) style.width = props.width
+  if (props.mode !== "inline" && panelWidth.value) {
+    // width ET maxWidth : sinon le max-width CSS (640px) plafonne le panneau
+    style.width = panelWidth.value
+    style.maxWidth = panelWidth.value
+  }
   return style
 })
 
 const sheetListStyle = computed<Record<string, string>>(() => {
   const style: Record<string, string> = {}
-  if (props.height) style.height = props.height
+  if (panelHeight.value) style.height = panelHeight.value
   return style
 })
 
-const sheetTitle = computed(() => props.title ?? props.label ?? props.placeholder ?? "Select")
+const sheetTitle = computed(
+  () => modeOptions.value?.title ?? props.title ?? props.label ?? props.placeholder ?? "Select",
+)
 
 // — Valeurs des options —
 const getValue = (opt: any): any =>
@@ -322,6 +360,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">
@@ -378,8 +422,8 @@ watch(open, (v) => {
           <div
             ref="sheetRef"
             class="q-autocomplete__sheet"
-            :class="`q-autocomplete__sheet--${mode}`"
-            :style="sheetStyle"
+            :class="[`q-autocomplete__sheet--${mode}`, modeOptions?.class]"
+            :style="[sheetStyle, modeOptions?.style]"
             role="dialog"
             aria-modal="true"
             :aria-label="sheetTitle"
@@ -401,7 +445,7 @@ watch(open, (v) => {
                 ref="panelInput"
                 class="q-autocomplete__search-input"
                 :value="query"
-                :placeholder="placeholder ?? 'Search…'"
+                :placeholder="panelSearchPlaceholder"
                 role="combobox"
                 :aria-expanded="open ? 'true' : 'false'"
                 aria-autocomplete="list"

package/package.json

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

package/styles/main.css

@@ -3366,6 +3366,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);
@@ -3456,6 +3468,16 @@ html.dark body {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
+
+/* écran < md (768px, convention Tailwind/shadcn) : le sheet prend 100% de la
+   largeur par défaut — tant qu'aucun width n'est fourni (un width inline
+   via sheetOptions/modalOptions ou la prop width prime sur cette règle) */
+@media (max-width: 767px) {
+  .q-autocomplete__sheet--sheet {
+    width: 100%;
+    max-width: 100%;
+  }
+}
 .q-autocomplete__sheet-header {
   display: flex;
   align-items: center;