npm - @slidev/client - Versions diffs - 0.48.0-beta.2 → 0.48.0-beta.21 - Mend

@slidev/client 0.48.0-beta.2 → 0.48.0-beta.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/App.vue +7 -0
package/builtin/Arrow.vue +2 -4
package/builtin/CodeBlockWrapper.vue +14 -6
package/builtin/KaTexBlockWrapper.vue +5 -4
package/builtin/Mermaid.vue +4 -3
package/builtin/Monaco.vue +109 -92
package/builtin/RenderWhen.vue +3 -3
package/builtin/ShikiMagicMove.vue +50 -0
package/builtin/SlideCurrentNo.vue +2 -3
package/builtin/SlidesTotal.vue +3 -4
package/builtin/SlidevVideo.vue +9 -7
package/builtin/Toc.vue +4 -4
package/builtin/TocList.vue +4 -3
package/builtin/Tweet.vue +3 -22
package/builtin/VClick.ts +2 -1
package/builtin/VClickGap.vue +3 -5
package/builtin/VClicks.ts +1 -1
package/composables/useClicks.ts +39 -20
package/composables/useContext.ts +4 -9
package/composables/useNav.ts +182 -44
package/composables/useSwipeControls.ts +40 -0
package/composables/useTocTree.ts +63 -0
package/constants.ts +59 -10
package/context.ts +73 -0
package/env.ts +3 -12
package/internals/ClicksSlider.vue +93 -0
package/internals/Controls.vue +2 -2
package/internals/DrawingControls.vue +39 -9
package/internals/DrawingLayer.vue +3 -3
package/internals/Goto.vue +7 -6
package/internals/IconButton.vue +7 -3
package/internals/InfoDialog.vue +1 -1
package/internals/Modal.vue +1 -1
package/internals/NavControls.vue +11 -10
package/internals/NoteDisplay.vue +131 -8
package/internals/NoteEditable.vue +128 -0
package/internals/NoteStatic.vue +8 -6
package/internals/PrintContainer.vue +8 -6
package/internals/PrintSlide.vue +10 -11
package/internals/PrintSlideClick.vue +14 -18
package/internals/{SlidesOverview.vue → QuickOverview.vue} +31 -20
package/internals/RecordingControls.vue +1 -1
package/internals/RecordingDialog.vue +5 -6
package/internals/{Editor.vue → SideEditor.vue} +9 -5
package/internals/SlideContainer.vue +12 -9
package/internals/SlideLoading.vue +19 -0
package/internals/SlideWrapper.ts +32 -16
package/internals/SlidesShow.vue +20 -18
package/layouts/error.vue +5 -0
package/layouts/two-cols-header.vue +9 -3
package/logic/drawings.ts +13 -10
package/logic/nav-state.ts +20 -0
package/logic/nav.ts +51 -258
package/logic/note.ts +9 -9
package/logic/overview.ts +2 -2
package/logic/route.ts +10 -1
package/logic/slides.ts +19 -0
package/logic/transition.ts +50 -0
package/main.ts +8 -4
package/modules/context.ts +7 -13
package/modules/mermaid.ts +6 -7
package/modules/{directives.ts → v-click.ts} +15 -15
package/modules/v-mark.ts +159 -0
package/package.json +27 -16
package/{internals/EntrySelect.vue → pages/entry.vue} +7 -0
package/{internals/NotesView.vue → pages/notes.vue} +7 -6
package/pages/overview.vue +227 -0
package/{internals/Play.vue → pages/play.vue} +17 -13
package/{internals/PresenterPrint.vue → pages/presenter/print.vue} +13 -8
package/{internals/Presenter.vue → pages/presenter.vue} +114 -105
package/{internals/Print.vue → pages/print.vue} +3 -4
package/routes.ts +28 -60
package/setup/codemirror.ts +8 -3
package/setup/monaco.ts +108 -44
package/setup/root.ts +8 -9
package/setup/shortcuts.ts +2 -1
package/shim-vue.d.ts +38 -0
package/shim.d.ts +1 -13
package/state/index.ts +10 -10
package/styles/code.css +7 -3
package/styles/index.css +68 -7
package/styles/katex.css +1 -1
package/styles/layouts-base.css +17 -12
package/styles/monaco.css +27 -0
package/styles/vars.css +1 -0
package/uno.config.ts +14 -2
package/utils.ts +15 -2
package/iframes/monaco/index.css +0 -28
package/iframes/monaco/index.html +0 -7
package/iframes/monaco/index.ts +0 -260
package/internals/NoteEditor.vue +0 -88

package/iframes/monaco/index.css DELETED Viewed

@@ -1,28 +0,0 @@
-html,
-body,
-#container {
-  padding: 0;
-  margin: 0;
-  background: var(--slidev-code-background);
-  width: 100%;
-  height: 200%;
-}
-#container {
-  padding: var(--slidev-code-padding);
-  margin: var(--slidev-code-margin);
-  border-radius: var(--slidev-code-radius);
-}
-.monaco-editor .monaco-hover {
-  border-radius: var(--slidev-code-radius);
-  overflow: hidden;
-  border: none;
-  outline: none;
-}
-.monaco-editor .lines-content,
-.monaco-editor .view-line,
-.monaco-editor .view-lines {
-  user-select: none;
-}

