Update LiveEditor
parent
00fc9a26ab
commit
8286d6d3f2
|
@ -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) {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
Loading…
Reference in New Issue