diff options
Diffstat (limited to 'packages/frontend/src/components/MkDialog.vue')
| -rw-r--r-- | packages/frontend/src/components/MkDialog.vue | 36 |
1 files changed, 17 insertions, 19 deletions
diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue index c40ebfe10f..825c1d0513 100644 --- a/packages/frontend/src/components/MkDialog.vue +++ b/packages/frontend/src/components/MkDialog.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkModal ref="modal" :preferType="'dialog'" :zPriority="'high'" @click="done(true)" @closed="emit('closed')"> +<MkModal ref="modal" :preferType="'dialog'" :zPriority="'high'" @click="done(true)" @closed="emit('closed')" @esc="cancel()"> <div :class="$style.root"> <div v-if="icon" :class="$style.icon"> <i :class="icon"></i> @@ -36,7 +36,12 @@ SPDX-License-Identifier: AGPL-3.0-only </MkInput> <MkSelect v-if="select" v-model="selectedValue" autofocus> <template v-if="select.items"> - <option v-for="item in select.items" :value="item.value">{{ item.text }}</option> + <template v-for="item in select.items"> + <optgroup v-if="'sectionTitle' in item" :label="item.sectionTitle"> + <option v-for="subItem in item.items" :value="subItem.value">{{ subItem.text }}</option> + </optgroup> + <option v-else :value="item.value">{{ item.text }}</option> + </template> </template> </MkSelect> <div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons"> @@ -51,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onBeforeUnmount, onMounted, ref, shallowRef, computed } from 'vue'; +import { ref, shallowRef, computed } from 'vue'; import MkModal from '@/components/MkModal.vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; @@ -67,11 +72,16 @@ type Input = { maxLength?: number; }; +type SelectItem = { + value: any; + text: string; +}; + type Select = { - items: { - value: any; - text: string; - }[]; + items: (SelectItem | { + sectionTitle: string; + items: SelectItem[]; + })[]; default: string | null; }; @@ -156,10 +166,6 @@ function onBgClick() { if (props.cancelableByBgClick) cancel(); } */ -function onKeydown(evt: KeyboardEvent) { - if (evt.key === 'Escape') cancel(); -} - function onInputKeydown(evt: KeyboardEvent) { if (evt.key === 'Enter' && okButtonDisabledReason.value === null) { evt.preventDefault(); @@ -167,14 +173,6 @@ function onInputKeydown(evt: KeyboardEvent) { ok(); } } - -onMounted(() => { - document.addEventListener('keydown', onKeydown); -}); - -onBeforeUnmount(() => { - document.removeEventListener('keydown', onKeydown); -}); </script> <style lang="scss" module> |