@dnax/ui 0.0.26 → 0.0.28

package/lib/touchHold.ts

@@ -0,0 +1,221 @@
+// v-touch-hold — directive : détecte l'appui long (hold) sur un élément,
+// tactile ET souris (modifier .mouse), équivalent Quasar
+// https://quasar.dev/vue-directives/touch-hold
+//
+// Usage :
+//   <div v-touch-hold="handler" />                  → 600ms, sensibilité 5/7px
+//   <div v-touch-hold.mouse="{ time: 400, sensitivity: 6 }" />
+//   <div v-touch-hold="'400:8:10'" />               → 400ms, 8px tactile, 10px souris
+//   <div v-touch-hold="350" />
+// modifiers : mouse (inclut la souris), capture / mouseCapture, stop, prevent,
+// passive
+//
+// Détails du handler (compatible Quasar) :
+//   { evt, position: { left, top }, duration }
+// Après déclenchement, le geste est « consommé » : le click/touchend qui suit
+// est supprimé (un appui long ne déclenche pas aussi un clic).
+
+export interface TouchHoldDetails {
+  evt: Event
+  position: { left: number; top: number }
+  duration: number
+}
+
+export type TouchHoldHandler = (details: TouchHoldDetails) => void
+
+const DEFAULTS = { time: 600, touchSensitivity: 5, mouseSensitivity: 7 }
+
+interface HoldOptions {
+  handler: TouchHoldHandler
+  time: number
+  touchSensitivity: number
+  mouseSensitivity: number
+  mouse: boolean
+  stop: boolean
+  prevent: boolean
+  capture: boolean
+  passive: boolean
+}
+
+type QElement = HTMLElement & { __qTouchHoldCleanup?: () => void }
+
+function parseValue(value: unknown): Partial<typeof DEFAULTS> {
+  if (typeof value === "number") return { time: value }
+  if (typeof value === "string") {
+    const [t, touch, mouse] = value.split(":")
+    const out: Partial<typeof DEFAULTS> = {}
+    const num = Number(t)
+    if (Number.isFinite(num)) out.time = num
+    if (touch !== undefined) {
+      const n = Number(touch)
+      if (Number.isFinite(n)) out.touchSensitivity = n
+    }
+    if (mouse !== undefined) {
+      const n = Number(mouse)
+      if (Number.isFinite(n)) out.mouseSensitivity = n
+    }
+    return out
+  }
+  if (Array.isArray(value)) {
+    const out: Partial<typeof DEFAULTS> = {}
+    const t = Number(value[0])
+    if (Number.isFinite(t)) out.time = t
+    const touch = Number(value[1])
+    if (Number.isFinite(touch)) out.touchSensitivity = touch
+    const mouse = Number(value[2])
+    if (Number.isFinite(mouse)) out.mouseSensitivity = mouse
+    return out
+  }
+  if (value && typeof value === "object") {
+    const o = value as Record<string, unknown>
+    const out: Partial<typeof DEFAULTS> = {}
+    const t = Number(o.time ?? o.duration)
+    if (Number.isFinite(t)) out.time = t
+    const touch = Number(o.sensitivity ?? o.touchSensitivity)
+    if (Number.isFinite(touch)) out.touchSensitivity = touch
+    const mouse = Number(o.mouseSensitivity)
+    if (Number.isFinite(mouse)) out.mouseSensitivity = mouse
+    return out
+  }
+  return {}
+}
+
+export const vTouchHold = {
+  mounted(el: HTMLElement, binding: { value?: unknown; modifiers?: Record<string, boolean> }) {
+    const handler = binding.value
+    if (typeof handler !== "function") {
+      console.warn("[v-touch-hold] value doit être une fonction (handler)")
+      return
+    }
+    const m = binding.modifiers ?? {}
+    const parsed = parseValue(binding.value)
+    const options: HoldOptions = {
+      handler: handler as TouchHoldHandler,
+      time: parsed.time ?? DEFAULTS.time,
+      touchSensitivity: parsed.touchSensitivity ?? DEFAULTS.touchSensitivity,
+      mouseSensitivity: parsed.mouseSensitivity ?? DEFAULTS.mouseSensitivity,
+      mouse: !!m.mouse || !!m.mouseCapture,
+      stop: !!m.stop,
+      prevent: !!m.prevent,
+      capture: !!m.capture || !!m.mouseCapture,
+      passive: !!m.passive,
+    }
+
+    // Éviter scroll / context menu / sélection pendant l'appui
+    el.style.touchAction = "none"
+    el.style.userSelect = "none"
+    ;(el as HTMLElement).style.webkitUserSelect = "none"
+
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let pending = false
+    let consumed = false
+    let startX = 0
+    let startY = 0
+    let lastEvt: PointerEvent | null = null
+    let startTime = 0
+
+    const clearTimer = () => {
+      if (timer) clearTimeout(timer)
+      timer = undefined
+    }
+
+    const cancel = () => {
+      clearTimer()
+      pending = false
+    }
+
+    const finish = () => {
+      clearTimer()
+      if (!pending) return
+      pending = false
+      consumed = true
+      const duration = Math.round(performance.now() - startTime)
+      const evt = lastEvt
+      if (evt) {
+        options.handler({
+          evt,
+          position: { left: evt.clientX, top: evt.clientY },
+          duration: options.time || duration,
+        })
+      }
+      // Consomme la fin du geste : pas de click/touchend après un hold
+      const onUp = (e: Event) => {
+        if (options.prevent) e.preventDefault()
+        if (options.stop) e.stopPropagation()
+        window.removeEventListener("pointerup", onUp, true)
+        window.removeEventListener("pointercancel", onCancelAfter, true)
+        window.removeEventListener("click", onClick, true)
+        window.removeEventListener("touchend", onUp, true)
+      }
+      const onClick = (e: Event) => {
+        e.preventDefault()
+        e.stopPropagation()
+        window.removeEventListener("click", onClick, true)
+        window.removeEventListener("pointerup", onUp, true)
+        window.removeEventListener("touchend", onUp, true)
+      }
+      const onCancelAfter = () => {
+        window.removeEventListener("pointerup", onUp, true)
+        window.removeEventListener("pointercancel", onCancelAfter, true)
+        window.removeEventListener("click", onClick, true)
+      }
+      window.addEventListener("pointerup", onUp, true)
+      window.addEventListener("pointercancel", onCancelAfter, true)
+      window.addEventListener("touchend", onUp, true)
+      window.addEventListener("click", onClick, true)
+    }
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (pending || consumed) return
+      if (e.pointerType === "mouse" && !options.mouse) return
+      if (options.prevent && !options.passive) e.preventDefault()
+      pending = true
+      startX = e.clientX
+      startY = e.clientY
+      startTime = performance.now()
+      lastEvt = e
+      const sensitivity = e.pointerType === "mouse" ? options.mouseSensitivity : options.touchSensitivity
+      timer = setTimeout(finish, options.time)
+
+      const onMove = (ev: PointerEvent) => {
+        if (!pending) return
+        if (Math.abs(ev.clientX - startX) > sensitivity || Math.abs(ev.clientY - startY) > sensitivity) {
+          cancel()
+          cleanup()
+        }
+      }
+      const onUpEarly = () => cancel()
+      const cleanup = () => {
+        el.removeEventListener("pointermove", onMove)
+        el.removeEventListener("pointerup", onUpEarly)
+        el.removeEventListener("pointercancel", onUpEarly)
+      }
+      el.addEventListener("pointermove", onMove, { passive: options.passive })
+      el.addEventListener("pointerup", onUpEarly)
+      el.addEventListener("pointercancel", onUpEarly)
+      ;(el as any).__qHoldCleanupEarly = cleanup
+    }
+
+    const onContext = (e: Event) => {
+      if (pending || consumed) e.preventDefault()
+    }
+
+    const capture = options.capture
+    el.addEventListener("pointerdown", onPointerDown, { capture, passive: options.passive })
+    el.addEventListener("contextmenu", onContext, { capture })
+
+    ;(el as QElement).__qTouchHoldCleanup = () => {
+      el.removeEventListener("pointerdown", onPointerDown, { capture } as any)
+      el.removeEventListener("contextmenu", onContext, { capture } as any)
+      ;(el as any).__qHoldCleanupEarly?.()
+      clearTimer()
+      el.style.touchAction = ""
+      el.style.userSelect = ""
+      el.style.webkitUserSelect = ""
+    }
+  },
+  unmounted(el: HTMLElement) {
+    ;(el as QElement).__qTouchHoldCleanup?.()
+    delete (el as QElement).__qTouchHoldCleanup
+  },
+}

