@slidev/client 0.48.9 → 0.49.0-beta.2

package/builtin/CodeBlockWrapper.vue

@@ -63,10 +63,10 @@ onMounted(() => {
   if (!clicks || !props.ranges?.length)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
-  clicks.register(id, { max: end, delta })
+  const clicksInfo = clicks.calculateSince(props.at, props.ranges.length - 1)
+  clicks.register(id, clicksInfo)
 
-  const index = computed(() => Math.max(0, clicks.current - start + 1))
+  const index = computed(() => Math.max(0, clicks.current - clicksInfo.start + 1))
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/KaTexBlockWrapper.vue

@@ -58,10 +58,10 @@ onMounted(() => {
   if (!clicks || !props.ranges?.length)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
-  clicks.register(id, { max: end, delta })
+  const clicksInfo = clicks.calculateSince(props.at, props.ranges.length - 1)
+  clicks.register(id, clicksInfo)
 
-  const index = computed(() => Math.max(0, clicks.current - start + 1))
+  const index = computed(() => Math.max(0, clicks.current - clicksInfo.start + 1))
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/Monaco.vue

@@ -16,6 +16,7 @@ import { debounce } from '@antfu/utils'
 import lz from 'lz-string'
 import type * as monaco from 'monaco-editor'
 import { computed, nextTick, onMounted, ref } from 'vue'
+import type { RawAtValue } from '@slidev/types'
 import { makeId } from '../logic/utils'
 import CodeRunner from '../internals/CodeRunner.vue'
 
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<{
   ata?: boolean
   runnable?: boolean
   autorun?: boolean | 'once'
+  showOutputAt?: RawAtValue
   outputHeight?: string
   highlightOutput?: boolean
   runnerOptions?: Record<string, unknown>
@@ -165,6 +167,7 @@ onMounted(async () => {
       v-model="code"
       :lang="lang"
       :autorun="props.autorun"
+      :show-output-at="props.showOutputAt"
       :height="props.outputHeight"
       :highlight-output="props.highlightOutput"
       :runner-options="props.runnerOptions"

package/builtin/ShikiMagicMove.vue

@@ -36,14 +36,14 @@ onMounted(() => {
     throw new Error('[slidev] The length of stepRanges does not match the length of steps, this is an internal error.')
 
   const clickCounts = ranges.value.map(s => s.length).reduce((a, b) => a + b, 0)
-  const { start, end, delta } = clicks.resolve(props.at ?? '+1', clickCounts - 1)
-  clicks.register(id, { max: end, delta })
+  const clickInfo = clicks.calculateSince(props.at ?? '+1', clickCounts - 1)
+  clicks.register(id, clickInfo)
 
   watch(
     () => clicks.current,
     () => {
       // Calculate the step and rangeStr based on the current click count
-      const clickCount = clicks.current - start
+      const clickCount = clicks.current - clickInfo.start
       let step = steps.length - 1
       let currentClickSum = 0
       let rangeStr = 'all'

package/builtin/SlidevVideo.vue

@@ -1,86 +1,74 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { and } from '@vueuse/math'
 import { useSlideContext } from '../context'
+import { resolvedClickMap } from '../modules/v-click'
+import { useNav } from '../composables/useNav'
 
 const props = defineProps<{
-  autoPlay?: boolean | 'once' | 'resume' | 'resumeOnce'
-  autoPause?: 'slide' | 'click'
-  autoReset?: 'slide' | 'click'
+  autoplay?: boolean | 'once'
+  autoreset?: 'slide' | 'click'
+  poster?: string
+  printPoster?: string
+  timestamp?: string | number
+  printTimestamp?: string | number | 'last'
+  controls?: boolean
 }>()
 
-const {
-  $slidev,
-  $clicksContext: clicks,
-  $renderContext: currentContext,
-  $route: route,
-} = useSlideContext()
+const printPoster = computed(() => props.printPoster ?? props.poster)
+const printTimestamp = computed(() => props.printTimestamp ?? props.timestamp ?? 0)
 
-const video = ref<HTMLMediaElement>()
-const played = ref(false)
-const ended = ref(false)
-
-const matchRoute = computed(() => {
-  if (!video.value || currentContext?.value !== 'slide')
-    return false
-  return route && route.no === $slidev?.nav.currentSlideNo
-})
-
-const matchClick = computed(() => {
-  if (!video.value || currentContext?.value !== 'slide' || !clicks)
-    return false
-  return clicks.map.get(video.value)?.isShown?.value ?? true
-})
+const { $slidev, $renderContext, $route } = useSlideContext()
+const { isPrintMode } = useNav()
 
-const matchRouteAndClick = computed(() => matchRoute.value && matchClick.value)
+const noPlay = computed(() => isPrintMode.value || !['slide', 'presenter'].includes($renderContext.value))
 
-watch(matchRouteAndClick, () => {
-  if (!video.value || currentContext?.value !== 'slide')
-    return
-
-  if (matchRouteAndClick.value) {
-    if (props.autoReset === 'click')
-      video.value.currentTime = 0
-    if (props.autoPlay && (!played.value || props.autoPlay === 'resume' || (props.autoPlay === 'resumeOnce' && !ended.value)))
-      video.value.play()
-  }
-
-  if ((props.autoPause === 'click' && !matchRouteAndClick.value) || (props.autoPause === 'slide' && !matchRoute.value))
-    video.value.pause()
-})
+const video = ref<HTMLMediaElement>()
+const played = ref(false)
 
-watch(matchRoute, () => {
-  if (!video.value || currentContext?.value !== 'slide')
+onMounted(() => {
+  if (noPlay.value)
     return
 
-  if (matchRoute.value && props.autoReset === 'slide')
-    video.value.currentTime = 0
+  const timestamp = +(props.timestamp ?? 0)
+  video.value!.currentTime = timestamp
+
+  const matchRoute = computed(() => !!$route && $route.no === $slidev?.nav.currentSlideNo)
+  const matchClick = computed(() => !!video.value && (resolvedClickMap.get(video.value)?.isShown?.value ?? true))
+  const matchRouteAndClick = and(matchRoute, matchClick)
+
+  watch(matchRouteAndClick, () => {
+    if (matchRouteAndClick.value) {
+      if (props.autoplay === true || (props.autoplay === 'once' && !played.value))
+        video.value!.play()
+    }
+    else {
+      video.value!.pause()
+      if (props.autoreset === 'click' || (props.autoreset === 'slide' && !matchRoute.value))
+        video.value!.currentTime = timestamp
+    }
+  }, { immediate: true })
 })
 
-function onPlay() {
-  played.value = true
-}
-
-function onEnded() {
-  ended.value = true
+function onLoadedMetadata(ev: Event) {
+  // The video may be loaded before component mounted
+  const element = ev.target as HTMLMediaElement
+  if (noPlay.value && (!printPoster.value || props.printTimestamp)) {
+    element.currentTime = printTimestamp.value === 'last'
+      ? element.duration
+      : +printTimestamp.value
+  }
 }
-
-onMounted(() => {
-  if (!video.value || currentContext?.value !== 'slide')
-    return
-  video.value?.addEventListener('play', onPlay)
-  video.value?.addEventListener('ended', onEnded)
-})
-
-onUnmounted(() => {
-  if (!video.value || currentContext?.value !== 'slide')
-    return
-  video.value?.removeEventListener('play', onPlay)
-  video.value?.removeEventListener('ended', onEnded)
-})
 </script>
 
 <template>
-  <video ref="video">
+  <video
+    ref="video"
+    :poster="noPlay ? printPoster : props.poster"
+    :controls="!noPlay && props.controls"
+    @play="played = true"
+    @loadedmetadata="onLoadedMetadata"
+  >
     <slot />
   </video>
 </template>

package/builtin/VClicks.ts

@@ -7,7 +7,7 @@
 import { toArray } from '@antfu/utils'
 import type { VNode, VNodeArrayChildren } from 'vue'
 import { Comment, createVNode, defineComponent, h, isVNode, resolveDirective, withDirectives } from 'vue'
-import { normalizeAtProp } from '../logic/utils'
+import { normalizeAtValue } from '../composables/useClicks'
 import VClickGap from './VClickGap.vue'
 
 const listTags = ['ul', 'ol']
@@ -37,7 +37,12 @@ export default defineComponent({
   },
   render() {
     const every = +this.every
-    const [isRelative, at] = normalizeAtProp(this.at)
+    const at = normalizeAtValue(this.at)
+    const isRelative = typeof at === 'string'
+    if (typeof at !== 'string' && typeof at !== 'number') {
+      console.warn('[slidev] Invalid at prop for v-clicks component:', at)
+      return
+    }
 
     const click = resolveDirective('click')!
 

package/builtin/VDrag.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import type { DragElementMarkdownSource } from '../composables/useDragElements'
+import { useDragElement } from '../composables/useDragElements'
+
+const props = defineProps<{
+  pos?: string
+  markdownSource?: DragElementMarkdownSource
+}>()
+
+const { id, container, containerStyle, mounted, unmounted, startDragging } = useDragElement(null, props.pos, props.markdownSource)
+
+onMounted(mounted)
+onUnmounted(unmounted)
+</script>
+
+<template>
+  <div
+    ref="container"
+    :data-drag-id="id"
+    :style="containerStyle"
+    class="p-1"
+    @dblclick="startDragging"
+  >
+    <slot />
+  </div>
+</template>

package/composables/useClicks.ts

@@ -1,67 +1,115 @@
 import { clamp, sum } from '@antfu/utils'
-import type { ClicksContext, SlideRoute } from '@slidev/types'
+import type { ClicksContext, NormalizedAtValue, RawAtValue, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
-import { ref, shallowReactive } from 'vue'
-import { normalizeAtProp } from '../logic/utils'
+import { computed, ref, shallowReactive } from 'vue'
 import { routeForceRefresh } from '../logic/route'
 
+export function normalizeAtValue(at: RawAtValue): NormalizedAtValue {
+  if (at === false || at === 'false')
+    return null
+  if (at == null || at === true || at === 'true')
+    return '+1'
+  if (Array.isArray(at))
+    return [+at[0], +at[1]]
+  if (typeof at === 'string' && '+-'.includes(at[0]))
+    return at
+  return +at
+}
+
 export function createClicksContextBase(
   current: Ref<number>,
   clicksStart = 0,
   clicksTotalOverrides?: number,
 ): ClicksContext {
-  const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
-  const map: ClicksContext['map'] = shallowReactive(new Map())
-
-  return {
+  const context: ClicksContext = {
     get current() {
       // Here we haven't know clicksTotal yet.
-      return clamp(+current.value, clicksStart, this.total)
+      return clamp(+current.value, clicksStart, context.total)
     },
     set current(value) {
-      current.value = clamp(+value, clicksStart, this.total)
+      current.value = clamp(+value, clicksStart, context.total)
     },
     clicksStart,
-    relativeOffsets,
-    map,
+    relativeOffsets: new Map(),
+    maxMap: shallowReactive(new Map()),
     onMounted() { },
-    resolve(at, size = 1) {
-      const [isRelative, value] = normalizeAtProp(at)
-      if (isRelative) {
-        const offset = this.currentOffset
-        return {
-          start: offset + value,
-          end: offset + value + size - 1,
-          delta: value + size - 1,
-        }
+    calculateSince(at, size = 1) {
+      let start: number, max: number, delta: number
+      if (typeof at === 'string') {
+        const offset = context.currentOffset
+        const value = +at
+        start = offset + value
+        max = offset + value + size - 1
+        delta = value + size - 1
       }
       else {
-        return {
-          start: value,
-          end: value + size - 1,
-          delta: 0,
-        }
+        start = at
+        max = at + size - 1
+        delta = 0
+      }
+      return {
+        start,
+        end: +Number.POSITIVE_INFINITY,
+        max,
+        delta,
+        isCurrent: computed(() => context.current === start),
+        isActive: computed(() => context.current >= start),
       }
     },
-    register(el, resolved) {
-      relativeOffsets.set(el, resolved.delta)
-      map.set(el, resolved)
+    calculateRange([a, b]) {
+      let start: number, end: number, delta: number
+      if (typeof a === 'string') {
+        const offset = context.currentOffset
+        start = offset + +a
+        delta = +a
+      }
+      else {
+        start = a
+        delta = 0
+      }
+      if (typeof b === 'string') {
+        end = start + +b
+        delta += +b
+      }
+      else {
+        end = b
+      }
+      return {
+        start,
+        end,
+        max: end,
+        delta,
+        isCurrent: computed(() => context.current === start),
+        isActive: computed(() => start <= context.current && context.current < end),
+      }
+    },
+    calculate(at) {
+      if (at == null)
+        return null
+      if (Array.isArray(at))
+        return context.calculateRange(at)
+      return context.calculateSince(at)
+    },
+    register(el, { delta, max }) {
+      context.relativeOffsets.set(el, delta)
+      context.maxMap.set(el, max)
     },
     unregister(el) {
-      relativeOffsets.delete(el)
-      map.delete(el)
+      context.relativeOffsets.delete(el)
+      context.maxMap.delete(el)
     },
     get currentOffset() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return sum(...relativeOffsets.values())
+      return sum(...context.relativeOffsets.values())
     },
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return clicksTotalOverrides ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
+      return clicksTotalOverrides ?? Math.max(0, ...context.maxMap.values())
     },
   }
+  return context
 }
 
 export function createFixedClicks(