fix(Inputs): add emits for Vuejs3

J9rem · J9rem · commit 26383c60fcf5 · 2022-07-18T18:42:18.000+02:00
diff --git a/tools/aceditor/presentation/javascripts/components/InputCheckbox.js b/tools/aceditor/presentation/javascripts/components/InputCheckbox.js
@@ -1,5 +1,6 @@
 export default {
   props: [ 'value', 'config' ],
+  emits: ['input'],
   data() {
     return {
       // boolean internal value cause the real value could be a string when using checkedvalue and uncheckedvalue
diff --git a/tools/aceditor/presentation/javascripts/components/InputClass.js b/tools/aceditor/presentation/javascripts/components/InputClass.js
@@ -4,6 +4,7 @@ import InputCheckbox from './InputCheckbox.js'
 
 export default {
   props: [ 'name', 'value', 'config', 'selectedForm', 'values' ],
+  emits: ['input'],
   components: { InputList, InputCheckbox },
   mixins: [ InputHelper ],
   data() {
diff --git a/tools/aceditor/presentation/javascripts/components/InputColor.js b/tools/aceditor/presentation/javascripts/components/InputColor.js
@@ -1,5 +1,6 @@
 export default {
   props: [ 'value', 'config' ],
+  emits: ['input'],
   mounted() {
     const palette = [
       [
diff --git a/tools/aceditor/presentation/javascripts/components/InputCorrespondance.js b/tools/aceditor/presentation/javascripts/components/InputCorrespondance.js
@@ -4,6 +4,7 @@ import InputFormField from './InputFormField.js'
 export default {
   props: [ 'name', 'value', 'config', 'selectedForm', 'values' ],
   components: { InputFormField },
+  emits: ['input'],
   mixins: [ InputHelper ],
   data() {
     return {
diff --git a/tools/aceditor/presentation/javascripts/components/InputFormField.js b/tools/aceditor/presentation/javascripts/components/InputFormField.js
@@ -1,6 +1,7 @@
 // Text/Number/Color/slider
 export default {
   props: [ 'value', 'config', 'selectedForm' ],
+  emits: ['input'],
   data() {
     return {
       fields: []
diff --git a/tools/aceditor/presentation/javascripts/components/InputGeo.js b/tools/aceditor/presentation/javascripts/components/InputGeo.js
@@ -1,6 +1,7 @@
 // ext/Number/Color/slider
 export default {
   props: [ 'value', 'config', 'values' ],
+  emits: ['input'],
   data() {
     return {
       defaultLatitude: 46.22763,
diff --git a/tools/aceditor/presentation/javascripts/components/InputIcon.js b/tools/aceditor/presentation/javascripts/components/InputIcon.js
@@ -1,5 +1,6 @@
 export default {
   props: [ 'value', 'config' ],
+  emits: ['input'],
   mounted() {
     $(this.$refs.input).iconpicker(pickerConfig).on('iconpickerSelected', (event) => {
       // handle this event with jquery cause vue does not support camelCase event
diff --git a/tools/aceditor/presentation/javascripts/components/InputList.js b/tools/aceditor/presentation/javascripts/components/InputList.js
@@ -2,6 +2,7 @@ import InputHelper from './InputHelper.js'
 
 export default {
   props: [ 'name', 'value', 'config', 'selectedForm', 'values' ],
+  emits: ['input'],
   mixins: [ InputHelper ],
   computed: {
     optionsList() {
diff --git a/tools/aceditor/presentation/javascripts/components/InputMultiInput.js b/tools/aceditor/presentation/javascripts/components/InputMultiInput.js
@@ -9,6 +9,7 @@ import InputFormField from './InputFormField.js'
 
 export default {
   props: [ 'name', 'value', 'config', 'selectedForm', 'values' ],
+  emits: ['input'],
   components: { InputText, InputCheckbox, InputList, InputIcon, InputColor, InputFormField, InputHidden },
   mixins: [ InputHelper ],
   data() {
diff --git a/tools/aceditor/presentation/javascripts/components/InputPageList.js b/tools/aceditor/presentation/javascripts/components/InputPageList.js
@@ -1,5 +1,6 @@
 export default {
   props: [ 'value', 'config' ],
+  emits: ['input'],
   computed: {
     pageList() {
       $.ajax({
diff --git a/tools/aceditor/presentation/javascripts/components/InputText.js b/tools/aceditor/presentation/javascripts/components/InputText.js
@@ -1,6 +1,7 @@
 // ext/Number/Color/slider
 export default {
   props: [ 'value', 'config' ],
+  emits: ['input'],
   mounted() {
     if (!this.value && this.config.value) this.$emit('input', this.config.value)
   },
diff --git a/tools/bazar/presentation/javascripts/bazar-list-dynamic.js b/tools/bazar/presentation/javascripts/bazar-list-dynamic.js
@@ -337,7 +337,7 @@ window.bazarVueApp = createApp({
     }
   },
   mounted() {
-    $(this.$el).on(
+    $(this.$el.parentNode).on(
       "dblclick",
       function (e) {
         return false;
diff --git a/tools/bazar/presentation/javascripts/components/BazarMap.js b/tools/bazar/presentation/javascripts/components/BazarMap.js
@@ -254,33 +254,41 @@ window.bazarVueApp.component('BazarMap', {
         } else if (this.params.entrydisplay == 'popup') {
           this.openPopup(this.selectedEntry)
         }
+        let bazarMap = this;
         
         nextTick(function() {
           bazarMap.selectedEntry.marker._icon.classList.add('selected')
         })
       }
     },
-    params() {
-      this.center = [this.params.latitude, this.params.longitude]
+    params: {
+      handler() {
+        this.center = [this.params.latitude, this.params.longitude]
+      },
+      deep: true
     },
-    entries(newVal, oldVal) {
-      let newIds = newVal.map(e => e.id_fiche)
-      let oldIds = oldVal.map(e => e.id_fiche)
-      if (!this.arraysEqual(newIds, oldIds)) {
-        nextTick(function() {
-          bazarMap.entries.forEach(entry => bazarMap.createMarker(entry))
-          let entries = bazarMap.entries.filter(entry => entry.marker) // remove entries without marker (prob error creating it)
-          if (bazarMap.params.cluster) {
-            bazarMap.$refs.cluster.addLayers(entries.map(entry => entry.marker))
-          } else {
-            oldVal.filter(entry => entry.marker).forEach(entry => entry.marker.remove())
-            entries.forEach(entry => {
-              try { entry.marker.addTo(bazarMap.map) }
-              catch(error) { console.error(`Entry ${entry.id_fiche} has invalid geolocation`, error) }
-            })
-          }
-        })
-      }
+    entries: {
+      handler(newVal, oldVal) {
+        let newIds = newVal.map(e => e.id_fiche)
+        let oldIds = oldVal.map(e => e.id_fiche)
+        if (!this.arraysEqual(newIds, oldIds)) {
+          let bazarMap = this;
+          nextTick(function() {
+            bazarMap.entries.forEach(entry => bazarMap.createMarker(entry))
+            let entries = bazarMap.entries.filter(entry => entry.marker) // remove entries without marker (prob error creating it)
+            if (bazarMap.params.cluster) {
+              bazarMap.$refs.cluster.addLayers(entries.map(entry => entry.marker))
+            } else {
+              oldVal.filter(entry => entry.marker).forEach(entry => entry.marker.remove())
+              entries.forEach(entry => {
+                try { entry.marker.addTo(bazarMap.map) }
+                catch(error) { console.error(`Entry ${entry.id_fiche} has invalid geolocation`, error) }
+              })
+            }
+          })
+        }
+      },
+      deep: true
     }
   },
   template: `
diff --git a/tools/bazar/presentation/javascripts/components/LeafletMarkerCluster.js b/tools/bazar/presentation/javascripts/components/LeafletMarkerCluster.js
@@ -9,6 +9,7 @@ const { nextTick } = Vue
 
 export default {
   props: props,
+  emits: ['ready'],
   data() {
     return {
       ready: false,
diff --git a/tools/bazar/presentation/javascripts/components/Panel.js b/tools/bazar/presentation/javascripts/components/Panel.js
@@ -13,6 +13,7 @@ export default {
       default: true
     },
   },
+  emits: ['update:collapsed'],
   data() {
     return {
       internalCollapsed: true // value to work internally, name should not conflict with prop

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`export default {`
`2`	`2`	`props: [ 'value', 'config' ],`
	`3`	`+ emits: ['input'],`
`3`	`4`	`mounted() {`
`4`	`5`	`const palette = [`
`5`	`6`	`[`