@dnax/ui 0.0.73 → 0.0.76

package/scripts/gen-icon-set.ts

@@ -0,0 +1,110 @@
+/**
+ * Génère un **sous-ensemble** de la collection `lucide` contenant uniquement les
+ * icônes réellement référencées dans le code, sous forme d'un module TS prêt à être
+ * embarqué dans le bundle.
+ *
+ * C'est ce qui produit `lib/iconSet.ts` (icônes du design system, figées et testées).
+ * Le module Nuxt fait la même chose **à la volée** pour les sources de l'app hôte
+ * (option `icons.scan`) ; ce script sert quand on veut un fichier committé, ou sans Nuxt.
+ *
+ * Usage :
+ *   # design system (composants + lib) → packages/ui/lib/iconSet.ts
+ *   bun scripts/gen-icon-set.ts --out ./lib/iconSet.ts --src ./components --src ./lib
+ *
+ *   # app / site de docs → ./app/iconSet.ts
+ *   bun scripts/gen-icon-set.ts --out ./app/iconSet.ts --src ./app --src ./content \
+ *     --type-import @dnax/ui
+ *
+ * `--src` est récursif (`.vue`, `.ts`, `.js`, `.mjs`, `.md`), les dossiers
+ * `node_modules` / `.nuxt` / `.output` / `dist` / `public` sont ignorés. Un nom absent
+ * de la collection est signalé (faute de frappe le plus souvent).
+ */
+import { mkdir, readFile, writeFile } from "node:fs/promises"
+import { dirname, resolve } from "node:path"
+import {
+  buildIconSet,
+  scrapeIconNames,
+  type IconifySourceCollection,
+} from "../lib/iconSetScrape"
+
+// — Arguments ------------------------------------------------------------------
+let outFile = ""
+let typeImport = "./icons"
+const sources: string[] = []
+
+const args = process.argv.slice(2)
+for (let i = 0; i < args.length; i++) {
+  const arg = args[i]!
+  if (arg === "--out") outFile = args[++i] ?? ""
+  else if (arg === "--src") sources.push(args[++i] ?? "")
+  else if (arg === "--type-import") typeImport = args[++i] ?? "./icons"
+  else {
+    console.error(`Argument inconnu : ${arg}`)
+    process.exit(1)
+  }
+}
+
+if (!outFile || sources.length === 0) {
+  console.error(
+    "Usage : bun scripts/gen-icon-set.ts --out <fichier.ts> --src <dossier> [--src <dossier>…] [--type-import <specifier>]",
+  )
+  process.exit(1)
+}
+
+// — Relevé + résolution --------------------------------------------------------
+const resolvedSources = sources.map((src) => resolve(process.cwd(), src))
+const names = scrapeIconNames(resolvedSources)
+
+if (names.length === 0) {
+  console.error("Aucune icône `lucide:` trouvée dans les sources fournies.")
+  process.exit(1)
+}
+
+const collectionUrl = import.meta.resolve("@iconify-json/lucide/icons.json")
+const collection = JSON.parse(await readFile(new URL(collectionUrl), "utf8")) as IconifySourceCollection
+const { set, missing } = buildIconSet(collection, names)
+
+// — Écriture -------------------------------------------------------------------
+const iconNames = Object.keys(set.icons).sort()
+const aliasNames = Object.keys(set.aliases ?? {}).sort()
+
+const iconLines = iconNames
+  .map((name) => `    ${JSON.stringify(name)}: { body: ${JSON.stringify(set.icons[name]!.body)} },`)
+  .join("\n")
+const aliasLines = aliasNames
+  .map(
+    (name) =>
+      `    ${JSON.stringify(name)}: { parent: ${JSON.stringify(set.aliases![name]!.parent)} },`,
+  )
+  .join("\n")
+
+const sourceLabel = sources.map((src) => `\`${src}\``).join(", ")
+const header = `// ⚠️ FICHIER GÉNÉRÉ — ne pas éditer à la main.
+// Commande : bun scripts/gen-icon-set.ts --out ${outFile} --src ${sources.join(" --src ")}${typeImport === "./icons" ? "" : ` --type-import ${typeImport}`}
+//
+// Sous-ensemble de la collection \`lucide\` : ${iconNames.length} icônes${aliasNames.length ? ` + ${aliasNames.length} alias` : ""}, relevées dans
+// ${sourceLabel}. Embarqué dans le bundle, il est enregistré auprès d'Iconify par
+// \`registerIcons()\` (ou par le module Nuxt \`@dnax/ui\`) via \`addCollection()\` :
+// ces icônes ne déclenchent **aucune** requête vers l'API Iconify et sont rendues
+// dès le SSR. Les noms absents de ce fichier continuent de passer par l'API.
+import type { IconSetJson } from "${typeImport}"
+
+export const lucideIconSet: IconSetJson = {
+  prefix: "lucide",
+  width: ${set.width ?? 24},
+  height: ${set.height ?? 24},
+  icons: {
+${iconLines}
+  },
+${aliasLines ? `  aliases: {\n${aliasLines}\n  },\n` : ""}}
+`
+
+const outPath = resolve(process.cwd(), outFile)
+await mkdir(dirname(outPath), { recursive: true })
+await writeFile(outPath, header)
+
+const kb = (Buffer.byteLength(header) / 1024).toFixed(1)
+console.log(`✓ ${iconNames.length} icône(s) + ${aliasNames.length} alias → ${outFile} (${kb} Ko)`)
+if (missing.length) {
+  console.warn(`⚠️  ${missing.length} nom(s) introuvable(s) dans lucide : ${missing.join(", ")}`)
+}

