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,111 @@
+<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>
+