aloha-vue 1.1.4 → 1.1.5

package/docs/src/views/PageConfirm/PageConfirm.js

@@ -1,6 +1,7 @@
 import AModal from "../../../../src/AModal/AModal";
 
 import AConfirmAPI from "../../../../src/compositionAPI/AConfirmAPI";
+import EventBus from "../../../../src/utils/EventBus";
 
 export default {
   name: "PageConfirm",
@@ -26,8 +27,22 @@ export default {
       });
     };
 
+    const openConfirmWithTimeout = () => {
+      openConfirm({
+        headerText: "Aloha",
+        bodyHtml: "<div>Aloha <strong>Hola</strong></div>",
+        save: save,
+        selectorClose: "#btn_confirm_timeout",
+      });
+
+      setTimeout(() => {
+        EventBus.$emit("closeModalConfirm");
+      }, 5000);
+    };
+
     return {
       openConfirmLocal,
+      openConfirmWithTimeout,
     };
   },
 };

package/docs/src/views/PageConfirm/PageConfirm.pug

@@ -5,3 +5,10 @@ div
     type="button"
     @click="openConfirmLocal"
   ) Open confirm
+
+  button.a_btn.a_btn_primary(
+    id="btn_confirm_timeout"
+    type="button"
+    @click="openConfirmWithTimeout"
+  ) Open confirm with timeout
+

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/AModal/AModal.js

@@ -1,5 +1,5 @@
 import {
-  h,
+  h, onBeforeUnmount,
   Teleport,
   withDirectives,
 } from "vue";
@@ -9,6 +9,8 @@ import ATranslation from "../ATranslation/ATranslation";
 
 import ASafeHtml from "../directives/ASafeHtml";
 
+import CloseFromOutsideAPI from "./compositionAPI/CloseFromOutsideAPI";
+
 import {
   modalPluginOptions,
 } from "../plugins/AModalPlugin";
@@ -191,10 +193,21 @@ export default {
     "update:modelValue",
   ],
   setup(props, { emit }) {
+    const {
+      destroyEventBusCloseFromOutside,
+      initEventBusCloseFromOutside,
+    } = CloseFromOutsideAPI(props);
+
     const updateModelLocal = model => {
       emit("update:modelValue", model);
     };
 
+    initEventBusCloseFromOutside();
+
+    onBeforeUnmount(() => {
+      destroyEventBusCloseFromOutside();
+    });
+
     return {
       updateModelLocal,
     };

package/src/AModal/compositionAPI/CloseFromOutsideAPI.js

@@ -0,0 +1,29 @@
+import {
+  toRef,
+} from "vue";
+
+import EventBus from "../../utils/EventBus";
+
+export default function CloseFromOutsideAPI(props) {
+  const close = toRef(props, "close");
+  const isConfirm = toRef(props, "isConfirm");
+
+  const closeModalFromOutside = () => {
+    if (!isConfirm.value) {
+      close.value();
+    }
+  };
+
+  const initEventBusCloseFromOutside = () => {
+    EventBus.$on("closeModal", closeModalFromOutside);
+  };
+
+  const destroyEventBusCloseFromOutside = () => {
+    EventBus.$off("closeModal", closeModalFromOutside);
+  };
+
+  return {
+    destroyEventBusCloseFromOutside,
+    initEventBusCloseFromOutside,
+  };
+}

package/src/AModalConfirm/AModalConfirm.js

@@ -1,11 +1,12 @@
 import {
   computed,
-  h,
+  h, onBeforeUnmount,
 } from "vue";
 
 import AModal from "../AModal/AModal";
 
 import AConfirmAPI from "../compositionAPI/AConfirmAPI";
+import CloseFromOutsideAPI from "./compositionAPI/CloseFromOutsideAPI";
 
 // @vue/component
 export default {
@@ -17,6 +18,13 @@ export default {
       isModalHidden,
     } = AConfirmAPI();
 
+    const {
+      destroyEventBusCloseFromOutside,
+      initEventBusCloseFromOutside,
+    } = CloseFromOutsideAPI({
+      isModalHidden,
+    });
+
     const modalProps = computed(() => {
       return {
         close: closeConfirm,
@@ -26,6 +34,12 @@ export default {
       };
     });
 
+    initEventBusCloseFromOutside();
+
+    onBeforeUnmount(() => {
+      destroyEventBusCloseFromOutside();
+    });
+
     return {
       modalProps,
     };

package/src/AModalConfirm/compositionAPI/CloseFromOutsideAPI.js

@@ -0,0 +1,26 @@
+import {
+  ref,
+} from "vue";
+
+import EventBus from "../../utils/EventBus";
+
+export default function CloseFromOutsideAPI({
+  isModalHidden = ref(false),
+}) {
+  const closeModalFromOutside = () => {
+    isModalHidden.value = true;
+  };
+
+  const initEventBusCloseFromOutside = () => {
+    EventBus.$on("closeModalConfirm", closeModalFromOutside);
+  };
+
+  const destroyEventBusCloseFromOutside = () => {
+    EventBus.$off("closeModalConfirm", closeModalFromOutside);
+  };
+
+  return {
+    destroyEventBusCloseFromOutside,
+    initEventBusCloseFromOutside,
+  };
+}