@dnax/ui 0.0.27 → 0.0.29

package/components/QBar.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// QBar — barre fine façon Quasar : ligne compacte en haut d'une fenêtre /
+// d'une app (contrôles fenêtre, menus, statut…). Utile pour Electron
+// frameless, entêtes de dialogs desktop, etc. API : <q-bar dense dark>…
+import type { Component } from "vue"
+
+interface Props {
+  /** Compact (hauteur réduite) */
+  dense?: boolean
+  /** Force le style sombre (fond foncé, texte clair) */
+  dark?: boolean
+  /** Balise rendue (défaut : div) */
+  as?: Component | string
+  /** Rôle ARIA (défaut : toolbar) — passer "" pour aucun */
+  role?: string
+  /** aria-label du toolbar */
+  label?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dense: false,
+  dark: false,
+  as: "div",
+  role: "toolbar",
+  label: "Bar",
+})
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    class="q-bar"
+    :class="{
+      'q-bar--dense': dense,
+      'q-bar--dark': dark,
+    }"
+    :role="role || undefined"
+    :aria-label="role === 'toolbar' ? label : undefined"
+  >
+    <slot />
+  </component>
+</template>

package/components/QBoard.vue

@@ -0,0 +1,285 @@
+<script lang="ts">
+// QBoard — tableau de bord type Power BI : une grille de tuiles en arrière-plan
+// (colonnes × rangées) et, À L'INTÉRIEUR, QInteract qui gère le drag & resize
+// des widgets. Les items sont exprimés en TUILLES :
+//   { id, column, row, spanColumns, spanRows, … }
+// QBoard traduit ces tuiles en pixels pour QInteract et reconvertit les
+// positions déplacées / redimensionnées en tuiles (v-model:items).
+export interface QBoardItem {
+  /** Identifiant unique */
+  id: string | number
+  /** Colonne de départ (0-based) */
+  column: number
+  /** Rangée de départ (0-based) */
+  row: number
+  /** Nombre de colonnes occupées */
+  spanColumns: number
+  /** Nombre de rangées occupées */
+  spanRows: number
+  /** Données métier libres (title, type de widget, …) */
+  [key: string]: any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import QInteract from "./QInteract.vue"
+import type { QInteractItem } from "./QInteract.vue"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Tuiles (v-model:items) : [{ id, column, row, spanColumns, spanRows, … }] */
+  items?: QBoardItem[]
+  /** Tuile sélectionnée (v-model:selected) */
+  selected?: string | number | null
+  /** Nombre de colonnes de la grille (défaut 12) */
+  columns?: number
+  /** Hauteur d'une rangée en px (défaut 64) */
+  rowHeight?: number
+  /** Nombre de rangées visibles (défaut : calculé depuis les tuiles) */
+  rows?: number
+  /** Hauteur du conteneur (px ou CSS) — sinon auto depuis rows */
+  height?: string | number
+  /** Marge intérieure (px) */
+  padding?: number
+  /** Espacement entre les tuiles (px, défaut 6) */
+  gap?: number
+  /** Autorise drag & resize (défaut true) */
+  interactive?: boolean
+  /** Lecture seule : drag & resize désactivés, poignées masquées */
+  readonly?: boolean
+  /** Drag limité à la poignée haute */
+  handle?: boolean
+  /** Empêche le chevauchement des tuiles (défaut true) */
+  collision?: boolean
+  /** Affiche la numérotation des tuiles de fond */
+  showLabels?: boolean
+  dense?: boolean
+  dark?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  selected: null,
+  columns: 12,
+  rowHeight: 64,
+  rows: 0,
+  height: undefined,
+  padding: 10,
+  gap: 6,
+  interactive: true,
+  readonly: false,
+  handle: false,
+  collision: true,
+  showLabels: false,
+  dense: false,
+  dark: false,
+})
+
+const emit = defineEmits<{
+  "update:items": [value: QBoardItem[]]
+  "update:selected": [value: string | number | null]
+  select: [item: QBoardItem]
+  "drag-end": [item: QBoardItem]
+  "resize-end": [item: QBoardItem]
+}>()
+
+const grid = ref<QBoardItem[]>([])
+watch(
+  () => props.items,
+  (v) => {
+    if (v && v !== grid.value) grid.value = v.map((it) => ({ ...it }))
+  },
+  { immediate: true },
+)
+const push = (next: QBoardItem[]) => {
+  grid.value = next
+  emit("update:items", next)
+}
+
+const sel = ref<string | number | null>(props.selected)
+watch(
+  () => props.selected,
+  (v) => {
+    sel.value = v
+  },
+)
+
+// ─── Largeur réelle (Responsive : la cellule s'adapte à la largeur) ───
+const rootEl = ref<HTMLElement | null>(null)
+const widthPx = ref(0)
+let ro: ResizeObserver | null = null
+onMounted(() => {
+  if (rootEl.value) widthPx.value = rootEl.value.clientWidth
+  if (typeof ResizeObserver !== "undefined" && rootEl.value) {
+    ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width ?? 0
+      if (w !== widthPx.value) widthPx.value = w
+    })
+    ro.observe(rootEl.value)
+  }
+})
+onBeforeUnmount(() => ro?.disconnect())
+
+const innerWidth = computed(() => Math.max(1, widthPx.value - props.padding * 2))
+const cellW = computed(() => innerWidth.value / Math.max(1, props.columns))
+
+// ─── Hauteur ───
+const usedRows = computed(() => {
+  if (props.rows > 0) return props.rows
+  let max = 1
+  for (const it of grid.value) max = Math.max(max, it.row + (it.spanRows || 1))
+  return max
+})
+const heightStyle = computed<Record<string, string>>(() =>
+  props.height !== undefined
+    ? { height: typeof props.height === "number" ? props.height + "px" : props.height }
+    : { height: usedRows.value * props.rowHeight + props.padding * 2 + "px" },
+)
+
+// ─── Tuiles → pixels (pour QInteract) ───
+const pxItems = ref<QInteractItem[]>([])
+const clampCol = (c: number) => Math.max(0, Math.min(props.columns - 1, c))
+const buildPx = () => {
+  pxItems.value = grid.value.map((it) => {
+    const col = Math.min(it.column, props.columns - 1)
+    return {
+      ...it,
+      x: Math.round(col * cellW.value) + props.padding,
+      y: Math.round(it.row * props.rowHeight) + props.padding,
+      w: Math.round((it.spanColumns || 1) * cellW.value),
+      h: Math.round((it.spanRows || 1) * props.rowHeight),
+    }
+  })
+}
+watch([grid, cellW, () => props.rowHeight, () => props.padding], buildPx, { immediate: true })
+watch(innerWidth, () => nextTickPx())
+
+let pending = false
+const nextTickPx = () => {
+  if (pending) return
+  pending = true
+  nextTick(() => {
+    pending = false
+    buildPx()
+  })
+}
+
+// ─── QInteract (pixels) → tuiles ───
+const toGridItem = (px: QInteractItem): QBoardItem => {
+  const cw = cellW.value || 1
+  const column = clampCol(Math.round((px.x - props.padding) / cw))
+  const spanColumns = Math.max(1, Math.round(px.w / cw))
+  const row = Math.max(0, Math.round((px.y - props.padding) / props.rowHeight))
+  const spanRows = Math.max(1, Math.round(px.h / props.rowHeight))
+  return { ...px, column, row, spanColumns, spanRows } as QBoardItem
+}
+
+const onInteractItems = (pxList: QInteractItem[]) => {
+  const next = pxList.map(toGridItem)
+  // recentre les tuiles si elles débordent de la grille
+  for (const it of next) {
+    it.column = clampCol(Math.min(it.column, props.columns - (it.spanColumns || 1)))
+  }
+  push(next)
+  buildPx()
+}
+const onSelect = (px: QInteractItem) => {
+  const g = toGridItem(px)
+  sel.value = g.id
+  emit("update:selected", g.id)
+  emit("select", g)
+}
+const forwardDragEnd = (px: QInteractItem) => {
+  emit("drag-end", toGridItem(px))
+}
+const forwardResizeEnd = (px: QInteractItem) => {
+  emit("resize-end", toGridItem(px))
+}
+
+const gridToUser = (g: QBoardItem) => g
+const userOf = (px: QInteractItem) => toGridItem(px)
+
+const gridStyle = computed<Record<string, string>>(() => ({
+  backgroundSize: Math.max(1, cellW.value) + "px " + props.rowHeight + "px",
+}))
+
+const rootClasses = computed(() =>
+  cn("q-board", props.dark && "q-board--dark", props.dense && "q-board--dense"),
+)
+
+// ─── API ───
+const addItem = (item: QBoardItem) => {
+  push([...grid.value, { ...item }])
+  sel.value = item.id
+  emit("update:selected", item.id)
+}
+const removeItem = (id: string | number) => {
+  push(grid.value.filter((it) => String(it.id) !== String(id)))
+  if (String(sel.value) === String(id)) sel.value = null
+}
+const clear = () => push([])
+const layout = () => grid.value.map((it) => ({ ...it }))
+
+defineExpose({
+  addItem,
+  removeItem,
+  clear,
+  layout,
+  getItems: () => grid.value.map((it) => ({ ...it })),
+  columns: () => props.columns,
+  rows: () => usedRows.value,
+})
+</script>
+
+<template>
+  <div ref="rootEl" class="q-board" :class="rootClasses" :style="heightStyle">
+    <!-- ═══════ Grille de tuiles en arrière-plan ═══════ -->
+    <div class="q-board__grid" :style="gridStyle" aria-hidden="true">
+      <template v-if="showLabels">
+        <span
+          v-for="c in columns"
+          :key="'c' + c"
+          class="q-board__cell-label q-board__cell-label--col"
+          :style="{ left: props.padding + (c - 1) * cellW + 'px', width: cellW + 'px' }"
+        >{{ c }}</span>
+        <span
+          v-for="r in usedRows"
+          :key="'r' + r"
+          class="q-board__cell-label q-board__cell-label--row"
+          :style="{ top: props.padding + (r - 1) * rowHeight + 'px', height: rowHeight + 'px' }"
+        >{{ r }}</span>
+      </template>
+    </div>
+
+    <!-- ═══════ QInteract à l'intérieur (drag & resize) ═══════ -->
+    <QInteract
+      class="q-board__interact"
+      :items="pxItems"
+      :selected="sel"
+      :interactive="interactive"
+      :readonly="readonly"
+      :handle="handle"
+      :snap="1"
+      :collision="collision"
+      :padding="props.padding"
+      :gap="gap"
+      :min-width="cellW"
+      :min-height="rowHeight"
+      :dense="dense"
+      @update:items="onInteractItems"
+      @update:selected="(v) => (sel = v)"
+      @select="onSelect"
+      @drag-end="forwardDragEnd"
+      @resize-end="forwardResizeEnd"
+    >
+      <template #item="{ item }">
+        <slot name="item" :item="userOf(item)" />
+      </template>
+      <template #handle="{ item }">
+        <slot name="handle" :item="userOf(item)" />
+      </template>
+      <slot name="empty" />
+    </QInteract>
+  </div>
+</template>

