@slidev/client 0.38.5 → 0.38.8

package/builtin/TocList.vue

@@ -49,7 +49,7 @@ const classes = computed(() => {
 </template>
 
 <style>
-.slidev-toc-item p {
+.slidev-layout .slidev-toc-item p {
   margin: 0;
 }
 </style>

package/builtin/Tweet.vue

@@ -58,7 +58,7 @@ else {
 
 <template>
   <Transform :scale="scale || 1">
-    <div ref="tweet" class="tweet" :data-waitfor="tweetNotFound ? '' : 'iframe'">
+    <div ref="tweet" class="tweet">
       <div v-if="!loaded || tweetNotFound" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
           <carbon:logo-twitter />

package/internals/Play.vue

@@ -9,6 +9,7 @@ import Controls from './Controls.vue'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
 import SlidesShow from './SlidesShow.vue'
+import PrintStyle from './PrintStyle.vue'
 
 registerShortcuts()
 
@@ -40,6 +41,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 </script>
 
 <template>
+  <PrintStyle v-if="isPrintMode" />
   <div id="page-root" ref="root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
     <SlideContainer
       class="w-full h-full"

package/internals/Print.vue

@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import type { Slots } from 'vue'
-import { h, watchEffect } from 'vue'
+import { watchEffect } from 'vue'
 import { windowSize } from '../state'
 import { isPrintMode } from '../logic/nav'
-import { slideHeight, slideWidth, themeVars } from '../env'
+import { themeVars } from '../env'
 import PrintContainer from './PrintContainer.vue'
-
-function vStyle<Props>(props: Props, { slots }: { slots: Slots }) {
-  if (slots.default)
-    return h('style', slots.default())
-}
+import PrintStyle from './PrintStyle.vue'
 
 watchEffect(() => {
   if (isPrintMode)
@@ -20,9 +15,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <vStyle>
-    @page { size: {{ slideWidth }}px {{ slideHeight }}px; margin: 0px; }
-  </vStyle>
+  <PrintStyle v-if="isPrintMode" />
   <div id="page-root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
     <PrintContainer
       class="w-full h-full"

package/internals/PrintContainer.vue

@@ -50,7 +50,7 @@ provide(injectionSlideScale, scale)
   @apply bg-main;
 }
 
-.slide-container {
+.print-slide-container {
   @apply relative overflow-hidden break-after-page;
 }
 </style>

package/internals/PrintSlideClick.vue

@@ -45,7 +45,7 @@ provide(injectionSlidevContext, reactive({
 </script>
 
 <template>
-  <div :id="id" class="slide-container" :style="style">
+  <div :id="id" class="print-slide-container" :style="style">
     <GlobalBottom />
 
     <SlideWrapper

package/internals/PrintStyle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { Slots } from 'vue'
+import { h } from 'vue'
+import { slideHeight, slideWidth } from '../env'
+
+function vStyle<Props>(props: Props, { slots }: { slots: Slots }) {
+  if (slots.default)
+    return h('style', slots.default())
+}
+</script>
+
+<template>
+  <vStyle>
+    @page { size: {{ slideWidth }}px {{ slideHeight }}px; margin: 0px; }
+  </vStyle>
+</template>

package/internals/SlideContainer.vue

@@ -3,6 +3,7 @@ import { useElementSize } from '@vueuse/core'
 import { computed, provide, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
+import { isPrintMode } from '../logic/nav'
 
 const props = defineProps({
   width: {
@@ -34,7 +35,7 @@ if (props.width) {
 const screenAspect = computed(() => width.value / height.value)
 
 const scale = computed(() => {
-  if (props.scale)
+  if (props.scale && !isPrintMode.value)
     return props.scale
   if (screenAspect.value < slideAspect)
     return width.value / slideWidth
@@ -66,7 +67,7 @@ provide(injectionSlideScale, scale)
 
 <style lang="postcss">
 #slide-container {
-  @apply relative overflow-hidden;
+  @apply relative overflow-hidden break-after-page;
 }
 
 #slide-content {

package/internals/SlideWrapper.ts

@@ -3,6 +3,7 @@ import { defineComponent, h, provide } from 'vue'
 import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute, injectionSlideContext } from '../constants'
 
 export default defineComponent({
+  name: 'SlideWrapper',
   props: {
     clicks: {
       type: [Number, String],

package/internals/SlidesShow.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
 import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes } from '../logic/nav'
 import { getSlideClass } from '../utils'
+import { configs } from '../env'
 import SlideWrapper from './SlideWrapper'
 // @ts-expect-error virtual module
 import GlobalTop from '/@slidev/global-components/top'
@@ -22,6 +23,18 @@ watch(currentRoute, () => {
 const DrawingLayer = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('./DrawingLayer.vue').then(v => DrawingLayer.value = v.default)
+
+const routes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded || r === currentRoute.value))
+
+const isLeaving = ref(false)
+function onBeforeLeave() {
+  if (configs.pageTransition?.crossfade === false)
+    isLeaving.value = true
+}
+function onAfterLeave() {
+  if (configs.pageTransition?.crossfade === false)
+    isLeaving.value = false
+}
 </script>
 
 <template>
@@ -29,18 +42,26 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   <GlobalBottom />
 
   <!-- Slides -->
-  <template v-for="route of rawRoutes" :key="route.path">
-    <SlideWrapper
-      :is="route?.component"
-      v-show="route === currentRoute"
-      v-if="route.meta?.__preloaded || route === currentRoute"
-      :clicks="route === currentRoute ? clicks : 0"
-      :clicks-elements="route.meta?.__clicksElements || []"
-      :clicks-disabled="false"
-      :class="getSlideClass(route)"
-      :route="route"
-      :context="context"
-    />
+  <template
+    v-for="route of routes"
+    :key="route.path"
+  >
+    <Transition
+      v-bind="configs.pageTransition"
+      @before-leave="onBeforeLeave()"
+      @after-leave="onAfterLeave()"
+    >
+      <SlideWrapper
+        :is="route?.component as any"
+        v-show="route === currentRoute && !isLeaving"
+        :clicks="route === currentRoute ? clicks : 0"
+        :clicks-elements="route.meta?.__clicksElements || []"
+        :clicks-disabled="false"
+        :class="getSlideClass(route)"
+        :route="route"
+        :context="context"
+      />
+    </Transition>
   </template>
 
   <!-- Global Top -->

package/logic/drawings.ts

@@ -76,6 +76,7 @@ export function loadCanvas(page?: number) {
     drauu.load(data)
   else
     drauu.clear()
+  updateState()
   disableDump = false
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.38.5",
+  "version": "0.38.8",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -40,8 +40,8 @@
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.38.5",
-    "@slidev/types": "0.38.5"
+    "@slidev/parser": "0.38.8",
+    "@slidev/types": "0.38.8"
   },
   "devDependencies": {
     "vite": "^4.0.4"