完成 tag组件的重构
parent
a28a693766
commit
420bf73c03
|
|
@ -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`
|
||||
<svg
|
||||
class="icon ${this.name === 'loading' ? 'loading' : ''}"
|
||||
class=${classMap({ svg: true, loading: this.name === 'loading' })}
|
||||
viewBox="0 0 1024 1024"
|
||||
>
|
||||
${this.name === 'loading'
|
||||
? svg`<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
|
||||
? svg`<circle cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
|
||||
: svg`<path d="${dict[this.name]}" />`}
|
||||
</svg>
|
||||
`
|
||||
|
|
|
|||
214
src/tag/index.js
214
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`
|
||||
<span
|
||||
class="tag"
|
||||
#animation=${ANIMATION}
|
||||
ref="tag"
|
||||
style=${styleMap({ 'background-color': this.color })}
|
||||
>
|
||||
<main class="container" ref="tag" #animation=${ANIMATION}>
|
||||
<slot></slot>
|
||||
${this.closable
|
||||
? html`<div class="close-btn" @click=${this.handleClose}>
|
||||
<wc-icon name="close"></wc-icon>
|
||||
</div>`
|
||||
? html`<span class="close" @click=${this.#close}
|
||||
><wc-icon name="close"></wc-icon
|
||||
></span>`
|
||||
: ''}
|
||||
</span>
|
||||
</main>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue