@dnax/ui 0.0.1 → 0.0.3

package/components/QBackHeader.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 // QBackHeader — barre de retour : <q-back-header title="Détails" fixed @back="router.back()" />
 // Bouton retour + titre + actions à droite ; safe-area top intégrée.
-import { computed } from "vue"
+import { computed, ref } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
+import { useFixedBarOffset } from "../lib/fixedLayout"
 
 interface Props {
   /** Titre de la page */
@@ -32,6 +33,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ back: [] }>()
 
+const rootEl = ref<HTMLElement | null>(null)
+
+// Empilement : top = hauteur cumulée des barres fixed précédentes (si fixed)
+useFixedBarOffset(rootEl, "bar", () => props.fixed)
+
 const translucentStyle = computed<Record<string, string> | undefined>(() =>
   props.translucent === true || typeof props.translucent === "number"
     ? { "--q-translucent-opacity": `${typeof props.translucent === "number" ? props.translucent : 70}%` }
@@ -49,7 +55,7 @@ const headerClasses = computed(() =>
 </script>
 
 <template>
-  <header class="q-back-header" :class="headerClasses" :style="translucentStyle">
+  <header ref="rootEl" class="q-back-header" :class="headerClasses" :style="translucentStyle">
     <button
       v-if="showBack"
       type="button"

package/components/QHeader.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 // QHeader — barre haute. fixed = position: fixed en haut (opt-in).
 // Safe-area top/left/right appliquées toujours (styles/main.css).
-import { computed } from "vue"
+// Quand plusieurs barres fixed sont empilées (q-back-header + q-header), chaque
+// barre se décale sous la précédente automatiquement.
+import { computed, ref } from "vue"
+import { useFixedBarOffset } from "../lib/fixedLayout"
 
 interface Props {
   /** Fixe la barre en haut de l'écran (sort du flux) */
@@ -16,6 +19,11 @@ const props = withDefaults(defineProps<Props>(), {
   fixed: false,
 })
 
+const rootEl = ref<HTMLElement | null>(null)
+
+// Empilement : top = hauteur cumulée des barres fixed précédentes (si fixed)
+useFixedBarOffset(rootEl, "bar", () => props.fixed)
+
 const translucentStyle = computed<Record<string, string> | undefined>(() =>
   props.translucent === true || typeof props.translucent === "number"
     ? { "--q-translucent-opacity": `${typeof props.translucent === "number" ? props.translucent : 70}%` }
@@ -25,6 +33,7 @@ const translucentStyle = computed<Record<string, string> | undefined>(() =>
 
 <template>
   <div
+    ref="rootEl"
     class="q-header"
     :class="{
       'q-header--fixed': fixed,

package/components/QPage.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 // QPage — zone de contenu. Prop `virtual` : active le virtual scroll
 // (rendu fenêtré via QVirtualScroll) quand on a beaucoup d'items.
+// Padding-top automatique quand des barres fixed (q-header / q-back-header)
+// précèdent la page : le contenu reste sous les barres (jamais masqué).
+import { onBeforeUnmount, onMounted, ref } from "vue"
+import { useFixedBarOffset } from "../lib/fixedLayout"
 import QVirtualScroll from "./QVirtualScroll.vue"
 
 interface Props {
@@ -25,11 +29,22 @@ interface Props {
 }
 
 defineProps<Props>()
+
+const rootEl = ref<HTMLElement | null>(null)
+// ref fonctionnel : sur un élément → l'élément ; sur q-virtual-scroll (composant) → .$el
+const setRoot = (el: unknown) => {
+  const node = el as (HTMLElement & { $el?: HTMLElement }) | null
+  rootEl.value = node?.$el ?? node ?? null
+}
+
+// Offset automatique : padding-top = hauteur des barres fixed précédentes
+useFixedBarOffset(rootEl, "page")
 </script>
 
 <template>
   <q-virtual-scroll
     v-if="virtual"
+    ref="setRoot"
     class="q-page"
     :items="items"
     :item-key="itemKey"
@@ -50,7 +65,7 @@ defineProps<Props>()
       <slot name="after" />
     </template>
   </q-virtual-scroll>
-  <div v-else class="q-page">
+  <div v-else ref="setRoot" class="q-page">
     <slot />
   </div>
 </template>

package/components/QSelect.vue

@@ -300,6 +300,12 @@ const inputDisplay = computed(() => {
   return selectedOptions.value[0] ? getOptionLabel(selectedOptions.value[0]) : ""
 })
 
+// En mode multiple + use-chips, le texte du display est remplacé par les chips ;
+// on ne garde le display que pour le placeholder quand la liste est vide.
+const showDisplay = computed(
+  () => !(props.multiple && props.useChips) || selectedOptions.value.length === 0,
+)
+
 const floatActive = computed(
   () => focused.value || query.value !== "" || selectedOptions.value.length > 0 || props.stackLabel,
 )
@@ -497,7 +503,14 @@ const sheetClass = computed(() => [`q-select__sheet--${props.mode}`, modeOptions
     <div class="q-field__control" @click="onControlClick">
       <slot name="prepend" />
 
-      <span v-for="(opt, i) in selectedOptions" :key="`${String(getOptionValue(opt))}-${i}`" class="q-select__chip">
+      <!-- Chips : uniquement en multiple + use-chips (comme Quasar — un select
+           simple avec use-chips affiche juste le texte du display) -->
+      <span
+        v-for="(opt, i) in selectedOptions"
+        v-if="multiple && useChips"
+        :key="`${String(getOptionValue(opt))}-${i}`"
+        class="q-select__chip"
+      >
         <span class="q-select__chip-label">{{ getOptionLabel(opt) }}</span>
         <button
           v-if="!disable && !readonly"
@@ -527,7 +540,7 @@ const sheetClass = computed(() => [`q-select__sheet--${props.mode}`, modeOptions
         @keydown="onKeydown"
       />
       <span
-        v-else
+        v-else-if="showDisplay"
         class="q-select__display"
         :class="{ 'q-select__display--placeholder': !displayText }"
       >

package/lib/fixedLayout.ts

@@ -0,0 +1,106 @@
+// fixedLayout — offset automatique des barres fixed (q-header, q-back-header)
+// et du q-page qui les suit.
+//
+// Problème : les barres fixed sortent du flux (position: fixed) → le contenu de
+// q-page passe dessous. Ce module :
+//  - q-page (mode "page") reçoit un padding-top = hauteur cumulée des barres
+//    fixed frères qui le précèdent (le contenu ne se retrouve plus sous le header)
+//  - chaque barre fixed suivante (mode "bar") s'empile sous la précédente (top)
+//
+// Les barres fixed sont détectées par le sélecteur FIXED_BAR_SELECTOR parmi les
+// frères du même parent ; la hauteur est observée (ResizeObserver) pour suivre
+// les changements de taille (contenu, safe-area).
+import { onBeforeUnmount, onMounted, watch } from "vue"
+import type { Ref } from "vue"
+
+export const FIXED_BAR_SELECTOR = ".q-header--fixed, .q-back-header--fixed"
+
+/** Hauteur cumulée des barres fixed qui précèdent `el` (frères du même parent) */
+export function fixedBarsHeightBefore(el: HTMLElement): number {
+  const parent = el.parentElement
+  if (!parent) return 0
+  let total = 0
+  for (const child of parent.children) {
+    if (child === el) break
+    if (child instanceof HTMLElement && child.matches(FIXED_BAR_SELECTOR)) {
+      total += child.offsetHeight
+    }
+  }
+  return total
+}
+
+/** Barres fixed frères de `el` (pour l'observation ResizeObserver) */
+function fixedBarSiblings(el: HTMLElement): HTMLElement[] {
+  const parent = el.parentElement
+  if (!parent) return []
+  return Array.from(parent.children).filter(
+    (c): c is HTMLElement => c instanceof HTMLElement && c.matches(FIXED_BAR_SELECTOR),
+  )
+}
+
+/**
+ * Applique l'offset lié aux barres fixed qui précèdent `el` :
+ * - mode "page" : padding-top = hauteur cumulée (q-page) + variable --q-page-offset
+ * - mode "bar"  : top = hauteur cumulée (empilement des barres fixed)
+ *
+ * `enabled` permet de n'activer que dans certaines conditions (ex. props.fixed).
+ */
+export function useFixedBarOffset(
+  el: Ref<HTMLElement | null>,
+  mode: "page" | "bar",
+  enabled: () => boolean = () => true,
+) {
+  let ro: ResizeObserver | null = null
+
+  const apply = () => {
+    const node = el.value
+    if (!node || !enabled()) return
+    const h = fixedBarsHeightBefore(node)
+    if (mode === "page") {
+      node.style.setProperty("--q-page-offset", h ? `${h}px` : "0px")
+      node.style.paddingTop = h ? `${h}px` : ""
+    }
+    else {
+      node.style.top = h ? `${h}px` : ""
+    }
+  }
+
+  const clear = () => {
+    const node = el.value
+    if (!node) return
+    if (mode === "page") {
+      node.style.removeProperty("--q-page-offset")
+      node.style.paddingTop = ""
+    }
+    else {
+      node.style.top = ""
+    }
+  }
+
+  const observe = () => {
+    const node = el.value
+    if (!node || typeof ResizeObserver === "undefined") return
+    const bars = fixedBarSiblings(node)
+    if (!bars.length) return
+    ro = new ResizeObserver(apply)
+    bars.forEach((b) => ro!.observe(b))
+  }
+
+  onMounted(() => {
+    apply()
+    observe()
+    window.addEventListener("resize", apply)
+  })
+  onBeforeUnmount(() => {
+    ro?.disconnect()
+    window.removeEventListener("resize", apply)
+  })
+
+  // Ré-applique/efface quand la condition change (ex. bascule fixed)
+  watch(enabled, (v) => {
+    if (v) apply()
+    else clear()
+  })
+
+  return apply
+}

package/package.json

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

package/styles/main.css

@@ -1,3 +1,23 @@
+/* ===== Reset global (Preflight Tailwind) =====
+   box-sizing: border-box partout : width:100% + padding (q-container, q-btn
+   stretch, q-toolbar…) ne débordent plus du viewport (scroll horizontal).
+   Sans ce reset, les composants en content-box débordaient. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+}
+
 /* ===== Tokens globaux ===== */
 /* Rayon de base des composants. Surchargé localement par la prop `rounded`
    (échelle none|xs|sm|md|lg via --q-radius) ou les composantProps du thème. */
@@ -580,6 +600,7 @@ html.dark body {
 
   position: relative;
   display: flex;
+  width: 100%;
   min-height: var(--q-tabs-h);
 }
 
@@ -611,16 +632,33 @@ html.dark body {
   flex: 1 1 auto;
 }
 
-.q-tabs--dense .q-tab {
-  padding: 0 12px;
+/* align non-justify : les tabs gardent leur taille naturelle (sinon flex:1
+   les étire toujours → center/right n'auraient aucun effet) */
+.q-tabs--left .q-tab,
+.q-tabs--center .q-tab,
+.q-tabs--right .q-tab {
+  flex: 0 0 auto;
 }
 
-.q-tabs--shrink {
-  flex: 0 1 auto;
+.q-tabs--dense .q-tab {
+  padding: 0 12px;
 }
 
 .q-tabs--stretch {
   align-self: stretch;
+  flex: 1 1 auto;
+}
+
+/* Dans un parent flex (QToolbar…) sans align-items: stretch, la barre ne prend
+   que la largeur de son contenu → center/right sans effet. stretch force la
+   largeur disponible ET l'étirement sur l'axe croisé. */
+.q-tabs--stretch.q-tabs {
+  width: 100%;
+}
+
+.q-tabs--shrink {
+  flex: 0 1 auto;
+  width: auto;
 }
 
 .q-tabs--vertical {