@dnax/ui 0.0.43 → 0.0.44

package/lib/color.test.ts

@@ -0,0 +1,81 @@
+// Tests unitaires de la normalisation des couleurs (bun test).
+import { describe, expect, it } from "bun:test"
+import { normalizeCssColor, rgbaFromBytes } from "./color"
+
+/** Faux contexte 2D mimant un navigateur : une valeur **non reconnue** laisse `fillStyle`
+ *  inchangé (c'est cette règle qui sert à détecter une couleur invalide). */
+function fakeCtx(options: {
+  /** Sérialisation de la couleur (Chrome conserve l'espace : `oklch(…)` reste `oklch(…)`) */
+  serialize?: (value: string) => string
+  /** Lecture du pixel peint */
+  pixel?: [number, number, number, number]
+  /** Reconnaissance d'une couleur CSS */
+  recognized?: (value: string) => boolean
+}) {
+  const {
+    serialize = (v: string) => v,
+    pixel = [249, 115, 22, 255] as [number, number, number, number],
+    recognized = (v: string) => v.trim() !== "" && !/^zorglub/.test(v),
+  } = options
+  const ctx = {
+    _fill: "#000000",
+    get fillStyle() {
+      return this._fill
+    },
+    set fillStyle(value: string) {
+      if (recognized(value)) this._fill = serialize(value)
+    },
+    clearRect() {},
+    fillRect() {},
+    getImageData: () => ({ data: Uint8ClampedArray.from(pixel) }),
+  }
+  return ctx as unknown as CanvasRenderingContext2D
+}
+
+describe("rgbaFromBytes", () => {
+  it("rend `#rrggbb` pour une couleur opaque", () => {
+    expect(rgbaFromBytes(249, 115, 22, 255)).toBe("#f97316")
+    expect(rgbaFromBytes(0, 0, 0, 255)).toBe("#000000")
+  })
+  it("rend `rgba()` dès qu'il y a de la transparence", () => {
+    expect(rgbaFromBytes(0, 0, 0, 0)).toBe("rgba(0, 0, 0, 0)")
+    expect(rgbaFromBytes(0, 0, 0, 140)).toBe("rgba(0, 0, 0, 0.549)")
+    expect(rgbaFromBytes(255, 255, 255, 128)).toBe("rgba(255, 255, 255, 0.502)")
+  })
+  it("borne les octets", () => {
+    expect(rgbaFromBytes(-20, 300, 12.6, 255)).toBe("#00ff0d")
+  })
+})
+
+describe("normalizeCssColor", () => {
+  it("convertit un oklch alors même que `fillStyle` conserve l'espace colorimétrique", () => {
+    // Comportement de Chrome : la sérialisation garde `oklch(…)` — d'où le bug de survol
+    // quand on recopiait simplement `fillStyle` (zrender ne sait pas relire un oklch).
+    const ctx = fakeCtx({ serialize: (v) => (v.startsWith("oklch") ? "oklch(0.646 0.222 41.116)" : v) })
+    expect(normalizeCssColor("oklch(64.6% .222 41.116)", ctx)).toBe("#f97316")
+  })
+  it("convertit les autres syntaxes modernes et garde les formes simples", () => {
+    const ctx = fakeCtx({ serialize: (v) => (v.startsWith("oklch") ? "oklch(0.5 0.1 200)" : v) })
+    expect(normalizeCssColor("#f97316", ctx)).toBe("#f97316")
+    expect(normalizeCssColor("color-mix(in srgb, #fff 70%, transparent)", ctx)).toBe("#f97316")
+    expect(normalizeCssColor("rgb(0 0 0 / 0.55)", ctx)).toBe("#f97316")
+  })
+  it("conserve la transparence relue sur le pixel", () => {
+    const ctx = fakeCtx({ serialize: (v) => (v.startsWith("oklch") ? "oklch(0.5 0.1 200)" : v), pixel: [0, 0, 0, 140] })
+    expect(normalizeCssColor("oklch(50% .1 200 / 55%)", ctx)).toBe("rgba(0, 0, 0, 0.549)")
+  })
+  it("renvoie `undefined` pour une couleur invalide (ou un contexte absent)", () => {
+    expect(normalizeCssColor("zorglub(1)", fakeCtx({}))).toBeUndefined()
+    expect(normalizeCssColor("", fakeCtx({}))).toBeUndefined()
+    expect(normalizeCssColor({ toString: () => "#fff" } as unknown as string, fakeCtx({}))).toBeUndefined()
+    expect(normalizeCssColor("oklch(1 0 0)", null)).toBeUndefined()
+    expect(normalizeCssColor("oklch(1 0 0)", undefined)).toBeUndefined()
+  })
+  it("retombe sur la sérialisation si la lecture des pixels échoue", () => {
+    const ctx = fakeCtx({ serialize: (v) => (v.startsWith("oklch") ? "oklch(0.5 0.1 200)" : v) })
+    ;(ctx as any).getImageData = () => {
+      throw new Error("canvas illisible")
+    }
+    expect(normalizeCssColor("oklch(50% .1 200)", ctx)).toBe("oklch(0.5 0.1 200)")
+  })
+})

package/lib/color.ts

@@ -0,0 +1,60 @@
+// Normalisation des couleurs CSS → une forme que **zrender** (le moteur d'ECharts) sait
+// relire : `#rrggbb`, `rgb(a,b,c)`, `rgba(a,b,c,a)`, `hsl(h,s%,l%)` ou un nom CSS.
+//
+// Pourquoi c'est vital : au survol, ECharts **recalcule** la couleur de l'élément —
+//   `emphasisStyle.fill = liftColor(fromFill)`   (`echarts/lib/util/states.js`)
+// — et `liftColor()` s'appuie sur le parseur de zrender. Sur une couleur moderne
+// (`oklch()`, `color-mix()`, `rgb(0 0 0 / .5)` — c'est-à-dire **tous** les tokens d'un
+// thème shadcn/Docd) la fonction sort sans `return` → `undefined` → la forme est dessinée
+// sans remplissage → **l'élément survolé disparaît** (cf. `.memory/warnings.md`).
+//
+// Piège vérifié : `ctx.fillStyle = "oklch(…)"` **conserve l'espace colorimétrique** — la
+// relecture rend la même chaîne `oklch(…)`. Recopier `fillStyle` ne normalise donc rien ;
+// le seul moyen portable de convertir n'importe quelle couleur CSS en sRGB est de la
+// **peindre puis de relire les pixels** (`getImageData`).
+
+/** Sentinelles : une couleur invalide laisse `fillStyle` inchangé */
+const SENTINELS = ["#010203", "#040506"]
+
+/** Octets sRGB → CSS relisible par zrender : `#rrggbb` si opaque, sinon `rgba(…)` */
+export function rgbaFromBytes(r: number, g: number, b: number, a: number): string {
+  const clamp = (n: number) => Math.max(0, Math.min(255, Math.round(n)))
+  const byte = (n: number) => clamp(n).toString(16).padStart(2, "0")
+  // Opaque → `#rrggbb` (la forme la plus lisible) ; sinon l'alpha est conservé
+  return clamp(a) === 255
+    ? `#${byte(r)}${byte(g)}${byte(b)}`
+    : `rgba(${clamp(r)}, ${clamp(g)}, ${clamp(b)}, ${+(clamp(a) / 255).toFixed(3)})`
+}
+
+/** Couleur CSS → `#rrggbb` / `rgba(…)`, ou `undefined` si elle est invalide (ou sans
+ *  contexte). `ctx` doit être un contexte 2D **1×1** : le canvas ne sert qu'à ça. */
+export function normalizeCssColor(
+  value: any,
+  ctx: CanvasRenderingContext2D | null | undefined,
+): string | undefined {
+  if (!ctx || typeof value !== "string" || value.trim() === "") return undefined
+  // La couleur est-elle reconnue par le navigateur ? (`fillStyle` inchangé = invalide)
+  let known = false
+  for (const sentinel of SENTINELS) {
+    ctx.fillStyle = sentinel
+    ctx.fillStyle = value
+    if (ctx.fillStyle !== sentinel) {
+      known = true
+      break
+    }
+  }
+  if (!known) return undefined
+  try {
+    // Peindre la couleur puis relire le pixel : conversion **indépendante de l'espace
+    // colorimétrique** (le seul moyen de sortir un oklch/color-mix en sRGB).
+    ctx.clearRect(0, 0, 1, 1)
+    ctx.fillStyle = value
+    ctx.fillRect(0, 0, 1, 1)
+    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data
+    return rgbaFromBytes(r ?? 0, g ?? 0, b ?? 0, a ?? 0)
+  } catch {
+    // Canvas illisible (contexte perdu, rendu logiciel…) : on retombe sur la
+    // sérialisation du navigateur — imparfaite, mais c'est le comportement historique.
+    return typeof ctx.fillStyle === "string" ? ctx.fillStyle : undefined
+  }
+}

