glib-web 2.3.0 → 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>