修复steps组件在原生环境下无法修改状态的bug;优化sandbox组件
parent
68dd385ee1
commit
9ee341d09c
|
|
@ -9,6 +9,19 @@ import '../icon/index.js'
|
|||
import { gzip } from '@bytedo/gzip'
|
||||
import { colorHtml, colorJs, colorCss } from '../code/colorful.js'
|
||||
|
||||
const template = `<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
|
||||
<style>body {padding:32px;}</style>
|
||||
<style name="css"></style>
|
||||
<script type="importmap">{"imports":{"es.shim":"//jscdn.ink/es.shim/latest/index.js","vue":"//jscdn.ink/vue/3.2.47/vue.esm-browser.prod.js","vue-router":"//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js","fetch":"//jscdn.ink/@bytedo/fetch/latest/next.js","@bd/core2":"//jscdn.ink/@bd/core/latest/index.js","@bd/core":"//127.0.0.1:9999/src/index.js"}}</script>
|
||||
<script name="js" type="module"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>`
|
||||
|
||||
function trim(str) {
|
||||
return str
|
||||
.trim()
|
||||
|
|
@ -19,7 +32,12 @@ function trim(str) {
|
|||
|
||||
class Sandbox extends Component {
|
||||
static props = {
|
||||
tab: { type: String, default: 'preview', attribute: false }
|
||||
tab: { type: String, default: 'preview', attribute: false },
|
||||
playground: {
|
||||
type: String,
|
||||
default: 'https://bd-js.github.io/playground.html',
|
||||
attribute: false
|
||||
}
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
|
@ -121,7 +139,7 @@ class Sandbox extends Component {
|
|||
|
||||
this.tab = key
|
||||
} else {
|
||||
window.open('https://bd-js.github.io/playground.html#' + gzip(this.code))
|
||||
window.open(this.playground + '#' + gzip(this.code))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -149,61 +167,48 @@ class Sandbox extends Component {
|
|||
this.#cache[lang].panel = slot
|
||||
}
|
||||
|
||||
this.updatePreview(lang)
|
||||
this.updatePreview(lang, slot.code)
|
||||
this.$requestUpdate()
|
||||
})
|
||||
}
|
||||
|
||||
updatePreview(lang) {
|
||||
let doc = this.$refs.preview.contentWindow.document
|
||||
updatePreview(lang, code) {
|
||||
let doc = this.$refs.preview.contentDocument
|
||||
if (this.#created) {
|
||||
switch (lang) {
|
||||
case 'css':
|
||||
doc.head.querySelector('style').innerText = this.#cache.css.code
|
||||
doc.head.children.namedItem('css').textContent = code
|
||||
break
|
||||
case 'javascript':
|
||||
doc.head.querySelector('script[type="module"]').innerText =
|
||||
this.#cache.javascript.code
|
||||
doc.head.children.namedItem('js').textContent = code
|
||||
break
|
||||
|
||||
case 'html':
|
||||
doc.body.innerHTML = this.#cache.html.code
|
||||
doc.body.innerHTML = code
|
||||
break
|
||||
}
|
||||
} else {
|
||||
let html = `<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
|
||||
<style>${this.#cache.css.code}</style>
|
||||
<style>body {padding:32px;}</style>
|
||||
<script type="importmap">{"imports":{"es.shim":"//jscdn.ink/es.shim/latest/index.js","vue":"//jscdn.ink/vue/3.2.47/vue.esm-browser.prod.js","vue-router":"//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js","fetch":"//jscdn.ink/@bytedo/fetch/latest/next.js","@bd/core":"//jscdn.ink/@bd/core/latest/index.js"}}</script>
|
||||
<script type="module">${this.#cache.javascript.code}</script>
|
||||
</head>
|
||||
<body>
|
||||
${this.#cache.html.code}
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
try {
|
||||
doc.open()
|
||||
doc.write(html)
|
||||
doc.close()
|
||||
this.#created = true
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
contentLoaded(ev) {
|
||||
let elem = ev.target
|
||||
let body = elem.contentWindow.document.body
|
||||
let body = elem.contentDocument.body
|
||||
elem.style.height = body.clientHeight + 'px'
|
||||
}
|
||||
|
||||
renderTemplate() {
|
||||
let doc = this.$refs.preview.contentDocument
|
||||
try {
|
||||
doc.open()
|
||||
doc.write(template)
|
||||
doc.close()
|
||||
this.#created = true
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
//
|
||||
this.#cache.preview.panel = this.$refs.preview
|
||||
this.renderTemplate()
|
||||
this.$refs.preview.style.display = 'block'
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,13 +34,16 @@ class Steps extends Component {
|
|||
|
||||
$updateStepStatus() {
|
||||
;[...this.children].forEach((it, i) => {
|
||||
it.index = i + 1
|
||||
it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
|
||||
it.vertical = this.vertical
|
||||
if (i === 0) {
|
||||
it.setAttribute('first', '')
|
||||
} else if (i === this.children.length - 1) {
|
||||
it.setAttribute('last', '')
|
||||
if (it.tagName === 'WC-STEP' && it.root) {
|
||||
it.index = i + 1
|
||||
it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
|
||||
it.vertical = this.vertical
|
||||
|
||||
if (i === 0) {
|
||||
it.setAttribute('first', '')
|
||||
} else if (i === this.children.length - 1) {
|
||||
it.setAttribute('last', '')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue