glib-web 0.15.3 → 0.17.0

package/components/avatar.vue

@@ -10,7 +10,11 @@
       <common-badge :spec="spec">
         <v-avatar :size="spec.size">
           <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
-          <img :src="spec.url || spec.base64Data" @click="$onClick()" />
+          <img
+            :style="$styles()"
+            :src="spec.url || spec.base64Data"
+            @click="$onClick()"
+          />
         </v-avatar>
       </common-badge>
     </template>

package/components/charts/pie.vue

@@ -0,0 +1,34 @@
+<template>
+  <pie-chart
+    :style="genericStyles()"
+    :class="$classes()"
+    :data="series"
+    :library="options"
+  ></pie-chart>
+</template>
+
+<script>
+export default {
+  mixins: [],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      series: []
+    };
+  },
+  methods: {
+    $ready() {
+      this.series = this.spec.dataSeries.reduce((prev, curr) => {
+        let obj = {};
+        obj[curr.title] = curr.value;
+
+        return Object.assign(prev, obj);
+      }, {});
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/component.vue

@@ -46,6 +46,7 @@ import Chip from "./chip";
 import Datetime from "./datetime";
 
 import ProgressBar from "./progressbar";
+import ProgressCircle from "./progressCircle.vue";
 
 import Image from "./image";
 import Avatar from "./avatar";
@@ -114,6 +115,7 @@ import SelectBanner from "./banners/select";
 
 import LineChart from "./charts/line";
 import ColumnChart from "./charts/column";
+import PieChart from "./charts/pie";
 
 import ShareButton from "./shareButton";
 
@@ -132,6 +134,7 @@ export default {
     "views-chip": Chip,
     "views-datetime": Datetime,
     "views-progressBar": ProgressBar,
+    "views-progressCircle": ProgressCircle,
 
     "views-image": Image,
     "views-avatar": Avatar,
@@ -200,7 +203,8 @@ export default {
     "banners-select": SelectBanner,
 
     "charts-line": LineChart,
-    "charts-column": ColumnChart
+    "charts-column": ColumnChart,
+    "charts-pie": PieChart
   },
   props: {
     spec: { type: Object, required: true }

package/components/fields/check.vue

@@ -6,6 +6,7 @@
     <v-checkbox
       v-model="fieldModel"
       :name="fieldName"
+      :disabled="spec.readOnly"
       :value="spec.checkValue"
       :label="fieldModel ? spec.onLabel || spec.label : spec.label"
       :on-icon="spec.onIcon"

package/components/fields/checkGroup.vue

@@ -8,7 +8,7 @@
     <!-- <fields-hidden v-if="!anyChecked" :spec="uncheckSpec" /> -->
 
     <div v-for="(item, index) in spec.childViews" :key="index">
-      <glib-component :spec="item" />
+      <glib-component :spec="childSpec(item)" />
     </div>
 
     <v-text-field
@@ -76,6 +76,13 @@ export default {
             return;
           }
         });
+    },
+    childSpec(item) {
+      if (this.spec.readOnly) {
+        return Object.assign(item, { readOnly: this.spec.readOnly });
+      }
+
+      return item;
     }
   }
 };

package/components/fields/richText.vue

@@ -4,7 +4,6 @@
     <VueEditor
       v-model="rawValue"
       :editor-toolbar="customToolbar"
-      :use-custom-image-handler="true"
       @text-change="separateOutImages"
       @image-added="uploadImage"
     />
@@ -39,7 +38,7 @@ export default {
       ["bold", "italic", "strike"],
       [{ header: 1 }, { header: 2 }],
       [{ list: "ordered" }, { list: "bullet" }],
-      ["blockquote", "link"]
+      ["link"]
     ],
     rawValue: "",
     cleanValue: "",
@@ -49,6 +48,14 @@ export default {
     imageUploader: {},
     turndownService: new TurndownService({ headingStyle: "atx" })
   }),
