@slidev/client 0.40.3 → 0.40.4

package/builtin/Monaco.vue

@@ -18,28 +18,30 @@ import { decode } from 'js-base64'
 import { nanoid } from 'nanoid'
 import { isDark } from '../logic/dark'
 
-const props = defineProps({
-  code: {
-    default: '',
-  },
-  lang: {
-    default: 'typescript',
-  },
-  readonly: {
-    default: false,
-  },
-  lineNumbers: {
-    default: 'off',
-  },
-  height: {
-    default: 'auto',
-  },
+const props = withDefaults(defineProps<{
+  code: string
+  diff?: string
+  lang?: string
+  readonly?: boolean
+  lineNumbers?: 'on' | 'off' | 'relative' | 'interval'
+  height?: number | string
+}>(), {
+  code: '',
+  lang: 'typescript',
+  readonly: false,
+  lineNumbers: 'off',
+  height: 'auto',
 })
 
 const id = nanoid()
 const code = ref(decode(props.code).trimEnd())
+const diff = ref(props.diff ? decode(props.diff).trimEnd() : null)
 const lineHeight = +(getComputedStyle(document.body).getPropertyValue('--slidev-code-line-height') || '18').replace('px', '') || 18
-const height = computed(() => props.height === 'auto' ? `${code.value.split(/\r?\n/g).length * lineHeight + 20}px` : props.height)
+const editorHeight = ref(0)
+const calculatedHeight = computed(() => code.value.split(/\r?\n/g).length * lineHeight)
+const height = computed(() => {
+  return props.height === 'auto' ? `${Math.max(calculatedHeight.value, editorHeight.value) + 20}px` : props.height
+})
 
 const iframe = ref<HTMLIFrameElement>()
 
@@ -73,9 +75,13 @@ onMounted(() => {
     'allow-top-navigation-by-user-activation',
   ].join(' '))
 
-  frame.src = __DEV__
-    ? `${location.origin}${__SLIDEV_CLIENT_ROOT__}/iframes/monaco/index.html`
-    : `${import.meta.env.BASE_URL}iframes/monaco/index.html`
+  let src = __DEV__
+    ? `${location.origin}${__SLIDEV_CLIENT_ROOT__}/`
+    : import.meta.env.BASE_URL
+  src += `iframes/monaco/index.html?id=${id}&lineNumbers=${props.lineNumbers}&lang=${props.lang}`
+  if (diff.value)
+    src += '&diff=1'
+  frame.src = src
 
   frame.style.backgroundColor = 'transparent'
 })
