@dnax/ui 0.0.27 → 0.0.28

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

@@ -44,6 +44,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"
@@ -122,6 +123,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 +146,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 +158,11 @@ 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"

package/lib/icons.ts

@@ -35,4 +35,30 @@ export const icons = {
   search: "lucide:search",
   star: "lucide:star",
   x: "lucide:x",
+  // — éditeur de texte (QTiptap) —
+  undo2: "lucide:undo-2",
+  redo2: "lucide:redo-2",
+  pilcrow: "lucide:pilcrow",
+  heading1: "lucide:heading-1",
+  heading2: "lucide:heading-2",
+  heading3: "lucide:heading-3",
+  bold: "lucide:bold",
+  italic: "lucide:italic",
+  underline: "lucide:underline",
+  strikethrough: "lucide:strikethrough",
+  code: "lucide:code",
+  link: "lucide:link",
+  unlink: "lucide:unlink",
+  list: "lucide:list",
+  listOrdered: "lucide:list-ordered",
+  quote: "lucide:quote",
+  codeXml: "lucide:code-xml",
+  removeFormatting: "lucide:remove-formatting",
+  palette: "lucide:palette",
+  eraser: "lucide:eraser",
+  alignLeft: "lucide:align-left",
+  alignCenter: "lucide:align-center",
+  alignRight: "lucide:align-right",
+  listChecks: "lucide:list-checks",
+  table: "lucide:table",
 } as const

package/lib/q.ts

@@ -14,6 +14,7 @@ import QNotifyToast from "../components/QNotifyToast.vue"
 import { platform, qBreakpoints } from "./platform"
 import { screen } from "./screen"
 import { loading } from "./loading"
