100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<script setup>
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/Components/ui/dialog";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";
|
|
import { computed, ref, watch, nextTick } from "vue";
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, default: false },
|
|
title: { type: String, default: "Ustvari novo" },
|
|
maxWidth: { type: String, default: "2xl" },
|
|
confirmText: { type: String, default: "Ustvari" },
|
|
cancelText: { type: String, default: "Prekliči" },
|
|
processing: { type: Boolean, default: false },
|
|
disabled: { type: Boolean, default: false },
|
|
});
|
|
|
|
const emit = defineEmits(["update:show", "close", "confirm"]);
|
|
|
|
const open = ref(props.show);
|
|
|
|
watch(
|
|
() => props.show,
|
|
(newVal) => {
|
|
open.value = newVal;
|
|
if (newVal) {
|
|
// Emit custom event when dialog opens
|
|
nextTick(() => {
|
|
window.dispatchEvent(new CustomEvent("dialog:open"));
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
watch(open, (newVal) => {
|
|
emit("update:show", newVal);
|
|
if (!newVal) {
|
|
emit("close");
|
|
}
|
|
});
|
|
|
|
const onClose = () => {
|
|
open.value = false;
|
|
};
|
|
|
|
const onConfirm = () => {
|
|
emit("confirm");
|
|
};
|
|
|
|
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-2xl";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:open="open">
|
|
<DialogContent :class="maxWidthClass">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
<div class="flex items-center gap-2">
|
|
<FontAwesomeIcon :icon="faPlusCircle" class="h-5 w-5 text-primary" />
|
|
<span>{{ title }}</span>
|
|
</div>
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
<slot name="description" />
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div class="py-4">
|
|
<slot />
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" @click="onClose" :disabled="processing">
|
|
{{ cancelText }}
|
|
</Button>
|
|
<Button @click="onConfirm" :disabled="processing || disabled">
|
|
{{ confirmText }}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|