glib-web 2.3.1 → 2.4.0

package/action.js

@@ -146,7 +146,7 @@ export default class Action {
 
   static executeLocal(name, spec, component) {
     const methodName = name.replace(/^component\//, "");
-    const componentName = Utils.app.vueName(component);
+    const componentName = GLib.component.vueName(component);
     console.log(
       `Executing component action on ${componentName}: ${methodName}`
     );

package/components/_badge.vue

@@ -36,6 +36,9 @@ export default {
         return { width: "100%" };
       }
       return {};
+    },
+    $registryEnabled() {
+      return false;
     }
   }
 };

package/components/_button.vue

@@ -1,5 +1,7 @@
 <template>
   <common-badge :spec="spec">
+    <!-- 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"
@@ -14,7 +16,7 @@
       :tile="$classes().includes('tile')"
       :rounded="$classes().includes('rounded')"
       :depressed="$classes().includes('depressed')"
-      @click="type == 'submit' ? null : $onClick()"
+      @click.prevent="type == 'submit' ? null : $onClick()"
       v-on="eventHandlers"
     >
       <span><common-icon :spec="spec.icon || {}"/></span>
@@ -51,11 +53,24 @@ export default {
         styles["color"] = styles["color"] || "#1976d2";
       }
       return styles;
+    },
+    $registryEnabled() {
+      return false;
     }
   }
 };
 </script>
 
+<style lang="scss">
+.v-btn {
+  &.link {
+    .v-icon {
+      font-size: 16px;
+    }
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 a,
 button {

package/components/_chip.vue

@@ -21,20 +21,21 @@
 </template>
 
 <script>
-// import TooltipMixins from "./mixins/tooltip";
 export default {
-  // mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
   },
-  data: function() {
-    return {
-      tooltip: {}
-    };
-  },
+  // data: function() {
+  //   return {
+  //     tooltip: {}
+  //   };
+  // },
   methods: {
-    $ready() {
-      this.tooltip = this.spec.tooltip || {};
+    // $ready() {
+    //   this.tooltip = this.spec.tooltip || {};
+    // },
+    $registryEnabled() {
+      return false;
     }
   }
 };

package/components/_responsive.vue

@@ -43,14 +43,7 @@ export default {
   computed: {
     cssClasses() {
       // Provide a default name so the panel will not be nameless when used in predefined layouts (e.g. page.body, list.header, etc.)
-      return this.$classes(
-        Object.assign(
-          {
-            view: "panels/responsive"
-          },
-          this.spec
-        )
-      );
+      return this.$classes(this.spec, "panels/responsive");
     },
     componentName() {
       return this.spec.onClick ? "a" : "div";

package/components/_tooltip.vue

@@ -1,37 +1,63 @@
 <template>
+  <v-menu v-if="spec.childButtons" left bottom>
+    <template v-slot:activator="{ on: onMenu }">
+      <v-tooltip
+        :disabled="tooltip.disabled"
+        :top="tooltipPositionMatches('top')"
+        :right="tooltipPositionMatches('right')"
+        :bottom="tooltipPositionMatches('bottom')"
+        :left="tooltipPositionMatches('left')"
+      >
+        <template v-slot:activator="{ on: onTooltip }">
+          <slot name="activator" :on="{ ...onMenu, ...onTooltip }" />
+        </template>
+        <span> {{ tooltip.text }} </span>
+      </v-tooltip>
+    </template>
+
+    <v-list>
+      <v-list-item
+        v-for="(childItem, childIndex) in spec.childButtons"
+        :key="childIndex"
+      >
+        <common-button
+          :spec="buttonSpec(childItem)"
+          :disabled="childItem.disabled || $isBusy"
+        />
+      </v-list-item>
+    </v-list>
+  </v-menu>
   <v-tooltip
+    v-else
     :disabled="tooltip.disabled"
     :top="tooltipPositionMatches('top')"
     :right="tooltipPositionMatches('right')"
     :bottom="tooltipPositionMatches('bottom')"
     :left="tooltipPositionMatches('left')"
   >
-    <template v-slot:activator="{ on }">
-      <!-- Pass the slot props through to the caller using the same slot name (i.e. `activator`) -->
-      <slot name="activator" :on="on" />
+    <template v-slot:activator="{ on: onTooltip }">
+      <slot name="activator" :on="{ ...onTooltip }" />
     </template>
     <span> {{ tooltip.text }} </span>
   </v-tooltip>
 </template>
 
 <script>
-// import tooltipMixin from "./mixins/tooltip";
-
 export default {
-  // mixins: [tooltipMixin],
   props: {
     spec: { type: Object, required: true }
   },
   data() {
     return {
-      tooltip: {},
-      childSpec: Object.assign({}, this.spec, { id: undefined })
+      tooltip: {}
+      // childSpec: Object.assign({}, this.spec, { id: undefined })
     };
   },
   methods: {
     $ready() {
-      this.tooltip = this.spec.tooltip || { disabled: true };
-      this.childSpec = Object.assign({}, this.spec, { id: undefined });
+      this.updateData();
+      // this.tooltip = this.spec.tooltip || { disabled: true };
+      // this.childSpec = Object.assign({}, this.spec, { id: undefined });
     },
     // $initAccessories() {
     //   this.tooltip = this.spec.tooltip || { disabled: true };
@@ -42,6 +68,18 @@ export default {
       } else {
         return position == "bottom";
       }
+    },
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        styleClasses: ["text"]
+      });
+    },
+    $registryEnabled() {
+      return false;
+    },
+    updateData() {
+      this.tooltip = this.spec.tooltip || { disabled: true };
     }
   }
 };

package/components/button.vue

@@ -1,5 +1,5 @@
 <template>
-  <common-tooltip :spec="spec">
+  <common-tooltip ref="tooltip" :spec="spec">
     <template v-slot:activator="{ on }">
       <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" />
     </template>
@@ -10,6 +10,12 @@
 export default {
   props: {
     spec: { type: Object, required: true }
+  },
+  methods: {
+    action_merge(mergedSpec) {
+      Object.assign(this.spec, mergedSpec);
+      this.$refs.tooltip.updateData();
+    }
   }
 };
 </script>

package/components/chip.vue

@@ -1,11 +1,17 @@
 <template>
-  <common-chip :spec="spec" />
+  <common-chip ref="delegate" :spec="spec" />
 </template>
 
 <script>
 export default {
   props: {
     spec: { type: Object, required: true }
+  },
+  methods: {
+    action_merge(mergedSpec) {
+      Object.assign(this.spec, mergedSpec);
+      // this.$refs.delegate.updateData();
+    }
   }
 };
 </script>

package/components/component.vue

@@ -232,6 +232,9 @@ export default {
           this.name = name;
         }
       }
+    },
+    $registryEnabled() {
+      return false;
     }
   }
 };

