@dnax/ui 0.0.28 → 0.0.29

package/lib/intersection.ts

@@ -0,0 +1,118 @@
+// v-intersection — directive : appelle un handler quand l'élément entre /
+// sort du viewport (Intersection Observer), équivalent Quasar
+// https://quasar.dev/vue-directives/intersection
+//
+// Usage :
+//   <div v-intersection="onEnter">…</div>
+//   <div v-intersection.once="onFirstEnter">…</div>
+//   <div v-intersection="{ handler, cfg: { rootMargin: '0px', threshold: 0.2 } }">…</div>
+//   <div v-intersection="false">…</div>   (désactive l'observation)
+//
+// Le handler reçoit un IntersectionObserverEntry. Les éléments partageant les
+// mêmes options (cfg) utilisent le même IntersectionObserver sous le capot.
+
+export type IntersectionValue =
+  | ((entry: IntersectionObserverEntry) => void)
+  | { handler: (entry: IntersectionObserverEntry) => void; cfg?: IntersectionObserverInit }
+  | false
+  | undefined
+  | null
+
+type PoolEntry = {
+  key: string
+  observer: IntersectionObserver
+  elements: Set<Element>
+}
+
+type QElement = HTMLElement & {
+  __qIntersection?: {
+    key: string
+    observer: IntersectionObserver
+    handler: (e: IntersectionObserverEntry) => void
+    once: boolean
+    raw: IntersectionValue
+  }
+}
+
+const pool = new Map<string, PoolEntry>()
+
+function getPoolEntry(cfg: IntersectionObserverInit): PoolEntry {
+  const key = JSON.stringify([
+    cfg.rootMargin ?? "0px",
+    cfg.threshold ?? 0,
+    cfg.root === null ? null : cfg.root instanceof Element ? (cfg.root as Element).id || "" : String(cfg.root),
+  ])
+  let entry = pool.get(key)
+  if (!entry) {
+    const elements = new Set<Element>()
+    const observer = new IntersectionObserver((entries) => {
+      for (const e of entries) {
+        const rec = (e.target as QElement).__qIntersection
+        if (!rec) continue
+        if (rec.once && e.isIntersecting) {
+          rec.handler(e)
+          unobserve(e.target as QElement)
+          continue
+        }
+        rec.handler(e)
+      }
+    }, cfg)
+    entry = { key, observer, elements }
+    pool.set(key, entry)
+  }
+  return entry
+}
+
+function unobserve(el: QElement) {
+  const rec = el.__qIntersection
+  if (!rec) return
+  const entry = pool.get(rec.key)
+  el.__qIntersection = undefined
+  rec.observer.unobserve(el)
+  if (entry) {
+    entry.elements.delete(el)
+    if (entry.elements.size === 0) {
+      entry.observer.disconnect()
+      pool.delete(rec.key)
+    }
+  }
+}
+
+function apply(el: HTMLElement, value: IntersectionValue, once = false) {
+  const target = el as QElement
+  if (target.__qIntersection) unobserve(target)
+  if (!value) return
+
+  let handler: (entry: IntersectionObserverEntry) => void
+  let cfg: IntersectionObserverInit = { root: null, rootMargin: "0px", threshold: 0 }
+
+  if (typeof value === "function") {
+    handler = value
+  }
+  else if (typeof value === "object") {
+    handler = value.handler
+    if (value.cfg) cfg = { ...value.cfg }
+  }
+  else {
+    return
+  }
+
+  const entry = getPoolEntry(cfg)
+  target.__qIntersection = { key: entry.key, observer: entry.observer, handler, once, raw: value }
+  entry.elements.add(el)
+  entry.observer.observe(el)
+}
+
+export const vIntersection = {
+  mounted(el: HTMLElement, binding: { value?: IntersectionValue; modifiers?: Record<string, boolean> }) {
+    apply(el, binding.value, !!binding.modifiers?.once)
+  },
+  updated(el: HTMLElement, binding: { value?: IntersectionValue; modifiers?: Record<string, boolean> }) {
+    const rec = (el as QElement).__qIntersection
+    if (rec && rec.raw === binding.value) return
+    apply(el, binding.value, !!binding.modifiers?.once)
+  },
+  unmounted(el: HTMLElement) {
+    unobserve(el as QElement)
+  },
+}

package/lib/spreadsheet.test.ts

@@ -0,0 +1,92 @@
+// Tests unitaires des helpers purs du tableur (bun test).
+import { describe, expect, it } from "bun:test"
+import {
+  colLetter,
+  colFromLetters,
+  isBlankValue,
+  isoAddDays,
+  shiftFormulaRefs,
+  csvEscape,
+  csvSplitLine,
+  parseCsv,
+  deriveCols,
+} from "./spreadsheet"
+
+describe("lettres de colonnes", () => {
+  it("colLetter : 0→A, 25→Z, 26→AA, 27→AB, 701→ZZ, 702→AAA", () => {
+    expect(colLetter(0)).toBe("A")
+    expect(colLetter(25)).toBe("Z")
+    expect(colLetter(26)).toBe("AA")
+    expect(colLetter(27)).toBe("AB")
+    expect(colLetter(701)).toBe("ZZ")
+    expect(colLetter(702)).toBe("AAA")
+  })
+  it("colFromLetters est l'inverse", () => {
+    expect(colFromLetters("A")).toBe(0)
+    expect(colFromLetters("AA")).toBe(26)
+    expect(colFromLetters("zz")).toBe(701)
+    for (let i = 0; i < 200; i++) expect(colFromLetters(colLetter(i))).toBe(i)
+  })
+})
+
+describe("shiftFormulaRefs (autofill)", () => {
+  it("décale les références relatives de (dr,dc)", () => {
+    expect(shiftFormulaRefs("=B1*C1", 1, 0)).toBe("=B2*C2")
+    expect(shiftFormulaRefs("=A1", 0, 2)).toBe("=C1")
+  })
+  it("préserve les $ absolus", () => {
+    expect(shiftFormulaRefs("=$B$1+A1", 2, 0)).toBe("=$B$1+A3")
+    expect(shiftFormulaRefs("=$B1+B$1", 1, 1)).toBe("=$B2+C$1")
+  })
+  it("décale les plages entières", () => {
+    expect(shiftFormulaRefs("=SUM(D1:D4)", 1, 0)).toBe("=SUM(D2:D5)")
+  })
+  it("laisse les valeurs sans lettres intactes", () => {
+    expect(shiftFormulaRefs("=1+2", 1, 1)).toBe("=1+2")
+  })
+})
+
+describe("dates ISO", () => {
+  it("isoAddDays", () => {
+    expect(isoAddDays("2026-09-07", 1)).toBe("2026-09-08")
+    expect(isoAddDays("2026-09-07", -7)).toBe("2026-08-31")
+    expect(isoAddDays("2026-12-31", 1)).toBe("2027-01-01")
+  })
+  it("isBlankValue", () => {
+    expect(isBlankValue(null)).toBe(true)
+    expect(isBlankValue(undefined)).toBe(true)
+    expect(isBlankValue("")).toBe(true)
+    expect(isBlankValue(0)).toBe(false)
+    expect(isBlankValue("0")).toBe(false)
+  })
+})
+
+describe("CSV", () => {
+  it("csvEscape quote si nécessaire", () => {
+    expect(csvEscape("simple", ",")).toBe("simple")
+    expect(csvEscape("a,b", ",")).toBe('"a,b"')
+    expect(csvEscape('say "hi"', ",")).toBe('"say ""hi"""')
+    expect(csvEscape("ligne\nsuivante", ";")).toBe('"ligne\nsuivante"')
+    expect(csvEscape(null, ",")).toBe("")
+  })
+  it("csvSplitLine gère les guillemets doublés et les délimiteurs", () => {
+    expect(csvSplitLine('a,"b,c",d', ",")).toEqual(["a", "b,c", "d"])
+    expect(csvSplitLine('"x""y",z', ",")).toEqual(['x"y', "z"])
+    expect(csvSplitLine("a;b", ";")).toEqual(["a", "b"])
+  })
+  it("parseCsv : multiligne, quotes, CRLF", () => {
+    const text = 'h1,h2\r\n"a,1","b""2"\r\nc,d\n'
+    expect(parseCsv(text)).toEqual([
+      ["h1", "h2"],
+      ["a,1", 'b"2'],
+      ["c", "d"],
+    ])
+  })
+  it("deriveCols déduit les colonnes des clés", () => {
+    expect(deriveCols([{ a: 1, b: "x" }, { b: 2, c: true }])).toEqual([
+      { name: "a", type: "text" },
+      { name: "b", type: "text" },
+      { name: "c", type: "text" },
+    ])
+  })
+})

