forked from noxious/client
67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import Modal from '@/components/utilities/Modal.vue'
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
confirmHeader: {
|
|
type: String,
|
|
default: 'Are you sure?'
|
|
},
|
|
confirmFunction: {
|
|
type: Function
|
|
},
|
|
cancelFunction: {
|
|
type: Function
|
|
},
|
|
cancelButtonText: {
|
|
type: String,
|
|
default: 'Cancel'
|
|
},
|
|
confirmButtonText: {
|
|
type: String,
|
|
default: 'Confirm'
|
|
},
|
|
modalOpened: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => props.modalOpened,
|
|
(val) => {
|
|
modalOpened.value = val
|
|
}
|
|
)
|
|
|
|
const modalOpened = ref(props.modalOpened)
|
|
</script>
|
|
|
|
<template>
|
|
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
|
|
<template #modalHeader>
|
|
<div class="text-white">
|
|
<slot name="modalHeader"></slot>
|
|
</div>
|
|
</template>
|
|
<template #modalBody>
|
|
<div class="text-white h-full">
|
|
<div class="flex h-full flex-col justify-between">
|
|
<span class="p-2">
|
|
<slot name="modalBody"></slot>
|
|
</span>
|
|
<div class="flex justify-between p-2">
|
|
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
|
|
{{ props.cancelButtonText }}
|
|
</button>
|
|
|
|
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
|
|
{{ props.confirmButtonText }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</template>
|