@slidev/client 0.31.2 → 0.31.3

package/builtin/Link.vue

@@ -19,8 +19,8 @@ defineProps<{
 </script>
 
 <template>
-  <RouterLink v-if="!isPrintMode && title" :to="to" @click="$event.target.blur()" v-html="title" />
-  <RouterLink v-else-if="!isPrintMode && !title" :to="to" @click="$event.target.blur()">
+  <RouterLink v-if="!isPrintMode && title" :to="String(to)" @click="$event.target.blur()" v-html="title" />
+  <RouterLink v-else-if="!isPrintMode && !title" :to="String(to)" @click="$event.target.blur()">
     <slot />
   </RouterLink>
   <a v-else-if="isPrintMode && title" :href="`#${to}`" v-html="title" />

package/builtin/Mermaid.vue

@@ -15,6 +15,7 @@ pie
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watch, watchEffect } from 'vue'
 import { renderMermaid } from '../modules/mermaid'
+import ShadowRoot from '../internals/ShadowRoot.vue'
 
 const props = defineProps<{
   code: string
@@ -51,5 +52,5 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div ref="el" class="mermaid" v-html="html" />
+  <ShadowRoot class="mermaid" :inner-html="html" />
 </template>

package/internals/DrawingLayer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { drauu, loadCanvas } from '../logic/drawings'
+import { drauu, drawingEnabled, loadCanvas } from '../logic/drawings'
 import { injectionSlideScale } from '../constants'
 
 const scale = inject(injectionSlideScale)!
@@ -20,6 +20,7 @@ onBeforeUnmount(() => {
 <template>
   <svg
     ref="svg"
-    class="w-full h-full absolute top-0 pointer-events-none"
+    class="w-full h-full absolute top-0"
+    :class="{ 'pointer-events-none': !drawingEnabled, 'touch-none': drawingEnabled }"
   />
 </template>

package/internals/ShadowRoot.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  innerHtml: string
+}>()
+
+const el = ref<HTMLDivElement>()
+const shadow = computed(() => el.value ? (el.value.shadowRoot || el.value.attachShadow({ mode: 'open' })) : null)
+watchEffect(() => {
+  if (shadow.value)
+    shadow.value.innerHTML = props.innerHtml
+})
+</script>
+
+<template>
+  <div ref="el" />
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.31.2",
+  "version": "0.31.3",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
@@ -13,8 +13,8 @@
   "funding": "https://github.com/sponsors/antfu",
   "dependencies": {
     "@antfu/utils": "^0.5.1",
-    "@slidev/parser": "0.31.2",
-    "@slidev/types": "0.31.2",
+    "@slidev/parser": "0.31.3",
+    "@slidev/types": "0.31.3",
     "@vueuse/core": "^8.4.2",
     "@vueuse/head": "^0.7.6",
     "@vueuse/motion": "^2.0.0-beta.18",