+import { localStorage, sessionStorage } from "./storage"
 
 export interface DialogOptions {
   /** Composant de dialogue (SFC importé) ou nom de composant global */
@@ -323,8 +324,9 @@ function notify(opts: NotifyOptions): NotifyController {
 }
 
 // API publique : $q.dialog / $q.bottomSheet / $q.notify / $q.imagePreview / $q.platform / $q.breakpoints / $q.screen / $q.loading
+// / $q.localStorage / $q.sessionStorage (stockage web typé)
 // Conventions Quasar : .open() pour les piles (dialog, bottomSheet, imagePreview),
-// .show() pour notify et loading.
+// .show() pour notify et loading ; méthodes directes pour le stockage.
 const notifyPlugin = notify as typeof notify & { show: typeof notify }
 notifyPlugin.show = notify
 
@@ -343,6 +345,8 @@ export const $q = {
   breakpoints: qBreakpoints,
   screen,
   loading,
+  localStorage,
+  sessionStorage,
 }
 
 /** Accès programmatique aux plugins ($q.dialog, $q.notify, $q.loading…) */

package/lib/storage.ts

@@ -0,0 +1,175 @@
+// $q.localStorage / $q.sessionStorage — stockage web façon Quasar
+// (https://quasar.dev/quasar-plugins/web-storage).
+//
+// Les valeurs sont sérialisées avec leur type d'origine (Date, RegExp, number,
+// boolean, string, objets/tableaux) grâce à un encodage préfixé — le format
+// `__q_*` est volontairement IDENTIQUE à celui de Quasar : des clés écrites par
+// une app Quasar restent lisibles par dnax.ui et inversement.
+//
+// Autres types (undefined, null, bigint, symbol, fonction) : stockés sous forme
+// de string (comportement Quasar).
+//
+// SSR-safe : côté serveur (ou quand le Web Storage est indisponible — mode
+// privé, iframe sandbox…), toutes les méthodes deviennent des no-op et
+// getItem/getIndex/getKey renvoient null, getAll {}, getAllKeys [].
+
+export interface QWebStorage {
+  /** true si la clé existe */
+  has(key: string): boolean
+  /** Alias de has() */
+  hasItem(key: string): boolean
+  /** Nombre de clés stockées */
+  getLength(): number
+  /** Valeur (typée) de la clé, ou null si absente */
+  getItem<T = unknown>(key: string): T | null
+  /** Valeur (typée) stockée à l'index donné (ordre du Web Storage), ou null */
+  getIndex<T = unknown>(index: number): T | null
+  /** Clé stockée à l'index donné, ou null */
+  getKey(index: number): string | null
+  /** Toutes les entrées : { clé: valeur typée } */
+  getAll(): Record<string, unknown>
+  /** Toutes les clés, dans l'ordre du Web Storage */
+  getAllKeys(): string[]
+  /** Stocke une valeur (sérialisation typée) — alias de setItem() */
+  set(key: string, value: unknown): void
+  /** Stocke une valeur (sérialisation typée) */
+  setItem(key: string, value: unknown): void
+  /** Supprime la clé — alias de removeItem() */
+  remove(key: string): void
+  /** Supprime la clé */
+  removeItem(key: string): void
+  /** Vide tout le stockage */
+  clear(): void
+  /** true si le stockage est vide */
+  isEmpty(): boolean
+}
+
+// — Sérialisation typée (format compatible Quasar) —
+// Encode : `__q_<type>|<payload>` — tout type supporté ré-encode ses données
+// pour que le Web Storage (qui ne stocke que des strings) restitue le type.
+
+function encode(value: unknown): string {
+  if (value instanceof Date) return `__q_date|${value.getTime()}`
+  if (value instanceof RegExp) return `__q_expr|${value.source}`
+  switch (typeof value) {
+    case "number": return `__q_numb|${value}`
+    case "boolean": return `__q_bool|${value ? "1" : "0"}`
+    case "string": return `__q_strn|${value}`
+    case "function": return `__q_strn|${value.toString()}`
+    case "object":
+      if (value !== null) return `__q_objt|${JSON.stringify(value)}`
+      break
+  }
+  // Type non supporté (undefined, null, bigint, symbol…) : stocké tel quel
+  // (le Web Storage le convertit en string — même résultat côté lecture).
+  return String(value)
+}
+
+const NUMBER_RE = /^-?\d+$/
+
+function decode(value: string): unknown {
+  // Valeur non encodée par nous (< préfixe, ou préfixe inconnu) : telle quelle
+  if (value.length < 9) return value
+  const type = value.slice(0, 8)
+  const source = value.slice(9)
+
+  switch (type) {
+    case "__q_date": {
+      // Horodatage numérique (format actuel) ou string ISO (anciens formats)
+      return new Date(NUMBER_RE.test(source) ? Number.parseInt(source, 10) : source)
+    }
+    case "__q_expr":
+      return new RegExp(source)
+    case "__q_numb":
+      return Number(source)
+    case "__q_bool":
+      return source === "1"
+    case "__q_strn":
+      return source
+    case "__q_objt": {
+      try {
+        return JSON.parse(source)
+      }
+      catch {
+        // Payload corrompu → valeur brute plutôt que de faire planter getItem()
+        return value
+      }
+    }
+    default:
+      return value
+  }
+}
+
+// Instance no-op pour SSR / Web Storage indisponible (miroir de Quasar :
+// getEmptyStorage) — jamais de throw ni d'accès à window.
+function emptyStorage(): QWebStorage {
+  const noop = () => {}
+  return {
+    has: () => false,
+    hasItem: () => false,
+    getLength: () => 0,
+    getItem: () => null,
+    getIndex: () => null,
+    getKey: () => null,
+    getAll: () => ({}),
+    getAllKeys: () => [],
+    set: noop,
+    setItem: noop,
+    remove: noop,
+    removeItem: noop,
+    clear: noop,
+    isEmpty: () => true,
+  }
+}
+
+function init(type: "local" | "session"): QWebStorage {
+  try {
+    if (typeof window === "undefined") return emptyStorage()
+    const ws = type === "local" ? window.localStorage : window.sessionStorage
+    if (!ws) return emptyStorage()
+
+    const get = (key: string): unknown => {
+      const item = ws.getItem(key)
+      return item === null ? null : decode(item)
+    }
+
+    return {
+      has: (key) => ws.getItem(key) !== null,
+      hasItem: (key) => ws.getItem(key) !== null,
+      getLength: () => ws.length,
+      getItem: <T = unknown>(key: string): T | null => get(key) as T | null,
+      getIndex: <T = unknown>(index: number): T | null =>
+        index < ws.length ? (get(ws.key(index) as string) as T | null) : null,
+      getKey: (index) => (index < ws.length ? ws.key(index) : null),
+      getAll: () => {
+        const result: Record<string, unknown> = {}
+        for (let i = 0; i < ws.length; i++) {
+          const key = ws.key(i) as string
+          result[key] = get(key)
+        }
+        return result
+      },
+      getAllKeys: () => {
+        const result: string[] = []
+        for (let i = 0; i < ws.length; i++) result.push(ws.key(i) as string)
+        return result
+      },
+      set: (key, value) => ws.setItem(key, encode(value)),
+      setItem: (key, value) => ws.setItem(key, encode(value)),
+      remove: (key) => ws.removeItem(key),
+      removeItem: (key) => ws.removeItem(key),
+      clear: () => ws.clear(),
+      isEmpty: () => ws.length === 0,
+    }
+  }
+  catch {
+    // Accès bloqué (mode privé, cookies désactivés…) → instance no-op
+    return emptyStorage()
+  }
+}
+
+/** $q.localStorage — stockage persistant (API Quasar Web Storage) */
+export const localStorage: QWebStorage = init("local")
+
+/** $q.sessionStorage — stockage par session (API Quasar Web Storage) */
+export const sessionStorage: QWebStorage = init("session")

package/lib/tiptap-table.ts

@@ -0,0 +1,19 @@
+// Tables Tiptap pour QTiptap — le nœud « table » est rendu par une NodeView
+// Vue (QTiptapTableView) au lieu du rendu DOM/colgroup par défaut. On garde
+// les nœuds officiels TableRow/TableHeader/TableCell (schéma, keymaps,
+// commandes) ; on ne remplace que le addNodeView de « table ».
+import { Table, TableHeader, TableCell, TableRow } from "@tiptap/extension-table"
+import { VueNodeViewRenderer } from "@tiptap/vue-3"
+import type { NodeViewProps } from "@tiptap/vue-3"
+import type { Component } from "vue"
+import QTiptapTableView from "../components/internal/QTiptapTableView.vue"
+
+export { TableHeader, TableCell, TableRow }
+
+export const QTipTapTable = Table.extend({
+  addNodeView() {
+    // defineProps(nodeViewProps) ne fait pas remonter les types vers le renderer
+    // → cast vers Component<NodeViewProps>
+    return VueNodeViewRenderer(QTiptapTableView as Component<NodeViewProps>)
+  },
+})

package/lib/tiptap-task-list.ts

@@ -0,0 +1,16 @@
+// Task list Tiptap pour QTiptap — l'élément de liste est rendu par une
+// NodeView Vue (q-checkbox dnax.ui) : on garde l'extension officielle
+// TaskItem (schéma, parse/render, keymap, input rules) et on ne remplace que
+// son addNodeView par VueNodeViewRenderer(QTiptapTaskItemView).
+import TaskList from "@tiptap/extension-task-list"
+import TaskItem from "@tiptap/extension-task-item"
+import { VueNodeViewRenderer } from "@tiptap/vue-3"
+import QTiptapTaskItemView from "../components/internal/QTiptapTaskItemView.vue"
+
+export { TaskList }
+
+export const QTipTapTaskItem = TaskItem.extend({
+  addNodeView() {
+    return VueNodeViewRenderer(QTiptapTaskItemView)
+  },
+})