LiveEditor updated

src/AppDocumentation.vue

@@ -11,7 +11,8 @@ export default {
         data: null,
         dependencies: null,
         extPages: null,
-        extFiles: null
+        extFiles: null,
+        component: null
     },
     methods: {
         renderPanels() {
@@ -26,7 +27,7 @@ export default {
                 /* eslint-disable */
                 tabs.push(
                     <TabPanel header={this.sources[sourceType].tabName}>
-                        <LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages} extFiles={this.extFiles}/>
+                        <LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages} extFiles={this.extFiles} component={this.component}/>
                         <pre v-code><code>
                             {this.sources[sourceType].content.replace('<\\/script>', '<\/script>')}
                         </code></pre>

src/views/chart/BarChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart"/>
 </template>
 
 <script>

src/views/chart/ComboChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart"/>
 </template>
 
 <script>

src/views/chart/DoughnutChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>

src/views/chart/LineChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>

src/views/chart/PieChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>

src/views/chart/PolarAreaChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>

src/views/chart/RadarChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>

src/views/editor/EditorDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="EditorDemo" :sources="sources" :dependencies="{'quill': '^1.3.7'}">
+	<AppDoc name="EditorDemo" :sources="sources" :dependencies="{'quill': '^1.3.7'}" component="Editor">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Editor from 'primevue/editor';

src/views/fullcalendar/FullCalendarDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']" :dependencies="{'@fullcalendar/core': '5.4.0', '@fullcalendar/daygrid': '5.4.0', '@fullcalendar/interaction': '5.4.0', '@fullcalendar/timegrid': '5.4.0'}">
+	<AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']" :dependencies="{'@fullcalendar/core': '5.4.0', '@fullcalendar/daygrid': '5.4.0', '@fullcalendar/interaction': '5.4.0', '@fullcalendar/timegrid': '5.4.0'}" component="FullCalendar">
         <h5>Import</h5>
 <pre v-code.script><code>
 import FullCalendar from 'primevue/fullcalendar';

src/views/liveeditor/LiveEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <span v-if="showEditor">
+    <span v-if="showEditor" class="p-d-flex p-jc-end">
         <SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" />
     </span>
 </template>
@@ -45,6 +45,10 @@ export default {
         extFiles: {
             type: Object,
             default: null
+        },
+        component: {
+            type: String,
+            default: null
         }
     },
     methods: {
@@ -340,9 +344,9 @@ ${extIndexCSS}
             let pages = this.extPages ? this.extPages : '';
             let _files = {}, element = '';
 
-            if(this.dependencies) {
+            if(this.component) {
-                extImport += `import ${name.slice(0, -4)} from 'primevue/${name.slice(0, -4).toLowerCase()}';`
+                extImport += `import ${this.component} from 'primevue/${this.component.toLowerCase()}';`
-                extElement += `app.component('${name.slice(0, -4)}', ${name.slice(0, -4)});`;
+                extElement += `app.component('${this.component}', ${this.component});`;
             }
 
             if (this.service) {