Arno Kaimbacher
cd66f318b6
- add NotificationToast for messages - add leaflet map component and zoom control component - change focus:ring to focus:ring-2 inside BaseButton - `@tailwindcss/line-clamp` plugin is now included by default...remove it from tailwind.config.js - npm updates
86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
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,
|
|
},
|
|
deleteId: {
|
|
type: Number,
|
|
default: null
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue', 'cancel', 'confirm']);
|
|
|
|
const value = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value),
|
|
});
|
|
|
|
// mode = cancel or confirm
|
|
const confirmCancel = (mode) => {
|
|
value.value = false;//close
|
|
if (props.deleteId){
|
|
emit(mode, props.deleteId);
|
|
} else {
|
|
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>
|