@slidev/client 0.47.5 → 0.48.0-beta.1

package/internals/Presenter.vue

@@ -2,7 +2,7 @@
 import { useHead } from '@unhead/vue'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
-import { clicks, clicksTotal, currentPage, currentRoute, hasNext, nextRoute, total, useSwipeControls } from '../logic/nav'
+import { clicksContext, currentPage, currentRoute, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
 import { configs, themeVars } from '../env'
 import { sharedState } from '../state/shared'
@@ -10,6 +10,7 @@ import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { isDrawing } from '../logic/drawings'
+import { useFixedClicks } from '../composables/useClicks'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
 import SlidesOverview from './SlidesOverview.vue'
@@ -19,7 +20,7 @@ import Goto from './Goto.vue'
 import SlidesShow from './SlidesShow.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingControls from './DrawingControls.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const main = ref<HTMLDivElement>()
 
@@ -35,26 +36,21 @@ const notesEditing = ref(false)
 
 const { timer, resetTimer } = useTimer()
 
-const nextTabElements = ref([])
-const nextSlide = computed(() => {
-  if (clicks.value < clicksTotal.value) {
-    return {
-      route: currentRoute.value,
-      clicks: clicks.value + 1,
-    }
-  }
-  else {
-    if (hasNext.value) {
-      return {
-        route: nextRoute.value,
-        clicks: 0,
-      }
-    }
-    else {
-      return null
-    }
-  }
+const clicksCtxMap = rawRoutes.map(route => useFixedClicks(route))
+const nextFrame = computed(() => {
+  if (clicksContext.value.current < clicksContext.value.total)
+    return [currentRoute.value!, clicksContext.value.current + 1] as const
+  else if (hasNext.value)
+    return [nextRoute.value!, 0] as const
+  else
+    return null
+})
+const nextFrameClicksCtx = computed(() => {
+  return nextFrame.value && clicksCtxMap[+nextFrame.value[0].path - 1]
 })
+watch([currentRoute, queryClicks], () => {
+  nextFrameClicksCtx.value && (nextFrameClicksCtx.value[0].value = nextFrame.value![1])
+}, { immediate: true })
 
 const Editor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
@@ -120,17 +116,16 @@ onMounted(() => {
       </div>
       <div class="relative grid-section next flex flex-col p-2 lg:p-4" :style="themeVars">
         <SlideContainer
-          v-if="nextSlide"
+          v-if="nextFrame && nextFrameClicksCtx"
           key="next"
           class="h-full w-full"
         >
           <SlideWrapper
-            :is="nextSlide.route?.component as any"
-            v-model:clicks-elements="nextTabElements"
-            :clicks="nextSlide.clicks"
-            :clicks-disabled="false"
-            :class="getSlideClass(nextSlide.route)"
-            :route="nextSlide.route"
+            :is="nextFrame[0].component as any"
+            :key="nextFrame[0].path"
+            :clicks-context="nextFrameClicksCtx[1]"
+            :class="getSlideClass(nextFrame[0])"
+            :route="nextFrame[0]"
             render-context="previewNext"
           />
         </SlideContainer>
@@ -155,21 +150,19 @@ onMounted(() => {
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <div class="border-t border-main py-1 px-2 text-sm">
-          <button class="slidev-icon-btn" @click="increasePresenterFontSize">
-            <HiddenText text="Increase font size" />
+          <IconButton title="Increase font size" @click="increasePresenterFontSize">
             <carbon:zoom-in />
-          </button>
-          <button class="slidev-icon-btn" @click="decreasePresenterFontSize">
-            <HiddenText text="Decrease font size" />
+          </IconButton>
+          <IconButton title="Decrease font size" @click="decreasePresenterFontSize">
             <carbon:zoom-out />
-          </button>
-          <button
+          </IconButton>
+          <IconButton
             v-if="__DEV__"
-            class="slidev-icon-btn" @click="notesEditing = !notesEditing"
+            title="Edit Notes"
+            @click="notesEditing = !notesEditing"
           >
-            <HiddenText text="Edit Notes" />
             <carbon:edit />
-          </button>
+          </IconButton>
         </div>
       </div>
       <div class="grid-section bottom">

package/internals/PrintSlide.vue

@@ -1,22 +1,24 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useNav } from '../composables/useNav'
-import { isClicksDisabled } from '../logic/nav'
+import { useFixedClicks } from '../composables/useClicks'
 import PrintSlideClick from './PrintSlideClick.vue'
 
 const props = defineProps<{ route: RouteRecordRaw }>()
 
-const clicksElements = ref(props.route.meta?.__clicksElements || [])
-const clicks = computed(() => props.route.meta?.clicks ?? clicksElements.value.length)
-
 const route = computed(() => props.route)
 const nav = useNav(route)
+const clicks0 = useFixedClicks(route.value, 0)[1]
 </script>
 
 <template>
-  <PrintSlideClick v-model:clicks-elements="clicksElements" :clicks="0" :nav="nav" :route="route" />
-  <template v-if="!isClicksDisabled">
-    <PrintSlideClick v-for="i of clicks" :key="i" :clicks="i" :nav="nav" :route="route" />
+  <PrintSlideClick
+    :clicks-context="clicks0"
+    :nav="nav"
+    :route="route"
+  />
+  <template v-if="!clicks0.disabled">
+    <PrintSlideClick v-for="i of clicks0.total" :key="i" :clicks-context="useFixedClicks(route, i)[1]" :nav="nav" :route="route" />
   </template>
 </template>

package/internals/PrintSlideClick.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router'
 import { computed, provide, reactive, shallowRef } from 'vue'
-import { useVModel } from '@vueuse/core'
-import { useNavClicks } from '../composables/useNavClicks'
+import type { ClicksContext } from '@slidev/types'
 import { injectionSlidevContext } from '../constants'
-import { isClicksDisabled } from '../logic/nav'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
 import type { SlidevContextNav } from '../modules/context'
@@ -17,16 +15,11 @@ import GlobalTop from '/@slidev/global-components/top'
 import GlobalBottom from '/@slidev/global-components/bottom'
 
 const props = defineProps<{
-  clicks: number
-  clicksElements?: HTMLElement[]
+  clicksContext: ClicksContext
   nav: SlidevContextNav
   route: RouteRecordRaw
 }>()
 
-const emit = defineEmits(['update:clicksElements'])
-
-const clicksElements = useVModel(props, 'clicksElements', emit)
-
 const style = computed(() => ({
   height: `${slideHeight}px`,
   width: `${slideWidth}px`,
@@ -36,12 +29,12 @@ const DrawingPreview = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('./DrawingPreview.vue').then(v => (DrawingPreview.value = v.default))
 
-const clicks = computed(() => props.clicks)
-const navClicks = useNavClicks(clicks, props.nav.currentRoute, props.nav.currentPage)
-const id = computed(() => `${props.route.path.toString().padStart(3, '0')}-${(clicks.value + 1).toString().padStart(2, '0')}`)
+const id = computed(() =>
+  `${props.route.path.toString().padStart(3, '0')}-${(props.nav.clicks.value + 1).toString().padStart(2, '0')}`,
+)
 
 provide(injectionSlidevContext, reactive({
-  nav: { ...props.nav, ...navClicks },
+  nav: props.nav,
   configs,
   themeConfigs: computed(() => configs.themeConfig),
 }))
@@ -53,9 +46,7 @@ provide(injectionSlidevContext, reactive({
 
     <SlideWrapper
       :is="route?.component!"
-      v-model:clicks-elements="clicksElements"
-      :clicks="isClicksDisabled ? undefined : clicks"
-      :clicks-disabled="isClicksDisabled"
+      :clicks-context="clicksContext"
       :class="getSlideClass(route)"
       :route="route"
     />

package/internals/RecordingControls.vue

@@ -5,7 +5,7 @@ import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
 import DevicesList from './DevicesList.vue'
 import MenuButton from './MenuButton.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const {
   recording,
@@ -34,33 +34,29 @@ onMounted(() => {
 </script>
 
 <template>
-  <button
+  <IconButton
     v-if="currentCamera !== 'none'"
-    class="slidev-icon-btn <md:hidden"
+    class="<md:hidden"
     :class="{ 'text-green-500': Boolean(showAvatar && streamCamera) }"
-    title="Show camera view"
+    title="Toggle camera view"
     @click="toggleAvatar"
   >
-    <HiddenText text="Toggle camera view" />
     <carbon:user-avatar />
-  </button>
+  </IconButton>
 
-  <button
-    class="slidev-icon-btn"
+  <IconButton
     :class="{ 'text-red-500': recording }"
-    title="Recording"
+    :title="recording ? 'Stop record video' : 'Record video'"
     @click="toggleRecording"
   >
-    <HiddenText :text="recording ? 'Stop record video' : 'Record video'" />
     <carbon:stop-outline v-if="recording" />
     <carbon:video v-else />
-  </button>
+  </IconButton>
   <MenuButton :disabled="recording">
     <template #button>
-      <button class="slidev-icon-btn h-full !text-sm !px-0">
-        <HiddenText text="Select recording device" />
+      <IconButton title="Select recording device" class="h-full !text-sm !px-0">
         <carbon:chevron-up class="opacity-50" />
-      </button>
+      </IconButton>
     </template>
     <template #menu>
       <DevicesList />

package/internals/SlideWrapper.ts

@@ -1,26 +1,14 @@
-import { useVModel } from '@vueuse/core'
-import { computed, defineComponent, h, provide, ref, toRef } from 'vue'
-import type { RenderContext } from '@slidev/types'
-import { injectionActive, injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionCurrentPage, injectionOrderMap, injectionRenderContext, injectionRoute } from '../constants'
+import { defineComponent, h, provide, ref, toRef } from 'vue'
+import type { PropType } from 'vue'
+import type { ClicksContext, RenderContext } from '@slidev/types'
+import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
 
 export default defineComponent({
   name: 'SlideWrapper',
   props: {
-    clicks: {
-      type: [Number, String],
-      default: 0,
-    },
-    clicksElements: {
-      type: Array,
-      default: () => [] as Element[],
-    },
-    clicksOrderMap: {
-      type: Map,
-      default: () => new Map<number, HTMLElement[]>(),
-    },
-    clicksDisabled: {
-      type: Boolean,
-      default: false,
+    clicksContext: {
+      type: Object as PropType<ClicksContext>,
+      required: true,
     },
     renderContext: {
       type: String,
@@ -39,33 +27,12 @@ export default defineComponent({
       default: undefined,
     },
   },
-  setup(props, { emit }) {
-    const clicks = useVModel(props, 'clicks', emit)
-    const clicksElements = useVModel(props, 'clicksElements', emit)
-    const clicksDisabled = useVModel(props, 'clicksDisabled', emit)
-    const clicksOrderMap = useVModel(props, 'clicksOrderMap', emit)
-
-    clicksElements.value.length = 0
-
-    const clicksWithDisable = computed({
-      get() {
-        if (clicksDisabled.value)
-          return 9999999
-        return +clicks.value
-      },
-      set(value) {
-        clicks.value = value
-      },
-    })
-
+  setup(props) {
     provide(injectionRoute, props.route as any)
     provide(injectionCurrentPage, ref(+props.route?.path))
     provide(injectionRenderContext, ref(props.renderContext as RenderContext))
     provide(injectionActive, toRef(props, 'active'))
-    provide(injectionClicks, clicksWithDisable)
-    provide(injectionClicksDisabled, clicksDisabled)
-    provide(injectionClicksElements, clicksElements as any)
-    provide(injectionOrderMap, clicksOrderMap as any)
+    provide(injectionClicksContext, toRef(props, 'clicksContext'))
   },
   render() {
     if (this.$props.is)

package/internals/SlidesOverview.vue

@@ -5,11 +5,12 @@ import { themeVars } from '../env'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
+import { useFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -138,7 +139,7 @@ watchEffect(() => {
               <SlideWrapper
                 :is="route.component"
                 v-if="route?.component"
-                :clicks-disabled="true"
+                :clicks-context="useFixedClicks(route, 99999)[1]"
                 :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
@@ -162,8 +163,7 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <button v-if="value" class="fixed text-2xl top-4 right-4 slidev-icon-btn text-gray-400" @click="close">
-    <HiddenText text="Close" />
+  <IconButton v-if="value" title="Close" class="fixed text-2xl top-4 right-4 text-gray-400" @click="close">
     <carbon:close />
-  </button>
+  </IconButton>
 </template>

package/internals/SlidesShow.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { TransitionGroup, computed, shallowRef, watch } from 'vue'
-import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes, router, transition } from '../logic/nav'
+import { currentRoute, isPresenter, nextRoute, rawRoutes, transition } from '../logic/nav'
 import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../composables/hmr'
+import { usePrimaryClicks } from '../composables/useClicks'
 import SlideWrapper from './SlideWrapper'
 
 // @ts-expect-error virtual module
@@ -27,12 +28,6 @@ watch(currentRoute, () => {
 
 const hasViewTransition = useViewTransition()
 
-// preserve the clicks count for previous slide to avoid flash on transition
-let previousClicks: [string | undefined, number] = [] as any
-router.beforeEach(() => {
-  previousClicks = [currentRoute.value?.path, clicks.value]
-})
-
 const DrawingLayer = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('./DrawingLayer.vue').then(v => DrawingLayer.value = v.default)
@@ -62,9 +57,7 @@ function onAfterLeave() {
       <SlideWrapper
         :is="route?.component as any"
         v-show="route === currentRoute"
-        :clicks="route === currentRoute ? clicks : route.path === previousClicks[0] ? previousClicks[1] : 0"
-        :clicks-elements="route.meta?.__clicksElements || []"
-        :clicks-disabled="false"
+        :clicks-context="usePrimaryClicks(route)"
         :class="getSlideClass(route)"
         :route="route"
         :render-context="renderContext"

package/logic/nav.ts

@@ -6,19 +6,21 @@ import { timestamp, usePointerSwipe } from '@vueuse/core'
 import { rawRoutes, router } from '../routes'
 import { configs } from '../env'
 import { skipTransition } from '../composables/hmr'
+import { usePrimaryClicks } from '../composables/useClicks'
 import { useRouteQuery } from './route'
 import { isDrawing } from './drawings'
 
 export { rawRoutes, router }
 
 // force update collected elements when the route is fully resolved
-const routeForceRefresh = ref(0)
+export const routeForceRefresh = ref(0)
 nextTick(() => {
   router.afterEach(async () => {
     await nextTick()
     routeForceRefresh.value += 1
   })
 })
+
 export const navDirection = ref(0)
 
 export const route = computed(() => router.currentRoute.value)
@@ -28,11 +30,25 @@ export const isPrintWithClicks = computed(() => route.value.query.print === 'cli
 export const isEmbedded = computed(() => route.value.query.embedded !== undefined)
 export const isPresenter = computed(() => route.value.path.startsWith('/presenter'))
 export const isNotesViewer = computed(() => route.value.path.startsWith('/notes'))
-export const isClicksDisabled = computed(() => isPrintMode.value && !isPrintWithClicks.value)
 export const presenterPassword = computed(() => route.value.query.password)
 export const showPresenter = computed(() => !isPresenter.value && (!configs.remote || presenterPassword.value === configs.remote))
 
-export const queryClicks = useRouteQuery('clicks', '0')
+const queryClicksRaw = useRouteQuery('clicks', '0')
+export const queryClicks = computed({
+  get() {
+    // eslint-disable-next-line ts/no-use-before-define
+    if (clicksContext.value.disabled)
+      return 99999
+    let v = +(queryClicksRaw.value || 0)
+    if (Number.isNaN(v))
+      v = 0
+    return v
+  },
+  set(v) {
+    queryClicksRaw.value = v.toString()
+  },
+})
+
 export const total = computed(() => rawRoutes.length)
 export const path = computed(() => route.value.path)
 
@@ -45,27 +61,9 @@ export const currentLayout = computed(() => currentRoute.value?.meta?.layout ||
 export const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length, currentPage.value + 1)}`))
 export const prevRoute = computed(() => rawRoutes.find(i => i.path === `${Math.max(1, currentPage.value - 1)}`))
 
-export const clicksElements = computed<HTMLElement[]>(() => {
-  // eslint-disable-next-line no-unused-expressions
-  routeForceRefresh.value
-  return currentRoute.value?.meta?.__clicksElements || []
-})
-
-export const clicks = computed<number>({
-  get() {
-    if (isClicksDisabled.value)
-      return 99999
-    let clicks = +(queryClicks.value || 0)
-    if (Number.isNaN(clicks))
-      clicks = 0
-    return clicks
-  },
-  set(v) {
-    queryClicks.value = v.toString()
-  },
-})
-
-export const clicksTotal = computed(() => +(currentRoute.value?.meta?.clicks ?? clicksElements.value.length))
+export const clicksContext = computed(() => usePrimaryClicks(currentRoute.value))
+export const clicks = computed(() => clicksContext.value.current)
+export const clicksTotal = computed(() => clicksContext.value.total)
 
 export const hasNext = computed(() => currentPage.value < rawRoutes.length || clicks.value < clicksTotal.value)
 export const hasPrev = computed(() => currentPage.value > 1 || clicks.value > 0)
@@ -85,27 +83,27 @@ watch(currentRoute, (next, prev) => {
   navDirection.value = Number(next?.path) - Number(prev?.path)
 })
 
-export function next() {
-  if (clicksTotal.value <= clicks.value)
-    nextSlide()
+export async function next() {
+  if (clicksTotal.value <= queryClicks.value)
+    await nextSlide()
   else
-    clicks.value += 1
+    queryClicks.value += 1
 }
 
 export async function prev() {
-  if (clicks.value <= 0)
+  if (queryClicks.value <= 0)
     await prevSlide()
   else
-    clicks.value -= 1
+    queryClicks.value -= 1
 }
 
 export function getPath(no: number | string) {
   return isPresenter.value ? `/presenter/${no}` : `/${no}`
 }
 
-export function nextSlide() {
-  const next = Math.min(rawRoutes.length, currentPage.value + 1)
-  return go(next)
+export async function nextSlide() {
+  if (currentPage.value < rawRoutes.length)
+    await go(currentPage.value + 1)
 }
 
 export async function prevSlide(lastClicks = true) {

package/logic/utils.ts

@@ -30,3 +30,21 @@ export function makeId(length = 5) {
     result.push(characters.charAt(Math.floor(Math.random() * charactersLength)))
   return result.join('')
 }
+
+/**
+ *   '+3' => '+3'
+ *   '-3' => '-3'
+ *    '3' => 3
+ *      3 => 3
+ */
+export function normalizeAtProp(at: string | number = '+1'): [isRelative: boolean, value: number] {
+  let n = +at
+  if (Number.isNaN(n)) {
+    console.warn('[slidev] Invalid click position:', at)
+    n = 0
+  }
+  return [
+    typeof at === 'string' && '+-'.includes(at[0]),
+    n,
+  ]
+}

package/modules/context.ts

@@ -4,21 +4,19 @@ 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 { route } from '../logic/nav'
 import { isDark } from '../logic/dark'
-import { injectionClicks, injectionCurrentPage, injectionSlidevContext } from '../constants'
+import { 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' | 'go'
-export type SlidevContextNavClicksKey = 'clicks' | 'clicksElements' | 'clicksTotal' | 'hasNext' | 'hasPrev'
+export type SlidevContextNavKey = 'path' | 'total' | 'clicksContext' | 'clicks' | 'clicksTotal' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes' | 'go'
 
 export interface SlidevContextNav extends Pick<typeof nav, SlidevContextNavKey> {
   route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>
 }
-export type SlidevContextNavClicks = Pick<typeof nav, SlidevContextNavClicksKey>
 
 export interface SlidevContext {
-  nav: SlidevContextNav & SlidevContextNavClicks
+  nav: SlidevContextNav
   configs: typeof configs
   themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
@@ -26,10 +24,9 @@ export interface SlidevContext {
 export default function createSlidevContext() {
   return {
     install(app: App) {
-      const context = reactive(useContext(route, clicks))
+      const context = reactive(useContext(route))
       app.provide(injectionSlidevContext, context)
       app.provide(injectionCurrentPage, computed(() => context.nav.currentPage))
-      app.provide(injectionClicks, computed(() => context.nav.clicks))
 
       // allows controls from postMessages
       if (__DEV__) {