glib-web 3.0.4 → 3.0.6

package/actions/components/update.js

@@ -7,7 +7,6 @@ export default class {
     const target = GLib.component.findById(spec.targetId);
     if (target) {
       Object.assign(target.spec, spec.views[0]);
-      target.$recursiveUpdate();
     }
   }
 }

package/components/_button.vue

@@ -1,58 +1,21 @@
 <template>
-  <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
-         located in a list row that has href. -->
-  <v-btn :type="type" :disabled="disabled || $isBusy || spec.disabled" :style="styles()" :class="classes()"
-    :href="$href()" :rel="$rel()" :variant="variant" :rounded="$classes().includes('rounded') || null" @click.prevent="
-      type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
-      ">
-    <span v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span>
-    <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
-      {{ spec.text }}
-    </div>
-  </v-btn>
+  <common-badge v-if="spec.badge" :spec="spec">
+    <internal-button :spec="spec" :disabled="$isBusy" />
+  </common-badge>
+  <internal-button v-else :spec="spec" :disable="$isBusy" />
 </template>
 
 <script>
-import { variants } from '../utils/constant'
+import InternalButton from "./_internal_button.vue";
 
 export default {
-  props: {
-    spec: { type: Object, required: true },
-    type: { type: String, default: "button" },
-    disabled: { type: Boolean },
-    hideTextOnXs: { type: Boolean },
-    eventHandlers: { type: Object, default: null }
+  components: {
+    "internal-button": InternalButton,
   },
-  data: function () {
-    return {
-      linkStyling: false,
-      variant: 'elevated'
-    };
+  props: {
+    spec: { type: Object, required: true }
   },
   methods: {
-    $ready() {
-      this.$type.ifArray(this.spec.styleClasses, val => {
-        this.linkStyling = val.includes("link");
-      });
-
-      const vm = this
-      variants.forEach((value) => {
-        if (vm.$classes().includes(value)) {
-          vm.variant = value
-        }
-      })
-    },
-    styles() {
-      const styles = this.$styles();
-      if (this.linkStyling) {
-        styles["color"] = styles["color"] || "#1976d2";
-      }
-      return styles;
-    },
-    classes() {
-      const classes = this.$classes();
-      return classes;
-    },
     $registryEnabled() {
       return false;
     }
@@ -60,67 +23,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.v-btn {
-  &.link {
-    .v-icon {
-      font-size: 16px;
-    }
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-a,
-button {
-  min-width: 0;
-  margin: 0;
-}
-
-.v-btn {
-  &.link {
-    text-transform: none !important;
-    /* text-decoration: underline; */
-    padding-left: 0;
-    padding-right: 0;
-    /* `height: inherit/auto/initial` will stretch to max height when used inside a horizontal panel,
-      presumably because it is affected by the panel's flex arrangement. */
-    height: 16px;
-    font-size: 16px;
-    line-height: 1;
-    min-width: auto;
-    box-shadow: none !important;
-  }
-}
-
-.v-btn--rounded {
-  // Override .v-application.rounded
-  border-radius: 28px !important;
-}
-
-.v-banner__wrapper .v-btn:not(.v-btn--round).v-size--default {
-  min-width: 0;
-  padding: 0;
-}
-
-.v-banner__wrapper .v-btn.v-size--default {
-  font-size: 12px;
-}
-
-.breadcrumbs .v-btn.link {
-  display: inline-table;
-  justify-content: left;
-  white-space: normal;
-}
-
-@media only screen and (min-width: 600px) {
-  .v-banner__wrapper.v-btn.v-size--default {
-    font-size: 0.875rem;
-  }
-
-  .v-banner__wrapper.v-btn:not(.v-btn--round).v-size--default {
-    min-width: 64px;
-    padding: 0 16px;
-  }
-}
-</style>
+<style scoped></style>

package/components/_chip.vue

@@ -8,6 +8,7 @@
         :class="$classes()"
         :href="$href()"
         @click="$onClick()"
+        :density="density"
         :variant="variant"
       >
         {{ spec.text }}
@@ -17,6 +18,7 @@
         :style="genericStyles()"
         :color="color"
         :class="$classes()"
+        :density="density"
         :variant="variant"
       >
         {{ spec.text }}
@@ -26,32 +28,30 @@
 </template>
 
 <script>
-import { colors, variants } from "../utils/constant";
+import { determineColor, determineDensity, determineVariant } from "../utils/constant";
 
 export default {
   data: function () {
     return {
-      color: "",
-      variant: "tonal",
+      // color: "",
+      // variant: "tonal",
     };
   },
   props: {
     spec: { type: Object, required: true },
   },
-  // data: function() {
-  //   return {
-  //     tooltip: {}
-  //   };
-  // },
-  methods: {
-    $ready() {
-      colors.forEach((value) => {
-        if (this.$classes().includes(value)) this.color = value;
-      });
-      variants.forEach((value) => {
-        if (this.$classes().includes(value)) this.variant = value;
-      });
+  computed: {
+    color() {
+      return determineColor(this.spec.styleClasses)
+    },
+    density() {
+      return determineDensity(this.spec.styleClasses)
     },
+    variant() {
+      return determineVariant(this.spec.styleClasses, 'tonal')
+    }
+  },
+  methods: {
     $registryEnabled() {
       return false;
     },

package/components/_icon.vue

@@ -1,12 +1,12 @@
 <template>
-  <!-- <common-badge :spec="spec"> -->
   <v-icon :style="genericStyles()" :size="size" :color="color">{{
     value
   }}</v-icon>
-  <!-- </common-badge> -->
 </template>
 
 <script>
+import { determineColor } from '../utils/constant'
+
 export default {
   props: {
     spec: { type: Object, required: true },
@@ -14,8 +14,8 @@ export default {
   },
   data() {
     return {
-      badge: {},
-      color: null,
+      // badge: {},
+      // color: null,
       name: null,
       size: null
     };
@@ -23,24 +23,44 @@ export default {
   computed: {
     value() {
       return this.isBusy || this.$isBusy ? "autorenew" : this.name;
+    },
+    color() {
+      // return this.spec.color
+      return this.spec.color || determineColor(this.spec.styleClasses)
+    }
+  },
+  watch: {
+    spec: {
+      handler(val) {
+        Utils.type.ifObject(val.fa, fa => {
+          this.name = `fab fa-${fa.name}`;
+          this.size = fa.size;
+        });
+
+        Utils.type.ifObject(val.material, material => {
+          this.name = material.name;
+          this.size = material.size;
+        });
+      },
+      immediate: true
     }
   },
   methods: {
-    $ready() {
-      this.badge = this.spec.badge || {};
-      this.color =
-        this.spec.color || this.$builtinColor(this.spec.styleClasses);
+    // $ready() {
+    //   // this.badge = this.spec.badge || {};
+    //   // this.color =
+    //   //   this.spec.color || this.$builtinColor(this.spec.styleClasses);
 
-      Utils.type.ifObject(this.spec.fa, fa => {
-        this.name = `fab fa-${fa.name}`;
-        this.size = fa.size;
-      });
+    //   Utils.type.ifObject(this.spec.fa, fa => {
+    //     this.name = `fab fa-${fa.name}`;
+    //     this.size = fa.size;
+    //   });
 
-      Utils.type.ifObject(this.spec.material, material => {
-        this.name = material.name;
-        this.size = material.size;
-      });
-    }
+    //   Utils.type.ifObject(this.spec.material, material => {
+    //     this.name = material.name;
+    //     this.size = material.size;
+    //   });
+    // }
   }
 };
 </script>

package/components/_internal_button.vue

@@ -0,0 +1,143 @@
+<template>
+  <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
+         located in a list row that has href. -->
+  <v-btn :type="type" :disabled="disabled || $isBusy || spec.disabled" :style="styles()" :class="$classes()"
+    :href="$href()" :rel="$rel()" :variant="variant"
+    :rounded="$classes().includes('rounded') || null"
+    :density="density"
+    :size="size"
+    :icon="$classes().includes('icon') ? $vuetify : null"
+    @click.prevent="
+      type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
+    ">
+    <span v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span>
+    <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
+      {{ spec.text }}
+    </div>
+  </v-btn>
+</template>
+
+<script>
+import { determineDensity, determineVariant, determineSize } from '../utils/constant'
+
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    type: { type: String, default: "button" },
+    disabled: { type: Boolean },
+    hideTextOnXs: { type: Boolean },
+    eventHandlers: { type: Object, default: null }
+  },
+  data: function () {
+    return {
+      // linkStyling: false,
+      // variant: 'elevated'
+    };
+  },
+  computed: {
+    density() {
+      return determineDensity(this.spec.styleClasses)
+    },
+    size() {
+      return determineSize(this.spec.styleClasses)
+    },
+    variant() {
+      return determineVariant(this.spec.styleClasses, 'elevated')
+    }
+  },
+  methods: {
+    // $ready() {
+    //   this.$type.ifArray(this.spec.styleClasses, val => {
+    //     this.linkStyling = val.includes("link");
+    //   });
+
+    //   // const vm = this
+    //   // variants.forEach((value) => {
+    //   //   if (vm.$classes().includes(value)) {
+    //   //     vm.variant = value
+    //   //   }
+    //   // })
+    // },
+    styles() {
+      const styles = this.$styles();
+      // if (this.linkStyling) {
+      if (this.$classes().includes('link')) {
+        styles["color"] = styles["color"] || "#1976d2";
+      }
+      return styles;
+    },
+    // classes() {
+    //   const classes = this.$classes();
+    //   return classes;
+    // },
+    $registryEnabled() {
+      return false;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.v-btn {
+  &.link {
+    .v-icon {
+      font-size: 16px;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+a,
+button {
+  min-width: 0;
+  margin: 0;
+}
+
+.v-btn {
+  &.link {
+    text-transform: none !important;
+    /* text-decoration: underline; */
+    padding-left: 0;
+    padding-right: 0;
+    /* `height: inherit/auto/initial` will stretch to max height when used inside a horizontal panel,
+      presumably because it is affected by the panel's flex arrangement. */
+    height: 16px;
+    font-size: 16px;
+    line-height: 1;
+    min-width: auto;
+    box-shadow: none !important;
+  }
+}
+
+.v-btn--rounded {
+  // Override .v-application.rounded
+  border-radius: 28px !important;
+}
+
+.v-banner__wrapper .v-btn:not(.v-btn--round).v-size--default {
+  min-width: 0;
+  padding: 0;
+}
+
+.v-banner__wrapper .v-btn.v-size--default {
+  font-size: 12px;
+}
+
+.breadcrumbs .v-btn.link {
+  display: inline-table;
+  justify-content: left;
+  white-space: normal;
+}
+
+@media only screen and (min-width: 600px) {
+  .v-banner__wrapper.v-btn.v-size--default {
+    font-size: 0.875rem;
+  }
+
+  .v-banner__wrapper.v-btn:not(.v-btn--round).v-size--default {
+    min-width: 64px;
+    padding: 0 16px;
+  }
+}
+</style>

package/components/_responsive.vue

@@ -1,24 +1,14 @@
 <template>
-  <component
-    :is="componentName"
-    :class="cssClasses"
-    :style="$styles()"
-    :href="$href()"
-    @click="$onClick()"
-  >
-    <v-row no-gutters class="full-height">
-      <template v-for="(item, index) in spec.childViews">
-        <glib-component
-          v-if="isColumn(item)"
-          :key="viewKey(item, index)"
-          :spec="item"
-        />
-        <div
-          v-else
-          :key="'else-' + viewKey(item, index)"
-          class="full-width"
-          :style="innerStyles"
-        >
+  <component :is="componentName" :class="cssClasses" :style="$styles()" :href="$href()" @click="$onClick()">
+    <!--
+      Only enable full-height when it's absolutely necessary because there seems to be an issue on some
+      browsers where full-height makes field typing laggy.
+    -->
+    <v-row no-gutters :class="fullHeight ? 'full-height' : null">
+    <!-- <v-row no-gutters> -->
+      <template v-for="(item, index) in spec.childViews" :key="viewKey(item, index)">
+        <glib-component v-if="isColumn(item)" :spec="item" />
+        <div v-else class="full-width" :style="innerStyles">
           <glib-component :spec="item" />
         </div>
       </template>
@@ -31,6 +21,7 @@ export default {
   props: {
     spec: { type: Object, required: true },
     eventHandlers: { type: Object, default: null },
+    fullHeight: { type: Boolean, default: false }
   },
   data() {
     return {
@@ -66,7 +57,8 @@ export default {
     },
     viewKey(item, index) {
       // Use view name for key to avoid component reuse issue
-      return `view${index}_${item.view}`;
+      return `view${index}_${item.view}_value${item.value}`
+      // return item
     },
     $registryEnabled() {
       return false;

package/components/avatar.vue

@@ -1,15 +1,12 @@
 <template>
-  <!-- <common-tooltip :spec="spec"> -->
-  <!-- <template v-slot:activator="{ on }"> -->
-  <!-- <common-badge :spec="spec"> -->
-  <v-avatar :size="spec.size">
-    <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
-    <img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()" />
-  </v-avatar>
-  <!-- </common-badge> -->
-  <!-- </template> -->
-  <!-- </common-tooltip>
-   -->
+  <common-badge :spec="spec">
+    <v-avatar :size="spec.size">
+      <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
+      <!-- <img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()" /> -->
+
+      <v-img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()"></v-img>
+    </v-avatar>
+  </common-badge>
 </template>
 
 <script>

package/components/banners/alert.vue

@@ -1,13 +1,18 @@
 <template>
-  <v-alert :style="genericStyles()" :class="$classes()" :value="true" :color="color"
+  <v-alert :style="$styles()" :class="$classes()" :value="true" :color="color"
     :outlined="!$classes().includes('frameless') || null">
     <!-- <span class="padder" v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span> -->
     <!-- <common-icon :spec="spec.icon || {}" /> -->
+    <h3 v-if="spec.title">
+      {{ spec.title }}
+    </h3>
     <common-message :spec="spec" />
   </v-alert>
 </template>
 
 <script>
+import { determineColor } from '../../utils/constant'
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -20,18 +25,20 @@ export default {
   },
   methods: {
     $ready() {
-      const vm = this;
+      this.color = determineColor(this.spec.styleClasses)
+
+      // const vm = this;
 
-      this.$type.ifArray(this.spec.styleClasses, val => {
-        ["success", "info", "warning", "error"].forEach(color => {
-          if (val.remove(color)) {
-            vm.color = color;
-          }
-          // if (val.includes(color)) {
-          //   vm.color = color
-          // }
-        });
-      });
+      // this.$type.ifArray(this.spec.styleClasses, val => {
+      //   ["success", "info", "warning", "error"].forEach(color => {
+      //     if (val.remove(color)) {
+      //       vm.color = color;
+      //     }
+      //     // if (val.includes(color)) {
+      //     //   vm.color = color
+      //     // }
+      //   });
+      // });
     }
   }
 };

package/components/banners/select.vue

@@ -1,21 +1,30 @@
 <template>
-  <div :style="genericStyles()" :class="$classes()" :color="spec.color || color">
-    <v-banner>
+  <!-- <div :style="genericStyles()" :class="$classes()" :color="spec.color || color"> -->
+  <v-banner :style="$styles()" :class="$classes()">
+    <template v-if="spec.icon" v-slot:prepend>
+      <common-icon slot="icon" :spec="spec.icon" />
+    </template>
 
-      <template v-if="spec.icon" v-slot:prepend>
-        <common-icon slot="icon" :spec="spec.icon" />
-      </template>
+    <template v-slot:text>
+      <h3 v-if="spec.title">{{ spec.title }}</h3>
+      {{ spec.message }}
+    </template>
 
-      <v-banner-text>{{ spec.message }}</v-banner-text>
+    <template v-slot:actions>
+      <template v-for="(item, index) in spec.buttons">
+        <common-dropdownMenu v-if="item.childButtons" :key="'left-' + index" :spec="item" :disabled="$isBusy" />
+        <common-button v-else :key="index" :spec="buttonSpec(item)" :disabled="$isBusy" :hide-text-on-xs="true" />
+      </template>
+    </template>
 
-      <v-banner-actions>
+      <!-- <v-banner-actions>
         <template v-for="(item, index) in spec.buttons">
           <common-dropdownMenu v-if="item.childButtons" :key="'left-' + index" :spec="item" :disabled="$isBusy" />
           <common-button v-else :key="index" :spec="buttonSpec(item)" :disabled="$isBusy" :hide-text-on-xs="true" />
         </template>
-      </v-banner-actions>
-    </v-banner>
-  </div>
+      </v-banner-actions> -->
+  </v-banner>
+  <!-- </div> -->
 </template>
 
 <script>
@@ -43,8 +52,8 @@ export default {
     },
     buttonSpec(item) {
       return Object.assign({}, item, {
-        view: "button-v1",
-        styleClasses: ["text"]
+        view: "button",
+        styleClasses: ["text", "small"]
       });
     }
   }
@@ -52,6 +61,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// TODO: Avoid hardcoding colors. Can we use variables from Vuetify?
+.warning {
+  background-color: #fb8c00;
+}
+
 .frameless {
   padding: 0;
 }
@@ -67,3 +81,10 @@ export default {
   }
 }
 </style>
+
+<style lang="scss">
+.v-banner--density-default:not(.v-banner--one-line) .v-banner-actions {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</style>

package/components/button.vue

@@ -1,8 +1,7 @@
 <template>
-  <common-badge v-if="spec.badge" :spec="spec">
-    <common-button :spec="spec" :disabled="$isBusy" />
-  </common-badge>
-  <common-button v-else :spec="spec" :disable="$isBusy" />
+  <common-button :spec="spec"
+    @[menter]="handleMouseEvent(spec.onMouseEnter)"
+    @[mleave]="handleMouseEvent(spec.onMouseLeave)" />
 </template>
 
 <script>
@@ -10,10 +9,22 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
+  // TODO: Reuse
+  computed: {
+    menter() {
+      return this.spec.onMouseEnter ? 'mouseenter' : null
+    },
+    mleave() {
+      return this.spec.onMouseLeave ? 'mouseleave' : null
+    }
+  },
   methods: {
+    handleMouseEvent(spec) {
+      GLib.action.execute(spec, this)
+    },
     action_merge(mergedSpec) {
       Object.assign(this.spec, mergedSpec);
-      this.$refs.tooltip.updateData();
+      // this.$refs.tooltip.updateData();
     }
   }
 };