package/lib/spreadsheet.ts

@@ -0,0 +1,175 @@
+// Helpers purs du tableur QSpreadsheet — extraits du composant pour être
+// testables unitairement (bun test). Aucune dépendance DOM / Vue.
+
+/** Index de colonne (0-based) → lettres Excel : 0 → "A", 25 → "Z", 26 → "AA" */
+export const colLetter = (i: number): string => {
+  let n = i
+  let s = ""
+  while (n >= 0) {
+    s = String.fromCharCode(65 + (n % 26)) + s
+    n = Math.floor(n / 26) - 1
+  }
+  return s
+}
+
+/** Lettres Excel → index de colonne 0-based : "A" → 0, "AA" → 26 */
+export const colFromLetters = (s: string): number => {
+  let n = 0
+  for (const ch of s.toUpperCase()) n = n * 26 + (ch.charCodeAt(0) - 64)
+  return n - 1
+}
+
+/** Cellule « vide » : null, undefined ou chaîne vide */
+export const isBlankValue = (v: any): boolean =>
+  v === null || v === undefined || v === ""
+
+/**
+ * Décale les références A1 non absolues d'une formule de (dr, dc) —
+ * plages incluses, `$` préservés (copie / autofill).
+ */
+export const shiftFormulaRefs = (src: string, dr: number, dc: number): string =>
+  src.replace(
+    /(\$?)([A-Za-z]{1,3})(\$?)(\d+)/g,
+    (_m: string, ca: string, L: string, ra: string, D: string) => {
+      const col = colFromLetters(L) + (ca === "$" ? 0 : dc)
+      const row = Number(D) - 1 + (ra === "$" ? 0 : dr)
+      if (col < 0 || row < 0) return _m
+      return ca + colLetter(col) + ra + (row + 1)
+    },
+  )
+
+/** Date ISO AAAA-MM-JJ */
+export const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/
+
+/** Ajoute des jours à une date ISO (UTC, évite le décalage de fuseau) */
+export const isoAddDays = (iso: string, days: number): string => {
+  const d = new Date(iso + "T00:00:00Z")
+  d.setUTCDate(d.getUTCDate() + days)
+  return d.toISOString().slice(0, 10)
+}
+
+/** Échappe une valeur pour un CSV (quote si délimiteur / guillemet / newline) */
+export const csvEscape = (s: unknown, delim: string): string => {
+  const str = s === null || s === undefined ? "" : String(s)
+  return str.includes(delim) || str.includes('"') || /[\n\r]/.test(str)
+    ? '"' + str.replace(/"/g, '""') + '"'
+    : str
+}
+
+/**
+ * Décode une ligne CSV (guillemets doublés, délimiteur multi-caractère géré
+ * comme un caractère unique ; retourne les cellules décodées).
+ */
+export const csvSplitLine = (line: string, delim = ","): string[] => {
+  const out: string[] = []
+  let cur = ""
+  let inQ = false
+  let i = 0
+  const isDelim = (at: number) => line.startsWith(delim, at)
+  while (i < line.length) {
+    const ch = line[i]!
+    if (inQ) {
+      if (ch === '"') {
+        if (line[i + 1] === '"') {
+          cur += '"'
+          i += 2
+          continue
+        }
+        inQ = false
+        i++
+        continue
+      }
+      cur += ch
+      i++
+      continue
+    }
+    if (ch === '"') {
+      inQ = true
+      i++
+      continue
+    }
+    if (isDelim(i)) {
+      out.push(cur)
+      cur = ""
+      i += delim.length
+      continue
+    }
+    cur += ch
+    i++
+  }
+  out.push(cur)
+  return out
+}
+
+/**
+ * Parse un texte CSV complet (CRLF ou LF, guillemets) en lignes de cellules.
+ */
+export const parseCsv = (text: string, delim = ","): string[][] => {
+  const lines: string[][] = []
+  const current: string[] = []
+  let cell = ""
+  let inQ = false
+  let sawDelim = false
+  let i = 0
+  const isDelim = (at: number) => text.startsWith(delim, at)
+  const pushCell = () => {
+    current.push(cell)
+    cell = ""
+  }
+  while (i < text.length) {
+    const ch = text[i]!
+    if (inQ) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') {
+          cell += '"'
+          i += 2
+          continue
+        }
+        inQ = false
+        i++
+        continue
+      }
+      cell += ch
+      i++
+      continue
+    }
+    if (ch === '"') {
+      inQ = true
+      i++
+      continue
+    }
+    if (isDelim(i)) {
+      pushCell()
+      sawDelim = true
+      i += delim.length
+      continue
+    }
+    if (ch === "\n") {
+      pushCell()
+      lines.push(current.splice(0))
+      sawDelim = false
+      i++
+      continue
+    }
+    if (ch === "\r") {
+      // les retours \r\n sont déjà gérés par le \n
+      i++
+      continue
+    }
+    cell += ch
+    i++
+  }
+  pushCell()
+  const onlyTrailingNewline = current.length === 1 && current[0] === "" && !sawDelim
+  if (lines.length === 0 || !onlyTrailingNewline) lines.push(current)
+  return lines
+}
+
+/** Colonnes déduites des clés d'un jeu de lignes (type texte) */
+export const deriveCols = (
+  rows: Record<string, any>[],
+): { name: string; type: "text" }[] => {
+  const keys = new Set<string>()
+  for (const r of rows) Object.keys(r).forEach((k) => keys.add(k))
+  return [...keys].map((k) => ({ name: k, type: "text" as const }))
+}

