glib-web 2.4.1 → 3.0.0-beta1

package/index.js

@@ -1,26 +1,55 @@
-import Vue from "vue";
-export { Vue };
-
+import { createApp, h } from "vue";
+import vuetify from "./plugins/vuetify";
 import App from "./app.vue";
 
-import * as VueGoogleMaps from "vue2-google-maps";
-Vue.use(VueGoogleMaps, {
-  load: {
-    key: process.env.GMAPS_API_KEY,
-    libraries: "places"
+window.vueApp = {
+  vuetify: vuetify,
+  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: {}
+}
+
+const Vue = createApp({
+  vuetify: window.vueApp.vuetify,
+  data: {
+    vueApp: window.vueApp,
+  },
+  mounted() {
+    eventBus.$on('app/updatePage', page => this.vueApp = Object.assign({}, this.vueApp, { page: page }))
+  },
+  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 "@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";
@@ -29,8 +58,8 @@ Chart.plugins.register(annotationPlugin);
 Vue.use(Chartkick.use(Chart));
 
 // TODO: make this opt-in
-import VueYoutube from "vue-youtube";
-Vue.use(VueYoutube);
+// import VueYoutube from "vue-youtube";
+// Vue.use(VueYoutube);
 
 // import VueAnalytics from 'vue-analytics'
 // // TODO: Avoid hardcoding
@@ -38,32 +67,32 @@ Vue.use(VueYoutube);
 //   id: 'UA-146876849-1'
 // })
 
-import VueSocialSharing from "vue-social-sharing";
-Vue.use(VueSocialSharing, { networks: { copy: "" } });
+// import VueSocialSharing from "vue-social-sharing";
+// Vue.use(VueSocialSharing, { networks: { copy: "" } });
 
 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-badge", CommonBadge);
+// Vue.component("common-tooltip", CommonTooltip);
 Vue.component("common-chip", CommonChip);
 Vue.component("common-message", CommonMessage);
 Vue.component("common-dropdownMenu", CommonDropdownMenu);
@@ -91,7 +120,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 +131,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,
@@ -124,7 +153,6 @@ import Framework from "./utils/public";
 window.GLib = Framework;
 
 import { settings } from "./utils/settings";
-export { settings };
 
 import driverCustomBehavior from "./plugins/driverCustomBehavior";
 Vue.use(driverCustomBehavior);
@@ -141,6 +169,7 @@ Vue.use(updatableComponent);
 // })
 
 import VueGtag from "vue-gtag";
+import eventBus from "./utils/eventBus";
 
 document.addEventListener("DOMContentLoaded", () => {
   const gtagId = settings.gtagId;
@@ -155,44 +184,11 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   }
 
-  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 } });
-    }
-  });
+  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

@@ -34,8 +34,8 @@
 </template>
 
 <script>
-import NavDrawer from "./drawer";
-import ViewsAvatar from "../components/avatar";
+import NavDrawer from "./drawer.vue";
+import ViewsAvatar from "../components/avatar.vue";
 
 export default {
   components: {
@@ -59,7 +59,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 +71,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 {

package/nav/dialog.vue

@@ -1,18 +1,9 @@
 <template>
-  <v-dialog
-    v-model="model"
-    :width="spec.width || 600"
-    :dark="false"
-    :fullscreen="fullscreen"
-    :sm-and-down="false"
-    :persistent="true"
-  >
+  <v-dialog :width="spec.width || 600" v-model="model" :fullscreen="fullscreen" :persistent="true">
     <v-card>
       <v-card-title v-if="title || showClose" class="text-h5" primary-title>
         {{ title }}
-        <v-btn v-if="showClose" text icon class="dialog-close" @click="close">
-          <v-icon>close</v-icon>
-        </v-btn>
+        <v-btn v-if="showClose" icon="close" size="small" :flat="true" class="dialog-close" @click.native="close" />
       </v-card-title>
 
       <component :is="containerComponent" :spec="formSpec">
@@ -27,13 +18,7 @@
       <v-card-actions v-if="spec.buttons">
         <v-spacer></v-spacer>
 
-        <v-btn
-          v-for="(button, index) in spec.buttons"
-          :key="index"
-          color="primary"
-          text
-          @click="click(button, $event)"
-        >
+        <v-btn v-for="(button, index) in spec.buttons" :key="index" color="primary" text @click="click(button, $event)">
           {{ button.text }}
         </v-btn>
 
@@ -46,18 +31,20 @@
 <script>
 import Http from "../utils/http";
 import Action from "../action";
-import FormPanel from "../components/panels/form";
+import FormPanel from "../components/panels/form.vue";
+import { getCurrentInstance } from "vue";
+
 
 export default {
   components: {
-    "panels-form": FormPanel
+    "panels-form": FormPanel,
   },
   props: {
     spec: { type: Object, required: true }, // Original spec. It might be different from the latest spec (after reloading).
     stack: { type: Array, required: true },
-    vueApp: { type: Object, required: true }
+    vueApp: { type: Object, required: true },
   },
-  data: function() {
+  data: function () {
     return {
       title: null,
       message: null,
@@ -70,7 +57,7 @@ export default {
       isFormDirty: false,
       isFormSubmitted: false,
       isMobile: false,
-      formSpec: null
+      formSpec: null,
     };
   },
   computed: {
@@ -88,15 +75,16 @@ export default {
       } else {
         return false;
       }
-    }
-  },
-  watch: {
-    model: function(val, oldVal) {
-      if (!val) {
-        this.$destroy();
-      }
-    }
+    },
   },
+  // watch: {
+  //   model: function (val, oldVal) {
+  //     if (!val) {
+  //       // this.$destroy();
+  //       this.$.appContext.app.unmount()
+  //     }
+  //   },
+  // },
   methods: {
     $ready() {
       this.$root.vueApp = this.vueApp;
@@ -140,7 +128,7 @@ export default {
             this.message = "Loading...";
           }
           const url = Utils.url.appendParams(this.url, { _dialog: "v1" });
-          Http.execute({ url: url }, "GET", this, response => {
+          Http.execute({ url: url }, "GET", this, (response) => {
             Utils.http.forceComponentUpdate(() => {
               this.urlLoaded = true;
               this.title = response.title;
@@ -161,8 +149,8 @@ export default {
       }
 
       this.model = true;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -171,11 +159,13 @@ export default {
   padding: 16px 16px 20px 16px;
   /* white-space: pre-wrap; */
 }
+
 .dialog-close {
   right: 16px;
   top: 12px;
   position: absolute;
 }
+
 .v-card__text {
   padding: 0 !important;
 }

package/nav/drawer.vue

@@ -2,75 +2,62 @@
   <!-- <v-navigation-drawer app fixed v-model="state" @input="updateState"> -->
   <!-- <v-navigation-drawer mini-variant app v-model="state" @input="updateState"> -->
 
-  <v-navigation-drawer
-    v-model="state"
-    app
-    :class="cssClasses"
-    :dark="cssClasses.includes('dark')"
-    :permanent="cssClasses.includes('permanent')"
-    :style="style"
-    :expand-on-hover="expandOnHover()"
-    :mini-variant.sync="shrunk"
-    @input="updateState"
-  >
-    <template v-if="mini" v-slot:prepend>
-      <v-list-item>
-        <v-list-item-icon>
-          <v-icon v-if="!shrunk">mdi-chevron-left</v-icon>
-          <v-icon v-if="shrunk">mdi-chevron-right</v-icon>
-        </v-list-item-icon>
-      </v-list-item>
-    </template>
+  <div :class="cssClasses" :style="style">
+    <v-navigation-drawer v-model="state" app :dark="cssClasses.includes('dark') || null"
+      :permanent="cssClasses.includes('permanent')" :expand-on-hover="expandOnHover()" v-model:mini-variant="shrunk"
+      @input="updateState">
 
-    <template v-if="spec.header">
-      <panels-responsive :spec="spec.header" />
-    </template>
+      <template v-if="spec.header">
+        <panels-responsive :spec="spec.header" />
+      </template>
 
-    <glib-component v-if="spec.body" :spec="spec.body" />
+      <glib-component v-if="spec.body" :spec="spec.body" />
 
-    <v-list dense class="pt-0">
-      <div v-for="(item, index) in spec.rows" :key="index" class="nav-item">
-        <div v-if="item.type == 'button'" class="indicator"></div>
-        <v-divider v-if="item.type == 'divider'" />
-        <nav-drawerLabel v-else-if="item.type == 'label'" :spec="item" />
-        <nav-drawerButton v-else :spec="item" />
-      </div>
-    </v-list>
+      <v-list :dense="true" class="pt-0">
+        <div v-for="(item, index) in spec.rows" :key="index" class="nav-item">
+          <div v-if="item.type == 'button'" class="indicator"></div>
+          <v-divider v-if="item.type == 'divider'" />
+          <nav-drawerLabel v-else-if="item.type == 'label'" :spec="item" />
+          <nav-drawerButton v-else :spec="item" />
+        </div>
+      </v-list>
 
-    <template v-if="spec.footer" v-slot:append>
-      <v-list-item>
-        <!-- Display the first line when the drawer is shrunk. Display the second line when the drawer is expanded -->
-        <div style="display: none">Show if expand</div>
-        <panels-responsive v-if="!shrunk" :spec="spec.footer" />
-      </v-list-item>
-    </template>
-  </v-navigation-drawer>
+      <template v-if="spec.footer" v-slot:append>
+        <v-list-item>
+          <!-- Display the first line when the drawer is shrunk. Display the second line when the drawer is expanded -->
+          <div style="display: none">Show if expand</div>
+          <panels-responsive v-if="!shrunk" :spec="spec.footer" />
+        </v-list-item>
+      </template>
+    </v-navigation-drawer>
+  </div>
 </template>
 
+
 <script>
 // import UrlUtils from "../utils/url";
-import NavDrawerButton from "./drawerButton";
-import NavDrawerLabel from "./drawerLabel";
+import NavDrawerButton from "./drawerButton.vue";
+import NavDrawerLabel from "./drawerLabel.vue";
 import bus from "../utils/eventBus";
 
 export default {
   components: {
     "nav-drawerButton": NavDrawerButton,
-    "nav-drawerLabel": NavDrawerLabel
+    "nav-drawerLabel": NavDrawerLabel,
   },
   // props: ["spec", "trigger", "permanent"],
   props: {
     spec: { type: Object, required: true },
     trigger: { type: [Object, Date], default: null },
-    permanent: { type: Boolean, required: true }
+    permanent: { type: Boolean, required: true },
   },
-  data: function() {
+  data: function () {
     return {
       // Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.
       // See https://vuetifyjs.com/en/components/navigation-drawers
       state: null,
       mini: true,
-      shrunk: true
+      shrunk: true,
     };
   },
   computed: {
@@ -87,7 +74,7 @@ export default {
       return this.$styles();
     },
     lgAndAbove() {
-      switch (this.$vuetify.breakpoint.name) {
+      switch (this.$vuetify.display.name) {
         case "xs":
         case "sm":
         case "md":
@@ -95,12 +82,12 @@ export default {
         default:
           return true;
       }
-    }
+    },
   },
   watch: {
-    trigger: function(val, oldVal) {
+    trigger: function (val, oldVal) {
       this.state = !this.state;
-    }
+    },
   },
   methods: {
     $ready() {
@@ -116,8 +103,8 @@ export default {
     },
     expandOnHover() {
       return this.mini;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -125,6 +112,7 @@ export default {
 .nav-item {
   position: relative;
 }
+
 .nav-item:hover .indicator,
 .nav-item .indicator.active {
   display: flex;

package/nav/drawerButton.vue

@@ -4,13 +4,11 @@
       <common-icon :spec="spec.icon" />
     </v-list-item-action>
 
-    <v-list-item-content>
-      <v-list-item-title>
-        <common-badge :spec="spec">
-          {{ spec.text }}
-        </common-badge>
-      </v-list-item-title>
-    </v-list-item-content>
+    <v-list-item-title>
+      <!-- <common-badge :spec="spec"> -->
+      {{ spec.text }}
+      <!-- </common-badge> -->
+    </v-list-item-title>
   </v-list-item>
 </template>
 

package/nav/drawerLabel.vue

@@ -1,8 +1,7 @@
 <template>
   <v-list-item>
-    <v-list-item-content>
-      <v-list-item-title>{{ spec.text }}</v-list-item-title>
-    </v-list-item-content>
+    <v-list-item-title>{{ spec.text }}</v-list-item-title>
+
   </v-list-item>
 </template>
 

package/nav/sheet.vue

@@ -1,27 +1,21 @@
 <template>
-  <v-bottom-sheet v-model="model" inset>
+  <v-dialog :width="600" v-model="model">
     <v-list>
-      <v-subheader v-if="spec.message">{{ spec.message }}</v-subheader>
-      <template v-for="(button, index) of spec.buttons">
-        <v-list-item
-          :key="index"
-          color="primary"
-          @click="onClick(button, $event)"
-        >
+      <v-list-subheader v-if="spec.message">{{ spec.message }}</v-list-subheader>
+      <template v-for="(button, index) of spec.buttons" :key="index">
+        <v-list-item color="primary" @click="onClick(button, $event)">
           <v-list-item-action v-if="button.icon">
             <common-icon :spec="button.icon" />
           </v-list-item-action>
 
-          <v-list-item-content>
-            <v-list-item-title>{{ button.text }}</v-list-item-title>
-          </v-list-item-content>
+
+          <v-list-item-title>{{ button.text }}</v-list-item-title>
+
           <!-- <v-list-item-title>{{ button.text }}</v-list-item-title> -->
         </v-list-item>
       </template>
     </v-list>
-
-    <v-sheet height="60px"></v-sheet>
-  </v-bottom-sheet>
+  </v-dialog>
 </template>
 
 <script>
@@ -29,23 +23,23 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
-      model: null
+      model: true
     };
   },
-  watch: {
-    model: function(val, oldVal) {
-      if (!val) {
-        this.$destroy();
-      }
-    }
-  },
+  // watch: {
+  //   model: function (val, oldVal) {
+  //     if (!val) {
+  //       this.$destroy();
+  //     }
+  //   }
+  // },
   methods: {
     $ready() {
       this.model = true;
     },
-    onClick: function(spec, event) {
+    onClick: function (spec, event) {
       this.model = false;
 
       Utils.type.ifFunction(spec.onClickFunction, f => f());