bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

修复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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/sandbox/index.js
View File

@ -9,6 +9,19 @@ import '../icon/index.js'
import { gzip } from '@bytedo/gzip' import { gzip } from '@bytedo/gzip'
import { colorHtml, colorJs, colorCss } from '../code/colorful.js' 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) { function trim(str) {
return str return str
.trim() .trim()
@ -19,7 +32,12 @@ function trim(str) {
class Sandbox extends Component { class Sandbox extends Component {
static props = { 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` static styles = css`
@ -121,7 +139,7 @@ class Sandbox extends Component {
this.tab = key this.tab = key
} else { } 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.#cache[lang].panel = slot
} }
this.updatePreview(lang) this.updatePreview(lang, slot.code)
this.$requestUpdate() this.$requestUpdate()
}) })
} }
updatePreview(lang) { updatePreview(lang, code) {
let doc = this.$refs.preview.contentWindow.document let doc = this.$refs.preview.contentDocument
if (this.#created) { if (this.#created) {
switch (lang) { switch (lang) {
case 'css': case 'css':
doc.head.querySelector('style').innerText = this.#cache.css.code doc.head.children.namedItem('css').textContent = code
break break
case 'javascript': case 'javascript':
doc.head.querySelector('script[type="module"]').innerText = doc.head.children.namedItem('js').textContent = code
this.#cache.javascript.code
break break
case 'html': case 'html':
doc.body.innerHTML = this.#cache.html.code doc.body.innerHTML = code
break 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) { contentLoaded(ev) {
let elem = ev.target let elem = ev.target
let body = elem.contentWindow.document.body let body = elem.contentDocument.body
elem.style.height = body.clientHeight + 'px' 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() { mounted() {
// //
this.#cache.preview.panel = this.$refs.preview this.#cache.preview.panel = this.$refs.preview
this.renderTemplate()
this.$refs.preview.style.display = 'block' this.$refs.preview.style.display = 'block'
} }

3
src/steps/index.js
View File

@ -34,14 +34,17 @@ class Steps extends Component {
$updateStepStatus() { $updateStepStatus() {
;[...this.children].forEach((it, i) => { ;[...this.children].forEach((it, i) => {
if (it.tagName === 'WC-STEP' && it.root) {
it.index = i + 1 it.index = i + 1
it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0 it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
it.vertical = this.vertical it.vertical = this.vertical
if (i === 0) { if (i === 0) {
it.setAttribute('first', '') it.setAttribute('first', '')
} else if (i === this.children.length - 1) { } else if (i === this.children.length - 1) {
it.setAttribute('last', '') it.setAttribute('last', '')
} }
}
}) })
} }