@slidev/client 0.32.1 → 0.32.4

package/builtin/Mermaid.vue

@@ -16,6 +16,7 @@ pie
 import { computed, getCurrentInstance, ref, watch, watchEffect } from 'vue'
 import { renderMermaid } from '../modules/mermaid'
 import ShadowRoot from '../internals/ShadowRoot.vue'
+import { isDark } from '../logic/dark'
 
 const props = defineProps<{
   code: string
@@ -25,7 +26,13 @@ const props = defineProps<{
 
 const vm = getCurrentInstance()
 const el = ref<HTMLDivElement>()
-const svgObj = computed(() => renderMermaid(props.code || '', Object.assign({ theme: props.theme }, vm!.attrs)))
+const svgObj = computed(() => renderMermaid(
+  props.code || '',
+  {
+    theme: props.theme || (isDark.value ? 'dark' : undefined),
+    ...vm!.attrs,
+  },
+))
 const html = computed(() => svgObj.value)
 const actualHeight = ref<number>()
 

package/builtin/Monaco.vue

@@ -74,11 +74,9 @@ onMounted(() => {
     'allow-top-navigation-by-user-activation',
   ].join(' '))
 
-  /* eslint-disable no-undef */
   frame.src = __DEV__
     ? `${location.origin}${__SLIDEV_CLIENT_ROOT__}/iframes/monaco/index.html`
     : `${import.meta.env.BASE_URL}iframes/monaco/index.html`
-  /* eslint-enable no-undef */
 
   frame.style.backgroundColor = 'transparent'
 

package/builtin/RenderWhen.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import type { RenderContext } from '@slidev/types'
+
+import { injectionSlideContext } from '../constants'
+
+type Context = 'main' | RenderContext
+
+const props = defineProps<{
+  context: Context | Context[]
+}>()
+const { context } = props
+
+const currentContext = inject(injectionSlideContext)
+
+const shouldRender = computed(() => Array.isArray(context) ? context.some(contextMatch) : contextMatch(context))
+
+function contextMatch(context: Context) {
+  if (context === currentContext)
+    return true
+  if (context === 'main' && (currentContext === 'slide' || currentContext === 'presenter'))
+    return true
+  return false
+}
+</script>
+
+<template>
+  <slot v-if="shouldRender" />
+</template>

package/constants.ts

@@ -1,5 +1,6 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
+import type { RenderContext } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
@@ -9,6 +10,7 @@ export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-cli
 export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
 export const injectionSlidevContext: InjectionKey<SlidevContext> = Symbol('slidev-slidev-context')
 export const injectionRoute: InjectionKey<RouteRecordRaw> = Symbol('slidev-route')
+export const injectionSlideContext: InjectionKey<RenderContext> = Symbol('slidev-slide-context')
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

package/internals/Play.vue

@@ -48,8 +48,8 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :scale="slideScale"
       @pointerdown="onClick"
     >
-      <template #>
-        <SlidesShow />
+      <template #default>
+        <SlidesShow context="slide" />
       </template>
       <template #controls>
         <div

package/internals/Presenter.vue

@@ -52,7 +52,7 @@ const nextSlide = computed(() => {
   }
 })
 
-// sync presenter cusor
+// sync presenter cursor
 onMounted(() => {
   const slidesContainer = main.value!.querySelector('#slide-content')!
   const mouse = reactive(useMouse())
@@ -102,8 +102,8 @@ onMounted(() => {
           key="main"
           class="h-full w-full"
         >
-          <template #>
-            <SlidesShow />
+          <template #default>
+            <SlidesShow context="presenter" />
           </template>
         </SlideContainer>
       </div>
@@ -120,6 +120,7 @@ onMounted(() => {
             :clicks-disabled="false"
             :class="getSlideClass(nextSlide.route)"
             :route="nextSlide.route"
+            context="previewNext"
           />
         </SlideContainer>
       </div>

package/internals/SlideWrapper.ts

@@ -1,6 +1,6 @@
 import { useVModel } from '@vueuse/core'
 import { defineComponent, h, provide } from 'vue'
-import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute } from '../constants'
+import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute, injectionSlideContext } from '../constants'
 
 export default defineComponent({
   props: {
@@ -20,6 +20,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    context: {
+      type: String,
+      default: 'main',
+    },
     is: {
       type: Object,
       default: undefined,
@@ -38,6 +42,7 @@ export default defineComponent({
     clicksElements.value.length = 0
 
     provide(injectionRoute, props.route)
+    provide(injectionSlideContext, props.context)
     provide(injectionClicks, clicks)
     provide(injectionClicksDisabled, clicksDisabled)
     provide(injectionClicksElements, clicksElements)

package/internals/SlidesOverview.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { breakpoints, windowSize } from '../state'
-import { go as goSlide, rawRoutes } from '../logic/nav'
+import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
+import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { getSlideClass } from '../utils'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
@@ -22,6 +23,12 @@ function go(page: number) {
   close()
 }
 
+function focus(page: number) {
+  if (page === currentOverviewPage.value)
+    return true
+  return false
+}
+
 const xs = breakpoints.smaller('xs')
 const sm = breakpoints.smaller('sm')
 
@@ -34,6 +41,18 @@ const cardWidth = computed(() => {
     return (windowSize.width.value - padding - gap) / 2
   return 300
 })
+
+const rowCount = computed(() => {
+  return Math.floor((windowSize.width.value - padding) / (cardWidth.value + gap))
+})
+
+watchEffect(() => {
+  // Watch currentPage, make sure every time we open overview,
+  // we focus on the right page.
+  currentOverviewPage.value = currentPage.value
+  // Watch rowCount, make sure up and down shortcut work correctly.
+  overviewRowCount.value = rowCount.value
+})
 </script>
 
 <template>
@@ -52,6 +71,7 @@ const cardWidth = computed(() => {
       >
         <div
           class="inline-block border border-gray-400 rounded border-opacity-50 overflow-hidden bg-main hover:(border-$slidev-theme-primary)"
+          :class="{ 'border-$slidev-theme-primary': focus(idx + 1) }"
           @click="go(+route.path)"
         >
           <SlideContainer
@@ -65,6 +85,7 @@ const cardWidth = computed(() => {
               :clicks-disabled="true"
               :class="getSlideClass(route)"
               :route="route"
+              context="overview"
             />
             <DrawingPreview :page="+route.path" />
           </SlideContainer>

package/internals/SlidesShow.vue

@@ -9,6 +9,8 @@ import GlobalTop from '/@slidev/global-components/top'
 import GlobalBottom from '/@slidev/global-components/bottom'
 import PresenterMouse from './PresenterMouse.vue'
 
+defineProps<{ context: 'slide' | 'presenter' }>()
+
 // preload next route
 watch(currentRoute, () => {
   if (currentRoute.value?.meta && currentRoute.value.meta.preload !== false)
@@ -37,6 +39,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
       :clicks-disabled="false"
       :class="getSlideClass(route)"
       :route="route"
+      :context="context"
     />
   </template>
 

package/logic/overview.ts

@@ -0,0 +1,41 @@
+import { computed, ref } from 'vue'
+import { rawRoutes } from '../routes'
+
+// To have same format(.value) as max, wrap it with ref.
+const min = ref(1)
+// The last page is an end page generated by slidev,
+// so we need to subtract 1.
+const max = computed(() => rawRoutes.length - 1)
+
+export const currentOverviewPage = ref(0)
+export const overviewRowCount = ref(0)
+
+export function prevOverviewPage() {
+  if (currentOverviewPage.value > min.value)
+    currentOverviewPage.value -= 1
+}
+
+export function nextOverviewPage() {
+  if (currentOverviewPage.value < max.value)
+    currentOverviewPage.value += 1
+}
+
+export function upOverviewPage() {
+  if (currentOverviewPage.value > min.value) {
+    let current = currentOverviewPage.value - overviewRowCount.value
+    if (current < min.value)
+      current = min.value
+
+    currentOverviewPage.value = current
+  }
+}
+
+export function downOverviewPage() {
+  if (currentOverviewPage.value < max.value) {
+    let current = currentOverviewPage.value + overviewRowCount.value
+    if (current > max.value)
+      current = max.value
+
+    currentOverviewPage.value = current
+  }
+}

package/logic/shortcuts.ts

@@ -6,8 +6,9 @@ import type { ShortcutOptions } from '@slidev/types'
 import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled, showGotoDialog, showOverview, toggleOverview } from '../state'
 import setupShortcuts from '../setup/shortcuts'
 import { toggleDark } from './dark'
-import { next, nextSlide, prev, prevSlide } from './nav'
+import { go, next, nextSlide, prev, prevSlide } from './nav'
 import { drawingEnabled } from './drawings'
+import { currentOverviewPage, downOverviewPage, nextOverviewPage, prevOverviewPage, upOverviewPage } from './overview'
 
 const _shortcut = and(not(isInputting), not(isOnFocus), shortcutsEnabled)
 
@@ -46,23 +47,28 @@ export function strokeShortcut(key: KeyFilter, fn: Fn) {
 export function registerShortcuts() {
   const customShortcuts = setupShortcuts()
 
-  const { escape, space, shift, left, right, d, g, o } = magicKeys
+  const { escape, space, shift, left, right, up, down, enter, d, g, o } = magicKeys
   const shortcuts = new Map<string | Ref<Boolean>, ShortcutOptions>(
     [
       { key: and(space, not(shift)), fn: next, autoRepeat: true },
       { key: and(space, shift), fn: prev, autoRepeat: true },
-      { key: and(right, not(shift)), fn: next, autoRepeat: true },
-      { key: and(left, not(shift)), fn: prev, autoRepeat: true },
+      { key: and(right, not(shift), not(showOverview)), fn: next, autoRepeat: true },
+      { key: and(left, not(shift), not(showOverview)), fn: prev, autoRepeat: true },
       { key: 'pageDown', fn: next, autoRepeat: true },
       { key: 'pageUp', fn: prev, autoRepeat: true },
-      { key: 'up', fn: () => prevSlide(false), autoRepeat: true },
-      { key: 'down', fn: nextSlide, autoRepeat: true },
+      { key: and(up, not(showOverview)), fn: () => prevSlide(false), autoRepeat: true },
+      { key: and(down, not(showOverview)), fn: nextSlide, autoRepeat: true },
       { key: and(left, shift), fn: () => prevSlide(false), autoRepeat: true },
       { key: and(right, shift), fn: nextSlide, autoRepeat: true },
       { key: and(d, not(drawingEnabled)), fn: toggleDark },
       { key: and(o, not(drawingEnabled)), fn: toggleOverview },
       { key: and(escape, not(drawingEnabled)), fn: () => showOverview.value = false },
       { key: and(g, not(drawingEnabled)), fn: () => showGotoDialog.value = !showGotoDialog.value },
+      { key: and(left, showOverview), fn: prevOverviewPage },
+      { key: and(right, showOverview), fn: nextOverviewPage },
+      { key: and(up, showOverview), fn: upOverviewPage },
+      { key: and(down, showOverview), fn: downOverviewPage },
+      { key: and(enter, showOverview), fn: () => { go(currentOverviewPage.value); showOverview.value = false } },
       ...customShortcuts,
     ]
       .map((options: ShortcutOptions) => [options.key, options]),

package/package.json

@@ -1,30 +1,33 @@
 {
   "name": "@slidev/client",
-  "version": "0.32.1",
+  "version": "0.32.4",
   "description": "Presentation slides for developers",
-  "homepage": "https://sli.dev",
-  "bugs": "https://github.com/slidevjs/slidev/issues",
-  "license": "MIT",
   "author": "antfu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/antfu",
+  "homepage": "https://sli.dev",
   "repository": {
     "type": "git",
     "url": "https://github.com/slidevjs/slidev"
   },
-  "funding": "https://github.com/sponsors/antfu",
+  "bugs": "https://github.com/slidevjs/slidev/issues",
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "dependencies": {
     "@antfu/utils": "^0.5.2",
-    "@slidev/parser": "0.32.1",
-    "@slidev/types": "0.32.1",
-    "@vueuse/core": "^8.5.0",
+    "@slidev/parser": "0.32.4",
+    "@slidev/types": "0.32.4",
+    "@vueuse/core": "^8.6.0",
     "@vueuse/head": "^0.7.6",
     "@vueuse/motion": "^2.0.0-beta.18",
-    "codemirror": "^5.65.3",
+    "codemirror": "^5.65.5",
     "defu": "^6.0.0",
     "drauu": "^0.3.0",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "js-yaml": "^4.1.0",
-    "katex": "^0.15.3",
+    "katex": "^0.15.6",
     "mermaid": "^9.1.1",
     "monaco-editor": "^0.33.0",
     "nanoid": "^3.3.4",
@@ -32,12 +35,9 @@
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.0",
     "vite-plugin-windicss": "^1.8.4",
-    "vue": "^3.2.34",
+    "vue": "^3.2.36",
     "vue-router": "^4.0.15",
-    "vue-starport": "^0.2.10",
+    "vue-starport": "^0.2.11",
     "windicss": "^3.5.4"
-  },
-  "engines": {
-    "node": ">=14.0.0"
   }
 }

package/shim.d.ts

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-duplicates */
-
 declare interface Window {
   // extend the window
 }