ui_migration fix(deps): --preliminary-- Replace value to modelvalue, and global emitters. BUG:keys-arrows-wont-move

webapp/src/components/labThingsComponents/actionButton.vue

@@ -135,19 +135,19 @@ export default {
 
   watch: {
     progress(newval) {
-      eventBus.emit("update:progress", newval);
+      eventBus.emit("beforeUpdate:progress", newval);
     },
     taskStarted(newval) {
-      eventBus.emit("update:taskStarted", newval);
+      eventBus.emit("beforeUpdate:taskStarted", newval);
     },
     taskRunning(newval) {
-      eventBus.emit("update:taskRunning", newval);
+      eventBus.emit("beforeUpdate:taskRunning", newval);
     },
     log(newval) {
-      eventBus.emit("update:log", newval);
+      eventBus.emit("beforeUpdate:log", newval);
     },
     taskStatus(newval) {
-      eventBus.emit("update:taskStatus", newval);
+      eventBus.emit("beforeUpdate:taskStatus", newval);
     },
   },
 

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -115,9 +115,10 @@ export default {
       type: Object,
       required: true,
     },
-    value: {
+    modelValue: {
       type: null,
-      required: true,
+      required: false,
+      default: undefined,
     },
     label: {
       type: String,
@@ -135,11 +136,11 @@ export default {
       // the value is an array or object. For future updates we stringify and parse
       // (see resetInternalValue). If we do this here there is a chance we get errors
       // as internalValue is still null when rendering starts.
-      internalValue: Array.isArray(this.value)
-        ? [...this.value]
-        : typeof this.value === "object"
-        ? { ...this.value }
-        : this.value,
+      internalValue: Array.isArray(this.modelValue)
+        ? [...this.modelValue]
+        : typeof this.modelValue === "object"
+        ? { ...this.modelValue }
+        : this.modelValue,
       // Is edited can't be computed as we mutate internalValue
       isEdited: false,
       animateUpdate: false,
@@ -208,14 +209,20 @@ export default {
   },
 
   watch: {
-    value() {
-      // Fire updateIsEdited on both value and internal value change,
-      // as change in value may not causse internalValue to change.
-      this.updateIsEdited();
-      this.resetInternalValue();
+    modelValue: {
+      handler() {
+        // Fire updateIsEdited on both value and internal value change,
+        // as change in value may not causse internalValue to change.
+        this.updateIsEdited();
+        this.resetInternalValue();
+      },
+      deep: true,
     },
-    internalValue() {
-      this.updateIsEdited();
+    internalValue: {
+      handler() {
+        this.updateIsEdited();
+      },
+      deep: true,
     },
     animate(updated) {
       if (updated) {
@@ -225,7 +232,7 @@ export default {
   },
 
   mounted() {
-    if (this.value !== undefined) {
+    if (this.modelValue !== undefined) {
       this.resetInternalValue();
     }
   },
@@ -235,7 +242,7 @@ export default {
       // Whenever updatirng th internal value stringify and parse as a form of deepcopy.
       // This ensure that the this.value prop is not mutated for when elements of arrays
       // or objects are updated.
-      this.internalValue = JSON.parse(JSON.stringify(this.value));
+      this.internalValue = JSON.parse(JSON.stringify(this.modelValue));
     },
     requestUpdate: async function () {
       this.$emit("requestUpdate");
@@ -264,7 +271,7 @@ export default {
       }
     },
     updateIsEdited: function () {
-      this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value);
+      this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.modelValue);
     },
     animationEnd: function () {
       this.animateUpdate = false;

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -1,6 +1,6 @@
 <template>
   <input-from-schema
-    v-model="value"
+    v-model="modelValue"
     :data-schema="propertyDescription"
     :label="label"
     :animate="animate"
@@ -50,7 +50,7 @@ export default {
 
   data() {
     return {
-      value: undefined,
+      modelValue: undefined,
       animate: false,
     };
   },
@@ -76,7 +76,7 @@ export default {
     // Read the property when we're mounted - usually this won't
     // work because the URL isn't set yet. However, it's helpful if
     // the app is reloaded (e.g. from a dev server).
-    if (this.value == undefined) {
+    if (this.modelValue == undefined) {
       this.readProperty();
     }
   },
@@ -84,12 +84,12 @@ export default {
   methods: {
     readProperty: async function () {
       let data = await this.readThingProperty(this.thingName, this.propertyName);
-      this.value = data;
+      this.modelValue = data;
       return data;
     },
     writeProperty: async function (requestedValue) {
       try {
-        this.value = requestedValue;
+        this.modelValue = requestedValue;
         await this.writeThingProperty(this.thingName, this.propertyName, requestedValue);
         if (this.readBack) {
           await new Promise((r) => setTimeout(r, this.readBackDelay));