fix extFiles props and index.css
Tuğçe Küçükoğlu
parent
54876807d1
commit
f8abb34c18
|
|
@ -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(
|
||||
<TabPanel header={this.sources[sourceType].tabName}>
|
||||
<LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages}/>
|
||||
<LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages} extFiles={this.extFiles}/>
|
||||
<pre v-code><code>
|
||||
{this.sources[sourceType].content.replace('<\\/script>', '<\/script>')}
|
||||
</code></pre>
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue