@slidev/client 0.43.5 → 0.43.7

package/builtin/PlantUml.vue

@@ -13,15 +13,18 @@ Alice -> Bob : Hello!
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   code: string
   server: string
   scale?: number
-}>()
+  alt?: string
+}>(), {
+  alt: 'PlantUML diagram',
+})
 
 const uri = computed(() => `${props.server}/svg/${props.code}`)
 </script>
 
 <template>
-  <img alt="PlantUML diagram" :src="uri" :style="{ scale }">
+  <img :src="uri" :style="{ scale }" :alt="alt">
 </template>

package/builtin/Toc.vue

@@ -53,8 +53,7 @@ function filterTreeDepth(tree: TocItem[], level = 1): TocItem[] {
 function filterOnlyCurrentTree(tree: TocItem[]): TocItem[] {
   return tree
     .filter(
-      (item: TocItem) =>
-        item.active || item.activeParent || item.hasActiveParent,
+      (item: TocItem) => item.active || item.activeParent || item.hasActiveParent,
     )
     .map((item: TocItem) => ({
       ...item,

package/builtin/VClick.ts

@@ -24,7 +24,8 @@ export default defineComponent({
   },
   render() {
     return createVNode(
-      VClicks, {
+      VClicks,
+      {
         every: 99999,
         at: this.at,
         hide: this.hide,

package/builtin/VClicks.ts

@@ -63,7 +63,7 @@ export default defineComponent({
         if (!isVNode(i))
           return i
         if (listTags.includes(i.type as string) && Array.isArray(i.children)) {
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          // eslint-disable-next-line ts/no-use-before-define
           const [vNodes, total] = mapChildren(i.children, depth + 1)
           idx += total
           return h(i, {}, [vNodes])

package/composables/useNav.ts

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import type { TocItem } from '@slidev/types'
 import type { SlidevContextNav } from '../modules/context'
-import { addToTree, downloadPDF, filterTree, getPath, getTreeWithActiveStatuses, next, nextSlide, openInEditor, prev, prevSlide } from '../logic/nav'
+import { addToTree, downloadPDF, filterTree, getPath, getTreeWithActiveStatuses, go, next, nextSlide, openInEditor, prev, prevSlide } from '../logic/nav'
 import { rawRoutes } from '../routes'
 
 export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>): SlidevContextNav {
@@ -41,6 +41,7 @@ export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormaliz
     rawTree,
     treeWithActiveStatuses,
     tree,
+    go,
     downloadPDF,
     next,
     nextSlide,

package/composables/useViewTransition.ts

@@ -31,7 +31,7 @@ export function useViewTransition() {
     let changeRoute: () => void
     const ready = new Promise<void>(resolve => (changeRoute = resolve))
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // eslint-disable-next-line ts/ban-ts-comment
     // @ts-expect-error
     const transition = document.startViewTransition(() => {
       changeRoute()

package/iframes/monaco/index.ts

@@ -138,8 +138,7 @@ async function start() {
     update = () => {
       monaco.editor.setTheme(props.dark
         ? (theme.dark || 'vitesse-dark')
-        : (theme.light || 'vitesse-light'),
-      )
+        : (theme.light || 'vitesse-light'))
       styleObject.innerHTML = `:root { ${props.style} }`
 
       if (originalEditor.getValue().toString() !== props.code) {
@@ -213,8 +212,7 @@ async function start() {
     update = () => {
       monaco.editor.setTheme(props.dark
         ? (theme.dark || 'vitesse-dark')
-        : (theme.light || 'vitesse-light'),
-      )
+        : (theme.light || 'vitesse-light'))
       styleObject.innerHTML = `:root { ${props.style} }`
 
       if (originalEditor.getValue().toString() !== props.code) {

package/internals/DrawingControls.vue

@@ -1,11 +1,19 @@
 <script setup lang="ts">
 import {
-  brush, brushColors, canClear,
-  canRedo, canUndo, clearDrauu,
-  drauu, drawingEnabled, drawingMode, drawingPinned,
+  brush,
+  brushColors,
+  canClear,
+  canRedo,
+  canUndo,
+  clearDrauu,
+  drauu,
+  drawingEnabled,
+  drawingMode,
+  drawingPinned,
 } from '../logic/drawings'
 import VerticalDivider from './VerticalDivider.vue'
 import Draggable from './Draggable.vue'
+import HiddenText from './HiddenText.vue'
 
 function undo() {
   drauu.undo()
@@ -33,24 +41,30 @@ function setBrushColor(color: typeof brush.color) {
     :initial-y="10"
   >
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
+      <HiddenText text="Draw with stylus" />
       <carbon:pen />
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
+      <HiddenText text="Draw a 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" />
       </svg>
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
+      <HiddenText text="Draw an arrow" />
       <carbon:arrow-up-right />
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
+      <HiddenText text="Draw an ellipse" />
       <carbon:radio-button />
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
+      <HiddenText text="Draw a rectangle" />
       <carbon:checkbox />
     </button>
     <!-- TODO: not sure why it's not working! -->
     <!-- <button class="slidev-icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+      <HiddenText text="Erase" />
       <carbon:erase />
     </button> -->
 
@@ -63,6 +77,7 @@ function setBrushColor(color: typeof brush.color) {
       :class="brush.color === color ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
+      <HiddenText text="Set brush color" />
       <div
         class="w-6 h-6 transition-all transform border border-gray-400/50"
         :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
@@ -73,17 +88,21 @@ function setBrushColor(color: typeof brush.color) {
     <VerticalDivider />
 
     <button class="slidev-icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
+      <HiddenText text="Undo" />
       <carbon:undo />
     </button>
     <button class="slidev-icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
+      <HiddenText text="Redo" />
       <carbon:redo />
     </button>
     <button class="slidev-icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
+      <HiddenText text="Delete" />
       <carbon:delete />
     </button>
 
     <VerticalDivider />
     <button class="slidev-icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
+      <HiddenText :text="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" />
       <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
       <carbon:pin v-show="!drawingPinned" />
     </button>
@@ -93,6 +112,7 @@ function setBrushColor(color: typeof brush.color) {
       :class="{ shallow: !drawingEnabled }"
       @click="drawingEnabled = !drawingEnabled"
     >
+      <HiddenText :text="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'" />
       <carbon:error v-show="drawingPinned" />
       <carbon:close-outline v-show="!drawingPinned" />
     </button>

package/internals/Editor.vue

@@ -5,6 +5,7 @@ import { activeElement, editorWidth, isInputting, showEditor } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
+import HiddenText from './HiddenText.vue'
 
 const props = defineProps<{
   resize: boolean
@@ -147,9 +148,11 @@ throttledWatch(
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
         <button class="slidev-icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
+          <HiddenText text="Switch to content tab" />
           <carbon:account />
         </button>
         <button class="slidev-icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
+          <HiddenText text="Switch to notes tab" />
           <carbon:align-box-bottom-right />
         </button>
       </div>
@@ -158,9 +161,11 @@ throttledWatch(
       </span>
       <div class="flex-auto" />
       <button class="slidev-icon-btn" @click="openInEditor()">
+        <HiddenText text="Open in editor" />
         <carbon:launch />
       </button>
       <button class="slidev-icon-btn" @click="close">
+        <HiddenText text="Close" />
         <carbon:close />
       </button>
     </div>

package/internals/HiddenText.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <span class="sr-only">{{ text }}</span>
+</template>

package/internals/InfoDialog.vue

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

package/internals/NavControls.vue

@@ -8,6 +8,7 @@ import { configs } from '../env'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
+import HiddenText from './HiddenText.vue'
 
 // @ts-expect-error virtual module
 import CustomNavControls from '/@slidev/custom-nav-controls'
@@ -33,8 +34,7 @@ function onMouseLeave() {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow dark:border dark:border-gray-400 dark:border-opacity-10',
-)
+  : 'rounded-md bg-main shadow dark:border dark:border-gray-400 dark:border-opacity-10')
 
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)
@@ -53,19 +53,28 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       @mouseleave="onMouseLeave"
     >
       <button v-if="!isEmbedded" class="slidev-icon-btn" @click="toggleFullscreen">
-        <carbon:minimize v-if="isFullscreen" />
-        <carbon:maximize v-else />
+        <template v-if="isFullscreen">
+          <HiddenText text="Close fullscreen" />
+          <carbon:minimize />
+        </template>
+        <template v-else>
+          <HiddenText text="Enter fullscreen" />
+          <carbon:maximize />
+        </template>
       </button>
 
       <button class="slidev-icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
+        <HiddenText text="Go to previous slide" />
         <carbon:arrow-left />
       </button>
 
       <button class="slidev-icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
+        <HiddenText text="Go to next slide" />
         <carbon:arrow-right />
       </button>
 
       <button v-if="!isEmbedded" class="slidev-icon-btn" title="Slides overview" @click="toggleOverview()">
+        <HiddenText text="Show slide overview" />
         <carbon:apps />
       </button>
 
@@ -75,8 +84,14 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         title="Toggle dark mode"
         @click="toggleDark()"
       >
-        <carbon-moon v-if="isDark" />
-        <carbon-sun v-else />
+        <template v-if="isDark">
+          <HiddenText text="Switch to light theme" />
+          <carbon-moon />
+        </template>
+        <template v-else>
+          <HiddenText text="Switch to dark mode theme" />
+          <carbon-sun />
+        </template>
       </button>
 
       <VerticalDivider />
@@ -93,13 +108,20 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           title="Show presenter cursor"
           @click="showPresenterCursor = !showPresenterCursor"
         >
-          <ph-cursor-fill v-if="showPresenterCursor" />
-          <ph-cursor-duotone v-else class="opacity-50" />
+          <template v-if="showPresenterCursor">
+            <HiddenText text="Hide presenter cursor" />
+            <ph-cursor-fill />
+          </template>
+          <template v-else>
+            <HiddenText text="Show presenter cursor" />
+            <ph-cursor-duotone />
+          </template>
         </button>
       </template>
 
       <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
         <button class="slidev-icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
+          <HiddenText v-if="drawingEnabled" :text="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" />
           <carbon:pen />
           <div
             v-if="drawingEnabled"
@@ -123,11 +145,13 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           class="slidev-icon-btn <md:hidden"
           @click="showEditor = !showEditor"
         >
+          <HiddenText :text="showEditor ? 'Hide editor' : 'Show editor'" />
           <carbon:text-annotation-toggle />
         </button>
       </template>
       <template v-if="!__DEV__">
         <button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">
+          <HiddenText text="Download as PDF" />
           <carbon:download />
         </button>
       </template>
@@ -137,6 +161,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         class="slidev-icon-btn"
         @click="showInfoDialog = !showInfoDialog"
       >
+        <HiddenText text="Show info" />
         <carbon:information />
       </button>
 
@@ -144,6 +169,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <MenuButton>
           <template #button>
             <button class="slidev-icon-btn">
+              <HiddenText text="Adjust settings" />
               <carbon:settings-adjust />
             </button>
           </template>

package/internals/NotesView.vue

@@ -8,6 +8,7 @@ import { fullscreen } from '../state'
 import { total } from '../logic/nav'
 import { rawRoutes } from '../routes'
 import NoteDisplay from './NoteDisplay.vue'
+import HiddenText from './HiddenText.vue'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
@@ -57,13 +58,16 @@ function decreaseFontSize() {
     <div class="flex-none border-t border-gray-400 border-opacity-20">
       <div class="flex gap-1 items-center px-6 py-3">
         <button class="slidev-icon-btn" @click="toggleFullscreen">
+          <HiddenText :text="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" />
           <carbon:minimize v-if="isFullscreen" />
           <carbon:maximize v-else />
         </button>
         <button class="slidev-icon-btn" @click="increaseFontSize">
+          <HiddenText text="Increase font size" />
           <carbon:zoom-in />
         </button>
         <button class="slidev-icon-btn" @click="decreaseFontSize">
+          <HiddenText text="Decrease font size" />
           <carbon:zoom-out />
         </button>
         <div class="flex-auto" />

package/internals/Presenter.vue

@@ -88,7 +88,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="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;">
+        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;" alt="Slidev logo">
         <div class="flex-auto" />
         <div
           class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"

package/internals/PresenterPrint.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@vueuse/head'
 import { configs, themeVars } from '../env'

package/internals/RecordingControls.vue

@@ -5,6 +5,7 @@ import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
 import DevicesList from './DevicesList.vue'
 import MenuButton from './MenuButton.vue'
+import HiddenText from './HiddenText.vue'
 
 const {
   recording,
@@ -40,6 +41,7 @@ onMounted(() => {
     title="Show camera view"
     @click="toggleAvatar"
   >
+    <HiddenText text="Toggle camera view" />
     <carbon:user-avatar />
   </button>
 
@@ -49,12 +51,14 @@ onMounted(() => {
     title="Recording"
     @click="toggleRecording"
   >
+    <HiddenText :text="recording ? 'Stop record video' : 'Record video'" />
     <carbon:stop-outline v-if="recording" />
     <carbon:video v-else />
   </button>
   <MenuButton :disabled="recording">
     <template #button>
       <button class="slidev-icon-btn h-full !text-sm !px-0">
+        <HiddenText text="Select recording device" />
         <carbon:chevron-up class="opacity-50" />
       </button>
     </template>

package/internals/SlidesOverview.vue

@@ -9,6 +9,7 @@ import { getSlideClass } from '../utils'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'
+import HiddenText from './HiddenText.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -157,6 +158,7 @@ watchEffect(() => {
     </div>
   </Transition>
   <button v-if="value" class="fixed text-2xl top-4 right-4 slidev-icon-btn text-gray-400" @click="close">
+    <HiddenText text="Close" />
     <carbon:close />
   </button>
 </template>

package/layouts/iframe-left.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 
 const props = defineProps<{
   url: string
@@ -17,9 +17,9 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
         :src="url"
         :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
       />
-      <div class="slidev-layout default" v-bind="$attrs">
-        <slot />
-      </div>
+    </div>
+    <div class="slidev-layout default" v-bind="$attrs">
+      <slot />
     </div>
   </div>
 </template>

package/layouts/iframe-right.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 
 const props = defineProps<{
   url: string

package/layouts/iframe.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 
 const props = defineProps<{
   url: string

package/modules/context.ts

@@ -9,7 +9,7 @@ import { isDark } from '../logic/dark'
 import { injectionClicks, injectionCurrentPage, injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 
-export type SlidevContextNavKey = 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes'
+export type SlidevContextNavKey = 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes' | 'go'
 export type SlidevContextNavClicksKey = 'clicks' | 'clicksElements' | 'clicksTotal' | 'hasNext' | 'hasPrev'
 
 export interface SlidevContextNav extends Pick<typeof nav, SlidevContextNavKey> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.43.5",
+  "version": "0.43.7",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,10 +16,10 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.6",
-    "@unocss/reset": "^0.55.7",
-    "@vueuse/core": "^10.4.1",
+    "@unocss/reset": "^0.56.5",
+    "@vueuse/core": "^10.5.0",
     "@vueuse/head": "^2.0.0",
-    "@vueuse/math": "^10.4.1",
+    "@vueuse/math": "^10.5.0",
     "@vueuse/motion": "^2.0.0",
     "codemirror": "^5.65.5",
     "defu": "^6.1.2",
@@ -28,23 +28,23 @@
     "fuse.js": "^6.6.2",
     "js-base64": "^3.7.5",
     "js-yaml": "^4.1.0",
-    "katex": "^0.16.8",
-    "mermaid": "^10.4.0",
+    "katex": "^0.16.9",
+    "mermaid": "^10.5.0",
     "monaco-editor": "^0.37.1",
     "nanoid": "^5.0.1",
     "prettier": "^3.0.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.6",
-    "unocss": "^0.55.7",
+    "unocss": "^0.56.5",
     "vite-plugin-windicss": "^1.9.1",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
+    "vue-router": "^4.2.5",
     "vue-starport": "^0.4.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.5",
-    "@slidev/types": "0.43.5"
+    "@slidev/parser": "0.43.7",
+    "@slidev/types": "0.43.7"
   },
   "devDependencies": {
-    "vite": "^4.4.9"
+    "vite": "^4.4.11"
   }
 }

package/shim.d.ts

@@ -1,5 +1,3 @@
-
-
 declare interface Window {
   // extend the window
 }
@@ -9,16 +7,19 @@ declare module '*.vue';
 // with unplugin-vue-markdown, markdowns can be treat as Vue components
 declare module '*.md' {
   import type { ComponentOptions } from 'vue'
+
   const component: ComponentOptions
   export default component
 }
 
 declare module '/@slidev/configs' {
   import { SlidevConfig } from '@slidev/types'
+
   export default SlidevConfig
 }
 
 declare module 'mermaid/dist/mermaid.esm.mjs' {
   import Mermaid from 'mermaid/dist/mermaid.d.ts'
+
   export default Mermaid
 }