70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<template>
|
|
<div v-if="show" class="z-50 fixed inset-0 flex justify-center bg-black/30 overflow-auto py-5">
|
|
<div class="flex flex-col bg-base-100 min-w-[300px] w-[400px] max-w-[90%] rounded-md p-5 shadow-xl my-auto">
|
|
<div class="inline-block">
|
|
<div class="flex gap-2">
|
|
<div class="font-bold text-lg truncate flex-1 w-0">{{ title }}</div>
|
|
<button v-if="hideButtons" class="btn btn-sm w-8 h-8 rounded-full" @click="modalAction(false)">
|
|
<i class="bi bi-x-lg" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grow mt-3">
|
|
<slot>
|
|
<div v-html="text" />
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!hideButtons" class="flex justify-end mt-3">
|
|
<div class="join">
|
|
<button class="btn btn-sm bg-base-300 hover:bg-base-300/50 join-item" @click="modalAction(false)">
|
|
{{ t('cancel') }}
|
|
</button>
|
|
<button class="btn btn-sm bg-base-300 hover:bg-base-300/50 join-item" @click="modalAction(true)">
|
|
{{ t('ok') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
const { t } = useI18n()
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
modalAction: {
|
|
type: Function,
|
|
default() {
|
|
return ''
|
|
},
|
|
},
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
hideButtons: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
useHead({
|
|
bodyAttrs: {
|
|
class: computed(() => {
|
|
if (props.show) return 'overflow-hidden'
|
|
|
|
return ''
|
|
}),
|
|
},
|
|
})
|
|
</script>
|