diff --git a/packages/client/composables/useClicks.ts b/packages/client/composables/useClicks.ts index c1ea1d415e..902c9d6e8c 100644 --- a/packages/client/composables/useClicks.ts +++ b/packages/client/composables/useClicks.ts @@ -6,7 +6,7 @@ import type { RouteRecordRaw } from 'vue-router' import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav' import { normalizeAtProp } from '../logic/utils' -function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: () => number): ClicksContext { +function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number): ClicksContext { const relativeOffsets: ClicksContext['relativeOffsets'] = new Map() const map: ClicksContext['map'] = shallowReactive(new Map()) @@ -53,7 +53,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)) }, } @@ -63,21 +63,24 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte 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 context = useClicksContextBase( + () => { + const currentPath = +(currentRoute.value?.path ?? 99999) + if (currentPath === thisPath) + return queryClicks.value + else if (currentPath > thisPath) + return 99999 + else + return 0 + }, + route?.meta?.clicks, + ) if (route?.meta) route.meta.__clicksContext = context return context } -export function useFixedClicks(route: RouteRecordRaw | undefined, currentInit = 0): [Ref, ClicksContext] { +export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): [Ref, ClicksContext] { const current = ref(currentInit) - return [current, useClicksContextBase(route, () => current.value)] + return [current, useClicksContextBase(() => current.value, route?.meta?.clicks)] } diff --git a/packages/client/context.ts b/packages/client/context.ts index 8e1215db15..0674d40158 100644 --- a/packages/client/context.ts +++ b/packages/client/context.ts @@ -1,5 +1,6 @@ -import { toRef } from 'vue' +import { ref, shallowRef, toRef } from 'vue' import { injectLocal, objectOmit, provideLocal } from '@vueuse/core' +import { useFixedClicks } from './composables/useClicks' import { FRONTMATTER_FIELDS, HEADMATTER_FIELDS, @@ -16,11 +17,11 @@ import { export function useSlidevContext() { const $slidev = injectLocal(injectionSlidevContext)! const $nav = toRef($slidev, 'nav') - const $clicksContext = injectLocal(injectionClicksContext)!.value + const $clicksContext = injectLocal(injectionClicksContext, shallowRef(useFixedClicks()[1]))!.value const $clicks = toRef($clicksContext, 'current') const $page = injectLocal(injectionCurrentPage)! - const $renderContext = injectLocal(injectionRenderContext)! - const $frontmatter = injectLocal(injectionFrontmatter) || {} + const $renderContext = injectLocal(injectionRenderContext, ref('slide')) + const $frontmatter = injectLocal(injectionFrontmatter, {}) return { $slidev, diff --git a/packages/client/internals/SlideWrapper.ts b/packages/client/internals/SlideWrapper.ts index 108a32393a..f1f513d0e5 100644 --- a/packages/client/internals/SlideWrapper.ts +++ b/packages/client/internals/SlideWrapper.ts @@ -1,5 +1,6 @@ -import { computed, defineComponent, h, provide, ref, toRef } from 'vue' +import { computed, defineComponent, h, ref, toRef } from 'vue' import type { PropType } from 'vue' +import { provideLocal } from '@vueuse/core' import type { ClicksContext, RenderContext } from '@slidev/types' import type { RouteRecordRaw } from 'vue-router' import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants' @@ -29,11 +30,11 @@ export default defineComponent({ }, }, setup(props) { - provide(injectionRoute, props.route) - provide(injectionCurrentPage, ref(+props.route.path)) - provide(injectionRenderContext, ref(props.renderContext as RenderContext)) - provide(injectionActive, toRef(props, 'active')) - provide(injectionClicksContext, toRef(props, 'clicksContext')) + provideLocal(injectionRoute, props.route) + provideLocal(injectionCurrentPage, ref(+props.route.path)) + provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext)) + provideLocal(injectionActive, toRef(props, 'active')) + provideLocal(injectionClicksContext, toRef(props, 'clicksContext')) const style = computed(() => { const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1