@slidev/client 0.48.8 → 0.49.0-beta.1

package/internals/DragControl.vue

@@ -0,0 +1,396 @@
+<script setup lang="ts">
+import { clamp } from '@antfu/utils'
+import type { Pausable } from '@vueuse/core'
+import { useIntervalFn } from '@vueuse/core'
+import { computed, inject, ref, watchEffect } from 'vue'
+import type { DragElementState } from '../composables/useDragElements'
+import { useSlideBounds } from '../composables/useSlideBounds'
+import { injectionSlideScale } from '../constants'
+import { slideHeight, slideWidth } from '../env'
+import { magicKeys } from '../state'
+
+const { data } = defineProps<{ data: DragElementState }>()
+const { id, zoom, autoHeight, x0, y0, width, height, rotate } = data
+
+const slideScale = inject(injectionSlideScale, ref(1))
+const scale = computed(() => slideScale.value * zoom.value)
+const { left: slideLeft, top: slideTop } = useSlideBounds()
+
+const ctrlSize = 10
+const minSize = 40
+const minRemain = 10
+
+const rotateRad = computed(() => rotate.value * Math.PI / 180)
+const rotateSin = computed(() => Math.sin(rotateRad.value))
+const rotateCos = computed(() => Math.cos(rotateRad.value))
+
+const boundingWidth = computed(() => width.value * rotateCos.value + height.value * rotateSin.value)
+const boundingHeight = computed(() => width.value * rotateSin.value + height.value * rotateCos.value)
+
+const boundingLeft = computed(() => x0.value - boundingWidth.value / 2)
+const boundingTop = computed(() => y0.value - boundingHeight.value / 2)
+const boundingRight = computed(() => x0.value + boundingWidth.value / 2)
+const boundingBottom = computed(() => y0.value + boundingHeight.value / 2)
+
+let currentDrag: {
+  x0: number
+  y0: number
+  width: number
+  height: number
+  rotate: number
+  dx0: number
+  dy0: number
+  ltx: number
+  lty: number
+  rtx: number
+  rty: number
+  lbx: number
+  lby: number
+  rbx: number
+  rby: number
+} | null = null
+
+function onPointerdown(ev: PointerEvent) {
+  if (ev.buttons !== 1)
+    return
+
+  ev.preventDefault()
+  ev.stopPropagation()
+  const el = ev.target as HTMLElement
+  const elBounds = el.getBoundingClientRect()
+
+  const cross1x = width.value * rotateCos.value - height.value * rotateSin.value
+  const cross1y = width.value * rotateSin.value + height.value * rotateCos.value
+  const cross2x = width.value * rotateCos.value + height.value * rotateSin.value
+  const cross2y = -width.value * rotateSin.value + height.value * rotateCos.value
+
+  currentDrag = {
+    x0: x0.value,
+    y0: y0.value,
+    width: width.value,
+    height: height.value,
+    rotate: rotate.value,
+    dx0: ev.clientX - (elBounds.left + elBounds.right) / 2,
+    dy0: ev.clientY - (elBounds.top + elBounds.bottom) / 2,
+    ltx: x0.value - cross1x / 2,
+    lty: y0.value - cross1y / 2,
+    rtx: x0.value + cross2x / 2,
+    rty: y0.value - cross2y / 2,
+    lbx: x0.value - cross2x / 2,
+    lby: y0.value + cross2y / 2,
+    rbx: x0.value + cross1x / 2,
+    rby: y0.value + cross1y / 2,
+  };
+
+  (ev.currentTarget as HTMLElement).setPointerCapture(ev.pointerId)
+}
+
+function onPointermove(ev: PointerEvent) {
+  if (!currentDrag || ev.buttons !== 1)
+    return
+
+  ev.preventDefault()
+  ev.stopPropagation()
+
+  const x = (ev.clientX - slideLeft.value - currentDrag.dx0) / scale.value
+  const y = (ev.clientY - slideTop.value - currentDrag.dy0) / scale.value
+
+  x0.value = clamp(x, -boundingWidth.value / 2 + minRemain, slideWidth.value + boundingWidth.value / 2 - minRemain)
+  y0.value = clamp(y, -boundingHeight.value / 2 + minRemain, slideHeight.value + boundingHeight.value / 2 - minRemain)
+}
+
+function onPointerup(ev: PointerEvent) {
+  if (!currentDrag)
+    return
+
+  ev.preventDefault()
+  ev.stopPropagation()
+
+  currentDrag = null
+}
+
+const ctrlClasses = `absolute border border-gray bg-gray dark:border-gray-500 dark:bg-gray-800 bg-opacity-30 `
+
+function getCornerProps(isLeft: boolean, isTop: boolean) {
+  return {
+    onPointerdown,
+    onPointermove: (ev: PointerEvent) => {
+      if (!currentDrag || ev.buttons !== 1)
+        return
+
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      let x = (ev.clientX - slideLeft.value) / scale.value
+      let y = (ev.clientY - slideTop.value) / scale.value
+
+      const { ltx, lty, rtx, rty, lbx, lby, rbx, rby } = currentDrag
+
+      const ratio = currentDrag.width / currentDrag.height
+      const wMin = Math.max(minSize, minSize * ratio)
+      function getSize(w1: number, h1: number) {
+        if (ev.shiftKey) {
+          const w = Math.max(w1, h1 * ratio, wMin)
+          const h = w / ratio
+          return { w, h }
+        }
+        else {
+          return { w: Math.max(w1, minSize), h: Math.max(h1, minSize) }
+        }
+      }
+
+      if (isLeft) {
+        if (isTop) {
+          const w1 = (rbx - x) * rotateCos.value + (rby - y) * rotateSin.value
+          const h1 = -(rbx - x) * rotateSin.value + (rby - y) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = rbx - w * rotateCos.value + h * rotateSin.value
+          y = rby - w * rotateSin.value - h * rotateCos.value
+        }
+        else {
+          const w1 = (rtx - x) * rotateCos.value - (y - rty) * rotateSin.value
+          const h1 = (rtx - x) * rotateSin.value + (y - rty) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = rtx - w * rotateCos.value - h * rotateSin.value
+          y = rty - w * rotateSin.value + h * rotateCos.value
+        }
+      }
+      else {
+        if (isTop) {
+          const w1 = (x - lbx) * rotateCos.value - (lby - y) * rotateSin.value
+          const h1 = (x - lbx) * rotateSin.value + (lby - y) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = lbx + w * rotateCos.value + h * rotateSin.value
+          y = lby + w * rotateSin.value - h * rotateCos.value
+        }
+        else {
+          const w1 = (x - ltx) * rotateCos.value + (y - lty) * rotateSin.value
+          const h1 = -(x - ltx) * rotateSin.value + (y - lty) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = ltx + w * rotateCos.value - h * rotateSin.value
+          y = lty + w * rotateSin.value + h * rotateCos.value
+        }
+      }
+
+      if (isLeft) {
+        if (isTop) {
+          x0.value = (x + rbx) / 2
+          y0.value = (y + rby) / 2
+          width.value = (rbx - x) * rotateCos.value + (rby - y) * rotateSin.value
+          height.value = -(rbx - x) * rotateSin.value + (rby - y) * rotateCos.value
+        }
+        else {
+          x0.value = (x + rtx) / 2
+          y0.value = (y + rty) / 2
+          width.value = (rtx - x) * rotateCos.value - (y - rty) * rotateSin.value
+          height.value = (rtx - x) * rotateSin.value + (y - rty) * rotateCos.value
+        }
+      }
+      else {
+        if (isTop) {
+          x0.value = (x + lbx) / 2
+          y0.value = (y + lby) / 2
+          width.value = (x - lbx) * rotateCos.value - (lby - y) * rotateSin.value
+          height.value = (x - lbx) * rotateSin.value + (lby - y) * rotateCos.value
+        }
+        else {
+          x0.value = (x + ltx) / 2
+          y0.value = (y + lty) / 2
+          width.value = (x - ltx) * rotateCos.value + (y - lty) * rotateSin.value
+          height.value = -(x - ltx) * rotateSin.value + (y - lty) * rotateCos.value
+        }
+      }
+    },
+    onPointerup,
+    style: {
+      width: `${ctrlSize}px`,
+      height: `${ctrlSize}px`,
+      margin: `-${ctrlSize / 2}px`,
+      left: isLeft ? '0' : undefined,
+      right: isLeft ? undefined : '0',
+      top: isTop ? '0' : undefined,
+      bottom: isTop ? undefined : '0',
+      cursor: +isLeft + +isTop === 1 ? 'nesw-resize' : 'nwse-resize',
+    },
+    class: ctrlClasses,
+  }
+}
+
+function getBorderProps(dir: 'l' | 'r' | 't' | 'b') {
+  return {
+    onPointerdown,
+    onPointermove: (ev: PointerEvent) => {
+      if (!currentDrag || ev.buttons !== 1)
+        return
+
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      const x = (ev.clientX - slideLeft.value) / scale.value
+      const y = (ev.clientY - slideTop.value) / scale.value
+
+      const { ltx, lty, rtx, rty, lbx, lby, rbx, rby } = currentDrag
+
+      if (dir === 'l') {
+        const rx = (rtx + rbx) / 2
+        const ry = (rty + rby) / 2
+        width.value = Math.max((rx - x) * rotateCos.value + (ry - y) * rotateSin.value, minSize)
+        x0.value = rx - width.value * rotateCos.value / 2
+        y0.value = ry - width.value * rotateSin.value / 2
+      }
+      else if (dir === 'r') {
+        const lx = (ltx + lbx) / 2
+        const ly = (lty + lby) / 2
+        width.value = Math.max((x - lx) * rotateCos.value + (y - ly) * rotateSin.value, minSize)
+        x0.value = lx + width.value * rotateCos.value / 2
+        y0.value = ly + width.value * rotateSin.value / 2
+      }
+      else if (dir === 't') {
+        const bx = (lbx + rbx) / 2
+        const by = (lby + rby) / 2
+        height.value = Math.max((by - y) * rotateCos.value - (bx - x) * rotateSin.value, minSize)
+        x0.value = bx + height.value * rotateSin.value / 2
+        y0.value = by - height.value * rotateCos.value / 2
+      }
+      else if (dir === 'b') {
+        const tx = (ltx + rtx) / 2
+        const ty = (lty + rty) / 2
+        height.value = Math.max((y - ty) * rotateCos.value - (x - tx) * rotateSin.value, minSize)
+        x0.value = tx - height.value * rotateSin.value / 2
+        y0.value = ty + height.value * rotateCos.value / 2
+      }
+    },
+    onPointerup,
+    style: {
+      width: `${ctrlSize}px`,
+      height: `${ctrlSize}px`,
+      margin: `-${ctrlSize / 2}px`,
+      left: dir === 'l' ? '0' : dir === 'r' ? `100%` : `50%`,
+      top: dir === 't' ? '0' : dir === 'b' ? `100%` : `50%`,
+      cursor: 'lr'.includes(dir) ? 'ew-resize' : 'ns-resize',
+      borderRadius: '50%',
+    },
+    class: ctrlClasses,
+  }
+}
+
+function getRotateProps() {
+  return {
+    onPointerdown,
+    onPointermove: (ev: PointerEvent) => {
+      if (!currentDrag || ev.buttons !== 1)
+        return
+
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      const x = (ev.clientX - slideLeft.value - currentDrag.dx0) / scale.value - ctrlSize / 4
+      const y = (ev.clientY - slideTop.value - currentDrag.dy0) / scale.value - ctrlSize / 4
+
+      let angle = Math.atan2(y - y0.value, x - x0.value) * 180 / Math.PI + 90
+
+      const commonAngles = [0, 90, 180, 270, 360]
+      for (const a of commonAngles) {
+        if (Math.abs(angle - a) < 5) {
+          angle = a % 360
+          break
+        }
+      }
+
+      rotate.value = angle
+    },
+    onPointerup,
+    style: {
+      width: `${ctrlSize}px`,
+      height: `${ctrlSize}px`,
+      margin: `-${ctrlSize / 2}px`,
+      left: '50%',
+      top: '-20px',
+      cursor: 'grab',
+      borderRadius: '50%',
+    },
+    class: ctrlClasses,
+  }
+}
+
+const moveInterval = 20
+const intervalFnOptions = {
+  immediate: false,
+  immediateCallback: false,
+}
+const moveLeft = useIntervalFn(() => {
+  if (boundingRight.value <= minRemain)
+    return
+  x0.value--
+}, moveInterval, intervalFnOptions)
+const moveRight = useIntervalFn(() => {
+  if (boundingLeft.value >= slideWidth.value - minRemain)
+    return
+  x0.value++
+}, moveInterval, intervalFnOptions)
+const moveUp = useIntervalFn(() => {
+  if (boundingBottom.value <= minRemain)
+    return
+  y0.value--
+}, moveInterval, intervalFnOptions)
+const moveDown = useIntervalFn(() => {
+  if (boundingTop.value >= slideHeight.value - minRemain)
+    return
+  y0.value++
+}, moveInterval, intervalFnOptions)
+
+watchEffect(() => {
+  function shortcut(key: string, fn: Pausable) {
+    if (magicKeys[key].value)
+      fn.resume()
+    else fn.pause()
+  }
+  shortcut('left', moveLeft)
+  shortcut('right', moveRight)
+  shortcut('up', moveUp)
+  shortcut('down', moveDown)
+})
+</script>
+
+<template>
+  <div
+    v-if="Number.isFinite(x0)"
+    :data-drag-id="id"
+    :style="{
+      position: 'absolute',
+      zIndex: 100,
+      left: `${zoom * (x0 - width / 2)}px`,
+      top: `${zoom * (y0 - height / 2)}px`,
+      width: `${zoom * width}px`,
+      height: `${zoom * height}px`,
+      transformOrigin: 'center center',
+      transform: `rotate(${rotate}deg)`,
+    }"
+    @pointerdown="onPointerdown"
+    @pointermove="onPointermove"
+    @pointerup="onPointerup"
+  >
+    <div class="absolute inset-0 z-100 b b-dark dark:b-gray-400">
+      <template v-if="!autoHeight">
+        <div v-bind="getCornerProps(true, true)" />
+        <div v-bind="getCornerProps(true, false)" />
+        <div v-bind="getCornerProps(false, true)" />
+        <div v-bind="getCornerProps(false, false)" />
+      </template>
+      <div v-bind="getBorderProps('l')" />
+      <div v-bind="getBorderProps('r')" />
+      <template v-if="!autoHeight">
+        <div v-bind="getBorderProps('t')" />
+        <div v-bind="getBorderProps('b')" />
+      </template>
+      <div v-bind="getRotateProps()" />
+      <div
+        class="absolute -top-15px w-0 b b-dashed b-dark dark:b-gray-400"
+        :style="{
+          left: 'calc(50% - 1px)',
+          height: autoHeight ? '14px' : '10px',
+        }"
+      />
+    </div>
+  </div>
+</template>

