aloha-vue 1.2.73 → 1.2.75

package/babel.config.js

@@ -0,0 +1,20 @@
+const path = require("path");
+
+module.exports = {
+  presets: [
+    ["@babel/env"]
+  ],
+  env: {
+    test: {
+      presets: [["@babel/env"]]
+    }
+  },
+  plugins: [
+    ["module-resolver", {
+      root: ["./src"],
+      alias: {
+        "@": path.resolve(__dirname, "./src")
+      }
+    }]
+  ]
+};

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",
@@ -30,8 +31,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/docs/webpack.config.js

@@ -34,16 +34,6 @@ function resolveAlias(mode)  {
 function getRules(mode) {
   const TARGET = process.env.npm_lifecycle_event;
   const RULES = [
-    {
-      test: /\.m?js?json/,
-      type: "javascript/auto",
-    },
-    {
-      test: /\.m?js/,
-      resolve: {
-        fullySpecified: false,
-      },
-    },
     // {
     //   test: /\.js$/,
     //   enforce: "pre",

package/jest.config.js

@@ -0,0 +1,16 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  coverageDirectory: "coverage",
+  moduleNameMapper: {
+    "@/(.*)$": "<rootDir>/src/$1"
+  },
+  testEnvironment: "node",
+  transform: {
+    "^.+\\.jsx?$": "babel-jest"
+  },
+  transformIgnorePatterns: [
+    "<rootDir>/node_modules/(?!lodash-es)"
+  ],
+};

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.73",
+  "version": "1.2.75",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"
@@ -38,7 +38,7 @@
   },
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1",
-    "test": "node --trace-warnings --experimental-vm-modules node_modules/jest/bin/jest.js"
+    "test": "jest"
   },
   "dependencies": {
     "@floating-ui/vue": "1.0.2",
@@ -55,10 +55,12 @@
     "@vue/test-utils": "^2.4.3",
     "eslint-plugin-jest": "^27.6.1",
     "jest": "^29.7.0",
-    "lodash": "^4.17.21"
-  },
-  "jest": {
-    "transform": {}
-  },
-  "type": "module"
+    "lodash": "^4.17.21",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "29.7.0",
+    "babel-plugin-module-resolver": "5.0.0"
+  }
 }

package/src/AModal/AModal.js

@@ -1,5 +1,6 @@
 import {
   h,
+  onBeforeUnmount,
   onMounted,
   onUnmounted,
   Teleport,
@@ -10,6 +11,7 @@ import {
 import AButton from "../AButton/AButton";
 import ATranslation from "../ATranslation/ATranslation";
 
+import CloseFromOutsideAPI from "./compositionAPI/CloseFromOutsideAPI";
 import DisabledAPI from "./compositionAPI/DisabledAPI";
 import EscapeAPI from "./compositionAPI/EscapeAPI";
 import FocusAPI from "./compositionAPI/FocusAPI";
@@ -167,6 +169,11 @@ export default {
   setup(props) {
     const isModalHidden = toRef(props, "isModalHidden");
 
+    const {
+      destroyEventBusCloseFromOutside,
+      initEventBusCloseFromOutside,
+    } = CloseFromOutsideAPI(props);
+
     const {
       sizeClass,
     } = SizeAPI(props);
@@ -220,10 +227,16 @@ export default {
       }
     });
 
+    initEventBusCloseFromOutside();
+
     onMounted(() => {
       showModal();
     });
 
+    onBeforeUnmount(() => {
+      destroyEventBusCloseFromOutside();
+    });
+
     onUnmounted(() => {
       hideModal();
     });
@@ -236,8 +249,6 @@ export default {
       sizeClass,
     };
   },
-  computed: {
-  },
   render() {
     return h(Teleport, {
       to: "body",

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 {
         isModalHidden: isModalHidden.value,
@@ -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,
+  };
+}