@slidev/client 0.38.4 → 0.38.7

package/builtin/Toc.vue

@@ -9,7 +9,7 @@ Usage:
 -->
 <script setup lang='ts'>
 import { computed, inject } from 'vue'
-import type { TocItem } from '../logic/nav'
+import type { TocItem } from '@slidev/types'
 import { injectionSlidevContext } from '../constants'
 
 const props = withDefaults(

package/builtin/TocList.vue

@@ -9,9 +9,9 @@ Usage:
 <script setup lang="ts">
 import { computed } from 'vue'
 import { toArray } from '@antfu/utils'
+import type { TocItem } from '@slidev/types'
 // @ts-expect-error virtual module
 import Titles from '/@slidev/titles.md'
-import type { TocItem } from '../logic/nav'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -49,7 +49,7 @@ const classes = computed(() => {
 </template>
 
 <style>
-.slidev-toc-item p {
+.slidev-layout .slidev-toc-item p {
   margin: 0;
 }
 </style>

package/composables/useNav.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
-import type { TocItem } from '../logic/nav'
+import type { TocItem } from '@slidev/types'
 import { addToTree, filterTree, getPath, getTreeWithActiveStatuses } from '../logic/nav'
 import { rawRoutes } from '../routes'
 

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/logic/nav.ts

@@ -1,23 +1,13 @@
 import type { Ref } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import { computed, nextTick, ref } from 'vue'
+import type { TocItem } from '@slidev/types'
 import { SwipeDirection, isString, timestamp, usePointerSwipe } from '@vueuse/core'
 import { rawRoutes, router } from '../routes'
 import { configs } from '../env'
 import { useRouteQuery } from './route'
 import { isDrawing } from './drawings'
 
-export interface TocItem {
-  active?: boolean
-  activeParent?: boolean
-  children: TocItem[]
-  hasActiveParent?: boolean
-  level: number
-  path: string
-  hideInToc?: boolean
-  title?: string
-}
-
 export { rawRoutes, router }
 
 // force update collected elements when the route is fully resolved

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.38.4",
+  "version": "0.38.7",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@antfu/utils": "^0.7.2",
     "@unocss/reset": "^0.48.4",
-    "@vueuse/core": "^9.11.0",
-    "@vueuse/head": "^1.0.22",
-    "@vueuse/math": "^9.11.0",
+    "@vueuse/core": "^9.11.1",
+    "@vueuse/head": "^1.0.23",
+    "@vueuse/math": "^9.11.1",
     "@vueuse/motion": "^2.0.0-beta.26",
     "codemirror": "^5.65.5",
-    "defu": "^6.1.1",
+    "defu": "^6.1.2",
     "drauu": "^0.3.2",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.4",
@@ -40,8 +40,8 @@
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.38.4",
-    "@slidev/types": "0.38.4"
+    "@slidev/parser": "0.38.7",
+    "@slidev/types": "0.38.7"
   },
   "devDependencies": {
     "vite": "^4.0.4"

package/setup/root.ts

@@ -1,6 +1,6 @@
 /* __imports__ */
 import { watch } from 'vue'
-import { useHead } from '@vueuse/head'
+import { useHead, useHtmlAttrs } from '@vueuse/head'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
@@ -16,6 +16,7 @@ export default function setupRoot() {
 
   const title = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
   useHead({ title })
+  useHtmlAttrs(configs.htmlAttrs)
   initSharedState(`${title} - shared`)
   initDrawingState(`${title} - drawings`)