@slidev/client 0.27.20 → 0.28.3

package/builtin/AutoFitText.vue

@@ -2,7 +2,7 @@
 [Expiremental]
 
 Think this component as the TextBox you that will see
-in PowerPoint or Keynote. It will automaitcally resize
+in PowerPoint or Keynote. It will automatically resize
 the font size based on it's content to fit them in.
 
 Usage:
@@ -18,7 +18,9 @@ or
 import { useElementSize, useVModel } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
-const emit = defineEmits<{}>()
+const emit = defineEmits<{
+  (e: any): void
+}>()
 const props = defineProps({
   modelValue: {
     default: '',
@@ -34,7 +36,6 @@ const props = defineProps({
 const container = ref<HTMLDivElement>()
 const inner = ref<HTMLDivElement>()
 const size = ref(100)
-// @ts-ignore
 const fontSize = computed(() => `${size.value}px`)
 const value = useVModel(props, 'modelValue', emit)
 

package/builtin/CodeHighlightController.vue

@@ -15,7 +15,7 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 import { range, remove } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/core'
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
-import { injectionClicks, injectionClicksElements, injectionClicksDisabled, CLASS_VCLICK_TARGET } from '../constants'
+import { CLASS_VCLICK_TARGET, injectionClicks, injectionClicksDisabled, injectionClicksElements } from '../constants'
 
 const props = defineProps({
   ranges: {

package/builtin/Monaco.vue

@@ -16,7 +16,7 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watchEffect, computed } from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { decode } from 'js-base64'
 import { nanoid } from 'nanoid'

package/builtin/Toc.vue

@@ -0,0 +1,83 @@
+<!--
+Table Of content
+
+`mode` can be either 'all', 'onlyCurrentTree' or 'onlySiblings'
+
+Usage:
+
+<Toc columns='2' maxDepth='3' mode='onlySiblings'/>
+-->
+<script setup lang='ts'>
+import { computed } from 'vue'
+import type { TocItem } from '../logic/nav'
+import { tree } from '../logic/nav'
+
+const props = withDefaults(
+  defineProps<{
+    columns?: string | number
+    maxDepth?: string | number
+    minDepth?: string | number
+    mode?: 'all' | 'onlyCurrentTree' | 'onlySiblings'
+  }>(),
+  {
+    columns: 1,
+    maxDepth: Infinity,
+    minDepth: 1,
+    mode: 'all',
+  },
+)
+
+function filterTreeDepth(tree: TocItem[], level = 1): TocItem[] {
+  if (level > Number(props.maxDepth)) {
+    return []
+  }
+  else if (level < Number(props.minDepth)) {
+    const activeItem = tree.find((item: TocItem) => item.active || item.activeParent)
+    return activeItem ? filterTreeDepth(activeItem.children, level + 1) : []
+  }
+  return tree
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterTreeDepth(item.children, level + 1),
+    }))
+}
+
+function filterOnlyCurrentTree(tree: TocItem[]): TocItem[] {
+  return tree
+    .filter(
+      (item: TocItem) =>
+        item.active || item.activeParent || item.hasActiveParent,
+    )
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterOnlyCurrentTree(item.children),
+    }))
+}
+
+function filterOnlySiblings(tree: TocItem[]): TocItem[] {
+  const treehasActiveItem = tree.some(
+    (item: TocItem) => item.active || item.activeParent || item.hasActiveParent,
+  )
+  return tree
+    .filter(() => treehasActiveItem)
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterOnlySiblings(item.children),
+    }))
+}
+
+const toc = computed(() => {
+  let tocTree = filterTreeDepth(tree.value)
+  if (props.mode === 'onlyCurrentTree')
+    tocTree = filterOnlyCurrentTree(tocTree)
+  else if (props.mode === 'onlySiblings')
+    tocTree = filterOnlySiblings(tocTree)
+  return tocTree
+})
+</script>
+
+<template>
+  <div class="slidev-toc" :style="`column-count:${columns}`">
+    <TocList :level="1" :list="toc" />
+  </div>
+</template>

