From f3908a88fec9aca03e74245898b9bf9370ac1eef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Thu, 7 Jan 2021 17:02:49 +0300 Subject: [PATCH] Update LiveEditor --- src/views/liveeditor/LiveEditor.vue | 48 +++++++++++++++++++------- src/views/liveeditor/LiveEditorData.js | 40 +++++++++++++-------- 2 files changed, 61 insertions(+), 27 deletions(-) diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue index c2cbbe62e..139b1a8ee 100644 --- a/src/views/liveeditor/LiveEditor.vue +++ b/src/views/liveeditor/LiveEditor.vue @@ -30,7 +30,10 @@ export default { type: String, default: null }, - + components: { + type: Array, + default: null + }, dependencies: { type: String, default: null @@ -116,15 +119,29 @@ export default { let extension = '.vue'; let extDependencies = this.dependencies || {}; let content = this.sources.template.content; + let style = this.sources.template.style || ''; let scriptText = 'script'; - - let _files = {}; + let _files = {}, components = '', imports = ''; _files[`src/components/${name}${extension}`] = { - content: ` - ${content} - -` + content: `${content} + + +${style}` + } + + if(this.components) { + this.components.forEach(comp => { + imports += `import ${comp} from "primevue/${comp.toLowerCase()}"; +`; + components += `app.component("${comp}", ${comp}); +`; + }) + } else { + imports = `import ${this.name.slice(0, -4)} from "primevue/${this.name.slice(0, -4).toLowerCase()}"; +`; + components = `app.component("${this.name.slice(0, -4)}", ${this.name.slice(0, -4)}); +`; } _files['src/main.js'] = { @@ -134,12 +151,11 @@ import "primevue/resources/themes/saga-blue/theme.css"; import "primevue/resources/primevue.min.css"; import "primeicons/primeicons.css"; import App from "./App.vue"; -import ${this.name.slice(0, -4)} from "primevue/${this.name.slice(0, -4).toLowerCase()}"; import PrimeVue from "primevue/config"; +${imports} const app = createApp(App); app.use(PrimeVue, { ripple: true }); -app.component("${this.name.slice(0, -4)}", ${this.name.slice(0, -4)}); - +${components} app.mount("#app"); ` } @@ -151,7 +167,6 @@ app.mount("#app"); - @@ -414,7 +429,6 @@ img.flag { } `, } - if (this.service) { _files[`src/service/${this.service}.js`] = { @@ -433,6 +447,16 @@ img.flag { }); } + if(this.name === 'EditorDemo') { + extDependencies['quill'] = "^1.3.7"; + } + if(this.name === 'FullCalendarDemo') { + extDependencies['@fullcalendar/core'] = "5.4.0"; + extDependencies['@fullcalendar/daygrid'] = "5.4.0"; + extDependencies['@fullcalendar/interaction'] = "5.4.0"; + extDependencies['@fullcalendar/timegrid'] = "5.4.0"; + } + return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies); } } diff --git a/src/views/liveeditor/LiveEditorData.js b/src/views/liveeditor/LiveEditorData.js index 9f2e1d88e..db10c3855 100644 --- a/src/views/liveeditor/LiveEditorData.js +++ b/src/views/liveeditor/LiveEditorData.js @@ -1,88 +1,98 @@ const services = { 'CountryService': ` import axios from 'axios'; +import countriesData from '../../public/data/countries.json'; export default class CountryService { getCountries() { - return axios.get('data/countries.json').then(res => res.data.data); + return axios.get(countriesData).then((res) => res.config.url.data); } -} +} `, 'CustomerService': ` import axios from 'axios'; +import customersSmallData from '../../public/data/customers-large.json'; +import customersMediumData from '../../public/data/customers-large.json'; +import customersLargeData from '../../public/data/customers-large.json'; +import customersXLargeData from '../../public/data/customers-large.json'; export default class CustomerService { getCustomersSmall() { - return axios.get('data/customers-small.json').then(res => res.data.data); + return axios.get(customersSmallData).then(res => res.config.url.data); } getCustomersMedium() { - return axios.get('data/customers-medium.json').then(res => res.data.data); + return axios.get(customersMediumData).then(res => res.config.url.data); } getCustomersLarge() { - return axios.get('data/customers-large.json').then(res => res.data.data); + return axios.get(customersLargeData).then(res => res.config.url.data); } getCustomersXLarge() { - return axios.get('data/customers-xlarge.json').then(res => res.data.data); + return axios.get(customersXLargeData).then(res => res.config.url.data); } } `, 'EventService': ` import axios from 'axios'; +import eventData from '../../public/data/events.json'; export default class EventService { getEvents() { - return axios.get('data/events.json').then(res => res.data.data); + return axios.get(eventData).then(res => res.config.url.data); } } `, 'NodeService': ` import axios from 'axios'; +import treeTableNodeData from '../../public/data/treetablenodes.json'; +import treeNodeData from '../../public/data/treenodes.json'; export default class NodeService { getTreeTableNodes() { - return axios.get('data/treetablenodes.json') - .then(res => res.data.root); + return axios.get(treeTableNodeData).then(res => res.config.url.root); } getTreeNodes() { - return axios.get('data/treenodes.json') - .then(res => res.data.root); + return axios.get(treeNodeData).then(res => res.config.url.root); } } `, 'PhotoService': ` import axios from 'axios'; +import photoData from '../../public/data/photos.json'; export default class PhotoService { getImages() { - return axios.get('data/photos.json').then(res => res.data.data); + return axios.get(photoData).then(res => res.config.url.data); } } `, 'ProductService': ` import axios from 'axios'; +import productsSmallData from '../../public/data/products-small.json'; +import productsData from '../../public/data/productsjson'; +import productsWithOrdersSmallData from '../../public/data/products-orders-small.json'; export default class ProductService { getProductsSmall() { - return axios.get('data/products-small.json').then(res => res.data.data); + return axios.get(productsSmallData).then(res => res.config.url.data); } getProducts() { - return axios.get('data/products.json').then(res => res.data.data); + return axios.get(productsData).then(res => res.config.url.data); } getProductsWithOrdersSmall() { - return axios.get('data/products-orders-small.json').then(res => res.data.data); + return axios.get(productsWwithOrdersSmallData).then(res => res.config.url.data); } } `