perf: cancel focus for all button components
This commit is contained in:
parent
3b368b5a1c
commit
0de32407c7
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -204,7 +204,7 @@ const useTabStore = defineStore('tab', {
|
|||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* set selected keys of current display browser tree
|
||||
* @param {string} server
|
||||
* @param {string|string[]} keys
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue