LiveEditor added
Tuğçe Küçükoğlu
parent
151f6c93d3
commit
8581271959
|
|
@ -38,6 +38,7 @@
|
|||
"axios": "^0.19.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"chart.js": "2.7.3",
|
||||
"codesandbox": "2.1.14",
|
||||
"core-js": "^3.6.5",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^7.0.0-0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,444 @@
|
|||
<template>
|
||||
<span style="margin-top: -0.2rem">
|
||||
<Button @click="postSandboxParameters()" label="Edit in CodeSandbox" class="liveEditorButton" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { services, data } from './LiveEditorData';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sandbox_id: null,
|
||||
showCodeHighlight: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
sources: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
service: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
data: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
|
||||
dependencies: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
extFiles: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
activeButtonIndex: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
postSandboxParameters() {
|
||||
fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(this.getSandboxParameters())
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'))
|
||||
.catch(() => this.showCodeHighlight = true );
|
||||
},
|
||||
|
||||
createSandboxParameters(nameWithExt, files, extDependencies) {
|
||||
|
||||
const dependencies = require('../../../package.json') ? require('../../../package.json').devDependencies : {};
|
||||
|
||||
return {
|
||||
files: {
|
||||
'package.json': {
|
||||
content: {
|
||||
main: `src/demo/${nameWithExt}`,
|
||||
dependencies: {
|
||||
...extDependencies,
|
||||
'vue': dependencies['vue'],
|
||||
'axios': dependencies['axios'],
|
||||
'primevue': '^3.1.1',
|
||||
'primeflex': dependencies['primeflex'],
|
||||
'primeicons': dependencies['primeicons'],
|
||||
'@babel/cli': dependencies['@babel/cli'],
|
||||
'@vue/cli-plugin-babel': dependencies['@vue/cli-plugin-babel'],
|
||||
'@vue/cli-service': dependencies['@vue/cli-service'],
|
||||
'@vue/compiler-sfc': dependencies['@vue/compiler-sfc'],
|
||||
'core-js': dependencies['core-js']
|
||||
},
|
||||
}
|
||||
},
|
||||
'babel.config.js': {
|
||||
content: `module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}`
|
||||
},
|
||||
'.eslintrc.js': {
|
||||
content: `module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
}
|
||||
}`
|
||||
},
|
||||
...files,
|
||||
...this.extFiles
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getSandboxParameters() {
|
||||
let name = this.name;
|
||||
let extension = '.vue';
|
||||
let extDependencies = this.dependencies || {};
|
||||
let content = this.sources.template.content;
|
||||
let scriptText = 'script';
|
||||
|
||||
let _files = {};
|
||||
|
||||
_files[`src/components/${name}${extension}`] = {
|
||||
content: `
|
||||
${content}
|
||||
`
|
||||
}
|
||||
|
||||
_files['src/main.js'] = {
|
||||
content: `import { createApp } from "vue";
|
||||
import "primeflex/primeflex.css";
|
||||
import "primevue/resources/themes/saga-blue/theme.css";
|
||||
import "primevue/resources/primevue.min.css";
|
||||
import "primeicons/primeicons.css";
|
||||
import App from "./App.vue";
|
||||
import Button from "primevue/button";
|
||||
import PrimeVue from "primevue/config";
|
||||
const app = createApp(App);
|
||||
app.use(PrimeVue, { ripple: true });
|
||||
app.component("Button", Button);
|
||||
|
||||
app.mount("#app");
|
||||
`
|
||||
}
|
||||
|
||||
_files['public/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" />
|
||||
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
}
|
||||
|
||||
_files['src/App.vue'] = {
|
||||
content:
|
||||
`<template>
|
||||
<${name}></${name}>
|
||||
</template>
|
||||
<${scriptText}>
|
||||
import ${name} from './components/${name}'
|
||||
export default {
|
||||
components: {
|
||||
${name}
|
||||
}
|
||||
}
|
||||
</${scriptText}>
|
||||
<style lang="scss">
|
||||
@import './App.scss';
|
||||
</style>
|
||||
`
|
||||
}
|
||||
|
||||
_files['src/App.scss'] = {
|
||||
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 {
|
||||
vertical-align: middle;
|
||||
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;
|
||||
}
|
||||
|
||||
.p-column-filter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
|
||||
.content-section {
|
||||
padding: 2rem;
|
||||
|
||||
&.introduction {
|
||||
background-color: #f8f9fa;
|
||||
color: #495057;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
align-items: top;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&.implementation {
|
||||
background-color: #f8f9fa;;
|
||||
color: #495057;
|
||||
|
||||
+.documentation {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #ffffff;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
`,
|
||||
}
|
||||
|
||||
|
||||
if (this.service) {
|
||||
_files[`src/service/${this.service}${extension}`] = {
|
||||
content: services[this.service]
|
||||
}
|
||||
|
||||
extDependencies['axios'] = "^0.19.0";
|
||||
extDependencies['@babel/cli'] = "^7.4.4";
|
||||
extDependencies['@vue/cli-plugin-babel'] = "~4.5.0";
|
||||
extDependencies['@vue/cli-service'] = "~4.5.0";
|
||||
extDependencies['@vue/compiler-sfc'] = "^3.0.0";
|
||||
extDependencies['core-js'] = "^3.6.5";
|
||||
}
|
||||
|
||||
if (this.data) {
|
||||
const dataArr = this.data.split(',');
|
||||
dataArr.forEach(el => {
|
||||
_files[`public/data/${el}.json`] = {
|
||||
content: data[el]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue