@dnax/ui 0.0.33 → 0.0.34

package/components/QBtnActions.vue

@@ -3,6 +3,8 @@
 // piloté par données : plus besoin de compose un QMenu/QList séparé).
 // <q-btn-actions label="Actions" :actions="acts" @select-action="onSelect" />
 // Chaque action : { label, value?, icon?, color?, description?, onClick? }.
+// Le panneau est téléporté dans <body> en position fixed : il survit aux
+// contextes d'empilement/overflow (cellules sticky de table, scroll containers).
 
 export interface BtnAction {
   /** Libellé affiché dans le menu */
@@ -46,7 +48,7 @@ interface Props {
   noCaret?: boolean
   /** Icône de la flèche déroulante */
   dropdownIcon?: string
-  /** Alignement du menu sous le bouton */
+  /** Alignement du menu : bord gauche du bouton ("left") ou bord droit ("right") */
   align?: "left" | "right"
   /** Largeur minimale du menu (ex. "200px") */
   menuWidth?: string
@@ -96,6 +98,9 @@ const emit = defineEmits<{
 
 const open = ref(false)
 const rootEl = ref<HTMLElement | null>(null)
+const panelEl = ref<HTMLElement | null>(null)
+/** Position fixed du panneau (téléporté dans <body>) */
+const panelPos = ref({ top: 0, left: 0, transform: "" })
 
 const canOpen = computed(() => !props.disable && !props.loading && props.actions.length > 0)
 
@@ -114,28 +119,60 @@ const effectiveRadius = useRadius("QBtnActions", () => props.radius)
 const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
 
 const panelStyle = computed<Record<string, string>>(() => ({
+  top: `${panelPos.value.top}px`,
+  left: `${panelPos.value.left}px`,
+  transform: panelPos.value.transform,
   minWidth: props.menuWidth,
   ...(roundedStyle.value ?? {}),
 }))
 
+// ═════════ Positionnement (fixed, téléporté) ═════════
+const placePanel = () => {
+  const el = rootEl.value
+  if (!el || typeof document === "undefined") return
+  const rect = el.getBoundingClientRect()
+  if (props.align === "left") {
+    panelPos.value = { top: rect.bottom + 4, left: rect.left, transform: "none" }
+  }
+  else {
+    // bord droit du panneau aligné sur le bord droit du bouton
+    panelPos.value = { top: rect.bottom + 4, left: rect.right, transform: "translateX(-100%)" }
+  }
+}
+
+const enableTracking = () => {
+  window.addEventListener("resize", placePanel)
+  window.addEventListener("scroll", placePanel, true)
+}
+const disableTracking = () => {
+  window.removeEventListener("resize", placePanel)
+  window.removeEventListener("scroll", placePanel, true)
+}
+
 // ═════════ Ouverture / fermeture ═════════
 const toggle = () => (open.value ? close() : openMenu())
 
 const openMenu = async () => {
   if (!canOpen.value) return
+  placePanel()
   open.value = true
+  enableTracking()
   await nextTick()
-  ;(rootEl.value?.querySelector(".q-btn-actions__item:not(:disabled)") as HTMLElement | null)?.focus()
+  ;(panelEl.value?.querySelector(".q-btn-actions__item:not(:disabled)") as HTMLElement | null)?.focus()
 }
 
 const close = () => {
   if (!open.value) return
   open.value = false
+  disableTracking()
 }
 
-// Clic extérieur → ferme
+// Clic extérieur (bouton ET panneau téléporté) → ferme
 const onDocMousedown = (e: MouseEvent) => {
-  if (rootEl.value && !rootEl.value.contains(e.target as Node)) close()
+  if (!open.value) return
+  const target = e.target as Node
+  if (rootEl.value?.contains(target) || panelEl.value?.contains(target)) return
+  close()
 }
 
 // Clavier : flèches/Home/End dans le menu, Échap ferme (focus revient au trigger)
@@ -149,7 +186,7 @@ const onKeydown = (e: KeyboardEvent) => {
   }
   if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return
   const items = Array.from(
-    rootEl.value?.querySelectorAll(".q-btn-actions__item:not(:disabled)") ?? [],
+    panelEl.value?.querySelectorAll(".q-btn-actions__item:not(:disabled)") ?? [],
   ) as HTMLElement[]
   if (!items.length) return
   const current = items.indexOf(document.activeElement as HTMLElement)
@@ -181,16 +218,12 @@ onMounted(() => {
 })
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+  disableTracking()
 })
 </script>
 
 <template>
-  <div
-    ref="rootEl"
-    class="q-btn-actions"
-    :class="[`q-btn-actions--align-${align}`, dark && 'dark']"
-    @keydown="onKeydown"
-  >
+  <div ref="rootEl" class="q-btn-actions" :class="dark && 'dark'" @keydown="onKeydown">
     <QBtn
       class="q-btn-actions__trigger"
       :class="triggerClasses"
@@ -223,35 +256,39 @@ onBeforeUnmount(() => {
       />
     </QBtn>
 
-    <Transition name="q-popup">
-      <div
-        v-if="open"
-        class="q-btn-actions__panel"
-        role="menu"
-        :aria-label="label ?? 'Actions'"
-        :style="panelStyle"
-      >
-        <template v-for="(action, i) in actions" :key="i">
-          <div v-if="action.separator" class="q-btn-actions__separator" role="separator" />
-          <button
-            v-if="!isSeparatorOnly(action)"
-            type="button"
-            role="menuitem"
-            class="q-btn-actions__item"
-            :class="{ 'q-btn-actions__item--disabled': action.disable }"
-            :disabled="action.disable"
-            :style="itemStyle(action)"
-            @click="onSelect(action)"
-          >
-            <Icon :icon="action.icon" v-if="action.icon" class="q-btn-actions__item-icon" aria-hidden="true" />
-            <span class="q-btn-actions__item-text">
-              <span class="q-btn-actions__item-label">{{ action.label }}</span>
-              <span v-if="action.description" class="q-btn-actions__item-desc">{{ action.description }}</span>
-            </span>
-            <Icon :icon="action.iconRight" v-if="action.iconRight" class="q-btn-actions__item-icon" aria-hidden="true" />
-          </button>
-        </template>
-      </div>
-    </Transition>
+    <Teleport to="body">
+      <Transition name="q-popup">
+        <div
+          v-if="open"
+          ref="panelEl"
+          class="q-btn-actions__panel"
+          role="menu"
+          :aria-label="label ?? 'Actions'"
+          :style="panelStyle"
+          @keydown="onKeydown"
+        >
+          <template v-for="(action, i) in actions" :key="i">
+            <div v-if="action.separator" class="q-btn-actions__separator" role="separator" />
+            <button
+              v-if="!isSeparatorOnly(action)"
+              type="button"
+              role="menuitem"
+              class="q-btn-actions__item"
+              :class="{ 'q-btn-actions__item--disabled': action.disable }"
+              :disabled="action.disable"
+              :style="itemStyle(action)"
+              @click="onSelect(action)"
+            >
+              <Icon :icon="action.icon" v-if="action.icon" class="q-btn-actions__item-icon" aria-hidden="true" />
+              <span class="q-btn-actions__item-text">
+                <span class="q-btn-actions__item-label">{{ action.label }}</span>
+                <span v-if="action.description" class="q-btn-actions__item-desc">{{ action.description }}</span>
+              </span>
+              <Icon :icon="action.iconRight" v-if="action.iconRight" class="q-btn-actions__item-icon" aria-hidden="true" />
+            </button>
+          </template>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>

package/package.json

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

package/styles/main.css

@@ -2463,9 +2463,8 @@ html.dark body {
 }
 
 .q-btn-actions__panel {
-  position: absolute;
-  top: calc(100% + 4px);
-  z-index: 1200;
+  position: fixed;
+  z-index: 3000;
   padding: 4px;
   background-color: #fff;
   border: 1px solid rgb(0 0 0 / 0.12);
@@ -2473,14 +2472,6 @@ html.dark body {
   box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
 }
 
-.q-btn-actions--align-left .q-btn-actions__panel {
-  left: 0;
-}
-
-.q-btn-actions--align-right .q-btn-actions__panel {
-  right: 0;
-}
-
 .q-btn-actions__item {
   display: flex;
   align-items: center;
@@ -2541,11 +2532,20 @@ html.dark body {
 }
 
 .q-popup-enter-active {
-  animation: q-popup-in 0.12s ease;
+  animation: q-popup-fade-in 0.12s ease;
 }
 
 .q-popup-leave-active {
-  animation: q-popup-in 0.1s ease reverse;
+  animation: q-popup-fade-in 0.1s ease reverse;
+}
+
+@keyframes q-popup-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* ===== QImg ===== */