@dnax/ui 0.0.41 → 0.0.43

package/components/QAutocomplete.vue

@@ -393,10 +393,13 @@ const onDocMousedown = (e: MouseEvent) => {
 }
 
 onMounted(() => {
-  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown)
+  // Phase de CAPTURE (3e arg = true) : un `@mousedown.stop` plus haut dans l'arbre
+  // (contenu de QDialog / QDataGrid…) empêcherait sinon l'événement d'atteindre
+  // `document` et le popup ne se fermerait jamais au clic extérieur.
+  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown, true)
 })
 onBeforeUnmount(() => {
-  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown, true)
   window.clearTimeout(swipeCloseTimer)
 })
 

package/components/QBtnActions.vue

@@ -339,10 +339,12 @@ const menuRows = computed<MenuRow[]>(() => {
 })
 
 onMounted(() => {
-  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown)
+  // Phase de CAPTURE : sinon un `@mousedown.stop` parent (contenu de QDialog,
+  // QDataGrid…) bloque l'événement avant `document` → popup jamais fermé.
+  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown, true)
 })
 onBeforeUnmount(() => {
-  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown, true)
   disableTracking()
 })
 </script>

package/components/QCountryPicker.vue

@@ -210,13 +210,15 @@ watch(open, (v) => {
 
 onMounted(() => {
   if (typeof document !== "undefined") {
-    document.addEventListener("mousedown", onDocMousedown)
+    // Phase de CAPTURE : un `@mousedown.stop` parent (contenu de QDialog…) bloque
+    // sinon l'événement avant `document` → panneau jamais fermé au clic extérieur.
+    document.addEventListener("mousedown", onDocMousedown, true)
     document.addEventListener("keydown", onDocKeydown)
   }
 })
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") {
-    document.removeEventListener("mousedown", onDocMousedown)
+    document.removeEventListener("mousedown", onDocMousedown, true)
     document.removeEventListener("keydown", onDocKeydown)
     document.body.style.overflow = ""
   }

package/components/QDatePicker.vue

@@ -149,13 +149,15 @@ watch(open, (v) => {
 
 onMounted(() => {
   if (typeof document !== "undefined") {
-    document.addEventListener("mousedown", onDocMousedown)
+    // Phase de CAPTURE : un `@mousedown.stop` parent (contenu de QDialog…) bloque
+    // sinon l'événement avant `document` → calendrier jamais fermé au clic extérieur.
+    document.addEventListener("mousedown", onDocMousedown, true)
     document.addEventListener("keydown", onDocKeydown)
   }
 })
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") {
-    document.removeEventListener("mousedown", onDocMousedown)
+    document.removeEventListener("mousedown", onDocMousedown, true)
     document.removeEventListener("keydown", onDocKeydown)
     document.body.style.overflow = ""
   }

package/components/QFab.vue

@@ -56,12 +56,14 @@ const onDocPointerDown = (e: PointerEvent) => {
 }
 onMounted(() => {
   if (typeof document !== "undefined") {
-    document.addEventListener("pointerdown", onDocPointerDown)
+    // Phase de CAPTURE : un `@pointerdown.stop` parent bloque sinon l'événement
+    // avant `document` → actions du FAB jamais repliées au clic extérieur.
+    document.addEventListener("pointerdown", onDocPointerDown, true)
   }
 })
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") {
-    document.removeEventListener("pointerdown", onDocPointerDown)
+    document.removeEventListener("pointerdown", onDocPointerDown, true)
   }
 })
 

package/components/QNavMenu.vue

@@ -61,10 +61,12 @@ const onKeydown = (e: KeyboardEvent) => {
 }
 
 onMounted(() => {
-  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown)
+  // Phase de CAPTURE : un `@mousedown.stop` parent (contenu de QDialog…) bloque
+  // sinon l'événement avant `document` → menu jamais fermé au clic extérieur.
+  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown, true)
 })
 onBeforeUnmount(() => {
-  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown, true)
 })
 </script>
 

package/components/QSelect.vue

