feat: display serialized data in storybook

Author: FGRibreau

docs/packages/ui-predicate-vue/0.1.2/examples/iframe.html

@@ -93,5 +93,5 @@ <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
             <code id="error-stack"></code>
         </pre>
     </div>
-<script type="text/javascript" src="static/runtime~preview.e91a365f8ec2aa547fa7.bundle.js"></script><script type="text/javascript" src="static/vendors~preview.915902ed40eb1022bb0f.bundle.js"></script><script type="text/javascript" src="static/preview.2b8a5b08167ca0a3a0c2.bundle.js"></script></body>
+<script type="text/javascript" src="static/runtime~preview.e91a365f8ec2aa547fa7.bundle.js"></script><script type="text/javascript" src="static/vendors~preview.915902ed40eb1022bb0f.bundle.js"></script><script type="text/javascript" src="static/preview.a6ae19ff52581013e164.bundle.js"></script></body>
 </html>

docs/packages/ui-predicate-vue/0.1.2/examples/static/preview.2b8a5b08167ca0a3a0c2.bundle.js

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

docs/packages/ui-predicate-vue/0.1.2/examples/static/preview.a6ae19ff52581013e164.bundle.js

@@ -64,7 +64,7 @@ storiesOf('ui-predicate', module)
     }
   )
   .add(
-    'available events',
+    'events',
     () => ({
       template:
         '<ui-predicate :config="config" @changed="onChange" @initialized="onInit"></ui-predicate>',
@@ -77,4 +77,25 @@ storiesOf('ui-predicate', module)
       },
     }),
     { notes: '' }
+  )
+  .add(
+    'get data',
+    () => ({
+      template: `<div>
+        <ui-predicate :config="config" @changed="onChange" @initialized="onChange"></ui-predicate>
+        <textarea style="width:100%;height:30vh">{{ serialized }}</textarea>
+      </div>`,
+      data() {
+        return {
+          config: DEFAULT_CONFIG,
+          serialized: '',
+        };
+      },
+      methods: {
+        onChange(ctrl) {
+          this.serialized = ctrl.toJSON();
+        },
+      },
+    }),
+    { notes: '' }
   );