@slidev/client 52.14.2 → 52.15.1

package/pages/presenter.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { useEventListener, useLocalStorage, useMediaQuery, useMouse, useWindowFocus } from '@vueuse/core'
-import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
+import { useEventListener, useLocalStorage, useMediaQuery, useWindowFocus } from '@vueuse/core'
+import { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { createClicksContextBase } from '../composables/useClicks'
 import { useDrawings } from '../composables/useDrawings'
+import { useMousePosInSlide } from '../composables/useMousePosInSlide'
 import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { useWakeLock } from '../composables/useWakeLock'
@@ -14,6 +15,7 @@ import CurrentProgressBar from '../internals/CurrentProgressBar.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import Goto from '../internals/Goto.vue'
 import IconButton from '../internals/IconButton.vue'
+import LaserPointer from '../internals/LaserPointer.vue'
 import NavControls from '../internals/NavControls.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
@@ -27,7 +29,7 @@ import TimerBar from '../internals/TimerBar.vue'
 import TimerInlined from '../internals/TimerInlined.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { registerShortcuts } from '../logic/shortcuts'
-import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
+import { cursorStyle, decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
 import { sharedState } from '../state/shared'
 
 const inFocus = useWindowFocus()
@@ -244,28 +246,20 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
 
 // sync presenter cursor
 onMounted(() => {
-  const slidesContainer = main.value!.querySelector('#slide-content')!
-  const mouse = reactive(useMouse())
+  const mouse = useMousePosInSlide()
   const focus = useWindowFocus()
 
-  watch(
-    () => {
-      if (!focus.value || isDrawing.value || !showPresenterCursor.value || !slidesContainer)
-        return undefined
-
-      const rect = slidesContainer.getBoundingClientRect()
-      const x = (mouse.x - rect.left) / rect.width * 100
-      const y = (mouse.y - rect.top) / rect.height * 100
-
-      if (x < 0 || x > 100 || y < 0 || y > 100)
-        return undefined
-
-      return { x, y }
-    },
-    (pos) => {
-      sharedState.cursor = pos
-    },
-  )
+  watchEffect(() => {
+    if (!mouse.value || !focus.value || isDrawing.value || !showPresenterCursor.value) {
+      sharedState.cursor = undefined
+    }
+    else {
+      sharedState.cursor = {
+        ...mouse.value,
+        style: cursorStyle.value,
+      }
+    }
+  })
 })
 </script>
 
@@ -328,6 +322,7 @@ onMounted(() => {
           @contextmenu="onContextMenu"
         >
           <SlidesShow render-context="presenter" />
+          <LaserPointer />
         </SlideContainer>
 
         <ClicksSlider

package/setup/main.ts

@@ -9,8 +9,7 @@ import { createVDragDirective } from '../modules/v-drag'
 import { createVMarkDirective } from '../modules/v-mark'
 import { createVMotionDirectives } from '../modules/v-motion'
 import setupRoutes from '../setup/routes'
-
-import '#slidev/styles'
+import '../styles'
 
 export default async function setupMain(app: App) {
   function setMaxHeight() {

package/setup/monaco.ts

@@ -56,12 +56,12 @@ StandaloneServices.initialize({
 })
 
 const setup = createSingletonPromise(async () => {
-  const defaults = monaco.languages.typescript.typescriptDefaults
+  const defaults = monaco.typescript.typescriptDefaults
   defaults.setCompilerOptions({
     ...defaults.getCompilerOptions(),
     strict: true,
-    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-    module: monaco.languages.typescript.ModuleKind.ESNext,
+    moduleResolution: monaco.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.typescript.ModuleKind.ESNext,
   })
 
   const ata = configs.monacoTypesSource === 'cdn'
@@ -137,7 +137,7 @@ const setup = createSingletonPromise(async () => {
 async function _addFile(raw: () => Promise<{ default: string }>, path: string) {
   const uri = monaco.Uri.file(path)
   const code = (await raw()).default
-  monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file:///${path}`)
+  monaco.typescript.typescriptDefaults.addExtraLib(code, `file:///${path}`)
   monaco.editor.createModel(code, 'javascript', uri)
 }
 

package/setup/root.ts

@@ -80,7 +80,7 @@ export default function setupRoot() {
     patch('lastUpdate', {
       id,
       type: syncType.value,
-      time: new Date().getTime(),
+      time: Date.now(),
     })
   }
   const router = useRouter()

package/shim-vue.d.ts

@@ -1,5 +1,7 @@
 declare module 'vue' {
-  type SlideContext = import('./context').SlideContext
+  import type { ShallowUnwrapRef } from 'vue'
+
+  type SlideContext = ShallowUnwrapRef<import('./context').SlideContext>
   interface ComponentCustomProperties extends SlideContext {
   }
 }

package/state/shared.ts

@@ -20,6 +20,7 @@ export interface SharedState {
   cursor?: {
     x: number
     y: number
+    style?: 'cursor' | 'laser'
   }
 
   lastUpdate?: {

package/state/storage.ts

@@ -55,6 +55,13 @@ export const skipExportPdfTip = useLocalStorage('slidev-skip-export-pdf-tip', fa
 export const captureDelay = useLocalStorage('slidev-export-capture-delay', 400, { listenToStorageChanges: false })
 
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
+
+export const cursorStyle = useLocalStorage<'cursor' | 'laser'>('slidev-cursor-style', 'cursor', { listenToStorageChanges: false })
+
+export function togglePresenterCursor() {
+  showPresenterCursor.value = !showPresenterCursor.value
+}
+
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
 export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })
 export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })

package/styles/index.css

@@ -45,24 +45,6 @@ html {
   @apply border-none hover:border-none hover:text-white;
 }
 
-.slidev-vclick-target {
-  @apply transition-opacity duration-100;
-}
-
-.slidev-vclick-hidden {
-  opacity: 0 !important;
-  pointer-events: none !important;
-  user-select: none !important;
-}
-
-.slidev-vclick-display-none {
-  display: none !important;
-}
-
-.slidev-vclick-fade {
-  opacity: 0.5;
-}
-
 .slidev-icon {
   display: inline-block;
   vertical-align: sub;
@@ -142,11 +124,15 @@ html {
 
 #twoslash-container {
   position: fixed;
-}
 
-#twoslash-container .v-popper__wrapper:not(.no-slide-scale > *) {
-  transform: scale(calc(1 * var(--slidev-slide-scale)));
-  transform-origin: 30px top;
+  .v-popper__wrapper:not(.no-slide-scale > *) {
+    zoom: var(--slidev-slide-scale);
+  }
+
+  .v-popper__popper:not(.no-slide-scale > *) {
+    translate: calc(10px * (1 - var(--slidev-slide-scale))) 0;
+    width: max-content;
+  }
 }
 
 .slidev-note ul {

package/styles/index.ts

@@ -0,0 +1,23 @@
+import '@unocss/reset/tailwind.css'
+
+import 'uno:preflights.css'
+import 'uno:typography.css'
+import 'uno:shortcuts.css'
+
+import '@shikijs/vitepress-twoslash/style.css'
+import 'shiki-magic-move/style.css'
+import 'markdown-it-github-alerts/styles/github-colors-light.css'
+import 'markdown-it-github-alerts/styles/github-colors-dark-media.css'
+import 'markdown-it-github-alerts/styles/github-base.css'
+
+import './vars.css'
+import './index.css'
+import './code.css'
+import './katex.css'
+import './transitions.css'
+import './shiki-twoslash.css'
+import './vclick.css'
+
+import '#slidev/conditional-styles'
+
+import 'uno.css'

package/styles/layouts-base.css

@@ -34,7 +34,7 @@
     @apply text-sm pt-1 uppercase tracking-widest font-500;
   }
 
-  h6:not(.opacity-100) {
+  :where(&) h6 {
     @apply opacity-40;
   }
 

package/styles/vclick.css

@@ -0,0 +1,54 @@
+.slidev-vclick-target {
+  transition: all 0.1s ease;
+
+  &.slidev-vclick-anim-none {
+    transition: none;
+  }
+
+  &.slidev-vclick-anim-fade-in {
+    transition: all 0.3s ease;
+  }
+}
+
+.slidev-vclick-hidden {
+  opacity: 0 !important;
+  pointer-events: none !important;
+  user-select: none !important;
+
+  &.slidev-vclick-anim-fade {
+    opacity: 0.5 !important;
+  }
+
+  &.slidev-vclick-anim-fade-in {
+    opacity: 0 !important;
+  }
+
+  &.slidev-vclick-anim-up {
+    translate: 0 20px;
+  }
+
+  &.slidev-vclick-anim-down {
+    translate: 0 -20px;
+  }
+
+  &.slidev-vclick-anim-left {
+    translate: 20px 0;
+  }
+
+  &.slidev-vclick-anim-right {
+    translate: -20px 0;
+  }
+
+  &.slidev-vclick-anim-scale {
+    scale: 0.9;
+  }
+}
+
+.slidev-vclick-display-none {
+  display: none !important;
+}
+
+/* No longer used, but kept for backward compatibility */
+.slidev-vclick-fade {
+  opacity: 0.5;
+}