package/components/fields/_patternText.vue

@@ -16,7 +16,9 @@
       :rules="$validation()"
       :outlined="$classes().includes('outlined')"
       :style="$styles()"
+      :dense="$classes().includes('dense')"
       clearable
+      @input="onChange"
     />
   </div>
 </template>
@@ -58,6 +60,15 @@ export default {
     },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
+    },
+    onChange() {
+      this.$executeOnChange();
+    },
+    $registryEnabled() {
+      return false;
+    },
+    updateData() {
+      this.fieldModel = this.spec.value;
     }
   }
 };

package/components/fields/_select.vue

@@ -15,6 +15,7 @@
       validate-on-blur
       persistent-hint
       :class="$classes()"
+      :dense="$classes().includes('dense')"
       :outlined="$classes().includes('outlined')"
       :append-icon="append.icon"
       @change="onChange"
@@ -60,7 +61,7 @@ export default {
   },
   methods: {
     $ready() {
-      this.updateData();
+      this.updateData(false);
     },
     normalizedOptions() {
       return this.spec.options.map(i => {
@@ -78,17 +79,18 @@ export default {
       return this.$classes().concat("g-text-field--hintless");
     },
     onChange() {
-      Utils.type.ifObject(this.spec.onChange, onChange => {
-        this.$nextTick(() => {
-          GLib.action.execute(onChange, this);
-        });
-      });
+      this.$executeOnChange();
     },
-    updateData() {
+    updateData(reinitValue) {
       this.options = this.normalizedOptions();
       this.append = this.spec.append || {};
       this.rules = this.$validation();
-      if (this.defaultValue) {
+
+      if (reinitValue) {
+        this.fieldModel = this.spec.value || this.defaultValue;
+      } else if (this.defaultValue) {
+        // Don't execute if null because that will trigger an unnecessary update which will break
+        // select fields with `unspecified` value. See `/glib/json_ui_garage?path=forms%2Fselects`.
         this.fieldModel = this.defaultValue;
       }
     },

package/components/fields/date.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
   <fields-patternText
+    ref="delegate"
     :spec="spec"
     :type="spec.type || 'date'"
     pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
@@ -17,6 +18,12 @@ export default {
   },
   props: {
     spec: { type: Object, required: true }
+  },
+  methods: {
+    action_merge(mergedSpec) {
+      Object.assign(this.spec, mergedSpec);
+      this.$refs.delegate.updateData();
+    }
   }
 };
 </script>

package/components/fields/select.vue

@@ -24,7 +24,7 @@ export default {
     },
     action_merge(mergedSpec) {
       Object.assign(this.updatedSpec, mergedSpec);
-      this.$refs.delegate.updateData();
+      this.$refs.delegate.updateData(true);
     }
   }
 };

package/components/h4.vue

@@ -17,6 +17,11 @@ export default {
   mixins: [textMixin],
   props: {
     spec: { type: Object, required: true }
+  },
+  methods: {
+    action_merge(mergedSpec) {
+      Object.assign(this.spec, mergedSpec);
+    }
   }
 };
 </script>

package/components/mixins/events.js

@@ -177,6 +177,20 @@ export default {
         this._typingTimer = null;
         GLib.action.execute(this.spec.onTypeEnd, this);
       }, duration);
+    },
+    $executeOnChange(newValue) {
+      Utils.type.ifObject(this.spec.onChange, onChange => {
+        this.$nextTick(() => {
+          const value = newValue || this.fieldModel;
+          const params = {
+            [this.spec.paramNameForFormData || "formData"]: {
+              [this.fieldName]: value
+            }
+          };
+          const data = Object.assign({}, onChange, params);
+          GLib.action.execute(data, this);
+        });
+      });
     }
   }
 };

