glib-web 0.13.1 → 0.14.1

package/components/_badge.vue

@@ -1,10 +1,11 @@
 <template>
   <v-badge
-    v-if="spec.badgeContent"
-    :color="spec.badgeColor || 'red'"
-    :content="spec.badgeContent"
-    :value="spec.badgeContent || false"
+    :color="badge.backgroundColor || 'red'"
+    overlap
+    :value="badgeExists()"
   >
+    <template v-slot:badge>{{ badge.text }}</template>
+    <slot />
   </v-badge>
 </template>
 
@@ -12,12 +13,34 @@
 export default {
   props: {
     spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      badge: {}
+    };
+  },
+  methods: {
+    $ready() {
+      this.badge = this.spec.badge || {};
+    },
+    badgeExists() {
+      var exists = false;
+      Utils.type.ifString(this.badge.text, text => {
+        exists = text.length > 0;
+      });
+      return exists;
+    }
   }
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .v-badge {
-  margin-left: 2px;
+  // So that it behaves like other components (e.g. v-btn). Without this, nav bar buttons will
+  // not align middle.
+  display: inline-flex;
+
+  // To support responsive v-img.
+  max-width: 100%;
 }
 </style>

package/components/_button.vue

@@ -1,31 +1,27 @@
 <template>
-  <v-btn
-    :type="type"
-    :disabled="disabled || $isBusy || spec.disabled"
-    :style="styles()"
-    :class="$classes()"
-    :href="$href()"
-    :rel="$rel()"
-    :text="linkStyling || $classes().includes('text')"
-    :small="linkStyling"
-    :icon="$classes().includes('icon')"
-    :outlined="$classes().includes('outlined')"
-    :tile="$classes().includes('tile')"
-    :rounded="$classes().includes('rounded')"
-    :depressed="$classes().includes('depressed')"
-    @click="type == 'submit' ? null : $onClick()"
-  >
-    <span><common-icon :spec="spec.icon || {}"/></span>
-    <v-badge
-      :color="spec.badgeColor || 'red'"
-      :content="spec.badgeContent"
-      :value="spec.badgeContent || false"
+  <common-badge :spec="spec">
+    <v-btn
+      :type="type"
+      :disabled="disabled || $isBusy || spec.disabled"
+      :style="styles()"
+      :class="$classes()"
+      :href="$href()"
+      :rel="$rel()"
+      :text="linkStyling || $classes().includes('text')"
+      :small="linkStyling"
+      :icon="$classes().includes('icon')"
+      :outlined="$classes().includes('outlined')"
+      :tile="$classes().includes('tile')"
+      :rounded="$classes().includes('rounded')"
+      :depressed="$classes().includes('depressed')"
+      @click="type == 'submit' ? null : $onClick()"
     >
+      <span><common-icon :spec="spec.icon || {}"/></span>
       <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
         {{ spec.text }}
       </div>
-    </v-badge>
-  </v-btn>
+    </v-btn>
+  </common-badge>
 </template>
 
 <script>

package/components/_chip.vue

@@ -8,20 +8,20 @@
   >
     <template v-slot:activator="{ on }">
       <span v-on="on">
-        <v-chip
-          v-if="spec.onClick"
-          :style="genericStyles()"
-          :class="$classes()"
-          :href="$href()"
-          @click="$onClick()"
-        >
-          {{ spec.text }}
-          <common-badge :spec="spec" />
-        </v-chip>
-        <v-chip v-else :style="genericStyles()" :class="$classes()">
-          {{ spec.text }}
-          <common-badge :spec="spec" />
-        </v-chip>
+        <common-badge :spec="spec">
+          <v-chip
+            v-if="spec.onClick"
+            :style="genericStyles()"
+            :class="$classes()"
+            :href="$href()"
+            @click="$onClick()"
+          >
+            {{ spec.text }}
+          </v-chip>
+          <v-chip v-else :style="genericStyles()" :class="$classes()">
+            {{ spec.text }}
+          </v-chip>
+        </common-badge>
       </span>
     </template>
     <span>{{ tooltip.text }}</span>

package/components/_icon.vue

@@ -1,11 +1,9 @@
 <template>
-  <v-badge v-if="badge.text" :color="badge.backgroundColor || 'red'" overlap>
-    <template v-slot:badge>{{ badge.text }}</template>
-    <v-icon :style="genericStyles()" :size="size">{{ value }}</v-icon>
-  </v-badge>
-  <v-icon v-else :style="genericStyles()" :size="size" :color="color">{{
-    value
-  }}</v-icon>
+  <common-badge :spec="spec">
+    <v-icon :style="genericStyles()" :size="size" :color="color">{{
+      value
+    }}</v-icon>
+  </common-badge>
 </template>
 
 <script>

package/components/avatar.vue

@@ -7,14 +7,17 @@
     :left="tooltipPositionMatches('left')"
   >
     <template v-slot:activator="{ on }">
-      <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>
+      <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>
+      </common-badge>
     </template>
     <span>{{ tooltip.text }}</span>
   </v-tooltip>
@@ -30,13 +33,12 @@ export default {
   },
   data() {
     return {
-      styles: {},
-      tooltip: {}
+      styles: {}
     };
   },
   methods: {
     $ready() {
-      this.tooltip = this.spec.tooltip || { disabled: true };
+      this.$initAccessories();
     }
   }
 };

