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,100 @@
+<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 { faPenToSquare } 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: 'Uredi' },
+  maxWidth: { type: String, default: '2xl' },
+  confirmText: { type: String, default: 'Shrani' },
+  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="faPenToSquare" class="h-5 w-5 text-primary-600" />
+            <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>
+