glib-web 2.6.7 → 3.0.0

package/nav/dialog.vue

@@ -1,25 +1,10 @@
 <template>
-  <v-dialog
-    v-model="model"
-    :width="spec.width || 600"
-    :dark="false"
-    :fullscreen="fullscreen"
-    :sm-and-down="false"
-    :persistent="true"
-  >
-    <v-card :style="hamburgerStyles" class="hamburger">
-      <!-- <v-card-title v-if="title || showClose" class="text-h5" primary-title> -->
-      <div>
-        <panels-responsive v-if="header" :spec="header" />
-        <div v-if="title" class="dialogs-title theme--light v-subheader">
-          {{ title }}
-        </div>
-
-        <v-btn v-if="showClose" text icon class="dialog-close" @click="close">
-          <v-icon>close</v-icon>
-        </v-btn>
-      </div>
-      <!-- </v-card-title> -->
+  <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" icon="close" size="small" :flat="true" class="dialog-close" @click.native="close" />
+      </v-card-title>
 
       <div class="dialogs-body">
         <component :is="containerComponent" :spec="formSpec">
@@ -37,13 +22,7 @@
 
         <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>
       </v-card-actions>
@@ -54,18 +33,19 @@
 <script>
 import Http from "../utils/http";
 import Action from "../action";
-import FormPanel from "../components/panels/form";
+import FormPanel from "../components/panels/form.vue";
+import { vueApp } from "../store";
+
 
 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 }
   },
-  data: function() {
+  data: function () {
     return {
       mainHeight: 0,
       title: null,
@@ -80,7 +60,7 @@ export default {
       isFormDirty: false,
       isFormSubmitted: false,
       isMobile: false,
-      formSpec: null
+      formSpec: null,
     };
   },
   computed: {
@@ -99,20 +79,15 @@ export default {
         return false;
       }
     },
-    hamburgerStyles() {
-      if (this.spec.height == "matchParent") {
-        return `height: ${this.mainHeight}px;`;
-      }
-      return null;
-    }
-  },
-  watch: {
-    model: function(val, oldVal) {
-      if (!val) {
-        this.$destroy();
-      }
-    }
   },
+  // watch: {
+  //   model: function (val, oldVal) {
+  //     if (!val) {
+  //       // this.$destroy();
+  //       this.$.appContext.app.unmount()
+  //     }
+  //   },
+  // },
   methods: {
     $mounted() {
       window.addEventListener(
@@ -124,7 +99,6 @@ export default {
       );
     },
     $ready() {
-      this.$root.vueApp = this.vueApp;
       this.onResize();
       this.show(false);
       this.stack.push(this);
@@ -134,7 +108,7 @@ export default {
       });
     },
     $tearDown() {
-      console.debug("Dialog destroyed");
+      console.log("Dialog destroyed");
       this.stack.remove(this);
     },
     close() {
@@ -168,7 +142,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;
@@ -192,6 +166,7 @@ export default {
       this.model = true;
     },
     updateMainHeight() {
+      console.debug("Setting body height");
       this.mainHeight = window.innerHeight - 140;
     }
   }
@@ -202,18 +177,22 @@ export default {
 .dialogs-title {
   padding: 16px 16px 0px 16px;
 }
+
 .dialog-message {
   padding: 16px 16px 20px 16px;
   /* white-space: pre-wrap; */
 }
+
 .dialog-close {
   right: 16px;
   top: 12px;
   position: absolute;
 }
+
 .v-card__text {
   padding: 0 !important;
 }
+
 .hamburger {
   display: flex;
   flex-direction: column;
@@ -221,6 +200,7 @@ export default {
   height: 100%;
   padding: 0;
 }
+
 .dialogs-body {
   // height: 100%;
   // overflow-y: overlay;
@@ -232,6 +212,7 @@ export default {
 .v-dialog {
   // Hide superfluous scrollbar (Edge)
   -ms-overflow-style: none;
+
   * {
     -ms-overflow-style: initial;
   }

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,51 +1,50 @@
 <template>
   <v-bottom-sheet v-model="model" inset>
     <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>
 </template>
 
 <script>
+import { VBottomSheet } from 'vuetify/labs/VBottomSheet'
+
 export default {
+  components: {
+    'v-bottom-sheet': VBottomSheet
+  },
   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,22 +1,9 @@
 <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" :location="spec.location" :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)"
-    >
-      {{ button.text }}
+    <v-btn v-for="(button, index) in spec.buttons" variant="text" @click="click(button, $event)">
+      <span style="color: whitesmoke">{{ button.text }}</span>
     </v-btn>
 
     <!-- <v-btn
@@ -29,37 +16,39 @@
 </template>
 
 <script>
+import { colors } from '../utils/constant';
+
 export default {
   props: {
-    spec: { type: Object, required: true },
-    vueApp: { type: Object, required: true }
+    spec: { 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 => {
+        colors.forEach(color => {
           if (val.includes(color)) {
-            vm.color = vm.$vuetify.theme.currentTheme[color];
+            vm.color = 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.6.7",
+  "version": "3.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -9,42 +9,39 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.0.0",
-    "@mdi/font": "^4.5.95",
+    "@floating-ui/dom": "^1.2.8",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0-alpha",
+    "@vueup/vue-quill": "^1.2.0",
     "awesome-phonenumber": "2.15.0",
     "chart.js": "^2.8.0",
     "chartjs-plugin-annotation": "^0.5.7",
     "driver.js": "^0.9.8",
     "json-logic-js": "^2.0.0",
+    "lodash.merge": "^4.6.2",
     "marked": "^4.0.0",
     "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-social-sharing": "^3.0.9",
-    "vue-youtube": "^1.4.0",
-    "vue2-editor": "^2.9.1",
+    "vue-social-sharing": "^4.0.0-alpha4",
     "vue2-gmap-custom-marker": "^6.1.1",
     "vue2-google-maps": "^0.10.6",
-    "vuedraggable": "^2.24.1",
-    "vuetify": "2.3.9"
+    "vuetify": "^3.3.2"
   },
   "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,13 +1,13 @@
 export default {
   install: (Vue, options) => {
     Vue.mixin({
-      mounted: function() {
+      mounted: function () {
         let spec = this.spec;
         if (spec && spec.id && this.$registryEnabled()) {
           GLib.component.register(spec.id, this);
         }
       },
-      destroyed: function() {
+      destroyed: function () {
         let spec = this.spec;
         if (spec && spec.id && this.$registryEnabled()) {
           GLib.component.deregister(spec.id);

package/plugins/vuetify.js

@@ -0,0 +1,26 @@
+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 * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const opts = {
+    components,
+    directives,
+    icons: {
+        defaultSet: 'md',
+        aliases,
+        sets: {
+            md,
+        },
+    },
+    theme: {
+        themes: {}
+    },
+    display: {
+        smAndDown: true
+    }
+}
+
+export default new createVuetify(opts)

package/store.js

@@ -0,0 +1,16 @@
+import { reactive } from 'vue'
+
+export const vueApp = reactive({
+    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: {}
+})