diff --git a/Readme.md b/Readme.md index 59a89c2..d551ba7 100644 --- a/Readme.md +++ b/Readme.md @@ -17,7 +17,7 @@ - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件 -### 开发进度 && 计划 (35/54) +### 开发进度 && 计划 (36/54) - [x] `wc-card` 卡片组件 - [x] `wc-space` 间隔组件 @@ -69,7 +69,7 @@ - [ ] `wc-tooltip` 文字提示组件 - [ ] `wc-popconfirm` 气泡确认框组件 - [ ] `wc-chatbox` 聊天气泡组件 -- [ ] `wc-divider` 分割线组件 +- [x] `wc-divider` 分割线组件 - [ ] `wc-table` 表格组件 - [ ] `wc-result` 结果反馈组件 - [ ] `wc-empty` 空状态组件 diff --git a/package.json b/package.json index 25e7bcf..2dfb791 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bd/ui", - "version": "0.1.7", + "version": "0.1.9", "description": "", "files": [ "dist/*" diff --git a/src/divider/index.js b/src/divider/index.js new file mode 100644 index 0000000..2dd901f --- /dev/null +++ b/src/divider/index.js @@ -0,0 +1,67 @@ +/** + * {分割线} + * @author yutent + * @date 2023/04/26 15:20:28 + */ + +import { html, css, Component, styleMap, nextTick } from '@bd/core' + +class Divider extends Component { + static styles = [ + css` + :host { + display: block; + width: 100%; + } + + fieldset { + width: 100%; + height: 1px; + margin: 16px 0; + border: 0; + border-top: 1px dashed var(--color-grey-1); + user-select: none; + + legend { + padding: 0 8px; + font-size: 12px; + text-align: center; + color: var(--color-grey-2); + } + } + + :host([align='left']) { + fieldset { + padding-left: 16px; + + legend { + text-align: left; + } + } + } + :host([align='right']) { + fieldset { + padding-right: 16px; + + legend { + text-align: right; + } + } + } + + :host(:empty) { + fieldset legend { + padding: 0; + } + } + ` + ] + + render() { + return html`
+ +
` + } +} + +Divider.reg('divider') diff --git a/src/form/button.js b/src/form/button.js index e645e9e..f1430d4 100644 --- a/src/form/button.js +++ b/src/form/button.js @@ -70,12 +70,18 @@ class Button extends Component { } .icon { + margin-right: 4px; --size: var(--icon-size, 14px); } } :host(:focus-within) { box-shadow: 0 0 0 2px var(--color-plain-a); } + :host(:empty) { + button .icon { + margin-right: 0; + } + } `, // 尺寸 css` @@ -219,13 +225,6 @@ class Button extends Component { ` ] - #empty = true - - fixStyle() { - this.#empty = this.$refs.cont?.assignedNodes().length === 0 - this.$requestUpdate() - } - created() { this.stamp = 0 @@ -252,14 +251,12 @@ class Button extends Component { if (this.autofocus) { nextTick(_ => this.$refs.btn.focus()) } - nextTick(_ => this.fixStyle()) } render() { - let style = styleMap({ 'margin-right': this.#empty ? 0 : '4px' }) return html` ` diff --git a/src/tabs/index.js b/src/tabs/index.js index 3438ca4..41259ef 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -48,6 +48,7 @@ class Tabs extends Component { .header { position: relative; + flex-shrink: 0; display: flex; width: 100%; height: 38px; @@ -60,6 +61,7 @@ class Tabs extends Component { } .content { + overflow: hidden; flex: 1; }