glib-web 0.15.0 → 0.15.2

package/components/avatar.vue

@@ -8,14 +8,9 @@
   >
     <template v-slot:activator="{ on }">
       <common-badge :spec="spec">
-        <v-avatar
-          :style="genericStyles()"
-          :class="$classes()"
-          :size="spec.size"
-          v-on="on"
-        >
-          <v-img :src="spec.url || spec.base64Data" @click="$onClick()">
-          </v-img>
+        <v-avatar :size="spec.size">
+          <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
+          <img :src="spec.url || spec.base64Data" @click="$onClick()" />
         </v-avatar>
       </common-badge>
     </template>

package/nav/dialog.vue

@@ -1,13 +1,14 @@
 <template>
   <v-dialog
     v-model="model"
-    width="600"
+    :width="spec.width || 600"
     :dark="false"
+    :fullscreen="fullscreen"
     :sm-and-down="false"
     :persistent="true"
   >
     <v-card>
-      <v-card-title v-if="title || showClose" class="headline" primary-title>
+      <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>
@@ -68,6 +69,7 @@ export default {
       showClose: false,
       isFormDirty: false,
       isFormSubmitted: false,
+      isMobile: false,
       formSpec: null
     };
   },
@@ -77,6 +79,15 @@ export default {
         return "panels-form";
       }
       return "div";
+    },
+    fullscreen() {
+      if (this.spec.fullscreen == "mobile" && this.isMobile) {
+        return true;
+      } else if (this.spec.fullscreen == "always") {
+        return true;
+      } else {
+        return false;
+      }
     }
   },
   watch: {
@@ -89,7 +100,7 @@ export default {
   methods: {
     $ready() {
       this.$root.vueApp = this.vueApp;
-
+      this.onResize();
       this.show(false);
       this.stack.push(this);
     },
@@ -114,6 +125,10 @@ export default {
         this.show(true);
       }
     },
+    onResize() {
+      this.isMobile = window.innerWidth < 600;
+    },
+
     show(reload) {
       const spec = this.spec;
       this.url = spec.url;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/thumbnail.vue

@@ -23,13 +23,8 @@
     >
       <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon>
 
-      <!-- <v-checkbox
-        v-if="spec.fieldCheckName"
-        :name="spec.fieldCheckName"
-        :value="true"
-      ></v-checkbox> -->
-
-      <fields-check v-if="checkSpec" :spec="checkSpec" />
+      <!-- Specify a key to prevent reuse which causes an issue where the checkbox would use the previous name. -->
+      <fields-check v-if="checkSpec" :key="checkSpec.name" :spec="checkSpec" />
 
       <div v-if="spec.leftButtons" class="left-universal">
         <template v-for="(item, index) in spec.leftButtons">
@@ -111,9 +106,8 @@ export default {
   data() {
     return {
       accessory: {},
-      editButtons: [],
-      checkSpec: null
-      // chips: []
+      editButtons: []
+      // checkSpec: null
     };
   },
   computed: {
@@ -137,15 +131,11 @@ export default {
         });
         return Object.assign({}, item, { color: color, view: "chip" });
       });
-    }
-  },
-  methods: {
-    $ready() {
-      this.accessory = { childViews: this.spec.accessoryViews };
-      this.editButtons = this.spec.editButtons || [];
-
+    },
+    // Implemented as computed so that it gets reflected when navigating to another list containing check fields.
+    checkSpec() {
       if (this.spec.fieldCheckName) {
-        this.checkSpec = {
+        return {
           view: "fields/checkGroup",
           name: this.spec.fieldCheckName,
           checkValue: true,
@@ -153,6 +143,13 @@ export default {
           padding: { left: 16 }
         };
       }
+      return null;
+    }
+  },
+  methods: {
+    $ready() {
+      this.accessory = { childViews: this.spec.accessoryViews };
+      this.editButtons = this.spec.editButtons || [];
     },
     buttonSpec(item) {
       return Object.assign({}, item, {