@dnax/ui 0.0.25 → 0.0.27

package/components/QBottomSheetHeader.vue

@@ -2,8 +2,9 @@
 // QBottomSheetHeader — header du panneau façon barre d'app (équivalent QHeader) :
 // le contenu est embarqué dans un <q-toolbar> (min-height 50px, padding 0 12px),
 // avec titre + description + bouton fermer (équivalent DrawerHeader/DrawerTitle).
-// no-padding retire le padding horizontal du toolbar.
-import { inject } from "vue"
+// Si un CONTENU custom est fourni (slot par défaut, sans title/description),
+// il n'est PAS enveloppé dans un toolbar — l'utilisateur fournit son layout.
+import { Comment, Fragment, Text, computed, inject, onUpdated, ref, useSlots } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { qBottomSheetKey } from "./QBottomSheet.vue"
@@ -17,11 +18,44 @@ interface Props {
   noPadding?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   noPadding: false,
 })
 
 const sheet = inject(qBottomSheetKey, null)
+
+const slots = useSlots()
+
+const refresh = ref(0)
+onUpdated(() => {
+  refresh.value++
+})
+
+function slotHasContent(nodes: unknown[]): boolean {
+  for (const n of nodes as any[]) {
+    if (!n) continue
+    if (n.type === Comment) continue
+    if (n.type === Text) {
+      if (String(n.children ?? "").trim() !== "") return true
+      continue
+    }
+    if (n.type === Fragment) {
+      if (slotHasContent(n.children ?? [])) return true
+      continue
+    }
+    return true
+  }
+  return false
+}
+
+const isStandard = computed(
+  () => props.title !== undefined || props.description !== undefined,
+)
+const hasCustomContent = computed(() => {
+  void refresh.value
+  return slotHasContent(slots.default?.() ?? [])
+})
+const useCustom = computed(() => !isStandard.value && hasCustomContent.value)
 </script>
 
 <template>
@@ -30,7 +64,9 @@ const sheet = inject(qBottomSheetKey, null)
     :class="{ 'q-bottom-sheet__header--no-padding': noPadding }"
     v-bind="$attrs"
   >
-    <q-toolbar>
+    <slot v-if="useCustom" />
+
+    <q-toolbar v-else>
       <div class="q-bottom-sheet__header-text">
         <h2 v-if="title" class="q-bottom-sheet__title">{{ title }}</h2>
         <slot name="title" />

package/components/QBottomSheetProvider.vue

@@ -2,11 +2,19 @@
 // QBottomSheetProvider — rend la pile de bottom sheets programmatiques ($q.bottomSheet).
 // Intégré dans QConfigProvider (rendu automatiquement par le plus externe),
 // utilisable aussi en autonome : <q-bottom-sheet-provider><slot /></q-bottom-sheet-provider>.
+//
+// Deux patterns (comme le plugin dialog) :
+//  - SANS title/description → le composant passé EST le sheet (racine
+//    <q-bottom-sheet v-model="open"> pilotée par useBottomSheetPluginComponent,
+//    open déjà true) — rendu tel quel via QBottomSheetHost.
+//  - AVEC title/description → le provider enveloppe dans un q-bottom-sheet +
+//    header ; le composant fournit le corps et émet @ok/@cancel/@dismiss.
 import { computed, inject } from "vue"
 import { bottomSheetStack, closeBottomSheet } from "../lib/q"
 import type { BottomSheetController } from "../lib/q"
 import { qConfigKey } from "../lib/config"
 import { themeVarsStyle } from "../lib/themeVars"
+import QBottomSheetHost from "./internal/QBottomSheetHost.vue"
 
 const sheets = bottomSheetStack
 
