diff --git a/package.json b/package.json index 2dfb791..a7ffd07 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bd/ui", - "version": "0.1.9", + "version": "0.1.11", "description": "", "files": [ "dist/*" diff --git a/src/divider/index.js b/src/divider/index.js index 2dd901f..49c4da5 100644 --- a/src/divider/index.js +++ b/src/divider/index.js @@ -23,6 +23,8 @@ class Divider extends Component { user-select: none; legend { + display: inline-flex; + align-items: center; padding: 0 8px; font-size: 12px; text-align: center; diff --git a/src/markd/core.js b/src/markd/core.js index e7aead5..11abde5 100644 --- a/src/markd/core.js +++ b/src/markd/core.js @@ -13,7 +13,6 @@ const TAG_RE = /<([\w\-]+)([\w\W]*?)>/g const ATTR_RE = /\s*?on[a-zA-Z]+="[^"]*?"\s*?/g const CODEBLOCK_RE = /```(.*?)([\w\W]*?)```/g const BLOCK_RE = /<([\w\-]+)([^>]*?)>([\w\W]*?)<\/\1>/g -const IS_DOM_RE = /^<([\w\-]+)[^>]*?>.*?<\/\1>$/ const STYLE_RE = /]*?>([\w\W]*?)<\/style>/g const SINGLE_LINE_HTML_RE = /^\s*?<([\w\-]+)[^>]*?>.*?<\/\1>\s*?$/ const MULTI_LINE_HTML_RE = /^\s*?<\/?[^>]*?>/ @@ -74,10 +73,6 @@ const Helper = { }, isTable(str) { return /^\|.+?\|$/.test(str) - }, - // 是否原生dom节点 - isNativeDom(str) { - return IS_DOM_RE.test(str) } } @@ -293,6 +288,7 @@ class Tool { html += it isTable = !isTable tableAlign = true + isHtmlBlock = false continue } @@ -334,6 +330,7 @@ class Tool { } html += it isCodeBlock = !isCodeBlock + isHtmlBlock = false continue } @@ -382,7 +379,7 @@ class Tool { } isList = false } - + isHtmlBlock = false html += head continue } @@ -451,6 +448,7 @@ class Tool { html += it } + isHtmlBlock = false isParagraph = false isBlockquote = true continue @@ -460,6 +458,7 @@ class Tool { let task = Decoder.task(it) if (task) { html += task + isHtmlBlock = false continue } @@ -473,6 +472,11 @@ class Tool { let level = Math.floor(ltrim / 2) //缩进级别 let tag = listChecked === 1 ? 'ol' : 'ul' + if (isParagraph) { + isParagraph = false + html += '

\n' + } + if (isList) { let _level = listChecked === 1 ? orderListLevel : unorderListLevel @@ -507,6 +511,7 @@ class Tool { } isList = true + isHtmlBlock = false continue } @@ -516,18 +521,23 @@ class Tool { continue } - if (Helper.isNativeDom(it)) { - html += it - continue - } - - if (isParagraph) { + if (isHtmlBlock || isSingleLineHtml) { + if (isParagraph) { + isParagraph = false + html = trimBr(html) + html += '

' + } + html += `${it}\n` + } else if (isMultiLineHtml) { + if (isParagraph) { + isParagraph = false + html = trimBr(html) + html += '

' + } + isHtmlBlock = !isHtmlBlock html += `${it}\n` } else { - if (isHtmlBlock || isSingleLineHtml) { - html += `${it}\n` - } else if (isMultiLineHtml) { - isHtmlBlock = !isHtmlBlock + if (isParagraph) { html += `${it}\n` } else { html += `\n

${it}` diff --git a/src/markd/index.js b/src/markd/index.js index e16c7e3..1d366a6 100644 --- a/src/markd/index.js +++ b/src/markd/index.js @@ -68,6 +68,10 @@ class Markd extends Component { p { margin: 0; } + > blockquote { + margin: 5px 0; + padding: 0 10px; + } } fieldset.md-hr { @@ -193,7 +197,6 @@ class Markd extends Component { ` render() { - // console.log(md2html(this.code)) return html`

${raw(md2html(this.code))}
` } } diff --git a/src/sandbox/index.js b/src/sandbox/index.js index 4753b98..a3d63d9 100644 --- a/src/sandbox/index.js +++ b/src/sandbox/index.js @@ -9,6 +9,19 @@ import '../icon/index.js' import { gzip } from '@bytedo/gzip' import { colorHtml, colorJs, colorCss } from '../code/colorful.js' +const template = ` + + + + + + + + + + +` + 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)) } } @@ -133,7 +151,7 @@ class Sandbox extends Component { created() { bind(this.root, 'slotchange', ev => { - let slot = ev.target.assignedNodes().pop() + let slot = ev.target.assignedElements().pop() // 移除不合法的子组件 @@ -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 = ` - - - - - - - - - - - ${this.#cache.html.code} - - ` - - 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' } diff --git a/src/scroll/index.js b/src/scroll/index.js index 02759a0..962bda2 100644 --- a/src/scroll/index.js +++ b/src/scroll/index.js @@ -392,7 +392,7 @@ class Scroll extends Component { this.__observer.observe(this.$refs.cont) } unmounted() { - this.__observer.disconnect() + this.__observer?.disconnect() } render() { diff --git a/src/steps/index.js b/src/steps/index.js index f1b398e..32c627b 100644 --- a/src/steps/index.js +++ b/src/steps/index.js @@ -11,7 +11,7 @@ class Steps extends Component { static props = { active: { type: Number, - default: 1, + default: 0, observer() { this.$updateStepStatus() } @@ -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', '') + } } }) } diff --git a/src/tabs/index.js b/src/tabs/index.js index 41259ef..5feabba 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -477,7 +477,7 @@ class Tabs extends Component { created() { bind(this.root, 'slotchange', ev => { - let children = ev.target.assignedNodes() + let children = ev.target.assignedElements() // 移除不合法的子组件 for (let it of children) { diff --git a/src/timeline/index.js b/src/timeline/index.js index 3a8a2e1..3175ec2 100644 --- a/src/timeline/index.js +++ b/src/timeline/index.js @@ -34,7 +34,7 @@ class Timeline extends Component { ] created() { bind(this.root, 'slotchange', ev => { - let children = ev.target.assignedNodes() + let children = ev.target.assignedElements() children.forEach((it, i) => { it.removeAttribute('last')