@slidev/client 0.48.0-beta.6 → 0.48.0-beta.7

package/internals/SlideContainer.vue

@@ -47,9 +47,10 @@ const scale = computed(() => {
 })
 
 const style = computed(() => ({
-  height: `${slideHeight}px`,
-  width: `${slideWidth}px`,
-  transform: `translate(-50%, -50%) scale(${scale.value})`,
+  'height': `${slideHeight}px`,
+  'width': `${slideWidth}px`,
+  'transform': `translate(-50%, -50%) scale(${scale.value})`,
+  '--slidev-slide-scale': scale.value,
 }))
 
 const className = computed(() => ({

package/main.ts

@@ -3,15 +3,17 @@ import { createHead } from '@unhead/vue'
 import App from './App.vue'
 import setupMain from './setup/main'
 import { router } from './routes'
-import createDirectives from './modules/directives'
-import createSlidevContext from './modules/context'
+import { createVClickDirectives } from './modules/v-click'
+import { createVMarkDirective } from './modules/v-mark'
+import { createSlidevContext } from './modules/context'
 
 import '/@slidev/styles'
 
 const app = createApp(App)
 app.use(router)
 app.use(createHead())
-app.use(createDirectives())
+app.use(createVClickDirectives())
+app.use(createVMarkDirective())
 app.use(createSlidevContext())
 
 setupMain({ app, router })

package/modules/context.ts

@@ -21,7 +21,7 @@ export interface SlidevContext {
   themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
 
-export default function createSlidevContext() {
+export function createSlidevContext() {
   return {
     install(app: App) {
       const context = reactive(useContext(route))

package/modules/{directives.ts → v-click.ts}

@@ -11,19 +11,21 @@ import {
   injectionClicksContext,
 } from '../constants'
 
-function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
+export type VClickValue = string | [string | number, string | number] | boolean
+
+export function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
   return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
 }
 
-export default function createDirectives() {
+export function createVClickDirectives() {
   return {
     install(app: App) {
-      app.directive('click', {
+      app.directive<HTMLElement, VClickValue>('click', {
         // @ts-expect-error extra prop
         name: 'v-click',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value)
           if (resolved == null)
             return
 
@@ -55,12 +57,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('after', {
+      app.directive<HTMLElement, VClickValue>('after', {
         // @ts-expect-error extra prop
         name: 'v-after',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -86,12 +88,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('click-hide', {
+      app.directive<HTMLElement, VClickValue>('click-hide', {
         // @ts-expect-error extra prop
         name: 'v-click-hide',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, false, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, false, true)
           if (resolved == null)
             return
 
@@ -127,14 +129,12 @@ function isCurrent(thisClick: number | [number, number], clicks: number) {
     : thisClick === clicks
 }
 
-function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VClickValue, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
   const ctx = dirInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx || ctx.disabled)
     return null
 
-  let value = dir.value
-
   if (value === false || value === 'false')
     return null
 
@@ -153,7 +153,7 @@ function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = fals
     // range (absolute)
     delta = 0
     thisClick = value as [number, number]
-    maxClick = value[1]
+    maxClick = +value[1]
   }
   else {
     ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))

package/modules/v-mark.ts

@@ -0,0 +1,159 @@
+import type { RoughAnnotationConfig } from '@slidev/rough-notation'
+import { annotate } from '@slidev/rough-notation'
+import type { App } from 'vue'
+import { computed, watchEffect } from 'vue'
+import type { VClickValue } from './v-click'
+import { resolveClick } from './v-click'
+
+export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {
+  at: VClickValue
+}
+
+export type RoughDirectiveValue = VClickValue | RoughDirectiveOptions
+
+function addClass(options: RoughDirectiveOptions, cls: string) {
+  options.class = [options.class, cls].filter(Boolean).join(' ')
+  return options
+}
+
+// Definitions of supported modifiers
+const vMarkModifiers: Record<string, (options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions> = {
+  // Types
+  'box': options => Object.assign(options, { type: 'box' }),
+  'circle': options => Object.assign(options, { type: 'circle' }),
+  'underline': options => Object.assign(options, { type: 'underline' }),
+  'highlight': options => Object.assign(options, { type: 'highlight' }),
+  'strike-through': options => Object.assign(options, { type: 'strike-through' }),
+  'crossed-off': options => Object.assign(options, { type: 'crossed-off' }),
+  'bracket': options => Object.assign(options, { type: 'bracket' }),
+
+  // Type Aliases
+  'strike': options => Object.assign(options, { type: 'strike-through' }),
+  'cross': options => Object.assign(options, { type: 'crossed-off' }),
+  'crossed': options => Object.assign(options, { type: 'crossed-off' }),
+  'linethrough': options => Object.assign(options, { type: 'strike-through' }),
+  'line-through': options => Object.assign(options, { type: 'strike-through' }),
+
+  // Colors
+  // @unocss-include
+  'black': options => addClass(options, 'text-black'),
+  'blue': options => addClass(options, 'text-blue'),
+  'cyan': options => addClass(options, 'text-cyan'),
+  'gray': options => addClass(options, 'text-gray'),
+  'green': options => addClass(options, 'text-green'),
+  'indigo': options => addClass(options, 'text-indigo'),
+  'lime': options => addClass(options, 'text-lime'),
+  'orange': options => addClass(options, 'text-orange'),
+  'pink': options => addClass(options, 'text-pink'),
+  'purple': options => addClass(options, 'text-purple'),
+  'red': options => addClass(options, 'text-red'),
+  'teal': options => addClass(options, 'text-teal'),
+  'white': options => addClass(options, 'text-white'),
+  'yellow': options => addClass(options, 'text-yellow'),
+}
+
+const vMarkModifiersDynamic: [RegExp, (match: RegExpMatchArray, options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions][] = [
+  // Support setting delay like `v-mark.delay300="1"`
+  [/^delay-?(\d+)?$/, (match, options, value) => {
+    const ms = (match[1] ? Number.parseInt(match[1]) : value) || 300
+    options.delay = ms
+    return options
+  }],
+  // Support setting opacity like `v-mark.op50="1"`
+  [/^(?:op|opacity)-?(\d+)?$/, (match, options, value) => {
+    const opacity = (match[1] ? Number.parseInt(match[1]) : value) || 100
+    options.opacity = opacity / 100
+    return options
+  }],
+]
+
+/**
+ * This supports v-mark directive to add notations to elements, powered by `rough-notation`.
+ */
+export function createVMarkDirective() {
+  return {
+    install(app: App) {
+      app.directive<HTMLElement, RoughDirectiveValue>('mark', {
+        // @ts-expect-error extra prop
+        name: 'v-mark',
+
+        mounted: (el, binding) => {
+          const options = computed(() => {
+            const bindingOptions = (typeof binding.value === 'object' && !Array.isArray(binding.value))
+              ? { ...binding.value }
+              : { at: binding.value }
+
+            let modifierOptions: RoughDirectiveOptions = { at: bindingOptions.at }
+            const unknownModifiers = Object.entries(binding.modifiers)
+              .filter(([k, v]) => {
+                if (vMarkModifiers[k]) {
+                  modifierOptions = vMarkModifiers[k](modifierOptions, v)
+                  return false
+                }
+                for (const [re, fn] of vMarkModifiersDynamic) {
+                  const match = k.match(re)
+                  if (match) {
+                    modifierOptions = fn(match, modifierOptions, v)
+                    return false
+                  }
+                }
+                return true
+              })
+
+            if (unknownModifiers.length)
+              console.warn('[Slidev] Invalid modifiers for v-mark:', unknownModifiers)
+
+            const options = {
+              ...modifierOptions,
+              ...bindingOptions,
+            }
+            options.type ||= 'underline'
+
+            return options
+          })
+
+          const annotation = annotate(el, options.value as RoughAnnotationConfig)
+
+          const resolvedClick = resolveClick(el, binding, options.value.at)
+          if (!resolvedClick) {
+            console.error('[Slidev] Invalid value for v-mark:', options.value.at)
+            return
+          }
+
+          watchEffect(() => {
+            let shouldShow: boolean | undefined
+
+            if (options.value.class)
+              annotation.class = options.value.class
+            if (options.value.color)
+              annotation.color = options.value.color
+
+            const at = options.value.at
+
+            if (at === true) {
+              shouldShow = true
+            }
+            else if (at === false) {
+              shouldShow = false
+            }
+            else if (resolvedClick) {
+              shouldShow = resolvedClick.isActive.value
+            }
+            else {
+              console.error('[Slidev] Invalid value for v-mark:', at)
+              return
+            }
+
+            if (shouldShow == null)
+              return
+
+            if (shouldShow)
+              annotation.show()
+            else
+              annotation.hide()
+          })
+        },
+      })
+    },
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.6",
+  "version": "0.48.0-beta.7",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,19 +29,20 @@
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
-    "@shikijs/vitepress-twoslash": "^1.1.6",
+    "@shikijs/vitepress-twoslash": "^1.1.7",
+    "@slidev/rough-notation": "^0.0.4",
     "@unhead/vue": "^1.8.10",
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.8.0",
     "@vueuse/math": "^10.8.0",
-    "@vueuse/motion": "^2.0.0",
+    "@vueuse/motion": "^2.1.0",
     "codemirror": "^5.65.16",
     "defu": "^6.1.4",
     "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "js-base64": "^3.7.6",
+    "js-base64": "^3.7.7",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
     "mermaid": "^10.8.0",
@@ -52,11 +53,11 @@
     "resolve": "^1.22.8",
     "unocss": "^0.58.5",
     "vue": "^3.4.19",
-    "vue-router": "^4.2.5",
-    "@slidev/parser": "0.48.0-beta.6",
-    "@slidev/types": "0.48.0-beta.6"
+    "vue-router": "^4.3.0",
+    "@slidev/parser": "0.48.0-beta.7",
+    "@slidev/types": "0.48.0-beta.7"
   },
   "devDependencies": {
-    "vite": "^5.1.3"
+    "vite": "^5.1.4"
   }
 }

package/styles/index.css

@@ -55,3 +55,8 @@ html {
 .slidev-page {
   @apply absolute top-0 left-0 right-0 w-full relative;
 }
+
+/* Transform the position back for Rough Notation (v-mark) */
+.rough-annotation {
+  transform: scale(calc(1 / var(--slidev-slide-scale)));
+}