@slidev/client 0.31.3 → 0.32.2

package/constants.ts

@@ -1,4 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
 import type { SlidevContext } from './modules/context'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
@@ -7,6 +8,7 @@ export const injectionOrderMap: InjectionKey<Ref<Map<number, HTMLElement[]>>> =
 export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-click-clicks-disabled')
 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 CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

package/internals/NavControls.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, prev, total } from '../logic/nav'
+import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, presenterPassword, prev, showPresenter, total } from '../logic/nav'
 import { activeElement, breakpoints, fullscreen, showEditor, showInfoDialog, showPresenterCursor, toggleOverview } from '../state'
 import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
@@ -20,8 +20,9 @@ const props = defineProps({
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
-const presenterLink = computed(() => `/presenter/${currentPage.value}`)
-const nonPresenterLink = computed(() => `/${currentPage.value}`)
+const query = computed(() => presenterPassword.value ? `?password=${presenterPassword.value}` : '')
+const presenterLink = computed(() => `/presenter/${currentPage.value}${query.value}`)
+const nonPresenterLink = computed(() => `/${currentPage.value}${query.value}`)
 
 const root = ref<HTMLDivElement>()
 const onMouseLeave = () => {
@@ -112,7 +113,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="icon-btn" title="Play Mode">
           <carbon:presentation-file />
         </RouterLink>
-        <RouterLink v-if="!isPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
+        <RouterLink v-if="showPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
           <carbon:user-speaker />
         </RouterLink>
 

package/internals/Presenter.vue

@@ -119,6 +119,7 @@ onMounted(() => {
             :clicks="nextSlide.clicks"
             :clicks-disabled="false"
             :class="getSlideClass(nextSlide.route)"
+            :route="nextSlide.route"
           />
         </SlideContainer>
       </div>

package/internals/PrintSlideClick.vue

@@ -54,6 +54,7 @@ provide(injectionSlidevContext, reactive({
       :clicks="clicks"
       :clicks-disabled="false"
       :class="getSlideClass(route)"
+      :route="route"
     />
     <template
       v-if="

package/internals/SlideWrapper.ts

@@ -1,6 +1,6 @@
 import { useVModel } from '@vueuse/core'
 import { defineComponent, h, provide } from 'vue'
-import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap } from '../constants'
+import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute } from '../constants'
 
 export default defineComponent({
   props: {
@@ -24,6 +24,10 @@ export default defineComponent({
       type: Object,
       default: undefined,
     },
+    route: {
+      type: Object,
+      default: undefined,
+    },
   },
   setup(props, { emit }) {
     const clicks = useVModel(props, 'clicks', emit)
@@ -33,6 +37,7 @@ export default defineComponent({
 
     clicksElements.value.length = 0
 
+    provide(injectionRoute, props.route)
     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
@@ -64,6 +84,7 @@ const cardWidth = computed(() => {
               :is="route?.component"
               :clicks-disabled="true"
               :class="getSlideClass(route)"
+              :route="route"
             />
             <DrawingPreview :page="+route.path" />
           </SlideContainer>

package/internals/SlidesShow.vue

@@ -36,6 +36,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
       :clicks-elements="route.meta?.__clicksElements || []"
       :clicks-disabled="false"
       :class="getSlideClass(route)"
+      :route="route"
     />
   </template>
 

package/logic/nav.ts

@@ -36,6 +36,8 @@ export const isPrintWithClicks = computed(() => route.value.query.print === 'cli
 export const isEmbedded = computed(() => route.value.query.embedded !== undefined)
 export const isPresenter = computed(() => route.value.path.startsWith('/presenter'))
 export const isClicksDisabled = computed(() => isPrintMode.value && !isPrintWithClicks.value)
+export const presenterPassword = computed(() => route.value.query.password)
+export const showPresenter = computed(() => !isPresenter.value && (!configs.remote || presenterPassword.value === configs.remote))
 
 export const queryClicks = useRouteQuery('clicks', '0')
 export const total = computed(() => rawRoutes.length - 1)

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.3",
+  "version": "0.32.2",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
@@ -12,30 +12,30 @@
   },
   "funding": "https://github.com/sponsors/antfu",
   "dependencies": {
-    "@antfu/utils": "^0.5.1",
-    "@slidev/parser": "0.31.3",
-    "@slidev/types": "0.31.3",
-    "@vueuse/core": "^8.4.2",
+    "@antfu/utils": "^0.5.2",
+    "@slidev/parser": "0.32.2",
+    "@slidev/types": "0.32.2",
+    "@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",
-    "mermaid": "^9.0.1",
+    "katex": "^0.15.6",
+    "mermaid": "^9.1.1",
     "monaco-editor": "^0.33.0",
     "nanoid": "^3.3.4",
     "prettier": "^2.6.2",
     "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.1"
+    "windicss": "^3.5.4"
   },
   "engines": {
     "node": ">=14.0.0"

package/routes.ts

@@ -4,6 +4,7 @@ import Play from './internals/Play.vue'
 import Print from './internals/Print.vue'
 // @ts-expect-error missing types
 import _rawRoutes from '/@slidev/routes'
+import _configs from '/@slidev/configs'
 
 export const rawRoutes = _rawRoutes as RouteRecordRaw[]
 
@@ -23,6 +24,19 @@ export const routes: RouteRecordRaw[] = [
     name: 'presenter',
     path: '/presenter/:no',
     component: () => import('./internals/Presenter.vue'),
+    beforeEnter: (to) => {
+      if (!_configs.remote || _configs.remote === to.query.password)
+        return true
+      if (_configs.remote && to.query.password === undefined) {
+        // eslint-disable-next-line no-alert
+        const password = prompt('Enter password')
+        if (_configs.remote === password)
+          return true
+      }
+      if (to.params.no)
+        return { path: `/${to.params.no}` }
+      return { path: '' }
+    },
   },
   {
     path: '/presenter',