package/lib/useComponentProps.ts

@@ -1,6 +1,7 @@
 import { computed, inject, toValue } from "vue"
 import type { ComputedRef, MaybeRefOrGetter } from "vue"
 import { qConfigKey } from "./config"
+import type { QAppLang } from "./config"
 
 /** Échelle de rayon : none (carré) → lg (très arrondi) */
 export type RadiusScale = "none" | "xs" | "sm" | "md" | "lg"
@@ -19,6 +20,12 @@ export const RADIUS_VALUES: Record<RadiusScale, string> = {
 export const isRadiusScale = (v: unknown): v is RadiusScale =>
   v === "none" || v === "xs" || v === "sm" || v === "md" || v === "lg"
 
+/** Langue d'application fournie par QConfigProvider ("en" par défaut). */
+export function useConfigLang(): ComputedRef<QAppLang> {
+  const config = inject(qConfigKey, null)
+  return computed(() => config?.lang.value ?? "en")
+}
+
 /**
  * Props par défaut d'un composant depuis `theme.componentProps` :
  * `default` (appliqué à tous) puis `<Nom>` (spécifique, prioritaire).

package/module.ts

@@ -97,6 +97,7 @@ import { vTouchPan } from "@dnax/ui/runtime"
 import { vTouchHold } from "@dnax/ui/runtime"
 import { vTouchSwipe } from "@dnax/ui/runtime"
 import { vTouchRepeat } from "@dnax/ui/runtime"
+import { vIntersection } from "@dnax/ui/runtime"
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.directive("close", vClose)
@@ -104,6 +105,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.directive("touch-hold", vTouchHold)
   nuxtApp.vueApp.directive("touch-swipe", vTouchSwipe)
   nuxtApp.vueApp.directive("touch-repeat", vTouchRepeat)
+  nuxtApp.vueApp.directive("intersection", vIntersection)
 })
 `,
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
@@ -50,11 +50,13 @@
     "@tiptap/vue-3": "^3.31.3",
     "@videojs/html": "^10.0.0-beta.32",
     "@vueuse/core": "^14.4.0",
+    "arktype": "^2.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel": "^8.5.0",
     "embla-carousel-vue": "^8.5.0",
     "fuse.js": "^7.1.0",
+    "moment": "^2.30.1",
     "shiki": "^3.0.0",
     "swiper": "^14.2.0",
     "tailwind-merge": "^3.6.0",

package/scripts/generate-exports.ts

@@ -62,6 +62,8 @@ export { vTouchSwipe } from "./lib/touchSwipe"
 export type { TouchSwipeDetails, TouchSwipeHandler, SwipeDirection } from "./lib/touchSwipe"
 export { vTouchRepeat } from "./lib/touchRepeat"
 export type { TouchRepeatDetails, TouchRepeatHandler } from "./lib/touchRepeat"
+export { vIntersection } from "./lib/intersection"
+export type { IntersectionValue } from "./lib/intersection"
 `
 
 await Bun.write(indexFile, `${exports}\n${manualExports}`)