fix: double click operation in clicks slider (#1356)

slidevjs · Feb 29, 2024 · b56cbfe · b56cbfe
1 parent 886bfe8
commit b56cbfe
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/packages/client/composables/useClicks.ts b/packages/client/composables/useClicks.ts
@@ -66,7 +66,7 @@ function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): C
 export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksContext {
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
-  const thisPath = +(route?.path ?? CLICKS_MAX)
+  const thisPath = +(route?.path ?? Number.NaN)
   const current = computed({
     get() {
       const currentPath = +(currentRoute.value?.path ?? Number.NaN)
@@ -81,8 +81,10 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
     },
     set(v) {
       const currentPath = +(currentRoute.value?.path ?? Number.NaN)
-      if (currentPath === thisPath)
-        queryClicks.value = v
+      if (currentPath === thisPath) {
+        // eslint-disable-next-line ts/no-use-before-define
+        queryClicks.value = Math.min(v, context.total)
+      }
     },
   })
   const context = useClicksContextBase(

diff --git a/packages/client/internals/ClicksSlider.vue b/packages/client/internals/ClicksSlider.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ClicksContext } from '@slidev/types'
 import { computed } from 'vue'
-import { CLICKS_MAX } from '../constants'
 
 const props = defineProps<{
   clicksContext: ClicksContext
@@ -34,15 +33,13 @@ function onMousedown() {
   >
     <div class="flex gap-1 items-center min-w-16">
       <carbon:cursor-1 text-sm op50 />
-      <template v-if="current <= total && current >= 0">
-        <span text-primary>{{ current }}</span>
-        <span op50>/</span>
-      </template>
+      <span text-primary>{{ current }}</span>
+      <span op50>/</span>
       <span op50>{{ total }}</span>
     </div>
     <div
       relative flex-auto h5 flex="~"
-      @dblclick="current = CLICKS_MAX"
+      @dblclick="current = 999999"
     >
       <div
         v-for="i of range" :key="i"
@@ -71,6 +68,7 @@ function onMousedown() {
         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>