package/lib/datePicker.test.ts

@@ -0,0 +1,122 @@
+// Tests unitaires du placement du panneau ancré (mode `popover` de QDatePicker).
+import { describe, expect, it } from "bun:test"
+import {
+  POPOVER_CARET_INSET,
+  POPOVER_FALLBACK_WIDTH,
+  POPOVER_GAP,
+  POPOVER_VIEWPORT_MARGIN,
+  placePopover,
+} from "./datePicker"
+
+const viewport = { width: 1280, height: 800 }
+
+/** Champ de 320px de large, centré horizontalement */
+const anchorAt = (top: number, left = 400, width = 320) => ({
+  top,
+  bottom: top + 40,
+  left,
+  width,
+})
+
+describe("placePopover", () => {
+  it("ouvre sous le champ quand la place est suffisante", () => {
+    const p = placePopover({ anchor: anchorAt(100), viewport })
+
+    expect(p.direction).toBe("down")
+    expect(p.top).toBe(140 + POPOVER_GAP)
+    expect(p.bottom).toBeNull()
+    // 800 - 140 - 8 = 652 px visibles sous le champ, moins l'écart
+    expect(p.maxHeight).toBe(800 - 140 - POPOVER_VIEWPORT_MARGIN - POPOVER_GAP)
+  })
+
+  it("bascule au-dessus du champ quand le bas manque de place", () => {
+    const p = placePopover({ anchor: anchorAt(700), viewport })
+
+    expect(p.direction).toBe("up")
+    expect(p.top).toBeNull()
+    // Bord bas : distance entre le bas de la fenêtre et le haut du champ, plus l'écart
+    expect(p.bottom).toBe(800 - 700 + POPOVER_GAP)
+    expect(p.maxHeight).toBe(700 - POPOVER_VIEWPORT_MARGIN - POPOVER_GAP)
+  })
+
+  it("reste en dessous quand les deux côtés sont à égalité", () => {
+    // 380px de chaque côté : `below >= above` tranche pour le bas
+    const p = placePopover({ anchor: anchorAt(380), viewport })
+    expect(p.direction).toBe("down")
+  })
+
+  it("recadre le panneau dans la fenêtre sur un champ collé à droite", () => {
+    const p = placePopover({
+      anchor: anchorAt(100, 1150, 320),
+      viewport,
+      panelWidth: 360,
+    })
+
+    // 1280 - 360 - 8 = 912 : le panneau ne dépasse pas le bord droit
+    expect(p.left).toBe(912)
+    // La flèche suit le centre du champ, ramenée à 16px du coin droit
+    expect(p.caret).toBe(360 - POPOVER_CARET_INSET)
+  })
+
+  it("colle le panneau au bord gauche et suit le centre du champ", () => {
+    const p = placePopover({
+      anchor: anchorAt(100, 0, 200),
+      viewport,
+      panelWidth: 360,
+    })
+
+    expect(p.left).toBe(POPOVER_VIEWPORT_MARGIN)
+    // Centre du champ (100) → 92px depuis le bord gauche du panneau (8)
+    expect(p.caret).toBe(100 - POPOVER_VIEWPORT_MARGIN)
+  })
+
+  it("ramène la flèche dans le panneau quand le champ sort par la gauche", () => {
+    const p = placePopover({
+      anchor: anchorAt(100, -500, 200),
+      viewport,
+      panelWidth: 360,
+    })
+
+    expect(p.left).toBe(POPOVER_VIEWPORT_MARGIN)
+    expect(p.caret).toBe(POPOVER_CARET_INSET)
+  })
+
+  it("utilise la largeur de repli tant que le panneau n'est pas mesuré", () => {
+    const p = placePopover({ anchor: anchorAt(100), viewport })
+    expect(p.left + POPOVER_FALLBACK_WIDTH).toBeLessThanOrEqual(
+      viewport.width - POPOVER_VIEWPORT_MARGIN,
+    )
+  })
+
+  it("borne la largeur à la fenêtre et garde la flèche dans le panneau", () => {
+    const p = placePopover({
+      anchor: anchorAt(100, 0, 300),
+      viewport: { width: 320, height: 800 },
+      panelWidth: 520,
+    })
+
+    // Largeur utile = 320 - 2 × 8 = 304
+    expect(p.left).toBe(POPOVER_VIEWPORT_MARGIN)
+    expect(p.caret).toBeGreaterThanOrEqual(POPOVER_CARET_INSET)
+    expect(p.caret).toBeLessThanOrEqual(304 - POPOVER_CARET_INSET)
+  })
+
+  it("réduit l'écart et borne la hauteur quand la place manque en bas", () => {
+    // Fenêtre courte : 202px sous le champ (< 220px visés), plus qu'au-dessus
+    const p = placePopover({ anchor: anchorAt(170), viewport: { width: 1280, height: 420 }, gap: 24 })
+
+    expect(p.direction).toBe("down")
+    // L'écart demandé (24px) est rogné : plus de place au panneau
+    expect(p.top).toBe(210)
+    expect(p.maxHeight).toBe(420 - 210 - POPOVER_VIEWPORT_MARGIN)
+  })
+
+  it("ne renvoie jamais une hauteur négative", () => {
+    // Fenêtre plus courte que les marges : tout est dégénéré mais reste utilisable
+    const p = placePopover({ anchor: anchorAt(0), viewport: { width: 8, height: 0 } })
+
+    expect(p.maxHeight).toBeGreaterThanOrEqual(0)
+    expect(p.left).toBe(POPOVER_VIEWPORT_MARGIN)
+    expect(p.caret).toBeGreaterThanOrEqual(POPOVER_CARET_INSET)
+  })
+})