package/lib/touchPan.ts

@@ -0,0 +1,237 @@
+// v-touch-pan — directive : détecte les gestes « pan » (glisser) sur un
+// élément, tactile ET souris (modifier .mouse), équivalent Quasar
+// https://quasar.dev/vue-directives/touch-pan
+//
+// Usage : <div v-touch-pan.horizontal.mouse.prevent="onPan" />
+//   modifiers : horizontal | vertical | up | down | left | right (filtres de
+//   direction), mouse (inclut la souris), prevent (bloque le scroll natif),
+//   stop, capture, passive, mouseCapture
+//
+// Détails passés au handler (compatible Quasar) :
+//   { evt, position: { top, left }, direction, delta: { x, y },
+//     distance: { x, y }, duration, speed: { x, y },
+//     isFirst, isFinal, isVertical, isHorizontal }
+
+export interface PanPosition {
+  top: number
+  left: number
+}
+
+export interface PanDelta {
+  x: number
+  y: number
+}
+
+export type PanDirection = "up" | "down" | "left" | "right"
+
+export interface PanDetails {
+  evt: PointerEvent
+  position: PanPosition
+  direction: PanDirection
+  delta: PanDelta
+  distance: PanDelta
+  duration: number
+  speed: PanDelta
+  isFirst: boolean
+  isFinal: boolean
+  isVertical: boolean
+  isHorizontal: boolean
+}
+
+export type TouchPanHandler = (details: PanDetails) => void
+
+interface PanState {
+  pointerId: number
+  startX: number
+  startY: number
+  lastX: number
+  lastY: number
+  startTime: number
+  lastTime: number
+  axis: "horizontal" | "vertical" | null
+  panning: boolean
+}
+
+const PAN_MIN = 4 // seuil avant de déclarer le pan (px)
+
+interface TouchPanOptions {
+  handler: TouchPanHandler
+  allowHorizontal: boolean
+  allowVertical: boolean
+  allowUp: boolean
+  allowDown: boolean
+  allowLeft: boolean
+  allowRight: boolean
+  mouse: boolean
+  prevent: boolean
+  stop: boolean
+  capture: boolean
+  passive: boolean
+  mouseCapture: boolean
+}
+
+type QElement = HTMLElement & { __qTouchPanCleanup?: () => void }
+
+function axisAllowed(options: TouchPanOptions, direction: PanDirection) {
+  if (options.allowHorizontal) return direction === "left" || direction === "right"
+  if (options.allowVertical) return direction === "up" || direction === "down"
+  switch (direction) {
+    case "up": return options.allowUp
+    case "down": return options.allowDown
+    case "left": return options.allowLeft
+    case "right": return options.allowRight
+  }
+}
+
+function parseDirection(dx: number, dy: number): PanDirection {
+  return Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? "right" : "left") : (dy > 0 ? "down" : "up")
+}
+
+function applyPrevent(e: Event, options: TouchPanOptions, active: boolean) {
+  if (options.stop) e.stopPropagation()
+  if (options.prevent && active) e.preventDefault()
+}
+
+export const vTouchPan = {
+  mounted(el: HTMLElement, binding: { value?: unknown; modifiers?: Record<string, boolean> }) {
+    const handler = binding.value
+    if (typeof handler !== "function") {
+      console.warn("[v-touch-pan] value doit être une fonction (handler)")
+      return
+    }
+    const m = binding.modifiers ?? {}
+    const options: TouchPanOptions = {
+      handler: handler as TouchPanHandler,
+      allowHorizontal: !!m.horizontal,
+      allowVertical: !!m.vertical,
+      allowUp: !!m.up,
+      allowDown: !!m.down,
+      allowLeft: !!m.left,
+      allowRight: !!m.right,
+      mouse: !!m.mouse || !!m.mouseCapture,
+      prevent: !!m.prevent,
+      stop: !!m.stop,
+      capture: !!m.capture || !!m.mouseCapture,
+      passive: !!m.passive,
+      mouseCapture: false,
+    }
+    options.mouseCapture = !!m.mouseCapture
+
+    let state: PanState | null = null
+
+    // touch-action : laisser le scroll natif quand on ne capture qu'un axe
+    if (options.prevent) el.style.touchAction = "none"
+    else if (options.allowHorizontal && !options.allowVertical) el.style.touchAction = "pan-y"
+    else if (options.allowVertical && !options.allowHorizontal) el.style.touchAction = "pan-x"
+    else el.style.touchAction = options.allowUp || options.allowDown || options.allowLeft || options.allowRight ? "pan-y pan-x" : "auto"
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (state) return
+      if (e.pointerType === "mouse" && !options.mouse) return
+      applyPrevent(e, options, false)
+      state = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        lastX: e.clientX,
+        lastY: e.clientY,
+        startTime: performance.now(),
+        lastTime: performance.now(),
+        axis: null,
+        panning: false,
+      }
+      try { (e.currentTarget as Element).setPointerCapture?.(e.pointerId) } catch { /* ignore */ }
+    }
+
+    const onPointerMove = (e: PointerEvent) => {
+      if (!state || state.pointerId !== e.pointerId) return
+      const dx = e.clientX - state.startX
+      const dy = e.clientY - state.startY
+      const deltaX = e.clientX - state.lastX
+      const deltaY = e.clientY - state.lastY
+      const now = performance.now()
+      const duration = now - state.startTime
+
+      if (!state.panning) {
+        if (Math.abs(dx) < PAN_MIN && Math.abs(dy) < PAN_MIN) return
+        const direction = parseDirection(dx, dy)
+        if (!axisAllowed(options, direction)) return
+        state.axis = direction === "left" || direction === "right" ? "horizontal" : "vertical"
+        state.panning = true
+        applyPrevent(e, options, true)
+        state.lastX = e.clientX
+        state.lastY = e.clientY
+        state.lastTime = now
+        emit(state, e, direction, { x: 0, y: 0 }, { x: dx, y: dy }, duration, true)
+        return
+      }
+
+      const direction = state.axis === "horizontal" ? (dx > 0 ? "right" : "left") : (dy > 0 ? "down" : "up")
+      applyPrevent(e, options, true)
+      state.lastX = e.clientX
+      state.lastY = e.clientY
+      state.lastTime = now
+      emit(state, e, direction, { x: deltaX, y: deltaY }, { x: dx, y: dy }, duration, false)
+    }
+
+    const onPointerEnd = (e: PointerEvent) => {
+      if (!state || state.pointerId !== e.pointerId) return
+      const dx = e.clientX - state.startX
+      const dy = e.clientY - state.startY
+      const duration = performance.now() - state.startTime
+      if (state.panning) {
+        const direction = state.axis === "horizontal" ? (dx > 0 ? "right" : "left") : (dy > 0 ? "down" : "up")
+        emit(state, e, direction, { x: 0, y: 0 }, { x: dx, y: dy }, duration, false, true)
+      }
+      state = null
+    }
+
+    const onPointerCancel = (e: PointerEvent) => {
+      if (state && state.pointerId === e.pointerId) state = null
+    }
+
+    const emit = (
+      s: PanState,
+      evt: PointerEvent,
+      direction: PanDirection,
+      delta: PanDelta,
+      distance: PanDelta,
+      duration: number,
+      isFirst: boolean,
+      isFinal = false,
+    ) => {
+      const elapsed = Math.max(duration, 1)
+      options.handler({
+        evt,
+        position: { top: evt.clientY, left: evt.clientX },
+        direction,
+        delta,
+        distance,
+        duration,
+        speed: { x: Math.abs(distance.x) / elapsed * 1000, y: Math.abs(distance.y) / elapsed * 1000 },
+        isFirst,
+        isFinal,
+        isVertical: s.axis === "vertical",
+        isHorizontal: s.axis === "horizontal",
+      })
+    }
+
+    const capture = options.capture
+    el.addEventListener("pointerdown", onPointerDown, { capture, passive: options.passive })
+    el.addEventListener("pointermove", onPointerMove, { capture, passive: options.passive })
+    el.addEventListener("pointerup", onPointerEnd, { capture })
+    el.addEventListener("pointercancel", onPointerCancel, { capture })
+
+    ;(el as QElement).__qTouchPanCleanup = () => {
+      el.removeEventListener("pointerdown", onPointerDown, { capture } as any)
+      el.removeEventListener("pointermove", onPointerMove, { capture } as any)
+      el.removeEventListener("pointerup", onPointerEnd, { capture } as any)
+      el.removeEventListener("pointercancel", onPointerCancel, { capture } as any)
+      el.style.touchAction = ""
+    }
+  },
+  unmounted(el: HTMLElement) {
+    ;(el as QElement).__qTouchPanCleanup?.()
+    delete (el as QElement).__qTouchPanCleanup
+  },
+}

package/lib/touchRepeat.ts

@@ -0,0 +1,148 @@
+// v-touch-repeat — directive : déclenche un handler en boucle tant que
+// l'élément est pressé (appui long répété), équivalent Quasar
+// https://quasar.dev/vue-directives/touch-repeat
+//
+// Usage :
+//   <button v-touch-repeat.mouse="onRepeat">…</button>
+//   <button v-touch-repeat.mouse="{ delay: 500, interval: 100 }">…</button>
+//   <button v-touch-repeat.mouse="'500:100'">…</button>
+// modifiers : mouse (inclut la souris), capture / mouseCapture, stop, prevent,
+// passive
+//
+// Détails du handler : { evt, count, elapsed }
+
+export interface TouchRepeatDetails {
+  evt: Event
+  /** Nombre d'appels (1 = premier, après le délai) */
+  count: number
+  /** Temps écoulé depuis le pointerdown (ms) */
+  elapsed: number
+}
+
+export type TouchRepeatHandler = (details: TouchRepeatDetails) => void
+
+const DEFAULTS = { delay: 600, interval: 150 }
+
+interface RepeatOptions {
+  handler: TouchRepeatHandler
+  delay: number
+  interval: number
+  mouse: boolean
+  stop: boolean
+  prevent: boolean
+  capture: boolean
+  passive: boolean
+}
+
+type QElement = HTMLElement & { __qTouchRepeatCleanup?: () => void }
+
+function parseValue(value: unknown): { delay?: number; interval?: number } {
+  if (typeof value === "number") return { interval: value }
+  if (typeof value === "string") {
+    const [delay, interval] = value.split(":")
+    const out: { delay?: number; interval?: number } = {}
+    const d = Number(delay)
+    if (Number.isFinite(d)) out.delay = d
+    const i = Number(interval)
+    if (Number.isFinite(i)) out.interval = i
+    return out
+  }
+  if (value && typeof value === "object") {
+    const o = value as Record<string, unknown>
+    const out: { delay?: number; interval?: number } = {}
+    const d = Number(o.delay)
+    if (Number.isFinite(d)) out.delay = d
+    const i = Number(o.interval)
+    if (Number.isFinite(i)) out.interval = i
+    return out
+  }
+  return {}
+}
+
+export const vTouchRepeat = {
+  mounted(el: HTMLElement, binding: { value?: unknown; modifiers?: Record<string, boolean> }) {
+    const handler = binding.value
+    if (typeof handler !== "function") {
+      console.warn("[v-touch-repeat] value doit être une fonction (handler)")
+      return
+    }
+    const m = binding.modifiers ?? {}
+    const parsed = parseValue(binding.value)
+    const options: RepeatOptions = {
+      handler: handler as TouchRepeatHandler,
+      delay: parsed.delay ?? DEFAULTS.delay,
+      interval: parsed.interval ?? DEFAULTS.interval,
+      mouse: !!m.mouse || !!m.mouseCapture,
+      stop: !!m.stop,
+      prevent: !!m.prevent,
+      capture: !!m.capture || !!m.mouseCapture,
+      passive: !!m.passive,
+    }
+
+    el.style.touchAction = "none"
+
+    let active = false
+    let count = 0
+    let startTime = 0
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let intervalTimer: ReturnType<typeof setInterval> | undefined
+
+    const stop = () => {
+      active = false
+      if (timer) clearTimeout(timer)
+      if (intervalTimer) clearInterval(intervalTimer)
+      timer = undefined
+      intervalTimer = undefined
+    }
+
+    const tick = () => {
+      count++
+      options.handler({
+        evt: lastEvt ?? new Event("touch-repeat"),
+        count,
+        elapsed: Math.round(performance.now() - startTime),
+      })
+    }
+
+    let lastEvt: Event | null = null
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (active) return
+      if (e.pointerType === "mouse" && !options.mouse) return
+      if (options.prevent && !options.passive) e.preventDefault()
+      if (options.stop) e.stopPropagation()
+      active = true
+      count = 0
+      startTime = performance.now()
+      lastEvt = e
+      timer = setTimeout(() => {
+        tick()
+        intervalTimer = setInterval(tick, options.interval)
+      }, options.delay)
+    }
+
+    const onPointerUp = (e: PointerEvent) => {
+      lastEvt = e
+      stop()
+    }
+
+    const capture = options.capture
+    el.addEventListener("pointerdown", onPointerDown, { capture, passive: options.passive })
+    el.addEventListener("pointerup", onPointerUp, { capture })
+    el.addEventListener("pointercancel", onPointerUp, { capture })
+    el.addEventListener("pointerleave", onPointerUp, { capture })
+
+    ;(el as QElement).__qTouchRepeatCleanup = () => {
+      el.removeEventListener("pointerdown", onPointerDown, { capture } as any)
+      el.removeEventListener("pointerup", onPointerUp, { capture } as any)
+      el.removeEventListener("pointercancel", onPointerUp, { capture } as any)
+      el.removeEventListener("pointerleave", onPointerUp, { capture } as any)
+      stop()
+      el.style.touchAction = ""
+    }
+  },
+  unmounted(el: HTMLElement) {
+    ;(el as QElement).__qTouchRepeatCleanup?.()
+    delete (el as QElement).__qTouchRepeatCleanup
+  },
+}