glib-web 3.0.12 → 3.0.13

package/actions/components/update.js

@@ -6,8 +6,7 @@ export default class {
 
     const target = GLib.component.findById(spec.targetId);
     if (target) {
-      // force update
-      Object.assign(target.spec, spec.views[0], { forceUpdate: true });
+      Object.assign(target.spec, spec.views[0]);
     }
   }
 }

package/app.vue

@@ -229,10 +229,15 @@ body,
   font-size: 16px;
   padding: 8px 16px;
   width: 100%;
-}
+  text-decoration: none;
+
+  &:hover {
+    background-color: #f3f4f6;
+  }
 
-.popover-menu-item:hover {
-  background-color: #f3f4f6;
+  &:visited {
+    color: inherit;
+  }
 }
 
 .v-input__details {

package/components/_responsive.vue

@@ -56,12 +56,16 @@ export default {
       return item.view == "panels/column-v1";
     },
     viewKey(item, index) {
-      // Use view name for key to avoid component reuse issue
-      if (!item.forceUpdate) {
-        return `view${index}_${item.view}_value${item.value}`
-      } else {
-        return `comp-${Date.now().toString()}`
-      }
+      return index
+
+      // return `view${index}_${item.view}`;
+
+      // // Use view name for key to avoid component reuse issue
+      // if (!item.forceUpdate) {
+      //   return `view${index}_${item.view}_value${item.value}`
+      // } else {
+      //   return `comp-${Date.now().toString()}`
+      // }
       // return item
     },
     $registryEnabled() {

package/components/fields/hidden.vue

@@ -3,7 +3,6 @@
     type="hidden"
     :name="fieldName"
     :value="fieldModel"
-    :data-observe="spec"
   />
 </template>
 
@@ -14,7 +13,7 @@ export default {
   },
   methods: {
     $ready() {
-      this.fieldModel = this.spec.value;
+      // this.fieldModel = this.spec.value;
     },
   },
 };

package/components/fields/text.vue

@@ -2,6 +2,7 @@
   <div :style="$styles()" :class="$classes()">
     <v-text-field ref="field" v-model="fieldModel" :label="spec.label" :name="fieldName" :placeholder="spec.placeholder"
       :density="density"
+      :hint="spec.hint"
       :maxlength="spec.maxLength || 255" :disabled="spec.readOnly" :type="config.type" :rules="rules"
       :prepend-inner-icon="leftIconName" :append-inner-icon="config.appendIcon" :prefix="spec.leftText"
       :suffix="spec.rightText" :min="spec.min" :max="spec.max" :autofocus="spec.autoFocus || false" validate-on="blur"
@@ -23,8 +24,8 @@ export default {
   },
   data() {
     return {
-      config: {},
-      rules: [],
+      // config: {},
+      // rules: [],
       onRightIconClick: null,
       fields: {
         email: {
@@ -92,20 +93,38 @@ export default {
     },
     density() {
       return determineDensity(this.spec.styleClasses)
+    },
+    config() {
+      return this.fields[this.type] || {}
+    },
+    rules() {
+      return this.$validation(this.config.rules);
+    }
+  },
+  watch: {
+    spec: {
+      handler(spec) {
+        if (this.config.onRightIconClick) {
+          this.onRightIconClick = () => {
+            this.config.onRightIconClick(this);
+          };
+        }
+      },
+      immediate: true
     }
   },
   methods: {
-    $ready() {
-      this.fieldModel = this.spec.value;
-      this.config = this.fields[this.type] || {};
-      this.rules = this.$validation(this.config.rules);
+    // $ready() {
+    //   this.fieldModel = this.spec.value;
+    //   this.config = this.fields[this.type] || {};
+    //   this.rules = this.$validation(this.config.rules);
 
-      if (this.config.onRightIconClick) {
-        this.onRightIconClick = () => {
-          this.config.onRightIconClick(this);
-        };
-      }
-    },
+    //   if (this.config.onRightIconClick) {
+    //     this.onRightIconClick = () => {
+    //       this.config.onRightIconClick(this);
+    //     };
+    //   }
+    // },
     togglePasswordVisibility() {
       const passwordField = this.fields["password"];
       if (passwordField.appendIcon == "visibility") {
@@ -117,7 +136,8 @@ export default {
       }
     },
     classes() {
-      return this.$classes().concat("g-text-field--hintless");
+      // return this.$classes().concat("g-text-field--hintless");
+      return this.$classes()
     },
     action_focus() {
       this.$refs.field.focus();
@@ -130,14 +150,14 @@ export default {
 </script>
 
 <style lang="scss">
-.g-text-field--hintless {
-  .v-input__details {
-    min-height: 0;
-    margin-bottom: 0;
+// .g-text-field--hintless {
+//   .v-input__details {
+//     min-height: 0;
+//     margin-bottom: 0;
 
-    .v-messages {
-      min-height: 0;
-    }
-  }
-}
+//     .v-messages {
+//       min-height: 0;
+//     }
+//   }
+// }
 </style>

package/components/fields/textarea.vue

@@ -4,6 +4,7 @@
       :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :disabled="spec.readOnly" :height="height"
       :rules="$validation()" counter :outlined="$classes().includes('outlined')"
       :no-resize="$classes().includes('no-resize')" validate-on="blur" :variant="variant"
+      :density="density"
       persistent-placeholder></v-textarea>
     <input v-if="spec.readOnly" type="hidden" :name="fieldName" :value="fieldModel" />
   </div>
@@ -12,6 +13,7 @@
 <script>
 import eventFiltering from "../../utils/eventFiltering";
 import inputVariant from "../mixins/inputVariant";
+import { determineDensity } from "../../utils/constant";
 
 export default {
   mixins: [inputVariant],
@@ -24,6 +26,11 @@ export default {
       height: null,
     };
   },
+  computed: {
+    density() {
+      return determineDensity(this.spec.styleClasses)
+    }
+  },
   methods: {
     $ready() {
       this.fieldModel = this.spec.value;

package/components/mixins/events.js

@@ -49,16 +49,6 @@ export default {
     // this._executeIfReady(true);
     this.$updated();
   },
-  // _executeIfReady(updated) {
-  //   if (updated) {
-  //     if (!this._renderingTheSamePage()) {
-  //       this.$tearDown();
-  //       this._ready();
-  //     }
-  //   } else {
-  //     this._ready();
-  //   }
-  // },
   // deactivated() {
   unmounted() {
     this.$tearDown();
@@ -132,9 +122,6 @@ export default {
 
       this.$data._events = [];
 
-      // Has to be executed before $ready()
-      this._linkFieldModels();
-
       this.$ready();
 
       // Make sure events are dispatched after $ready(). Dispatching them during $ready() causes errors.
@@ -165,9 +152,6 @@ export default {
     },
     // Override to provide customization
     $update() {
-      // This causes user input getting removed which is not what we want in some situations.
-      // // This is so that the field's value gets updated to the new `value` property.
-      // this._linkFieldModels();
       this.$ready();
     },
     async $recursiveUpdate(stack) {

package/components/mixins/styles.js

@@ -44,6 +44,18 @@ export default {
       Object.assign(this.$data._fieldModels, { [this.fieldName]: this.$internalizeValue(val) })
 
       this._checkDirtyState(val, oldVal);
+    },
+    spec: {
+      handler(spec, oldSpec) {
+        if (spec) {
+          let valueChanged = true
+          if (oldSpec && oldSpec.value === spec.value) {
+            valueChanged = false
+          }
+          this._linkFieldModels(valueChanged);
+        }
+      },
+      immediate: true
     }
   },
   methods: {
@@ -186,7 +198,7 @@ export default {
     $externalizeValue(val) {
       return val;
     },
-    _linkFieldModels() {
+    _linkFieldModels(valueChanged) {
       const hasCondition = this.spec && this.spec.showIf;
       const name = GLib.component.vueName(this);
 
@@ -200,7 +212,11 @@ export default {
         // Has to be executed before $ready(). This executes regardless of whether a form is found because fields
         // may be used without a form.
         this.fieldName = this.spec.name;
-        this.fieldModel = this._sanitizeValue(this.spec.value);
+
+        // Avoid user input getting removed when updating certain parts of the page.
+        if (valueChanged) {
+          this.fieldModel = this._sanitizeValue(this.spec.value);
+        }
       }
     },
     action_resetValue() {

package/components/panels/custom.vue

@@ -1,5 +1,6 @@
 <template>
   <div :style="genericStyles()" :class="$classes()">
+    <!-- This comment is not relevant anymore after moving all initializations to `computed()` and `watch()`. -->
     <!--
       NOTE: To make sure that the custom component gets updated, in the custom component,
       make sure to use one of the `spec` attributes directly or through a computed method.
@@ -11,7 +12,10 @@
       This should not be needed if a component (custom or not) uses $styles() or other mixin
       methods because those methods use `spec` attributes, which will force $ready() to be called.
     -->
-    <component ref="ccomp" :is="template" v-if="customData" :name="spec.template" :spec="customData" />
+    <!-- <component ref="ccomp" :is="template" v-if="customData" :name="spec.template" :spec="customData" /> -->
+
+    <component :is="template" :name="spec.template" :spec="contentSpec" />
+
   </div>
 </template>
 
@@ -32,12 +36,11 @@ export default {
   },
   data() {
     return {
-      customData: null,
+      // customData: null,
     };
   },
   computed: {
     template() {
-
       const name = `template-${this.spec.template.replace("/", "-")}`;
       const strict = true;
       if (strict) {
@@ -49,15 +52,19 @@ export default {
         return "template-unsupported";
       }
     },
+    contentSpec() {
+      const onClick = this.spec.onClick ? { onClick: this.spec.onClick } : {};
+      return Object.assign(onClick, this.spec.data);
+    }
   },
   methods: {
     $ready() {
-      const onClick = this.spec.onClick ? { onClick: this.spec.onClick } : {};
-      this.customData = Object.assign(onClick, this.spec.data);
-      // Fix an issue where the panel doesn't get updated
-      if (this.$refs.ccomp) {
-        this.$refs.ccomp.$forceUpdate();
-      }
+      // const onClick = this.spec.onClick ? { onClick: this.spec.onClick } : {};
+      // this.customData = Object.assign(onClick, this.spec.data);
+      // // Fix an issue where the panel doesn't get updated
+      // if (this.$refs.ccomp) {
+      //   this.$refs.ccomp.$forceUpdate();
+      // }
     },
     $registryEnabled() {
       return false;

package/nav/dialog.vue

@@ -121,6 +121,7 @@ export default {
         this.updateMainHeight();
       });
     },
+    // TODO: This doesn't get called anymore after Vue3 upgrade.
     $tearDown() {
       console.debug("Dialog destroyed");
       this.stack.remove(this);

package/package.json

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

package/plugins/updatableComponent.js

@@ -4,13 +4,27 @@ export default {
       mounted: function () {
         let spec = this.spec;
         if (spec && spec.id && this.$registryEnabled()) {
-          GLib.component.register(spec.id, this);
+          const id = spec.id
+          const existingComponent = GLib.component.findById(id)
+          // A component with the same ID in a different page shouldn't be considered a
+          // duplicate. See `utils/components#deregister` for more details.
+          if (existingComponent && existingComponent._mountedUrl == this._mountedUrl) {
+            console.warn(
+              "Duplicate component ID:",
+              id,
+              "Existing:",
+              GLib.component.vueName(existingComponent),
+              "New:",
+              GLib.component.vueName(this)
+            );
+          }
+          GLib.component.register(id, this);
         }
       },
       unmounted: function () {
         let spec = this.spec;
         if (spec && spec.id && this.$registryEnabled()) {
-          GLib.component.deregister(spec.id);
+          GLib.component.deregister(spec.id, this);
         }
       },
       methods: {

package/utils/component.js

@@ -12,22 +12,29 @@ export default class {
   }
 
   static register(id, component) {
-    if (this._registry[id]) {
-      console.warn(
-        "Duplicate component ID:",
-        id,
-        "Existing:",
-        this.vueName(this._registry[id]),
-        "New:",
-        this.vueName(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 deregister(id) {
-    delete this._registry[id];
+  static deregister(id, component) {
+    // As the user navigates to a new page, there may be a component with the same ID in the next page,
+    // that is not reused from the component in the previous page. When this happens, the new
+    // component will get registered before the old component gets deregistered, in which case we
+    // should skip the deregistering or else we'd accidentally deregister the new component.
+    if (this._registry[id] == component) {
+      console.debug("Deregistering component with ID", id)
+      delete this._registry[id];
+    }
   }
 
   static vueName(component) {
@@ -41,7 +48,6 @@ export default class {
       }
     }
 
-
     return component.name
   }
 

package/utils/launch.js

@@ -40,11 +40,16 @@ class LaunchPopover {
     if (component) {
       const placeholder = document.createElement('div')
 
-      // component.$el.parentElement.appendChild(placeholder)
-
-      // Attach the popover to the document body to prevent clipping caused by the parent's `overflow` property.
-      // See https://stackoverflow.com/questions/51393427/z-index-to-ignore-max-height-and-always-come-on-top
-      document.body.appendChild(placeholder);
+      // const pageBody = Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
+      const dialogBody = Utils.launch.dialog.closestBody(component)
+      if (dialogBody) {
+        // Put the popover on the dialog so that clicking it doesn't close a non-persistent dialog.
+        dialogBody.appendChild(placeholder);
+      } else {
+        // Attach the popover to the document body to prevent clipping caused by the parent's `overflow` property.
+        // See https://stackoverflow.com/questions/51393427/z-index-to-ignore-max-height-and-always-come-on-top
+        document.body.appendChild(placeholder);
+      }
 
       instance.mount(placeholder);