@fiscozen/dialog 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/dialog",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "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/button": "^0.1.6",
+    "@fiscozen/style": "^0.1.1",
     "@fiscozen/composables": "^0.1.25",
-    "@fiscozen/style": "^0.1.1"
+    "@fiscozen/button": "^0.1.6"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",

package/src/FzConfirmDialog.vue

@@ -65,7 +65,8 @@ const props = withDefaults(defineProps<FzConfirmDialogProps>(), {
   disableConfirm: false,
   confirmButtonEnabled: true,
   doesCancelButtonCloseDialog: true,
-  doesConfirmButtonCloseDialog: true
+  doesConfirmButtonCloseDialog: true,
+  unrenderOnClose: true
 });
 const emit = defineEmits(["fzmodal:confirm", "fzmodal:cancel"]);
 

package/src/FzDialog.vue

@@ -1,11 +1,12 @@
 <template>
   <div
+    v-if="shouldRender || !props.unrenderOnClose"
     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">
     <dialog
       ref="dialog"
-      @close="visible = false"
+      @close="closeModal"
       :class="[dialogStaticClasses, dialogClasses]"
     >
       <div ref="innerDialog" :class="[staticClasses, classes]">
@@ -29,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { FzDialogProps } from "./types";
 import { useKeyUp } from "@fiscozen/composables";
 import { useClickOutside } from "@fiscozen/composables";
@@ -37,6 +38,7 @@ import { useClickOutside } from "@fiscozen/composables";
 const props = withDefaults(defineProps<FzDialogProps>(), {
   size: "md",
   closeOnBackdrop: true,
+  unrenderOnClose: true
 });
 const emit = defineEmits(["fzmodal:cancel"]);
 
@@ -44,6 +46,7 @@ const dialog = ref<HTMLDialogElement>();
 const backdrop = ref<HTMLDialogElement>();
 const innerDialog = ref<HTMLDivElement>();
 const visible = ref(false);
+const shouldRender = ref(false);
 
 let backdropClickTimeout = false;
 
@@ -51,14 +54,34 @@ const showModal = () => {
   backdropClickTimeout = true;
   setTimeout(() => {
     backdropClickTimeout = false;
-  }, 100)
-  dialog.value!.show();
-  visible.value = true;
+  }, 100);
+  
+  if (props.unrenderOnClose) {
+    shouldRender.value = true;
+  } else {
+    dialog.value!.show();
+    visible.value = true;
+  }
+};
+
+const closeModal = (returnVal?: string) => {
+  dialog.value!.close(returnVal);
+  visible.value = false;
+  if (props.unrenderOnClose) {
+    shouldRender.value = false;
+  }
 };
 
+watch(dialog, (dialog) => {
+  if (dialog && shouldRender.value) {
+    dialog.show();
+    visible.value = true;
+  }
+});
+
 defineExpose({
   show: showModal,
-  close: (returnVal?: string): void => dialog.value!.close(returnVal),
+  close: closeModal,
   visible,
 });
 

package/src/types.ts

@@ -39,6 +39,10 @@ export type FzDialogProps = {
     | string[]
     | Record<string, boolean | undefined>
     | Array<string | Record<string, boolean | undefined>>;
+  /**
+   * Whether the component gets unrendered on close
+   */
+  unrenderOnClose?: boolean;
 };
 
 export type FzConfirmDialogProps = FzDialogProps & {