fix(actions-builder.js): some corrections for vuejs3

Author: J9rem

tools/aceditor/presentation/javascripts/actions-builder.js

@@ -133,7 +133,7 @@ window.myapp = createApp({
         // use a fake dom to parse wiki code attributes
         let fakeDom = $(`<${this.editor.currentSelectedAction}/>`)[0]
 
-        for(let attribute of fakeDom.attributes) Vue.set(this.values, attribute.name, attribute.value)
+        for(let attribute of fakeDom.attributes) this.values[attribute.name] = attribute.value
 
         let newActionId = fakeDom.tagName.toLowerCase()
         // backward compatibilty
@@ -166,7 +166,7 @@ window.myapp = createApp({
         this.selectedFormId = ''
         this.selectedActionId = ''
         // Bazar dynamic by default
-        if (this.isBazarListeAction) Vue.set(this.values, "dynamic", true)
+        if (this.isBazarListeAction) this.values.dynamic = true
       }
       this.updateActionParams()
       // If only one action available, select it
@@ -205,7 +205,7 @@ window.myapp = createApp({
       // Populate the values field from the config
       for(var propName in this.selectedAction.properties) {        
         var configValue = this.selectedAction.properties[propName].value || this.selectedAction.properties[propName].default
-        if (configValue && !this.values[propName]) Vue.set(this.values, propName, configValue)
+        if (configValue && !this.values[propName]) this.values[propName] = configValue
       }
       if (this.isBazarListeAction && this.selectedAction.properties && this.selectedAction.properties.template) this.values.template = this.selectedAction.properties.template.value
       setTimeout(() => this.updateActionParams(), 0);

tools/aceditor/presentation/javascripts/components/InputColumnsWidth.js

@@ -22,7 +22,7 @@ export default {
       <label v-if="config.label" class="control-label">{{ config.label }}</label>
       <div class="inline-form" v-for="element in elements">
         <template v-for="(property, propName) in config.subproperties">
-          <component :is="componentIdFrom(property)" v-model="element[propName]"
+          <component :is="componentIdFrom(property)" :value="element[propName]"
                      v-show="checkVisibility(property)" :name="propName" :values="values"
                      :config="property" :selected-form="selectedForm">
           </component>

tools/aceditor/presentation/javascripts/components/InputFormField.js

@@ -20,25 +20,30 @@ export default {
     }
   },
   watch: {
-    fields() {
-      this.$emit('input', this.fields.map(f => f.id).join(','))
-    },
+    fields: {
+      handler(val, oldVal) {
+        this.$emit('input', this.fields.map(f => f.id).join(','))
+      },
+      deep: true // to force following mutations
+    }
   },
   template: `
     <div class="form-group" :class="config.type" :title="config.hint" >
       <label v-if="config.label" class="control-label">{{ config.label }}</label>
       
-      <v-select v-if="config.multiple" v-model="fields" :options="fieldOptions" label="id" :multiple="true">
+      <v-select v-if="config.multiple" v-model:value="fields" :options="fieldOptions" label="id" :multiple="true">
         <template v-slot:option="option">
           <span v-html="option.label"></span> - {{ option.id }}
         </template>
       </v-select>
       
       <select v-else :value="value" v-on:input="$emit('input', $event.target.value)" class="form-control">
         <option value=""></option>
-        <option v-for="field in fieldOptions" v-if="field.label" :value="field.id">
-          <span v-html="field.label"></span> - {{ field.id }}
-        </option>
+        <template v-for="field in fieldOptions">
+          <option v-if="field.label" :value="field.id">
+            <span v-html="field.label"></span> - {{ field.id }}
+          </option>
+        </template>
       </select>
       
       <input-hint :config="config"></input-hint>

tools/aceditor/presentation/javascripts/components/InputMultiInput.js

@@ -53,7 +53,7 @@ export default {
     <div class="multi-input-container" :class="name">
       <div class="inline-form" v-for="element in elements">
         <template v-for="(property, propName) in config.subproperties">
-          <component :is="componentIdFrom(property)" v-model="element[propName]"
+          <component :is="componentIdFrom(property)" :value="element[propName]"
                      v-show="checkVisibility(property)" :name="propName" :values="values"
                      :config="property" :selected-form="selectedForm">
           </component>