package/iframes/monaco/index.html DELETED Viewed

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-  <div id="container"></div>
-  <script type="module" src="./index.ts"></script>
-</body>
-</html>

package/iframes/monaco/index.ts DELETED Viewed

@@ -1,260 +0,0 @@
-import '/@slidev/styles'
-import './index.css'
-import type * as monaco from 'monaco-editor'
-import { formatCode } from '../../setup/prettier'
-import setupMonaco from '../../setup/monaco'
-import '/@slidev/monaco-types'
-const url = new URL(location.href)
-const props = {
-  id: url.searchParams.get('id'),
-  code: '',
-  diff: '',
-  lang: url.searchParams.get('lang') ?? 'typescript',
-  readonly: false,
-  lineNumbers: url.searchParams.get('lineNumbers') ?? 'off',
-  dark: false,
-  style: '',
-  editorOptions: {},
-}
-const styleObject = document.createElement('style')
-let originalEditor: monaco.editor.IStandaloneCodeEditor
-let modifiedEditor: monaco.editor.IStandaloneCodeEditor
-let format: () => void = () => { }
-let update: () => void = () => { }
-document.body.appendChild(styleObject)
-function lang() {
-  switch (props.lang) {
-    case 'ts':
-    case 'tsx':
-      return 'typescript'
-    case 'jsx':
-    case 'js':
-      return 'javascript'
-    default:
-      return props.lang
-  }
-}
-function ext() {
-  switch (lang()) {
-    case 'typescript':
-      return 'ts'
-    case 'javascript':
-      return 'js'
-    default:
-      return lang()
-  }
-}
-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 = {}, editorOptions = {} } = 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()}`),
-  )
-  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,
-      ...editorOptions,
-    })
-    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())
-    }
-    // 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)
-      }
-      originalEditor.updateOptions(props.editorOptions)
-      if (modifiedEditor.getValue().toString() !== props.diff) {
-        const selection = modifiedEditor.getSelection()
-        modifiedEditor.setValue(props.diff)
-        if (selection)
-          modifiedEditor.setSelection(selection)
-      }
-      modifiedEditor.updateOptions(props.editorOptions)
-    }
-    diffModel.onDidChangeContent(() => {
-      onCodeChange(diffModel.getValue().toString())
-    })
-    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 },
-      ...editorOptions,
-    })
-    format = async () => {
-      model.setValue((await formatCode(props.code, lang())).trim())
-    }
-    // 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.updateOptions(props.editorOptions)
-    }
-  }
-  originalEditor.onDidContentSizeChange(() => {
-    post({ height: Math.max(originalEditor.getContentHeight(), modifiedEditor?.getContentHeight() ?? 0) })
-  })
-  model.onDidChangeContent(() => {
-    onCodeChange(model.getValue().toString())
-  })
-  function onCodeChange(code: string) {
-    props.code = code
-    post({ code })
-  }
-  update()
-  post({}, 'slidev-monaco-loaded')
-}
-window.addEventListener('message', (payload) => {
-  if (payload.source === window)
-    return
-  if (payload.origin !== location.origin)
-    return
-  if (typeof payload.data !== 'string')
-    return
-  const { type, data, id } = JSON.parse(payload.data)
-  if (type === 'slidev-monaco' && id === props.id) {
-    Object.assign(props, data)
-    update()
-  }
-})
-start()

package/internals/NoteEditor.vue DELETED Viewed

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
-import { ref, watch, watchEffect } from 'vue'
-import { currentSlideId } from '../logic/nav'
-import { useDynamicSlideInfo } from '../logic/note'
-import NoteDisplay from './NoteDisplay.vue'
-const props = defineProps({
-  class: {
-    default: '',
-  },
-  editing: {
-    default: false,
-  },
-  style: {
-    default: () => ({}),
-  },
-  placeholder: {
-    default: 'No notes for this slide',
-  },
-})
-const emit = defineEmits([
-  'update:editing',
-])
-const editing = useVModel(props, 'editing', emit, { passive: true })
-const { info, update } = useDynamicSlideInfo(currentSlideId)
-const note = ref('')
-let timer: any
-const { ignoreUpdates } = ignorableWatch(
-  note,
-  (v) => {
-    const id = currentSlideId.value
-    clearTimeout(timer)
-    timer = setTimeout(() => {
-      update({ raw: null!, note: v }, id)
-    }, 500)
-  },
-)
-watch(
-  info,
-  (v) => {
-    clearTimeout(timer)
-    ignoreUpdates(() => {
-      note.value = v?.note || ''
-    })
-  },
-  { immediate: true, flush: 'sync' },
-)
-const input = ref<HTMLTextAreaElement>()
-watchEffect(() => {
-  if (editing.value)
-    input.value?.focus()
-})
-onClickOutside(input, () => {
-  editing.value = false
-})
-</script>
-<template>
-  <NoteDisplay
-    v-if="!editing"
-    class="my--4 border-transparent border-2"
-    :class="[props.class, note ? '' : 'opacity-50']"
-    :style="props.style"
-    :note="note || placeholder"
-    :note-html="info?.noteHTML"
-  />
-  <textarea
-    v-else
-    ref="input"
-    v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block border-green border-2"
-    style="line-height: 1.75;"
-    :style="props.style"
-    :class="props.class"
-    :placeholder="placeholder"
-    @keydown.esc=" editing = false"
-    @focus="editing = true"
-  />
-</template>