glib-web 0.5.77 → 0.5.78

package/components/mixins/styles.js

@@ -1,221 +1,221 @@
-import Hash from "../../utils/hash";
-import Vue from "vue";
-
-var jsonLogic = require("json-logic-js");
-
-// jsonLogic.add_operation("add_ms", function(a, b) {
-//   if (Utils.type.isString(a)) {
-//     const newValue = new Date(new Date(a).getTime() + b * 1000);
-//     return newValue.toISOString();
-//   }
-//   return null;
-// });
-export default {
-  data: function() {
-    return {
-      _fieldModels: {},
-      fieldName: null,
-      fieldModel: null,
-
-      // Some components do not support null or empty string value, so we need to use an intermediary value.
-      // See https://github.com/vuetifyjs/vuetify/issues/8876
-      vuetifyEmptyString: "<EMPTY_STRING>"
-    };
-  },
-  computed: {
-    display() {
-      const conditions = this.spec.showIf;
-      if (conditions) {
-        return jsonLogic.apply(conditions, this.$data._fieldModels)
-          ? this.$displayValue()
-          : "none";
-      } else {
-        return this.$displayValue();
-      }
-    }
-  },
-  watch: {
-    fieldModel: function(val, oldVal) {
-      if (val === this.vuetifyEmptyString) {
-        val = "";
-      }
-      // Make the field property observable for dynamic showing/hiding
-      Vue.set(
-        this.$data._fieldModels,
-        this.fieldName,
-        this.$internalizeValue(val)
-      );
-
-      // this.$saveValue(val);
-      // Vue.set(this.$data._fieldModels, this.fieldName, val);
-    }
-  },
-  methods: {
-    // TODO: Deprecated
-    genericStyles(spec) {
-      return this.$styles(spec);
-    },
-    // NOTE: Styles are dynamic, do not save it in $ready().
-    $styles(spec) {
-      const properties = spec || this.spec;
-      const styles = {
-        // color: properties.color,
-        // "background-color": properties.backgroundColor,
-        // "text-align": properties.textAlign
-      };
-
-      Utils.type.ifString(properties.color, val => (styles["color"] = val));
-
-      Utils.type.ifString(
-        properties.backgroundColor,
-        val => (styles["background-color"] = val)
-      );
-
-      Utils.type.ifString(
-        properties.textAlign,
-        val => (styles["text-align"] = val)
-      );
-
-      // const padding = properties.padding;
-      // if (Utils.type.isObject(padding)) {
-      //   Utils.type.ifNumber(
-      //     padding.top,
-      //     top => (styles["padding-top"] = `${top}px`)
-      //   );
-      //   Utils.type.ifNumber(
-      //     padding.bottom,
-      //     bottom => (styles["padding-bottom"] = `${bottom}px`)
-      //   );
-      //   Utils.type.ifNumber(
-      //     padding.left,
-      //     left => (styles["padding-left"] = `${left}px`)
-      //   );
-      //   Utils.type.ifNumber(
-      //     padding.right,
-      //     right => (styles["padding-right"] = `${right}px`)
-      //   );
-      // }
-
-      Utils.type.ifObject(properties.padding, padding => {
-        Utils.type.ifNumber(
-          padding.top,
-          top => (styles["padding-top"] = `${top}px`)
-        );
-        Utils.type.ifNumber(
-          padding.bottom,
-          bottom => (styles["padding-bottom"] = `${bottom}px`)
-        );
-        Utils.type.ifNumber(
-          padding.left,
-          left => (styles["padding-left"] = `${left}px`)
-        );
-        Utils.type.ifNumber(
-          padding.right,
-          right => (styles["padding-right"] = `${right}px`)
-        );
-      });
-
-      Utils.type.ifString(
-        this.$length(properties.width),
-        val => (styles["width"] = val)
-      );
-      Utils.type.ifString(
-        this.$length(properties.height),
-        val => (styles["height"] = val)
-      );
-
-      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);
-
-      return new Hash(styles);
-    },
-    $length: function(length) {
-      if (Utils.type.isString(length) || Utils.type.isNumber(length)) {
-        switch (length) {
-          case "wrapContent":
-            return null;
-          case "matchParent":
-            return "100%";
-          default:
-            return `${length}px`;
-        }
-      }
-      return null;
-    },
-    $builtinColor(styleClasses) {
-      let color = null;
-      Utils.type.ifArray(styleClasses, classes => {
-        for (const val of ["success", "info", "warning", "error"]) {
-          if (classes.remove(val)) {
-            color = val;
-          }
-        }
-      });
-      return color;
-    },
-    _updateDisplay(styles, properties) {
-      Utils.type.ifObject(
-        properties.showIf,
-        () => (styles["display"] = this.display)
-      );
-      Utils.type.ifObject(properties.valueIf, logic => {
-        const newValue = jsonLogic.apply(logic, this.$data._fieldModels);
-        this.fieldModel = this._sanitizeValue(this.$externalizeValue(newValue));
-      });
-    },
-    $displayValue() {
-      return "block"; // To be overridden
-    },
-    _sanitizeValue(val) {
-      return Utils.type.isNotNull(val) ? this.$sanitizeValue(val) : null;
-    },
-    $sanitizeValue(val) {
-      return val; // To be overridden
-    },
-    $internalizeValue(val) {
-      return val;
-    },
-    $externalizeValue(val) {
-      return val;
-    },
-    _linkFieldModels() {
-      const hasCondition = this.spec && this.spec.showIf;
-      const name = Utils.app.vueName(this);
-      const isField = name && name.startsWith("fields-");
-      if (hasCondition || isField) {
-        const form = this.$closest("panels-form");
-        if (form != null) {
-          this.$data._fieldModels = form.$data._fieldModels;
-        }
-
-        // Has to be executed before $ready(). This executes regardless of whether a form is found because fields
-        // may be used without a form.
-        this.fieldName = this.spec.name;
-        this.fieldModel = this._sanitizeValue(this.spec.value);
-      }
-    },
-    $classes(spec) {
-      const properties = spec || this.spec;
-      const componentName = Utils.app.componentName(properties.view);
-      const classes = (properties.styleClasses || []).concat(componentName);
-
-      Utils.type.ifArray(properties.styleClasses, val => {
-        if (val.includes("card")) {
-          classes.push("v-card");
-          classes.push("v-sheet");
-          classes.push("theme--light");
-
-          if (val.includes("outlined")) {
-            classes.push("v-sheet--outlined");
-          }
-        }
-      });
-      return classes;
-    }
-  }
-};
+import Hash from "../../utils/hash";
+import Vue from "vue";
+
+var jsonLogic = require("json-logic-js");
+
+// jsonLogic.add_operation("add_ms", function(a, b) {
+//   if (Utils.type.isString(a)) {
+//     const newValue = new Date(new Date(a).getTime() + b * 1000);
+//     return newValue.toISOString();
+//   }
+//   return null;
+// });
+export default {
+  data: function() {
+    return {
+      _fieldModels: {},
+      fieldName: null,
+      fieldModel: null,
+
+      // Some components do not support null or empty string value, so we need to use an intermediary value.
+      // See https://github.com/vuetifyjs/vuetify/issues/8876
+      vuetifyEmptyString: "<EMPTY_STRING>"
+    };
+  },
+  computed: {
+    display() {
+      const conditions = this.spec.showIf;
+      if (conditions) {
+        return jsonLogic.apply(conditions, this.$data._fieldModels)
+          ? this.$displayValue()
+          : "none";
+      } else {
+        return this.$displayValue();
+      }
+    }
+  },
+  watch: {
+    fieldModel: function(val, oldVal) {
+      if (val === this.vuetifyEmptyString) {
+        val = "";
+      }
+      // Make the field property observable for dynamic showing/hiding
+      Vue.set(
+        this.$data._fieldModels,
+        this.fieldName,
+        this.$internalizeValue(val)
+      );
+
+      // this.$saveValue(val);
+      // Vue.set(this.$data._fieldModels, this.fieldName, val);
+    }
+  },
+  methods: {
+    // TODO: Deprecated
+    genericStyles(spec) {
+      return this.$styles(spec);
+    },
+    // NOTE: Styles are dynamic, do not save it in $ready().
+    $styles(spec) {
+      const properties = spec || this.spec;
+      const styles = {
+        // color: properties.color,
+        // "background-color": properties.backgroundColor,
+        // "text-align": properties.textAlign
+      };
+
+      Utils.type.ifString(properties.color, val => (styles["color"] = val));
+
+      Utils.type.ifString(
+        properties.backgroundColor,
+        val => (styles["background-color"] = val)
+      );
+
+      Utils.type.ifString(
+        properties.textAlign,
+        val => (styles["text-align"] = val)
+      );
+
+      // const padding = properties.padding;
+      // if (Utils.type.isObject(padding)) {
+      //   Utils.type.ifNumber(
+      //     padding.top,
+      //     top => (styles["padding-top"] = `${top}px`)
+      //   );
+      //   Utils.type.ifNumber(
+      //     padding.bottom,
+      //     bottom => (styles["padding-bottom"] = `${bottom}px`)
+      //   );
+      //   Utils.type.ifNumber(
+      //     padding.left,
+      //     left => (styles["padding-left"] = `${left}px`)
+      //   );
+      //   Utils.type.ifNumber(
+      //     padding.right,
+      //     right => (styles["padding-right"] = `${right}px`)
+      //   );
+      // }
+
+      Utils.type.ifObject(properties.padding, padding => {
+        Utils.type.ifNumber(
+          padding.top,
+          top => (styles["padding-top"] = `${top}px`)
+        );
+        Utils.type.ifNumber(
+          padding.bottom,
+          bottom => (styles["padding-bottom"] = `${bottom}px`)
+        );
+        Utils.type.ifNumber(
+          padding.left,
+          left => (styles["padding-left"] = `${left}px`)
+        );
+        Utils.type.ifNumber(
+          padding.right,
+          right => (styles["padding-right"] = `${right}px`)
+        );
+      });
+
+      Utils.type.ifString(
+        this.$length(properties.width),
+        val => (styles["width"] = val)
+      );
+      Utils.type.ifString(
+        this.$length(properties.height),
+        val => (styles["height"] = val)
+      );
+
+      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);
+
+      return new Hash(styles);
+    },
+    $length: function(length) {
+      if (Utils.type.isString(length) || Utils.type.isNumber(length)) {
+        switch (length) {
+          case "wrapContent":
+            return null;
+          case "matchParent":
+            return "100%";
+          default:
+            return `${length}px`;
+        }
+      }
+      return null;
+    },
+    $builtinColor(styleClasses) {
+      let color = null;
+      Utils.type.ifArray(styleClasses, classes => {
+        for (const val of ["success", "info", "warning", "error"]) {
+          if (classes.remove(val)) {
+            color = val;
+          }
+        }
+      });
+      return color;
+    },
+    _updateDisplay(styles, properties) {
+      Utils.type.ifObject(
+        properties.showIf,
+        () => (styles["display"] = this.display)
+      );
+      Utils.type.ifObject(properties.valueIf, logic => {
+        const newValue = jsonLogic.apply(logic, this.$data._fieldModels);
+        this.fieldModel = this._sanitizeValue(this.$externalizeValue(newValue));
+      });
+    },
+    $displayValue() {
+      return "block"; // To be overridden
+    },
+    _sanitizeValue(val) {
+      return Utils.type.isNotNull(val) ? this.$sanitizeValue(val) : null;
+    },
+    $sanitizeValue(val) {
+      return val; // To be overridden
+    },
+    $internalizeValue(val) {
+      return val;
+    },
+    $externalizeValue(val) {
+      return val;
+    },
+    _linkFieldModels() {
+      const hasCondition = this.spec && this.spec.showIf;
+      const name = Utils.app.vueName(this);
+      const isField = name && name.startsWith("fields-");
+      if (hasCondition || isField) {
+        const form = this.$closest("panels-form");
+        if (form != null) {
+          this.$data._fieldModels = form.$data._fieldModels;
+        }
+
+        // Has to be executed before $ready(). This executes regardless of whether a form is found because fields
+        // may be used without a form.
+        this.fieldName = this.spec.name;
+        this.fieldModel = this._sanitizeValue(this.spec.value);
+      }
+    },
+    $classes(spec) {
+      const properties = spec || this.spec;
+      const componentName = Utils.app.componentName(properties.view);
+      const classes = (properties.styleClasses || []).concat(componentName);
+
+      Utils.type.ifArray(properties.styleClasses, val => {
+        if (val.includes("card")) {
+          classes.push("v-card");
+          classes.push("v-sheet");
+          classes.push("theme--light");
+
+          if (val.includes("outlined")) {
+            classes.push("v-sheet--outlined");
+          }
+        }
+      });
+      return classes;
+    }
+  }
+};