package/internals/SlideContainer.vue

@@ -2,7 +2,7 @@
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
-import { injectionSlideScale } from '../constants'
+import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { useNav } from '../composables/useNav'
 
 const props = defineProps({
@@ -23,11 +23,12 @@ const props = defineProps({
 
 const { clicksDirection, isPrintMode } = useNav()
 
-const root = ref<HTMLDivElement>()
-const element = useElementSize(root)
+const root = ref<HTMLDivElement | null>(null)
+const rootSize = useElementSize(root)
+const slideElement = ref<HTMLElement | null>(null)
 
-const width = computed(() => props.width ? props.width : element.width.value)
-const height = computed(() => props.width ? props.width / slideAspect.value : element.height.value)
+const width = computed(() => props.width ? props.width : rootSize.width.value)
+const height = computed(() => props.width ? props.width / slideAspect.value : rootSize.height.value)
 
 if (props.width) {
   watchEffect(() => {
@@ -42,7 +43,7 @@ const screenAspect = computed(() => width.value / height.value)
 
 const scale = computed(() => {
   if (props.scale && !isPrintMode.value)
-    return props.scale
+    return +props.scale
   if (screenAspect.value < slideAspect.value)
     return width.value / slideWidth.value
   return height.value * slideAspect.value / slideWidth.value
@@ -69,12 +70,13 @@ if (props.isMain) {
   `))
 }
 
-provideLocal(injectionSlideScale, scale as any)
+provideLocal(injectionSlideScale, scale)
+provideLocal(injectionSlideElement, slideElement)
 </script>
 
 <template>
   <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
-    <div id="slide-content" class="slidev-slide-content" :style="style">
+    <div id="slide-content" ref="slideElement" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />

package/internals/SlideWrapper.vue

@@ -4,6 +4,7 @@ import type { PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
+import { getSlideClass } from '../utils'
 import SlideLoading from './SlideLoading.vue'
 
 const props = defineProps({
@@ -67,16 +68,24 @@ const SlideComponent = defineAsyncComponent({
 </script>
 
 <template>
-  <component
-    :is="SlideComponent"
-    :style="style"
-    :data-slidev-no="props.route.no"
-    :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
-  />
+  <div :class="getSlideClass(route)">
+    <component
+      :is="SlideComponent"
+      :style="style"
+      :data-slidev-no="props.route.no"
+      :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
+    />
+  </div>
 </template>
 
 <style scoped>
 .disable-view-transition:deep(*) {
   view-transition-name: none !important;
 }
+
+.slidev-page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
 </style>

package/internals/SlidesShow.vue

@@ -2,13 +2,14 @@
 import { TransitionGroup, computed, shallowRef, watch } from 'vue'
 import { recomputeAllPoppers } from 'floating-vue'
 import { useNav } from '../composables/useNav'
-import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../logic/hmr'
 import { createFixedClicks } from '../composables/useClicks'
+import { activeDragElement } from '../state'
 import { CLICKS_MAX } from '../constants'
 import SlideWrapper from './SlideWrapper.vue'
 import PresenterMouse from './PresenterMouse.vue'
+import DragControl from './DragControl.vue'
 
 import GlobalTop from '#slidev/global-components/top'
 import GlobalBottom from '#slidev/global-components/bottom'
@@ -65,22 +66,19 @@ function onAfterLeave() {
     tag="div"
     @after-leave="onAfterLeave"
   >
-    <div
+    <SlideWrapper
+      :is="route.component!"
       v-for="route of loadedRoutes"
       v-show="route === currentSlideRoute"
       :key="route.no"
-    >
-      <SlideWrapper
-        :is="route.component!"
-        :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
-        :class="getSlideClass(route)"
-        :route="route"
-        :render-context="renderContext"
-        class="overflow-hidden"
-      />
-    </div>
+      :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
+      :route="route"
+      :render-context="renderContext"
+    />
   </component>
 
+  <DragControl v-if="activeDragElement" :data="activeDragElement" />
+
   <div id="twoslash-container" />
 
   <!-- Global Top -->
@@ -96,10 +94,4 @@ function onAfterLeave() {
 #slideshow {
   height: 100%;
 }
-
-#slideshow > div {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-}
 </style>

package/modules/v-click.ts

@@ -1,5 +1,5 @@
 import type { ResolvedClicksInfo } from '@slidev/types'
-import type { App, DirectiveBinding, InjectionKey } from 'vue'
+import type { App, DirectiveBinding } from 'vue'
 import { computed, watchEffect } from 'vue'
 import {
   CLASS_VCLICK_CURRENT,
@@ -8,14 +8,12 @@ import {
   CLASS_VCLICK_HIDDEN_EXP,
   CLASS_VCLICK_PRIOR,
   CLASS_VCLICK_TARGET,
+  injectionClickVisibility,
   injectionClicksContext,
 } from '../constants'
+import { directiveInject, directiveProvide } from '../utils'
 
-export type VClickValue = string | [string | number, string | number] | boolean
-
-export function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
-  return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
-}
+export type VClickValue = undefined | string | number | [string | number, string | number] | boolean
 
 export function createVClickDirectives() {
   return {
@@ -25,7 +23,7 @@ export function createVClickDirectives() {
         name: 'v-click',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value)
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -37,7 +35,8 @@ export function createVClickDirectives() {
           if (clicks[1] != null)
             el.dataset.slidevClicksEnd = String(clicks[1])
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             const active = resolved.isActive.value
             const current = resolved.isCurrent.value
             const prior = active && !current
@@ -62,13 +61,14 @@ export function createVClickDirectives() {
         name: 'v-after',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, true)
+          const resolved = resolveClick(el, dir, dir.value, true, true)
           if (resolved == null)
             return
 
           el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             const active = resolved.isActive.value
             const current = resolved.isCurrent.value
             const prior = active && !current
@@ -93,13 +93,14 @@ export function createVClickDirectives() {
         name: 'v-click-hide',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, false, true)
+          const resolved = resolveClick(el, dir, dir.value, true, false, true)
           if (resolved == null)
             return
 
           el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
-          watchEffect(() => {
+          // @ts-expect-error extra prop
+          el.watchStopHandle = watchEffect(() => {
             const active = resolved.isActive.value
             const current = resolved.isCurrent.value
             const prior = active && !current
@@ -117,20 +118,20 @@ export function createVClickDirectives() {
   }
 }
 
-function isActive(thisClick: number | [number, number], clicks: number) {
+function isClickActive(thisClick: number | [number, number], clicks: number) {
   return Array.isArray(thisClick)
     ? thisClick[0] <= clicks && clicks < thisClick[1]
     : thisClick <= clicks
 }
 
-function isCurrent(thisClick: number | [number, number], clicks: number) {
+function isClickCurrent(thisClick: number | [number, number], clicks: number) {
   return Array.isArray(thisClick)
     ? thisClick[0] === clicks
     : thisClick === clicks
 }
 
-export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VClickValue, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
-  const ctx = dirInject(dir, injectionClicksContext)?.value
+export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, value: VClickValue, provideVisibility = false, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+  const ctx = directiveInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx)
     return null
@@ -152,29 +153,47 @@ export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VCl
   if (Array.isArray(value)) {
     // range (absolute)
     delta = 0
-    thisClick = value as [number, number]
+    thisClick = [+value[0], +value[1]]
     maxClick = +value[1]
   }
   else {
     ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))
   }
 
+  const isActive = computed(() => isClickActive(thisClick, ctx.current))
+  const isCurrent = computed(() => isClickCurrent(thisClick, ctx.current))
+  const isShown = computed(() => flagHide ? !isActive.value : isActive.value)
+
   const resolved: ResolvedClicksInfo = {
     max: maxClick,
     clicks: thisClick,
     delta,
-    isActive: computed(() => isActive(thisClick, ctx.current)),
-    isCurrent: computed(() => isCurrent(thisClick, ctx.current)),
-    isShown: computed(() => flagHide ? !isActive(thisClick, ctx.current) : isActive(thisClick, ctx.current)),
+    isActive,
+    isCurrent,
+    isShown,
     flagFade,
     flagHide,
   }
   ctx.register(el, resolved)
+
+  if (provideVisibility) {
+    directiveProvide(dir, injectionClickVisibility, computed(() => {
+      if (isShown.value)
+        return true
+      if (Array.isArray(thisClick))
+        return ctx.current < thisClick[0] ? 'before' : 'after'
+      else
+        return flagHide ? 'after' : 'before'
+    }))
+  }
+
   return resolved
 }
 
 function unmounted(el: HTMLElement, dir: DirectiveBinding<any>) {
   el.classList.toggle(CLASS_VCLICK_TARGET, false)
-  const ctx = dirInject(dir, injectionClicksContext)?.value
+  const ctx = directiveInject(dir, injectionClicksContext)?.value
   ctx?.unregister(el)
+  // @ts-expect-error extra prop
+  el.watchStopHandle?.()
 }