@slidev/client 0.34.2 → 0.35.1

package/builtin/CodeBlockWrapper.vue

@@ -27,6 +27,10 @@ const props = defineProps({
     type: Number,
     default: undefined,
   },
+  maxHeight: {
+    type: String,
+    default: undefined,
+  },
 })
 
 const clicks = inject(injectionClicks)
@@ -76,6 +80,11 @@ onMounted(() => {
         line.classList.toggle('highlighted', highlighted)
         line.classList.toggle('dishonored', !highlighted)
       })
+      if (props.maxHeight) {
+        const firstHighlightedEl = target.querySelector('.line.highlighted')
+        if (firstHighlightedEl)
+          firstHighlightedEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
     }
   })
 })
@@ -90,7 +99,13 @@ function copyCode() {
 </script>
 
 <template>
-  <div ref="el" class="slidev-code-wrapper relative group">
+  <div
+    ref="el" class="slidev-code-wrapper relative group"
+    :style="{
+      'max-height': props.maxHeight,
+      'overflow-y': props.maxHeight ? 'scroll' : undefined,
+    }"
+  >
     <slot />
     <button
       v-if="configs.codeCopy"

package/internals/Presenter.vue

@@ -94,7 +94,7 @@ onMounted(() => {
           <carbon:time class="absolute" />
           <carbon:renew class="absolute opacity-0" />
         </div>
-        <div class="text-2xl pl-2 pr-6 my-auto">
+        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
           {{ timer }}
         </div>
       </div>

package/logic/nav.ts

@@ -115,6 +115,14 @@ export async function prevSlide(lastClicks = true) {
     router.replace({ query: { ...route.value.query, clicks: clicksTotal.value } })
 }
 
+export function goFirst() {
+  return go(1)
+}
+
+export function goLast() {
+  return go(total.value)
+}
+
 export function go(page: number | string, clicks?: number) {
   return router.push({ path: getPath(page), query: { ...route.value.query, clicks } })
 }

package/logic/shortcuts.ts

@@ -1,14 +1,11 @@
 import type { Fn, KeyFilter } from '@vueuse/core'
-import { and, not, onKeyStroke } from '@vueuse/core'
+import { onKeyStroke } from '@vueuse/core'
+import { and, not } from '@vueuse/math'
 import type { Ref } from 'vue'
 import { watch } from 'vue'
 import type { ShortcutOptions } from '@slidev/types'
-import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled, showGotoDialog, showOverview, toggleOverview } from '../state'
+import { fullscreen, isInputting, isOnFocus, magicKeys, shortcutsEnabled } from '../state'
 import setupShortcuts from '../setup/shortcuts'
-import { toggleDark } from './dark'
-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)
 
@@ -45,33 +42,10 @@ export function strokeShortcut(key: KeyFilter, fn: Fn) {
 }
 
 export function registerShortcuts() {
-  const customShortcuts = setupShortcuts()
+  const { customShortcuts, defaultShortcuts } = setupShortcuts()
 
-  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), 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: 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]),
+    [...defaultShortcuts, ...customShortcuts].map((options: ShortcutOptions) => [options.key, options]),
   )
 
   shortcuts.forEach((options) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.34.2",
+  "version": "0.35.1",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,11 +16,12 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.5.2",
-    "@slidev/parser": "0.34.2",
-    "@slidev/types": "0.34.2",
-    "@unocss/reset": "^0.42.0",
-    "@vueuse/core": "^8.7.5",
-    "@vueuse/head": "^0.7.6",
+    "@slidev/parser": "0.35.1",
+    "@slidev/types": "0.35.1",
+    "@unocss/reset": "^0.45.1",
+    "@vueuse/core": "^9.0.1",
+    "@vueuse/head": "^0.7.8",
+    "@vueuse/math": "^9.0.1",
     "@vueuse/motion": "^2.0.0-beta.18",
     "codemirror": "^5.65.5",
     "defu": "^6.0.0",
@@ -35,11 +36,14 @@
     "prettier": "^2.7.1",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.1",
-    "unocss": "^0.42.0",
-    "vite-plugin-windicss": "^1.8.6",
+    "unocss": "^0.45.1",
+    "vite-plugin-windicss": "^1.8.7",
     "vue": "^3.2.37",
-    "vue-router": "^4.0.16",
+    "vue-router": "^4.1.3",
     "vue-starport": "^0.3.0",
-    "windicss": "^3.5.5"
+    "windicss": "^3.5.6"
+  },
+  "devDependencies": {
+    "vite": "^3.0.4"
   }
 }

