@slidev/client 0.49.0-beta.4 → 0.49.0-beta.5

package/internals/SlideContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, ref, watchEffect } from 'vue'
-import { configs, slideAspect, slideHeight, slideWidth } from '../env'
+import { computed, ref } from 'vue'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
+import { slideAspect, slideHeight, slideWidth } from '../env'
 import { useNav } from '../composables/useNav'
+import { slideScale } from '../state'
 
 const props = defineProps({
   width: {
@@ -12,83 +13,64 @@ const props = defineProps({
   meta: {
     default: () => ({}) as any,
   },
-  scale: {
-    type: [Number, String],
-  },
   isMain: {
     type: Boolean,
     default: false,
   },
 })
 
-const { clicksDirection, isPrintMode } = useNav()
+const { isPrintMode } = useNav()
 
-const root = ref<HTMLDivElement | null>(null)
-const rootSize = useElementSize(root)
+const container = ref<HTMLDivElement | null>(null)
+const containerSize = useElementSize(container)
 const slideElement = ref<HTMLElement | null>(null)
 
-const width = computed(() => props.width ? props.width : rootSize.width.value)
-const height = computed(() => props.width ? props.width / slideAspect.value : rootSize.height.value)
-
-if (props.width) {
-  watchEffect(() => {
-    if (root.value) {
-      root.value.style.width = `${width.value}px`
-      root.value.style.height = `${height.value}px`
-    }
-  })
-}
-
-const screenAspect = computed(() => width.value / height.value)
+const width = computed(() => props.width ?? containerSize.width.value)
+const height = computed(() => props.width ? props.width / slideAspect.value : containerSize.height.value)
 
 const scale = computed(() => {
-  if (props.scale && !isPrintMode.value)
-    return +props.scale
-  if (screenAspect.value < slideAspect.value)
-    return width.value / slideWidth.value
-  return height.value * slideAspect.value / slideWidth.value
+  if (slideScale.value && !isPrintMode.value)
+    return +slideScale.value
+  return Math.min(width.value / slideWidth.value, height.value / slideHeight.value)
 })
 
-const style = computed(() => ({
+const contentStyle = computed(() => ({
   'height': `${slideHeight.value}px`,
   'width': `${slideWidth.value}px`,
   'transform': `translate(-50%, -50%) scale(${scale.value})`,
   '--slidev-slide-scale': scale.value,
 }))
 
-const className = computed(() => ({
-  'select-none': !configs.selectable,
-  'slidev-nav-go-forward': clicksDirection.value > 0,
-  'slidev-nav-go-backward': clicksDirection.value < 0,
-}))
-
-if (props.isMain) {
-  useStyleTag(computed(() => `
-    :root {
-      --slidev-slide-scale: ${scale.value};
+const containerStyle = computed(() => props.width
+  ? {
+      width: `${props.width}px`,
+      height: `${props.width / slideAspect.value}px`,
     }
-  `))
-}
+  : {},
+)
+
+if (props.isMain)
+  useStyleTag(computed(() => `:root { --slidev-slide-scale: ${scale.value}; }`))
 
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
 </script>
 
 <template>
-  <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
-    <div id="slide-content" ref="slideElement" class="slidev-slide-content" :style="style">
+  <div :id="isMain ? 'slide-container' : undefined" ref="container" class="slidev-slide-container" :style="containerStyle">
+    <div :id="isMain ? 'slide-content' : undefined" ref="slideElement" class="slidev-slide-content" :style="contentStyle">
       <slot />
     </div>
     <slot name="controls" />
   </div>
 </template>
 
-<style lang="postcss">
-#slide-container {
-  @apply relative overflow-hidden break-after-page;
+<style scoped lang="postcss">
+.slidev-slide-container {
+  @apply relative w-full h-full overflow-hidden;
 }
 
-#slide-content {
-  @apply relative overflow-hidden bg-main absolute left-1/2 top-1/2;
+.slidev-slide-content {
+  @apply absolute left-1/2 top-1/2 overflow-hidden bg-main;
 }
 </style>

package/internals/SlideWrapper.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toRef } from 'vue'
-import type { PropType } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
-import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
 import { getSlideClass } from '../utils'
+import { configs } from '../env'
 import SlideLoading from './SlideLoading.vue'
 
 const props = defineProps({
@@ -16,14 +17,6 @@ const props = defineProps({
     type: String as PropType<RenderContext>,
     default: 'slide',
   },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  is: {
-    type: Function as PropType<() => any>,
-    required: true,
-  },
   route: {
     type: Object as PropType<SlideRoute>,
     required: true,
@@ -34,12 +27,11 @@ 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(injectionRenderContext, ref(props.renderContext))
 provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
 provideLocal(injectionSlideZoom, zoom)
 
-const style = computed(() => {
+const zoomStyle = computed(() => {
   return zoom.value === 1
     ? undefined
     : {
@@ -49,32 +41,33 @@ const style = computed(() => {
         transform: `scale(${zoom.value})`,
       }
 })
+const style = computed<CSSProperties>(() => ({
+  ...zoomStyle.value,
+  'user-select': configs.selectable ? undefined : 'none',
+}))
 
-const SlideComponent = defineAsyncComponent({
+const SlideComponent = computed(() => props.route && defineAsyncComponent({
   loader: async () => {
-    const component = await props.is()
+    const component = await props.route.component()
     return defineComponent({
       setup(_, { attrs }) {
-        onMounted(() => {
-          props.clicksContext?.onMounted?.()
-        })
+        onMounted(() => props.clicksContext?.onMounted?.())
         return () => h(component.default, attrs)
       },
     })
   },
   delay: 300,
   loadingComponent: SlideLoading,
-})
+}))
 </script>
 
 <template>
-  <div :class="getSlideClass(route)">
-    <component
-      :is="SlideComponent"
-      :style="style"
-      :data-slidev-no="props.route.no"
-      :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
-    />
+  <div
+    :data-slidev-no="props.route.no"
+    :class="getSlideClass(route, ['slide', 'presenter'].includes(props.renderContext) ? '' : 'disable-view-transition')"
+    :style="style"
+  >
+    <SlideComponent />
   </div>
 </template>
 
@@ -85,7 +78,6 @@ const SlideComponent = defineAsyncComponent({
 
 .slidev-page {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  inset: 0;
 }
 </style>

package/internals/SlidesShow.vue

@@ -8,7 +8,6 @@ import { createFixedClicks } from '../composables/useClicks'
 import { activeDragElement } from '../state'
 import { CLICKS_MAX } from '../constants'
 import SlideWrapper from './SlideWrapper.vue'
-import PresenterMouse from './PresenterMouse.vue'
 import DragControl from './DragControl.vue'
 
 import GlobalTop from '#slidev/global-components/top'
@@ -22,11 +21,11 @@ const {
   currentSlideRoute,
   currentTransition,
   getPrimaryClicks,
-  isPresenter,
   nextRoute,
   slides,
   isPrintMode,
   isPrintWithClicks,
+  clicksDirection,
 } = useNav()
 
 // preload next route
@@ -64,10 +63,13 @@ function onAfterLeave() {
     v-bind="skipTransition ? {} : currentTransition"
     id="slideshow"
     tag="div"
+    :class="{
+      'slidev-nav-go-forward': clicksDirection > 0,
+      'slidev-nav-go-backward': clicksDirection < 0,
+    }"
     @after-leave="onAfterLeave"
   >
     <SlideWrapper
-      :is="route.component!"
       v-for="route of loadedRoutes"
       v-show="route === currentSlideRoute"
       :key="route.no"
@@ -87,7 +89,6 @@ function onAfterLeave() {
   <template v-if="(__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__) && DrawingLayer">
     <DrawingLayer />
   </template>
-  <PresenterMouse v-if="!isPresenter" />
 </template>
 
 <style scoped>

package/logic/transition.ts

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

package/modules/v-click.ts

@@ -11,7 +11,6 @@ import {
   injectionClicksContext,
 } from '../constants'
 import { directiveInject } from '../utils'
-import { normalizeAtValue } from '../composables/useClicks'
 
 export function createVClickDirectives() {
   return {
@@ -126,8 +125,7 @@ export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, v
   const flagHide = explicitHide || (dir.modifiers.hide !== false && dir.modifiers.hide != null)
   const flagFade = dir.modifiers.fade !== false && dir.modifiers.fade != null
 
-  const at = normalizeAtValue(value)
-  const info = ctx.calculate(at)
+  const info = ctx.calculate(value)
   if (!info)
     return null
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.0-beta.4",
+  "version": "0.49.0-beta.5",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,15 +29,15 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.7",
-    "@iconify-json/carbon": "^1.1.31",
+    "@iconify-json/carbon": "^1.1.32",
     "@iconify-json/ph": "^1.1.12",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.3.0",
-    "@shikijs/vitepress-twoslash": "^1.3.0",
+    "@shikijs/monaco": "^1.4.0",
+    "@shikijs/vitepress-twoslash": "^1.4.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
-    "@unhead/vue": "^1.9.5",
-    "@unocss/reset": "^0.59.3",
+    "@unhead/vue": "^1.9.8",
+    "@unocss/reset": "^0.59.4",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
@@ -49,21 +49,20 @@
     "katex": "^0.16.10",
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.0",
-    "monaco-editor": "^0.47.0",
+    "monaco-editor": "^0.48.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.3.0",
-    "shiki-magic-move": "^0.3.6",
+    "shiki": "^1.4.0",
+    "shiki-magic-move": "^0.3.7",
     "typescript": "^5.4.5",
-    "unocss": "^0.59.3",
-    "vue": "^3.4.22",
-    "vue-demi": "^0.14.7",
-    "vue-router": "^4.3.0",
-    "yaml": "^2.4.1",
-    "@slidev/parser": "0.49.0-beta.4",
-    "@slidev/types": "0.49.0-beta.4"
+    "unocss": "^0.59.4",
+    "vue": "^3.4.26",
+    "vue-router": "^4.3.2",
+    "yaml": "^2.4.2",
+    "@slidev/parser": "0.49.0-beta.5",
+    "@slidev/types": "0.49.0-beta.5"
   },
   "devDependencies": {
-    "vite": "^5.2.9"
+    "vite": "^5.2.11"
   }
 }

package/pages/entry.vue

@@ -1,32 +1,26 @@
 <template>
   <div class="h-full w-full flex items-center justify-center gap-5 lt-md:flex-col">
-    <RouterLink
-      to="/"
-      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
-    >
-      <carbon:presentation-file class="text-3em op50" />
-      Slides
+    <RouterLink to="/" class="page-link">
+      <carbon:presentation-file /> Slides
     </RouterLink>
-    <RouterLink
-      to="/presenter"
-      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
-    >
-      <carbon:user-speaker class="text-3em op50" />
-      Presenter
+    <RouterLink to="/presenter" class="page-link">
+      <carbon:user-speaker /> Presenter
     </RouterLink>
-    <RouterLink
-      to="/notes"
-      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
-    >
-      <carbon:catalog class="text-3em op50" />
-      Notes
+    <RouterLink to="/notes" class="page-link">
+      <carbon:catalog /> Notes
     </RouterLink>
-    <RouterLink
-      to="/overview"
-      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
-    >
-      <carbon:list-boxes class="text-3em op50" />
-      Overview
+    <RouterLink to="/overview" class="page-link">
+      <carbon:list-boxes /> Overview
     </RouterLink>
   </div>
 </template>
+
+<style scoped lang="postcss">
+.page-link {
+  @apply flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20;
+}
+
+.page-link > svg {
+  @apply text-3em op50;
+}
+</style>

package/pages/notes.vue

@@ -2,7 +2,7 @@
 import { useHead } from '@unhead/vue'
 import { computed, ref, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
-import { configs } from '../env'
+import { slidesTitle } from '../env'
 import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
 
@@ -10,10 +10,7 @@ import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
 import { useNav } from '../composables/useNav'
 
-const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
-useHead({
-  title: `Notes - ${slideTitle}`,
-})
+useHead({ title: `Notes - ${slidesTitle}` })
 
 const { slides, total } = useNav()
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
@@ -39,20 +36,20 @@ function decreaseFontSize() {
 
 <template>
   <div
-    class="fixed top-0 left-0 h-2px bg-teal-500 transition-all duration-500"
-    :style="{ width: `${(pageNo - 1) / total * 100}%` }"
+    class="fixed top-0 left-0 h-3px bg-primary transition-all duration-500"
+    :style="{ width: `${(pageNo - 1) / (total - 1) * 100 + 1}%` }"
   />
-  <div class="h-full flex flex-col">
+  <div class="h-full pt-2 flex flex-col">
     <div
       ref="scroller"
       class="px-5 flex-auto h-full overflow-auto"
       :style="{ fontSize: `${fontSize}px` }"
     >
       <NoteDisplay
-        :note="currentRoute?.meta?.slide?.note"
-        :note-html="currentRoute?.meta?.slide?.noteHTML"
+        :note="currentRoute?.meta.slide.note"
+        :note-html="currentRoute?.meta.slide.noteHTML"
         :placeholder="`No notes for Slide ${pageNo}.`"
-        :clicks-context="currentRoute?.meta?.__clicksContext"
+        :clicks-context="currentRoute?.meta.__clicksContext"
         :auto-scroll="true"
       />
     </div>

package/pages/overview.vue

@@ -2,11 +2,10 @@
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
-import { configs } from '../env'
+import { slidesTitle } from '../env'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
@@ -18,10 +17,7 @@ import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
 
-const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
-useHead({
-  title: `Overview - ${slideTitle}`,
-})
+useHead({ title: `Overview - ${slidesTitle}` })
 
 const { openInEditor, slides } = useNav()
 
@@ -102,7 +98,7 @@ onMounted(() => {
   <div class="h-screen w-screen of-hidden flex">
     <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 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-x-visible of-y-auto" style="direction:rtl">
           <div
             v-for="(route, idx) of slides"
             :key="route.no"
@@ -180,9 +176,7 @@ onMounted(() => {
               class="pointer-events-none important:[&_*]:select-none"
             >
               <SlideWrapper
-                :is="route.component!"
                 :clicks-context="getClicksContext(route)"
-                :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />
@@ -191,9 +185,8 @@ onMounted(() => {
           </div>
           <ClicksSlider
             v-if="getSlideClicks(route)"
-            mt-2
             :clicks-context="getClicksContext(route)"
-            class="w-full"
+            class="w-full mt-2"
             @dblclick="getClicksContext(route).current = CLICKS_MAX"
           />
         </div>

package/pages/play.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize } from '../state'
+import { isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { registerShortcuts } from '../logic/shortcuts'
-import { configs } from '../env'
 import Controls from '../internals/Controls.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
@@ -12,10 +11,9 @@ import PrintStyle from '../internals/PrintStyle.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import PresenterMouse from '../internals/PresenterMouse.vue'
 
-registerShortcuts()
-
-const { next, prev, isEmbedded, isPrintMode } = useNav()
+const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
 
 const root = ref<HTMLDivElement>()
@@ -25,7 +23,7 @@ function onClick(e: MouseEvent) {
 
   if (e.button === 0 && (e.target as HTMLElement)?.id === 'slide-container') {
     // click right to next, left to previous
-    if ((e.pageX / window.innerWidth) > 0.6)
+    if ((e.pageX / window.innerWidth) > 0.5)
       next()
     else
       prev()
@@ -33,16 +31,13 @@ function onClick(e: MouseEvent) {
 }
 
 useSwipeControls(root)
+registerShortcuts()
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
-
-const DrawingControls = shallowRef<any>()
-if (__SLIDEV_FEATURE_DRAWINGS__)
-  import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
 </script>
 
 <template>
@@ -52,16 +47,15 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
     :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
   >
     <SlideContainer
-      class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
       :width="isPrintMode ? windowSize.width.value : undefined"
-      :scale="slideScale"
-      :is-main="true"
+      is-main
       @pointerdown="onClick"
       @contextmenu="onContextMenu"
     >
       <template #default>
         <SlidesShow render-context="slide" />
+        <PresenterMouse />
       </template>
       <template #controls>
         <div
@@ -72,17 +66,11 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
             isDrawing ? 'pointer-events-none' : '',
           ]"
         >
-          <NavControls class="m-auto" :persist="persistNav" />
+          <NavControls :persist="persistNav" />
         </div>
-        <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded && DrawingControls">
-          <DrawingControls class="ml-0" />
-        </template>
       </template>
     </SlideContainer>
-
-    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor">
-      <SideEditor :resize="true" />
-    </template>
+    <SideEditor v-if="SideEditor && showEditor" :resize="true" />
   </div>
   <Controls v-if="!isPrintMode" />
 </template>