@slidev/client 0.43.0-beta.4 → 0.43.0-beta.6

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

@@ -5,12 +5,14 @@ import type { SlidevContext } from './modules/context'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
 export const injectionClicksElements: InjectionKey<Ref<(Element | string)[]>> = Symbol('v-click-clicks-elements')
-export const injectionOrderMap: InjectionKey<Ref<Map<number, HTMLElement[]>>> = Symbol('v-click-clicks-order-map')
 export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-click-clicks-disabled')
+export const injectionOrderMap: InjectionKey<Ref<Map<number, HTMLElement[]>>> = Symbol('v-click-clicks-order-map')
+export const injectionCurrentPage: InjectionKey<number> = Symbol('slidev-page')
 export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
 export const injectionSlidevContext: InjectionKey<UnwrapNestedRefs<SlidevContext>> = Symbol('slidev-slidev-context')
 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 CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

package/internals/SlideWrapper.ts

@@ -1,8 +1,8 @@
 import { useVModel } from '@vueuse/core'
 import type { Ref } from 'vue'
-import { defineComponent, h, provide } from 'vue'
+import { defineComponent, h, provide, toRef } from 'vue'
 import type { RenderContext } from '@slidev/types'
-import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute, injectionSlideContext } from '../constants'
+import { injectionActive, injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionCurrentPage, injectionOrderMap, injectionRoute, injectionSlideContext } from '../constants'
 
 export default defineComponent({
   name: 'SlideWrapper',
@@ -27,6 +27,10 @@ export default defineComponent({
       type: String,
       default: 'main',
     },
+    active: {
+      type: Boolean,
+      default: false,
+    },
     is: {
       type: Object,
       default: undefined,
@@ -45,7 +49,9 @@ export default defineComponent({
     clicksElements.value.length = 0
 
     provide(injectionRoute, props.route as any)
+    provide(injectionCurrentPage, +props.route?.path)
     provide(injectionSlideContext, props.context as RenderContext)
+    provide(injectionActive, toRef(props, 'active'))
     provide(injectionClicks, clicks as Ref<number>)
     provide(injectionClicksDisabled, clicksDisabled)
     provide(injectionClicksElements, clicksElements as any)

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,42 @@ 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
+  }
+
+  // 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.
@@ -101,10 +137,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.4",
+  "version": "0.43.0-beta.6",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.6",
-    "@unocss/reset": "^0.55.5",
+    "@unocss/reset": "^0.55.6",
     "@vueuse/core": "^10.4.1",
     "@vueuse/head": "^1.3.1",
     "@vueuse/math": "^10.4.1",
@@ -35,14 +35,14 @@
     "prettier": "^3.0.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.4",
-    "unocss": "^0.55.5",
+    "unocss": "^0.55.6",
     "vite-plugin-windicss": "^1.9.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.0-beta.4",
-    "@slidev/types": "0.43.0-beta.4"
+    "@slidev/parser": "0.43.0-beta.6",
+    "@slidev/types": "0.43.0-beta.6"
   },
   "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 },