glib-web 2.2.0 → 2.2.1

package/components/fields/dynamicGroup.vue

@@ -1,20 +1,10 @@
 <template>
   <div :style="genericStyles()" :class="$classes()">
     <div v-for="(group, groupIndex) in groupSpecs" :key="`group${groupIndex}`">
-      <input
-        v-if="isDeleted(groupIndex)"
-        type="hidden"
-        :name="`${spec.name}[${groupIndex}][_destroy]`"
-        value="1"
-      />
+      <input v-if="isDeleted(groupIndex)" type="hidden" :name="`${spec.name}[${groupIndex}][_destroy]`" value="1" />
       <div :style="{ display: isDeleted(groupIndex) ? 'none' : 'block' }">
-        <v-icon
-          class="float-left mr-2"
-          color="error"
-          @click="removeGroup(groupIndex)"
-          >remove_circle</v-icon
-        >
-        <h4>{{ spec.titlePrefix }} {{ groupIndex + 1 }}</h4>
+        <v-icon class="float-left mr-2" color="error" @click="removeGroup(groupIndex)">remove_circle</v-icon>
+        <h4 v-if="spec.titlePrefix">{{ spec.titlePrefix }} {{ groupIndex + 1 }}</h4>
         <panels-responsive :spec="group" />
       </div>
     </div>

package/components/fields/radioGroup.vue

@@ -1,10 +1,15 @@
 <template>
+  <!-- In the current Vuetify, there seems to be a bug with validate-on-blur where once a radioGroup has a validation error,
+       the error can only be removed by submitting the form. But this is better than the alternative, which is radioGroup showing
+       validation error on page load.
+    -->
   <v-radio-group
     v-model="fieldModel"
     :name="fieldName"
     :disabled="spec.readOnly"
     :rules="$validation()"
     :row="spec.row"
+    validate-on-blur
     @change="onChange"
   >
     <div v-for="(childView, index) in spec.childViews" :key="index">

package/components/mixins/generic.js

@@ -23,7 +23,6 @@ export default {
         Utils.type.ifObject(val.format, spec => {
           augmentedRules = augmentedRules.concat([
             v => {
-              console.log("VALIDATE1");
               if (v && !v.match(spec.regex)) {
                 return spec.message;
               }

package/components/mixins/styles.js

@@ -202,10 +202,7 @@ export default {
         // Has to be executed before $ready(). This executes regardless of whether a form is found because fields
         // may be used without a form.
         this.fieldName = this.spec.name;
-        // Don't initialize fieldModel unnecessarily because this will trigger validations on page load
-        if (this.spec.value) {
-          this.fieldModel = this._sanitizeValue(this.spec.value);
-        }
+        this.fieldModel = this._sanitizeValue(this.spec.value);
       }
     },
     $classes(spec) {

package/nav/appbar.vue

@@ -1,22 +1,11 @@
 <template>
   <div>
-    <nav-drawer
-      v-if="page.leftDrawer"
-      :trigger="drawerTrigger"
-      :permanent="isPermanent"
-      :spec="page.leftDrawer"
-    />
+    <nav-drawer v-if="page.leftDrawer" :trigger="drawerTrigger" :permanent="isPermanent" :spec="page.leftDrawer" />
 
-    <v-toolbar :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-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>
       <div v-else>
         <panels-responsive v-if="navBar.logo" :spec="navBar.logo" />
         <v-toolbar-title v-else-if="navBar.showTitle">{{
@@ -28,35 +17,16 @@
       <!-- See https://codesandbox.io/embed/14ry9r3lll -->
       <v-toolbar-items class="hidden-sm-and-down">
         <template v-for="(btn, index) in navBar.rightButtons">
-          <common-dropdownMenu
-            v-if="btn.childButtons"
-            :key="index"
-            :spec="btn"
-            :disabled="$isBusy"
-          />
-          <common-button
-            v-else
-            :key="`right_${index}`"
-            :spec="buttonSpec(btn)"
-            :disabled="$isBusy"
-          />
+          <common-dropdownMenu v-if="btn.childButtons" :key="index" :spec="btn" :disabled="$isBusy" />
+          <common-button v-else :key="`right_${index}`" :spec="buttonSpec(btn)" :disabled="$isBusy" />
         </template>
       </v-toolbar-items>
 
-      <common-dropdownMenu
-        v-if="showMobileMenu"
-        class="hidden-md-and-up"
-        :spec="mobileMenu"
-      />
+      <common-dropdownMenu v-if="showMobileMenu" class="hidden-md-and-up" :spec="mobileMenu" />
 
       <views-avatar v-if="navBar.imageUrl" :spec="avatarSpec(navBar)" />
 
-      <v-btn
-        v-if="viewSourceEnabled()"
-        icon
-        style="color: inherit;"
-        @click="viewSource"
-      >
+      <v-btn v-if="viewSourceEnabled()" icon style="color: inherit;" @click="viewSource">
         <v-icon>zoom_in</v-icon>
       </v-btn>
     </v-toolbar>
@@ -75,7 +45,7 @@ export default {
   props: {
     page: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
       drawerTrigger: null,
       navBar: {},
@@ -84,11 +54,11 @@ export default {
     };
   },
   computed: {
-    style: function() {
+    style: function () {
       return Object.assign(this.genericStyles(this.navBar), this.leftPadding);
     },
     // We could've used the `app` attribute on `v-toolbar` if it didn't conflict with our header-footer css.
-    leftPadding: function() {
+    leftPadding: function () {
       switch (this.$vuetify.breakpoint.name) {
         case "lg":
         case "xl":
@@ -124,11 +94,11 @@ export default {
         styleClasses: styleClasses
       });
     },
-    viewSourceEnabled: function() {
+    viewSourceEnabled: function () {
       // return process.env.NODE_ENV === "development";
       return false;
     },
-    viewSource: function() {
+    viewSource: function () {
       const properties = { message: this.page };
       Utils.launch.dialog.open(Object.assign({}, properties));
     },
@@ -157,11 +127,13 @@ export default {
     &.icon {
       color: inherit;
     }
+
     &.text {
       color: inherit;
     }
   }
 }
+
 .pages-navBar {
   box-shadow: none !important;
 }

package/nav/drawer.vue

@@ -51,6 +51,7 @@
 // import UrlUtils from "../utils/url";
 import NavDrawerButton from "./drawerButton";
 import NavDrawerLabel from "./drawerLabel";
+import bus from "../utils/eventBus";
 
 export default {
   components: {
@@ -102,12 +103,10 @@ export default {
   methods: {
     $ready() {
       this.shrunk = this.mini = this.cssClasses.includes("mini");
-
-      // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
-      this.$el.addEventListener("drawers/clickButton", () => {
-        if (!this.permanent) {
-          this.updateState(false);
-        }
+    },
+    $mounted() {
+      bus.$on("drawers/toggle", () => {
+        this.updateState(!this.state);
       });
     },
     updateState(state) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -45,4 +45,4 @@
     "eslint-plugin-vuetify": "^1.0.0-beta.3",
     "prettier": "^1.18.2"
   }
-}
+}

package/utils/eventBus.js

@@ -0,0 +1,2 @@
+import Vue from "vue";
+export default new Vue();