@slidev/client 0.38.7 → 0.39.0

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 slidev-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 />
@@ -68,3 +68,10 @@ else {
     </div>
   </Transform>
 </template>
+
+<style>
+.slidev-tweet iframe {
+  border-radius: 12px;
+  overflow: hidden;
+}
+</style>

package/iframes/monaco/index.ts

@@ -101,8 +101,8 @@ async function start() {
 
   update = () => {
     monaco.editor.setTheme(props.dark
-      ? theme.dark || 'vitesse-dark'
-      : theme.light || 'vitesse-light',
+      ? (theme.dark || 'vitesse-dark')
+      : (theme.light || 'vitesse-light'),
     )
     styleObject.innerHTML = `:root { ${props.style} }`
 

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/SlidesShow.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, shallowRef, watch } from 'vue'
-import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes } from '../logic/nav'
+import { TransitionGroup, computed, shallowRef, watch } from 'vue'
+import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes, transition } 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'
@@ -24,17 +23,7 @@ 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
-}
+const loadedRoutes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded || r === currentRoute.value))
 </script>
 
 <template>
@@ -42,18 +31,11 @@ function onAfterLeave() {
   <GlobalBottom />
 
   <!-- Slides -->
-  <template
-    v-for="route of routes"
-    :key="route.path"
-  >
-    <Transition
-      v-bind="configs.pageTransition"
-      @before-leave="onBeforeLeave()"
-      @after-leave="onAfterLeave()"
-    >
+  <TransitionGroup v-bind="transition">
+    <template v-for="route of loadedRoutes" :key="route.path">
       <SlideWrapper
         :is="route?.component as any"
-        v-show="route === currentRoute && !isLeaving"
+        v-show="route === currentRoute"
         :clicks="route === currentRoute ? clicks : 0"
         :clicks-elements="route.meta?.__clicksElements || []"
         :clicks-disabled="false"
@@ -61,8 +43,8 @@ function onAfterLeave() {
         :route="route"
         :context="context"
       />
-    </Transition>
-  </template>
+    </template>
+  </TransitionGroup>
 
   <!-- Global Top -->
   <GlobalTop />

package/logic/nav.ts

@@ -1,6 +1,6 @@
-import type { Ref } from 'vue'
+import type { Ref, TransitionGroupProps } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import type { TocItem } from '@slidev/types'
 import { SwipeDirection, isString, timestamp, usePointerSwipe } from '@vueuse/core'
 import { rawRoutes, router } from '../routes'
@@ -18,6 +18,7 @@ nextTick(() => {
     routeForceRefresh.value += 1
   })
 })
+export const navDirection = ref(0)
 
 export const route = computed(() => router.currentRoute.value)
 
