diff --git a/Readme.md b/Readme.md index 00eb3fe..f25cf86 100644 --- a/Readme.md +++ b/Readme.md @@ -1,6 +1,6 @@ # @bd/ui -百搭 UI 组件库, 基于 web components 开发。面向下一代的 UI 组件库 +百搭 UI 组件库, 基于 `web components` 开发。面向下一代的 UI 组件库 ![downloads](https://img.shields.io/npm/dt/@bd/ui.svg) ![version](https://img.shields.io/npm/v/@bd/ui.svg) @@ -14,7 +14,7 @@ - `simple http`, 可快速配置 http 服务器,支持 history 路由 - ... -- @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件 +- wkit 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件 ### 开发进度 && 计划 (40/55) diff --git a/develop.md b/develop.md index f95d640..e38e405 100644 --- a/develop.md +++ b/develop.md @@ -18,7 +18,7 @@ - + diff --git a/src/avatar/index.js b/src/avatar/index.js index 583b6ca..d74b8eb 100644 --- a/src/avatar/index.js +++ b/src/avatar/index.js @@ -3,7 +3,7 @@ * @author yutent * @date 2023/04/25 09:27:25 */ -import { html, raw, css, Component, nextTick } from '@bd/core' +import { html, raw, css, Component, nextTick } from 'wkit' import '../icon/index.js' class Avatar extends Component { diff --git a/src/badge/index.js b/src/badge/index.js index fc42760..2e86926 100644 --- a/src/badge/index.js +++ b/src/badge/index.js @@ -4,7 +4,7 @@ * @date 2023/03/21 16:14:10 */ -import { css, html, Component } from '@bd/core' +import { css, html, Component } from 'wkit' class Badge extends Component { static props = { diff --git a/src/breadcrumb/index.js b/src/breadcrumb/index.js index 535f256..f4598e1 100644 --- a/src/breadcrumb/index.js +++ b/src/breadcrumb/index.js @@ -4,7 +4,7 @@ * @date 2023/04/10 16:12:33 */ -import { css, html, Component, bind, styleMap } from '@bd/core' +import { css, html, Component, bind, styleMap } from 'wkit' const last = Symbol('last') diff --git a/src/card/index.js b/src/card/index.js index 725057f..55aeba1 100644 --- a/src/card/index.js +++ b/src/card/index.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, Component } from '@bd/core' +import { css, html, Component } from 'wkit' class Card extends Component { static props = { diff --git a/src/chatbubble/index.js b/src/chatbubble/index.js index 916be1e..ebd2902 100644 --- a/src/chatbubble/index.js +++ b/src/chatbubble/index.js @@ -3,7 +3,7 @@ * @author yutent * @date 2023/05/05 14:56:34 */ -import { css, html, Component, classMap } from '@bd/core' +import { css, html, Component, classMap } from 'wkit' import '../avatar/index.js' diff --git a/src/code/index.js b/src/code/index.js index ea4f60b..9d2ee87 100644 --- a/src/code/index.js +++ b/src/code/index.js @@ -3,7 +3,7 @@ * @author yutent * @date 2023/03/20 18:02:01 */ -import { html, raw, css, Component, nextTick } from '@bd/core' +import { html, raw, css, Component, nextTick } from 'wkit' import { colorHtml, colorJs, colorCss, colorMd } from './colorful.js' import '../icon/index.js' import '../layer/index.js' @@ -212,7 +212,18 @@ class Code extends Component { } copyCode() { - navigator.clipboard.writeText(this.code) + if (navigator.clipboard) { + navigator.clipboard.writeText(this.code) + } else { + let ta = document.createElement('textarea') + ta.style.position = 'fixed' + ta.style.left = '-2000px' + ta.value = this.code + this.root.appendChild(ta) + ta.select() + document.execCommand('copy') + ta.remove() + } layer.toast('复制到粘贴板成功', 'success') } diff --git a/src/collapse/index.js b/src/collapse/index.js index 1fd9b6a..4295dc9 100644 --- a/src/collapse/index.js +++ b/src/collapse/index.js @@ -4,7 +4,7 @@ * @date 2023/03/26 16:14:10 */ -import { css, html, Component, styleMap, nextTick } from '@bd/core' +import { css, html, Component, styleMap, nextTick } from 'wkit' import '../icon/index.js' class Collapse extends Component { diff --git a/src/color/index.js b/src/color/index.js index e1506d1..65be5b1 100644 --- a/src/color/index.js +++ b/src/color/index.js @@ -14,7 +14,7 @@ import { clearOutsideClick, nextTick, offset -} from '@bd/core' +} from 'wkit' // H: 色相, S: 饱和度, B/V: 亮度 export function hsb2rgb(hsb) { diff --git a/src/divider/index.js b/src/divider/index.js index 49c4da5..e60ad13 100644 --- a/src/divider/index.js +++ b/src/divider/index.js @@ -4,7 +4,7 @@ * @date 2023/04/26 15:20:28 */ -import { html, css, Component, styleMap, nextTick } from '@bd/core' +import { html, css, Component, styleMap, nextTick } from 'wkit' class Divider extends Component { static styles = [ diff --git a/src/drag/core.js b/src/drag/core.js index c0511bb..eb74349 100644 --- a/src/drag/core.js +++ b/src/drag/core.js @@ -4,7 +4,7 @@ * @date 2019/08/23 19:41:21 */ -import { $, bind, unbind, fire } from '@bd/core' +import { $, bind, unbind, fire } from 'wkit' const DEF_OPT = { axis: '', // x | y | xy 拖拽方向 diff --git a/src/drag/index.js b/src/drag/index.js index 605b93e..2e676d9 100644 --- a/src/drag/index.js +++ b/src/drag/index.js @@ -1,4 +1,4 @@ -import { css, html, Component, nextTick, styleMap } from '@bd/core' +import { css, html, Component, nextTick, styleMap } from 'wkit' import Core from './core.js' diff --git a/src/drawer/index.js b/src/drawer/index.js index e63114e..ad88d92 100644 --- a/src/drawer/index.js +++ b/src/drawer/index.js @@ -4,7 +4,7 @@ * @date 2023/03/27 10:39:29 */ -import { css, html, Component, nextTick, styleMap } from '@bd/core' +import { css, html, Component, nextTick, styleMap } from 'wkit' const ANIMATION = { left: { @@ -48,7 +48,7 @@ class Drawer extends Component { }, width: '', height: '', - 'mask-close': false + maskClose: false } static styles = [ @@ -136,7 +136,7 @@ class Drawer extends Component { this.$on('click', ev => { let path = ev.composedPath() - if (path[0] === ev.currentTarget && this['mask-close']) { + if (path[0] === ev.currentTarget && this.maskClose) { this.closeDrawer() } }) diff --git a/src/dropdown/index.js b/src/dropdown/index.js new file mode 100644 index 0000000..c6cef81 --- /dev/null +++ b/src/dropdown/index.js @@ -0,0 +1,118 @@ +/** + * {} + * @author yutent + * @date 2023/05/29 11:48:01 + */ + +import { nextTick, css, html, Component, bind } from 'wkit' +import '../icon/index.js' +import '../option/index.js' + +class Dropdown extends Component { + static props = {} + static styles = [ + css` + :host { + display: inline-flex; + min-width: 108px; + height: 32px; + font-size: 14px; + user-select: none; + -moz-user-select: none; + color: var(--color-dark-1); + } + + .dropdown { + position: relative; + display: flex; + width: 100%; + height: 100%; + } + + .default { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 0 8px; + + .arrow { + --size: 12px; + margin-left: 6px; + transform: rotate(-90deg); + } + } + `, + // 尺寸 + css` + @use 'sass:map'; + $sizes: ( + s: ( + w: 52px, + h: 20px, + f: 12px + ), + m: ( + w: 72px, + h: 24px, + f: 12px + ), + l: ( + w: 108px, + h: 32px, + f: 14px + ), + xl: ( + w: 132px, + h: 36px, + f: 14px + ), + xxl: ( + w: 160px, + h: 44px, + f: 14px + ) + ); + + @loop $s, $v in $sizes { + :host([size='#{$s}']) { + min-width: map.get($v, 'w'); + height: map.get($v, 'h'); + font-size: map.get($v, 'f'); + } + } + `, + + css` + .dropdown-list { + overflow: hidden; + position: absolute; + top: 32px; + padding: 8px 0; + border-radius: 3px; + background: #fff; + box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); + } + ` + ] + + mounted() {} + + render() { + return html` +
+
+ + +
+ +
+ +
+
+ ` + } +} + +Dropdown.reg('dropdown') diff --git a/src/form/button.js b/src/form/button.js index f1430d4..a519357 100644 --- a/src/form/button.js +++ b/src/form/button.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, Component, nextTick, styleMap } from '@bd/core' +import { css, html, Component, nextTick, styleMap } from 'wkit' import '../icon/index.js' class Button extends Component { @@ -111,11 +111,6 @@ class Button extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/checkbox.js b/src/form/checkbox.js index 8c4edc5..5d25e62 100644 --- a/src/form/checkbox.js +++ b/src/form/checkbox.js @@ -4,7 +4,7 @@ * @date 2023/03/21 16:14:10 */ -import { nextTick, css, html, Component } from '@bd/core' +import { nextTick, css, html, Component } from 'wkit' import '../icon/index.js' class Checkbox extends Component { @@ -153,11 +153,6 @@ class CheckboxItem extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/dropdown.js b/src/form/dropdown.js deleted file mode 100644 index ee2acaf..0000000 --- a/src/form/dropdown.js +++ /dev/null @@ -1,30 +0,0 @@ -import { nextTick, css, html, Component, bind } from '@bd/core' - -class Dropdown extends Component { - bar = 'balbal' - mounted() { - console.log('Dropdown: ', this.$refs) - - bind(this.$refs.balbal, 'mousedown', ev => { - console.log('aa : mousedown') - }) - } - - foo() { - console.log('foo: click') - } - - render() { - return html` -
-
- -
- dsdsd -
-
${this.bar}
- ` - } -} - -Dropdown.reg('dropdown') diff --git a/src/form/input.js b/src/form/input.js index ec28f3e..13dc14f 100644 --- a/src/form/input.js +++ b/src/form/input.js @@ -4,14 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { - nextTick, - css, - html, - Component, - classMap, - outsideClick -} from '@bd/core' +import { nextTick, css, html, Component, classMap, outsideClick } from 'wkit' import '../icon/index.js' const ANIMATION = { @@ -305,11 +298,6 @@ class Input extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/link.js b/src/form/link.js index 61dd6c5..59cdbae 100644 --- a/src/form/link.js +++ b/src/form/link.js @@ -4,7 +4,7 @@ * @date 2023/03/16 17:40:50 */ -import { css, html, Component, bind, unbind, nextTick } from '@bd/core' +import { css, html, Component, bind, unbind, nextTick } from 'wkit' class Link extends Component { static props = { diff --git a/src/form/number.js b/src/form/number.js index cc731dd..0d6c034 100644 --- a/src/form/number.js +++ b/src/form/number.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, Component, nextTick } from '@bd/core' +import { css, html, Component, nextTick } from 'wkit' class WcNumber extends Component { static props = { @@ -131,16 +131,6 @@ class WcNumber extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px - ), - xxxxl: ( - w: 212px, - h: 64px, - f: 18px ) ); diff --git a/src/form/passwd.js b/src/form/passwd.js index 6c2e167..79ceef5 100644 --- a/src/form/passwd.js +++ b/src/form/passwd.js @@ -3,7 +3,7 @@ * @author yutent * @date 2023/03/16 18:05:43 */ -import { css, html, Component, bind, unbind, nextTick } from '@bd/core' +import { css, html, Component, bind, unbind, nextTick } from 'wkit' import '../icon/index.js' class Passwd extends Component { @@ -108,11 +108,6 @@ class Passwd extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/radio.js b/src/form/radio.js index e18093d..bd2a8cb 100644 --- a/src/form/radio.js +++ b/src/form/radio.js @@ -4,7 +4,7 @@ * @date 2023/03/21 16:14:10 */ -import { nextTick, css, html, Component } from '@bd/core' +import { nextTick, css, html, Component } from 'wkit' class Radio extends Component { static props = { @@ -153,11 +153,6 @@ class RadioItem extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/form/select.js b/src/form/select.js index 0a3c80c..8cc053d 100644 --- a/src/form/select.js +++ b/src/form/select.js @@ -4,7 +4,7 @@ * @date 2023/03/21 16:14:10 */ -import { nextTick, css, html, Component } from '@bd/core' +import { nextTick, css, html, Component } from 'wkit' import '../icon/index.js' import '../form/input.js' import '../scroll/index.js' diff --git a/src/form/star.js b/src/form/star.js index 725e195..08276b2 100644 --- a/src/form/star.js +++ b/src/form/star.js @@ -4,15 +4,15 @@ * @date 2023/03/21 16:14:10 */ -import { nextTick, css, html, Component, classMap } from '@bd/core' +import { nextTick, css, html, Component, classMap } from 'wkit' import '../icon/index.js' class Star extends Component { static props = { value: 0, text: [], - 'allow-half': false, - 'show-value': false, + allowHalf: false, + showValue: false, disabled: false, clearable: false } @@ -115,7 +115,7 @@ class Star extends Component { f = f < 0.5 ? 0.5 : 1 } - if (!this['allow-half']) { + if (!this.allowHalf) { f = f > 0 ? 1 : 0 } // 数值没变化, 直接终止 @@ -171,6 +171,7 @@ class Star extends Component { } else { this.value = tmp.i + tmp.f } + this.$emit('input', { value: this.value }) this.$emit('change', { value: this.value }) } } @@ -199,7 +200,7 @@ class Star extends Component { - ${this['show-value'] ? val : ''} + ${this.showValue ? val : ''} ` } diff --git a/src/form/switch.js b/src/form/switch.js index b140f32..939f9d6 100644 --- a/src/form/switch.js +++ b/src/form/switch.js @@ -4,19 +4,18 @@ * @date 2023/03/21 16:14:10 */ -import { nextTick, css, html, Component, classMap } from '@bd/core' +import { nextTick, css, html, Component, classMap } from 'wkit' class Switch extends Component { static props = { size: 'l', value: { type: Boolean, - default: false, - attribute: false + default: false }, - 'inactive-text': '', - 'active-text': '', - 'inline-text': false, + inactiveText: '', + activeText: '', + inlineText: false, disabled: false, readonly: false } @@ -111,11 +110,6 @@ class Switch extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); @@ -195,11 +189,13 @@ class Switch extends Component { value: this.value } + this.$emit('input') this.$emit('change', data) } handleClick(ev) { if (ev.type === 'click' || ev.keyCode === 32) { + ev.preventDefault() this.toggleCheck(ev) } } @@ -215,17 +211,17 @@ class Switch extends Component { > ${!this['inline-text'] + >${!this.inlineText ? this.value - ? this['active-text'] - : this['inactive-text'] + ? this.activeText + : this.inactiveText : ''} ` diff --git a/src/form/textarea.js b/src/form/textarea.js index 2143869..2a19ddf 100644 --- a/src/form/textarea.js +++ b/src/form/textarea.js @@ -4,7 +4,7 @@ * @date 2023/03/18 14:14:25 */ -import { css, html, Component, nextTick } from '@bd/core' +import { css, html, Component, nextTick } from 'wkit' class TextArea extends Component { static props = { diff --git a/src/icon/index.js b/src/icon/index.js index f4d5e52..a44e704 100644 --- a/src/icon/index.js +++ b/src/icon/index.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, svg, html, Component } from '@bd/core' +import { css, svg, html, Component } from 'wkit' import SVG_DICT from './svg.js' @@ -56,8 +56,7 @@ class Icon extends Component { 'm': 24px, 'l': 32px, 'xl': 36px, - 'xxl': 44px, - 'xxxl': 52px + 'xxl': 44px ); @loop $k, $v in $gaps { diff --git a/src/image-preview/index.js b/src/image-preview/index.js index a200abd..132c1ae 100644 --- a/src/image-preview/index.js +++ b/src/image-preview/index.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, Component, styleMap, bind, unbind } from '@bd/core' +import { css, html, Component, styleMap, bind, unbind } from 'wkit' import '../icon/index.js' class ImagePreview extends Component { diff --git a/src/image/index.js b/src/image/index.js index 133287e..068c38a 100644 --- a/src/image/index.js +++ b/src/image/index.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, Component, styleMap } from '@bd/core' +import { css, html, Component, styleMap } from 'wkit' import '../icon/index.js' class Image extends Component { diff --git a/src/layer/index.js b/src/layer/index.js index 2bf54ba..e577436 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, Component, bind, styleMap } from '@bd/core' +import { css, html, Component, bind, styleMap } from 'wkit' import '../form/input.js' let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗 @@ -32,9 +32,9 @@ class Layer extends Component { top: { type: String, attribute: false }, bottom: { type: String, attribute: false }, background: { type: String, attribute: false }, - 'mask-color': { type: String, attribute: false }, + maskColor: { type: String, attribute: false }, mask: false, - 'mask-close': false, + maskClose: false, title: { type: String, default: '', attribute: false }, content: { type: String, default: '', attribute: false }, btns: [] @@ -356,7 +356,7 @@ class Layer extends Component { return } - if (this['mask-close']) { + if (this.maskClose) { if (this.#wrapped === false) { this.#reject() } @@ -365,8 +365,8 @@ class Layer extends Component { } }) - if (this['mask-color']) { - this.style.backgroundColor = this['mask-color'] + if (this.maskColor) { + this.style.backgroundColor = this.maskColor } } diff --git a/src/loading/index.js b/src/loading/index.js index 69e9875..16ae068 100644 --- a/src/loading/index.js +++ b/src/loading/index.js @@ -4,7 +4,7 @@ * @date 2023/04/26 15:20:28 */ -import { html, css, Component, styleMap, nextTick } from '@bd/core' +import { html, css, Component, styleMap, nextTick } from 'wkit' class Loading extends Component { static props = { diff --git a/src/markd/core.js b/src/markd/core.js index 11abde5..f70bdc3 100644 --- a/src/markd/core.js +++ b/src/markd/core.js @@ -271,8 +271,7 @@ class Tool { let isParagraph = false let isList = false - let orderListLevel = -1 - let unorderListLevel = -1 + let listTagQueue = [] let isQuoteList = false // 引用中的列表, 只支持一层级 let quoteListStyle = 0 // 1有序, 2 无序 @@ -282,10 +281,19 @@ class Tool { for (let it of this.list) { // 非空行 if (it) { + let lastLineIsEmpty = emptyLineLength > 0 emptyLineLength = 0 if (~it.indexOf('') || ~it.indexOf('
')) { - html += it + if (isList) { + if (isTable) { + html += it + `${' '.repeat(listTagQueue.length)}\n` + } else { + html = html.replace(/<\/li>\n*?$/, '') + it + } + } else { + html += it + } isTable = !isTable tableAlign = true isHtmlBlock = false @@ -328,7 +336,15 @@ class Tool { isParagraph = false html += '

\n' } - html += it + if (isList) { + if (isCodeBlock) { + html += it + `${' '.repeat(listTagQueue.length)}\n` + } else { + html = html.replace(/<\/li>\n*?$/, '') + it + } + } else { + html += it + } isCodeBlock = !isCodeBlock isHtmlBlock = false continue @@ -345,6 +361,7 @@ class Tool { let hrName = Helper.isHr(it) if (typeof hrName === 'string') { html += Decoder.hr(hrName) + emptyLineLength = 0 continue } @@ -368,13 +385,13 @@ class Tool { } // 有列表也先结束 if (isList) { - while (orderListLevel > -1 || unorderListLevel > -1) { - if (orderListLevel > unorderListLevel) { - html += '\n' - orderListLevel-- - } else { - html += '\n' - unorderListLevel-- + while (listTagQueue.length) { + let tag = listTagQueue.pop() + html += `${' '.repeat( + listTagQueue.length ? listTagQueue.length + 1 : 0 + )}\n` + if (listTagQueue.length) { + html += `${' '.repeat(listTagQueue.length)}\n` } } isList = false @@ -469,45 +486,47 @@ class Tool { let tmp = Helper.ltrim(it) let ltrim = it.length - tmp.length let word = tmp.replace(LIST_RE, '').trim() - let level = Math.floor(ltrim / 2) //缩进级别 + let _level = listTagQueue.length - 1 // 上一个缩进级别 + let level = Math.floor(ltrim / 2) // 当前缩进级别 let tag = listChecked === 1 ? 'ol' : 'ul' if (isParagraph) { isParagraph = false - html += '

\n' + if (!isList) { + html = trimBr(html) + html += '

\n' + } } if (isList) { - let _level = listChecked === 1 ? orderListLevel : unorderListLevel - // 大于上一个缩进 if (level > _level) { + listTagQueue.push(tag) // 需要先把上一个列表的结束符去掉 html = html.trim().replace(/<\/li>$/, '') - html += `\n<${tag}>\n
  • ${word}
    • \n` + html += `\n${' '.repeat(level + 1)}<${tag}>\n${' '.repeat( + level + 1 + )}
  • ${word}
    • \n` } // 跟上一个平级 else if (level === _level) { - html += `
  • ${word}
    • \n` + html += `${' '.repeat(level + 1)}
  • ${word}
    • \n` } // 比上一个缩进要小 else { - html += `\n\n
  • ${word}
    • \n` - } + for (let i = _level - level; i > 0; i--) { + let _tag = listTagQueue.pop() - if (listChecked === 1) { - orderListLevel = level - } else { - unorderListLevel = level + html += `${' '.repeat(level + i + 1)}\n${' '.repeat( + level + i + )}\n` + } + + html += `${' '.repeat(level + 1)}
  • ${word}
    • \n` } } else { - html += `<${tag}>\n` - if (listChecked === 1) { - orderListLevel = level - } else { - unorderListLevel = level - } - html += `
  • ${word}
    • \n` + listTagQueue.push(tag) + html += `<${tag}>\n
  • ${word}
    • \n` } isList = true @@ -521,6 +540,20 @@ class Tool { continue } + // 列表之后, 有段落时, 先结束列表 + if (isList && lastLineIsEmpty) { + while (listTagQueue.length) { + let tag = listTagQueue.pop() + html += `${' '.repeat( + listTagQueue.length ? listTagQueue.length + 1 : 0 + )}\n` + if (listTagQueue.length) { + html += `${' '.repeat(listTagQueue.length)}\n` + } + } + isList = false + } + if (isHtmlBlock || isSingleLineHtml) { if (isParagraph) { isParagraph = false @@ -537,12 +570,20 @@ class Tool { isHtmlBlock = !isHtmlBlock html += `${it}\n` } else { - if (isParagraph) { - html += `${it}\n` + if (isList) { + if (isParagraph) { + html += it + `

    \n${' '.repeat(listTagQueue.length)}\n` + } else { + html = html.replace(/<\/li>\n*?$/, '') + `\n

    ${it}` + } } else { - html += `\n

    ${it}` - isParagraph = true + if (isParagraph) { + html += `${it}\n` + } else { + html += `\n

    ${it}` + } } + isParagraph = true } } else { // 如果是在代码中, 直接拼接, 并加上换行 @@ -566,13 +607,13 @@ class Tool { if (isList) { if (emptyLineLength > 1) { - while (orderListLevel > -1 || unorderListLevel > -1) { - if (orderListLevel > unorderListLevel) { - html += '\n' - orderListLevel-- - } else { - html += '\n' - unorderListLevel-- + while (listTagQueue.length) { + let tag = listTagQueue.pop() + html += `${' '.repeat( + listTagQueue.length ? listTagQueue.length + 1 : 0 + )}\n` + if (listTagQueue.length) { + html += `${' '.repeat(listTagQueue.length)}\n` } } isList = false @@ -606,5 +647,5 @@ class Tool { } export default function (str) { - return Tool.init(str).parse() //.replace(/\\/g, '>') + return Tool.init(str).parse() } diff --git a/src/markd/index.js b/src/markd/index.js index 1d366a6..cbe5930 100644 --- a/src/markd/index.js +++ b/src/markd/index.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, raw, Component, bind, styleMap, classMap } from '@bd/core' +import { css, html, raw, Component, bind, styleMap, classMap } from 'wkit' import md2html from './core.js' import '../code/index.js' diff --git a/src/notify/index.js b/src/notify/index.js index 424dbf9..b4ed352 100644 --- a/src/notify/index.js +++ b/src/notify/index.js @@ -4,7 +4,7 @@ * @date 2023/04/10 17:17:10 */ -import { css, html, Component, bind, styleMap } from '@bd/core' +import { css, html, Component, bind, styleMap } from 'wkit' import '../icon/index.js' const ANIMATION = [ diff --git a/src/option/index.js b/src/option/index.js new file mode 100644 index 0000000..eacb482 --- /dev/null +++ b/src/option/index.js @@ -0,0 +1,68 @@ +/** + * {} + * @author yutent + * @date 2023/05/29 11:59:27 + */ + +import { nextTick, css, html, Component, bind } from 'wkit' + +class OptionGroup extends Component { + // + static props = { + label: '' + } + + static styles = [ + css` + :host { + display: block; + width: 100%; + line-height: 1.5; + } + + label { + padding: 0 8px; + line-height: 1; + font-size: 12px; + color: var(--color-grey-2); + } + ` + ] + + render() { + return html` + + + ` + } +} + +class Option extends Component { + // + static props = { + action: '', + disabled: false + } + + static styles = [ + css` + .item { + display: flex; + padding: 0 16px; + line-height: 2; + color: var(--color-dark-1); + + &:hover { + background: var(--color-plain-1); + } + } + ` + ] + + render() { + return html`

    ` + } +} + +OptionGroup.reg('option-group') +Option.reg('option') diff --git a/src/pager/index.js b/src/pager/index.js index 21c6bfc..b3b9182 100644 --- a/src/pager/index.js +++ b/src/pager/index.js @@ -4,7 +4,7 @@ * @date 2023/04/18 09:38:01 */ -import { css, html, Component, bind, styleMap } from '@bd/core' +import { css, html, Component, bind, styleMap } from 'wkit' import '../form/button.js' const LAYOUT_DICT = { @@ -243,7 +243,8 @@ class Pager extends Component { this.page = num - this.$emit('page-changed', { data: num }) + console.log(this) + this.$emit('page-change', { data: num }) } } @@ -252,9 +253,9 @@ class Pager extends Component { let n = +ev.target.value if (n === n) { this.page = n - this.$emit('page-changed', { data: this.page }) + this.$emit('page-change', { data: n }) } - ev.target.value = this.page + ev.target.value = n } } diff --git a/src/popconfirm/index.js b/src/popconfirm/index.js index 41f893d..053606c 100644 --- a/src/popconfirm/index.js +++ b/src/popconfirm/index.js @@ -4,7 +4,7 @@ * @date 2023/04/28 16:14:10 */ -import { css, html, Component, styleMap } from '@bd/core' +import { css, html, Component, styleMap } from 'wkit' import '../form/button.js' class Popconfirm extends Component { diff --git a/src/progress/index.js b/src/progress/index.js index e1b4573..f974070 100644 --- a/src/progress/index.js +++ b/src/progress/index.js @@ -4,7 +4,7 @@ * @date 2023/04/28 16:14:10 */ -import { css, html, Component, styleMap } from '@bd/core' +import { css, html, Component, styleMap } from 'wkit' class Progress extends Component { static props = { diff --git a/src/result/index.js b/src/result/index.js index 77e3e9d..de4150a 100644 --- a/src/result/index.js +++ b/src/result/index.js @@ -4,7 +4,7 @@ * @date 2023/04/28 16:14:10 */ -import { css, html, Component } from '@bd/core' +import { css, html, Component } from 'wkit' import '../icon/index.js' class Result extends Component { diff --git a/src/sandbox/index.js b/src/sandbox/index.js index 8cf8248..9a8fb88 100644 --- a/src/sandbox/index.js +++ b/src/sandbox/index.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, raw, bind, Component, nextTick, classMap } from '@bd/core' +import { css, html, raw, bind, Component, nextTick, classMap } from 'wkit' import '../icon/index.js' import { gzip } from '@bytedo/gzip' import { colorHtml, colorJs, colorCss } from '../code/colorful.js' @@ -16,7 +16,7 @@ const template = ` - + diff --git a/src/scroll/index.js b/src/scroll/index.js index 962bda2..48acfa0 100644 --- a/src/scroll/index.js +++ b/src/scroll/index.js @@ -4,7 +4,7 @@ * @date 2023/03/20 15:17:25 */ -import { css, html, bind, unbind, Component } from '@bd/core' +import { css, html, bind, unbind, Component } from 'wkit' class Scroll extends Component { static props = { diff --git a/src/slider/index.js b/src/slider/index.js index ef87807..393aef9 100644 --- a/src/slider/index.js +++ b/src/slider/index.js @@ -4,7 +4,7 @@ * @date 2023/03/21 16:14:10 */ -import { css, bind, unbind, html, Component } from '@bd/core' +import { css, bind, unbind, html, Component } from 'wkit' class Slider extends Component { static props = { diff --git a/src/space/index.js b/src/space/index.js index 0e91287..5c52bc8 100644 --- a/src/space/index.js +++ b/src/space/index.js @@ -4,7 +4,7 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, Component } from '@bd/core' +import { css, html, Component } from 'wkit' class Space extends Component { static styles = css` diff --git a/src/steps/index.js b/src/steps/index.js index 32c627b..57ee292 100644 --- a/src/steps/index.js +++ b/src/steps/index.js @@ -4,7 +4,7 @@ * @date 2023/04/18 09:38:01 */ -import { css, html, Component, bind, styleMap, classMap } from '@bd/core' +import { css, html, Component, bind, styleMap, classMap } from 'wkit' import '../icon/index.js' class Steps extends Component { diff --git a/src/swipe/index.js b/src/swipe/index.js index 5ce06db..9f7ce03 100644 --- a/src/swipe/index.js +++ b/src/swipe/index.js @@ -4,7 +4,7 @@ * @date 2023/03/26 16:14:10 */ -import { css, html, Component, nextTick, styleMap } from '@bd/core' +import { css, html, Component, nextTick, styleMap } from 'wkit' import '../icon/index.js' const CARD_SCALE = 0.83 diff --git a/src/tabs/index.js b/src/tabs/index.js index 5feabba..0f55186 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -4,22 +4,14 @@ * @date 2023/03/06 15:17:25 */ -import { - css, - html, - bind, - Component, - nextTick, - styleMap, - classMap -} from '@bd/core' +import { css, html, bind, Component, nextTick, styleMap, classMap } from 'wkit' import '../icon/index.js' class Tabs extends Component { static props = { tab: { type: String, attribute: false }, type: 'default', - 'tab-position': 'top', + tabPosition: 'top', labels: [] } @@ -51,7 +43,7 @@ class Tabs extends Component { flex-shrink: 0; display: flex; width: 100%; - height: 38px; + min-height: 38px; color: var(--color-dark-1); user-select: none; } @@ -163,11 +155,12 @@ class Tabs extends Component { } .navs { flex-direction: column; - } - .label { - margin: 0; - height: 38px; - padding: 0 16px; + + > .label { + margin: 0; + min-height: 38px; + padding: 0 16px; + } } .active-bar { width: 2px; @@ -526,7 +519,7 @@ class Tabs extends Component { render() { let tabStyle = {} - if (this['tab-position'] === 'top' || this['tab-position'] === 'bottom') { + if (this.tabPosition === 'top' || this.tabPosition === 'bottom') { tabStyle = { width: this.#tabWidth + 'px', left: this.#tabLeft + 'px' diff --git a/src/tag/index.js b/src/tag/index.js index f7e4264..e6fbb6a 100644 --- a/src/tag/index.js +++ b/src/tag/index.js @@ -4,7 +4,7 @@ * @date 2023/04/28 16:14:10 */ -import { css, html, Component, styleMap } from '@bd/core' +import { css, html, Component, styleMap } from 'wkit' import '../icon/index.js' const ANIMATION = { diff --git a/src/timeline/index.js b/src/timeline/index.js index 3175ec2..7c914ee 100644 --- a/src/timeline/index.js +++ b/src/timeline/index.js @@ -4,7 +4,7 @@ * @date 2023/04/18 09:38:01 */ -import { css, html, Component, bind, styleMap, classMap } from '@bd/core' +import { css, html, Component, bind, styleMap, classMap } from 'wkit' import '../icon/index.js' function pad(n) { diff --git a/开发规范.md b/开发规范.md index 6f543ca..3a13171 100644 --- a/开发规范.md +++ b/开发规范.md @@ -20,7 +20,6 @@ - `size=l` 大号, 32px (默认值) - `size=xl` 加大号, 36px - `size=xxl` 加加大号, 44px - - `size=xxxl` 加加加大号, 52px 4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑 > 统一为增加 `lazy="1000"` 属性实现 \ No newline at end of file