Update LiveEditor
parent
1d1c70827b
commit
f3908a88fe
|
@ -30,7 +30,10 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
default: null
|
default: null
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
type: Array,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
dependencies: {
|
dependencies: {
|
||||||
type: String,
|
type: String,
|
||||||
default: null
|
default: null
|
||||||
|
@ -116,15 +119,29 @@ export default {
|
||||||
let extension = '.vue';
|
let extension = '.vue';
|
||||||
let extDependencies = this.dependencies || {};
|
let extDependencies = this.dependencies || {};
|
||||||
let content = this.sources.template.content;
|
let content = this.sources.template.content;
|
||||||
|
let style = this.sources.template.style || '';
|
||||||
let scriptText = 'script';
|
let scriptText = 'script';
|
||||||
|
let _files = {}, components = '', imports = '';
|
||||||
let _files = {};
|
|
||||||
|
|
||||||
_files[`src/components/${name}${extension}`] = {
|
_files[`src/components/${name}${extension}`] = {
|
||||||
content: `
|
content: `${content}
|
||||||
${content}
|
</${scriptText}>
|
||||||
</${scriptText}>
|
|
||||||
`
|
${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'] = {
|
_files['src/main.js'] = {
|
||||||
|
@ -134,12 +151,11 @@ import "primevue/resources/themes/saga-blue/theme.css";
|
||||||
import "primevue/resources/primevue.min.css";
|
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 ${this.name.slice(0, -4)} from "primevue/${this.name.slice(0, -4).toLowerCase()}";
|
|
||||||
import PrimeVue from "primevue/config";
|
import PrimeVue from "primevue/config";
|
||||||
|
${imports}
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
app.use(PrimeVue, { ripple: true });
|
app.use(PrimeVue, { ripple: true });
|
||||||
app.component("${this.name.slice(0, -4)}", ${this.name.slice(0, -4)});
|
${components}
|
||||||
|
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
@ -151,7 +167,6 @@ app.mount("#app");
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet" />
|
|
||||||
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
|
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -414,7 +429,6 @@ img.flag {
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (this.service) {
|
if (this.service) {
|
||||||
_files[`src/service/${this.service}.js`] = {
|
_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);
|
return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,88 +1,98 @@
|
||||||
const services = {
|
const services = {
|
||||||
'CountryService': `
|
'CountryService': `
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
import countriesData from '../../public/data/countries.json';
|
||||||
|
|
||||||
export default class CountryService {
|
export default class CountryService {
|
||||||
|
|
||||||
getCountries() {
|
getCountries() {
|
||||||
return axios.get('data/countries.json').then(res => res.data.data);
|
return axios.get(countriesData).then((res) => res.config.url.data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
'CustomerService': `
|
'CustomerService': `
|
||||||
import axios from 'axios';
|
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('data/customers-small.json').then(res => res.data.data);
|
return axios.get(customersSmallData).then(res => res.config.url.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
getCustomersMedium() {
|
getCustomersMedium() {
|
||||||
return axios.get('data/customers-medium.json').then(res => res.data.data);
|
return axios.get(customersMediumData).then(res => res.config.url.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
getCustomersLarge() {
|
getCustomersLarge() {
|
||||||
return axios.get('data/customers-large.json').then(res => res.data.data);
|
return axios.get(customersLargeData).then(res => res.config.url.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
getCustomersXLarge() {
|
getCustomersXLarge() {
|
||||||
return axios.get('data/customers-xlarge.json').then(res => res.data.data);
|
return axios.get(customersXLargeData).then(res => res.config.url.data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
'EventService': `
|
'EventService': `
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
import eventData from '../../public/data/events.json';
|
||||||
|
|
||||||
export default class EventService {
|
export default class EventService {
|
||||||
|
|
||||||
getEvents() {
|
getEvents() {
|
||||||
return axios.get('data/events.json').then(res => res.data.data);
|
return axios.get(eventData).then(res => res.config.url.data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
'NodeService': `
|
'NodeService': `
|
||||||
import axios from 'axios';
|
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('data/treetablenodes.json')
|
return axios.get(treeTableNodeData).then(res => res.config.url.root);
|
||||||
.then(res => res.data.root);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getTreeNodes() {
|
getTreeNodes() {
|
||||||
return axios.get('data/treenodes.json')
|
return axios.get(treeNodeData).then(res => res.config.url.root);
|
||||||
.then(res => res.data.root);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
'PhotoService': `
|
'PhotoService': `
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
import photoData from '../../public/data/photos.json';
|
||||||
|
|
||||||
export default class PhotoService {
|
export default class PhotoService {
|
||||||
|
|
||||||
getImages() {
|
getImages() {
|
||||||
return axios.get('data/photos.json').then(res => res.data.data);
|
return axios.get(photoData).then(res => res.config.url.data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
'ProductService': `
|
'ProductService': `
|
||||||
import axios from 'axios';
|
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 {
|
export default class ProductService {
|
||||||
|
|
||||||
getProductsSmall() {
|
getProductsSmall() {
|
||||||
return axios.get('data/products-small.json').then(res => res.data.data);
|
return axios.get(productsSmallData).then(res => res.config.url.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
getProducts() {
|
getProducts() {
|
||||||
return axios.get('data/products.json').then(res => res.data.data);
|
return axios.get(productsData).then(res => res.config.url.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
getProductsWithOrdersSmall() {
|
getProductsWithOrdersSmall() {
|
||||||
return axios.get('data/products-orders-small.json').then(res => res.data.data);
|
return axios.get(productsWwithOrdersSmallData).then(res => res.config.url.data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
Loading…
Reference in New Issue