48 lines
1 KiB
Vue
48 lines
1 KiB
Vue
<template>
|
|
<u-modal
|
|
title="Confirmation"
|
|
description="Confirmation required for the selected action"
|
|
:dismissible="false"
|
|
>
|
|
<template #body>
|
|
<p class="my-3">
|
|
Type <strong>{{ message }}</strong> to confirm.
|
|
</p>
|
|
|
|
<div>
|
|
<u-field-group class="w-full">
|
|
<u-input
|
|
v-model="inputMessage"
|
|
name="user-input"
|
|
autocomplete="false"
|
|
type="text"
|
|
class="w-full"
|
|
/>
|
|
<u-button color="error" :disabled="!matched" @click="onSubmit">
|
|
Submit
|
|
</u-button>
|
|
</u-field-group>
|
|
</div>
|
|
</template>
|
|
</u-modal>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { UModal, UInput, UButton } from "#components";
|
|
|
|
interface Props {
|
|
message: string;
|
|
}
|
|
const props = defineProps<Props>();
|
|
|
|
const emit = defineEmits<{ close: [boolean] }>();
|
|
|
|
const inputMessage = ref("");
|
|
|
|
const matched = computed(() => {
|
|
return inputMessage.value === props.message;
|
|
});
|
|
|
|
function onSubmit() {
|
|
emit("close", true);
|
|
}
|
|
</script>
|