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
百搭 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)

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">
<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 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>
</head>
<body>

2
src/avatar/index.js
View File

@ -3,7 +3,7 @@
* @author yutent<yutent.io@gmail.com>
* @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 {

2
src/badge/index.js
View File

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

2
src/breadcrumb/index.js
View File

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

2
src/card/index.js
View File

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

2
src/chatbubble/index.js
View File

@ -3,7 +3,7 @@
* @author yutent<yutent.io@gmail.com>
* @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'

13
src/code/index.js
View File

@ -3,7 +3,7 @@
* @author yutent<yutent.io@gmail.com>
* @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() {
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')
}

2
src/collapse/index.js
View File

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

2
src/color/index.js
View File

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

2
src/divider/index.js
View File

@ -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 = [

2
src/drag/core.js
View File

@ -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 拖拽方向

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'

6
src/drawer/index.js
View File

@ -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()
}
})

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
*/
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
)
);

7
src/form/checkbox.js
View File

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

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
*/
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
)
);

2
src/form/link.js
View File

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

12
src/form/number.js
View File

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

7
src/form/passwd.js
View File

@ -3,7 +3,7 @@
* @author yutent<yutent.io@gmail.com>
* @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
)
);

7
src/form/radio.js
View File

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

2
src/form/select.js
View File

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

11
src/form/star.js
View File

@ -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 {
<wc-icon data-idx="2" name="star"></wc-icon>
<wc-icon data-idx="3" 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>
`
}

30
src/form/switch.js
View File

@ -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 {
>
<span
class=${classes}
st=${this['inline-text']
st=${this.inlineText
? this.value
? this['active-text']
: this['inactive-text']
? this.activeText
: this.inactiveText
: ''}
></span>
<slot
>${!this['inline-text']
>${!this.inlineText
? this.value
? this['active-text']
: this['inactive-text']
? this.activeText
: this.inactiveText
: ''}</slot
>
</label>`

2
src/form/textarea.js
View File

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

5
src/icon/index.js
View File

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

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

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

2
src/image/index.js
View File

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

12
src/layer/index.js
View File

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

2
src/loading/index.js
View File

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

111
src/markd/core.js
View File

@ -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('<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
}
isTable = !isTable
tableAlign = true
isHtmlBlock = false
@ -328,7 +336,15 @@ class Tool {
isParagraph = false
html += '</p>\n'
}
if (isList) {
if (isCodeBlock) {
html += it + `${' '.repeat(listTagQueue.length)}</li>\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 += '</ol>\n'
orderListLevel--
} else {
html += '</ul>\n'
unorderListLevel--
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
@ -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
if (!isList) {
html = trimBr(html)
html += '</p>\n'
}
}
if (isList) {
let _level = listChecked === 1 ? orderListLevel : unorderListLevel
// 大于上一个缩进
if (level > _level) {
listTagQueue.push(tag)
// 需要先把上一个列表的结束符去掉
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) {
html += `<li>${word}</li>\n`
html += `${' '.repeat(level + 1)}<li>${word}</li>\n`
}
// 比上一个缩进要小
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) {
orderListLevel = level
} else {
unorderListLevel = level
html += `${' '.repeat(level + 1)}<li>${word}</li>\n`
}
} else {
html += `<${tag}>\n`
if (listChecked === 1) {
orderListLevel = level
} else {
unorderListLevel = level
}
html += `<li>${word}</li>\n`
listTagQueue.push(tag)
html += `<${tag}>\n <li>${word}</li>\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
)}</${tag}>\n`
if (listTagQueue.length) {
html += `${' '.repeat(listTagQueue.length)}</li>\n`
}
}
isList = false
}
if (isHtmlBlock || isSingleLineHtml) {
if (isParagraph) {
isParagraph = false
@ -536,14 +569,22 @@ class Tool {
}
isHtmlBlock = !isHtmlBlock
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 {
if (isParagraph) {
html += `${it}\n`
} else {
html += `\n<p>${it}`
isParagraph = true
}
}
isParagraph = true
}
} else {
// 如果是在代码中, 直接拼接, 并加上换行
if (isCodeBlock) {
@ -566,13 +607,13 @@ class Tool {
if (isList) {
if (emptyLineLength > 1) {
while (orderListLevel > -1 || unorderListLevel > -1) {
if (orderListLevel > unorderListLevel) {
html += '</ol>\n'
orderListLevel--
} else {
html += '</ul>\n'
unorderListLevel--
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
@ -606,5 +647,5 @@ class Tool {
}
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
*/
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'

2
src/notify/index.js
View File

@ -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 = [

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
*/
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
}
}

2
src/popconfirm/index.js
View File

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

2
src/progress/index.js
View File

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

2
src/result/index.js
View File

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

4
src/sandbox/index.js
View File

@ -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 = `<!doctype html>
<link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
<style>body {padding:32px;}</style>
<style name="css"></style>
<script type="importmap">{"imports":{"es.shim":"//jscdn.ink/es.shim/latest/index.js","vue":"//jscdn.ink/vue/3.2.47/vue.esm-browser.prod.js","vue-router":"//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js","fetch":"//jscdn.ink/@bytedo/fetch/latest/next.js","@bd/core2":"//jscdn.ink/@bd/core/latest/index.js","@bd/core":"//127.0.0.1:9999/src/index.js"}}</script>
<script 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>
</head>
<body></body>

2
src/scroll/index.js
View File

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

2
src/slider/index.js
View File

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

2
src/space/index.js
View File

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

2
src/steps/index.js
View File

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

2
src/swipe/index.js
View File

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

23
src/tabs/index.js
View File

@ -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,12 +155,13 @@ class Tabs extends Component {
}
.navs {
flex-direction: column;
}
.label {
> .label {
margin: 0;
height: 38px;
min-height: 38px;
padding: 0 16px;
}
}
.active-bar {
width: 2px;
height: 38px;
@ -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'

2
src/tag/index.js
View File

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

2
src/timeline/index.js
View File

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

1
开发规范.md
View File

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