63 lines
2.0 KiB
Vue
63 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
/* The member's "request sent" confirmation, in ConfirmModal's shape: teleported
|
|
overlay, dismissed by the backdrop or its one button (Esc is left to the
|
|
caller, which orders its popups). It says the save went to the admins as a
|
|
proposal — and dismissing it is what walks out of the editor, so a sent
|
|
draft never sits there waiting to be submitted a second time. */
|
|
const props = defineProps<{
|
|
open: boolean
|
|
/* a request for a page the wiki does not have yet says different words */
|
|
creating?: boolean
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
/* the wording lives here rather than in withDefaults static defaults so it
|
|
follows the interface language as it changes */
|
|
const titleText = computed(() => t('editor.proposalSentTitle'))
|
|
const messageText = computed(() =>
|
|
props.creating ? t('editor.proposalSentCreate') : t('editor.proposalSent')
|
|
)
|
|
const doneText = computed(() => t('common.done'))
|
|
|
|
const emit = defineEmits<{ close: [] }>()
|
|
|
|
const doneButtonEl = ref<HTMLButtonElement | null>(null)
|
|
|
|
/* land on the one button when the popup opens, so Enter always means
|
|
"seen it" — the way out of the editor */
|
|
watch(
|
|
() => props.open,
|
|
async (isOpen) => {
|
|
if (!isOpen) return
|
|
await nextTick()
|
|
doneButtonEl.value?.focus()
|
|
},
|
|
{ flush: 'post' }
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<Transition name="confirm-popup">
|
|
<div v-if="open" class="confirm-overlay" @click.self="emit('close')">
|
|
<div class="confirm-modal" role="dialog" aria-modal="true" :aria-label="titleText">
|
|
<div class="sent-check" aria-hidden="true">✓</div>
|
|
<h2 class="confirm-title">{{ titleText }}</h2>
|
|
<p class="confirm-message">{{ messageText }}</p>
|
|
<div class="confirm-actions">
|
|
<button
|
|
ref="doneButtonEl"
|
|
type="button"
|
|
class="btn btn-primary"
|
|
@click="emit('close')"
|
|
>
|
|
{{ doneText }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|