@dnax/ui 0.0.27 → 0.0.28

package/components/QDialog.vue

@@ -41,10 +41,18 @@ interface Props {
   contentStyle?: StyleValue
   noBackdropDismiss?: boolean
   noEscDismiss?: boolean
-  /** Animation : fade | zoom | slide-up | slide-down | slide-left | slide-right | swipe-left | swipe-right (sinon basée sur position) */
-  transition?: "fade" | "zoom" | "slide-up" | "slide-down" | "slide-left" | "slide-right" | "swipe-left" | "swipe-right"
+  /** Animation : fade | zoom | slide-up | slide-down | sheet-up | sheet-down
+   *  (même glissement que slide, ouverture qui décélère en fin de course) |
+   *  slide-left | slide-right | swipe-left | swipe-right (sinon basée sur position) */
+  transition?: "fade" | "zoom" | "slide-up" | "slide-down" | "sheet-up" | "sheet-down" | "slide-left" | "slide-right" | "swipe-left" | "swipe-right"
   /** Durée des transitions d'entrée/sortie en ms (défaut CSS : ~200ms entrée, ~150ms sortie) */
   transitionDuration?: number
+  /** Courbe d'easing de l'OUVERTURE — valeur CSS ("cubic-bezier(0.32, 0.72, 0, 1)",
+   *  "ease-out", "linear"…) — défaut : courbe propre à chaque transition
+   *  (sheet-* = décélération en fin de course, slide-* = ease…) */
+  transitionEasingEnter?: string
+  /** Courbe d'easing de la FERMETURE — même principe que transition-easing-enter */
+  transitionEasingLeave?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -60,6 +68,8 @@ const props = withDefaults(defineProps<Props>(), {
   noBackdropDismiss: false,
   noEscDismiss: false,
   transitionDuration: undefined,
+  transitionEasingEnter: "",
+  transitionEasingLeave: "",
 })
 
 const emit = defineEmits<{
@@ -159,15 +169,19 @@ const transitionName = computed(() =>
   props.transition ? `q-dialog-${props.transition}` : "q-dialog",
 )
 
-// Durée des transitions (enter/leave) via variables CSS sur l'overlay
-const durationStyle = computed<StyleValue>(() =>
-  props.transitionDuration
-    ? {
-        "--q-dialog-duration-enter": `${props.transitionDuration}ms`,
-        "--q-dialog-duration-leave": `${props.transitionDuration}ms`,
-      }
-    : {},
-)
+// Réglages des transitions (durée + courbes d'easing) exposés en variables CSS
+// sur l'overlay : --q-dialog-duration-enter/leave et
+// --q-dialog-easing-enter/leave (consommées par styles/main.css).
+const transitionStyle = computed<StyleValue>(() => {
+  const style: Record<string, string> = {}
+  if (props.transitionDuration) {
+    style["--q-dialog-duration-enter"] = `${props.transitionDuration}ms`
+    style["--q-dialog-duration-leave"] = `${props.transitionDuration}ms`
+  }
+  if (props.transitionEasingEnter) style["--q-dialog-easing-enter"] = props.transitionEasingEnter
+  if (props.transitionEasingLeave) style["--q-dialog-easing-leave"] = props.transitionEasingLeave
+  return style
+})
 </script>
 
 <template>
@@ -178,7 +192,7 @@ const durationStyle = computed<StyleValue>(() =>
         :ref="markOverlay"
         class="q-dialog__overlay"
         :class="overlayClasses"
-        :style="durationStyle"
+        :style="transitionStyle"
         @mousedown.self="!persistent && !noBackdropDismiss && (open = false)"
       >
         <div

package/components/QEditorJs.vue

@@ -0,0 +1,146 @@
+<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>

package/components/QFab.vue

@@ -10,7 +10,7 @@ export const qFabKey: InjectionKey<QFabContext> = Symbol("q-fab")
 </script>
 
 <script setup lang="ts">
-import { computed, provide, ref } from "vue"
+import { computed, onBeforeUnmount, onMounted, provide, ref } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { colorValue, foregroundFor } from "../lib/colors"
@@ -48,6 +48,23 @@ const toggle = () => {
   if (!props.disable) open.value = !open.value
 }
 
+// Clic à l'extérieur du FAB → fermeture (actions repliées)
+const rootEl = ref<HTMLElement | null>(null)
+const onDocPointerDown = (e: PointerEvent) => {
+  if (!props.modelValue || !rootEl.value) return
+  if (!rootEl.value.contains(e.target as Node)) open.value = false
+}
+onMounted(() => {
+  if (typeof document !== "undefined") {
+    document.addEventListener("pointerdown", onDocPointerDown)
+  }
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") {
+    document.removeEventListener("pointerdown", onDocPointerDown)
+  }
+})
+
 provide<QFabContext>(qFabKey, {
   close: () => {
     open.value = false
@@ -61,7 +78,7 @@ const mainStyle = computed<Record<string, string>>(() => ({
 </script>
 
 <template>
-  <div class="q-fab" :class="[`q-fab--${position}`, open && 'q-fab--open']">
+  <div ref="rootEl" class="q-fab" :class="[`q-fab--${position}`, open && 'q-fab--open']">
     <div class="q-fab__actions" role="menu">
       <slot />
     </div>

package/components/QSyntax.vue

@@ -63,15 +63,28 @@ const slotCode = computed(() => {
 
 const source = computed(() => props.code ?? slotCode.value)
 
-// Highlighter singleton : une seule instance pour toute l'application
-let highlighterPromise: Promise<Highlighter> | null = null
-const getHighlighter = () => {
-  highlighterPromise ??= createHighlighter({
-    themes: [DEFAULT_THEME],
-    langs: DEFAULT_LANGS,
-    engine: createJavaScriptRegexEngine(),
-  })
-  return highlighterPromise
+// Highlighter singleton : une seule instance pour toute l'application.
+// Stocké sur globalThis (et non au scope module) pour survivre aux
+// réévaluations du module (HMR — édition de QSyntax.vue ou de ses imports,
+// ex. lib/icons.ts) : sinon une instance orpheline est créée à chaque cycle
+// et Shiki avertit (« [Shiki] N instances have been created… »).
+const SHIKI_KEY = "__dnax_ui_shiki_highlighter__"
+const getHighlighter = (): Promise<Highlighter> => {
+  const g = globalThis as { [SHIKI_KEY]?: Promise<Highlighter> }
+  let highlighter = g[SHIKI_KEY]
+  if (!highlighter) {
+    highlighter = createHighlighter({
+      themes: [DEFAULT_THEME],
+      langs: DEFAULT_LANGS,
+      engine: createJavaScriptRegexEngine(),
+    }).catch((error: unknown) => {
+      // Une création en échec ne doit pas bloquer les montages suivants
+      delete g[SHIKI_KEY]
+      throw error
+    })
+    g[SHIKI_KEY] = highlighter
+  }
+  return highlighter
 }
 
 const html = ref("")