feat(KAN-20): unify dialogs feedback and protect ticket drafts

resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,39 +1,49 @@
 <script setup lang="ts">
-import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
+import type {
+    DropdownMenuContentEmits,
+    DropdownMenuContentProps,
+} from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
 import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+    DropdownMenuContent,
+    DropdownMenuPortal,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false,
+});
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
+    defineProps<
+        DropdownMenuContentProps & { class?: HTMLAttributes["class"] }
+    >(),
+    {
+        sideOffset: 4,
+    },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      data-slot="dropdown-menu-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
-    >
-      <slot />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
+    <DropdownMenuPortal>
+        <DropdownMenuContent
+            data-slot="dropdown-menu-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] max-w-[calc(100vw-2rem)] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+                    props.class,
+                )
+            "
+        >
+            <slot />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
 </template>