glib-web 2.5.0 → 3.0.0-beta1

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());

package/nav/snackbar.vue

@@ -1,21 +1,10 @@
 <template>
-  <v-snackbar
-    v-model="show"
-    :top="spec.verticalPosition == 'top'"
-    :bottom="spec.verticalPosition == 'bottom'"
-    :left="spec.horizontalPosition == 'left'"
-    :right="spec.horizontalPosition == 'right'"
-    :color="color"
-    :timeout="spec.timeout"
-  >
+  <v-snackbar v-model="show" :top="spec.verticalPosition == 'top'" :bottom="spec.verticalPosition == 'bottom'"
+    :left="spec.horizontalPosition == 'left'" :right="spec.horizontalPosition == 'right'" :color="color"
+    :timeout="spec.timeout">
     <common-message :spec="spec" />
 
-    <v-btn
-      v-for="(button, index) in spec.buttons"
-      :key="index"
-      text
-      @click="click(button, $event)"
-    >
+    <v-btn v-for="(button, index) in spec.buttons" :key="index" text @click="click(button, $event)">
       {{ button.text }}
     </v-btn>
 
@@ -34,32 +23,33 @@ export default {
     spec: { type: Object, required: true },
     vueApp: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
-      show: false,
+      show: true,
       color: null,
       indicator: false
     };
   },
-  watch: {
-    "vueApp.indicator": function(val, oldVal) {
-      if (this.indicator) {
-        this.show = val;
-      }
-    }
-  },
+  // watch: {
+  //   model: function (val, oldVal) {
+  //     if (!val) {
+  //       // this.$destroy();
+  //       this.$.appContext.app.unmount()
+  //     }
+  //   },
+  // },
   methods: {
     $ready() {
       const vm = this;
       this.$type.ifArray(this.spec.styleClasses, val => {
         ["success", "info", "error", "warning"].forEach(color => {
           if (val.includes(color)) {
-            vm.color = vm.$vuetify.theme.currentTheme[color];
+            vm.color = vm.$vuetify.theme.themes[color];
           }
         });
       });
     },
-    click: function(spec) {
+    click: function (spec) {
       const onClick = spec["onClick"];
       this.show = false;
       GLib.action.execute(onClick, this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "2.5.0",
+  "version": "3.0.0-beta1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -9,8 +9,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.0.0",
-    "@mdi/font": "^4.5.95",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0-alpha",
     "awesome-phonenumber": "2.15.0",
@@ -22,29 +20,30 @@
     "phoenix": "^1.5.3",
     "push.js": "^1.0.12",
     "quill-image-drop-and-paste": "^1.2.14",
+    "tiny-emitter": "^2.1.0",
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
-    "vue": "2.6.14",
+    "vue": "3.2.47",
     "vue-chartkick": "^0.6.1",
-    "vue-gtag": "^1.1.2",
+    "vue-gtag": "^2.0.1",
     "vue-social-sharing": "^3.0.9",
     "vue-youtube": "^1.4.0",
     "vue2-editor": "^2.9.1",
     "vue2-gmap-custom-marker": "^6.1.1",
     "vue2-google-maps": "^0.10.6",
     "vuedraggable": "^2.24.1",
-    "vuetify": "2.3.9"
+    "vuetify": "3.1.10"
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.34",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.4.0",
+    "eslint": "^8.36.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-loader": "^3.0.0",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^5.2.3",
-    "eslint-plugin-vuetify": "^1.0.0-beta.3",
+    "eslint-plugin-vue": "^9.9.0",
+    "eslint-plugin-vuetify": "^2.0.0-beta.2",
+    "material-design-icons-iconfont": "^6.7.0",
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }
-}
+}

package/plugins/driverCustomBehavior.js

@@ -8,6 +8,6 @@ export default {
       element.addEventListener("focus", () => driver.moveNext());
     };
 
-    Vue.prototype.driverCustomBehavior = driverCustomBehavior;
+    Vue.config.globalProperties.driverCustomBehavior = driverCustomBehavior;
   }
 };

package/plugins/updatableComponent.js

@@ -1,16 +1,10 @@
 export default {
   install: (Vue, options) => {
-    // Vue.prototype.updatables = {};
-
     Vue.mixin({
-      created: function() {
+      created: function () {
         let spec = this.spec;
         if (spec && spec.id && this.$registryEnabled()) {
           GLib.component.register(spec.id, this);
-          // Object.assign(this.updatables, {
-          //   [spec.id]: this
-          // });
-          // console.log("U", this.updatables);
         }
       },
       methods: {

package/plugins/vuetify.js

@@ -0,0 +1,27 @@
+import { createVuetify } from "vuetify";
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
+import { aliases, md } from 'vuetify/iconsets/md'
+import 'vuetify/styles'
+import Utils from '../utils/helper'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const opts = {
+    components,
+    directives,
+    icons: {
+        defaultSet: 'md',
+        aliases,
+        sets: {
+            md,
+        },
+    },
+    theme: {
+        themes: Utils.settings.themes
+    },
+    display: {
+        smAndDown: true
+    }
+}
+
+export default new createVuetify(opts)