glib-web 0.5.98 → 0.6.2

package/components/charts/line.vue

@@ -1,65 +1,67 @@
-<template>
-  <line-chart
-    :style="genericStyles()"
-    :class="$classes()"
-    :data="series"
-    :library="options"
-  ></line-chart>
-</template>
-
-<script>
-import chartMixin from "../mixins/chart.js";
-
-export default {
-  mixins: [chartMixin],
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      series: []
-    };
-  },
-  methods: {
-    $ready() {
-      this.series.clear();
-      this.renderData(this.spec.dataSeries);
-      this.fetchNext(this.spec.nextPage);
-    },
-    fetchData(url) {
-      const vm = this;
-      Utils.type.ifString(url, val => {
-        Utils.http.execute({ url: val }, "GET", this, response => {
-          vm.renderData(response.dataSeries);
-          vm.fetchNext(response.nextPage);
-        });
-      });
-    },
-    fetchNext(nextPage) {
-      if (!Utils.type.isObject(nextPage)) {
-        return;
-      }
-      if (nextPage.autoload != "all") {
-        return;
-      }
-      this.fetchData(nextPage.url);
-    },
-    renderData(series) {
-      if (!Utils.type.isArray(series)) {
-        return;
-      }
-
-      const data = series.map(element => {
-        const dataPoints = {};
-        element.points.forEach(point => {
-          dataPoints[point.x] = point.y;
-        });
-        return { name: element.title, data: dataPoints };
-      });
-      this.series = this.series.concat(data);
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <line-chart
+    :style="genericStyles()"
+    :class="$classes()"
+    :data="series"
+    :library="options"
+  ></line-chart>
+</template>
+
+<script>
+import annotation from "../mixins/chart/annotation.js";
+import tooltip from "../mixins/chart/tooltip.js";
+
+export default {
+  mixins: [annotation, tooltip],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      series: [],
+      dataName: "dataSeries"
+    };
+  },
+  methods: {
+    $ready() {
+      this.series.clear();
+      this.renderData(this.spec.dataSeries);
+      this.fetchNext(this.spec.nextPage);
+    },
+    fetchData(url) {
+      const vm = this;
+      Utils.type.ifString(url, val => {
+        Utils.http.execute({ url: val }, "GET", this, response => {
+          vm.renderData(response.dataSeries);
+          vm.fetchNext(response.nextPage);
+        });
+      });
+    },
+    fetchNext(nextPage) {
+      if (!Utils.type.isObject(nextPage)) {
+        return;
+      }
+      if (nextPage.autoload != "all") {
+        return;
+      }
+      this.fetchData(nextPage.url);
+    },
+    renderData(series) {
+      if (!Utils.type.isArray(series)) {
+        return;
+      }
+
+      const data = series.map(element => {
+        const dataPoints = {};
+        element.points.forEach(point => {
+          dataPoints[point.x] = point.y;
+        });
+        return { name: element.title, data: dataPoints };
+      });
+      this.series = this.series.concat(data);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/chip.vue

@@ -1,26 +1,51 @@
-<template>
-  <v-chip
-    v-if="spec.onClick"
-    :style="genericStyles()"
-    :class="$classes()"
-    :href="$href()"
-    @click="$onClick()"
-  >
-    {{ spec.text }}
-    <common-badge :spec="spec" />
-  </v-chip>
-  <v-chip v-else :style="genericStyles()" :class="$classes()">
-    {{ spec.text }}
-    <common-badge :spec="spec" />
-  </v-chip>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <v-tooltip
+    :disabled="!spec.tooltip"
+    :top="tooltipPositionMatches('top')"
+    :right="tooltipPositionMatches('right')"
+    :bottom="tooltipPositionMatches('bottom')"
+    :left="tooltipPositionMatches('left')"
+  >
+    <template v-slot:activator="{ on }">
+      <div v-on="on">
+        <v-chip
+          v-if="spec.onClick"
+          :style="genericStyles()"
+          :class="$classes()"
+          :href="$href()"
+          @click="$onClick()"
+        >
+          {{ spec.text }}
+          <common-badge :spec="spec" />
+        </v-chip>
+        <v-chip v-else :style="genericStyles()" :class="$classes()">
+          {{ spec.text }}
+          <common-badge :spec="spec" />
+        </v-chip>
+      </div>
+    </template>
+    <span>{{ tooltip.text }}</span>
+  </v-tooltip>
+</template>
+
+<script>
+import TooltipMixins from "./mixins/tooltip";
+export default {
+  mixins: [TooltipMixins],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      tooltip: {}
+    };
+  },
+  methods: {
+    $ready() {
+      this.tooltip = this.spec.tooltip || {};
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/component.vue

@@ -1,225 +1,225 @@
-<template>
-  <fields-text v-if="name == 'fields-text'" :spec="spec" type="text" />
-  <fields-text v-else-if="name == 'fields-number'" :spec="spec" type="number" />
-  <fields-text v-else-if="name == 'fields-email'" :spec="spec" type="email" />
-  <fields-text v-else-if="name == 'fields-url'" :spec="spec" type="url" />
-  <fields-text
-    v-else-if="name == 'fields-password'"
-    :spec="spec"
-    type="password"
-  />
-  <!-- <fields-textarea v-else-if="spec.view == 'fields/textarea-v1'" :spec="spec" />
-  <fields-richText v-else-if="spec.view == 'fields/richText-v1'" :spec="spec" /> -->
-  <!-- <fields-file v-else-if="spec.view == 'fields/file-v1'" :spec="spec" />
-  <fields-select v-else-if="spec.view == 'fields/select-v1'" :spec="spec" />
-  <fields-dynamicSelect
-    v-else-if="spec.view == 'fields/dynamicSelect-v1'"
-    :spec="spec"
-  /> -->
-  <!-- <fields-country v-else-if="spec.view == 'fields/country-v1'" :spec="spec" /> -->
-
-  <!-- <fields-latLong v-else-if="spec.view == 'fields/latLong-v1'" :spec="spec" /> -->
-  <fields-googlePlace
-    v-else-if="spec.view == 'fields/googlePlace-v1'"
-    :spec="spec"
-  />
-
-  <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
-
-  <component :is="name" v-else-if="name" :spec="spec" />
-
-  <div v-else>Unsupported view: {{ spec.view }}</div>
-</template>
-
-<script>
-import H1 from "./h1";
-import H2 from "./h2";
-import H3 from "./h3";
-import H4 from "./h4";
-import H5 from "./h5";
-import H6 from "./h6";
-import Label from "./label";
-import P from "./p";
-import Markdown from "./markdown";
-import Html from "./html";
-import Chip from "./chip";
-import Datetime from "./datetime";
-
-import ProgressBar from "./progressbar";
-
-import Image from "./image";
-import Avatar from "./avatar";
-import Icon from "./icon";
-
-import Button from "./button";
-import Fab from "./fab";
-import Switch from "./switch";
-
-import Hr from "./hr";
-import Spacer from "./spacer";
-
-import Map from "./map";
-import TabBar from "./tabBar";
-import Calendar from "./calendar";
-
-import HiddenField from "./fields/hidden";
-import TextField from "./fields/text";
-import SubmitField from "./fields/submit";
-import TextAreaField from "./fields/textarea";
-import RichTextField from "./fields/richText";
-import NewRichTextField from "./fields/newRichText";
-import FileField from "./fields/file";
-import AutocompleteField from "./fields/autocomplete";
-import SelectField from "./fields/select";
-import TimeZoneField from "./fields/timeZone";
-import DynamicSelectField from "./fields/dynamicSelect";
-import CountryField from "./fields/country/field";
-import RadioGroupField from "./fields/radioGroup";
-import RadioField from "./fields/radio";
-import CheckGroupField from "./fields/checkGroup";
-import CheckField from "./fields/check";
-import DateField from "./fields/date";
-import DateTimeField from "./fields/datetime";
-import LocationField from "./fields/location";
-import GooglePlaceField from "./fields/googlePlace";
-import DynamicGroupField from "./fields/dynamicGroup";
-import StripeTokenField from "./fields/stripeToken";
-import StripeExternalAccount from "./fields/stripeExternalAccount";
-import CreditCardField from "./fields/creditCard";
-import RatingField from "./fields/rating";
-import PhoneField from "./fields/phone/field";
-import TimerField from "./fields/timer";
-
-import ScrollPanel from "./panels/scroll";
-import VerticalPanel from "./panels/vertical";
-import HorizontalPanel from "./panels/horizontal";
-import FlowPanel from "./panels/flow";
-import SplitPanel from "./panels/split";
-import FormPanel from "./panels/form";
-import ListPanel from "./panels/list";
-import CarouselPanel from "./panels/carousel";
-import TablePanel from "./panels/table";
-import CustomPanel from "./panels/custom";
-import ColumnPanel from "./panels/column";
-import ResponsivePanel from "./panels/responsive";
-import UlPanel from "./panels/ul";
-import WebPanel from "./panels/web";
-
-import AlertBanner from "./banners/alert";
-import SelectBanner from "./banners/select";
-
-import LineChart from "./charts/line";
-import ColumnChart from "./charts/column";
-
-export default {
-  components: {
-    "views-h1": H1,
-    "views-h2": H2,
-    "views-h3": H3,
-    "views-h4": H4,
-    "views-h5": H5,
-    "views-h6": H6,
-    "views-label": Label,
-    "views-p": P,
-    "views-markdown": Markdown,
-    "views-html": Html,
-    "views-chip": Chip,
-    "views-datetime": Datetime,
-    "views-progressBar": ProgressBar,
-
-    "views-image": Image,
-    "views-avatar": Avatar,
-    "views-icon": Icon,
-
-    "views-button": Button,
-    "views-fab": Fab,
-    "views-switch": Switch,
-
-    "views-hr": Hr,
-    "views-spacer": Spacer,
-
-    "views-map": Map,
-    "views-tabBar": TabBar,
-    "views-calendar": Calendar,
-
-    "fields-hidden": HiddenField,
-    "fields-text": TextField,
-    "fields-submit": SubmitField,
-    "fields-textarea": TextAreaField,
-    "fields-richText": RichTextField,
-    "fields-newRichText": NewRichTextField,
-    "fields-file": FileField,
-    "fields-autocomplete": AutocompleteField,
-    "fields-select": SelectField,
-    "fields-timeZone": TimeZoneField,
-    "fields-dynamicSelect": DynamicSelectField,
-    "fields-country": CountryField,
-    "fields-radioGroup": RadioGroupField,
-    "fields-radio": RadioField,
-    "fields-checkGroup": CheckGroupField,
-    "fields-check": CheckField,
-    "fields-date": DateField,
-    "fields-datetime": DateTimeField,
-    "fields-location": LocationField,
-    "fields-googlePlace": GooglePlaceField,
-    "fields-dynamicGroup": DynamicGroupField,
-    "fields-stripeToken": StripeTokenField,
-    "fields-stripeExternalAccount": StripeExternalAccount,
-    "fields-creditCard": CreditCardField,
-    "fields-rating": RatingField,
-    "fields-phone": PhoneField,
-    "fields-timer": TimerField,
-
-    "panels-scroll": ScrollPanel,
-    "panels-vertical": VerticalPanel,
-    "panels-horizontal": HorizontalPanel,
-    "panels-flow": FlowPanel,
-    "panels-split": SplitPanel,
-    "panels-form": FormPanel,
-    "panels-list": ListPanel,
-    "panels-carousel": CarouselPanel,
-    "panels-table": TablePanel,
-    "panels-custom": CustomPanel,
-    "panels-responsive": ResponsivePanel,
-    "panels-column": ColumnPanel,
-    "panels-ul": UlPanel,
-    "panels-web": WebPanel,
-
-    "banners-alert": AlertBanner,
-    "banners-select": SelectBanner,
-
-    "charts-line": LineChart,
-    "charts-column": ColumnChart
-  },
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      name: null
-    };
-  },
-  beforeUpdate() {
-    // NOTE: Not sure what this is for
-    // Make sure vuejs will not attempt to render old data.
-    // if (this._mountedUrl !== window.location.href) {
-    //   this.name = null;
-    // }
-  },
-  methods: {
-    $ready() {
-      const name = Utils.app.componentName(this.spec.view);
-      const strict = true;
-      if (strict) {
-        this.name = name;
-      } else {
-        if (this.$options.components[name]) {
-          this.name = name;
-        }
-      }
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <fields-text v-if="name == 'fields-text'" :spec="spec" type="text" />
+  <fields-text v-else-if="name == 'fields-number'" :spec="spec" type="number" />
+  <fields-text v-else-if="name == 'fields-email'" :spec="spec" type="email" />
+  <fields-text v-else-if="name == 'fields-url'" :spec="spec" type="url" />
+  <fields-text
+    v-else-if="name == 'fields-password'"
+    :spec="spec"
+    type="password"
+  />
+  <!-- <fields-textarea v-else-if="spec.view == 'fields/textarea-v1'" :spec="spec" />
+  <fields-richText v-else-if="spec.view == 'fields/richText-v1'" :spec="spec" /> -->
+  <!-- <fields-file v-else-if="spec.view == 'fields/file-v1'" :spec="spec" />
+  <fields-select v-else-if="spec.view == 'fields/select-v1'" :spec="spec" />
+  <fields-dynamicSelect
+    v-else-if="spec.view == 'fields/dynamicSelect-v1'"
+    :spec="spec"
+  /> -->
+  <!-- <fields-country v-else-if="spec.view == 'fields/country-v1'" :spec="spec" /> -->
+
+  <!-- <fields-latLong v-else-if="spec.view == 'fields/latLong-v1'" :spec="spec" /> -->
+  <fields-googlePlace
+    v-else-if="spec.view == 'fields/googlePlace-v1'"
+    :spec="spec"
+  />
+
+  <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
+
+  <component :is="name" v-else-if="name" :spec="spec" />
+
+  <div v-else>Unsupported view: {{ spec.view }}</div>
+</template>
+
+<script>
+import H1 from "./h1";
+import H2 from "./h2";
+import H3 from "./h3";
+import H4 from "./h4";
+import H5 from "./h5";
+import H6 from "./h6";
+import Label from "./label";
+import P from "./p";
+import Markdown from "./markdown";
+import Html from "./html";
+import Chip from "./chip";
+import Datetime from "./datetime";
+
+import ProgressBar from "./progressbar";
+
+import Image from "./image";
+import Avatar from "./avatar";
+import Icon from "./icon";
+
+import Button from "./button";
+import Fab from "./fab";
+import Switch from "./switch";
+
+import Hr from "./hr";
+import Spacer from "./spacer";
+
+import Map from "./map";
+import TabBar from "./tabBar";
+import Calendar from "./calendar";
+
+import HiddenField from "./fields/hidden";
+import TextField from "./fields/text";
+import SubmitField from "./fields/submit";
+import TextAreaField from "./fields/textarea";
+import RichTextField from "./fields/richText";
+import NewRichTextField from "./fields/newRichText";
+import FileField from "./fields/file";
+import AutocompleteField from "./fields/autocomplete";
+import SelectField from "./fields/select";
+import TimeZoneField from "./fields/timeZone";
+import DynamicSelectField from "./fields/dynamicSelect";
+import CountryField from "./fields/country/field";
+import RadioGroupField from "./fields/radioGroup";
+import RadioField from "./fields/radio";
+import CheckGroupField from "./fields/checkGroup";
+import CheckField from "./fields/check";
+import DateField from "./fields/date";
+import DateTimeField from "./fields/datetime";
+import LocationField from "./fields/location";
+import GooglePlaceField from "./fields/googlePlace";
+import DynamicGroupField from "./fields/dynamicGroup";
+import StripeTokenField from "./fields/stripeToken";
+import StripeExternalAccount from "./fields/stripeExternalAccount";
+import CreditCardField from "./fields/creditCard";
+import RatingField from "./fields/rating";
+import PhoneField from "./fields/phone/field";
+import TimerField from "./fields/timer";
+
+import ScrollPanel from "./panels/scroll";
+import VerticalPanel from "./panels/vertical";
+import HorizontalPanel from "./panels/horizontal";
+import FlowPanel from "./panels/flow";
+import SplitPanel from "./panels/split";
+import FormPanel from "./panels/form";
+import ListPanel from "./panels/list";
+import CarouselPanel from "./panels/carousel";
+import TablePanel from "./panels/table";
+import CustomPanel from "./panels/custom";
+import ColumnPanel from "./panels/column";
+import ResponsivePanel from "./panels/responsive";
+import UlPanel from "./panels/ul";
+import WebPanel from "./panels/web";
+
+import AlertBanner from "./banners/alert";
+import SelectBanner from "./banners/select";
+
+import LineChart from "./charts/line";
+import ColumnChart from "./charts/column";
+
+export default {
+  components: {
+    "views-h1": H1,
+    "views-h2": H2,
+    "views-h3": H3,
+    "views-h4": H4,
+    "views-h5": H5,
+    "views-h6": H6,
+    "views-label": Label,
+    "views-p": P,
+    "views-markdown": Markdown,
+    "views-html": Html,
+    "views-chip": Chip,
+    "views-datetime": Datetime,
+    "views-progressBar": ProgressBar,
+
+    "views-image": Image,
+    "views-avatar": Avatar,
+    "views-icon": Icon,
+
+    "views-button": Button,
+    "views-fab": Fab,
+    "views-switch": Switch,
+
+    "views-hr": Hr,
+    "views-spacer": Spacer,
+
+    "views-map": Map,
+    "views-tabBar": TabBar,
+    "views-calendar": Calendar,
+
+    "fields-hidden": HiddenField,
+    "fields-text": TextField,
+    "fields-submit": SubmitField,
+    "fields-textarea": TextAreaField,
+    "fields-richText": RichTextField,
+    "fields-newRichText": NewRichTextField,
+    "fields-file": FileField,
+    "fields-autocomplete": AutocompleteField,
+    "fields-select": SelectField,
+    "fields-timeZone": TimeZoneField,
+    "fields-dynamicSelect": DynamicSelectField,
+    "fields-country": CountryField,
+    "fields-radioGroup": RadioGroupField,
+    "fields-radio": RadioField,
+    "fields-checkGroup": CheckGroupField,
+    "fields-check": CheckField,
+    "fields-date": DateField,
+    "fields-datetime": DateTimeField,
+    "fields-location": LocationField,
+    "fields-googlePlace": GooglePlaceField,
+    "fields-dynamicGroup": DynamicGroupField,
+    "fields-stripeToken": StripeTokenField,
+    "fields-stripeExternalAccount": StripeExternalAccount,
+    "fields-creditCard": CreditCardField,
+    "fields-rating": RatingField,
+    "fields-phone": PhoneField,
+    "fields-timer": TimerField,
+
+    "panels-scroll": ScrollPanel,
+    "panels-vertical": VerticalPanel,
+    "panels-horizontal": HorizontalPanel,
+    "panels-flow": FlowPanel,
+    "panels-split": SplitPanel,
+    "panels-form": FormPanel,
+    "panels-list": ListPanel,
+    "panels-carousel": CarouselPanel,
+    "panels-table": TablePanel,
+    "panels-custom": CustomPanel,
+    "panels-responsive": ResponsivePanel,
+    "panels-column": ColumnPanel,
+    "panels-ul": UlPanel,
+    "panels-web": WebPanel,
+
+    "banners-alert": AlertBanner,
+    "banners-select": SelectBanner,
+
+    "charts-line": LineChart,
+    "charts-column": ColumnChart
+  },
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      name: null
+    };
+  },
+  beforeUpdate() {
+    // NOTE: Not sure what this is for
+    // Make sure vuejs will not attempt to render old data.
+    // if (this._mountedUrl !== window.location.href) {
+    //   this.name = null;
+    // }
+  },
+  methods: {
+    $ready() {
+      const name = Utils.app.componentName(this.spec.view);
+      const strict = true;
+      if (strict) {
+        this.name = name;
+      } else {
+        if (this.$options.components[name]) {
+          this.name = name;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped></style>