@@ -85,18 +91,21 @@ function post(payload: any) {
     JSON.stringify({
       type: 'slidev-monaco',
       data: payload,
+      id,
     }),
     location.origin,
   )
 }
 
 useEventListener(window, 'message', ({ data: payload }) => {
+  if (payload.id !== id)
+    return
   if (payload.type === 'slidev-monaco-loaded') {
     if (iframe.value) {
       post({
         code: code.value,
+        diff: diff.value,
         lang: props.lang,
-        id,
         readonly: props.readonly,
         lineNumbers: props.lineNumbers,
         dark: isDark.value,
@@ -105,11 +114,14 @@ useEventListener(window, 'message', ({ data: payload }) => {
     }
     return
   }
-  if (payload.type !== 'slidev-monaco' || payload.id !== id)
-    return
-  if (!payload?.data?.code || code.value === payload.data.code)
+  if (payload.type !== 'slidev-monaco')
     return
-  code.value = payload.data.code
+  if (payload.data?.height)
+    editorHeight.value = payload.data?.height
+  if (payload?.data?.code && code.value !== payload.data.code)
+    code.value = payload.data.code
+  if (payload?.data?.diff && diff.value !== payload.data.diff)
+    diff.value = payload.data.diff
 })
 </script>
 

package/builtin/VClicks.ts

@@ -6,10 +6,17 @@
 
 import { toArray } from '@antfu/utils'
 import type { Directive, VNode, VNodeArrayChildren } from 'vue'
+
 import { defineComponent, h, isVNode, resolveDirective, withDirectives } from 'vue'
 
+const listTags = ['ul', 'ol']
+
 export default defineComponent({
   props: {
+    depth: {
+      type: [Number, String],
+      default: 1,
+    },
     every: {
       type: Number,
       default: 1,
@@ -31,17 +38,17 @@ export default defineComponent({
     const click = resolveDirective('click')!
     const after = resolveDirective('after')!
 
-    const applyDirective = (node: VNode, directive: Directive, delta: number) =>
-      withDirectives(node, [[
+    const applyDirective = (node: VNode, directive: Directive, delta: number | string) => {
+      return withDirectives(node, [[
         directive,
-        this.at != null
-          ? +this.at + delta
-          : null, '',
+        delta,
+        '',
         {
           hide: this.hide,
           fade: this.fade,
         },
       ]])
+    }
 
     let defaults = this.$slots.default?.()
 
@@ -50,22 +57,58 @@ export default defineComponent({
 
     defaults = toArray(defaults)
 
-    const mapChildren = (children: VNodeArrayChildren) => {
-      return children.map((i, idx) =>
-        isVNode(i)
-          ? applyDirective(
-            h(i),
-            idx % this.every === 0 ? click : after,
-            Math.floor(idx / this.every),
-          )
-          : i,
-      )
+    const mapSubList = (children: VNodeArrayChildren, depth = 1): [VNodeArrayChildren, number] => {
+      let idx = 0
+      const vNodes = children.map((i) => {
+        if (!isVNode(i))
+          return i
+        if (listTags.includes(i.type as string) && Array.isArray(i.children)) {
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          const [vNodes, total] = mapChildren(i.children, depth + 1)
+          idx += total
+          return h(i, {}, [vNodes])
+        }
+        return h(i)
+      })
+      return [vNodes, idx]
+    }
+
+    let globalIdx = 0
+    const mapChildren = (children: VNodeArrayChildren, depth = 1): [VNodeArrayChildren, number] => {
+      let idx = 0
+      const vNodes = children.map((i) => {
+        if (!isVNode(i))
+          return i
+        const directive = idx % this.every === 0 ? click : after
+        let vNode
+        let childCount = 0
+        if (depth < this.depth && Array.isArray(i.children)) {
+          const [vNodes, total] = mapSubList(i.children, depth)
+          vNode = h(i, {}, [vNodes])
+          childCount = total
+          idx += total + 1
+        }
+        else {
+          vNode = h(i)
+          idx++
+        }
+        const delta = this.at != null
+          ? Number(this.at) + Math.floor(globalIdx / this.every) + depth
+          : (depth - 1 - childCount).toString()
+        globalIdx++
+        return applyDirective(
+          vNode,
+          directive,
+          (typeof delta === 'string' && !delta.startsWith('-')) ? `+${delta}` : delta,
+        )
+      })
+      return [vNodes, idx]
     }
 
     // handle ul, ol list
-    if (defaults.length === 1 && ['ul', 'ol'].includes(defaults[0].type as string) && Array.isArray(defaults[0].children))
-      return h(defaults[0], {}, [mapChildren(defaults[0].children)])
+    if (defaults.length === 1 && listTags.includes(defaults[0].type as string) && Array.isArray(defaults[0].children))
+      return h(defaults[0], {}, [mapChildren(defaults[0].children)[0]])
 
-    return mapChildren(defaults)
+    return mapChildren(defaults)[0]
   },
 })

package/composables/useContext.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, WritableComputedRef } from 'vue'
 import { computed } from 'vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { downloadPDF, next, nextSlide, openInEditor, prev, prevSlide } from '../logic/nav'
+import type { SlidevContext } from '../modules/context'
 import { configs } from '../env'
 import { useNav } from './useNav'
 import { useNavClicks } from './useNavClicks'
@@ -9,19 +9,13 @@ import { useNavClicks } from './useNavClicks'
 export function useContext(
   route: ComputedRef<RouteLocationNormalizedLoaded>,
   clicks: WritableComputedRef<number>,
-) {
+): SlidevContext {
   const nav = useNav(route)
   const navClicks = useNavClicks(clicks, nav.currentRoute, nav.currentPage)
   return {
     nav: {
       ...nav,
       ...navClicks,
-      downloadPDF,
-      next,
-      nextSlide,
-      openInEditor,
-      prev,
-      prevSlide,
     },
     configs,
     themeConfigs: computed(() => configs.themeConfig),

package/composables/useNav.ts

@@ -2,10 +2,11 @@ import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import type { TocItem } from '@slidev/types'
-import { addToTree, filterTree, getPath, getTreeWithActiveStatuses } from '../logic/nav'
+import type { SlidevContextNav } from '../modules/context'
+import { addToTree, downloadPDF, filterTree, getPath, getTreeWithActiveStatuses, next, nextSlide, openInEditor, prev, prevSlide } from '../logic/nav'
 import { rawRoutes } from '../routes'
 
-export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>) {
+export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>): SlidevContextNav {
   const path = computed(() => route.value.path)
   const total = computed(() => rawRoutes.length - 1)
 
@@ -39,5 +40,11 @@ export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormaliz
     rawTree,
     treeWithActiveStatuses,
     tree,
+    downloadPDF,
+    next,
+    nextSlide,
+    openInEditor,
+    prev,
+    prevSlide,
   }
 }

package/composables/useNavClicks.ts

@@ -1,13 +1,14 @@
 import type { ComputedRef, WritableComputedRef } from 'vue'
 import { computed, nextTick, ref } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
+import type { SlidevContextNavClicks } from '../modules/context'
 import { rawRoutes, router } from '../routes'
 
 export function useNavClicks(
   clicks: WritableComputedRef<number>,
   currentRoute: ComputedRef<RouteRecordRaw | undefined>,
   currentPage: ComputedRef<number>,
-) {
+): SlidevContextNavClicks {
   // force update collected elements when the route is fully resolved
   const routeForceRefresh = ref(0)
   nextTick(() => {

package/constants.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ComputedRef, InjectionKey, Ref, UnwrapNestedRefs } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import type { RenderContext } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
@@ -8,7 +8,7 @@ export const injectionClicksElements: InjectionKey<Ref<(Element | string)[]>> =
 export const injectionOrderMap: InjectionKey<Ref<Map<number, HTMLElement[]>>> = Symbol('v-click-clicks-order-map')
 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 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')
 

package/iframes/monaco/index.css

@@ -3,13 +3,12 @@ body,
 #container {
   padding: 0;
   margin: 0;
-  background: transparent;
+  background: var(--slidev-code-background);
   width: 100%;
   height: 100%;
 }
 
 #container {
-  background: var(--slidev-code-background);
   padding: var(--slidev-code-padding);
   margin: var(--slidev-code-margin);
   border-radius: var(--slidev-code-radius);

package/iframes/monaco/index.ts

@@ -6,18 +6,22 @@ import { formatCode } from '../../setup/prettier'
 import setupMonaco from '../../setup/monaco'
 import '/@slidev/monaco-types'
 
+const url = new URL(location.href)
 const props = {
-  id: Math.random().toString(),
+  id: url.searchParams.get('id'),
   code: '',
-  lang: 'typescript',
+  diff: '',
+  lang: url.searchParams.get('lang') ?? 'typescript',
   readonly: false,
-  lineNumbers: 'off',
+  lineNumbers: url.searchParams.get('lineNumbers') ?? 'off',
   dark: false,
   style: '',
 }
 
 const styleObject = document.createElement('style')
-let editor: monaco.editor.IStandaloneCodeEditor
+let originalEditor: monaco.editor.IStandaloneCodeEditor
+let modifiedEditor: monaco.editor.IStandaloneCodeEditor
+let format: () => void = () => { }
 let update: () => void = () => { }
 
 document.body.appendChild(styleObject)
@@ -44,92 +48,193 @@ const ext = () => {
   }
 }
 
+function post(data: any, type = 'slidev-monaco') {
+  if (window.parent === window)
+    return
+
+  window.parent.postMessage(
+    {
+      type,
+      id: props.id,
+      data,
+    },
+    location.origin,
+  )
+}
+
 async function start() {
   const { monaco, theme = {} } = await setupMonaco()
 
+  const style = getComputedStyle(document.documentElement)
+  const container = document.getElementById('container')!
+
   const model = monaco.editor.createModel(
     props.code,
     lang(),
     monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`),
   )
 
-  const style = getComputedStyle(document.documentElement)
-  const container = document.getElementById('container')!
+  if (url.searchParams.get('diff')) {
+    // Diff editor
+    const diffModel = monaco.editor.createModel(
+      props.diff,
+      lang(),
+      monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`),
+    )
+    const monacoEditor = monaco.editor.createDiffEditor(container, {
+      fontSize: +style.getPropertyValue('--slidev-code-font-size').replace(/px/g, ''),
+      fontFamily: style.getPropertyValue('--slidev-code-font-family'),
+      lineHeight: +style.getPropertyValue('--slidev-code-line-height').replace(/px/g, ''),
+      lineDecorationsWidth: 0,
+      lineNumbersMinChars: 0,
+      scrollBeyondLastLine: false,
+      scrollBeyondLastColumn: 0,
+      automaticLayout: true,
+      readOnly: props.readonly,
+      theme: 'vitesse-dark',
+      lineNumbers: props.lineNumbers as any,
+      glyphMargin: false,
+      scrollbar: {
+        useShadows: false,
+        vertical: 'hidden',
+        horizontal: 'hidden',
+      },
+      overviewRulerLanes: 0,
+      minimap: { enabled: false },
+      enableSplitViewResizing: false,
+      renderOverviewRuler: false,
+      // renderSideBySide: false,
+    })
+    monacoEditor.setModel({
+      original: model,
+      modified: diffModel,
+    })
+    originalEditor = monacoEditor.getOriginalEditor()
+    modifiedEditor = monacoEditor.getModifiedEditor()
+
+    format = async () => {
+      model.setValue((await formatCode(props.code, lang())).trim())
+      diffModel.setValue((await formatCode(props.diff, lang())).trim())
+    }
 
-  editor = monaco.editor.create(container, {
-    model,
-    tabSize: 2,
-    insertSpaces: true,
-    detectIndentation: false,
-    folding: false,
-    fontSize: +style.getPropertyValue('--slidev-code-font-size').replace(/px/g, ''),
-    fontFamily: style.getPropertyValue('--slidev-code-font-family'),
-    lineHeight: +style.getPropertyValue('--slidev-code-line-height').replace(/px/g, ''),
-    lineDecorationsWidth: 0,
-    lineNumbersMinChars: 0,
-    scrollBeyondLastLine: false,
-    scrollBeyondLastColumn: 0,
-    automaticLayout: true,
-    readOnly: props.readonly,
-    theme: 'vitesse-dark',
-    lineNumbers: props.lineNumbers as any,
-    glyphMargin: false,
-    scrollbar: {
-      useShadows: false,
-      vertical: 'hidden',
-      horizontal: 'hidden',
-    },
-    overviewRulerLanes: 0,
-    minimap: { enabled: false },
-  })
+    // ctrl+s to format
+    originalEditor.onKeyDown((e) => {
+      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
+        e.preventDefault()
+        format()
+      }
+    })
+    modifiedEditor.onKeyDown((e) => {
+      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
+        e.preventDefault()
+        format()
+      }
+    })
+
+    update = () => {
+      monaco.editor.setTheme(props.dark
+        ? (theme.dark || 'vitesse-dark')
+        : (theme.light || 'vitesse-light'),
+      )
+      styleObject.innerHTML = `:root { ${props.style} }`
+
+      if (originalEditor.getValue().toString() !== props.code) {
+        const selection = originalEditor.getSelection()
+        originalEditor.setValue(props.code)
+        if (selection)
+          originalEditor.setSelection(selection)
+      }
+
+      if (modifiedEditor.getValue().toString() !== props.diff) {
+        const selection = modifiedEditor.getSelection()
+        modifiedEditor.setValue(props.diff)
+        if (selection)
+          modifiedEditor.setSelection(selection)
+      }
+    }
 
-  async function format() {
-    model.setValue((await formatCode(props.code, lang())).trim())
-  }
+    diffModel.onDidChangeContent(() => {
+      onCodeChange(diffModel.getValue().toString())
+    })
 
-  model.onDidChangeContent(() => {
-    onCodeChange(model.getValue().toString())
-  })
-
-  // ctrl+s to format
-  editor.onKeyDown((e) => {
-    if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
-      e.preventDefault()
-      format()
+    function onCodeChange(diff: string) {
+      props.diff = diff
+      post({ diff })
     }
-  })
+  }
+  else {
+    // Normal editor
+    originalEditor = monaco.editor.create(container, {
+      model,
+      tabSize: 2,
+      insertSpaces: true,
+      detectIndentation: false,
+      folding: false,
+      fontSize: +style.getPropertyValue('--slidev-code-font-size').replace(/px/g, ''),
+      fontFamily: style.getPropertyValue('--slidev-code-font-family'),
+      lineHeight: +style.getPropertyValue('--slidev-code-line-height').replace(/px/g, ''),
+      lineDecorationsWidth: 0,
+      lineNumbersMinChars: 0,
+      scrollBeyondLastLine: false,
+      scrollBeyondLastColumn: 0,
+      automaticLayout: true,
+      readOnly: props.readonly,
+      theme: 'vitesse-dark',
+      lineNumbers: props.lineNumbers as any,
+      glyphMargin: false,
+      scrollbar: {
+        useShadows: false,
+        vertical: 'hidden',
+        horizontal: 'hidden',
+      },
+      overviewRulerLanes: 0,
+      minimap: { enabled: false },
+    })
 
-  update = () => {
-    monaco.editor.setTheme(props.dark
-      ? (theme.dark || 'vitesse-dark')
-      : (theme.light || 'vitesse-light'),
-    )
-    styleObject.innerHTML = `:root { ${props.style} }`
+    format = async () => {
+      model.setValue((await formatCode(props.code, lang())).trim())
+    }
 
-    if (editor.getValue().toString() !== props.code) {
-      const selection = editor.getSelection()
-      editor.setValue(props.code)
-      if (selection)
-        editor.setSelection(selection)
+    // ctrl+s to format
+    originalEditor.onKeyDown((e) => {
+      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
+        e.preventDefault()
+        format()
+      }
+    })
+
+    update = () => {
+      monaco.editor.setTheme(props.dark
+        ? (theme.dark || 'vitesse-dark')
+        : (theme.light || 'vitesse-light'),
+      )
+      styleObject.innerHTML = `:root { ${props.style} }`
+
+      if (originalEditor.getValue().toString() !== props.code) {
+        const selection = originalEditor.getSelection()
+        originalEditor.setValue(props.code)
+        if (selection)
+          originalEditor.setSelection(selection)
+      }
     }
   }
 
+  originalEditor.onDidContentSizeChange(() => {
+    post({ height: Math.max(originalEditor.getContentHeight(), modifiedEditor?.getContentHeight() ?? 0) })
+  })
+
+  model.onDidChangeContent(() => {
+    onCodeChange(model.getValue().toString())
+  })
+
   function onCodeChange(code: string) {
     props.code = code
-    if (window.parent === window)
-      return
-
-    window.parent.postMessage(
-      {
-        type: 'slidev-monaco',
-        id: props.id,
-        data: { code },
-      },
-      location.origin,
-    )
+    post({ code })
   }
 
   update()
+
+  post({}, 'slidev-monaco-loaded')
 }
 
 window.addEventListener('message', (payload) => {
@@ -139,13 +244,11 @@ window.addEventListener('message', (payload) => {
     return
   if (typeof payload.data !== 'string')
     return
-  const { type, data } = JSON.parse(payload.data)
-  if (type === 'slidev-monaco') {
+  const { type, data, id } = JSON.parse(payload.data)
+  if (type === 'slidev-monaco' && id === props.id) {
     Object.assign(props, data)
     update()
   }
 })
 
-window.parent.postMessage({ type: 'slidev-monaco-loaded' }, location.origin)
-
 start()

package/internals/PrintSlide.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router'
-import { computed, reactive } from 'vue'
+import { computed, ref } from 'vue'
 import { useNav } from '../composables/useNav'
 import { isClicksDisabled } from '../logic/nav'
 import PrintSlideClick from './PrintSlideClick.vue'
 
 const props = defineProps<{ route: RouteRecordRaw }>()
 
-const clicksElements = reactive(props.route.meta?.__clicksElements || [])
+const clicksElements = ref(props.route.meta?.__clicksElements || [])
 
 const route = computed(() => props.route)
 const nav = useNav(route)

package/modules/context.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue'
 import { reactive } from 'vue'
-import type { UnwrapNestedRefs } from '@vue/reactivity'
+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'
@@ -8,16 +9,18 @@ import { isDark } from '../logic/dark'
 import { injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 
-export type SlidevContextNavKey = 'route' | 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide'
+export type SlidevContextNavKey = 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide'
 export type SlidevContextNavClicksKey = 'clicks' | 'clicksElements' | 'clicksTotal' | 'hasNext' | 'hasPrev'
 
-export type SlidevContextNav = Pick<typeof nav, SlidevContextNavKey>
+export interface SlidevContextNav extends Pick<typeof nav, SlidevContextNavKey> {
+  route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>
+}
 export type SlidevContextNavClicks = Pick<typeof nav, SlidevContextNavClicksKey>
 
 export interface SlidevContext {
-  nav: UnwrapNestedRefs<SlidevContextNav & SlidevContextNavClicks>
+  nav: SlidevContextNav & SlidevContextNavClicks
   configs: typeof configs
-  themeConfigs: typeof configs['themeConfig']
+  themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
 
 export default function createSlidevContext() {

package/modules/directives.ts

@@ -46,7 +46,10 @@ export default function createDirectives() {
 
           // Set default dir.value
           if (dir.value == null)
-            dir.value = elements?.value.length
+            dir.value = elements?.value?.length
+          // Relative value starts with '+' o '-'
+          if (typeof dir.value === 'string' && (dir.value.startsWith('+') || dir.value.startsWith('-')))
+            dir.value = (elements?.value?.length || 0) + Number(dir.value)
 
           // If orderMap didn't have dir.value aka the order key, then initialize it.
           // If key exists, then move current element to the first of order array to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.40.3",
+  "version": "0.40.4",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,10 +16,10 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.2",
-    "@unocss/reset": "^0.49.4",
-    "@vueuse/core": "^9.12.0",
-    "@vueuse/head": "^1.0.25",
-    "@vueuse/math": "^9.12.0",
+    "@unocss/reset": "^0.50.6",
+    "@vueuse/core": "^9.13.0",
+    "@vueuse/head": "^1.1.23",
+    "@vueuse/math": "^9.13.0",
     "@vueuse/motion": "^2.0.0-beta.27",
     "codemirror": "^5.65.5",
     "defu": "^6.1.2",
@@ -28,22 +28,22 @@
     "js-base64": "^3.7.5",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.4",
-    "mermaid": "^9.3.0",
+    "mermaid": "^9.4.3",
     "monaco-editor": "^0.33.0",
     "nanoid": "^4.0.1",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.6",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.1",
-    "unocss": "^0.49.4",
+    "unocss": "^0.50.6",
     "vite-plugin-windicss": "^1.8.10",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.40.3",
-    "@slidev/types": "0.40.3"
+    "@slidev/parser": "0.40.4",
+    "@slidev/types": "0.40.4"
   },
   "devDependencies": {
-    "vite": "^4.1.1"
+    "vite": "^4.2.1"
   }
 }

package/shim.d.ts

@@ -2,6 +2,8 @@ declare interface Window {
   // extend the window
 }
 
+declare module '*.vue';
+
 // with vite-plugin-vue-markdown, markdowns can be treat as Vue components
 declare module '*.md' {
   import type { ComponentOptions } from 'vue'