feat: goto dialog

antfu · antfu · commit 200bcff0dc1b · 2021-05-03T17:05:32.000+08:00
diff --git a/packages/client/internals/Goto.vue b/packages/client/internals/Goto.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
-import { nextTick, ref } from 'vue'
-import { go } from '../logic/nav'
+import { computed, nextTick, ref } from 'vue'
+import { go, total } from '../logic/nav'
 import { showGotoDialog } from '../state'
 
 const input = ref<HTMLInputElement>()
-const num = ref('')
+const text = ref('')
+const num = computed(() => +text.value)
+const valid = computed(() => !isNaN(num.value) && num.value > 0 && num.value <= total.value)
 
 function goTo() {
-  const n = +num.value
-  if (!isNaN(n))
-    go(n - 1)
+  if (valid.value)
+    go(num.value)
   close()
 }
 
@@ -19,7 +20,7 @@ function close() {
 }
 
 whenever(showGotoDialog, async() => {
-  num.value = ''
+  text.value = ''
   await nextTick()
   input.value?.focus()
 })
@@ -35,11 +36,12 @@ whenever(showGotoDialog, async() => {
   >
     <input
       ref="input"
-      v-model="num"
+      v-model="text"
       type="number"
       :disabled="!showGotoDialog"
       class="outline-none bg-transparent"
       placeholder="Goto..."
+      :class="{ 'text-red-400': !valid && text }"
       @keydown.enter="goTo"
       @keydown.escape="close"
       @blur="close"
diff --git a/packages/client/logic/shortcuts.ts b/packages/client/logic/shortcuts.ts
@@ -6,7 +6,7 @@ import { next, nextSlide, prev, prevSlide } from './nav'
 const _shortcut = and(not(isInputing), shortcutsEnabled)
 
 export function shortcut(key: string, fn: Fn) {
-  return whenever(and(magicKeys[key], _shortcut), fn)
+  return whenever(and(magicKeys[key], _shortcut), fn, { flush: 'sync' })
 }
 
 export function registerShotcuts() {

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { next, nextSlide, prev, prevSlide } from './nav'`
`6`	`6`	`const _shortcut = and(not(isInputing), shortcutsEnabled)`
`7`	`7`
`8`	`8`	`export function shortcut(key: string, fn: Fn) {`
`9`		`- return whenever(and(magicKeys[key], _shortcut), fn)`
	`9`	`+ return whenever(and(magicKeys[key], _shortcut), fn, { flush: 'sync' })`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`export function registerShotcuts() {`