update docs

Author: officert

docs-src/components/Examples-openOn/template.html

@@ -1,4 +1,5 @@
 <div id="examples">
+  <h2>Setting panel openOn</h2>
   <p>
     Open panels on the left, right, top or bottom side using the <code>openOn</code> option:
   </p>

docs-src/components/Examples-passingData/index.vue

@@ -0,0 +1,34 @@
+<template src="./template.html">
+</template>
+
+<script>
+export default {
+  name: 'examples-passing-data',
+  data() {
+    return {
+      name: null,
+      age: null
+    }
+  },
+  methods: {
+    showPanel() {
+      const panelResult = this.$showPanel({
+        component: 'panel-2',
+        width: 600,
+        openOn: 'right',
+        props: {
+          age: this.age
+        }
+      });
+
+      panelResult.promise
+        .then(result => {
+          this.name = result;
+        });
+    }
+  }
+};
+</script>
+
+<style lang="less">
+</style>

docs-src/components/Examples-passingData/template.html

@@ -0,0 +1,61 @@
+<div id="examples">
+  <h2>Passing Data</h2>
+  <p>
+    You can pass data to your components by using the <code>props</code> property:
+  </p>
+  <pre class="highlight">
+const panelResult = this.$showPanel({
+    component: "panel-2",
+    props: {
+      age: {{ age }}
+    }
+});</pre>
+  <p>
+    And you can receive data from your panel by using the <code>promise</code> property of the <code>PanelResult</code> object:
+  </p>
+  <pre class="highlight">
+const panelResult = this.$showPanel({
+    component: "panel-2",
+    props: {
+      age: {{ age }}
+    }
+});
+
+panelResult.promise
+  .then(result => {
+    //result is the value passed from your component calling <strong>this.$emit('close-panel', //some value);</strong>
+  });</pre>
+  <p>
+    In your panel component you just need to call <code>this.$emit('close-panel')</code> to close your panel:
+  </p>
+  <pre class="highlight">
+//in your component's code ("panel-2" in this example)
+
+{
+  props: {
+      age: {
+        type: String,
+        required: true
+      }
+  },
+  data() {
+    name : null
+  },
+  methods: {
+    closePanel() {
+      this.$emit('closePanel', {});
+    }
+  }
+}</pre>
+  <h2>Example</h2>
+  <div class="form-group">
+    <label>What's your age?</label>
+    <input type="number" class="form-control" v-model="age" />
+  </div>
+  <div class="form-group" v-if="name">
+    Your name is {{ name }}
+  </div>
+  <button @click.prevent="showPanel">
+    Show Panel
+  </button>
+</div>

docs-src/components/Examples-width/template.html

@@ -1,4 +1,5 @@
 <div id="examples">
+  <h2>Setting panel width</h2>
   <p>
     Open panels on the left, right, top or bottom side using the <code>openOn</code> option:
   </p>

docs-src/components/Panel2/index.vue

@@ -0,0 +1,30 @@
+<template src="./template.html">
+</template>
+
+<script>
+export default {
+  name: 'panel-2',
+  props: {
+    age: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      name: null
+    }
+  },
+  methods: {
+    closePanel() {
+      this.$emit('closePanel', this.name);
+    }
+  }
+};
+</script>
+
+<style lang="less">
+#panel-2 {
+    padding: 45px;
+}
+</style>

docs-src/components/Panel2/template.html

@@ -0,0 +1,11 @@
+<div id="panel-2">
+  You are {{ age }} years old!
+
+  <div class="form-group">
+    <label>What's your name?</label>
+    <input type="text" class="form-control" v-model="name" />
+  </div>
+  <button @click.prevent="closePanel">
+    Close Panel
+  </button>
+</div>

docs-src/components/PanelResult/template.html

@@ -64,4 +64,7 @@ <h2>Panel Result</h2>
       });
   }
 }</pre>
+  <p>
+    <router-link :to="{ name : 'ExamplesPassingData' }">Learn more about the passing data here.</router-link>
+  </p>
 </div>

docs-src/components/Sidebar/index.vue

@@ -21,6 +21,7 @@ export default {
     padding-top: 20px;
     position: sticky;
     top: 0;
+    height: 300px;
 
     ul {
         margin: 0;

docs-src/components/Sidebar/template.html

@@ -35,6 +35,11 @@
             Width
           </router-link>
         </li>
+        <li>
+          <router-link activeClass="active" :to="{ name : 'ExamplesPassingData' }">
+            Passing Data
+          </router-link>
+        </li>
       </ul>
     </li>
   </ul>

docs-src/index.js

@@ -4,12 +4,14 @@ import VueFriendlyIframe from '../src/index';
 import App from './components/App';
 import Sidebar from './components/Sidebar';
 import Panel1 from './components/Panel1';
+import Panel2 from './components/Panel2';
 import router from './router';
 
 Vue.use(VueFriendlyIframe);
 
 Vue.component('sidebar', Sidebar);
 Vue.component('panel-1', Panel1);
+Vue.component('panel-2', Panel2);
 
 new Vue({
     template: '<App></App>',

docs-src/router.js

@@ -8,6 +8,7 @@ import PanelResult from './components/PanelResult';
 import Examples from './components/Examples';
 import ExamplesOpenOn from './components/Examples-openOn';
 import ExamplesWidth from './components/Examples-width';
+import ExamplesPassingData from './components/Examples-passingData';
 
 Vue.use(VueRouter);
 
@@ -46,6 +47,10 @@ const routes = [{
     name: 'ExamplesWidth',
     path: '/examples/width',
     component: ExamplesWidth,
+  }, {
+    name: 'ExamplesPassingData',
+    path: '/examples/passing-data',
+    component: ExamplesPassingData,
   }]
 }];