@slidev/client 0.43.0-beta.5 → 0.43.0-beta.7

package/composables/useNav.ts

@@ -28,6 +28,7 @@ export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormaliz
   const tree = computed(() => filterTree(treeWithActiveStatuses.value))
 
   return {
+    rawRoutes,
     route,
     path,
     total,

package/constants.ts

@@ -13,6 +13,7 @@ export const injectionSlidevContext: InjectionKey<UnwrapNestedRefs<SlidevContext
 export const injectionRoute: InjectionKey<RouteRecordRaw> = Symbol('slidev-route')
 export const injectionSlideContext: InjectionKey<RenderContext> = Symbol('slidev-slide-context')
 export const injectionActive: InjectionKey<Ref<boolean>> = Symbol('slidev-active')
+export const injectionFrontmatter: InjectionKey<Record<string, any>> = Symbol('slidev-fontmatter')
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

package/internals/SlidesOverview.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import { computed, watchEffect } from 'vue'
+import { useEventListener, useVModel } from '@vueuse/core'
+import { computed, ref, watchEffect } from 'vue'
 import { themeVars } from '../env'
-import { breakpoints, windowSize } from '../state'
+import { breakpoints, showOverview, windowSize } from '../state'
 import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { getSlideClass } from '../utils'
@@ -47,6 +47,46 @@ const rowCount = computed(() => {
   return Math.floor((windowSize.width.value - padding) / (cardWidth.value + gap))
 })
 
+const keyboardBuffer = ref<string>('')
+
+useEventListener('keypress', (e) => {
+  if (!showOverview.value) {
+    keyboardBuffer.value = ''
+    return
+  }
+  if (e.key === 'Enter' && keyboardBuffer.value) {
+    e.preventDefault()
+    go(+keyboardBuffer.value)
+    keyboardBuffer.value = ''
+    return
+  }
+  const num = Number.parseInt(e.key.replace(/[^0-9]/g, ''))
+  if (Number.isNaN(num)) {
+    keyboardBuffer.value = ''
+    return
+  }
+  if (!keyboardBuffer.value && num === 0)
+    return
+
+  keyboardBuffer.value += String(num)
+
+  // beyond the number of slides, reset
+  if (+keyboardBuffer.value >= rawRoutes.length) {
+    keyboardBuffer.value = ''
+    return
+  }
+
+  const extactMatch = rawRoutes.findIndex(i => i.path === keyboardBuffer.value)
+  if (extactMatch !== -1)
+    currentOverviewPage.value = extactMatch + 1
+
+  // When the input number is the largest at the number of digits, we go to that page directly.
+  if (+keyboardBuffer.value * 10 > rawRoutes.length) {
+    go(+keyboardBuffer.value)
+    keyboardBuffer.value = ''
+  }
+})
+
 watchEffect(() => {
   // Watch currentPage, make sure every time we open overview,
   // we focus on the right page.
@@ -79,7 +119,7 @@ watchEffect(() => {
         >
           <div
             class="inline-block border rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary transition"
-            :class="{ 'border-$slidev-theme-primary': focus(idx + 1), 'border-gray-400': !focus(idx + 1) }"
+            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-$slidev-theme-primary' : 'border-gray-400'"
             :style="themeVars"
             @click="go(+route.path)"
           >
@@ -101,10 +141,16 @@ watchEffect(() => {
             </SlideContainer>
           </div>
           <div
-            class="absolute top-0 opacity-50"
+            class="absolute top-0"
             :style="`left: ${cardWidth + 5}px`"
           >
-            {{ idx + 1 }}
+            <template v-if="keyboardBuffer && String(idx + 1).startsWith(keyboardBuffer)">
+              <span class="text-green font-bold">{{ keyboardBuffer }}</span>
+              <span class="opacity-50">{{ String(idx + 1).slice(keyboardBuffer.length) }}</span>
+            </template>
+            <span v-else class="opacity-50">
+              {{ idx + 1 }}
+            </span>
           </div>
         </div>
       </div>

package/modules/context.ts

@@ -9,7 +9,7 @@ import { isDark } from '../logic/dark'
 import { injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 
-export type SlidevContextNavKey = 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide'
+export type SlidevContextNavKey = 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes'
 export type SlidevContextNavClicksKey = 'clicks' | 'clicksElements' | 'clicksTotal' | 'hasNext' | 'hasPrev'
 
 export interface SlidevContextNav extends Pick<typeof nav, SlidevContextNavKey> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.43.0-beta.5",
+  "version": "0.43.0-beta.7",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -41,8 +41,8 @@
     "vue-router": "^4.2.4",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.0-beta.5",
-    "@slidev/types": "0.43.0-beta.5"
+    "@slidev/parser": "0.43.0-beta.7",
+    "@slidev/types": "0.43.0-beta.7"
   },
   "devDependencies": {
     "vite": "^4.4.9"

package/routes.ts

@@ -67,10 +67,14 @@ export const router = createRouter({
 
 declare module 'vue-router' {
   interface RouteMeta {
+    // inherited from frontmatter
     layout: string
     name?: string
     class?: string
     clicks?: number
+    transition?: string | TransitionGroupProps | undefined
+
+    // slide info
     slide?: {
       start: number
       end: number
@@ -85,7 +89,7 @@ declare module 'vue-router' {
       content: string
       frontmatter: Record<string, any>
     }
-    transition?: string | TransitionGroupProps | undefined
+
     // private fields
     __clicksElements: HTMLElement[]
     __preloaded?: boolean

package/setup/shortcuts.ts

@@ -1,5 +1,5 @@
 /* __imports__ */
-import { and, not } from '@vueuse/math'
+import { and, not, or } from '@vueuse/math'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
 import { downloadPDF, go, goFirst, goLast, next, nextSlide, prev, prevSlide } from '../logic/nav'
 import { toggleDark } from '../logic/dark'
@@ -8,7 +8,7 @@ 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
+  const { escape, space, shift, left, right, up, down, enter, d, g, o, '`': backtick } = magicKeys
 
   // @ts-expect-error injected in runtime
   // eslint-disable-next-line unused-imports/no-unused-vars
@@ -41,7 +41,7 @@ export default function setupShortcuts() {
     { 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: 'toggle_overview', key: and(or(o, backtick), 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 },