ui_migration lint(fix): changes fixed with lint ecmaversion & es2021

webapp/src/components/labThingsComponents/actionButton.vue

@@ -21,7 +21,7 @@
       :task-running="taskRunning"
       :task-started="taskStarted"
       :task-status="taskStatus"
-      @terminateTask="terminateTask"
+      @terminate-task="terminateTask"
     />
   </div>
 </template>
@@ -29,33 +29,16 @@
 <script>
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionStatusModal from "./actionStatusModal.vue";
-//vue3 migration 
+//vue3 migration
 import { eventBus } from "../../eventBus.js";
 import { useIntersectionObserver } from "@vueuse/core";
 
-
 export default {
   name: "ActionButton",
 
-  emits: [
-    'update:progress',
-    'update:taskStarted', 
-    'update:taskRunning',
-    'update:log',
-    'update:taskStatus',
-    'submit',
-    'taskStarted',
-    'taskRunning',
-    'response',
-    'completed',
-    'cancelled',
-    'finished',
-    'error'
-  ],
-
-  components: { 
+  components: {
     ActionProgressBar,
-    ActionStatusModal
+    ActionStatusModal,
   },
 
   props: {
@@ -119,6 +102,22 @@ export default {
     },
   },
 
+  emits: [
+    "update:progress",
+    "update:taskStarted",
+    "update:taskRunning",
+    "update:log",
+    "update:taskStatus",
+    "submit",
+    "taskStarted",
+    "taskRunning",
+    "response",
+    "completed",
+    "cancelled",
+    "finished",
+    "error",
+  ],
+
   data: function () {
     return {
       taskUrl: null,
@@ -173,14 +172,14 @@ export default {
       handler(newval) {
         this.$emit("update:log", newval);
       },
-      deep: true
+      deep: true,
     },
     taskStatus: {
       handler(newval) {
         this.$emit("update:taskStatus", newval);
       },
-    }
-},
+    },
+  },
 
   mounted() {
     useIntersectionObserver(

webapp/src/components/labThingsComponents/actionLogDisplay.vue

@@ -69,7 +69,7 @@ export default {
     taskStatus: {
       handler() {
         this.scrollToBottom();
-      }
+      },
     },
   },
 

webapp/src/components/labThingsComponents/actionStatusModal.vue

@@ -33,10 +33,11 @@ import { eventBus } from "../../eventBus.js";
 
 export default {
   name: "ActionStatusModal",
-  components: { 
+  components: {
     ActionProgressBar,
-    ActionLogDisplay
+    ActionLogDisplay,
   },
+
   props: {
     title: {
       type: String,
@@ -69,6 +70,8 @@ export default {
     },
   },
 
+  emits: ["terminateTask"],
+
   methods: {
     show() {
       UIkit.modal(this.$refs.modal).show();

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -106,10 +106,8 @@ export default {
   name: "InputFromSchema",
 
   components: {
-    syncPropertyButton
+    syncPropertyButton,
   },
-
-  compatConfig: { COMPONENT_V_MODEL: false },
   props: {
     dataSchema: {
       type: Object,
@@ -130,6 +128,10 @@ export default {
     },
   },
 
+  emits: ["requestUpdate", "sendValue", "animationShown"],
+
+  compatConfig: { COMPONENT_V_MODEL: false },
+
   data() {
     return {
       // Initialise with a copy to try to prevent the this.modelValue prop being mutated if
@@ -139,8 +141,8 @@ export default {
       internalValue: Array.isArray(this.modelValue)
         ? [...this.modelValue]
         : typeof this.modelValue === "object"
-        ? { ...this.modelValue }
-        : this.modelValue,
+          ? { ...this.modelValue }
+          : this.modelValue,
       // Is edited can't be computed as we mutate internalValue
       isEdited: false,
       animateUpdate: null,
@@ -270,7 +272,8 @@ export default {
       }
     },
     updateIsEdited: function () {
-      this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.modelValue);
+      this.isEdited =
+        this.deepStringify(this.internalValue) !== this.deepStringify(this.modelValue);
     },
     animationEnd: function () {
       this.animateUpdate = null;

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -4,9 +4,9 @@
     :data-schema="propertyDescription"
     :label="label"
     :animate="animate"
-    @requestUpdate="readProperty"
-    @sendValue="writeProperty"
-    @animationShown="resetAnimate"
+    @request-update="readProperty"
+    @send-value="writeProperty"
+    @animation-shown="resetAnimate"
   />
 </template>
 
@@ -15,12 +15,11 @@ import { formatValue } from "@/js_utils/formatter.mjs";
 import InputFromSchema from "./inputFromSchema.vue";
 // vue3 migration
 
-
 export default {
   name: "PropertyControl",
 
   components: {
-    InputFromSchema
+    InputFromSchema,
   },
 
   props: {

webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue

@@ -24,7 +24,7 @@ export default {
   name: "ServerSpecifiedActionButton",
 
   components: {
-    ActionButton
+    ActionButton,
   },
 
   props: {
@@ -34,6 +34,8 @@ export default {
     },
   },
 
+  emits: ["response", "finished"],
+
   methods: {
     /**
      * Runs when the ActionButton's action completes successfully.

webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue

@@ -18,7 +18,7 @@ export default {
   name: "ServerSpecifiedPropertyControl",
 
   components: {
-    PropertyControl
+    PropertyControl,
   },
 
   props: {

webapp/src/components/labThingsComponents/syncPropertyButton.vue

@@ -12,6 +12,8 @@
 <script>
 export default {
   name: "SyncPropertyButton",
+
+  emits: ["click"],
 };
 </script>
 
@@ -26,7 +28,9 @@ export default {
 
 .material-symbols-outlined.sync-icon {
   color: #888;
-  transition: transform 0.3s ease, color 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    color 0.3s ease;
 }
 
 .material-symbols-outlined.sync-icon:hover {