@dnax/ui 0.0.27 → 0.0.29

package/components/internal/QTiptapTableView.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+// QTiptapTableView — NodeView Vue du nœud « table » : rend un vrai <table>
+// avec le contentDOM ProseMirror dans le <tbody>. Les rangées/cellules restent
+// du contenu ProseMirror classique (sélection, merge/split, clavier).
+// Ajouts maison : colgroup + poignées de redimensionnement de colonnes
+// (drag), appliqué localement via des largeurs en % (non persistées dans le
+// document — pour persister il faudrait écrire les attrs colwidth des cellules).
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { nodeViewProps, NodeViewContent, NodeViewWrapper } from "@tiptap/vue-3"
+
+const props = defineProps(nodeViewProps)
+
+// Nombre de colonnes = largeur de la première rangée (les suivantes suivent
+// les rowspans/colspans du schéma).
+const cols = computed(() => {
+  const first = props.node?.firstChild
+  return first ? first.childCount : 0
+})
+
+// Largeurs en % (initialement égales) ; recalculees quand le nombre de
+// colonnes change (ajout/suppression).
+const widths = ref<number[]>([])
+watch(
+  cols,
+  (count) => {
+    if (count === widths.value.length) return
+    const each = count > 0 ? 100 / count : 0
+    widths.value = Array.from({ length: count }, () => each)
+  },
+  { immediate: true },
+)
+
+// — Drag de redimensionnement (poignées entre colonnes) —
+const tableEl = ref<HTMLElement | null>(null)
+let dragging = false
+let boundary = 0
+let startX = 0
+let leftStart = 0
+let rightStart = 0
+let tableWidth = 0
+
+const onMove = (event: PointerEvent) => {
+  if (!dragging) return
+  const delta = event.clientX - startX
+  const minPx = 48
+  let leftPx = leftStart + delta
+  let rightPx = rightStart - delta
+  if (leftPx < minPx) {
+    rightPx -= minPx - leftPx
+    leftPx = minPx
+  }
+  if (rightPx < minPx) {
+    leftPx -= minPx - rightPx
+    rightPx = minPx
+  }
+  if (leftPx < minPx || rightPx < minPx) return
+  const total = tableWidth || 1
+  const next = [...widths.value]
+  next[boundary - 1] = (leftPx / total) * 100
+  next[boundary] = (rightPx / total) * 100
+  widths.value = next
+}
+
+const onUp = () => {
+  dragging = false
+  window.removeEventListener("pointermove", onMove)
+  window.removeEventListener("pointerup", onUp)
+}
+
+const startResize = (event: PointerEvent, boundaryIndex: number) => {
+  if (!props.editor.isEditable) return
+  event.preventDefault()
+  const table = tableEl.value
+  if (!table) return
+  const row = table.querySelector("tr")
+  if (!row) return
+  const leftCell = row.children[boundaryIndex - 1] as HTMLElement | undefined
+  const rightCell = row.children[boundaryIndex] as HTMLElement | undefined
+  if (!leftCell || !rightCell) return
+  tableWidth = table.getBoundingClientRect().width || 1
+  leftStart = leftCell.getBoundingClientRect().width
+  rightStart = rightCell.getBoundingClientRect().width
+  startX = event.clientX
+  boundary = boundaryIndex
+  dragging = true
+  window.addEventListener("pointermove", onMove)
+  window.addEventListener("pointerup", onUp)
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener("pointermove", onMove)
+  window.removeEventListener("pointerup", onUp)
+})
+
+// Position d'une poignée (bord droit de la colonne index) en %
+const boundaryLeft = (index: number) => {
+  const acc = widths.value.slice(0, index).reduce((sum, w) => sum + w, 0)
+  return Math.min(acc, 99.5)
+}
+</script>
+
+<template>
+  <node-view-wrapper as="div" class="q-tiptap__table-wrapper">
+    <table ref="tableEl" class="q-tiptap__table" :class="{ 'q-tiptap__table--resizable': editor.isEditable }">
+      <colgroup v-if="widths.length">
+        <col v-for="(width, i) in widths" :key="i" :style="{ width: width + '%' }" />
+      </colgroup>
+      <node-view-content as="tbody" />
+    </table>
+
+    <!-- Poignées de redimensionnement entre les colonnes (éditable seulement) -->
+    <span
+      v-for="index in Math.max(cols - 1, 0)"
+      :key="'handle-' + index"
+      class="q-tiptap__resize-handle"
+      :style="{ left: boundaryLeft(index) + '%' }"
+      role="separator"
+      aria-orientation="vertical"
+      :aria-label="'Resize column ' + index"
+      @pointerdown.prevent.stop="startResize($event, index)"
+    />
+  </node-view-wrapper>
+</template>

