@slidev/client 0.43.2 → 0.43.4

package/builtin/RenderWhen.vue

@@ -2,7 +2,7 @@
 import { computed, inject } from 'vue'
 import type { RenderContext } from '@slidev/types'
 
-import { injectionSlideContext } from '../constants'
+import { injectionRenderContext } from '../constants'
 
 type Context = 'main' | RenderContext
 
@@ -11,14 +11,14 @@ const props = defineProps<{
 }>()
 const { context } = props
 
-const currentContext = inject(injectionSlideContext)
+const currentContext = inject(injectionRenderContext)
 
 const shouldRender = computed(() => Array.isArray(context) ? context.some(contextMatch) : contextMatch(context))
 
 function contextMatch(context: Context) {
-  if (context === currentContext)
+  if (context === currentContext?.value)
     return true
-  if (context === 'main' && (currentContext === 'slide' || currentContext === 'presenter'))
+  if (context === 'main' && (currentContext?.value === 'slide' || currentContext?.value === 'presenter'))
     return true
   return false
 }

package/builtin/SlidevVideo.vue

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

package/builtin/Toc.vue

@@ -16,6 +16,8 @@ const props = withDefaults(
   defineProps<{
     columns?: string | number
     listClass?: string | string[]
+    start?: string | number
+    listStyle?: string | string[]
     maxDepth?: string | number
     minDepth?: string | number
     mode?: 'all' | 'onlyCurrentTree' | 'onlySiblings'
@@ -23,6 +25,8 @@ const props = withDefaults(
   {
     columns: 1,
     listClass: '',
+    start: 1,
+    listStyle: '',
     maxDepth: Number.POSITIVE_INFINITY,
     minDepth: 1,
     mode: 'all',
@@ -85,6 +89,12 @@ const toc = computed(() => {
 
 <template>
   <div class="slidev-toc" :style="`column-count:${columns}`">
-    <TocList :level="1" :list="toc" :list-class="listClass" />
+    <TocList
+      :level="1"
+      :start="start"
+      :list-style="listStyle"
+      :list="toc"
+      :list-class="listClass"
+    />
   </div>
 </template>

package/builtin/TocList.vue

@@ -14,6 +14,8 @@ import Titles from '/@slidev/titles.md'
 
 const props = withDefaults(defineProps<{
   level: number
+  start?: number
+  listStyle?: string | string[]
   list: TocItem[]
   listClass?: string | string[]
 }>(), { level: 1 })
@@ -25,10 +27,21 @@ const classes = computed(() => {
     `slidev-toc-list-level-${props.level}`,
   ]
 })
+
+const styles = computed(() => {
+  return [
+    ...toArray(props.listStyle || []),
+  ]
+})
 </script>
 
 <template>
-  <ol v-if="list && list.length > 0" :class="classes">
+  <ol
+    v-if="list && list.length > 0"
+    :class="classes"
+    :start="level === 1 ? start : undefined"
+    :style="styles.length >= level ? `list-style:${styles[level - 1]}` : undefined"
+  >
     <li
       v-for="item of list"
       :key="item.path" class="slidev-toc-item"
@@ -40,6 +53,7 @@ const classes = computed(() => {
       <TocList
         v-if="item.children.length > 0"
         :level="level + 1"
+        :list-style="listStyle"
         :list="item.children"
         :list-class="listClass"
       />

package/constants.ts

@@ -7,11 +7,11 @@ export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks
 export const injectionClicksElements: InjectionKey<Ref<(Element | string)[]>> = Symbol('v-click-clicks-elements')
 export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-click-clicks-disabled')
 export const injectionOrderMap: InjectionKey<Ref<Map<number, HTMLElement[]>>> = Symbol('v-click-clicks-order-map')
-export const injectionCurrentPage: InjectionKey<number> = Symbol('slidev-page')
+export const injectionCurrentPage: InjectionKey<Ref<number>> = Symbol('slidev-page')
 export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
 export const injectionSlidevContext: InjectionKey<UnwrapNestedRefs<SlidevContext>> = Symbol('slidev-slidev-context')
 export const injectionRoute: InjectionKey<RouteRecordRaw> = Symbol('slidev-route')
-export const injectionSlideContext: InjectionKey<RenderContext> = Symbol('slidev-slide-context')
+export const injectionRenderContext: InjectionKey<Ref<RenderContext>> = Symbol('slidev-render-context')
 export const injectionActive: InjectionKey<Ref<boolean>> = Symbol('slidev-active')
 export const injectionFrontmatter: InjectionKey<Record<string, any>> = Symbol('slidev-fontmatter')
 

package/internals/Play.vue

@@ -51,7 +51,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       @pointerdown="onClick"
     >
       <template #default>
-        <SlidesShow context="slide" />
+        <SlidesShow render-context="slide" />
       </template>
       <template #controls>
         <div

package/internals/Presenter.vue

@@ -108,7 +108,7 @@ onMounted(() => {
           class="h-full w-full"
         >
           <template #default>
-            <SlidesShow context="presenter" />
+            <SlidesShow render-context="presenter" />
           </template>
         </SlideContainer>
         <div class="context">
@@ -128,7 +128,7 @@ onMounted(() => {
             :clicks-disabled="false"
             :class="getSlideClass(nextSlide.route)"
             :route="nextSlide.route"
-            context="previewNext"
+            render-context="previewNext"
           />
         </SlideContainer>
         <div class="context">

package/internals/SlideWrapper.ts

@@ -1,8 +1,8 @@
 import { useVModel } from '@vueuse/core'
 import type { Ref } from 'vue'
-import { defineComponent, h, provide, toRef } from 'vue'
+import { defineComponent, h, provide, ref, toRef } from 'vue'
 import type { RenderContext } from '@slidev/types'
-import { injectionActive, injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionCurrentPage, injectionOrderMap, injectionRoute, injectionSlideContext } from '../constants'
+import { injectionActive, injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionCurrentPage, injectionOrderMap, injectionRenderContext, injectionRoute } from '../constants'
 
 export default defineComponent({
   name: 'SlideWrapper',
@@ -23,7 +23,7 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    context: {
+    renderContext: {
       type: String,
       default: 'main',
     },
@@ -49,8 +49,8 @@ export default defineComponent({
     clicksElements.value.length = 0
 
     provide(injectionRoute, props.route as any)
-    provide(injectionCurrentPage, +props.route?.path)
-    provide(injectionSlideContext, props.context as RenderContext)
+    provide(injectionCurrentPage, ref(+props.route?.path))
+    provide(injectionRenderContext, ref(props.renderContext as RenderContext))
     provide(injectionActive, toRef(props, 'active'))
     provide(injectionClicks, clicks as Ref<number>)
     provide(injectionClicksDisabled, clicksDisabled)

package/internals/SlidesOverview.vue

@@ -135,7 +135,7 @@ watchEffect(() => {
                 :clicks-disabled="true"
                 :class="getSlideClass(route)"
                 :route="route"
-                context="overview"
+                render-context="overview"
               />
               <DrawingPreview :page="+route.path" />
             </SlideContainer>

package/internals/SlidesShow.vue

@@ -12,7 +12,9 @@ import GlobalTop from '/@slidev/global-components/top'
 import GlobalBottom from '/@slidev/global-components/bottom'
 import PresenterMouse from './PresenterMouse.vue'
 
-defineProps<{ context: 'slide' | 'presenter' }>()
+defineProps<{
+  renderContext: 'slide' | 'presenter'
+}>()
 
 // preload next route
 watch(currentRoute, () => {
@@ -56,7 +58,7 @@ const loadedRoutes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded ||
         :clicks-disabled="false"
         :class="getSlideClass(route)"
         :route="route"
-        :context="context"
+        :render-context="renderContext"
       />
     </template>
   </component>

package/logic/nav.ts

@@ -146,7 +146,7 @@ export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
 
       const x = Math.abs(distanceX.value)
       const y = Math.abs(distanceY.value)
-      if (x / window.innerWidth > 0.3 || x > 100) {
+      if (x / window.innerWidth > 0.3 || x > 75) {
         if (direction.value === 'left')
           next()
         else
@@ -195,7 +195,7 @@ export function addToTree(tree: TocItem[], route: RouteRecordRaw, level = 1) {
       children: [],
       level,
       path: route.path,
-      hideInToc: Boolean(route.meta?.hideInToc),
+      hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
       title: route.meta?.slide?.title,
     })
   }

package/modules/context.ts

@@ -1,12 +1,12 @@
 import type { App } from 'vue'
-import { reactive } from 'vue'
+import { computed, reactive } from 'vue'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import type { ComputedRef } from '@vue/reactivity'
 import type { configs } from '../env'
 import * as nav from '../logic/nav'
 import { clicks, route } from '../logic/nav'
 import { isDark } from '../logic/dark'
-import { injectionSlidevContext } from '../constants'
+import { injectionClicks, injectionCurrentPage, injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 
 export type SlidevContextNavKey = 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes'
@@ -26,8 +26,10 @@ export interface SlidevContext {
 export default function createSlidevContext() {
   return {
     install(app: App) {
-      const context = useContext(route, clicks)
-      app.provide(injectionSlidevContext, reactive(context))
+      const context = reactive(useContext(route, clicks))
+      app.provide(injectionSlidevContext, context)
+      app.provide(injectionCurrentPage, computed(() => context.nav.currentPage))
+      app.provide(injectionClicks, computed(() => context.nav.clicks))
 
       // allows controls from postMessages
       if (__DEV__) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.43.2",
+  "version": "0.43.4",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -18,12 +18,12 @@
     "@antfu/utils": "^0.7.6",
     "@unocss/reset": "^0.55.7",
     "@vueuse/core": "^10.4.1",
-    "@vueuse/head": "^1.3.1",
+    "@vueuse/head": "^2.0.0",
     "@vueuse/math": "^10.4.1",
     "@vueuse/motion": "^2.0.0",
     "codemirror": "^5.65.5",
     "defu": "^6.1.2",
-    "drauu": "^0.3.6",
+    "drauu": "^0.3.7",
     "file-saver": "^2.0.5",
     "fuse.js": "^6.6.2",
     "js-base64": "^3.7.5",
@@ -31,18 +31,18 @@
     "katex": "^0.16.8",
     "mermaid": "^10.4.0",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^4.0.2",
+    "nanoid": "^5.0.1",
     "prettier": "^3.0.3",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.22.4",
+    "resolve": "^1.22.6",
     "unocss": "^0.55.7",
     "vite-plugin-windicss": "^1.9.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vue-starport": "^0.4.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.2",
-    "@slidev/types": "0.43.2"
+    "@slidev/parser": "0.43.4",
+    "@slidev/types": "0.43.4"
   },
   "devDependencies": {
     "vite": "^4.4.9"