fix: repair default layout

Author: Barthelemy Ledoux

demo/App.vue

@@ -12,6 +12,8 @@
     <VueLive :code="codeJs" :layout="CustomLayout"/>
     <h2>Use the requires prop to make libraries and packages available in the browser</h2>
     <VueLive :code="codeChicago" :layout="CustomLayout" :requires="chicagoRequires"/>
+    <h2>Default Layout</h2>
+    <VueLive :code="`<input type='button' value='I am Groot'>`"/>
     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
   </main>
 </template>
@@ -47,5 +49,8 @@ body {
   font-family: "Roboto Mono", monospace;
   background-color: #ded;
 }
+
+body .prism-editor__line-numbers {
+  box-sizing: border-box;
+}
 </style>
->

src/Preview.vue

@@ -15,14 +15,28 @@ export default {
   name: "VueLivePreviewComponent",
   components: {},
   props: {
+    /**
+     * code rendered
+     */
     code: {
       type: String,
       required: true
     },
+    /**
+     * Hashtable of auto-registered components
+     * @example { DatePicker: VueDatePicker }
+     * @example { VueDatePicker }
+     */
     components: {
       type: Object,
       default: () => {}
     },
+    /**
+     * Hashtable of modules available in require and import statements
+     * in the code prop
+     * @example { lodash: require("lodash") }
+     * @example { moment: require("moment") }
+     */
     requires: {
       type: Object,
       default: () => {}
@@ -38,6 +52,10 @@ export default {
     this.renderComponent(this.code.trim());
   },
   methods: {
+    /**
+     * Generates the Scope Id attribute value. It will be added to each
+     * tag if a style is applied to scope the style only to this example
+     */
     generateScope() {
       return "v-xxxxxxxx".replace(/[xy]/g, c => {
         const r = (Math.random() * 16) | 0;

src/VueLive.vue

@@ -1,7 +1,7 @@
 <template>
-  <VueLiveLayout>
+  <component :is="this.layout ? this.layout : VueLiveDefaultLayout">
     <template v-slot:editor>
-      <PrismEditor :code="model" @change="updatePreview" :language="prismLang" :lineNumbers="true"/>
+      <PrismEditor :code="model" @change="updatePreview" :language="prismLang"/>
     </template>
     <template v-slot:preview>
       <Preview
@@ -12,7 +12,7 @@
         :requires="requires"
       />
     </template>
-  </VueLiveLayout>
+  </component>
 </template>
 <script>
 //load prism somewhere
@@ -27,7 +27,7 @@ import hash from "hash-sum";
 import debounce from "lodash.debounce";
 
 import Preview from "./Preview.vue";
-import VueLiveLayout from "./VueLiveDefaultLayout.vue";
+import VueLiveDefaultLayout from "./VueLiveDefaultLayout.vue";
 
 const LANG_TO_PRISM = {
   vue: "html",
@@ -36,20 +36,37 @@ const LANG_TO_PRISM = {
 
 export default {
   name: "VueLivePreview",
-  components: { PrismEditor, Preview, VueLiveLayout },
+  components: { PrismEditor, Preview },
   props: {
+    /**
+     * code rendered in the preview and the editor
+     */
     code: {
       type: String,
       required: true
     },
+    /**
+     * Layout vue component with 2 slots named `editor` & `preview`
+     */
     layout: {
       type: Object,
       default: undefined
     },
+    /**
+     * Hashtable of auto-registered components
+     * @example { DatePicker: VueDatePicker }
+     * @example { VueDatePicker }
+     */
     components: {
       type: Object,
       default: () => {}
     },
+    /**
+     * Hashtable of modules available in require and import statements
+     * in the Preview component
+     * @example { lodash: require("lodash") }
+     * @example { moment: require("moment") }
+     */
     requires: {
       type: Object,
       default: () => {}
@@ -58,14 +75,10 @@ export default {
   data() {
     return {
       model: this.code,
-      prismLang: "html"
+      prismLang: "html",
+      VueLiveDefaultLayout
     };
   },
-  created() {
-    if (this.layout) {
-      this.$options.components.VueLiveLayout = this.layout;
-    }
-  },
   computed: {
     codeKey() {
       return hash(this.model);

src/VueLiveDefaultLayout.vue

@@ -1,9 +1,12 @@
 <template functional>
-  <div class="vue-live-container">
-    <div>
+  <div
+    class="vue-live-container"
+    style="display:flex; width:950px; max-width:95vw; margin:20px auto;"
+  >
+    <div style="width:50%;">
       <slot name="editor"></slot>
     </div>
-    <div>
+    <div style="background-color:white;width:50%;padding:20px;">
       <slot name="preview"></slot>
     </div>
   </div>

src/utils/addScopedStyle.js

@@ -1,5 +1,9 @@
 import { scoper } from "./styleScoper";
 
+/**
+ * Add a style block to the head to load the styles.
+ * uses the suffix to scope the styles
+ */
 export default function addScopedStyle(css, suffix) {
   const head = document.head || document.getElementsByTagName("head")[0];
   const newstyle = document.createElement("style");