glib-web 0.5.95 → 0.5.99

package/components/fields/check.vue

@@ -1,24 +1,16 @@
 <template>
-  <div :class="$classes()">
+  <div :class="$classes()" :style="$styles()">
     <fields-hidden v-if="uncheckSpec" :spec="uncheckSpec" />
     <v-checkbox
       v-model="fieldModel"
       :name="fieldName"
       :value="spec.checkValue"
-      :label="spec.label"
+      :label="fieldModel ? spec.onLabel || spec.label : spec.label"
+      :on-icon="spec.onIcon"
+      :off-icon="spec.offIcon"
       hide-details
       @change="changed"
     ></v-checkbox>
-    <!-- <v-switch
-      v-if="fieldType == 'switch'"
-      v-model="fieldModel"
-      :name="fieldName"
-      :value="spec.checkValue"
-      :label="spec.label"
-      hide-details
-      @change="changed"
-    >
-    </v-switch> -->
   </div>
 </template>
 
@@ -34,25 +26,11 @@ export default {
   },
   data() {
     return {
-      // groupElement: null,
       groupName: null,
       fieldType: null,
       uncheckSpec: null
     };
   },
-  // mounted() {
-  //   // // TODO: probably need fixing
-  //   // this.groupElement = this.$el.closest("[data-component=checkGroup]");
-  //   // console.log(
-  //   //   `groupElement: ${this.groupElement} -- ${this.groupElement.getAttribute(
-  //   //     "name"
-  //   //   )}`
-  //   // );
-  //   // this.$type.ifObject(
-  //   //   this.groupElement,
-  //   //   val => (this.groupName = val.getAttribute("name"))
-  //   // );
-  // },
   methods: {
     $ready() {
       this.groupElement = this.$el.closest("[data-component=checkGroup]");
@@ -80,12 +58,17 @@ export default {
     },
     changed(event) {
       // Execute later to ensure the checkbox's checked state has been updated.
-      const vm = this;
-      setTimeout(function() {
-        vm.$type.ifObject(vm.groupElement, val =>
+      setTimeout(() => {
+        this.$type.ifObject(this.groupElement, val =>
           val.dispatchEvent(new Event("change"))
         );
       }, 100);
+
+      if (this.spec.submitOnChange) {
+        setTimeout(() => {
+          this.$dispatchEvent("forms/submit");
+        }, 200);
+      }
     }
   }
 };

package/components/fields/checkGroup.vue

@@ -28,17 +28,6 @@ export default {
       return { name: this.spec.name, value: this.spec.uncheckValue };
     }
   },
-  // mounted() {
-  //   this.detectChecked();
-  //   const vm = this;
-  //   this.$el.addEventListener(
-  //     "change",
-  //     function(e) {
-  //       vm.detectChecked();
-  //     },
-  //     false
-  //   );
-  // },
   methods: {
     $ready() {
       this.detectChecked();

package/components/fields/location.vue

@@ -1,223 +1,198 @@
-<template>
-  <v-container fluid class="pa-0" :style="$styles()">
-    <!--
-      It's safer to manually implement styling than adding another dependency such as vuetify-google-autocomplete,
-      which behaves differently and needs to be actively maintained.
-    -->
-    <div
-      class="v-input theme--light v-text-field v-text-field--enclosed v-text-field--outlined"
-    >
-      <div class="v-input__control">
-        <div class="v-input__slot">
-          <fieldset aria-hidden="true">
-            <legend :style="`width: ${labelWidth}px;`"><span>​</span></legend>
-          </fieldset>
-          <div class="v-text-field__slot">
-            <label
-              ref="label"
-              class="v-label v-label--active theme--light"
-              style="left: 0px; right: auto; position: absolute; font-size: 16px;"
-              >{{ spec.label }}</label
-            >
-            <!-- See https://developers.google.com/places/web-service/autocomplete#place_types for autocompleteOptions -->
-            <gmap-autocomplete
-              :name="spec.name"
-              :placeholder="spec.placeholder"
-              :value="address"
-              :options="spec.autocompleteOptions"
-              @input="onAddressChanged"
-              @place_changed="onPlaceChanged"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <gmap-map
-      ref="map"
-      :center="{ lat: 0, lng: 0 }"
-      :zoom="13"
-      class="mt-3 mb-3"
-      map-type-id="roadmap"
-      :style="mapStyles"
-      @idle="onActionCompleted"
-    >
-      <gmap-marker
-        :position="markerPos"
-        :clickable="true"
-        :draggable="true"
-        @drag="onDrag"
-        @dragend="onDrag"
-      />
-    </gmap-map>
-    <ui-component
-      v-if="latitudeField"
-      ref="latitudeView"
-      :spec="latitudeField"
-    />
-    <ui-component
-      v-if="longitudeField"
-      ref="longitudeView"
-      :spec="longitudeField"
-    />
-    <ui-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
-  </v-container>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      infoOptions: {
-        pixelOffset: {
-          width: 0,
-          height: -35
-        }
-      },
-      // markerPos: { lat: null, lng: null },
-      address: null,
-      longitude: null,
-      latitude: null,
-      longitudeField: null,
-      latitudeField: null,
-      zoomField: null,
-      longitudeView: null,
-      latitudeView: null,
-      zoomView: null,
-      labelWidth: 0
-    };
-  },
-  computed: {
-    markerPos() {
-      return { lat: this.latitude || 0, lng: this.longitude || 0 };
-    },
-    mapStyles() {
-      return this.longitude != null && this.latitude != null
-        ? {
-            width: "100%",
-            height: "300px"
-          }
-        : {};
-    }
-  },
-  methods: {
-    $ready() {
-      this.address = this.spec.value;
-      this.longitudeField = this.spec.longitudeField;
-      this.latitudeField = this.spec.latitudeField;
-      this.zoomField = this.spec.zoomField;
-
-      this.centerInitial();
-
-      setTimeout(() => {
-        this.latitudeView = this.$refs.latitudeView.$children[0];
-        this.longitudeView = this.$refs.longitudeView.$children[0];
-
-        if (this.$refs.zoomView) {
-          this.zoomView = this.$refs.zoomView.$children[0];
-        }
-
-        const labelView = this.$refs.label;
-        this.labelWidth = labelView.getBoundingClientRect().width + 6;
-      });
-    },
-    centerInitial() {
-      const latitudeValue = Utils.type.floatValue(this.latitudeField.value);
-      const longitudeValue = Utils.type.floatValue(this.longitudeField.value);
-
-      if (latitudeValue !== 0 && longitudeValue !== 0) {
-        this.setLocation(latitudeValue, longitudeValue, true);
-
-        // Avoid asking for user location right away for now
-        // } else {
-        //   navigator.geolocation.getCurrentPosition(position => {
-        //     const coordinate = position.coords;
-        //     this.setLocation(coordinate.latitude, coordinate.longitude, false);
-        //   });
-      }
-    },
-    setLocation(latitudeValue, longitudeValue, dropPin) {
-      this.$refs.map.$gmapApiPromiseLazy().then(() => {
-        // eslint-disable-next-line no-undef
-        const location = new google.maps.LatLng(latitudeValue, longitudeValue);
-        this.$refs.map.$mapObject.setCenter(location);
-
-        if (dropPin) {
-          this.setMarkerPosition(location);
-        }
-      });
-    },
-    setMarkerPosition(location) {
-      // this.markerPos.lat = location.lat();
-      // this.markerPos.lng = location.lng();
-
-      this.latitude = location.lat();
-      this.longitude = location.lng();
-
-      this.latitudeView.fieldModel = location.lat();
-      this.longitudeView.fieldModel = location.lng();
-    },
-    // setLocationField(name, value) {
-    //   // let field = document.querySelector(`input[name="${name}"]`);
-    //   // field.closest("div.v-input").classList.add("v-input--is-label-active");
-    //   // field.closest("div.v-input").classList.add("v-input--is-dirty");
-    //   // field.previousSibling.classList.add("v-label--active");
-
-    //   let field = this.$refs.fieldContainer.querySelector(
-    //     `input[name="${name}"]`
-    //   );
-    //   // field.closest("div.v-input").classList.add("v-input--is-label-active");
-    //   // field.closest("div.v-input").classList.add("v-input--is-dirty");
-    //   field.previousSibling.classList.add("v-label--active");
-    //   field.value = value;
-    // },
-    // onMapClick(e) {
-    //   const location = e.latLng;
-    //   console.log("CLICK1", e);
-    //   this.setMarkerPosition(location);
-    // },
-    onPlaceChanged(place) {
-      this.address = place.formatted_address;
-
-      const location = place.geometry.location;
-      this.setMarkerPosition(location);
-      this.$refs.map.$mapObject.setCenter(location);
-    },
-    onDrag(e) {
-      this.setMarkerPosition(e.latLng);
-    },
-    onActionCompleted() {
-      if (this.zoomView) {
-        this.zoomView.fieldModel = this.$refs.map.$mapObject.zoom;
-      }
-    },
-    onAddressChanged(e) {
-      this.address = e.target.value;
-      if (this.address === "") {
-        this.address = null;
-        this.longitude = null;
-        this.latitude = null;
-
-        this.latitudeView.fieldModel = null;
-        this.longitudeView.fieldModel = null;
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-/* #loading-container {
-  position: absolute;
-  width: 100%;
-  height: 300px;
-  top: 0;
-  z-index: 100;
-  background: rgba(196, 154, 154, 0.1);
-  align-items: center;
-  justify-content: center;
-} */
-</style>
+<template>
+  <v-container fluid class="pa-0" :style="$styles()">
+    <!--
+      It's safer to manually implement styling than adding another dependency such as vuetify-google-autocomplete,
+      which behaves differently and needs to be actively maintained.
+    -->
+    <div
+      class="v-input theme--light v-text-field v-text-field--enclosed v-text-field--outlined"
+    >
+      <div class="v-input__control">
+        <div class="v-input__slot">
+          <fieldset aria-hidden="true">
+            <legend :style="`width: ${labelWidth}px;`"><span>​</span></legend>
+          </fieldset>
+          <div class="v-text-field__slot">
+            <label
+              ref="label"
+              class="v-label v-label--active theme--light"
+              style="left: 0px; right: auto; position: absolute; font-size: 16px;"
+              >{{ spec.label }}</label
+            >
+            <!-- See https://developers.google.com/places/web-service/autocomplete#place_types for autocompleteOptions -->
+            <gmap-autocomplete
+              :name="spec.name"
+              :placeholder="spec.placeholder"
+              :value="address"
+              :options="spec.autocompleteOptions"
+              @input="onAddressChanged"
+              @place_changed="onPlaceChanged"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <gmap-map
+      ref="map"
+      :center="{ lat: 0, lng: 0 }"
+      :zoom="13"
+      class="mt-3 mb-3 map"
+      map-type-id="roadmap"
+      :style="mapStyles"
+      @idle="onActionCompleted"
+    >
+      <gmap-marker
+        :position="markerPos"
+        :clickable="true"
+        :draggable="true"
+        @drag="onDrag"
+        @dragend="onDrag"
+      />
+    </gmap-map>
+    <ui-component
+      v-if="latitudeField"
+      ref="latitudeView"
+      :spec="latitudeField"
+    />
+    <ui-component
+      v-if="longitudeField"
+      ref="longitudeView"
+      :spec="longitudeField"
+    />
+    <ui-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
+  </v-container>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      infoOptions: {
+        pixelOffset: {
+          width: 0,
+          height: -35
+        }
+      },
+      // markerPos: { lat: null, lng: null },
+      address: null,
+      longitude: null,
+      latitude: null,
+      longitudeField: null,
+      latitudeField: null,
+      zoomField: null,
+      longitudeView: null,
+      latitudeView: null,
+      zoomView: null,
+      labelWidth: 0
+    };
+  },
+  computed: {
+    markerPos() {
+      return { lat: this.latitude || 0, lng: this.longitude || 0 };
+    },
+    mapStyles() {
+      return this.longitude != null && this.latitude != null
+        ? {
+            display: "block"
+          }
+        : { display: "none" };
+    }
+  },
+  methods: {
+    $ready() {
+      this.address = this.spec.value;
+      this.longitudeField = this.spec.longitudeField;
+      this.latitudeField = this.spec.latitudeField;
+      this.zoomField = this.spec.zoomField;
+
+      this.centerInitial();
+
+      setTimeout(() => {
+        this.latitudeView = this.$refs.latitudeView.$children[0];
+        this.longitudeView = this.$refs.longitudeView.$children[0];
+
+        if (this.$refs.zoomView) {
+          this.zoomView = this.$refs.zoomView.$children[0];
+        }
+
+        const labelView = this.$refs.label;
+        this.labelWidth = labelView.getBoundingClientRect().width + 6;
+      });
+    },
+    centerInitial() {
+      const latitudeValue = Utils.type.floatValue(this.latitudeField.value);
+      const longitudeValue = Utils.type.floatValue(this.longitudeField.value);
+
+      if (latitudeValue !== 0 && longitudeValue !== 0) {
+        this.setLocation(latitudeValue, longitudeValue, true);
+
+        // Avoid asking for user location right away for now
+        // } else {
+        //   navigator.geolocation.getCurrentPosition(position => {
+        //     const coordinate = position.coords;
+        //     this.setLocation(coordinate.latitude, coordinate.longitude, false);
+        //   });
+      }
+    },
+    setLocation(latitudeValue, longitudeValue, dropPin) {
+      this.$refs.map.$gmapApiPromiseLazy().then(() => {
+        // eslint-disable-next-line no-undef
+        const location = new google.maps.LatLng(latitudeValue, longitudeValue);
+        this.$refs.map.$mapObject.setCenter(location);
+
+        if (dropPin) {
+          this.setMarkerPosition(location);
+        }
+      });
+    },
+    setMarkerPosition(location) {
+      this.latitude = location.lat();
+      this.longitude = location.lng();
+
+      this.latitudeView.fieldModel = location.lat();
+      this.longitudeView.fieldModel = location.lng();
+    },
+    onPlaceChanged(place) {
+      this.address = place.formatted_address;
+
+      const location = place.geometry.location;
+      this.setMarkerPosition(location);
+      this.$refs.map.$mapObject.setCenter(location);
+    },
+    onDrag(e) {
+      this.setMarkerPosition(e.latLng);
+    },
+    onActionCompleted() {
+      if (this.zoomView) {
+        this.zoomView.fieldModel = this.$refs.map.$mapObject.zoom;
+      }
+    },
+    onAddressChanged(e) {
+      this.address = e.target.value;
+      if (this.address === "") {
+        this.address = null;
+        this.longitude = null;
+        this.latitude = null;
+
+        this.latitudeView.fieldModel = null;
+        this.longitudeView.fieldModel = null;
+      }
+    },
+    // Override
+    $displayValue() {
+      return "block";
+    }
+  }
+};
+</script>
+
+<style scoped>
+.map {
+  width: 100%;
+  height: 300px;
+}
+</style>

package/components/fields/radio.vue

@@ -2,11 +2,8 @@
   <v-radio
     :label="spec.label"
     :value="spec.value.presence() || vuetifyEmptyString"
-    :off-icon="data.icon || '$vuetify.icons.radioOff'"
-    :on-icon="data.icon || '$vuetify.icons.radioOn'"
     :class="$classes()"
     :disabled="spec.readOnly"
-    @change="changed"
   ></v-radio>
 </template>
 
@@ -14,51 +11,6 @@
 export default {
   props: {
     spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      groupElement: null,
-      data: { value: this.spec.value, icon: null }
-    };
-  },
-  methods: {
-    $ready() {
-      this.groupElement = this.$el.closest("[data-component=radioGroup]");
-
-      // Execute later to ensure the radioGroup has registered its event listener
-      const vm = this;
-      setTimeout(function() {
-        const ev = new Event("add");
-        ev.spec = vm.data;
-        vm.$type.ifObject(vm.groupElement, val => val.dispatchEvent(ev));
-      }, 100);
-    },
-    changed(event) {
-      // Execute later to ensure the checkbox's checked state has been updated.
-      const vm = this;
-      setTimeout(function() {
-        vm.$type.ifObject(vm.groupElement, val =>
-          val.dispatchEvent(new Event("change"))
-        );
-      }, 100);
-    }
   }
 };
 </script>
-
-<style lang="scss">
-.v-input--selection-controls {
-  .v-radio.vertical {
-    display: inline-block;
-    text-align: center;
-
-    .v-input--selection-controls__input {
-      margin-right: 0;
-    }
-
-    label {
-      display: block;
-    }
-  }
-}
-</style>

package/components/fields/radioGroup.vue

@@ -1,93 +1,42 @@
-<template>
-  <v-radio-group
-    v-model="fieldModel"
-    data-component="radioGroup"
-    :name="fieldName"
-    :disabled="spec.readOnly"
-  >
-    <div v-for="(item, index) in spec.childViews" :key="index">
-      <ui-component :spec="item" />
-    </div>
-
-    <input
-      v-if="spec.readOnly"
-      type="hidden"
-      :name="fieldName"
-      :value="fieldModel"
-    />
-  </v-radio-group>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      // value: null,
-      radios: []
-    };
-  },
-  methods: {
-    $ready() {
-      // this.value = this.spec.value
-
-      const vm = this;
-      this.$el.addEventListener(
-        "change",
-        function(e) {
-          vm.radioChanged();
-        },
-        false
-      );
-      this.$el.addEventListener(
-        "add",
-        function(e) {
-          vm.radioAdded(e.spec);
-        },
-        false
-      );
-    },
-    radioChanged() {
-      if (
-        this.$type.isString(this.spec.iconOfBeforeSelected) &&
-        this.$type.isString(this.spec.iconOfSelected) &&
-        this.$type.isString(this.spec.iconOfAfterSelected)
-      ) {
-        let icon = this.value
-          ? this.spec.iconOfBeforeSelected
-          : this.spec.iconOfAfterSelected;
-        for (const radio of this.radios) {
-          if (this.value === radio.value) {
-            radio.icon = this.spec.iconOfSelected;
-            icon = this.spec.iconOfAfterSelected;
-          } else {
-            radio.icon = icon;
-          }
-        }
-      }
-    },
-    radioAdded(spec) {
-      this.radios.push(spec);
-      this.radioChanged();
-    }
-  }
-};
-</script>
-
-<style scoped>
-/* TODO: Review this after upgrading to vuetify 2.0 */
-div.v-input--radio-group {
-  margin-top: 0;
-}
-</style>
-
-<style>
-div.v-input--radio-group .v-messages {
-  min-height: 0;
-}
-div.v-input--radio-group.v-input--selection-controls .v-input__slot {
-  margin-bottom: 0;
-}
-</style>
+<template>
+  <v-radio-group
+    v-model="fieldModel"
+    :name="fieldName"
+    :disabled="spec.readOnly"
+  >
+    <div v-for="(item, index) in spec.childViews" :key="index">
+      <ui-component :spec="item" />
+    </div>
+
+    <input
+      v-if="spec.readOnly"
+      type="hidden"
+      :name="fieldName"
+      :value="fieldModel"
+    />
+  </v-radio-group>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+/* TODO: Review this after upgrading to vuetify 2.0 */
+div.v-input--radio-group {
+  margin-top: 0;
+}
+</style>
+
+<style>
+div.v-input--radio-group .v-messages {
+  min-height: 0;
+}
+div.v-input--radio-group.v-input--selection-controls .v-input__slot {
+  margin-bottom: 0;
+}
+</style>

