glib-web 0.5.98 → 0.6.2

package/index.js

@@ -1,199 +1,199 @@
-import Vue from "vue";
-export { Vue };
-
-import App from "./app.vue";
-
-import * as VueGoogleMaps from "vue2-google-maps";
-Vue.use(VueGoogleMaps, {
-  load: {
-    key: process.env.GMAPS_API_KEY,
-    libraries: "places"
-  }
-});
-
-import "./styles/test.scss";
-import "./styles/test.sass";
-
-import Vuetify from "vuetify";
-import "vuetify/dist/vuetify.min.css";
-// import "material-design-icons-iconfont/dist/material-design-icons.css";
-// import "@mdi/font/css/materialdesignicons.css";
-Vue.use(Vuetify);
-
-import Chartkick from "vue-chartkick";
-import Chart from "chart.js";
-import annotationPlugin from "chartjs-plugin-annotation";
-Chart.plugins.register(annotationPlugin);
-Vue.use(Chartkick.use(Chart));
-
-// TODO: make this opt-in
-import VueYoutube from "vue-youtube";
-Vue.use(VueYoutube);
-
-// import VueAnalytics from 'vue-analytics'
-// // TODO: Avoid hardcoding
-// Vue.use(VueAnalytics, {
-//   id: 'UA-146876849-1'
-// })
-
-import "./extensions/string.js";
-import "./extensions/array.js";
-
-// Recursive components must be global
-import VerticalPanel from "./components/panels/vertical";
-import ResponsivePanel from "./components/panels/responsive";
-import Component from "./components/component";
-import CommonIcon from "./components/_icon";
-import CommonBadge from "./components/_badge";
-import CommonButton from "./components/_button";
-import CommonMessage from "./components/_message";
-import CommonDropdownMenu from "./components/_dropdownMenu";
-import CommonTemplateMenu from "./templates/_menu";
-Vue.component("panels-vertical", VerticalPanel);
-Vue.component("panels-responsive", ResponsivePanel);
-Vue.component("common-button", CommonButton);
-Vue.component("common-icon", CommonIcon);
-Vue.component("common-badge", CommonBadge);
-Vue.component("common-message", CommonMessage);
-Vue.component("common-dropdownMenu", CommonDropdownMenu);
-Vue.component("templates-menu", CommonTemplateMenu);
-
-// TODO: Deprecate
-Vue.component("ui-component", Component);
-
-Vue.component("glib-component", Component);
-Vue.component("glib-icon", CommonIcon);
-Vue.component("glib-panels-responsive", ResponsivePanel);
-// Vue.component("glib-templates-menu", CommonTemplateMenu);
-
-import genericMixin from "./components/mixins/generic.js";
-Vue.mixin(genericMixin);
-
-import eventsMixin from "./components/mixins/events.js";
-Vue.mixin(eventsMixin);
-
-import stylesMixin from "./components/mixins/styles.js";
-Vue.mixin(stylesMixin);
-
-import scrollingMixin from "./components/mixins/scrolling.js";
-Vue.mixin(scrollingMixin);
-
-import longClickDirective from "./components/mixins/longClick.js";
-window.longClickInstance = longClickDirective({ delay: 500, interval: 0 });
-Vue.directive("longclick", window.longClickInstance);
-
-// TODO: Deprecate
-import TypeUtils from "./utils/type";
-Vue.use({
-  install: function(Vue, options) {
-    Vue.prototype.$type = {
-      isObject: TypeUtils.isObject,
-      isString: TypeUtils.isString,
-      isNumber: TypeUtils.isNumber,
-      isArray: TypeUtils.isArray,
-
-      ifObject: TypeUtils.ifObject,
-      ifString: TypeUtils.ifString,
-      ifNumber: TypeUtils.ifNumber,
-      ifArray: TypeUtils.ifArray
-    };
-  }
-});
-
-import Utils from "./utils/helper";
-window.Utils = Utils;
-
-import Framework from "./utils/public";
-window.GLib = Framework;
-
-import { settings } from "./utils/settings";
-export { settings };
-
-// TODO: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
-// Vue.component('async-webpack-example', function (resolve) {
-//   // This special require syntax will instruct Webpack to
-//   // automatically split your built code into bundles which
-//   // are loaded over Ajax requests.
-//   require(['./my-async-component'], resolve)
-// })
-
-import VueGtag from "vue-gtag";
-
-document.addEventListener("DOMContentLoaded", () => {
-  const gtagId = settings.gtagId;
-  if (gtagId) {
-    Vue.use(VueGtag, {
-      config: {
-        id: settings.gtagId,
-        params: {
-          send_page_view: false
-        }
-      }
-    });
-  }
-
-  window.vueApp = {
-    vuetify: new Vuetify({
-      icons: {
-        iconfont: "md"
-      },
-      theme: {
-        themes: Utils.settings.themes
-      },
-      breakpoint: {
-        smAndDown: true
-      }
-    }),
-    page: window.__page,
-    indicator: false,
-    // Rename to isPageStale
-    isStale: false,
-    stateUpdatedAt: null,
-    webSocket: { channels: {}, header: {} },
-    actionCable: { channels: {} },
-    temp: {}
-  };
-  new Vue({
-    el: "#app",
-    vuetify: window.vueApp.vuetify,
-    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 } });
-    }
-  });
-});
-
-// The above code uses Vue without the compiler, which means you cannot
-// use Vue to target elements in your existing html templates. You would
-// need to always use single file components.
-// To be able to target elements in your existing html/erb templates,
-// comment out the above code and uncomment the below
-// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
-// Then add this markup to your html template:
-//
-// <div id='hello'>
-//   {{message}}
-//   <app></app>
-// </div>
-
-// import Vue from 'vue/dist/vue.esm'
-// import App from '../app.vue'
-//
-// document.addEventListener('DOMContentLoaded', () => {
-//   const app = new Vue({
-//     el: '#hello',
-//     data: {
-//       message: "Can you say hello?"
-//     },
-//     components: { App }
-//   })
-// })
+import Vue from "vue";
+export { Vue };
+
+import App from "./app.vue";
+
+import * as VueGoogleMaps from "vue2-google-maps";
+Vue.use(VueGoogleMaps, {
+  load: {
+    key: process.env.GMAPS_API_KEY,
+    libraries: "places"
+  }
+});
+
+import "./styles/test.scss";
+import "./styles/test.sass";
+
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.min.css";
+// import "material-design-icons-iconfont/dist/material-design-icons.css";
+// import "@mdi/font/css/materialdesignicons.css";
+Vue.use(Vuetify);
+
+import Chartkick from "vue-chartkick";
+import Chart from "chart.js";
+import annotationPlugin from "chartjs-plugin-annotation";
+Chart.plugins.register(annotationPlugin);
+Vue.use(Chartkick.use(Chart));
+
+// TODO: make this opt-in
+import VueYoutube from "vue-youtube";
+Vue.use(VueYoutube);
+
+// import VueAnalytics from 'vue-analytics'
+// // TODO: Avoid hardcoding
+// Vue.use(VueAnalytics, {
+//   id: 'UA-146876849-1'
+// })
+
+import "./extensions/string.js";
+import "./extensions/array.js";
+
+// Recursive components must be global
+import VerticalPanel from "./components/panels/vertical";
+import ResponsivePanel from "./components/panels/responsive";
+import Component from "./components/component";
+import CommonIcon from "./components/_icon";
+import CommonBadge from "./components/_badge";
+import CommonButton from "./components/_button";
+import CommonMessage from "./components/_message";
+import CommonDropdownMenu from "./components/_dropdownMenu";
+import CommonTemplateMenu from "./templates/_menu";
+Vue.component("panels-vertical", VerticalPanel);
+Vue.component("panels-responsive", ResponsivePanel);
+Vue.component("common-button", CommonButton);
+Vue.component("common-icon", CommonIcon);
+Vue.component("common-badge", CommonBadge);
+Vue.component("common-message", CommonMessage);
+Vue.component("common-dropdownMenu", CommonDropdownMenu);
+Vue.component("templates-menu", CommonTemplateMenu);
+
+// TODO: Deprecate
+Vue.component("ui-component", Component);
+
+Vue.component("glib-component", Component);
+Vue.component("glib-icon", CommonIcon);
+Vue.component("glib-panels-responsive", ResponsivePanel);
+// Vue.component("glib-templates-menu", CommonTemplateMenu);
+
+import genericMixin from "./components/mixins/generic.js";
+Vue.mixin(genericMixin);
+
+import eventsMixin from "./components/mixins/events.js";
+Vue.mixin(eventsMixin);
+
+import stylesMixin from "./components/mixins/styles.js";
+Vue.mixin(stylesMixin);
+
+import scrollingMixin from "./components/mixins/scrolling.js";
+Vue.mixin(scrollingMixin);
+
+import longClickDirective from "./components/mixins/longClick.js";
+window.longClickInstance = longClickDirective({ delay: 500, interval: 0 });
+Vue.directive("longclick", window.longClickInstance);
+
+// TODO: Deprecate
+import TypeUtils from "./utils/type";
+Vue.use({
+  install: function(Vue, options) {
+    Vue.prototype.$type = {
+      isObject: TypeUtils.isObject,
+      isString: TypeUtils.isString,
+      isNumber: TypeUtils.isNumber,
+      isArray: TypeUtils.isArray,
+
+      ifObject: TypeUtils.ifObject,
+      ifString: TypeUtils.ifString,
+      ifNumber: TypeUtils.ifNumber,
+      ifArray: TypeUtils.ifArray
+    };
+  }
+});
+
+import Utils from "./utils/helper";
+window.Utils = Utils;
+
+import Framework from "./utils/public";
+window.GLib = Framework;
+
+import { settings } from "./utils/settings";
+export { settings };
+
+// TODO: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
+// Vue.component('async-webpack-example', function (resolve) {
+//   // This special require syntax will instruct Webpack to
+//   // automatically split your built code into bundles which
+//   // are loaded over Ajax requests.
+//   require(['./my-async-component'], resolve)
+// })
+
+import VueGtag from "vue-gtag";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const gtagId = settings.gtagId;
+  if (gtagId) {
+    Vue.use(VueGtag, {
+      config: {
+        id: settings.gtagId,
+        params: {
+          send_page_view: false
+        }
+      }
+    });
+  }
+
+  window.vueApp = {
+    vuetify: new Vuetify({
+      icons: {
+        iconfont: "md"
+      },
+      theme: {
+        themes: Utils.settings.themes
+      },
+      breakpoint: {
+        smAndDown: true
+      }
+    }),
+    page: window.__page,
+    indicator: false,
+    // Rename to isPageStale
+    isStale: false,
+    stateUpdatedAt: null,
+    webSocket: { channels: {}, header: {} },
+    actionCable: { channels: {} },
+    temp: {}
+  };
+  new Vue({
+    el: "#app",
+    vuetify: window.vueApp.vuetify,
+    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 } });
+    }
+  });
+});
+
+// The above code uses Vue without the compiler, which means you cannot
+// use Vue to target elements in your existing html templates. You would
+// need to always use single file components.
+// To be able to target elements in your existing html/erb templates,
+// comment out the above code and uncomment the below
+// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
+// Then add this markup to your html template:
+//
+// <div id='hello'>
+//   {{message}}
+//   <app></app>
+// </div>
+
+// import Vue from 'vue/dist/vue.esm'
+// import App from '../app.vue'
+//
+// document.addEventListener('DOMContentLoaded', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: {
+//       message: "Can you say hello?"
+//     },
+//     components: { App }
+//   })
+// })

