@dnax/ui 0.0.4 → 0.0.5

package/components/QGrid.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-// QGrid — grille CSS (12 colonnes par défaut) : <q-grid :cols="12" gap="16px">
-// Breakpoints configurables via les variables CSS --q-grid-bp-* (:root par défaut).
+// QGrid — grille CSS responsive (layout) ET grille de cellules style Vant.
+// Mode layout (défaut) : <q-grid :cols="12" gap="16px"> + <q-col> enfants.
+// Mode cellules (Vant) : activé par `column-num` → <q-grid-item> enfants
+// (icône + texte), ex. menu d'app : <q-grid :column-num="4" gutter="8" clickable>
 import { computed } from "vue"
 import { useGridBreakpoints } from "../lib/breakpoints"
 
 interface Props {
-  /** Nombre de colonnes (défaut : 12) */
+  /** Nombre de colonnes du layout (défaut : 12) */
   cols?: number
   /** Espacement (string CSS ou nombre px) */
   gap?: string | number
@@ -18,12 +20,44 @@ interface Props {
   colsXl?: number
   /** Alignement vertical des cellules */
   align?: "start" | "center" | "end" | "stretch"
+
+  // ── Mode cellules (Vant Grid) ──
+  /** Nombre de colonnes de cellules — active le mode Vant (défaut : 4) */
+  columnNum?: number
+  /** Espace entre les cellules (string CSS ou nombre px) */
+  gutter?: string | number
+  /** Affiche les bordures entre les cellules (défaut : true) */
+  border?: boolean
+  /** Cellules carrées (aspect-ratio 1) */
+  square?: boolean
+  /** Centre le contenu des cellules (défaut : true) */
+  center?: boolean
+  /** Cellules cliquables (effet hover/press) */
+  clickable?: boolean
+  /** Orientation du contenu : icône au-dessus (vertical) ou à gauche (horizontal) */
+  direction?: "vertical" | "horizontal"
+  /** Inverse l'ordre icône/texte */
+  reverse?: boolean
+  /** Taille des icônes des cellules (défaut : 28px) */
+  iconSize?: string | number
+  /** Couleur des icônes des cellules (token ou hex) */
+  iconColor?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   cols: 12,
   gap: "16px",
   align: "stretch",
+  columnNum: 0,
+  gutter: 0,
+  border: true,
+  square: false,
+  center: true,
+  clickable: false,
+  direction: "vertical",
+  reverse: false,
+  iconSize: "28px",
+  iconColor: "",
 })
 
 const bp = useGridBreakpoints()
@@ -31,19 +65,38 @@ const bp = useGridBreakpoints()
 const px = (v: string | number | undefined) =>
   v === undefined ? undefined : typeof v === "number" ? `${v}px` : v
 
-const style = computed<Record<string, string>>(() => ({
-  "--q-grid-cols": String(props.cols),
-  "--q-grid-gap": px(props.gap)!,
-  ...(props.rowGap !== undefined ? { "--q-grid-row-gap": px(props.rowGap)! } : {}),
-  ...(props.columnGap !== undefined ? { "--q-grid-column-gap": px(props.columnGap)! } : {}),
-  alignItems: props.align,
-}))
+/** Mode cellules (Vant) : activé dès que column-num est fourni (> 0) */
+const isCellMode = computed(() => props.columnNum > 0)
+
+const style = computed<Record<string, string>>(() => {
+  const s: Record<string, string> = {}
+  if (isCellMode.value) {
+    s["--q-grid-cols"] = String(props.columnNum)
+    s["--q-grid-gap"] = px(props.gutter)!
+    s["--q-grid-item-icon-size"] = px(props.iconSize)!
+    if (props.iconColor) s["--q-grid-item-icon-color"] = props.iconColor
+    return s
+  }
+  s["--q-grid-cols"] = String(props.cols)
+  s["--q-grid-gap"] = px(props.gap)!
+  if (props.rowGap !== undefined) s["--q-grid-row-gap"] = px(props.rowGap)!
+  if (props.columnGap !== undefined) s["--q-grid-column-gap"] = px(props.columnGap)!
+  s.alignItems = props.align
+  return s
+})
 
 const classes = computed(() => ({
   ...(bp.value.sm && props.colsSm ? { [`q-grid--cols-sm-${props.colsSm}`]: true } : {}),
   ...(bp.value.md && props.colsMd ? { [`q-grid--cols-md-${props.colsMd}`]: true } : {}),
   ...(bp.value.lg && props.colsLg ? { [`q-grid--cols-lg-${props.colsLg}`]: true } : {}),
   ...(bp.value.xl && props.colsXl ? { [`q-grid--cols-xl-${props.colsXl}`]: true } : {}),
+  "q-grid--cell": isCellMode.value,
+  "q-grid--border": isCellMode.value && props.border,
+  "q-grid--square": isCellMode.value && props.square,
+  "q-grid--center": isCellMode.value && props.center,
+  "q-grid--clickable": isCellMode.value && props.clickable,
+  "q-grid--horizontal": isCellMode.value && props.direction === "horizontal",
+  "q-grid--reverse": isCellMode.value && props.reverse,
 }))
 </script>
 

