@dnax/ui 0.0.42 → 0.0.44

package/styles/main.css

@@ -203,31 +203,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 +270,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) */
@@ -5541,6 +5566,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 +5637,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 +5763,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 +5864,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 +9632,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;

package/components/QEditorJs.vue

@@ -1,146 +0,0 @@
-<script setup lang="ts">
-// QEditorJs — éditeur par blocs basé sur Editor.js (https://editorjs.io).
-// v-model = données JSON : { time?, blocks: [{ type, data }], version? }.
-// Tools par défaut : paragraph, header (H1-H3), list (bullet/ordered),
-// checklist, quote, code, delimiter. Extensible via la prop `tools`.
-// SSR-safe : l'instance Editor.js n'est créée qu'au montage (client).
-// Note : Editor.js v2 injecte lui-même ses styles à l'init (aucun import CSS
-// nécessaire) ; les surcharges de thème vivent dans styles/main.css.
-import { onBeforeUnmount, onMounted, ref, watch } from "vue"
-
-interface QEditorJsBlock {
-  type: string
-  data: Record<string, unknown>
-}
-
-interface QEditorJsData {
-  time?: number
-  blocks: QEditorJsBlock[]
-  version?: string
-}
-
-interface Props {
-  /** Données du document (v-model) — { blocks: [{ type, data }] } */
-  data?: QEditorJsData | null
-  /** Placeholder du bloc par défaut */
-  placeholder?: string
-  /** Hauteur minimale de la zone d'édition (défaut : 220px) */
-  minHeight?: string
-  /** Lecture seule */
-  readonly?: boolean
-  /** Désactivé (lecture seule + style grisé) */
-  disable?: boolean
-  /** Tools supplémentaires (défaut : paragraph, header, list, checklist, quote, code, delimiter) */
-  tools?: Record<string, any>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  data: null,
-  placeholder: "Write something…",
-  minHeight: "220px",
-  readonly: false,
-  disable: false,
-  tools: () => ({}),
-})
-
-const emit = defineEmits<{
-  "update:modelValue": [data: QEditorJsData]
-  ready: [editor: unknown]
-}>()
-
-const holderEl = ref<HTMLElement | null>(null)
-let editor: any = null
-let lastJson = ""
-let internal = false
-
-const isEditable = () => !props.readonly && !props.disable
-
-const emitData = async () => {
-  if (!editor) return
-  try {
-    const saved: QEditorJsData = (await editor.save()) as QEditorJsData
-    internal = true
-    lastJson = JSON.stringify(saved)
-    emit("update:modelValue", saved)
-    internal = false
-  }
-  catch {
-    /* document invalide — ignoré */
-  }
-}
-
-onMounted(async () => {
-  const mod = await import("@editorjs/editorjs")
-  const EditorJS = mod.default
-  // Les packages tools Editor.js n'embarquent pas tous des types TS
-  // @ts-ignore
-  const Header = (await import("@editorjs/header")).default
-  // @ts-ignore
-  const Paragraph = (await import("@editorjs/paragraph")).default
-  // @ts-ignore
-  const List = (await import("@editorjs/list")).default
-  // @ts-ignore
-  const Checklist = (await import("@editorjs/checklist")).default
-  // @ts-ignore
-  const Quote = (await import("@editorjs/quote")).default
-  // @ts-ignore
-  const Code = (await import("@editorjs/code")).default
-  // @ts-ignore
-  const Delimiter = (await import("@editorjs/delimiter")).default
-
-  const defaults: Record<string, any> = {
-    paragraph: { class: Paragraph },
-    header: { class: Header, inlineToolbar: true, config: { levels: [1, 2, 3] } },
-    list: { class: List, inlineToolbar: true },
-    checklist: { class: Checklist, inlineToolbar: true },
-    quote: { class: Quote, inlineToolbar: true },
-    code: { class: Code },
-    delimiter: { class: Delimiter },
-  }
-
-  editor = new EditorJS({
-    holder: holderEl.value as HTMLElement,
-    tools: { ...defaults, ...props.tools },
-    data: props.data ?? undefined,
-    placeholder: props.placeholder,
-    readOnly: !isEditable(),
-    onChange: () => { emitData() },
-    onReady: () => { emit("ready", editor) },
-  })
-  emit("ready", editor)
-})
-
-// Changement externe → render (sans boucle : on compare au dernier JSON émis)
-watch(
-  () => props.data,
-  (value) => {
-    if (internal || !editor) return
-    const json = value ? JSON.stringify(value) : ""
-    if (json === lastJson) return
-    editor.render(value ?? { time: Date.now(), blocks: [], version: "2.31.6" })
-      .then(() => { lastJson = json })
-      .catch(() => { /* ignore */ })
-  },
-)
-
-onBeforeUnmount(() => {
-  if (editor && typeof editor.destroy === "function") editor.destroy()
-  editor = null
-})
-
-// — Méthodes exposées —
-const save = () => editor?.save() as Promise<QEditorJsData> | undefined
-const clear = () => editor?.clear()
-const getEditor = () => editor
-
-defineExpose({ save, clear, getEditor })
-</script>
-
-<template>
-  <div
-    class="q-editor-js"
-    :class="{ 'q-editor-js--readonly': readonly || disable, 'q-editor-js--disable': disable }"
-  >
-    <div ref="holderEl" class="q-editor-js__holder" :style="{ minHeight }" />
-  </div>
-</template>