docs: enhance demo

Author: elevatebart

demo/App.vue

@@ -7,12 +7,14 @@
     <VueLive :code="codeTemplate" :layout="CustomLayout"/>
     <h2>Pure JavaScript code</h2>
     <VueLive :code="codeJs" :layout="CustomLayout"/>
-    <h2>and even a weird hybrid format</h2>
+    <h2>With imported components</h2>
+    <VueLive :code="`<date-picker />`" :layout="CustomLayout" :components="registeredComponents"/>
   </main>
 </template>
 <script>
 import VueLive from "../src/VueLive";
 import CustomLayout from "./CustomLayout";
+import DatePicker from "vuejs-datepicker";
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import codeSfc from "!!raw-loader!./assets/Button.vue";
 import codeJs from "!!raw-loader!./assets/input.js";
@@ -23,6 +25,7 @@ export default {
   components: { VueLive },
   data() {
     return {
+      registeredComponents: { DatePicker },
       codeSfc,
       codeTemplate,
       codeJs,

demo/CustomLayout.vue

@@ -15,10 +15,18 @@
   margin: 30px auto;
   border-radius: 10px;
   border: 1px solid #ccc;
-  overflow: hidden;
 }
 
 .preview-code > div {
   width: 100%;
 }
+
+.preview-code > div:first-child {
+  border-radius: 10px 0 0 10px;
+  overflow: hidden;
+}
+
+.preview-code > div:last-child {
+  padding: 30px;
+}
 </style>

demo/assets/PureTemplate.html

@@ -1,6 +1,4 @@
-<div style="text-align:center;">
-  <h1>pure template</h1>
-  <h2>pure template</h2>
-  <h3>pure template</h3>
-  <h4>pure template</h4>
-</div>
+<h1>pure template</h1>
+<h2>pure template</h2>
+<h3>pure template</h3>
+<h4>pure template</h4>

demo/assets/input.js

@@ -1,9 +1,9 @@
 new Vue({
   template: `
-  <div style="padding:30px">
+<div>
   <input v-model="value" type="checkbox" :name="cname">
   <h1 v-if="value">I am checked</h1>
-  </div>`,
+</div>`,
   data() {
     return {
       cname: "myCheck",

package.json

@@ -34,7 +34,8 @@
     "babel-jest": "^23.6.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "raw-loader": "^2.0.0"
+    "raw-loader": "^2.0.0",
+    "vuejs-datepicker": "^1.5.4"
   },
   "eslintConfig": {
     "root": true,

yarn.lock

@@ -9484,6 +9484,11 @@ vue@^2.6.10:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
 
+vuejs-datepicker@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/vuejs-datepicker/-/vuejs-datepicker-1.5.4.tgz#dacdb5eb5ef44342c67cb59b93a0d5da9c1809b3"
+  integrity sha512-AVzgu3pb/fF/Sj3qu8YPnp7KhtsXkm8TSnBEcyYsWb1bMJr5FdPCxuIzISgw5kq0It7HkVJUGXQ4CiCwq9hhww==
+
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"