Changes to dev branch

resources/js/Components/Dialogs/UpdateDialog.vue

@@ -6,40 +6,43 @@ import {
   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';
+} 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' },
+  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 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(
+  () => 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);
+  emit("update:show", newVal);
   if (!newVal) {
-    emit('close');
+    emit("close");
   }
 });
 
@@ -48,19 +51,19 @@ const onClose = () => {
 };
 
 const onConfirm = () => {
-  emit('confirm');
+  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]',
+    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';
+  return maxWidthMap[props.maxWidth] || "sm:max-w-2xl";
 });
 </script>
 
@@ -70,7 +73,7 @@ const maxWidthClass = computed(() => {
       <DialogHeader>
         <DialogTitle>
           <div class="flex items-center gap-2">
-            <FontAwesomeIcon :icon="faPenToSquare" class="h-5 w-5 text-primary-600" />
+            <FontAwesomeIcon :icon="faPenToSquare" class="h-5 w-5 text-primary" />
             <span>{{ title }}</span>
           </div>
         </DialogTitle>
@@ -87,14 +90,10 @@ const maxWidthClass = computed(() => {
         <Button variant="outline" @click="onClose" :disabled="processing">
           {{ cancelText }}
         </Button>
-        <Button
-          @click="onConfirm"
-          :disabled="processing || disabled"
-        >
+        <Button @click="onConfirm" :disabled="processing || disabled">
           {{ confirmText }}
         </Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>
 </template>
-