Dev branch

2025-11-02 12:31:01 +01:00
parent 5f879c9436
commit 63e0958b66
241 changed files with 17686 additions and 7327 deletions
@@ -0,0 +1,104 @@
+<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 { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: 'Opozorilo' },
+  message: { type: String, default: 'Prosimo, bodite pozorni.' },
+  confirmText: { type: String, default: 'Razumem' },
+  cancelText: { type: String, default: 'Prekliči' },
+  processing: { type: Boolean, default: false },
+  maxWidth: { type: String, default: 'md' },
+  showCancel: { type: Boolean, default: true },
+});
+
+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 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="faTriangleExclamation" class="h-5 w-5 text-amber-600" />
+            <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 bg-amber-100">
+                <FontAwesomeIcon :icon="faTriangleExclamation" class="h-6 w-6 text-amber-600" />
+              </div>
+            </div>
+            <div class="flex-1">
+              <p class="text-sm text-gray-700">
+                {{ message }}
+              </p>
+              <slot />
+            </div>
+          </div>
+        </DialogDescription>
+      </DialogHeader>
+
+      <DialogFooter>
+        <Button v-if="showCancel" variant="outline" @click="onClose" :disabled="processing">
+          {{ cancelText }}
+        </Button>
+        <Button
+          @click="onConfirm"
+          :disabled="processing"
+          class="bg-amber-600 hover:bg-amber-700 focus:ring-amber-500"
+        >
+          {{ confirmText }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+