package/builtin/TocList.vue

@@ -0,0 +1,25 @@
+<!--
+TOC list
+(used by Toc component, you don't need to use this component directly)
+
+Usage:
+
+<TocList :list="list"/>
+-->
+<script setup lang="ts">
+import type { TocItem } from '../logic/nav'
+
+withDefaults(defineProps<{
+  level: number
+  list: TocItem[]
+}>(), { level: 1 })
+</script>
+
+<template>
+  <ul v-if="list && list.length > 0" :class="['slidev-toc-list', `slidev-toc-list-level-${level}`]">
+    <li v-for="item in list" :key="item.path" :class="['slidev-toc-item', {'slidev-toc-item-active': item.active}, {'slidev-toc-item-parent-active': item.activeParent}]">
+      <RouterLink :to="item.path" v-html="item.title" />
+      <TocList :level="level + 1" :list="item.children" />
+    </li>
+  </ul>
+</template>

package/builtin/Tweet.vue

@@ -1,5 +1,5 @@
 <!--
-A simple wrapper for embeded Tweet
+A simple wrapper for embedded Tweet
 
 Usage:
 
@@ -23,7 +23,7 @@ const vm = getCurrentInstance()!
 const loaded = ref(false)
 
 async function create() {
-  // @ts-ignore
+  // @ts-expect-error global
   await window.twttr.widgets.createTweet(
     props.id.toString(),
     tweet.value,
@@ -35,7 +35,7 @@ async function create() {
   loaded.value = true
 }
 
-// @ts-ignore
+// @ts-expect-error global
 if (window?.twttr?.widgets) {
   onMounted(create)
 }

package/env.ts

@@ -1,7 +1,7 @@
 import type { SlidevConfig } from '@slidev/types'
 import { computed } from 'vue'
 import { objectMap } from '@antfu/utils'
-// @ts-expect-error
+// @ts-expect-error missing types
 import _configs from '/@slidev/configs'
 import _serverState from 'server-reactive:nav'
 import _serverDrawingState from 'server-reactive:drawings?diff'

package/internals/Controls.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { showOverview, showRecordingDialog, showInfoDialog } from '../state'
+import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
 import { configs } from '../env'
 import SlidesOverview from './SlidesOverview.vue'
 import InfoDialog from './InfoDialog.vue'

package/internals/DevicesList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { currentCamera, currentMic } from '../state'
-import { cameras, microphones, ensureDevicesListPermissions } from '../logic/recording'
+import { cameras, ensureDevicesListPermissions, microphones } from '../logic/recording'
 import SelectList from './SelectList.vue'
 import type { SelectionItem } from './types'
 

package/internals/Draggable.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useStorage, useDraggable } from '@vueuse/core'
+import { useDraggable, useStorage } from '@vueuse/core'
 
 const props = defineProps<{
   storageKey?: string
-  initial?: {x: number; y: number}
+  initial?: { x: number; y: number }
 }>()
 
 const el = ref<HTMLElement | null>(null)

package/internals/DrawingControls.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
-  drawingMode, drauu, brush,
-  brushColors, drawingEnabled, drawingPinned,
-  canUndo, canRedo, canClear, clearDrauu,
+  brush, brushColors, canClear,
+  canRedo, canUndo, clearDrauu,
+  drauu, drawingEnabled, drawingMode, drawingPinned,
 } from '../logic/drawings'
 import VerticalDivider from './VerticalDivider.vue'
 import Draggable from './Draggable.vue'

package/internals/DrawingLayer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, inject, onBeforeUnmount } from 'vue'
+import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { drauu, loadCanvas } from '../logic/drawings'
 import { injectionSlideScale } from '../constants'
 

package/internals/DrawingPreview.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { drawingState } from '../logic/drawings'
 
-defineProps<{page: number}>()
+defineProps<{ page: number }>()
 </script>
 
 <template>

