@slidev/client 0.40.5 → 0.40.6

package/builtin/CodeBlockWrapper.vue

@@ -81,9 +81,15 @@ onMounted(() => {
         line.classList.toggle('dishonored', !highlighted)
       })
       if (props.maxHeight) {
-        const firstHighlightedEl = target.querySelector('.line.highlighted')
-        if (firstHighlightedEl)
-          firstHighlightedEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        const highlightedEls = Array.from(target.querySelectorAll('.line.highlighted'))
+        const height = highlightedEls.reduce((acc, el) => el.offsetHeight + acc, 0)
+        if (height > el.value.offsetHeight) {
+          highlightedEls[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
+        }
+        else if (highlightedEls.length > 0) {
+          const middleEl = highlightedEls[Math.round((highlightedEls.length - 1) / 2)]
+          middleEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }
       }
     }
   })

package/builtin/SlidevVideo.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionRoute, injectionSlideContext, injectionSlidevContext } from '../constants'
+
+const props = defineProps<{
+  autoPlay?: boolean | 'once' | 'resume' | 'resumeOnce'
+  autoPause?: 'slide' | 'click'
+  autoReset?: 'slide' | 'click'
+}>()
+
+const $slidev = inject(injectionSlidevContext)
+const route = inject(injectionRoute)
+const currentContext = inject(injectionSlideContext)
+const clicks = inject(injectionClicks)
+const clicksDisabled = inject(injectionClicksDisabled)
+const clicksElements = inject(injectionClicksElements)
+
+const video = ref<HTMLMediaElement>()
+const played = ref(false)
+const ended = ref(false)
+
+const matchRoute = computed(() => {
+  if (!video.value || currentContext !== 'slide')
+    return false
+  return route === $slidev?.nav.currentRoute
+})
+
+const matchClick = computed(() => {
+  if (!video.value || currentContext !== 'slide' || clicks?.value === undefined || clicksDisabled?.value)
+    return false
+  return !clicksElements?.value.includes(video.value) || clicksElements?.value[clicks?.value - 1] === video.value
+})
+
+const matchRouteAndClick = computed(() => matchRoute.value && matchClick.value)
+
+watch(matchRouteAndClick, () => {
+  if (!video.value || currentContext !== 'slide')
+    return
+
+  if (matchRouteAndClick.value) {
+    if (props.autoReset === 'click')
+      video.value.currentTime = 0
+    if (props.autoPlay && (!played.value || props.autoPlay === 'resume' || (props.autoPlay === 'resumeOnce' && !ended.value)))
+      video.value.play()
+  }
+
+  if ((props.autoPause === 'click' && !matchRouteAndClick.value) || (props.autoPause === 'slide' && !matchRoute.value))
+    video.value.pause()
+})
+
+watch(matchRoute, () => {
+  if (!video.value || currentContext !== 'slide')
+    return
+
+  if (matchRoute.value && props.autoReset === 'slide')
+    video.value.currentTime = 0
+})
+
+function onPlay() {
+  played.value = true
+}
+
+function onEnded() {
+  ended.value = true
+}
+
+onMounted(() => {
+  if (!video.value || currentContext !== 'slide')
+    return
+  video.value?.addEventListener('play', onPlay)
+  video.value?.addEventListener('ended', onEnded)
+})
+
+onUnmounted(() => {
+  if (!video.value || currentContext !== 'slide')
+    return
+  video.value?.removeEventListener('play', onPlay)
+  video.value?.removeEventListener('ended', onEnded)
+})
+</script>
+
+<template>
+  <video ref="video">
+    <slot />
+  </video>
+</template>

package/builtin/TocList.vue

