glib-web 3.3.0 → 3.4.1

package/nav/dialog.vue

@@ -4,17 +4,18 @@
     <v-card :style="hamburgerStyles" class="hamburger">
 
       <panels-responsive v-if="header" :spec="header" />
-      <div class="dialog-title flex flex-wrap justify-between" v-if="title">
-        <div class="theme--light v-subheader">
+      <div class="dialog-title d-flex flex-wrap justify-space-between align-center" style="width: 100%; height: 100%;">
+        <h3 v-if="title">
           {{ title }}
-        </div>
-      </div>
+        </h3>
 
-      <div class="dialogs-body relative">
-        <v-btn size="small" v-if="!disableCloseButton" text icon @click="close" class="mr-3 mt-2 close-btn"
+        <v-btn size="small" v-if="!disableCloseButton" text icon @click="close" class="mr-4 mt-4 close-btn"
           style="z-index: 999;" variant="flat">
           <v-icon>close</v-icon>
         </v-btn>
+      </div>
+
+      <div class="dialogs-body relative">
         <component :is="containerComponent" :spec="formSpec">
           <div v-if="message" class="dialog-message">
             <common-message :spec="{ message: message }" />
@@ -94,14 +95,13 @@ export default {
       return null;
     }
   },
-  // watch: {
-  //   model: function (val, oldVal) {
-  //     if (!val) {
-  //       // this.$destroy();
-  //       this.$.appContext.app.unmount()
-  //     }
-  //   },
-  // },
+  watch: {
+    model: function (val, oldVal) {
+      if (!val) {
+        this.stack.remove(this);
+      }
+    },
+  },
   methods: {
     $mounted() {
       window.addEventListener(
@@ -122,10 +122,10 @@ export default {
       });
     },
     // TODO: This doesn't get called anymore after Vue3 upgrade.
-    $tearDown() {
-      console.debug("Dialog destroyed");
-      this.stack.remove(this);
-    },
+    // $tearDown() {
+    //   console.debug("Dialog destroyed");
+    //   this.stack.remove(this);
+    // },
     close() {
       if (Utils.http.proceedEvenWhenDirty()) {
         this.model = false;

package/nav/drawer.vue

@@ -4,8 +4,8 @@
 
   <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">
+      :permanent="mdAndUp || cssClasses.includes('permanent')" :expand-on-hover="expandOnHover()"
+      v-model:mini-variant="shrunk" @input="updateState">
 
       <template v-if="spec.header">
         <panels-responsive :spec="spec.header" />
@@ -39,6 +39,7 @@
 import NavDrawerButton from "./drawerButton.vue";
 import NavDrawerLabel from "./drawerLabel.vue";
 import bus from "../utils/eventBus";
+import { useDisplay } from "vuetify";
 
 export default {
   components: {
@@ -51,6 +52,11 @@ export default {
     trigger: { type: [Object, Date], default: null },
     permanent: { type: Boolean, required: true },
   },
+  setup() {
+    const { mdAndUp } = useDisplay();
+
+    return { mdAndUp };
+  },
   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.

package/nav/snackbar.vue

@@ -1,22 +1,20 @@
 <template>
-  <v-snackbar v-model="show" :location="spec.location" :color="color" :timeout="spec.timeout">
+  <v-snackbar :vertical="vertical" v-model="show" :location="spec.location" :color="color" :timeout="spec.timeout"
+    :variant="variant">
     <common-message :spec="spec" />
 
-    <v-btn v-for="(button, index) in spec.buttons" variant="text" @click="click(button, $event)">
-      <span style="color: whitesmoke">{{ button.text }}</span>
-    </v-btn>
+    <template v-slot:actions v-if="spec.buttons">
+      <v-btn v-for="(button, index) in spec.buttons" :key="index" :color="color" :variant="variant"
+        @click="click(button, $event)">
+        <span :class="`text-${color}`">{{ button.text }}</span>
+      </v-btn>
+    </template>
 
-    <!-- <v-btn
-      flat
-      @click="close"
-    >
-      Close
-    </v-btn> -->
   </v-snackbar>
 </template>
 
 <script>
-import { colors } from '../utils/constant';
+import { determineColor, determineVariant } from '../utils/constant';
 
 export default {
   props: {
@@ -25,28 +23,17 @@ export default {
   data: function () {
     return {
       show: true,
-      color: null,
-      indicator: false
+      color: 'primary',
+      variant: 'outlined',
+      indicator: false,
+      vertical: false
     };
   },
-  // 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 => {
-        colors.forEach(color => {
-          if (val.includes(color)) {
-            vm.color = color;
-          }
-        });
-      });
+      this.variant = determineVariant(this.spec.styleClasses, 'outlined');
+      this.color = determineColor(this.spec.styleClasses, 'primary');
+      this.vertical = [this.spec.styleClasses].flat().includes('vertical');
     },
     click: function (spec) {
       const onClick = spec["onClick"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "@floating-ui/dom": "^1.2.8",
+    "@gmap-vue/v3": "^1.0.3",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0-alpha",
     "@vueup/vue-quill": "^1.2.0",
@@ -30,8 +31,6 @@
     "vue": "3.2.47",
     "vue-chartkick": "^1.1.0",
     "vue-social-sharing": "^4.0.0-alpha4",
-    "vue2-gmap-custom-marker": "^6.1.1",
-    "vue2-google-maps": "^0.10.6",
     "vuedraggable": "^4.1.0",
     "vuetify": "^3.3.2"
   },
@@ -42,4 +41,4 @@
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }
-}
+}

package/utils/http.js

@@ -1,6 +1,6 @@
 import Type from "./type";
 import Action from "../action";
-import { nextTick } from 'vue'
+import { nextTick } from 'vue';
 import { vueApp } from "../store";
 
 let loading = false;
@@ -89,7 +89,7 @@ export default class {
         this.forceComponentUpdate(() => {
           Utils.history.resetScroll();
 
-          vueApp.page = data
+          vueApp.page = data;
 
           Action.execute(properties["onOpen"], component);
         });
@@ -143,7 +143,7 @@ export default class {
 
     Utils.http.execute(data, "GET", component, (page, response) => {
       Utils.http.forceComponentUpdate(() => {
-        vueApp.page = page
+        vueApp.page = page;
         const redirectUrl = Utils.url.htmlUrl(response.url);
         Utils.history.updatePage(vueApp.page, redirectUrl);
 
@@ -244,27 +244,27 @@ export default class {
     setTimeout(() => {
       if (loading) {
         loading = false;
-        vueApp.indicator = true
+        vueApp.indicator = true;
       }
     }, 200);
   }
 
   static _hideIndicator() {
     loading = false;
-    vueApp.indicator = false
+    vueApp.indicator = false;
   }
 
   // See generic.js
   static forceComponentUpdate(handler) {
     // GLib.component.clearRegistry();
-    vueApp.isStale = true
-    vueApp.isFormSubmitted = false
-    vueApp.isFormDirty = false
+    vueApp.isStale = true;
+    vueApp.isFormSubmitted = false;
+    vueApp.isFormDirty = false;
     handler();
 
     // Queue the execution so the first isStale has time to resets state before handler gets executed
     nextTick(() => {
-      vueApp.isStale = false
+      vueApp.isStale = false;
     });
   }
 
@@ -275,16 +275,16 @@ export default class {
   }
 
   static clearDirtyState() {
-    vueApp.isFormDirty = false
+    vueApp.isFormDirty = false;
   }
 
   static notifyFormSubmitted() {
-    vueApp.isFormSubmitted = true
+    vueApp.isFormSubmitted = true;
   }
 
   // `context` can be either window or dialog.
   static proceedEvenWhenDirty() {
-    const dirtyContext = vueApp
+    const dirtyContext = vueApp;
     // Don't prompt if this is a result of form submission
     if (
       dirtyContext.isFormDirty &&

package/utils/launch.js

@@ -3,7 +3,7 @@ import Dialog from "../nav/dialog.vue";
 import Sheet from "../nav/sheet.vue";
 import Snackbar from "../nav/snackbar.vue";
 import Popover from "../components/popover.vue";
-import { computePosition, flip, offset } from '@floating-ui/dom'
+import { computePosition, flip, offset } from '@floating-ui/dom';
 import bus from "./eventBus";
 
 import { createApp, h } from "vue";
@@ -31,17 +31,17 @@ class LaunchPopover {
     const instance = createApp(
       {
         render: function () {
-          return h(Popover, { spec: properties })
+          return h(Popover, { spec: properties });
         }
       }
-    )
-    Object.assign(instance._context, Vue._context)
+    );
+    Object.assign(instance._context, Vue._context);
 
     if (component) {
-      const placeholder = document.createElement('div')
+      const placeholder = document.createElement('div');
 
       // const pageBody = Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
-      const dialogBody = Utils.launch.dialog.closestBody(component)
+      const dialogBody = Utils.launch.dialog.closestBody(component);
       if (dialogBody) {
         // Put the popover on the dialog so that clicking it doesn't close a non-persistent dialog.
         dialogBody.appendChild(placeholder);
@@ -53,11 +53,11 @@ class LaunchPopover {
 
       instance.mount(placeholder);
 
-      const reference = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling
+      const reference = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling;
 
-      const floating = placeholder
-      const placement = properties.placement || 'right'
-      const offsetSize = properties.offset || 8
+      const floating = placeholder;
+      const placement = properties.placement || 'right';
+      const offsetSize = properties.offset || 8;
 
       // These properties need to be set to get an accurate calculation. See https://floating-ui.com/docs/computeposition
       Object.assign(placeholder.style, { position: 'absolute', display: 'block', top: 0, left: 0 });
@@ -65,7 +65,7 @@ class LaunchPopover {
       computePosition(reference, floating, { placement: placement, middleware: [flip(), offset(offsetSize)] })
         .then(({ x, y }) => {
           Object.assign(placeholder.style, { top: `${y}px`, left: `${x}px`, zIndex: 1200 });
-        })
+        });
     } else {
       console.error("A popover has to be displayed in a component");
     }
@@ -74,13 +74,13 @@ class LaunchPopover {
   }
 
   static close(properties) {
-    bus.$emit(`popover/close-${properties.key}`, properties)
+    bus.$emit(`popover/close-${properties.key}`, properties);
   }
 }
 
 class LaunchDialog {
   static closestBody(component) {
-    const element = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling
+    const element = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling;
     const dialog = element.closest(".v-dialog");
     if (dialog) {
       return dialog.querySelector(".dialogs-body");
@@ -110,20 +110,20 @@ class LaunchDialog {
     const props = {
       spec: properties,
       stack: this.stack
-    }
+    };
 
     const instance = createApp(
       {
         render: function () {
-          return h(Dialog, props)
+          return h(Dialog, props);
         }
       }
-    )
-    Object.assign(instance._context, Vue._context)
+    );
+    Object.assign(instance._context, Vue._context);
 
     if (component) {
-      const placeholder = document.createElement('div')
-      document.body.appendChild(placeholder)
+      const placeholder = document.createElement('div');
+      document.body.appendChild(placeholder);
       instance.mount(placeholder);
     } else {
       console.error("A dialog has to be displayed in a component");
@@ -160,6 +160,7 @@ class LaunchDialog {
       message: message
     };
     const spec = Object.assign({}, properties, {
+      disableCloseButton: true,
       buttons: [
         {
           text: "OK",
@@ -176,15 +177,15 @@ class LaunchSheet {
     const instance = createApp(
       {
         render: function () {
-          return h(Sheet, { spec: properties })
+          return h(Sheet, { spec: properties });
         }
       }
-    )
-    Object.assign(instance._context, Vue._context)
+    );
+    Object.assign(instance._context, Vue._context);
 
     if (component) {
-      const placeholder = document.createElement('div')
-      document.body.appendChild(placeholder)
+      const placeholder = document.createElement('div');
+      document.body.appendChild(placeholder);
       instance.mount(placeholder);
     } else {
       console.error("A sheet has to be displayed in a component");
@@ -216,15 +217,15 @@ class LaunchSnackbar {
     const instance = createApp(
       {
         render: function () {
-          return h(Snackbar, { spec: properties })
+          return h(Snackbar, { spec: properties });
         }
       }
-    )
-    Object.assign(instance._context, Vue._context)
+    );
+    Object.assign(instance._context, Vue._context);
 
     if (component) {
-      const placeholder = document.createElement('div')
-      document.body.appendChild(placeholder)
+      const placeholder = document.createElement('div');
+      document.body.appendChild(placeholder);
       instance.mount(placeholder);
       instance.show = true;
     } else {