glib-web 0.16.0 → 0.17.0

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,8 +127,10 @@ 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(() => {
           const params = {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.16.0",
+  "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);
+    };
+  }
+}