package/components/mixins/generic.js

@@ -5,7 +5,7 @@ export default {
       while (parent != null) {
         if (
           Utils.type.isObject(parent.spec) &&
-          Utils.app.vueName(parent) == name
+          GLib.component.vueName(parent) == name
         ) {
           return parent;
         }

package/components/mixins/styles.js

@@ -191,7 +191,7 @@ export default {
     },
     _linkFieldModels() {
       const hasCondition = this.spec && this.spec.showIf;
-      const name = Utils.app.vueName(this);
+      const name = GLib.component.vueName(this);
       const isField = name && name.startsWith("fields-");
       if (hasCondition || isField) {
         const form = this.$closest("panels-form");
@@ -205,8 +205,11 @@ export default {
         this.fieldModel = this._sanitizeValue(this.spec.value);
       }
     },
-    $classes(spec) {
-      const properties = spec || this.spec;
+    $classes(spec, defaultViewName) {
+      const properties = Object.assign(
+        { view: defaultViewName },
+        spec || this.spec
+      );
       const componentName = Utils.app.componentName(properties.view);
       const classes = (properties.styleClasses || []).concat(componentName);
 

package/components/panels/horizontal.vue

@@ -6,7 +6,7 @@
     :href="$href()"
     @click="$onClick()"
   >
-    <template v-for="(item, index) in spec.childViews">
+    <template v-for="(item, index) in childViews">
       <glib-component :key="index" :spec="item" />
     </template>
   </component>
@@ -17,6 +17,11 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
+  data() {
+    return {
+      childViews: null
+    };
+  },
   computed: {
     cssClasses: function() {
       const classes = this.$classes().concat("layouts-horizontal");
@@ -58,8 +63,19 @@ export default {
     }
   },
   methods: {
+    $ready() {
+      this.childViews = this.spec.childViews;
+      console.log("C1", this.childViews);
+    },
     $displayValue() {
       return "flex";
+    },
+    action_merge(mergedSpec) {
+      console.log("mergedSpec1", this.spec, this.spec.childViews);
+      Object.assign(this.spec, mergedSpec);
+      console.log("mergedSpec2", this.spec, this.spec.childViews);
+      // this.$refs.delegate.updateData();
+      this.$ready();
     }
   }
 };

package/components/panels/timeline.vue

@@ -1,35 +1,46 @@
 <template>
-  <v-container :class="$classes()">
+  <!-- Paddings cannot be applied to v-timeline directly -->
+  <div :style="$styles()" :class="$classes()">
     <v-timeline v-if="events" dense align-top>
       <v-timeline-item
         v-for="(item, index) in events"
         :key="index"
-        color="white"
-        fill-dot
-        :small="$classes().includes('small')"
-        :large="$classes().includes('large')"
-        class="my-6"
+        :color="item.backgroundColor || 'white'"
+        :small="itemClasses(item).includes('small')"
+        :large="itemClasses(item).includes('large')"
         :hide-dot="item.hide_dot"
+        fill-dot
       >
         <template v-slot:icon>
-          <div :class="$classes().includes('outlined') ? 'outlined-dots' : ''">
-            <div v-if="item.label" class="number-circle">
-              {{ item.label }}
+          <div
+            :class="
+              itemClasses(item).includes('outlined') ? 'outlined-dots' : ''
+            "
+          >
+            <div
+              v-if="item.text"
+              class="number-circle"
+              :style="{ color: item.color }"
+            >
+              {{ item.text }}
             </div>
             <div v-else class="icon">
               <common-icon
                 :spec="{
-                  material: { name: item.icon, size: iconSize() },
+                  material: { name: item.icon, size: iconSize(item) },
                   color: item.color
                 }"
               />
             </div>
           </div>
         </template>
-        <panels-responsive :spec="{ childViews: [childViews[index]] }" />
+        <panels-responsive
+          v-if="childViews"
+          :spec="{ childViews: [childViews[index]] }"
+        />
       </v-timeline-item>
     </v-timeline>
-  </v-container>
+  </div>
 </template>
 
 <script>
@@ -48,19 +59,38 @@ export default {
       this.events = this.spec.events;
       this.childViews = this.spec.childViews;
     },
-    iconSize() {
-      return this.$classes().includes("small") ? 16 : 24;
+    iconSize(item) {
+      return this.itemClasses(item).includes("small") ? 20 : 24;
+    },
+    itemClasses(item) {
+      return item.styleClasses || [];
+    },
+    action_merge(mergedSpec) {
+      Object.assign(this.spec, mergedSpec);
+      this.$ready();
     }
   }
 };
 </script>
 
+<style lang="scss">
+.v-timeline-item__dot {
+  height: 36px;
+  width: 36px;
+}
+.v-timeline-item__dot--small {
+  height: 20px;
+  width: 20px;
+}
+</style>
+
 <style lang="scss" scoped>
 .v-timeline {
   padding-top: 0px;
 }
 .v-timeline-item {
-  padding-bottom: 0px !important;
+  // Minimum line distance
+  padding-bottom: 10px;
 }
 .container {
   padding-top: 0px;
@@ -73,7 +103,8 @@ export default {
   margin: auto;
   text-align: center;
   font-weight: bold;
-  font-size: 22px;
+  padding: 4px 0;
+  // font-size: 22px;
 }
 .outlined .v-timeline-item {
   ::v-deep .v-timeline-item__dot {

package/extensions/array.js

@@ -22,3 +22,7 @@ Array.prototype.first = function() {
 Array.prototype.last = function() {
   return this[this.length - 1];
 };
+
+Array.prototype.random = function() {
+  return this[Math.floor(Math.random() * this.length)];
+};

package/extensions/string.js

@@ -19,3 +19,7 @@ String.prototype.contains = function(substr) {
 String.prototype.presence = function() {
   return this.length > 0 ? this.toString() : null;
 };
+
+String.prototype.truncate = function(n) {
+  return this.length > n ? this.slice(0, n - 1) + "..." : this.toString();
+};

package/index.js

@@ -57,6 +57,7 @@ import CommonMessage from "./components/_message";
 import CommonDropdownMenu from "./components/_dropdownMenu";
 import CommonResponsive from "./components/_responsive";
 import CommonTemplateMenu from "./templates/_menu";
+import RichButton from "./components/button";
 Vue.component("panels-vertical", VerticalPanel);
 Vue.component("panels-responsive", ResponsivePanel);
 Vue.component("common-button", CommonButton);
@@ -68,6 +69,7 @@ Vue.component("common-message", CommonMessage);
 Vue.component("common-dropdownMenu", CommonDropdownMenu);
 Vue.component("common-responsive", CommonResponsive);
 Vue.component("templates-menu", CommonTemplateMenu);
+Vue.component("rich-button", RichButton);
 
 Vue.component("glib-component", Component);
 Vue.component("glib-icon", CommonIcon);

package/nav/drawer.vue

@@ -76,8 +76,10 @@ export default {
   computed: {
     cssClasses() {
       // To make sure a css class name is assigned to this component
-      this.spec.view = this.spec.view || "pages/leftDrawer";
-      return this.$classes();
+      // this.spec.view = this.spec.view || "pages/leftDrawer";
+
+      // Make sure it has a view name.
+      return this.$classes(this.spec, "pages/leftDrawer");
     },
     style() {
       // Increase z-index so that the drawer is above the page header.

package/package.json

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

package/templates/thumbnail.vue

@@ -28,7 +28,7 @@
 
       <div v-if="spec.leftButtons" class="left-universal">
         <template v-for="(item, index) in spec.leftButtons">
-          <common-button
+          <rich-button
             :key="index"
             :spec="buttonSpec(item)"
             :disabled="$isBusy"
@@ -80,7 +80,7 @@
       </v-list-item-content>
 
       <template v-for="(item, index) in spec.rightButtons">
-        <common-button
+        <rich-button
           :key="index"
           :spec="buttonSpec(item)"
           :disabled="$isBusy"

package/utils/app.js

@@ -8,8 +8,4 @@ export default class {
     }
     return name;
   }
-
-  static vueName(component) {
-    return component.$options._componentTag;
-  }
 }

package/utils/component.js

@@ -1,12 +1,28 @@
 export default class {
+  static get _registry() {
+    return window.vueApp.registeredComponents;
+  }
   static findById(id) {
-    const component = window.vueApp.registeredComponents[id];
+    const component = this._registry[id];
     if (component) {
       return component;
     }
     console.error("Component not found: " + id);
   }
   static register(id, component) {
-    window.vueApp.registeredComponents[id] = component;
+    if (this._registry[id]) {
+      console.warn(
+        "Duplicate component ID:",
+        id,
+        "Existing:",
+        this.vueName(this._registry[id]),
+        "New:",
+        this.vueName(component)
+      );
+    }
+    this._registry[id] = component;
+  }
+  static vueName(component) {
+    return component.$options._componentTag;
   }
 }

package/utils/hash.js

@@ -26,4 +26,29 @@ export default class Hash {
     }
     return this;
   }
+
+  map(handler) {
+    return this.reduce((accumulator, key, value, index) => {
+      accumulator[index] = handler(key, value, index);
+      return accumulator;
+    }, []);
+  }
+
+  reduce(handler, initialValue) {
+    const keys = Object.keys(this);
+    let index = 0;
+    let accumulator = initialValue;
+    for (const key of keys) {
+      accumulator = handler(accumulator, key, this[key], index);
+      index++;
+    }
+    return accumulator;
+  }
+
+  forEach(handler) {
+    const keys = Object.keys(this);
+    for (const key of keys) {
+      handler(key, this[key]);
+    }
+  }
 }

package/utils/public.js

@@ -4,6 +4,7 @@ import Http from "./http";
 import Type from "./type";
 import Form from "./form";
 import Component from "./component";
+import Hash from "./hash";
 
 export default class {
   static get action() {
@@ -24,4 +25,7 @@ export default class {
   static get component() {
     return Component;
   }
+  static get Hash() {
+    return Hash;
+  }
 }

package/utils/storage.js

@@ -1,9 +1,8 @@
 export default class {
   static setLocal(key, obj) {
-    localStorage.setItem(key, JSON.stringify(obj))
+    localStorage.setItem(key, JSON.stringify(obj));
   }
   static getLocal(key) {
-    return JSON.parse(localStorage.getItem(key))
+    return JSON.parse(localStorage.getItem(key));
   }
 }
-

package/utils/url.js

@@ -21,20 +21,22 @@ export default class {
 
   static jsonUrl(originalUrl) {
     if (typeof originalUrl === "string") {
-      let url = originalUrl;
-      if (originalUrl.indexOf("?") > -1) {
+      const fragments = originalUrl.split("#");
+      let url = fragments[0];
+      const anchor = fragments[1];
+      if (url.indexOf("?") > -1) {
         if (
-          originalUrl.indexOf(".json?") == -1 &&
-          originalUrl.search(/[\&\?]format=json/) == -1
+          url.indexOf(".json?") == -1 &&
+          url.search(/[\&\?]format=json/) == -1
         ) {
-          url = originalUrl + "&format=json";
+          url = url + "&format=json";
         }
       } else {
-        if (!originalUrl.endsWith(".json")) {
-          url = originalUrl + "?format=json";
+        if (!url.endsWith(".json")) {
+          url = url + "?format=json";
         }
       }
-      return url;
+      return anchor ? `${url}#${anchor}` : url;
     }
     return "";
   }