@slidev/client 0.48.1 → 0.48.3

package/builtin/CodeBlockWrapper.vue

@@ -60,17 +60,13 @@ watchEffect(() => {
 })
 
 onMounted(() => {
-  if (!clicks || clicks.disabled || !props.ranges?.length)
+  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 index = computed(() => {
-    if (clicks.disabled)
-      return props.ranges.length - 1
-    return Math.max(0, clicks.current - start + 1)
-  })
+  const index = computed(() => Math.max(0, clicks.current - start + 1))
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/KaTexBlockWrapper.vue

@@ -55,17 +55,13 @@ onUnmounted(() => {
 })
 
 onMounted(() => {
-  if (!clicks || clicks.disabled || !props.ranges?.length)
+  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 index = computed(() => {
-    if (clicks.disabled)
-      return props.ranges.length - 1
-    return Math.max(0, clicks.current - start + 1)
-  })
+  const index = computed(() => Math.max(0, clicks.current - start + 1))
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/RenderWhen.vue

@@ -3,8 +3,9 @@ import type { RenderContext } from '@slidev/types'
 import { computed, ref } from 'vue'
 import { useElementVisibility } from '@vueuse/core'
 import { useSlideContext } from '../context'
+import { useNav } from '../composables/useNav'
 
-type Context = 'main' | 'visible' | RenderContext
+type Context = 'main' | 'visible' | 'print' | RenderContext
 
 const props = defineProps<{
   context: Context | Context[]
@@ -17,6 +18,7 @@ const targetVisible = useElementVisibility(target)
 const needsDomWrapper = Array.isArray(context) ? context.includes('visible') : context === 'visible'
 
 const { $renderContext: currentContext } = useSlideContext()
+const { isPrintMode } = useNav()
 const shouldRender = computed(() => {
   const anyContext = Array.isArray(context) ? context.some(contextMatch) : contextMatch(context)
   const allConditions = Array.isArray(context) ? context.every(conditionsMatch) : conditionsMatch(context)
@@ -30,6 +32,8 @@ function contextMatch(context: Context) {
     return true
   if (context === 'visible')
     return true
+  if (context === 'print' && isPrintMode.value)
+    return true
   return false
 }
 
@@ -43,6 +47,8 @@ function conditionsMatch(context: Context) {
 <template>
   <div v-if="needsDomWrapper" ref="target">
     <slot v-if="shouldRender" />
+    <slot v-else name="fallback" />
   </div>
   <slot v-else-if="shouldRender" />
+  <slot v-else name="fallback" />
 </template>

package/builtin/ShikiMagicMove.vue

@@ -5,6 +5,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import lz from 'lz-string'
 import { useSlideContext } from '../context'
 import { makeId, updateCodeHighlightRange } from '../logic/utils'
+import { useNav } from '../composables/useNav'
 
 const props = defineProps<{
   at?: string | number
@@ -14,6 +15,7 @@ const props = defineProps<{
 
 const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
 const { $clicksContext: clicks, $scale: scale } = useSlideContext()
+const { isPrintMode } = useNav()
 const id = makeId()
 
 const stepIndex = ref(0)
@@ -23,11 +25,11 @@ const container = ref<HTMLElement>()
 const ranges = computed(() => props.stepRanges.map(i => i.length ? i : ['all']))
 
 onUnmounted(() => {
-  clicks!.unregister(id)
+  clicks?.unregister(id)
 })
 
 onMounted(() => {
-  if (!clicks || clicks.disabled)
+  if (!clicks)
     return
 
   if (ranges.value.length !== steps.length)
@@ -92,6 +94,7 @@ onMounted(() => {
       class="slidev-code relative shiki overflow-visible"
       :steps="steps"
       :step="stepIndex"
+      :animate="!isPrintMode"
       :options="{
         globalScale: scale,
         // TODO: make this configurable later

package/builtin/SlidevVideo.vue

@@ -26,7 +26,7 @@ const matchRoute = computed(() => {
 })
 
 const matchClick = computed(() => {
-  if (!video.value || currentContext?.value !== 'slide' || clicks?.disabled || clicks?.current === undefined)
+  if (!video.value || currentContext?.value !== 'slide' || !clicks)
     return false
   return clicks.map.get(video.value)?.isShown?.value ?? true
 })

package/builtin/VClickGap.vue

@@ -14,7 +14,7 @@ const { $clicksContext: clicks } = useSlideContext()
 
 onMounted(() => {
   watchEffect((onCleanup) => {
-    if (!clicks || clicks.disabled)
+    if (!clicks)
       return
 
     let delta = +props.size

package/composables/useClicks.ts

@@ -8,15 +8,11 @@ import { routeForceRefresh } from '../logic/route'
 export function createClicksContextBase(
   current: Ref<number>,
   clicksOverrides?: number,
-  isDisabled?: () => boolean,
 ): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
   const map: ClicksContext['map'] = shallowReactive(new Map())
 
   return {
-    get disabled() {
-      return isDisabled ? isDisabled() : false
-    },
     get current() {
       return +current.value
     },
@@ -25,7 +21,7 @@ export function createClicksContextBase(
     },
     relativeOffsets,
     map,
-    onMounted() {},
+    onMounted() { },
     resolve(at, size = 1) {
       const [isRelative, value] = normalizeAtProp(at)
       if (isRelative) {

package/composables/useNav.ts

@@ -170,15 +170,19 @@ export function useNavBase(
     return go(total.value)
   }
 
-  async function go(page: number | string, clicks?: number) {
+  async function go(page: number | string, clicks: number = 0) {
     skipTransition.value = false
-    await router?.push({
-      path: getSlidePath(page, isPresenter.value),
-      query: {
-        ...router.currentRoute.value.query,
-        clicks: clicks || undefined,
-      },
-    })
+    const pageChanged = currentSlideNo.value !== page
+    const clicksChanged = clicks !== queryClicks.value
+    if (pageChanged || clicksChanged) {
+      await router?.push({
+        path: getSlidePath(page, isPresenter.value),
+        query: {
+          ...router.currentRoute.value.query,
+          clicks: clicks === 0 ? undefined : clicks.toString(),
+        },
+      })
+    }
   }
 
   return {
@@ -255,8 +259,6 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
 
   const queryClicks = computed({
     get() {
-      if (clicksContext.value.disabled)
-        return CLICKS_MAX
       let v = +(queryClicksRaw.value || 0)
       if (Number.isNaN(v))
         v = 0
@@ -277,8 +279,6 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     const context = createClicksContextBase(
       computed({
         get() {
-          if (context.disabled)
-            return CLICKS_MAX
           if (currentSlideNo.value === thisNo)
             return +(queryClicksRaw.value || 0) || 0
           else if (currentSlideNo.value > thisNo)
@@ -292,7 +292,6 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
         },
       }),
       route?.meta?.clicks,
-      () => isPrintMode.value && !isPrintWithClicks.value,
     )
 
     // On slide mounted, make sure the query is not greater than the total

package/composables/useViewTransition.ts

@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { getSlide } from '../logic/slides'
+import { configs } from '../env'
 
 export function useViewTransition() {
   const router = useRouter()
@@ -16,14 +17,9 @@ export function useViewTransition() {
     const toMeta = getSlide(to.params.no as string)?.meta
     const fromNo = fromMeta?.slide?.no
     const toNo = toMeta?.slide?.no
-    if (
-      !(
-        fromNo !== undefined && toNo !== undefined && (
-          (fromMeta?.transition === 'view-transition' && fromNo < toNo)
-          || (toMeta?.transition === 'view-transition' && toNo < fromNo)
-        )
-      )
-    ) {
+    const transitionType = fromNo != null && toNo != null
+      && ((fromNo < toNo ? fromMeta?.transition : toMeta?.transition) ?? configs.transition)
+    if (transitionType !== 'view-transition') {
       isViewTransition.value = false
       return
     }
@@ -43,17 +39,15 @@ export function useViewTransition() {
     let changeRoute: () => void
     const ready = new Promise<void>(resolve => (changeRoute = resolve))
 
-    // eslint-disable-next-line ts/ban-ts-comment
-    // @ts-expect-error
-    const transition = document.startViewTransition(() => {
-      changeRoute()
-      return promise
-    })
+    // Wait for `TransitionGroup` to become normal `div`
+    setTimeout(() => {
+      // @ts-expect-error missing types
+      document.startViewTransition(() => {
+        changeRoute()
+        return promise
+      })
+    }, 50)
 
-    transition.finished.then(() => {
-      viewTransitionAbort = undefined
-      viewTransitionFinish = undefined
-    })
     return ready
   })
 

package/internals/ClicksSlider.vue

@@ -28,21 +28,21 @@ function onMousedown() {
 
 <template>
   <div
-    class="flex gap-0.5 items-center select-none"
+    class="flex gap-1 items-center select-none"
     :title="`Clicks in this slide: ${total}`"
     :class="total ? '' : 'op50'"
   >
-    <div class="flex gap-1 items-center min-w-16 tabular-nums">
+    <div class="flex gap-0.5 items-center min-w-16 font-mono mr1">
       <carbon:cursor-1 text-sm op50 />
+      <div flex-auto />
       <template v-if="current >= 0 && current !== CLICKS_MAX">
-        <div flex-auto />
         <span text-primary>{{ current }}</span>
         <span op25>/</span>
       </template>
       <span op50>{{ total }}</span>
     </div>
     <div
-      relative flex-auto h5 flex="~"
+      relative flex-auto h5 font-mono flex="~"
       @dblclick="current = clicksContext.total"
     >
       <div
@@ -54,7 +54,7 @@ function onMousedown() {
         ]"
         :style="{ width: total > 0 ? `${1 / total * 100}%` : '100%' }"
       >
-        <div absolute inset-0 :class="i <= current ? 'bg-primary op20' : ''" />
+        <div absolute inset-0 :class="i <= current ? 'bg-primary op15' : ''" />
         <div
           :class="[
             +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',

package/internals/PrintSlide.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { SlideRoute } from '@slidev/types'
-import { useFixedNav } from '../composables/useNav'
+import { useFixedNav, useNav } from '../composables/useNav'
 import { createFixedClicks } from '../composables/useClicks'
+import { CLICKS_MAX } from '../constants'
 import PrintSlideClick from './PrintSlideClick.vue'
 
 const { route } = defineProps<{ route: SlideRoute }>()
-const clicks0 = createFixedClicks(route, 0)
+const { isPrintWithClicks } = useNav()
+const clicks0 = createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MAX)
 </script>
 
 <template>
@@ -13,7 +15,7 @@ const clicks0 = createFixedClicks(route, 0)
     :clicks-context="clicks0"
     :nav="useFixedNav(route, clicks0)"
   />
-  <template v-if="!clicks0.disabled">
+  <template v-if="isPrintWithClicks">
     <PrintSlideClick
       v-for="i of clicks0.total"
       :key="i"

package/internals/QuickOverview.vue

@@ -133,7 +133,6 @@ watchEffect(() => {
             <SlideContainer
               :key="route.no"
               :width="cardWidth"
-              :clicks-disabled="true"
               class="pointer-events-none"
             >
               <SlideWrapper

package/logic/route.ts

@@ -22,6 +22,9 @@ export function useRouteQuery<T extends string | string[]>(
     },
     set(v) {
       nextTick(() => {
+        const oldValue = router.currentRoute.value.query[name]
+        if ((oldValue ?? defaultValue?.toString()) === v.toString())
+          return
         router[unref(mode) as 'replace' | 'push']({
           query: {
             ...router.currentRoute.value.query,
@@ -30,7 +33,7 @@ export function useRouteQuery<T extends string | string[]>(
         })
       })
     },
-  }) as any
+  })
 }
 
 // force update collected elements when the route is fully resolved

package/logic/transition.ts

@@ -9,7 +9,7 @@ const transitionResolveMap: Record<string, string | undefined> = {
   'slide-down': 'slide-down | slide-up',
 }
 
-export function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
+function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
   if (!transition)
     return undefined
   if (typeof transition === 'string') {

package/modules/v-click.ts

@@ -132,7 +132,7 @@ function isCurrent(thisClick: number | [number, number], clicks: number) {
 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)
+  if (!el || !ctx)
     return null
 
   if (value === false || value === 'false')

package/modules/v-mark.ts

@@ -116,7 +116,8 @@ export function createVMarkDirective() {
 
           const resolvedClick = resolveClick(el, binding, options.value.at)
           if (!resolvedClick) {
-            console.error('[Slidev] Invalid value for v-mark:', options.value.at)
+            // No click animation, just show the mark
+            annotation.show()
             return
           }
 
@@ -130,19 +131,12 @@ export function createVMarkDirective() {
 
             const at = options.value.at
 
-            if (at === true) {
+            if (at === true)
               shouldShow = true
-            }
-            else if (at === false) {
+            else if (at === false)
               shouldShow = false
-            }
-            else if (resolvedClick) {
+            else
               shouldShow = resolvedClick.isActive.value
-            }
-            else {
-              console.error('[Slidev] Invalid value for v-mark:', at)
-              return
-            }
 
             if (shouldShow == null)
               return

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.1",
+  "version": "0.48.3",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@shikijs/vitepress-twoslash": "^1.1.7",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
-    "@unhead/vue": "^1.8.11",
+    "@unhead/vue": "^1.8.18",
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
@@ -50,7 +50,7 @@
     "katex": "^0.16.9",
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.0",
-    "monaco-editor": "^0.46.0",
+    "monaco-editor": "^0.47.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "shiki": "^1.1.7",
@@ -60,10 +60,10 @@
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.1",
-    "@slidev/types": "0.48.1"
+    "@slidev/types": "0.48.3",
+    "@slidev/parser": "0.48.3"
   },
   "devDependencies": {
-    "vite": "^5.1.5"
+    "vite": "^5.1.6"
   }
 }

package/pages/overview.vue

@@ -100,37 +100,42 @@ onMounted(() => {
 
 <template>
   <div class="h-screen w-screen of-hidden flex">
-    <nav class="h-full flex flex-col border-r border-main p2 select-none">
-      <div class="flex flex-col flex-auto items-center justify-center group gap-1">
-        <div
-          v-for="(route, idx) of slides"
-          :key="route.no"
-          class="relative"
-        >
-          <button
-            class="relative transition duration-300 w-8 h-8 rounded hover:bg-active hover:op100"
-            :class="activeBlocks.includes(idx) ? 'op100 text-primary bg-gray:5' : 'op20'"
-            @click="scrollToSlide(idx)"
-          >
-            <div>{{ idx + 1 }}</div>
-          </button>
+    <nav class="grid grid-rows-[auto_max-content] border-r border-main select-none max-h-full h-full">
+      <div class="relative">
+        <div class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p2 gap-1 max-h-full of-scroll" style="direction:rtl">
           <div
-            v-if="route.meta?.slide?.title"
-            class="pointer-events-none select-none absolute left-110% bg-main top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
-            :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
+            v-for="(route, idx) of slides"
+            :key="route.no"
+            class="relative"
+            style="direction:ltr"
           >
-            {{ route.meta?.slide?.title }}
+            <button
+              class="relative transition duration-300 w-8 h-8 rounded hover:bg-active hover:op100"
+              :class="activeBlocks.includes(idx) ? 'op100 text-primary bg-gray:5' : 'op20'"
+              @click="scrollToSlide(idx)"
+            >
+              <div>{{ idx + 1 }}</div>
+            </button>
+            <div
+              v-if="route.meta?.slide?.title"
+              class="pointer-events-none select-none absolute left-110% backdrop-blur-8 top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
+              :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
+            >
+              {{ route.meta?.slide?.title }}
+            </div>
           </div>
         </div>
       </div>
-      <IconButton
-        v-if="!isColorSchemaConfigured"
-        :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
-        @click="toggleDark()"
-      >
-        <carbon-moon v-if="isDark" />
-        <carbon-sun v-else />
-      </IconButton>
+      <div p2 border="t main">
+        <IconButton
+          v-if="!isColorSchemaConfigured"
+          :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
+          @click="toggleDark()"
+        >
+          <carbon-moon v-if="isDark" />
+          <carbon-sun v-else />
+        </IconButton>
+      </div>
     </nav>
     <main
       class="flex-1 h-full of-auto"
@@ -172,7 +177,6 @@ onMounted(() => {
             <SlideContainer
               :key="route.no"
               :width="cardWidth"
-              :clicks-disabled="true"
               class="pointer-events-none important:[&_*]:select-none"
             >
               <SlideWrapper