@fiscozen/dialog 0.1.18 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/dialog",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Design System Dialog component",
   "main": "src/index.ts",
   "type": "module",
@@ -10,7 +10,7 @@
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
     "@fiscozen/style": "^0.1.1",
-    "@fiscozen/composables": "^0.1.28",
+    "@fiscozen/composables": "^0.1.29",
     "@fiscozen/button": "^0.1.7"
   },
   "devDependencies": {
@@ -32,12 +32,13 @@
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "MIT",
   "dependencies": {
-    "@fiscozen/composables": "^0.1.28"
+    "dialog-polyfill": "^0.5.6",
+    "@fiscozen/composables": "^0.1.29"
   },
   "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', bodyClasses]">
           <slot name="body"></slot>
         </div>
         <div
@@ -34,10 +35,12 @@ import { computed, 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";
 
 const props = withDefaults(defineProps<FzDialogProps>(), {
   size: "md",
-  closeOnBackdrop: true
+  closeOnBackdrop: true,
 });
 const emit = defineEmits(["fzmodal:cancel"]);
 
@@ -54,8 +57,9 @@ const showModal = () => {
   setTimeout(() => {
     backdropClickTimeout = false;
   }, 100);
-  
+
   if (props.shouldAlwaysRender) {
+    dialogPolyfill.registerDialog(dialog.value!);
     dialog.value!.show();
     visible.value = true;
   } else {
@@ -76,6 +80,7 @@ function handleModalClose() {
 
 watch(dialog, (dialog) => {
   if (dialog && shouldRender.value) {
+    dialogPolyfill.registerDialog(dialog);
     dialog.show();
     visible.value = true;
   }
@@ -107,100 +112,43 @@ const handleKeyUp = (e: KeyboardEvent) => {
 
 useKeyUp(handleKeyUp);
 
-const staticClasses = ["flex", "flex-col", "bg-core-white"];
-
-const dialogStaticClasses = {
-  "border-1": true,
-  rounded: true,
-  "border-grey-100": true,
-};
+const staticClasses = "flex flex-col bg-core-white h-dvh max-h-dvh-fallback";
+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]";
   }
+
   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] 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] 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] xl:h-auto";
   }
-  return res;
 });
 </script>
 
-<style>
+<style scoped>
 dialog::backdrop {
   background: var(--core-black, #2c282f);
   opacity: 0.8;
@@ -210,4 +158,8 @@ dialog::backdrop {
   top: 0;
   left: 0;
 }
+.max-h-dvh-fallback {
+  max-height: calc(100vh - 48px); /** If dvh is supported, this gets overridden */
+  max-height: 100dvh;
+}
 </style>