@slidev/client 0.48.0-beta.1 → 0.48.0-beta.10

package/internals/NoteEditor.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
 import { ref, watch, watchEffect } from 'vue'
-import { currentSlideId } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps({
+  no: {
+    type: Number,
+  },
   class: {
     default: '',
   },
@@ -25,7 +27,7 @@ const emit = defineEmits([
 ])
 const editing = useVModel(props, 'editing', emit, { passive: true })
 
-const { info, update } = useDynamicSlideInfo(currentSlideId)
+const { info, update } = useDynamicSlideInfo(props.no)
 
 const note = ref('')
 let timer: any
@@ -33,10 +35,10 @@ let timer: any
 const { ignoreUpdates } = ignorableWatch(
   note,
   (v) => {
-    const id = currentSlideId.value
+    const id = props.no
     clearTimeout(timer)
     timer = setTimeout(() => {
-      update({ raw: null!, note: v }, id)
+      update({ note: v }, id)
     }, 500)
   },
 )
@@ -44,6 +46,8 @@ const { ignoreUpdates } = ignorableWatch(
 watch(
   info,
   (v) => {
+    if (editing.value)
+      return
     clearTimeout(timer)
     ignoreUpdates(() => {
       note.value = v?.note || ''
@@ -68,7 +72,7 @@ onClickOutside(input, () => {
   <NoteDisplay
     v-if="!editing"
     class="my--4 border-transparent border-2"
-    :class="[props.class, note ? '' : 'opacity-50']"
+    :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
     :style="props.style"
     :note="note || placeholder"
     :note-html="info?.noteHTML"
@@ -77,7 +81,7 @@ onClickOutside(input, () => {
     v-else
     ref="input"
     v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block border-green border-2"
+    class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
     style="line-height: 1.75;"
     :style="props.style"
     :class="props.class"

package/internals/NoteStatic.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { currentRoute } from '../logic/nav'
+import { useSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps<{
+  no?: number
   class?: string
 }>()
 
-const note = computed(() => currentRoute.value?.meta?.slide?.note)
-const noteHtml = computed(() => currentRoute.value?.meta?.slide?.noteHTML)
+const { info } = useSlideInfo(props.no)
 </script>
 
 <template>
   <NoteDisplay
     :class="props.class"
-    :note="note"
-    :note-html="noteHtml"
+    :note="info?.note"
+    :note-html="info?.noteHTML"
   />
 </template>

package/internals/PrintContainer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseRangeString } from '@slidev/parser/core'
-import { computed, provide } from 'vue'
+import { computed } from 'vue'
+import { provideLocal } from '@vueuse/core'
 import { configs, slideAspect, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
 import { route as currentRoute, rawRoutes } from '../logic/nav'
@@ -31,7 +32,7 @@ const className = computed(() => ({
   'select-none': !configs.selectable,
 }))
 
-provide(injectionSlideScale, scale)
+provideLocal(injectionSlideScale, scale)
 </script>
 
 <template>

package/internals/PrintSlideClick.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router'
-import { computed, provide, reactive, shallowRef } from 'vue'
+import { computed, reactive, shallowRef } from 'vue'
 import type { ClicksContext } from '@slidev/types'
+import { provideLocal } from '@vueuse/core'
 import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
@@ -33,7 +34,7 @@ const id = computed(() =>
   `${props.route.path.toString().padStart(3, '0')}-${(props.nav.clicks.value + 1).toString().padStart(2, '0')}`,
 )
 
-provide(injectionSlidevContext, reactive({
+provideLocal(injectionSlidevContext, reactive({
   nav: props.nav,
   configs,
   themeConfigs: computed(() => configs.themeConfig),

package/internals/RecordingDialog.vue

@@ -109,7 +109,7 @@ async function start() {
   }
 
   input[type="text"] {
-    @apply border border-gray-400 rounded px-2 py-1;
+    @apply border border-main rounded px-2 py-1;
   }
 
   button {
@@ -118,8 +118,7 @@ async function start() {
   }
 
   button.cancel {
-    @apply bg-gray-400 text-white px-4 py-1 rounded border-b-2 border-gray-500;
-    @apply bg-opacity-50 border-opacity-50;
+    @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
     @apply hover:(bg-opacity-75 border-opacity-75)
   }
 }

package/internals/SlideContainer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, provide, ref, watchEffect } from 'vue'
+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 { isPrintMode } from '../logic/nav'
@@ -47,9 +47,10 @@ const scale = computed(() => {
 })
 
 const style = computed(() => ({
-  height: `${slideHeight}px`,
-  width: `${slideWidth}px`,
-  transform: `translate(-50%, -50%) scale(${scale.value})`,
+  'height': `${slideHeight}px`,
+  'width': `${slideWidth}px`,
+  'transform': `translate(-50%, -50%) scale(${scale.value})`,
+  '--slidev-slide-scale': scale.value,
 }))
 
 const className = computed(() => ({
@@ -64,7 +65,7 @@ if (props.isMain) {
   `))
 }
 
-provide(injectionSlideScale, scale as any)
+provideLocal(injectionSlideScale, scale as any)
 </script>
 
 <template>

package/internals/SlideWrapper.ts

@@ -1,6 +1,8 @@
-import { defineComponent, h, provide, ref, toRef } from 'vue'
+import { computed, defineComponent, h, ref, toRef } from 'vue'
 import type { PropType } from 'vue'
+import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext } from '@slidev/types'
+import type { RouteRecordRaw } from 'vue-router'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
 
 export default defineComponent({
@@ -20,23 +22,37 @@ export default defineComponent({
     },
     is: {
       type: Object,
-      default: undefined,
+      required: true,
     },
     route: {
-      type: Object,
-      default: undefined,
+      type: Object as PropType<RouteRecordRaw>,
+      required: true,
     },
   },
   setup(props) {
-    provide(injectionRoute, props.route as any)
-    provide(injectionCurrentPage, ref(+props.route?.path))
-    provide(injectionRenderContext, ref(props.renderContext as RenderContext))
-    provide(injectionActive, toRef(props, 'active'))
-    provide(injectionClicksContext, toRef(props, 'clicksContext'))
+    provideLocal(injectionRoute, props.route)
+    provideLocal(injectionCurrentPage, ref(+props.route.path))
+    provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
+    provideLocal(injectionActive, toRef(props, 'active'))
+    provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
+
+    const style = computed(() => {
+      const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
+      return zoom === 1
+        ? undefined
+        : {
+            width: `${100 / zoom}%`,
+            height: `${100 / zoom}%`,
+            transformOrigin: 'top left',
+            transform: `scale(${zoom})`,
+          }
+    })
+
+    return {
+      style,
+    }
   },
   render() {
-    if (this.$props.is)
-      return h(this.$props.is)
-    return this.$slots?.default?.()
+    return h(this.$props.is, { style: this.style })
   },
 })

package/internals/SlidesOverview.vue

@@ -14,7 +14,7 @@ import IconButton from './IconButton.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
 
-const emit = defineEmits([])
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
 function close() {
@@ -112,7 +112,7 @@ watchEffect(() => {
   >
     <div
       v-show="value"
-      class="bg-main !bg-opacity-75 p-16 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
+      class="bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
       @click="close()"
     >
       <div
@@ -125,8 +125,8 @@ watchEffect(() => {
           class="relative"
         >
           <div
-            class="inline-block border rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary transition"
-            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-$slidev-theme-primary' : 'border-gray-400'"
+            class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
+            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
             :style="themeVars"
             @click="go(+route.path)"
           >
@@ -163,7 +163,18 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <IconButton v-if="value" title="Close" class="fixed text-2xl top-4 right-4 text-gray-400" @click="close">
-    <carbon:close />
-  </IconButton>
+  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex items-center gap-4">
+    <RouterLink
+      v-if="__DEV__"
+      target="_blank"
+      to="/overview"
+      tab-index="-1"
+      class="border-main border px3 py1 rounded hover:bg-gray/5 hover:text-primary"
+    >
+      List overview
+    </RouterLink>
+    <IconButton title="Close" class="text-2xl" @click="close">
+      <carbon:close />
+    </IconButton>
+  </div>
 </template>

package/logic/drawings.ts

@@ -4,6 +4,7 @@ import { createDrauu } from 'drauu'
 import { toReactive, useLocalStorage } from '@vueuse/core'
 import { drawingState, onPatch, patch } from '../state/drawings'
 import { configs } from '../env'
+import { isInputting } from '../state'
 import { currentPage, isPresenter } from './nav'
 
 export const brushColors = [
@@ -40,11 +41,13 @@ export const drawingMode = computed({
   set(v: DrawingMode | 'arrow') {
     _mode.value = v
     if (v === 'arrow') {
-      brush.mode = 'line'
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = 'line'
       brush.arrowEnd = true
     }
     else {
-      brush.mode = v
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = v
       brush.arrowEnd = false
     }
   },
@@ -110,7 +113,7 @@ drauu.on('start', () => isDrawing.value = true)
 drauu.on('end', () => isDrawing.value = false)
 
 window.addEventListener('keydown', (e) => {
-  if (!drawingEnabled.value)
+  if (!drawingEnabled.value || isInputting.value)
     return
 
   const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey

package/logic/nav.ts

@@ -177,7 +177,7 @@ export async function downloadPDF() {
 export async function openInEditor(url?: string) {
   if (url == null) {
     const slide = currentRoute.value?.meta?.slide
-    if (!slide?.filepath)
+    if (!slide)
       return false
     url = `${slide.filepath}:${slide.start}`
   }

package/logic/note.ts

@@ -2,17 +2,17 @@ import type { MaybeRef } from '@vueuse/core'
 import { useFetch } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, ref, unref } from 'vue'
-import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
+import type { SlideInfo, SlidePatch } from '@slidev/types'
 
 export interface UseSlideInfo {
-  info: Ref<SlideInfoExtended | undefined>
-  update: (data: Partial<SlideInfo>) => Promise<SlideInfoExtended | void>
+  info: Ref<SlideInfo | undefined>
+  update: (data: SlidePatch) => Promise<SlideInfo | void>
 }
 
 export function useSlideInfo(id: number | undefined): UseSlideInfo {
   if (id == null) {
     return {
-      info: ref() as Ref<SlideInfoExtended | undefined>,
+      info: ref() as Ref<SlideInfo | undefined>,
       update: async () => {},
     }
   }
@@ -21,7 +21,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
 
   execute()
 
-  const update = async (data: Partial<SlideInfo>) => {
+  const update = async (data: SlidePatch) => {
     return await fetch(
       url,
       {
@@ -41,7 +41,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
         info.value = payload.data
     })
     import.meta.hot?.on('slidev-update-note', (payload) => {
-      if (payload.id === id && info.value.note.trim() !== payload.note.trim())
+      if (payload.id === id && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })
   }
@@ -64,7 +64,7 @@ export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
 
   return {
     info: computed(() => get(unref(id)).info.value),
-    update: async (data: Partial<SlideInfo>, newId?: number) => {
+    update: async (data: SlidePatch, newId?: number) => {
       const info = get(newId ?? unref(id))
       const newData = await info.update(data)
       if (newData)

package/main.ts

@@ -3,15 +3,17 @@ import { createHead } from '@unhead/vue'
 import App from './App.vue'
 import setupMain from './setup/main'
 import { router } from './routes'
-import createDirectives from './modules/directives'
-import createSlidevContext from './modules/context'
+import { createVClickDirectives } from './modules/v-click'
+import { createVMarkDirective } from './modules/v-mark'
+import { createSlidevContext } from './modules/context'
 
 import '/@slidev/styles'
 
 const app = createApp(App)
 app.use(router)
 app.use(createHead())
-app.use(createDirectives())
+app.use(createVClickDirectives())
+app.use(createVMarkDirective())
 app.use(createSlidevContext())
 
 setupMain({ app, router })

package/modules/context.ts

@@ -1,12 +1,12 @@
 import type { App } from 'vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import type { ComputedRef } from '@vue/reactivity'
 import type { configs } from '../env'
 import * as nav from '../logic/nav'
 import { route } from '../logic/nav'
 import { isDark } from '../logic/dark'
-import { injectionCurrentPage, injectionSlidevContext } from '../constants'
+import { injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 
 export type SlidevContextNavKey = 'path' | 'total' | 'clicksContext' | 'clicks' | 'clicksTotal' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes' | 'go'
@@ -21,10 +21,11 @@ export interface SlidevContext {
   themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
 
-export default function createSlidevContext() {
+export function createSlidevContext() {
   return {
     install(app: App) {
       const context = reactive(useContext(route))
+      app.provide(injectionRenderContext, ref('none'))
       app.provide(injectionSlidevContext, context)
       app.provide(injectionCurrentPage, computed(() => context.nav.currentPage))
 

package/modules/{directives.ts → v-click.ts}

@@ -11,19 +11,21 @@ import {
   injectionClicksContext,
 } from '../constants'
 
-function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
+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 default function createDirectives() {
+export function createVClickDirectives() {
   return {
     install(app: App) {
-      app.directive('click', {
+      app.directive<HTMLElement, VClickValue>('click', {
         // @ts-expect-error extra prop
         name: 'v-click',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value)
           if (resolved == null)
             return
 
@@ -55,12 +57,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('after', {
+      app.directive<HTMLElement, VClickValue>('after', {
         // @ts-expect-error extra prop
         name: 'v-after',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -86,12 +88,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('click-hide', {
+      app.directive<HTMLElement, VClickValue>('click-hide', {
         // @ts-expect-error extra prop
         name: 'v-click-hide',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, false, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, false, true)
           if (resolved == null)
             return
 
@@ -127,14 +129,12 @@ function isCurrent(thisClick: number | [number, number], clicks: number) {
     : thisClick === clicks
 }
 
-function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VClickValue, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
   const ctx = dirInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx || ctx.disabled)
     return null
 
-  let value = dir.value
-
   if (value === false || value === 'false')
     return null
 
@@ -153,7 +153,7 @@ function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = fals
     // range (absolute)
     delta = 0
     thisClick = value as [number, number]
-    maxClick = value[1]
+    maxClick = +value[1]
   }
   else {
     ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))

package/modules/v-mark.ts

@@ -0,0 +1,159 @@
+import type { RoughAnnotationConfig } from '@slidev/rough-notation'
+import { annotate } from '@slidev/rough-notation'
+import type { App } from 'vue'
+import { computed, watchEffect } from 'vue'
+import type { VClickValue } from './v-click'
+import { resolveClick } from './v-click'
+
+export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {
+  at: VClickValue
+}
+
+export type RoughDirectiveValue = VClickValue | RoughDirectiveOptions
+
+function addClass(options: RoughDirectiveOptions, cls: string) {
+  options.class = [options.class, cls].filter(Boolean).join(' ')
+  return options
+}
+
+// Definitions of supported modifiers
+const vMarkModifiers: Record<string, (options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions> = {
+  // Types
+  'box': options => Object.assign(options, { type: 'box' }),
+  'circle': options => Object.assign(options, { type: 'circle' }),
+  'underline': options => Object.assign(options, { type: 'underline' }),
+  'highlight': options => Object.assign(options, { type: 'highlight' }),
+  'strike-through': options => Object.assign(options, { type: 'strike-through' }),
+  'crossed-off': options => Object.assign(options, { type: 'crossed-off' }),
+  'bracket': options => Object.assign(options, { type: 'bracket' }),
+
+  // Type Aliases
+  'strike': options => Object.assign(options, { type: 'strike-through' }),
+  'cross': options => Object.assign(options, { type: 'crossed-off' }),
+  'crossed': options => Object.assign(options, { type: 'crossed-off' }),
+  'linethrough': options => Object.assign(options, { type: 'strike-through' }),
+  'line-through': options => Object.assign(options, { type: 'strike-through' }),
+
+  // Colors
+  // @unocss-include
+  'black': options => addClass(options, 'text-black'),
+  'blue': options => addClass(options, 'text-blue'),
+  'cyan': options => addClass(options, 'text-cyan'),
+  'gray': options => addClass(options, 'text-gray'),
+  'green': options => addClass(options, 'text-green'),
+  'indigo': options => addClass(options, 'text-indigo'),
+  'lime': options => addClass(options, 'text-lime'),
+  'orange': options => addClass(options, 'text-orange'),
+  'pink': options => addClass(options, 'text-pink'),
+  'purple': options => addClass(options, 'text-purple'),
+  'red': options => addClass(options, 'text-red'),
+  'teal': options => addClass(options, 'text-teal'),
+  'white': options => addClass(options, 'text-white'),
+  'yellow': options => addClass(options, 'text-yellow'),
+}
+
+const vMarkModifiersDynamic: [RegExp, (match: RegExpMatchArray, options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions][] = [
+  // Support setting delay like `v-mark.delay300="1"`
+  [/^delay-?(\d+)?$/, (match, options, value) => {
+    const ms = (match[1] ? Number.parseInt(match[1]) : value) || 300
+    options.delay = ms
+    return options
+  }],
+  // Support setting opacity like `v-mark.op50="1"`
+  [/^(?:op|opacity)-?(\d+)?$/, (match, options, value) => {
+    const opacity = (match[1] ? Number.parseInt(match[1]) : value) || 100
+    options.opacity = opacity / 100
+    return options
+  }],
+]
+
+/**
+ * This supports v-mark directive to add notations to elements, powered by `rough-notation`.
+ */
+export function createVMarkDirective() {
+  return {
+    install(app: App) {
+      app.directive<HTMLElement, RoughDirectiveValue>('mark', {
+        // @ts-expect-error extra prop
+        name: 'v-mark',
+
+        mounted: (el, binding) => {
+          const options = computed(() => {
+            const bindingOptions = (typeof binding.value === 'object' && !Array.isArray(binding.value))
+              ? { ...binding.value }
+              : { at: binding.value }
+
+            let modifierOptions: RoughDirectiveOptions = { at: bindingOptions.at }
+            const unknownModifiers = Object.entries(binding.modifiers)
+              .filter(([k, v]) => {
+                if (vMarkModifiers[k]) {
+                  modifierOptions = vMarkModifiers[k](modifierOptions, v)
+                  return false
+                }
+                for (const [re, fn] of vMarkModifiersDynamic) {
+                  const match = k.match(re)
+                  if (match) {
+                    modifierOptions = fn(match, modifierOptions, v)
+                    return false
+                  }
+                }
+                return true
+              })
+
+            if (unknownModifiers.length)
+              console.warn('[Slidev] Invalid modifiers for v-mark:', unknownModifiers)
+
+            const options = {
+              ...modifierOptions,
+              ...bindingOptions,
+            }
+            options.type ||= 'underline'
+
+            return options
+          })
+
+          const annotation = annotate(el, options.value as RoughAnnotationConfig)
+
+          const resolvedClick = resolveClick(el, binding, options.value.at)
+          if (!resolvedClick) {
+            console.error('[Slidev] Invalid value for v-mark:', options.value.at)
+            return
+          }
+
+          watchEffect(() => {
+            let shouldShow: boolean | undefined
+
+            if (options.value.class)
+              annotation.class = options.value.class
+            if (options.value.color)
+              annotation.color = options.value.color
+
+            const at = options.value.at
+
+            if (at === true) {
+              shouldShow = true
+            }
+            else if (at === false) {
+              shouldShow = false
+            }
+            else if (resolvedClick) {
+              shouldShow = resolvedClick.isActive.value
+            }
+            else {
+              console.error('[Slidev] Invalid value for v-mark:', at)
+              return
+            }
+
+            if (shouldShow == null)
+              return
+
+            if (shouldShow)
+              annotation.show()
+            else
+              annotation.hide()
+          })
+        },
+      })
+    },
+  }
+}