@dnax/ui 0.0.40 → 0.0.42

package/components/QSpreadsheet.vue

@@ -383,12 +383,49 @@ const emit = defineEmits<{
   "structure-change": [payload: { rows: Record<string, any>[]; columns: QSpreadsheetColumn[]; reason: string }]
 }>()
 
+// ─── Clés de ligne (`_key`) ───
+/**
+ * Propriété injectée automatiquement sur chaque ligne : une clé stable (uuid) qui
+ * sert d'identité (suivre une ligne après un tri, `:key` côté parent, diff…).
+ * Elle résiste aux copies internes (`{ ...row }`), aux snapshots undo/redo et à
+ * `toJSON()` / `loadDocument()`. Le CSV et le presse-papiers ne l'exportent pas
+ * (ils n'itèrent que sur les colonnes déclarées).
+ */
+const ROW_KEY = "_key"
+
+/** uuid v4 si le contexte le permet, sinon repli horodaté (SSR, http non sécurisé…) */
+const newRowKey = (): string => {
+  const c = typeof globalThis !== "undefined" ? (globalThis.crypto as Crypto | undefined) : undefined
+  if (typeof c?.randomUUID === "function") return c.randomUUID()
+  return `row-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+}
+
+/**
+ * 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
+    const current = row[ROW_KEY]
+    if (current === undefined || current === null || current === "") row[ROW_KEY] = newRowKey()
+  }
+}
+
 // ─── Données internes (copie éditable des rows) ───
 const state = ref<Record<string, any>[]>([])
 watch(
   () => props.rows,
   (v) => {
-    if (v && v !== state.value) state.value = v.map((r) => ({ ...r }))
+    if (v && v !== state.value) {
+      // Les clés sont injectées sur les objets reçus PUIS recopiées : parent et
+      // état interne partagent les mêmes `_key`.
+      ensureRowKeys(v)
+      state.value = v.map((r) => ({ ...r }))
+    }
   },
   { immediate: true },
 )
@@ -609,7 +646,9 @@ const cellTitle = (row: number, column: string): string | undefined => {
   if (isFormulaRaw(v)) return String(v)
   if (col?.type === "select") {
     const opt = col.options?.find((o) => o.value === v)
-    return opt?.label ?? (v === null || v === undefined ? undefined : String(v))
+    // `label` peut être un nombre → `:title` attend une string
+    if (opt?.label !== undefined) return String(opt.label)
+    return v === null || v === undefined ? undefined : String(v)
   }
   return undefined
 }
@@ -654,22 +693,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":
@@ -679,15 +715,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
 })
 
@@ -698,11 +739,13 @@ const startEdit = (row: number, column: string, initial?: string) => {
   const raw = state.value[row]?.[column]
   if (col?.type === "select") {
     const opt = col.options?.find((o) => o.value === raw)
-    draft.value = initial ?? opt?.label ?? ""
+    // `label` peut être un nombre (options numériques) : `draft` alimente un
+    // <input>/<textarea> et sert à `.trim()` / `.toLowerCase()` → toujours une string.
+    draft.value = String(initial ?? opt?.label ?? "")
   } else {
     let rawStr = String(raw ?? "")
     if (rawStr.startsWith("'")) rawStr = rawStr.slice(1)
-    draft.value = initial ?? rawStr
+    draft.value = String(initial ?? rawStr)
   }
   editing.value = { row, column }
   emit("cell-edit-start", { row, column })
@@ -722,7 +765,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 = {
@@ -755,30 +798,32 @@ const cancelEdit = () => {
   nextTick(() => focusCell(cell.row, cell.column))
 }
 
-const coerceValue = (col: QSpreadsheetColumn | undefined, text: string, old: any) => {
-  const t = text.trim()
+const coerceValue = (col: QSpreadsheetColumn | undefined, text: unknown, old: any) => {
+  // `text` peut arriver brut (nombre, booléen…) : on normalise une fois pour toutes
+  const raw = String(text ?? "")
+  const t = raw.trim()
   if (t === "") return null
   // Formule A1 : conservée brute dans la cellule (booléen/select exclus)
   if (t.startsWith("=")) {
     if (col?.type === "boolean" || col?.type === "select") return old
-    return text
+    return raw
   }
   if (col?.type === "number") {
-    const n = Number(text)
+    const n = Number(raw)
     return Number.isNaN(n) ? old : n
   }
   if (col?.type === "integer") {
-    const n = Number(text)
+    const n = Number(raw)
     return Number.isNaN(n) ? old : Math.trunc(n)
   }
   if (col?.type === "boolean") {
-    return text === "true" ? true : text === "false" ? false : old
+    return raw === "true" ? true : raw === "false" ? false : old
   }
   if (col?.type === "select") {
-    const opt = col.options?.find((o) => o.label === text || String(o.value) === text)
+    const opt = col.options?.find((o) => String(o.label ?? "") === raw || String(o.value) === raw)
     return opt ? opt.value : old
   }
-  return text
+  return raw
 }
 
 const commitEdit = async () => {
@@ -970,7 +1015,8 @@ const redo = () => {
 
 // ─── Lignes & colonnes ───
 const blankRow = (): Record<string, any> => {
-  const row: Record<string, any> = {}
+  // `_key` posée dès la création : la ligne est identifiable sans attendre un emit
+  const row: Record<string, any> = { [ROW_KEY]: newRowKey() }
   for (const col of cols.value) row[col.name] = col.type === "boolean" ? false : ""
   return row
 }
@@ -1073,7 +1119,8 @@ const sortByColumn = (column?: string, desc = false) => {
     if (col?.type === "boolean") return ev ? 1 : 0
     if (col?.type === "select") {
       const opt = col.options?.find((o) => o.value === raw)
-      return (opt?.label ?? String(ev)).toLowerCase()
+      // `label` peut être numérique → toString avant comparaison
+      return String(opt?.label ?? ev ?? "").toLowerCase()
     }
     return String(ev).toLowerCase()
   }
@@ -1108,11 +1155,7 @@ const copySelection = async () => {
       let text: string
       if (col?.type === "select") {
         const opt = col.options?.find((o) => o.value === raw)
-        text = opt
-          ? opt.label
-          : raw === null || raw === undefined || raw === ""
-            ? ""
-            : String(raw)
+        text = opt ? String(opt.label ?? "") : raw === null || raw === undefined ? "" : String(raw)
       } else {
         // Formules : copie la valeur AFFICHÉE (évaluée), comme Excel
         text = cellText(r, name)
@@ -1464,9 +1507,9 @@ 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 || (o.label ?? String(o.value)).toLowerCase().includes(q),
+    (o) => !q || String(o.label ?? o.value ?? "").toLowerCase().includes(q),
   )
 })
 watch(selectOptions, () => {
@@ -1475,7 +1518,7 @@ watch(selectOptions, () => {
   }
 })
 const pickOption = (opt: QSpreadsheetCellOption) => {
-  draft.value = opt.label
+  draft.value = String(opt.label ?? "")
   commitEdit()
 }
 
@@ -1611,7 +1654,9 @@ const FORMULA_FNS: { name: string; sig: string }[] = [
   { name: "DAY", sig: "date" },
   { name: "EDATE", sig: "date, months" },
 ]
-const fxSource = computed(() => (editing.value ? draft.value : fxDraft.value))
+// La source alimente des méthodes de chaîne (`.trim()`, `.startsWith()`) :
+// la valeur brute d'une cellule peut être un nombre / booléen → on coerce.
+const fxSource = computed(() => String((editing.value ? draft.value : fxDraft.value) ?? ""))
 const fxQuery = computed(() => {
   const s = fxSource.value
   if (!s.trim().startsWith("=")) return ""
@@ -1652,8 +1697,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
@@ -2084,7 +2129,8 @@ const filterValueItems = (name: string): FilterValueItem[] => {
     if (info.blank) label = t("blanks")
     else if (col?.type === "select") {
       const opt = col.options?.find((o) => o.value === info.raw)
-      label = opt?.label ?? String(info.raw)
+      // `label` peut être numérique → normalisé (label.localeCompare plus bas)
+      label = opt?.label === undefined ? String(info.raw) : String(opt.label)
     } else label = String(info.raw)
     return { key, blank: info.blank, label, count: info.count, active: allowed ? allowed.includes(key) : true }
   })
@@ -2720,6 +2766,7 @@ const loadSheetIntoEngine = (idx: number) => {
     sheetMeta.value = { ...sheetMeta.value, [key]: ext }
   }
   cols.value = ext.cols.map((c) => ({ ...c, type: c.type ?? "text", options: c.options ?? [] }))
+  ensureRowKeys(s.rows)
   state.value = (s.rows ?? []).map((r) => ({ ...r }))
   cellFmt.value = { ...ext.formats }
   rowHeights.value = { ...ext.rowHeights }
@@ -2986,9 +3033,11 @@ const findTextOf = (r: number, ci: number): string => {
   const col = cols.value[ci]
   const raw = state.value[r]?.[col?.name ?? ""]
   if (!col) return ""
-  if (col.type === "select") {
+  if (col?.type === "select") {
     const opt = col.options?.find((o) => o.value === raw)
-    return opt?.label ?? (raw === null || raw === undefined ? "" : String(raw))
+    // `label` peut être un nombre : findScan fait `.toLowerCase()` sur le retour
+    if (opt?.label !== undefined) return String(opt.label)
+    return raw === null || raw === undefined ? "" : String(raw)
   }
   return raw === null || raw === undefined ? "" : String(raw)
 }
@@ -3123,7 +3172,7 @@ const importCsv = (text: string, opts: { delimiter?: string; headers?: boolean }
     data = rows
   }
   const rowObjs = data.map((row) => {
-    const obj: Record<string, any> = {}
+    const obj: Record<string, any> = { [ROW_KEY]: newRowKey() }
     colsArr.forEach((c, ci) => {
       obj[c.name] = ci < row.length && row[ci]!.trim() !== "" ? row[ci]! : null
     })
@@ -3895,12 +3944,14 @@ defineExpose({
       <span class="q-spreadsheet__tb-group">
         <button class="q-spreadsheet__tool" type="button" :disabled="readonly || disable" title="Add row" aria-label="Add row" @click="addRow()">
           <Icon :icon="icons.rows3" aria-hidden="true" />
+          <Icon :icon="icons.plus" class="q-spreadsheet__tool-badge" aria-hidden="true" />
         </button>
         <button class="q-spreadsheet__tool" type="button" :disabled="readonly || disable || !selRect" title="Remove selected row(s)" aria-label="Remove rows" @click="removeSelectedRows">
           <Icon :icon="icons.minus" aria-hidden="true" />
         </button>
         <button class="q-spreadsheet__tool" type="button" :disabled="readonly || disable" title="Add column" aria-label="Add column" @click="addColumn()">
           <Icon :icon="icons.columns3" aria-hidden="true" />
+          <Icon :icon="icons.plus" class="q-spreadsheet__tool-badge" aria-hidden="true" />
         </button>
         <button class="q-spreadsheet__tool" type="button" :disabled="readonly || disable || !selRect" title="Remove selected column(s)" aria-label="Remove columns" @click="removeSelectedColumns">
           <Icon :icon="icons.x" aria-hidden="true" />
@@ -4334,7 +4385,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/QTable.vue

@@ -49,6 +49,12 @@ interface Props {
   selected?: any[]
   /** Type de sélection */
   selection?: "none" | "single" | "multiple"
+  /**
+   * Réordonnancement des lignes au glisser-déposer : une gouttière apparaît à gauche
+   * (poignée à tirer, ou Alt + ↑/↓ au clavier). Chaque déplacement **agit sur
+   * `rows`** : émet `update:rows` (donc compatible `v-model:rows`) + `row-reorder`.
+   */
+  reorderableRows?: boolean
   /** Hauteur réduite */
   dense?: boolean
   /** Sans ombre */
@@ -91,6 +97,7 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: null,
   selected: undefined,
   selection: "none",
+  reorderableRows: false,
   dense: false,
   flat: false,
   bordered: false,
@@ -115,6 +122,8 @@ const emit = defineEmits<{
   "update:pagination": [value: QTablePagination]
   "update:selected": [value: any[]]
   "update:sorting": [value: { column: string; descending: boolean }]
+  "update:rows": [value: any[]]
+  "row-reorder": [payload: { rows: any[]; row: any; from: number; to: number }]
   request: [payload: { pagination: QTablePagination; getCellValue: (col: QTableColumn, row: any) => any }]
   "row-click": [event: MouseEvent, row: any, index: number]
 }>()
@@ -269,15 +278,135 @@ const onRowClick = (e: MouseEvent, row: any, index: number) => {
   emit("row-click", e, row, index)
 }
 
+// ════════ Réordonnancement des lignes (glisser depuis la gouttière) ════════
+/** Largeur de la gouttière de glissement (px) */
+const REORDER_W = 28
+
+const reorderEnabled = computed(() => !!props.reorderableRows)
+/** Gouttière affichée (0 = pas de colonne) */
+const gutterW = computed(() => (reorderEnabled.value ? REORDER_W : 0))
+
+/** Ligne en cours de glissement + position de dépôt (index VISIBLE) */
+const draggingRow = ref<any>(null)
+const dropAt = ref<{ index: number; after: boolean } | null>(null)
+
+/**
+ * Index d'une ligne dans `props.rows`. L'identité d'objet suffit : le tri
+ * (`[...rows].sort`) et la pagination (`slice`) conservent les mêmes références,
+ * et ça marche même sans `rowKey` unique.
+ */
+const sourceIndexOf = (row: any) => props.rows.indexOf(row)
+
+/** Déplace `from` juste avant/après `target` dans `rows` et émet le nouvel ordre */
+const moveRowInSource = (from: any, target: any, after: boolean) => {
+  const fi = sourceIndexOf(from)
+  const ti = sourceIndexOf(target)
+  if (fi === -1 || ti === -1 || fi === ti) return
+
+  const next = [...props.rows]
+  const [moved] = next.splice(fi, 1)
+  let to = after ? ti + 1 : ti
+  if (fi < to) to -= 1
+  next.splice(to, 0, moved)
+
+  emit("update:rows", next)
+  emit("row-reorder", { rows: next, row: moved, from: fi, to })
+}
+
+/** Ligne visée par un point de l'écran + insertion avant/après selon la moitié survolée */
+const dropTargetAt = (x: number, y: number) => {
+  const el = typeof document !== "undefined" ? document.elementFromPoint(x, y) : null
+  const tr = (el?.closest?.("tr[data-qrow]") ?? null) as HTMLElement | null
+  if (!tr) return null
+  const index = Number(tr.dataset.qrow)
+  if (!Number.isInteger(index) || !pagedRows.value[index]) return null
+  const rect = tr.getBoundingClientRect()
+  return { index, after: y > rect.top + rect.height / 2 }
+}
+
+const onReorderPointerDown = (e: PointerEvent, row: any) => {
+  if (!reorderEnabled.value || e.button !== 0) return
+  e.preventDefault() // pas de sélection de texte pendant le glissement
+  e.stopPropagation()
+  draggingRow.value = row
+  dropAt.value = null
+
+  const onMove = (ev: PointerEvent) => {
+    dropAt.value = dropTargetAt(ev.clientX, ev.clientY)
+  }
+  const onUp = () => {
+    window.removeEventListener("pointermove", onMove)
+    window.removeEventListener("pointerup", onUp)
+    window.removeEventListener("pointercancel", onUp)
+    const target = dropAt.value
+    const targetRow = target ? pagedRows.value[target.index] : null
+    if (target && targetRow) moveRowInSource(row, targetRow, target.after)
+    draggingRow.value = null
+    dropAt.value = null
+  }
+
+  window.addEventListener("pointermove", onMove)
+  window.addEventListener("pointerup", onUp)
+  window.addEventListener("pointercancel", onUp)
+}
+
+/** Déplacement clavier (Alt + ↑/↓) depuis la poignée */
+const nudgeRow = (visibleIndex: number, delta: number) => {
+  const row = pagedRows.value[visibleIndex]
+  const target = pagedRows.value[visibleIndex + delta]
+  if (!row || !target) return
+  moveRowInSource(row, target, delta > 0)
+}
+
+/** Classes d'une ligne selon le glissement en cours (source + cible) */
+const reorderRowClass = (visibleIndex: number) => [
+  draggingRow.value !== null && draggingRow.value === pagedRows.value[visibleIndex]
+    ? "q-table__row--dragging"
+    : "",
+  dropAt.value?.index === visibleIndex
+    ? dropAt.value.after
+      ? "q-table__row--drop-after"
+      : "q-table__row--drop-before"
+    : "",
+]
+
+defineExpose({
+  /**
+   * Déplace une ligne de `rows` (indices dans la source) — émet `update:rows` et
+   * `row-reorder`. Utilisable depuis un bouton « monter / descendre » :
+   * `tableRef.value?.reorderRows(2, 0)`.
+   */
+  reorderRows: (from: number, to: number) => {
+    const len = props.rows.length
+    if (from === to || from < 0 || to < 0 || from >= len || to >= len) return
+    const next = [...props.rows]
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved)
+    emit("update:rows", next)
+    emit("row-reorder", { rows: next, row: moved, from, to })
+  },
+})
+
 // — Rendu —
 const alignClass = (col: QTableColumn) =>
   col.align && col.align !== "left" ? `q-table__cell--align-${col.align}` : ""
 
 // Une colonne épinglee à gauche → la colonne de sélection s'épingle aussi (offset 0)
 const hasPinnedLeft = computed(() => props.columns.some((c) => c.pinned === "left"))
-const pinnedLeftOffset = computed(() => (props.selection !== "none" ? 36 : 0))
+const pinnedLeftOffset = computed(
+  () => gutterW.value + (props.selection !== "none" ? 36 : 0),
+)
+/** La colonne de sélection suit la gouttière de glissement quand elle est épinglée */
+const selectionPinnedStyle = computed(() =>
+  hasPinnedLeft.value && gutterW.value ? { left: `${gutterW.value}px` } : null,
+)
 
-const colspan = computed(() => props.columns.length + (props.selection !== "none" ? 1 : 0))
+const colspan = computed(
+  () =>
+    props.columns.length +
+    (props.selection !== "none" ? 1 : 0) +
+    (gutterW.value ? 1 : 0),
+)
 
 const rangeLabel = computed(() => {
   const total = sortedRows.value.length
@@ -364,10 +493,17 @@ const virtual = computed(() => {
         <thead v-if="!hideHeader">
           <slot name="header">
             <tr>
+              <th
+                v-if="reorderEnabled"
+                class="q-table__reorder-col"
+                :class="{ 'q-table__cell--pinned-left': hasPinnedLeft }"
+                aria-hidden="true"
+              ></th>
               <th
                 v-if="selection === 'multiple'"
                 class="q-table__selection-col"
                 :class="{ 'q-table__cell--pinned-left': hasPinnedLeft }"
+                :style="selectionPinnedStyle"
               >
                 <q-checkbox
                   :model-value="allSelected ? true : someSelected ? 'mixed' : false"
@@ -377,6 +513,13 @@ const virtual = computed(() => {
                   @update:model-value="toggleAll"
                 />
               </th>
+              <th
+                v-else-if="selection === 'single'"
+                class="q-table__selection-col"
+                :class="{ 'q-table__cell--pinned-left': hasPinnedLeft }"
+                :style="selectionPinnedStyle"
+                aria-hidden="true"
+              ></th>
               <th
                 v-for="col in columns"
                 :key="colName(col)"
@@ -417,12 +560,33 @@ const virtual = computed(() => {
           <tr
             v-for="(row, vi) in virtual.rows"
             :key="String(getRowKey(row, virtual.start + vi))"
+            :data-qrow="virtual.start + vi"
+            :class="reorderRowClass(virtual.start + vi)"
             @click="(e: MouseEvent) => onRowClick(e, row, virtual.start + vi)"
           >
+            <td
+              v-if="reorderEnabled"
+              class="q-table__reorder-col"
+              :class="{ 'q-table__cell--pinned-left': hasPinnedLeft }"
+              @click.stop
+            >
+              <button
+                type="button"
+                class="q-table__drag-handle"
+                title="Drag to reorder (Alt + ↑/↓)"
+                :aria-label="'Reorder row ' + (virtual.start + vi + 1)"
+                @pointerdown="onReorderPointerDown($event, row)"
+                @keydown.alt.up.prevent.stop="nudgeRow(virtual.start + vi, -1)"
+                @keydown.alt.down.prevent.stop="nudgeRow(virtual.start + vi, 1)"
+              >
+                <Icon :icon="icons.gripVertical" aria-hidden="true" />
+              </button>
+            </td>
             <td
               v-if="selection === 'multiple'"
               class="q-table__selection-col"
               :class="{ 'q-table__cell--pinned-left': hasPinnedLeft }"
+              :style="selectionPinnedStyle"
               @click.stop
             >
               <q-checkbox
@@ -436,6 +600,7 @@ const virtual = computed(() => {
               v-else-if="selection === 'single'"
               class="q-table__selection-col"
               :class="{ 'q-table__cell--pinned-left': hasPinnedLeft }"
+              :style="selectionPinnedStyle"
               @click.stop
             >
               <q-radio
@@ -476,12 +641,33 @@ const virtual = computed(() => {
         <tr
           v-for="(row, rIdx) in pagedRows"
           :key="String(getRowKey(row, rIdx))"
+          :data-qrow="rIdx"
+          :class="reorderRowClass(rIdx)"
           @click="(e: MouseEvent) => onRowClick(e, row, rIdx)"
         >
+          <td
+            v-if="reorderEnabled"
+            class="q-table__reorder-col"
+            :class="{ 'q-table__cell--pinned-left': hasPinnedLeft }"
+            @click.stop
+          >
+            <button
+              type="button"
+              class="q-table__drag-handle"
+              title="Drag to reorder (Alt + ↑/↓)"
+              :aria-label="'Reorder row ' + (rIdx + 1)"
+              @pointerdown="onReorderPointerDown($event, row)"
+              @keydown.alt.up.prevent.stop="nudgeRow(rIdx, -1)"
+              @keydown.alt.down.prevent.stop="nudgeRow(rIdx, 1)"
+            >
+              <Icon :icon="icons.gripVertical" aria-hidden="true" />
+            </button>
+          </td>
           <td
             v-if="selection === 'multiple'"
             class="q-table__selection-col"
             :class="{ 'q-table__cell--pinned-left': hasPinnedLeft }"
+            :style="selectionPinnedStyle"
             @click.stop
           >
             <q-checkbox
@@ -495,6 +681,7 @@ const virtual = computed(() => {
             v-else-if="selection === 'single'"
             class="q-table__selection-col"
             :class="{ 'q-table__cell--pinned-left': hasPinnedLeft }"
+            :style="selectionPinnedStyle"
             @click.stop
           >
             <q-radio

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
@@ -61,6 +61,7 @@
     "swiper": "^14.2.0",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0",
+    "uuid": "^14.0.2",
     "vue-router": "^5.3.0",
     "vue-sonner": "^2.0.9"
   }

package/styles/main.css

@@ -29,6 +29,23 @@ body {
   --q-radius-lg: 16px;
 }
 
+/* ===== Échelle des z-index =====
+   Règle : un menu superposé ne doit JAMAIS passer sous un overlay. Les menus
+   téléportés dans <body> sont donc au-dessus de la couche modale.
+     1000        popups en flux (`position: absolute` dans leur champ : select,
+                 autocomplete, nav-menu…) → pas concernés par les overlays
+     1999/2000   sidebar offcanvas + backdrop
+     3000        overlays modaux : dialog, bottom sheet, action sheet,
+                 date-picker, country-picker, select sheet
+     3200        menus téléportés dans <body> : panneau QBtnActions, menu
+                 contextuel / filtre / suggestions du tableur → --q-z-menu
+     4000        palettes tiptap · 7000 loading global · 9999 tooltip ·
+                 10000 image preview
+   Surchargez --q-z-menu si votre application a un overlay plus haut que 3200. */
+:root {
+  --q-z-menu: 3200;
+}
+
 /* ===== Safe-area insets (encoche & barre d'accueil) =====
    constant() : iOS 11.0–11.2 ; env() : iOS 11.2+ et navigateurs modernes.
    Sur desktop (Windows, macOS) les insets valent 0 (pas d'encoche). */
@@ -2505,7 +2522,7 @@ html.dark body {
 
 .q-btn-actions__panel {
   position: fixed;
-  z-index: 3000;
+  z-index: var(--q-z-menu, 3200);
   padding: 4px;
   background-color: #fff;
   border: 1px solid rgb(0 0 0 / 0.12);
@@ -7710,6 +7727,65 @@ a.q-breadcrumbs__el:hover {
   width: 36px;
   text-align: center;
 }
+
+/* ─── Réordonnancement des lignes (glisser depuis la gouttière) ─── */
+.q-table__table .q-table__reorder-col {
+  width: 28px;
+  padding: 0 2px;
+  text-align: center;
+}
+.q-table__drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: rgb(0 0 0 / 0.35);
+  cursor: grab;
+  user-select: none;
+  touch-action: none; /* le glissement ne doit pas partir en scroll tactile */
+}
+.q-table__drag-handle:hover {
+  color: var(--primary);
+  background: rgb(0 0 0 / 0.06);
+}
+.q-table__drag-handle:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 1px;
+}
+.q-table__drag-handle:active {
+  cursor: grabbing;
+}
+.q-table__drag-handle svg {
+  width: 14px;
+  height: 14px;
+}
+.q-table__row--dragging {
+  opacity: 0.45;
+}
+/* Ligne d'insertion : au-dessus ou en dessous de la ligne survolée */
+.q-table__row--drop-before > th,
+.q-table__row--drop-before > td {
+  box-shadow: inset 0 2px 0 0 var(--primary);
+}
+.q-table__row--drop-after > th,
+.q-table__row--drop-after > td {
+  box-shadow: inset 0 -2px 0 0 var(--primary);
+}
+.dark .q-table__drag-handle {
+  color: rgb(255 255 255 / 0.4);
+}
+.dark .q-table__drag-handle:hover {
+  background: rgb(255 255 255 / 0.08);
+}
+.q-table--dark .q-table__drag-handle {
+  color: rgb(255 255 255 / 0.4);
+}
+.q-table--dark .q-table__drag-handle:hover {
+  background: rgb(255 255 255 / 0.08);
+}
 .q-table--dark { --q-table-pinned-bg: #1d1d1d; }
 
 /* ===== QInfiniteScroll ===== */
@@ -9579,6 +9655,7 @@ a.q-breadcrumbs__el:hover {
   border-left: 1px solid var(--q-spreadsheet-border);
 }
 .q-spreadsheet__tool {
+  position: relative; /* support du badge « + » des boutons d'ajout */
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9603,6 +9680,22 @@ a.q-breadcrumbs__el:hover {
 .q-spreadsheet__tool .iconify {
   font-size: 17px;
 }
+
+/* Badge « + » des boutons d'ajout de ligne / colonne : le glyphe de fond dit
+   l'axe (rows / columns), le + dit l'action d'ajout — sans lui, l'icône seule se
+   lit comme « des lignes existantes », pas comme « ajouter une ligne ».
+   (Après `.iconify` à spécificité égale → c'est cette taille qui gagne.) */
+.q-spreadsheet__tool .q-spreadsheet__tool-badge {
+  position: absolute;
+  right: 1px;
+  bottom: 1px;
+  padding: 1px;
+  border-radius: 50%;
+  font-size: 11px;
+  background: var(--q-spreadsheet-bg, #fff);
+  color: var(--primary, #1976d2);
+  box-shadow: 0 0 0 1px var(--q-spreadsheet-border);
+}
 .q-spreadsheet--dense .q-spreadsheet__tool {
   width: 24px;
   height: 24px;
@@ -10064,7 +10157,8 @@ a.q-breadcrumbs__el:hover {
 /* ─── Menu contextuel / popup filtre (téléportés body) ─── */
 .q-spreadsheet__ctx,
 .q-spreadsheet__fpop {
-  z-index: 1300;
+  /* téléportés : au-dessus des overlays modaux (cf. échelle des z-index) */
+  z-index: var(--q-z-menu, 3200);
   min-width: 214px;
   max-width: 300px;
   padding: 5px;
@@ -10328,7 +10422,7 @@ a.q-breadcrumbs__el:hover {
 }
 .q-spreadsheet__fnsug--fx {
   position: fixed;
-  z-index: 1320;
+  z-index: calc(var(--q-z-menu, 3200) + 30);
   border: 1px solid var(--border, rgb(0 0 0 / 0.12));
   border-radius: 8px;
   box-shadow: 0 10px 26px rgb(0 0 0 / 0.16);