@dnax/ui 0.0.72 → 0.0.75

package/module.ts

@@ -4,12 +4,39 @@
  *
  * - Auto-importe les composants Q* (balises kebab-case : <q-btn>, <q-header>…)
  * - Ajoute styles/main.css (safe-area, tokens, styles de tous les composants)
+ * - **Embarque les icônes** : enregistre un sous-ensemble `lucide` auprès d'Iconify
+ *   (`addCollection`) — design system + (par défaut) les icônes `lucide:…` trouvées
+ *   dans les sources de l'app. Aucune requête vers l'API Iconify pour ces noms, et les
+ *   `<path>` sont présents dès le SSR.
  *
  * Options (clé `dnaxUi`) :
- *   components: false  — désactive l'auto-import des composants
- *   css: false         — désactive l'ajout de styles/main.css
+ *   components: false            — désactive l'auto-import des composants
+ *   css: false                   — désactive l'ajout de styles/main.css
+ *   icons: false                 — n'embarque aucune icône (API Iconify à la demande)
+ *   icons: { scan: false }       — n'embarque que le design system
+ *   icons: { dirs: ["app"] }     — limite le scan (chemins relatifs à rootDir)
  */
-import { addComponentsDir, addPluginTemplate, createResolver, defineNuxtModule } from "@nuxt/kit"
+import { addComponentsDir, addPluginTemplate, createResolver, defineNuxtModule, updateTemplates } from "@nuxt/kit"
+import { readFileSync } from "node:fs"
+import { createRequire } from "node:module"
+import { join, resolve } from "node:path"
+import { lucideIconSet } from "./lib/iconSet"
+import {
+  buildIconSet,
+  mergeIconSets,
+  scrapeIconNames,
+  type IconifySourceCollection,
+} from "./lib/iconSetScrape"
+
+export interface DnaxUiIconsOptions {
+  /**
+   * Scanne les sources de l'app au build pour embarquer aussi **ses** icônes
+   * `lucide:` (défaut : true)
+   */
+  scan?: boolean
+  /** Dossiers à scanner, résolus depuis `rootDir` (défaut : tout `rootDir`) */
+  dirs?: string[]
+}
 
 export interface DnaxUiModuleOptions {
   /** Auto-importe les composants Q* (défaut : true) */
@@ -18,6 +45,33 @@ export interface DnaxUiModuleOptions {
   css?: boolean
   /** Installe le handler « retour » : ferme l'overlay ouvert au lieu de naviguer (défaut : true) */
   overlayBack?: boolean
+  /**
+   * Icônes : `false` = rien d'embarqué (API Iconify à la demande) ; objet = réglages
+   * du scan. Par défaut : sous-ensemble du design system **+** scan des sources.
+   */
+  icons?: boolean | DnaxUiIconsOptions
+}
+
+/** Collection Iconify lue pour résoudre les noms (`@iconify-json/lucide`). */
+const LUCIDE_COLLECTION = "@iconify-json/lucide/icons.json"
+
+/**
+ * Charge la collection `lucide`. Elle vit dans les dépendances de `@dnax/ui` ; on tente
+ * la résolution depuis ce module, puis depuis l'app hôte (hoisting).
+ */
+const loadLucideCollection = (rootDir: string): IconifySourceCollection | null => {
+  const resolvers = [
+    () => createRequire(import.meta.url).resolve(LUCIDE_COLLECTION),
+    () => createRequire(join(rootDir, "package.json")).resolve(LUCIDE_COLLECTION),
+  ]
+  for (const resolveSpec of resolvers) {
+    try {
+      return JSON.parse(readFileSync(resolveSpec(), "utf8")) as IconifySourceCollection
+    } catch {
+      // on passe au résolveur suivant
+    }
+  }
+  return null
 }
 
 export default defineNuxtModule<DnaxUiModuleOptions>({
@@ -30,12 +84,13 @@ export default defineNuxtModule<DnaxUiModuleOptions>({
     components: true,
     css: true,
     overlayBack: true,
+    icons: { scan: true },
   },
   setup(options, nuxt) {
-    const { resolve } = createResolver(import.meta.url)
+    const { resolve: resolvePath } = createResolver(import.meta.url)
 
     if (options.css) {
-      const cssPath = resolve("./styles/main.css")
+      const cssPath = resolvePath("./styles/main.css")
       if (!nuxt.options.css.includes(cssPath)) {
         nuxt.options.css.push(cssPath)
       }
@@ -43,13 +98,76 @@ export default defineNuxtModule<DnaxUiModuleOptions>({
 
     if (options.components) {
       addComponentsDir({
-        path: resolve("./components"),
+        path: resolvePath("./components"),
         prefix: "", // pas de préfixe : QBtn.vue → <q-btn>
         pathPrefix: false, // pas de préfixe par sous-dossier
         ignore: ["**/internal/**"], // composants internes : non auto-importés
       })
     }
 
+    // — Icônes embarquées ---------------------------------------------------------
+    // Plugin **universel** : côté serveur aussi, sinon le SSR ne rend que des coquilles
+    // `<svg class="iconify">`, les `<path>` n'arrivant qu'après le fetch client (et
+    // jamais sans réseau). `addCollection` est purement local et **fusionne**.
+    if (options.icons !== false) {
+      const iconsOptions: DnaxUiIconsOptions =
+        typeof options.icons === "object" ? options.icons : {}
+      const scan = iconsOptions.scan !== false
+
+      const dirs = iconsOptions.dirs?.length
+        ? iconsOptions.dirs.map((dir) => resolve(nuxt.options.rootDir, dir))
+        : [nuxt.options.rootDir]
+
+      const collection = scan ? loadLucideCollection(nuxt.options.rootDir) : null
+      if (scan && !collection) {
+        console.warn(
+          "[@dnax/ui] `@iconify-json/lucide` introuvable : seules les icônes du design system sont embarquées. " +
+            "Installez-le (`bun add -D @iconify-json/lucide`) pour scanner votre app.",
+        )
+      }
+
+      addPluginTemplate({
+        filename: "dnax-ui-icons.mjs",
+        getContents: () => {
+          let set = lucideIconSet
+          let scanned = false
+          if (collection) {
+            const { set: appSet, missing } = buildIconSet(collection, scrapeIconNames(dirs))
+            set = mergeIconSets(lucideIconSet, appSet)
+            scanned = true
+            if (nuxt.options.dev && missing.length) {
+              console.warn(
+                `[@dnax/ui] icône(s) \`lucide:\` absente(s) de la collection (faute de frappe ?) : ${missing.join(", ")}`,
+              )
+            }
+          }
+          return `
+import { defineNuxtPlugin } from "#imports"
+import { registerIconSet } from "@dnax/ui/runtime"
+
+// Sous-ensemble \`lucide\` embarqué (${Object.keys(set.icons).length} icônes) :
+// design system${scanned ? " + sources de l'app" : ""}. Aucune requête vers l'API Iconify
+// pour ces noms ; les autres retombent dessus (progressive enhancement).
+const ICON_SET = ${JSON.stringify(set)}
+
+export default defineNuxtPlugin(() => {
+  registerIconSet(ICON_SET)
+})
+`
+        },
+      })
+
+      // Dev : une icône ajoutée dans les sources régénère le module virtuel — sans ça
+      // il faudrait redémarrer le serveur pour l'embarquer (en attendant, l'icône
+      // s'affiche via l'API : dégradation, pas rupture).
+      if (scan) {
+        nuxt.hook("builder:watch", async (_event, watchedPath) => {
+          if (!/\.(vue|ts|js|mjs|md|mdx)$/.test(String(watchedPath).replace(/\\/g, "/"))) return
+          await updateTemplates({ filter: (template) => template.filename === "dnax-ui-icons.mjs" })
+        })
+      }
+    }
+
     // Dépendances CJS sans export ESM `default` explicite : esbuild doit les pré-bundler
     // (interop) sinon, servies brutes, le navigateur échoue sur « does not provide an
     // export named 'default' ». `leaflet` (lib/mapLeaflet.ts) est dans ce cas ; le code

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.72",
+  "version": "0.0.75",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
@@ -12,7 +12,8 @@
     "./styles/main.css": "./styles/main.css"
   },
   "scripts": {
-    "generate": "bun scripts/generate-exports.ts"
+    "generate": "bun scripts/generate-exports.ts",
+    "gen:icons": "bun scripts/gen-icon-set.ts --out ./lib/iconSet.ts --src ./components --src ./lib"
   },
   "private": false,
   "devDependencies": {
@@ -23,6 +24,7 @@
     "vue": "^3.5.41"
   },
   "dependencies": {
+    "@iconify-json/lucide": "^1.2.150",
     "@iconify/vue": "^5.0.1",
     "@maptiler/sdk": "^4.1.0",
     "@nuxt/kit": "4.5.2",

package/runtime.ts

@@ -46,6 +46,11 @@ export type { QNetwork, NetworkOptions } from "./lib/network"
 // `$q.wakeLock` (écran allumé) — Screen Wake Lock API.
 export { wakeLock, createWakeLock } from "./lib/wakeLock"
 export type { QWakeLock, WakeLockOptions } from "./lib/wakeLock"
+// Icônes du design system embarquées dans le bundle (`lib/iconSet.ts`, généré) :
+// appelé par le module Nuxt, à appeler soi-même sans module. Évite l'appel runtime
+// à l'API Iconify et rend les icônes dès le SSR.
+export { registerIcons, iconsRegistered } from "./lib/registerIcons"
+export { registerIconSet } from "./lib/registerIcons"
 
 // — Providers de `$q` (montés au boot par l'app hôte) —
 export { default as QDialogProvider } from "./components/QDialogProvider.vue"

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

@@ -439,6 +439,7 @@ html.dark body {
 }
 
 .dark .q-input .q-field__native::placeholder,
+.dark .q-input-textarea .q-field__native::placeholder,
 .dark .q-input-tag__native::placeholder,
 .dark .q-input-otp__box::placeholder,
 .dark .q-select__search-input::placeholder,
@@ -2358,6 +2359,61 @@ html.dark body {
   margin-left: auto;
 }
 
+/* ===== QInputTextarea (champ multiligne) ===== */
+.q-input-textarea {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: 14px;
+}
+
+/* Le contenu est ancré **en haut** du contrôle (un champ simple centre sa valeur) :
+   `rows` doit correspondre à ce qu'on voit, et les icônes / affixes restent sur la
+   première ligne quand le champ grandit. 10px de padding = 40px de contrôle pour
+   1 ligne de 20px, soit la hauteur exacte du champ simple. */
+.q-input-textarea .q-field__control {
+  align-items: flex-start;
+  padding: 10px 12px;
+}
+
+.q-input-textarea .q-field__native {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  height: auto;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  /* `rows` × line-height = hauteur visible ; l'auto-extension mesure la même valeur */
+  line-height: 20px;
+  resize: none;
+  overflow-y: hidden;
+}
+
+.q-input-textarea .q-field__native::placeholder {
+  color: rgb(0 0 0 / 0.45);
+}
+
+/* Affixes, icônes et bouton d'effacement : sur la première ligne */
+.q-input-textarea .q-field__icon,
+.q-input-textarea .q-field__prefix,
+.q-input-textarea .q-field__suffix,
+.q-input-textarea .q-field__clear {
+  align-self: flex-start;
+  line-height: 20px;
+}
+
+.q-field--dense.q-input-textarea .q-field__control {
+  padding: 7px 10px;
+}
+
+.q-field--dense.q-input-textarea .q-field__native {
+  line-height: 18px;
+}
+
 /* ===== QInputPassword (toggle œil) ===== */
 .q-input-password__toggle {
   display: inline-flex;
@@ -2916,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;
@@ -9198,6 +9259,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);