perf: cancel focus for all button components

This commit is contained in:
tiny-craft 2023-09-06 16:07:20 +08:00
parent 3b368b5a1c
commit 0de32407c7
18 changed files with 40 additions and 47 deletions

View File

@ -133,7 +133,11 @@ watch(
</div>
<!-- content -->
<div id="app-content" :style="prefStore.generalFont" class="flex-box-h flex-item-expand">
<div
id="app-content"
:style="prefStore.generalFont"
style="--wails-draggable: none"
class="flex-box-h flex-item-expand">
<nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
<!-- browser page-->
<div v-show="tabStore.nav === 'browser'" :class="{ dragging }" class="flex-box-h flex-item-expand">

View File

@ -32,7 +32,7 @@ const hasTooltip = computed(() => {
<template>
<n-tooltip v-if="hasTooltip">
<template #trigger>
<n-button :disabled="disabled" :text="!border" @click.prevent="emit('click')">
<n-button :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
<n-icon :color="props.color" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon>
@ -40,7 +40,7 @@ const hasTooltip = computed(() => {
</template>
{{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
</n-tooltip>
<n-button v-else :disabled="disabled" :text="!border" @click.prevent="emit('click')">
<n-button v-else :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
<n-icon :color="props.color" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon>

View File

@ -1,14 +0,0 @@
<script></script>
<template>
<div class="app-toolbar flex-box-h">
<n-button>按钮1</n-button>
<n-button>按钮2</n-button>
</div>
</template>
<style lang="scss" scoped>
.app-toolbar {
align-items: center;
}
</style>

View File

@ -140,7 +140,7 @@ const onReloadKey = async () => {
<div v-else-if="showNonexists" class="content-container flex-item-expand flex-box-v">
<n-empty :description="$t('nonexist_tab_content')" class="empty-content">
<template #extra>
<n-button @click="onReloadKey">{{ $t('reload') }}</n-button>
<n-button :focusable="false" @click="onReloadKey">{{ $t('reload') }}</n-button>
</template>
</n-empty>
</div>

View File

@ -10,7 +10,7 @@ const dialogStore = useDialogStore()
<!-- TODO: replace icon to app icon -->
<n-empty :description="$t('empty_server_content')">
<template #extra>
<n-button @click="dialogStore.openNewDialog()">
<n-button :focusable="false" @click="dialogStore.openNewDialog()">
<template #icon>
<n-icon :component="AddLink" size="18" />
</template>

View File

@ -74,7 +74,7 @@ const onDeleteKey = () => {
<n-button-group>
<n-tooltip>
<template #trigger>
<n-button @click="dialogStore.openTTLDialog(props.ttl)">
<n-button :focusable="false" @click="dialogStore.openTTLDialog(props.ttl)">
<template #icon>
<n-icon :component="Timer" size="18" />
</template>
@ -92,12 +92,6 @@ const onDeleteKey = () => {
size="18"
t-tooltip="rename_key"
@click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)" />
<!-- <n-button @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)">-->
<!-- <template #icon>-->
<!-- <n-icon :component="Edit" size="18" />-->
<!-- </template>-->
<!-- {{ $t('rename_key') }}-->
<!-- </n-button>-->
</n-button-group>
<n-tooltip>
<template #trigger>

View File

@ -258,7 +258,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
</n-input-group>
</div>
<div class="flex-item-expand"></div>
<n-button plain @click="onAddRow">
<n-button plain :focusable="false" @click="onAddRow">
<template #icon>
<n-icon :component="AddLink" size="18" />
</template>

View File

@ -182,7 +182,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
@update:value="onFilterInput" />
</div>
<div class="flex-item-expand"></div>
<n-button plain @click="onAddValue">
<n-button plain :focusable="false" @click="onAddValue">
<template #icon>
<n-icon :component="AddLink" size="18" />
</template>

View File

@ -178,7 +178,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
@update:value="onFilterInput" />
</div>
<div class="flex-item-expand"></div>
<n-button plain @click="onAddValue">
<n-button plain :focusable="false" @click="onAddValue">
<template #icon>
<n-icon :component="AddLink" size="18" />
</template>

View File

@ -171,7 +171,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
</n-input-group>
</div>
<div class="flex-item-expand"></div>
<n-button plain @click="onAddRow">
<n-button plain :focusable="false" @click="onAddRow">
<template #icon>
<n-icon :component="AddLink" size="18" />
</template>

View File

@ -173,13 +173,13 @@ const onSaveValue = async () => {
<n-select v-model:value="viewAs" :options="viewOption" style="width: 200px" />
<div class="flex-item-expand"></div>
<n-button-group v-if="!inEdit">
<n-button @click="onCopyValue">
<n-button :focusable="false" @click="onCopyValue">
<template #icon>
<n-icon :component="Copy" size="18" />
</template>
{{ $t('copy_value') }}
</n-button>
<n-button plain @click="onEditValue">
<n-button plain :focusable="false" @click="onEditValue">
<template #icon>
<n-icon :component="Edit" size="18" />
</template>
@ -187,13 +187,13 @@ const onSaveValue = async () => {
</n-button>
</n-button-group>
<n-button-group v-else>
<n-button :loading="saving" plain @click="onSaveValue">
<n-button :loading="saving" :focusable="false" plain @click="onSaveValue">
<template #icon>
<n-icon :component="Save" size="18" />
</template>
{{ $t('save_update') }}
</n-button>
<n-button :loading="saving" plain @click="onCancelEdit">
<n-button :loading="saving" :focusable="false" plain @click="onCancelEdit">
<template #icon>
<n-icon :component="Close" size="18" />
</template>

View File

@ -289,7 +289,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
</n-input-group>
</div>
<div class="flex-item-expand"></div>
<n-button plain @click="onAddRow">
<n-button plain :focusable="false" @click="onAddRow">
<template #icon>
<n-icon :component="AddLink" size="18" />
</template>

View File

@ -249,13 +249,15 @@ const onClose = () => {
<template #action>
<div class="flex-item-expand">
<n-button :disabled="closingConnection" :loading="testing" @click="onTestConnection">
<n-button :focusable="false" :disabled="closingConnection" :loading="testing" @click="onTestConnection">
{{ $t('conn_test') }}
</n-button>
</div>
<div class="flex-item n-dialog__action">
<n-button :disabled="closingConnection" @click="onClose">{{ $t('cancel') }}</n-button>
<n-button :disabled="closingConnection" type="primary" @click="onSaveConnection">
<n-button :focusable="false" :disabled="closingConnection" @click="onClose">
{{ $t('cancel') }}
</n-button>
<n-button :focusable="false" :disabled="closingConnection" type="primary" @click="onSaveConnection">
{{ isEditMode ? $t('update') : $t('confirm') }}
</n-button>
</div>

View File

@ -99,11 +99,16 @@ const onClose = () => {
<template #action>
<div class="flex-item n-dialog__action">
<n-button @click="onClose">{{ $t('cancel') }}</n-button>
<n-button v-if="!deleteForm.showAffected" type="primary" @click="scanAffectedKey">
<n-button :focusable="false" @click="onClose">{{ $t('cancel') }}</n-button>
<n-button v-if="!deleteForm.showAffected" type="primary" :focusable="false" @click="scanAffectedKey">
{{ $t('show_affected_key') }}
</n-button>
<n-button v-else :disabled="isEmpty(deleteForm.affectedKeys)" type="error" @click="onConfirmDelete">
<n-button
v-else
:focusable="false"
:disabled="isEmpty(deleteForm.affectedKeys)"
type="error"
@click="onConfirmDelete">
{{ $t('confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }}
</n-button>
</div>

View File

@ -91,7 +91,7 @@ const onClose = () => {
</template>
<div class="text-block">{{ $t('filter_pattern_tip') }}</div>
</n-tooltip>
<n-button secondary type="primary" @click="filterForm.pattern = '*'">
<n-button secondary type="primary" :focusable="false" @click="filterForm.pattern = '*'">
{{ $t('restore_defaults') }}
</n-button>
</n-input-group>

View File

@ -178,7 +178,9 @@ const onClose = () => {
{{ $t('second') }}
</template>
</n-input-number>
<n-button secondary type="primary" @click="newForm.ttl = -1">{{ $t('persist_key') }}</n-button>
<n-button secondary type="primary" :focusable="false" @click="newForm.ttl = -1">
{{ $t('persist_key') }}
</n-button>
</n-input-group>
</n-form-item>
<component :is="addValueComponent[newForm.type]" ref="subFormRef" v-model:value="newForm.value" />

View File

@ -91,11 +91,11 @@ const onConfirm = async () => {
<template #action>
<div class="flex-item-expand">
<n-button @click="ttlForm.ttl = -1">{{ $t('persist_key') }}</n-button>
<n-button :focusable="false" @click="ttlForm.ttl = -1">{{ $t('persist_key') }}</n-button>
</div>
<div class="flex-item n-dialog__action">
<n-button @click="onClose">{{ $t('cancel') }}</n-button>
<n-button type="primary" @click="onConfirm">{{ $t('save') }}</n-button>
<n-button :focusable="false" @click="onClose">{{ $t('cancel') }}</n-button>
<n-button type="primary" :focusable="false" @click="onConfirm">{{ $t('save') }}</n-button>
</div>
</template>
</n-modal>

View File

@ -204,7 +204,7 @@ const useTabStore = defineStore('tab', {
},
/**
*
* set selected keys of current display browser tree
* @param {string} server
* @param {string|string[]} keys
*/