perf: add shortcut `esc` for close modal dialog (#235)

This commit is contained in:
Lykin 2024-04-19 15:09:02 +08:00
parent 974477cb49
commit b72855b707
15 changed files with 36 additions and 27 deletions

View File

@ -178,8 +178,8 @@ const onListLimitChanged = (limit) => {
<n-form-item :label="$t('slog.limit')">
<n-input-number
v-model:value="data.listLimit"
:min="1"
:max="9999"
:min="1"
style="width: 120px"
@update:value="onListLimitChanged" />
</n-form-item>

View File

@ -197,7 +197,6 @@ const onClose = () => {
<n-modal
v-model:show="dialogStore.addFieldsDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:negative-button-props="{ size: 'medium' }"
:negative-text="$t('common.cancel')"
@ -205,9 +204,11 @@ const onClose = () => {
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="title ? $t(title) : ''"
close-on-esc
preset="dialog"
style="width: 600px"
transform-origin="center"
@esc="onClose"
@positive-click="onAdd"
@negative-click="onClose">
<n-scrollbar style="max-height: 500px">

View File

@ -329,14 +329,15 @@ const pasteFromClipboard = async () => {
<n-modal
v-model:show="dialogStore.connDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:on-after-leave="resetForm"
:show-icon="false"
:title="isEditMode ? $t('dialogue.connection.edit_title') : $t('dialogue.connection.new_title')"
close-on-esc
preset="dialog"
style="width: 600px"
transform-origin="center">
transform-origin="center"
@esc="onClose">
<n-spin :show="closingConnection">
<n-tabs
v-model:value="tab"

View File

@ -75,7 +75,6 @@ const onClose = () => {}
<n-modal
v-model:show="dialogStore.decodeDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:negative-button-props="{ focusable: false, size: 'medium' }"
:negative-text="$t('common.cancel')"
@ -83,8 +82,10 @@ const onClose = () => {}
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="editName ? $t('dialogue.decoder.edit_name') : $t('dialogue.decoder.name')"
close-on-esc
preset="dialog"
transform-origin="center"
@esc="onClose"
@positive-click="onAddOrUpdate"
@negative-click="onClose">
<n-form :model="decoderForm" :show-require-mark="false" label-align="left" label-placement="top">

View File

@ -93,12 +93,13 @@ const onClose = () => {
<n-modal
v-model:show="dialogStore.deleteKeyDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:show-icon="false"
:title="$t('interface.batch_delete_key')"
close-on-esc
preset="dialog"
transform-origin="center">
transform-origin="center"
@esc="onClose">
<n-spin :show="loading">
<n-form :model="deleteForm" :show-require-mark="false" label-placement="top">
<n-grid :x-gap="10">

View File

@ -64,12 +64,13 @@ const onClose = () => {
<n-modal
v-model:show="dialogStore.exportKeyDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:show-icon="false"
:title="$t('dialogue.export.name')"
close-on-esc
preset="dialog"
transform-origin="center">
transform-origin="center"
@esc="onClose">
<n-spin :show="loading">
<n-form :model="exportKeyForm" :show-require-mark="false" label-placement="top">
<n-grid :x-gap="10">

View File

@ -54,12 +54,13 @@ const onClose = () => {
<n-modal
v-model:show="dialogStore.flushDBDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:show-icon="false"
:title="$t('interface.flush_db')"
close-on-esc
preset="dialog"
transform-origin="center">
transform-origin="center"
@esc="onClose">
<n-spin :show="loading">
<n-form :model="flushForm" :show-require-mark="false" label-placement="top">
<n-form-item :label="$t('dialogue.key.server')">

View File

@ -89,7 +89,6 @@ const onClose = () => {
<n-modal
v-model:show="dialogStore.groupDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:negative-button-props="{ size: 'medium' }"
:negative-text="$t('common.cancel')"
@ -97,8 +96,10 @@ const onClose = () => {
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="isRenameMode ? $t('dialogue.group.rename') : $t('dialogue.group.new')"
close-on-esc
preset="dialog"
transform-origin="center"
@esc="onClose"
@positive-click="onConfirm"
@negative-click="onClose">
<n-form

View File

@ -103,12 +103,13 @@ const onClose = () => {
<n-modal
v-model:show="dialogStore.importKeyDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:show-icon="false"
:title="$t('dialogue.import.name')"
close-on-esc
preset="dialog"
transform-origin="center">
transform-origin="center"
@esc="onClose">
<n-spin :show="loading">
<n-form :model="importKeyForm" :show-require-mark="false" label-placement="top">
<n-grid :x-gap="10">

View File

@ -47,7 +47,6 @@ const onClose = () => {
<n-modal
v-model:show="dialogStore.keyFilterDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:negative-button-props="{ size: 'medium' }"
:negative-text="$t('common.cancel')"
@ -55,9 +54,11 @@ const onClose = () => {
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="$t('dialogue.filter.set_key_filter')"
close-on-esc
preset="dialog"
style="width: 450px"
transform-origin="center"
@esc="onClose"
@positive-click="onConfirm"
@negative-click="onClose">
<n-form

View File

@ -191,13 +191,14 @@ const onImport = () => {
<n-modal
v-model:show="dialogStore.newKeyDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:show-icon="false"
:title="$t('dialogue.key.new')"
close-on-esc
preset="dialog"
style="width: 600px"
transform-origin="center">
transform-origin="center"
@esc="onClose">
<n-scrollbar ref="scrollRef" style="max-height: 500px">
<n-form
ref="newFormRef"

View File

@ -192,13 +192,14 @@ const onClose = () => {
v-model:show="dialogStore.preferencesDialogVisible"
:auto-focus="false"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:show-icon="false"
:title="$t('preferences.name')"
close-on-esc
preset="dialog"
style="width: 640px"
transform-origin="center">
transform-origin="center"
@esc="onClose">
<!-- FIXME: set loading will slow down appear animation of dialog in linux -->
<!-- <n-spin :show="loading"> -->
<n-tabs

View File

@ -53,7 +53,6 @@ const onClose = () => {
<n-modal
v-model:show="dialogStore.renameDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:negative-button-props="{ focusable: false, size: 'medium' }"
:negative-text="$t('common.cancel')"
@ -61,8 +60,10 @@ const onClose = () => {
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="$t('interface.rename_key')"
close-on-esc
preset="dialog"
transform-origin="center"
@esc="onClose"
@positive-click="onRename"
@negative-click="onClose">
<n-form

View File

@ -93,7 +93,6 @@ const onConfirm = async () => {
<n-modal
v-model:show="dialogStore.ttlDialogVisible"
:closable="false"
:close-on-esc="false"
:mask-closable="false"
:negative-button-props="{ focusable: false, size: 'medium' }"
:negative-text="$t('common.cancel')"
@ -103,8 +102,10 @@ const onConfirm = async () => {
:positive-text="$t('common.save')"
:show-icon="false"
:title="title"
close-on-esc
preset="dialog"
transform-origin="center">
transform-origin="center"
@esc="onClose">
<n-form :model="ttlForm" :show-require-mark="false" label-placement="top">
<n-form-item v-if="!isBatchAction" :label="$t('common.key')">
<n-input :value="ttlForm.key" readonly />

View File

@ -204,11 +204,7 @@ const exThemeVars = computed(() => {
</div>
<!-- wechat official modal -->
<n-modal
:show="showWechat"
transform-origin="center"
@close="showWechat = false"
@mask-click="showWechat = false">
<n-modal v-model:show="showWechat" close-on-esc mask-closable transform-origin="center">
<n-image :src="wechatUrl" :width="400" preview-disabled />
</n-modal>
</div>