package/components/internal/QTiptapTaskItemView.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// QTiptapTaskItemView — NodeView Vue du nœud « taskItem » : rend une vraie
+// <q-checkbox> dnax.ui (au lieu du <input> natif du DOM par défaut).
+// Le nœud est fourni par l'extension officielle TaskItem (schéma, keymap
+// Enter/Tab, input rules "[ ]" / "[x]") dont on ne remplace que addNodeView.
+//
+// ⚠ NodeView Vue : la RACINE DOIT être <node-view-wrapper> (erreur Tiptap
+// « Please use the NodeViewWrapper component » sinon). En v3 ce wrapper ne
+// propage pas les attrs → data-checked/class cochée portés par le div interne
+// qui contient <node-view-content> (le contentDOM peut être imbriqué).
+import { nodeViewProps, NodeViewContent, NodeViewWrapper } from "@tiptap/vue-3"
+import QCheckbox from "../QCheckbox.vue"
+
+// nodeViewProps : descripteurs runtime officiels (editor, node, updateAttributes,
+// getPos…) — pattern documenté pour les NodeViews Vue dans Tiptap.
+const props = defineProps(nodeViewProps)
+
+const checked = () => !!props.node.attrs.checked
+const isEditable = () => props.editor.isEditable
+
+const onToggle = (value: unknown) => {
+  if (!isEditable()) return
+  if (typeof props.getPos !== "function") return
+  props.editor.chain().focus().command(({ tr }) => {
+    const position = props.getPos()
+    if (typeof position !== "number") return false
+    const current = tr.doc.nodeAt(position)
+    tr.setNodeMarkup(position, undefined, { ...current?.attrs, checked: Boolean(value) })
+    return true
+  }).run()
+}
+</script>
+
+<template>
+  <node-view-wrapper as="li">
+    <label class="q-tiptap__task-check" contenteditable="false" @mousedown.prevent>
+      <q-checkbox
+        :model-value="checked()"
+        dense
+        :disable="!isEditable()"
+        aria-label="Task done"
+        @update:model-value="onToggle"
+      />
+    </label>
+    <div class="q-tiptap__task-content" :class="{ 'q-tiptap__task-content--checked': checked() }">
+      <node-view-content />
+    </div>
+  </node-view-wrapper>
+</template>

package/index.ts

@@ -9,6 +9,8 @@ export { default as QAvatar } from "./components/QAvatar.vue"
 export { default as QBackHeader } from "./components/QBackHeader.vue"
 export { default as QBackTop } from "./components/QBackTop.vue"
 export { default as QBadge } from "./components/QBadge.vue"
+export { default as QBar } from "./components/QBar.vue"
+export { default as QBoard } from "./components/QBoard.vue"
 export { default as QBottomSheet } from "./components/QBottomSheet.vue"
 export { default as QBottomSheetFooter } from "./components/QBottomSheetFooter.vue"
 export { default as QBottomSheetHeader } from "./components/QBottomSheetHeader.vue"
@@ -44,6 +46,7 @@ export { default as QDialogFooter } from "./components/QDialogFooter.vue"
 export { default as QDialogHeader } from "./components/QDialogHeader.vue"
 export { default as QDialogProvider } from "./components/QDialogProvider.vue"
 export { default as QDialogTrigger } from "./components/QDialogTrigger.vue"
+export { default as QEditorJs } from "./components/QEditorJs.vue"
 export { default as QFab } from "./components/QFab.vue"
 export { default as QFabAction } from "./components/QFabAction.vue"
 export { default as QFilePicker } from "./components/QFilePicker.vue"
@@ -63,6 +66,7 @@ export { default as QInput } from "./components/QInput.vue"
 export { default as QInputOtp } from "./components/QInputOtp.vue"
 export { default as QInputPassword } from "./components/QInputPassword.vue"
 export { default as QInputTag } from "./components/QInputTag.vue"
+export { default as QInteract } from "./components/QInteract.vue"
 export { default as QIntersection } from "./components/QIntersection.vue"
 export { default as QItem } from "./components/QItem.vue"
 export { default as QItemSection } from "./components/QItemSection.vue"
@@ -110,6 +114,7 @@ export { default as QSlider } from "./components/QSlider.vue"
 export { default as QSpace } from "./components/QSpace.vue"
 export { default as QSpinner } from "./components/QSpinner.vue"
 export { default as QSplitter } from "./components/QSplitter.vue"
+export { default as QSpreadsheet } from "./components/QSpreadsheet.vue"
 export { default as QSticky } from "./components/QSticky.vue"
 export { default as QSwipeCell } from "./components/QSwipeCell.vue"
 export { default as QSwiper } from "./components/QSwiper.vue"
@@ -122,6 +127,7 @@ export { default as QTable } from "./components/QTable.vue"
 export { default as QTabs } from "./components/QTabs.vue"
 export { default as QText } from "./components/QText.vue"
 export { default as QTextCaption } from "./components/QTextCaption.vue"
+export { default as QTiptap } from "./components/QTiptap.vue"
 export { default as QToolbar } from "./components/QToolbar.vue"
 export { default as QTooltip } from "./components/QTooltip.vue"
 export { default as QUploader } from "./components/QUploader.vue"
@@ -144,6 +150,8 @@ export { screen } from "./lib/screen"
 export type { QScreen } from "./lib/screen"
 export { loading } from "./lib/loading"
 export type { LoadingOptions, QLoadingPlugin } from "./lib/loading"
