@dnax/ui 0.0.76 → 0.0.77

package/components/QSpreadsheet.vue

@@ -234,7 +234,8 @@ import {
 } from "../lib/spreadsheet"
 import { checkValidation, type ArkCheck } from "../lib/spreadsheetValidation"
 import { pageInfo } from "../lib/pagination"
-import { cellFontFor, cellSizePx, cellWidthFor } from "../lib/cellSize"
+import { fxTextFor, searchTextFor } from "../lib/spreadsheetDisplay"
+import { cellFontFor, cellSizePx, cellWidthFor, headerMetricsFor } from "../lib/cellSize"
 import type { CellSizePreset } from "../lib/cellSize"
 import { attachmentsOf as fileAttachmentsOf, fileIconKind, formatFileSize, isAttachment, selectFiles } from "../lib/fileList"
 import type { FileIconKind } from "../lib/fileList"
@@ -672,11 +673,19 @@ const emit = defineEmits<{
 const cellHeightPx = computed(() => props.rowHeight ?? cellSizePx(props.sizeCell))
 const cellWidthPx = computed(() => props.defaultColWidth ?? cellWidthFor(cellHeightPx.value))
 const cellFontPx = computed(() => cellFontFor(cellHeightPx.value))
+/** En-têtes accordés aux cellules (hauteur, gouttière, polices) */
+const headerMetrics = computed(() => headerMetricsFor(cellHeightPx.value))
 
 /** Variables CSS de la grille (police des cellules + hauteur de repli) */
 const cellSizeStyle = computed(() => ({
   "--q-spreadsheet-font": `${cellFontPx.value}px`,
   "--q-spreadsheet-row-height": `${cellHeightPx.value}px`,
+  // En-têtes : mêmes proportions que les cellules
+  "--q-spreadsheet-head-height": `${headerMetrics.value.height}px`,
+  "--q-spreadsheet-head-font": `${headerMetrics.value.labelFont}px`,
+  "--q-spreadsheet-head-letter-font": `${headerMetrics.value.letterFont}px`,
+  "--q-spreadsheet-row-font": `${headerMetrics.value.rowFont}px`,
+  "--q-spreadsheet-gutter-width": `${headerMetrics.value.gutter}px`,
 }))
 
 // ─── Clés de ligne (`_key`) ───
@@ -913,12 +922,14 @@ const choiceText = (col: QSpreadsheetColumn | undefined, raw: any): string => {
 
 // ─── Sélection (ancre + plage) ───
 const sel = ref<QSpreadsheetSelection | null>(null)
+// `immediate` : une cellule **présélectionnée** (`:selected`) doit être active dès le premier
+// rendu (SSR compris) — sans ça, elle était ignorée jusqu'au premier changement de prop.
 watch(
   () => props.selected,
   (v) => {
     if (v !== sel.value) sel.value = v ? { ...v } : null
   },
-  { deep: true },
+  { deep: true, immediate: true },
 )
 const setSel = (s: QSpreadsheetSelection | null) => {
   sel.value = s
@@ -2339,13 +2350,17 @@ const fxInputEl = ref<HTMLInputElement | null>(null)
 
 const syncFx = () => {
   const s = sel.value
+  const col = s ? colOf(s.column) : undefined
   const raw =
     s && s.row >= 0 && s.row < state.value.length
       ? state.value[s.row]?.[s.column]
       : undefined
-  fxDraft.value = raw === null || raw === undefined ? "" : String(raw)
+  // Fichier joint : rien à montrer en fx (`String(raw)` affichait « [object Object]… »)
+  fxDraft.value = fxTextFor(raw, col?.type)
 }
-watch([sel, state], syncFx)
+// `immediate` : avec une cellule présélectionnée (`selected`), la barre fx affiche la
+// valeur dès le premier rendu (et en SSR) au lieu de rester vide jusqu'au premier clic.
+watch([sel, state], syncFx, { immediate: true })
 
 const fxCanEdit = computed(() => {
   if (!sel.value) return false
@@ -2356,10 +2371,17 @@ const fxCanEdit = computed(() => {
     !!col &&
     col.type !== "boolean" &&
     col.type !== "select" &&
-    col.type !== "multiselect"
+    col.type !== "multiselect" &&
+    col.type !== "attachment"
   )
 })
 
+/** Placeholder de la barre fx : vide pour un fichier joint (rien à éditer ni à montrer) */
+const fxPlaceholderText = computed(() => {
+  if (sel.value && colOf(sel.value.column)?.type === "attachment") return ""
+  return fxCanEdit.value ? t("fxPlaceholder") : t("fxNoSel")
+})
+
 /**
  * Aperçu **live** du résultat de la formule en cours de saisie dans la barre fx.
  * Évaluée dans le contexte de la ligne sélectionnée (références par nom de colonne
@@ -2833,8 +2855,8 @@ const clearFormatSelection = () => {
 // ════════ Freeze panes (gel lignes / colonnes) ════════
 const frozenRowsN = computed(() => Math.max(0, Math.min(props.frozenRows ?? 0, state.value.length)))
 const frozenColsN = computed(() => Math.max(0, Math.min(props.frozenCols ?? 0, cols.value.length)))
-const gutterW = computed(() => (props.showRowNumbers ? 34 : 0))
-const headH = computed(() => (props.showColumnHeaders ? 28 : 0))
+const gutterW = computed(() => (props.showRowNumbers ? headerMetrics.value.gutter : 0))
+const headH = computed(() => (props.showColumnHeaders ? headerMetrics.value.height : 0))
 const colWNum = (ci: number) => {
   const c = cols.value[ci]
   if (!c) return cellWidthPx.value
@@ -4192,7 +4214,8 @@ const findTextOf = (r: number, ci: number): string => {
   const raw = state.value[r]?.[col.name]
   // `label` peut être un nombre : findScan fait `.toLowerCase()` sur le retour
   if (col.type === "select" || col.type === "multiselect") return choiceText(col, raw)
-  return raw === null || raw === undefined ? "" : String(raw)
+  // Fichier joint → noms de fichiers ; jamais « [object Object] » (cf. lib/spreadsheetDisplay)
+  return searchTextFor(raw, col.type)
 }
 const findScan = () => {
   const q = findQuery.value
@@ -5171,7 +5194,7 @@ defineExpose({
         class="q-spreadsheet__fx-input"
         :value="fxDraft"
         :disabled="readonly || disable"
-        :placeholder="fxCanEdit ? t('fxPlaceholder') : t('fxNoSel')"
+        :placeholder="fxPlaceholderText"
         spellcheck="false"
         @input="onFxInput"
         @keyup="syncFxCaret"

package/lib/cellSize.test.ts

@@ -2,7 +2,7 @@
 // Le point sensible est la **non-régression** : `md` doit reproduire exactement les valeurs
 // historiques (32 px de haut, 160 px de large, 13 px de police).
 import { describe, expect, it } from "bun:test"
-import { CELL_SIZE_MAX, CELL_SIZE_MIN, CELL_SIZE_PX, cellFontFor, cellSizePx, cellWidthFor } from "./cellSize"
+import { CELL_SIZE_MAX, CELL_SIZE_MIN, CELL_SIZE_PX, cellFontFor, cellSizePx, cellWidthFor, headerMetricsFor } from "./cellSize"
 
 describe("cellSizePx", () => {
   it("md est le défaut historique (32 px)", () => {
@@ -50,3 +50,41 @@ describe("cellFontFor", () => {
     expect(cellFontFor(120)).toBe(20)
   })
 })
+
+describe("headerMetricsFor", () => {
+  it("md reproduit exactement l'historique (aucune régression)", () => {
+    expect(headerMetricsFor(32)).toEqual({
+      height: 28,
+      gutter: 34,
+      labelFont: 11.5,
+      letterFont: 9.5,
+      rowFont: 11,
+    })
+  })
+
+  it("sm réduit l'en-tête", () => {
+    const m = headerMetricsFor(28)
+    expect(m.height).toBe(25)
+    expect(m.gutter).toBe(28)
+    expect(m.labelFont).toBe(9.5)
+  })
+
+  it("lg et 66 agrandissent l'en-tête", () => {
+    expect(headerMetricsFor(40)).toEqual({
+      height: 35,
+      gutter: 41,
+      labelFont: 14,
+      letterFont: 12,
+      rowFont: 14,
+    })
+    const big = headerMetricsFor(66)
+    expect(big.height).toBe(56) // plafonné
+    expect(big.gutter).toBe(47)
+    expect(big.labelFont).toBe(16)
+  })
+
+  it("la gouttière s'élargit avec la police (numéros à 4-5 chiffres)", () => {
+    expect(headerMetricsFor(48).gutter).toBeGreaterThan(headerMetricsFor(32).gutter)
+    expect(headerMetricsFor(120).gutter).toBeLessThanOrEqual(56)
+  })
+})

package/lib/cellSize.ts

@@ -41,3 +41,39 @@ export const cellWidthFor = (heightPx: number): number => Math.round(heightPx *
  */
 export const cellFontFor = (heightPx: number): number =>
   Math.min(20, Math.max(11, Math.round(heightPx * 0.406)))
+
+/** Métriques de la ligne d'en-tête (noms de colonnes + numéros de ligne). */
+export interface HeaderMetrics {
+  /** Hauteur de la ligne d'en-tête, en px */
+  height: number
+  /** Largeur de la gouttière des numéros de ligne, en px */
+  gutter: number
+  /** Police du libellé de colonne, en px */
+  labelFont: number
+  /** Police de la lettre de colonne (A, B, C…), en px */
+  letterFont: number
+  /** Police des numéros de ligne, en px */
+  rowFont: number
+}
+
+const clamp = (value: number, min: number, max: number): number =>
+  Math.min(max, Math.max(min, value))
+
+/**
+ * En-têtes **accordés à la taille des cellules** : une cellule de 66 px avec un en-tête de
+ * 28 px (et une police de 11 px) jurerait. À `md` (32 px), toutes les valeurs retombent
+ * **exactement** sur l'historique (28 px de haut, gouttière 34, libellé 11.5, lettre 9.5,
+ * numéro 11) — donc aucune régression sans `sizeCell`.
+ */
+export const headerMetricsFor = (cellHeightPx: number): HeaderMetrics => {
+  const cellFont = cellFontFor(cellHeightPx)
+  // Arrondi au demi-px : `md` tombe pile sur 11.5 (valeur historique)
+  const labelFont = clamp(Math.round(cellFont * 1.77) / 2, 9.5, 16)
+  return {
+    height: clamp(Math.round(cellHeightPx * 0.875), 24, 56),
+    gutter: clamp(Math.round(labelFont * 2.96), 28, 56),
+    labelFont,
+    letterFont: clamp(labelFont - 2, 8, 13),
+    rowFont: clamp(Math.round(cellFont * 0.846), 9, 15),
+  }
+}

package/lib/spreadsheetDisplay.test.ts

@@ -0,0 +1,49 @@
+// Textes « plats » d'une cellule : barre de formule (fx) et recherche.
+// Le cas d'origine : une cellule `attachment` (tableau d'objets) affichait
+// « [object Object],[object Object] » dans fx.
+import { describe, expect, it } from "bun:test"
+import { fxTextFor, searchTextFor } from "./spreadsheetDisplay"
+
+const files = [
+  { id: "a", name: "login.png", size: 12, type: "image/png" },
+  { id: "b", name: "dashboard.png", size: 34, type: "image/png" },
+]
+
+describe("fxTextFor", () => {
+  it("n'affiche rien pour un fichier joint", () => {
+    expect(fxTextFor(files, "attachment")).toBe("")
+    expect(fxTextFor([], "attachment")).toBe("")
+    expect(fxTextFor(null, "attachment")).toBe("")
+  })
+
+  it("ne laisse jamais fuiter [object Object]", () => {
+    expect(fxTextFor({ name: "x" })).toBe("")
+    expect(fxTextFor([{ a: 1 }, { b: 2 }])).toBe("")
+  })
+
+  it("garde le texte des valeurs simples", () => {
+    expect(fxTextFor("Ada")).toBe("Ada")
+    expect(fxTextFor(18.5)).toBe("18.5")
+    expect(fxTextFor(true)).toBe("true")
+    expect(fxTextFor("=A1*2")).toBe("=A1*2")
+    expect(fxTextFor(null)).toBe("")
+    expect(fxTextFor(undefined)).toBe("")
+  })
+
+  it("joint proprement un tableau scalaire (multiselect)", () => {
+    expect(fxTextFor(["tea", "beer"])).toBe("tea, beer")
+    expect(fxTextFor(["tea", null, "beer"])).toBe("tea, beer")
+  })
+})
+
+describe("searchTextFor", () => {
+  it("indexe les noms de fichiers", () => {
+    expect(searchTextFor(files, "attachment")).toBe("login.png, dashboard.png")
+  })
+
+  it("retombe sur le texte simple", () => {
+    expect(searchTextFor("rapport.pdf", "string")).toBe("rapport.pdf")
+    expect(searchTextFor(null, "string")).toBe("")
+    expect(searchTextFor({ a: 1 })).toBe("")
+  })
+})

package/lib/spreadsheetDisplay.ts

@@ -0,0 +1,42 @@
+// Texte d'une valeur de cellule pour les surfaces **textuelles** du tableur :
+// barre de formule (`fx`) et moteur de recherche (Find).
+//
+// Piège visé : `String(valeur)` sur un objet/tableau produit « [object Object] ». Les types
+// à valeur structurée (`attachment`, et tout futur type objet) doivent donc passer par ici
+// au lieu d'un `String()` sauvage.
+import { attachmentsOf } from "./fileList"
+
+/** Valeur affichable en texte : `null`/objet → `""`, tableau → éléments joints. */
+const plain = (value: unknown): string => {
+  if (value === null || value === undefined) return ""
+  if (Array.isArray(value)) {
+    return value
+      .map((entry) => (entry === null || entry === undefined || typeof entry === "object" ? "" : String(entry)))
+      .filter((text) => text !== "")
+      .join(", ")
+  }
+  if (typeof value === "object") return ""
+  return String(value)
+}
+
+/**
+ * Contenu de la **barre de formule** pour une cellule.
+ * `attachment` → `""` (la valeur est un tableau d'objets : rien de pertinent à éditer).
+ */
+export const fxTextFor = (value: unknown, type?: string): string => {
+  if (type === "attachment") return ""
+  return plain(value)
+}
+
+/**
+ * Texte indexé par la **recherche** (Find & Replace).
+ * `attachment` → les **noms de fichiers**, pour pouvoir chercher par nom.
+ */
+export const searchTextFor = (value: unknown, type?: string): string => {
+  if (type === "attachment") {
+    return attachmentsOf(value)
+      .map((att) => att.name)
+      .join(", ")
+  }
+  return plain(value)
+}

package/package.json

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

package/styles/main.css

@@ -9690,9 +9690,9 @@ a.q-breadcrumbs__el:hover {
   top: 0;
   left: 0;
   z-index: 6;
-  width: 34px;
-  min-width: 34px;
-  height: 28px;
+  width: var(--q-spreadsheet-gutter-width, 34px);
+  min-width: var(--q-spreadsheet-gutter-width, 34px);
+  height: var(--q-spreadsheet-head-height, 28px);
   border-right: 1px solid var(--q-spreadsheet-border);
   border-bottom: 1px solid var(--q-spreadsheet-border);
   text-align: center;
@@ -9702,7 +9702,7 @@ a.q-breadcrumbs__el:hover {
 .q-spreadsheet__colhead {
   top: 0;
   z-index: 4;
-  height: 28px;
+  height: var(--q-spreadsheet-head-height, 28px);
   padding: 0 10px 0 6px;
   border-right: 1px solid var(--q-spreadsheet-border);
   border-bottom: 1px solid var(--q-spreadsheet-border);
@@ -9723,7 +9723,7 @@ a.q-breadcrumbs__el:hover {
   padding-right: 6px;
 }
 .q-spreadsheet__colhead-letter {
-  font-size: 9.5px;
+  font-size: var(--q-spreadsheet-head-letter-font, 9.5px);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: 0.04em;
@@ -9731,7 +9731,7 @@ a.q-breadcrumbs__el:hover {
   color: var(--primary, #1976d2);
 }
 .q-spreadsheet__colhead-label {
-  font-size: 11.5px;
+  font-size: var(--q-spreadsheet-head-font, 11.5px);
   line-height: 1.25;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -9739,11 +9739,11 @@ a.q-breadcrumbs__el:hover {
 .q-spreadsheet__rownum {
   left: 0;
   z-index: 3;
-  width: 34px;
-  min-width: 34px;
+  width: var(--q-spreadsheet-gutter-width, 34px);
+  min-width: var(--q-spreadsheet-gutter-width, 34px);
   border-right: 1px solid var(--q-spreadsheet-border);
   border-bottom: 1px solid var(--q-spreadsheet-border);
-  font-size: 11px;
+  font-size: var(--q-spreadsheet-row-font, 11px);
   font-weight: 500;
   text-align: center;
   vertical-align: middle;