@slidev/client 0.27.19 → 0.28.2

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/Mermaid.vue

@@ -51,5 +51,5 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div ref="el" class="mermaid" v-html="html"></div>
+  <div ref="el" class="mermaid" v-html="html" />
 </template>

package/builtin/Monaco.vue

@@ -12,11 +12,11 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <template>
-  <iframe ref="iframe" class="text-base w-full rounded" :style="{ height }"></iframe>
+  <iframe ref="iframe" class="text-base w-full rounded" :style="{ height }" />
 </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/PlantUml.vue

@@ -11,7 +11,7 @@ Alice -> Bob : Hello!
 ```
 -->
 <template>
-  <img alt="PlantUML diagram" :src="uri" :style="{scale}" />
+  <img alt="PlantUML diagram" :src="uri" :style="{scale}">
 </template>
 
 <script setup lang="ts">

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,27 @@
+<!--
+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">
+        {{ item.title }}
+      </RouterLink>
+      <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/builtin/VAfter.ts

@@ -5,7 +5,8 @@
  */
 
 import { toArray } from '@antfu/utils'
-import { defineComponent, Directive, h, resolveDirective, VNode, withDirectives } from 'vue'
+import type { Directive, VNode } from 'vue'
+import { defineComponent, h, resolveDirective, withDirectives } from 'vue'
 
 export default defineComponent({
   render() {

package/builtin/VClicks.ts

@@ -5,7 +5,8 @@
  */
 
 import { toArray } from '@antfu/utils'
-import { defineComponent, Directive, h, isVNode, resolveDirective, VNode, VNodeArrayChildren, withDirectives } from 'vue'
+import type { Directive, VNode, VNodeArrayChildren } from 'vue'
+import { defineComponent, h, isVNode, resolveDirective, withDirectives } from 'vue'
 
 export default defineComponent({
   props: {

package/builtin/Youtube.vue

@@ -23,5 +23,5 @@ defineProps<{
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen
-  ></iframe>
+  />
 </template>

package/constants.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
 export const injectionClicksElements: InjectionKey<Ref<(Element | string)[]>> = Symbol('v-click-clicks-elements')

package/env.ts

@@ -1,7 +1,7 @@
-import { SlidevConfig } from '@slidev/types'
+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'
@@ -36,7 +36,7 @@ function setBrushColor(color: typeof brush.color) {
     </button>
     <button class="icon-btn" :class="{ shallow: drawingMode != 'line' }" @click="setDrawingMode('line')">
       <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
-        <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor"></path>
+        <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
       </svg>
     </button>
     <button class="icon-btn" :class="{ shallow: drawingMode != 'arrow' }" @click="setDrawingMode('arrow')">

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'
 
@@ -21,5 +21,5 @@ onBeforeUnmount(() => {
   <svg
     ref="svg"
     class="w-full h-full absolute top-0 pointer-events-none"
-  ></svg>
+  />
 </template>

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>
@@ -10,5 +10,5 @@ defineProps<{page: number}>()
     ref="svg"
     class="w-full h-full absolute top-0 pointer-events-none"
     v-html="drawingState[page]"
-  ></svg>
+  />
 </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) => {
@@ -130,7 +130,7 @@ throttledWatch(
     :class="{'!opacity-30': handlerDown}"
     :style="{right: `${editorWidth - 5}px`, cursor: 'col-resize'}"
     @pointerdown="onHandlerDown"
-  ></div>
+  />
   <div
     class="shadow bg-main p-4 grid grid-rows-[max-content,1fr] h-full overflow-hidden border-l border-gray-400 border-opacity-20"
     :style="{width: `${editorWidth}px`}"
@@ -147,7 +147,7 @@ throttledWatch(
       <span class="text-2xl pt-1">
         {{ tab === 'content' ? 'Slide' : 'Notes' }}
       </span>
-      <div class="flex-auto"></div>
+      <div class="flex-auto" />
       <button class="icon-btn" @click="openInEditor()">
         <carbon:launch />
       </button>

package/internals/Goto.vue

@@ -46,7 +46,7 @@ whenever(showGotoDialog, async() => {
       @keydown.enter="goTo"
       @keydown.escape="close"
       @blur="close"
-    />
+    >
   </div>
 </template>
 

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,
@@ -34,7 +34,7 @@ const hasInfo = computed(() => typeof configs.info === 'string')
             class="w-5 h-5"
             src="../assets/logo.png"
             alt="Slidev"
-          />
+          >
           <div style="color: #2082A6">
             <b>Sli</b>dev
           </div>

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'
@@ -101,7 +101,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
             v-if="drawingEnabled"
             class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
             :style="{ background: brush.color }"
-          ></div>
+          />
         </button>
         <VerticalDivider />
       </template>

package/internals/NoteEditor.vue

@@ -66,14 +66,14 @@ onClickOutside(input, () => {
       :class="props.class"
       @click="switchNoteEdit"
       v-html="info?.notesHTML"
-    ></div>
+    />
     <div
       v-else
       class="prose overflow-auto outline-none"
       :class="props.class"
       @click="switchNoteEdit"
       v-text="note"
-    ></div>
+    />
   </template>
   <textarea
     v-else

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'
@@ -82,7 +82,7 @@ onMounted(() => {
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container">
       <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto" />
+        <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto">
         <div class="flex-auto" />
         <div
           class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
@@ -133,7 +133,7 @@ onMounted(() => {
       <div
         class="progress h-2px bg-primary transition-all"
         :style="{ width: `${(currentPage - 1) / (total - 1) * 100}%` }"
-      ></div>
+      />
     </div>
   </div>
   <Goto />

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'
 
@@ -42,7 +42,7 @@ async function start() {
             name="title"
             type="text"
             placeholder="Enter the title..."
-          />
+          >
           <div class="text-xs w-full opacity-50 py-2">
             <div>This will be used in the output filename that might <br>help you better orangize your recording chips.</div>
           </div>
@@ -52,7 +52,7 @@ async function start() {
             v-model="recordCamera"
             name="record-camera"
             type="checkbox"
-          />
+          >
           <label for="record-camera" @click="recordCamera = !recordCamera">Record camera separately</label>
         </div>
         <div class="text-xs w-full opacity-50">
@@ -73,7 +73,7 @@ async function start() {
       <button class="cancel" @click="close">
         Cancel
       </button>
-      <div class="flex-auto"></div>
+      <div class="flex-auto" />
       <button @click="start">
         Start
       </button>

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'
@@ -80,7 +80,6 @@ onMounted(fixPosition)
       class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-30 hover:opacity-100 dark:(border border-true-gray-700)"
       :style="handleStyle"
       :class="handlerDown ? '!opacity-100' : ''"
-    >
-    </div>
+    />
   </div>
 </template>

package/layouts/iframe-left.vue

@@ -5,7 +5,7 @@ const props = defineProps<{ class?: string; url: string }>()
 <template>
   <div class="grid grid-cols-2 w-full h-full">
     <div class="h-full">
-      <iframe id="frame" class="w-full h-full" :src="url"></iframe>
+      <iframe id="frame" class="w-full h-full" :src="url" />
     </div>
     <div class="slidev-layout default" :class="props.class">
       <slot />

package/layouts/iframe-right.vue

@@ -8,7 +8,7 @@ const props = defineProps<{ class?: string; url: string }>()
       <slot />
     </div>
     <div class="h-full">
-      <iframe id="frame" class="w-full h-full" :src="url"> </iframe>
+      <iframe id="frame" class="w-full h-full" :src="url" />
     </div>
   </div>
 </template>

package/layouts/iframe.vue

@@ -5,7 +5,7 @@ defineProps<{ url: string }>()
 <template>
   <div class="h-full w-full">
     <div class="w-full h-full">
-      <iframe id="frame" class="w-full h-full" :src="url"> </iframe>
+      <iframe id="frame" class="w-full h-full" :src="url" />
     </div>
   </div>
 </template>

package/layouts/image-left.vue

@@ -16,7 +16,7 @@ const style = computed(() => handleBackground(props.image))
 
 <template>
   <div class="grid grid-cols-2 w-full h-full">
-    <div class="w-full w-full" :style="style"></div>
+    <div class="w-full w-full" :style="style" />
     <div class="slidev-layout default" :class="props.class">
       <slot />
     </div>

package/layouts/image-right.vue

@@ -19,6 +19,6 @@ const style = computed(() => handleBackground(props.image))
     <div class="slidev-layout default" :class="props.class">
       <slot />
     </div>
-    <div class="w-full w-full" :style="style"></div>
+    <div class="w-full w-full" :style="style" />
   </div>
 </template>

package/logic/drawings.ts

@@ -1,7 +1,8 @@
 import { computed, markRaw, nextTick, reactive, ref, watch, watchEffect } from 'vue'
-import { Brush, createDrauu, DrawingMode, Options as DrauuOptions } from 'drauu'
-import { useStorage, toReactive } from '@vueuse/core'
-import { serverDrawingState as drawingState, configs } from '../env'
+import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
+import { createDrauu } from 'drauu'
+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,10 +1,23 @@
-import { computed, Ref, ref, nextTick } from 'vue'
-import { isString, SwipeDirection, timestamp, usePointerSwipe } from '@vueuse/core'
+import type { Ref } from 'vue'
+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
@@ -61,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()
@@ -151,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/note.ts

@@ -1,5 +1,7 @@
-import { MaybeRef, useFetch } from '@vueuse/core'
-import { computed, ref, Ref, unref } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
+import { useFetch } from '@vueuse/core'
+import type { Ref } from 'vue'
+import { computed, ref, unref } from 'vue'
 import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
 
 export interface UseSlideInfo{

package/logic/recording.ts

@@ -1,7 +1,8 @@
-import { nextTick, Ref, ref, shallowRef, watch } from 'vue'
-import { useEventListener, useDevicesList } from '@vueuse/core'
+import type { Ref } from 'vue'
+import { nextTick, ref, shallowRef, watch } from 'vue'
+import { useDevicesList, useEventListener } from '@vueuse/core'
 import { isTruthy } from '@antfu/utils'
-import RecorderType from 'recordrtc'
+import type RecorderType from 'recordrtc'
 import type { Options as RecorderOptions } from 'recordrtc'
 import { currentCamera, currentMic } from '../state'
 
@@ -123,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,7 +1,9 @@
-import { Fn, not, and, onKeyStroke, KeyFilter } from '@vueuse/core'
-import { Ref, watch } from 'vue'
+import type { Fn, KeyFilter } 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

@@ -1,4 +1,5 @@
-import { App, computed, reactive, readonly } from 'vue'
+import type { App } from 'vue'
+import { computed, reactive, readonly } from 'vue'
 import { objectKeys } from '@antfu/utils'
 import type { UnwrapNestedRefs } from '@vue/reactivity'
 import * as nav from '../logic/nav'
@@ -22,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({
@@ -34,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

@@ -1,17 +1,18 @@
-import { App, DirectiveBinding, InjectionKey, watch } from 'vue'
+import type { App, DirectiveBinding, InjectionKey } from 'vue'
+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 {
@@ -22,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) {
@@ -108,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) {
@@ -159,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.19",
+  "version": "0.28.2",
   "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.19",
-    "@slidev/types": "0.27.19",
-    "@vueuse/core": "^7.3.0",
+    "@antfu/utils": "^0.4.0",
+    "@slidev/parser": "0.28.2",
+    "@slidev/types": "0.28.2",
+    "@vueuse/core": "^7.5.3",
     "@vueuse/head": "^0.7.4",
-    "@vueuse/motion": "^2.0.0-beta.4",
-    "codemirror": "^5.64.0",
+    "@vueuse/motion": "^2.0.0-beta.9",
+    "codemirror": "^5.65.0",
     "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.31.1",
+    "nanoid": "^3.1.32",
     "prettier": "^2.5.1",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.20.0",
-    "vite-plugin-windicss": "^1.5.4",
+    "resolve": "^1.21.0",
+    "vite-plugin-windicss": "^1.6.2",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12",
-    "windicss": "^3.3.0"
+    "windicss": "^3.4.2"
   },
   "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,6 +1,7 @@
-import { createRouter, RouteRecordRaw, createWebHistory, createWebHashHistory } from 'vue-router'
+import type { RouteRecordRaw } 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[]
@@ -50,6 +51,8 @@ declare module 'vue-router' {
       id: number
       no: number
       filepath: string
+      title?: string
+      level?: number
     }
 
     // private fields

package/setup/codemirror.ts

@@ -1,4 +1,5 @@
-import { Ref, watch, WritableComputedRef } from 'vue'
+import type { Ref, WritableComputedRef } from 'vue'
+import { watch } from 'vue'
 import CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/css/css'

package/setup/main.ts

@@ -1,6 +1,6 @@
 /* __imports__ */
 
-import { AppContext } from '@slidev/types'
+import type { AppContext } from '@slidev/types'
 import { MotionPlugin } from '@vueuse/motion'
 
 export default function setupMain(context: AppContext) {
@@ -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/mermaid.ts

@@ -1,6 +1,7 @@
 /* __imports__ */
 
-import { defineMermaidSetup, MermaidOptions } from '@slidev/types'
+import type { MermaidOptions } from '@slidev/types'
+import { defineMermaidSetup } from '@slidev/types'
 
 export default defineMermaidSetup(() => {
   // eslint-disable-next-line prefer-const

package/setup/monaco.ts

@@ -1,7 +1,7 @@
 import { getCurrentInstance, onMounted } from 'vue'
 import * as monaco from 'monaco-editor'
 import { createSingletonPromise } from '@antfu/utils'
-import { MonacoSetupReturn } from '@slidev/types'
+import type { MonacoSetupReturn } from '@slidev/types'
 /* __imports__ */
 
 const setup = createSingletonPromise(async() => {
@@ -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 { 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/shim.d.ts

@@ -6,7 +6,7 @@ declare interface Window {
 
 // with vite-plugin-md, markdowns can be treat as Vue components
 declare module '*.md' {
-  import { ComponentOptions } from 'vue'
+  import type { ComponentOptions } from 'vue'
   const component: ComponentOptions
   export default component
 }

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'