glib-web 2.5.0 → 2.5.1

package/action.js

@@ -50,6 +50,7 @@ import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
 import ActionCommandsCopy from "./actions/commands/copy";
 import ActionCommandsCustom from "./actions/commands/custom";
+import ActionCommandsEnqueue from "./actions/commands/enqueue";
 
 import ActionToursStart from "./actions/tours/start";
 
@@ -106,6 +107,7 @@ const actions = {
 
   "commands/copy": ActionCommandsCopy,
   "commands/custom": ActionCommandsCustom,
+  "commands/enqueue": ActionCommandsEnqueue,
 
   "tours/start": ActionToursStart,
   "components/update": ActionComponentsUpdate

package/actions/commands/enqueue.js

@@ -0,0 +1,17 @@
+// import Hash from "../../utils/hash";
+
+export default class {
+  // async executeJob(spec, component) {
+  //   console.log("Waiting for next job1...");
+  //   GLib.action.execute(spec.onExecute, component);
+  //   await this.sleep(2000);
+  //   console.log("Waiting for next job2...");
+  // }
+  execute(spec, component) {
+    GLib.queue.enqueue(() => {
+      GLib.action.execute(spec.onExecute, component);
+      // console.log("Waiting for next job0...");
+      // this.executeJob(spec, component);
+    });
+  }
+}

package/actions/components/update.js

@@ -5,25 +5,24 @@ export default class {
     if (!spec.views.length > 1) {
       console.warn("Make sure views only have 1 child!");
     }
-    // const target = component.updatables[spec.targetId];
-    // if (!target) console.error("no component found :" + spec.targetId);
 
     const target = GLib.component.findById(spec.targetId);
     if (target) {
       Object.assign(target.spec, spec.views[0]);
-      this.updateComponent(target);
+      target.$recursiveUpdate();
     }
   }
 
-  updateComponent(component) {
-    component.$ready();
-    component.$forceUpdate();
+  // // TODO: Use $recursiveUpdate(). See mixins/events
+  // updateComponent(component) {
+  //   component.$ready();
+  //   component.$forceUpdate();
 
-    // Execute on next tick to ensure that the child has received the updated spec.
-    Vue.nextTick(() => {
-      component.$children.find(child => {
-        this.updateComponent(child);
-      });
-    });
-  }
+  //   // Execute on next tick to ensure that the child has received the updated spec.
+  //   Vue.nextTick(() => {
+  //     component.$children.find(child => {
+  //       this.updateComponent(child);
+  //     });
+  //   });
+  // }
 }

package/app.vue

@@ -194,6 +194,9 @@ body,
 .glib-scrollto--highlighted {
   background: yellow !important;
 }
+.glib-clickable {
+  cursor: pointer;
+}
 /******/
 </style>
 

package/components/fields/file.vue

@@ -2,19 +2,15 @@
   <div ref="fileUploadContainer" class="mb-3" :style="$styles()">
     <label class="v-label v-label--active">{{ spec.label }}</label>
     <div class="preview-container">
-      <v-avatar
-        v-if="placeholder.type == 'avatar'"
-        :style="genericStyles(placeholder)"
-        class="mr-4"
-      >
+      <v-avatar v-if="placeholder.type == 'avatar'" :style="genericStyles(placeholder)" class="mr-4">
         <img :src="fileImage || placeholder.url" />
       </v-avatar>
-      <img
-        v-else-if="placeholder.type == 'image'"
-        class="square-image mr-4"
-        :style="genericStyles(placeholder)"
-        :src="fileImage || placeholder.url"
-      />
+      <img v-else-if="placeholder.type == 'image'" class="square-image mr-4" :style="genericStyles(placeholder)"
+        :src="fileImage || placeholder.url" />
+
+      <v-text-field v-else-if="placeholder.type == 'input'" :value="fileTitle" outlined prominent
+        placholder="Upload your file" disabled />
+
       <span v-else class="mr-4">{{ fileTitle }}</span>
 
       <span v-if="spec.uploadText">
@@ -37,12 +33,7 @@
         </v-btn>
       </span>
     </div>