package/lib/datePicker.ts

@@ -0,0 +1,114 @@
+// Placement pur d'un panneau ancré à un champ — mode `popover` de QDatePicker.
+//
+// Aucune dépendance au DOM : le SFC mesure les rectangles (champ + fenêtre) et
+// sérialise le résultat en `position: fixed` ; ce module décide **où**. La règle est
+// la même que celle du popup `inline` de QSelect : ouverture vers le bas, bascule
+// au-dessus quand la place manque, écart réduit à mesure que la place se réduit, et
+// hauteur bornée à l'espace visible (le panneau scrolle au-delà).
+
+/** Marge conservée avec les bords de la fenêtre */
+export const POPOVER_VIEWPORT_MARGIN = 8
+
+/** Écart par défaut entre le champ et le panneau */
+export const POPOVER_GAP = 8
+
+/** Espace vertical visé sous le champ — en dessous, on cherche la place au-dessus */
+export const POPOVER_MIN_SPACE = 220
+
+/** Largeur de repli tant que le panneau n'a pas été mesuré (1er rendu) */
+export const POPOVER_FALLBACK_WIDTH = 360
+
+/** Marge minimale de la flèche avec les coins du panneau */
+export const POPOVER_CARET_INSET = 16
+
+/** Rectangle du champ d'ancrage (coordonnées fenêtre) */
+export interface PopoverAnchor {
+  top: number
+  bottom: number
+  left: number
+  width: number
+}
+
+/** Fenêtre visible */
+export interface PopoverViewport {
+  width: number
+  height: number
+}
+
+export interface PlacePopoverOptions {
+  /** Rectangle du champ auquel le panneau s'ancre */
+  anchor: PopoverAnchor
+  viewport: PopoverViewport
+  /** Largeur réelle du panneau (mesurée après rendu) */
+  panelWidth?: number
+  /** Écart champ ↔ panneau (8px par défaut) */
+  gap?: number
+  /** Marge fenêtre (8px par défaut) */
+  margin?: number
+  /** Espace vertical minimal visé (220px par défaut) */
+  minSpace?: number
+}
+
+export interface PopoverPlacement {
+  /** Côté d'ouverture : `down` sous le champ, `up` au-dessus */
+  direction: "down" | "up"
+  /** Bord haut en `position: fixed` — `null` quand le panneau s'ouvre au-dessus */
+  top: number | null
+  /** Bord bas en `position: fixed` — `null` quand le panneau s'ouvre en dessous */
+  bottom: number | null
+  /** Bord gauche, recadré dans la fenêtre */
+  left: number
+  /** Hauteur maximale du panneau (au-delà : scroll interne) */
+  maxHeight: number
+  /** Position de la flèche, depuis le bord gauche du panneau */
+  caret: number
+}
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), Math.max(min, max))
+
+/**
+ * Place un panneau ancré sous un champ et renvoie ses coordonnées `position: fixed`.
+ * Le côté (dessous / dessus), l'écart, la hauteur maximale et le recadrage horizontal
+ * dépendent de l'espace réellement visible dans la fenêtre.
+ */
+export function placePopover(options: PlacePopoverOptions): PopoverPlacement {
+  const { anchor, viewport, panelWidth = POPOVER_FALLBACK_WIDTH } = options
+  const gap0 = options.gap ?? POPOVER_GAP
+  const margin = options.margin ?? POPOVER_VIEWPORT_MARGIN
+  const minSpace = options.minSpace ?? POPOVER_MIN_SPACE
+
+  const below = viewport.height - anchor.bottom - margin
+  const above = anchor.top - margin
+
+  // Sous le champ dès qu'il y a la place ; sinon on prend le côté le plus large.
+  const down = below >= minSpace || below >= above
+  const available = Math.max(down ? below : above, 0)
+
+  // Écart réduit quand la place manque, pour laisser le maximum au panneau
+  const gap = clamp(gap0, 0, Math.max(available - minSpace, 0))
+
+  // Largeur : jamais plus large que la fenêtre (moins les deux marges)
+  const width = Math.min(panelWidth, Math.max(viewport.width - margin * 2, 0))
+
+  // Ancre horizontale : bord gauche du champ, recadré dans la fenêtre
+  const left = Math.round(clamp(anchor.left, margin, viewport.width - width - margin))
+
+  // Flèche : centrée sur le champ, maintenue à distance des coins
+  const caret = Math.round(
+    clamp(
+      anchor.left + anchor.width / 2 - left,
+      POPOVER_CARET_INSET,
+      width - POPOVER_CARET_INSET,
+    ),
+  )
+
+  return {
+    direction: down ? "down" : "up",
+    top: down ? Math.round(anchor.bottom + gap) : null,
+    bottom: down ? null : Math.round(viewport.height - anchor.top + gap),
+    left,
+    maxHeight: Math.round(Math.max(available - gap, 0)),
+    caret,
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
@@ -22,14 +22,6 @@
     "vue": "^3.5.41"
   },
   "dependencies": {
-    "@editorjs/checklist": "^1.6.0",
-    "@editorjs/code": "^2.9.4",
-    "@editorjs/delimiter": "^1.4.2",
-    "@editorjs/editorjs": "^2.31.6",
-    "@editorjs/header": "^2.8.9",
-    "@editorjs/list": "^2.0.9",
-    "@editorjs/paragraph": "^2.11.7",
-    "@editorjs/quote": "^2.7.6",
     "@iconify/vue": "^5.0.1",
     "@nuxt/kit": "4.5.2",
     "@tiptap/extension-bubble-menu": "^3.31.3",
@@ -53,6 +45,7 @@
     "arktype": "^2.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "echarts": "^6.1.0",
     "embla-carousel": "^8.5.0",
     "embla-carousel-vue": "^8.5.0",
     "fuse.js": "^7.1.0",

package/scripts/generate-exports.ts

@@ -56,6 +56,19 @@ export type { OverlayHandle } from "./lib/overlayBack"
 export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
 export { vRipple } from "./lib/ripple"
 export type { RippleOptions, RippleValue } from "./lib/ripple"
+export { chartToECharts, channelValue, pickFromEvent, tableModel, textValue } from "./lib/chart"
+export type {
+  QChartAxis,
+  QChartChannel,
+  QChartColumn,
+  QChartConfig,
+  QChartLegend,
+  QChartMark,
+  QChartMarkType,
+  QChartOrientation,
+  QChartTable,
+  QChartPick,
+} from "./lib/chart"
 export { vTouchPan } from "./lib/touchPan"
 export type { PanDetails, TouchPanHandler, PanDirection } from "./lib/touchPan"
 export { vTouchHold } from "./lib/touchHold"