From 3780ef9f6b74df523b504f90cfa3bcfe8e829ae9 Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Mon, 8 May 2023 14:15:40 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0tag=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 4 +- src/index.js | 1 + src/progress/index.js | 13 +-- src/result/index.js | 5 +- src/tag/index.js | 216 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 224 insertions(+), 15 deletions(-) create mode 100644 src/tag/index.js diff --git a/Readme.md b/Readme.md index 6563594..00eb3fe 100644 --- a/Readme.md +++ b/Readme.md @@ -16,7 +16,7 @@ - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件 -### 开发进度 && 计划 (39/55) +### 开发进度 && 计划 (40/55) - [x] `wc-card` 卡片组件 - [x] `wc-space` 间隔组件 @@ -64,7 +64,7 @@ - [x] `wc-steps` 步骤条组件 - [x] `wc-timeline` 时间线组件 - [ ] `wc-layout` 布局组件 -- [ ] `wc-tag` 标签组件 +- [x] `wc-tag` 标签组件 - [ ] `wc-tooltip` 文字提示组件 - [x] `wc-popconfirm` 气泡确认框组件 - [ ] `wc-chatbubble` 聊天气泡组件 diff --git a/src/index.js b/src/index.js index a6a7688..4abf854 100644 --- a/src/index.js +++ b/src/index.js @@ -23,3 +23,4 @@ import './tabs/index.js' import './timeline/index.js' import './result/index.js' import './progress/index.js' +import './tag/index.js' diff --git a/src/progress/index.js b/src/progress/index.js index 82cf453..853e8c6 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, svg } from '@bd/core' +import { css, html, Component, styleMap } from '@bd/core' class Progress extends Component { static props = { @@ -57,12 +57,6 @@ class Progress extends Component { default: false, attribute: true }, - - format: { - type: Function, - default: null, - attribute: false - }, 'back-color': { type: String, default: '#ebeef5', @@ -89,13 +83,14 @@ class Progress extends Component { :host([type='line']) { width: 100%; .progress-text { - width: auto; + width: 40px; margin-left: 5px; display: inline-block; } } .progress-bar { display: inline-block; + width: 100%; vertical-align: middle; } .bar-outer, @@ -271,7 +266,7 @@ class Progress extends Component { } return html` -
+
+ * @date 2023/04/28 16:14:10 + */ + +import { css, html, Component, styleMap } from '@bd/core' +import '../icon/index.js' + +const ANIMATION = { + duration: 100, + custom: [{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }] +} + +class Tag extends Component { + static props = { + type: { + type: String, + default: 'default' + }, + closable: { + type: Boolean, + default: false + }, + hit: { + type: Boolean, + default: false + }, + color: '', + size: { + type: String, + default: 'xl' + }, + effect: { + type: String, + default: 'light' // dark / light / plain + } + } + + static styles = [ + css` + :host { + position: relative; + display: inline-block; + text-align: center; + box-sizing: border-box; + } + + .tag { + display: inline-block; + box-sizing: border-box; + width: 100%; + font-size: 12px; + border-radius: 4px; + white-space: nowrap; + } + .close-btn { + padding: 4px; + display: inline-block; + line-height: 0; + border-radius: 50%; + vertical-align: middle; + &:hover { + background: pink; + cursor: pointer; + } + } + `, + //尺寸 + css` + @use 'sass:map'; + $sizes: ( + s: ( + h: 20px, + p: 0 5px, + s: 0.7 + ), + m: ( + h: 24px, + p: 0 8px, + s: 0.8 + ), + l: ( + h: 28px, + p: 0 10px, + s: 0.8 + ), + xl: ( + h: 32px, + p: 0 10px, + s: 1 + ) + ); + + @loop $s, $v in $sizes { + :host([size='#{$s}']) { + height: map.get($v, 'h'); + .tag { + padding: map.get($v, 'p'); + line-height: calc(map.get($v, 'h') - 2px); + } + .close-btn { + --size: 10px; + transform: scale(map.get($v, 's')); + } + } + } + `, + // 配色 + css` + $colors: ( + default: 'plain', + info: 'grey', + success: 'green', + warning: 'orange', + danger: 'red' + ); + + @loop $t, $c in $colors { + :host([type='#{$t}']) { + &:host([effect='light']) { + .tag { + background-color: var(--color-#{$c}-a); + border: 1px solid transparent; + @if $t == 'default' { + color: var(--color-blue-3); + } @else { + color: var(--color-#{$c}-3); + } + } + .close-btn:hover { + color: #fff; + @if $t == 'default' { + background-color: var(--color-blue-2); + } @else { + background-color: var(--color-#{$c}-2); + } + } + } + + &:host([effect='dark']) { + .tag { + @if $t == 'default' { + background-color: var(--color-blue-3); + border: 1px solid var(--color-blue-3); + } @else { + background-color: var(--color-#{$c}-3); + border: 1px solid var(--color-#{$c}-3); + } + color: #fff; + } + .close-btn:hover { + @if $t == 'default' { + background-color: var(--color-blue-1); + } @else { + background-color: var(--color-#{$c}-1); + } + } + } + + &:host([effect='plain']) { + .tag { + @if $t == 'default' { + color: var(--color-blue-3); + } @else { + color: var(--color-#{$c}-3); + } + background-color: #fff; + border: 1px solid var(--color-#{$c}-a); + } + .close-btn:hover { + color: #fff; + @if $t == 'default' { + background-color: var(--color-blue-1); + } @else { + background-color: var(--color-#{$c}-1); + } + } + } + + &:host([hit]) .tag { + @if $t == 'default' { + border: 1px solid var(--color-blue-3); + } @else { + border: 1px solid var(--color-#{$c}-3); + } + } + } + } + ` + ] + + handleClose() { + this.$refs.tag.$animate(true).then(() => this.$emit('close')) + } + + render() { + return html` + + + ${this.closable + ? html`
+ +
` + : ''} + + ` + } +} + +Tag.reg('tag') From 012a2c2002cfd5d7eee016f976ba1c43de076769 Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Mon, 8 May 2023 14:28:18 +0800 Subject: [PATCH 2/2] update --- src/progress/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/progress/index.js b/src/progress/index.js index 853e8c6..aaecdba 100644 --- a/src/progress/index.js +++ b/src/progress/index.js @@ -258,7 +258,6 @@ class Progress extends Component { color: this['text-color'], 'line-height': this['stroke-width'] + 'px' })} - v-if="showText && textInside" > ${this.value + '%'}