Update LiveEditor

pull/880/head
Tuğçe Küçükoğlu 2021-01-19 11:30:01 +03:00
parent 00fc9a26ab
commit 8286d6d3f2
2 changed files with 51 additions and 58 deletions

View File

@ -75,9 +75,9 @@ export default {
...extDependencies, ...extDependencies,
'vue': dependencies['vue'], 'vue': dependencies['vue'],
'axios': dependencies['axios'], 'axios': dependencies['axios'],
'primevue': '^3.1.1', 'primevue': 'latest',
'primeflex': dependencies['primeflex'], 'primeflex': dependencies['primeflex'],
'primeicons': dependencies['primeicons'], 'primeicons': 'latest',
'@babel/cli': dependencies['@babel/cli'], '@babel/cli': dependencies['@babel/cli'],
'@vue/cli-plugin-babel': dependencies['@vue/cli-plugin-babel'], '@vue/cli-plugin-babel': dependencies['@vue/cli-plugin-babel'],
'@vue/cli-service': dependencies['@vue/cli-service'], '@vue/cli-service': dependencies['@vue/cli-service'],
@ -121,7 +121,7 @@ export default {
let content = this.sources.template.content; let content = this.sources.template.content;
let style = this.sources.template.style || ''; let style = this.sources.template.style || '';
let scriptText = 'script'; let scriptText = 'script';
let _files = {}, element = '', components = '', imports = '', directives = ''; let _files = {}, importElement = '', element = '', components = '', imports = '', directives = '';
_files[`src/components/${name}${extension}`] = { _files[`src/components/${name}${extension}`] = {
content: `${content} content: `${content}
@ -130,8 +130,13 @@ export default {
${style}` ${style}`
} }
if(name !== 'FloatLabelDemo') {
element += `import ${name.slice(0, -4)} from "primevue/${name.slice(0, -4).toLowerCase()}";
`;
}
if(name === 'ToastDemo'){ if(name === 'ToastDemo'){
imports += `import ToastService from 'primevue/toastservice'; imports += `import ToastService from "primevue/toastservice";
`; `;
directives += `app.use(ToastService); directives += `app.use(ToastService);
`; `;
@ -141,9 +146,9 @@ ${style}`
directiveEl.forEach(dir => { directiveEl.forEach(dir => {
if(name === dir) { if(name === dir) {
imports += `import Tooltip from 'primevue/tooltip'; imports += `import Tooltip from "primevue/tooltip";
`; `;
directives += `app.directive('tooltip', Tooltip); directives += `app.directive("tooltip", Tooltip);
`; `;
} }
}) })
@ -157,12 +162,19 @@ ${style}`
}) })
} }
if(name !== 'TooltipDemo') { if(name !== 'TooltipDemo' && name !== 'RippleDemo' && name !== 'FloatLabelDemo') {
element += `app.component("${name.slice(0, -4)}", ${name.slice(0, -4)});`; element += `app.component("${name.slice(0, -4)}", ${name.slice(0, -4)});`;
} }
if(name === 'TooltipDemo' || name === 'BadgeDemo'){ if(name === 'TooltipDemo' || name === 'RippleDemo'){
directives += `app.directive('${name.slice(0, -4).toLowerCase()}', ${name.slice(0, -4)}); directives += `app.directive("${name.slice(0, -4).toLowerCase()}", ${name.slice(0, -4)});
`;
}
if(name === 'BadgeDemo' || name === 'AvatarDemo'){
imports += `import BadgeDirective from "primevue/badgedirective";
`;
directives += `app.directive("badge", BadgeDirective);
`; `;
} }
@ -174,7 +186,7 @@ import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css"; import "primeicons/primeicons.css";
import App from "./App.vue"; import App from "./App.vue";
import PrimeVue from "primevue/config"; import PrimeVue from "primevue/config";
import ${name.slice(0, -4)} from "primevue/${name.slice(0, -4).toLowerCase()}"; ${importElement}
${imports} ${imports}
const app = createApp(App); const app = createApp(App);
app.use(PrimeVue, { ripple: true }); app.use(PrimeVue, { ripple: true });
@ -215,7 +227,7 @@ export default {
} }
</${scriptText}> </${scriptText}>
<style lang="scss"> <style lang="scss">
@import './App.scss'; @import "./App.scss";
</style>` </style>`
} }
@ -454,21 +466,26 @@ img.flag {
`, `,
} }
if (this.service) { if (this.service && this.data) {
_files[`src/service/${this.service}.js`] = {
content: services[this.service]
}
extDependencies['axios'] = "^0.19.0";
}
if (this.data) {
const dataArr = this.data.split(','); const dataArr = this.data.split(',');
dataArr.forEach(el => { dataArr.forEach(el => {
_files[`public/data/${el}.json`] = { _files[`public/data/${el}.json`] = {
content: data[el] content: data[el]
} };
_files[`src/service/${this.service}.js`] = {
// content: services[this.service]
content: `import axios from 'axios';
import data from '../../public/data/${el}.json';
${services[this.service]}
`
};
}); });
extDependencies['axios'] = "^0.19.0";
} }
if(name === 'EditorDemo') { if(name === 'EditorDemo') {
@ -484,7 +501,7 @@ img.flag {
extDependencies['chart.js'] = "2.7.3"; extDependencies['chart.js'] = "2.7.3";
} }
let mittComponents = ['ToastDemo', 'OrganizationChartDemo', 'ConfirmDialogDemo', 'ConfirmPopupDemo']; let mittComponents = ['ToastDemo', 'OrganizationChartDemo', 'ConfirmDialogDemo', 'ConfirmPopupDemo', 'TerminalDemo'];
mittComponents.forEach(cmp => { mittComponents.forEach(cmp => {
if(name === cmp) { if(name === cmp) {

View File

@ -1,98 +1,74 @@
const services = { const services = {
'CountryService': ` 'CountryService': `
import axios from 'axios';
import countriesData from '../../public/data/countries.json';
export default class CountryService { export default class CountryService {
getCountries() { getCountries() {
return axios.get(countriesData).then((res) => res.config.url.data); return axios.get(data).then((res) => res.config.url.data);
} }
} }
`, `,
'CustomerService': ` '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 { export default class CustomerService {
getCustomersSmall() { getCustomersSmall() {
return axios.get(customersSmallData).then(res => res.config.url.data); return axios.get(data).then(res => res.config.url.data);
} }
getCustomersMedium() { getCustomersMedium() {
return axios.get(customersMediumData).then(res => res.config.url.data); return axios.get(data).then(res => res.config.url.data);
} }
getCustomersLarge() { getCustomersLarge() {
return axios.get(customersLargeData).then(res => res.config.url.data); return axios.get(data).then(res => res.config.url.data);
} }
getCustomersXLarge() { getCustomersXLarge() {
return axios.get(customersXLargeData).then(res => res.config.url.data); return axios.get(data).then(res => res.config.url.data);
} }
} }
`, `,
'EventService': ` 'EventService': `
import axios from 'axios';
import eventData from '../../public/data/events.json';
export default class EventService { export default class EventService {
getEvents() { getEvents() {
return axios.get(eventData).then(res => res.config.url.data); return axios.get(data).then(res => res.config.url.data);
} }
} }
`, `,
'NodeService': ` 'NodeService': `
import axios from 'axios';
import treeTableNodeData from '../../public/data/treetablenodes.json';
import treeNodeData from '../../public/data/treenodes.json';
export default class NodeService { export default class NodeService {
getTreeTableNodes() { getTreeTableNodes() {
return axios.get(treeTableNodeData).then(res => res.config.url.root); return axios.get(data).then(res => res.config.url.root);
} }
getTreeNodes() { getTreeNodes() {
return axios.get(treeNodeData).then(res => res.config.url.root); return axios.get(data).then(res => res.config.url.root);
} }
} }
`, `,
'PhotoService': ` 'PhotoService': `
import axios from 'axios';
import photoData from '../../public/data/photos.json';
export default class PhotoService { export default class PhotoService {
getImages() { getImages() {
return axios.get(photoData).then(res => res.config.url.data); return axios.get(data).then(res => res.config.url.data);
} }
} }
`, `,
'ProductService': ` 'ProductService': `
import axios from 'axios';
import productsSmallData from '../../public/data/products-small.json';
import productsData from '../../public/data/products.json';
import productsWithOrdersSmallData from '../../public/data/products-orders-small.json';
export default class ProductService { export default class ProductService {
getProductsSmall() { getProductsSmall() {
return axios.get(productsSmallData).then(res => res.config.url.data); return axios.get(data).then(res => res.config.url.data);
} }
getProducts() { getProducts() {
return axios.get(productsData).then(res => res.config.url.data); return axios.get(data).then(res => res.config.url.data);
} }
getProductsWithOrdersSmall() { getProductsWithOrdersSmall() {
return axios.get(productsWithOrdersSmallData).then(res => res.config.url.data); return axios.get(data).then(res => res.config.url.data);
} }
} }
` `