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

package/composables/useClicks.ts

@@ -1,12 +1,13 @@
 import { sum } from '@antfu/utils'
 import type { ClicksContext } from '@slidev/types'
 import type { Ref } from 'vue'
-import { ref, shallowReactive } from 'vue'
+import { computed, ref, shallowReactive } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav'
 import { normalizeAtProp } from '../logic/utils'
+import { CLICKS_MAX } from '../constants'
 
-function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: () => number): ClicksContext {
+function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
   const map: ClicksContext['map'] = shallowReactive(new Map())
 
@@ -15,7 +16,10 @@ function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: ()
       return isPrintMode.value && !isPrintWithClicks.value
     },
     get current() {
-      return getCurrent()
+      return current.value
+    },
+    set current(value) {
+      current.value = value
     },
     relativeOffsets,
     map,
@@ -53,7 +57,7 @@ function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: ()
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return route?.meta?.clicks
+      return clicksOverrides
         ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
     },
   }
@@ -62,22 +66,36 @@ function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: ()
 export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksContext {
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
-  const thisPath = +(route?.path ?? 99999)
-  const context = useClicksContextBase(route, () => {
-    const currentPath = +(currentRoute.value?.path ?? 99999)
-    if (currentPath === thisPath)
-      return queryClicks.value
-    else if (currentPath > thisPath)
-      return 99999
-    else
-      return 0
+  const thisPath = +(route?.path ?? Number.NaN)
+  const current = computed({
+    get() {
+      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
+      if (!currentPath || Number.isNaN(currentPath))
+        return 0
+      if (currentPath === thisPath)
+        return queryClicks.value
+      else if (currentPath > thisPath)
+        return CLICKS_MAX
+      else
+        return 0
+    },
+    set(v) {
+      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
+      if (currentPath === thisPath) {
+        // eslint-disable-next-line ts/no-use-before-define
+        queryClicks.value = Math.min(v, context.total)
+      }
+    },
   })
+  const context = useClicksContextBase(
+    current,
+    route?.meta?.clicks,
+  )
   if (route?.meta)
     route.meta.__clicksContext = context
   return context
 }
 
-export function useFixedClicks(route: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
-  const current = ref(currentInit)
-  return [current, useClicksContextBase(route, () => current.value)]
+export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): ClicksContext {
+  return useClicksContextBase(ref(currentInit), route?.meta?.clicks)
 }

package/constants.ts

@@ -3,14 +3,16 @@ import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext, RenderContext } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
 
-export const injectionClicksContext: InjectionKey<Ref<ClicksContext>> = Symbol('slidev-clicks-context')
-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 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')
+// Here we use string literal instead of symbols to make HMR more stable
+// The value of the injections keys are implementation details, you should always use them with the reference to the constant instead of the value
+export const injectionClicksContext = '$$slidev-clicks-context' as unknown as InjectionKey<Ref<ClicksContext>>
+export const injectionCurrentPage = '$$slidev-page' as unknown as InjectionKey<Ref<number>>
+export const injectionSlideScale = '$$slidev-slide-scale' as unknown as InjectionKey<ComputedRef<number>>
+export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
+export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<RouteRecordRaw>
+export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
+export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
+export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'
@@ -20,7 +22,55 @@ export const CLASS_VCLICK_HIDDEN_EXP = 'slidev-vclick-hidden-explicitly'
 export const CLASS_VCLICK_CURRENT = 'slidev-vclick-current'
 export const CLASS_VCLICK_PRIOR = 'slidev-vclick-prior'
 
+export const CLICKS_MAX = 999999
+
 export const TRUST_ORIGINS = [
   'localhost',
   '127.0.0.1',
 ]
+
+export const FRONTMATTER_FIELDS = [
+  'clicks',
+  'disabled',
+  'hide',
+  'hideInToc',
+  'layout',
+  'level',
+  'preload',
+  'routeAlias',
+  'src',
+  'title',
+  'transition',
+  'zoom',
+]
+
+export const HEADMATTER_FIELDS = [
+  ...FRONTMATTER_FIELDS,
+  'theme',
+  'titleTemplate',
+  'info',
+  'author',
+  'keywords',
+  'presenter',
+  'download',
+  'exportFilename',
+  'export',
+  'highlighter',
+  'lineNumbers',
+  'monaco',
+  'remoteAssets',
+  'selectable',
+  'record',
+  'colorSchema',
+  'routerMode',
+  'aspectRatio',
+  'canvasWidth',
+  'themeConfig',
+  'favicon',
+  'plantUmlServer',
+  'fonts',
+  'defaults',
+  'drawings',
+  'htmlAttrs',
+  'mdc',
+]

package/context.ts

@@ -0,0 +1,73 @@
+import { ref, shallowRef, toRef } from 'vue'
+import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
+import { useFixedClicks } from './composables/useClicks'
+import {
+  FRONTMATTER_FIELDS,
+  HEADMATTER_FIELDS,
+  injectionClicksContext,
+  injectionCurrentPage,
+  injectionFrontmatter,
+  injectionRenderContext,
+  injectionRoute,
+  injectionSlideScale,
+  injectionSlidevContext,
+} from './constants'
+
+const clicksContextFallback = shallowRef(useFixedClicks())
+
+/**
+ * Get the current slide context, should be called inside the setup function of a component inside slide
+ */
+export function useSlideContext() {
+  const $slidev = injectLocal(injectionSlidevContext)!
+  const $nav = toRef($slidev, 'nav')
+  const $clicksContext = injectLocal(injectionClicksContext, clicksContextFallback)!.value
+  const $clicks = toRef($clicksContext, 'current')
+  const $page = injectLocal(injectionCurrentPage)!
+  const $renderContext = injectLocal(injectionRenderContext)!
+  const $frontmatter = injectLocal(injectionFrontmatter, {})
+  const $route = injectLocal(injectionRoute, undefined)
+  const $scale = injectLocal(injectionSlideScale, ref(1))!
+
+  return {
+    $slidev,
+    $nav,
+    $clicksContext,
+    $clicks,
+    $page,
+    $route,
+    $renderContext,
+    $frontmatter,
+    $scale,
+  }
+}
+
+export function provideFrontmatter(frontmatter: Record<string, any>) {
+  provideLocal(injectionFrontmatter, frontmatter)
+
+  const {
+    $slidev,
+    $page,
+  } = useSlideContext()
+
+  // update frontmatter in router to make HMR work better
+  const route = $slidev.nav.rawRoutes.find(i => i.path === String($page.value))
+  if (route?.meta?.slide?.frontmatter) {
+    for (const key of Object.keys(route.meta.slide.frontmatter)) {
+      if (!(key in frontmatter))
+        delete route.meta.slide.frontmatter[key]
+    }
+    Object.assign(route.meta.slide.frontmatter, frontmatter)
+  }
+}
+
+/**
+ * Convert frontmatter options to props for v-bind
+ * It removes known options fields, and expose an extra `frontmatter` field that contains full frontmatter
+ */
+export function frontmatterToProps(frontmatter: Record<string, any>, pageNo: number) {
+  return {
+    ...objectOmit(frontmatter, pageNo === 0 ? HEADMATTER_FIELDS : FRONTMATTER_FIELDS),
+    frontmatter,
+  }
+}

package/env.ts

@@ -1,15 +1,12 @@
-import type { SlidevConfig } from '@slidev/types'
-import type { UnwrapNestedRefs } from 'vue'
 import { computed } from 'vue'
 import { objectMap } from '@antfu/utils'
+import configs from '#slidev/configs'
 
-// @ts-expect-error missing types
-import _configs from '/@slidev/configs'
-import type { SlidevContext } from './modules/context'
+export { configs }
 
-export const configs = _configs as SlidevConfig
 export const slideAspect = configs.aspectRatio ?? (16 / 9)
 export const slideWidth = configs.canvasWidth ?? 980
+
 // To honor the aspect ratio more as possible, we need to approximate the height to the next integer.
 // Doing this, we will prevent on print, to create an additional empty white page after each page.
 export const slideHeight = Math.ceil(slideWidth / slideAspect)
@@ -17,9 +14,3 @@ export const slideHeight = Math.ceil(slideWidth / slideAspect)
 export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])
 })
-
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $slidev: UnwrapNestedRefs<SlidevContext>
-  }
-}

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

@@ -3,7 +3,7 @@ import { computed, ref, watch } from 'vue'
 import Fuse from 'fuse.js'
 import { go, rawRoutes } 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>()
@@ -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

@@ -10,8 +10,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: {
@@ -34,7 +33,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__)
@@ -115,13 +114,13 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <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>