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

Refactor LiveEditor

pull/880/head
Tuğçe Küçükoğlu 2021-01-22 17:07:56 +03:00
parent d35247bc48
commit 47cb922654
1 changed files with 103 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,13 +52,21 @@ export default {
type: String, type: String,
default: null default: null
}, },
extFiles: { directives: {
type: String, type: Array,
default: null default: null
}, },
activeButtonIndex: { toastService: {
type: String, type: Boolean,
default: null default: false
},
confirmationService: {
type: Boolean,
default: false
},
terminalService: {
type: Boolean,
default: false
} }
}, },
methods: { methods: {
@ -127,8 +135,7 @@ export default {
} }
}` }`
}, },
...files, ...files
...this.extFiles
} }
} }
}, },
@ -140,6 +147,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 api = this.sources.api ? this.sources.api.content : ''; 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 scriptText = 'script';
let _files = {}, importElement = '', element = '', components = '', imports = '', directives = ''; let _files = {}, importElement = '', element = '', components = '', imports = '', directives = '';
@ -156,43 +164,11 @@ ${style}`
_files[`src/components/${name}${extension}`] = { _files[`src/components/${name}${extension}`] = {
content: `${api} content: `${api}
</${scriptText}> </${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) { if(this.components) {
this.components.forEach(comp => { this.components.forEach(comp => {
@ -201,26 +177,104 @@ import ToastService from "primevue/toastservice";
components += `app.component("${comp}", ${comp}); components += `app.component("${comp}", ${comp});
`; `;
}) })
} }
if(this.directives) {
this.directives.forEach(dir => {
if(dir === 'Tooltip') {
imports += `import Tooltip from "primevue/tooltip";
`;
directives += `app.directive("tooltip", Tooltip);
`;
}
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') { 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)});`; element += `app.component("${name.slice(0, -4)}", ${name.slice(0, -4)});`;
} }
if(name !== 'ToastDemo' && name !== 'FloatLabelDemo' && name !== 'InputGroupDemo' && name !== 'InvalidDemo' && name !== 'FormLayoutDemo') { 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()}";`; importElement += `import ${name.slice(0, -4)} from "primevue/${name.slice(0, -4).toLowerCase()}";`;
} }
if(name === 'TooltipDemo' || name === 'RippleDemo'){ if(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'){ if (this.service) {
imports += `import BadgeDirective from "primevue/badgedirective"; const dataArr = this.data ? this.data.split(',') : null;
`;
directives += `app.directive("badge", BadgeDirective); 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'] = { _files['src/main.js'] = {
@ -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); return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
} }
}, },