@@ -31,34 +39,49 @@ const handleDismiss = (ctrl: BottomSheetController) => {
 
 <template>
   <slot />
-  <q-bottom-sheet
-    v-for="(sheet, idx) in sheets"
-    :key="idx"
-    :model-value="true"
-    :persistent="sheet._opts.persistent"
-    :width="sheet._opts.width"
-    :height="sheet._opts.height"
-    :rounded="sheet._opts.rounded"
-    :dark="sheet._opts.dark"
-    :translucent="sheet._opts.translucent"
-    :drag-threshold="sheet._opts.dragThreshold"
-    :transition="sheet._opts.transition"
-    :transition-duration="sheet._opts.transitionDuration"
-    :content-style="sheetThemeStyle"
-    @update:model-value="(v: boolean) => !v && handleDismiss(sheet)"
-  >
-    <q-bottom-sheet-header
-      v-if="sheet._opts.title || sheet._opts.description"
-      :title="sheet._opts.title"
-      :description="sheet._opts.description"
-    />
-    <component
-      :is="sheet._opts.component"
-      v-bind="sheet._opts.componentProps"
+  <template v-for="(sheet, idx) in sheets" :key="idx">
+    <!-- Pattern auto : le composant est lui-même un <q-bottom-sheet> -->
+    <q-bottom-sheet-host
+      v-if="!sheet._opts.title && !sheet._opts.description"
+      :ctrl="sheet"
+      :on-ok="(data?: unknown) => handleOk(sheet, data)"
+      :on-cancel="() => handleCancel(sheet)"
+      :on-hide="() => handleDismiss(sheet)"
       @ok="(data?: unknown) => handleOk(sheet, data)"
       @cancel="handleCancel(sheet)"
       @dismiss="handleDismiss(sheet)"
       @close="handleDismiss(sheet)"
     />
-  </q-bottom-sheet>
+    <!-- Pattern enveloppe : le provider rend le panneau + header, le composant
+         fournit le corps (events legacy ok/cancel/dismiss/close) -->
+    <q-bottom-sheet
+      v-else
+      :model-value="true"
+      :persistent="sheet._opts.persistent"
+      :width="sheet._opts.width"
+      :height="sheet._opts.height"
+      :rounded="sheet._opts.rounded"
+      :dark="sheet._opts.dark"
+      :translucent="sheet._opts.translucent"
+      :drag-threshold="sheet._opts.dragThreshold"
+      :transition="sheet._opts.transition"
+      :transition-duration="sheet._opts.transitionDuration"
+      :content-style="sheetThemeStyle"
+      @update:model-value="(v: boolean) => !v && handleDismiss(sheet)"
+    >
+      <q-bottom-sheet-header
+        v-if="sheet._opts.title || sheet._opts.description"
+        :title="sheet._opts.title"
+        :description="sheet._opts.description"
+      />
+      <component
+        :is="sheet._opts.component"
+        v-bind="sheet._opts.componentProps"
+        @ok="(data?: unknown) => handleOk(sheet, data)"
+        @cancel="handleCancel(sheet)"
+        @dismiss="handleDismiss(sheet)"
+        @close="handleDismiss(sheet)"
+      />
+    </q-bottom-sheet>
+  </template>
 </template>

package/components/QConfigProvider.vue

@@ -86,6 +86,11 @@ onMounted(() => {
 })
 onBeforeUnmount(() => {
   mql?.removeEventListener("change", updateSystem)
+  // Retire les variables de thème posées sur <html> (provider racine)
+  if (isProvidersRoot.value && typeof document !== "undefined") {
+    for (const key of appliedThemeKeys) document.documentElement.style.removeProperty(key)
+    appliedThemeKeys = []
+  }
 })
 
 /** Mode effectif : light | dark | system résolu */
@@ -144,6 +149,26 @@ const themeStyle = computed<Record<string, string>>(() => {
   if (isRadiusScale(global)) style["--q-radius"] = RADIUS_VALUES[global]
   return style
 })
+
+// Thème GLOBAL (provider racine) : pose aussi les variables sur <html> — les
+// overlays téléportés au body (dialogs $q.dialog, …) perdent l'héritage du div
+// .q-config-provider et retomberaient sur :root (couleurs par défaut). Comme la
+// classe .dark déjà posée sur <html>, les téléports héritent du thème réel.
+// Les providers imbriqués (non-root) ne touchent pas <html> : leur div local prime.
+let appliedThemeKeys: string[] = []
+watch(
+  [themeStyle, isProvidersRoot],
+  ([style, root]) => {
+    if (typeof document === "undefined" || !root) return
+    for (const key of appliedThemeKeys) document.documentElement.style.removeProperty(key)
+    appliedThemeKeys = []
+    for (const [k, v] of Object.entries(style)) {
+      document.documentElement.style.setProperty(k, v)
+      appliedThemeKeys.push(k)
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>

package/components/QDialogHeader.vue

@@ -2,8 +2,10 @@
 // QDialogHeader — header de la modale façon barre d'app (équivalent QHeader) :
 // le contenu est embarqué dans un <q-toolbar> (min-height 50px, padding 0 12px),
 // avec titre + description + bouton fermer OPT-IN (show-close).
-// no-padding retire le padding horizontal du toolbar.
-import { inject } from "vue"
+// Si un CONTENU custom est fourni (slot par défaut, sans title/description/
+// show-close), il n'est PAS enveloppé dans un toolbar — l'utilisateur fournit
+// son propre layout (ex. <q-toolbar>) directement dans la barre.
+import { Comment, Fragment, Text, computed, inject, onUpdated, ref, useSlots } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { qDialogKey } from "./QDialog.vue"
@@ -25,6 +27,43 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const dialog = inject(qDialogKey, null)
+
+const slots = useSlots()
+
+// Force le recalcul de la détection à chaque update (le contenu du slot peut
+// changer dynamiquement côté parent)
+const refresh = ref(0)
+onUpdated(() => {
+  refresh.value++
+})
+
+function slotHasContent(nodes: unknown[]): boolean {
+  for (const n of nodes as any[]) {
+    if (!n) continue
+    if (n.type === Comment) continue
+    if (n.type === Text) {
+      if (String(n.children ?? "").trim() !== "") return true
+      continue
+    }
+    if (n.type === Fragment) {
+      if (slotHasContent(n.children ?? [])) return true
+      continue
+    }
+    return true
+  }
+  return false
+}
+
+// Mode « custom » : pas de title/description/close et un contenu de slot → on
+// rend le slot directement (sans toolbar d'enveloppe)
+const isStandard = computed(
+  () => props.title !== undefined || props.description !== undefined || props.showClose,
+)
+const hasCustomContent = computed(() => {
+  void refresh.value
+  return slotHasContent(slots.default?.() ?? [])
+})
+const useCustom = computed(() => !isStandard.value && hasCustomContent.value)
 </script>
 
 <template>
@@ -33,7 +72,11 @@ const dialog = inject(qDialogKey, null)
     :class="{ 'q-dialog__header--no-padding': noPadding }"
     v-bind="$attrs"
   >
-    <q-toolbar>
+    <!-- Contenu custom : l'utilisateur fournit son propre layout (q-toolbar…) -->
+    <slot v-if="useCustom" />
+
+    <!-- Mode standard : toolbar embarqué (title / description / close) -->
+    <q-toolbar v-else>
       <div class="q-dialog__header-text">
         <h2 v-if="title" class="q-dialog__title">{{ title }}</h2>
         <slot name="title" />

package/components/internal/QBottomSheetHost.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// QBottomSheetHost — host interne du $q.bottomSheet (pattern Quasar, comme
+// QDialogHost) : rend le composant passé tel quel et lui fournit le contexte
+// plugin. Le composant DOIT contenir un <q-bottom-sheet v-model="open"
+// @hide="onDialogHide"> comme racine, piloté via
+// useBottomSheetPluginComponent() — open est déjà true (pas de v-model à
+// mettre). À la fermeture (@hide) ou via onDialogOK / onDialogCancel, les
+// résolveurs sont appelés et l'entrée retirée.
+import { provide, ref } from "vue"
+import { qBottomSheetPluginKey } from "../../lib/q"
+import type { BottomSheetController } from "../../lib/q"
+
+const props = defineProps<{
+  ctrl: BottomSheetController
+  onOk: (data?: unknown) => void
+  onCancel: () => void
+  onHide: () => void
+}>()
+
+const open = ref(true)
+
+provide(qBottomSheetPluginKey, {
+  open,
+  onDialogOK: (data?: unknown) => props.onOk(data),
+  onDialogCancel: () => props.onCancel(),
+  onDialogHide: () => props.onHide(),
+})
+
+// Le composant émet aussi les events legacy (ok/cancel/dismiss/close)
+const emit = defineEmits<{
+  ok: [data?: unknown]
+  cancel: []
+  dismiss: []
+  close: []
+}>()
+</script>
+
+<template>
+  <component
+    :is="props.ctrl._opts.component"
+    v-bind="props.ctrl._opts.componentProps"
+    @ok="emit('ok', $event)"
+    @cancel="emit('cancel')"
+    @dismiss="emit('dismiss')"
+    @close="emit('close')"
+  />
+</template>

package/index.ts

@@ -128,12 +128,13 @@ export { default as QUploader } from "./components/QUploader.vue"
 export { default as QVideo } from "./components/QVideo.vue"
 export { default as QVirtualScroll } from "./components/QVirtualScroll.vue"
 
-export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent } from "./lib/q"
+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"

package/lib/q.ts

@@ -112,7 +112,7 @@ export interface BottomSheetOptions {
   component: Component | string
   /** Props passées au composant */
   componentProps?: Record<string, any>
-  /** Titre affiché par QBottomSheetHeader (optionnel) */
+  /** Titre affiché par QBottomSheetHeader (optionnel — sinon le composant rend son propre header) */
   title?: string
   description?: string
   /** Largeur max du panneau (défaut : 640px) */
@@ -134,6 +134,22 @@ export interface BottomSheetOptions {
   transitionDuration?: number
 }
 
+/**
+ * Contexte plugin bottom sheet — fourni par QBottomSheetHost quand le composant
+ * passé à $q.bottomSheet.open() est lui-même un <q-bottom-sheet> (pattern
+ * Quasar, identique à $q.dialog) : open est déjà true, pas besoin de v-model.
+ */
+export interface BottomSheetPluginContext {
+  /** Ref d'ouverture (v-model du <q-bottom-sheet> du composant, déjà true) */
+  open: Ref<boolean>
+  onDialogOK: (data?: unknown) => void
+  onDialogCancel: () => void
+  onDialogHide: () => void
+}
+
+export const qBottomSheetPluginKey: InjectionKey<BottomSheetPluginContext> =
+  Symbol("q-bottom-sheet-plugin")
+
 export interface BottomSheetController {
   onOK: (cb: (data?: any) => void | Promise<void>) => BottomSheetController
   onCancel: (cb: () => void | Promise<void>) => BottomSheetController
@@ -146,6 +162,22 @@ export interface BottomSheetController {
   _opts: BottomSheetOptions
 }
 
+/**
+ * Composable Quasar-style pour les composants passés à $q.bottomSheet.open() :
+ * le composant rend un <q-bottom-sheet v-model="open" @hide="onDialogHide">
+ * comme racine. open est déjà true (le panneau s'affiche à l'ouverture), et
+ * onDialogOK / onDialogCancel résolvent les callbacks du controller.
+ */
+export function useBottomSheetPluginComponent() {
+  const ctx = inject(qBottomSheetPluginKey, null)
+  return {
+    open: ctx?.open ?? ref(false),
+    onDialogHide: () => ctx?.onDialogHide(),
+    onDialogOK: (data?: unknown) => ctx?.onDialogOK(data),
+    onDialogCancel: () => ctx?.onDialogCancel(),
+  }
+}
+
 // — Pile de bottom sheets (singleton module-level, client-side) —
 const bottomSheets: Ref<BottomSheetController[]> = ref([])
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/scripts/generate-exports.ts

@@ -26,12 +26,13 @@ const exports = files
 
 // Exports manuels (composables / helpers) — conservés à chaque régénération
 const manualExports = `
-export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent } from "./lib/q"
+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"