@fiscozen/dialog 0.1.8 → 0.1.9-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/dialog",
-  "version": "0.1.8",
+  "version": "0.1.9-beta.3",
   "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.12"
   },
   "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.12"
+  },
   "scripts": {
     "coverage": "vitest run --coverage",
     "format": "prettier --write src/",

package/src/FzDialog.vue

@@ -1,32 +1,37 @@
 <template>
-  <dialog
-    ref="dialog"
-    @close="visible = false"
-    :class="[dialogStaticClasses, dialogClasses]"
-  >
-    <div :class="[staticClasses, classes]">
-      <div
-        class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid"
-      >
-        <slot name="header"></slot>
+  <div
+    v-show="visible"
+    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 ref="innerDialog" :class="[staticClasses, classes]">
+        <div
+          class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid"
+        >
+          <slot name="header"></slot>
+        </div>
+        <div :class="['grow', 'p-12', bodyClasses]">
+          <slot name="body"></slot>
+        </div>
+        <div
+          v-if="$slots.footer"
+          class="flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid"
+        >
+          <slot name="footer"></slot>
+        </div>
       </div>
-      <div :class="['grow', 'p-12', bodyClasses]">
-        <slot name="body"></slot>
-      </div>
-      <div
-        v-if="$slots.footer"
-        class="flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid"
-      >
-        <slot name="footer"></slot>
-      </div>
-    </div>
-  </dialog>
+    </dialog>
+  </div>
 </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",
@@ -35,10 +40,17 @@ const props = withDefaults(defineProps<FzDialogProps>(), {
 const emit = defineEmits(["fzmodal:cancel"]);
 
 const dialog = ref<HTMLDialogElement>();
+const innerDialog = ref<HTMLDivElement>();
 const visible = ref(false);
 
+let backdropClickTimeout = false;
+
 const showModal = () => {
-  dialog.value!.showModal();
+  backdropClickTimeout = true;
+  setTimeout(() => {
+    backdropClickTimeout = false;
+  }, 100)
+  dialog.value!.show();
   visible.value = true;
 };
 
@@ -48,35 +60,26 @@ defineExpose({
   visible,
 });
 
-const handleBackdropClick = (event: MouseEvent) => {
-  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");
-  }
-};
+  },
+  dialog,
+);
 
 const handleKeyUp = (e: KeyboardEvent) => {
   if (!visible.value || e.key !== "Escape") {
     return;
   }
+  dialog.value!.close();
   emit("fzmodal:cancel");
 };
 
 useKeyUp(handleKeyUp);
 
-onMounted(() => {
-  dialog.value?.addEventListener("click", handleBackdropClick);
-});
-onUnmounted(() => {
-  dialog.value?.removeEventListener("click", handleBackdropClick);
-});
-
 const staticClasses = ["flex", "flex-col", "bg-core-white"];
 
 const dialogStaticClasses = {
@@ -175,4 +178,9 @@ dialog::backdrop {
   background: var(--core-black, #2c282f);
   opacity: 0.8;
 }
+.fz-dialog__backdrop {
+  background-color: rgba(44, 40, 47, 0.8);
+  top: 0;
+  left: 0;
+}
 </style>