feat: support for @change and @init events (vue)

Author: FGRibreau

packages/ui-predicate-vue/examples/simple.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <h1>Simple ui-predicate usage</h1>
-    <ui-predicate :config="config" @onChange="onChange"></ui-predicate>
+    <ui-predicate :config="config" @change="onChange" @init="onChange"></ui-predicate>
     <p>Tips: Use "alt + click" to create a sub-group.</p>
     <pre>{{ ast }}</pre>
   </div>

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

@@ -74,6 +74,10 @@ module.exports = {
         this.setIsInAddCompoundMode(false);
       }
     },
+    onChange(ctrl) {
+      // emit 'change' event
+      this.$emit('change', ctrl);
+    },
   },
   mounted() {
     const vm = this;
@@ -86,6 +90,9 @@ module.exports = {
         vm.ctrl = ctrl;
         vm.root = ctrl.root;
         vm.columns = ctrl.columns;
+        // emit 'init' event
+        vm.$emit('init', ctrl);
+        ctrl.on('changed', vm.onChange);
       },
       err => {
         console.error(err);
@@ -97,6 +104,7 @@ module.exports = {
     window.addEventListener('keydown', this.onAltPressed);
   },
   destroyed() {
+    this.ctrl.off();
     window.removeEventListener('keyup', this.onAltReleased);
     window.removeEventListener('keydown', this.onAltPressed);
   },