glib-web 3.25.2 → 3.26.0

package/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
         "browser": true,
         "es2021": true
     },
-    "extends": "plugin:vue/vue3-essential",
+    "extends": ["plugin:vue/vue3-essential", "eslint:recommended"],
     "overrides": [
         {
             "env": {
@@ -25,10 +25,13 @@ module.exports = {
         "vue"
     ],
     "rules": {
-        "vue/multi-word-component-names": ["off"]
+        "vue/multi-word-component-names": ["off"],
+        "no-unused-vars": "warn"
     },
     "globals": {
         "GLib": "readonly",
-        "Utils": "readonly"
+        "Utils": "readonly",
+        "google": "readonly",
+        "Stripe": "readonly"
     }
 };

package/action.js

@@ -77,6 +77,12 @@ import ActionLogicsSet from "./actions/logics/set";
 
 import ActionListsAppend from "./actions/lists/append";
 
+import ActionBottomBannersOpen from "./actions/bottom_banners/open";
+import ActionBottomBannersClose from "./actions/bottom_banners/close";
+
+import ActionGlobalStatesWatch from "./actions/global_states/watch";
+import ActionGlobalStatesSet from "./actions/global_states/set";
+
 import { dialogs, vueApp } from "./store";
 
 const actions = {
@@ -154,7 +160,13 @@ const actions = {
 
   "logics/set": ActionLogicsSet,
 
-  "lists/append": ActionListsAppend
+  "lists/append": ActionListsAppend,
+
+  "bottomBanners/open": ActionBottomBannersOpen,
+  "bottomBanners/close": ActionBottomBannersClose,
+
+  "globalStates/watch": ActionGlobalStatesWatch,
+  "globalStates/set": ActionGlobalStatesSet
 };
 
 const customActions = {};
@@ -242,4 +254,5 @@ export default class Action {
   }
 }
 
+// TODO: not recommended
 window.Action = Action;

package/actions/auth/saveCsrfToken.js

@@ -1,3 +1,5 @@
+import Action from "../../action";
+
 export default class {
   execute(properties, component) {
     Utils.dom.setCsrf(properties["token"]);

package/actions/bottom_banners/close.js

@@ -0,0 +1,9 @@
+import { vueApp } from "../../store";
+
+export default class {
+  execute(properties, component) {
+    const { targetId } = properties;
+
+    delete vueApp.bottomBanners[targetId];
+  }
+}

package/actions/bottom_banners/open.js

@@ -0,0 +1,11 @@
+import { vueApp } from "../../store";
+
+export default class {
+  execute(properties, component) {
+    const { targetId, newView } = properties;
+
+    if (!targetId) console.error('targetId is required');
+
+    vueApp.bottomBanners[targetId] ||= newView;
+  }
+}

package/actions/components/find.js

@@ -1,3 +1,5 @@
+import Action from "../../action";
+
 export default class {
   execute(spec, component) {
     const target = GLib.component.findById(spec.targetId);

package/actions/components/findClosest.js

@@ -1,3 +1,5 @@
+import Action from "../../action";
+
 export default class {
   execute(spec, component) {
     const target = component.$closest(spec.view);

package/actions/components/replace.js

@@ -1,3 +1,5 @@
+import Action from "../../action";
+
 // Experimental. Can this be merged with `components_set` ?
 export default class {
   execute(spec, component) {

package/actions/fields/blur.js

@@ -1,4 +1,5 @@
 import { nextTick } from "vue";
+import Action from "../../action";
 
 export default class {
   execute(spec, component) {

package/actions/fields/focus.js

@@ -1,4 +1,5 @@
 import { nextTick } from "vue";
+import Action from "../../action";
 
 export default class {
   execute(spec, component) {

package/actions/global_states/set.js

@@ -0,0 +1,13 @@
+import { vueApp } from "../../store";
+import merge from "lodash.merge";
+
+export default class {
+  execute(properties) {
+    const { state, data } = properties;
+    vueApp[state] = merge(vueApp[state], data);
+
+    // workaround to trigger watcher
+    const random = (Math.random() + 1).toString(36).substring(7);
+    vueApp[state][random] = 'update!';
+  }
+}

package/actions/global_states/watch.js

@@ -0,0 +1,19 @@
+import { watch } from "vue";
+import { vueApp } from "../../store";
+import merge from "lodash.merge";
+import Action from "../../action";
+
+export default class {
+  execute(properties, component) {
+    const { state, onChange } = properties;
+
+    watch(vueApp[state], (value) => {
+      const formData = {
+        glib: { globalState: value }
+      };
+
+      const data = merge({}, onChange, { formData: formData });
+      Action.execute(data, component);
+    });
+  }
+}

package/actions/windows/close.js

@@ -1,4 +1,4 @@
-import { executeGlobalEvent, vueApp } from "../../store";
+import { vueApp, executeGlobalEvent } from "../../store";
 
 export default class {
   execute(properties, component) {

package/actions/windows/closeAll.js

@@ -4,8 +4,8 @@ import Type from "../../utils/type";
 export default class {
   execute(properties, component) {
     vueApp.richTextValues = {};
-    // TODO
-    // window.history.deleteAll()
+
+    Utils.history.destroy();
 
     Type.ifObject(properties["onClose"], it => {
       // Allow time for history.back() to complete, which is important for actions that need

package/app.vue

@@ -25,6 +25,13 @@
         </v-container>
       </v-main>
     </component>
+    <div :id="tooltipId">
+      <panels-responsive :spec="vueApp.tooltipSpec"></panels-responsive>
+    </div>
+    <div class="glib-bottomBanner">
+      <glib-component v-for="(bottomBanner, index) in Object.values(vueApp.bottomBanners)" :spec="bottomBanner"
+        :key="index"></glib-component>
+    </div>
   </v-app>
 </template>
 
@@ -39,6 +46,7 @@ import { useDirtyState } from "./components/composable/dirtyState";
 import { useSocket } from "./components/composable/socket";
 import { usePasteable } from "./components/composable/pasteable";
 import { computed } from "vue";
+import { TOOLTIP_ID } from "./constant";
 
 const { watchDirtyState } = useDirtyState();
 
@@ -46,8 +54,9 @@ export default {
   setup(props) {
     const filePaster = computed(() => props.page.filePaster);
     usePasteable(filePaster);
+    const tooltipId = TOOLTIP_ID;
 
-    return { vueApp };
+    return { vueApp, tooltipId };
   },
   components: {
     "nav-layout": NavLayout,
@@ -74,6 +83,9 @@ export default {
     footer() {
       return this.page.footer || {};
     },
+    bodyHeader() {
+      return this.page.bodyHeader || {};
+    },
     bodyFooter() {
       return this.page.bodyFooter || {};
     },
@@ -338,6 +350,12 @@ body,
   overflow-y: overlay;
 }
 
+.glib-bottomBanner {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 99;
+}
 
 /******/
 </style>

package/components/charts/series.js

@@ -1,11 +1,13 @@
 import { Chart, Colors } from "chart.js";
 import chartDataLabels from 'chartjs-plugin-datalabels';
 import doughnutLabel from 'chartjs-plugin-doughnutlabel-v3';
-import { Vue } from "../..";
+import { Vue, vueApp } from "../..";
 import { computePosition, flip, offset } from '@floating-ui/dom';
 
 import 'chartkick/chart.js';
 
+import { TOOLTIP_ID } from "../../constant";
+
 Chart.register(chartDataLabels);
 Chart.register(doughnutLabel);
 Chart.register(Colors);
@@ -14,7 +16,6 @@ import VueChartkick from 'vue-chartkick';
 import { computed } from "vue";
 Vue.use(VueChartkick);
 
-
 const multipleDataSeries = (dataSeries) => {
     return dataSeries.map((value) => {
         let points = null;
@@ -32,25 +33,20 @@ const multipleDataSeries = (dataSeries) => {
 const singleDataSeries = (dataSeries) => dataSeries.reduce((prev, curr) => Object.assign(prev, { [curr.title]: curr.value }), {});
 
 const getOrCreateTooltip = (chart) => {
-    let tooltipEl = chart.canvas.parentNode.querySelector('#_glib-chart-tooltip');
+    const tooltipEl = document.getElementById(TOOLTIP_ID);
     let referenceEl = chart.canvas.parentNode.querySelector('#_glib-chart-reference');
 
-    if (!tooltipEl) {
-        tooltipEl = document.createElement('div');
-        tooltipEl.id = '_glib-chart-tooltip';
-        tooltipEl.style.opacity = 1;
-        tooltipEl.style.pointerEvents = 'none';
-        tooltipEl.style.position = 'absolute';
-        tooltipEl.style.transition = 'all .1s ease';
-        tooltipEl.style.lineHeight = 1;
+    tooltipEl.style.opacity = 1;
+    tooltipEl.style.pointerEvents = 'none';
+    tooltipEl.style.position = 'fixed';
+    tooltipEl.style.transition = 'all .1s ease';
+    tooltipEl.style.lineHeight = 1;
 
-        chart.canvas.parentNode.appendChild(tooltipEl);
-    }
 
     if (!referenceEl) {
         referenceEl = document.createElement('div');
         referenceEl.id = '_glib-chart-reference';
-        referenceEl.style.position = 'absolute';
+        referenceEl.style.position = 'fixed';
         referenceEl.style.width = '1px';
         referenceEl.style.height = '1px';
         referenceEl.style.opacity = 0;
@@ -67,7 +63,7 @@ const externalTooltipHandler = (multiple, dataSeries) => {
 
         if (!tooltipData) return;
 
-        const innerHTML = tooltipData.tooltip;
+        const jsonView = tooltipData.tooltip;
 
         // Tooltip Element
         const { chart, tooltip } = context;
@@ -80,7 +76,7 @@ const externalTooltipHandler = (multiple, dataSeries) => {
         }
 
         if (tooltip.body) {
-            tooltipEl.innerHTML = innerHTML;
+            vueApp.tooltipSpec = jsonView;
         }
 
         const position = chart.canvas.getBoundingClientRect();

package/components/composable/dirtyState.js

@@ -1,5 +1,5 @@
-import { reactive, watch, watchEffect } from "vue";
-import { glibevent, ctx, dialogs } from "../../store";
+import { reactive, watchEffect } from "vue";
+import { glibevent, ctx } from "../../store";
 import { fieldModels } from "./conditional";
 
 export const dirtySpecs = reactive({});

package/components/composable/dropable.js

@@ -60,16 +60,41 @@ function useDropableUtils() {
 }
 
 function useFilesState(files) {
-  const uploading = computed(() => Object.values(files.value).reduce((prev, curr) => prev || curr.status == 'pending', false));
-  const uploaded = computed(() => Object.values(files.value).reduce((prev, curr) => prev && !!curr.signedId, true));
+  const uploading = computed(() => {
+    return Object.values(files.value).length > 0 ? Object.values(files.value).reduce((prev, curr) => prev || curr.status == 'pending', false) : true;
+  });
+  const uploaded = computed(() => {
+    return Object.values(files.value).length > 0 ? Object.values(files.value).reduce((prev, curr) => prev && !!curr.signedId, true) : false;
+  });
+  const uploadingFileLength = computed(() => Object.values(files.value).reduce((prev, curr) => {
+    if (curr.status == 'pending') prev = prev + 1;
+    return prev;
+  }, 0));
+  const uploadedFileLength = computed(() => Object.values(files.value).reduce((prev, curr) => {
+    if (!!curr.signedId && curr.status == 'completed') prev = prev + 1;
+    return prev;
+  }, 0));
+
+  return { uploading, uploaded, uploadingFileLength, uploadedFileLength };
+}
 
-  return { uploading, uploaded };
+function submitOnAllUploaded({ url, formData, files }) {
+  const { uploaded } = useFilesState(files);
+  return watch(uploaded, (val) => {
+    if (val) {
+      GLib.action.execute({
+        action: 'http/post',
+        url: url.value,
+        formData: formData.value
+      }, {});
+    }
+  });
 }
 
 function setBusyWhenUploading({ files }) {
   const { uploading } = useFilesState(files);
 
-  watch(uploading, (val, oldVal) => {
+  watch(uploading, (val) => {
     if (val) {
       vueApp.indicator = true;
     } else {
@@ -90,15 +115,10 @@ const showError = (options) => {
     {}
   );
 };
-function uploadFiles({ droppedFiles, files, directUploadUrl, accepts = {}, responseMessages = {}, container }) {
+function uploadFiles({ droppedFiles, files, spec, container }) {
+  let { responseMessages, accepts } = spec;
+  responseMessages ||= {};
   const { maxFileLength } = accepts;
-  // const droppedFilesSizeInByte = Array.from(droppedFiles).reduce((prev, curr) => prev + curr.size, 0);
-
-  // if (droppedFilesSizeInByte > maxFileSize * 1000) {
-  //   showError(accepts.maxFileSizeErrorText);
-
-  //   return;
-  // }
 
   if (droppedFiles.length > maxFileLength) {
     showError(accepts.maxFileLengthErrorText);
@@ -112,51 +132,60 @@ function uploadFiles({ droppedFiles, files, directUploadUrl, accepts = {}, respo
     // show new dropped file and track progress
     const key = makeKey();
     files.value[key] = new Item({ el: droppedFiles[index], status: 'pending' });
+    uploadOneFile({ files, key, spec, container });
+  }
+}
 
-    const uploader = new Uploader(files.value[key].el, directUploadUrl, files.value[key].progress);
+function uploadOneFile({ files, key, spec, container, onAfterUploaded }) {
+  const { directUploadUrl, accepts } = spec;
+  let responseMessages = spec.responseMessages || {};
+  const uploader = new Uploader(files.value[key].el, directUploadUrl, files.value[key].progress);
 
-    // track progress
-    uploader.directUploadWillStoreFileWithXHR = (request) => {
-      request.upload.addEventListener("progress", event => {
-        files.value[key].progress.value = (event.loaded / event.total) * 100;
-      });
+  // track progress
+  uploader.directUploadWillStoreFileWithXHR = (request) => {
+    request.upload.addEventListener("progress", event => {
+      files.value[key].progress.value = (event.loaded / event.total) * 100;
+    });
 
-      // can be use for aborting request
-      files.value[key].xhr = request;
-    };
+    // can be use for aborting request
+    files.value[key].xhr = request;
+  };
 
-    // validate per file, skip if invalid
-    if (!uploader.validateFile({ accepts: accepts })) {
-      delete files.value[key];
-      continue;
-    }
+  // validate per file, skip if invalid
+  if (!uploader.validateFile({ accepts: accepts })) {
+    delete files.value[key];
+  }
 
-    // upload per file
-    uploader.start((error, blob) => {
-      if (!error) {
-        Object.assign(files.value[key], {
-          status: 'completed',
-          signedId: blob.signed_id,
-          message: responseMessages['200']
-        });
-        // trigger form.vue onchange
-        if (container && container.value) {
-          triggerOnChange(container.value);
-        }
-      } else {
-        const message = responseMessages[error.slice(-3) || 'else'];
-        Object.assign(files.value[key], {
-          status: 'failed',
-          message: message
-        });
+  // upload per file
+  uploader.start((error, blob) => {
+    if (!error) {
+      Object.assign(files.value[key], {
+        status: 'completed',
+        signedId: blob.signed_id,
+        message: responseMessages['200']
+      });
+      if (onAfterUploaded) {
+        onAfterUploaded(files.value[key]);
       }
-    });
-  }
+
+      // trigger form.vue onchange
+      if (container && container.value) {
+        triggerOnChange(container.value);
+      }
+    } else {
+      const message = responseMessages[error.slice(-3) || 'else'];
+      Object.assign(files.value[key], {
+        status: 'failed',
+        message: message
+      });
+    }
+  });
 }
 
-function useDropUpload({ accepts, onFinishUpload, onDragStyle, container, directUploadUrl, fileSelect, files }) {
+function useDropUpload({ container, fileSelect, files, spec, uploader }) {
+  const { onDragStyle } = spec;
   onMounted(() => {
-    setBusyWhenUploading({ files });
+    uploader.setBusyWhenUploading({ files });
 
     // handle style changes
     let dragEl = null;
@@ -174,26 +203,22 @@ function useDropUpload({ accepts, onFinishUpload, onDragStyle, container, direct
     container.value.ondragover = (event) => event.preventDefault();
     container.value.ondrop = (event) => {
       event.preventDefault();
-      uploadFiles({
+      uploader.uploadFiles({
         droppedFiles: event.dataTransfer.files,
-        accepts,
         container,
-        directUploadUrl,
         files,
-        responseMessages: {}
+        spec
       });
       container.value.classList.remove(...onDragStyle);
     };
 
     container.value.onclick = (event) => {
       const onchange = () => {
-        uploadFiles(
+        uploader.uploadFiles(
           {
             droppedFiles: event.target.files,
-            files: files,
-            directUploadUrl,
-            accepts,
-            responseMessages: {},
+            files,
+            spec,
             container
           }
         );
@@ -202,16 +227,8 @@ function useDropUpload({ accepts, onFinishUpload, onDragStyle, container, direct
       fileSelect.value.onchange = onchange;
       fileSelect.value.click();
     };
-
-    // handle when all file uploaded, all files have signedIds
-    const { uploaded } = useFilesState(files);
-    watch(uploaded, (val, oldVal) => {
-      if (val) {
-        nextTick(() => onFinishUpload(Object.values(files.value).map((file) => file.signedId)));
-      }
-    });
   });
 
-};
+}
 
-export { useDropUpload, useDropableUtils, setBusyWhenUploading, uploadFiles, useFilesState };
+export { useDropUpload, useDropableUtils, setBusyWhenUploading, submitOnAllUploaded, uploadFiles, uploadOneFile, useFilesState };

package/components/composable/gmap.js

@@ -32,7 +32,7 @@ export function useAutocomplete({ inputRef, options, onPlaceChanged }) {
   return { autocompleteInstance };
 }
 
-export function useGmap({ mapRef, infoWindowRef, options, locations, showCluster = false, showDirection = false }) {
+export function useGmap({ mapRef, infoWindowRef, options, locations, showCluster = false }) {
   let mapInstance = null;
   const markers = ref([]);
   const cluster = ref({});

package/components/composable/pasteable.js

@@ -1,32 +1,26 @@
-import { onMounted, ref, watch } from "vue";
-import { uploadFiles, useFilesState, setBusyWhenUploading, useDropableUtils } from "./dropable";
+import { computed, onMounted, ref, watch } from "vue";
+import * as dropUploader from "./dropable";
+import * as delegateUploader from "./upload_delegator";
 
-const { signedIds } = useDropableUtils();
+const { signedIds } = dropUploader.useDropableUtils();
 
 const onPaste = async (event, filePaster) => {
-  const { directUploadUrl, accepts, url, inputName } = filePaster;
+  const { url, inputName, strategy } = filePaster;
   const pastedFiles = event.clipboardData.files;
   if (pastedFiles.length <= 0) return;
 
   const files = ref({});
-  setBusyWhenUploading({ files });
-  const { uploaded } = useFilesState(files);
-  watch(uploaded, (val) => {
-    if (val) {
-      GLib.action.execute({
-        action: 'http/post',
-        url,
-        formData: inputName ? { [inputName]: { signed_ids: signedIds(files) } } : { signed_ids: signedIds(files) }
-      }, {});
-      files.value = {};
-    }
-  });
-  uploadFiles({
+  files.value = {};
+
+  const uploader = strategy == 'delegate' ? delegateUploader : dropUploader;
+
+  uploader.setBusyWhenUploading({ files });
+  const formData = computed(() => inputName ? { [inputName]: { signed_ids: signedIds(files) } } : { signed_ids: signedIds(files) });
+  uploader.submitOnAllUploaded({ files, formData, url: { value: url } });
+  uploader.uploadFiles({
     droppedFiles: pastedFiles,
     files,
-    accepts,
-    directUploadUrl,
-    responseMessages: {}
+    spec: filePaster
   });
 
 };
@@ -36,7 +30,7 @@ let handler = () => { };
 function usePasteable(filePaster) {
   handler = (event) => onPaste(event, filePaster.value);
   onMounted(() => {
-    watch(filePaster, (val, oldVal) => {
+    watch(filePaster, (val) => {
       if (val) {
         document.addEventListener('paste', handler);
       } else {

package/components/composable/socket.js

@@ -29,9 +29,10 @@ class SocketHandler {
   }
 
   get component() {
-    if (this.targetId) {
-      return GLib.component.findById(this.targetId);
+    if (!this.targetId) {
+      return null;
     }
+    return GLib.component.findById(this.targetId);
   }
 }
 class ExampleSocketHandler extends SocketHandler {
@@ -109,7 +110,7 @@ const useSocket = (config, defaultConsumer = null) => {
           rejected() {
             handler.rejected();
           },
-          disconnected({ willAttemptReconnect: boolean }) {
+          disconnected({ willAttemptReconnect }) {
             handler.disconnected();
           }
         }

package/components/composable/upload_delegator.js

@@ -0,0 +1,24 @@
+import { vueApp } from "../../store";
+import { useDropableUtils } from "./dropable";
+
+const { makeKey } = useDropableUtils();
+
+function uploadFiles(obj) {
+  const { droppedFiles, spec } = obj;
+  Object.assign(
+    vueApp.uploader,
+    {
+      files: Array.from(droppedFiles).reduce((prev, curr) => {
+        prev[makeKey()] = curr;
+
+        return prev;
+      }, {}),
+      spec: spec
+    }
+  );
+}
+
+function submitOnAllUploaded(obj) { }
+function setBusyWhenUploading(obj) { }
+
+export { uploadFiles, submitOnAllUploaded, setBusyWhenUploading };

package/components/fields/multiUpload.vue

@@ -196,21 +196,23 @@
 <script>
 import { ref, computed, defineComponent, watch, getCurrentInstance } from 'vue';
 import { VIcon } from 'vuetify/components';
-import { setBusyWhenUploading, useDropableUtils, uploadFiles, useFilesState } from "../composable/dropable";
+import * as dropUploader from "../composable/dropable";
+import * as delegateUploader from "../composable/upload_delegator";
 import { triggerOnChange } from "../composable/form";
 import { nextTick } from "vue";
-const { makeKey, Item } = useDropableUtils();
+const { makeKey, Item, signedIds } = dropUploader.useDropableUtils();
 
 export default defineComponent({
   props: { spec: { type: Object } },
   components: { VIcon },
   setup(props) {
+    const uploader = props.spec.strategy == 'delegate' ? delegateUploader : dropUploader;
+
     const fileSelect = ref(null);
     const container = ref(null);
     const icon = ref(null);
     const { ctx } = getCurrentInstance();
 
-    const responseMessages = props.spec.responseMessages;
     const uploadTitle = props.spec.uploadTitle || 'File added';
 
     const files = ref({});
@@ -232,15 +234,20 @@ export default defineComponent({
     }
 
     if (props.spec.onFinishUpload) {
-      const { uploaded } = useFilesState(files);
-      watch(uploaded, (val, oldVal) => {
+      const { uploaded } = dropUploader.useFilesState(files);
+      watch(uploaded, (val) => {
         if (val) {
           nextTick(() => GLib.action.execute(props.spec.onFinishUpload, ctx));
         }
       });
     }
 
-    setBusyWhenUploading({ files });
+    uploader.setBusyWhenUploading({ files });
+    if (props.spec.url) {
+      const formData = computed(() => ({ signed_ids: signedIds(files) }));
+      const url = computed(() => props.spec.url);
+      uploader.submitOnAllUploaded({ files, url, formData });
+    }
 
     const showUploadedFile = computed(() => {
       return Object.keys(files.value).length > 0;
@@ -248,13 +255,11 @@ export default defineComponent({
 
     function handleDrop(e) {
       e.preventDefault();
-      uploadFiles(
+      uploader.uploadFiles(
         {
           droppedFiles: e.dataTransfer.files,
           files: files,
-          directUploadUrl: props.spec.directUploadUrl,
-          accepts: props.spec.accepts,
-          responseMessages: responseMessages,
+          spec: props.spec,
           container: container
         }
       );
@@ -296,13 +301,11 @@ export default defineComponent({
 
     function handleClick(e) {
       const onchange = () => {
-        uploadFiles(
+        uploader.uploadFiles(
           {
             droppedFiles: e.target.files,
             files: files,
-            directUploadUrl: props.spec.directUploadUrl,
-            accepts: props.spec.accepts,
-            responseMessages: responseMessages,
+            spec: props.spec,
             container: container
           }
         );
@@ -323,7 +326,6 @@ export default defineComponent({
       handleClick,
       handleRemoveFile,
       showUploadedFile,
-      responseMessages,
       uploadTitle,
       props
     };

package/components/mixins/events.js

@@ -166,21 +166,6 @@ export default {
     $update() {
       this.$ready();
     },
-    async $recursiveUpdate(stack) {
-      // const children = this.$children;
-      if (this.spec) {
-        // this.$update();
-        // this.$forceUpdate();
-
-        // Execute on next tick to ensure that the child has received the updated spec.
-        // $children is removed in vue 3
-        // this.$nextTick(() => {
-        //   this.$children.find(child => {
-        //     child.$recursiveUpdate();
-        //   });
-        // });
-      }
-    },
     $dispatchEvent(name, data) {
       const event = new Event(name, { bubbles: true });
 

package/components/mixins/styles.js

@@ -2,6 +2,7 @@ import Hash from "../../utils/hash";
 import { fieldModels, watchFieldModels } from "../composable/conditional";
 import { dirtySpecs } from "../composable/dirtyState";
 import { determineColor } from "../../utils/constant";
+import Action from "../../action";
 
 const NUMBER_PRECISION = 2;
 const isNeedToBeFixed = (val, component) => {
@@ -54,7 +55,7 @@ export default {
     }
   },
   watch: {
-    fieldModel: function (val, oldVal) {
+    fieldModel: function (val) {
       if (val === this.vuetifyEmptyString) {
         val = "";
       }
@@ -140,6 +141,7 @@ export default {
           if (oldValue != value) {
             this.$nextTick(() => {
               // Call either onIfTrue or onIfFalse.
+              if (value == null) return;
               Action.execute(this.spec[`onIf${value.toString().capitalize()}`], this);
             });
           }

package/components/tabBar.vue

@@ -2,11 +2,13 @@
   <div :style="'width: 100%'" :class="$classes()">
     <v-tabs v-model="tab" :bg-color="spec.backgroundColor || 'white'" slider-color="primary" color="primary" show-arrows
       :height="spec.height || 60" :grow="$classes().includes('no-grow') ? false : true">
-      <v-tab v-for="(item, index) in  spec.buttons" @click="handleClick(index)" :key="index" height="100%" :value="index">
+      <v-tab v-for="(item, index) in spec.buttons" @click="handleClick(index)" :key="index" height="100%"
+        :value="index">
         <common-badge :spec="item">
           <div class="tab-content">
-            <common-icon :class="index == spec.activeIndex ? 'text-primary' : null" :spec="item.icon" v-if="item.icon" />
-              <span :style="{ marginLeft: '2px' }" :class="index == spec.activeIndex ? 'text-primary' : null">{{ item.text
+            <common-icon :class="index == spec.activeIndex ? 'text-primary' : null" :spec="item.icon"
+              v-if="item.icon" />
+            <span :style="{ marginLeft: '2px' }" :class="index == spec.activeIndex ? 'text-primary' : null">{{ item.text
               }}</span>
           </div>
         </common-badge>
@@ -46,14 +48,14 @@ export default {
   methods: {
     handleClick(index) {
       this.$nextTick(function () {
-        const activeTab = this.buttons[index]
-        const onClick = activeTab?.onClick
+        const activeTab = this.buttons[index];
+        const onClick = activeTab?.onClick;
 
         if (onClick) {
-          Action.execute(onClick, this)
+          Action.execute(onClick, this);
         }
-        this.tab = index
-      })
+        this.tab = index;
+      });
     },
     $ready() {
       if (this.spec.activeIndex) {
@@ -84,6 +86,7 @@ export default {
 <!-- Overridable -->
 <style lang="scss" scoped>
 .tab-content {
+  display: flex;
   padding: 5px;
 }
 </style>

package/components/treeView.vue

@@ -91,18 +91,20 @@
 <script>
 import { computed, getCurrentInstance } from "vue";
 import { defineComponent, ref } from "vue";
-import { uploadFiles, useFilesState, setBusyWhenUploading, useDropableUtils } from "./composable/dropable";
+import * as dropUploader from "./composable/dropable";
+import * as delegateUploader from "./composable/upload_delegator";
 import { watch } from "vue";
 import merge from 'lodash.merge';
-const { signedIds } = useDropableUtils();
+const { signedIds } = dropUploader.useDropableUtils();
 
 export default defineComponent({
   props: { spec: { type: Object, required: true } },
   setup(props) {
+
     const selected = computed(() => props.spec.selected);
     const { ctx } = getCurrentInstance();
     const files = ref({});
-    const { uploaded } = useFilesState(files);
+
     let dropData = null;
 
     const makeFormData = (dragData) => {
@@ -116,20 +118,15 @@ export default defineComponent({
       return merge(dropData, dragData);
     };
 
-    setBusyWhenUploading({ files });
-
+    const uploader = props.spec.strategy == 'delegate' ? delegateUploader : dropUploader;
+    uploader.setBusyWhenUploading({ files });
     // if all file uploaded send http post
-    watch(uploaded, (val) => {
-      if (val) {
-        GLib.action.execute({
-          action: 'http/post',
-          url: props.spec.url,
-          formData: makeFormData({ signed_ids: signedIds(files) })
-        }, ctx);
-        dropData = null;
-        files.value = {};
-      }
-    });
+    if (props.spec.url) {
+      const formData = computed(() => makeFormData({ signed_ids: signedIds(files) }));
+      const url = computed(() => props.spec.url);
+      uploader.submitOnAllUploaded({ url, formData, files });
+    }
+
 
     const makeItems = () => (props.spec.items.map((item) => {
       if (selected.value == item.id) {
@@ -161,7 +158,7 @@ export default defineComponent({
       }
     });
 
-    const handleDragLeave = (event, item) => {
+    const handleDragLeave = (event) => {
       if (!event.target || !event.relatedTarget) return false;
       if (event.target.contains(event.relatedTarget) || event.relatedTarget.contains(event.target)) return false;
       lastDragItem.value = null;
@@ -178,12 +175,11 @@ export default defineComponent({
       // 1. files
       // 2. other components
       if (event.dataTransfer.files.length > 0) {
-        uploadFiles({
+        files.value = {};
+        uploader.uploadFiles({
           droppedFiles: event.dataTransfer.files,
-          accepts: props.spec.accepts,
-          directUploadUrl: props.spec.directUploadUrl,
+          spec: props.spec,
           files: files,
-          responseMessages: {}
         });
       } else {
         const dragData = JSON.parse(event.dataTransfer.getData('text'));

package/constant.js

@@ -0,0 +1 @@
+export const TOOLTIP_ID = '_glib-tooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.25.2",
+  "version": "3.26.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -38,7 +38,7 @@
   "devDependencies": {
     "@types/chart.js": "^2.9.34",
     "eslint": "^8.36.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^9.26.0",
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }

package/store.js

@@ -15,7 +15,10 @@ export const vueApp = reactive({
     temp: {},
     richTextValues: {},
     draggedComponent: null,
-    lastNavigationCount: null
+    lastNavigationCount: null,
+    tooltipSpec: {},
+    bottomBanners: {},
+    uploader: {}
 });
 
 export const dialogs = reactive([]);

package/utils/history.js

@@ -69,7 +69,6 @@ export default class {
 
       const data = event.state;
       data.content.__poppedState = true;
-      // 
 
       vueApp.page = data.content;
       vueApp.lastNavigationCount = data.navigationCount;
@@ -100,4 +99,14 @@ export default class {
       return false;
     }
   }
+
+  static destroy() {
+    if (this.navigationCount <= 0) return false;
+
+    window.onpopstate = () => { };
+    window.history.go(-this.navigationCount);
+    this.restoreOnBackOrForward();
+
+    return true;
+  }
 }

package/components/mixins/chart/annotation.js

@@ -1,73 +0,0 @@
-export default {
-  data() {
-    return {
-      options: {
-        annotation: {
-          drawTime: "afterDraw",
-          events: ["mouseleave", "mouseenter"],
-          annotations: []
-        }
-      }
-    };
-  },
-  created() {
-    if (this.spec.lineVertical) {
-      this.options.annotation.annotations = this.spec.lineVertical.map(
-        (element, index) => this.annotation(element, index)
-      );
-    }
-  },
-  methods: {
-    annotation(options, index) {
-      const { text, x } = options;
-
-      return {
-        type: "line",
-        mode: "vertical",
-        scaleID: "x-axis-0",
-        value: new Date(x).getTime(),
-        borderColor: "rgba(0,0,255,0.3)",
-        borderWidth: 3,
-        borderDash: [5, 10],
-        label: {
-          content: text,
-          enabled: true,
-          position: "top",
-          backgroundColor: "rgba(0,0,0,0.3)"
-        },
-        onMouseenter: function(e) {
-          Object.assign(
-            this.chartInstance.options.annotation.annotations[index],
-            { borderColor: "rgba(0,0,255,0.8)" },
-            {
-              label: {
-                content: text,
-                enabled: true,
-                position: "top",
-                backgroundColor: "rgba(0,0,0,0.8)"
-              }
-            }
-          );
-
-          this.chartInstance.update();
-        },
-        onMouseleave: function(e) {
-          Object.assign(
-            this.chartInstance.options.annotation.annotations[index],
-            { borderColor: "rgba(0,0,255,0.3)" },
-            {
-              label: {
-                content: text,
-                enabled: true,
-                position: "top",
-                backgroundColor: "rgba(0,0,0,0.3)"
-              }
-            }
-          );
-
-          this.chartInstance.update();
-        }
-      };
-    }
-  }
-};

package/components/mixins/chart/tooltip.js

@@ -1,31 +0,0 @@
-export default {
-  data() {
-    return {
-      options: {
-        dataName: "",
-        tooltips: {
-          intersect: false,
-          callbacks: {
-            afterLabel: this.afterLabel
-          }
-        }
-      }
-    };
-  },
-  methods: {
-    afterLabel(tooltipItem) {
-      if (!this.dataName) {
-        console.error("dataName is empty");
-      }
-
-      const selectedSeries = this.spec[this.dataName][tooltipItem.datasetIndex];
-      const point = selectedSeries.points.find(
-        point => point.x == tooltipItem.xLabel
-      );
-      const tooltip = point ? point.tooltip : null;
-      if (tooltip) {
-        return tooltip;
-      }
-    }
-  }
-};