@slidev/client 0.27.16 → 0.27.20

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,7 +12,7 @@ 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">

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/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,4 +1,4 @@
-import { SlidevConfig } from '@slidev/types'
+import type { SlidevConfig } from '@slidev/types'
 import { computed } from 'vue'
 import { objectMap } from '@antfu/utils'
 // @ts-expect-error

package/internals/DrawingControls.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

@@ -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

@@ -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

@@ -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

@@ -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/NavControls.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/Presenter.vue

@@ -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

@@ -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,12 +52,12 @@ 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">
           <div class="mt-2 opacity-50">
-            Enumated filenames
+            Enumerated filenames
           </div>
           <div class="font-mono">
             {{ getFilename('screen') }}
@@ -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/WebCamera.vue

@@ -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

@@ -1,20 +1,11 @@
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
-const props = defineProps({
-  class: {
-    type: String,
-  },
-  url: {
-    type: String,
-  },
-})
-const url = ref(props.url)
+const props = defineProps<{ class?: string; url: string }>()
 </script>
 
 <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

@@ -1,14 +1,5 @@
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
-const props = defineProps({
-  class: {
-    type: String,
-  },
-  url: {
-    type: String,
-  },
-})
-const url = ref(props.url)
+const props = defineProps<{ class?: string; url: string }>()
 </script>
 
 <template>
@@ -17,7 +8,7 @@ const url = ref(props.url)
       <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

@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
-const props = defineProps({
-  url: {
-    type: String,
-  },
-})
-const url = ref(props.url)
+defineProps<{ url: string }>()
 </script>
 
 <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,5 +1,6 @@
 import { computed, markRaw, nextTick, reactive, ref, watch, watchEffect } from 'vue'
-import { Brush, createDrauu, DrawingMode, Options as DrauuOptions } from 'drauu'
+import type { Brush, DrawingMode, Options as DrauuOptions } from 'drauu'
+import { createDrauu } from 'drauu'
 import { useStorage, toReactive } from '@vueuse/core'
 import { serverDrawingState as drawingState, configs } from '../env'
 import { currentPage, isPresenter } from './nav'

package/logic/nav.ts

@@ -1,4 +1,5 @@
-import { computed, Ref, ref, nextTick } from 'vue'
+import type { Ref } from 'vue'
+import { computed, ref, nextTick } from 'vue'
 import { isString, SwipeDirection, timestamp, usePointerSwipe } from '@vueuse/core'
 import { rawRoutes, router } from '../routes'
 import { configs } from '../env'

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 type { Ref } from 'vue'
+import { nextTick, ref, shallowRef, watch } from 'vue'
 import { useEventListener, useDevicesList } 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'
 

package/logic/shortcuts.ts

@@ -1,5 +1,7 @@
-import { Fn, not, and, onKeyStroke, KeyFilter } from '@vueuse/core'
-import { Ref, watch } from 'vue'
+import type { Fn, KeyFilter } from '@vueuse/core'
+import { not, and, 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 setupShortcuts from '../setup/shortcuts'

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'

package/modules/directives.ts

@@ -1,4 +1,5 @@
-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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.27.16",
+  "version": "0.27.20",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
@@ -13,27 +13,27 @@
   "author": "antfu <anthonyfu117@hotmail.com>",
   "dependencies": {
     "@antfu/utils": "^0.3.0",
-    "@slidev/parser": "0.27.16",
-    "@slidev/types": "0.27.16",
-    "@vueuse/core": "^6.6.2",
-    "@vueuse/head": "^0.6.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.63.3",
+    "codemirror": "^5.64.0",
     "drauu": "^0.2.1",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "js-yaml": "^4.1.0",
-    "katex": "^0.13.18",
+    "katex": "^0.15.1",
     "mermaid": "8.13.0",
-    "monaco-editor": "^0.29.1",
+    "monaco-editor": "^0.31.0",
     "nanoid": "^3.1.30",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
     "recordrtc": "^5.6.2",
     "resolve": "^1.20.0",
-    "vite-plugin-windicss": "^1.4.12",
-    "vue": "^3.2.20",
+    "vite-plugin-windicss": "^1.5.4",
+    "vue": "^3.2.26",
     "vue-router": "^4.0.12",
-    "windicss": "^3.1.9"
+    "windicss": "^3.3.0"
   },
   "engines": {
     "node": ">=14.0.0"

package/routes.ts

@@ -1,4 +1,5 @@
-import { createRouter, RouteRecordRaw, createWebHistory, createWebHashHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
 import Play from './internals/Play.vue'
 // @ts-expect-error
 import _rawRoutes from '/@slidev/routes'

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) {

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() => {

package/setup/shortcuts.ts

@@ -1,6 +1,6 @@
 /* __imports__ */
 
-import { ShortcutOptions, NavOperations } from '@slidev/types'
+import type { ShortcutOptions, NavOperations } from '@slidev/types'
 import { next, prev, nextSlide, prevSlide, downloadPDF } from '../logic/nav'
 import { toggleDark } from '../logic/dark'
 import { toggleOverview, showGotoDialog, showOverview } from '../state'

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
 }