@slidev/client 0.48.1 → 0.48.2

package/composables/useClicks.ts

@@ -68,6 +68,7 @@ export function createClicksContextBase(
 export function createFixedClicks(
   route?: SlideRoute | undefined,
   currentInit = 0,
+  isDisabled?: () => boolean,
 ): ClicksContext {
-  return createClicksContextBase(ref(currentInit), route?.meta?.clicks)
+  return createClicksContextBase(ref(currentInit), route?.meta?.clicks, isDisabled)
 }

package/composables/useNav.ts

@@ -170,15 +170,19 @@ export function useNavBase(
     return go(total.value)
   }
 
-  async function go(page: number | string, clicks?: number) {
+  async function go(page: number | string, clicks: number = 0) {
     skipTransition.value = false
-    await router?.push({
-      path: getSlidePath(page, isPresenter.value),
-      query: {
-        ...router.currentRoute.value.query,
-        clicks: clicks || undefined,
-      },
-    })
+    const pageChanged = currentSlideNo.value !== page
+    const clicksChanged = clicks !== queryClicks.value
+    if (pageChanged || clicksChanged) {
+      await router?.push({
+        path: getSlidePath(page, isPresenter.value),
+        query: {
+          ...router.currentRoute.value.query,
+          clicks: clicks === 0 ? undefined : clicks.toString(),
+        },
+      })
+    }
   }
 
   return {

package/composables/useViewTransition.ts

@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { getSlide } from '../logic/slides'
+import { configs } from '../env'
 
 export function useViewTransition() {
   const router = useRouter()
@@ -16,14 +17,9 @@ export function useViewTransition() {
     const toMeta = getSlide(to.params.no as string)?.meta
     const fromNo = fromMeta?.slide?.no
     const toNo = toMeta?.slide?.no
-    if (
-      !(
-        fromNo !== undefined && toNo !== undefined && (
-          (fromMeta?.transition === 'view-transition' && fromNo < toNo)
-          || (toMeta?.transition === 'view-transition' && toNo < fromNo)
-        )
-      )
-    ) {
+    const transitionType = fromNo != null && toNo != null
+      && ((fromNo < toNo ? fromMeta?.transition : toMeta?.transition) ?? configs.transition)
+    if (transitionType !== 'view-transition') {
       isViewTransition.value = false
       return
     }
@@ -43,17 +39,15 @@ export function useViewTransition() {
     let changeRoute: () => void
     const ready = new Promise<void>(resolve => (changeRoute = resolve))
 
-    // eslint-disable-next-line ts/ban-ts-comment
-    // @ts-expect-error
-    const transition = document.startViewTransition(() => {
-      changeRoute()
-      return promise
-    })
+    // Wait for `TransitionGroup` to become normal `div`
+    setTimeout(() => {
+      // @ts-expect-error missing types
+      document.startViewTransition(() => {
+        changeRoute()
+        return promise
+      })
+    }, 50)
 
-    transition.finished.then(() => {
-      viewTransitionAbort = undefined
-      viewTransitionFinish = undefined
-    })
     return ready
   })
 

package/internals/ClicksSlider.vue

@@ -28,21 +28,21 @@ function onMousedown() {
 
 <template>
   <div
-    class="flex gap-0.5 items-center select-none"
+    class="flex gap-1 items-center select-none"
     :title="`Clicks in this slide: ${total}`"
     :class="total ? '' : 'op50'"
   >
-    <div class="flex gap-1 items-center min-w-16 tabular-nums">
+    <div class="flex gap-0.5 items-center min-w-16 font-mono mr1">
       <carbon:cursor-1 text-sm op50 />
+      <div flex-auto />
       <template v-if="current >= 0 && current !== CLICKS_MAX">
-        <div flex-auto />
         <span text-primary>{{ current }}</span>
         <span op25>/</span>
       </template>
       <span op50>{{ total }}</span>
     </div>
     <div
-      relative flex-auto h5 flex="~"
+      relative flex-auto h5 font-mono flex="~"
       @dblclick="current = clicksContext.total"
     >
       <div
@@ -54,7 +54,7 @@ function onMousedown() {
         ]"
         :style="{ width: total > 0 ? `${1 / total * 100}%` : '100%' }"
       >
-        <div absolute inset-0 :class="i <= current ? 'bg-primary op20' : ''" />
+        <div absolute inset-0 :class="i <= current ? 'bg-primary op15' : ''" />
         <div
           :class="[
             +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',

package/internals/PrintSlide.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { SlideRoute } from '@slidev/types'
-import { useFixedNav } from '../composables/useNav'
+import { useFixedNav, useNav } from '../composables/useNav'
 import { createFixedClicks } from '../composables/useClicks'
 import PrintSlideClick from './PrintSlideClick.vue'
 
 const { route } = defineProps<{ route: SlideRoute }>()
-const clicks0 = createFixedClicks(route, 0)
+const { isPrintWithClicks } = useNav()
+const clicks0 = createFixedClicks(route, 0, () => !isPrintWithClicks.value)
 </script>
 
 <template>

package/logic/route.ts

@@ -22,6 +22,9 @@ export function useRouteQuery<T extends string | string[]>(
     },
     set(v) {
       nextTick(() => {
+        const oldValue = router.currentRoute.value.query[name]
+        if ((oldValue ?? defaultValue?.toString()) === v.toString())
+          return
         router[unref(mode) as 'replace' | 'push']({
           query: {
             ...router.currentRoute.value.query,
@@ -30,7 +33,7 @@ export function useRouteQuery<T extends string | string[]>(
         })
       })
     },
-  }) as any
+  })
 }
 
 // force update collected elements when the route is fully resolved

package/logic/transition.ts

@@ -9,7 +9,7 @@ const transitionResolveMap: Record<string, string | undefined> = {
   'slide-down': 'slide-down | slide-up',
 }
 
-export function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
+function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
   if (!transition)
     return undefined
   if (typeof transition === 'string') {

package/modules/v-mark.ts

@@ -116,7 +116,8 @@ export function createVMarkDirective() {
 
           const resolvedClick = resolveClick(el, binding, options.value.at)
           if (!resolvedClick) {
-            console.error('[Slidev] Invalid value for v-mark:', options.value.at)
+            // No click animation, just show the mark
+            annotation.show()
             return
           }
 
@@ -130,19 +131,12 @@ export function createVMarkDirective() {
 
             const at = options.value.at
 
-            if (at === true) {
+            if (at === true)
               shouldShow = true
-            }
-            else if (at === false) {
+            else if (at === false)
               shouldShow = false
-            }
-            else if (resolvedClick) {
+            else
               shouldShow = resolvedClick.isActive.value
-            }
-            else {
-              console.error('[Slidev] Invalid value for v-mark:', at)
-              return
-            }
 
             if (shouldShow == null)
               return

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.1",
+  "version": "0.48.2",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -60,8 +60,8 @@
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.1",
-    "@slidev/types": "0.48.1"
+    "@slidev/parser": "0.48.2",
+    "@slidev/types": "0.48.2"
   },
   "devDependencies": {
     "vite": "^5.1.5"

package/pages/overview.vue

@@ -100,37 +100,42 @@ onMounted(() => {
 
 <template>
   <div class="h-screen w-screen of-hidden flex">
-    <nav class="h-full flex flex-col border-r border-main p2 select-none">
-      <div class="flex flex-col flex-auto items-center justify-center group gap-1">
-        <div
-          v-for="(route, idx) of slides"
-          :key="route.no"
-          class="relative"
-        >
-          <button
-            class="relative transition duration-300 w-8 h-8 rounded hover:bg-active hover:op100"
-            :class="activeBlocks.includes(idx) ? 'op100 text-primary bg-gray:5' : 'op20'"
-            @click="scrollToSlide(idx)"
-          >
-            <div>{{ idx + 1 }}</div>
-          </button>
+    <nav class="grid grid-rows-[auto_max-content] border-r border-main select-none max-h-full h-full">
+      <div class="relative">
+        <div class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p2 gap-1 max-h-full of-scroll" style="direction:rtl">
           <div
-            v-if="route.meta?.slide?.title"
-            class="pointer-events-none select-none absolute left-110% bg-main top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
-            :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
+            v-for="(route, idx) of slides"
+            :key="route.no"
+            class="relative"
+            style="direction:ltr"
           >
-            {{ route.meta?.slide?.title }}
+            <button
+              class="relative transition duration-300 w-8 h-8 rounded hover:bg-active hover:op100"
+              :class="activeBlocks.includes(idx) ? 'op100 text-primary bg-gray:5' : 'op20'"
+              @click="scrollToSlide(idx)"
+            >
+              <div>{{ idx + 1 }}</div>
+            </button>
+            <div
+              v-if="route.meta?.slide?.title"
+              class="pointer-events-none select-none absolute left-110% backdrop-blur-8 top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
+              :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
+            >
+              {{ route.meta?.slide?.title }}
+            </div>
           </div>
         </div>
       </div>
-      <IconButton
-        v-if="!isColorSchemaConfigured"
-        :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
-        @click="toggleDark()"
-      >
-        <carbon-moon v-if="isDark" />
-        <carbon-sun v-else />
-      </IconButton>
+      <div p2 border="t main">
+        <IconButton
+          v-if="!isColorSchemaConfigured"
+          :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
+          @click="toggleDark()"
+        >
+          <carbon-moon v-if="isDark" />
+          <carbon-sun v-else />
+        </IconButton>
+      </div>
     </nav>
     <main
       class="flex-1 h-full of-auto"