package/components/fields/text.vue

@@ -23,6 +23,7 @@
       :autofocus="spec.autoFocus || false"
       validate-on-blur
       @click:append="onRightIconClick"
+      @input="onChange"
     />
     <input
       v-if="spec.readOnly"
@@ -123,6 +124,14 @@ export default {
     },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
+    },
+    // TODO: Consider using debounce to wait until user has finished typing.
+    onChange() {
+      Utils.type.ifObject(this.spec.onChange, onChange => {
+        this.$nextTick(() => {
+          GLib.action.execute(onChange, this);
+        });
+      });
     }
   }
 };

package/components/image.vue

@@ -7,15 +7,17 @@
     :left="tooltipPositionMatches('left')"
   >
     <template v-slot:activator="{ on }">
-      <!-- TODO: Add support for href and :rel="$rel()" -->
-      <v-img
-        :src="spec.url || spec.base64Data"
-        :style="styles"
-        v-on="on"
-        @click="$onClick()"
-      >
-        <!-- <v-progress-circular v-if="$isBusy" indeterminate /> -->
-      </v-img>
+      <common-badge :spec="spec">
+        <!-- TODO: Add support for href and :rel="$rel()" -->
+        <v-img
+          :src="spec.url || spec.base64Data"
+          :style="styles"
+          v-on="on"
+          @click="$onClick()"
+        >
+          <!-- <v-progress-circular v-if="$isBusy" indeterminate /> -->
+        </v-img>
+      </common-badge>
     </template>
     <span>{{ tooltip.text }}</span>
   </v-tooltip>
@@ -32,13 +34,12 @@ export default {
   },
   data() {
     return {
-      styles: {},
-      tooltip: {}
+      styles: {}
     };
   },
   methods: {
     $ready() {
-      this.tooltip = this.spec.tooltip || { disabled: true };
+      this.$initAccessories();
 
       const styles = this.genericStyles(Object.assign({}, this.spec));
       this.styles = styles;

package/components/mixins/tooltip.js

@@ -1,5 +1,14 @@
+// TODO: Make tooltip reusable component. See _badge.vue
 export default {
+  data() {
+    return {
+      tooltip: {}
+    };
+  },
   methods: {
+    $initAccessories() {
+      this.tooltip = this.spec.tooltip || { disabled: true };
+    },
     tooltipPositionMatches(position) {
       if (this.spec.tooltip && this.spec.tooltip.position) {
         return position == this.spec.tooltip.position;

package/components/panels/form.vue

@@ -1,8 +1,19 @@
 <template>
-  <v-form ref="form" :style="parentStyles" :action="url" :method="spec.method" :data-local="spec.local"
-    @submit="onSubmit">
+  <v-form
+    ref="form"
+    :style="parentStyles"
+    :action="url"
+    :method="spec.method"
+    :data-local="spec.local"
+    @submit="onSubmit"
+  >
     <template v-for="(value, key, index) in params">
-      <input :key="`hidden_${index}`" type="hidden" :name="key" :value="value" />
+      <input
+        :key="`hidden_${index}`"
+        type="hidden"
+        :name="key"
+        :value="value"
+      />
     </template>
 
     <panels-responsive :spec="modifiedSpec" />
@@ -25,19 +36,24 @@ export default {
     modifiedSpec: {}
   }),
   watch: {
-    $isBusy: function (val, oldVal) {
+    $isBusy: function(val, oldVal) {
       for (const button of this.submitButtons) {
         button._isBusy = val;
       }
     }
   },
+  // Event registrations should not be in $ready() because they are not idempotent. $ready() might get executed
+  // On the other hand,
+  // logics that rely on `spec` should be in $ready() because they need to be up-to-date and they are
+  // idempotent.
+  // TODO: Check why $ready() gets called if URL hasn't changed.
   mounted() {
     this.$onEvent("forms/directSubmit", e => {
       this.directSubmit();
     });
   },
   methods: {
-    $ready: function () {
+    $ready: function() {
       this.$onEvent("forms/addSubmit", e => {
         this.submitButtons.push(e.data);
       });

package/components/tabBar.vue

@@ -15,14 +15,10 @@
         :href="$href(item)"
         @click="$onClick($event, item)"
       >
-        <v-badge
-          :color="item.badgeColor || 'red'"
-          :content="item.badgeContent"
-          :value="item.badgeContent || false"
-        >
+        <common-badge :spec="item">
           <common-icon v-if="item.icon" :spec="item.icon" />
           <span :style="{ color: spec.color }">{{ item.text }}</span>
-        </v-badge>
+        </common-badge>
       </v-tab>
     </v-tabs>
     <v-divider />
@@ -61,8 +57,8 @@ export default {
 .no-divider .v-divider {
   display: none;
 }
-.v-badge {
+/* .v-badge {
   top: 50%;
   transform: translate(0, -50%);
-}
+} */
 </style>

package/nav/drawerButton.vue

@@ -6,8 +6,9 @@
 
     <v-list-item-content>
       <v-list-item-title>
-        {{ spec.text }}
-        <common-badge :spec="spec" />
+        <common-badge :spec="spec">
+          {{ spec.text }}
+        </common-badge>
       </v-list-item-title>
     </v-list-item-content>
   </v-list-item>

package/package.json

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