package/components/mixins/text.js

@@ -1,20 +1,20 @@
-export default {
-  methods: {
-    textStyles(spec) {
-      const styles = this.$styles(spec);
-
-      switch (this.spec.textAlign) {
-        case "center":
-          styles["text-align"] = "center";
-          break;
-        case "right":
-          styles["text-align"] = "right";
-          break;
-        default:
-          styles["text-align"] = "left";
-      }
-
-      return styles;
-    }
-  }
-};
+export default {
+  methods: {
+    textStyles(spec) {
+      const styles = this.$styles(spec);
+
+      switch (this.spec.textAlign) {
+        case "center":
+          styles["text-align"] = "center";
+          break;
+        case "right":
+          styles["text-align"] = "right";
+          break;
+        default:
+          styles["text-align"] = "left";
+      }
+
+      return styles;
+    }
+  }
+};

package/components/mixins/ws/actionCable.js

@@ -1,48 +1,48 @@
-import { createConsumer } from "@rails/actioncable";
-
-const consumer = createConsumer();
-
-export default {
-  data: function() {
-    return {
-      _wsSocket: null
-    };
-  },
-  methods: {
-    $wsInitActionCable(spec) {
-      const component = this;
-      Utils.type.ifObject(
-        spec,
-        ws => {
-          const channelName = ws.channel;
-          const subscription = Object.assign({}, ws.params, {
-            channel: channelName
-          });
-
-          console.log("Connecting to channel", subscription);
-
-          consumer.subscriptions.create(subscription, {
-            connected() {
-              const ws = window.vueApp.actionCable;
-              ws.channels[channelName] = this;
-              console.log("Connected to channel", channelName);
-            },
-
-            disconnected() {},
-
-            received(data) {
-              const action = data.action;
-              const payload = { ...action, filterKey: ws.filterKey };
-              if (ws.filterKey === data.filterKey) {
-                GLib.action.execute(payload, null, component);
-              }
-            }
-          });
-        },
-        () => {
-          // this._wsDisconnectSocket();
-        }
-      );
-    }
-  }
-};
+import { createConsumer } from "@rails/actioncable";
+
+const consumer = createConsumer();
+
+export default {
+  data: function() {
+    return {
+      _wsSocket: null
+    };
+  },
+  methods: {
+    $wsInitActionCable(spec) {
+      const component = this;
+      Utils.type.ifObject(
+        spec,
+        ws => {
+          const channelName = ws.channel;
+          const subscription = Object.assign({}, ws.params, {
+            channel: channelName
+          });
+
+          console.log("Connecting to channel", subscription);
+
+          consumer.subscriptions.create(subscription, {
+            connected() {
+              const ws = window.vueApp.actionCable;
+              ws.channels[channelName] = this;
+              console.log("Connected to channel", channelName);
+            },
+
+            disconnected() {},
+
+            received(data) {
+              const action = data.action;
+              const payload = { ...action, filterKey: ws.filterKey };
+              if (ws.filterKey === data.filterKey) {
+                GLib.action.execute(payload, null, component);
+              }
+            }
+          });
+        },
+        () => {
+          // this._wsDisconnectSocket();
+        }
+      );
+    }
+  }
+};