package/scripts/generate-exports.ts

@@ -1,12 +1,23 @@
 /**
- * Regenerates `index.ts` with one explicit export per component.
+ * Regénère `index.ts` : une ligne d'export par composant, puis le **bloc manuel**
+ * (composables, helpers, types de `lib/`) recopié **tel quel**.
  * Run with: bun scripts/generate-exports.ts
+ *
+ * ⚠️ Ne jamais figer le bloc manuel dans ce script. Une version précédente le
+ * contenait en dur ; il avait pris du retard sur `index.ts` et une exécution a
+ * silencieusement supprimé `network`, `wakeLock`, `chartFormat`, `chartStats`,
+ * `chartTable`… (cf. `.memory/warnings.md`). Ici le bloc manuel est **relu** depuis
+ * `index.ts` : tout ce qui suit le dernier export de composant est conservé, donc le
+ * script est idempotent et ne peut plus rien perdre.
  */
-import { readdir } from "node:fs/promises"
+import { readdir, readFile } from "node:fs/promises"
 
 const componentsDir = new URL("../components/", import.meta.url)
 const indexFile = new URL("../index.ts", import.meta.url)
 
+/** Ligne produite pour un composant : `export { default as QX } from "./components/QX.vue"` */
+const COMPONENT_EXPORT_LINE = /^export \{ default as [\w$]+ \} from "\.\/components\/[\w$]+\.vue"$/
+
 const toPascalCase = (name: string) =>
   name
     .split(/[-_]/)
@@ -17,78 +28,44 @@ const files = (await readdir(componentsDir))
   .filter((file) => file.endsWith(".vue") && !file.startsWith("_"))
   .sort()
 
-const exports = files
+const componentExports = files
   .map(
     (file) =>
       `export { default as ${toPascalCase(file.replace(/\.vue$/, ""))} } from "./components/${file}"`,
   )
   .join("\n")
 