package/components/QGridItem.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+// QGridItem — cellule de la grille style Vant : <q-grid-item icon="lucide:photo" text="Photos" badge="3" />
+// À utiliser dans <q-grid :column-num="…">. Affiche une icône (ou un slot) + un
+// texte, avec badge / point de notification, effet cliquable et navigation (href).
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Icône Iconify (ex. : "lucide:home") */
+  icon?: string
+  /** Texte sous l'icône */
+  text?: string
+  /** Couleur de l'icône (token ou hex) — sinon celle du QGrid (icon-color) */
+  iconColor?: string
+  /** Badge numérique (masqué si 0 ou absent) */
+  badge?: number | string
+  /** Point de notification (sans nombre) */
+  dot?: boolean
+  /** Lien (navigation) — rend la cellule en <a> */
+  href?: string
+  /** Ouvre le lien dans un nouvel onglet */
+  target?: string
+  /** Clic désactivé */
+  disable?: boolean
+  /** Classe additionnelle sur la cellule */
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: "",
+  text: "",
+  iconColor: "",
+  badge: "",
+  dot: false,
+  href: "",
+  target: "",
+  disable: false,
+  class: "",
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const hasBadge = computed(
+  () =>
+    typeof props.badge === "number" ? props.badge > 0 : String(props.badge).length > 0,
+)
+const badgeDisplay = computed(() =>
+  typeof props.badge === "number" && props.badge > 99 ? "99+" : String(props.badge),
+)
+
+const iconStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  if (props.iconColor) style.color = props.iconColor
+  return style
+})
+
+const cellClasses = computed(() =>
+  cn(
+    "q-grid-item",
+    props.disable && "q-grid-item--disabled",
+    props.dot && "q-grid-item--dot",
+    hasBadge.value && "q-grid-item--badge",
+    props.href && "q-grid-item--link",
+    props.class,
+  ),
+)
+
+const onClick = (e: MouseEvent) => {
+  if (props.disable) {
+    e.preventDefault()
+    e.stopPropagation()
+    return
+  }
+  emit("click", e)
+}
+</script>
+
+<template>
+  <a
+    v-if="href"
+    :href="href"
+    :target="target"
+    :class="cellClasses"
+    @click="onClick"
+  >
+    <span v-if="dot" class="q-grid-item__dot" aria-hidden="true" />
+    <span v-if="hasBadge" class="q-grid-item__badge">{{ badgeDisplay }}</span>
+
+    <span class="q-grid-item__content">
+      <Icon v-if="icon" :icon="icon" class="q-grid-item__icon" :style="iconStyle" aria-hidden="true" />
+      <slot name="icon" v-else />
+      <span v-if="text" class="q-grid-item__text">{{ text }}</span>
+      <span v-else-if="!icon" class="q-grid-item__text"><slot /></span>
+    </span>
+  </a>
+  <div v-else :class="cellClasses" @click="onClick">
+    <span v-if="dot" class="q-grid-item__dot" aria-hidden="true" />
+    <span v-if="hasBadge" class="q-grid-item__badge">{{ badgeDisplay }}</span>
+
+    <span class="q-grid-item__content">
+      <Icon v-if="icon" :icon="icon" class="q-grid-item__icon" :style="iconStyle" aria-hidden="true" />
+      <slot name="icon" v-else />
+      <span v-if="text" class="q-grid-item__text">{{ text }}</span>
+      <span v-else-if="!icon" class="q-grid-item__text"><slot /></span>
+    </span>
+  </div>
+</template>

