@dnax/ui 0.0.45 → 0.0.46

package/components/QSelect.vue

@@ -56,7 +56,7 @@ import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
-import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import { radiusStyle, radiusValue, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import { useOverlayBack } from "../lib/overlayBack"
 import { createSearcher } from "../lib/search"
@@ -184,6 +184,11 @@ defineSlots<{
   hint?: () => any
 }>()
 
+// Multi-racines (le champ + les <Teleport> du popup et du panneau) : Vue ne peut pas
+// hériter les attributs tout seul (avertissement « fragment or text or teleport root
+// nodes »). Ils sont posés explicitement sur le champ (racine principale).
+defineOptions({ inheritAttrs: false })
+
 const instance = getCurrentInstance()
 const hasFilter = computed(() => !!instance?.vnode.props?.onFilter)
 
@@ -223,9 +228,11 @@ const VIEWPORT_MARGIN = 8
 
 const popupDirection = ref<"down" | "up">("down")
 const popupMaxHeight = ref(POPUP_MAX_HEIGHT)
-/** Décalages en px par rapport à la RACINE (bloc conteneur du popup) — null avant mesure */
+/** Coordonnées **fenêtre** : le popup est téléporté dans <body> (`position: fixed`) — null avant mesure */
 const popupTop = ref<number | null>(null)
 const popupBottom = ref<number | null>(null)
+/** Rect du champ (coordonnées fenêtre) : ancre horizontale du popup */
+const popupAnchor = ref<{ left: number; right: number; width: number } | null>(null)
 
 /** Écart champ ↔ popup : `inline-options.offset` prioritaire sur la prop `offset` */
 const popupOffset = computed(() => modeOptions.value?.offset ?? props.offset)
@@ -265,17 +272,32 @@ const positionPopup = () => {
 
   popupDirection.value = down ? "down" : "up"
   popupMaxHeight.value = Math.max(0, Math.min(POPUP_MAX_HEIGHT, available - gap))
-  popupTop.value = Math.round(anchor.bottom - rect.top + gap)
-  popupBottom.value = Math.round(rect.bottom - anchor.top + gap)
+  // Tout en coordonnées fenêtre : le popup est `fixed` dans <body>, il n'est donc
+  // plus positionné par rapport à la racine du composant. Horizontalement on garde la
+  // boîte du CHAMP (c'était `left: 0; right: 0` sur la racine), verticalement l'ancre.
+  popupAnchor.value = { left: rect.left, right: rect.right, width: rect.width }
+  popupTop.value = Math.round(anchor.bottom + gap)
+  popupBottom.value = Math.round(window.innerHeight - anchor.top + gap)
 }
 
 const popupStyle = computed<Record<string, string>>(() => {
   const up = popupDirection.value === "up"
-  const fallback = `calc(100% + ${popupOffset.value}px)`
+  const anchor = popupAnchor.value
   const style: Record<string, string> = {
-    top: up ? "auto" : popupTop.value === null ? fallback : `${popupTop.value}px`,
-    bottom: up ? (popupBottom.value === null ? fallback : `${popupBottom.value}px`) : "auto",
     maxHeight: `${Math.round(popupMaxHeight.value)}px`,
+    // Arrondi : l'échelle de radius du composant (composantProps / prop), sinon la
+    // variable globale. Le popup est TÉLÉPORTÉ dans <body> : il n'hérite plus de
+    // `--q-radius` posé sur le champ, d'où la valeur matérialisée ici.
+    borderRadius: radiusValue(effectiveFieldRadius.value) ?? "var(--q-radius, 4px)",
+  }
+
+  // Vertical : sous le champ, ou au-dessus (bascule / placement forcé)
+  if (up) {
+    style.bottom = popupBottom.value === null ? "0px" : `${popupBottom.value}px`
+    style.top = "auto"
+  } else {
+    style.top = popupTop.value === null ? "0px" : `${popupTop.value}px`
+    style.bottom = "auto"
   }
 
   // Ancre horizontale : par défaut le popup couvre la largeur du champ. Les suffixes
@@ -284,14 +306,19 @@ const popupStyle = computed<Record<string, string>>(() => {
   const placement = popupPlacement.value
   const width = modeOptions.value?.width
   const anchored = placement !== "auto" && placement.includes("-")
+  const left = anchor?.left ?? 0
+  const right =
+    anchor && typeof window !== "undefined" ? window.innerWidth - anchor.right : 0
+
   if (anchored || width) {
     const alignEnd = placement.endsWith("-end")
-    style.left = alignEnd ? "auto" : "0"
-    style.right = alignEnd ? "0" : "auto"
-    style.width = width ?? "100%"
+    style.left = alignEnd ? "auto" : `${left}px`
+    style.right = alignEnd ? `${right}px` : "auto"
+    style.width = width ?? "auto"
   } else {
-    style.left = "0"
-    style.right = "0"
+    style.left = `${left}px`
+    style.right = "auto"
+    style.width = anchor ? `${anchor.width}px` : "auto"
   }
 
   return style
@@ -575,6 +602,8 @@ const onDocMousedown = (e: MouseEvent) => {
   const target = e.target as Node
   if (rootEl.value?.contains(target)) return
   if (sheetRef.value?.contains(target)) return
+  // Popup inline : téléporté dans <body>, donc HORS de la racine du composant
+  if (popupRef.value?.contains(target)) return
   closePopup()
 }
 
@@ -643,7 +672,10 @@ const sheetRadiusStyle = computed<Record<string, string> | undefined>(() => {
   const rounded = modeOptions.value?.rounded ?? props.rounded
   if (rounded === false) return { borderRadius: "0" }
 
-  const defaultRadius = props.mode === "modal" ? "20px" : "12px"
+  // Défaut : l'échelle de radius du composant (composantProps), sinon le défaut
+  // historique du mode — le panneau est téléporté, il ne peut pas lire `--q-radius`.
+  const defaultRadius =
+    radiusValue(effectiveFieldRadius.value) ?? (props.mode === "modal" ? "20px" : "12px")
   const value = typeof rounded === "string" ? rounded : defaultRadius
   const asPx = (v: string | number) => (typeof v === "number" ? `${v}px` : v)
 
@@ -672,7 +704,7 @@ const sheetClass = computed(() => [`q-select__sheet--${props.mode}`, modeOptions
 </script>
 
 <template>
-  <div ref="rootEl" class="q-select" :class="fieldClasses" :style="fieldRadiusStyle">
+  <div ref="rootEl" class="q-select" :class="fieldClasses" :style="fieldRadiusStyle" v-bind="$attrs">
     <label v-if="label" class="q-field__label-stack">{{ label }}</label>
     <div class="q-field__control" @click="onControlClick">
       <slot name="prepend">
@@ -751,50 +783,53 @@ const sheetClass = computed(() => [`q-select__sheet--${props.mode}`, modeOptions
       </div>
     </div>
 
-    <!-- Popup inline (mode inline) -->
-    <div
-      v-if="open && mode === 'inline'"
-      ref="popupRef"
-      class="q-select__popup"
-      :class="[inlineOptions?.class, popupDirection === 'up' && 'q-select__popup--up']"
-      :style="[popupStyle, inlineOptions?.style]"
-      role="listbox"
-      @mousedown.prevent
-    >
-      <div v-if="searchEnabled && !useInput" class="q-select__search" @mousedown.stop>
-        <Icon :icon="icons.search" class="q-select__search-icon" aria-hidden="true" />
-        <input
-          class="q-select__search-input"
-          :value="query"
-          :placeholder="effectiveSearchPlaceholder"
-          @input="onInput"
-          @keydown="onKeydown"
-        />
-      </div>
-      <template v-if="displayOptions.length">
-        <div
-          v-for="(opt, i) in displayOptions"
-          :key="String(getOptionValue(opt))"
-          role="option"
-          :aria-selected="isSelected(opt) ? 'true' : 'false'"
-          class="q-select__option"
-          :class="{
-            'q-select__option--active': i === activeIndex,
-            'q-select__option--selected': isSelected(opt),
-          }"
-          @mouseenter="activeIndex = i"
-          @mousedown.prevent="select(opt)"
-        >
-          <slot :opt="opt" :index="i" :selected="isSelected(opt)">
-            <span class="q-select__option-label">{{ getOptionLabel(opt) }}</span>
-          </slot>
-          <Icon :icon="icons.check" v-if="multiple && isSelected(opt)" class="q-select__check" aria-hidden="true" />
+    <!-- Popup inline (mode inline) : téléporté dans <body> + `position: fixed`,
+         pour échapper au `overflow: hidden` d'un q-card (cf. positionPopup) -->
+    <Teleport to="body">
+      <div
+        v-if="open && mode === 'inline'"
+        ref="popupRef"
+        class="q-select__popup"
+        :class="[inlineOptions?.class, popupDirection === 'up' && 'q-select__popup--up']"
+        :style="[popupStyle, inlineOptions?.style]"
+        role="listbox"
+        @mousedown.prevent
+      >
+        <div v-if="searchEnabled && !useInput" class="q-select__search" @mousedown.stop>
+          <Icon :icon="icons.search" class="q-select__search-icon" aria-hidden="true" />
+          <input
+            class="q-select__search-input"
+            :value="query"
+            :placeholder="effectiveSearchPlaceholder"
+            @input="onInput"
+            @keydown="onKeydown"
+          />
+        </div>
+        <template v-if="displayOptions.length">
+          <div
+            v-for="(opt, i) in displayOptions"
+            :key="String(getOptionValue(opt))"
+            role="option"
+            :aria-selected="isSelected(opt) ? 'true' : 'false'"
+            class="q-select__option"
+            :class="{
+              'q-select__option--active': i === activeIndex,
+              'q-select__option--selected': isSelected(opt),
+            }"
+            @mouseenter="activeIndex = i"
+            @mousedown.prevent="select(opt)"
+          >
+            <slot :opt="opt" :index="i" :selected="isSelected(opt)">
+              <span class="q-select__option-label">{{ getOptionLabel(opt) }}</span>
+            </slot>
+            <Icon :icon="icons.check" v-if="multiple && isSelected(opt)" class="q-select__check" aria-hidden="true" />
+          </div>
+        </template>
+        <div v-else class="q-select__empty">
+          <slot name="noOption">{{ noOptionsLabel }}</slot>
         </div>
-      </template>
-      <div v-else class="q-select__empty">
-        <slot name="noOption">{{ noOptionsLabel }}</slot>
       </div>
-    </div>
+    </Teleport>
 
     <!-- Mode modal / sheet / dialog : panneau téléporté -->
     <Teleport to="body">

package/components/QSidebar.vue

@@ -69,6 +69,13 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ "update:modelValue": [value: boolean] }>()
 
+// Multi-racines (<aside> + backdrop) : Vue ne peut pas hériter les attributs tout seul
+// (avertissement « could not be automatically inherited because component renders
+// fragment … »). On les applique explicitement sur le panneau, la seule racine qui
+// compte : `id`, `data-*`, `aria-label`… arrivent donc sur l'<aside> (l'accessibilité
+// et les sélecteurs de test sont préservés). `class` / `style` restent des props.
+defineOptions({ inheritAttrs: false })
+
 // — Mode statique (viewport >= breakpoint && show-if-above) —
 const isAbove = ref(false)
 let mql: MediaQueryList | null = null
@@ -238,6 +245,7 @@ watch(open, (v) => {
     class="q-sidebar"
     :class="rootClasses"
     :style="[rootStyle, props.style]"
+    v-bind="$attrs"
     :aria-hidden="!isStatic && !open ? 'true' : undefined"
     @pointerdown="onPointerDown"
     @pointermove="onPointerMove"

package/components/QTiptap.vue

@@ -816,6 +816,7 @@ defineExpose({
             :disable="!editor.isEditable"
             aria-label="Font size"
             class="q-tiptap__font-size"
+            :inline-options="{ class: 'q-tiptap__font-size-popup', width: '100px' }"
             @update:model-value="onFontSizeUpdate"
           />
         </div>

package/lib/useComponentProps.test.ts

@@ -0,0 +1,36 @@
+// Tests unitaires de la résolution du radius (échelle + style CSS).
+import { describe, expect, it } from "bun:test"
+import { RADIUS_VALUES, radiusStyle, radiusValue } from "./useComponentProps"
+
+describe("radiusValue", () => {
+  it("traduit chaque barreau de l'échelle", () => {
+    expect(radiusValue("none")).toBe("0px")
+    expect(radiusValue("xs")).toBe("2px")
+    expect(radiusValue("sm")).toBe("4px")
+    expect(radiusValue("md")).toBe("8px")
+    expect(radiusValue("lg")).toBe("16px")
+  })
+
+  it("ne traduit ni la forme native (true) ni l'absence de valeur", () => {
+    expect(radiusValue(true)).toBeUndefined()
+    expect(radiusValue(false)).toBeUndefined()
+    expect(radiusValue(undefined)).toBeUndefined()
+  })
+
+  it("reste aligné sur RADIUS_VALUES", () => {
+    for (const [scale, value] of Object.entries(RADIUS_VALUES)) {
+      expect(radiusValue(scale as keyof typeof RADIUS_VALUES)).toBe(value)
+    }
+  })
+})
+
+describe("radiusStyle", () => {
+  it("pose --q-radius pour une valeur d'échelle", () => {
+    expect(radiusStyle("lg")).toEqual({ "--q-radius": "16px" })
+  })
+
+  it("ne pose rien pour true (forme native) ou undefined", () => {
+    expect(radiusStyle(true)).toBeUndefined()
+    expect(radiusStyle(undefined)).toBeUndefined()
+  })
+})

package/lib/useComponentProps.ts

@@ -55,7 +55,13 @@ export function useRadius(
   return computed(() => toValue(own) ?? (defaults.value.radius as RadiusProp | undefined))
 }
 
+/** Valeur CSS concrète d'une échelle de radius (`undefined` si `true` (forme native) ou absent) */
+export function radiusValue(radius: RadiusProp | undefined): string | undefined {
+  return isRadiusScale(radius) ? RADIUS_VALUES[radius] : undefined
+}
+
 /** Style `--q-radius` à poser sur la racine du composant pour une valeur d'échelle. */
 export function radiusStyle(radius: RadiusProp | undefined): Record<string, string> | undefined {
-  return isRadiusScale(radius) ? { "--q-radius": RADIUS_VALUES[radius] } : undefined
+  const value = radiusValue(radius)
+  return value ? { "--q-radius": value } : undefined
 }

package/package.json

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

package/styles/main.css

@@ -32,18 +32,22 @@ body {
 /* ===== Échelle des z-index =====
    Règle : un menu superposé ne doit JAMAIS passer sous un overlay. Les menus
    téléportés dans <body> sont donc au-dessus de la couche modale.
-     1000        popups en flux (`position: absolute` dans leur champ : select,
-                 autocomplete, nav-menu…) → pas concernés par les overlays
+     1000        popups en flux (`position: absolute` dans leur champ : autocomplete,
+                 nav-menu…) → pas concernés par les overlays
      1999/2000   sidebar offcanvas + backdrop
      3000        overlays modaux : dialog, bottom sheet, action sheet,
                  date-picker, country-picker, select sheet
      3200        menus téléportés dans <body> : panneau QBtnActions, menu
                  contextuel / filtre / suggestions du tableur → --q-z-menu
+     3500        popup inline de QSelect (téléporté dans <body> : il doit passer
+                 au-dessus d'un overlay quand le champ est dans un dialog/sheet)
+                 → --q-z-popup
      4000        palettes tiptap · 7000 loading global · 9999 tooltip ·
                  10000 image preview
-   Surchargez --q-z-menu si votre application a un overlay plus haut que 3200. */
+   Surchargez --q-z-menu ou --q-z-popup si votre application a un overlay plus haut. */
 :root {
   --q-z-menu: 3200;
+  --q-z-popup: 3500;
 }
 
 /* ===== Safe-area insets (encoche & barre d'accueil) =====
@@ -316,7 +320,10 @@ body {
     --muted: #1c2128;
     --border: rgb(255 255 255 / 0.12);
     --q-table-border: rgb(255 255 255 / 0.12);
-    --q-table-header-bg: rgb(255 255 255 / 0.04);
+    /* Opaque (4 % de blanc composé sur la surface) : un en-tête sticky ne doit pas
+       laisser voir les lignes qui défilent dessous. Fallback avant color-mix. */
+    --q-table-header-bg: #1f242b;
+    --q-table-header-bg: color-mix(in srgb, #fff 4%, var(--card, #161b22));
     --q-table-hover-bg: rgb(255 255 255 / 0.06);
     --q-sidebar-border: rgb(255 255 255 / 0.12);
     --q-translucent-bg: #0f1115;
@@ -410,7 +417,9 @@ html.dark body {
 }
 .dark .q-data-grid {
   --q-data-grid-border: rgb(255 255 255 / 0.12);
-  --q-data-grid-header-bg: rgb(255 255 255 / 0.04);
+  /* Opaque (cf. QTable : en-tête sticky sur surface composée) */
+  --q-data-grid-header-bg: #1f242b;
+  --q-data-grid-header-bg: color-mix(in srgb, #fff 4%, var(--card, #161b22));
 }
 
 /* Footer de table (pagination) en dark : range + sélecteur lignes/page */
@@ -3209,7 +3218,10 @@ html.dark body {
 /* ===== QTable ===== */
 .q-table {
   --q-table-border: rgb(0 0 0 / 0.1);
-  --q-table-header-bg: rgb(0 0 0 / 0.03);
+  /* Opaque : 3 % de noir **composé sur la surface** (un en-tête sticky laissait
+     sinon voir les lignes qui défilent dessous). Fallback avant color-mix. */
+  --q-table-header-bg: #f7f7f7;
+  --q-table-header-bg: color-mix(in srgb, #000 3%, #fff);
   --q-table-hover-bg: rgb(0 0 0 / 0.04);
 
   position: relative;
@@ -3233,7 +3245,8 @@ html.dark body {
 
 .q-table--dark {
   --q-table-border: rgb(255 255 255 / 0.15);
-  --q-table-header-bg: rgb(255 255 255 / 0.06);
+  --q-table-header-bg: #2b2b2b;
+  --q-table-header-bg: color-mix(in srgb, #fff 6%, #1d1d1d);
   --q-table-hover-bg: rgb(255 255 255 / 0.06);
   background-color: #1d1d1d;
   color: #fff;
@@ -4835,12 +4848,16 @@ a.q-breadcrumbs__el:hover {
   transform: rotate(180deg);
 }
 
+/* Popup inline : téléporté dans <body> et en `position: fixed` — en `position:
+   absolute` il restait **rogné** par le premier ancêtre en `overflow: hidden` (un
+   q-card, par exemple), et un `z-index` ne franchit JAMAIS un clip. Les coordonnées
+   fenêtre (top/bottom/left/width) sont posées en inline par `positionPopup()`, qui
+   le repositionne aussi au scroll et au resize. */
 .q-select__popup {
-  position: absolute;
-  top: calc(100% + 8px);
+  position: fixed;
+  top: 0;
   left: 0;
-  right: 0;
-  z-index: 1000;
+  z-index: var(--q-z-popup, 3500);
   max-height: 240px;
   overflow-y: auto;
   padding: 4px 0;
@@ -8648,7 +8665,9 @@ a.q-breadcrumbs__el:hover {
 /* ===== QDataGrid — grille type tableur (formules, édition, sélection clavier) ===== */
 .q-data-grid {
   --q-data-grid-border: rgb(0 0 0 / 0.1);
-  --q-data-grid-header-bg: rgb(0 0 0 / 0.03);
+  /* Opaque (cf. QTable : en-tête sticky sur surface composée) */
+  --q-data-grid-header-bg: #f7f7f7;
+  --q-data-grid-header-bg: color-mix(in srgb, #000 3%, #fff);
 
   position: relative;
   display: flex;
@@ -8667,7 +8686,8 @@ a.q-breadcrumbs__el:hover {
 }
 .q-data-grid--dark {
   --q-data-grid-border: rgb(255 255 255 / 0.15);
-  --q-data-grid-header-bg: rgb(255 255 255 / 0.06);
+  --q-data-grid-header-bg: #2b2b2b;
+  --q-data-grid-header-bg: color-mix(in srgb, #fff 6%, #1d1d1d);
   background: #1d1d1d;
   color: #fff;
 }
@@ -9583,11 +9603,13 @@ a.q-breadcrumbs__el:hover {
   width: 14px;
   height: 14px;
 }
-.q-tiptap__font-size .q-select__popup {
-  width: 100px;
+/* Popup inline téléporté dans <body> : impossible de le styler depuis le parent — on
+   passe par la classe du popup (`inline-options.class`) ; la largeur, elle, vient de
+   `inline-options.width` (l'inline posé par positionPopup() prime sur ce CSS). */
+.q-tiptap__font-size-popup {
   min-width: 100px;
 }
-.q-tiptap__font-size .q-select__option-label {
+.q-tiptap__font-size-popup .q-select__option-label {
   font-size: 12px;
 }
 
@@ -9777,7 +9799,9 @@ a.q-breadcrumbs__el:hover {
 /* ===== QSpreadsheet (tableur type Excel) ===== */
 .q-spreadsheet {
   --q-spreadsheet-border: rgb(0 0 0 / 0.1);
-  --q-spreadsheet-header-bg: rgb(0 0 0 / 0.03);
+  /* Opaque (cf. QTable : entêtes sticky des colonnes/lignes) */
+  --q-spreadsheet-header-bg: #f7f7f7;
+  --q-spreadsheet-header-bg: color-mix(in srgb, #000 3%, #fff);
   --q-spreadsheet-row-alt: rgb(0 0 0 / 0.015);
   --q-spreadsheet-range: rgb(25 118 210 / 0.1);
   --q-spreadsheet-range-brd: var(--primary, #1976d2);
@@ -9806,7 +9830,8 @@ a.q-breadcrumbs__el:hover {
 .q-spreadsheet--dark,
 .dark .q-spreadsheet {
   --q-spreadsheet-border: rgb(255 255 255 / 0.12);
-  --q-spreadsheet-header-bg: rgb(255 255 255 / 0.05);
+  --q-spreadsheet-header-bg: #22262d;
+  --q-spreadsheet-header-bg: color-mix(in srgb, #fff 5%, var(--card, #1d1d1d));
   --q-spreadsheet-row-alt: rgb(255 255 255 / 0.02);
   background: var(--card, #1d1d1d);
   color: var(--foreground, #ececef);