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, 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>
@ -415,7 +430,6 @@ img.flag {
`, `,
} }
if (this.service) { if (this.service) {
_files[`src/service/${this.service}.js`] = { _files[`src/service/${this.service}.js`] = {
content: services[this.service] 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); return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
} }
} }

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

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