glib-web 0.6.1 → 0.6.2

package/app.vue

@@ -1,180 +1,180 @@
-<template>
-  <v-app :class="page.styleClasses">
-    <nav-appbar :page="page" />
-
-    <v-progress-linear
-      v-if="$root.vueApp.indicator"
-      :indeterminate="true"
-      height="5"
-      style="position: fixed; z-index: 4;"
-    >
-    </v-progress-linear>
-
-    <div class="pages-header">
-      <layouts-content
-        :template="page.template"
-        :spec="header"
-        :full-height="false"
-      />
-    </div>
-
-    <div id="page_body" class="pages-body body-wrapper">
-      <layouts-content
-        :template="page.template"
-        :spec="body"
-        :full-height="true"
-      />
-    </div>
-
-    <div class="pages-footer">
-      <layouts-content
-        :template="page.template"
-        :spec="footer"
-        :full-height="false"
-      />
-    </div>
-  </v-app>
-</template>
-
-<script>
-import NavAppBar from "./nav/appbar";
-import Utils from "./utils/helper";
-import ContentLayout from "./nav/content";
-import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
-import actionCableMixin from "./components/mixins/ws/actionCable.js";
-
-export default {
-  components: {
-    "nav-appbar": NavAppBar,
-    "layouts-content": ContentLayout
-  },
-  mixins: [phoenixSocketMixin, actionCableMixin],
-  props: {
-    page: { type: Object, required: true }
-  },
-  data() {
-    return {
-      title: "..."
-    };
-  },
-  computed: {
-    header() {
-      return this.page.header || {};
-    },
-    body() {
-      return this.page.body || {};
-    },
-    footer() {
-      return this.page.footer || {};
-    }
-  },
-  watch: {
-    "$root.indicator": function(val, oldVal) {
-      document.title = val ? "..." : this.page.title;
-    }
-  },
-  created() {
-    console.log(
-      `Version: ${Utils.settings.appVersion} (${Utils.settings.env})`
-    );
-    Utils.history.saveInitialContent(this.page);
-    Utils.history.restoreOnBackOrForward();
-  },
-  methods: {
-    $ready: function() {
-      document.title = this.page.title;
-
-      this.$wsInitPhoenixSocket(this.page.phoenixSocket);
-      this.$wsInitActionCable(this.page.actionCable);
-
-      if (this.$gtag) {
-        if (!Utils.settings.isDev) {
-          console.log(`Tracking analytics: ${window.location}`);
-          // this.$ga.page(window.location);
-
-          this.$gtag.pageview({
-            page_location: window.location
-          });
-        }
-      } else {
-        console.warn("Analytics not setup. Set `settings.gtagId`.");
-      }
-
-      if (Utils.history.isPoppedState(this.page)) {
-        setTimeout(() => {
-          // Wait until page is rendered
-          GLib.action.execute(this.page.onRefocus, null, this);
-        });
-      } else {
-        setTimeout(() => {
-          // Wait until page is rendered
-          GLib.action.execute(this.page.onLoad, null, this);
-        });
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-// h1,
-// h2,
-// h3,
-// h4,
-// h5,
-// h6,
-// span {
-//   line-height: 1;
-// }
-
-body {
-  // Hide superfluous scrollbar (Edge)
-  -ms-overflow-style: none;
-  * {
-    -ms-overflow-style: initial;
-  }
-
-  // Hide superfluous scrollbar (Webkit)
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-html {
-  // Hide superfluous scrollbar (Firefox)
-  scrollbar-width: none;
-}
-
-/*** Header/footer support ***/
-html,
-body,
-#app {
-  height: 100%;
-}
-/******/
-
-/*** panels/scrollTo support ***/
-.glib-scrollto {
-  transition: background 0.5s;
-}
-.glib-scrollto--highlighted {
-  background: yellow !important;
-}
-/******/
-</style>
-
-<style scoped>
-/*** Header/footer support ***/
-.application--wrap {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-}
-
-.body-wrapper {
-  height: 100%;
-  /* overflow-y: auto; */
-  overflow-y: overlay;
-}
-/******/
-</style>
+<template>
+  <v-app :class="page.styleClasses">
+    <nav-appbar :page="page" />
+
+    <v-progress-linear
+      v-if="$root.vueApp.indicator"
+      :indeterminate="true"
+      height="5"
+      style="position: fixed; z-index: 4;"
+    >
+    </v-progress-linear>
+
+    <div class="pages-header">
+      <layouts-content
+        :template="page.template"
+        :spec="header"
+        :full-height="false"
+      />
+    </div>
+
+    <div id="page_body" class="pages-body body-wrapper">
+      <layouts-content
+        :template="page.template"
+        :spec="body"
+        :full-height="true"
+      />
+    </div>
+
+    <div class="pages-footer">
+      <layouts-content
+        :template="page.template"
+        :spec="footer"
+        :full-height="false"
+      />
+    </div>
+  </v-app>
+</template>
+
+<script>
+import NavAppBar from "./nav/appbar";
+import Utils from "./utils/helper";
+import ContentLayout from "./nav/content";
+import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
+import actionCableMixin from "./components/mixins/ws/actionCable.js";
+
+export default {
+  components: {
+    "nav-appbar": NavAppBar,
+    "layouts-content": ContentLayout
+  },
+  mixins: [phoenixSocketMixin, actionCableMixin],
+  props: {
+    page: { type: Object, required: true }
+  },
+  data() {
+    return {
+      title: "..."
+    };
+  },
+  computed: {
+    header() {
+      return this.page.header || {};
+    },
+    body() {
+      return this.page.body || {};
+    },
+    footer() {
+      return this.page.footer || {};
+    }
+  },
+  watch: {
+    "$root.indicator": function(val, oldVal) {
+      document.title = val ? "..." : this.page.title;
+    }
+  },
+  created() {
+    console.log(
+      `Version: ${Utils.settings.appVersion} (${Utils.settings.env})`
+    );
+    Utils.history.saveInitialContent(this.page);
+    Utils.history.restoreOnBackOrForward();
+  },
+  methods: {
+    $ready: function() {
+      document.title = this.page.title;
+
+      this.$wsInitPhoenixSocket(this.page.phoenixSocket);
+      this.$wsInitActionCable(this.page.actionCable);
+
+      if (this.$gtag) {
+        if (!Utils.settings.isDev) {
+          console.log(`Tracking analytics: ${window.location}`);
+          // this.$ga.page(window.location);
+
+          this.$gtag.pageview({
+            page_location: window.location
+          });
+        }
+      } else {
+        console.warn("Analytics not setup. Set `settings.gtagId`.");
+      }
+
+      if (Utils.history.isPoppedState(this.page)) {
+        setTimeout(() => {
+          // Wait until page is rendered
+          GLib.action.execute(this.page.onRefocus, null, this);
+        });
+      } else {
+        setTimeout(() => {
+          // Wait until page is rendered
+          GLib.action.execute(this.page.onLoad, null, this);
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+// h1,
+// h2,
+// h3,
+// h4,
+// h5,
+// h6,
+// span {
+//   line-height: 1;
+// }
+
+body {
+  // Hide superfluous scrollbar (Edge)
+  -ms-overflow-style: none;
+  * {
+    -ms-overflow-style: initial;
+  }
+
+  // Hide superfluous scrollbar (Webkit)
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+html {
+  // Hide superfluous scrollbar (Firefox)
+  scrollbar-width: none;
+}
+
+/*** Header/footer support ***/
+html,
+body,
+#app {
+  height: 100%;
+}
+/******/
+
+/*** panels/scrollTo support ***/
+.glib-scrollto {
+  transition: background 0.5s;
+}
+.glib-scrollto--highlighted {
+  background: yellow !important;
+}
+/******/
+</style>
+
+<style scoped>
+/*** Header/footer support ***/
+.application--wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.body-wrapper {
+  height: 100%;
+  /* overflow-y: auto; */
+  overflow-y: overlay;
+}
+/******/
+</style>

package/components/_badge.vue

@@ -1,23 +1,23 @@
-<template>
-  <v-badge
-    v-if="spec.badgeContent"
-    :color="spec.badgeColor || 'red'"
-    :content="spec.badgeContent"
-    :value="spec.badgeContent || false"
-  >
-  </v-badge>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  }
-};
-</script>
-
-<style scoped>
-.v-badge {
-  margin-left: 2px;
-}
-</style>
+<template>
+  <v-badge
+    v-if="spec.badgeContent"
+    :color="spec.badgeColor || 'red'"
+    :content="spec.badgeContent"
+    :value="spec.badgeContent || false"
+  >
+  </v-badge>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+.v-badge {
+  margin-left: 2px;
+}
+</style>

package/components/_button.vue

@@ -1,107 +1,107 @@
-<template>
-  <v-btn
-    :type="type"
-    :disabled="disabled || $isBusy || spec.disabled"
-    :style="styles()"
-    :class="$classes()"
-    :href="$href()"
-    :rel="$rel()"
-    :text="linkStyling || $classes().includes('text')"
-    :small="linkStyling"
-    :icon="$classes().includes('icon')"
-    :outlined="$classes().includes('outlined')"
-    :tile="$classes().includes('tile')"
-    :rounded="$classes().includes('rounded')"
-    :depressed="$classes().includes('depressed')"
-    @click="type == 'submit' ? null : $onClick()"
-  >
-    <span><common-icon :spec="spec.icon || {}"/></span>
-    <v-badge
-      :color="spec.badgeColor || 'red'"
-      :content="spec.badgeContent"
-      :value="spec.badgeContent || false"
-    >
-      <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
-        {{ spec.text }}
-      </div>
-    </v-badge>
-  </v-btn>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true },
-    type: { type: String, default: "button" },
-    disabled: { type: Boolean, required: true },
-    hideTextOnXs: { type: Boolean }
-  },
-  data: function() {
-    return {
-      linkStyling: false
-    };
-  },
-  methods: {
-    $ready() {
-      this.$type.ifArray(this.spec.styleClasses, val => {
-        this.linkStyling = val.includes("link");
-      });
-    },
-    styles() {
-      const styles = this.genericStyles();
-      if (this.linkStyling) {
-        styles["color"] = styles["color"] || "#1976d2";
-      }
-      return styles;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-a,
-button {
-  min-width: 0;
-  margin: 0;
-}
-.v-btn {
-  &.link {
-    text-transform: none !important;
-    /* text-decoration: underline; */
-    padding-left: 0;
-    padding-right: 0;
-    /* `height: inherit/auto/initial` will stretch to max height when used inside a horizontal panel,
-      presumably because it is affected by the panel's flex arrangement. */
-    height: 16px;
-    font-size: 16px;
-    line-height: 1;
-    min-width: auto;
-  }
-}
-.v-btn--rounded {
-  // Override .v-application.rounded
-  border-radius: 28px !important;
-}
-.v-banner__wrapper .v-btn:not(.v-btn--round).v-size--default {
-  min-width: 0;
-  padding: 0;
-}
-.v-banner__wrapper .v-btn.v-size--default {
-  font-size: 12px;
-}
-.breadcrumbs .v-btn.link {
-  display: inline-table;
-  justify-content: left;
-  white-space: normal;
-}
-
-@media only screen and (min-width: 600px) {
-  .v-banner__wrapper.v-btn.v-size--default {
-    font-size: 0.875rem;
-  }
-  .v-banner__wrapper.v-btn:not(.v-btn--round).v-size--default {
-    min-width: 64px;
-    padding: 0 16px;
-  }
-}
-</style>
+<template>
+  <v-btn
+    :type="type"
+    :disabled="disabled || $isBusy || spec.disabled"
+    :style="styles()"
+    :class="$classes()"
+    :href="$href()"
+    :rel="$rel()"
+    :text="linkStyling || $classes().includes('text')"
+    :small="linkStyling"
+    :icon="$classes().includes('icon')"
+    :outlined="$classes().includes('outlined')"
+    :tile="$classes().includes('tile')"
+    :rounded="$classes().includes('rounded')"
+    :depressed="$classes().includes('depressed')"
+    @click="type == 'submit' ? null : $onClick()"
+  >
+    <span><common-icon :spec="spec.icon || {}"/></span>
+    <v-badge
+      :color="spec.badgeColor || 'red'"
+      :content="spec.badgeContent"
+      :value="spec.badgeContent || false"
+    >
+      <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
+        {{ spec.text }}
+      </div>
+    </v-badge>
+  </v-btn>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    type: { type: String, default: "button" },
+    disabled: { type: Boolean, required: true },
+    hideTextOnXs: { type: Boolean }
+  },
+  data: function() {
+    return {
+      linkStyling: false
+    };
+  },
+  methods: {
+    $ready() {
+      this.$type.ifArray(this.spec.styleClasses, val => {
+        this.linkStyling = val.includes("link");
+      });
+    },
+    styles() {
+      const styles = this.genericStyles();
+      if (this.linkStyling) {
+        styles["color"] = styles["color"] || "#1976d2";
+      }
+      return styles;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+a,
+button {
+  min-width: 0;
+  margin: 0;
+}
+.v-btn {
+  &.link {
+    text-transform: none !important;
+    /* text-decoration: underline; */
+    padding-left: 0;
+    padding-right: 0;
+    /* `height: inherit/auto/initial` will stretch to max height when used inside a horizontal panel,
+      presumably because it is affected by the panel's flex arrangement. */
+    height: 16px;
+    font-size: 16px;
+    line-height: 1;
+    min-width: auto;
+  }
+}
+.v-btn--rounded {
+  // Override .v-application.rounded
+  border-radius: 28px !important;
+}
+.v-banner__wrapper .v-btn:not(.v-btn--round).v-size--default {
+  min-width: 0;
+  padding: 0;
+}
+.v-banner__wrapper .v-btn.v-size--default {
+  font-size: 12px;
+}
+.breadcrumbs .v-btn.link {
+  display: inline-table;
+  justify-content: left;
+  white-space: normal;
+}
+
+@media only screen and (min-width: 600px) {
+  .v-banner__wrapper.v-btn.v-size--default {
+    font-size: 0.875rem;
+  }
+  .v-banner__wrapper.v-btn:not(.v-btn--round).v-size--default {
+    min-width: 64px;
+    padding: 0 16px;
+  }
+}
+</style>