+export { localStorage, sessionStorage } from "./lib/storage"
+export type { QWebStorage } from "./lib/storage"
 export {
   registerOverlay,
   unregisterOverlay,
@@ -154,3 +162,13 @@ export {
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
 export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
+export { vTouchPan } from "./lib/touchPan"
+export type { PanDetails, TouchPanHandler, PanDirection } from "./lib/touchPan"
+export { vTouchHold } from "./lib/touchHold"
+export type { TouchHoldDetails, TouchHoldHandler } from "./lib/touchHold"
+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"

package/lib/config.ts

@@ -14,10 +14,14 @@ export interface QThemeColors {
   warning?: string
 }
 
+export type QAppLang = "en" | "fr"
+
 export interface QTheme {
   /** Mode clair/sombre : light | dark | system (défaut : system = préférence OS) */
   mode?: ThemeMode
   colors?: QThemeColors
+  /** Langue par défaut appliquée aux composants qui la supportent */
+  lang?: QAppLang
   /** Props par défaut par composant (clé = nom du composant, ex. "QBtn") */
   componentProps?: Record<string, Record<string, unknown>>
 }
@@ -26,6 +30,8 @@ export interface QConfigContext {
   theme: Ref<QTheme>
   /** true si le mode effectif est sombre (résout "system") */
   isDark: Readonly<Ref<boolean>>
+  /** Langue de l'application ("en" par défaut) */
+  lang: Readonly<Ref<QAppLang>>
 }
 
 export const qConfigKey: InjectionKey<QConfigContext> = Symbol("q-config")

package/lib/formula.test.ts

@@ -0,0 +1,206 @@
+// Tests unitaires du moteur de formules A1 (bun test).
+import { describe, expect, it } from "bun:test"
+import { evaluateFormula, isError } from "./formula"
+import type { FormulaValue } from "./formula"
+
+type Grid = (string | number | boolean | null)[][]
+
+function harness(grid: Grid, formulaRow = 0) {
+  return (f: string): FormulaValue =>
+    evaluateFormula(f, {
+      row: formulaRow,
+      resolveField: () => undefined,
+      resolveCell: (r, c) => {
+        const row = grid[r]
+        return row && c >= 0 && c < row.length
+          ? (row[c] as FormulaValue | undefined)
+          : undefined
+      },
+    })
+}
+
+describe("opérateurs & références", () => {
+  const grid: Grid = [
+    [1, 2, 3],
+    [10, 20, 30],
+  ]
+  const e = harness(grid)
+  it("arithmétique et parenthèses", () => {
+    expect(e("=1+2*3")).toBe(7)
+    expect(e("=(1+2)*3")).toBe(9)
+    expect(e("=2^3")).toBe(8)
+    expect(e("=10%")).toBe(0.1)
+    expect(e("=200*10%")).toBe(20)
+  })
+  it("références A1 / plages / concat", () => {
+    expect(e("=A1+B1")).toBe(3)
+    expect(e("=A2*C1")).toBe(30)
+    expect(e('="x"&A1')).toBe("x1")
+  })
+  it("comparaisons", () => {
+    expect(e("=B2>B1")).toBe(true)
+    expect(e('=A1="1"')).toBe(true)
+  })
+  it("référence hors grille → #REF!", () => {
+    expect(String(e("=Z99"))).toBe("#REF!")
+  })
+  it("division par zéro → #DIV/0!", () => {
+    expect(String(e("=1/0"))).toBe("#DIV/0!")
+  })
+})
+
+describe("fonctions agrégation", () => {
+  const grid: Grid = [
+    [5, "x", 10],
+    [null, 2, 3],
+  ]
+  const e = harness(grid)
+  it("SUM / AVERAGE / MIN / MAX sur plages", () => {
+    expect(e("=SUM(A1:C2)")).toBe(20)
+    expect(e("=AVERAGE(A1,C1,C2)")).toBe(6)
+    expect(e("=MIN(A1:C2)")).toBe(2)
+    expect(e("=MAX(A1:C2)")).toBe(10)
+  })
+  it("COUNT compte les nombres, COUNTA les non-vides", () => {
+    expect(e("=COUNT(A1:C2)")).toBe(4)
+    expect(e("=COUNTA(A1:C2)")).toBe(5)
+  })
+})
+
+describe("fonctions logiques (lazy)", () => {
+  const e = harness([[]])
+  it("IF n'évalue que la branche prise", () => {
+    expect(e("=IF(1,1,1/0)")).toBe(1)
+    expect(e('=IF(0,1,"no")')).toBe("no")
+  })
+  it("IFS premier vrai", () => {
+    expect(e('=IFS(1>2,"a",1<2,"b")')).toBe("b")
+    expect(String(e("=IFS(0,1)"))).toBe("#N/A")
+  })
+  it("SWITCH avec défaut", () => {
+    expect(e('=SWITCH(2,1,"un",2,"deux","autre")')).toBe("deux")
+    expect(e('=SWITCH(9,1,"un","autre")')).toBe("autre")
+  })
+  it("IFERROR / IFNA", () => {
+    expect(e('=IFERROR(1/0,"ko")')).toBe("ko")
+    expect(e('=IFERROR(2,"ko")')).toBe(2)
+  })
+  it("AND / OR / NOT", () => {
+    expect(e("=AND(1,1>0)")).toBe(true)
+    expect(e("=OR(0,1=1)")).toBe(true)
+    expect(e("=NOT(0)")).toBe(true)
+  })
+})
+
+describe("VLOOKUP", () => {
+  const grid: Grid = [
+    ["A", 1, "x"],
+    ["B", 2, "y"],
+    ["A", 3, "z"],
+  ]
+  const e = harness(grid)
+  it("recherche exacte dans la 1re colonne", () => {
+    expect(e('=VLOOKUP("B",A1:C3,2)')).toBe(2)
+    expect(e('=VLOOKUP("A",A1:C3,3)')).toBe("x")
+  })
+  it("absence → #N/A, colonne hors plage → #REF!", () => {
+    expect(String(e('=VLOOKUP("Z",A1:C3,2)'))).toBe("#N/A")
+    expect(String(e('=VLOOKUP("A",A1:C3,5)'))).toBe("#REF!")
+  })
+  it("pas une plage → #VALUE!", () => {
+    expect(String(e('=VLOOKUP("A",A1,2)'))).toBe("#VALUE!")
+  })
+})
+
+describe("XLOOKUP + dates avancées", () => {
+  const grid: Grid = [
+    ["A", 1, "x"],
+    ["B", 2, "y"],
+    ["A", 3, "z"],
+  ]
+  const e = harness(grid)
+  it("XLOOKUP retourne la cellule correspondante du range retour", () => {
+    expect(e('=XLOOKUP("B",A1:A3,B1:B3)')).toBe(2)
+    expect(e('=XLOOKUP("A",A1:A3,C1:C3)')).toBe("x")
+  })
+  it("XLOOKUP fallback / #N/A", () => {
+    expect(String(e('=XLOOKUP("Z",A1:A3,B1:B3,"?")'))).toBe("?")
+    expect(String(e('=XLOOKUP("Z",A1:A3,B1:B3)'))).toBe("#N/A")
+  })
+  it("WEEKDAY / EOMONTH / DATEDIF / TEXT", () => {
+    const d = harness([[]])
+    // 2026-09-07 = lundi
+    expect(d('=WEEKDAY("2026-09-07",2)')).toBe(1)
+    expect(d('=EOMONTH("2026-01-15",0)')).toBe("2026-01-31")
+    expect(d('=DATEDIF("2026-01-01","2026-02-10","D")')).toBe(40)
+    expect(d('=TEXT(1.5,"0.00")')).toBe("1.50")
+    expect(d('=TEXT(0.12,"0%")')).toBe("12%")
+    expect(d('=TEXT("2026-09-07","YYYY-MM-DD")')).toBe("2026-09-07")
+  })
+})
+
+describe("fonctions texte", () => {
+  const e = harness([[]])
+  it("LEFT / RIGHT / MID", () => {
+    expect(e('=LEFT("Hello",2)')).toBe("He")
+    expect(e('=RIGHT("Hello",2)')).toBe("lo")
+    expect(e('=MID("Hello",2,3)')).toBe("ell")
+  })
+  it("FIND / SUBSTITUTE / REPLACE / CONCAT", () => {
+    expect(e('=FIND("llo","Hello")')).toBe(3)
+    expect(e('=SUBSTITUTE("a-b-a","a","x",2)')).toBe("a-b-x")
+    expect(e('=SUBSTITUTE("a-b-a","a","x")')).toBe("x-b-x")
+    expect(e('=REPLACE("Hello",1,2,"XY")')).toBe("XYllo")
+    expect(e('=CONCATENATE("a",1)')).toBe("a1")
+  })
+  it("UPPER / LOWER / TRIM / LEN", () => {
+    expect(e('=UPPER("aB")')).toBe("AB")
+    expect(e('=TRIM("  x  ")')).toBe("x")
+    expect(e('=LEN("abc")')).toBe(3)
+  })
+})
+
+describe("fonctions dates", () => {
+  const e = harness([[]])
+  it("DATE construit en UTC", () => {
+    expect(e("=DATE(2026,9,7)")).toBe("2026-09-07")
+  })
+  it("YEAR / MONTH / DAY", () => {
+    expect(e('=YEAR("2026-09-07")')).toBe(2026)
+    expect(e('=MONTH("2026-09-07")')).toBe(9)
+    expect(e('=DAY("2026-09-07")')).toBe(7)
+  })
+  it("EDATE", () => {
+    expect(e('=EDATE("2026-01-15",1)')).toBe("2026-02-15")
+  })
+  it("TODAY / NOW / RAND sont valides", () => {
+    const t = e("=TODAY()")
+    expect(typeof t).toBe("string")
+    expect(String(t)).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+    const r = e("=RAND()")
+    expect(typeof r).toBe("number")
+    expect(Number(r)).toBeGreaterThanOrEqual(0)
+    expect(Number(r)).toBeLessThan(1)
+  })
+})
+
+describe("math & erreurs de type", () => {
+  const e = harness([[]])
+  it("ABS / ROUND / INT / MOD / SQRT / POWER", () => {
+    expect(e("=ABS(-4)")).toBe(4)
+    expect(e("=ROUND(1.234,2)")).toBe(1.23)
+    expect(e("=INT(-3.7)")).toBe(-3)
+    expect(e("=MOD(7,3)")).toBe(1)
+    expect(e("=SQRT(16)")).toBe(4)
+    expect(e("=POWER(2,3)")).toBe(8)
+  })
+  it("#NAME? pour une fonction inconnue", () => {
+    expect(String(e("=NOPE(1)"))).toBe("#NAME?")
+  })
+  it("#VALUE! pour du texte en numéro", () => {
+    expect(String(e('=1+"a"'))).toBe("#VALUE!")
+  })
+  it("isError détecte FormulaError", () => {
+    expect(isError(e("=1/0"))).toBe(true)
+  })
+})