update liveeditor
Tuğçe Küçükoğlu
parent
41f9df7fb3
commit
d68b5fb8b9
|
|
@ -15,7 +15,8 @@ export default {
|
||||||
showCodeHighlight: false,
|
showCodeHighlight: false,
|
||||||
items: [
|
items: [
|
||||||
{label: "Options API", command: () => { this.postSandboxParameters('options-api') }},
|
{label: "Options API", command: () => { this.postSandboxParameters('options-api') }},
|
||||||
{label: "Composition API", command: () => { this.postSandboxParameters('composition-api') }}
|
{label: "Composition API", command: () => { this.postSandboxParameters('composition-api') }},
|
||||||
|
{label: "Browser Source", command: () => { this.postSandboxParameters('browser-source') }}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -78,7 +79,7 @@ export default {
|
||||||
.catch(() => this.showCodeHighlight = true );
|
.catch(() => this.showCodeHighlight = true );
|
||||||
},
|
},
|
||||||
|
|
||||||
createSandboxParameters(nameWithExt, files, extDependencies) {
|
createSandboxParameters(sourceType, nameWithExt, files, extDependencies) {
|
||||||
const boolExtFiles = !this.extFiles;
|
const boolExtFiles = !this.extFiles;
|
||||||
let extFiles = !boolExtFiles ? {...this.extFiles} : {};
|
let extFiles = !boolExtFiles ? {...this.extFiles} : {};
|
||||||
let extIndexCSS = extFiles['index.css'] || '';
|
let extIndexCSS = extFiles['index.css'] || '';
|
||||||
|
|
@ -86,6 +87,222 @@ export default {
|
||||||
|
|
||||||
const dependencies = require('../../../package.json') ? require('../../../package.json').devDependencies : {};
|
const dependencies = require('../../../package.json') ? require('../../../package.json').devDependencies : {};
|
||||||
|
|
||||||
|
let defaultCss = {
|
||||||
|
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}
|
||||||
|
`
|
||||||
|
};
|
||||||
|
|
||||||
|
if (sourceType === 'browser-source') {
|
||||||
|
return {
|
||||||
|
files: {
|
||||||
|
'index.css': defaultCss,
|
||||||
|
...files
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
files: {
|
files: {
|
||||||
'package.json': {
|
'package.json': {
|
||||||
|
|
@ -112,7 +329,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'babel.config.js': {
|
'babel.config.js': {
|
||||||
content: `module.exports = {
|
content: `module.exports = {
|
||||||
presets: [
|
presets: [
|
||||||
'@vue/cli-plugin-babel/preset'
|
'@vue/cli-plugin-babel/preset'
|
||||||
]
|
]
|
||||||
|
|
@ -133,211 +350,7 @@ export default {
|
||||||
}
|
}
|
||||||
}`
|
}`
|
||||||
},
|
},
|
||||||
'src/index.css': {
|
'src/index.css': defaultCss,
|
||||||
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,
|
...files,
|
||||||
...extFiles
|
...extFiles
|
||||||
}
|
}
|
||||||
|
|
@ -351,30 +364,29 @@ ${extIndexCSS}
|
||||||
let extDependencies = this.dependencies || {};
|
let extDependencies = this.dependencies || {};
|
||||||
let extImport = '';
|
let extImport = '';
|
||||||
let extElement = '';
|
let extElement = '';
|
||||||
let content = this.sources[sourceType].content.replace('<\\/script>', '<\/script>');
|
let content = this.sources[sourceType].content.replaceAll('<\\/script>', '<\/script>');
|
||||||
|
let imports = this.sources[sourceType].imports ? this.sources[sourceType].imports.replaceAll('<\\/script>', '<\/script>') : '';
|
||||||
let pages = this.extPages ? this.extPages : '';
|
let pages = this.extPages ? this.extPages : '';
|
||||||
let _files = {}, element = '';
|
let _files = {}, element = '';
|
||||||
|
|
||||||
if(this.component) {
|
|
||||||
extImport += `import ${this.component} from 'primevue/${this.component.toLowerCase()}';`
|
|
||||||
extElement += `app.component('${this.component}', ${this.component});`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.service) {
|
if (this.service) {
|
||||||
let dataArr = [], serviceArr = [];
|
let dataArr = [], serviceArr = [], path = '';
|
||||||
|
|
||||||
this.service.forEach(el => {
|
this.service.forEach(el => {
|
||||||
serviceArr.push(el.split(','))
|
serviceArr.push(el.split(','))
|
||||||
})
|
})
|
||||||
|
|
||||||
if(this.data) {
|
if (this.data) {
|
||||||
this.data.forEach(el => {
|
this.data.forEach(el => {
|
||||||
dataArr.push(el.split(','))
|
dataArr.push(el.split(','))
|
||||||
})
|
})
|
||||||
|
|
||||||
if(dataArr) {
|
if (dataArr) {
|
||||||
dataArr.forEach(el => {
|
dataArr.forEach(el => {
|
||||||
_files[`public/data/${el}.json`] = {
|
let _path = `${el}.json`;
|
||||||
|
path = sourceType === 'browser-source' ? _path : `public/demo/data/${_path}`;
|
||||||
|
|
||||||
|
_files[path] = {
|
||||||
content: data[el]
|
content: data[el]
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
@ -382,16 +394,46 @@ ${extIndexCSS}
|
||||||
}
|
}
|
||||||
|
|
||||||
serviceArr.forEach(serv => {
|
serviceArr.forEach(serv => {
|
||||||
_files[`src/service/${serv}.js`] = {
|
path = sourceType === 'browser-source' ? `${serv}.js` : `src/service/${serv}.js`;
|
||||||
content: `${services[serv]}`
|
let _content = sourceType === 'browser-source' ?
|
||||||
};
|
`${services[serv].replaceAll('export default class', 'class').replaceAll('demo/data/', './')}` :
|
||||||
|
`${services[serv]}`;
|
||||||
|
|
||||||
|
_files[path] = {
|
||||||
|
content: _content
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
element += `import ${name} from "./${name}.vue"`;
|
if (sourceType === 'browser-source') {
|
||||||
|
_files['index.html'] = {
|
||||||
|
content: `<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
|
<title>${name}</title>
|
||||||
|
<link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
|
||||||
|
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
|
||||||
|
<link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
|
||||||
|
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
|
||||||
|
<link href="./index.css" rel="stylesheet" />
|
||||||
|
|
||||||
_files['src/main.js'] = {
|
<script src="https://unpkg.com/vue@next"><\/script>
|
||||||
content: `import "primeflex/primeflex.css";
|
<script src="https://unpkg.com/primevue@^3/core/core.min.js"><\/script>
|
||||||
|
${imports}
|
||||||
|
</head>
|
||||||
|
<body>${content}
|
||||||
|
</body>
|
||||||
|
</html>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
element += `import ${name} from "./${name}.vue"`;
|
||||||
|
|
||||||
|
_files['src/main.js'] = {
|
||||||
|
content: `import "primeflex/primeflex.css";
|
||||||
import "primevue/resources/themes/saga-blue/theme.css";
|
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";
|
||||||
|
|
@ -475,6 +517,7 @@ import SplitButton from 'primevue/splitbutton';
|
||||||
import Splitter from 'primevue/splitter';
|
import Splitter from 'primevue/splitter';
|
||||||
import SplitterPanel from 'primevue/splitterpanel';
|
import SplitterPanel from 'primevue/splitterpanel';
|
||||||
import Steps from 'primevue/steps';
|
import Steps from 'primevue/steps';
|
||||||
|
import StyleClass from 'primevue/styleclass';
|
||||||
import TabMenu from 'primevue/tabmenu';
|
import TabMenu from 'primevue/tabmenu';
|
||||||
import TieredMenu from 'primevue/tieredmenu';
|
import TieredMenu from 'primevue/tieredmenu';
|
||||||
import Textarea from 'primevue/textarea';
|
import Textarea from 'primevue/textarea';
|
||||||
|
|
@ -505,6 +548,7 @@ app.use(router);
|
||||||
app.directive('tooltip', Tooltip);
|
app.directive('tooltip', Tooltip);
|
||||||
app.directive('badge', BadgeDirective);
|
app.directive('badge', BadgeDirective);
|
||||||
app.directive('ripple', Ripple);
|
app.directive('ripple', Ripple);
|
||||||
|
app.directive('styleclass', StyleClass);
|
||||||
|
|
||||||
app.component('Accordion', Accordion);
|
app.component('Accordion', Accordion);
|
||||||
app.component('AccordionTab', AccordionTab);
|
app.component('AccordionTab', AccordionTab);
|
||||||
|
|
@ -597,60 +641,65 @@ ${extElement}
|
||||||
|
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
_files['public/index.html'] = {
|
_files['public/index.html'] = {
|
||||||
content: `<!DOCTYPE html>
|
content: `<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<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/primeicons/primeicons.css" rel="stylesheet">
|
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
_files[`src/${name}${extension}`] = {
|
_files[`src/${name}${extension}`] = {
|
||||||
content: `${content}
|
content: `${content}
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
if(pages) {
|
if (this.component) {
|
||||||
let routes = [], routeImports = '';
|
extImport += `import ${this.component} from 'primevue/${this.component.toLowerCase()}';`
|
||||||
|
extElement += `app.component('${this.component}', ${this.component});`;
|
||||||
|
}
|
||||||
|
|
||||||
pages.forEach((page, i) => {
|
if (pages) {
|
||||||
_files[`src/components/${page.tabName}.vue`] = {
|
let routes = [], routeImports = '';
|
||||||
'content': `${page.content.replace('<\\/script>', '<\/script>')}`
|
|
||||||
}
|
|
||||||
|
|
||||||
let route = '';
|
pages.forEach((page, i) => {
|
||||||
|
_files[`src/components/${page.tabName}.vue`] = {
|
||||||
|
'content': `${page.content.replace('<\\/script>', '<\/script>')}`
|
||||||
|
}
|
||||||
|
|
||||||
routeImports += `import ${page.tabName} from './components/${page.tabName}.vue';
|
let route = '';
|
||||||
`;
|
|
||||||
|
|
||||||
if(i === 0) {
|
routeImports += `import ${page.tabName} from './components/${page.tabName}.vue';
|
||||||
route += `{
|
`;
|
||||||
path: "/",
|
|
||||||
component: ${page.tabName}
|
|
||||||
}`;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
route += `{
|
|
||||||
path: "/${page.tabName.slice(0, -4).toLowerCase()}",
|
|
||||||
component: ${page.tabName}
|
|
||||||
}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
routes.push(route);
|
if(i === 0) {
|
||||||
})
|
route += `{
|
||||||
|
path: "/",
|
||||||
|
component: ${page.tabName}
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
route += `{
|
||||||
|
path: "/${page.tabName.slice(0, -4).toLowerCase()}",
|
||||||
|
component: ${page.tabName}
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
|
||||||
_files['src/router.js'] = {
|
routes.push(route);
|
||||||
'content': `import { createRouter, createWebHistory } from "vue-router";
|
})
|
||||||
|
|
||||||
|
_files['src/router.js'] = {
|
||||||
|
'content': `import { createRouter, createWebHistory } from "vue-router";
|
||||||
${routeImports}
|
${routeImports}
|
||||||
export const router = createRouter({
|
export const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(),
|
||||||
|
|
@ -659,21 +708,22 @@ export const router = createRouter({
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
`
|
`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
else {
|
||||||
else {
|
_files[`src/router.js`] = {
|
||||||
_files[`src/router.js`] = {
|
content: `import { createRouter, createWebHistory } from "vue-router";
|
||||||
content: `import { createRouter, createWebHistory } from "vue-router";
|
${element}
|
||||||
${element}
|
|
||||||
|
|
||||||
export const router = createRouter({
|
export const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(),
|
||||||
routes: [{ path: "/", component: ${name} }]
|
routes: [{ path: "/", component: ${name} }]
|
||||||
});`
|
});`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
|
return this.createSandboxParameters(sourceType, `${name}${extension}`, _files, extDependencies);
|
||||||
},
|
},
|
||||||
|
|
||||||
openDefaultCSB() {
|
openDefaultCSB() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue