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

2026-09-11 14:17:10 +02:00
parent 850ae337ca
commit f4a8bdd134
27 changed files with 1793 additions and 329 deletions
@@ -1,59 +1,71 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { X } from "lucide-vue-next";
 import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "@/lib/utils";
+import { useDialogFocus } from "@/composables/useDialogFocus";
+import { useLocalization } from "@/composables/useLocalization";

 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false,
+});

-const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DialogContentEmits>()
+const props = defineProps<
+    DialogContentProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DialogContentEmits>();

-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");

-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const { restoreFocus } = useDialogFocus();
+const { t } = useLocalization();
 </script>

 <template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    >
-      <DialogContent
-        :class="
-          cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-            props.class,
-          )
-        "
-        v-bind="{ ...$attrs, ...forwarded }"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
-          }
-        }"
-      >
-        <slot />
-
-        <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
        >
-          <X class="w-4 h-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
+            <DialogContent
+                :class="
+                    cn(
+                        'relative z-50 my-4 grid w-full max-w-[calc(100%-2rem)] gap-column rounded-md border bg-card p-page text-card-foreground shadow-lg duration-200 sm:max-w-lg',
+                        props.class,
+                    )
+                "
+                v-bind="{ ...$attrs, ...forwarded }"
+                @close-auto-focus="restoreFocus"
+                @pointer-down-outside="
+                    (event) => {
+                        const originalEvent = event.detail.originalEvent;
+                        const target = originalEvent.target as HTMLElement;
+                        if (
+                            originalEvent.offsetX > target.clientWidth ||
+                            originalEvent.offsetY > target.clientHeight
+                        ) {
+                            event.preventDefault();
+                        }
+                    }
+                "
+            >
+                <slot />
+
+                <DialogClose
+                    class="absolute top-1 right-1 flex size-control items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"
+                >
+                    <X class="w-4 h-4" />
+                    <span class="sr-only">{{ t("common.close") }}</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogOverlay>
+    </DialogPortal>
 </template>