修复steps组件在原生环境下无法修改状态的bug;优化sandbox组件

master
yutent 2023-04-28 17:14:41 +08:00
parent 68dd385ee1
commit 9ee341d09c
2 changed files with 48 additions and 40 deletions

View File

@ -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'
}

View File

@ -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', '')
}
}
})
}