package/components/h2.vue

@@ -1,5 +1,13 @@
 <template>
-  <h2 :style="textStyles()" :class="$classes()">{{ spec.text }}</h2>
+  <h2
+    :style="textStyles()"
+    :class="$classes()"
+    :href="$href()"
+    :rel="$rel()"
+    @click="$onClick()"
+  >
+    {{ spec.text }}
+  </h2>
 </template>
 
 <script>

package/components/h3.vue

@@ -1,5 +1,12 @@
 <template>
-  <h3 :id="spec.id" :style="textStyles()" :class="$classes()">
+  <h3
+    :id="spec.id"
+    :style="textStyles()"
+    :class="$classes()"
+    :href="$href()"
+    :rel="$rel()"
+    @click="$onClick()"
+  >
     {{ spec.text }}
   </h3>
 </template>

package/components/h4.vue

@@ -1,5 +1,13 @@
 <template>
-  <h4 :style="textStyles()" :class="$classes()">{{ spec.text }}</h4>
+  <h4
+    :style="textStyles()"
+    :class="$classes()"
+    :href="$href()"
+    :rel="$rel()"
+    @click="$onClick()"
+  >
+    {{ spec.text }}
+  </h4>
 </template>
 
 <script>

package/components/h5.vue

@@ -1,5 +1,13 @@
 <template>