package/setup/shortcuts.ts

@@ -1,12 +1,15 @@
 /* __imports__ */
-
+import { and, not } from '@vueuse/core'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
-import { downloadPDF, go, next, nextSlide, prev, prevSlide } from '../logic/nav'
+import { downloadPDF, go, goFirst, goLast, next, nextSlide, prev, prevSlide } from '../logic/nav'
 import { toggleDark } from '../logic/dark'
-import { showGotoDialog, showOverview, toggleOverview } from '../state'
+import { magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
 import { drawingEnabled } from '../logic/drawings'
+import { currentOverviewPage, downOverviewPage, nextOverviewPage, prevOverviewPage, upOverviewPage } from './../logic/overview'
 
 export default function setupShortcuts() {
+  const { escape, space, shift, left, right, up, down, enter, d, g, o } = magicKeys
+
   // @ts-expect-error injected in runtime
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const injection_arg: NavOperations = {
@@ -15,6 +18,8 @@ export default function setupShortcuts() {
     nextSlide,
     prevSlide,
     go,
+    goFirst,
+    goLast,
     downloadPDF,
     toggleDark,
     toggleOverview,
@@ -23,10 +28,32 @@ export default function setupShortcuts() {
     showGotoDialog: () => showGotoDialog.value = !showGotoDialog.value,
   }
 
+  const injection_arg_2: ShortcutOptions[] = [
+    { name: 'next_space', key: and(space, not(shift)), fn: next, autoRepeat: true },
+    { name: 'prev_space', key: and(space, shift), fn: prev, autoRepeat: true },
+    { name: 'next_right', key: and(right, not(shift), not(showOverview)), fn: next, autoRepeat: true },
+    { name: 'prev_left', key: and(left, not(shift), not(showOverview)), fn: prev, autoRepeat: true },
+    { name: 'next_page_key', key: 'pageDown', fn: next, autoRepeat: true },
+    { name: 'prev_page_key', key: 'pageUp', fn: prev, autoRepeat: true },
+    { name: 'next_down', key: and(down, not(showOverview)), fn: nextSlide, autoRepeat: true },
+    { name: 'prev_up', key: and(up, not(showOverview)), fn: () => prevSlide(false), autoRepeat: true },
+    { name: 'next_shift', key: and(right, shift), fn: nextSlide, autoRepeat: true },
+    { name: 'prev_shift', key: and(left, shift), fn: () => prevSlide(false), autoRepeat: true },
+    { name: 'toggle_dark', key: and(d, not(drawingEnabled)), fn: toggleDark },
+    { name: 'toggle_overview', key: and(o, not(drawingEnabled)), fn: toggleOverview },
+    { name: 'hide_overview', key: and(escape, not(drawingEnabled)), fn: () => showOverview.value = false },
+    { name: 'goto', key: and(g, not(drawingEnabled)), fn: () => showGotoDialog.value = !showGotoDialog.value },
+    { name: 'next_overview', key: and(right, showOverview), fn: nextOverviewPage },
+    { name: 'prev_overview', key: and(left, showOverview), fn: prevOverviewPage },
+    { name: 'up_overview', key: and(up, showOverview), fn: upOverviewPage },
+    { name: 'down_overview', key: and(down, showOverview), fn: downOverviewPage },
+    { name: 'goto_from_overview', key: and(enter, showOverview), fn: () => { go(currentOverviewPage.value); showOverview.value = false } },
+  ]
+
   // eslint-disable-next-line prefer-const
   let injection_return: Array<ShortcutOptions> = []
 
   /* __injections__ */
 
-  return injection_return
+  return { customShortcuts: injection_return, defaultShortcuts: injection_arg_2 }
 }

package/styles/code.css

@@ -6,8 +6,15 @@ html:not(.dark) .shiki-dark {
   display: none;
 }
 
+::-webkit-scrollbar {
+  width: 0px;
+}
+
 .slidev-code-wrapper {
   margin: var(--slidev-code-margin) !important;
+  &:-webkit-scrollbar {
+    width: 0px;
+  }
 }
 
 .slidev-code {