package/internals/Editor.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useEventListener, throttledWatch } from '@vueuse/core'
-import { computed, watch, ref, onMounted } from 'vue'
-import { activeElement, showEditor, editorWidth, isInputting } from '../state'
+import { throttledWatch, useEventListener } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
+import { activeElement, editorWidth, isInputting, showEditor } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
@@ -66,7 +66,7 @@ onMounted(() => {
     {
       mode: 'markdown',
       lineWrapping: true,
-      // @ts-ignore
+      // @ts-expect-error missing types
       highlightFormatting: true,
       fencedCodeBlockDefaultMode: 'javascript',
     },
@@ -84,7 +84,7 @@ onMounted(() => {
     {
       mode: 'markdown',
       lineWrapping: true,
-      // @ts-ignore
+      // @ts-expect-error missing types
       highlightFormatting: true,
       fencedCodeBlockDefaultMode: 'javascript',
     },
@@ -100,7 +100,7 @@ function updateWidth(v: number) {
 }
 function switchTab(newTab: typeof tab.value) {
   tab.value = newTab
-  // @ts-expect-error
+  // @ts-expect-error force cast
   document.activeElement?.blur?.()
 }
 useEventListener('pointermove', (e) => {

package/internals/InfoDialog.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import { configs } from '../env'
 import Modal from './Modal.vue'
 
-const emit = defineEmits<{(name: 'modelValue', v: boolean): void}>()
+const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
 const props = defineProps({
   modelValue: {
     default: false,

package/internals/Modal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 
-const emit = defineEmits<{(name: 'modelValue', v: boolean): void}>()
+const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
 const props = defineProps({
   modelValue: {
     default: false,

package/internals/NavControls.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isDark, toggleDark, isColorSchemaConfigured } from '../logic/dark'
-import { hasNext, hasPrev, prev, next, total, isPresenter, currentPage, downloadPDF, isEmbedded } from '../logic/nav'
-import { toggleOverview, showEditor, showInfoDialog, fullscreen, breakpoints, activeElement, showPresenterCursor } from '../state'
-import { drawingEnabled, brush } from '../logic/drawings'
+import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
+import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, prev, total } from '../logic/nav'
+import { activeElement, breakpoints, fullscreen, showEditor, showInfoDialog, showPresenterCursor, toggleOverview } from '../state'
+import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'

package/internals/Play.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, shallowRef } from 'vue'
-import { showEditor, windowSize, isScreenVertical, slideScale } from '../state'
-import { isPrintMode, next, prev, useSwipeControls, isEmbedded } from '../logic/nav'
+import { computed, ref, shallowRef } from 'vue'
+import { isScreenVertical, showEditor, slideScale, windowSize } from '../state'
+import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
-import { themeVars, configs } from '../env'
+import { configs, themeVars } from '../env'
 import Controls from './Controls.vue'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
@@ -18,7 +18,7 @@ function onClick(e: MouseEvent) {
     return
 
   if ((e.target as HTMLElement)?.id === 'slide-container') {
-    // click right to next, left to previouse
+    // click right to next, left to previous
     if ((e.screenX / window.innerWidth) > 0.6)
       next()
     else
@@ -28,7 +28,7 @@ function onClick(e: MouseEvent) {
 
 useSwipeControls(root)
 
-const presistNav = computed(() => isScreenVertical.value || showEditor.value)
+const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const Editor = shallowRef<any>()
 if (__DEV__)
@@ -55,11 +55,11 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <div
           class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
           :class="[
-            presistNav ? 'opacity-100 right-0' : 'oapcity-0 p-2',
+            persistNav ? 'opacity-100 right-0' : 'oapcity-0 p-2',
             isDrawing ? 'pointer-events-none': ''
           ]"
         >
-          <NavControls class="m-auto" :persist="presistNav" />
+          <NavControls class="m-auto" :persist="persistNav" />
         </div>
         <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded && DrawingControls">
           <DrawingControls class="ml-0" />

package/internals/Presenter.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
-import { ref, computed, reactive, watch, onMounted } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
-import { total, currentPage, currentRoute, nextRoute, clicks, useSwipeControls, clicksTotal, hasNext } from '../logic/nav'
+import { clicks, clicksTotal, currentPage, currentRoute, hasNext, nextRoute, total, useSwipeControls } from '../logic/nav'
 import { showOverview, showPresenterCursor } from '../state'
-import { configs, themeVars, serverState } from '../env'
+import { configs, serverState, themeVars } from '../env'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'

package/internals/RecordingDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import { nextTick } from 'vue'
-import { recorder, recordingName, recordCamera, getFilename } from '../logic/recording'
+import { getFilename, recordCamera, recorder, recordingName } from '../logic/recording'
 import Modal from './Modal.vue'
 import DevicesList from './DevicesList.vue'
 

package/internals/SlideContainer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
 import { computed, provide, ref, watchEffect } from 'vue'
-import { slideAspect, slideWidth, slideHeight, configs } from '../env'
+import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
 
 const props = defineProps({

package/internals/SlideWrapper.ts

@@ -1,5 +1,5 @@
 import { useVModel } from '@vueuse/core'
-import { provide, defineComponent, h } from 'vue'
+import { defineComponent, h, provide } from 'vue'
 import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap } from '../constants'
 
 export default defineComponent({

package/internals/SlidesShow.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { shallowRef, watch } from 'vue'
-import { currentRoute, clicks, rawRoutes, nextRoute, isPresenter } from '../logic/nav'
+import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes } from '../logic/nav'
 import { getSlideClass } from '../utils'
 import SlideWrapper from './SlideWrapper'
-// @ts-ignore
+// @ts-expect-error virtual module
 import GlobalTop from '/@slidev/global-components/top'
-// @ts-ignore
+// @ts-expect-error virtual module
 import GlobalBottom from '/@slidev/global-components/bottom'
 import PresenterMouse from './PresenterMouse.vue'
 

package/internals/WebCamera.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useEventListener, useStorage, useDraggable } from '@vueuse/core'
+import { useDraggable, useEventListener, useStorage } from '@vueuse/core'
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import { currentCamera } from '../state'
 import { recorder } from '../logic/recording'

package/logic/drawings.ts

@@ -1,8 +1,8 @@
 import { computed, markRaw, nextTick, reactive, ref, watch, watchEffect } from 'vue'
-import type { Brush, DrawingMode, Options as DrauuOptions } from 'drauu'
+import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
 import { createDrauu } from 'drauu'
-import { useStorage, toReactive } from '@vueuse/core'
-import { serverDrawingState as drawingState, configs } from '../env'
+import { toReactive, useStorage } from '@vueuse/core'
+import { configs, serverDrawingState as drawingState } from '../env'
 import { currentPage, isPresenter } from './nav'
 
 export const brushColors = [

package/logic/nav.ts

@@ -1,11 +1,23 @@
 import type { Ref } from 'vue'
-import { computed, ref, nextTick } from 'vue'
-import { isString, SwipeDirection, timestamp, usePointerSwipe } from '@vueuse/core'
+import type { RouteRecordRaw } from 'vue-router'
+import { computed, nextTick, ref } from 'vue'
+import { SwipeDirection, isString, timestamp, usePointerSwipe } from '@vueuse/core'
 import { rawRoutes, router } from '../routes'
 import { configs } from '../env'
 import { useRouteQuery } from './route'
 import { isDrawing } from './drawings'
 
+export interface TocItem {
+  active?: boolean
+  activeParent?: boolean
+  children: TocItem[]
+  hasActiveParent?: boolean
+  level: number
+  path: string
+  hideInToc?: boolean
+  title?: string
+}
+
 export { rawRoutes, router }
 
 // force update collected elements when the route is fully resolved
@@ -62,6 +74,15 @@ export const clicksTotal = computed(() => +(currentRoute.value?.meta?.clicks ??
 export const hasNext = computed(() => currentPage.value < rawRoutes.length - 1 || clicks.value < clicksTotal.value)
 export const hasPrev = computed(() => currentPage.value > 1 || clicks.value > 0)
 
+export const rawTree = computed(() => rawRoutes
+  .filter((route: RouteRecordRaw) => route.meta?.slide?.title)
+  .reduce((acc: TocItem[], route: RouteRecordRaw) => {
+    addToTree(acc, route)
+    return acc
+  }, []))
+export const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value))
+export const tree = computed(() => filterTree(treeWithActiveStatuses.value))
+
 export function next() {
   if (clicksTotal.value <= clicks.value)
     nextSlide()
@@ -152,3 +173,47 @@ export async function openInEditor(url?: string) {
   await fetch(`/__open-in-editor?file=${encodeURIComponent(url)}`)
   return true
 }
+
+export function addToTree(tree: TocItem[], route: RouteRecordRaw, level = 1) {
+  const titleLevel = route.meta?.slide?.level
+  if (titleLevel && titleLevel > level && tree.length > 0) {
+    addToTree(tree[tree.length - 1].children, route, level + 1)
+  }
+  else {
+    tree.push({
+      children: [],
+      level,
+      path: route.path,
+      hideInToc: Boolean(route.meta?.hideInToc),
+      title: route.meta?.slide?.title,
+    })
+  }
+}
+
+export function getTreeWithActiveStatuses(
+  tree: TocItem[],
+  hasActiveParent = false,
+  parent?: TocItem,
+): TocItem[] {
+  return tree.map((item: TocItem) => {
+    const clone = {
+      ...item,
+      active: item.path === currentRoute.value?.path,
+      hasActiveParent,
+    }
+    if (clone.children.length > 0)
+      clone.children = getTreeWithActiveStatuses(clone.children, clone.active || clone.hasActiveParent, clone)
+    if (parent && (clone.active || clone.activeParent))
+      parent.activeParent = true
+    return clone
+  })
+}
+
+function filterTree(tree: TocItem[], level = 1): TocItem[] {
+  return tree
+    .filter((item: TocItem) => !item.hideInToc)
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterTree(item.children, level + 1),
+    }))
+}

package/logic/recording.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { nextTick, ref, shallowRef, watch } from 'vue'
-import { useEventListener, useDevicesList } from '@vueuse/core'
+import { useDevicesList, useEventListener } from '@vueuse/core'
 import { isTruthy } from '@antfu/utils'
 import type RecorderType from 'recordrtc'
 import type { Options as RecorderOptions } from 'recordrtc'
@@ -124,7 +124,7 @@ export function useRecording() {
         frameRate: 15,
         width: 3840,
         height: 2160,
-        // @ts-expect-error
+        // @ts-expect-error missing types
         cursor: 'motion',
         resizeMode: 'crop-and-scale',
       },

package/logic/shortcuts.ts

@@ -1,9 +1,9 @@
 import type { Fn, KeyFilter } from '@vueuse/core'
-import { not, and, onKeyStroke } from '@vueuse/core'
+import { and, not, onKeyStroke } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { watch } from 'vue'
 import type { ShortcutOptions } from '@slidev/types'
-import { fullscreen, magicKeys, shortcutsEnabled, isInputting, toggleOverview, showGotoDialog, showOverview, isOnFocus } from '../state'
+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'

package/logic/utils.ts

@@ -1,5 +1,5 @@
 import { useTimestamp } from '@vueuse/core'
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 
 export function useTimer() {
   const tsStart = ref(Date.now())

package/modules/context.ts

@@ -23,7 +23,7 @@ export default function createSlidevContext() {
       // need to copy over to get rid of the "Module" object type (will not unwrap)
       for (const key of objectKeys(nav)) {
         if (typeof key === 'string')
-          // @ts-expect-error
+          // @ts-expect-error I know :)
           navObj[key] = nav[key]
       }
       const context = reactive({
@@ -35,7 +35,7 @@ export default function createSlidevContext() {
 
       // allows controls from postMessages
       if (__DEV__) {
-        // @ts-expect-error
+        // @ts-expect-error expose global
         window.__slidev__ = context
         window.addEventListener('message', ({ data }) => {
           if (data && data.target === 'slidev') {

package/modules/directives.ts

@@ -3,16 +3,16 @@ import { watch } from 'vue'
 import { remove } from '@antfu/utils'
 import { isClicksDisabled } from '../logic/nav'
 import {
-  injectionClicksDisabled,
-  injectionClicksElements,
-  injectionClicks,
-  injectionOrderMap,
   CLASS_VCLICK_CURRENT,
+  CLASS_VCLICK_FADE,
   CLASS_VCLICK_HIDDEN,
   CLASS_VCLICK_HIDDEN_EXP,
   CLASS_VCLICK_PRIOR,
   CLASS_VCLICK_TARGET,
-  CLASS_VCLICK_FADE,
+  injectionClicks,
+  injectionClicksDisabled,
+  injectionClicksElements,
+  injectionOrderMap,
 } from '../constants'
 
 function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
@@ -23,7 +23,7 @@ export default function createDirectives() {
   return {
     install(app: App) {
       app.directive('click', {
-        // @ts-expect-error
+        // @ts-expect-error extra prop
         name: 'v-click',
 
         mounted(el: HTMLElement, dir) {
@@ -109,7 +109,7 @@ export default function createDirectives() {
       })
 
       app.directive('after', {
-        // @ts-expect-error
+        // @ts-expect-error extra prop
         name: 'v-after',
 
         mounted(el: HTMLElement, dir) {
@@ -160,7 +160,7 @@ export default function createDirectives() {
       })
 
       app.directive('click-hide', {
-        // @ts-expect-error
+        // @ts-expect-error extra prop
         name: 'v-click-hide',
 
         mounted(el: HTMLElement, dir) {

package/modules/mermaid.ts

@@ -1,4 +1,4 @@
-// @ts-ignore
+// @ts-expect-error missing types
 import mermaid from 'mermaid/dist/mermaid.min'
 import { customAlphabet } from 'nanoid'
 import { decode } from 'js-base64'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.27.20",
+  "version": "0.28.3",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
@@ -12,30 +12,31 @@
   "funding": "https://github.com/sponsors/antfu",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "dependencies": {
-    "@antfu/utils": "^0.3.0",
-    "@slidev/parser": "0.27.20",
-    "@slidev/types": "0.27.20",
-    "@vueuse/core": "^7.3.0",
-    "@vueuse/head": "^0.7.4",
-    "@vueuse/motion": "^2.0.0-beta.4",
-    "codemirror": "^5.64.0",
+    "@antfu/utils": "^0.5.0",
+    "@slidev/parser": "0.28.3",
+    "@slidev/types": "0.28.3",
+    "@vueuse/core": "^7.6.0",
+    "@vueuse/head": "^0.7.5",
+    "@vueuse/motion": "^2.0.0-beta.9",
+    "codemirror": "^5.65.1",
     "drauu": "^0.2.1",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "js-yaml": "^4.1.0",
-    "katex": "^0.15.1",
+    "katex": "^0.15.2",
     "mermaid": "8.13.0",
-    "monaco-editor": "^0.31.0",
-    "nanoid": "^3.1.30",
+    "monaco-editor": "^0.32.1",
+    "nanoid": "^3.2.0",
     "prettier": "^2.5.1",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.20.0",
-    "vite-plugin-windicss": "^1.5.4",
-    "vue": "^3.2.26",
+    "resolve": "^1.22.0",
+    "vite-plugin-windicss": "^1.7.0",
+    "vue": "^3.2.30",
     "vue-router": "^4.0.12",
-    "windicss": "^3.3.0"
+    "windicss": "^3.4.3"
   },
   "engines": {
     "node": ">=14.0.0"
-  }
+  },
+  "readme": "# @slidev/client\n\n[![NPM version](https://img.shields.io/npm/v/@slidev/client?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/client)\n\nClient code for [Slidev](https://sli.dev). Shipped with [`@slidev/cli`](https://www.npmjs.com/package/@slidev/cli).\n\n## License\n\nMIT License © 2021 [Anthony Fu](https://github.com/antfu)\n\n"
 }

package/routes.ts

@@ -1,7 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router'
-import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import Play from './internals/Play.vue'
-// @ts-expect-error
+// @ts-expect-error missing types
 import _rawRoutes from '/@slidev/routes'
 
 export const rawRoutes = _rawRoutes as RouteRecordRaw[]
@@ -51,6 +51,8 @@ declare module 'vue-router' {
       id: number
       no: number
       filepath: string
+      title?: string
+      level?: number
     }
 
     // private fields

package/setup/main.ts

@@ -14,7 +14,7 @@ export default function setupMain(context: AppContext) {
 
   context.app.use(MotionPlugin)
 
-  // @ts-expect-error
+  // @ts-expect-error inject in runtime
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const injection_arg = context
 

package/setup/monaco.ts

@@ -31,7 +31,7 @@ const setup = createSingletonPromise(async() => {
         import('monaco-editor/esm/vs/language/typescript/ts.worker?worker'),
       ])
 
-      // @ts-expect-error
+      // @ts-expect-error global config for monaca
       window.MonacoEnvironment = {
         getWorker(_: any, label: string) {
           if (label === 'json')
@@ -48,7 +48,7 @@ const setup = createSingletonPromise(async() => {
     })(),
   ])
 
-  // @ts-expect-error
+  // @ts-expect-error injected in runtime
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const injection_arg = monaco
   // eslint-disable-next-line prefer-const

package/setup/prettier.ts

@@ -11,23 +11,23 @@ export async function formatCode(code: string, lang: string) {
       case 'typescript':
         parser = 'typescript'
         plugins = [
-          // @ts-expect-error
+          // @ts-expect-error missing types
           (await import('prettier/esm/parser-babel')).default,
-          // @ts-expect-error
+          // @ts-expect-error missing types
           (await import('prettier/esm/parser-typescript')).default,
         ]
         break
       case 'html':
         parser = 'html'
         plugins = [
-          // @ts-expect-error
+          // @ts-expect-error missing types
           (await import('prettier/esm/parser-html')).default,
         ]
         break
       default:
         parser = 'babel'
         plugins = [
-          // @ts-expect-error
+          // @ts-expect-error missing types
           (await import('prettier/esm/parser-babel')).default,
         ]
     }
@@ -42,7 +42,6 @@ export async function formatCode(code: string, lang: string) {
     })
   }
   catch (e) {
-    // eslint-disable-next-line no-console
     console.error(e)
     return code
   }

package/setup/root.ts

@@ -1,12 +1,12 @@
 /* __imports__ */
 import { useHead } from '@vueuse/head'
 import { watch } from 'vue'
-import { currentPage, getPath, clicks, isPresenter } from '../logic/nav'
+import { clicks, currentPage, getPath, isPresenter } from '../logic/nav'
 import { router } from '../routes'
 import { configs, serverState } from '../env'
 
 export default function setupRoot() {
-  // @ts-expect-error
+  // @ts-expect-error injected in runtime
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const injection_arg = undefined
 

package/setup/shortcuts.ts

@@ -1,13 +1,13 @@
 /* __imports__ */
 
-import type { ShortcutOptions, NavOperations } from '@slidev/types'
-import { next, prev, nextSlide, prevSlide, downloadPDF } from '../logic/nav'
+import type { NavOperations, ShortcutOptions } from '@slidev/types'
+import { downloadPDF, next, nextSlide, prev, prevSlide } from '../logic/nav'
 import { toggleDark } from '../logic/dark'
-import { toggleOverview, showGotoDialog, showOverview } from '../state'
+import { showGotoDialog, showOverview, toggleOverview } from '../state'
 import { drawingEnabled } from '../logic/drawings'
 
 export default function setupShortcuts() {
-  // @ts-expect-error
+  // @ts-expect-error injected in runtime
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const injection_arg: NavOperations = {
     next,

package/state/index.ts

@@ -1,4 +1,4 @@
-import { useMagicKeys, useActiveElement, useStorage, useBreakpoints, breakpointsTailwind, useWindowSize, useFullscreen, useToggle, isClient } from '@vueuse/core'
+import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useMagicKeys, useStorage, useToggle, useWindowSize } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { slideAspect } from '../env'