-  <h5 :style="textStyles()" :class="$classes()">{{ spec.text }}</h5>
+  <h5
+    :style="textStyles()"
+    :class="$classes()"
+    :href="$href()"
+    :rel="$rel()"
+    @click="$onClick()"
+  >
+    {{ spec.text }}
+  </h5>
 </template>
 
 <script>

package/components/h6.vue

@@ -1,5 +1,13 @@
 <template>
-  <h4 :style="textStyles()" :class="$classes()">{{ spec.text }}</h4>
+  <h4
+    :style="textStyles()"
+    :class="$classes()"
+    :href="$href()"
+    :rel="$rel()"
+    @click="$onClick()"
+  >
+    {{ spec.text }}
+  </h4>
 </template>
 
 <script>

package/components/panels/form.vue

@@ -56,6 +56,10 @@ export default {
         }
       });
 
+      this.$onEvent("forms/submit", e => {
+        this.submit();
+      });
+
       this.formElement = this.$refs.form.$el;
       this.parentStyles = this.genericStyles({ width: this.spec.width });
 

package/components/panels/responsive.vue

@@ -1,88 +1,94 @@
-<template>
-  <div
-    :class="cssClasses"
-    :style="$styles()"
-    :href="$href()"
-    @click="$onClick()"
-  >
-    <v-row no-gutters class="full-height">
-      <template v-for="(item, index) in spec.childViews">
-        <ui-component
-          v-if="isColumn(item)"
-          :key="viewKey(item, index)"
-          :spec="item"
-        />
-        <div
-          v-else
-          :key="viewKey(item, index)"
-          class="full-width"
-          :style="innerStyles"
-        >
-          <ui-component :spec="item" />
-        </div>
-      </template>
-    </v-row>
-  </div>
-</template>
-
-<script>
-import Vue from "vue";
-
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      innerStyles: {}
-    };
-  },
-  computed: {
-    cssClasses() {
-      // This panel will be nameless when used in predefined layout (e.g. page.body, list.header, etc.)
-      this.spec.view = this.spec.view || "panels/responsive";
-      return this.$classes();
-    }
-  },
-  methods: {
-    $ready() {
-      let align = null;
-      switch (this.spec.align) {
-        case "center":
-          align = "center";
-          break;
-        case "right":
-          align = "flex-end";
-          break;
-        default:
-          align = "flex-start";
-      }
-      Vue.set(this.innerStyles, "align-items", align);
-    },
-    isColumn(item) {
-      return item.view == "panels/column-v1";
-    },
-    viewKey(item, index) {
-      // Use view name for key to avoid component reuse issue
-      return `view${index}_${item.view}`;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.row {
-  margin-left: 0;
-  margin-right: 0;
-}
-.full-width {
-  width: 100%;
-  flex: 0 0 100%;
-  display: flex;
-  flex-direction: column;
-}
-/* Needed to ensure that split's sub panels have the same height */
-.full-height {
-  height: 100%;
-}
-</style>
+<template>
+  <div
+    :class="cssClasses"
+    :style="$styles()"
+    :href="$href()"
+    @click="$onClick()"
+  >
+    <v-row no-gutters class="full-height">
+      <template v-for="(item, index) in spec.childViews">
+        <ui-component
+          v-if="isColumn(item)"
+          :key="viewKey(item, index)"
+          :spec="item"
+        />
+        <div
+          v-else
+          :key="viewKey(item, index)"
+          class="full-width"
+          :style="innerStyles"
+        >
+          <ui-component :spec="item" />
+        </div>
+      </template>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+
+export default {
+  props: {
+    spec: {
+      type: Object,
+      required: true,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      innerStyles: {}
+    };
+  },
+  computed: {
+    cssClasses() {
+      // This panel will be nameless when used in predefined layout (e.g. page.body, list.header, etc.)
+      this.spec.view = this.spec.view || "panels/responsive";
+      return this.$classes();
+    }
+  },
+  methods: {
+    $ready() {
+      let align = null;
+      switch (this.spec.align) {
+        case "center":
+          align = "center";
+          break;
+        case "right":
+          align = "flex-end";
+          break;
+        default:
+          align = "flex-start";
+      }
+      Vue.set(this.innerStyles, "align-items", align);
+    },
+    isColumn(item) {
+      return item.view == "panels/column-v1";
+    },
+    viewKey(item, index) {
+      // Use view name for key to avoid component reuse issue
+      return `view${index}_${item.view}`;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.row {
+  margin-left: 0;
+  margin-right: 0;
+}
+.full-width {
+  width: 100%;
+  flex: 0 0 100%;
+  display: flex;
+  flex-direction: column;
+}
+/* Needed to ensure that split's sub panels have the same height */
+.full-height {
+  height: 100%;
+}
+</style>

package/nav/appbar.vue

@@ -19,7 +19,9 @@
       ></v-progress-circular>
       <div v-else>
         <panels-responsive v-if="navBar.logo" :spec="navBar.logo" />
-        <v-toolbar-title v-else>{{ page.title }}</v-toolbar-title>
+        <v-toolbar-title v-else-if="navBar.showTitle">{{
+          page.title
+        }}</v-toolbar-title>
       </div>
       <v-spacer></v-spacer>
 
@@ -38,6 +40,8 @@
         />
       </template>
 
+      <views-avatar v-if="navBar.imageUrl" :spec="avatarSpec(navBar)" />
+
       <v-btn
         v-if="viewSourceEnabled()"
         icon
@@ -53,10 +57,12 @@
 <script>
 import NavDrawer from "./drawer";
 import Launch from "../utils/launch";
+import ViewsAvatar from "../components/avatar";
 
 export default {
   components: {
-    "nav-drawer": NavDrawer
+    "nav-drawer": NavDrawer,
+    "views-avatar": ViewsAvatar
   },
   props: {
     page: { type: Object, required: true }
@@ -103,6 +109,13 @@ export default {
     viewSource: function() {
       const properties = { message: this.page };
       Launch.dialog(Object.assign({}, properties));
+    },
+    avatarSpec(spec) {
+      return {
+        view: "avatar-v1",
+        url: spec["imageUrl"],
+        onClick: spec["onCLick"]
+      };
     }
   }
 };
@@ -117,4 +130,7 @@ export default {
     color: inherit;
   }
 }
+.pages-navBar {
+  box-shadow: none !important;
+}
 </style>

package/nav/drawer.vue

@@ -7,7 +7,7 @@
     app
     :class="cssClasses"
     :dark="cssClasses.includes('dark')"
-    :expand-on-hover="cssClasses.includes('mini')"
+    :expand-on-hover="expandOnHover()"
     :permanent="cssClasses.includes('permanent')"
     :style="style"
     @input="updateState"
@@ -43,7 +43,7 @@ export default {
   // props: ["spec", "trigger", "permanent"],
   props: {
     spec: { type: Object, required: true },
-    trigger: { type: Object, default: null },
+    trigger: { type: [Object, Date], default: null },
     permanent: { type: Boolean, required: true }
   },
   data: function() {
@@ -63,6 +63,16 @@ export default {
       // Increase z-index so that the drawer is above the page header.
       // return { zIndex: 11 };
       return this.$styles();
+    },
+    lgAndAbove() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "xs":
+        case "sm":
+        case "md":
+          return false;
+        default:
+          return true;
+      }
     }
   },
   watch: {
@@ -81,6 +91,12 @@ export default {
     },
     updateState(state) {
       this.state = state;
+    },
+    expandOnHover() {
+      return (
+        this.cssClasses.includes("mini") ||
+        (this.cssClasses.includes("mini-lg-and-above") && this.lgAndAbove)
+      );
     }
   }
 };

package/package.json

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