glib-web 4.30.1 → 4.32.0

package/actions/browsers/detectCountry.js

@@ -1,49 +1,56 @@
 
 
-import HttpGet from '../http/get';
 import countries from "moment-timezone/data/meta/latest.json";
 import Action from "../../action";
+import http from "../../utils/http";
+import merge from 'lodash.merge';
 
 export default class {
   async execute(spec, component) {
     const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const countriesWithTimeZone = Object.values(countries.countries).filter((country) => country.zones.includes(timeZone));
 
-    let data;
-
     if (countriesWithTimeZone.length === 1) {
-      data = Object.assign({}, spec.onDetect, {
-        formData: {
-          country: countriesWithTimeZone[0].name,
-          iso: countriesWithTimeZone[0].abbr
-        }
-      });
+      this.handleWithTimezone(countriesWithTimeZone, spec, component);
     } else {
-      const httpGet = new HttpGet();
-
-      const specIp = {
-        url: 'http://ip-api.com/json/',
-      };
+      this.handleWithIp(spec, component);
+    }
+  }
 
-      try {
-        const { page } = await httpGet.execute(specIp, component);
+  handleWithTimezone(countriesWithTimeZone, spec, component) {
+    const data = merge({}, spec.onDetect, {
+      formData: {
+        country: {
+          iso_short_name: countriesWithTimeZone[0].name,
+          alpha2: countriesWithTimeZone[0].abbr
+        }
+      }
+    });
+    Action.execute(data, component);
+  }
 
-        data = Object.assign({}, spec.onDetect, {
-          formData: {
-            country: page.country,
-            iso: page.countryCode,
+  handleWithIp(spec, component) {
+    http.execute(
+      { url: 'http://ip-api.com/json/' },
+      'GET',
+      component,
+      (page) => {
+        const data = merge(
+          {},
+          spec.onDetect,
+          {
+            formData: {
+              country: {
+                iso_short_name: page.country,
+                alpha2: page.countryCode
+              }
+            }
           }
-        });
-      } catch ({ error }) {
-        console.error('Error:', error);
-        return;
-      }
-    }
+        );
 
-    if (data) {
-      Action.execute(data, component);
-    } else {
-      console.error('Data is undefined');
-    }
+        Action.execute(data, component);
+      },
+      (err) => console.error(err)
+    );
   }
 }

package/actions/fields/reset.js

@@ -1,16 +1,12 @@
 import { nextTick } from "vue";
+import { forEachTargets } from "../util";
 
 export default class {
   execute(properties, component) {
-    const target = GLib.component.findById(properties.targetId);
-
-    if (!target) {
-      console.warn("Component ID not found", properties.targetId);
-      return;
-    }
-
-    target.action_resetValue();
-
+    forEachTargets(
+      properties,
+      (component) => component.action_resetValue()
+    );
     nextTick(() => {
       GLib.action.execute(properties["onReset"], component);
     });

package/actions/http/delete.js

@@ -1,7 +1,7 @@
+import { httpExecuteWithRetry } from "./retry";
+
 export default class {
   execute(properties, controller) {
-    GLib.http.execute(properties, "DELETE", controller, response =>
-      GLib.action.handleResponse(response, controller)
-    );
+    httpExecuteWithRetry('DELETE', properties, controller);
   }
 }

package/actions/http/get.js

@@ -1,30 +1,5 @@
-import { settings } from "../../utils/settings";
+import { retryWithDelay } from "./retry";
 
-const wait = ms => new Promise((resolve) => {
-  setTimeout(() => resolve(), ms);
-});
-
-const retryWithDelay = async (
-  fn, retries = settings.httpGet.retries, interval = settings.httpGet.interval,
-  finalErr = 'Retry failed'
-) => {
-  try {
-    // try
-    await fn();
-  } catch (err) {
-    // if no retries left
-    // throw error
-    if (retries <= 0) {
-      return Promise.reject(finalErr);
-    }
-
-    //delay the next call
-    await wait(interval);
-
-    //recursively call the same func
-    return retryWithDelay(fn, (retries - 1), interval, finalErr);
-  }
-};
 
 export default class {
   execute(spec, component) {

package/actions/http/patch.js

@@ -1,8 +1,7 @@
+import { httpExecuteWithRetry } from "./retry";
 
 export default class {
   execute(properties, controller, params) {
-    GLib.http.execute(properties, "PATCH", controller, response =>
-      GLib.action.handleResponse(response, controller)
-    );
+    httpExecuteWithRetry('PATCH', properties, controller);
   }
 }

package/actions/http/post.js

@@ -1,8 +1,7 @@
+import { httpExecuteWithRetry } from "./retry";
+
 export default class {
   execute(properties, controller, params) {
-
-    GLib.http.execute(properties, "POST", controller, response =>
-      GLib.action.handleResponse(response, controller)
-    );
+    httpExecuteWithRetry('POST', properties, controller);
   }
 }

package/actions/http/put.js

@@ -1,7 +1,7 @@
+import { httpExecuteWithRetry } from "./retry";
+
 export default class {
   execute(properties, controller, params) {
-    GLib.http.execute(properties, "PUT", controller, response =>
-      GLib.action.handleResponse(response, controller)
-    );
+    httpExecuteWithRetry('PUT', properties, controller);
   }
 }

package/actions/http/retry.js

@@ -0,0 +1,54 @@
+import Action from "../../action";
+import http from "../../utils/http";
+import { settings } from "../../utils/settings";
+
+const wait = ms => new Promise((resolve) => {
+  setTimeout(() => resolve(), ms);
+});
+
+const retryWithDelay = async (
+  fn, retries = settings.httpGet.retries, interval = settings.httpGet.interval,
+  finalErr = 'Retry failed'
+) => {
+  try {
+    // try
+    await fn();
+  } catch (err) {
+    // if no retries left
+    // throw error
+    if (retries <= 0) {
+      return Promise.reject(finalErr);
+    }
+
+    //delay the next call
+    await wait(interval);
+
+    //recursively call the same func
+    return retryWithDelay(fn, (retries - 1), interval, finalErr);
+  }
+};
+
+const httpExecuteWithRetry = (methodName, spec, component) => {
+  const func = async () => {
+    let err;
+    const { promise } = http.execute(
+      spec,
+      methodName,
+      component,
+      response => {
+        Action.handleResponse(response, component);
+      },
+      error => {
+        if (error == 'Server error') err = new Error(error);
+      }
+    );
+
+    await promise;
+
+    if (err) throw err;
+  };
+
+  retryWithDelay(func, spec.retryLimit);
+};
+
+export { retryWithDelay, httpExecuteWithRetry };

package/actions/logics/run.js

@@ -1,16 +1,16 @@
 import jsonLogic from 'json-logic-js';
-import { fieldModels } from "../../components/composable/conditional";
+import { getAllFormData } from "../../components/composable/form";
 
 export default class {
   execute(spec, component) {
-    let condition = spec.condition
+    let condition = spec.condition;
 
-    const dynamicGroupEntry = component.$closest("fields/internalDynamicGroupEntry");
-    if (dynamicGroupEntry) {
-      condition = dynamicGroupEntry.$populateIndexes(condition);
-    }
+    // const dynamicGroupEntry = component.$closest("fields/internalDynamicGroupEntry");
+    // if (dynamicGroupEntry) {
+    //   condition = dynamicGroupEntry.$populateIndexes(condition);
+    // }
 
-    const result = jsonLogic.apply(condition, Object.assign({}, fieldModels, spec.variables));
+    const result = jsonLogic.apply(condition, Object.assign({}, getAllFormData(), spec.variables));
     if (result) {
       this.executeWithPassthroughParams(spec.onTrue, spec, component);
     } else {

package/actions/util.js

@@ -0,0 +1,22 @@
+export function forEachTargets(spec, cb) {
+  if (spec.targetId) {
+    const comp = getTarget(spec.targetId);
+    cb(comp);
+    return;
+  }
+
+  const components = spec.targetIds.map((id) => getTarget(id)).filter((comp) => comp);
+
+  components.forEach((comp) => cb(comp));
+}
+
+function getTarget(id) {
+  const target = GLib.component.findById(id);
+
+  if (!target) {
+    console.warn("Component ID not found", id);
+    return;
+  }
+
+  return target;
+}

package/app.vue

@@ -391,6 +391,19 @@ body,
 }
 
 /******/
+
+// override textarea style
+.fields-textarea .v-input--disabled {
+  pointer-events: unset;
+
+  .v-field--disabled {
+    pointer-events: unset;
+  }
+}
+
+.fields-textarea .v-input--readonly {
+  pointer-events: unset;
+}
 </style>
 
 <style scoped>

package/components/composable/form.js

@@ -38,6 +38,12 @@ const getFormData = (el, ignoredFields = new Set()) => {
   return obj;
 };
 
+function getAllFormData() {
+  return Array.from(document.querySelectorAll('form')).reduce((prev, curr) => {
+    return Object.assign({}, prev, getFormData(curr));
+  }, {});
+}
+
 function useGlibForm({ formRef }) {
   const initFormData = ref({});
   const currentFormData = ref({});
@@ -112,4 +118,4 @@ function useGlibInput({ props, cacheValue = true }) {
 
 }
 
-export { setBusy, triggerOnChange, triggerOnInput, useGlibForm, useGlibInput, getFormData };
+export { setBusy, triggerOnChange, triggerOnInput, useGlibForm, useGlibInput, getFormData, getAllFormData };

package/components/fields/_patternText.vue

@@ -2,8 +2,8 @@
   <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <button-date v-if="spec.template" :type="type" :spec="spec" @datePicked="handleDatePicked"></button-date>
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
-    <v-text-field v-else :color="gcolor" v-model="fieldModel" :name="fieldName" :label="spec.label" :hint="spec.hint"
-      :type="type" :readonly="spec.readOnly" :disabled="inputDisabled" :min="sanitizeValue(spec.min)"
+    <v-text-field v-else ref="field" :color="gcolor" v-model="fieldModel" :name="fieldName" :label="spec.label"
+      :hint="spec.hint" :type="type" :readonly="spec.readOnly" :disabled="inputDisabled" :min="sanitizeValue(spec.min)"
       :max="sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()" :style="$styles()"
       :density="$classes().includes('compact') ? 'compact' : 'default'" :clearable="spec.clearable" @change="onChange"
       :variant="variant" validate-on="blur" persistent-placeholder />
@@ -43,6 +43,9 @@ export default {
       this.fieldModel = value;
       this.$executeOnChange();
     },
+    action_focus() {
+      this.$refs.field.focus();
+    },
     $registryEnabled() {
       return false;
     }

package/components/fields/textarea.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="styles()" :class="$classes()" v-if="loadIf">
-    <v-textarea :color="gcolor" v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint"
+    <v-textarea ref="field" :color="gcolor" v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint"
       :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :readonly="spec.readOnly" :height="height"
       :rules="$validation()" counter :outlined="$classes().includes('outlined')" :disabled="inputDisabled"
       :no-resize="$classes().includes('no-resize')" validate-on="blur" :variant="variant" :density="density"
@@ -41,8 +41,11 @@ export default {
     },
     onChange: eventFiltering.debounce(function () {
       this.$executeOnChange();
-    }, 300)
-  }
+    }, 300),
+    action_focus() {
+      this.$refs.field.focus();
+    },
+  },
 };
 </script>
 

package/components/mixins/styles.js

@@ -1,7 +1,5 @@
 import Hash from "../../utils/hash";
-import { fieldModels, watchFieldModels } from "../composable/conditional";
 import { determineColor } from "../../utils/constant";
-import Action from "../../action";
 import { triggerOnChange } from "../composable/form";
 import { realComponent } from "../helper";
 import set from "lodash.set";
@@ -118,7 +116,6 @@ export default {
         val = "";
       }
 
-      Object.assign(fieldModels, { [this.fieldName]: val });
     },
     spec: {
       handler(spec, oldSpec) {
@@ -128,17 +125,11 @@ export default {
             valueChanged = false;
           }
           this._linkFieldModels(valueChanged);
-          this._initConditional(oldSpec);
         }
       },
       immediate: true
     }
   },
-  unmounted() {
-    if (fieldModels[this.fieldName]) {
-      delete fieldModels[this.fieldName];
-    }
-  },
   methods: {
     viewKey(item, index) {
       if (!item || !item.view) return '';
@@ -152,19 +143,6 @@ export default {
       const childViewLength = item.childViews ? item.childViews.length : 0;
       return `${item.view}_${index}_${childViewLength}`;
     },
-    _initConditional(oldSpec) {
-      // unreg old fieldName
-      if (oldSpec && fieldModels[oldSpec.name] && oldSpec.name != this.spec.name) {
-        delete fieldModels[oldSpec.name];
-      }
-
-    },
-    setFieldModel(name, value) {
-      fieldModels[name] = value;
-    },
-    getFieldModel(name) {
-      return fieldModels[name];
-    },
     // NOTE: Styles are dynamic, do not save it in $ready().
     $styles(spec) {
       const properties = spec || this.spec;

package/components/mixins/table/import.js

@@ -1,7 +1,7 @@
-import { fieldModels } from "../../composable/conditional";
+import { getAllFormData } from "../../composable/form";
 
 export default {
-  data: function() {
+  data: function () {
     return {
       importable: false,
       importSubmitUrl: null,
@@ -18,7 +18,7 @@ export default {
       });
     },
     rowSelected(sectionIndex, rowIndex) {
-      return fieldModels[this.rowCheckId(sectionIndex, rowIndex)];
+      return getAllFormData()[this.rowCheckId(sectionIndex, rowIndex)];
     },
     selectedRowCount(section) {
       const sectionIndex = section.index;
@@ -57,7 +57,7 @@ export default {
       }
     },
     _submitEachRow(rows) {
-      const url = Utils.type.string(this.importSubmitUrl)
+      const url = Utils.type.string(this.importSubmitUrl);
       if (!url) {
         return;
       }
@@ -96,7 +96,7 @@ export default {
       // Reset value so it will trigger again the next time the same file is selected.
       event.target.value = null;
     },
-    _parseCsv: function(csvString) {
+    _parseCsv: function (csvString) {
       // https://stackoverflow.com/a/41563966/9970813
       let prevLetter = "",
         row = [""],

package/components/mixins/tooltip.js

@@ -3,6 +3,11 @@ import launch from "../../utils/launch";
 import { htmlElement } from "../helper";
 
 export default defineComponent({
+  data() {
+    return {
+      key: Math.random().toString(36).slice(2, 7)
+    };
+  },
   computed: {
     properties() {
       return {
@@ -13,6 +18,18 @@ export default defineComponent({
     }
   },
   methods: {
+    handleMouseEnter() {
+      const properties = {
+        body: { childViews: [this.properties] },
+        key: this.key,
+        placement: this.spec.tooltip.placement || 'top',
+        styleClass: 'views-tooltip'
+      };
+      launch.popover.open(properties, this);
+    },
+    handleMouseLeave() {
+      launch.popover.close({ key: this.key });
+    },
     $mounted() {
       const tooltip = this.spec.tooltip;
 
@@ -20,26 +37,22 @@ export default defineComponent({
 
       this.initTooltip();
     },
-    initTooltip() {
-      const key = Math.random().toString(36).slice(2, 7);
+    $tearDown() {
+      const el = htmlElement(this);
+
+      if (el) {
+        el.removeEventListener('mouseenter', this.handleMouseEnter);
+        el.removeEventListener('mouseleave', this.handleMouseLeave);
+      }
 
-      const handleMouseEnter = () => {
-        const properties = {
-          body: { childViews: [this.properties] },
-          key: key,
-          placement: this.spec.tooltip.placement || 'top',
-          styleClass: 'views-tooltip'
-        };
-        launch.popover.open(properties, this);
-      };
-      const handleMouseLeave = () => {
-        launch.popover.close({ key: key });
-      };
 
+      this.handleMouseLeave();
+    },
+    initTooltip() {
       const el = htmlElement(this);
 
-      el.addEventListener('mouseenter', handleMouseEnter);
-      el.addEventListener('mouseleave', handleMouseLeave);
+      el.addEventListener('mouseenter', this.handleMouseEnter);
+      el.addEventListener('mouseleave', this.handleMouseLeave);
     }
   }
 });

package/components/panels/flow.vue

@@ -31,14 +31,17 @@ export default {
   computed: {
     cssClasses: function () {
       const classes = this.$classes().concat("layouts-flow");
-      // switch(this.spec.distribution) {
-      //   case 'fillEqually':
-      //     classes.push('layouts-horizontal--fill-equally')
-      //     break
-      //   case 'spaceEqually':
-      //     classes.push('layouts-horizontal--space-equally')
-      //     break
-      // }
+
+      const configs = {
+        'top': 'align-start',
+        'middle': 'align-center',
+        'bottom': 'align-end'
+      };
+
+      const alignClass = configs[this.spec.align] || 'align-start';
+
+      classes.push(alignClass);
+
       return classes;
     },
     cssStyles: function () {

package/components/panels/form.vue

@@ -15,6 +15,7 @@
 <script>
 import { onMounted, provide, ref } from "vue";
 import { useGlibForm } from "../composable/form";
+import eventFiltering from "../../utils/eventFiltering";
 
 export default {
   props: {
@@ -138,7 +139,7 @@ export default {
           this.formCtx = { form: this.$refs.form };
           if (onChange) this.$executeOnChange();
         };
-        this.formElement.onchange = () => onChangeHandler();
+        this.formElement.onchange = eventFiltering.debounce(onChangeHandler, 300);
 
         this.formElement.oninput = (event) => this.glibForm.updateDirtyState(event);
       }

package/components/panels/split.vue

@@ -24,7 +24,16 @@ export default {
   },
   methods: {
     classes: function () {
-      return this.$classes().concat("layouts-split");
+      // This class is provided by Vuetify: https://vuetifyjs.com/en/styles/flex/#flex-align.
+      const configs = {
+        'top': 'align-start',
+        'middle': 'align-center',
+        'bottom': 'align-end'
+      };
+
+      const alignClass = configs[this.spec.align] || 'align-start';
+
+      return this.$classes().concat(["layouts-split", alignClass]);
     }
   }
 };

package/nav/dialog.vue

@@ -10,7 +10,7 @@
         </h1>
         <div v-else></div>
 
-        <v-btn v-if="!spec.disableCloseButton" size="small" icon @click="close" variant="text">
+        <v-btn v-if="!spec.disableCloseButton" class="close-btn" size="small" icon @click="close" variant="text">
           <v-icon>close</v-icon>
         </v-btn>
       </div>
@@ -231,7 +231,6 @@ export default {
   }
 };
 </script>
-
 <style lang="scss">
 .dialog-message {
   padding: 16px 20px;
@@ -247,6 +246,12 @@ export default {
   width: 100%;
   z-index: 999;
   padding: 8px 16px;
+  position: relative;
+
+  .close-btn {
+    position: fixed;
+    right: 16px;
+  }
 }
 
 .dialog-absolute {

package/package.json

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

package/store.js

@@ -42,7 +42,6 @@ export const closeAllPopover = () => {
     popovers.value.forEach((popover) => popover.close());
     popovers.value = [];
     vueApp.sheet.show = false;
-
 };
 
 export const glibevent = reactive({

package/utils/launch/dialog.js

@@ -48,6 +48,10 @@ export default class LaunchDialog {
     Utils.type.ifObject(dialogs.value.last(), dialog => {
       dialog.reload(properties);
     });
+
+    nextTick(() => {
+      Action.execute(properties.onReload, component);
+    });
   }
 
   static close(properties, component) {

package/components/composable/conditional.js

@@ -1,12 +0,0 @@
-import { reactive, watchEffect } from "vue";
-import jsonLogic from 'json-logic-js';
-
-// TODO: support multiple form
-const fieldModels = reactive({});
-
-const watchFieldModels = (logic, cb) => watchEffect(() => {
-  const value = jsonLogic.apply(logic, fieldModels);
-  cb(value);
-});
-
-export { fieldModels, watchFieldModels };