feat: added prop dataScope for use outside data to the preview (#32)

Author: magersoft

src/Preview.vue

@@ -49,6 +49,14 @@ export default {
     jsx: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Outside data to the preview
+     * @example { count: 1 }
+     */
+    dataScope: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {
@@ -109,6 +117,11 @@ export default {
               adaptCreateElement,
               concatenate
             ) || {};
+
+          if (this.dataScope) {
+            const mergeData = { ...data.data(), ...this.dataScope  };
+            data.data = () => mergeData;
+          }
         }
         if (renderedComponent.template) {
           // if this is a pure template or if we are in hybrid vsg mode,

src/VueLive.vue

@@ -6,6 +6,7 @@
     :language="lang"
     :prismLang="prismLang"
     :requires="requires"
+    :data-scope="dataScope"
     :components="components"
   >
     <template v-slot:editor>
@@ -25,6 +26,7 @@
         :components="components"
         :requires="requires"
         :jsx="jsx"
+        :data-scope="dataScope"
       />
     </template>
   </component>
@@ -110,6 +112,14 @@ export default {
     editorProps: {
       type: Object,
       default: () => ({})
+    },
+    /**
+     * Outside data to the preview
+     * @example { count: 1 }
+     */
+    dataScope: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {