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

Merge branch 'master' of ssh://github.com/bd-js/wcui

master
chenjiajian 2023-04-28 18:33:53 +08:00
parent 3eab56a049 2584829e0c
commit 54e8243ec1
9 changed files with 86 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@bd/ui",
"version": "0.1.9",
"version": "0.1.11",
"description": "",
"files": [
"dist/*"

2
src/divider/index.js
View File

@ -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;

42
src/markd/core.js
View File

@ -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 = /<style[^>]*?>([\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 += '</p>\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 += '</p>'
}
html += `${it}\n`
} else if (isMultiLineHtml) {
if (isParagraph) {
isParagraph = false
html = trimBr(html)
html += '</p>'
}
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<p>${it}`

5
src/markd/index.js
View File

@ -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`<div class="container">${raw(md2html(this.code))}</div>`
}
}

73
src/sandbox/index.js
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))
}
}
@ -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 = `<!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'
}

2
src/scroll/index.js
View File

@ -392,7 +392,7 @@ class Scroll extends Component {
this.__observer.observe(this.$refs.cont)
}
unmounted() {
this.__observer.disconnect()
this.__observer?.disconnect()
}
render() {

19
src/steps/index.js
View File

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

2
src/tabs/index.js
View File

@ -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) {

2
src/timeline/index.js
View File

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