From 226ccb6ffd8e4123f282c9e702cd40d514bd6a19 Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 23 May 2023 17:09:22 +0800 Subject: [PATCH 1/9] =?UTF-8?q?=E4=BC=98=E5=8C=96markd=E5=AF=B9=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E7=9A=84=E8=A7=A3=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/markd/core.js | 127 +++++++++++++++++++++++++++++++--------------- 1 file changed, 85 insertions(+), 42 deletions(-) diff --git a/src/markd/core.js b/src/markd/core.js index 11abde5..1b749f7 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 @@ -596,9 +637,11 @@ class Tool { } } + console.log('>>>>') if (isParagraph) { html += '

    ' } + console.log(html) delete this.list delete this.__LINKS__ return html.trim() @@ -606,5 +649,5 @@ class Tool { } export default function (str) { - return Tool.init(str).parse() //.replace(/\\/g, '>') + return Tool.init(str).parse() } From 7a25bd1ca11757f203450d49ab8c57608d0bc11c Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 23 May 2023 19:04:38 +0800 Subject: [PATCH 2/9] remove debug --- src/markd/core.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/markd/core.js b/src/markd/core.js index 1b749f7..f70bdc3 100644 --- a/src/markd/core.js +++ b/src/markd/core.js @@ -637,11 +637,9 @@ class Tool { } } - console.log('>>>>') if (isParagraph) { html += '

    ' } - console.log(html) delete this.list delete this.__LINKS__ return html.trim() From f86ce323c82418fcd5cd2bf9203faf8d1602470c Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 24 May 2023 11:44:10 +0800 Subject: [PATCH 3/9] =?UTF-8?q?code=E7=BB=84=E4=BB=B6=E7=9A=84=E5=A4=8D?= =?UTF-8?q?=E5=88=B6=E5=8A=9F=E8=83=BD=E5=85=BC=E5=AE=B9=E5=9C=A8http?= =?UTF-8?q?=E8=AE=BF=E9=97=AE=E6=97=B6=E6=97=A0clipboard=E7=9A=84=E6=83=85?= =?UTF-8?q?=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/code/index.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/code/index.js b/src/code/index.js index ea4f60b..923371b 100644 --- a/src/code/index.js +++ b/src/code/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') } From 329421995b797aeacd91f88cfefe96803e3f6661 Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 24 May 2023 11:54:26 +0800 Subject: [PATCH 4/9] =?UTF-8?q?props=E5=AE=9A=E4=B9=89=E6=94=B9=E4=B8=BA?= =?UTF-8?q?=E9=A9=BC=E5=B3=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/drawer/index.js | 4 ++-- src/form/star.js | 8 ++++---- src/form/switch.js | 18 +++++++++--------- src/layer/index.js | 10 +++++----- src/tabs/index.js | 4 ++-- 5 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/drawer/index.js b/src/drawer/index.js index e63114e..d1783bb 100644 --- a/src/drawer/index.js +++ b/src/drawer/index.js @@ -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/form/star.js b/src/form/star.js index 725e195..29c9889 100644 --- a/src/form/star.js +++ b/src/form/star.js @@ -11,8 +11,8 @@ 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 } // 数值没变化, 直接终止 @@ -199,7 +199,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..1ef568d 100644 --- a/src/form/switch.js +++ b/src/form/switch.js @@ -14,9 +14,9 @@ class Switch extends Component { default: false, attribute: false }, - 'inactive-text': '', - 'active-text': '', - 'inline-text': false, + inactiveText: '', + activeText: '', + inlineText: false, disabled: false, readonly: false } @@ -215,17 +215,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/layer/index.js b/src/layer/index.js index 2bf54ba..3911766 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -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/tabs/index.js b/src/tabs/index.js index 5feabba..6b1059b 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -19,7 +19,7 @@ class Tabs extends Component { static props = { tab: { type: String, attribute: false }, type: 'default', - 'tab-position': 'top', + tabPosition: 'top', labels: [] } @@ -526,7 +526,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' From cb97ebb73e893eaddd3ebc3e4b19612727400c0f Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 25 May 2023 17:00:17 +0800 Subject: [PATCH 5/9] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E4=BE=9D=E8=B5=96?= =?UTF-8?q?=E6=9B=B4=E5=90=8D=E4=B8=BAwkit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 4 ++-- develop.md | 2 +- src/avatar/index.js | 2 +- src/badge/index.js | 2 +- src/breadcrumb/index.js | 2 +- src/card/index.js | 2 +- src/chatbubble/index.js | 2 +- src/code/index.js | 2 +- src/collapse/index.js | 2 +- src/color/index.js | 2 +- src/divider/index.js | 2 +- src/drag/core.js | 2 +- src/drag/index.js | 2 +- src/drawer/index.js | 2 +- src/form/button.js | 2 +- src/form/checkbox.js | 2 +- src/form/dropdown.js | 2 +- src/form/input.js | 9 +-------- src/form/link.js | 2 +- src/form/number.js | 2 +- src/form/passwd.js | 2 +- src/form/radio.js | 2 +- src/form/select.js | 2 +- src/form/star.js | 2 +- src/form/switch.js | 2 +- src/form/textarea.js | 2 +- src/icon/index.js | 2 +- src/image-preview/index.js | 2 +- src/image/index.js | 2 +- src/layer/index.js | 2 +- src/loading/index.js | 2 +- src/markd/index.js | 2 +- src/notify/index.js | 2 +- src/pager/index.js | 2 +- src/popconfirm/index.js | 2 +- src/progress/index.js | 2 +- src/result/index.js | 2 +- src/sandbox/index.js | 4 ++-- src/scroll/index.js | 2 +- src/slider/index.js | 2 +- src/space/index.js | 2 +- src/steps/index.js | 2 +- src/swipe/index.js | 2 +- src/tabs/index.js | 10 +--------- src/tag/index.js | 2 +- src/timeline/index.js | 2 +- 46 files changed, 48 insertions(+), 63 deletions(-) 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 923371b..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' 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 d1783bb..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: { diff --git a/src/form/button.js b/src/form/button.js index f1430d4..fdc2170 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 { diff --git a/src/form/checkbox.js b/src/form/checkbox.js index 8c4edc5..574fd51 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 { diff --git a/src/form/dropdown.js b/src/form/dropdown.js index ee2acaf..4c1c27e 100644 --- a/src/form/dropdown.js +++ b/src/form/dropdown.js @@ -1,4 +1,4 @@ -import { nextTick, css, html, Component, bind } from '@bd/core' +import { nextTick, css, html, Component, bind } from 'wkit' class Dropdown extends Component { bar = 'balbal' diff --git a/src/form/input.js b/src/form/input.js index ec28f3e..7aae612 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 = { 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..e67963b 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 = { diff --git a/src/form/passwd.js b/src/form/passwd.js index 6c2e167..166042f 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 { diff --git a/src/form/radio.js b/src/form/radio.js index e18093d..e619d8b 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 = { 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 29c9889..52bd9d1 100644 --- a/src/form/star.js +++ b/src/form/star.js @@ -4,7 +4,7 @@ * @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 { diff --git a/src/form/switch.js b/src/form/switch.js index 1ef568d..8ee6b3b 100644 --- a/src/form/switch.js +++ b/src/form/switch.js @@ -4,7 +4,7 @@ * @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 = { 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..54d257a 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' 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 3911766..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类型的弹窗 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/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/pager/index.js b/src/pager/index.js index 21c6bfc..9191415 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 = { 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..ead29ae 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 3e70cf4..e618add 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 6b1059b..2034d93 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -4,15 +4,7 @@ * @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 { 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) { From 28877df64acaa539a13873a20c3b9eb76e3501a6 Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 26 May 2023 00:06:18 +0800 Subject: [PATCH 6/9] =?UTF-8?q?switch=E5=92=8Cstar=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=85=BC=E5=AE=B9vue3=E7=9A=84=E5=8F=8C=E5=90=91=E7=BB=91?= =?UTF-8?q?=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/form/star.js | 1 + src/form/switch.js | 5 +++-- src/pager/index.js | 7 ++++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/form/star.js b/src/form/star.js index 52bd9d1..08276b2 100644 --- a/src/form/star.js +++ b/src/form/star.js @@ -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 }) } } diff --git a/src/form/switch.js b/src/form/switch.js index 8ee6b3b..3a229dc 100644 --- a/src/form/switch.js +++ b/src/form/switch.js @@ -11,8 +11,7 @@ class Switch extends Component { size: 'l', value: { type: Boolean, - default: false, - attribute: false + default: false }, inactiveText: '', activeText: '', @@ -195,11 +194,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) } } diff --git a/src/pager/index.js b/src/pager/index.js index 9191415..b3b9182 100644 --- a/src/pager/index.js +++ b/src/pager/index.js @@ -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 } } From c1442e4ddbe0fa4957d4fd0cbc640eaa6fbbcddd Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 26 May 2023 00:14:32 +0800 Subject: [PATCH 7/9] =?UTF-8?q?=E7=A7=BB=E9=99=A4sandbox=E7=9A=84=E8=B0=83?= =?UTF-8?q?=E8=AF=95=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sandbox/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sandbox/index.js b/src/sandbox/index.js index ead29ae..9a8fb88 100644 --- a/src/sandbox/index.js +++ b/src/sandbox/index.js @@ -16,7 +16,7 @@ const template = ` - + From c98258cadf112bc1ed9db9c341f12028df28a623 Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 29 May 2023 14:36:34 +0800 Subject: [PATCH 8/9] =?UTF-8?q?=E8=B0=83=E6=95=B4UI=E5=B0=BA=E5=AF=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/dropdown/index.js | 118 ++++++++++++++++++++++++++++++++++++++++++ src/form/button.js | 5 -- src/form/checkbox.js | 5 -- src/form/dropdown.js | 30 ----------- src/form/input.js | 5 -- src/form/number.js | 10 ---- src/form/passwd.js | 5 -- src/form/radio.js | 5 -- src/form/switch.js | 5 -- src/icon/index.js | 3 +- src/option/index.js | 68 ++++++++++++++++++++++++ 开发规范.md | 1 - 12 files changed, 187 insertions(+), 73 deletions(-) create mode 100644 src/dropdown/index.js delete mode 100644 src/form/dropdown.js create mode 100644 src/option/index.js 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 fdc2170..a519357 100644 --- a/src/form/button.js +++ b/src/form/button.js @@ -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 574fd51..5d25e62 100644 --- a/src/form/checkbox.js +++ b/src/form/checkbox.js @@ -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 4c1c27e..0000000 --- a/src/form/dropdown.js +++ /dev/null @@ -1,30 +0,0 @@ -import { nextTick, css, html, Component, bind } from 'wkit' - -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 7aae612..13dc14f 100644 --- a/src/form/input.js +++ b/src/form/input.js @@ -298,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/number.js b/src/form/number.js index e67963b..0d6c034 100644 --- a/src/form/number.js +++ b/src/form/number.js @@ -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 166042f..79ceef5 100644 --- a/src/form/passwd.js +++ b/src/form/passwd.js @@ -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 e619d8b..bd2a8cb 100644 --- a/src/form/radio.js +++ b/src/form/radio.js @@ -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/switch.js b/src/form/switch.js index 3a229dc..939f9d6 100644 --- a/src/form/switch.js +++ b/src/form/switch.js @@ -110,11 +110,6 @@ class Switch extends Component { w: 160px, h: 44px, f: 14px - ), - xxxl: ( - w: 192px, - h: 52px, - f: 16px ) ); diff --git a/src/icon/index.js b/src/icon/index.js index 54d257a..a44e704 100644 --- a/src/icon/index.js +++ b/src/icon/index.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/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/开发规范.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 From f8a3e76849c6bf413733f5dd4f2827e7798f695a Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 31 May 2023 10:54:59 +0800 Subject: [PATCH 9/9] fixed --- src/tabs/index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/tabs/index.js b/src/tabs/index.js index 2034d93..0f55186 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -43,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; } @@ -155,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;