@slidev/client 0.31.1 → 0.31.4

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/constants.ts

@@ -1,4 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
 import type { SlidevContext } from './modules/context'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
@@ -7,6 +8,7 @@ export const injectionOrderMap: InjectionKey<Ref<Map<number, HTMLElement[]>>> =
 export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-click-clicks-disabled')
 export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
 export const injectionSlidevContext: InjectionKey<SlidevContext> = Symbol('slidev-slidev-context')
+export const injectionRoute: InjectionKey<RouteRecordRaw> = Symbol('slidev-route')
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

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/NavControls.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, prev, total } from '../logic/nav'
+import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, presenterPassword, prev, showPresenter, total } from '../logic/nav'
 import { activeElement, breakpoints, fullscreen, showEditor, showInfoDialog, showPresenterCursor, toggleOverview } from '../state'
 import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
@@ -20,8 +20,9 @@ const props = defineProps({
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
-const presenterLink = computed(() => `/presenter/${currentPage.value}`)
-const nonPresenterLink = computed(() => `/${currentPage.value}`)
+const query = computed(() => presenterPassword.value ? `?password=${presenterPassword.value}` : '')
+const presenterLink = computed(() => `/presenter/${currentPage.value}${query.value}`)
+const nonPresenterLink = computed(() => `/${currentPage.value}${query.value}`)
 
 const root = ref<HTMLDivElement>()
 const onMouseLeave = () => {
@@ -112,7 +113,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="icon-btn" title="Play Mode">
           <carbon:presentation-file />
         </RouterLink>
-        <RouterLink v-if="!isPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
+        <RouterLink v-if="showPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
           <carbon:user-speaker />
         </RouterLink>
 

package/internals/Presenter.vue

@@ -119,6 +119,7 @@ onMounted(() => {
             :clicks="nextSlide.clicks"
             :clicks-disabled="false"
             :class="getSlideClass(nextSlide.route)"
+            :route="nextSlide.route"
           />
         </SlideContainer>
       </div>

package/internals/PrintSlideClick.vue

@@ -54,6 +54,7 @@ provide(injectionSlidevContext, reactive({
       :clicks="clicks"
       :clicks-disabled="false"
       :class="getSlideClass(route)"
+      :route="route"
     />
     <template
       v-if="

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/internals/SlideWrapper.ts

@@ -1,6 +1,6 @@
 import { useVModel } from '@vueuse/core'
 import { defineComponent, h, provide } from 'vue'
-import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap } from '../constants'
+import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute } from '../constants'
 
 export default defineComponent({
   props: {
@@ -24,6 +24,10 @@ export default defineComponent({
       type: Object,
       default: undefined,
     },
+    route: {
+      type: Object,
+      default: undefined,
+    },
   },
   setup(props, { emit }) {
     const clicks = useVModel(props, 'clicks', emit)
@@ -33,6 +37,7 @@ export default defineComponent({
 
     clicksElements.value.length = 0
 
+    provide(injectionRoute, props.route)
     provide(injectionClicks, clicks)
     provide(injectionClicksDisabled, clicksDisabled)
     provide(injectionClicksElements, clicksElements)

package/internals/SlidesOverview.vue

@@ -64,6 +64,7 @@ const cardWidth = computed(() => {
               :is="route?.component"
               :clicks-disabled="true"
               :class="getSlideClass(route)"
+              :route="route"
             />
             <DrawingPreview :page="+route.path" />
           </SlideContainer>

package/internals/SlidesShow.vue

@@ -36,6 +36,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
       :clicks-elements="route.meta?.__clicksElements || []"
       :clicks-disabled="false"
       :class="getSlideClass(route)"
+      :route="route"
     />
   </template>
 

package/logic/nav.ts

@@ -36,6 +36,8 @@ export const isPrintWithClicks = computed(() => route.value.query.print === 'cli
 export const isEmbedded = computed(() => route.value.query.embedded !== undefined)
 export const isPresenter = computed(() => route.value.path.startsWith('/presenter'))
 export const isClicksDisabled = computed(() => isPrintMode.value && !isPrintWithClicks.value)
+export const presenterPassword = computed(() => route.value.query.password)
+export const showPresenter = computed(() => !isPresenter.value && (!configs.remote || presenterPassword.value === configs.remote))
 
 export const queryClicks = useRouteQuery('clicks', '0')
 export const total = computed(() => rawRoutes.length - 1)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.31.1",
+  "version": "0.31.4",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
@@ -12,10 +12,10 @@
   },
   "funding": "https://github.com/sponsors/antfu",
   "dependencies": {
-    "@antfu/utils": "^0.5.1",
-    "@slidev/parser": "0.31.1",
-    "@slidev/types": "0.31.1",
-    "@vueuse/core": "^8.4.1",
+    "@antfu/utils": "^0.5.2",
+    "@slidev/parser": "0.31.4",
+    "@slidev/types": "0.31.4",
+    "@vueuse/core": "^8.4.2",
     "@vueuse/head": "^0.7.6",
     "@vueuse/motion": "^2.0.0-beta.18",
     "codemirror": "^5.65.3",
@@ -25,7 +25,7 @@
     "js-base64": "^3.7.2",
     "js-yaml": "^4.1.0",
     "katex": "^0.15.3",
-    "mermaid": "^9.0.1",
+    "mermaid": "^9.1.1",
     "monaco-editor": "^0.33.0",
     "nanoid": "^3.3.4",
     "prettier": "^2.6.2",
@@ -35,7 +35,7 @@
     "vue": "^3.2.33",
     "vue-router": "^4.0.15",
     "vue-starport": "^0.2.10",
-    "windicss": "^3.5.1"
+    "windicss": "^3.5.3"
   },
   "engines": {
     "node": ">=14.0.0"

package/routes.ts

@@ -4,6 +4,7 @@ import Play from './internals/Play.vue'
 import Print from './internals/Print.vue'
 // @ts-expect-error missing types
 import _rawRoutes from '/@slidev/routes'
+import _configs from '/@slidev/configs'
 
 export const rawRoutes = _rawRoutes as RouteRecordRaw[]
 
@@ -23,6 +24,19 @@ export const routes: RouteRecordRaw[] = [
     name: 'presenter',
     path: '/presenter/:no',
     component: () => import('./internals/Presenter.vue'),
+    beforeEnter: (to) => {
+      if (!_configs.remote || _configs.remote === to.query.password)
+        return true
+      if (_configs.remote && to.query.password === undefined) {
+        // eslint-disable-next-line no-alert
+        const password = prompt('Enter password')
+        if (_configs.remote === password)
+          return true
+      }
+      if (to.params.no)
+        return { path: `/${to.params.no}` }
+      return { path: '' }
+    },
   },
   {
     path: '/presenter',