From 5973352352ac97efa4d65885e848adbde3fb053b Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Mon, 12 Aug 2019 15:37:38 +0200
Subject: [PATCH] Update trait docs

---
 docs/.vuepress/components/DemoViewer.vue | 33 ++++++++++++++++++++++++
 docs/modules/Traits.md                   | 16 +++++++++---
 2 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 docs/.vuepress/components/DemoViewer.vue

diff --git a/docs/.vuepress/components/DemoViewer.vue b/docs/.vuepress/components/DemoViewer.vue
new file mode 100644
index 000000000..bec815183
--- /dev/null
+++ b/docs/.vuepress/components/DemoViewer.vue
@@ -0,0 +1,33 @@
+<template>
+    <iframe :width="width" :height="height" :src="src" allowfullscreen="allowfullscreen" frameborder="0"/>
+</template>
+
+<script>
+export default {
+    name: 'DemoViewer',
+    props: {
+        value: {
+            type: String,
+            default: '',
+        },
+        user: {
+            type: String,
+            default: 'artur_arseniev',
+        },
+        width: {
+            type: String,
+            default: '100%',
+        },
+        height: {
+            type: String,
+            default: '300',
+        },
+    },
+    computed: {
+        src() {
+            const { value, user } = this;
+            return `//jsfiddle.net/${user}/${value}/embedded/js,html,css,result`;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md
index fdfc3c8a2..0b14f0e50 100644
--- a/docs/modules/Traits.md
+++ b/docs/modules/Traits.md
@@ -488,7 +488,7 @@ To recap what we have done so far, to create a custom trait type all you will ne
 ### Result
 
 The final result of what we have done can be seen here
-<iframe width="100%" height="300" src="//jsfiddle.net/artur_arseniev/yf6amdqb/10/embedded/js,html,css,result" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<demo-viewer value="yf6amdqb/10"/>
 
 ### Integrate external UI components
 
@@ -499,7 +499,7 @@ editor.TraitManager.addType('slider', {
   createInput({ trait }) {
     const vueInst = new Vue({ render: h => h(VueSlider) }).$mount();
     const sliderInst = vueInst.$children[0];
-    sliderInst.$on('change', ev => this.onChange(ev));
+    sliderInst.$on('change', ev => this.onChange(ev)); // Use onChange to trigger onEvent
     this.sliderInst = sliderInst;
     return vueInst.$el;
   },
@@ -516,4 +516,14 @@ editor.TraitManager.addType('slider', {
 });
 ```
 
-<iframe width="100%" height="300" src="//jsfiddle.net/artur_arseniev/x9sw2udv/77/embedded/js,html,css,result" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
\ No newline at end of file
+<demo-viewer value="x9sw2udv/77"/>
+
+The integration with external components is possible by following those simple core points:
+
+1. **Component rendering**: `new Vue({ render: ...`<br/>
+  Depends on the framework, for example, in React it should be `ReactDOM.render(element, ...`
+1. **Change propogation**: `sliderInst.$on('change', ev => this.onChange(ev))`<br/>
+  The framework should have a mechanism to subscribe to changes and the component [should expose that change](https://nightcatsama.github.io/vue-slider-component/#/api/events)<br/>
+  We've also used `onChange` method which comes handy when you need to trigger manually the `onEvent` event (you should never call directly `onEvent` method, but only via `onChange` when you need)
+1. **Property getters/setters**: [`sliderInst.getValue()`](https://nightcatsama.github.io/vue-slider-component/#/api/methods?hash=getvalue)/ [`sliderInst.setValue(value)`](https://nightcatsama.github.io/vue-slider-component/#/api/methods?hash=setvaluevalue)<br/>
+  The component should allow to read and write data from the instance