@@ -40,6 +41,7 @@ export const currentSlideId = computed(() => currentRoute.value?.meta?.slide?.id
 export const currentLayout = computed(() => currentRoute.value?.meta?.layout || (currentPage.value === 1 ? 'cover' : 'default'))
 
 export const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length, currentPage.value + 1)}`))
+export const prevRoute = computed(() => rawRoutes.find(i => i.path === `${Math.max(1, currentPage.value - 1)}`))
 
 export const clicksElements = computed<HTMLElement[]>(() => {
   // eslint-disable-next-line no-unused-expressions
@@ -75,6 +77,12 @@ export const rawTree = computed(() => rawRoutes
 export const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentRoute.value))
 export const tree = computed(() => filterTree(treeWithActiveStatuses.value))
 
+export const transition = computed(() => getCurrentTransition(navDirection.value, currentRoute.value, prevRoute.value))
+
+watch(currentRoute, (next, prev) => {
+  navDirection.value = Number(next?.path) - Number(prev?.path)
+})
+
 export function next() {
   if (clicksTotal.value <= clicks.value)
     nextSlide()
@@ -220,3 +228,50 @@ export function filterTree(tree: TocItem[], level = 1): TocItem[] {
       children: filterTree(item.children, level + 1),
     }))
 }
+
+const transitionResolveMap: Record<string, string | undefined> = {
+  'slide-left': 'slide-left | slide-right',
+  'slide-right': 'slide-right | slide-left',
+  'slide-up': 'slide-up | slide-down',
+  'slide-down': 'slide-down | slide-up',
+}
+
+export function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
+  if (!transition)
+    return undefined
+  if (typeof transition === 'string') {
+    transition = {
+      name: transition,
+    }
+  }
+
+  if (!transition.name)
+    return undefined
+
+  let name = transition.name.includes('|')
+    ? transition.name
+    : (transitionResolveMap[transition.name] || transition.name)
+
+  if (name.includes('|')) {
+    const [forward, backward] = name.split('|').map(i => i.trim())
+    name = isBackward ? backward : forward
+  }
+
+  if (!name)
+    return undefined
+
+  return {
+    ...transition,
+    name,
+  }
+}
+
+export function getCurrentTransition(direction: number, currentRoute?: RouteRecordRaw, prevRoute?: RouteRecordRaw) {
+  let transition = direction > 0
+    ? prevRoute?.meta?.transition
+    : currentRoute?.meta?.transition
+  if (!transition)
+    transition = configs.transition
+
+  return resolveTransition(transition, direction < 0)
+}

package/logic/recording.ts

@@ -107,7 +107,7 @@ export function useRecording() {
         return
 
       streamCamera.value = await navigator.mediaDevices.getUserMedia({
-        video: currentCamera.value === 'none' || recordCamera.value !== true
+        video: (currentCamera.value === 'none' || recordCamera.value !== true)
           ? false
           : {
               deviceId: currentCamera.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.38.7",
+  "version": "0.39.0",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,11 +16,11 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.2",
-    "@unocss/reset": "^0.48.4",
+    "@unocss/reset": "^0.49.1",
     "@vueuse/core": "^9.11.1",
     "@vueuse/head": "^1.0.23",
     "@vueuse/math": "^9.11.1",
-    "@vueuse/motion": "^2.0.0-beta.26",
+    "@vueuse/motion": "^2.0.0-beta.27",
     "codemirror": "^5.65.5",
     "defu": "^6.1.2",
     "drauu": "^0.3.2",
@@ -34,14 +34,14 @@
     "prettier": "^2.8.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.1",
-    "unocss": "^0.48.4",
+    "unocss": "^0.49.1",
     "vite-plugin-windicss": "^1.8.10",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.38.7",
-    "@slidev/types": "0.38.7"
+    "@slidev/parser": "0.39.0",
+    "@slidev/types": "0.39.0"
   },
   "devDependencies": {
     "vite": "^4.0.4"

package/routes.ts

@@ -1,9 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router'
+import type { SlideTransition } from '@slidev/types'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import Play from './internals/Play.vue'
 import Print from './internals/Print.vue'
 // @ts-expect-error missing types
 import _rawRoutes from '/@slidev/routes'
+// @ts-expect-error missing types
 import _configs from '/@slidev/configs'
 
 export const rawRoutes = _rawRoutes as RouteRecordRaw[]
@@ -70,7 +72,7 @@ declare module 'vue-router' {
       title?: string
       level?: number
     }
-
+    transition?: string | SlideTransition
     // private fields
     __clicksElements: HTMLElement[]
     __preloaded?: boolean

package/styles/index.css

@@ -51,3 +51,7 @@ html {
   vertical-align: sub;
   line-height: 1em;
 }
+
+.slidev-page {
+  @apply absolute top-0 left-0 right-0 w-full relative;
+}

package/styles/layouts-base.css

@@ -1,3 +1,7 @@
+#slide-content > div {
+  @apply h-full w-full absolute;
+}
+
 .slidev-layout {
   @apply px-14 py-10 text-[1.1rem] h-full;
 
@@ -116,4 +120,4 @@
   li {
     @apply mr-1.1em pr-0.2em ml-0 pl-0;
   }
-}
+}

package/styles/transitions.css

@@ -0,0 +1,56 @@
+/* Sliding */
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-up-enter-active,
+.slide-up-leave-active,
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all var(--slidev-transition-duration) ease;
+}
+
+.slide-left-enter-from,
+.slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+.slide-left-leave-to,
+.slide-right-enter-from {
+  transform: translateX(-100%);
+}
+
+.slide-up-enter-from,
+.slide-down-leave-to {
+  transform: translateY(100%);
+}
+
+.slide-up-leave-to,
+.slide-down-enter-from {
+  transform: translateY(-100%);
+}
+
+/* Fading */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity var(--slidev-transition-duration) ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-out-leave-active {
+  transition: opacity calc(var(--slidev-transition-duration) * 0.6) ease-out;
+}
+
+.fade-out-enter-active {
+  transition: opacity calc(var(--slidev-transition-duration) * 0.8) ease-in;
+  transition-delay: calc(var(--slidev-transition-duration) * 0.6);
+}
+
+.fade-out-enter-from,
+.fade-out-leave-to {
+  opacity: 0;
+}

package/styles/vars.css

@@ -7,6 +7,8 @@
   --slidev-code-radius: 4px;
   --slidev-code-margin: 4px 0;
 
+  --slidev-transition-duration: 0.5s;
+
   --slidev-slide-container-background: black;
   --slidev-controls-foreground: white;
 }

package/utils.ts

@@ -1,8 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router'
 
-export function getSlideClass(route?: RouteRecordRaw) {
+export function getSlideClass(route?: RouteRecordRaw, extra = '') {
+  const classes = ['slidev-page', extra]
+
   const no = route?.meta?.slide?.no
   if (no != null)
-    return `slidev-page-${no}`
-  return ''
+    classes.push(`slidev-page-${no}`)
+
+  return classes.filter(Boolean).join(' ')
 }