glib-web 5.0.4 → 5.0.5

package/actions/browsers/detectCountry.js

@@ -3,7 +3,10 @@
 import countries from "moment-timezone/data/meta/latest.json";
 import Action from "../../action";
 import http from "../../utils/http";
-import merge from 'lodash.merge';
+import * as mergeModule from 'lodash.merge';
+import { interopDefault } from "../../utils/interop.js";
+
+const merge = interopDefault(mergeModule);
 
 export default class {
   async execute(spec, component) {

package/actions/dialogs/notification.js

@@ -1,4 +1,7 @@
-import Push from "push.js";
+import * as PushModule from "push.js";
+import { interopDefault } from "../../utils/interop.js";
+
+const Push = interopDefault(PushModule);
 
 export default class {
   execute(properties, component) {

package/actions/logics/run.js

@@ -1,9 +1,12 @@
-import jsonLogic from 'json-logic-js';
+import * as jsonLogicModule from 'json-logic-js';
+import { interopDefault } from "../../utils/interop.js";
 // Method "closest" return nothing, so use getAllFormData instead
 // One page can consist of many forms
 // so please use carefully
 import { getAllFormData } from "../../components/composable/form";
 
+const jsonLogic = interopDefault(jsonLogicModule);
+
 export default class {
   execute(spec, component) {
     let condition = spec.condition;

package/actions/logics/set.js

@@ -1,10 +1,14 @@
-import jsonLogic from 'json-logic-js';
-import merge from 'lodash.merge';
+import * as jsonLogicModule from 'json-logic-js';
+import * as mergeModule from 'lodash.merge';
 import { nextTick } from "vue";
 import { sanitize } from "../../components/composable/date";
 import { isPresent } from "../../utils/type";
+import { interopDefault } from "../../utils/interop.js";
 import { getFormData as _getFormData } from "../../components/composable/form";
 
+const jsonLogic = interopDefault(jsonLogicModule);
+const merge = interopDefault(mergeModule);
+
 const sumDate = function (a, b) {
   const date = new Date(a);
   const tzoffset = date.getTimezoneOffset() * 60000;

package/components/composable/date.js

@@ -1,5 +1,8 @@
-import moment from "moment-timezone";
+import * as momentModule from "moment-timezone";
 import { isString } from "../../utils/type";
+import { interopDefault } from "../../utils/interop.js";
+
+const moment = interopDefault(momentModule);
 
 export function sanitize(val, type, timeZone) {
   if (!val) return;

package/components/datetime.vue

@@ -3,8 +3,11 @@
 </template>
 
 <script>
-import moment from "moment";
+import * as momentModule from "moment";
 import GlibBase from "./base/glibBase.js";
+import { interopDefault } from "../utils/interop.js";
+
+const moment = interopDefault(momentModule);
 
 export default {
   extends: GlibBase,

package/components/fields/phone/field.vue

@@ -26,8 +26,11 @@
 
 <script>
 import GlibBase from "../../base/glibBase.js";
-import PhoneNumber from "awesome-phonenumber";
+import * as PhoneNumberModule from "awesome-phonenumber";
 import allCountries from "./countries";
+import { interopDefault } from "../../../utils/interop.js";
+
+const PhoneNumber = interopDefault(PhoneNumberModule);
 
 function getCountryByIp() {
   return fetch("https://ip2c.org/s")

package/components/mixins/styles.js

@@ -2,8 +2,12 @@ import Hash from "../../utils/hash";
 import { determineColor } from "../../utils/constant";
 import { triggerOnChange } from "../composable/form";
 import { realComponent } from "../helper";
-import set from "lodash.set";
-import merge from "lodash.merge";
+import * as setModule from "lodash.set";
+import * as mergeModule from "lodash.merge";
+import { interopDefault } from "../../utils/interop.js";
+
+const set = interopDefault(setModule);
+const merge = interopDefault(mergeModule);
 const NUMBER_PRECISION = 2;
 const isNeedToBeFixed = (val, component) => {
   return component.type == 'number' && !Number.isInteger(val) && Number.isFinite(val);

package/components/panels/bulkEdit2.vue

@@ -70,9 +70,12 @@ export default {
 import { computed, getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
 import Action from "../../action";
 import Hash from "../../utils/hash";
-import Papa from "papaparse";
+import * as PapaModule from "papaparse";
 import launch from "../../utils/launch";
 import { isPresent } from "../../utils/type";
+import { interopDefault } from "../../utils/interop.js";
+
+const Papa = interopDefault(PapaModule);
 
 class Row {
   constructor({ id, columns, selected, index, status }) {

package/components/panels/custom.vue

@@ -14,7 +14,7 @@
     -->
     <!-- <component ref="ccomp" :is="template" v-if="customData" :name="spec.template" :spec="customData" /> -->
 
-    <component :is="template" :name="spec.template" :spec="contentSpec" />
+    <component :is="template" :compName="spec.template" :spec="contentSpec" />
 
   </div>
 </template>

package/components/popover.vue

@@ -46,6 +46,7 @@ export default {
       busCloseHandler: null,
       onAppClick: null,
       onResize: null,
+      dialogClickEl: null,
       body: null,
     };
   },
@@ -59,29 +60,63 @@ export default {
   },
   mounted() {
     popovers.value.push(this);
-    this.busOpenHandler = (body) => {
-      this.body = body;
-      this.key = strandom();
-    };
-    bus.$on(`popovers/open-${this.spec.key}`, this.busOpenHandler);
+    this.registerBusOpen();
+    this.handleMounted();
   },
   methods: {
-    $mounted() {
-      const appEl = document.getElementById(APP_ID);
+    registerBusOpen() {
+      this.busOpenHandler = (body) => {
+        this.body = body;
+        this.key = strandom();
+      };
+      bus.$on(`popovers/open-${this.spec.key}`, this.busOpenHandler);
+    },
+    registerBusClose(appEl) {
       this.busCloseHandler = () => {
         if (appEl) {
           appEl.removeEventListener("click", this.onAppClick);
         }
+        if (TypeUtils.isNotNull(this.dialogClickEl)) {
+          this.dialogClickEl.removeEventListener("click", this.onAppClick);
+        }
         this.close();
       };
       bus.$once(`popover/close-${this.spec.key}`, this.busCloseHandler);
+    },
+    registerOutsideListeners(appEl) {
+      this.onAppClick = this.handleClose;
+      if (appEl) {
+        appEl.addEventListener("click", this.onAppClick);
+      }
+      this.dialogClickEl = this.resolveDialogEl();
+      if (TypeUtils.isNotNull(this.dialogClickEl)) {
+        this.dialogClickEl.addEventListener("click", this.onAppClick);
+      }
+      this.onResize = () => this.close();
+      window.addEventListener("resize", this.onResize);
+    },
+    removeOutsideListeners(appEl) {
+      if (TypeUtils.isFunction(this.onAppClick) && appEl) {
+        appEl.removeEventListener("click", this.onAppClick);
+      }
+      if (TypeUtils.isFunction(this.onAppClick) && TypeUtils.isNotNull(this.dialogClickEl)) {
+        this.dialogClickEl.removeEventListener("click", this.onAppClick);
+      }
+      if (TypeUtils.isFunction(this.onResize)) {
+        window.removeEventListener("resize", this.onResize);
+      }
+    },
+    resolveDialogEl() {
+      if (TypeUtils.isNotNull(this.reference) && TypeUtils.isFunction(this.reference.closest)) {
+        return this.reference.closest(".v-dialog");
+      }
+      return null;
+    },
+    handleMounted() {
+      const appEl = document.getElementById(APP_ID);
+      this.registerBusClose(appEl);
       if (!this.spec.persistent) {
-        this.onAppClick = this.handleClose;
-        if (appEl) {
-          appEl.addEventListener("click", this.onAppClick);
-        }
-        this.onResize = () => this.close();
-        window.addEventListener("resize", this.onResize);
+        this.registerOutsideListeners(appEl);
       }
       if (this.spec.overlay) {
         this.driverObj.highlight({ element: this.reference });
@@ -96,12 +131,7 @@ export default {
       }
       if (!this.spec.persistent) {
         const appEl = document.getElementById(APP_ID);
-        if (TypeUtils.isFunction(this.onAppClick) && appEl) {
-          appEl.removeEventListener("click", this.onAppClick);
-        }
-        if (TypeUtils.isFunction(this.onResize)) {
-          window.removeEventListener("resize", this.onResize);
-        }
+        this.removeOutsideListeners(appEl);
       }
     },
     handleClose(event) {

package/components/shareButton.vue

@@ -14,7 +14,10 @@ import GlibBase from "./base/glibBase.js";
 import Action from "../action";
 import { Vue } from "..";
 
-import VueSocialSharing from "vue-social-sharing";
+import * as VueSocialSharingModule from "vue-social-sharing";
+import { interopDefault } from "../utils/interop.js";
+
+const VueSocialSharing = interopDefault(VueSocialSharingModule);
 Vue.use(VueSocialSharing, { networks: { copy: "" } });
 
 export default {

package/components/treeView.vue

@@ -34,8 +34,11 @@ import { defineComponent, ref } from "vue";
 import * as dropUploader from "./composable/upload";
 import * as delegateUploader from "./composable/upload_delegator";
 import { watch } from "vue";
-import merge from 'lodash.merge';
+import * as mergeModule from 'lodash.merge';
 import { useFileUtils } from "./composable/file";
+import { interopDefault } from "../utils/interop.js";
+
+const merge = interopDefault(mergeModule);
 const { signedIds } = useFileUtils();
 
 export default defineComponent({

package/index.js

@@ -8,7 +8,10 @@ import { jsonView, vueApp } from "./store";
 import './app.scss';
 
 // lib for deep merge
-import merge from 'lodash.merge';
+import * as mergeModule from 'lodash.merge';
+import { interopDefault } from "./utils/interop.js";
+
+const merge = interopDefault(mergeModule);
 
 const APP_ID = 'app';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/unsupported.vue

@@ -1,12 +1,12 @@
 <template>
-  <div>Unsupported template: {{ name }}</div>
+  <div>Unsupported template: {{ compName }}</div>
 </template>
 
 <script>
 export default {
   props: {
     spec: { type: Object, required: true },
-    name: { type: String, required: true }
+    compName: { type: String, required: true }
   }
 };
 </script>

package/utils/eventBus.js

@@ -1,5 +1,8 @@
 // eventBus.js
-import EventEmitter2 from "eventemitter2";
+import * as EventEmitter2Module from "eventemitter2";
+import { interopDefaultOr } from "./interop.js";
+
+const EventEmitter2 = interopDefaultOr(EventEmitter2Module, "EventEmitter2");
 
 const emitter = new EventEmitter2({ delimiter: '-', maxListeners: 0 });
 

package/utils/hash.js

@@ -1,4 +1,7 @@
-import merge from 'lodash.merge';
+import * as mergeModule from 'lodash.merge';
+import { interopDefault } from "./interop.js";
+
+const merge = interopDefault(mergeModule);
 export default class Hash {
   constructor(object) {
     if (object) {

package/utils/interop.js

@@ -0,0 +1,9 @@
+export function interopDefault(moduleRef) {
+  return moduleRef && moduleRef.default ? moduleRef.default : moduleRef;
+}
+
+export function interopDefaultOr(moduleRef, namedExport) {
+  if (moduleRef && moduleRef.default) return moduleRef.default;
+  if (moduleRef && moduleRef[namedExport]) return moduleRef[namedExport];
+  return moduleRef;
+}