@@ -603,13 +603,15 @@ watch(open, (v) => {
 
 onMounted(() => {
   if (typeof document !== "undefined") {
-    document.addEventListener("mousedown", onDocMousedown)
+    // Phase de CAPTURE : un `@mousedown.stop` parent (contenu de QDialog…) bloque
+    // sinon l'événement avant `document` → popup jamais fermé au clic extérieur.
+    document.addEventListener("mousedown", onDocMousedown, true)
     document.addEventListener("keydown", onDocKeydown)
   }
 })
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") {
-    document.removeEventListener("mousedown", onDocMousedown)
+    document.removeEventListener("mousedown", onDocMousedown, true)
     document.removeEventListener("keydown", onDocKeydown)
     document.body.style.overflow = ""
   }

package/components/QSpreadsheet.vue

@@ -20,8 +20,12 @@ export type QSpreadsheetCellType =
 export interface QSpreadsheetCellOption {
   /** Valeur stockée dans la cellule */
   value: any
-  /** Libellé affiché */
-  label: string
+  /**
+   * Libellé affiché. Les nombres sont acceptés (`{ value: 1, label: 1 }` pour une
+   * note, un niveau…) : le composant les normalise en string partout où il fait des
+   * opérations de chaîne (recherche, filtre, tri, éditeur).
+   */
+  label: string | number
   /** Couleur du badge (token ou hex, ex. "positive", "#22c55e") */
   color?: string
 }
@@ -400,12 +404,18 @@ const newRowKey = (): string => {
   return `row-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
 }
 
-/** Injecte `_key` (mutatif) sur les lignes qui n'en ont pas encore */
+/**
+ * Injecte `_key` (mutatif) uniquement sur les lignes qui n'en ont pas.
+ * Une clé DÉJÀ PRÉSENTE est toujours conservée, quelle que soit sa valeur
+ * (string, nombre, uuid ou non) : l'injection ne s'applique qu'à
+ * `undefined` / `null` / chaîne vide. Aucune réécriture, aucun dédoublonnage.
+ */
 const ensureRowKeys = (rows: Record<string, any>[] | undefined) => {
   if (!Array.isArray(rows)) return
   for (const row of rows) {
     if (!row || typeof row !== "object") continue
-    if (typeof row[ROW_KEY] !== "string" || !row[ROW_KEY]) row[ROW_KEY] = newRowKey()
+    const current = row[ROW_KEY]
+    if (current === undefined || current === null || current === "") row[ROW_KEY] = newRowKey()
   }
 }
 
@@ -687,22 +697,19 @@ const editingIsFormula = computed(() => {
   if (!editing.value) return false
   const col = colOf(editing.value.column)
   if (!col || col.type === "boolean" || col.type === "select") return false
-  return draft.value.trim().startsWith("=")
+  return String(draft.value ?? "").trim().startsWith("=")
 })
 const editingIsSelect = computed(() => {
   const col = editing.value ? colOf(editing.value.column) : undefined
   return col?.type === "select"
 })
 const draftLines = computed(() =>
-  Math.min(5, Math.max(1, draft.value.split("\n").length)),
+  Math.min(5, Math.max(1, String(draft.value ?? "").split("\n").length)),
 )
 
 const editorInputType = computed(() => {
   const col = editing.value ? colOf(editing.value.column) : undefined
   switch (col?.type) {
-    case "number":
-    case "integer":
-      return "number"
     case "email":
       return "email"
     case "url":
@@ -712,15 +719,20 @@ const editorInputType = computed(() => {
     case "datetime":
       return "datetime-local"
     default:
+      // PAS de `type="number"` pour number/integer : (1) le navigateur refuse
+      // `=` (formule) ou un "-" isolé dans un input number, (2) `v-model` sur
+      // input[type=number] **caste la valeur en Number** → le brouillon n'était
+      // plus une string et tous les `.trim()` / `.split()` dessus explosaient.
+      // Le clavier numérique mobile est assuré par `inputmode` (`editorInputMode`).
       return "text"
   }
 })
 
-/** step natif : "any" (décimales) pour number, "1" pour integer */
-const editorStep = computed(() => {
+/** Équivalent mobile de `type="number"` : clavier décimal / numérique sans cast */
+const editorInputMode = computed(() => {
   const col = editing.value ? colOf(editing.value.column) : undefined
-  if (col?.type === "number") return "any"
-  if (col?.type === "integer") return "1"
+  if (col?.type === "number") return "decimal"
+  if (col?.type === "integer") return "numeric"
   return undefined
 })
 
@@ -757,7 +769,7 @@ const positionEditor = () => {
   // Une formule élargit l'éditeur (monospace ≈ 7.6px/car), sans dépasser le bord droit
   const maxW = sc.width - (tr.left - sc.left) - 4
   const ideal = editingIsFormula.value
-    ? Math.min(480, Math.max(220, draft.value.length * 7.6 + 30))
+    ? Math.min(480, Math.max(220, String(draft.value ?? "").length * 7.6 + 30))
     : tr.width
   const width = Math.min(maxW, Math.max(tr.width, ideal))
   editorStyle.value = {
@@ -1499,7 +1511,7 @@ const selectOptions = computed<QSpreadsheetCellOption[]>(() => {
   if (!editing.value) return []
   const col = colOf(editing.value.column)
   if (col?.type !== "select") return []
-  const q = draft.value.trim().toLowerCase()
+  const q = String(draft.value ?? "").trim().toLowerCase()
   return (col.options ?? []).filter(
     (o) => !q || String(o.label ?? o.value ?? "").toLowerCase().includes(q),
   )
@@ -1689,8 +1701,8 @@ const acceptFx = () => {
   const f = fxSuggestions.value[fxActive.value]
   if (!f) return
   const replaceTail = (s: string) => s.replace(/[A-Za-z]+$/, f.name + "(")
-  if (editing.value) draft.value = replaceTail(draft.value)
-  else fxDraft.value = replaceTail(fxDraft.value)
+  if (editing.value) draft.value = replaceTail(String(draft.value ?? ""))
+  else fxDraft.value = replaceTail(String(fxDraft.value ?? ""))
   fxActive.value = 0
   nextTick(() => {
     const el = editing.value
@@ -2631,7 +2643,9 @@ const onFilterSearch = (e: Event) => {
 
 onMounted(() => {
   window.addEventListener("pointerup", onPointerUpGlobal)
-  window.addEventListener("pointerdown", onDocPointerDown)
+  // Phase de CAPTURE : un `@pointerdown.stop` parent bloque sinon l'événement
+  // avant `window` → menu contextuel / filtre jamais fermé au clic extérieur.
+  window.addEventListener("pointerdown", onDocPointerDown, true)
   window.addEventListener("resize", onResize)
   nextTick(() => {
     updateViewportMetrics()
@@ -2640,7 +2654,7 @@ onMounted(() => {
 })
 onBeforeUnmount(() => {
   window.removeEventListener("pointerup", onPointerUpGlobal)
-  window.removeEventListener("pointerdown", onDocPointerDown)
+  window.removeEventListener("pointerdown", onDocPointerDown, true)
   window.removeEventListener("resize", onResize)
   endResize()
   endRowResize()
@@ -4377,7 +4391,7 @@ defineExpose({
           v-model="draft"
           class="q-spreadsheet__editor-input"
           :type="editorInputType"
-          :step="editorStep"
+          :inputmode="editorInputMode"
           :placeholder="editingCol.type === 'select' ? 'Type to filter…' : ''"
           @keydown="onEditKeydown"
           @blur="commitEdit"

package/components/QSwipeCell.vue

@@ -150,12 +150,12 @@ const onDocPointerDown = (e: PointerEvent) => {
 }
 
 watch(opened, (v) => {
-  if (v) document.addEventListener("pointerdown", onDocPointerDown)
-  else document.removeEventListener("pointerdown", onDocPointerDown)
+  if (v) document.addEventListener("pointerdown", onDocPointerDown, true)
+  else document.removeEventListener("pointerdown", onDocPointerDown, true)
 })
 
 onBeforeUnmount(() => {
-  document.removeEventListener("pointerdown", onDocPointerDown)
+  document.removeEventListener("pointerdown", onDocPointerDown, true)
   if (wrapperEl.value) wrapperEl.value.style.removeProperty("transition")
 })
 </script>

package/components/QTiptap.vue

@@ -293,12 +293,14 @@ watch(colorOpen, (open) => {
     if (e.key === "Escape") colorOpen.value = false
   }
   const close = () => { colorOpen.value = false }
-  document.addEventListener("mousedown", onDown)
+  // Phase de CAPTURE : un `@mousedown.stop` parent bloque sinon l'événement avant
+  // `document` → palette de couleurs jamais fermée au clic extérieur.
+  document.addEventListener("mousedown", onDown, true)
   document.addEventListener("keydown", onKey)
   window.addEventListener("blur", close)
   window.addEventListener("resize", close)
   return () => {
-    document.removeEventListener("mousedown", onDown)
+    document.removeEventListener("mousedown", onDown, true)
     document.removeEventListener("keydown", onKey)
     window.removeEventListener("blur", close)
     window.removeEventListener("resize", close)

package/package.json

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