@fiscozen/dialog 0.1.19 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/dialog",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Design System Dialog component",
   "main": "src/index.ts",
   "type": "module",
@@ -9,9 +9,9 @@
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/composables": "^0.1.29",
-    "@fiscozen/button": "^0.1.7",
-    "@fiscozen/style": "^0.1.1"
+    "@fiscozen/style": "^0.1.2",
+    "@fiscozen/composables": "^0.1.30",
+    "@fiscozen/button": "^0.1.7"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -32,13 +32,13 @@
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "MIT",
   "dependencies": {
     "dialog-polyfill": "^0.5.6",
-    "@fiscozen/composables": "^0.1.29"
+    "@fiscozen/composables": "^0.1.30"
   },
   "scripts": {
     "coverage": "vitest run --coverage",

package/src/FzDialog.vue

@@ -3,7 +3,8 @@
     v-if="shouldRender || shouldAlwaysRender"
     ref="backdrop"
     v-show="visible"
-    class="fz-dialog__backdrop w-screen h-screen fixed flex flex-col items-center justify-start sm:justify-center z-30">
+    class="fz-dialog__backdrop w-screen h-screen fixed flex flex-col items-center justify-start sm:justify-center z-30"
+  >
     <dialog
       ref="dialog"
       @close="handleModalClose"
@@ -15,7 +16,7 @@
         >
           <slot name="header"></slot>
         </div>
-        <div :class="['grow', 'p-12', bodyClasses]">
+        <div :class="['grow p-12 overflow-auto', bodyClasses]">
           <slot name="body"></slot>
         </div>
         <div
@@ -30,16 +31,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 import { FzDialogProps } from "./types";
 import { useKeyUp } from "@fiscozen/composables";
 import { useClickOutside } from "@fiscozen/composables";
-import dialogPolyfill from 'dialog-polyfill';
-import 'dialog-polyfill/dist/dialog-polyfill.css';
+import dialogPolyfill from "dialog-polyfill";
+import "dialog-polyfill/dist/dialog-polyfill.css";
 
 const props = withDefaults(defineProps<FzDialogProps>(), {
   size: "md",
-  closeOnBackdrop: true
+  closeOnBackdrop: true,
 });
 const emit = defineEmits(["fzmodal:cancel"]);
 
@@ -49,18 +50,28 @@ const innerDialog = ref<HTMLDivElement>();
 const visible = ref(false);
 const shouldRender = ref(false);
 
-let backdropClickTimeout = false;
+function updateInnerHeightVar() {
+  dialog.value?.style.setProperty('--innerHeight', `${window.innerHeight}px`);
+}
+
+function handleDialogRendered() {
+  updateInnerHeightVar();
+  dialogPolyfill.registerDialog(dialog.value!);
+  dialog.value!.show();
+  visible.value = true;
+}
+
+onMounted(() => {
+  window.addEventListener('resize', updateInnerHeightVar);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateInnerHeightVar);
+});
 
 const showModal = () => {
-  backdropClickTimeout = true;
-  setTimeout(() => {
-    backdropClickTimeout = false;
-  }, 100);
-  
   if (props.shouldAlwaysRender) {
-    dialogPolyfill.registerDialog(dialog.value!);
-    dialog.value!.show();
-    visible.value = true;
+    handleDialogRendered();
   } else {
     shouldRender.value = true;
   }
@@ -79,9 +90,7 @@ function handleModalClose() {
 
 watch(dialog, (dialog) => {
   if (dialog && shouldRender.value) {
-    dialogPolyfill.registerDialog(dialog);
-    dialog.show();
-    visible.value = true;
+    handleDialogRendered();
   }
 });
 
@@ -115,91 +124,39 @@ const staticClasses = "flex flex-col bg-core-white";
 const dialogStaticClasses = "border-1 rounded border-grey-100 p-0";
 
 const dialogClasses = computed(() => {
-  let res: string[] = [];
   if (props.isDrawer) {
-    res = ["m-0", "fixed", "top-0", "ml-auto", "max-h-screen"];
-    return res;
+    return "m-0 fixed top-0 ml-auto max-h-screen";
   }
+
   switch (props.size) {
-    case "sm":
-      res = [];
-      break;
     case "md":
-      res = [
-        "xs:max-sm:m-0",
-        "xs:max-sm:max-h-screen",
-        "xs:max-sm:h-dvh",
-        "xs:max-sm:w-dvw",
-        "xs:max-sm:max-w-screen-xl",
-      ];
-      break;
+      return "xs:max-sm:m-0 xs:max-sm:max-h-screen xs:max-sm:h-dvh xs:max-sm:w-dvw xs:max-sm:max-w-screen-xl";
     case "lg":
-      res = [
-        "xs:max-md:m-0",
-        "xs:max-md:max-h-screen",
-        "xs:max-md:h-dvh",
-        "xs:max-md:w-dvw",
-        "xs:max-md:max-w-screen-xl",
-      ];
-      break;
+      return "xs:max-md:m-0 xs:max-md:max-h-screen xs:max-md:h-dvh xs:max-md:w-dvw xs:max-md:max-w-screen-xl";
     case "xl":
-      res = [
-        "xs:max-xl:m-0",
-        "xs:max-xl:max-h-screen",
-        "xs:max-xl:h-dvh",
-        "xs:max-xl:w-dvw",
-        "xs:max-xl:max-w-screen-xl",
-      ];
-      break;
-    default:
-      res = [];
-      break;
+      return "xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-dvh xs:max-xl:w-dvw xs:max-xl:max-w-screen-xl";
   }
-  return res;
 });
 
 const classes = computed(() => {
-  let res: string[] = [];
   if (props.isDrawer) {
-    res = ["w-[480px]", "h-dvh"];
-    return res;
+    return "w-[480px] h-dvh";
   }
+
   switch (props.size) {
     case "sm":
-      res = ["w-[320px]", "min-h-[200px]", "max-h-[432px]"];
-      break;
+      return "w-[320px] min-h-[200px] max-h-[432px]";
     case "md":
-      res = [
-        "w-dvw sm:w-[480px]",
-        "min-h-[300px]",
-        "sm:max-h-[600px]",
-        "h-dvh sm:h-auto",
-      ];
-      break;
+      return "w-dvw sm:w-[480px] min-h-[300px] sm:max-h-[600px] h-dvh sm:h-auto";
     case "lg":
-      res = [
-        "w-dvw md:w-[640px]",
-        "min-h-[300px]",
-        "md:max-h-[600px]",
-        "h-dvh md:h-auto",
-      ];
-      break;
+      return "w-dvw md:w-[640px] min-h-[300px] md:max-h-[600px] h-dvh md:h-auto";
     case "xl":
-      res = [
-        "w-dvw xl:w-[960px]",
-        "min-h-[400px]",
-        "xl:max-h-[600px]",
-        "h-dvh xl:h-auto",
-      ];
-      break;
-    default:
-      break;
+      return "w-dvw xl:w-[960px] min-h-[400px] xl:max-h-[600px] h-dvh xl:h-auto";
   }
-  return res;
 });
 </script>
 
-<style>
+<style scoped>
 dialog::backdrop {
   background: var(--core-black, #2c282f);
   opacity: 0.8;