@@ -31,7 +31,7 @@ const classes = computed(() => {
 <template>
   <ol v-if="list && list.length > 0" :class="classes">
     <li
-      v-for="item in list"
+      v-for="item of list"
       :key="item.path" class="slidev-toc-item"
       :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
     >

package/iframes/monaco/index.ts

@@ -26,7 +26,7 @@ let update: () => void = () => { }
 
 document.body.appendChild(styleObject)
 
-const lang = () => {
+function lang() {
   switch (props.lang) {
     case 'ts':
       return 'typescript'
@@ -37,7 +37,7 @@ const lang = () => {
   }
 }
 
-const ext = () => {
+function ext() {
   switch (lang()) {
     case 'typescript':
       return 'ts'

package/internals/Goto.vue

@@ -1,74 +1,173 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
-import { go, rawRoutes, total } from '../logic/nav'
-import { showGotoDialog } from '../state'
+import { computed, ref, watch } from 'vue'
+import Fuse from 'fuse.js'
+import { go, rawRoutes } from '../logic/nav'
+import { activeElement, showGotoDialog } from '../state'
 
+const container = ref<HTMLDivElement>()
 const input = ref<HTMLInputElement>()
+const list = ref<HTMLUListElement>()
+const items = ref<HTMLLIElement[]>()
 const text = ref('')
+const selectedIndex = ref(0)
 
-const valid = computed(() => {
-  if (text.value.startsWith('/')) {
-    return !!rawRoutes.find(r => r.path === text.value.substring(1))
-  }
-  else {
-    const num = +text.value
-    return !isNaN(num) && num > 0 && num <= total.value
-  }
-})
+function notNull<T>(value: T | null | undefined): value is T {
+  return value !== null && value !== undefined
+}
+
+const fuse = computed(() => new Fuse(rawRoutes.map(i => i.meta?.slide).filter(notNull), {
+  keys: ['no', 'title'],
+  threshold: 0.3,
+  shouldSort: true,
+  minMatchCharLength: 1,
+}))
+
+const path = computed(() => text.value.startsWith('/') ? text.value.substring(1) : text.value)
+const result = computed(() => fuse.value.search(path.value).map(result => result.item))
+const valid = computed(() => !!result.value.length)
 
 function goTo() {
   if (valid.value) {
-    if (text.value.startsWith('/'))
-      go(text.value.substring(1))
-
-    else
-      go(+text.value)
+    const item = result.value.at(selectedIndex.value || 0)
+    if (item)
+      go(item.no)
   }
   close()
 }
 
 function close() {
+  text.value = ''
   showGotoDialog.value = false
 }
 
+function focusDown(event: Event) {
+  event.preventDefault()
+  selectedIndex.value++
+  if (selectedIndex.value >= result.value.length)
+    selectedIndex.value = 0
+  scroll()
+}
+
+function focusUp(event: Event) {
+  event.preventDefault()
+  selectedIndex.value--
+  if (selectedIndex.value <= -2)
+    selectedIndex.value = result.value.length - 1
+  scroll()
+}
+
+function scroll() {
+  const item = items.value?.[selectedIndex.value]
+  if (item && list.value) {
+    if (item.offsetTop + item.offsetHeight > list.value.offsetHeight + list.value.scrollTop) {
+      list.value.scrollTo({
+        behavior: 'smooth',
+        top: item.offsetTop + item.offsetHeight - list.value.offsetHeight + 1,
+      })
+    }
+    else if (item.offsetTop < list.value.scrollTop) {
+      list.value.scrollTo({
+        behavior: 'smooth',
+        top: item.offsetTop,
+      })
+    }
+  }
+}
+
+function updateText(event: Event) {
+  selectedIndex.value = 0
+  text.value = (event.target as HTMLInputElement).value
+}
+
+function select(no: number) {
+  go(no)
+  close()
+}
+
 watch(showGotoDialog, async (show) => {
   if (show) {
-    await nextTick()
     text.value = ''
-    input.value?.focus()
+    selectedIndex.value = 0
+    // delay the focus to avoid the g character coming from the key that triggered showGotoDialog
+    setTimeout(() => input.value?.focus(), 0)
   }
   else {
     input.value?.blur()
   }
 })
 
-// remove the g character coming from the key that triggered showGotoDialog (e.g. in Firefox)
-watch(text, (t) => {
-  if (t.match(/^[^0-9/]/))
-    text.value = text.value.substring(1)
+watch(activeElement, () => {
+  if (!container.value?.contains(activeElement.value as Node))
+    close()
 })
 </script>
 
 <template>
   <div
     id="slidev-goto-dialog"
-    class="fixed right-5 bg-main transform transition-all"
+    ref="container"
+    class="fixed right-5 transition-all"
     :class="showGotoDialog ? 'top-5' : '-top-20'"
-    shadow="~"
-    p="x-4 y-2"
-    border="~ transparent rounded dark:gray-400 dark:opacity-25"
   >
-    <input
-      ref="input"
-      v-model="text"
-      type="text"
-      :disabled="!showGotoDialog"
-      class="outline-none bg-transparent"
-      placeholder="Goto..."
-      :class="{ 'text-red-400': !valid && text }"
-      @keydown.enter="goTo"
-      @keydown.escape="close"
-      @blur="close"
+    <div
+      class="bg-main transform"
+      shadow="~"
+      p="x-4 y-2"
+      border="~ transparent rounded dark:main"
+    >
+      <input
+        ref="input"
+        :value="text"
+        type="text"
+        :disabled="!showGotoDialog"
+        class="outline-none bg-transparent"
+        placeholder="Goto..."
+        :class="{ 'text-red-400': !valid && text }"
+        @keydown.enter="goTo"
+        @keydown.escape="close"
+        @keydown.down="focusDown"
+        @keydown.up="focusUp"
+        @input="updateText"
+      >
+    </div>
+    <ul
+      v-if="result.length > 0"
+      ref="list"
+      class="autocomplete-list"
+      shadow="~"
+      border="~ transparent rounded dark:main"
     >
+      <li
+        v-for="(item, index) of result"
+        ref="items"
+        :key="item.id"
+        role="button"
+        tabindex="0"
+        p="x-4 y-2"
+        cursor-pointer
+        hover="op100"
+        flex="~ gap-2"
+        items-center
+        :border="index === 0 ? '' : 't main'"
+        :class="selectedIndex === index ? 'bg-active op100' : 'op80'"
+        @click.stop="select(item.no)"
+      >
+        <div w-4 text-right op50 text-sm>
+          {{ item.no }}
+        </div>
+        {{ item.title }}
+      </li>
+    </ul>
   </div>
 </template>
+
+<style scoped lang="postcss">
+.autocomplete-list {
+  @apply bg-main transform mt-1 overflow-auto;
+  max-height: calc( 100vh - 100px );
+}
+
+.autocomplete {
+  cursor: pointer;
+}
+</style>

package/internals/MenuButton.vue

@@ -31,7 +31,7 @@ onClickOutside(el, () => {
       <div
         v-if="value"
         class="rounded-md bg-main shadow absolute bottom-10 left-0 z-20"
-        dark:border="~ gray-400 opacity-10"
+        dark:border="~ main"
       >
         <slot name="menu" />
       </div>

package/internals/Modal.vue

@@ -28,7 +28,7 @@ function onClick() {
       />
       <div
         class="m-auto rounded-md bg-main shadow"
-        dark:border="~ gray-400 opacity-10"
+        dark:border="~ main"
         :class="props.class"
       >
         <slot />

package/internals/NavControls.vue

@@ -25,7 +25,7 @@ const presenterLink = computed(() => `/presenter/${currentPage.value}${query.val
 const nonPresenterLink = computed(() => `/${currentPage.value}${query.value}`)
 
 const root = ref<HTMLDivElement>()
-const onMouseLeave = () => {
+function onMouseLeave() {
   if (root.value && activeElement.value && root.value.contains(activeElement.value))
     activeElement.value.blur()
 }

package/modules/directives.ts

@@ -128,6 +128,9 @@ export default function createDirectives() {
           // Set default dir.value
           if (dir.value == null)
             dir.value = elements?.value.length
+          // Relative value starts with '+' o '-'
+          if (typeof dir.value === 'string' && (dir.value.startsWith('+') || dir.value.startsWith('-')))
+            dir.value = (elements?.value?.length || 0) + Number(dir.value)
 
           // If a v-click order before v-after is lower than v-after, the order map will
           // not contain the key for v-after, so we need to set it first, then move v-after

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.40.5",
+  "version": "0.40.6",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -25,13 +25,14 @@
     "defu": "^6.1.2",
     "drauu": "^0.3.2",
     "file-saver": "^2.0.5",
+    "fuse.js": "^6.6.2",
     "js-base64": "^3.7.5",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.4",
     "mermaid": "^9.4.3",
     "monaco-editor": "^0.33.0",
-    "nanoid": "^4.0.1",
-    "prettier": "^2.8.6",
+    "nanoid": "^4.0.2",
+    "prettier": "^2.8.7",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.1",
     "unocss": "^0.50.6",
@@ -40,8 +41,8 @@
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.40.5",
-    "@slidev/types": "0.40.5"
+    "@slidev/parser": "0.40.6",
+    "@slidev/types": "0.40.6"
   },
   "devDependencies": {
     "vite": "^4.2.1"

package/routes.ts

@@ -78,6 +78,9 @@ declare module 'vue-router' {
       filepath: string
       title?: string
       level?: number
+      raw: string
+      content: string
+      frontmatter: Record<string, any>
     }
     transition?: string | TransitionGroupProps | undefined
     // private fields

package/styles/code.css

@@ -12,6 +12,7 @@ html:not(.dark) .shiki-dark {
 
 .slidev-code-wrapper {
   margin: var(--slidev-code-margin) !important;
+  scroll-padding: var(--slidev-code-padding);
   &:-webkit-scrollbar {
     width: 0px;
   }

package/uno.config.ts

@@ -15,6 +15,8 @@ export default defineConfig({
   ],
   shortcuts: {
     'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+    'bg-active': 'bg-gray-400/10',
+    'border-main': 'border-gray-400/20',
     'abs-tl': 'absolute top-0 left-0',
     'abs-tr': 'absolute top-0 right-0',
     'abs-b': 'absolute bottom-0 left-0 right-0',

package/windi.config.ts

@@ -48,6 +48,8 @@ export default defineConfig({
   ],
   shortcuts: {
     'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+    'bg-active': 'bg-gray-400/10',
+    'border-main': 'border-gray-400/20',
     'abs-tl': 'absolute top-0 left-0',
     'abs-tr': 'absolute top-0 right-0',
     'abs-b': 'absolute bottom-0 left-0 right-0',