@slidev/client 0.48.2 → 0.48.4

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
@@ -13,7 +14,8 @@ const props = defineProps<{
 }>()
 
 const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
-const { $clicksContext: clicks, $scale: scale } = useSlideContext()
+const { $clicksContext: clicks, $scale: scale, $zoom: zoom } = 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,8 +94,9 @@ onMounted(() => {
       class="slidev-code relative shiki overflow-visible"
       :steps="steps"
       :step="stepIndex"
+      :animate="!isPrintMode"
       :options="{
-        globalScale: scale,
+        globalScale: scale * zoom,
         // TODO: make this configurable later
         duration: 800,
         stagger: 1,

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) {
@@ -68,7 +64,6 @@ export function createClicksContextBase(
 export function createFixedClicks(
   route?: SlideRoute | undefined,
   currentInit = 0,
-  isDisabled?: () => boolean,
 ): ClicksContext {
-  return createClicksContextBase(ref(currentInit), route?.meta?.clicks, isDisabled)
+  return createClicksContextBase(ref(currentInit), route?.meta?.clicks)
 }

package/composables/useNav.ts

@@ -259,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
@@ -281,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)
@@ -296,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/constants.ts

@@ -12,6 +12,7 @@ export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<SlideR
 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>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

package/context.ts

@@ -1,4 +1,4 @@
-import { ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
 import {
   FRONTMATTER_FIELDS,
@@ -9,6 +9,7 @@ import {
   injectionRenderContext,
   injectionRoute,
   injectionSlideScale,
+  injectionSlideZoom,
   injectionSlidevContext,
 } from './constants'
 
@@ -24,7 +25,8 @@ export function useSlideContext() {
   const $renderContext = injectLocal(injectionRenderContext)!
   const $frontmatter = injectLocal(injectionFrontmatter, {})
   const $route = injectLocal(injectionRoute, undefined)
-  const $scale = injectLocal(injectionSlideScale, ref(1))!
+  const $scale = injectLocal(injectionSlideScale, ref(1))
+  const $zoom = injectLocal(injectionSlideZoom, computed(() => 1))
 
   return {
     $slidev,
@@ -36,6 +38,7 @@ export function useSlideContext() {
     $renderContext,
     $frontmatter,
     $scale,
+    $zoom,
   }
 }
 

package/internals/PrintSlide.vue

@@ -2,11 +2,12 @@
 import type { SlideRoute } from '@slidev/types'
 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 { isPrintWithClicks } = useNav()
-const clicks0 = createFixedClicks(route, 0, () => !isPrintWithClicks.value)
+const clicks0 = createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MAX)
 </script>
 
 <template>
@@ -14,7 +15,7 @@ const clicks0 = createFixedClicks(route, 0, () => !isPrintWithClicks.value)
     :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/internals/SlideWrapper.vue

@@ -3,7 +3,7 @@ import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toR
 import type { PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
-import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
+import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
 import SlideLoading from './SlideLoading.vue'
 
 const props = defineProps({
@@ -29,21 +29,23 @@ const props = defineProps({
   },
 })
 
+const zoom = computed(() => props.route.meta?.slide?.frontmatter.zoom ?? 1)
+
 provideLocal(injectionRoute, props.route)
 provideLocal(injectionCurrentPage, ref(props.route.no))
 provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
 provideLocal(injectionActive, toRef(props, 'active'))
 provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
+provideLocal(injectionSlideZoom, zoom)
 
 const style = computed(() => {
-  const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
-  return zoom === 1
+  return zoom.value === 1
     ? undefined
     : {
-        width: `${100 / zoom}%`,
-        height: `${100 / zoom}%`,
+        width: `${100 / zoom.value}%`,
+        height: `${100 / zoom.value}%`,
         transformOrigin: 'top left',
-        transform: `scale(${zoom})`,
+        transform: `scale(${zoom.value})`,
       }
 })
 

package/internals/SlidesShow.vue

@@ -75,6 +75,7 @@ function onAfterLeave() {
         class="overflow-hidden"
       />
     </div>
+    <div id="twoslash-container" />
   </component>
 
   <!-- Global Top -->

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.2",
+  "version": "0.48.4",
   "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.2",
-    "@slidev/types": "0.48.2"
+    "@slidev/parser": "0.48.4",
+    "@slidev/types": "0.48.4"
   },
   "devDependencies": {
-    "vite": "^5.1.5"
+    "vite": "^5.1.6"
   }
 }

package/pages/overview.vue

@@ -177,7 +177,6 @@ onMounted(() => {
             <SlideContainer
               :key="route.no"
               :width="cardWidth"
-              :clicks-disabled="true"
               class="pointer-events-none important:[&_*]:select-none"
             >
               <SlideWrapper

package/pages/print.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { watchEffect } from 'vue'
+import { onMounted, watchEffect } from 'vue'
+import { recomputeAllPoppers } from 'floating-vue'
 import { windowSize } from '../state'
 import PrintContainer from '../internals/PrintContainer.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
@@ -13,6 +14,10 @@ watchEffect(() => {
   else
     (document.body.parentNode as HTMLElement).classList.remove('print')
 })
+
+onMounted(() => {
+  recomputeAllPoppers()
+})
 </script>
 
 <template>
@@ -24,6 +29,7 @@ watchEffect(() => {
       :width="windowSize.width.value"
     />
   </div>
+  <div id="twoslash-container" />
 </template>
 
 <style lang="postcss">

package/setup/main.ts

@@ -35,7 +35,7 @@ export default async function setupMain(app: App) {
   app.use(createVClickDirectives())
   app.use(createVMarkDirective())
   app.use(MotionPlugin)
-  app.use(TwoSlashFloatingVue as any, { container: '#slideshow' })
+  app.use(TwoSlashFloatingVue as any, { container: '#twoslash-container' })
 
   const context: AppContext = {
     app,