@dnax/ui 0.0.70 → 0.0.72

package/components/QSpreadsheet.vue

@@ -4,7 +4,8 @@
 // édition en place (Entrée / F2 / double-clic / frappe directe),
 // lignes & colonnes (ajouter / insérer / supprimer),
 // tri, copier/coller, undo/redo, et cellules typées
-// (texte, nombre, entier, booléen, date, datetime, select / multiselect avec badges colorés).
+// texte, nombre, entier, booléen, date, datetime, **time (heure)**, select / multiselect avec
+// badges colorés).
 // Suivi des modifications : `v-model:dirty` (état) + `v-model:changes` (delta lignes / feuilles
 // ajoutées, modifiées, supprimées), calculé en comparant le document à une **référence**
 // (`lib/spreadsheetChanges.ts`).
@@ -44,6 +45,7 @@ export type QSpreadsheetCellType =
   | "boolean"
   | "date"
   | "datetime"
+  | "time"
   | "select"
   | "multiselect"
 
@@ -185,6 +187,9 @@ import {
   isBlankValue,
   ISO_DATE,
   isoAddDays,
+  normalizeTime,
+  secondsToTime,
+  timeToSeconds,
   shiftFormulaRefs,
   functionQueryAt,
   rankSuggestions,
@@ -777,6 +782,8 @@ const moveSelection = (dr: number, dc: number, extend = false) => {
 const escAttr = (s: string) => String(s).replace(/"/g, '\\"')
 const scrollEl = ref<HTMLElement | null>(null)
 const rootEl = ref<HTMLElement | null>(null)
+/** Racine du composant (pour distinguer un clic intérieur d'un clic extérieur) */
+const rootRef = ref<HTMLElement | null>(null)
 const setGridRef = (el: unknown) => {
   rootEl.value = (el as HTMLElement) ?? null
   scrollEl.value = (el as HTMLElement) ?? null
@@ -877,6 +884,8 @@ const cellText = (row: number, column: string): string => {
   let out: any = ev === null || ev === undefined ? "" : ev
   // Apostrophe littérale (paste values) : affichée sans le préfixe
   if (typeof out === "string" && out.startsWith("'")) out = out.slice(1)
+  // Heure : toujours `HH:MM` à l'affichage (données importées ou anciennes comprises)
+  if (col?.type === "time" && typeof out === "string") out = normalizeTime(out) ?? out
   if (col?.format && out !== "") out = col.format(out, state.value[row] ?? {})
   if (out === null || out === undefined || out === "") return ""
   return String(out)
@@ -988,6 +997,8 @@ const editorInputType = computed(() => {
       return "date"
     case "datetime":
       return "datetime-local"
+    case "time":
+      return "time"
     default:
       // PAS de `type="number"` pour number/integer : (1) le navigateur refuse
       // `=` (formule) ou un "-" isolé dans un input number, (2) `v-model` sur
@@ -1022,6 +1033,8 @@ const startEdit = (row: number, column: string, initial?: string) => {
   } else {
     let rawStr = String(raw ?? "")
     if (rawStr.startsWith("'")) rawStr = rawStr.slice(1)
+    // Heure : l'input natif n'accepte que `HH:MM` — on normalise dès l'ouverture
+    if (col?.type === "time") rawStr = normalizeTime(rawStr) ?? rawStr
     draft.value = String(initial ?? rawStr)
   }
   editing.value = { row, column }
@@ -1099,6 +1112,11 @@ const coerceValue = (col: QSpreadsheetColumn | undefined, text: unknown, old: an
   if (col?.type === "boolean") {
     return raw === "true" ? true : raw === "false" ? false : old
   }
+  if (col?.type === "time") {
+    // Heure valide → `HH:MM` (`HH:MM:SS` si les secondes sont non nulles) ; invalide → ancienne
+    const time = normalizeTime(raw)
+    return time === undefined ? old : time
+  }
   if (col?.type === "select") {
     const opt = cellOptionsOf(col).find(
       (o) => String(o.label ?? "") === raw || String(o.value) === raw,
@@ -1122,7 +1140,7 @@ const coerceValue = (col: QSpreadsheetColumn | undefined, text: unknown, old: an
   return raw
 }
 
-const commitEdit = async () => {
+const commitEdit = async (options: { focus?: boolean } = {}) => {
   if (!editing.value) return
   const { row, column } = editing.value
   const col = colOf(column)
@@ -1133,7 +1151,10 @@ const commitEdit = async () => {
   const next = col?.type === "multiselect" ? old : coerceValue(col, text, old)
   editing.value = null
   emit("cell-edit-end", { row, column, canceled: false })
-  nextTick(() => focusCell(row, column))
+  // Le focus n'est **pas** restauré par défaut : un `blur` (clic hors de la grille)
+  // ne doit pas voler le focus à l'élément cliqué. Seuls les appels internes qui le
+  // demandent explicitement (`pickOption`) le font.
+  if (options.focus) nextTick(() => focusCell(row, column))
   if (next !== old) await validateAndSet(row, column, old, next)
 }
 
@@ -1898,7 +1919,8 @@ watch(selectOptions, () => {
 })
 const pickOption = (opt: QSpreadsheetCellOption) => {
   draft.value = String(opt.label ?? "")
-  commitEdit()
+  // Choix fait **dans** la liste : le focus revient utilement à la cellule
+  commitEdit({ focus: true })
 }
 
 /** Valeur courante (tableau) de la cellule à choix multiples en cours d'édition */
@@ -2787,6 +2809,13 @@ const onColContext = (ci: number, e: MouseEvent) => {
 const onDocPointerDown = (e: PointerEvent) => {
   const t = e.target as HTMLElement
   if (!t || !t.closest) return
+  // Un clic **hors de l'éditeur** ferme l'édition — sans lui voler le focus :
+  // le `blur` ne suffit pas si la cible n'est pas focusable (fond de page, `<div>`…).
+  // Condition : ne rien faire seulement si le clic est dans **notre** éditeur (une autre
+  // instance du tableur peut avoir le sien ouvert).
+  if (editing.value && !(rootRef.value?.contains(t) && t.closest(".q-spreadsheet__editor"))) {
+    commitEdit()
+  }
   if (
     (ctxMenu.value && !t.closest(".q-spreadsheet__ctx")) ||
     (filterMenu.value && !t.closest(".q-spreadsheet__fpop") && !t.closest(".q-spreadsheet__fbtn"))
@@ -3065,6 +3094,19 @@ const applyFill = () => {
           const d1 = +new Date(s1 + "T00:00:00Z")
           const step = Math.round((d1 - d0) / 86400000)
           if (step !== 0) val = isoAddDays(s1, step * (rr - b.r1))
+        } else if (
+          b.r1 > b.r0 &&
+          col?.type === "time" &&
+          typeof s0 === "string" &&
+          typeof s1 === "string"
+        ) {
+          // Série d'heures : 09:00 puis 10:00 → 11:00, 12:00… (modulo 24 h)
+          const t0 = timeToSeconds(s0)
+          const t1 = timeToSeconds(s1)
+          if (t0 !== undefined && t1 !== undefined && t1 !== t0) {
+            const step = (t1 - t0) / (b.r1 - b.r0)
+            val = secondsToTime(t1 + step * (rr - b.r1))
+          }
         }
       } else if (
         !fillCopy.value &&
@@ -3081,6 +3123,18 @@ const applyFill = () => {
         if (b.c1 > b.c0 && typeof s0 === "number" && typeof s1 === "number" && s1 !== s0) {
           const step = (s1 - s0) / (b.c1 - b.c0)
           val = s1 + step * (cc - b.c1)
+        } else if (
+          b.c1 > b.c0 &&
+          col?.type === "time" &&
+          typeof s0 === "string" &&
+          typeof s1 === "string"
+        ) {
+          const t0 = timeToSeconds(s0)
+          const t1 = timeToSeconds(s1)
+          if (t0 !== undefined && t1 !== undefined && t1 !== t0) {
+            const step = (t1 - t0) / (b.c1 - b.c0)
+            val = secondsToTime(t1 + step * (cc - b.c1))
+          }
         }
       }
       // Recopie du motif (source cyclique) — vers le bas, la droite, le haut,
@@ -4576,7 +4630,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="q-spreadsheet" :class="rootClasses" :style="radiusStyle(effectiveRadius)">
+  <div ref="rootRef" class="q-spreadsheet" :class="rootClasses" :style="radiusStyle(effectiveRadius)">
     <!-- ═══════ Onglets de feuilles (classeur, haut) ═══════ -->
     <div
       v-if="sheetsMode && sheetsPosition === 'top'"
@@ -5111,7 +5165,7 @@ defineExpose({
           @keyup="syncEditCaret"
           @click="syncEditCaret"
           @keydown="onEditKeydown"
-          @blur="commitEdit"
+          @blur="commitEdit()"
         />
         <input
           v-else
@@ -5122,7 +5176,7 @@ defineExpose({
           :inputmode="editorInputMode"
           :placeholder="editingIsSelect ? 'Type to filter…' : editingIsMulti ? 'Filter options…' : ''"
           @keydown="onEditKeydown"
-          @blur="commitEdit"
+          @blur="commitEdit()"
         />
         <div v-if="editingIsFormula && fxHint && !fxOpen" class="q-spreadsheet__fxhint q-spreadsheet__fxhint--editor">
           <strong>{{ fxHint.name }}</strong>(<template v-for="(arg, i) in fxHint.args" :key="i"><span

package/lib/spreadsheet.test.ts

@@ -14,8 +14,47 @@ import {
   csvSplitLine,
   parseCsv,
   deriveCols,
+  normalizeTime,
+  parseTimeOfDay,
+  secondsToTime,
+  timeToSeconds,
 } from "./spreadsheet"
 
+describe("heures (type `time`)", () => {
+  it("décompose les formes usuelles", () => {
+    expect(parseTimeOfDay("09:30")).toEqual({ hours: 9, minutes: 30, seconds: 0 })
+    expect(parseTimeOfDay("9h5")).toEqual({ hours: 9, minutes: 5, seconds: 0 })
+    expect(parseTimeOfDay("9")).toEqual({ hours: 9, minutes: 0, seconds: 0 })
+    expect(parseTimeOfDay("23:59:58")).toEqual({ hours: 23, minutes: 59, seconds: 58 })
+    // vide → cellule effacée ; null/undefined → pas une heure
+    expect(parseTimeOfDay("")).toBeNull()
+    expect(parseTimeOfDay(null)).toBeUndefined()
+  })
+
+  it("refuse les heures invalides", () => {
+    for (const value of ["24:00", "9:75", "9:30:75", "abc", "1:2:3:4", "-1:00"]) {
+      expect(parseTimeOfDay(value), value).toBeUndefined()
+    }
+  })
+
+  it("normalise en `HH:MM` (secondes conservées si non nulles)", () => {
+    expect(normalizeTime("9:5")).toBe("09:05")
+    expect(normalizeTime("9h30")).toBe("09:30")
+    expect(normalizeTime("09:30:00")).toBe("09:30")
+    expect(normalizeTime("09:30:07")).toBe("09:30:07")
+    expect(normalizeTime("")).toBeNull()
+    expect(normalizeTime("nope")).toBeUndefined()
+  })
+
+  it("séries d'heures : secondes, modulo 24 h, valeurs négatives", () => {
+    expect(timeToSeconds("01:00")).toBe(3600)
+    expect(secondsToTime(3600)).toBe("01:00")
+    expect(secondsToTime(25 * 3600)).toBe("01:00")
+    expect(secondsToTime(-3600)).toBe("23:00")
+    expect(secondsToTime(3661)).toBe("01:01:01")
+  })
+})
+
 describe("lettres de colonnes", () => {
   it("colLetter : 0→A, 25→Z, 26→AA, 27→AB, 701→ZZ, 702→AAA", () => {
     expect(colLetter(0)).toBe("A")

package/lib/spreadsheet.ts

@@ -247,6 +247,74 @@ export const isoAddDays = (iso: string, days: number): string => {
   return d.toISOString().slice(0, 10)
 }
 
+/** Heure du jour : `HH:MM` ou `HH:MM:SS` (toujours sur deux chiffres) */
+export const TIME_OF_DAY = /^\d{2}:\d{2}(?::\d{2})?$/
+
+/**
+ * Décompose une **heure** saisie librement. Accepte `9`, `09:30`, `9:5`, `9h30`, `09:30:15`.
+ *
+ * - `null` → chaîne vide (cellule effacée) ;
+ * - `undefined` → ce n'est pas une heure valide (`24:00`, `9:75`, `abc`…).
+ *
+ * Le parsing est volontairement **local** (pas de `Date`) : aucune conversion de fuseau ne
+ * doit intervenir sur une heure de la journée.
+ */
+export function parseTimeOfDay(
+  value: any,
+): { hours: number; minutes: number; seconds: number } | null | undefined {
+  if (value === null || value === undefined) return undefined
+  const raw = String(value).trim()
+  if (raw === "") return null
+  const match = raw.match(/^(\d{1,2})(?:[:h](\d{1,2}))?(?::(\d{1,2}))?$/i)
+  if (!match) return undefined
+  const hours = Number(match[1])
+  const minutes = match[2] === undefined ? 0 : Number(match[2])
+  const seconds = match[3] === undefined ? 0 : Number(match[3])
+  if (
+    !Number.isInteger(hours) ||
+    !Number.isInteger(minutes) ||
+    !Number.isInteger(seconds) ||
+    hours > 23 ||
+    minutes > 59 ||
+    seconds > 59
+  ) {
+    return undefined
+  }
+  return { hours, minutes, seconds }
+}
+
+const two = (n: number) => String(n).padStart(2, "0")
+
+/**
+ * Normalise une heure en `HH:MM` — les secondes ne sont conservées que si elles sont non
+ * nulles (`HH:MM:SS`). `null` = vide, `undefined` = invalide (l'appelant garde l'ancienne
+ * valeur, comme pour un nombre refusé).
+ */
+export function normalizeTime(value: any): string | null | undefined {
+  const parsed = parseTimeOfDay(value)
+  if (parsed === null || parsed === undefined) return parsed
+  const base = `${two(parsed.hours)}:${two(parsed.minutes)}`
+  return parsed.seconds ? `${base}:${two(parsed.seconds)}` : base
+}
+
+/** Secondes depuis minuit (séries d'auto-remplissage) — `undefined` si invalide */
+export function timeToSeconds(value: any): number | undefined {
+  const parsed = parseTimeOfDay(value)
+  if (!parsed) return undefined
+  return parsed.hours * 3600 + parsed.minutes * 60 + parsed.seconds
+}
+
+/** Secondes depuis minuit → `HH:MM` (`HH:MM:SS` si nécessaire), **modulo 24 h** */
+export function secondsToTime(total: number): string {
+  if (!Number.isFinite(total)) return "00:00"
+  const day = 86400
+  const normalized = ((Math.round(total) % day) + day) % day
+  const hours = Math.floor(normalized / 3600)
+  const minutes = Math.floor((normalized % 3600) / 60)
+  const seconds = normalized % 60
+  return seconds ? `${two(hours)}:${two(minutes)}:${two(seconds)}` : `${two(hours)}:${two(minutes)}`
+}
+
 /** É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)

package/package.json

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