@dnax/ui 0.0.75 → 0.0.77

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.75",
+  "version": "0.0.77",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -6882,6 +6882,11 @@ a.q-breadcrumbs__el:hover {
   background-color: rgb(0 0 0 / 0.6);
   color: #fff;
 }
+/* Thème sombre : le voile blanc codé en dur éblouit (même convention que les champs) */
+.dark .q-inner-loading {
+  background-color: rgb(0 0 0 / 0.55);
+  color: var(--foreground);
+}
 
 .q-inner-loading__icon {
   animation: q-btn-spin 0.7s linear infinite;
@@ -9637,6 +9642,20 @@ a.q-breadcrumbs__el:hover {
   overflow: auto;
   outline: none;
 }
+
+/* Chargement distant : spinner du design system, teinté par le thème */
+.q-spreadsheet__loader {
+  width: 30px;
+  height: 30px;
+  border-width: 3px;
+  color: var(--primary, #1976d2);
+}
+
+/* Le voile passe au-dessus de l'éditeur (z-index 20) et de la poignée de remplissage :
+   on ne doit pas éditer une page en cours de remplacement. */
+.q-spreadsheet > .q-inner-loading {
+  z-index: 40;
+}
 .q-spreadsheet__table {
   /* PAS de `min-width: 100%` : avec `table-layout: fixed`, un tableau étiré au-delà
      de la somme de ses colonnes RÉPARTIT l'espace libre sur toutes les colonnes
@@ -9648,7 +9667,8 @@ a.q-breadcrumbs__el:hover {
   border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
-  font-size: 13px;
+  /* Suit `sizeCell` (la police grandit avec la cellule) ; 13px = taille historique */
+  font-size: var(--q-spreadsheet-font, 13px);
 }
 
 /* Grille sans aucune colonne : un seul message → il doit occuper toute la largeur */
@@ -9670,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;
@@ -9682,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);
@@ -9703,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;
@@ -9711,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;
@@ -9719,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;
@@ -9868,6 +9888,132 @@ a.q-breadcrumbs__el:hover {
   vertical-align: middle;
 }
 
+/* ─── Fichiers joints (type `attachment`) ─── */
+/* Une « puce » par fichier : vignette (image) ou icône typée, nom tronqué, bouton de retrait.
+   Les puces passent à la ligne dans une cellule étroite, comme les badges. */
+.q-spreadsheet__attachments {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.q-spreadsheet__attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  padding: 1px 4px 1px 2px;
+  border: 1px solid rgb(0 0 0 / 0.12);
+  border-radius: 999px;
+  background: rgb(0 0 0 / 0.04);
+  font-size: 11.5px;
+  line-height: 1.6;
+  white-space: nowrap;
+  /* La puce est cliquable : elle émet `attachment-click` (aperçu côté app) */
+  cursor: pointer;
+}
+.q-spreadsheet__attachment:hover {
+  border-color: rgb(0 0 0 / 0.24);
+  background: rgb(0 0 0 / 0.08);
+}
+
+.q-spreadsheet__attachment-thumb {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.q-spreadsheet__attachment-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  color: rgb(0 0 0 / 0.55);
+}
+
+.q-spreadsheet__attachment-name {
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.q-spreadsheet__attachment-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: rgb(0 0 0 / 0.45);
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+.q-spreadsheet__attachment-x:hover {
+  background: rgb(0 0 0 / 0.12);
+  color: var(--negative, #c10015);
+}
+.q-spreadsheet__attachment-x svg {
+  width: 10px;
+  height: 10px;
+}
+
+/* Bouton d'ajout : discret, visible dès qu'on survole / sélectionne la cellule */
+.q-spreadsheet__attachment-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px dashed rgb(0 0 0 / 0.25);
+  border-radius: 50%;
+  background: transparent;
+  color: rgb(0 0 0 / 0.45);
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+.q-spreadsheet__attachment-add:hover {
+  border-color: var(--primary, #1976d2);
+  color: var(--primary, #1976d2);
+}
+.q-spreadsheet__attachment-add svg {
+  width: 10px;
+  height: 10px;
+}
+
+/* Input `type=file` masqué (piloté par `openAttachments`) */
+.q-spreadsheet__attach-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.dark .q-spreadsheet__attachment {
+  border-color: rgb(255 255 255 / 0.16);
+  background: rgb(255 255 255 / 0.06);
+}
+.dark .q-spreadsheet__attachment:hover {
+  border-color: rgb(255 255 255 / 0.3);
+  background: rgb(255 255 255 / 0.11);
+}
+.dark .q-spreadsheet__attachment-icon,
+.dark .q-spreadsheet__attachment-x,
+.dark .q-spreadsheet__attachment-add {
+  color: rgb(255 255 255 / 0.6);
+}
+.dark .q-spreadsheet__attachment-add {
+  border-color: rgb(255 255 255 / 0.24);
+}
+
 /* ─── Éditeur overlay ─── */
 .q-spreadsheet__editor {
   position: absolute;
@@ -10758,6 +10904,38 @@ a.q-breadcrumbs__el:hover {
 .q-spreadsheet__status-spacer {
   flex: 1;
 }
+
+/* Pagination distante : ‹ lignes 401–800 sur 12 000 · 2 / 30 › */
+.q-spreadsheet__pager {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding-right: 8px;
+  border-right: 1px solid rgb(0 0 0 / 0.1);
+  margin-right: 2px;
+}
+.q-spreadsheet__pager .q-spreadsheet__tool {
+  width: 22px;
+  height: 20px;
+}
+.q-spreadsheet__pager-range {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.q-spreadsheet__pager-page {
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 0.06);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.dark .q-spreadsheet__pager {
+  border-right-color: rgb(255 255 255 / 0.14);
+}
+.dark .q-spreadsheet__pager-page {
+  background: rgb(255 255 255 / 0.12);
+}
 .q-spreadsheet__status-zoom {
   display: inline-flex;
   align-items: center;