@slidev/client 0.31.4 → 0.32.3

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/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

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,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.31.4",
+  "version": "0.32.3",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
@@ -13,18 +13,18 @@
   "funding": "https://github.com/sponsors/antfu",
   "dependencies": {
     "@antfu/utils": "^0.5.2",
-    "@slidev/parser": "0.31.4",
-    "@slidev/types": "0.31.4",
-    "@vueuse/core": "^8.4.2",
+    "@slidev/parser": "0.32.3",
+    "@slidev/types": "0.32.3",
+    "@vueuse/core": "^8.5.0",
     "@vueuse/head": "^0.7.6",
     "@vueuse/motion": "^2.0.0-beta.18",
-    "codemirror": "^5.65.3",
+    "codemirror": "^5.65.4",
     "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,10 +32,10 @@
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.0",
     "vite-plugin-windicss": "^1.8.4",
-    "vue": "^3.2.33",
+    "vue": "^3.2.35",
     "vue-router": "^4.0.15",
     "vue-starport": "^0.2.10",
-    "windicss": "^3.5.3"
+    "windicss": "^3.5.4"
   },
   "engines": {
     "node": ">=14.0.0"