-// Exports manuels (composables / helpers) — conservés à chaque régénération
-const manualExports = `
-export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent, useBottomSheetPluginComponent } from "./lib/q"
-export type {
-  DialogOptions,
-  DialogController,
-  BottomSheetOptions,
-  BottomSheetController,
-  BottomSheetPluginContext,
-  NotifyOptions,
-  NotifyController,
-} from "./lib/q"
-export { platform, qBreakpoints } from "./lib/platform"
-export type { QPlatform } from "./lib/platform"
-export { screen } from "./lib/screen"
-export type { QScreen } from "./lib/screen"
-export { loading } from "./lib/loading"
-export type { LoadingOptions, QLoadingPlugin } from "./lib/loading"
-export { localStorage, sessionStorage } from "./lib/storage"
-export type { QWebStorage } from "./lib/storage"
-export {
-  registerOverlay,
-  unregisterOverlay,
-  hasOpenOverlays,
-  closeTopmostOverlay,
-  useOverlayBack,
-  installOverlayBackHandler,
-} from "./lib/overlayBack"
-export type { OverlayHandle } from "./lib/overlayBack"
-export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
-export { placePopover } from "./lib/datePicker"
-export type {
-  PlacePopoverOptions,
-  PopoverAnchor,
-  PopoverPlacement,
-  PopoverViewport,
-} from "./lib/datePicker"
-export { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "./lib/layout"
-export type { LayoutView, LayoutZone, LayoutZonePlacement, QLayoutContext } from "./lib/layout"
-export { vRipple } from "./lib/ripple"
-export type { RippleOptions, RippleValue } from "./lib/ripple"
-export { chartToECharts, channelValue, pickFromEvent, tableModel, textValue } from "./lib/chart"
-export type {
-  QChartAxis,
-  QChartChannel,
-  QChartColumn,
-  QChartConfig,
-  QChartLegend,
-  QChartMark,
-  QChartMarkType,
-  QChartOrientation,
-  QChartTable,
-  QChartPick,
-} from "./lib/chart"
-export { vTouchPan } from "./lib/touchPan"
-export type { PanDetails, TouchPanHandler, PanDirection } from "./lib/touchPan"
-export { vTouchHold } from "./lib/touchHold"
-export type { TouchHoldDetails, TouchHoldHandler } from "./lib/touchHold"
-export { vTouchSwipe } from "./lib/touchSwipe"
-export type { TouchSwipeDetails, TouchSwipeHandler, SwipeDirection } from "./lib/touchSwipe"
-export { vTouchRepeat } from "./lib/touchRepeat"
-export type { TouchRepeatDetails, TouchRepeatHandler } from "./lib/touchRepeat"
-export { vIntersection } from "./lib/intersection"
-export type { IntersectionValue } from "./lib/intersection"
-`
+// — Bloc manuel : relu dans l'`index.ts` courant -------------------------------
+let current = ""
+try {
+  current = await readFile(indexFile, "utf8")
+} catch {
+  throw new Error(
+    "packages/ui/index.ts est introuvable : le bloc manuel (exports de `lib/`) ne peut pas être conservé. " +
+      "Recréez le fichier avec ses exports manuels avant de lancer ce script.",
+  )
+}
+
+const lines = current.split("\n")
+let lastComponentLine = -1
+lines.forEach((line, i) => {
+  if (COMPONENT_EXPORT_LINE.test(line)) lastComponentLine = i
+})
+
+// Fichier sans aucun export de composant (création manuelle) : tout est conservé.
+const manualExports = (lastComponentLine === -1 ? current : lines.slice(lastComponentLine + 1).join("\n"))
+  .trim()
+
+if (lastComponentLine === -1 && /\bexport\b/.test(manualExports)) {
+  console.warn(
+    "⚠️  Aucun export de composant reconnu dans index.ts : tout son contenu est traité comme bloc manuel.",
+  )
+}
+
+const output = manualExports ? `${componentExports}\n\n${manualExports}\n` : `${componentExports}\n`
+
+await Bun.write(indexFile, output)
 
-await Bun.write(indexFile, `${exports}\n${manualExports}`)
+const kept = manualExports ? manualExports.split("\n").length : 0
 console.log(`✓ ${files.length} composant(s) exporté(s) dans index.ts`)
+console.log(`✓ ${kept} ligne(s) d'exports manuels conservées (bloc relu depuis index.ts)`)

package/styles/main.css

@@ -2972,6 +2972,11 @@ html.dark body {
   border-radius: var(--q-radius);
 }
 
+/* `radius` (booléen) : forme pilule, cf. JSDoc de la prop. */
+.q-img--rounded {
+  border-radius: 9999px;
+}
+
 .q-img__image {
   position: absolute;
   inset: 0;
@@ -6877,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;
@@ -9254,6 +9264,13 @@ a.q-breadcrumbs__el:hover {
 .q-input-otp__box--error {
   border-color: var(--negative);
 }
+
+/* `radius` (booléen) : forme pilule — même intention que `.q-field--rounded` (20px).
+   Les cases font 48px : 20px les rend nettement arrondies sans les transformer en
+   cercles, ce qui laisserait des trous entre les caractères. */
+.q-input-otp--rounded .q-input-otp__box {
+  border-radius: 20px;
+}
 .q-input-otp__box--error:focus {
   border-color: var(--negative);
   box-shadow: 0 0 0 1px var(--negative);
@@ -9625,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
@@ -9636,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 */
@@ -9856,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;
@@ -10746,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;