@dnax/ui 0.0.34 → 0.0.36

package/components/_QBtnActionsLegacy.vue

@@ -0,0 +1,254 @@
+<script lang="ts">
+// QBtnActions — LEGACY (motif cassé) : v-for + DEUX frères v-if indépendants.
+// Copie temporaire pour harnais de test — ne pas utiliser.
+
+export interface BtnAction {
+  label?: string
+  value?: any
+  icon?: string
+  iconRight?: string
+  color?: string
+  description?: string
+  separator?: boolean
+  disable?: boolean
+  onClick?: (action: BtnAction) => void
+}
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { colorValue } from "../lib/colors"
+import { icons } from "../lib/icons"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+import QBtn from "./QBtn.vue"
+
+interface Props {
+  actions?: BtnAction[]
+  label?: string
+  icon?: string
+  noCaret?: boolean
+  dropdownIcon?: string
+  align?: "left" | "right"
+  menuWidth?: string
+  color?: string
+  textColor?: string
+  size?: string
+  radius?: RadiusProp
+  flat?: boolean
+  outline?: boolean
+  unelevated?: boolean
+  dense?: boolean
+  round?: boolean
+  square?: boolean
+  noCaps?: boolean
+  stretch?: boolean
+  loading?: boolean
+  disable?: boolean
+  dark?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  actions: () => [],
+  noCaret: false,
+  dropdownIcon: "lucide:chevron-down",
+  align: "right",
+  menuWidth: "180px",
+  size: "md",
+  color: "primary",
+  flat: false,
+  outline: false,
+  unelevated: false,
+  dense: false,
+  round: false,
+  square: false,
+  noCaps: false,
+  stretch: false,
+  loading: false,
+  disable: false,
+  dark: false,
+})
+
+const open = ref(false)
+const rootEl = ref<HTMLElement | null>(null)
+const panelEl = ref<HTMLElement | null>(null)
+const panelPos = ref({ top: 0, left: 0, transform: "" })
+
+const canOpen = computed(() => !props.disable && !props.loading && props.actions.length > 0)
+const triggerIcon = computed(() => props.icon ?? (props.label ? undefined : icons.ellipsis))
+const showCaret = computed(() => !props.noCaret && !!props.label)
+
+const triggerClasses = computed(() => [
+  "q-btn-actions__trigger",
+  open.value && "q-btn-actions__trigger--open",
+])
+
+const effectiveRadius = useRadius("QBtnActions", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const panelStyle = computed<Record<string, string>>(() => ({
+  top: `${panelPos.value.top}px`,
+  left: `${panelPos.value.left}px`,
+  transform: panelPos.value.transform,
+  minWidth: props.menuWidth,
+  ...(roundedStyle.value ?? {}),
+}))
+
+const placePanel = () => {
+  const el = rootEl.value
+  if (!el || typeof document === "undefined") return
+  const rect = el.getBoundingClientRect()
+  if (props.align === "left") {
+    panelPos.value = { top: rect.bottom + 4, left: rect.left, transform: "none" }
+  }
+  else {
+    panelPos.value = { top: rect.bottom + 4, left: rect.right, transform: "translateX(-100%)" }
+  }
+}
+
+const enableTracking = () => {
+  window.addEventListener("resize", placePanel)
+  window.addEventListener("scroll", placePanel, true)
+}
+const disableTracking = () => {
+  window.removeEventListener("resize", placePanel)
+  window.removeEventListener("scroll", placePanel, true)
+}
+
+const toggle = () => (open.value ? close() : openMenu())
+
+const openMenu = async () => {
+  if (!canOpen.value) return
+  placePanel()
+  open.value = true
+  enableTracking()
+  await nextTick()
+  ;(panelEl.value?.querySelector(".q-btn-actions__item:not(:disabled)") as HTMLElement | null)?.focus()
+}
+
+const close = () => {
+  if (!open.value) return
+  open.value = false
+  disableTracking()
+}
+
+const onDocMousedown = (e: MouseEvent) => {
+  if (!open.value) return
+  const target = e.target as Node
+  if (rootEl.value?.contains(target) || panelEl.value?.contains(target)) return
+  close()
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (!open.value) return
+  if (e.key === "Escape") {
+    e.preventDefault()
+    close()
+    ;(rootEl.value?.querySelector(".q-btn-actions__trigger") as HTMLElement | null)?.focus()
+    return
+  }
+  if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return
+  const items = Array.from(
+    panelEl.value?.querySelectorAll(".q-btn-actions__item:not(:disabled)") ?? [],
+  ) as HTMLElement[]
+  if (!items.length) return
+  const current = items.indexOf(document.activeElement as HTMLElement)
+  let next = current
+  if (e.key === "ArrowDown") next = (current + 1) % items.length
+  else if (e.key === "ArrowUp") next = (current - 1 + items.length) % items.length
+  else if (e.key === "Home") next = 0
+  else if (e.key === "End") next = items.length - 1
+  e.preventDefault()
+  items[next]?.focus()
+}
+
+const onSelect = (action: BtnAction) => {
+  if (action.disable) return
+  action.onClick?.(action)
+  close()
+}
+
+const isSeparatorOnly = (action: BtnAction): boolean =>
+  !!action.separator && !action.label && !action.icon && !action.iconRight && !action.description
+
+const itemStyle = (action: BtnAction) =>
+  action.color ? { color: colorValue(action.color) } : undefined
+
+onMounted(() => {
+  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown)
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+  disableTracking()
+})
+</script>
+
+<template>
+  <div ref="rootEl" class="q-btn-actions" :class="dark && 'dark'" @keydown="onKeydown">
+    <QBtn
+      class="q-btn-actions__trigger"
+      :class="triggerClasses"
+      :label="label"
+      :icon="triggerIcon"
+      :color="color"
+      :text-color="textColor"
+      :size="size"
+      :radius="radius"
+      :flat="flat"
+      :outline="outline"
+      :unelevated="unelevated"
+      :dense="dense"
+      :round="round"
+      :square="square"
+      :no-caps="noCaps"
+      :stretch="stretch"
+      :loading="loading"
+      :disable="disable"
+      @click="toggle"
+    >
+      <Icon
+        v-if="showCaret"
+        :icon="dropdownIcon"
+        class="q-btn-actions__caret"
+        :class="{ 'q-btn-actions__caret--open': open }"
+        aria-hidden="true"
+      />
+    </QBtn>
+
+    <Teleport to="body">
+      <Transition name="q-popup">
+        <div
+          v-if="open"
+          ref="panelEl"
+          class="q-btn-actions__panel"
+          role="menu"
+          :aria-label="label ?? 'Actions'"
+          :style="panelStyle"
+          @keydown="onKeydown"
+        >
+          <template v-for="(action, i) in actions" :key="i">
+            <div v-if="action.separator" class="q-btn-actions__separator" role="separator" />
+            <button
+              v-if="!isSeparatorOnly(action)"
+              type="button"
+              role="menuitem"
+              class="q-btn-actions__item"
+              :class="{ 'q-btn-actions__item--disabled': action.disable }"
+              :disabled="action.disable"
+              :style="itemStyle(action)"
+              @click="onSelect(action)"
+            >
+              <Icon :icon="action.icon" v-if="action.icon" class="q-btn-actions__item-icon" aria-hidden="true" />
+              <span class="q-btn-actions__item-text">
+                <span class="q-btn-actions__item-label">{{ action.label }}</span>
+                <span v-if="action.description" class="q-btn-actions__item-desc">{{ action.description }}</span>
+              </span>
+              <Icon :icon="action.iconRight" v-if="action.iconRight" class="q-btn-actions__item-icon" aria-hidden="true" />
+            </button>
+          </template>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/components/internal/RenderNodes.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+// RenderNodes — rend des vnodes bruts passés en prop (usage interne).
+// Permet à un composant à template (ex. QBreadcrumbs) de réafficher les vnodes du
+// slot par défaut en les enveloppant / les intercalant — impossible en template pur.
+import { defineComponent, type PropType, type VNode } from "vue"
+
+export default defineComponent({
+  name: "RenderNodes",
+  props: {
+    nodes: {
+      type: [Object, Array] as PropType<VNode | VNode[] | null>,
+      default: null,
+    },
+  },
+  setup(props) {
+    return () => {
+      const nodes = props.nodes
+      if (!nodes) return []
+      return Array.isArray(nodes) ? nodes : [nodes]
+    }
+  },
+})
+</script>

package/index.ts

@@ -16,8 +16,11 @@ export { default as QBottomSheetFooter } from "./components/QBottomSheetFooter.v
 export { default as QBottomSheetHeader } from "./components/QBottomSheetHeader.vue"
 export { default as QBottomSheetProvider } from "./components/QBottomSheetProvider.vue"
 export { default as QBottomSheetTrigger } from "./components/QBottomSheetTrigger.vue"
+export { default as QBreadcrumbs } from "./components/QBreadcrumbs.vue"
+export { default as QBreadcrumbsEl } from "./components/QBreadcrumbsEl.vue"
 export { default as QBtn } from "./components/QBtn.vue"
 export { default as QBtnActions } from "./components/QBtnActions.vue"
+export { default as QBtnDropdown } from "./components/QBtnDropdown.vue"
 export { default as QBtnGroup } from "./components/QBtnGroup.vue"
 export { default as QBubble } from "./components/QBubble.vue"
 export { default as QBubbleContent } from "./components/QBubbleContent.vue"
@@ -163,6 +166,8 @@ export {
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
 export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
+export { vRipple } from "./lib/ripple"
+export type { RippleOptions, RippleValue } from "./lib/ripple"
 export { vTouchPan } from "./lib/touchPan"
 export type { PanDetails, TouchPanHandler, PanDirection } from "./lib/touchPan"
 export { vTouchHold } from "./lib/touchHold"

package/lib/ripple.ts

@@ -0,0 +1,322 @@
+// v-ripple — directive : onde « material ripple » au clic et au clavier,
+// équivalent Quasar https://quasar.dev/vue-directives/material-ripple
+//
+// Usage :
+//   <div v-ripple />                                      → onde depuis le point cliqué
+//   <div v-ripple.center />                               → onde depuis le centre
+//   <div v-ripple:primary />                              → couleur (token ou couleur CSS)
+//   <div v-ripple="{ early: true, stop: true }" />        → déclenchement dès pointerdown
+//   <div v-ripple="false" />                              → directive désactivée
+//   <div v-ripple="{ keyCodes: [13, 32], color: '#f00' }" />
+// modifiers : center | early | stop
+//
+// Le conteneur `.q-ripple` (position absolute, 100 %×100 %, overflow hidden) est
+// injecté dans l'élément : pas besoin de lui imposer `overflow: hidden`. En
+// revanche il faut un bloc conteneur → si `position` calculée vaut `static`,
+// la directive pose `position: relative` (et restaure la valeur au démontage).
+
+import { colorValue } from "./colors"
+
+/** Options de `v-ripple` (les modifiers `.center` / `.early` / `.stop` ont le même effet) */
+export interface RippleOptions {
+  /** Déclenche l'onde dès `pointerdown` (au lieu du `click`), annulée si le geste devient un scroll/pan */
+  early?: boolean
+  /** Stoppe la propagation de l'événement déclencheur */
+  stop?: boolean
+  /** L'onde démarre au centre de l'élément au lieu du point d'interaction */
+  center?: boolean
+  /** Couleur de l'onde : token dnax.ui (`primary`, `negative`…) ou couleur CSS (`#f00`, `rgb()`, nom CSS) */
+  color?: string
+  /** Codes clavier déclenchant l'onde (défaut `[13, 32]` — Entrée, Espace) */
+  keyCodes?: number | number[]
+}
+
+/** `false` désactive la directive ; un objet configure les options */
+export type RippleValue = boolean | RippleOptions | undefined
+
+/** Attente avant peinture (tactile : le temps que le navigateur tranche tap vs scroll) */
+const ENTER_DELAY = 50
+const TOUCH_ENTER_DELAY = 100
+/** Onde pleine puis extinction */
+const HOLD_MS = 250
+const LEAVE_MS = 275
+/** Anti-rebond du déclenchement clavier (répétition de touche) */
+const KEY_THROTTLE = 300
+/** Entrée / Espace */
+const DEFAULT_KEY_CODES = [13, 32]
+
+/** Éléments que le navigateur active nativement au clavier (le `click` suffit : pas de doublon) */
+const NATIVE_ACTIVATION = "button, a[href], input[type='button'], input[type='submit'], input[type='reset']"
+
+interface RippleHandle {
+  /** Identifiant du pointeur tant que le geste peut encore devenir un clic (mode `early`) */
+  pointerId: number | null
+  /** Retire immédiatement l'onde (démontage) */
+  abort: () => void
+  /** Éteint l'onde en douceur (geste devenu scroll/pan) */
+  cancel: () => void
+}
+
+interface RippleContext {
+  enabled: boolean
+  early: boolean
+  stop: boolean
+  center: boolean
+  color?: string
+  keyCodes: number[]
+  keyTime: number
+  /** 0 = aucun listener, 1 = mode clic, 2 = mode early */
+  bound: 0 | 1 | 2
+  ripples: RippleHandle[]
+  /** Position inline d'origine (null = jamais touchée par la directive) */
+  prevPosition: string | null
+}
+
+interface RippleInstance {
+  ctx: RippleContext
+  /** (Re)branche les listeners selon `enabled` / `early` */
+  bind: () => void
+  /** Débranche tout et restaure les styles touchés */
+  dispose: () => void
+}
+
+interface RippleBinding {
+  value?: unknown
+  arg?: string
+  modifiers?: Record<string, boolean>
+}
+
+type QElement = HTMLElement & { __qRipple?: RippleInstance }
+type EventFlags = Event & { qSkipRipple?: boolean; qKeyEvent?: boolean }
+
+/** Point d'interaction d'un événement souris / tactile / clavier */
+const eventPoint = (evt: Event): { left: number; top: number } => {
+  const e = evt as MouseEvent & { touches?: TouchList }
+  const touch = e.touches?.[0]
+  if (touch) return { left: touch.clientX, top: touch.clientY }
+  if (typeof e.clientX === "number") return { left: e.clientX, top: e.clientY }
+  return { left: 0, top: 0 }
+}
+
+const parseKeyCodes = (value: RippleOptions["keyCodes"]): number[] => {
+  if (value === undefined) return [...DEFAULT_KEY_CODES]
+  const list = (Array.isArray(value) ? value.flat() : [value]).map(Number)
+  return list.filter((n) => Number.isFinite(n))
+}
+
+/** Un élément activable nativement produit déjà un `click` au clavier */
+const hasNativeActivation = (el: HTMLElement): boolean => {
+  try {
+    return el.matches(NATIVE_ACTIVATION)
+  } catch {
+    return false
+  }
+}
+
+/** Options effectives = valeur objet + modifiers + argument (couleur) */
+const applyOptions = (ctx: RippleContext, binding: RippleBinding) => {
+  const opts: RippleOptions = typeof binding.value === "object" && binding.value !== null
+    ? (binding.value as RippleOptions)
+    : {}
+  const m = binding.modifiers ?? {}
+
+  ctx.early = opts.early === true || m.early === true
+  ctx.stop = opts.stop === true || m.stop === true
+  ctx.center = opts.center === true || m.center === true
+  ctx.color = opts.color ?? binding.arg
+  ctx.keyCodes = parseKeyCodes(opts.keyCodes)
+}
+
+/** Crée et lance l'onde (conteneur `.q-ripple` + pastille `.q-ripple__inner`) */
+const spawnRipple = (el: HTMLElement, ctx: RippleContext, evt: Event, forceCenter: boolean) => {
+  if (ctx.stop) evt.stopPropagation()
+
+  const rect = el.getBoundingClientRect()
+  const diameter = Math.hypot(rect.width, rect.height)
+  if (!diameter) return
+
+  const radius = diameter / 2
+  const point = eventPoint(evt)
+  const centerX = (rect.width - diameter) / 2
+  const centerY = (rect.height - diameter) / 2
+  const fromCenter = ctx.center || forceCenter
+  const x = fromCenter ? centerX : point.left - rect.left - radius
+  const y = fromCenter ? centerY : point.top - rect.top - radius
+
+  const node = document.createElement("span")
+  node.className = "q-ripple"
+  node.setAttribute("dir", "ltr")
+  if (ctx.color) node.style.color = colorValue(ctx.color)
+
+  const inner = document.createElement("span")
+  inner.className = "q-ripple__inner"
+  inner.style.width = `${diameter}px`
+  inner.style.height = `${diameter}px`
+  inner.style.transform = `translate(${x}px, ${y}px) scale(0.2)`
+  inner.style.opacity = "0"
+
+  node.append(inner)
+  el.append(node)
+
+  let timer: ReturnType<typeof setTimeout> | undefined
+  // 0 = en attente, 1 = apparition, 2 = extinction
+  let phase: 0 | 1 | 2 = 0
+
+  const remove = () => {
+    clearTimeout(timer)
+    node.remove()
+    const index = ctx.ripples.indexOf(handle)
+    if (index !== -1) ctx.ripples.splice(index, 1)
+  }
+
+  const leave = () => {
+    phase = 2
+    inner.classList.remove("q-ripple__inner--enter")
+    inner.classList.add("q-ripple__inner--leave")
+    inner.style.opacity = "0"
+    timer = setTimeout(remove, LEAVE_MS)
+  }
+
+  const enter = () => {
+    phase = 1
+    inner.classList.add("q-ripple__inner--enter")
+    inner.style.transform = `translate(${centerX}px, ${centerY}px) scale(1)`
+    inner.style.opacity = "0.2"
+    timer = setTimeout(leave, HOLD_MS)
+  }
+
+  const handle: RippleHandle = {
+    pointerId: evt.type === "pointerdown" ? (evt as PointerEvent).pointerId : null,
+    abort() {
+      clearTimeout(timer)
+      node.remove()
+    },
+    cancel() {
+      handle.pointerId = null
+      if (phase === 2) return
+      clearTimeout(timer)
+      if (phase === 0) remove()
+      else leave()
+    },
+  }
+
+  ctx.ripples.push(handle)
+
+  const isTouch = evt.type === "pointerdown" && (evt as PointerEvent).pointerType === "touch"
+  timer = setTimeout(enter, isTouch ? TOUCH_ENTER_DELAY : ENTER_DELAY)
+}
+
+function setup(el: HTMLElement, binding: RippleBinding) {
+  const ctx: RippleContext = {
+    enabled: binding.value !== false,
+    early: false,
+    stop: false,
+    center: false,
+    keyCodes: [...DEFAULT_KEY_CODES],
+    keyTime: 0,
+    bound: 0,
+    ripples: [],
+    prevPosition: null,
+  }
+  applyOptions(ctx, binding)
+
+  // Le conteneur d'onde est en `position: absolute` → il lui faut un bloc conteneur.
+  const ensurePosition = () => {
+    if (!ctx.enabled) return
+    if (typeof getComputedStyle !== "function") return
+    if (getComputedStyle(el).position !== "static") return
+    if (ctx.prevPosition === null) ctx.prevPosition = el.style.position
+    el.style.position = "relative"
+  }
+  ensurePosition()
+
+  const onStart = (evt: Event) => {
+    const e = evt as EventFlags & MouseEvent
+    if (e.qSkipRipple) return
+    // `detail === 0` : clic synthétisé au clavier (pas de coordonnées fiables) → onde centrée
+    spawnRipple(el, ctx, evt, e.qKeyEvent === true || (evt.type === "click" && e.detail === 0))
+  }
+
+  const onKey = (evt: Event) => {
+    const e = evt as EventFlags & KeyboardEvent
+    if (e.qSkipRipple) return
+    if (!ctx.keyCodes.includes(e.keyCode)) return
+    // Sur un <button>/<a href>, le navigateur émet déjà un `click` (centré) : ne pas doubler
+    if (hasNativeActivation(el)) return
+    const now = Date.now()
+    if (now - ctx.keyTime < KEY_THROTTLE) return
+    ctx.keyTime = now
+    spawnRipple(el, ctx, evt, true)
+  }
+
+  // Le geste ne peut plus devenir un clic (scroll/pan, ou pointeur sorti)
+  const onCancel = (evt: Event) => {
+    const e = evt as PointerEvent
+    if (e.type === "pointerleave" && e.buttons === 0) return
+    for (let i = ctx.ripples.length - 1; i >= 0; i--) {
+      const ripple = ctx.ripples[i]
+      if (ripple.pointerId === e.pointerId) ripple.cancel()
+    }
+  }
+
+  const bind = () => {
+    const mode: 0 | 1 | 2 = ctx.enabled ? (ctx.early ? 2 : 1) : 0
+    if (mode === ctx.bound) return
+
+    if (ctx.bound === 1) {
+      el.removeEventListener("click", onStart)
+      el.removeEventListener("keyup", onKey)
+    } else if (ctx.bound === 2) {
+      el.removeEventListener("pointerdown", onStart)
+      el.removeEventListener("pointercancel", onCancel)
+      el.removeEventListener("pointerleave", onCancel)
+      el.removeEventListener("keydown", onKey)
+    }
+
+    if (mode === 1) {
+      el.addEventListener("click", onStart)
+      el.addEventListener("keyup", onKey)
+    } else if (mode === 2) {
+      el.addEventListener("pointerdown", onStart)
+      el.addEventListener("pointercancel", onCancel)
+      el.addEventListener("pointerleave", onCancel)
+      el.addEventListener("keydown", onKey)
+    }
+
+    ctx.bound = mode
+  }
+
+  bind()
+
+  ;(el as QElement).__qRipple = {
+    ctx,
+    bind,
+    dispose() {
+      ctx.ripples.forEach((ripple) => ripple.abort())
+      ctx.ripples.length = 0
+      ctx.enabled = false
+      bind()
+      if (ctx.prevPosition !== null) el.style.position = ctx.prevPosition
+    },
+  }
+}
+
+/** Directive `v-ripple` : <div v-ripple.center:primary /> */
+export const vRipple = {
+  mounted(el: HTMLElement, binding: RippleBinding) {
+    setup(el, binding)
+  },
+  updated(el: HTMLElement, binding: RippleBinding) {
+    const instance = (el as QElement).__qRipple
+    if (!instance) return
+    instance.ctx.enabled = binding.value !== false
+    applyOptions(instance.ctx, binding)
+    instance.bind()
+  },
+  unmounted(el: HTMLElement) {
+    const instance = (el as QElement).__qRipple
+    if (!instance) return
+    instance.dispose()
+    delete (el as QElement).__qRipple
+  },
+}

package/module.ts

@@ -86,13 +86,18 @@ export default defineNuxtPlugin((nuxtApp) => {
       })
     }
 
