glib-web 4.33.2 → 4.34.3

package/app.vue

@@ -27,7 +27,7 @@
         <v-container v-if="vueApp.loading" :fluid="page.template == 'fullWidth'" :class="containerClasses">
           <glib-component v-for="(loaderView, index) in vueApp.loaderViews" :key="index"
             :spec="loaderView"></glib-component>
-        </v-container>>
+        </v-container>
       </v-main>
 
     </component>
@@ -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, onMounted, provide, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { TOOLTIP_ID } from "./constant";
 import { watchGlibEvent } from "./store";
 import { htmlElement } from "./components/helper";
@@ -71,12 +71,19 @@ export default {
     const tooltipId = TOOLTIP_ID;
     const appRef = ref(null);
 
+    const handler = (event) => {
+      const { dirty } = event.detail;
+      vueApp.isFormDirty = dirty;
+    };
+
     onMounted(() => {
       const el = htmlElement(appRef.value);
-      el.addEventListener('dirtyupdate', (event) => {
-        const { dirty } = event.detail;
-        vueApp.isFormDirty = dirty;
-      });
+      el.addEventListener('dirtyupdate', handler);
+    });
+
+    onBeforeUnmount(() => {
+      const el = htmlElement(appRef.value);
+      el.removeEventListener('dirtyupdate', handler);
     });
 
     return { vueApp, tooltipId, appRef };

package/components/fields/_select.vue

@@ -43,9 +43,7 @@
       </template>
 
       <template v-slot:append-item v-if="spec.footer">
-        <div class="fields-select-footer">
-          <common-responsive :spec="spec.footer" />
-        </div>
+        <common-responsive :spec="footer" />
       </template>
 
       <template v-slot:prepend-inner v-if="spec.leftIcon">
@@ -98,6 +96,12 @@ export default {
     compName() {
       return this.spec.searchable ? 'v-autocomplete' : 'v-select';
     },
+    footer() {
+      const styleClasses = ['fields-select-footer'];
+      styleClasses.push([this.spec.footer.styleClasses].flat());
+
+      return Object.assign({}, this.spec.footer, { styleClasses });
+    },
     normalizedOptions() {
       return this.spec.options.map(i => {
         switch (i.type) {
@@ -180,6 +184,13 @@ export default {
     width: 100%;
   }
 }
+
+.sticky-footer {
+  position: sticky;
+  bottom: -8px;
+  background: white;
+  z-index: 1;
+}
 </style>
 
 <style scoped>

package/components/fields/richText.vue

@@ -221,16 +221,6 @@ export default {
           [{ list: "ordered" }, { list: "bullet" }],
           ["link"],
         ],
-        // ImageDropAndPaste: {
-        //   // add an custom image handler
-        //   handler: function (imageDataUrl, type, imageData) {
-        //     bus.$emit("richText/dropOrPaste", {
-        //       file: imageData.toFile(),
-        //       editor: quill,
-        //       cursorLocation: this.getIndex(),
-        //     });
-        //   },
-        // }
       }
     });
 
@@ -245,6 +235,11 @@ export default {
       );
     }
   },
+  unmounted() {
+    if (this.spec.imageUploader) {
+      bus.$off("richText/dropOrPaste");
+    }
+  },
   methods: {
     uploadImage: function (file, editor, cursorLocation) {
       if (!this.imageUploader) return;

package/components/fields/richText2.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { computed, defineComponent, getCurrentInstance, nextTick, onMounted, ref } from "vue";
+import { computed, defineComponent, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
 import 'quill-mention/dist/quill.mention.css';
@@ -272,6 +272,13 @@ export default defineComponent({
       }
     });
 
+    onBeforeUnmount(() => {
+      if (imageUploader) {
+        quill.root.removeEventListener('paste', handlePaste, false);
+        quill.root.removeEventListener('drop', handleDrop, false);
+      }
+    });
+
     return { producedValue, editor, files, rawTextProps };
   }
 });

package/components/mixins/styles.js

@@ -111,12 +111,6 @@ export default {
         triggerOnChange(this.$el.parentElement);
       }
     },
