@slidev/client 0.43.0 → 0.43.1

package/builtin/CodeBlockWrapper.vue

@@ -18,6 +18,7 @@ import { useClipboard } from '@vueuse/core'
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { configs } from '../env'
 import { CLASS_VCLICK_TARGET, injectionClicks, injectionClicksDisabled, injectionClicksElements } from '../constants'
+import { makeId } from '../logic/utils'
 
 const props = defineProps({
   ranges: {
@@ -45,15 +46,6 @@ const clicks = inject(injectionClicks)
 const elements = inject(injectionClicksElements)
 const disabled = inject(injectionClicksDisabled)
 
-function makeId(length = 5) {
-  const result = []
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  const charactersLength = characters.length
-  for (let i = 0; i < length; i++)
-    result.push(characters.charAt(Math.floor(Math.random() * charactersLength)))
-  return result.join('')
-}
-
 const el = ref<HTMLDivElement>()
 const vm = getCurrentInstance()
 

package/builtin/KaTexBlockWrapper.vue

@@ -0,0 +1,99 @@
+<!--
+Line highlighting for KaTex blocks/
+(auto transformed, you don't need to use this component directly)
+
+Usage:
+$$ {1|3|all}
+\begin{array}{c}
+
+\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
+= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
+
+\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
+
+\nabla \cdot \vec{\mathbf{B}} & = 0
+
+\end{array}
+$$
+
+Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
+-->
+
+<script setup lang="ts">
+import { range, remove } from '@antfu/utils'
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { parseRangeString } from '@slidev/parser'
+import { CLASS_VCLICK_TARGET, injectionClicks, injectionClicksDisabled, injectionClicksElements } from '../constants'
+import { makeId } from '../logic/utils'
+
+const props = defineProps({
+  ranges: {
+    default: () => [],
+  },
+  startLine: {
+    type: Number,
+    default: 1,
+  },
+})
+
+const clicks = inject(injectionClicks)
+const elements = inject(injectionClicksElements)
+const disabled = inject(injectionClicksDisabled)
+
+const el = ref<HTMLDivElement>()
+const vm = getCurrentInstance()
+
+onMounted(() => {
+  const prev = elements?.value.length
+  const index = computed(() => {
+    if (disabled?.value)
+      return props.ranges.length - 1
+    return Math.min(Math.max(0, (clicks?.value || 0) - (prev || 0)), props.ranges.length - 1)
+  })
+  const rangeStr = computed(() => props.ranges[index.value] || '')
+  if (props.ranges.length >= 2 && !disabled?.value) {
+    const id = makeId()
+    const ids = range(props.ranges.length - 1).map(i => id + i)
+    if (elements?.value) {
+      elements.value.push(...ids)
+      onUnmounted(() => ids.forEach(i => remove(elements.value, i)), vm)
+    }
+  }
+
+  watchEffect(() => {
+    if (!el.value)
+      return
+    const baseTargets = Array.from(el.value.querySelectorAll('.col-align-c > .vlist-t > .vlist-r > .vlist'))
+    const lines: Element[][] = []
+    baseTargets.forEach((baseTarget) => {
+      Array.from(baseTarget.children).forEach((childNode, idx) => {
+        const realNode = childNode.querySelector('.mord')
+        if (!realNode)
+          return
+        if (Array.isArray(lines[idx]))
+          lines[idx].push(realNode)
+        else
+          lines[idx] = [realNode]
+      })
+    })
+    const startLine = props.startLine
+    const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr.value)
+    lines.forEach((line, idx) => {
+      const highlighted = highlights.includes(idx + startLine)
+      line.forEach((node) => {
+        node.classList.toggle(CLASS_VCLICK_TARGET, true)
+        node.classList.toggle('highlighted', highlighted)
+        node.classList.toggle('dishonored', !highlighted)
+      })
+    })
+  })
+})
+</script>
+
+<template>
+  <div
+    ref="el" class="slidev-katex-wrapper"
+  >
+    <slot />
+  </div>
+</template>

package/builtin/SlideCurrentNo.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { injectionCurrentPage } from '../constants'
+
+const $page = inject(injectionCurrentPage)
+</script>
+
 <template>
-  <span>{{ $slidev.nav.currentPage }}</span>
+  <span>{{ $page }}</span>
 </template>

package/builtin/SlidesTotal.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { injectionSlidevContext } from '../constants'
+
+const $slidev = inject(injectionSlidevContext)
+</script>
+
 <template>
   <span>{{ $slidev.nav.total }}</span>
 </template>

package/logic/utils.ts

@@ -21,3 +21,12 @@ export function useTimer() {
     resetTimer,
   }
 }
+
+export function makeId(length = 5) {
+  const result = []
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  const charactersLength = characters.length
+  for (let i = 0; i < length; i++)
+    result.push(characters.charAt(Math.floor(Math.random() * charactersLength)))
+  return result.join('')
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.43.0",
+  "version": "0.43.1",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.6",
-    "@unocss/reset": "^0.55.6",
+    "@unocss/reset": "^0.55.7",
     "@vueuse/core": "^10.4.1",
     "@vueuse/head": "^1.3.1",
     "@vueuse/math": "^10.4.1",
@@ -35,14 +35,14 @@
     "prettier": "^3.0.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.4",
-    "unocss": "^0.55.6",
+    "unocss": "^0.55.7",
     "vite-plugin-windicss": "^1.9.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.0",
-    "@slidev/types": "0.43.0"
+    "@slidev/parser": "0.43.1",
+    "@slidev/types": "0.43.1"
   },
   "devDependencies": {
     "vite": "^4.4.9"

package/styles/katex.css

@@ -0,0 +1,5 @@
+.slidev-katex-wrapper .mord.highlighted {
+}
+.slidev-katex-wrapper .mord.dishonored {
+  opacity: 0.3;
+}