-    // Directive globale v-close : <q-btn v-close> ferme le dialog/sheet parent
+    // Directive globale v-close / v-ripple / v-touch-* / v-intersection :
+    // <q-btn v-close>, <div v-ripple.center>…
+    // Plugin UNIVERSEL (pas "client") : sans enregistrement côté serveur, tout
+    // rendu SSR/SSG d'une page utilisant une directive crash (Vue SSR lit
+    // `dir.getSSRProps` sur une directive non résolue → `undefined`).
+    // Les directives n'ont pas de getSSRProps : en SSR elles rendent `{}` (no-op).
     addPluginTemplate({
       filename: "dnax-ui-directives.mjs",
-      mode: "client",
       getContents: () => `
 import { defineNuxtPlugin } from "#imports"
 import { vClose } from "@dnax/ui/runtime"
+import { vRipple } from "@dnax/ui/runtime"
 import { vTouchPan } from "@dnax/ui/runtime"
 import { vTouchHold } from "@dnax/ui/runtime"
 import { vTouchSwipe } from "@dnax/ui/runtime"
@@ -101,6 +106,7 @@ import { vIntersection } from "@dnax/ui/runtime"
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.directive("close", vClose)
+  nuxtApp.vueApp.directive("ripple", vRipple)
   nuxtApp.vueApp.directive("touch-pan", vTouchPan)
   nuxtApp.vueApp.directive("touch-hold", vTouchHold)
   nuxtApp.vueApp.directive("touch-swipe", vTouchSwipe)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
@@ -31,7 +31,7 @@
     "@editorjs/paragraph": "^2.11.7",
     "@editorjs/quote": "^2.7.6",
     "@iconify/vue": "^5.0.1",
-    "@nuxt/kit": "^4.5.2",
+    "@nuxt/kit": "4.5.2",
     "@tiptap/extension-bubble-menu": "^3.31.3",
     "@tiptap/extension-drag-handle": "^3.31.3",
     "@tiptap/extension-drag-handle-vue-3": "^3.31.3",

package/scripts/generate-exports.ts

@@ -14,7 +14,7 @@ const toPascalCase = (name: string) =>
     .join("")
 
 const files = (await readdir(componentsDir))
-  .filter((file) => file.endsWith(".vue"))
+  .filter((file) => file.endsWith(".vue") && !file.startsWith("_"))
   .sort()
 
 const exports = files
@@ -54,6 +54,8 @@ export {
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
 export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
+export { vRipple } from "./lib/ripple"
+export type { RippleOptions, RippleValue } from "./lib/ripple"
 export { vTouchPan } from "./lib/touchPan"
 export type { PanDetails, TouchPanHandler, PanDirection } from "./lib/touchPan"
 export { vTouchHold } from "./lib/touchHold"