package/nav/appbar.vue

@@ -1,136 +1,136 @@
-<template>
-  <div>
-    <nav-drawer
-      v-if="page.leftDrawer"
-      :trigger="drawerTrigger"
-      :permanent="isPermanent"
-      :spec="page.leftDrawer"
-    />
-
-    <v-toolbar :style="style" class="pages-navBar">
-      <v-app-bar-nav-icon
-        v-if="page.leftDrawer && !isPermanent"
-        style="color: inherit;"
-        @click="drawerTrigger = new Date()"
-      ></v-app-bar-nav-icon>
-      <v-progress-circular
-        v-if="$root.vueApp.indicator"
-        indeterminate
-      ></v-progress-circular>
-      <div v-else>
-        <panels-responsive v-if="navBar.logo" :spec="navBar.logo" />
-        <v-toolbar-title v-else-if="navBar.showTitle">{{
-          page.title
-        }}</v-toolbar-title>
-      </div>
-      <v-spacer></v-spacer>
-
-      <template v-for="(btn, index) in navBar.rightButtons">
-        <common-dropdownMenu
-          v-if="btn.childButtons"
-          :key="index"
-          :spec="btn"
-          :disabled="$isBusy"
-        />
-        <common-button
-          v-else
-          :key="`right_${index}`"
-          :spec="buttonSpec(btn)"
-          :disabled="$isBusy"
-        />
-      </template>
-
-      <views-avatar v-if="navBar.imageUrl" :spec="avatarSpec(navBar)" />
-
-      <v-btn
-        v-if="viewSourceEnabled()"
-        icon
-        style="color: inherit;"
-        @click="viewSource"
-      >
-        <v-icon>zoom_in</v-icon>
-      </v-btn>
-    </v-toolbar>
-  </div>
-</template>
-
-<script>
-import NavDrawer from "./drawer";
-import Launch from "../utils/launch";
-import ViewsAvatar from "../components/avatar";
-
-export default {
-  components: {
-    "nav-drawer": NavDrawer,
-    "views-avatar": ViewsAvatar
-  },
-  props: {
-    page: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      drawerTrigger: null,
-      navBar: {},
-      on: false
-    };
-  },
-  computed: {
-    style: function() {
-      return Object.assign(this.genericStyles(this.navBar), this.leftPadding);
-    },
-    // We could've used the `app` attribute on `v-toolbar` if it didn't conflict with our header-footer css.
-    leftPadding: function() {
-      switch (this.$vuetify.breakpoint.name) {
-        case "lg":
-        case "xl":
-          return { "padding-left": "270px" };
-        default:
-          return null;
-      }
-    },
-    isPermanent() {
-      return this.leftPadding !== null;
-    }
-  },
-  methods: {
-    $ready() {
-      this.navBar = this.page.navBar || {};
-    },
-    buttonSpec(item) {
-      return Object.assign({}, item, {
-        view: "button-v1",
-        styleClasses: item.text ? ["text"] : ["icon"]
-      });
-    },
-    viewSourceEnabled: function() {
-      // return process.env.NODE_ENV === "development";
-      return false;
-    },
-    viewSource: function() {
-      const properties = { message: this.page };
-      Launch.dialog(Object.assign({}, properties));
-    },
-    avatarSpec(spec) {
-      return {
-        view: "avatar-v1",
-        url: spec["imageUrl"],
-        onClick: spec["onCLick"]
-      };
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.v-btn.views-button {
-  &.icon {
-    color: inherit;
-  }
-  &.text {
-    color: inherit;
-  }
-}
-.pages-navBar {
-  box-shadow: none !important;
-}
-</style>
+<template>
+  <div>
+    <nav-drawer
+      v-if="page.leftDrawer"
+      :trigger="drawerTrigger"
+      :permanent="isPermanent"
+      :spec="page.leftDrawer"
+    />
+
+    <v-toolbar :style="style" class="pages-navBar">
+      <v-app-bar-nav-icon
+        v-if="page.leftDrawer && !isPermanent"
+        style="color: inherit;"
+        @click="drawerTrigger = new Date()"
+      ></v-app-bar-nav-icon>
+      <v-progress-circular
+        v-if="$root.vueApp.indicator"
+        indeterminate
+      ></v-progress-circular>
+      <div v-else>
+        <panels-responsive v-if="navBar.logo" :spec="navBar.logo" />
+        <v-toolbar-title v-else-if="navBar.showTitle">{{
+          page.title
+        }}</v-toolbar-title>
+      </div>
+      <v-spacer></v-spacer>
+
+      <template v-for="(btn, index) in navBar.rightButtons">
+        <common-dropdownMenu
+          v-if="btn.childButtons"
+          :key="index"
+          :spec="btn"
+          :disabled="$isBusy"
+        />
+        <common-button
+          v-else
+          :key="`right_${index}`"
+          :spec="buttonSpec(btn)"
+          :disabled="$isBusy"
+        />
+      </template>
+
+      <views-avatar v-if="navBar.imageUrl" :spec="avatarSpec(navBar)" />
+
+      <v-btn
+        v-if="viewSourceEnabled()"
+        icon
+        style="color: inherit;"
+        @click="viewSource"
+      >
+        <v-icon>zoom_in</v-icon>
+      </v-btn>
+    </v-toolbar>
+  </div>
+</template>
+
+<script>
+import NavDrawer from "./drawer";
+import Launch from "../utils/launch";
+import ViewsAvatar from "../components/avatar";
+
+export default {
+  components: {
+    "nav-drawer": NavDrawer,
+    "views-avatar": ViewsAvatar
+  },
+  props: {
+    page: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      drawerTrigger: null,
+      navBar: {},
+      on: false
+    };
+  },
+  computed: {
+    style: function() {
+      return Object.assign(this.genericStyles(this.navBar), this.leftPadding);
+    },
+    // We could've used the `app` attribute on `v-toolbar` if it didn't conflict with our header-footer css.
+    leftPadding: function() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "lg":
+        case "xl":
+          return { "padding-left": "270px" };
+        default:
+          return null;
+      }
+    },
+    isPermanent() {
+      return this.leftPadding !== null;
+    }
+  },
+  methods: {
+    $ready() {
+      this.navBar = this.page.navBar || {};
+    },
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        styleClasses: item.text ? ["text"] : ["icon"]
+      });
+    },
+    viewSourceEnabled: function() {
+      // return process.env.NODE_ENV === "development";
+      return false;
+    },
+    viewSource: function() {
+      const properties = { message: this.page };
+      Launch.dialog(Object.assign({}, properties));
+    },
+    avatarSpec(spec) {
+      return {
+        view: "avatar-v1",
+        url: spec["imageUrl"],
+        onClick: spec["onCLick"]
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.v-btn.views-button {
+  &.icon {
+    color: inherit;
+  }
+  &.text {
+    color: inherit;
+  }
+}
+.pages-navBar {
+  box-shadow: none !important;
+}
+</style>