glib-web 0.15.3 → 0.16.0

package/components/avatar.vue

@@ -10,7 +10,11 @@
       <common-badge :spec="spec">
         <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()" />
+          <img
+            :style="$styles()"
+            :src="spec.url || spec.base64Data"
+            @click="$onClick()"
+          />
         </v-avatar>
       </common-badge>
     </template>

package/components/fields/text.vue

@@ -129,7 +129,14 @@ export default {
     onChange() {
       Utils.type.ifObject(this.spec.onChange, onChange => {
         this.$nextTick(() => {
-          GLib.action.execute(onChange, this);
+          const params = {
+            [this.spec.paramNameForFormData || "formData"]: {
+              [this.fieldName]: this.fieldModel
+            }
+          };
+
+          const data = Object.assign({}, onChange, params);
+          GLib.action.execute(data, this);
         });
       });
     }

package/components/mixins/styles.js

@@ -40,6 +40,7 @@ export default {
       if (val === this.vuetifyEmptyString) {
         val = "";
       }
+
       // Make the field property observable for dynamic showing/hiding
       Vue.set(
         this.$data._fieldModels,
@@ -96,26 +97,6 @@ export default {
         val => (styles["text-align"] = val)
       );
 
-      // const padding = properties.padding;
-      // if (Utils.type.isObject(padding)) {
-      //   Utils.type.ifNumber(
-      //     padding.top,
-      //     top => (styles["padding-top"] = `${top}px`)
-      //   );
-      //   Utils.type.ifNumber(
-      //     padding.bottom,
-      //     bottom => (styles["padding-bottom"] = `${bottom}px`)
-      //   );
-      //   Utils.type.ifNumber(
-      //     padding.left,
-      //     left => (styles["padding-left"] = `${left}px`)
-      //   );
-      //   Utils.type.ifNumber(
-      //     padding.right,
-      //     right => (styles["padding-right"] = `${right}px`)
-      //   );
-      // }
-
       Utils.type.ifObject(properties.padding, padding => {
         Utils.type.ifNumber(
           padding.top,

package/components/panels/list.vue

@@ -264,4 +264,9 @@ export default {
   opacity: 0.5;
   background: #dddddd;
 }
+
+.selected {
+  // TODO: Use lighter primary color: https://stackoverflow.com/questions/48280990/using-custom-theming-in-vuetify-and-pass-color-variables-to-components
+  background-color: lightblue;
+}
 </style>

package/index.js

@@ -182,13 +182,6 @@ document.addEventListener("DOMContentLoaded", () => {
     data: {
       vueApp: window.vueApp
     },
-    // data: {
-    //   vuetify: vuetify,
-    //   page: window.__page,
-    //   indicator: false,
-    //   isStale: false,
-    //   webSocket: { channels: {}, header: {}, listWindow: null }
-    // },
     render: function(createElement) {
       return createElement(App, { props: { page: this.$data.vueApp.page } });
     }

package/nav/drawer.vue

@@ -10,14 +10,14 @@
     :permanent="cssClasses.includes('permanent')"
     :style="style"
     :expand-on-hover="expandOnHover()"
-    :mini-variant.sync="mini"
+    :mini-variant.sync="shrunk"
     @input="updateState"
   >
-    <template v-if="mini != null" v-slot:prepend>
+    <template v-if="mini" v-slot:prepend>
       <v-list-item>
         <v-list-item-icon>
-          <v-icon v-if="!mini">mdi-chevron-left</v-icon>
-          <v-icon v-if="mini">mdi-chevron-right</v-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>
@@ -39,7 +39,7 @@
       <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="!mini" :spec="spec.footer" />
+        <panels-responsive v-if="!shrunk" :spec="spec.footer" />
       </v-list-item>
     </template>
   </v-navigation-drawer>
@@ -135,7 +135,8 @@ export default {
       // 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
+      mini: true,
+      shrunk: true
     };
   },
   computed: {
@@ -167,7 +168,7 @@ export default {
   },
   methods: {
     $ready() {
-      this.mini = !this.cssClasses.includes("maxi");
+      this.shrunk = this.mini = this.cssClasses.includes("mini");
       this.updateNavigationStyle(window.location);
 
       // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
@@ -181,10 +182,7 @@ export default {
       this.state = state;
     },
     expandOnHover() {
-      return (
-        this.cssClasses.includes("mini") ||
-        (this.cssClasses.includes("mini-lg-and-above") && this.lgAndAbove)
-      );
+      return this.mini;
     },
     updateNavigationStyle(urlObject) {
       const navMap = navigationMap(this.$el, urlObject.pathname);
@@ -199,7 +197,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .nav-item {
   position: relative;
 }
@@ -215,3 +213,14 @@ export default {
   background-color: white;
 }
 </style>
+
+<style lang="scss">
+// Move the padding to the badge to ensure that the item is middle-aligned.
+.v-list--dense .nav-item .v-list-item .v-list-item__content {
+  padding: 0;
+
+  .v-badge {
+    margin: 8px 0;
+  }
+}
+</style>

package/package.json

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