-    fieldModel: function (val) {
-      if (val === this.vuetifyEmptyString) {
-        val = "";
-      }
-
-    },
     spec: {
       handler(spec, oldSpec) {
         if (spec) {

package/components/panels/form.vue

@@ -135,7 +135,9 @@ export default {
         const onChange = this.spec.onChange || this.spec.onChangeAndLoad;
         this.formCtx = { form: this.$refs.form };
         const onChangeHandler = () => {
-          this.$refs.form.resetValidation();
+          if (this.$refs.form) {
+            this.$refs.form.resetValidation();
+          }
           this.formCtx = { form: this.$refs.form };
           if (onChange) this.$executeOnChange();
         };

package/components/popover.vue

@@ -56,6 +56,13 @@ export default {
             }
 
         },
+        $tearDown() {
+            bus.$off(`popover/close-${this.spec.key}`);
+            if (!this.spec.persistent) {
+                document.removeEventListener('click', this.handleClose);
+                window.removeEventListener('resize', () => this.close());
+            }
+        },
         handleClose(event) {
             let element = null;
             if (this.$refs.container) {

package/nav/appBar.vue

@@ -9,7 +9,7 @@
       <panels-responsive v-if="navBar.logo" :spec="navBar.logo" />
       <v-app-bar-title v-else-if="navBar.showTitle">{{
         page.title
-      }}</v-app-bar-title>
+        }}</v-app-bar-title>
     </div>
     <span style="padding-left: 10px;" v-if="navBar.showBreakpoint">
       <common-chip :spec="chipSpec" />
@@ -36,6 +36,7 @@
 <script>
 import ViewsAvatar from "../components/avatar.vue";
 import { vueApp } from "../store";
+import eventBus from "../utils/eventBus";
 
 export default {
   components: {
@@ -123,7 +124,7 @@ export default {
       });
     },
     triggerDrawer() {
-      this.$dispatchEvent("drawers/toggle");
+      eventBus.$emit("drawers/toggle");
     },
     // viewSourceEnabled: function () {
     //   // return process.env.NODE_ENV === "development";

package/nav/dialog.vue

@@ -47,7 +47,7 @@ import Http from "../utils/http";
 import Action from "../action";
 import FormPanel from "../components/panels/form.vue";
 import { confirmDirty, dialogs } from "../store";
-import { onMounted, ref } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import { usePasteable } from "../components/composable/pasteable";
 import { strandom } from "../components/helper.js";
 
@@ -58,14 +58,20 @@ export default {
     usePasteable(filePaster);
 
     const isFormDirty = ref(false);
+    const handler = (event) => {
+      const { dirty } = event.detail;
+      isFormDirty.value = dirty;
+      event.stopPropagation();
+    };
 
     onMounted(() => {
       const el = document.getElementById('__glib_dialog_body');
-      el.addEventListener('dirtyupdate', (event) => {
-        const { dirty } = event.detail;
-        isFormDirty.value = dirty;
-        event.stopPropagation();
-      });
+      el.addEventListener('dirtyupdate', handler);
+    });
+
+    onBeforeUnmount(() => {
+      const el = document.getElementById('__glib_dialog_body');
+      el.removeEventListener('dirtyupdate', handler);
     });
 
     return { filePaster, isFormDirty };

package/nav/drawer.vue

@@ -105,6 +105,9 @@ export default {
         this.updateState(data);
       });
     },
+    $unmounted() {
+      bus.$off("glib-drawers/toggle");
+    },
     updateState(state) {
       this.state = state;
     },

package/nav/drawerButton.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import eventBus from "../utils/eventBus";
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -12,7 +14,7 @@ export default {
   methods: {
     performAction(event) {
       // this.$el.dispatchEvent(new Event("drawers/clickButton", { bubbles: true }))
-      this.$dispatchEvent("drawers/clickButton", {});
+      eventBus.$emit("drawers/clickButton", {});
       this.$onClick(event);
     },
     buttonSpec(item) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.33.2",
+  "version": "4.34.3",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,13 +11,14 @@
   "dependencies": {
     "@floating-ui/dom": "^1.2.8",
     "@googlemaps/markerclusterer": "^2.5.0",
-    "@rails/actioncable": "^7.1.1",
-    "@rails/activestorage": "^7.1.1",
+    "@rails/actioncable": ">= 8.0.0",
+    "@rails/activestorage": ">= 8.0.0",
     "awesome-phonenumber": "2.15.0",
     "chart.js": "^4.3.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "chartjs-plugin-doughnutlabel-v3": "^1.2.0",
     "driver.js": "^1.3.1",
+    "eventemitter2": "^6.4.9",
     "flag-icons": "^7.2.3",
     "json-logic-js": "^2.0.0",
     "lodash.merge": "^4.6.2",
@@ -31,15 +32,14 @@
     "push.js": "^1.0.12",
     "quill": "2.0.3",
     "quill-mention": "^6.0.2",
-    "tiny-emitter": "^2.1.0",
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
     "v-phone-input": "^4.2.2",
-    "vue": "3.3.7",
+    "vue": "3.5.15",
     "vue-chartkick": "^1.1.0",
     "vue-social-sharing": "^4.0.0-alpha4",
     "vuedraggable": "^4.1.0",
-    "vuetify": "^3.6.12"
+    "vuetify": "3.8.6"
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.34",

package/store.js

@@ -55,7 +55,6 @@ export function confirmDirty() {
 }
 
 function glibEventHandler(e, closeAllFloating = true) {
-
     if (closeAllFloating) {
         closeAllDialog();
         closeAllPopover();
@@ -78,6 +77,8 @@ function glibEventHandler(e, closeAllFloating = true) {
             // Clear after we go past dirty prompt.
             GLib.component.clearData();
 
+            eventBus.$removeAllListener();
+
             const { onUnload } = jsonView.page;
             if (onUnload) {
                 Action.execute(onUnload, {});

package/utils/eventBus.js

@@ -1,11 +1,13 @@
 // eventBus.js
-import Emitter from 'tiny-emitter'
+import EventEmitter2 from "eventemitter2";
 
-const emitter = new Emitter()
+const emitter = new EventEmitter2({ delimiter: '-', maxListeners: 0 });
 
 export default {
     $on: (...args) => emitter.on(...args),
     $once: (...args) => emitter.once(...args),
     $off: (...args) => emitter.off(...args),
-    $emit: (...args) => emitter.emit(...args)
-}
+    $emit: (...args) => emitter.emit(...args),
+    $removeAllListener: (...args) => emitter.removeAllListeners(...args),
+    currentListenerCount: () => emitter.listeners().length
+};