glib-web 2.6.7 → 3.0.0

package/components/popover.vue

@@ -0,0 +1,39 @@
+<template>
+    <common-responsive :style="floatingStyles" v-if="toggle" :spec="spec" />
+</template>
+  
+<script>
+import bus from "../utils/eventBus";
+
+export default {
+    props: {
+        spec: { type: Object, required: true }
+    },
+    data() {
+        return {
+            toggle: true,
+            floatingStyles: {},
+            floatingSpec: {}
+        }
+    },
+    methods: {
+        $mounted() {
+            bus.$once(`popover/close-${this.spec.key}`, (options) => {
+                document.removeEventListener('click', this.handleClose)
+                this.toggle = false;
+            })
+            document.addEventListener('click', this.handleClose)
+        },
+        handleClose(event) {
+            const isClickInside = this.$el.contains(event.target)
+
+            if (!isClickInside) {
+                this.toggle = false;
+            }
+        }
+    }
+};
+</script>
+  
+<style scoped></style>
+  

package/components/progressCircle.vue

@@ -1,12 +1,6 @@
 <template>
-  <v-progress-circular
-    :class="$classes()"
-    :rotate="spec.rotate || 270"
-    :size="spec.size || 100"
-    :width="spec.width || 20"
-    :color="spec.color"
-    :value="spec.value"
-  >
+  <v-progress-circular :class="$classes()" :rotate="spec.rotate || 0" :size="spec.size || 100" :width="spec.width || 20"
+    :color="spec.color" :model-value="spec.value">
     <span class="grey--text text--lighten-1 text-h5">{{ spec.text }}</span>
   </v-progress-circular>
 </template>

package/components/progressbar.vue

@@ -1,18 +1,8 @@
 <template>
-  <v-progress-linear
-    :class="$classes()"
-    :height="spec.height || 25"
-    :color="spec.color"
-    :background-color="spec.backgroundColor"
-    :disabled="true"
-    :value="value_in_percentage"
-    :striped="$classes().includes('striped')"
-    :reverse="spec.reversed || false"
-    rounded
-  >
-    <strong v-if="!$classes().includes('no-text')"
-      >{{ Math.ceil(value_in_percentage) }}%</strong
-    >
+  <v-progress-linear :class="$classes()" :height="spec.height || 25" :color="spec.color"
+    :background-color="spec.backgroundColor" :disabled="true" :model-value="value_in_percentage"
+    :striped="$classes().includes('striped')" :reverse="spec.reversed || false" rounded>
+    <strong v-if="!$classes().includes('no-text')">{{ Math.ceil(value_in_percentage) }}%</strong>
   </v-progress-linear>
 </template>
 

package/components/shareButton.vue

@@ -1,16 +1,9 @@
 <template>
-  <ShareNetwork
-    :style="styles()"
-    :network="spec.network"
-    :url="spec.url"
-    :title="spec.title"
-    :description="spec.description"
-    :quote="spec.facebookQuote"
-    :hashtags="spec.hashtags"
-    :twitter-user="spec.twitterUser"
-  >
-    <i :class="config[spec.network].icon"></i>
-    <!-- <v-icon dark class="fah">facebook</v-icon> -->
+  <ShareNetwork :style="styles()" :network="network" :url="spec.url" :title="spec.title" :description="spec.description"
+    :quote="spec.facebookQuote" :hashtags="spec.hashtags" :twitter-user="spec.twitterUser">
+    <div class="fah">
+      <i class="material-icons v-icon">{{ config[spec.network].icon }}</i>
+    </div>
     <span v-if="spec.text">{{ spec.text }}</span>
   </ShareNetwork>
 </template>
@@ -24,69 +17,70 @@ export default {
   },
   data() {
     return {
+      network: this.spec.network !== 'copy' ? this.spec.network : 'facebook',
       config: {
         copy: {
-          icon: "far fah fa-lg fa-copy",
+          icon: "content_copy",
           color: "#183153"
         },
         email: {
-          icon: "far fah fa-lg fa-envelope",
+          icon: "envelope",
           color: "#333333"
         },
         facebook: {
-          icon: "fab fah fa-lg fa-facebook-f",
+          icon: "facebook",
           color: "#1877f2"
         },
         hackernews: {
-          icon: "fab fah fa-lg fa-hacker-news",
+          icon: "hacker-news",
           color: "#ff4000"
         },
         instapaper: {
-          icon: "fas fah fa-lg fa-italic",
+          icon: "instapaper",
           color: "#428bca"
         },
         line: {
-          icon: "fab fah fa-lg fa-line",
+          icon: "line",
           color: "#00c300"
         },
         linkedin: {
-          icon: "fab fah fa-lg fa-linkedin",
+          icon: "work",
           color: "#007bb5"
         },
         messenger: {
-          icon: "fab fah fa-lg fa-facebook-messenger",
+          icon: "facebook",
           color: "#0084ff"
         },
         pinterest: {
-          icon: "fab fah fa-lg fa-pinterest",
+          icon: "pinterest",
           color: "#bd081c"
         },
         reddit: {
-          icon: "fab fah fa-lg fa-reddit-alien",
+          icon: "reddit",
           color: "#ff4500"
         },
         telegram: {
-          icon: "fab fah fa-lg fa-telegram-plane",
+          icon: "telegram",
           color: "#0088cc"
         },
         tumblr: {
-          icon: "fab fah fa-lg fa-tumblr",
+          icon: "tumblr",
           color: "#35465c"
         },
         twitter: {
-          icon: "fab fah fa-lg fa-twitter",
+          icon: "twitter",
           color: "#1da1f2"
         },
         weibo: {
-          icon: "fab fah fa-lg fa-weibo",
+          icon: "weibo",
           color: "#e9152d"
         },
         whatsapp: {
-          icon: "fab fah fa-lg fa-whatsapp",
+          icon: "whatsapp",
           color: "#25d366"
         },
         wordpress: {
-          icon: "fab fah fa-lg fa-wordpress",
+          icon: "wordpress",
           color: "#21759b"
         }
       }
@@ -136,12 +130,12 @@ a[class^="share-network-"] {
 
 a[class^="share-network-"] .fah {
   background-color: rgba(0, 0, 0, 0.2);
-  padding: 10px;
+  padding: 6px;
   flex: 0 1 auto;
 }
 
 a[class^="share-network-"] span {
-  padding: 0 10px;
+  padding: 0 6px;
   flex: 1 1 0%;
   font-weight: 500;
 }

package/components/tabBar.vue

@@ -1,31 +1,21 @@
 <template>
   <div :style="'width: 100%'" :class="$classes()">
-    <v-tabs
-      v-model="tab"
-      :background-color="spec.backgroundColor"
-      :slider-color="spec.color"
-      show-arrows
-      :height="spec.height || 60"
-      :grow="$classes().includes('no-grow') ? false : true"
-    >
-      <v-tab
-        v-for="(item, index) in spec.buttons"
-        :key="index"
-        height="100%"
-        :href="$href(item)"
-        @click="$onClick($event, item)"
-      >
-        <common-badge :spec="item">
-          <common-icon v-if="item.icon" :spec="item.icon" />
-          <span :style="{ color: spec.color }">{{ item.text }}</span>
-        </common-badge>
+    <v-tabs v-model="tab" :bg-color="spec.backgroundColor || 'white'" slider-color="primary" color="primary" show-arrows
+      :height="spec.height || 60" :grow="$classes().includes('no-grow') ? false : true">
+      <v-tab v-for="(item, index) in  spec.buttons " :key="index" height="100%" :value="index">
+        <common-icon :class="index == spec.activeIndex ? 'text-primary' : null" :spec="item.icon" v-if="item.icon" />
+        <span :style="{ marginLeft: '2px' }" :class="index == spec.activeIndex ? 'text-primary' : null">{{ item.text
+        }}</span>
+
       </v-tab>
     </v-tabs>
-    <v-divider />
+    <v-divider></v-divider>
   </div>
 </template>
 
 <script>
+import Action from '../action';
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -36,8 +26,25 @@ export default {
       buttons: null
     };
   },
+  watch: {
+    tab: function (val, oldVal) {
+      if (val == oldVal && oldVal == null) return null;
+
+      this.$nextTick(function () {
+        const activeTab = this.buttons[val]
+        const onClick = activeTab?.onClick
+
+        if (onClick) {
+          Action.execute(onClick, this)
+        }
+      })
+    }
+  },
   methods: {
     $ready() {
+      if (this.spec.activeIndex) {
+        this.tab = this.spec.activeIndex;
+      }
       this.buttons = this.spec.tabButtons || this.spec.buttons;
       for (const [index, button] of this.buttons.entries()) {
         if (button.disabled) {
@@ -49,20 +56,14 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.full-width-divider .v-divider {
-  position: absolute;
-  left: 0;
-  width: 100%;
-}
-.no-divider .v-divider {
-  display: none;
-}
 .v-tab .v-badge span {
   // Make sure tab label is middle aligned.
   margin: auto 0;
 }
+
 /* .v-badge {
   top: 50%;
   transform: translate(0, -50%);
 } */
 </style>
+

package/index.js

@@ -1,36 +1,49 @@
-import Vue from "vue";
-export { Vue };
-
+import { createApp, h } from "vue";
+import vuetify from "./plugins/vuetify";
 import App from "./app.vue";
+import { settings } from "./utils/settings";
+import { useTheme } from "vuetify";
+
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
 
-import * as VueGoogleMaps from "vue2-google-maps";
-Vue.use(VueGoogleMaps, {
-  load: {
-    key: process.env.GMAPS_API_KEY,
-    libraries: "places"
+// lib for deep merge
+import merge from 'lodash.merge'
+
+const Vue = createApp({
+  data() {
+    return {
+      vueApp,
+      themeConfig: useTheme()
+    }
+  },
+  created() {
+    this.themeConfig.themes = merge(this.themeConfig.themes, settings.themes)
+  },
+  render: function () {
+    return h(App, { page: this.$data.vueApp.page });
   }
-});
+})
+
+
+Vue.use(vuetify)
+
+// 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";
-// Only used for social media icons
-import "@fortawesome/fontawesome-free/css/all.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 Chartkick from "vue-chartkick";
+// import Chart from "chart.js";
+// import annotationPlugin from "chartjs-plugin-annotation";
+// Chart.plugins.register(annotationPlugin);
+// Vue.use(Chartkick.use(Chart));
 
 // import VueAnalytics from 'vue-analytics'
 // // TODO: Avoid hardcoding
@@ -45,25 +58,25 @@ 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 CommonTooltip from "./components/_tooltip";
-import CommonButton from "./components/_button";
-import CommonChip from "./components/_chip";
-import CommonMessage from "./components/_message";
-import CommonDropdownMenu from "./components/_dropdownMenu";
-import CommonResponsive from "./components/_responsive";
-import CommonTemplateMenu from "./templates/_menu";
-import RichButton from "./components/button";
+import VerticalPanel from "./components/panels/vertical.vue";
+import ResponsivePanel from "./components/panels/responsive.vue";
+import Component from "./components/component.vue";
+import CommonIcon from "./components/_icon.vue";
+import CommonBadge from "./components/_badge.vue";
+// import CommonTooltip from "./components/_tooltip.vue";
+import CommonButton from "./components/_button.vue";
+import CommonChip from "./components/_chip.vue";
+import CommonMessage from "./components/_message.vue";
+import CommonDropdownMenu from "./components/_dropdownMenu.vue";
+import CommonResponsive from "./components/_responsive.vue";
+import CommonTemplateMenu from "./templates/_menu.vue";
+import RichButton from "./components/button.vue";
 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-tooltip", CommonTooltip);
+// Vue.component("common-tooltip", CommonTooltip);
 Vue.component("common-chip", CommonChip);
 Vue.component("common-message", CommonMessage);
 Vue.component("common-dropdownMenu", CommonDropdownMenu);
@@ -91,7 +104,7 @@ Vue.mixin(scrollingMixin);
 import datasetMixins from "./components/mixins/dataset.js";
 Vue.mixin(datasetMixins);
 
-Vue.prototype.extension = {};
+Vue.config.globalProperties.extension = {};
 import extension from "./components/mixins/extension.js";
 Vue.mixin(extension);
 
@@ -102,8 +115,8 @@ Vue.directive("longclick", window.longClickInstance);
 // TODO: Deprecate
 import TypeUtils from "./utils/type";
 Vue.use({
-  install: function(Vue, options) {
-    Vue.prototype.$type = {
+  install: function (Vue, options) {
+    Vue.config.globalProperties.$type = {
       isObject: TypeUtils.isObject,
       isString: TypeUtils.isString,
       isNumber: TypeUtils.isNumber,
@@ -123,9 +136,6 @@ window.Utils = Utils;
 import Framework from "./utils/public";
 window.GLib = Framework;
 
-import { settings } from "./utils/settings";
-export { settings };
-
 import driverCustomBehavior from "./plugins/driverCustomBehavior";
 Vue.use(driverCustomBehavior);
 
@@ -140,59 +150,15 @@ Vue.use(updatableComponent);
 //   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
-        }
-      }
-    });
-  }
+import { vueApp } from "./store";
 
-  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,
-    /// Dirty form handling
-    isFormSubmitted: false,
-    isFormDirty: false,
-    ///
-    stateUpdatedAt: null,
-    webSocket: { channels: {}, header: {} },
-    actionCable: { channels: {} },
-    registeredComponents: [],
-    temp: {}
-  };
-  new Vue({
-    el: "#app",
-    vuetify: window.vueApp.vuetify,
-    data: {
-      vueApp: window.vueApp
-    },
-    render: function(createElement) {
-      return createElement(App, { props: { page: this.$data.vueApp.page } });
-    }
-  });
+document.addEventListener("DOMContentLoaded", () => {
+  Vue.mount("#app")
 });
 
+export { Vue, settings }
+
 // 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.

package/nav/appbar.vue

@@ -5,7 +5,7 @@
     <v-toolbar v-if="navBar.height" :style="style" :height="navBar.height" :class="cssClasses()">
       <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>
+      <v-progress-circular v-if="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">{{
@@ -34,8 +34,9 @@
 </template>
 
 <script>
-import NavDrawer from "./drawer";
-import ViewsAvatar from "../components/avatar";
+import NavDrawer from "./drawer.vue";
+import ViewsAvatar from "../components/avatar.vue";
+import { vueApp } from "../store";
 
 export default {
   components: {
@@ -49,7 +50,8 @@ export default {
     return {
       drawerTrigger: null,
       navBar: {},
-      rightButtons: []
+      rightButtons: [],
+      vueApp
       // on: false
     };
   },
@@ -59,7 +61,7 @@ export default {
     },
     // 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) {
+      switch (this.$vuetify.display.name) {
         case "lg":
         case "xl":
           return { "padding-left": "270px" };
@@ -71,7 +73,7 @@ export default {
       return this.leftPadding !== null;
     },
     showMobileMenu() {
-      return this.rightButtons.length > 0 && this.$vuetify.breakpoint.smAndDown;
+      return this.rightButtons.length > 0 && this.$vuetify.display.smAndDown;
     },
     mobileMenu() {
       return {