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

package/internals/ClicksSlider.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { ClicksContext } from '@slidev/types'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  clicksContext: ClicksContext
+}>()
+
+const total = computed(() => props.clicksContext.total)
+const current = computed({
+  get() {
+    return props.clicksContext.current > total.value ? -1 : props.clicksContext.current
+  },
+  set(value: number) {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.clicksContext.current = value
+  },
+})
+
+const range = computed(() => Array.from({ length: total.value + 1 }, (_, i) => i))
+
+function onMousedown() {
+  if (current.value < 0 || current.value > total.value)
+    current.value = 0
+}
+</script>
+
+<template>
+  <div
+    class="flex gap-0.5 items-center select-none"
+    :title="`Clicks in this slide: ${total}`"
+    :class="total ? '' : 'op50'"
+  >
+    <div class="flex gap-1 items-center min-w-16">
+      <carbon:cursor-1 text-sm op50 />
+      <span text-primary>{{ current }}</span>
+      <span op50>/</span>
+      <span op50>{{ total }}</span>
+    </div>
+    <div
+      relative flex-auto h5 flex="~"
+      @dblclick="current = clicksContext.total"
+    >
+      <div
+        v-for="i of range" :key="i"
+        border="y main" of-hidden relative
+        :class="[
+          i === 0 ? 'rounded-l border-l' : '',
+          i === total ? 'rounded-r border-r' : '',
+        ]"
+        :style="{ width: total > 0 ? `${1 / total * 100}%` : '100%' }"
+      >
+        <div absolute inset-0 :class="i <= current ? 'bg-primary op20' : ''" />
+        <div
+          :class="[
+            +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
+            i === 0 ? 'rounded-l' : '',
+            i === total ? 'rounded-r' : 'border-r-2',
+          ]"
+          w-full h-full text-xs flex items-center justify-center z-1
+        >
+          {{ i }}
+        </div>
+      </div>
+      <input
+        v-model="current"
+        class="range" absolute inset-0
+        type="range" :min="0" :max="total" :step="1" z-10 op0
+        :style="{ '--thumb-width': `${1 / (total + 1) * 100}%` }"
+        @mousedown="onMousedown"
+        @focus="event => (event.currentTarget as HTMLElement)?.blur()"
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.range {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 100%;
+  width: var(--thumb-width, 0.5rem);
+}
+
+.range::-moz-range-thumb {
+  height: 100%;
+  width: var(--thumb-width, 0.5rem);
+}
+</style>

package/internals/Controls.vue

@@ -2,7 +2,7 @@
 import { shallowRef } from 'vue'
 import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
 import { configs } from '../env'
-import SlidesOverview from './SlidesOverview.vue'
+import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
 
@@ -15,7 +15,7 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
-  <SlidesOverview v-model="showOverview" />
+  <QuickOverview v-model="showOverview" />
   <Goto />
   <WebCamera v-if="WebCamera" />
   <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />

package/internals/DrawingControls.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Menu } from 'floating-vue'
+import 'floating-vue/dist/style.css'
 import {
   brush,
   brushColors,
@@ -21,20 +23,24 @@ function undo() {
 function redo() {
   drauu.redo()
 }
+
+let lastDrawingMode: typeof drawingMode.value = 'stylus'
 function setDrawingMode(mode: typeof drawingMode.value) {
   drawingMode.value = mode
   drawingEnabled.value = true
+  if (mode !== 'eraseLine')
+    lastDrawingMode = mode
 }
 function setBrushColor(color: typeof brush.color) {
   brush.color = color
   drawingEnabled.value = true
+  drawingMode.value = lastDrawingMode
 }
 </script>
 
 <template>
   <Draggable
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200"
-    dark="border border-gray-400 border-opacity-10"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
     :class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
     storage-key="slidev-drawing-pos"
     :initial-x="10"
@@ -57,23 +63,41 @@ function setBrushColor(color: typeof brush.color) {
     <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
       <carbon:checkbox />
     </IconButton>
-    <!-- TODO: not sure why it's not working! -->
-    <!-- <IconButton title="Erase" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+    <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
       <carbon:erase />
-    </IconButton> -->
+    </IconButton>
 
     <VerticalDivider />
 
+    <Menu>
+      <IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
+        <svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
+          <line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
+          <line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          <line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </IconButton>
+      <template #popper>
+        <div class="flex bg-main p-2">
+          <div class="inline-block w-7 text-center">
+            {{ brush.size }}
+          </div>
+          <div class="pt-.5">
+            <input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
+          </div>
+        </div>
+      </template>
+    </Menu>
     <IconButton
       v-for="color of brushColors"
       :key="color"
       title="Set brush color"
-      :class="brush.color === color ? 'active' : 'shallow'"
+      :class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
       <div
-        class="w-6 h-6 transition-all transform border border-gray-400/50"
-        :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
+        class="w-6 h-6 transition-all transform border"
+        :class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
         :style="drawingEnabled ? { background: color } : { borderColor: color }"
       />
     </IconButton>
@@ -87,7 +111,7 @@ function setBrushColor(color: typeof brush.color) {
       <carbon:redo />
     </IconButton>
     <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clearDrauu()">
-      <carbon:delete />
+      <carbon:trash-can />
     </IconButton>
 
     <VerticalDivider />
@@ -106,3 +130,9 @@ function setBrushColor(color: typeof brush.color) {
     </IconButton>
   </Draggable>
 </template>
+
+<style>
+.v-popper--theme-menu .v-popper__arrow-inner {
+  --uno: border-main;
+}
+</style>

package/internals/DrawingLayer.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { drauu, drawingEnabled, loadCanvas } from '../logic/drawings'
-import { injectionSlideScale } from '../constants'
+import { useSlideContext } from '../context'
 
-const scale = inject(injectionSlideScale)!
+const scale = useSlideContext().$scale
 const svg = ref<SVGSVGElement>()
 
 onMounted(() => {

package/internals/Goto.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import Fuse from 'fuse.js'
-import { go, rawRoutes } from '../logic/nav'
+import { go, slides } from '../logic/nav'
 import { activeElement, showGotoDialog } from '../state'
-import Titles from '/@slidev/titles.md'
+import Titles from '#slidev/titles.md'
 
 const container = ref<HTMLDivElement>()
 const input = ref<HTMLInputElement>()
@@ -16,7 +16,7 @@ function notNull<T>(value: T | null | undefined): value is T {
   return value !== null && value !== undefined
 }
 
-const fuse = computed(() => new Fuse(rawRoutes.map(i => i.meta?.slide).filter(notNull), {
+const fuse = computed(() => new Fuse(slides.value.map(i => i.meta?.slide).filter(notNull), {
   keys: ['no', 'title'],
   threshold: 0.3,
   shouldSort: true,
@@ -165,10 +165,11 @@ watch(activeElement, () => {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .autocomplete-list {
-  @apply bg-main transform mt-1 overflow-auto;
-  max-height: calc( 100vh - 100px );
+  --uno: bg-main mt-1;
+  overflow: auto;
+  max-height: calc(100vh - 100px);
 }
 
 .autocomplete {

package/internals/IconButton.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 defineProps<{
   title: string
+  icon?: string
+  as?: string
 }>()
 </script>
 
 <template>
-  <button class="slidev-icon-btn" :title="title" v-bind="$attrs">
+  <component :is="as || 'button'" class="slidev-icon-btn" :title="title" v-bind="$attrs">
     <span class="sr-only">{{ title }}</span>
-    <slot />
-  </button>
+    <slot>
+      <div :class="icon" />
+    </slot>
+  </component>
 </template>

package/internals/InfoDialog.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 const hasInfo = computed(() => typeof configs.info === 'string')
 </script>

package/internals/Modal.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
 function onClick() {

package/internals/NavControls.vue

@@ -1,7 +1,8 @@
 <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, presenterPassword, prev, showPresenter, total } from '../logic/nav'
+import { downloadPDF } from '../utils'
+import { currentRoute, currentSlideNo, getSlidePath, hasNext, hasPrev, isEmbedded, isPresenter, isPresenterAvailable, next, prev, total } from '../logic/nav'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
@@ -10,8 +11,7 @@ import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
 import IconButton from './IconButton.vue'
 
-// @ts-expect-error virtual module
-import CustomNavControls from '/@slidev/custom-nav-controls'
+import CustomNavControls from '#slidev/custom-nav-controls'
 
 const props = defineProps({
   persist: {
@@ -22,9 +22,10 @@ const props = defineProps({
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
+const presenterPassword = computed(() => currentRoute.value.query.password)
 const query = computed(() => presenterPassword.value ? `?password=${presenterPassword.value}` : '')
-const presenterLink = computed(() => `/presenter/${currentPage.value}${query.value}`)
-const nonPresenterLink = computed(() => `/${currentPage.value}${query.value}`)
+const presenterLink = computed(() => `${getSlidePath(currentSlideNo.value, true)}${query.value}`)
+const nonPresenterLink = computed(() => `${getSlidePath(currentSlideNo.value, false)}${query.value}`)
 
 const root = ref<HTMLDivElement>()
 function onMouseLeave() {
@@ -34,7 +35,7 @@ function onMouseLeave() {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow dark:border dark:border-gray-400 dark:border-opacity-10')
+  : 'rounded-md bg-main shadow dark:border dark:border-main')
 
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)
@@ -108,20 +109,20 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="slidev-icon-btn" title="Play Mode">
           <carbon:presentation-file />
         </RouterLink>
-        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && showPresenter" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
+        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
           <carbon:user-speaker />
         </RouterLink>
 
         <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
           :title="showEditor ? 'Hide editor' : 'Show editor'"
-          class="<md:hidden"
+          class="lt-md:hidden"
           @click="showEditor = !showEditor"
         >
           <carbon:text-annotation-toggle />
         </IconButton>
 
-        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" @click="togglePresenterLayout">
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial" @click="togglePresenterLayout">
           <carbon:template />
           {{ presenterLayout }}
         </IconButton>
@@ -157,7 +158,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
       <div class="h-40px flex" p="l-1 t-0.5 r-2" text="sm leading-2">
         <div class="my-auto">
-          {{ currentPage }}
+          {{ currentSlideNo }}
           <span class="opacity-50">/ {{ total }}</span>
         </div>
       </div>

package/internals/NoteDisplay.vue

@@ -1,36 +1,159 @@
 <script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import type { ClicksContext } from '@slidev/types'
+import { CLICKS_MAX } from '../constants'
+
 const props = defineProps<{
   class?: string
   noteHtml?: string
   note?: string
   placeholder?: string
+  clicksContext?: ClicksContext
+  autoScroll?: boolean
+}>()
+
+const emit = defineEmits<{
+  (type: 'markerDblclick', e: MouseEvent, clicks: number): void
+  (type: 'markerClick', e: MouseEvent, clicks: number): void
 }>()
 
-defineEmits(['click'])
+const withClicks = computed(() => props.clicksContext?.current != null && props.noteHtml?.includes('slidev-note-click-mark'))
+const noteDisplay = ref<HTMLElement | null>(null)
+
+const CLASS_FADE = 'slidev-note-fade'
+const CLASS_MARKER = 'slidev-note-click-mark'
+
+function highlightNote() {
+  if (!noteDisplay.value || !withClicks.value)
+    return
+
+  const markers = Array.from(noteDisplay.value.querySelectorAll(`.${CLASS_MARKER}`)) as HTMLElement[]
+
+  const current = +(props.clicksContext?.current ?? CLICKS_MAX)
+  const disabled = current < 0 || current >= CLICKS_MAX
+
+  const nodeToIgnores = new Set<Element>()
+  function ignoreParent(node: Element) {
+    if (!node || node === noteDisplay.value)
+      return
+    nodeToIgnores.add(node)
+    if (node.parentElement)
+      ignoreParent(node.parentElement)
+  }
+
+  const markersMap = new Map<number, HTMLElement>()
+
+  // Convert all sibling text nodes to spans, so we attach classes to them
+  for (const marker of markers) {
+    const parent = marker.parentElement!
+    const clicks = Number(marker.dataset!.clicks)
+    markersMap.set(clicks, marker)
+    // Ignore the parents of the marker, so the class only applies to the children
+    ignoreParent(parent)
+    Array.from(parent!.childNodes)
+      .forEach((node) => {
+        if (node.nodeType === 3) { // text node
+          const span = document.createElement('span')
+          span.textContent = node.textContent
+          parent.insertBefore(span, node)
+          node.remove()
+        }
+      })
+  }
+  const children = Array.from(noteDisplay.value.querySelectorAll('*'))
+
+  let count = 0
+
+  // Segmenting notes by clicks
+  const segments = new Map<number, Element[]>()
+  for (const child of children) {
+    if (!segments.has(count))
+      segments.set(count, [])
+    segments.get(count)!.push(child)
+    // Update count when reach marker
+    if (child.classList.contains(CLASS_MARKER))
+      count = Number((child as HTMLElement).dataset.clicks) || (count + 1)
+  }
+
+  // Apply
+  for (const [count, els] of segments) {
+    if (disabled) {
+      els.forEach(el => el.classList.remove(CLASS_FADE))
+    }
+    else {
+      els.forEach(el => el.classList.toggle(
+        CLASS_FADE,
+        nodeToIgnores.has(el)
+          ? false
+          : count !== current,
+      ))
+    }
+  }
+
+  for (const [clicks, marker] of markersMap) {
+    marker.classList.remove(CLASS_FADE)
+    marker.classList.toggle(`${CLASS_MARKER}-past`, disabled ? false : clicks < current)
+    marker.classList.toggle(`${CLASS_MARKER}-active`, disabled ? false : clicks === current)
+    marker.classList.toggle(`${CLASS_MARKER}-next`, disabled ? false : clicks === current + 1)
+    marker.classList.toggle(`${CLASS_MARKER}-future`, disabled ? false : clicks > current + 1)
+    marker.ondblclick = (e) => {
+      emit('markerDblclick', e, clicks)
+      if (e.defaultPrevented)
+        return
+      props.clicksContext!.current = clicks
+      e.stopPropagation()
+      e.stopImmediatePropagation()
+    }
+    marker.onclick = (e) => {
+      emit('markerClick', e, clicks)
+    }
+
+    if (props.autoScroll && clicks === current)
+      marker.scrollIntoView({ block: 'center', behavior: 'smooth' })
+  }
+}
+
+watch(
+  () => [props.noteHtml, props.clicksContext?.current],
+  () => {
+    nextTick(() => {
+      highlightNote()
+    })
+  },
+  { immediate: true },
+)
+
+onMounted(() => {
+  highlightNote()
+})
 </script>
 
 <template>
   <div
     v-if="noteHtml"
-    class="prose overflow-auto outline-none"
-    :class="props.class"
-    @click="$emit('click')"
+    ref="noteDisplay"
+    class="prose overflow-auto outline-none slidev-note"
+    :class="[props.class, withClicks ? 'slidev-note-with-clicks' : '']"
     v-html="noteHtml"
   />
   <div
     v-else-if="note"
-    class="prose overflow-auto outline-none"
+    class="prose overflow-auto outline-none slidev-note"
     :class="props.class"
-    @click="$emit('click')"
   >
     <p v-text="note" />
   </div>
   <div
     v-else
-    class="prose overflow-auto outline-none opacity-50 italic"
+    class="prose overflow-auto outline-none opacity-50 italic select-none slidev-note"
     :class="props.class"
-    @click="$emit('click')"
   >
     <p v-text="props.placeholder || 'No notes.'" />
   </div>
 </template>
+
+<style>
+.slidev-note :first-child {
+  margin-top: 0;
+}
+</style>

package/internals/NoteEditable.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { nextTick, ref, watch, watchEffect } from 'vue'
+import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
+import type { ClicksContext } from '@slidev/types'
+import { useDynamicSlideInfo } from '../logic/note'
+import NoteDisplay from './NoteDisplay.vue'
+
+const props = defineProps({
+  no: {
+    type: Number,
+  },
+  class: {
+    default: '',
+  },
+  editing: {
+    default: false,
+  },
+  style: {
+    default: () => ({}),
+  },
+  placeholder: {
+    default: 'No notes for this slide',
+  },
+  clicksContext: {
+    type: Object as PropType<ClicksContext>,
+  },
+  autoHeight: {
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (type: 'update:editing', value: boolean): void
+  (type: 'markerDblclick', e: MouseEvent, clicks: number): void
+  (type: 'markerClick', e: MouseEvent, clicks: number): void
+}>()
+
+const editing = useVModel(props, 'editing', emit, { passive: true })
+
+const { info, update } = useDynamicSlideInfo(props.no)
+
+const note = ref('')
+let timer: any
+
+// Send back the note on changes
+const { ignoreUpdates } = ignorableWatch(
+  note,
+  (v) => {
+    if (!editing.value)
+      return
+    const id = props.no
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      update({ note: v }, id)
+    }, 500)
+  },
+)
+
+// Update note value when info changes
+watch(
+  () => info.value?.note,
+  (value = '') => {
+    if (editing.value)
+      return
+    clearTimeout(timer)
+    ignoreUpdates(() => {
+      note.value = value
+    })
+  },
+  { immediate: true, flush: 'sync' },
+)
+
+const inputEl = ref<HTMLTextAreaElement>()
+const inputHeight = ref<number | null>()
+
+watchEffect(() => {
+  if (editing.value)
+    inputEl.value?.focus()
+})
+
+onClickOutside(inputEl, () => {
+  editing.value = false
+})
+
+function calculateEditorHeight() {
+  if (!props.autoHeight || !inputEl.value || !editing.value)
+    return
+  if (inputEl.value.scrollHeight > inputEl.value.clientHeight)
+    inputEl.value.style.height = `${inputEl.value.scrollHeight}px`
+}
+
+watch(
+  [note, editing],
+  () => {
+    nextTick(() => {
+      calculateEditorHeight()
+    })
+  },
+  { flush: 'post', immediate: true },
+)
+</script>
+
+<template>
+  <NoteDisplay
+    v-if="!editing"
+    class="border-transparent border-2"
+    :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
+    :style="props.style"
+    :note="note || placeholder"
+    :note-html="info?.noteHTML"
+    :clicks-context="clicksContext"
+    :auto-scroll="!autoHeight"
+    @marker-click="(e, clicks) => emit('markerClick', e, clicks)"
+    @marker-dblclick="(e, clicks) => emit('markerDblclick', e, clicks)"
+  />
+  <textarea
+    v-else
+    ref="inputEl"
+    v-model="note"
+    class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
+    style="line-height: 1.75;"
+    :style="[props.style, inputHeight != null ? { height: `${inputHeight}px` } : {}]"
+    :class="props.class"
+    :placeholder="placeholder"
+    @keydown.esc="editing = false"
+  />
+</template>