112 lines
3.0 KiB
Vue
112 lines
3.0 KiB
Vue
<script setup>
|
|
import { computed, ref, watch } from 'vue';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/Components/ui/dialog';
|
|
import { Button } from '@/Components/ui/button';
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
|
import { faCircleQuestion, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, default: false },
|
|
title: { type: String, default: 'Potrditev' },
|
|
message: { type: String, default: 'Ali ste prepričani?' },
|
|
confirmText: { type: String, default: 'Potrdi' },
|
|
cancelText: { type: String, default: 'Prekliči' },
|
|
processing: { type: Boolean, default: false },
|
|
maxWidth: { type: String, default: 'md' },
|
|
variant: {
|
|
type: String,
|
|
default: 'default', // 'default' or 'success'
|
|
validator: (v) => ['default', 'success'].includes(v)
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update:show', 'close', 'confirm']);
|
|
|
|
const open = ref(props.show);
|
|
|
|
watch(() => props.show, (newVal) => {
|
|
open.value = newVal;
|
|
});
|
|
|
|
watch(open, (newVal) => {
|
|
emit('update:show', newVal);
|
|
if (!newVal) {
|
|
emit('close');
|
|
}
|
|
});
|
|
|
|
const onClose = () => {
|
|
open.value = false;
|
|
};
|
|
|
|
const onConfirm = () => {
|
|
emit('confirm');
|
|
};
|
|
|
|
const icon = computed(() => props.variant === 'success' ? faCheckCircle : faCircleQuestion);
|
|
const iconColor = computed(() => props.variant === 'success' ? 'text-green-600' : 'text-primary-600');
|
|
const iconBg = computed(() => props.variant === 'success' ? 'bg-green-100' : 'bg-primary-100');
|
|
|
|
const maxWidthClass = computed(() => {
|
|
const maxWidthMap = {
|
|
sm: 'sm:max-w-sm',
|
|
md: 'sm:max-w-md',
|
|
lg: 'sm:max-w-lg',
|
|
xl: 'sm:max-w-xl',
|
|
'2xl': 'sm:max-w-2xl',
|
|
wide: 'sm:max-w-[1200px]',
|
|
};
|
|
return maxWidthMap[props.maxWidth] || 'sm:max-w-md';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:open="open">
|
|
<DialogContent :class="maxWidthClass">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
<div class="flex items-center gap-2">
|
|
<FontAwesomeIcon :icon="icon" :class="['h-5 w-5', iconColor]" />
|
|
<span>{{ title }}</span>
|
|
</div>
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
<div class="flex items-start gap-4 pt-4">
|
|
<div class="flex-shrink-0">
|
|
<div :class="['flex items-center justify-center h-12 w-12 rounded-full', iconBg]">
|
|
<FontAwesomeIcon :icon="icon" :class="['h-6 w-6', iconColor]" />
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-sm text-gray-700">
|
|
{{ message }}
|
|
</p>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" @click="onClose" :disabled="processing">
|
|
{{ cancelText }}
|
|
</Button>
|
|
<Button
|
|
@click="onConfirm"
|
|
:disabled="processing"
|
|
>
|
|
{{ confirmText }}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|
|
|