@slidev/client 0.49.0-beta.4 → 0.49.0-beta.6

package/builtin/CodeBlockWrapper.vue

@@ -17,7 +17,7 @@ import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { configs } from '../env'
 import { makeId, updateCodeHighlightRange } from '../logic/utils'
-import { CLASS_VCLICK_HIDDEN } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'
 
 const props = defineProps({
@@ -66,7 +66,7 @@ onMounted(() => {
   const clicksInfo = clicks.calculateSince(props.at, props.ranges.length - 1)
   clicks.register(id, clicksInfo)
 
-  const index = computed(() => Math.max(0, clicks.current - clicksInfo.start + 1))
+  const index = computed(() => clicksInfo ? Math.max(0, clicks.current - clicksInfo.start + 1) : CLICKS_MAX)
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/KaTexBlockWrapper.vue

@@ -23,7 +23,7 @@ Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { parseRangeString } from '@slidev/parser'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
 import { makeId } from '../logic/utils'
 import { useSlideContext } from '../context'
 
@@ -61,7 +61,7 @@ onMounted(() => {
   const clicksInfo = clicks.calculateSince(props.at, props.ranges.length - 1)
   clicks.register(id, clicksInfo)
 
-  const index = computed(() => Math.max(0, clicks.current - clicksInfo.start + 1))
+  const index = computed(() => clicksInfo ? Math.max(0, clicks.current - clicksInfo.start + 1) : CLICKS_MAX)
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/ShikiMagicMove.vue

@@ -6,6 +6,7 @@ import lz from 'lz-string'
 import { useSlideContext } from '../context'
 import { makeId, updateCodeHighlightRange } from '../logic/utils'
 import { useNav } from '../composables/useNav'
+import { CLICKS_MAX } from '../constants'
 
 const props = defineProps<{
   at?: string | number
@@ -43,7 +44,7 @@ onMounted(() => {
     () => clicks.current,
     () => {
       // Calculate the step and rangeStr based on the current click count
-      const clickCount = clicks.current - clickInfo.start
+      const clickCount = clickInfo ? clicks.current - clickInfo.start : CLICKS_MAX
       let step = steps.length - 1
       let currentClickSum = 0
       let rangeStr = 'all'

package/builtin/VClickGap.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Fragment, onMounted, watchEffect } from 'vue'
+import { Fragment, onMounted, onUnmounted } from 'vue'
 import { makeId } from '../logic/utils'
 import { useSlideContext } from '../context'
 
@@ -11,23 +11,21 @@ const props = defineProps({
 })
 
 const { $clicksContext: clicks } = useSlideContext()
+const id = makeId()
 
-onMounted(() => {
-  watchEffect((onCleanup) => {
-    if (!clicks)
-      return
+let delta = +props.size
+if (Number.isNaN(delta)) {
+  console.warn(`[slidev] Invalid size for VClickGap: ${props.size}`)
+  delta = 1
+}
 
-    let delta = +props.size
-    if (Number.isNaN(delta)) {
-      console.warn(`[slidev] Invalid size for VClickGap: ${props.size}`)
-      delta = 1
-    }
-    const max = clicks.currentOffset + delta - 1
+onMounted(() => {
+  const max = clicks.currentOffset + delta - 1
+  clicks.register(id, { max, delta })
+})
 
-    const id = makeId()
-    clicks.register(id, { max, delta })
-    onCleanup(() => clicks.unregister(id))
-  })
+onUnmounted(() => {
+  clicks.unregister(id)
 })
 </script>
 

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 { normalizeAtValue } from '../composables/useClicks'
+import { normalizeSingleAtValue } from '../composables/useClicks'
 import VClickGap from './VClickGap.vue'
 
 const listTags = ['ul', 'ol']
@@ -37,9 +37,9 @@ export default defineComponent({
   },
   render() {
     const every = +this.every
-    const at = normalizeAtValue(this.at)
+    const at = normalizeSingleAtValue(this.at)
     const isRelative = typeof at === 'string'
-    if (typeof at !== 'string' && typeof at !== 'number') {
+    if (!at) {
       console.warn('[slidev] Invalid at prop for v-clicks component:', at)
       return
     }

package/builtin/VSwitch.ts

@@ -0,0 +1,114 @@
+import type { PropType, Ref, Slot, TransitionGroupProps, VNode } from 'vue'
+import { TransitionGroup, defineComponent, h, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { recomputeAllPoppers } from 'floating-vue'
+import { useSlideContext } from '../context'
+import { makeId } from '../logic/utils'
+import { resolveTransition } from '../logic/transition'
+import { skipTransition } from '../logic/hmr'
+import { CLASS_VCLICK_CURRENT, CLASS_VCLICK_DISPLAY_NONE, CLASS_VCLICK_PRIOR, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
+
+export default defineComponent({
+  props: {
+    at: {
+      type: [Number, String],
+      default: '+1',
+    },
+    /**
+     * unmount or hide the content when it's not visible
+     */
+    unmount: {
+      type: Boolean,
+      default: false,
+    },
+    transition: {
+      type: [Object, String, Boolean] as PropType<TransitionGroupProps | string | false>,
+      default: false,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    childTag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  setup({ at, unmount, transition, tag, childTag }, { slots }) {
+    const slotEntries = Object.entries(slots).sort((a, b) => -a[0].split('-')[0] + +b[0].split('-')[0])
+    const contents: [start: number, end: number, slot: Slot<any> | undefined, elRef: Ref<HTMLElement | undefined>][] = []
+
+    let lastStart: number | undefined
+    for (const [range, slot] of slotEntries) {
+      const elRef = ref<HTMLElement>()
+      if (Number.isFinite(+range)) {
+        contents.push([+range, lastStart ?? +range + 1, slot, elRef])
+        lastStart = +range
+      }
+      else {
+        const [start, end] = range.split('-').map(Number)
+        if (!Number.isFinite(start) || !Number.isFinite(end))
+          throw new Error(`Invalid range for v-switch: ${range}`)
+        contents.push([start, end, slot, elRef])
+        lastStart = start
+      }
+    }
+
+    const size = Math.max(...contents.map(c => c[1])) - 1
+    const id = makeId()
+    const offset = ref(0)
+
+    const { $clicksContext: clicks, $nav: nav } = useSlideContext()
+
+    onMounted(() => {
+      const clicksInfo = clicks.calculateSince(at, size)
+      if (!clicksInfo) {
+        offset.value = CLICKS_MAX
+        return
+      }
+      clicks.register(id, clicksInfo)
+      watchEffect(() => {
+        offset.value = clicksInfo.currentOffset.value + 1
+      })
+    })
+
+    onUnmounted(() => {
+      clicks.unregister(id)
+    })
+
+    function onAfterLeave() {
+      // Refer to SlidesShow.vue
+      skipTransition.value = true
+      recomputeAllPoppers()
+    }
+    const transitionProps = transition && {
+      ...resolveTransition(transition, nav.value.navDirection < 0),
+      tag,
+      onAfterLeave,
+    }
+
+    return () => {
+      const children: VNode[] = []
+      for (let i = contents.length - 1; i >= 0; i--) {
+        const [start, end, slot, ref] = contents[i]
+        const visible = start <= offset.value && offset.value < end
+        if (unmount && !visible)
+          continue
+        children.push(h(childTag, {
+          'key': i,
+          ref,
+          'class': [
+            CLASS_VCLICK_TARGET,
+            offset.value === start && CLASS_VCLICK_CURRENT,
+            offset.value >= end && CLASS_VCLICK_PRIOR,
+            !visible && CLASS_VCLICK_DISPLAY_NONE,
+          ].filter(Boolean),
+          'data-slidev-clicks-start': start,
+          'data-slidev-clicks-end': end,
+        }, slot?.()))
+      }
+      return transitionProps
+        ? h(TransitionGroup, skipTransition.value ? {} : transitionProps, () => children)
+        : h(tag, children)
+    }
+  },
+})

package/composables/useClicks.ts

@@ -1,19 +1,28 @@
 import { clamp, sum } from '@antfu/utils'
-import type { ClicksContext, NormalizedAtValue, RawAtValue, SlideRoute } from '@slidev/types'
+import type { ClicksContext, NormalizedRangeClickValue, NormalizedSingleClickValue, RawAtValue, RawSingleAtValue, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
 import { computed, ref, shallowReactive } from 'vue'
 import { routeForceRefresh } from '../logic/route'
 
-export function normalizeAtValue(at: RawAtValue): NormalizedAtValue {
+export function normalizeSingleAtValue(at: RawSingleAtValue): NormalizedSingleClickValue {
   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
+  const v = +at
+  if (Number.isNaN(v)) {
+    console.error(`Invalid "at" prop value: ${at}`)
+    return null
+  }
+  return v
+}
+
+export function normalizeRangeAtValue(at: RawAtValue): NormalizedRangeClickValue {
+  if (Array.isArray(at))
+    return [normalizeSingleAtValue(at[0])!, normalizeSingleAtValue(at[1])!]
+  return null
 }
 
 export function createClicksContextBase(
@@ -33,7 +42,10 @@ export function createClicksContextBase(
     relativeOffsets: new Map(),
     maxMap: shallowReactive(new Map()),
     onMounted() { },
-    calculateSince(at, size = 1) {
+    calculateSince(rawAt, size = 1) {
+      const at = normalizeSingleAtValue(rawAt)
+      if (at == null)
+        return null
       let start: number, max: number, delta: number
       if (typeof at === 'string') {
         const offset = context.currentOffset
@@ -52,11 +64,16 @@ export function createClicksContextBase(
         end: +Number.POSITIVE_INFINITY,
         max,
         delta,
+        currentOffset: computed(() => context.current - start),
         isCurrent: computed(() => context.current === start),
         isActive: computed(() => context.current >= start),
       }
     },
-    calculateRange([a, b]) {
+    calculateRange(rawAt) {
+      const at = normalizeRangeAtValue(rawAt)
+      if (at == null)
+        return null
+      const [a, b] = at
       let start: number, end: number, delta: number
       if (typeof a === 'string') {
         const offset = context.currentOffset
@@ -79,18 +96,20 @@ export function createClicksContextBase(
         end,
         max: end,
         delta,
+        currentOffset: computed(() => context.current - start),
         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 }) {
+    register(el, info) {
+      if (!info)
+        return
+      const { delta, max } = info
       context.relativeOffsets.set(el, delta)
       context.maxMap.set(el, max)
     },

package/composables/useNav.ts

@@ -55,7 +55,7 @@ export interface SlidevContextNav {
   /** Go to previous slide */
   prevSlide: (lastClicks?: boolean) => Promise<void>
   /** Go to slide */
-  go: (page: number | string, clicks?: number) => Promise<void>
+  go: (page: number | string, clicks?: number, force?: boolean) => Promise<void>
   /** Go to the first slide */
   goFirst: () => Promise<void>
   /** Go to the last slide */
@@ -181,14 +181,14 @@ export function useNavBase(
     return go(total.value)
   }
 
-  async function go(page: number | string, clicks: number = 0) {
+  async function go(page: number | string, clicks: number = 0, force = false) {
     skipTransition.value = false
     const pageChanged = currentSlideNo.value !== page
     const clicksChanged = clicks !== queryClicks.value
     const meta = getSlide(page)?.meta
     const clicksStart = meta?.slide?.frontmatter.clicksStart ?? 0
     clicks = clamp(clicks, clicksStart, meta?.__clicksContext?.total ?? CLICKS_MAX)
-    if (pageChanged || clicksChanged) {
+    if (force || pageChanged || clicksChanged) {
       await router?.push({
         path: getSlidePath(page, isPresenter.value),
         query: {
@@ -301,6 +301,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
       return v
     },
     set(v) {
+      skipTransition.value = false
       queryClicksRaw.value = v.toString()
     },
   })
@@ -379,9 +380,16 @@ export const useNav = createSharedComposable((): SlidevContextNavFull => {
   watch(
     [nav.total, state.currentRoute],
     async () => {
-      if (state.hasPrimarySlide.value && !getSlide(state.currentRoute.value.params.no as string)) {
-        // The current slide may has been removed. Redirect to the last slide.
-        await nav.goLast()
+      const no = state.currentRoute.value.params.no as string
+      if (state.hasPrimarySlide.value && !getSlide(no)) {
+        if (no && no !== 'index.html') {
+          // The current slide may has been removed. Redirect to the last slide.
+          await nav.go(nav.total.value, 0, true)
+        }
+        else {
+          // Redirect to the first slide
+          await nav.go(1, 0, true)
+        }
       }
     },
     { flush: 'pre', immediate: true },

package/constants.ts

@@ -11,7 +11,6 @@ export const injectionSlideScale = '$$slidev-slide-scale' as unknown as Injectio
 export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
 export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<SlideRoute>
 export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
-export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
 export const injectionSlideZoom = '$$slidev-slide-zoom' as unknown as InjectionKey<ComputedRef<number>>
 
@@ -22,6 +21,7 @@ export const CLASS_VCLICK_GONE = 'slidev-vclick-gone'
 export const CLASS_VCLICK_HIDDEN_EXP = 'slidev-vclick-hidden-explicitly'
 export const CLASS_VCLICK_CURRENT = 'slidev-vclick-current'
 export const CLASS_VCLICK_PRIOR = 'slidev-vclick-prior'
+export const CLASS_VCLICK_DISPLAY_NONE = 'slidev-vclick-display-none'
 
 export const CLICKS_MAX = 999999
 

package/env.ts

@@ -16,3 +16,5 @@ export const slideHeight = computed(() => Math.ceil(slideWidth.value / slideAspe
 export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])
 })
+
+export const slidesTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')

package/internals/CodeRunner.vue

@@ -7,7 +7,6 @@ import { useSlideContext } from '../context'
 import setupCodeRunners from '../setup/code-runners'
 import { useNav } from '../composables/useNav'
 import { makeId } from '../logic/utils'
-import { normalizeAtValue } from '../composables/useClicks'
 import IconButton from './IconButton.vue'
 import DomElement from './DomElement.vue'
 
@@ -40,8 +39,7 @@ const hidden = ref(props.showOutputAt)
 if (props.showOutputAt) {
   const id = makeId()
   onMounted(() => {
-    const at = normalizeAtValue(props.showOutputAt)
-    const info = $clicksContext.calculate(at)
+    const info = $clicksContext.calculate(props.showOutputAt)
     if (info) {
       $clicksContext.register(id, info)
       watchSyncEffect(() => {

package/internals/Controls.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
+import { showInfoDialog, showRecordingDialog } from '../state'
 import { configs } from '../env'
+import { useNav } from '../composables/useNav'
 import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
 import ContextMenu from './ContextMenu.vue'
 
+const { isEmbedded } = useNav()
+const drawingEnabled = __SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded.value
+const DrawingControls = shallowRef<any>()
+if (drawingEnabled)
+  import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
+
 const WebCamera = shallowRef<any>()
 const RecordingDialog = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__) {
@@ -16,7 +23,8 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
-  <QuickOverview v-model="showOverview" />
+  <DrawingControls v-if="drawingEnabled && DrawingControls" />
+  <QuickOverview />
   <Goto />
   <WebCamera v-if="WebCamera" />
   <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />

package/internals/DrawingControls.vue

@@ -136,4 +136,4 @@ function setBrushColor(color: typeof brush.color) {
 .v-popper--theme-menu .v-popper__arrow-inner {
   --uno: border-main;
 }
-</style>../composables/drawings
+</style>

package/internals/DrawingLayer.vue

@@ -25,4 +25,4 @@ onBeforeUnmount(() => {
     class="w-full h-full absolute top-0"
     :class="{ 'pointer-events-none': !drawingEnabled, 'touch-none': drawingEnabled }"
   />
-</template>../composables/drawings
+</template>

package/internals/DrawingPreview.vue

@@ -12,4 +12,4 @@ const { drawingState } = useDrawings()
     class="w-full h-full absolute top-0 pointer-events-none"
     v-html="drawingState[page]"
   />
-</template>../composables/drawings
+</template>

package/internals/NavControls.vue

@@ -53,10 +53,6 @@ const barStyle = computed(() => props.persist
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)
   import('./RecordingControls.vue').then(v => RecordingControls.value = v.default)
-
-const DrawingControls = shallowRef<any>()
-if (__SLIDEV_FEATURE_DRAWINGS__)
-  import('./DrawingControls.vue').then(v => DrawingControls.value = v.default)
 </script>
 
 <template>
@@ -179,4 +175,4 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       <CustomNavControls />
     </div>
   </nav>
-</template>../composables/drawings
+</template>

package/internals/NoteDisplay.vue

@@ -17,7 +17,7 @@ const emit = defineEmits<{
   (type: 'markerClick', e: MouseEvent, clicks: number): void
 }>()
 
-const withClicks = computed(() => props.clicksContext?.current != null && props.noteHtml?.includes('slidev-note-click-mark'))
+const withClicks = computed(() => props.clicksContext != null && props.noteHtml?.includes('slidev-note-click-mark'))
 const noteDisplay = ref<HTMLElement | null>(null)
 
 const CLASS_FADE = 'slidev-note-fade'

package/internals/QuickOverview.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useEventListener, useVModel } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
-import { getSlideClass } from '../utils'
 import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
 import SlideContainer from './SlideContainer.vue'
@@ -12,14 +11,10 @@ import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 
-const props = defineProps<{ modelValue: boolean }>()
-const emit = defineEmits(['update:modelValue'])
-const value = useVModel(props, 'modelValue', emit)
-
 const { currentSlideNo, go: goSlide, slides } = useNav()
 
 function close() {
-  value.value = false
+  showOverview.value = false
 }
 
 function go(page: number) {
@@ -117,10 +112,10 @@ setTimeout(() => {
     leave-to-class="opacity-0 scale-102 !backdrop-blur-0px"
   >
     <div
-      v-if="value || activeSlidesLoaded"
-      v-show="value"
-      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()"
+      v-if="showOverview || activeSlidesLoaded"
+      v-show="showOverview"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
+      @click="close"
     >
       <div
         class="grid gap-y-4 gap-x-8 w-full"
@@ -142,10 +137,7 @@ setTimeout(() => {
               class="pointer-events-none"
             >
               <SlideWrapper
-                :is="route.component"
-                v-if="route?.component"
                 :clicks-context="createFixedClicks(route, CLICKS_MAX)"
-                :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />
@@ -168,12 +160,12 @@ setTimeout(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex flex-col items-center gap-2">
+  <div v-if="showOverview" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
     <IconButton title="Close" class="text-2xl" @click="close">
       <carbon:close />
     </IconButton>
     <IconButton
-      v-if="__DEV__"
+      v-if="__SLIDEV_FEATURE_PRESENTER__"
       as="a"
       title="Slides Overview"
       target="_blank"

package/internals/Settings.vue

@@ -16,7 +16,7 @@ const items: SelectionItem<number>[] = [
 </script>
 
 <template>
-  <div class="text-sm">
+  <div class="text-sm select-none">
     <SelectList v-model="slideScale" title="Scale" :items="items" />
   </div>
 </template>