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-05-31 14:42:24 +08:00
parent c1d07752f4 f8a3e76849
commit 1e70f5302f
50 changed files with 366 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Readme.md
View File

@ -1,6 +1,6 @@
# @bd/ui # @bd/ui
百搭 UI 组件库, 基于 web components 开发。面向下一代的 UI 组件库 百搭 UI 组件库, 基于 `web components` 开发。面向下一代的 UI 组件库
![downloads](https://img.shields.io/npm/dt/@bd/ui.svg) ![downloads](https://img.shields.io/npm/dt/@bd/ui.svg)
![version](https://img.shields.io/npm/v/@bd/ui.svg) ![version](https://img.shields.io/npm/v/@bd/ui.svg)
@ -14,7 +14,7 @@
- `simple http`, 可快速配置 http 服务器,支持 history 路由 - `simple http`, 可快速配置 http 服务器,支持 history 路由
- ... - ...
- @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件 - wkit 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
### 开发进度 && 计划 (40/55) ### 开发进度 && 计划 (40/55)

2
develop.md
View File

@ -18,7 +18,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/dist/css/reset-basic.css"> <link rel="stylesheet" href="/dist/css/reset-basic.css">
<script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"></script> <script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"></script>
<script type="importmap">{"imports":{"es.shim":"//jscdn.ink/es.shim/2.1.1/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/2.1.5/next.js","@bd/core":"//jscdn.ink/@bd/core/1.5.7/index.js"}}</script> <script type="importmap">{"imports":{"es.shim":"//jscdn.ink/es.shim/2.1.1/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/2.1.5/next.js","wkit":"//jscdn.ink/wkit/latest/index.js"}}</script>
<style></style> <style></style>
</head> </head>
<body> <body>

2
src/avatar/index.js
View File

@ -3,7 +3,7 @@
* @author yutent<yutent.io@gmail.com> * @author yutent<yutent.io@gmail.com>
* @date 2023/04/25 09:27:25 * @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' import '../icon/index.js'
class Avatar extends Component { class Avatar extends Component {

2
src/badge/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/21 16:14:10 * @date 2023/03/21 16:14:10
*/ */
import { css, html, Component } from '@bd/core' import { css, html, Component } from 'wkit'
class Badge extends Component { class Badge extends Component {
static props = { static props = {

2
src/breadcrumb/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/10 16:12:33 * @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') const last = Symbol('last')

2
src/card/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @date 2023/03/06 15:17:25
*/ */
import { css, html, Component } from '@bd/core' import { css, html, Component } from 'wkit'
class Card extends Component { class Card extends Component {
static props = { static props = {

2
src/chatbubble/index.js
View File

@ -3,7 +3,7 @@
* @author yutent<yutent.io@gmail.com> * @author yutent<yutent.io@gmail.com>
* @date 2023/05/05 14:56:34 * @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' import '../avatar/index.js'

13
src/code/index.js
View File

@ -3,7 +3,7 @@
* @author yutent<yutent.io@gmail.com> * @author yutent<yutent.io@gmail.com>
* @date 2023/03/20 18:02:01 * @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 { colorHtml, colorJs, colorCss, colorMd } from './colorful.js'
import '../icon/index.js' import '../icon/index.js'
import '../layer/index.js' import '../layer/index.js'
@ -212,7 +212,18 @@ class Code extends Component {
} }
copyCode() { copyCode() {
if (navigator.clipboard) {
navigator.clipboard.writeText(this.code) 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') layer.toast('复制到粘贴板成功', 'success')
} }

2
src/collapse/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/26 16:14:10 * @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' import '../icon/index.js'
class Collapse extends Component { class Collapse extends Component {

2
src/color/index.js
View File

@ -14,7 +14,7 @@ import {
clearOutsideClick, clearOutsideClick,
nextTick, nextTick,
offset offset
} from '@bd/core' } from 'wkit'
// H: 色相, S: 饱和度, B/V: 亮度 // H: 色相, S: 饱和度, B/V: 亮度
export function hsb2rgb(hsb) { export function hsb2rgb(hsb) {

2
src/divider/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/26 15:20:28 * @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 { class Divider extends Component {
static styles = [ static styles = [

2
src/drag/core.js
View File

@ -4,7 +4,7 @@
* @date 2019/08/23 19:41:21 * @date 2019/08/23 19:41:21
*/ */
import { $, bind, unbind, fire } from '@bd/core' import { $, bind, unbind, fire } from 'wkit'
const DEF_OPT = { const DEF_OPT = {
axis: '', // x | y | xy 拖拽方向 axis: '', // x | y | xy 拖拽方向

2
src/drag/index.js
View File

@ -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' import Core from './core.js'

6
src/drawer/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/27 10:39:29 * @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 = { const ANIMATION = {
left: { left: {
@ -48,7 +48,7 @@ class Drawer extends Component {
}, },
width: '', width: '',
height: '', height: '',
'mask-close': false maskClose: false
} }
static styles = [ static styles = [
@ -136,7 +136,7 @@ class Drawer extends Component {
this.$on('click', ev => { this.$on('click', ev => {
let path = ev.composedPath() let path = ev.composedPath()
if (path[0] === ev.currentTarget && this['mask-close']) { if (path[0] === ev.currentTarget && this.maskClose) {
this.closeDrawer() this.closeDrawer()
} }
}) })

118
src/dropdown/index.js Normal file
View File

@ -0,0 +1,118 @@
/**
* {}
* @author yutent<yutent.io@gmail.com>
* @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`
<div class="dropdown">
<div class="default">
<slot></slot>
<wc-icon class="arrow" name="left"></wc-icon>
</div>
<div class="dropdown-list">
<slot name="option"></slot>
</div>
</div>
`
}
}
Dropdown.reg('dropdown')

7
src/form/button.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @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' import '../icon/index.js'
class Button extends Component { class Button extends Component {
@ -111,11 +111,6 @@ class Button extends Component {
w: 160px, w: 160px,
h: 44px, h: 44px,
f: 14px f: 14px
),
xxxl: (
w: 192px,
h: 52px,
f: 16px
) )
); );

7
src/form/checkbox.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/21 16:14:10 * @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 '../icon/index.js'
class Checkbox extends Component { class Checkbox extends Component {
@ -153,11 +153,6 @@ class CheckboxItem extends Component {
w: 160px, w: 160px,
h: 44px, h: 44px,
f: 14px f: 14px
),
xxxl: (
w: 192px,
h: 52px,
f: 16px
) )
); );

30
src/form/dropdown.js
View File

@ -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`
<div class="aa" ref=${this.bar} @click=${this.foo}>
<div class="bb" ref="bb">
<slot ref="dd"></slot>
</div>
<foo>dsdsd</foo>
</div>
<div class="cc" ref="cc">${this.bar}</div>
`
}
}
Dropdown.reg('dropdown')

14
src/form/input.js
View File

@ -4,14 +4,7 @@
* @date 2023/03/06 15:17:25 * @date 2023/03/06 15:17:25
*/ */
import { import { nextTick, css, html, Component, classMap, outsideClick } from 'wkit'
nextTick,
css,
html,
Component,
classMap,
outsideClick
} from '@bd/core'
import '../icon/index.js' import '../icon/index.js'
const ANIMATION = { const ANIMATION = {
@ -305,11 +298,6 @@ class Input extends Component {
w: 160px, w: 160px,
h: 44px, h: 44px,
f: 14px f: 14px
),
xxxl: (
w: 192px,
h: 52px,
f: 16px
) )
); );

2
src/form/link.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/16 17:40:50 * @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 { class Link extends Component {
static props = { static props = {

12
src/form/number.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @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 { class WcNumber extends Component {
static props = { static props = {
@ -131,16 +131,6 @@ class WcNumber extends Component {
w: 160px, w: 160px,
h: 44px, h: 44px,
f: 14px f: 14px
),
xxxl: (
w: 192px,
h: 52px,
f: 16px
),
xxxxl: (
w: 212px,
h: 64px,
f: 18px
) )
); );

7
src/form/passwd.js
View File

@ -3,7 +3,7 @@
* @author yutent<yutent.io@gmail.com> * @author yutent<yutent.io@gmail.com>
* @date 2023/03/16 18:05:43 * @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' import '../icon/index.js'
class Passwd extends Component { class Passwd extends Component {
@ -108,11 +108,6 @@ class Passwd extends Component {
w: 160px, w: 160px,
h: 44px, h: 44px,
f: 14px f: 14px
),
xxxl: (
w: 192px,
h: 52px,
f: 16px
) )
); );

7
src/form/radio.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/21 16:14:10 * @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 { class Radio extends Component {
static props = { static props = {
@ -153,11 +153,6 @@ class RadioItem extends Component {
w: 160px, w: 160px,
h: 44px, h: 44px,
f: 14px f: 14px
),
xxxl: (
w: 192px,
h: 52px,
f: 16px
) )
); );

2
src/form/select.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/21 16:14:10 * @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 '../icon/index.js'
import '../form/input.js' import '../form/input.js'
import '../scroll/index.js' import '../scroll/index.js'

11
src/form/star.js
View File

@ -4,15 +4,15 @@
* @date 2023/03/21 16:14:10 * @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' import '../icon/index.js'
class Star extends Component { class Star extends Component {
static props = { static props = {
value: 0, value: 0,
text: [], text: [],
'allow-half': false, allowHalf: false,
'show-value': false, showValue: false,
disabled: false, disabled: false,
clearable: false clearable: false
} }
@ -115,7 +115,7 @@ class Star extends Component {
f = f < 0.5 ? 0.5 : 1 f = f < 0.5 ? 0.5 : 1
} }
if (!this['allow-half']) { if (!this.allowHalf) {
f = f > 0 ? 1 : 0 f = f > 0 ? 1 : 0
} }
// 数值没变化, 直接终止 // 数值没变化, 直接终止
@ -171,6 +171,7 @@ class Star extends Component {
} else { } else {
this.value = tmp.i + tmp.f this.value = tmp.i + tmp.f
} }
this.$emit('input', { value: this.value })
this.$emit('change', { value: this.value }) this.$emit('change', { value: this.value })
} }
} }
@ -199,7 +200,7 @@ class Star extends Component {
<wc-icon data-idx="2" name="star"></wc-icon> <wc-icon data-idx="2" name="star"></wc-icon>
<wc-icon data-idx="3" name="star"></wc-icon> <wc-icon data-idx="3" name="star"></wc-icon>
<wc-icon data-idx="4" name="star"></wc-icon> <wc-icon data-idx="4" name="star"></wc-icon>
<span class="text">${this['show-value'] ? val : ''}</span> <span class="text">${this.showValue ? val : ''}</span>
</label> </label>
` `
} }

30
src/form/switch.js
View File

@ -4,19 +4,18 @@
* @date 2023/03/21 16:14:10 * @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 { class Switch extends Component {
static props = { static props = {
size: 'l', size: 'l',
value: { value: {
type: Boolean, type: Boolean,
default: false, default: false
attribute: false
}, },
'inactive-text': '', inactiveText: '',
'active-text': '', activeText: '',
'inline-text': false, inlineText: false,
disabled: false, disabled: false,
readonly: false readonly: false
} }
@ -111,11 +110,6 @@ class Switch extends Component {
w: 160px, w: 160px,
h: 44px, h: 44px,
f: 14px f: 14px
),
xxxl: (
w: 192px,
h: 52px,
f: 16px
) )
); );
@ -195,11 +189,13 @@ class Switch extends Component {
value: this.value value: this.value
} }
this.$emit('input')
this.$emit('change', data) this.$emit('change', data)
} }
handleClick(ev) { handleClick(ev) {
if (ev.type === 'click' || ev.keyCode === 32) { if (ev.type === 'click' || ev.keyCode === 32) {
ev.preventDefault()
this.toggleCheck(ev) this.toggleCheck(ev)
} }
} }
@ -215,17 +211,17 @@ class Switch extends Component {
> >
<span <span
class=${classes} class=${classes}
st=${this['inline-text'] st=${this.inlineText
? this.value ? this.value
? this['active-text'] ? this.activeText
: this['inactive-text'] : this.inactiveText
: ''} : ''}
></span> ></span>
<slot <slot
>${!this['inline-text'] >${!this.inlineText
? this.value ? this.value
? this['active-text'] ? this.activeText
: this['inactive-text'] : this.inactiveText
: ''}</slot : ''}</slot
> >
</label>` </label>`

2
src/form/textarea.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/18 14:14:25 * @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 { class TextArea extends Component {
static props = { static props = {

5
src/icon/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @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' import SVG_DICT from './svg.js'
@ -56,8 +56,7 @@ class Icon extends Component {
'm': 24px, 'm': 24px,
'l': 32px, 'l': 32px,
'xl': 36px, 'xl': 36px,
'xxl': 44px, 'xxl': 44px
'xxxl': 52px
); );
@loop $k, $v in $gaps { @loop $k, $v in $gaps {

2
src/image-preview/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @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' import '../icon/index.js'
class ImagePreview extends Component { class ImagePreview extends Component {

2
src/image/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @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' import '../icon/index.js'
class Image extends Component { class Image extends Component {

12
src/layer/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @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' import '../form/input.js'
let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗 let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗
@ -32,9 +32,9 @@ class Layer extends Component {
top: { type: String, attribute: false }, top: { type: String, attribute: false },
bottom: { type: String, attribute: false }, bottom: { type: String, attribute: false },
background: { type: String, attribute: false }, background: { type: String, attribute: false },
'mask-color': { type: String, attribute: false }, maskColor: { type: String, attribute: false },
mask: false, mask: false,
'mask-close': false, maskClose: false,
title: { type: String, default: '', attribute: false }, title: { type: String, default: '', attribute: false },
content: { type: String, default: '', attribute: false }, content: { type: String, default: '', attribute: false },
btns: [] btns: []
@ -356,7 +356,7 @@ class Layer extends Component {
return return
} }
if (this['mask-close']) { if (this.maskClose) {
if (this.#wrapped === false) { if (this.#wrapped === false) {
this.#reject() this.#reject()
} }
@ -365,8 +365,8 @@ class Layer extends Component {
} }
}) })
if (this['mask-color']) { if (this.maskColor) {
this.style.backgroundColor = this['mask-color'] this.style.backgroundColor = this.maskColor
} }
} }

2
src/loading/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/26 15:20:28 * @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 { class Loading extends Component {
static props = { static props = {

111
src/markd/core.js
View File

@ -271,8 +271,7 @@ class Tool {
let isParagraph = false let isParagraph = false
let isList = false let isList = false
let orderListLevel = -1 let listTagQueue = []
let unorderListLevel = -1
let isQuoteList = false // 引用中的列表, 只支持一层级 let isQuoteList = false // 引用中的列表, 只支持一层级
let quoteListStyle = 0 // 1有序, 2 无序 let quoteListStyle = 0 // 1有序, 2 无序
@ -282,10 +281,19 @@ class Tool {
for (let it of this.list) { for (let it of this.list) {
// 非空行 // 非空行
if (it) { if (it) {
let lastLineIsEmpty = emptyLineLength > 0
emptyLineLength = 0 emptyLineLength = 0
if (~it.indexOf('<table>') || ~it.indexOf('</table>')) { if (~it.indexOf('<table>') || ~it.indexOf('</table>')) {
if (isList) {
if (isTable) {
html += it + `${' '.repeat(listTagQueue.length)}</li>\n`
} else {
html = html.replace(/<\/li>\n*?$/, '') + it
}
} else {
html += it html += it
}
isTable = !isTable isTable = !isTable
tableAlign = true tableAlign = true
isHtmlBlock = false isHtmlBlock = false
@ -328,7 +336,15 @@ class Tool {
isParagraph = false isParagraph = false
html += '</p>\n' html += '</p>\n'
} }
if (isList) {
if (isCodeBlock) {
html += it + `${' '.repeat(listTagQueue.length)}</li>\n`
} else {
html = html.replace(/<\/li>\n*?$/, '') + it
}
} else {
html += it html += it
}
isCodeBlock = !isCodeBlock isCodeBlock = !isCodeBlock
isHtmlBlock = false isHtmlBlock = false
continue continue
@ -345,6 +361,7 @@ class Tool {
let hrName = Helper.isHr(it) let hrName = Helper.isHr(it)
if (typeof hrName === 'string') { if (typeof hrName === 'string') {
html += Decoder.hr(hrName) html += Decoder.hr(hrName)
emptyLineLength = 0
continue continue
} }
@ -368,13 +385,13 @@ class Tool {
} }
// 有列表也先结束 // 有列表也先结束
if (isList) { if (isList) {
while (orderListLevel > -1 || unorderListLevel > -1) { while (listTagQueue.length) {
if (orderListLevel > unorderListLevel) { let tag = listTagQueue.pop()
html += '</ol>\n' html += `${' '.repeat(
orderListLevel-- listTagQueue.length ? listTagQueue.length + 1 : 0
} else { )}</${tag}>\n`
html += '</ul>\n' if (listTagQueue.length) {
unorderListLevel-- html += `${' '.repeat(listTagQueue.length)}</li>\n`
} }
} }
isList = false isList = false
@ -469,45 +486,47 @@ class Tool {
let tmp = Helper.ltrim(it) let tmp = Helper.ltrim(it)
let ltrim = it.length - tmp.length let ltrim = it.length - tmp.length
let word = tmp.replace(LIST_RE, '').trim() 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' let tag = listChecked === 1 ? 'ol' : 'ul'
if (isParagraph) { if (isParagraph) {
isParagraph = false isParagraph = false
if (!isList) {
html = trimBr(html)
html += '</p>\n' html += '</p>\n'
} }
}
if (isList) { if (isList) {
let _level = listChecked === 1 ? orderListLevel : unorderListLevel
// 大于上一个缩进 // 大于上一个缩进
if (level > _level) { if (level > _level) {
listTagQueue.push(tag)
// 需要先把上一个列表的结束符去掉 // 需要先把上一个列表的结束符去掉
html = html.trim().replace(/<\/li>$/, '') html = html.trim().replace(/<\/li>$/, '')
html += `\n<${tag}>\n<li>${word}</li>\n` html += `\n${' '.repeat(level + 1)}<${tag}>\n${' '.repeat(
level + 1
)}<li>${word}</li>\n`
} }
// 跟上一个平级 // 跟上一个平级
else if (level === _level) { else if (level === _level) {
html += `<li>${word}</li>\n` html += `${' '.repeat(level + 1)}<li>${word}</li>\n`
} }
// 比上一个缩进要小 // 比上一个缩进要小
else { else {
html += `</${tag}>\n</li>\n<li>${word}</li>\n` for (let i = _level - level; i > 0; i--) {
let _tag = listTagQueue.pop()
html += `${' '.repeat(level + i + 1)}</${_tag}>\n${' '.repeat(
level + i
)}</li>\n`
} }
if (listChecked === 1) { html += `${' '.repeat(level + 1)}<li>${word}</li>\n`
orderListLevel = level
} else {
unorderListLevel = level
} }
} else { } else {
html += `<${tag}>\n` listTagQueue.push(tag)
if (listChecked === 1) { html += `<${tag}>\n <li>${word}</li>\n`
orderListLevel = level
} else {
unorderListLevel = level
}
html += `<li>${word}</li>\n`
} }
isList = true isList = true
@ -521,6 +540,20 @@ class Tool {
continue continue
} }
// 列表之后, 有段落时, 先结束列表
if (isList && lastLineIsEmpty) {
while (listTagQueue.length) {
let tag = listTagQueue.pop()
html += `${' '.repeat(
listTagQueue.length ? listTagQueue.length + 1 : 0
)}</${tag}>\n`
if (listTagQueue.length) {
html += `${' '.repeat(listTagQueue.length)}</li>\n`
}
}
isList = false
}
if (isHtmlBlock || isSingleLineHtml) { if (isHtmlBlock || isSingleLineHtml) {
if (isParagraph) { if (isParagraph) {
isParagraph = false isParagraph = false
@ -536,14 +569,22 @@ class Tool {
} }
isHtmlBlock = !isHtmlBlock isHtmlBlock = !isHtmlBlock
html += `${it}\n` html += `${it}\n`
} else {
if (isList) {
if (isParagraph) {
html += it + `</p>\n${' '.repeat(listTagQueue.length)}</li>\n`
} else {
html = html.replace(/<\/li>\n*?$/, '') + `\n<p>${it}`
}
} else { } else {
if (isParagraph) { if (isParagraph) {
html += `${it}\n` html += `${it}\n`
} else { } else {
html += `\n<p>${it}` html += `\n<p>${it}`
isParagraph = true
} }
} }
isParagraph = true
}
} else { } else {
// 如果是在代码中, 直接拼接, 并加上换行 // 如果是在代码中, 直接拼接, 并加上换行
if (isCodeBlock) { if (isCodeBlock) {
@ -566,13 +607,13 @@ class Tool {
if (isList) { if (isList) {
if (emptyLineLength > 1) { if (emptyLineLength > 1) {
while (orderListLevel > -1 || unorderListLevel > -1) { while (listTagQueue.length) {
if (orderListLevel > unorderListLevel) { let tag = listTagQueue.pop()
html += '</ol>\n' html += `${' '.repeat(
orderListLevel-- listTagQueue.length ? listTagQueue.length + 1 : 0
} else { )}</${tag}>\n`
html += '</ul>\n' if (listTagQueue.length) {
unorderListLevel-- html += `${' '.repeat(listTagQueue.length)}</li>\n`
} }
} }
isList = false isList = false
@ -606,5 +647,5 @@ class Tool {
} }
export default function (str) { export default function (str) {
return Tool.init(str).parse() //.replace(/\\</g, '<').replace(/\\>/g, '>') return Tool.init(str).parse()
} }

2
src/markd/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @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 md2html from './core.js'
import '../code/index.js' import '../code/index.js'

2
src/notify/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/10 17:17:10 * @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' import '../icon/index.js'
const ANIMATION = [ const ANIMATION = [

68
src/option/index.js Normal file
View File

@ -0,0 +1,68 @@
/**
* {}
* @author yutent<yutent.io@gmail.com>
* @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`
<label>${this.label}</label>
<slot></slot>
`
}
}
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` <section class="item"><slot></slot></section> `
}
}
OptionGroup.reg('option-group')
Option.reg('option')

9
src/pager/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/18 09:38:01 * @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' import '../form/button.js'
const LAYOUT_DICT = { const LAYOUT_DICT = {
@ -243,7 +243,8 @@ class Pager extends Component {
this.page = num 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 let n = +ev.target.value
if (n === n) { if (n === n) {
this.page = 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
} }
} }

2
src/popconfirm/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/28 16:14:10 * @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' import '../form/button.js'
class Popconfirm extends Component { class Popconfirm extends Component {

2
src/progress/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/28 16:14:10 * @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 { class Progress extends Component {
static props = { static props = {

2
src/result/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/28 16:14:10 * @date 2023/04/28 16:14:10
*/ */
import { css, html, Component } from '@bd/core' import { css, html, Component } from 'wkit'
import '../icon/index.js' import '../icon/index.js'
class Result extends Component { class Result extends Component {

4
src/sandbox/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @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 '../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'
@ -16,7 +16,7 @@ const template = `<!doctype html>
<link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css"> <link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
<style>body {padding:32px;}</style> <style>body {padding:32px;}</style>
<style name="css"></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 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","wkit":"//jscdn.ink/wkit/latest/index.js"}}</script>
<script name="js" type="module"></script> <script name="js" type="module"></script>
</head> </head>
<body></body> <body></body>

2
src/scroll/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/20 15:17:25 * @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 { class Scroll extends Component {
static props = { static props = {

2
src/slider/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/21 16:14:10 * @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 { class Slider extends Component {
static props = { static props = {

2
src/space/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/06 15:17:25 * @date 2023/03/06 15:17:25
*/ */
import { css, html, Component } from '@bd/core' import { css, html, Component } from 'wkit'
class Space extends Component { class Space extends Component {
static styles = css` static styles = css`

2
src/steps/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/18 09:38:01 * @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' import '../icon/index.js'
class Steps extends Component { class Steps extends Component {

2
src/swipe/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/03/26 16:14:10 * @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' import '../icon/index.js'
const CARD_SCALE = 0.83 const CARD_SCALE = 0.83

23
src/tabs/index.js
View File

@ -4,22 +4,14 @@
* @date 2023/03/06 15:17:25 * @date 2023/03/06 15:17:25
*/ */
import { import { css, html, bind, Component, nextTick, styleMap, classMap } from 'wkit'
css,
html,
bind,
Component,
nextTick,
styleMap,
classMap
} from '@bd/core'
import '../icon/index.js' import '../icon/index.js'
class Tabs extends Component { class Tabs extends Component {
static props = { static props = {
tab: { type: String, attribute: false }, tab: { type: String, attribute: false },
type: 'default', type: 'default',
'tab-position': 'top', tabPosition: 'top',
labels: [] labels: []
} }
@ -51,7 +43,7 @@ class Tabs extends Component {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
width: 100%; width: 100%;
height: 38px; min-height: 38px;
color: var(--color-dark-1); color: var(--color-dark-1);
user-select: none; user-select: none;
} }
@ -163,12 +155,13 @@ class Tabs extends Component {
} }
.navs { .navs {
flex-direction: column; flex-direction: column;
}
.label { > .label {
margin: 0; margin: 0;
height: 38px; min-height: 38px;
padding: 0 16px; padding: 0 16px;
} }
}
.active-bar { .active-bar {
width: 2px; width: 2px;
height: 38px; height: 38px;
@ -526,7 +519,7 @@ class Tabs extends Component {
render() { render() {
let tabStyle = {} let tabStyle = {}
if (this['tab-position'] === 'top' || this['tab-position'] === 'bottom') { if (this.tabPosition === 'top' || this.tabPosition === 'bottom') {
tabStyle = { tabStyle = {
width: this.#tabWidth + 'px', width: this.#tabWidth + 'px',
left: this.#tabLeft + 'px' left: this.#tabLeft + 'px'

2
src/tag/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/28 16:14:10 * @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' import '../icon/index.js'
const ANIMATION = { const ANIMATION = {

2
src/timeline/index.js
View File

@ -4,7 +4,7 @@
* @date 2023/04/18 09:38:01 * @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' import '../icon/index.js'
function pad(n) { function pad(n) {

1
开发规范.md
View File

@ -20,7 +20,6 @@
- `size=l` 大号, 32px (默认值) - `size=l` 大号, 32px (默认值)
- `size=xl` 加大号, 36px - `size=xl` 加大号, 36px
- `size=xxl` 加加大号, 44px - `size=xxl` 加加大号, 44px
- `size=xxxl` 加加加大号, 52px
4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑 4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑
> 统一为增加 `lazy="1000"` 属性实现 > 统一为增加 `lazy="1000"` 属性实现