@dnax/ui 0.0.14 → 0.0.16

package/components/QAutocomplete.vue

@@ -8,6 +8,7 @@ import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
 import { radiusStyle, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
+import { useOverlayBack } from "../lib/overlayBack"
 
 interface Props {
   /** Valeur sélectionnée */
@@ -38,6 +39,33 @@ interface Props {
   readonly?: boolean
   loading?: boolean
   noOptionsLabel?: string
+  /** Mode d'ouverture : inline (dropdown) | modal (centré) | sheet (bottom sheet) */
+  mode?: "inline" | "modal" | "sheet"
+  /** Largeur du panneau (modal/sheet) */
+  width?: string
+  /** Hauteur de la liste dans les modes panneau (modal/sheet) */
+  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>(), {
@@ -55,6 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
   readonly: false,
   loading: false,
   noOptionsLabel: "No options to display",
+  mode: "inline",
 })
 
 const emit = defineEmits<{
@@ -78,11 +107,53 @@ const hasFilter = computed(() => !!instance?.vnode.props?.onFilter)
 
 const rootEl = ref<HTMLElement | null>(null)
 const popupRef = ref<HTMLElement | null>(null)
+const sheetRef = ref<HTMLElement | null>(null)
+const panelInput = ref<HTMLInputElement | null>(null)
 const focused = ref(false)
 const open = ref(false)
 const query = ref(props.inputValue ?? "")
 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" && 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 (panelHeight.value) style.height = panelHeight.value
+  return style
+})
+
+const sheetTitle = computed(
+  () => modeOptions.value?.title ?? props.title ?? props.label ?? props.placeholder ?? "Select",
+)
+
 // — Valeurs des options —
 const getValue = (opt: any): any =>
   typeof props.optionValue === "function" ? props.optionValue(opt) : opt?.[props.optionValue]
@@ -136,6 +207,11 @@ const openPopup = () => {
   if (props.disable || props.readonly) return
   activeIndex.value = 0
   open.value = true
+  if (panelMode.value) nextTick(() => panelInput.value?.focus())
+}
+
+const closePopup = () => {
+  open.value = false
 }
 
 const onInput = (e: Event) => {
@@ -153,7 +229,7 @@ const onSelect = (opt: any) => {
   emit("update:modelValue", getValue(opt))
   emit("update:inputValue", label)
   query.value = label
-  open.value = false
+  closePopup()
 }
 
 const onClear = () => {
@@ -186,8 +262,12 @@ const onFocus = (e: FocusEvent) => {
 
 const onBlur = (e: FocusEvent) => {
   focused.value = false
-  open.value = false
-  commit()
+  // En mode panneau, la perte de focus du champ ne ferme pas (l'input du
+  // panneau prend le relais) ; en inline, perte de focus → fermeture + commit
+  if (!panelMode.value) {
+    open.value = false
+    commit()
+  }
   emit("blur", e)
 }
 
@@ -228,9 +308,12 @@ watch(activeIndex, async () => {
   el?.scrollIntoView({ block: "nearest" })
 })
 
-// Fermeture au clic extérieur
+// Fermeture au clic extérieur (inline) / clic hors panneau (modal/sheet)
 const onDocMousedown = (e: MouseEvent) => {
-  if (rootEl.value && !rootEl.value.contains(e.target as Node)) open.value = false
+  const target = e.target as Node
+  if (rootEl.value?.contains(target)) return
+  if (sheetRef.value?.contains(target)) return
+  open.value = false
 }
 
 onMounted(() => {
@@ -239,10 +322,17 @@ onMounted(() => {
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
 })
+
+// Verrou du scroll de la page derrière le panneau (modal/sheet)
+watch(open, (v) => {
+  if (typeof document !== "undefined" && panelMode.value) {
+    document.body.style.overflow = v ? "hidden" : ""
+  }
+})
 </script>
 
 <template>
-  <div ref="rootEl" class="q-autocomplete" :class="fieldClasses" :style="roundedStyle">
+  <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">
       <input
@@ -283,7 +373,7 @@ onBeforeUnmount(() => {
     </div>
 
     <div
-      v-if="open"
+      v-if="open && mode === 'inline'"
       ref="popupRef"
       class="q-autocomplete__popup"
       role="listbox"
@@ -312,5 +402,84 @@ onBeforeUnmount(() => {
         <slot name="noOptions">{{ noOptionsLabel }}</slot>
       </div>
     </div>
+
+    <!-- Mode modal / sheet : panneau téléporté (header + recherche + liste) -->
+    <Teleport to="body">
+      <Transition name="q-autocomplete-modal">
+        <div
+          v-if="open && mode !== 'inline'"
+          class="q-autocomplete__overlay"
+          :class="`q-autocomplete__overlay--${mode}`"
+          role="presentation"
+          @mousedown.self="closePopup"
+        >
+          <div
+            ref="sheetRef"
+            class="q-autocomplete__sheet"
+            :class="[`q-autocomplete__sheet--${mode}`, modeOptions?.class]"
+            :style="[sheetStyle, modeOptions?.style]"
+            role="dialog"
+            aria-modal="true"
+            :aria-label="sheetTitle"
+          >
+            <div class="q-autocomplete__sheet-header">
+              <span class="q-autocomplete__sheet-title">{{ sheetTitle }}</span>
+              <button
+                type="button"
+                class="q-autocomplete__sheet-close"
+                :aria-label="`Fermer ${sheetTitle}`"
+                @click="closePopup"
+              >
+                <Icon :icon="icons.x" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="q-autocomplete__search">
+              <Icon :icon="icons.search" class="q-autocomplete__search-icon" aria-hidden="true" />
+              <input
+                ref="panelInput"
+                class="q-autocomplete__search-input"
+                :value="query"
+                :placeholder="panelSearchPlaceholder"
+                role="combobox"
+                :aria-expanded="open ? 'true' : 'false'"
+                aria-autocomplete="list"
+                @input="onInput"
+                @keydown="onKeydown"
+              />
+            </div>
+            <div
+              ref="popupRef"
+              class="q-autocomplete__sheet-list"
+              :style="sheetListStyle"
+              role="listbox"
+              @mousedown.prevent
+            >
+              <template v-if="filtered.length">
+                <div
+                  v-for="(opt, i) in filtered"
+                  :key="String(getValue(opt))"
+                  role="option"
+                  :aria-selected="i === activeIndex ? 'true' : 'false'"
+                  class="q-autocomplete__item"
+                  :class="{
+                    'q-autocomplete__item--active': i === activeIndex,
+                    'q-autocomplete__item--selected': isSelected(opt),
+                  }"
+                  @mouseenter="activeIndex = i"
+                  @mousedown.prevent="onSelect(opt)"
+                >
+                  <slot :option="opt" :index="i" :selected="isSelected(opt)" :active="i === activeIndex">
+                    <span class="q-autocomplete__label">{{ getLabel(opt) }}</span>
+                  </slot>
+                </div>
+              </template>
+              <div v-else class="q-autocomplete__empty">
+                <slot name="noOptions">{{ noOptionsLabel }}</slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>

package/package.json

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

package/styles/main.css

@@ -3420,6 +3420,140 @@ html.dark body {
   }
 }
 
+/* — modes modal / sheet : panneau téléporté — */
+.q-autocomplete__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(0 0 0 / 0.5);
+}
+.q-autocomplete__overlay--sheet {
+  align-items: flex-end;
+}
+.q-autocomplete__sheet {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 640px;
+  max-height: 70vh;
+  overflow: hidden;
+  background-color: #fff;
+  color: inherit;
+  border-radius: var(--q-radius);
+  box-shadow: 0 12px 40px rgb(0 0 0 / 0.3);
+}
+.q-autocomplete__overlay--modal .q-autocomplete__sheet {
+  max-width: 480px;
+  max-height: 60vh;
+}
+.q-autocomplete__sheet--sheet {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 -4px 24px rgb(0 0 0 / 0.2);
+  padding-bottom: 0;
+  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;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid rgb(0 0 0 / 0.08);
+  font-weight: 600;
+  font-size: 15px;
+}
+.q-autocomplete__sheet-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.q-autocomplete__sheet-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.q-autocomplete__sheet-close:hover {
+  background-color: rgb(0 0 0 / 0.06);
+}
+.q-autocomplete__sheet-close svg {
+  width: 16px;
+  height: 16px;
+}
+.q-autocomplete__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 12px 6px;
+  padding: 0 10px;
+  border: 1px solid rgb(0 0 0 / 0.15);
+  border-radius: 6px;
+  background-color: rgb(0 0 0 / 0.03);
+}
+.q-autocomplete__search-icon {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+  color: rgb(0 0 0 / 0.5);
+}
+.q-autocomplete__search-input {
+  flex: 1;
+  min-width: 0;
+  height: 32px;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+}
+.q-autocomplete__search-input::placeholder {
+  color: rgb(0 0 0 / 0.45);
+}
+.q-autocomplete__sheet-list {
+  overflow-y: auto;
+  padding: 6px;
+}
+
+/* — transition du panneau (réutilise les keyframes q-sheet-pop-*) — */
+.q-autocomplete-modal-enter-active,
+.q-autocomplete-modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.q-autocomplete-modal-enter-from,
+.q-autocomplete-modal-leave-to {
+  opacity: 0;
+}
+.q-autocomplete-modal-enter-active .q-autocomplete__sheet {
+  animation: q-sheet-pop-in 0.25s ease;
+}
+.q-autocomplete-modal-leave-active .q-autocomplete__sheet {
+  animation: q-sheet-pop-out 0.2s ease forwards;
+}
+
 /* ===== QNavMenu ===== */
 .q-nav-menu {
   position: relative;