Refactor LiveEditor
Tuğçe Küçükoğlu
parent
d35247bc48
commit
47cb922654
|
|
@ -52,13 +52,21 @@ export default {
|
|||
type: String,
|
||||
default: null
|
||||
},
|
||||
extFiles: {
|
||||
type: String,
|
||||
directives: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
activeButtonIndex: {
|
||||
type: String,
|
||||
default: null
|
||||
toastService: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
confirmationService: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
terminalService: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -127,8 +135,7 @@ export default {
|
|||
}
|
||||
}`
|
||||
},
|
||||
...files,
|
||||
...this.extFiles
|
||||
...files
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -140,6 +147,7 @@ export default {
|
|||
let content = this.sources.template.content;
|
||||
let style = this.sources.template.style || '';
|
||||
let api = this.sources.api ? this.sources.api.content : '';
|
||||
let apiStyle = this.sources.api && this.sources.api.style ? this.sources.api.style : '';
|
||||
let scriptText = 'script';
|
||||
let _files = {}, importElement = '', element = '', components = '', imports = '', directives = '';
|
||||
|
||||
|
|
@ -156,44 +164,12 @@ ${style}`
|
|||
_files[`src/components/${name}${extension}`] = {
|
||||
content: `${api}
|
||||
</${scriptText}>
|
||||
|
||||
${apiStyle}
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let mittComponents = ['ToastDemo', 'OrganizationChartDemo', 'ConfirmDialogDemo', 'ConfirmPopupDemo', 'TerminalDemo', 'SplitButtonDemo', 'DeferredContentDemo', 'OverlayPanelDemo', 'FileUploadDemo', 'DataTableDemo', 'TreeDemo', 'TreeTableDemo'];
|
||||
|
||||
mittComponents.forEach(cmp => {
|
||||
if(name === cmp) {
|
||||
extDependencies['mitt'] = "^2.1.0";
|
||||
imports += `import Toast from "primevue/toast";
|
||||
import ToastService from "primevue/toastservice";
|
||||
`;
|
||||
directives += `app.use(ToastService);
|
||||
`;
|
||||
components += `app.component("Toast", Toast);
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
if(name === 'ConfirmDialogDemo' || name === 'ConfirmPopupDemo') {
|
||||
imports += `import ConfirmationService from "primevue/confirmationservice";
|
||||
`;
|
||||
directives += `app.use(ConfirmationService);
|
||||
`;
|
||||
}
|
||||
|
||||
let directiveEl = ['EditorDemo'];
|
||||
|
||||
directiveEl.forEach(dir => {
|
||||
if(name === dir) {
|
||||
imports += `import Tooltip from "primevue/tooltip";
|
||||
`;
|
||||
directives += `app.directive("tooltip", Tooltip);
|
||||
`;
|
||||
}
|
||||
})
|
||||
|
||||
if(this.components) {
|
||||
this.components.forEach(comp => {
|
||||
imports += `import ${comp} from "primevue/${comp.toLowerCase()}";
|
||||
|
|
@ -203,25 +179,103 @@ import ToastService from "primevue/toastservice";
|
|||
})
|
||||
}
|
||||
|
||||
if(name !== 'ToastDemo' && name !== 'TooltipDemo' && name !== 'RippleDemo' && name !== 'FloatLabelDemo' && name !== 'InputGroupDemo' && name !== 'InvalidDemo' && name !== 'FormLayoutDemo') {
|
||||
element += `app.component("${name.slice(0, -4)}", ${name.slice(0, -4)});`;
|
||||
}
|
||||
|
||||
if(name !== 'ToastDemo' && name !== 'FloatLabelDemo' && name !== 'InputGroupDemo' && name !== 'InvalidDemo' && name !== 'FormLayoutDemo') {
|
||||
importElement += `import ${name.slice(0, -4)} from "primevue/${name.slice(0, -4).toLowerCase()}";`;
|
||||
}
|
||||
|
||||
if(name === 'TooltipDemo' || name === 'RippleDemo'){
|
||||
directives += `app.directive("${name.slice(0, -4).toLowerCase()}", ${name.slice(0, -4)});
|
||||
if(this.directives) {
|
||||
this.directives.forEach(dir => {
|
||||
if(dir === 'Tooltip') {
|
||||
imports += `import Tooltip from "primevue/tooltip";
|
||||
`;
|
||||
directives += `app.directive("tooltip", Tooltip);
|
||||
`;
|
||||
}
|
||||
|
||||
if(name === 'BadgeDemo' || name === 'AvatarDemo'){
|
||||
if(dir === 'Badge') {
|
||||
imports += `import BadgeDirective from "primevue/badgedirective";
|
||||
`;
|
||||
directives += `app.directive("badge", BadgeDirective);
|
||||
`;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if(this.toastService) {
|
||||
extDependencies['mitt'] = "^2.1.0";
|
||||
|
||||
imports += `import Toast from "primevue/toast";
|
||||
import ToastService from "primevue/toastservice";
|
||||
`;
|
||||
directives += `app.use(ToastService);
|
||||
`;
|
||||
components += `app.component("Toast", Toast);
|
||||
`;
|
||||
}
|
||||
|
||||
if(this.confirmationService) {
|
||||
imports += `import ConfirmationService from "primevue/confirmationservice";
|
||||
`;
|
||||
directives += `app.use(ConfirmationService);
|
||||
`;
|
||||
}
|
||||
|
||||
if(this.terminalService) {
|
||||
extDependencies['mitt'] = "^2.1.0";
|
||||
}
|
||||
|
||||
if(name !== 'ToastDemo' && name !== 'TooltipDemo' && name !== 'RippleDemo' && name !== 'FloatLabelDemo' && name !== 'InputGroupDemo' && name !== 'InvalidDemo' && name !== 'FormLayoutDemo') {
|
||||
element += `app.component("${name.slice(0, -4)}", ${name.slice(0, -4)});`;
|
||||
}
|
||||
|
||||
if(name !== 'TooltipDemo' && name !== 'ToastDemo' && name !== 'FloatLabelDemo' && name !== 'InputGroupDemo' && name !== 'InvalidDemo' && name !== 'FormLayoutDemo') {
|
||||
importElement += `import ${name.slice(0, -4)} from "primevue/${name.slice(0, -4).toLowerCase()}";`;
|
||||
}
|
||||
|
||||
if(name === 'RippleDemo'){
|
||||
directives += `app.directive("${name.slice(0, -4).toLowerCase()}", ${name.slice(0, -4)});
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.service) {
|
||||
const dataArr = this.data ? this.data.split(',') : null;
|
||||
|
||||
extDependencies['axios'] = "^0.19.0";
|
||||
|
||||
if(dataArr) {
|
||||
dataArr.forEach(el => {
|
||||
_files[`public/data/${el}.json`] = {
|
||||
content: data[el]
|
||||
};
|
||||
|
||||
_files[`src/service/${this.service}.js`] = {
|
||||
content: `import axios from 'axios';
|
||||
import data from '../../public/data/${el}.json';
|
||||
|
||||
${services[this.service]}
|
||||
`
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
else {
|
||||
_files[`src/service/${this.service}.js`] = {
|
||||
content: `import axios from 'axios';
|
||||
|
||||
${services[this.service]}
|
||||
`
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(name === 'EditorDemo') {
|
||||
extDependencies['quill'] = "^1.3.7";
|
||||
}
|
||||
if(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";
|
||||
}
|
||||
if(name === 'ChartDemo') {
|
||||
extDependencies['chart.js'] = "2.7.3";
|
||||
}
|
||||
|
||||
_files['src/main.js'] = {
|
||||
content: `import { createApp } from "vue";
|
||||
|
|
@ -511,57 +565,6 @@ img.flag {
|
|||
`,
|
||||
}
|
||||
|
||||
if (this.service) {
|
||||
const dataArr = this.data ? this.data.split(',') : null;
|
||||
|
||||
if(dataArr) {
|
||||
dataArr.forEach(el => {
|
||||
_files[`public/data/${el}.json`] = {
|
||||
content: data[el]
|
||||
};
|
||||
|
||||
_files[`src/service/${this.service}.js`] = {
|
||||
content: `import axios from 'axios';
|
||||
import data from '../../public/data/${el}.json';
|
||||
|
||||
${services[this.service]}
|
||||
`
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
else {
|
||||
_files[`src/service/${this.service}.js`] = {
|
||||
content: `import axios from 'axios';
|
||||
|
||||
${services[this.service]}
|
||||
`
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
extDependencies['axios'] = "^0.19.0";
|
||||
}
|
||||
|
||||
if(name === 'EditorDemo') {
|
||||
extDependencies['quill'] = "^1.3.7";
|
||||
}
|
||||
if(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";
|
||||
}
|
||||
if(name === 'ChartDemo') {
|
||||
extDependencies['chart.js'] = "2.7.3";
|
||||
}
|
||||
|
||||
mittComponents.forEach(cmp => {
|
||||
if(name === cmp) {
|
||||
extDependencies['mitt'] = "^2.1.0";
|
||||
}
|
||||
});
|
||||
|
||||
return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue