glib-web 3.11.0 → 3.12.0

package/action.js

@@ -57,11 +57,12 @@ import ActionCommandsCustom from "./actions/commands/custom";
 const ActionToursStart = import("./actions/tours/start");
 const ActionToursStop = import("./actions/tours/stop");
 
-import ActionComponentsUpdate from "./actions/components/update";
-
 import ActionPopoversOpen from "./actions/popovers/open";
 import ActionPopoversClose from "./actions/popovers/close";
 
+import ActionComponentsUpdate from "./actions/components/update";
+import ActionComponentsFind from "./actions/components/find";
+
 import { vueApp } from "./store";
 
 const actions = {
@@ -119,11 +120,13 @@ const actions = {
   "commands/custom": ActionCommandsCustom,
 
   "tours/start": ActionToursStart,
-  "components/update": ActionComponentsUpdate,
+  "tours/stop": ActionToursStop,
+
   "popovers/open": ActionPopoversOpen,
   "popovers/close": ActionPopoversClose,
-  "tours/stop": ActionToursStop,
-  "components/update": ActionComponentsUpdate
+
+  "components/update": ActionComponentsUpdate,
+  "components/find": ActionComponentsFind
 };
 
 const customActions = {};
@@ -179,17 +182,22 @@ export default class Action {
     }
   }
 
-  static handleResponse(response, component, url) {
+  static handleResponse(response, component) {
+    vueApp.temp.analytics = response.analytics;
+    GLib.action.execute(response.onResponse, component);
+    vueApp.temp.analytics = null;
+
     // TODO: The execution should be in the following order: onResponse, page render, onLoad
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        vueApp.page = response;
+        const dialog = component.$closest("dialog");
+        if (dialog) {
+          dialog.updateContent(response)
+        } else {
+          vueApp.page = response;
+        }
       });
     }
-
-    vueApp.temp.analytics = response.analytics;
-    GLib.action.execute(response.onResponse, component);
-    vueApp.temp.analytics = null;
   }
 
   static registerCustom(actionName, action) {

package/actions/components/find.js

@@ -0,0 +1,6 @@
+export default class {
+  execute(spec, component) {
+    const target = GLib.component.findById(spec.targetId);
+    Action.execute(spec.onFind, target);
+  }
+}

package/actions/popovers/close.js

@@ -1,5 +1,11 @@
+import { nextTick } from "vue";
+
 export default class {
-    execute(properties, component) {
-        Utils.launch.popover.close(properties);
-    }
+  execute(properties, component) {
+    Utils.launch.popover.close(properties);
+
+    nextTick(() => {
+      GLib.action.execute(properties.onClose, component);
+    })
+  }
 }

package/components/composable/dirtyState.js

@@ -1,27 +1,26 @@
 import { watchEffect } from "vue";
-import { vueApp, glibevent, dialogStates } from "../../store";
+import { glibevent, ctx } from "../../store";
 
 export function useDirtyState() {
-  const ctx = dialogStates.slice(-1)[0] || vueApp;
   const prompt = "Changes you made have not been saved. Are you sure?";
 
   const isDirty = () => {
-    return ctx.isFormDirty && !ctx.isFormSubmitted && !confirm(prompt);
+    return ctx().isFormDirty && !ctx().isFormSubmitted && !confirm(prompt);
   };
 
   const clearDirtyState = () => {
-    ctx.isFormDirty = false;
+    ctx().isFormDirty = false;
   };
 
   const updateDirtyState = (val, oldVal, spec) => {
     if (!spec.disableDirtyCheck && val != oldVal && val != spec.value) {
-      ctx.isFormDirty = true;
+      ctx().isFormDirty = true;
     }
   };
 
   const watchDirtyState = () => {
     return watchEffect(() => {
-      if (ctx.isFormDirty) {
+      if (ctx().isFormDirty) {
         window.onbeforeunload = () => !isDirty();
         glibevent.onbeforewindowsopen = () => !isDirty();
         glibevent.onbeforewindowsclose = () => !isDirty();

package/components/fields/_otp.vue

@@ -81,10 +81,10 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .otp-input {
   display: inline-block;
-  width: 2rem;
+  // width: 2rem;
   text-align: center;
   margin-right: 8px;
   margin-bottom: 8px;

package/components/fields/check.vue

@@ -5,7 +5,7 @@
     <input v-model="uncheckValue" type="hidden" :name="fieldName" />
     <v-checkbox v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly" :disabled="inputDisabled"
       :label="fieldModel ? spec.onLabel || spec.label : spec.label" :true-icon="spec.onIcon" :false-icon="spec.offIcon"
-      :value="spec.checkValue" hide-details @change="changed" color="primary"></v-checkbox>
+      :value="spec.value" :true-value="spec.checkValue" hide-details @change="changed" color="primary"></v-checkbox>
   </div>
 </template>
 
@@ -37,12 +37,6 @@ export default {
       this.$executeOnChange();
       // }, 500);
     },
-    $internalizeValue(val) {
-      if (val == this.spec.checkValue) {
-        return val;
-      }
-      return this.spec.uncheckValue;
-    },
     action_merge(mergedSpec) {
       Object.assign(this.spec, mergedSpec);
       this.updateData();
@@ -58,9 +52,9 @@ export default {
 
       this.fieldName = this.spec.name || groupName;
 
-      this.fieldModel = this.spec.checked
-        ? this.spec.checkValue
-        : this.spec.value;
+      // this.fieldModel = this.spec.checked
+      //   ? this.spec.checkValue
+      //   : this.spec.value;
 
       Utils.type.ifArray(this.spec.styleClasses, classes => {
         if (classes.remove("switch")) {

package/components/fields/dynamicGroup.vue

@@ -20,6 +20,7 @@ export default {
   },
   data() {
     return {
+      localFieldModels: {},
       groupValues: [],
       template: {},
       templateViews: [],
@@ -35,9 +36,9 @@ export default {
 
         spec.groupFieldProperties.forEach((group, groupIndex) => {
           group.forEach((properties) => {
-            const fullName = this.prefixFieldName(groupIndex, properties.name)
-            this.setFieldModel(fullName, properties.value)
-          })
+            const fullName = this.prefixFieldName(groupIndex, properties.name);
+            this.localFieldModels[fullName] = properties.value;
+          });
         });
 
         this.groupValues = spec.groupFieldProperties;
@@ -46,10 +47,10 @@ export default {
     },
     groupValues: {
       handler(groupValues) {
-        var actualIndex = 0
+        var actualIndex = 0;
         this.groupSpecs = groupValues.map((group, groupIndex) => {
           if (!this.isDeleted(groupIndex)) {
-            ++actualIndex
+            ++actualIndex;
           }
 
           const viewSpecs = this.processTemplate(
@@ -74,24 +75,24 @@ export default {
     // Replace every occurrence of `{{index}}` within any string.
     populateIndexes(object, groupIndex) {
       if (this.$type.isString(object)) {
-        return object.replace('{{index}}', groupIndex)
+        return object.replace('{{index}}', groupIndex);
       }
       if (this.$type.isArray(object)) {
         return object.map((o) => this.populateIndexes(o, groupIndex));
 
       } else if (this.$type.isObject(object)) {
-        const newObject = {}
+        const newObject = {};
         for (const key in object) {
-          newObject[key] = this.populateIndexes(object[key], groupIndex)
+          newObject[key] = this.populateIndexes(object[key], groupIndex);
         }
-        return newObject
+        return newObject;
       }
-      return object
+      return object;
     },
     processTemplate(properties, groupIndex, processField, processNonField) {
       return this.processViews(
         this.templateViews, properties, groupIndex, processField, processNonField
-      )
+      );
     },
     prefixFieldName(groupIndex, fieldName) {
       if (fieldName.search(/\[.*\]/) >= 0) {
@@ -101,33 +102,33 @@ export default {
       }
     },
     processField(viewSpec, name, groupIndex, properties) {
-      const fullName = this.prefixFieldName(groupIndex, name)
-      const indexedName = this.populateIndexes(fullName, groupIndex)
+      const fullName = this.prefixFieldName(groupIndex, name);
+      const indexedName = this.populateIndexes(fullName, groupIndex);
 
       // Note that `properties` might contain any properties such as fileTitle/fileUrl which
       // are needed by file components.
       Object.assign(viewSpec, properties[name], {
         name: fullName,
-        value: this.getFieldModel(indexedName)
+        value: this.localFieldModels[indexedName]
       });
-      return viewSpec
+      return viewSpec;
     },
     processViews(viewSpecs, properties, groupIndex) {
       return viewSpecs.map(origSpec => {
-        const viewSpec = Object.assign({}, origSpec)
+        const viewSpec = Object.assign({}, origSpec);
 
-        viewSpec.showIf = this.populateIndexes(viewSpec.showIf, groupIndex)
-        viewSpec.loadIf = this.populateIndexes(viewSpec.loadIf, groupIndex)
+        viewSpec.showIf = this.populateIndexes(viewSpec.showIf, groupIndex);
+        viewSpec.loadIf = this.populateIndexes(viewSpec.loadIf, groupIndex);
 
         if (Utils.type.isString(viewSpec.name)) { // This is a field
           return this.processField(viewSpec, viewSpec.name, groupIndex, properties);
         }
 
         if (Utils.type.isObject(viewSpec.childViews)) {
-          viewSpec.childViews = this.processViews(viewSpec.childViews, properties, groupIndex)
+          viewSpec.childViews = this.processViews(viewSpec.childViews, properties, groupIndex);
         }
 
-        return viewSpec
+        return viewSpec;
       });
     },
     addGroup() {

package/components/fields/file.vue

@@ -87,8 +87,6 @@ export default {
       if (Utils.type.isString(this.spec.value)) {
         this.uploaded = true;
         this.fileTitle = this.spec.fileTitle;
-
-        // TODO: Rename to fileUrl
         this.fileImage = this.spec.fileUrl;
         this.fileValue = this.spec.value;
       }

package/components/fields/richText.vue

@@ -12,7 +12,7 @@
       use-custom-image-handler :editor-options="editorSettings" @text-change="onRichTextEditorChanged"
       @image-added="uploadImage" /> -->
     <QuillEditor v-if="!rawMode" ref="quilEditor" theme="snow" :toolbar="customToolbar" :content="richEditorValue"
-      contentType="html" :modules="modules" @textChange="onRichTextEditorChanged" class="rich-editor" />
+      contentType="html" :modules="modules" @textChange="onRichTextEditorChanged" class="rich-editor" :placeholder="spec.placeholder" />
     <!-- Hide these fields but don't remove them because these are the values that will get submitted. -->
     <div :style="{ display: rawMode ? 'block' : 'none' }">
       <v-textarea class="raw-editor" v-model="rawEditorValue" :style="$styles()" :class="$classes()"

package/components/mixins/events.js

@@ -126,7 +126,7 @@ export default {
     },
     _ready() {
       this._mountedUrl = window.location.href;
-      this._updatedAt = new Date().getTime();
+      // this._updatedAt = new Date().getTime();
 
       this.$data._events = [];
 

package/components/mixins/generic.js

@@ -2,12 +2,18 @@ import { vueApp } from "../../store";
 
 export default {
   methods: {
+    $componentName() { // Can be overridden
+      if (this.spec) {
+        return this.spec.view;
+      }
+    },
     $closest(name) {
       var parent = this.$parent;
       while (parent != null) {
         if (
           (Utils.type.isObject(parent.spec) || Utils.type.isObject(parent.formSpec)) &&
-          GLib.component.vueName(parent) == name
+          parent.$componentName() == name
+          // GLib.component.vueName(parent) == name
         ) {
           return parent;
         }

package/components/mixins/styles.js

@@ -73,7 +73,7 @@ export default {
   methods: {
     _initConditional(oldSpec) {
       // unreg old fieldName
-      if (oldSpec && fieldModels[oldSpec.name]) {
+      if (oldSpec && fieldModels[oldSpec.name] && oldSpec.name != this.spec.name) {
         delete fieldModels[oldSpec.name];
       }
       // unreg watchers if there is

package/nav/appbar.vue

@@ -91,7 +91,8 @@ export default {
     },
     buttonSpec(item) {
       const styleClasses = (item.styleClasses || []).concat(
-        item.text ? ["text"] : ["icon"]
+        // item.text ? ["text"] : ["icon"]
+        ["text"]
       );
       return Object.assign({}, item, {
         view: "button",

package/nav/dialog.vue

@@ -174,13 +174,10 @@ export default {
           Http.execute({ url: url }, "GET", this, (response) => {
             Utils.http.forceComponentUpdate(() => {
               this.urlLoaded = true;
-              this.title = response.title;
               this.message = "";
               this.formSpec = response.fullPageForm;
-              this.header = response.header;
-              this.body = response.body;
-              this.footer = response.footer;
               this.disableCloseButton = this.spec.disableCloseButton || false;
+              this.updateContent(response)
 
               Action.execute(response.onLoad, this);
             });
@@ -196,8 +193,17 @@ export default {
 
       this.model = true;
     },
+    updateContent(response) {
+      this.title = response.title;
+      this.header = response.header;
+      this.body = response.body;
+      this.footer = response.footer;
+    },
     updateMainHeight() {
       this.mainHeight = window.innerHeight - 140;
+    },
+    $componentName() {
+      return "dialog";
     }
   }
 };

package/package.json

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

package/store.js

@@ -19,6 +19,8 @@ export const vueApp = reactive({
 
 export const dialogStates = reactive([]);
 
+export const ctx = () => dialogStates.slice(-1)[0] || vueApp;
+
 export const glibevent = reactive({
     onbeforewindowsopen: null,
     onbeforewindowsclose: null,

package/utils/form.js

@@ -1,4 +1,4 @@
-import { vueApp } from "../store";
+import { ctx } from "../store";
 
 export default class {
   // Execution flows:
@@ -17,7 +17,7 @@ export default class {
 
       // Use nextTick to wait for overrideUrl get picked up.
       component.$nextTick(() => {
-        vueApp.isFormDirty = false;
+        ctx().isFormDirty = false;
         form.submit();
       });
     } else {

package/utils/http.js

@@ -1,7 +1,7 @@
 import Type from "./type";
 import Action from "../action";
 import { nextTick } from 'vue';
-import { vueApp } from "../store";
+import { ctx, vueApp } from "../store";
 
 let loading = false;
 
@@ -80,7 +80,8 @@ export default class {
       const htmlUrl = Utils.url.htmlUrl(properties["url"]);
 
       Utils.http.execute(properties, "GET", component, (data, response) => {
-        if (htmlUrl !== currentUrl) {
+        const dialog = component.$closest("dialog");
+        if (htmlUrl !== currentUrl && !Utils.type.isObject(dialog)) {
           const redirectUrl = Utils.url.htmlUrl(response.url);
           Utils.history.pushPage(data, redirectUrl);
         }
@@ -88,7 +89,7 @@ export default class {
         this.forceComponentUpdate(() => {
           Utils.history.resetScroll();
 
-          vueApp.page = data;
+          GLib.action.handleResponse(data, component)
 
           Action.execute(properties["onOpen"], component);
         });
@@ -258,8 +259,8 @@ export default class {
   static forceComponentUpdate(handler) {
     // GLib.component.clearRegistry();
     vueApp.isStale = true;
-    vueApp.isFormSubmitted = false;
-    vueApp.isFormDirty = false;
+    ctx().isFormSubmitted = false;
+    ctx().isFormDirty = false;
     handler();
 
     // Queue the execution so the first isStale has time to resets state before handler gets executed
@@ -273,7 +274,7 @@ export default class {
   // }
 
   static notifyFormSubmitted() {
-    vueApp.isFormSubmitted = true;
+    ctx().isFormSubmitted = true;
   }
 
   // `context` can be either window or dialog.

package/utils/launch.js

@@ -149,9 +149,11 @@ class LaunchDialog {
       dialog.close();
     });
 
-    Utils.type.ifObject(properties["onClose"], it => {
-      Action.execute(it, component);
-    });
+    Action.execute(properties.onClose, component);
+
+    // Utils.type.ifObject(properties["onClose"], it => {
+    //   Action.execute(it, component);
+    // });
   }
 
   // This is only meant to be used internally