fix(ui-predicate-vue3): correct typo in dispatched event name

Author: Yannick243

packages/ui-predicate-vue3/getting-started/simple.vue

@@ -4,7 +4,7 @@
       <ui-predicate
         v-model="predicate"
         :columns="columns"
-        @change="onChange"
+        @changed="onChange"
         @initialized="onInitialized"
       />
     </div>

packages/ui-predicate-vue3/src/default-components/predicate-add.vue

@@ -8,5 +8,9 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  predicate: {
+    type: Object,
+    required: true,
+  },
 })
 </script>

packages/ui-predicate-vue3/src/default-components/predicate-remove.vue

@@ -8,5 +8,8 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  predicate: {
+    type: Object,
+  },
 });
 </script>

packages/ui-predicate-vue3/src/ui-predicate.stories.js

@@ -46,10 +46,10 @@ export const Events = {
     setup() {
       return { ...args };
     },
-    template: '<ui-predicate :columns="columns" v-model="data" @change="onChange" @initialized="onInit"></ui-predicate>',
+    template: '<ui-predicate :columns="columns" v-model="data" @changed="onChange" @initialized="onInit"></ui-predicate>',
   }),
   args: {
-    onChange: action('`change` event'),
+    onChanged: action('`changed` event'),
     onInit: action('`initialized` event'),
   },
 };
@@ -84,7 +84,7 @@ export const CustomizeDefaultUIComponents = {
          :columns="columns"
          v-model="data"
          :ui="ui"
-         @change="onChange"
+         @changed="onChange"
          @initialized="onInit"/>`,
   }),
   args: {
@@ -111,7 +111,7 @@ export const CustomizeDefaultUIComponents = {
             >
             <datalist
               id="targets-datalist"
-              @change="$emit('change', $event.target.value)">
+              @changed="$emit('changed', $event.target.value)">
               <option
                   v-for="target in columns.targets"
                   :key="target.target_id"
@@ -122,7 +122,7 @@ export const CustomizeDefaultUIComponents = {
         `,
       },
     },
-    onChange: action('`change` event'),
+    onChanged: action('`changed` event'),
     onInit: action('`initialized` event'),
   },
 };
@@ -154,11 +154,11 @@ export const CustomizeCSS = {
       class="custom-css"
       :columns="columns"
       v-model="data"
-      @change="onChange"
+      @changed="onChange"
       @initialized="onInit"/>`,
   }),
   args: {
-    onChange: action('`change` event'),
+    onChanged: action('`changed` event'),
     onInit: action('`initialized` event'),
   },
 };

packages/ui-predicate-vue3/src/ui-predicate.vue

@@ -34,7 +34,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['change', 'initialized', 'error', 'isInAddCompoundMode']);
+const emit = defineEmits([
+  'error',
+  'changed',
+  'initialized',
+  'isInAddCompoundMode',
+  'update:model-value'
+]);
 
 // Reactive state
 const isCoreReady = ref(false);
@@ -94,7 +100,7 @@ const triggerChanged = () => {
    * @event change
    * @type {Object}
   */
-  emit("change", jsonValue);
+  emit("changed", jsonValue);
   model.value = jsonValue;
 
    // A small hack (for now) to handle reactivity (since ui-predicate-core doesn't handle js Proxies for now)
@@ -127,7 +133,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (ctrl) {
+  if (ctrl.value) {
     ctrl.value.off();
   }
   window.removeEventListener('keyup', onAltReleased);
@@ -140,6 +146,7 @@ onBeforeUnmount(() => {
   display: flex;
 }
 .ui-predicate__row {
+  display: flex;
   flex-direction: row;
 }
 .ui-predicate__col {