@dnax/ui 0.0.43 → 0.0.45

package/module.ts

@@ -20,15 +20,6 @@ export interface DnaxUiModuleOptions {
   overlayBack?: boolean
 }
 
-/** Custom elements du framework HTML Video.js v10 (@videojs/html) — balises non-Vue */
-const VIDEOJS_CUSTOM_ELEMENTS = [
-  "video-player",
-  "video-skin",
-  "youtube-video",
-  "hlsjs-video",
-  "mux-video",
-]
-
 export default defineNuxtModule<DnaxUiModuleOptions>({
   meta: {
     name: "@dnax/ui",
@@ -43,15 +34,6 @@ export default defineNuxtModule<DnaxUiModuleOptions>({
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
-    // Les balises <video-player>/<youtube-video>… sont des custom elements @videojs/html,
-    // pas des composants Vue → les exclure de la résolution (évite le warn
-    // « Failed to resolve component »).
-    nuxt.options.vue.compilerOptions ??= {}
-    const existing = nuxt.options.vue.compilerOptions.isCustomElement
-    nuxt.options.vue.compilerOptions.isCustomElement = (tag: string) =>
-      VIDEOJS_CUSTOM_ELEMENTS.includes(tag) ||
-      (typeof existing === "function" ? existing(tag) : false)
-
     if (options.css) {
       const cssPath = resolve("./styles/main.css")
       if (!nuxt.options.css.includes(cssPath)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
@@ -22,14 +22,6 @@
     "vue": "^3.5.41"
   },
   "dependencies": {
-    "@editorjs/checklist": "^1.6.0",
-    "@editorjs/code": "^2.9.4",
-    "@editorjs/delimiter": "^1.4.2",
-    "@editorjs/editorjs": "^2.31.6",
-    "@editorjs/header": "^2.8.9",
-    "@editorjs/list": "^2.0.9",
-    "@editorjs/paragraph": "^2.11.7",
-    "@editorjs/quote": "^2.7.6",
     "@iconify/vue": "^5.0.1",
     "@nuxt/kit": "4.5.2",
     "@tiptap/extension-bubble-menu": "^3.31.3",
@@ -48,11 +40,11 @@
     "@tiptap/starter-kit": "^3.31.3",
     "@tiptap/suggestion": "^3.31.3",
     "@tiptap/vue-3": "^3.31.3",
-    "@videojs/html": "^10.0.0-beta.32",
     "@vueuse/core": "^14.4.0",
     "arktype": "^2.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "echarts": "^6.1.0",
     "embla-carousel": "^8.5.0",
     "embla-carousel-vue": "^8.5.0",
     "fuse.js": "^7.1.0",

package/scripts/generate-exports.ts

@@ -54,8 +54,30 @@ export {
 } 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"

package/styles/main.css

@@ -52,8 +52,13 @@ body {
 .q-app {
   display: flex;
   flex-direction: column; /* header en haut, contenu au milieu, footer en bas */
-  min-height: 100vh;
-  min-height: 100dvh; /* barres de navigateur dynamiques (mobile) */
+  width: 100%; /* prend toute la largeur disponible */
+  /* Équivalent PUR CSS de `flex h-screen w-full` (les classes sont aussi sur la
+     div) : le conteneur fait exactement un écran. Ce qui dépasse doit donc défiler
+     dans un enfant (`min-height: 0` + `overflow: auto`), sinon le document scrolle
+     sous les barres. */
+  height: 100vh; /* fallback vieux navigateurs */
+  height: 100dvh; /* barres de navigateur dynamiques (mobile) */
 }
 
 /* Safe-area intégrées aux règles de base (pas de conflit de cascade) */
@@ -79,6 +84,16 @@ body {
   z-index: 100;
 }
 
+/* sticky : opt-in (prop `sticky`, ou automatique dans un QLayout quand la lettre du
+   `view` est en majuscule) — la barre reste visible, le contenu défile dessous.
+   Dans un QLayout elle est close dans sa cellule : elle ne peut pas passer au-dessus
+   d'une colonne voisine (drawer, rangée du milieu). */
+.q-header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
 /* Barre d'action basse */
 /* Safe-area intégrées à la règle de base .q-footer (plus bas) */
 
@@ -105,6 +120,49 @@ body {
   padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
 }
 
+/* ===== QLayout — matrice 3×3 pilotée par `view` =====
+   Colonnes : drawer gauche / contenu / drawer droit. Rangées : header / milieu /
+   footer. `grid-template-areas` vient du prop `view` (variable CSS posée par le
+   composant). `minmax(0, 1fr)` sur la colonne du milieu = l'équivalent de
+   `min-width: 0` : un enfant large (tableau à colonnes nombreuses) ne pousse plus
+   les drawers hors de l'écran. */
+.q-layout {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-areas: var(--q-layout-areas);
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+/* Tout enfant direct sans cellule explicite (le contenu) va dans la cellule « page ».
+   q-header / q-footer / q-sidebar posent la leur en style inline — l'ordre
+   d'écriture dans le template est donc libre. */
+.q-layout > * {
+  grid-area: var(--q-layout-page-area, p);
+}
+
+/* Mode conteneur (comme Quasar) : le layout gère son propre cadre — une hauteur
+   explicite est requise et le conteneur devient la zone de scroll (les barres
+   sticky s'y accrochent, pas à la fenêtre). */
+.q-layout--container {
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Drawer sticky dans un QLayout : accroché sous les barres qui le surplombent
+   seulement (les variables `--q-sidebar-sticky-*` sont posées par QSidebar d'après
+   les cellules de sa zone), sur la hauteur visible entre les deux barres — il ne
+   glisse donc jamais sous le header. */
+.q-layout > .q-sidebar--static.q-sidebar--sticky {
+  top: var(--q-sidebar-sticky-top, var(--q-layout-header-h, 0px));
+  height: calc(
+    var(--q-layout-viewport-h, 100dvh) -
+      var(--q-sidebar-sticky-top, var(--q-layout-header-h, 0px)) -
+      var(--q-sidebar-sticky-bottom, var(--q-layout-footer-h, 0px))
+  );
+}
+
 .q-toolbar {
   position: relative;
   display: flex;
@@ -203,31 +261,66 @@ body {
   border-color: rgb(244 67 54 / 0.4);
 }
 
-/* ===== Tokens de couleur (palette Material façon Quasar) ===== */
-:root {
-  --primary: #1976d2;
-  --primary-foreground: #fff;
-  --secondary: #26a69a;
-  --secondary-foreground: #fff;
-  --accent: #9c27b0;
-  --accent-foreground: #fff;
-  --dark: #1d1d1d;
-  --dark-foreground: #fff;
-  --positive: #21ba45;
-  --positive-foreground: #fff;
-  --negative: #c10015;
-  --negative-foreground: #fff;
-  --info: #31ccec;
-  --info-foreground: #fff;
-  --warning: #f2c037;
-  --warning-foreground: #1d1d1d;
-
-  /* Tokens sémantiques (utilisés par le mode sombre) */
-  --background: #ffffff;
-  --foreground: #1d1d1d;
-  --card: #ffffff;
-  --muted: #f4f6f9;
-  --border: rgb(0 0 0 / 0.12);
+/* ===== Tokens de couleur (palette Material façon Quasar) =====
+   Déclarés dans `@layer dnax-tokens` : une règle hors couche (le thème de
+   l'application hôte) gagne toujours sur une règle en couche, quelle que soit
+   la spécificité et l'ordre d'émission. Sans cette couche, ce `:root` — émis
+   *après* le CSS de l'hôte — écrasait ses tokens de même nom (`--primary`,
+   `--accent`, `--muted`, `--border`…). C'est ce qui faisait apparaître le
+   violet `--accent: #9c27b0` dans les docs à thème bleu (Docd/Docus).
+   Attention : les noms shadcn n'ont pas le même sens ici (`--accent` = couleur
+   d'accent Material, pas la surface de survol shadcn). */
+@layer dnax-tokens {
+  :root {
+    --primary: #1976d2;
+    --primary-foreground: #fff;
+    --secondary: #26a69a;
+    --secondary-foreground: #fff;
+    --accent: #9c27b0;
+    --accent-foreground: #fff;
+    --dark: #1d1d1d;
+    --dark-foreground: #fff;
+    --positive: #21ba45;
+    --positive-foreground: #fff;
+    --negative: #c10015;
+    --negative-foreground: #fff;
+    --info: #31ccec;
+    --info-foreground: #fff;
+    --warning: #f2c037;
+    --warning-foreground: #1d1d1d;
+
+    /* Tokens sémantiques (utilisés par le mode sombre) */
+    --background: #ffffff;
+    --foreground: #1d1d1d;
+    --card: #ffffff;
+    --muted: #f4f6f9;
+    --border: rgb(0 0 0 / 0.12);
+
+    /* Palette des séries de <q-chart> (convention `--chart-N`, reprise de shadcn) :
+       ce sont les SEULES couleurs de la palette Material à être faites pour ça —
+       `--secondary` et `--accent` sont des surfaces chez shadcn-vue, pas des
+       couleurs de série (une ligne de leur couleur serait invisible). */
+    --chart-1: #1976d2;
+    --chart-2: #26a69a;
+    --chart-3: #9c27b0;
+    --chart-4: #31ccec;
+    --chart-5: #21ba45;
+    --chart-6: #f2c037;
+  }
+
+  /* Mode sombre : mêmes règles de priorité que ci-dessus. */
+  .dark {
+    --background: #0f1115;
+    --foreground: #e6edf3;
+    --card: #161b22;
+    --muted: #1c2128;
+    --border: rgb(255 255 255 / 0.12);
+    --q-table-border: rgb(255 255 255 / 0.12);
+    --q-table-header-bg: rgb(255 255 255 / 0.04);
+    --q-table-hover-bg: rgb(255 255 255 / 0.06);
+    --q-sidebar-border: rgb(255 255 255 / 0.12);
+    --q-translucent-bg: #0f1115;
+  }
 }
 
 /* ===== Mode sombre (QConfigProvider mode="dark" | "system") =====
@@ -235,16 +328,6 @@ body {
    Les overlays téléportés au body (dialog, sheets) sont couverts via html.dark. */
 .dark {
   color-scheme: dark;
-  --background: #0f1115;
-  --foreground: #e6edf3;
-  --card: #161b22;
-  --muted: #1c2128;
-  --border: rgb(255 255 255 / 0.12);
-  --q-table-border: rgb(255 255 255 / 0.12);
-  --q-table-header-bg: rgb(255 255 255 / 0.04);
-  --q-table-hover-bg: rgb(255 255 255 / 0.06);
-  --q-sidebar-border: rgb(255 255 255 / 0.12);
-  --q-translucent-bg: #0f1115;
 }
 
 /* Surface de base : le conteneur et la page (html.dark body) */
@@ -628,6 +711,15 @@ html.dark body {
   z-index: 100;
 }
 
+/* sticky (prop `sticky`, ou automatique dans un QLayout avec une lettre majuscule) :
+   la rangée footer étant la dernière, elle tombe en fin de page dans les deux cas —
+   `F` ne change donc rien de visible, contrairement à `H` sur le header. */
+.q-footer--sticky {
+  position: sticky;
+  bottom: 0;
+  z-index: 100;
+}
+
 /* no-padding : horizontal collé aux bords — safe-area conservées */
 .q-footer--no-padding {
   padding: 4px 0;
@@ -5541,6 +5633,57 @@ a.q-breadcrumbs__el:hover {
   overflow-y: auto;
 }
 
+/* — mode popover : panneau ancré au champ, sans voile — */
+/* `top`/`bottom`/`left` sont posés en inline par `positionPopover()` : le panneau
+   suit le champ au scroll et bascule au-dessus quand la place manque. */
+.q-date-picker__overlay--popover {
+  inset: auto;
+  display: block;
+  width: max-content;
+  background-color: transparent;
+}
+
+/* Flèche (caret) : portée par le voile et non par le panneau — `.q-date-picker__sheet`
+   est en `overflow: hidden` et la rognerait. Elle est peinte *avant* le panneau (ordre
+   du DOM) : seule sa moitié dépassante reste visible, le reste passe sous le bord. */
+.q-date-picker__overlay--popover::before {
+  content: "";
+  position: absolute;
+  top: -5px;
+  left: var(--q-date-picker-caret, 24px);
+  width: 10px;
+  height: 10px;
+  margin-left: -5px;
+  background-color: #fff;
+  border-top: 1px solid rgb(0 0 0 / 0.08);
+  border-left: 1px solid rgb(0 0 0 / 0.08);
+  transform: rotate(45deg);
+}
+
+.q-date-picker__overlay--popover-up::before {
+  top: auto;
+  bottom: -5px;
+  border: none;
+  border-right: 1px solid rgb(0 0 0 / 0.08);
+  border-bottom: 1px solid rgb(0 0 0 / 0.08);
+}
+
+.q-date-picker__sheet--popover {
+  width: 360px;
+  max-width: calc(100vw - 16px);
+  border: 1px solid rgb(0 0 0 / 0.08);
+  box-shadow: 0 10px 32px rgb(0 0 0 / 0.16);
+}
+
+.dark .q-date-picker__overlay--popover::before {
+  background-color: var(--card);
+  border-color: rgb(255 255 255 / 0.12);
+}
+
+.dark .q-date-picker__sheet--popover {
+  border-color: rgb(255 255 255 / 0.12);
+}
+
 /* — calendrier — */
 .q-date-calendar {
   display: flex;
@@ -5561,6 +5704,34 @@ a.q-breadcrumbs__el:hover {
   font-weight: 600;
 }
 
+/* En-tête cliquable (prop `month-dropdown`) : même poids que le libellé simple */
+.q-date-calendar__nav-label--button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.q-date-calendar__nav-label--button:hover,
+.q-date-calendar__nav-label--open {
+  background-color: rgb(0 0 0 / 0.06);
+}
+
+.q-date-calendar__nav-caret {
+  width: 14px;
+  height: 14px;
+  opacity: 0.65;
+}
+
 .q-date-calendar__nav-btn {
   display: inline-flex;
   align-items: center;
@@ -5659,6 +5830,88 @@ a.q-breadcrumbs__el:hover {
   background-color: var(--primary);
 }
 
+/* — choix du mois / de l'année (en-tête cliquable) — */
+.q-date-calendar__picker {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 2px 0;
+}
+
+.q-date-calendar__picker-year {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.q-date-calendar__picker-year-label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.q-date-calendar__picker-months {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+}
+
+.q-date-calendar__picker-month {
+  padding: 8px 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.q-date-calendar__picker-month:hover {
+  background-color: rgb(0 0 0 / 0.06);
+}
+
+.q-date-calendar__picker-month--current {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  font-weight: 600;
+}
+
+.q-date-calendar__picker-month--current:hover {
+  background-color: var(--primary);
+}
+
+/* — raccourci « Today » (prop `today-btn`) : bord à bord dans le panneau — */
+.q-date-calendar__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 -12px -12px;
+  padding: 8px 12px;
+  border-top: 1px solid rgb(0 0 0 / 0.08);
+}
+
+.q-date-calendar__today {
+  padding: 2px 6px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--primary);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.q-date-calendar__today:hover {
+  background-color: rgb(0 0 0 / 0.04);
+}
+
+.q-date-calendar__today:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
 /* — transition panneau — */
 .q-date-modal-enter-active,
 .q-date-modal-leave-active {
@@ -5678,6 +5931,36 @@ a.q-breadcrumbs__el:hover {
   animation: q-sheet-pop-out 0.2s ease forwards;
 }
 
+/* — transition popover : le panneau entre par le bas (ou par le haut s'il est basculé) — */
+.q-date-popover-enter-active,
+.q-date-popover-leave-active {
+  transition: opacity 0.12s ease;
+}
+
+.q-date-popover-enter-from,
+.q-date-popover-leave-to {
+  opacity: 0;
+}
+
+.q-date-popover-enter-active .q-date-picker__sheet {
+  animation: q-popup-in 0.12s ease;
+}
+
+.q-date-popover-leave-active .q-date-picker__sheet {
+  animation: q-date-popover-out 0.1s ease forwards;
+}
+
+.q-date-picker__overlay--popover-up.q-date-popover-enter-active .q-date-picker__sheet {
+  animation: q-popup-in-up 0.12s ease;
+}
+
+@keyframes q-date-popover-out {
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
 /* ===== QCountryPicker : panneaux sheet / modal / dialog ===== */
 .q-country-picker__overlay {
   position: fixed;
@@ -9416,101 +9699,6 @@ a.q-breadcrumbs__el:hover {
   border-radius: 50%;
 }
 
-/* ===== QEditorJs (Editor.js, éditeur par blocs) ===== */
-.q-editor-js {
-  border: 1px solid var(--border, rgb(0 0 0 / 0.12));
-  border-radius: var(--q-radius, 12px);
-  background: var(--card, #ffffff);
-  color: var(--foreground, #1d1d1d);
-  overflow: hidden;
-  transition: border-color 0.15s ease;
-}
-.q-editor-js:focus-within {
-  border-color: var(--primary, #1976d2);
-}
-.q-editor-js--disable {
-  opacity: 0.7;
-  pointer-events: none;
-}
-.q-editor-js__holder {
-  padding: 14px 16px;
-}
-.q-editor-js .codex-editor__redactor {
-  padding-bottom: 40px;
-}
-.q-editor-js .ce-block__content,
-.q-editor-js .ce-toolbar__content {
-  max-width: none;
-}
-.q-editor-js .ce-block {
-  margin-bottom: 8px;
-}
-.q-editor-js .ce-paragraph {
-  color: var(--foreground, #1d1d1d);
-  font-size: 14px;
-  line-height: 1.7;
-  outline: none;
-}
-.q-editor-js .ce-paragraph[data-placeholder]:empty::before {
-  color: var(--muted, #8b93a1);
-}
-.q-editor-js .ce-header {
-  color: var(--foreground, #1d1d1d);
-  font-weight: 700;
-  line-height: 1.3;
-}
-.q-editor-js h1.ce-header {
-  font-size: 1.55em;
-}
-.q-editor-js h2.ce-header {
-  font-size: 1.3em;
-}
-.q-editor-js h3.ce-header {
-  font-size: 1.1em;
-}
-.q-editor-js .cdx-list {
-  color: var(--foreground, #1d1d1d);
-  line-height: 1.7;
-}
-.q-editor-js .cdx-checklist {
-  color: var(--foreground, #1d1d1d);
-}
-.q-editor-js .ce-code__textarea {
-  background: color-mix(in srgb, var(--foreground, #1d1d1d) 6%, transparent);
-  color: var(--foreground, #1d1d1d);
-  border: 1px solid var(--border, rgb(0 0 0 / 0.12));
-  border-radius: 8px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-}
-.q-editor-js .cdx-quote {
-  margin: 0;
-  padding: 10px 14px;
-  border-left: 3px solid var(--primary, #1976d2);
-  background: color-mix(in srgb, var(--primary, #1976d2) 8%, transparent);
-  color: var(--foreground, #1d1d1d);
-  border-radius: 0 8px 8px 0;
-}
-.q-editor-js .ce-toolbar__plus,
-.q-editor-js .ce-toolbar__settings-btn {
-  color: var(--foreground, #1d1d1d);
-}
-.q-editor-js .ce-toolbar__plus:hover,
-.q-editor-js .ce-toolbar__settings-btn:hover {
-  color: var(--primary, #1976d2);
-}
-.q-editor-js .ce-inline-toolbar,
-.q-editor-js .ce-conv-toolbar,
-.q-editor-js .ce-toolbox__button,
-.q-editor-js .ce-popover {
-  background: var(--card, #ffffff);
-  color: var(--foreground, #1d1d1d);
-  border: 1px solid var(--border, rgb(0 0 0 / 0.12));
-}
-.q-editor-js .ce-toolbox__button--active,
-.q-editor-js .ce-inline-tool--active {
-  color: var(--primary, #1976d2);
-}
-
 /* NodeView Vue de la table : wrapper + table + tbody (contentDOM) */
 .q-tiptap__editor .ProseMirror .q-tiptap__table-wrapper {
   position: relative;