glib-web 4.35.9 → 4.35.11

package/actions/popovers/helper.js

@@ -2,7 +2,12 @@ import { popovers } from "../../store";
 
 function isExist(properties) {
   const isPoped = popovers.value.map((v) => v.spec.key).includes(properties.key);
-  return properties.updateExisting && isPoped;
+  return isPoped;
 }
 
-export { isExist };
+function closeAllExcept(properties) {
+  const items = popovers.value.filter((v) => v.spec.key != properties.key);
+  items.forEach((popover) => popover.close());
+}
+
+export { isExist, closeAllExcept };

package/actions/popovers/open.js

@@ -1,14 +1,18 @@
 import eventBus from "../../utils/eventBus";
 import http from "../../utils/http";
-import { isExist } from "./helper";
+import { closeAllExcept, isExist } from "./helper";
 
 export default class {
   execute(properties, component) {
+    closeAllExcept(properties);
     // show loading text
     const prop = Object.assign({}, properties, { body: { childViews: [{ view: 'label', text: 'loading...', }] } }, { styleClasses: ['popovers-open'] });
 
     if (!isExist(prop)) {
       Utils.launch.popover.open(prop, component);
+    } else if (!prop.updateExisting) {
+      Utils.launch.popover.close(prop);
+      return;
     }
 
     // send req to server and show response immediately
@@ -17,13 +21,8 @@ export default class {
       'GET',
       component,
       (page) => {
-        if (isExist(prop)) {
-          eventBus.$emit(`popovers/open-${prop.key}`, { body: page.body });
-        } else {
-          prop.body = page.body;
-          Utils.launch.popover.open(prop, component);
-        }
-
+        prop.body = page.body;
+        Utils.launch.popover.open(prop, component);
       },
       () => {
         const page = { body: { childViews: [{ view: 'label', text: 'Something went wrong' }] } };

package/actions/popovers/show.js

@@ -1,10 +1,10 @@
-import eventBus from "../../utils/eventBus";
-import { isExist } from "./helper";
+import { closeAllExcept, isExist } from "./helper";
 
 export default class {
   execute(properties, component) {
+    closeAllExcept(properties);
     if (isExist(properties)) {
-      eventBus.$emit(`popovers/open-${properties.key}`, { body: properties.body });
+      Utils.launch.popover.close(properties);
     } else {
       Utils.launch.popover.open(properties, component);
     }

package/app.vue

@@ -57,7 +57,7 @@ import FormPanel from "./components/panels/form.vue";
 import { isRerender, vueApp } from "./store";
 import { useSocket } from "./components/composable/socket";
 import { usePasteable } from "./components/composable/pasteable";
-import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, provide, ref } from "vue";
 import { TOOLTIP_ID } from "./constant";
 import { watchGlibEvent } from "./store";
 import { htmlElement } from "./components/helper";
@@ -70,22 +70,33 @@ export default {
     usePasteable(filePaster);
     const tooltipId = TOOLTIP_ID;
     const appRef = ref(null);
+    const isChrome = !!window.chrome; // return true if browser is chrome, edge, or other chrome based engine
+    const mousePosition = ref({ x: null, y: null });
 
     const handler = (event) => {
       const { dirty } = event.detail;
       vueApp.isFormDirty = dirty;
     };
 
+    const handleMouseMove = (event) => {
+      mousePosition.value = { x: event.clientX, y: event.clientY };
+    };
+
     onMounted(() => {
       const el = htmlElement(appRef.value);
       el.addEventListener('dirtyupdate', handler);
+      if (isChrome) el.addEventListener('mousemove', handleMouseMove);
     });
 
     onBeforeUnmount(() => {
       const el = htmlElement(appRef.value);
       el.removeEventListener('dirtyupdate', handler);
+      if (isChrome) el.removeEventListener('mousemove', handleMouseMove);
     });
 
+    provide('mousePosition', mousePosition);
+    provide('isChrome', isChrome);
+
     return { vueApp, tooltipId, appRef };
   },
   components: {

package/components/button.vue

@@ -1,6 +1,5 @@
 <template>
-  <common-button :style="$styles()" :class="$classes()" :spec="spec" @[menter]="handleMouseEvent(spec.onMouseEnter)"
-    @[mleave]="handleMouseEvent(spec.onMouseLeave)" />
+  <common-button :style="$styles()" :class="$classes()" :spec="spec" />
 </template>
 
 <script>
@@ -8,20 +7,6 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
-  // TODO: Reuse
-  computed: {
-    menter() {
-      return this.spec.onMouseEnter ? 'mouseenter' : null;
-    },
-    mleave() {
-      return this.spec.onMouseLeave ? 'mouseleave' : null;
-    }
-  },
-  methods: {
-    handleMouseEvent(spec) {
-      GLib.action.execute(spec, this);
-    }
-  }
 };
 </script>
 

package/components/component.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, getCurrentInstance, inject, onMounted, onUnmounted, ref } from "vue";
 
 import H1 from "./h1.vue";
 import H2 from "./h2.vue";
@@ -134,6 +134,7 @@ const ShareButton = defineAsyncComponent(() => import("./shareButton.vue"));
 import tooltipMixin from "./mixins/tooltip";
 
 import Skeleton from "./skeleton.vue";
+import { htmlElement } from "./helper";
 
 export default {
   mixins: [tooltipMixin],
@@ -237,9 +238,40 @@ export default {
   props: {
     spec: { type: Object, required: true },
   },
+  setup(props) {
+    const delegate = ref(null);
+    const instance = getCurrentInstance();
+    const isChrome = inject('isChrome');
+    const mousePosition = inject('mousePosition');
+    let num = null;
+
+    onMounted(() => {
+      // The onmouseleave event may not always execute when the cursor moves quickly in Chrome, so using setInterval can be a helpful workaround to manually trigger the required action.
+      if (props.spec.onMouseLeave && isChrome) {
+        num = setInterval(() => {
+          const el = htmlElement(delegate.value);
+          if (!el) return;
+
+          const mouseHoverEl = document.elementFromPoint(mousePosition.value.x, mousePosition.value.y);
+          const isHover = el.contains(mouseHoverEl);
+
+          if (!isHover) {
+            GLib.action.execute(props.spec.onMouseLeave, instance.ctx);
+          }
+
+        }, 500);
+      }
+    });
+
+    onUnmounted(() => {
+      if (num) clearInterval(num);
+    });
+
+    return { delegate };
+  },
   data() {
     return {
-      name: null
+      name: null,
       // See events#$recursiveUpdate().
       // $passthrough: true
     };

package/components/popover.vue

@@ -25,6 +25,7 @@ import bus from "../utils/eventBus";
 import { driver } from "driver.js";
 import 'driver.js/dist/driver.css';
 import { strandom } from "./helper";
+import { APP_ID } from "..";
 
 export default {
     props: ['spec', 'reference', 'placeholder', 'styleClass'],
@@ -44,18 +45,19 @@ export default {
     mounted() {
         popovers.value.push(this);
         bus.$on(`popovers/open-${this.spec.key}`, (body) => {
-            Object.assign(this.spec, body);
+            Object.assign(this.spec, { body });
             this.key = strandom();
         });
     },
     methods: {
         $mounted() {
+            const appEl = document.getElementById(APP_ID);
             bus.$once(`popover/close-${this.spec.key}`, (options) => {
-                document.removeEventListener('click', this.handleClose);
+                appEl.removeEventListener('click', this.handleClose);
                 this.close();
             });
             if (!this.spec.persistent) {
-                document.addEventListener('click', this.handleClose);
+                appEl.addEventListener('click', this.handleClose);
                 window.addEventListener('resize', () => this.close());
             }
             if (this.spec.overlay) {
@@ -67,7 +69,7 @@ export default {
             bus.$off(`popover/close-${this.spec.key}`);
             bus.$off(`popover/open-${this.spec.key}`);
             if (!this.spec.persistent) {
-                document.removeEventListener('click', this.handleClose);
+                appEl.removeEventListener('click', this.handleClose);
                 window.removeEventListener('resize', () => this.close());
             }
         },

package/index.js

@@ -10,6 +10,8 @@ import './app.scss';
 // lib for deep merge
 import merge from 'lodash.merge';
 
+const APP_ID = 'app';
+
 const Vue = createApp({
   setup() {
     const themeConfig = useTheme();
@@ -142,7 +144,7 @@ Vue.use(vPhoneInput);
 
 
 document.addEventListener("DOMContentLoaded", () => {
-  Vue.mount("#app");
+  Vue.mount(`#${APP_ID}`);
 });
 
 function useGlibErrorReporter(endpointUrl = '/glib/errors') {
@@ -189,4 +191,4 @@ function useGlibErrorReporter(endpointUrl = '/glib/errors') {
   });
 }
 
-export { Vue, settings, vueApp, useGlibErrorReporter };
+export { Vue, settings, vueApp, useGlibErrorReporter, APP_ID };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.35.9",
+  "version": "4.35.11",
   "description": "",
   "main": "index.js",
   "scripts": {

package/utils/launch/popover.js

@@ -5,9 +5,16 @@ import { autoUpdate, computePosition, shift, offset, arrow, flip } from "@floati
 
 import bus from "../eventBus";
 import { htmlElement } from "../../components/helper";
+import { isExist } from "../../actions/popovers/helper";
+import eventBus from "../eventBus";
 
 export default class LaunchPopover {
   static open(properties, component) {
+    if (isExist(properties)) {
+      eventBus.$emit(`popovers/open-${properties.key}`, properties.body);
+      return;
+    }
+
     const placeholder = document.createElement('div');
     const arrowEl = document.createElement('div');
     arrowEl.classList.add('popover-arrow');