From f8abb34c181073ecb570158de0e50260b32edcca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Thu, 25 Mar 2021 12:04:37 +0300 Subject: [PATCH] fix extFiles props and index.css --- src/AppDocumentation.vue | 5 +- src/views/liveeditor/LiveEditor.vue | 445 ++++++++++++++-------------- 2 files changed, 225 insertions(+), 225 deletions(-) diff --git a/src/AppDocumentation.vue b/src/AppDocumentation.vue index 41dce3fb2..4cdf40c3a 100644 --- a/src/AppDocumentation.vue +++ b/src/AppDocumentation.vue @@ -10,7 +10,8 @@ export default { service: null, data: null, dependencies: null, - extPages: null + extPages: null, + extFiles: null }, methods: { renderPanels() { @@ -25,7 +26,7 @@ export default { /* eslint-disable */ tabs.push( - + 

                             {this.sources[sourceType].content.replace('<\\/script>', '<\/script>')}
diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue index 47d83be1c..338cc5bdf 100644 --- a/src/views/liveeditor/LiveEditor.vue +++ b/src/views/liveeditor/LiveEditor.vue @@ -37,6 +37,14 @@ export default { extPages: { type: Array, default: null + }, + dependencies: { + type: Object, + default: null + }, + extFiles: { + type: Object, + default: null } }, methods: { @@ -55,6 +63,10 @@ export default { }, createSandboxParameters(nameWithExt, files, extDependencies) { + const boolExtFiles = !this.extFiles; + let extFiles = !boolExtFiles ? {...this.extFiles} : {}; + let extIndexCSS = extFiles['index.css'] || ''; + delete extFiles['index.css']; const dependencies = require('../../../package.json') ? require('../../../package.json').devDependencies : {}; @@ -106,7 +118,213 @@ export default { } }` }, - ...files + 'src/index.css': { + content: `html { + font-size: 14px; +} + +body { + background-color: #ffffff; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + font-weight: normal; + color: #495057; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + padding: .5em; + margin-bottom: 50px; +} + +h1, h2, h3, h4, h5, h6 { + margin: 1.5rem 0 1rem 0; + font-family: inherit; + font-weight: 600; + line-height: 1.2; + color: inherit; +} + +h1 { font-size: 2.5rem; } +h2 { font-size: 2rem; } +h3 { font-size: 1.75rem; } +h4 { font-size: 1.5rem; } +h5 { font-size: 1.25rem; } +h6 { font-size: 1rem; } +p { + line-height: 1.5; + margin: 0 0 1rem 0; +} + +.card { + margin-bottom: 2rem; +} + +input[type="number"] { + -moz-appearance: textfield; +} + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +@keyframes pulse { + 0% { + background-color: rgba(165, 165, 165, 0.1) + } + 50% { + background-color: rgba(165, 165, 165, 0.3) + } + 100% { + background-color: rgba(165, 165, 165, 0.1) + } +} + +.customer-badge { + border-radius: 2px; + padding: .25em .5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: .3px; +} + +.customer-badge.status-qualified { + background-color: #C8E6C9; + color: #256029; +} + +.customer-badge.status-unqualified { + background-color: #FFCDD2; + color: #C63737; +} + +.customer-badge.status-negotiation { + background-color: #FEEDAF; + color: #8A5340; +} + +.customer-badge.status-new { + background-color: #B3E5FC; + color: #23547B; +} + +.customer-badge.status-renewal { + background-color: #ECCFFF; + color: #694382; +} + +.customer-badge.status-proposal { + background-color: #FFD8B2; + color: #805B36; +} + +.product-badge { + border-radius: 2px; + padding: .25em .5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: .3px; +} + +.product-badge.status-instock { + background: #C8E6C9; + color: #256029; +} + +.product-badge.status-outofstock { + background: #FFCDD2; + color: #C63737; +} + +.product-badge.status-lowstock { + background: #FEEDAF; + color: #8A5340; +} + +.order-badge { + border-radius: 2px; + padding: .25em .5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: .3px; +} + +.order-badge.order-delivered { + background: #C8E6C9; + color: #256029; +} + +.order-badge.order-cancelled { + background: #FFCDD2; + color: #C63737; +} + +.order-badge.order-pending { + background: #FEEDAF; + color: #8A5340; +} + +.order-badge.order-returned { + background: #ECCFFF; + color: #694382; +} + +.image-text { + margin-left: .5rem; +} + +.p-multiselect-representative-option { + display: inline-block; + vertical-align: middle; +} + +.p-multiselect-representative-option img { + vertical-align: middle; + width: 24px; +} + +.p-multiselect-representative-option span { + margin-top: .125rem; +} + +.country-item { + display: flex; + align-items: center; +} + +.country-item img.flag { + width: 18px; + margin-right: .5rem; +} + +.flag { + vertical-align: middle; +} + +span.flag { + width:44px; + height:30px; + display:inline-block; +} + +img.flag { + width:30px +} + +.true-icon { + color: #256029; +} + +.false-icon { + color: #C63737; +} +${extIndexCSS} +` + }, + ...files, + ...extFiles } } }, @@ -122,23 +340,9 @@ export default { let pages = this.extPages ? this.extPages : ''; let _files = {}, element = ''; - if(name === 'EditorDemo') { - extDependencies['quill'] = "^1.3.7"; - extImport += `import Editor from 'primevue/editor';`; - extElement += `app.component('Editor', Editor);`; - } - 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"; - extImport += `import FullCalendar from 'primevue/fullcalendar';`; - extElement += `app.component('FullCalendar', FullCalendar);`; - } - if(name.slice(-9) === 'ChartDemo') { - extDependencies['chart.js'] = "2.7.3"; - extImport += `import Chart from 'primevue/chart';`; - extElement += `app.component('Chart', Chart);`; + if(this.dependencies) { + extImport += `import ${name.slice(0, -4)} from 'primevue/${name.slice(0, -4).toLowerCase()}';` + extElement += `app.component('${name.slice(0, -4)}', ${name.slice(0, -4)});`; } if (this.service) { @@ -391,211 +595,6 @@ app.mount("#app"); ` } - _files['src/index.css'] = { - content: `html { - font-size: 14px; -} - -body { - background-color: #ffffff; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: normal; - color: #495057; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - padding: .5em; - margin-bottom: 50px; -} - -h1, h2, h3, h4, h5, h6 { - margin: 1.5rem 0 1rem 0; - font-family: inherit; - font-weight: 600; - line-height: 1.2; - color: inherit; -} - -h1 { font-size: 2.5rem; } -h2 { font-size: 2rem; } -h3 { font-size: 1.75rem; } -h4 { font-size: 1.5rem; } -h5 { font-size: 1.25rem; } -h6 { font-size: 1rem; } -p { - line-height: 1.5; - margin: 0 0 1rem 0; -} - -.card { - margin-bottom: 2rem; -} - -input[type="number"] { - -moz-appearance: textfield; -} - -input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -@keyframes pulse { - 0% { - background-color: rgba(165, 165, 165, 0.1) - } - 50% { - background-color: rgba(165, 165, 165, 0.3) - } - 100% { - background-color: rgba(165, 165, 165, 0.1) - } -} - -.customer-badge { - border-radius: 2px; - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; -} - -.customer-badge.status-qualified { - background-color: #C8E6C9; - color: #256029; -} - -.customer-badge.status-unqualified { - background-color: #FFCDD2; - color: #C63737; -} - -.customer-badge.status-negotiation { - background-color: #FEEDAF; - color: #8A5340; -} - -.customer-badge.status-new { - background-color: #B3E5FC; - color: #23547B; -} - -.customer-badge.status-renewal { - background-color: #ECCFFF; - color: #694382; -} - -.customer-badge.status-proposal { - background-color: #FFD8B2; - color: #805B36; -} - -.product-badge { - border-radius: 2px; - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; -} - -.product-badge.status-instock { - background: #C8E6C9; - color: #256029; -} - -.product-badge.status-outofstock { - background: #FFCDD2; - color: #C63737; -} - -.product-badge.status-lowstock { - background: #FEEDAF; - color: #8A5340; -} - -.order-badge { - border-radius: 2px; - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; -} - -.order-badge.order-delivered { - background: #C8E6C9; - color: #256029; -} - -.order-badge.order-cancelled { - background: #FFCDD2; - color: #C63737; -} - -.order-badge.order-pending { - background: #FEEDAF; - color: #8A5340; -} - -.order-badge.order-returned { - background: #ECCFFF; - color: #694382; -} - -.image-text { - margin-left: .5rem; -} - -.p-multiselect-representative-option { - display: inline-block; - vertical-align: middle; -} - -.p-multiselect-representative-option img { - vertical-align: middle; - width: 24px; -} - -.p-multiselect-representative-option span { - margin-top: .125rem; -} - -.country-item { - display: flex; - align-items: center; -} - -.country-item img.flag { - width: 18px; - margin-right: .5rem; -} - -.flag { - vertical-align: middle; -} - -span.flag { - width:44px; - height:30px; - display:inline-block; -} - -img.flag { - width:30px -} - -.true-icon { - color: #256029; -} - -.false-icon { - color: #C63737; -} -`, - } - if(pages) { let routes = [], routeImports = '';