@slidev/client 0.25.2 → 0.25.6

package/constants.ts

@@ -8,6 +8,7 @@ export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('sl
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'
+export const CLASS_VCLICK_FADE = 'slidev-vclick-fade'
 export const CLASS_VCLICK_GONE = 'slidev-vclick-gone'
 export const CLASS_VCLICK_HIDDEN_EXP = 'slidev-vclick-hidden-explicitly'
 export const CLASS_VCLICK_CURRENT = 'slidev-vclick-current'

package/internals/NoteEditor.vue

@@ -59,15 +59,24 @@ onClickOutside(input, () => {
 </script>
 
 <template>
-  <div
-    v-show="!editing && note"
-    class="prose overflow-auto outline-none"
-    :class="props.class"
-    @click="switchNoteEdit"
-    v-html="info?.notesHTML"
-  />
+  <template v-if="!editing && note">
+    <div
+      v-if="info?.notesHTML"
+      class="prose overflow-auto outline-none"
+      :class="props.class"
+      @click="switchNoteEdit"
+      v-html="info?.notesHTML"
+    ></div>
+    <div
+      v-else
+      class="prose overflow-auto outline-none"
+      :class="props.class"
+      @click="switchNoteEdit"
+      v-text="note"
+    ></div>
+  </template>
   <textarea
-    v-show="editing || !note"
+    v-else
     ref="input"
     v-model="note"
     class="prose resize-none overflow-auto outline-none bg-transparent block"

package/internals/Presenter.vue

@@ -79,7 +79,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-main h-full">
+  <div class="bg-main h-full slidev-presenter">
     <div class="grid-container">
       <div class="grid-section top flex">
         <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto" />
@@ -141,6 +141,10 @@ onMounted(() => {
 </template>
 
 <style lang="postcss" scoped>
+.slidev-presenter {
+  --slidev-controls-foreground: current;
+}
+
 .timer-btn:hover {
   & > :first-child {
     @apply opacity-0;

package/internals/SlidesOverview.vue

@@ -22,15 +22,15 @@ function go(page: number) {
   close()
 }
 
+const xs = breakpoints.smaller('xs')
 const sm = breakpoints.smaller('sm')
-const md = breakpoints.smaller('md')
 
 const padding = 4 * 16 * 2
 const gap = 2 * 16
 const cardWidth = computed(() => {
-  if (sm.value)
+  if (xs.value)
     return windowSize.width.value - padding
-  else if (md.value)
+  else if (sm.value)
     return (windowSize.width.value - padding - gap) / 2
   return 300
 })

package/logic/drawings.ts

@@ -49,6 +49,7 @@ export const drawingMode = computed({
 export const drauuOptions: DrauuOptions = reactive({
   brush,
   acceptsInputTypes: computed(() => drawingEnabled.value ? undefined : ['pen' as const]),
+  coordinateTransform: false,
 })
 export const drauu = markRaw(createDrauu(drauuOptions))
 

package/logic/nav.ts

@@ -1,16 +1,19 @@
 import { computed, Ref, ref, nextTick } from 'vue'
-import { isString, SwipeDirection, timestamp, useSwipe } from '@vueuse/core'
+import { isString, SwipeDirection, timestamp, usePointerSwipe } from '@vueuse/core'
 import { rawRoutes, router } from '../routes'
 import { configs } from '../env'
 import { useRouteQuery } from './route'
+import { isDrawing } from './drawings'
 
 export { rawRoutes, router }
 
 // force update collected elements when the route is fully resolved
 const routeForceRefresh = ref(0)
-router.afterEach(async() => {
-  await nextTick()
-  routeForceRefresh.value += 1
+nextTick(() => {
+  router.afterEach(async() => {
+    await nextTick()
+    routeForceRefresh.value += 1
+  })
 })
 
 export const route = computed(() => router.currentRoute.value)
@@ -91,15 +94,24 @@ export function go(page: number, clicks?: number) {
 
 export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
   const swipeBegin = ref(0)
-  const { direction, lengthX, lengthY } = useSwipe(root, {
-    onSwipeStart() {
+  const { direction, distanceX, distanceY } = usePointerSwipe(root, {
+    onSwipeStart(e) {
+      if (e.pointerType !== 'touch')
+        return
+      if (isDrawing.value)
+        return
       swipeBegin.value = timestamp()
     },
-    onSwipeEnd() {
+    onSwipeEnd(e) {
+      if (e.pointerType !== 'touch')
+        return
       if (!swipeBegin.value)
         return
-      const x = Math.abs(lengthX.value)
-      const y = Math.abs(lengthY.value)
+      if (isDrawing.value)
+        return
+
+      const x = Math.abs(distanceX.value)
+      const y = Math.abs(distanceY.value)
       if (x / window.innerWidth > 0.3 || x > 100) {
         if (direction.value === SwipeDirection.LEFT)
           next()

package/logic/note.ts

@@ -4,7 +4,7 @@ import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
 
 export interface UseSlideInfo{
   info: Ref<SlideInfoExtended | undefined>
-  update: (data: Partial<SlideInfo>) => Promise<void>
+  update: (data: Partial<SlideInfo>) => Promise<SlideInfoExtended | void>
 }
 
 export function useSlideInfo(id: number | undefined): UseSlideInfo {
@@ -20,7 +20,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
   execute()
 
   const update = async(data: Partial<SlideInfo>) => {
-    await fetch(
+    return await fetch(
       url,
       {
         method: 'POST',
@@ -30,12 +30,12 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
         },
         body: JSON.stringify(data),
       },
-    )
+    ).then(r => r.json())
   }
 
-  import.meta.hot?.on('slidev-update', (playload) => {
-    if (playload.id === id)
-      info.value = playload.data
+  import.meta.hot?.on('slidev-update', (payload) => {
+    if (payload.id === id)
+      info.value = payload.data
   })
 
   return {
@@ -56,6 +56,12 @@ export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
 
   return {
     info: computed(() => get(unref(id)).info.value),
-    update: (data: Partial<SlideInfo>, newId?: number) => get(newId ?? unref(id)).update(data),
+    update: async(data: Partial<SlideInfo>, newId?: number) => {
+      const info = get(newId ?? unref(id))
+      const newData = await info.update(data)
+      if (newData)
+        info.info.value = newData
+      return newData
+    },
   }
 }

package/modules/directives.ts

@@ -2,8 +2,16 @@ import { App, DirectiveBinding, InjectionKey, watch } from 'vue'
 import { remove } from '@antfu/utils'
 import { isPrintMode, isPrintWithClicks } from '../logic/nav'
 import {
-  injectionClicksDisabled, injectionClicksElements, injectionClicks, injectionOrderMap,
-  CLASS_VCLICK_CURRENT, CLASS_VCLICK_HIDDEN, CLASS_VCLICK_HIDDEN_EXP, CLASS_VCLICK_PRIOR, CLASS_VCLICK_TARGET,
+  injectionClicksDisabled,
+  injectionClicksElements,
+  injectionClicks,
+  injectionOrderMap,
+  CLASS_VCLICK_CURRENT,
+  CLASS_VCLICK_HIDDEN,
+  CLASS_VCLICK_HIDDEN_EXP,
+  CLASS_VCLICK_PRIOR,
+  CLASS_VCLICK_TARGET,
+  CLASS_VCLICK_FADE,
 } from '../constants'
 
 function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
@@ -26,9 +34,12 @@ export default function createDirectives() {
           const orderMap = dirInject(dir, injectionOrderMap)
 
           const hide = dir.modifiers.hide
+          const fade = dir.modifiers.fade
 
           const prev = elements?.value?.length || 0
 
+          const CLASS_HIDE = fade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN
+
           if (elements && !elements?.value?.includes(el))
             elements.value.push(el)
 
@@ -59,11 +70,12 @@ export default function createDirectives() {
                 const show = dir.value != null
                   ? c >= dir.value
                   : c > prev
+
                 if (!el.classList.contains(CLASS_VCLICK_HIDDEN_EXP))
-                  el.classList.toggle(CLASS_VCLICK_HIDDEN, !show)
+                  el.classList.toggle(CLASS_HIDE, !show)
 
                 if (hide !== false && hide !== undefined)
-                  el.classList.toggle(CLASS_VCLICK_HIDDEN, show)
+                  el.classList.toggle(CLASS_HIDE, show)
 
                 // Reset CLASS_VCLICK_CURRENT to false.
                 el.classList.toggle(CLASS_VCLICK_CURRENT, false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.25.2",
+  "version": "0.25.6",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
@@ -13,13 +13,13 @@
   "author": "antfu <anthonyfu117@hotmail.com>",
   "dependencies": {
     "@antfu/utils": "^0.3.0",
-    "@slidev/parser": "0.25.2",
-    "@slidev/types": "0.25.2",
+    "@slidev/parser": "0.25.6",
+    "@slidev/types": "0.25.6",
     "@vueuse/core": "^6.4.0",
     "@vueuse/head": "^0.6.0",
     "@vueuse/motion": "^1.6.0",
     "codemirror": "^5.62.3",
-    "drauu": "0.1.0",
+    "drauu": "^0.2.0",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.1",
     "js-yaml": "^4.1.0",
@@ -30,7 +30,7 @@
     "prettier": "^2.4.1",
     "recordrtc": "^5.6.2",
     "resolve": "^1.20.0",
-    "vite-plugin-windicss": "^1.4.3",
+    "vite-plugin-windicss": "^1.4.5",
     "vue": "^3.2.12",
     "vue-router": "^4.0.11",
     "windicss": "^3.1.7"

package/state/index.ts

@@ -2,13 +2,15 @@ import { useMagicKeys, useActiveElement, useStorage, useBreakpoints, breakpoints
 import { computed, ref } from 'vue'
 import { slideAspect } from '../env'
 
-export const showOverview = ref(false)
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)
 export const showGotoDialog = ref(false)
 
 export const shortcutsEnabled = ref(true)
-export const breakpoints = useBreakpoints(breakpointsTailwind)
+export const breakpoints = useBreakpoints({
+  xs: 460,
+  ...breakpointsTailwind,
+})
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
 export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 180)
@@ -22,6 +24,7 @@ export const currentCamera = useStorage<string>('slidev-camera', 'default')
 export const currentMic = useStorage<string>('slidev-mic', 'default')
 export const slideScale = useStorage<number>('slidev-scale', 0)
 
+export const showOverview = useStorage('slidev-show-overview', false)
 export const showPresenterCursor = useStorage('slidev-presenter-cursor', true)
 export const showEditor = useStorage('slidev-show-editor', false)
 export const editorWidth = useStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 100)

package/styles/index.css

@@ -40,6 +40,10 @@ html {
   @apply !opacity-0 !pointer-events-none;
 }
 
+.slidev-vclick-fade {
+  @apply opacity-50;
+}
+
 .slidev-icon {
   display: inline-block;
   vertical-align: sub;