package/components/QTabs.vue

@@ -25,6 +25,7 @@ export const qTabsKey: InjectionKey<QTabContext> = Symbol("q-tabs")
 import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch } from "vue"
 import { cva } from "class-variance-authority"
 import { cn } from "../lib/utils"
+import { colorValue } from "../lib/colors"
 
 const tabsVariants = cva("q-tabs", {
   variants: {
@@ -58,8 +59,11 @@ interface Props {
   inlineLabel?: boolean
   /** Pas de majuscules sur les tabs */
   noCaps?: boolean
-  /** Indicateur en haut au lieu du bas */
-  switchIndicator?: boolean
+  /**
+   * Position de l'indicateur (opt-in — sans la prop, aucun indicateur) :
+   * true | "bottom" → en bas (défaut) ; "top" → en haut (pattern iOS/mobile).
+   */
+  switchIndicatorPosition?: boolean | "top" | "bottom"
   /** Tabs en colonne (verticales) */
   vertical?: boolean
   /** Ne pas s'étendre (usage dans un QToolbar) */
@@ -82,7 +86,7 @@ const props = withDefaults(defineProps<Props>(), {
   dense: false,
   inlineLabel: false,
   noCaps: false,
-  switchIndicator: false,
+  switchIndicatorPosition: undefined,
   vertical: false,
   shrink: false,
   stretch: false,
@@ -92,6 +96,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ "update:modelValue": [value: string | number | null] }>()
 
+// Position effective de l'indicateur : "top" | "bottom" (défaut) | "none" (masqué)
+const indicatorPos = computed<"top" | "bottom" | "none">(() => {
+  const p = props.switchIndicatorPosition
+  if (p === "top") return "top"
+  if (p === false || p === undefined || p === null) return "none"
+  return "bottom" // true | "" (attribut sans valeur) | "bottom"
+})
+
 // shallowRef : on ne veut PAS que Vue dé-unwrappe les Ref contenues dans les enregistrements
 const tabRegs = shallowRef<QTabRegistration[]>([])
 const tick = ref(0)
@@ -149,14 +161,15 @@ const indicatorStyle = computed<Record<string, string>>(() => {
   else {
     style.opacity = "0"
   }
-  if (props.indicatorColor) style.backgroundColor = props.indicatorColor
+  if (props.indicatorColor) style.backgroundColor = colorValue(props.indicatorColor)
   return style
 })
 
 const containerStyle = computed<Record<string, string>>(() => {
   const style: Record<string, string> = {}
-  if (props.activeColor) style["--q-tabs-active-color"] = props.activeColor
-  if (props.activeBgColor) style["--q-tabs-active-bg"] = props.activeBgColor
+  // Token (primary…) → var(--primary) ; sinon valeur directe (hex, rgb…)
+  if (props.activeColor) style["--q-tabs-active-color"] = colorValue(props.activeColor)
+  if (props.activeBgColor) style["--q-tabs-active-bg"] = colorValue(props.activeBgColor)
   return style
 })
 
@@ -164,7 +177,10 @@ const tabsClasses = computed(() =>
   cn(
     tabsVariants({ align: props.align, dense: props.dense }),
     props.vertical && "q-tabs--vertical",
-    props.switchIndicator && "q-tabs--switch-indicator",
+    // Indicateur opt-in : bottom (défaut) | top | aucun
+    indicatorPos.value === "none"
+      ? "q-tabs--no-indicator"
+      : indicatorPos.value === "top" && "q-tabs--switch-indicator",
     props.shrink && "q-tabs--shrink",
     props.stretch && "q-tabs--stretch",
     props.animated && "q-tabs--animated",

package/index.ts

@@ -49,6 +49,7 @@ export { default as QFilePicker } from "./components/QFilePicker.vue"
 export { default as QFooter } from "./components/QFooter.vue"
 export { default as QGallery } from "./components/QGallery.vue"
 export { default as QGrid } from "./components/QGrid.vue"
+export { default as QGridItem } from "./components/QGridItem.vue"
 export { default as QHeader } from "./components/QHeader.vue"
 export { default as QIcon } from "./components/QIcon.vue"
 export { default as QImagePicker } from "./components/QImagePicker.vue"

package/lib/fixedLayout.ts

@@ -4,38 +4,48 @@
 // 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)
+//    fixed 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).
+// Les barres fixed sont cherchées dans TOUT le sous-arbre de l'enveloppe q-app
+// (pas seulement parmi les frères directs) et ordonnées par position dans le
+// document : l'imbrication intermédiaire (wrapper, rendu conditionnel…) est
+// gérée. Les hauteurs sont observées (ResizeObserver) et l'ajout/suppression de
+// barres aussi (MutationObserver sur la racine).
 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) */
+/** Racine du layout : le .q-app le plus proche, sinon le parent direct. */
+function layoutRoot(el: HTMLElement): HTMLElement | null {
+  return el.closest(".q-app") ?? el.parentElement
+}
+
+/**
+ * Hauteur cumulée des barres fixed qui précèdent `el` dans l'ordre du document,
+ * sous la même enveloppe q-app. `el` lui-même (cas mode "bar") est exclu.
+ */
 export function fixedBarsHeightBefore(el: HTMLElement): number {
-  const parent = el.parentElement
-  if (!parent) return 0
+  const root = layoutRoot(el)
+  if (!root) return 0
+  const bars = Array.from(root.querySelectorAll<HTMLElement>(FIXED_BAR_SELECTOR))
   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
+  for (const bar of bars) {
+    if (bar === el) continue
+    // DOCUMENT_POSITION_FOLLOWING = la barre est AVANT el dans le document
+    if (bar.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) {
+      total += bar.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),
-  )
+/** Toutes les barres fixed sous l'enveloppe q-app (pour l'observation). */
+function fixedBarsInRoot(el: HTMLElement): HTMLElement[] {
+  const root = layoutRoot(el)
+  if (!root) return []
+  return Array.from(root.querySelectorAll<HTMLElement>(FIXED_BAR_SELECTOR))
 }
 
 /**
@@ -51,6 +61,16 @@ export function useFixedBarOffset(
   enabled: () => boolean = () => true,
 ) {
   let ro: ResizeObserver | null = null
+  let mo: MutationObserver | null = null
+
+  const sync = () => {
+    const node = el.value
+    if (!node || typeof ResizeObserver === "undefined") return
+    const bars = fixedBarsInRoot(node)
+    ro?.disconnect()
+    ro = new ResizeObserver(apply)
+    bars.forEach((b) => ro!.observe(b))
+  }
 
   const apply = () => {
     const node = el.value
@@ -77,22 +97,23 @@ export function useFixedBarOffset(
     }
   }
 
-  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()
+    sync()
+    // Barres ajoutées/retirées dynamiquement (rendu conditionnel) → re-synchronise
+    const root = el.value ? layoutRoot(el.value) : null
+    if (root && typeof MutationObserver !== "undefined") {
+      mo = new MutationObserver(() => {
+        sync()
+        apply()
+      })
+      mo.observe(root, { childList: true, subtree: true })
+    }
     window.addEventListener("resize", apply)
   })
   onBeforeUnmount(() => {
     ro?.disconnect()
+    mo?.disconnect()
     window.removeEventListener("resize", apply)
   })
 

package/lib/q.ts

@@ -248,7 +248,12 @@ function notify(opts: NotifyOptions): NotifyController {
   return { dismiss: () => toast.dismiss(id) }
 }
 
-/** API publique : $q.dialog / $q.bottomSheet / $q.notify / $q.imagePreview / $q.platform / $q.breakpoints / $q.screen / $q.loading */
+// API publique : $q.dialog / $q.bottomSheet / $q.notify / $q.imagePreview / $q.platform / $q.breakpoints / $q.screen / $q.loading
+// Conventions Quasar : .open() pour les piles (dialog, bottomSheet, imagePreview),
+// .show() pour notify et loading.
+const notifyPlugin = notify as typeof notify & { show: typeof notify }
+notifyPlugin.show = notify
+
 export const $q = {
   dialog: {
     open: openDialog,
@@ -259,7 +264,7 @@ export const $q = {
   imagePreview: {
     open: openImagePreview,
   },
-  notify,
+  notify: notifyPlugin,
   platform,
   breakpoints: qBreakpoints,
   screen,

package/package.json

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

package/styles/main.css

@@ -656,6 +656,12 @@ html.dark body {
   width: 100%;
 }
 
+/* stretch → chaque tab prend une largeur équitable (comme justify), même si
+   align est left/center/right (placé après pour primer sur flex: 0 0 auto) */
+.q-tabs--stretch .q-tab {
+  flex: 1 1 auto;
+}
+
 .q-tabs--shrink {
   flex: 0 1 auto;
   width: auto;
@@ -679,7 +685,12 @@ html.dark body {
   height: auto;
 }
 
-/* indicateur en haut (switch-indicator) */
+/* Indicateur : masqué par défaut (opt-in via switch-indicator-position) */
+.q-tabs--no-indicator .q-tabs__indicator {
+  display: none;
+}
+
+/* indicateur en haut (switch-indicator-position) */
 .q-tabs--switch-indicator .q-tabs__indicator {
   top: 0;
   bottom: auto;
@@ -7184,6 +7195,131 @@ html.dark body {
 .q-grid--cols-xl-11 { --q-grid-cols: 11; }
 .q-grid--cols-xl-12 { --q-grid-cols: 12; }
 
+/* ===== QGrid — mode cellules (Vant Grid) =====
+   Activé par :column-num — cellules QGridItem en grille égale, avec icône + texte. */
+.q-grid--cell {
+  --q-grid-item-icon-size: 28px;
+  --q-grid-item-icon-color: inherit;
+  --q-grid-item-min-h: 84px;
+  row-gap: var(--q-grid-gap, 0);
+  column-gap: var(--q-grid-gap, 0);
+}
+.q-grid--cell > .q-grid-item {
+  min-width: 0;
+}
+.q-grid--border {
+  border-top: 1px solid rgb(0 0 0 / 0.08);
+  border-left: 1px solid rgb(0 0 0 / 0.08);
+  overflow: hidden;
+}
+.dark .q-grid--border {
+  border-color: var(--border);
+}
+.q-grid--square > .q-grid-item {
+  aspect-ratio: 1;
+}
+.q-grid--clickable > .q-grid-item {
+  cursor: pointer;
+}
+.q-grid--clickable > .q-grid-item:hover {
+  background-color: rgb(0 0 0 / 0.04);
+}
+
+/* — Cellule — */
+.q-grid-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--q-grid-item-min-h);
+  padding: 12px 8px;
+  background: transparent;
+  border-right: 1px solid rgb(0 0 0 / 0.08);
+  border-bottom: 1px solid rgb(0 0 0 / 0.08);
+  color: inherit;
+  text-decoration: none;
+}
+.dark .q-grid-item {
+  border-color: var(--border);
+}
+.q-grid-item--link {
+  cursor: pointer;
+}
+.q-grid-item--link:hover {
+  background-color: rgb(0 0 0 / 0.04);
+}
+.q-grid-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Contenu : vertical (icône au-dessus) ou horizontal (icône à gauche) */
+.q-grid-item__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  text-align: center;
+  min-width: 0;
+}
+.q-grid--horizontal .q-grid-item__content {
+  flex-direction: row;
+  gap: 8px;
+  text-align: left;
+}
+.q-grid--reverse .q-grid-item__content {
+  flex-direction: column-reverse;
+}
+.q-grid--horizontal.q-grid--reverse .q-grid-item__content {
+  flex-direction: row-reverse;
+}
+
+.q-grid-item__icon {
+  width: var(--q-grid-item-icon-size);
+  height: var(--q-grid-item-icon-size);
+  color: var(--q-grid-item-icon-color);
+  flex-shrink: 0;
+}
+.q-grid-item__text {
+  font-size: 12px;
+  line-height: 1.35;
+  color: inherit;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-clamp: 2;
+}
+
+/* Badge numérique + point de notification */
+.q-grid-item__badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background-color: var(--negative);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.q-grid-item__dot {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--negative);
+}
+
 /* ===== QIntersection — transitions d'apparition (reveal au scroll) ===== */
 .q-intersection-fade-enter-active,
 .q-intersection-fade-leave-active,