glib-web 0.5.77

package/components/banners/alert.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-alert
+    :style="genericStyles()"
+    :class="$classes()"
+    :value="true"
+    :color="color"
+    :outlined="!$classes().includes('frameless')"
+  >
+    <!-- <span class="padder" v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span> -->
+    <!-- <common-icon :spec="spec.icon || {}" /> -->
+    <common-message :spec="spec" />
+  </v-alert>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      parentStyles: {},
+      color: null
+    };
+  },
+  methods: {
+    $ready() {
+      const vm = this;
+
+      this.$type.ifArray(this.spec.styleClasses, val => {
+        ["success", "info", "warning", "error"].forEach(color => {
+          if (val.remove(color)) {
+            vm.color = color;
+          }
+          // if (val.includes(color)) {
+          //   vm.color = color
+          // }
+        });
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.frameless {
+  padding: 0;
+}
+</style>

package/components/banners/select.vue

@@ -0,0 +1,82 @@
+<template>
+  <v-banner
+    :id="spec.id"
+    :style="genericStyles()"
+    :class="$classes()"
+    :color="spec.color || color"
+    :dark="dark"
+    single-line
+    :outlined="!$classes().includes('frameless')"
+  >
+    <common-icon v-if="spec.icon" slot="icon" :spec="spec.icon" />
+
+    <common-message :spec="spec" />
+
+    <template v-slot:actions>
+      <template v-for="(item, index) in spec.buttons">
+        <common-dropdownMenu
+          v-if="item.childButtons"
+          :key="index"
+          :spec="item"
+          :disabled="$isBusy"
+        />
+        <common-button
+          v-else
+          :key="index"
+          :spec="buttonSpec(item)"
+          :disabled="$isBusy"
+          :hide-text-on-xs="true"
+        />
+      </template>
+    </template>
+  </v-banner>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      color: null,
+      dark: false
+    };
+  },
+  methods: {
+    $ready() {
+      // const vm = this;
+      // this.$type.ifArray(this.spec.styleClasses, val => {
+      //   ["success", "info", "warning", "error"].forEach(color => {
+      //     if (val.remove(color)) {
+      //       vm.color = color;
+      //       vm.dark = true;
+      //     }
+      //   });
+      // });
+    },
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        styleClasses: ["text"]
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.frameless {
+  padding: 0;
+}
+.v-list-item {
+  padding: 0 8px 0 8px;
+
+  > a,
+  > button {
+    width: 100%;
+    min-height: 48px;
+    justify-content: flex-start;
+  }
+}
+</style>

package/components/button.vue

@@ -0,0 +1,13 @@
+<template>
+  <common-button :spec="spec" :disabled="$isBusy" />
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/calendar.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-container fluid class="pa-0">
+    <div>
+      <div class="d-flex justify-space-between align-center mb-4">
+        <div>
+          <v-btn fab outlined small left color="primary" @click="prev()">
+            <v-icon dark>mdi-chevron-left</v-icon>
+          </v-btn>
+        </div>
+        <div>
+          <strong>{{ title }}</strong>
+        </div>
+        <div>
+          <v-btn fab outlined small left color="primary" @click="next()">
+            <v-icon dark>mdi-chevron-right</v-icon>
+          </v-btn>
+        </div>
+      </div>
+    </div>
+    <v-sheet :style="genericStyles()">
+      <v-calendar
+        ref="calendar"
+        v-model="currentDate"
+        type="month"
+        :today="currentDate"
+        :events="events"
+        @click:event="showEvent"
+      ></v-calendar>
+    </v-sheet>
+  </v-container>
+</template>
+
+<script>
+import Http from "../utils/http";
+import Action from "../action";
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      events: [],
+      currentDate: new Date().toISOString().slice(0, 10)
+    };
+  },
+  computed: {
+    title() {
+      const months = [
+        "JAN",
+        "FEB",
+        "MAR",
+        "APR",
+        "MAY",
+        "JUN",
+        "JUL",
+        "AUG",
+        "SEP",
+        "OCT",
+        "NOV",
+        "DEC"
+      ];
+      const current = new Date(this.currentDate);
+      return `${months[current.getMonth()]} ${current.getFullYear()}`;
+    }
+  },
+  methods: {
+    next() {
+      this.$refs.calendar.next();
+    },
+    prev() {
+      this.$refs.calendar.prev();
+    },
+    $ready() {
+      this.fetchData();
+    },
+    fetchData() {
+      const url = new URL(this.spec.dataUrl);
+
+      Http.execute({ url: url.toString() }, "GET", this, response => {
+        const events = response.rows;
+        // this.currentDate = events[0].start;
+
+        let beginningDate = true;
+        this.events = events.map(item => {
+          item.name = item.title;
+
+          const extra = item.extra;
+          item.start = extra.start;
+          item.end = extra.end;
+
+          if (beginningDate) {
+            beginningDate = false;
+            this.currentDate = item.start;
+          }
+          return item;
+        });
+      });
+    },
+    showEvent({ event, target }) {
+      Action.execute(event.onClick, target, this);
+    }
+  }
+};
+</script>

package/components/charts/column.vue

@@ -0,0 +1,26 @@
+<template>
+  <column-chart :data="groups" :stacked="spec.stacked"></column-chart>
+</template>
+
+<script>
+// https://chartkick.com/vue
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      groups: []
+    };
+  },
+  methods: {
+    $ready() {
+      this.groups = this.spec.dataGroups.map(element => {
+        return { name: element.title, data: element.points };
+      });
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/charts/line.vue

@@ -0,0 +1,61 @@
+<template>
+  <line-chart
+    :style="genericStyles()"
+    :class="$classes()"
+    :data="series"
+  ></line-chart>
+</template>
+
+<script>
+export default {
+  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>

package/components/chip.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-chip
+    v-if="spec.onClick"
+    :style="genericStyles()"
+    :class="$classes()"
+    :href="$href()"
+    @click="$onClick()"
+  >
+    {{ spec.text }}
+  </v-chip>
+  <v-chip v-else :style="genericStyles()" :class="$classes()">
+    {{ spec.text }}
+  </v-chip>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/component.vue

@@ -0,0 +1,222 @@
+<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 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-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>

package/components/datetime.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>{{ formattedTime }}</div>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      initialTimestamp: null,
+      displayTimestamp: null,
+      distance: null,
+      timer: null
+    };
+  },
+  computed: {
+    formattedTime() {
+      return moment(new Date(this.initialTimestamp + this.distance)).format(
+        this.spec.format || "YYYY-MM-DD hh:mm:ss"
+      );
+    }
+  },
+  methods: {
+    $ready() {
+      this.displayTimestamp = Date.parse(this.spec.value);
+      this.initialTimestamp = new Date().getTime();
+
+      if (this.spec.tick === true) {
+        this.timer = setInterval(this.tick, 100);
+      }
+    },
+    $tearDown() {
+      console.log("TimeTicker destroyed");
+      if (this.timer != null) {
+        clearInterval(this.timer);
+        console.log(`Timer stopped: ${this.timer}`);
+      }
+    },
+    tick() {
+      this.distance = new Date().getTime() - this.initialTimestamp;
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* h4 {
+  line-height: 1.5;
+} */
+</style>

package/components/fab.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-btn
+    color="indigo"
+    @click="$onClick()"
+    :disabled="$isBusy"
+    :style="genericStyles()"
+    :class="$classes()"
+    :href="$href()"
+    :rel="$rel()"
+    fab
+    fixed
+    bottom
+    right
+    >
+    <!-- Using `white--text` as recommended in https://github.com/vuetifyjs/vuetify/issues/1030 -->
+    <common-icon v-if="spec.icon" :spec="spec.icon" class="white--text" />
+  </v-btn>
+</template>
+
+<script>
+export default {
+  props: ['spec']
+}
+</script>
+
+<style scoped>
+
+/* Attempts to fix icon alignment issue on production */
+.v-btn--floating .v-icon {
+  display: inline-flex
+}
+
+</style>