vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update LiveEditor

pull/756/head
Tuğçe Küçükoğlu 2021-01-07 17:02:49 +03:00
parent 1d1c70827b
commit f3908a88fe
2 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/liveeditor/LiveEditor.vue
View File

@ -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}
</${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'] = {
@ -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");
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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">
</head>
<body>
@ -415,7 +430,6 @@ img.flag {
`,
}
if (this.service) {
_files[`src/service/${this.service}.js`] = {
content: services[this.service]
@ -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);
}
}

38
src/views/liveeditor/LiveEditorData.js
View File

@ -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);
}
}
`