-    <input
-      ref="directUploadFile"
-      style="display: none;"
-      type="file"
-      @change="uploadFiles"
-    />
+    <input ref="directUploadFile" style="display: none;" type="file" @change="uploadFiles" />
 
     <!-- <input type="file" :name="spec.name" ref='directUploadFile' @change='uploadFiles' v-show='!uploaded'/> -->
     <v-progress-linear v-if="showProgress" v-model="progress.value" />
@@ -82,7 +73,7 @@ export default {
     };
   },
   computed: {
-    showProgress: function() {
+    showProgress: function () {
       return this.progress.value >= 0;
     }
   },
@@ -165,6 +156,9 @@ export default {
 
 <style lang="scss" scoped>
 .preview-container {
+  display: flex;
+  align-items: center;
+
   .action-container {
     padding-left: 10px;
   }

package/components/fields/text.vue

@@ -12,7 +12,7 @@
       :type="variant.type"
       :rules="rules"
       :prepend-inner-icon="leftIconName"
-      :append-icon="variant.appendIcon"
+      :append-icon="rightIconName || variant.appendIcon"
       :prefix="spec.leftText"
       :suffix="spec.rightText"
       :min="spec.min"
@@ -22,7 +22,7 @@
       :dense="$classes().includes('dense')"
       :autofocus="spec.autoFocus || false"
       validate-on-blur
-      @click:append="onRightIconClick"
+      v-on="onRightIconClick ? { 'click:append': onRightIconClick } : null"
       @input="onChange"
     />
     <input
@@ -46,6 +46,7 @@ export default {
     return {
       variant: {},
       rules: [],
+      onRightIconClick: null,
       fields: {
         email: {
           type: "email",
@@ -104,12 +105,23 @@ export default {
       const icon = this.spec.leftIcon || {};
       const materialIcon = icon.material || {};
       return materialIcon.name;
+    },
+    rightIconName() {
+      const icon = this.spec.rightIcon || {};
+      const materialIcon = icon.material || {};
+      return materialIcon.name;
     }
   },
   methods: {
     $ready() {
       this.variant = this.fields[this.type] || {};
       this.rules = this.$validation(this.variant.rules);
+
+      if (this.variant.onRightIconClick) {
+        this.onRightIconClick = () => {
+          this.variant.onRightIconClick(this);
+        };
+      }
     },
     togglePasswordVisibility() {
       const passwordField = this.fields["password"];
@@ -121,9 +133,6 @@ export default {
         passwordField.appendIcon = "visibility";
       }
     },
-    onRightIconClick() {
-      this.variant.onRightIconClick(this);
-    },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
     },

package/components/mixins/events.js

@@ -152,6 +152,17 @@ export default {
     $updated() {
       // To be overridden
     },
+    $recursiveUpdate() {
+      this.$ready();
+      this.$forceUpdate();
+
+      // Execute on next tick to ensure that the child has received the updated spec.
+      this.$nextTick(() => {
+        this.$children.find(child => {
+          child.$recursiveUpdate();
+        });
+      });
+    },
     $dispatchEvent(name, data) {
       const event = new Event(name, { bubbles: true });
 

package/components/mixins/styles.js

@@ -125,10 +125,10 @@ export default {
         val => (styles["height"] = val)
       );
 
-      Utils.type.ifObject(
-        properties.onClick,
-        () => (styles["cursor"] = "pointer")
-      );
+      // Utils.type.ifObject(
+      //   properties.onClick,
+      //   () => (styles["cursor"] = "pointer")
+      // );
 
       // This is the main reason styles have to be used in a dynamic way.
       this._updateDisplay(styles, properties);
@@ -213,6 +213,10 @@ export default {
       const componentName = Utils.app.componentName(properties.view);
       const classes = (properties.styleClasses || []).concat(componentName);
 
+      Utils.type.ifObject(properties.onClick, () =>
+        classes.push("glib-clickable")
+      );
+
       Utils.type.ifArray(properties.styleClasses, val => {
         if (val.includes("card")) {
           classes.push("v-card");

package/components/panels/custom.vue

@@ -57,6 +57,9 @@ export default {
     $ready() {
       const onClick = this.spec.onClick ? { onClick: this.spec.onClick } : {};
       this.customData = Object.assign(onClick, this.spec.data);
+    },
+    $registryEnabled() {
+      return false;
     }
   }
 };