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", "name": "@bd/ui",
"version": "0.1.9", "version": "0.1.11",
"description": "", "description": "",
"files": [ "files": [
"dist/*" "dist/*"

2
src/divider/index.js
View File

@ -23,6 +23,8 @@ class Divider extends Component {
user-select: none; user-select: none;
legend { legend {
display: inline-flex;
align-items: center;
padding: 0 8px; padding: 0 8px;
font-size: 12px; font-size: 12px;
text-align: center; 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 ATTR_RE = /\s*?on[a-zA-Z]+="[^"]*?"\s*?/g
const CODEBLOCK_RE = /```(.*?)([\w\W]*?)```/g const CODEBLOCK_RE = /```(.*?)([\w\W]*?)```/g
const BLOCK_RE = /<([\w\-]+)([^>]*?)>([\w\W]*?)<\/\1>/g const BLOCK_RE = /<([\w\-]+)([^>]*?)>([\w\W]*?)<\/\1>/g
const IS_DOM_RE = /^<([\w\-]+)[^>]*?>.*?<\/\1>$/
const STYLE_RE = /<style[^>]*?>([\w\W]*?)<\/style>/g const STYLE_RE = /<style[^>]*?>([\w\W]*?)<\/style>/g
const SINGLE_LINE_HTML_RE = /^\s*?<([\w\-]+)[^>]*?>.*?<\/\1>\s*?$/ const SINGLE_LINE_HTML_RE = /^\s*?<([\w\-]+)[^>]*?>.*?<\/\1>\s*?$/
const MULTI_LINE_HTML_RE = /^\s*?<\/?[^>]*?>/ const MULTI_LINE_HTML_RE = /^\s*?<\/?[^>]*?>/
@ -74,10 +73,6 @@ const Helper = {
}, },
isTable(str) { isTable(str) {
return /^\|.+?\|$/.test(str) return /^\|.+?\|$/.test(str)
},
// 是否原生dom节点
isNativeDom(str) {
return IS_DOM_RE.test(str)
} }
} }
@ -293,6 +288,7 @@ class Tool {
html += it html += it
isTable = !isTable isTable = !isTable
tableAlign = true tableAlign = true
isHtmlBlock = false
continue continue
} }
@ -334,6 +330,7 @@ class Tool {
} }
html += it html += it
isCodeBlock = !isCodeBlock isCodeBlock = !isCodeBlock
isHtmlBlock = false
continue continue
} }
@ -382,7 +379,7 @@ class Tool {
} }
isList = false isList = false
} }
isHtmlBlock = false
html += head html += head
continue continue
} }
@ -451,6 +448,7 @@ class Tool {
html += it html += it
} }
isHtmlBlock = false
isParagraph = false isParagraph = false
isBlockquote = true isBlockquote = true
continue continue
@ -460,6 +458,7 @@ class Tool {
let task = Decoder.task(it) let task = Decoder.task(it)
if (task) { if (task) {
html += task html += task
isHtmlBlock = false
continue continue
} }
@ -473,6 +472,11 @@ class Tool {
let level = Math.floor(ltrim / 2) //缩进级别 let level = Math.floor(ltrim / 2) //缩进级别
let tag = listChecked === 1 ? 'ol' : 'ul' let tag = listChecked === 1 ? 'ol' : 'ul'
if (isParagraph) {
isParagraph = false
html += '</p>\n'
}
if (isList) { if (isList) {
let _level = listChecked === 1 ? orderListLevel : unorderListLevel let _level = listChecked === 1 ? orderListLevel : unorderListLevel
@ -507,6 +511,7 @@ class Tool {
} }
isList = true isList = true
isHtmlBlock = false
continue continue
} }
@ -516,18 +521,23 @@ class Tool {
continue continue
} }
if (Helper.isNativeDom(it)) { if (isHtmlBlock || isSingleLineHtml) {
html += it if (isParagraph) {
continue isParagraph = false
} html = trimBr(html)
html += '</p>'
if (isParagraph) { }
html += `${it}\n`
} else if (isMultiLineHtml) {
if (isParagraph) {
isParagraph = false
html = trimBr(html)
html += '</p>'
}
isHtmlBlock = !isHtmlBlock
html += `${it}\n` html += `${it}\n`
} else { } else {
if (isHtmlBlock || isSingleLineHtml) { if (isParagraph) {
html += `${it}\n`
} else if (isMultiLineHtml) {
isHtmlBlock = !isHtmlBlock
html += `${it}\n` html += `${it}\n`
} else { } else {
html += `\n<p>${it}` html += `\n<p>${it}`

5
src/markd/index.js
View File

@ -68,6 +68,10 @@ class Markd extends Component {
p { p {
margin: 0; margin: 0;
} }
> blockquote {
margin: 5px 0;
padding: 0 10px;
}
} }
fieldset.md-hr { fieldset.md-hr {
@ -193,7 +197,6 @@ class Markd extends Component {
` `
render() { render() {
// console.log(md2html(this.code))
return html`<div class="container">${raw(md2html(this.code))}</div>` 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 { 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))
} }
} }
@ -133,7 +151,7 @@ class Sandbox extends Component {
created() { created() {
bind(this.root, 'slotchange', ev => { 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.#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'
} }

2
src/scroll/index.js
View File

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

19
src/steps/index.js
View File

@ -11,7 +11,7 @@ class Steps extends Component {
static props = { static props = {
active: { active: {
type: Number, type: Number,
default: 1, default: 0,
observer() { observer() {
this.$updateStepStatus() this.$updateStepStatus()
} }
@ -34,13 +34,16 @@ class Steps extends Component {
$updateStepStatus() { $updateStepStatus() {
;[...this.children].forEach((it, i) => { ;[...this.children].forEach((it, i) => {
it.index = i + 1 if (it.tagName === 'WC-STEP' && it.root) {
it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0 it.index = i + 1
it.vertical = this.vertical it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
if (i === 0) { it.vertical = this.vertical
it.setAttribute('first', '')
} else if (i === this.children.length - 1) { if (i === 0) {
it.setAttribute('last', '') 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() { created() {
bind(this.root, 'slotchange', ev => { bind(this.root, 'slotchange', ev => {
let children = ev.target.assignedNodes() let children = ev.target.assignedElements()
// 移除不合法的子组件 // 移除不合法的子组件
for (let it of children) { for (let it of children) {

2
src/timeline/index.js
View File

@ -34,7 +34,7 @@ class Timeline extends Component {
] ]
created() { created() {
bind(this.root, 'slotchange', ev => { bind(this.root, 'slotchange', ev => {
let children = ev.target.assignedNodes() let children = ev.target.assignedElements()
children.forEach((it, i) => { children.forEach((it, i) => {
it.removeAttribute('last') it.removeAttribute('last')