package/components/QConfigProvider.vue

@@ -12,7 +12,7 @@ import QLoadingProvider from "./QLoadingProvider.vue"
 import QBottomSheetProvider from "./QBottomSheetProvider.vue"
 import QImagePreviewProvider from "./QImagePreviewProvider.vue"
 import { qConfigKey, qProvidersKey } from "../lib/config"
-import type { QConfigContext, QTheme, ThemeMode } from "../lib/config"
+import type { QAppLang, QConfigContext, QTheme, ThemeMode } from "../lib/config"
 import { isRadiusScale, RADIUS_VALUES } from "../lib/useComponentProps"
 
 interface Props {
@@ -23,6 +23,8 @@ interface Props {
    * :theme="{ mode: 'dark', colors: { primary: '#ff0000' }, componentProps: { QBtn: { radius: 'md' } } }"
    */
   theme?: QTheme | ThemeMode
+  /** Langue appliquée aux composants qui la supportent ("en" | "fr") */
+  lang?: QAppLang
   /** Rend un div conteneur ; sinon fournit le thème sans élément DOM */
   render?: boolean
   /** Classe(s) additionnelle(s) sur le conteneur */
@@ -33,6 +35,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   theme: () => ({}),
+  lang: undefined,
   render: true,
   class: "",
   style: undefined,
@@ -67,9 +70,13 @@ const mergedTheme = computed<QTheme>(() => {
     mode: self.mode ?? parentTheme?.mode ?? "system",
     colors: { ...parentTheme?.colors, ...self.colors },
     componentProps: mergeComponentProps(parentTheme?.componentProps, self.componentProps),
+    lang: props.lang ?? self.lang ?? parentTheme?.lang ?? "en",
   }
 })
 
+/** Langue effective : prop > theme.lang > parent */
+const lang = computed<QAppLang>(() => mergedTheme.value.lang ?? "en")
+
 // — Mode clair/sombre —
 const systemDark = ref(false)
 let mql: MediaQueryList | null = null
@@ -100,9 +107,6 @@ const isDark = computed<boolean>(() => {
   if (mode === "light") return false
   return systemDark.value
 })
-
-// Applique .dark sur le conteneur ET sur <html> (les overlays téléportés au body
-// — dialog, sheets — doivent aussi passer en sombre)
 watch(
   isDark,
   (dark) => {
@@ -113,7 +117,7 @@ watch(
   { immediate: true },
 )
 
-provide<QConfigContext>(qConfigKey, { theme: mergedTheme, isDark })
+provide<QConfigContext>(qConfigKey, { theme: mergedTheme, isDark, lang })
 
 // Providers intégrés ($q.dialog + $q.notify) : rendus UNE fois par le
 // QConfigProvider le plus externe (les imbriqués ne re-rendent pas → pas de doublons)

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>