- 设置页新增「键盘快捷键」分类，可自定义快捷键绑定 - 支持快速滚动（Home/End/PageUp/PageDown）与导航跳转（Ctrl/Cmd+数字） - 快捷键绑定与开关按动作独立持久化，默认关闭 - 新增 ui 包 keybinding 组件与工具（KeybindingModal/KeybindingChips 等）
This commit is contained in:
AxTps committed
1 parent
47bdb1e79c
commit
2e92887eb2
24 files changed
+2432
-5
No files matched your search
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<span class="inline-flex flex-wrap items-center gap-1">
|
||||
<kbd
|
||||
v-for="(part, index) in parts"
|
||||
:key="`${index}-${part}`"
|
||||
aria-hidden="true"
|
||||
class="rounded-md border border-solid border-surface-4 bg-surface-3 px-2 py-0.5 font-mono text-sm text-[var(--color-text-primary)]"
|
||||
>
|
||||
{{ part }}
|
||||
</kbd>
|
||||
<span class="sr-only">{{ text }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useBindingParts, useBindingText } from '../../composables/use-keybinding-labels'
|
||||
import type { KeyBinding } from '../../utils/keybinding'
|
||||
|
||||
const props = defineProps<{ binding: KeyBinding }>()
|
||||
|
||||
const parts = useBindingParts(() => props.binding)
|
||||
const text = useBindingText(() => props.binding)
|
||||
</script>
|
||||
@@ -118,3 +118,4 @@ export { default as TimeFramePicker } from './TimeFramePicker.vue'
|
||||
export { default as Timeline } from './Timeline.vue'
|
||||
export { default as Toggle } from './Toggle.vue'
|
||||
export { default as UnsavedChangesPopup } from './UnsavedChangesPopup.vue'
|
||||
export { default as KeybindingChips } from './KeybindingChips.vue'
|
||||
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div
|
||||
ref="treeRef"
|
||||
role="tree"
|
||||
:aria-label="formatMessage(messages.treeLabel)"
|
||||
class="max-h-[18rem] overflow-y-auto rounded-lg border border-solid border-surface-4 bg-surface-2 p-1"
|
||||
@keydown="handleKeydown"
|
||||
>
|
||||
<div
|
||||
v-for="(row, index) in visibleRows"
|
||||
:key="row.id"
|
||||
:ref="(element) => setRowRef(row.id, element)"
|
||||
role="treeitem"
|
||||
:tabindex="index === activeIndex ? 0 : -1"
|
||||
:aria-level="row.level + 1"
|
||||
:aria-expanded="row.expandable ? row.expanded : undefined"
|
||||
:aria-selected="row.kind === 'item' ? row.selected : undefined"
|
||||
:aria-disabled="row.disabled ? true : undefined"
|
||||
class="flex cursor-pointer items-center gap-2 rounded-md py-2 pr-2 text-sm transition-colors duration-150"
|
||||
:class="[
|
||||
row.disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-surface-3',
|
||||
row.selected
|
||||
? 'bg-brand-highlight text-[var(--color-text-primary)]'
|
||||
: 'text-[var(--color-text-default)]',
|
||||
row.kind === 'item' ? '' : 'font-semibold text-[var(--color-text-primary)]',
|
||||
]"
|
||||
:style="{ paddingLeft: `${row.level * 1.25 + 0.5}rem` }"
|
||||
@click="activateRow(row)"
|
||||
@focus="activeIndex = index"
|
||||
>
|
||||
<ChevronRightIcon
|
||||
v-if="row.expandable"
|
||||
class="h-4 w-4 shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-150"
|
||||
:class="{ 'rotate-90': row.expanded }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span v-else class="w-4 shrink-0" aria-hidden="true" />
|
||||
<span class="min-w-0 flex-1 truncate">{{ row.label }}</span>
|
||||
<span v-if="row.disabledReason" class="shrink-0 text-xs text-[var(--color-text-tertiary)]">
|
||||
{{ row.disabledReason }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ChevronRightIcon } from '@modrinth/assets'
|
||||
import { computed, nextTick, ref } from 'vue'
|
||||
|
||||
import { defineMessages, useVIntl } from '../../composables/i18n'
|
||||
import { type KeyBinding, type KeyBindingDevice, keyCodeLabel } from '../../utils/keybinding'
|
||||
import { KEYBINDING_CATALOG, type KeybindingCatalogItem } from '../../utils/keybinding-catalog'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
/** The combination being assembled, used to mark the chosen input. */
|
||||
binding: KeyBinding | null
|
||||
/** Reasons an input may not be used, keyed by code. */
|
||||
disabledCodes?: Map<string, string>
|
||||
}>(),
|
||||
{ disabledCodes: () => new Map() },
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [{ device: KeyBindingDevice; code: string }]
|
||||
escape: []
|
||||
}>()
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const messages = defineMessages({
|
||||
treeLabel: {
|
||||
id: 'ui.keybinding-modal.tree-label',
|
||||
defaultMessage: 'Inputs a shortcut can use',
|
||||
},
|
||||
})
|
||||
|
||||
interface TreeRow {
|
||||
id: string
|
||||
kind: 'device' | 'group' | 'item'
|
||||
level: number
|
||||
label: string
|
||||
expandable: boolean
|
||||
expanded: boolean
|
||||
selected: boolean
|
||||
disabled: boolean
|
||||
disabledReason?: string
|
||||
item?: KeybindingCatalogItem
|
||||
}
|
||||
|
||||
const expanded = ref(new Set<string>(['keyboard']))
|
||||
const activeIndex = ref(0)
|
||||
const rowRefs = new Map<string, HTMLElement>()
|
||||
|
||||
function groupRowId(deviceId: string, groupId: string) {
|
||||
return `${deviceId}:${groupId}`
|
||||
}
|
||||
|
||||
function itemRowId(deviceId: string, groupId: string, code: string) {
|
||||
return `${deviceId}:${groupId}:${code}`
|
||||
}
|
||||
|
||||
function itemLabel(item: KeybindingCatalogItem) {
|
||||
return item.label ? formatMessage(item.label) : keyCodeLabel(item.code)
|
||||
}
|
||||
|
||||
function itemState(item: KeybindingCatalogItem) {
|
||||
const reason = props.disabledCodes.get(item.code)
|
||||
return { disabled: Boolean(reason), disabledReason: reason }
|
||||
}
|
||||
|
||||
const visibleRows = computed<TreeRow[]>(() => {
|
||||
const rows: TreeRow[] = []
|
||||
|
||||
for (const device of KEYBINDING_CATALOG) {
|
||||
const deviceExpanded = expanded.value.has(device.id)
|
||||
rows.push({
|
||||
id: device.id,
|
||||
kind: 'device',
|
||||
level: 0,
|
||||
label: formatMessage(device.label),
|
||||
expandable: true,
|
||||
expanded: deviceExpanded,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
})
|
||||
if (!deviceExpanded) continue
|
||||
|
||||
for (const group of device.groups) {
|
||||
const rowId = groupRowId(device.id, group.id)
|
||||
const groupExpanded = expanded.value.has(rowId)
|
||||
rows.push({
|
||||
id: rowId,
|
||||
kind: 'group',
|
||||
level: 1,
|
||||
label: formatMessage(group.label),
|
||||
expandable: true,
|
||||
expanded: groupExpanded,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
})
|
||||
if (!groupExpanded) continue
|
||||
|
||||
for (const item of group.items) {
|
||||
const state = itemState(item)
|
||||
rows.push({
|
||||
id: itemRowId(device.id, group.id, item.code),
|
||||
kind: 'item',
|
||||
level: 2,
|
||||
label: itemLabel(item),
|
||||
expandable: false,
|
||||
expanded: false,
|
||||
selected: props.binding?.device === item.device && props.binding?.code === item.code,
|
||||
item,
|
||||
...state,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return rows
|
||||
})
|
||||
|
||||
function setRowRef(id: string, element: unknown) {
|
||||
if (element instanceof HTMLElement) rowRefs.set(id, element)
|
||||
else rowRefs.delete(id)
|
||||
}
|
||||
|
||||
function focusRow(index: number) {
|
||||
const row = visibleRows.value[index]
|
||||
if (!row) return
|
||||
activeIndex.value = index
|
||||
void nextTick(() => rowRefs.get(row.id)?.focus())
|
||||
}
|
||||
|
||||
function toggle(row: TreeRow) {
|
||||
if (!row.expandable) return
|
||||
const next = new Set(expanded.value)
|
||||
if (next.has(row.id)) next.delete(row.id)
|
||||
else next.add(row.id)
|
||||
expanded.value = next
|
||||
|
||||
// Collapsing can leave the active row past the end, which would stop the
|
||||
// keyboard from moving anywhere.
|
||||
const lastIndex = visibleRows.value.length - 1
|
||||
if (activeIndex.value > lastIndex) focusRow(lastIndex)
|
||||
}
|
||||
|
||||
function parentIndexOf(row: TreeRow) {
|
||||
for (let index = visibleRows.value.indexOf(row) - 1; index >= 0; index -= 1) {
|
||||
if (visibleRows.value[index].level < row.level) return index
|
||||
}
|
||||
return -1
|
||||
}
|
||||
|
||||
function activateRow(row: TreeRow) {
|
||||
if (row.kind === 'item') {
|
||||
if (row.disabled || !row.item) return
|
||||
emit('select', { device: row.item.device, code: row.item.code })
|
||||
return
|
||||
}
|
||||
toggle(row)
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
const row = visibleRows.value[activeIndex.value]
|
||||
if (!row) return
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault()
|
||||
focusRow(Math.min(activeIndex.value + 1, visibleRows.value.length - 1))
|
||||
break
|
||||
case 'ArrowUp':
|
||||
event.preventDefault()
|
||||
focusRow(Math.max(activeIndex.value - 1, 0))
|
||||
break
|
||||
case 'ArrowRight':
|
||||
event.preventDefault()
|
||||
if (row.expandable && !row.expanded) toggle(row)
|
||||
else if (row.expandable) focusRow(activeIndex.value + 1)
|
||||
break
|
||||
case 'ArrowLeft': {
|
||||
event.preventDefault()
|
||||
if (row.expandable && row.expanded) {
|
||||
toggle(row)
|
||||
break
|
||||
}
|
||||
const parent = parentIndexOf(row)
|
||||
if (parent !== -1) focusRow(parent)
|
||||
break
|
||||
}
|
||||
case 'Home':
|
||||
event.preventDefault()
|
||||
focusRow(0)
|
||||
break
|
||||
case 'End':
|
||||
event.preventDefault()
|
||||
focusRow(visibleRows.value.length - 1)
|
||||
break
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
event.preventDefault()
|
||||
activateRow(row)
|
||||
break
|
||||
case 'Escape':
|
||||
// Handled here so escape leaves the picker instead of the whole dialog.
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
emit('escape')
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,574 @@
|
||||
<template>
|
||||
<NewModal
|
||||
ref="modal"
|
||||
:header="headerText"
|
||||
max-width="540px"
|
||||
:on-hide="handleModalHide"
|
||||
:close-on-click-outside="false"
|
||||
>
|
||||
<div class="flex min-w-0 flex-col gap-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<span class="text-sm text-[var(--color-text-tertiary)]">{{
|
||||
formatMessage(messages.current)
|
||||
}}</span>
|
||||
<KeybindingChips v-if="props.binding" :binding="props.binding" />
|
||||
<span v-else class="text-sm text-[var(--color-text-tertiary)]">{{
|
||||
formatMessage(messages.unset)
|
||||
}}</span>
|
||||
</div>
|
||||
<Button v-if="canRestoreDefault" type="outlined" size="2xs" @click="restoreDefault"
|
||||
>{{ formatMessage(messages.restoreDefault) }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="phase !== 'tree'"
|
||||
type="button"
|
||||
class="flex min-h-[7rem] cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-4 transition-colors duration-200"
|
||||
:class="
|
||||
phase === 'listening'
|
||||
? 'border-brand bg-brand-highlight'
|
||||
: 'border-surface-4 bg-surface-2 hover:border-brand'
|
||||
"
|
||||
:disabled="phase !== 'idle'"
|
||||
@click="beginListening"
|
||||
>
|
||||
<template v-if="phase === 'listening'">
|
||||
<span class="text-base font-semibold text-[var(--color-text-primary)]">
|
||||
{{ formatMessage(messages.listeningTitle) }}
|
||||
</span>
|
||||
<span v-if="liveParts.length" class="flex flex-wrap items-center justify-center gap-1">
|
||||
<kbd
|
||||
v-for="(part, index) in liveParts"
|
||||
:key="`${index}-${part}`"
|
||||
class="rounded-md border border-solid border-surface-4 bg-surface-3 px-2 py-0.5 font-mono text-sm text-[var(--color-text-primary)]"
|
||||
>
|
||||
{{ part }}
|
||||
</kbd>
|
||||
</span>
|
||||
<span v-else class="text-sm text-[var(--color-text-tertiary)]">
|
||||
{{ formatMessage(messages.listeningHint) }}
|
||||
</span>
|
||||
<span class="block h-1 w-full max-w-[16rem] overflow-hidden rounded-full bg-surface-4">
|
||||
<span
|
||||
:key="captureRun"
|
||||
class="keybinding-capture-bar block h-full rounded-full bg-brand"
|
||||
:style="{ animationDuration: `${props.listenDurationMs}ms` }"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="phase === 'verifying'">
|
||||
<span class="text-base font-semibold text-[var(--color-text-primary)]">
|
||||
{{ formatMessage(verified ? messages.verifiedTitle : messages.verifyingTitle) }}
|
||||
</span>
|
||||
<KeybindingChips v-if="candidate" :binding="candidate" />
|
||||
<span v-if="!verified" class="text-sm text-[var(--color-text-tertiary)]">
|
||||
{{ formatMessage(messages.verifyingHint) }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-base font-semibold text-[var(--color-text-primary)]">
|
||||
{{ formatMessage(messages.captureTitle) }}
|
||||
</span>
|
||||
<span class="text-sm text-[var(--color-text-tertiary)]">{{
|
||||
formatMessage(messages.captureHint)
|
||||
}}</span>
|
||||
</template>
|
||||
</button>
|
||||
|
||||
<template v-else>
|
||||
<div
|
||||
class="flex flex-col gap-2 rounded-xl border border-solid border-surface-4 bg-surface-2 p-3"
|
||||
>
|
||||
<span class="text-sm font-semibold text-[var(--color-text-primary)]">
|
||||
{{ formatMessage(messages.modifiers) }}
|
||||
</span>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button
|
||||
v-for="modifier in modifierOptions"
|
||||
:key="modifier.field"
|
||||
size="2xs"
|
||||
:type="modifierState[modifier.field] ? 'highlight' : 'outlined'"
|
||||
:aria-pressed="modifierState[modifier.field]"
|
||||
@click="modifierState[modifier.field] = !modifierState[modifier.field]"
|
||||
>
|
||||
{{ modifier.label }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<KeybindingChoiceTree
|
||||
:binding="treeBinding"
|
||||
:disabled-codes="treeDisabledCodes"
|
||||
@select="selectTreeInput"
|
||||
@escape="phase = 'idle'"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-1" aria-live="polite">
|
||||
<p v-if="issueText" class="m-0 text-sm text-red">{{ issueText }}</p>
|
||||
<p v-else-if="mismatchText" class="m-0 text-sm text-orange">{{ mismatchText }}</p>
|
||||
<p v-else-if="verified" class="m-0 text-sm text-green">
|
||||
{{ formatMessage(messages.verifiedHint) }}
|
||||
</p>
|
||||
<p v-else-if="nothingCapturedText" class="m-0 text-sm text-[var(--color-text-tertiary)]">
|
||||
{{ nothingCapturedText }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Button v-if="phase === 'tree'" type="outlined" @click="leaveTree"
|
||||
>{{ formatMessage(messages.useCapture) }}
|
||||
</Button>
|
||||
<Button v-else type="outlined" @click="enterTree"
|
||||
>{{ formatMessage(messages.useSpecial) }}
|
||||
</Button>
|
||||
<span v-if="phase === 'tree'" class="text-xs text-[var(--color-text-tertiary)]">
|
||||
{{ formatMessage(messages.specialHint) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #actions>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button type="outlined" @click="cancel">{{ formatMessage(messages.cancel) }}</Button>
|
||||
<Button type="colored" color="brand" :disabled="!canSave" @click="save"
|
||||
>{{ formatMessage(messages.save) }}
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</NewModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
|
||||
|
||||
import { defineMessages, useVIntl } from '../../composables/i18n'
|
||||
import { useKeybindingLabels } from '../../composables/use-keybinding-labels'
|
||||
import {
|
||||
type BindingConflict,
|
||||
bindingFromKeyboardEvent,
|
||||
bindingsEqual,
|
||||
isModifierCode,
|
||||
type KeyBinding,
|
||||
keyCodeLabel,
|
||||
validateBinding,
|
||||
} from '../../utils/keybinding'
|
||||
import { KEYBINDING_CATALOG } from '../../utils/keybinding-catalog'
|
||||
import Button from '../base/buttons/Button.vue'
|
||||
import KeybindingChips from '../base/KeybindingChips.vue'
|
||||
import KeybindingChoiceTree from './KeybindingChoiceTree.vue'
|
||||
import NewModal from './NewModal.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
/** The action being configured, shown in the title. */
|
||||
actionLabel?: string
|
||||
/** The combination the action answers to right now. */
|
||||
binding?: KeyBinding | null
|
||||
/** The combination the action ships with, offered as a way back. */
|
||||
defaultBinding?: KeyBinding | null
|
||||
/** Combinations that belong to something else. */
|
||||
conflicts?: BindingConflict[]
|
||||
/** How long a recording may run before it settles on its own. */
|
||||
listenDurationMs?: number
|
||||
/** How long after the last key is released a recording settles. */
|
||||
settleMs?: number
|
||||
}>(),
|
||||
{
|
||||
actionLabel: undefined,
|
||||
binding: null,
|
||||
defaultBinding: null,
|
||||
conflicts: () => [],
|
||||
listenDurationMs: 5000,
|
||||
settleMs: 700,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
save: [binding: KeyBinding]
|
||||
cancel: []
|
||||
}>()
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const labels = useKeybindingLabels()
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'ui.keybinding-modal.title', defaultMessage: 'Set a shortcut' },
|
||||
titleFor: {
|
||||
id: 'ui.keybinding-modal.title-for',
|
||||
defaultMessage: 'Shortcut for {action}',
|
||||
},
|
||||
current: { id: 'ui.keybinding-modal.current', defaultMessage: 'Current shortcut' },
|
||||
unset: { id: 'ui.keybinding-modal.unset', defaultMessage: 'Not set' },
|
||||
restoreDefault: {
|
||||
id: 'ui.keybinding-modal.restore-default',
|
||||
defaultMessage: 'Restore default',
|
||||
},
|
||||
captureTitle: {
|
||||
id: 'ui.keybinding-modal.capture-title',
|
||||
defaultMessage: 'Click here to record',
|
||||
},
|
||||
captureHint: {
|
||||
id: 'ui.keybinding-modal.capture-hint',
|
||||
defaultMessage: 'Then press the keys you want this shortcut to use.',
|
||||
},
|
||||
listeningTitle: {
|
||||
id: 'ui.keybinding-modal.listening-title',
|
||||
defaultMessage: 'Listening\u2026',
|
||||
},
|
||||
listeningHint: {
|
||||
id: 'ui.keybinding-modal.listening-hint',
|
||||
defaultMessage: 'Press the keys you want to use.',
|
||||
},
|
||||
verifyingTitle: {
|
||||
id: 'ui.keybinding-modal.verifying-title',
|
||||
defaultMessage: 'Press it again to confirm',
|
||||
},
|
||||
verifyingHint: {
|
||||
id: 'ui.keybinding-modal.verifying-hint',
|
||||
defaultMessage: 'This checks the combination was recorded correctly.',
|
||||
},
|
||||
verifiedTitle: {
|
||||
id: 'ui.keybinding-modal.verified-title',
|
||||
defaultMessage: 'Confirmed',
|
||||
},
|
||||
verifiedHint: {
|
||||
id: 'ui.keybinding-modal.verified-hint',
|
||||
defaultMessage: 'Confirmed. Save to use this shortcut.',
|
||||
},
|
||||
issueConflict: {
|
||||
id: 'ui.keybinding-modal.issue-conflict',
|
||||
defaultMessage: 'Already used by {label}.',
|
||||
},
|
||||
issueReserved: {
|
||||
id: 'ui.keybinding-modal.issue-reserved',
|
||||
defaultMessage: '{label} is reserved by the launcher.',
|
||||
},
|
||||
issueNeedsModifier: {
|
||||
id: 'ui.keybinding-modal.issue-needs-modifier',
|
||||
defaultMessage: 'Hold Ctrl/Cmd, Alt or Shift as well, or pick a function or navigation key.',
|
||||
},
|
||||
mismatch: {
|
||||
id: 'ui.keybinding-modal.mismatch',
|
||||
defaultMessage: 'That was a different combination, so recording started again.',
|
||||
},
|
||||
nothingCaptured: {
|
||||
id: 'ui.keybinding-modal.nothing-captured',
|
||||
defaultMessage: 'No key was recorded.',
|
||||
},
|
||||
useSpecial: {
|
||||
id: 'ui.keybinding-modal.use-special',
|
||||
defaultMessage: 'Pick an input another way',
|
||||
},
|
||||
useCapture: {
|
||||
id: 'ui.keybinding-modal.use-capture',
|
||||
defaultMessage: 'Record a combination instead',
|
||||
},
|
||||
specialHint: {
|
||||
id: 'ui.keybinding-modal.special-hint',
|
||||
defaultMessage: 'Mouse buttons, the wheel and combinations with them can only be picked here.',
|
||||
},
|
||||
modifiers: { id: 'ui.keybinding-modal.modifiers', defaultMessage: 'Modifiers' },
|
||||
save: { id: 'ui.keybinding-modal.save', defaultMessage: 'Save' },
|
||||
cancel: { id: 'ui.keybinding-modal.cancel', defaultMessage: 'Cancel' },
|
||||
})
|
||||
|
||||
type Phase = 'idle' | 'listening' | 'verifying' | 'tree'
|
||||
|
||||
const modal = ref<InstanceType<typeof NewModal>>()
|
||||
const phase = ref<Phase>('idle')
|
||||
const candidate = ref<KeyBinding | null>(null)
|
||||
const livePressed = ref<KeyBinding | null>(null)
|
||||
const captured = ref<KeyBinding | null>(null)
|
||||
const mismatch = ref<KeyBinding | null>(null)
|
||||
const nothingCaptured = ref(false)
|
||||
const verified = ref(false)
|
||||
const captureRun = ref(0)
|
||||
const treeInput = ref<{ device: KeyBinding['device']; code: string } | null>(null)
|
||||
const modifierState = reactive({ mod: false, shift: false, alt: false })
|
||||
|
||||
let listenTimer: number | undefined
|
||||
let settleTimer: number | undefined
|
||||
|
||||
const headerText = computed(() =>
|
||||
props.actionLabel
|
||||
? formatMessage(messages.titleFor, { action: props.actionLabel })
|
||||
: formatMessage(messages.title),
|
||||
)
|
||||
|
||||
const modifierOptions = computed(() => [
|
||||
{ field: 'mod' as const, label: labels.value.mod },
|
||||
{ field: 'alt' as const, label: labels.value.alt },
|
||||
{ field: 'shift' as const, label: labels.value.shift },
|
||||
])
|
||||
|
||||
const liveParts = computed(() => {
|
||||
const pressed = livePressed.value
|
||||
if (!pressed) return []
|
||||
const parts: string[] = []
|
||||
if (pressed.mod) parts.push(labels.value.mod)
|
||||
if (pressed.alt) parts.push(labels.value.alt)
|
||||
if (pressed.shift) parts.push(labels.value.shift)
|
||||
if (!isModifierCode(pressed.code)) parts.push(keyCodeLabel(pressed.code))
|
||||
return parts
|
||||
})
|
||||
|
||||
const treeBinding = computed<KeyBinding | null>(() =>
|
||||
treeInput.value ? { ...treeInput.value, ...modifierState } : null,
|
||||
)
|
||||
|
||||
const proposed = computed(() => (phase.value === 'tree' ? treeBinding.value : candidate.value))
|
||||
|
||||
const canRestoreDefault = computed(
|
||||
() =>
|
||||
Boolean(props.defaultBinding) &&
|
||||
(!props.binding || !bindingsEqual(props.binding, props.defaultBinding as KeyBinding)),
|
||||
)
|
||||
|
||||
const issue = computed(() =>
|
||||
proposed.value ? validateBinding(proposed.value, props.conflicts) : null,
|
||||
)
|
||||
|
||||
const issueText = computed(() => {
|
||||
const value = issue.value
|
||||
if (!value) return null
|
||||
if (value.kind === 'needs-modifier') return formatMessage(messages.issueNeedsModifier)
|
||||
return formatMessage(value.reserved ? messages.issueReserved : messages.issueConflict, {
|
||||
label: value.label,
|
||||
})
|
||||
})
|
||||
|
||||
const mismatchText = computed(() => (mismatch.value ? formatMessage(messages.mismatch) : null))
|
||||
const nothingCapturedText = computed(() =>
|
||||
nothingCaptured.value ? formatMessage(messages.nothingCaptured) : null,
|
||||
)
|
||||
|
||||
const isVerified = computed(() => phase.value === 'tree' || verified.value)
|
||||
const canSave = computed(() => Boolean(proposed.value) && !issue.value && isVerified.value)
|
||||
|
||||
/** Inputs the picker must refuse, keyed by code, with the reason to show. */
|
||||
const treeDisabledCodes = computed(() => {
|
||||
const disabled = new Map<string, string>()
|
||||
for (const device of KEYBINDING_CATALOG) {
|
||||
for (const group of device.groups) {
|
||||
for (const item of group.items) {
|
||||
const found = validateBinding(
|
||||
{ device: item.device, code: item.code, ...modifierState },
|
||||
props.conflicts,
|
||||
)
|
||||
if (found?.kind === 'conflict') {
|
||||
disabled.set(
|
||||
item.code,
|
||||
formatMessage(found.reserved ? messages.issueReserved : messages.issueConflict, {
|
||||
label: found.label,
|
||||
}),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return disabled
|
||||
})
|
||||
|
||||
function clearTimers() {
|
||||
window.clearTimeout(listenTimer)
|
||||
window.clearTimeout(settleTimer)
|
||||
listenTimer = undefined
|
||||
settleTimer = undefined
|
||||
}
|
||||
|
||||
function beginListening() {
|
||||
clearTimers()
|
||||
candidate.value = null
|
||||
livePressed.value = null
|
||||
captured.value = null
|
||||
nothingCaptured.value = false
|
||||
verified.value = false
|
||||
captureRun.value += 1
|
||||
phase.value = 'listening'
|
||||
listenTimer = window.setTimeout(finishListening, props.listenDurationMs)
|
||||
}
|
||||
|
||||
function finishListening() {
|
||||
clearTimers()
|
||||
if (!captured.value) {
|
||||
nothingCaptured.value = true
|
||||
phase.value = 'idle'
|
||||
return
|
||||
}
|
||||
candidate.value = captured.value
|
||||
mismatch.value = null
|
||||
verified.value = false
|
||||
phase.value = 'verifying'
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
// Leaving the recording is a step back, not closing the dialog.
|
||||
event.preventDefault()
|
||||
// Immediate: the dialog's own escape handler sits on the same node.
|
||||
event.stopImmediatePropagation()
|
||||
clearTimers()
|
||||
phase.value = 'idle'
|
||||
return
|
||||
}
|
||||
|
||||
if (phase.value === 'listening') {
|
||||
event.preventDefault()
|
||||
event.stopImmediatePropagation()
|
||||
livePressed.value = {
|
||||
device: 'keyboard',
|
||||
code: event.code,
|
||||
mod: event.ctrlKey || event.metaKey,
|
||||
shift: event.shiftKey,
|
||||
alt: event.altKey,
|
||||
}
|
||||
const combination = bindingFromKeyboardEvent(event)
|
||||
if (combination) {
|
||||
captured.value = combination
|
||||
window.clearTimeout(settleTimer)
|
||||
settleTimer = undefined
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (phase.value === 'verifying') {
|
||||
event.preventDefault()
|
||||
event.stopImmediatePropagation()
|
||||
const attempt = bindingFromKeyboardEvent(event)
|
||||
if (!attempt || !candidate.value) return
|
||||
if (bindingsEqual(attempt, candidate.value)) {
|
||||
verified.value = true
|
||||
mismatch.value = null
|
||||
return
|
||||
}
|
||||
mismatch.value = attempt
|
||||
beginListening()
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyup(event: KeyboardEvent) {
|
||||
if (phase.value !== 'listening') return
|
||||
event.stopPropagation()
|
||||
const stillHeld = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey
|
||||
if (stillHeld || !captured.value) return
|
||||
// Nothing is held any more, so the combination is as complete as it gets.
|
||||
window.clearTimeout(settleTimer)
|
||||
settleTimer = window.setTimeout(finishListening, props.settleMs)
|
||||
}
|
||||
|
||||
function attachListeners() {
|
||||
window.addEventListener('keydown', handleKeydown, true)
|
||||
window.addEventListener('keyup', handleKeyup, true)
|
||||
}
|
||||
|
||||
function detachListeners() {
|
||||
window.removeEventListener('keydown', handleKeydown, true)
|
||||
window.removeEventListener('keyup', handleKeyup, true)
|
||||
}
|
||||
|
||||
watch(phase, (value) => {
|
||||
if (value === 'listening' || value === 'verifying') attachListeners()
|
||||
else detachListeners()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimers()
|
||||
detachListeners()
|
||||
})
|
||||
|
||||
function enterTree() {
|
||||
const source = candidate.value ?? props.binding
|
||||
modifierState.mod = source?.mod ?? false
|
||||
modifierState.alt = source?.alt ?? false
|
||||
modifierState.shift = source?.shift ?? false
|
||||
treeInput.value = source ? { device: source.device, code: source.code } : null
|
||||
phase.value = 'tree'
|
||||
}
|
||||
|
||||
function leaveTree() {
|
||||
treeInput.value = null
|
||||
phase.value = 'idle'
|
||||
}
|
||||
|
||||
function selectTreeInput(input: { device: KeyBinding['device']; code: string }) {
|
||||
treeInput.value = input
|
||||
}
|
||||
|
||||
function restoreDefault() {
|
||||
if (!props.defaultBinding) return
|
||||
candidate.value = props.defaultBinding
|
||||
mismatch.value = null
|
||||
nothingCaptured.value = false
|
||||
verified.value = true
|
||||
phase.value = 'verifying'
|
||||
}
|
||||
|
||||
function reset() {
|
||||
clearTimers()
|
||||
phase.value = 'idle'
|
||||
candidate.value = null
|
||||
livePressed.value = null
|
||||
captured.value = null
|
||||
mismatch.value = null
|
||||
nothingCaptured.value = false
|
||||
verified.value = false
|
||||
treeInput.value = null
|
||||
modifierState.mod = false
|
||||
modifierState.alt = false
|
||||
modifierState.shift = false
|
||||
}
|
||||
|
||||
function handleModalHide() {
|
||||
reset()
|
||||
}
|
||||
|
||||
function show() {
|
||||
reset()
|
||||
modal.value?.show()
|
||||
}
|
||||
|
||||
function hide() {
|
||||
modal.value?.hide()
|
||||
}
|
||||
|
||||
function save() {
|
||||
const value = proposed.value
|
||||
if (!value || !canSave.value) return
|
||||
emit('save', value)
|
||||
modal.value?.hide()
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
emit('cancel')
|
||||
modal.value?.hide()
|
||||
}
|
||||
|
||||
defineExpose({ show, hide })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes keybinding-capture-drain {
|
||||
from {
|
||||
width: 100%;
|
||||
}
|
||||
to {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.keybinding-capture-bar {
|
||||
animation-name: keybinding-capture-drain;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.keybinding-capture-bar {
|
||||
animation: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,3 +8,4 @@ export { default as ShareModal } from './ShareModal.vue'
|
||||
export type { Tab as TabbedModalTab } from './TabbedModal.vue'
|
||||
export { default as TabbedModal } from './TabbedModal.vue'
|
||||
export { default as UploadProgressModal } from './UploadProgressModal.vue'
|
||||
export { default as KeybindingModal } from './KeybindingModal.vue'
|
||||
Reference in new issue
Block a user