@dnax/ui 0.0.23 → 0.0.25

package/components/QBottomSheet.vue

@@ -16,6 +16,7 @@ export const qBottomSheetKey: InjectionKey<BottomSheetContext> = Symbol("q-botto
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from "vue"
 import { cn } from "../lib/utils"
 import { useOverlayBack } from "../lib/overlayBack"
+import { markOverlayClose } from "../lib/closeOverlay"
 
 interface Props {
   /** Ouvert (v-model) */
@@ -33,6 +34,10 @@ interface Props {
   translucent?: boolean | number
   /** Seuil de drag (px) au-delà duquel on ferme */
   dragThreshold?: number
+  /** Animation d'ouverture : slide-up (défaut) | fade | zoom */
+  transition?: "slide-up" | "fade" | "zoom"
+  /** Durée des transitions d'entrée/sortie en ms */
+  transitionDuration?: number
   /** Style du panneau (variables de thème pour les contenus téléportés) */
   contentStyle?: Record<string, string>
 }
@@ -63,6 +68,11 @@ provide<BottomSheetContext>(qBottomSheetKey, {
 // « Retour » navigateur → ferme le bottom sheet au lieu de naviguer
 useOverlayBack(open, () => { open.value = false }, "QBottomSheet")
 
+// v-close : marque l'overlay comme fermable (la directive remonte jusqu'ici)
+const markOverlay = (el: unknown) => {
+  markOverlayClose(el as HTMLElement | null, () => { open.value = false })
+}
+
 // Échap + verrouillage du scroll du body
 const onDocKeydown = (e: KeyboardEvent) => {
   if (e.key === "Escape" && open.value && !props.persistent) open.value = false
@@ -120,6 +130,21 @@ const radiusStyle = computed<Record<string, string> | undefined>(() => {
   return undefined
 })
 
+// Nom de transition : q-bs (défaut slide-up) | q-bs-fade | q-bs-zoom
+const transitionName = computed(() =>
+  props.transition ? `q-bs-${props.transition}` : "q-bs",
+)
+
+// Durée (ms) → variables consommées par les transitions/animations CSS
+const transitionStyle = computed<Record<string, string> | undefined>(() =>
+  props.transitionDuration
+    ? {
+        "--q-bs-duration-enter": `${props.transitionDuration}ms`,
+        "--q-bs-duration-leave": `${props.transitionDuration}ms`,
+      }
+    : undefined,
+)
+
 const panelClasses = computed(() =>
   cn(
     "q-bottom-sheet__panel",
@@ -143,9 +168,10 @@ const translucentStyle = computed<Record<string, string> | undefined>(() =>
   </span>
 
   <Teleport to="body">
-    <Transition name="q-bs">
+    <Transition :name="transitionName" :duration="transitionDuration">
       <div
         v-if="open"
+        :ref="markOverlay"
         class="q-bottom-sheet__overlay"
         @click="!persistent && (open = false)"
       >
@@ -153,7 +179,7 @@ const translucentStyle = computed<Record<string, string> | undefined>(() =>
           ref="panelRef"
           class="q-bottom-sheet__panel"
           :class="panelClasses"
-          :style="[panelStyle, radiusStyle, translucentStyle, props.contentStyle]"
+          :style="[panelStyle, radiusStyle, translucentStyle, transitionStyle, props.contentStyle]"
           role="dialog"
           aria-modal="true"
           @click.stop

package/components/QBottomSheetProvider.vue

@@ -42,6 +42,8 @@ const handleDismiss = (ctrl: BottomSheetController) => {
     :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)"
   >

package/components/QDialog.vue

@@ -17,6 +17,7 @@ import { cn } from "../lib/utils"
 import { radiusStyle, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import { useOverlayBack } from "../lib/overlayBack"
+import { markOverlayClose } from "../lib/closeOverlay"
 
 type DialogPosition = "standard" | "top" | "right" | "bottom" | "left"
 
@@ -88,6 +89,11 @@ const onDocKeydown = (e: KeyboardEvent) => {
 // « Retour » navigateur → ferme le dialog au lieu de naviguer
 useOverlayBack(open, () => { open.value = false }, "QDialog")
 
+// v-close : marque l'overlay comme fermable (la directive remonte jusqu'ici)
+const markOverlay = (el: unknown) => {
+  markOverlayClose(el as HTMLElement | null, () => { open.value = false })
+}
+
 // — Verrou du scroll de la page derrière le dialog —
 // Compteur module-level + suivi par instance : chaque dialog verrouille au plus
 // une fois et déverrouille au plus une fois → pile de dialogs ($q.dialog) sans
@@ -169,6 +175,7 @@ const durationStyle = computed<StyleValue>(() =>
     <Transition :name="transitionName" @after-enter="emit('show')" @after-leave="emit('hide')">
       <div
         v-if="open"
+        :ref="markOverlay"
         class="q-dialog__overlay"
         :class="overlayClasses"
         :style="durationStyle"

package/components/QDialogHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 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 (équivalent DialogHeader/Title/Close).
+// avec titre + description + bouton fermer OPT-IN (show-close).
 // no-padding retire le padding horizontal du toolbar.
 import { inject } from "vue"
 import { Icon } from "@iconify/vue"
@@ -13,14 +13,14 @@ import QSpace from "./QSpace.vue"
 interface Props {
   title?: string
   description?: string
-  /** Bouton fermer */
+  /** Affiche le bouton fermer (opt-in — sans la prop, aucun ×) */
   showClose?: boolean
   /** Supprime le padding du toolbar (contenu collé aux bords) */
   noPadding?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  showClose: true,
+  showClose: false,
   noPadding: false,
 })
 

package/components/QPage.vue

@@ -31,19 +31,6 @@ interface Props {
 
 defineProps<Props>()
 
-// Slots typés (mode virtual) : même contrat que QVirtualScroll
-// (item, index, ref pour la mesure ; before/after pour les zones sticky)
-defineSlots<{
-  default?: (props: { item: any; index: number; ref: (el: unknown) => void }) => any
-  before?: () => any
-  after?: () => any
-}>()
-
-// L'inférence du scope ne traverse pas la branche v-if → cast explicite
-// (le scope reçu EST le scope du QVirtualScroll)
-type VirtualScope = { item: any; index: number; ref: (el: unknown) => void }
-const forwardScope = (scope: unknown) => scope as VirtualScope
-
 const rootEl = ref<HTMLElement | null>(null)
 // ref fonctionnel : sur un élément → l'élément ; sur q-virtual-scroll (composant) → .$el
 const setRoot = (el: unknown) => {
@@ -71,7 +58,7 @@ useFixedBarOffset(rootEl, "page")
     v-bind="$attrs"
   >
     <template #default="scope">
-      <slot v-bind="forwardScope(scope)" />
+      <slot v-bind="scope" />
     </template>
     <template #before>
       <slot name="before" />

package/components/QTabs.vue

@@ -24,7 +24,7 @@ export const qTabsKey: InjectionKey<QTabContext> = Symbol("q-tabs")
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch } from "vue"
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch } from "vue"
 import { cva } from "class-variance-authority"
 import { cn } from "../lib/utils"
 import { colorValue } from "../lib/colors"
@@ -117,6 +117,24 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ "update:modelValue": [value: string | number | null] }>()
 
+// — Mode non-contrôlé : sans v-model (pas de listener update:modelValue), QTabs
+// maintient son propre état interne — indispensable pour QRouteTab (le tab
+// actif suit la route sans v-model parent) et pour tout usage sans v-model.
+const instance = getCurrentInstance()
+const controlled = computed(
+  () => !!instance && "onUpdate:modelValue" in (instance.vnode.props ?? {}),
+)
+const internal = ref<string | number | null>(null)
+
+const activeName = computed<string | number | null>(() =>
+  controlled.value ? (props.modelValue ?? null) : internal.value,
+)
+
+const setActive = (name: string | number) => {
+  if (controlled.value) emit("update:modelValue", name)
+  else internal.value = name
+}
+
 // Position effective de l'indicateur : "top" | "bottom" (défaut) | "none" (masqué)
 const indicatorPos = computed<"top" | "bottom" | "none">(() => {
   const p = props.switchIndicatorPosition
@@ -145,7 +163,7 @@ const onCollapseEnd = (e: Event) => {
   measure()
 }
 
-watch([() => props.modelValue, tabRegs], measure)
+watch([activeName, tabRegs], measure)
 
 onMounted(() => {
   measure()
@@ -158,8 +176,8 @@ onBeforeUnmount(() => {
 })
 
 const context: QTabContext = {
-  activeName: computed(() => props.modelValue),
-  setActive: (name) => emit("update:modelValue", name),
+  activeName,
+  setActive,
   register: (tab) => {
     tabRegs.value = [...tabRegs.value, tab]
   },
@@ -175,7 +193,7 @@ const context: QTabContext = {
 provide(qTabsKey, context)
 
 const activeTabEl = computed(
-  () => tabRegs.value.find((t) => t.name === props.modelValue)?.el.value ?? null,
+  () => tabRegs.value.find((t) => t.name === activeName.value)?.el.value ?? null,
 )
 
 const indicatorStyle = computed<Record<string, string>>(() => {

package/index.ts

@@ -152,3 +152,4 @@ export {
   installOverlayBackHandler,
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
+export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"

package/lib/closeOverlay.ts

@@ -0,0 +1,48 @@
+// v-close — directive : ferme l'overlay (dialog, bottom sheet, …) le plus
+// proche au clic (équivalent Quasar v-close-popup).
+// Les overlays s'enregistrent en posant el.__qClose sur leur élément racine
+// (markOverlayClose) ; la directive remonte depuis l'élément cliqué.
+
+interface QCloseMarker extends HTMLElement {
+  __qClose?: () => void
+  __qVClose?: () => void
+}
+
+/** Marque un élément comme « overlay fermable » (posé par QDialog, QBottomSheet…) */
+export function markOverlayClose(el: HTMLElement | null, close: () => void) {
+  if (!el) return
+  ;(el as QCloseMarker).__qClose = close
+}
+
+/** Remonte jusqu'à l'overlay le plus proche portant __qClose */
+function closestOverlay(el: Element): QCloseMarker | null {
+  let node: Element | null = el
+  while (node) {
+    const marker = node as QCloseMarker
+    if (typeof marker.__qClose === "function") return marker
+    node = node.parentElement
+  }
+  return null
+}
+
+/** Ferme l'overlay parent le plus proche de `el` */
+export function closeParentOverlay(el: Element) {
+  closestOverlay(el)?.__qClose?.()
+}
+
+/** Directive : <q-btn v-close> → ferme le dialog/sheet parent au clic.
+ *  v-close="false" désactive la fermeture. */
+export const vClose = {
+  mounted(el: HTMLElement, binding: { value?: unknown }) {
+    const onClick = () => {
+      if (binding.value === false) return
+      closeParentOverlay(el)
+    }
+    el.addEventListener("click", onClick)
+    ;(el as QCloseMarker).__qVClose = onClick
+  },
+  unmounted(el: HTMLElement) {
+    const fn = (el as QCloseMarker).__qVClose
+    if (fn) el.removeEventListener("click", fn)
+  },
+}

package/lib/q.ts

@@ -128,6 +128,10 @@ export interface BottomSheetOptions {
   persistent?: boolean
   /** Seuil de drag (px) au-delà duquel on ferme */
   dragThreshold?: number
+  /** Animation d'ouverture : slide-up (défaut) | fade | zoom */
+  transition?: "slide-up" | "fade" | "zoom"
+  /** Durée des transitions d'entrée/sortie en ms */
+  transitionDuration?: number
 }
 
 export interface BottomSheetController {

package/module.ts

@@ -85,5 +85,19 @@ export default defineNuxtPlugin((nuxtApp) => {
 `,
       })
     }
+
+    // Directive globale v-close : <q-btn v-close> ferme le dialog/sheet parent
+    addPluginTemplate({
+      filename: "dnax-ui-directives.mjs",
+      mode: "client",
+      getContents: () => `
+import { defineNuxtPlugin } from "#imports"
+import { vClose } from "@dnax/ui/runtime"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("close", vClose)
+})
+`,
+    })
   },
 })

package/package.json

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

package/scripts/generate-exports.ts

@@ -50,6 +50,7 @@ export {
   installOverlayBackHandler,
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
+export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
 `
 
 await Bun.write(indexFile, `${exports}\n${manualExports}`)

package/styles/main.css

@@ -4868,25 +4868,37 @@ html.dark body {
   border-color: rgb(255 255 255 / 0.12);
 }
 
-/* — transitions (slide vertical type vaul) — */
+/* — transitions (slide vertical type vaul) — durées configurables via
+   transition-duration (vars --q-bs-duration-enter/leave) */
 .q-bs-enter-active,
-.q-bs-leave-active {
-  transition: opacity 0.25s ease;
+.q-bs-leave-active,
+.q-bs-fade-enter-active,
+.q-bs-fade-leave-active,
+.q-bs-zoom-enter-active,
+.q-bs-zoom-leave-active {
+  transition: opacity var(--q-bs-duration-enter, 0.25s) ease;
+}
+.q-bs-leave-active,
+.q-bs-fade-leave-active,
+.q-bs-zoom-leave-active {
+  transition: opacity var(--q-bs-duration-leave, 0.2s) ease;
 }
-
 .q-bs-enter-from,
-.q-bs-leave-to {
+.q-bs-leave-to,
+.q-bs-fade-enter-from,
+.q-bs-fade-leave-to,
+.q-bs-zoom-enter-from,
+.q-bs-zoom-leave-to {
   opacity: 0;
 }
 
+/* slide-up (défaut) : le panneau glisse depuis le bas */
 .q-bs-enter-active .q-bottom-sheet__panel {
-  animation: q-bs-in 0.25s ease;
+  animation: q-bs-in var(--q-bs-duration-enter, 0.25s) ease;
 }
-
 .q-bs-leave-active .q-bottom-sheet__panel {
-  animation: q-bs-out 0.2s ease forwards;
+  animation: q-bs-out var(--q-bs-duration-leave, 0.2s) ease forwards;
 }
-
 @keyframes q-bs-in {
   from {
     transform: translateY(100%);
@@ -4895,13 +4907,36 @@ html.dark body {
     transform: none;
   }
 }
-
 @keyframes q-bs-out {
   to {
     transform: translateY(100%);
   }
 }
 
+/* zoom : le panneau scale légèrement depuis le centre-bas */
+.q-bs-zoom-enter-active .q-bottom-sheet__panel {
+  animation: q-bs-zoom-in var(--q-bs-duration-enter, 0.25s) ease;
+}
+.q-bs-zoom-leave-active .q-bottom-sheet__panel {
+  animation: q-bs-zoom-out var(--q-bs-duration-leave, 0.2s) ease forwards;
+}
+@keyframes q-bs-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes q-bs-zoom-out {
+  to {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+}
+
 /* ===== QBackHeader ===== */
 .q-back-header {
   position: relative;