From 420bf73c03e8f36eb97fe367f3f550c21bd40347 Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 20 Nov 2023 15:25:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=20tag=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=9A=84=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/icon/index.js | 8 +- src/tag/index.js | 214 +++++++++++++++------------------------------- 2 files changed, 71 insertions(+), 151 deletions(-) diff --git a/src/icon/index.js b/src/icon/index.js index 647699f..741cbc9 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 'wkit' +import { css, svg, html, Component, classMap } from 'wkit' import SVG_DICT from './svg.js' @@ -35,7 +35,7 @@ class Icon extends Component { :host(:not([name])) { display: none; } - .icon { + .svg { display: block; width: 100%; height: 100%; @@ -91,11 +91,11 @@ class Icon extends Component { render() { return html` ${this.name === 'loading' - ? svg`` + ? svg`` : svg``} ` diff --git a/src/tag/index.js b/src/tag/index.js index c4503b7..3a82350 100644 --- a/src/tag/index.js +++ b/src/tag/index.js @@ -4,65 +4,48 @@ * @date 2023/04/28 16:14:10 */ -import { css, html, Component, styleMap } from 'wkit' +import { css, html, Component } from 'wkit' import '../icon/index.js' -const ANIMATION = { - duration: 100, - custom: [{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }] -} +const ANIMATION = { type: 'scale' } 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 - } + closable: false } static styles = [ css` :host { - position: relative; - display: inline-block; - text-align: center; - box-sizing: border-box; + display: inline-flex; } - .tag { - display: inline-block; - box-sizing: border-box; - width: 100%; - font-size: 12px; - border-radius: 4px; + .container { + display: flex; + align-items: center; + width: auto; + height: 32px; + padding: 0 10px; + gap: 3px; + font-size: var(--wc-tag-font, 12px); + border: 1px solid var(--wc-tag-border-color, var(--color-grey-1)); + border-radius: 3px; + background: var(--wc-tag-background, var(--color-plain-1)); white-space: nowrap; + -webkit-user-select: none; + user-select: none; } - .close-btn { - padding: 4px; - display: inline-block; - line-height: 0; + .close { + padding: 3px; + display: inline-flex; + --wc-icon-size: 8px; + line-height: 1; border-radius: 50%; - vertical-align: middle; + cursor: pointer; + &:hover { - background: pink; - cursor: pointer; + background: var(--color-grey-2); + color: #fff; } } `, @@ -72,143 +55,80 @@ class Tag extends Component { $sizes: ( s: ( h: 20px, - p: 0 5px, - s: 0.7 + p: 0 6px ), 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 + p: 0 8px ) ); @loop $s, $v in $sizes { :host([size='#{$s}']) { - height: map.get($v, 'h'); - .tag { + .container { + height: map.get($v, 'h'); padding: map.get($v, 'p'); - line-height: calc(map.get($v, 'h') - 2px); - } - .close-btn { - --wc-icon-size: 10px; - transform: scale(map.get($v, 's')); } } } `, // 配色 css` + @use 'sass:map'; $colors: ( - default: 'plain', - info: 'grey', - success: 'green', - warning: 'orange', - danger: 'red' + primary: ( + c: 'teal', + b: #ecf5ff + ), + info: ( + c: 'blue', + b: #ecf5ff + ), + success: ( + c: 'green', + b: #f0f9eb + ), + warning: ( + c: 'orange', + b: #fdf6ec + ), + danger: ( + c: 'red', + b: #fef0f0 + ) ); - @loop $t, $c in $colors { + @loop $t, $v 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); - } - } + .container { + border-color: var(--color-#{map.get($v, 'c')}-a); + background: #{map.get($v, 'b')}; + color: var(--color-#{map.get($v, 'c')}-3); } - - &: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); - } + .close:hover { + color: #fff; + background: var(--color-#{map.get($v, 'c')}-1); } } } ` ] - handleClose() { - this.$refs.tag.$animate(true).then(() => this.$emit('close')) + #close() { + this.$refs.tag.$animate(true).then(_ => this.remove()) + this.$emit('close') } render() { return html` - +
${this.closable - ? html`
- -
` + ? html`` : ''} - +
` } }