glib-web 4.30.0 → 4.31.0

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/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,25 @@
+import { isPresent } from "../utils/type";
+
+// TODO: use this on other actions
+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/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/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

@@ -36,9 +36,9 @@
         </v-btn>
       </v-card-actions>
     </v-card>
-    <glib-component v-show="loading && spec.loaderViews" v-for="(loaderView, index) in spec.loaderViews" :key="index"
-      :spec="loaderView"></glib-component>
-
+    <template v-if="loading && spec.loaderViews">
+      <glib-component v-for="(loaderView, index) in spec.loaderViews" :key="index" :spec="loaderView"></glib-component>
+    </template>
   </v-dialog>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.30.0",
+  "version": "4.31.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) {