+  computed: {
+    showProgress: function() {
+      return this.progress.value >= 0;
+    },
+    markdownValue: function() {
+      return this.turndownService.turndown(this.rawValue);
+    }
+  },
   // mounted: function () {
   //   const vm = this
   //   this.rawValue = (this.spec.value || "").replace(/\{\{image([0-9]+)\}\}/g, function (_, index) {
@@ -62,13 +69,8 @@ export default {
   //     return "{{IMAGE_NOT_FOUND}}"
   //   })
   // },
-  computed: {
-    showProgress: function() {
-      return this.progress.value >= 0;
-    },
-    markdownValue: function() {
-      return this.turndownService.turndown(this.rawValue);
-    }
+  mounted() {
+    this.registerScrollEvent();
   },
   methods: {
     $ready() {
@@ -162,12 +164,39 @@ export default {
       };
       reader.readAsDataURL(file);
       vm.progress.value = -1;
+    },
+    updateToolbar: function(wrapper, toolbar, container) {
+      if (wrapper.scrollTop >= container.offsetTop) {
+        toolbar.classList.add("sticky");
+        toolbar.style.top = `${wrapper.offsetTop}px`;
+        toolbar.style.left = `${wrapper.offsetLeft}px`;
+        toolbar.style.width = `${wrapper.offsetWidth}px`;
+      } else {
+        toolbar.classList.remove("sticky");
+        toolbar.style.top = "auto";
+        toolbar.style.left = "auto";
+        toolbar.style.width = "auto";
+      }
+    },
+    registerScrollEvent: function() {
+      const wrapper = document.querySelector(".v-dialog") || window;
+      const toolbar = this.$el.querySelector(".ql-toolbar");
+      const container = this.$el.querySelector(".ql-container");
+
+      if (wrapper) {
+        wrapper.addEventListener("scroll", () =>
+          this.updateToolbar(wrapper, toolbar, container)
+        );
+        window.addEventListener("resize", () =>
+          this.updateToolbar(wrapper, toolbar, container)
+        );
+      }
     }
   }
 };
 </script>
 
-<style scoped>
+<style>
 /*
 @import "~vue2-editor/dist/vue2-editor.css";
 @import '~quill/dist/quill.core.css';
@@ -177,4 +206,9 @@ export default {
   height: 375px;
 }
 */
+.ql-toolbar.sticky {
+  position: fixed;
+  z-index: 99;
+  background-color: white;
+}
 </style>

package/components/fields/text.vue

@@ -35,6 +35,8 @@
 </template>
 
 <script>
+import eventFiltering from "../../utils/eventFiltering";
+
 export default {
   props: {
     spec: { type: Object, required: true },
@@ -125,11 +127,20 @@ export default {
     classes() {
       return this.$classes().concat("g-text-field--hintless");
     },
-    // TODO: Consider using debounce to wait until user has finished typing.
-    onChange() {
+    onChange: eventFiltering.debounce(function() {
+      this.executeActionWithParams();
+    }, 300),
+    executeActionWithParams() {
       Utils.type.ifObject(this.spec.onChange, onChange => {
         this.$nextTick(() => {
-          GLib.action.execute(onChange, this);
+          const params = {
+            [this.spec.paramNameForFormData || "formData"]: {
+              [this.fieldName]: this.fieldModel
+            }
+          };
+
+          const data = Object.assign({}, onChange, params);
+          GLib.action.execute(data, this);
         });
       });
     }

package/components/mixins/styles.js

@@ -40,6 +40,7 @@ export default {
       if (val === this.vuetifyEmptyString) {
         val = "";
       }
+
       // Make the field property observable for dynamic showing/hiding
       Vue.set(
         this.$data._fieldModels,
@@ -96,26 +97,6 @@ export default {
         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,

package/components/panels/list.vue

@@ -264,4 +264,9 @@ export default {
   opacity: 0.5;
   background: #dddddd;
 }
+
+.selected {
+  // TODO: Use lighter primary color: https://stackoverflow.com/questions/48280990/using-custom-theming-in-vuetify-and-pass-color-variables-to-components
+  background-color: lightblue;
+}
 </style>

package/components/progressCircle.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-progress-circular
+    :class="$classes()"
+    :rotate="spec.rotate || 270"
+    :size="spec.size || 100"
+    :width="spec.width || 20"
+    :color="spec.color"
+    :value="spec.value"
+  >
+    <span class="grey--text text--lighten-1 text-h5">{{ spec.text }}</span>
+  </v-progress-circular>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped></style>

package/index.js

@@ -182,13 +182,6 @@ document.addEventListener("DOMContentLoaded", () => {
     data: {
       vueApp: window.vueApp
     },
-    // data: {
-    //   vuetify: vuetify,
-    //   page: window.__page,
-    //   indicator: false,
-    //   isStale: false,
-    //   webSocket: { channels: {}, header: {}, listWindow: null }
-    // },
     render: function(createElement) {
       return createElement(App, { props: { page: this.$data.vueApp.page } });
     }

package/nav/drawer.vue

@@ -10,14 +10,14 @@
     :permanent="cssClasses.includes('permanent')"
     :style="style"
     :expand-on-hover="expandOnHover()"
-    :mini-variant.sync="mini"
+    :mini-variant.sync="shrunk"
     @input="updateState"
   >
-    <template v-if="mini != null" v-slot:prepend>
+    <template v-if="mini" v-slot:prepend>
       <v-list-item>
         <v-list-item-icon>
-          <v-icon v-if="!mini">mdi-chevron-left</v-icon>
-          <v-icon v-if="mini">mdi-chevron-right</v-icon>
+          <v-icon v-if="!shrunk">mdi-chevron-left</v-icon>
+          <v-icon v-if="shrunk">mdi-chevron-right</v-icon>
         </v-list-item-icon>
       </v-list-item>
     </template>
@@ -39,7 +39,7 @@
       <v-list-item>
         <!-- Display the first line when the drawer is shrunk. Display the second line when the drawer is expanded -->
         <div style="display: none">Show if expand</div>
-        <panels-responsive v-if="!mini" :spec="spec.footer" />
+        <panels-responsive v-if="!shrunk" :spec="spec.footer" />
       </v-list-item>
     </template>
   </v-navigation-drawer>
@@ -135,7 +135,8 @@ export default {
       // Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.
       // See https://vuetifyjs.com/en/components/navigation-drawers
       state: null,
-      mini: true
+      mini: true,
+      shrunk: true
     };
   },
   computed: {
@@ -167,7 +168,7 @@ export default {
   },
   methods: {
     $ready() {
-      this.mini = !this.cssClasses.includes("maxi");
+      this.shrunk = this.mini = this.cssClasses.includes("mini");
       this.updateNavigationStyle(window.location);
 
       // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
@@ -181,10 +182,7 @@ export default {
       this.state = state;
     },
     expandOnHover() {
-      return (
-        this.cssClasses.includes("mini") ||
-        (this.cssClasses.includes("mini-lg-and-above") && this.lgAndAbove)
-      );
+      return this.mini;
     },
     updateNavigationStyle(urlObject) {
       const navMap = navigationMap(this.$el, urlObject.pathname);
@@ -199,7 +197,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .nav-item {
   position: relative;
 }
@@ -215,3 +213,14 @@ export default {
   background-color: white;
 }
 </style>
+
+<style lang="scss">
+// Move the padding to the badge to ensure that the item is middle-aligned.
+.v-list--dense .nav-item .v-list-item .v-list-item__content {
+  padding: 0;
+
+  .v-badge {
+    margin: 8px 0;
+  }
+}
+</style>

package/package.json

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

package/utils/eventFiltering.js

@@ -0,0 +1,11 @@
+export default class {
+  static debounce(func, timeout = 300) {
+    let timer;
+    return function(...args) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, timeout);
+    };
+  }
+}