forked from geolba/tethys.backend
70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
|
<script setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { mdiClose } from '@mdi/js'
|
||
|
|
import BaseButton from '@/Components/BaseButton.vue'
|
||
|
|
import BaseButtons from '@/Components/BaseButtons.vue'
|
||
|
|
import CardBox from '@/Components/CardBox.vue'
|
||
|
|
import OverlayLayer from '@/Components/OverlayLayer.vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
largeTitle: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
button: {
|
||
|
|
type: String,
|
||
|
|
default: 'info'
|
||
|
|
},
|
||
|
|
buttonLabel: {
|
||
|
|
type: String,
|
||
|
|
default: 'Done'
|
||
|
|
},
|
||
|
|
hasCancel: Boolean,
|
||
|
|
modelValue: {
|
||
|
|
type: [String, Number, Boolean],
|
||
|
|
default: null
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:modelValue', 'cancel', 'confirm'])
|
||
|
|
|
||
|
|
const value = computed({
|
||
|
|
get: () => props.modelValue,
|
||
|
|
set: value => emit('update:modelValue', value)
|
||
|
|
})
|
||
|
|
|
||
|
|
const confirmCancel = (mode) => {
|
||
|
|
value.value = false;
|
||
|
|
emit(mode);
|
||
|
|
}
|
||
|
|
|
||
|
|
const confirm = () => confirmCancel('confirm')
|
||
|
|
|
||
|
|
const cancel = () => confirmCancel('cancel')
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<OverlayLayer v-show="value" @overlay-click="cancel">
|
||
|
|
<CardBox v-show="value" :title="title" class="shadow-lg max-h-modal w-11/12 md:w-3/5 lg:w-2/5 xl:w-4/12 z-50"
|
||
|
|
:header-icon="mdiClose" modal @header-icon-click="cancel">
|
||
|
|
<div class="space-y-3">
|
||
|
|
<h1 v-if="largeTitle" class="text-2xl">
|
||
|
|
{{ largeTitle }}
|
||
|
|
</h1>
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<BaseButtons>
|
||
|
|
<BaseButton :label="buttonLabel" :color="button" @click="confirm" />
|
||
|
|
<BaseButton v-if="hasCancel" label="Cancel" :color="button" outline @click="cancel" />
|
||
|
|
</BaseButtons>
|
||
|
|
</template>
|
||
|
|
</CardBox>
|
||
|
|
</OverlayLayer>
|
||
|
|
</template>
|