feat: add layoutProps to pass props to layout

Author: elevatebart

demo/App.vue

@@ -24,12 +24,16 @@
     </div>
     <h2>Custom Layout</h2>
     <div>
-      <p>Attributes available for custom layout: </p>
+      <p>Attributes available for custom layout:</p>
       <p>
-        <code>code: String</code>, <code>language: String</code>,
-        <code>components: Object</code>, <code>requires: Object</code>
+        <code>code: String</code>,
+        <code>language: String</code>,
+        <code>components: Object</code>,
+        <code>requires: Object</code>,
+        ... all props passed in the
+        <code>layoutProps</code>
       </p>
-      <VueLive :code="`<input type='button' value='I am Groot' />`" :layout="CustomLayout"/>
+      <VueLive :code="`<input type='button' value='I am Groot' />`" :layout="CustomLayout" />
     </div>
     <h2>It even supports jsx</h2>
     <VueLive :code="realjsx" :layout="CustomLayout" :jsx="true" />

src/VueLive.vue

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="layout ? layout : VueLiveDefaultLayout"
+    ...layoutProps
     :code="stableCode"
     :language="lang"
     :prismLang="prismLang"
@@ -91,6 +92,14 @@ export default {
     jsx: {
       type: Boolean,
       default: false
+    },
+    /**
+     * These props will be passed as a spreat to your layout
+     * They can be used to change the style
+     */
+    layoutProps: {
+      type: Object,
+      default: undefined
     }
   },
   data() {