Refactor on live editor implementation
mertsincan
parent
cc4517a8f9
commit
e25ec06753
|
|
@ -64,7 +64,7 @@ export default {
|
|||
this.data.forEach(el => {
|
||||
dataArr.push(el.split(','))
|
||||
})
|
||||
|
||||
|
||||
dataArr.forEach((el, i) => {
|
||||
tabs.push(
|
||||
<TabPanel key={`${el}_i`} header={`${el}.json`}>
|
||||
|
|
@ -113,11 +113,26 @@ export default {
|
|||
},
|
||||
renderSource(sourceType, tabs) {
|
||||
if (this.sources && this.sources[sourceType]) {
|
||||
let extFiles = this.extFiles ? this.extFiles[sourceType] || this.extFiles : null;
|
||||
extFiles = extFiles && Object.entries(extFiles).map(([key, value], i) => {
|
||||
if (key === 'index.css' || !value.content) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<pre v-code><code>
|
||||
{`\n/* ${key.replace('src/components/', '')} */\n`}
|
||||
{this.renderContent(value)}
|
||||
</code></pre>
|
||||
)
|
||||
});
|
||||
|
||||
tabs.push(
|
||||
<TabPanel key={sourceType} header={this.sources[sourceType].tabName}>
|
||||
<pre v-code><code>
|
||||
{this.renderContent(this.sources[sourceType])}
|
||||
</code></pre>
|
||||
{extFiles}
|
||||
</TabPanel>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="DynamicDialogDemo" :sources="sources" :extPages="pages" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
|
||||
<AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
|
||||
<h5>DialogService</h5>
|
||||
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
|
||||
|
||||
|
|
@ -514,7 +514,7 @@ export default {
|
|||
<p-column field="name" header="Name"></p-column>
|
||||
<p-column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column field="category" header="Category"></p-column>
|
||||
|
|
@ -595,113 +595,13 @@ export default {
|
|||
.use(primevue.toastservice)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'demo1': {
|
||||
tabName: 'ProductListDemo.vue',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-content-end mt-1 mb-3">
|
||||
<Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
|
||||
</div>
|
||||
<DataTable :value="products" responsiveLayout="scroll">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
<Column style="width:5rem">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductService from '../../service/ProductService';
|
||||
import InfoDemo from './InfoDemo.vue';
|
||||
|
||||
export default {
|
||||
inject: ['dialogRef'],
|
||||
data() {
|
||||
return {
|
||||
products: null
|
||||
}
|
||||
},
|
||||
productService: null,
|
||||
created() {
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data.slice(0,5));
|
||||
},
|
||||
methods: {
|
||||
selectProduct(data) {
|
||||
this.dialogRef.close(data);
|
||||
},
|
||||
showInfo() {
|
||||
this.$dialog.open(InfoDemo, {
|
||||
props: {
|
||||
header: 'Information',
|
||||
modal: true,
|
||||
dismissableMask: true
|
||||
},
|
||||
data: {
|
||||
totalProducts: this.products ? this.products.length : 0
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'demo2': {
|
||||
tabName: 'InfoDemo.vue',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||
<div class="flex justify-content-end">
|
||||
<Button type="button" label="Close" @click="closeDialog"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['dialogRef'],
|
||||
data() {
|
||||
return {
|
||||
totalProducts: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.totalProducts = this.dialogRef.data.totalProducts;
|
||||
},
|
||||
methods: {
|
||||
closeDialog() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
`
|
||||
}
|
||||
},
|
||||
pages: [
|
||||
{
|
||||
tabName: 'ProductListDemo',
|
||||
content: `
|
||||
extFiles: {
|
||||
'options-api': {
|
||||
'src/components/ProductListDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-content-end mt-1 mb-3">
|
||||
|
|
@ -712,7 +612,7 @@ export default {
|
|||
<Column field="name" header="Name"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
|
|
@ -764,12 +664,10 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
`
|
||||
},
|
||||
{
|
||||
tabName: 'InfoDemo',
|
||||
content: `
|
||||
},
|
||||
'src/components/InfoDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||
|
|
@ -797,10 +695,109 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
},
|
||||
'composition-api': {
|
||||
'src/components/ProductListDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-content-end mt-1 mb-3">
|
||||
<Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
|
||||
</div>
|
||||
<DataTable :value="products" responsiveLayout="scroll">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
<Column style="width:5rem">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductService from '../service/ProductService';
|
||||
import InfoDemo from './InfoDemo.vue';
|
||||
|
||||
export default {
|
||||
inject: ['dialogRef'],
|
||||
data() {
|
||||
return {
|
||||
products: null
|
||||
}
|
||||
},
|
||||
productService: null,
|
||||
created() {
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data.slice(0,5));
|
||||
},
|
||||
methods: {
|
||||
selectProduct(data) {
|
||||
this.dialogRef.close(data);
|
||||
},
|
||||
showInfo() {
|
||||
this.$dialog.open(InfoDemo, {
|
||||
props: {
|
||||
header: 'Information',
|
||||
modal: true,
|
||||
dismissableMask: true
|
||||
},
|
||||
data: {
|
||||
totalProducts: this.products ? this.products.length : 0
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'src/components/InfoDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||
<div class="flex justify-content-end">
|
||||
<Button type="button" label="Close" @click="closeDialog"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['dialogRef'],
|
||||
data() {
|
||||
return {
|
||||
totalProducts: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.totalProducts = this.dialogRef.data.totalProducts;
|
||||
},
|
||||
methods: {
|
||||
closeDialog() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
import EventBus from '@/AppEventBus';
|
||||
import { services, data } from './LiveEditorData';
|
||||
|
||||
const sourceTypes = ['options-api', 'composition-api', 'browser-source'];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -80,8 +82,10 @@ export default {
|
|||
},
|
||||
|
||||
createSandboxParameters(sourceType, nameWithExt, files, extDependencies) {
|
||||
const boolExtFiles = !this.extFiles;
|
||||
let extFiles = !boolExtFiles ? {...this.extFiles} : {};
|
||||
/* eslint-disable */
|
||||
let extFiles = this.extFiles ? (this.extFiles[sourceType] ? {...this.extFiles[sourceType]} : Object.keys(this.extFiles).filter(k => !sourceTypes.includes(k)).reduce((result, current) => (result[current] = this.extFiles[current]) && result, {})) : {};
|
||||
Object.entries(extFiles).forEach(([key, value]) => extFiles[key].content && (extFiles[key].content = value.content.replaceAll('<\\/script>', '<\/script>')));
|
||||
|
||||
let extIndexCSS = extFiles['index.css'] || '';
|
||||
delete extFiles['index.css'];
|
||||
|
||||
|
|
@ -295,7 +299,7 @@ export default {
|
|||
${extIndexCSS}
|
||||
`
|
||||
};
|
||||
|
||||
|
||||
if (sourceType === 'browser-source') {
|
||||
return {
|
||||
files: {
|
||||
|
|
@ -397,8 +401,8 @@ export default {
|
|||
|
||||
serviceArr.forEach(serv => {
|
||||
path = sourceType === 'browser-source' ? `${serv}.js` : `src/service/${serv}.js`;
|
||||
let _content = sourceType === 'browser-source' ?
|
||||
`${services[serv].replaceAll('export default class', 'class').replaceAll('demo/data/', './')}` :
|
||||
let _content = sourceType === 'browser-source' ?
|
||||
`${services[serv].replaceAll('export default class', 'class').replaceAll('demo/data/', './')}` :
|
||||
`${services[serv]}`;
|
||||
|
||||
_files[path] = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue