@fiscozen/dialog 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/dialog",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Design System Dialog component",
   "main": "src/index.ts",
   "type": "module",
@@ -11,9 +11,11 @@
     "vue": "^3.4.13",
     "@fiscozen/button": "^0.1.6",
     "@fiscozen/style": "^0.1.1",
-    "@fiscozen/composables": "^0.1.10"
+    "@fiscozen/composables": "^0.1.15"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
     "@rushstack/eslint-patch": "^1.3.3",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^18.19.3",
@@ -21,21 +23,22 @@
     "@vitest/coverage-v8": "^1.2.1",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.0",
-    "vite-plugin-dts": "^3.8.3",
     "eslint": "^8.49.0",
     "jsdom": "^23.0.1",
     "prettier": "^3.0.3",
     "typescript": "~5.3.0",
     "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.8.3",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/vue-fontawesome": "^3.0.6",
     "@fiscozen/eslint-config": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
     "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "MIT",
+  "dependencies": {
+    "@fiscozen/composables": "^0.1.15"
+  },
   "scripts": {
     "coverage": "vitest run --coverage",
     "format": "prettier --write src/",

package/src/FzDialog.vue

@@ -1,13 +1,14 @@
 <template>
   <div
+    ref="backdrop"
     v-show="visible"
-    class="fz-dialog__backdrop w-screen h-screen fixed flex flex-col items-center justify-center">
+    class="fz-dialog__backdrop w-screen h-screen fixed flex flex-col items-center justify-center z-30">
     <dialog
       ref="dialog"
       @close="visible = false"
       :class="[dialogStaticClasses, dialogClasses]"
     >
-      <div :class="[staticClasses, classes]">
+      <div ref="innerDialog" :class="[staticClasses, classes]">
         <div
           class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid"
         >
@@ -28,9 +29,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { computed, ref } from "vue";
 import { FzDialogProps } from "./types";
 import { useKeyUp } from "@fiscozen/composables";
+import { useClickOutside } from "@fiscozen/composables";
 
 const props = withDefaults(defineProps<FzDialogProps>(), {
   size: "md",
@@ -39,6 +41,8 @@ const props = withDefaults(defineProps<FzDialogProps>(), {
 const emit = defineEmits(["fzmodal:cancel"]);
 
 const dialog = ref<HTMLDialogElement>();
+const backdrop = ref<HTMLDialogElement>();
+const innerDialog = ref<HTMLDivElement>();
 const visible = ref(false);
 
 let backdropClickTimeout = false;
@@ -58,21 +62,15 @@ defineExpose({
   visible,
 });
 
-const handleBackdropClick = (event: MouseEvent) => {
-  if (backdropClickTimeout || !visible.value) {
-    return;
-  }
-  var rect = dialog.value!.getBoundingClientRect();
-  var isInDialog =
-    rect.top <= event.clientY &&
-    event.clientY <= rect.top + rect.height &&
-    rect.left <= event.clientX &&
-    event.clientX <= rect.left + rect.width;
-  if (!isInDialog && props.closeOnBackdrop) {
+useClickOutside(
+  innerDialog,
+  () => {
+    if (!props.closeOnBackdrop) return;
     dialog.value!.close();
     emit("fzmodal:cancel");
-  }
-};
+  },
+  backdrop,
+);
 
 const handleKeyUp = (e: KeyboardEvent) => {
   if (!visible.value || e.key !== "Escape") {
@@ -84,13 +82,6 @@ const handleKeyUp = (e: KeyboardEvent) => {
 
 useKeyUp(handleKeyUp);
 
-onMounted(() => {
-  document.addEventListener("click", handleBackdropClick);
-});
-onUnmounted(() => {
-  document.removeEventListener("click", handleBackdropClick);
-});
-
 const staticClasses = ["flex", "flex-col", "bg-core-white"];
 
 const dialogStaticClasses = {