@nuralyui/tag 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +100 -3
- package/package.json +1 -1
package/bundle.js
CHANGED
|
@@ -1,11 +1,108 @@
|
|
|
1
|
-
import{css as
|
|
1
|
+
import{css as o,LitElement as r,html as a,nothing as t}from"lit";import{property as e,state as l,customElement as c}from"lit/decorators.js";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2025 Nuraly
|
|
5
5
|
* SPDX-License-Identifier: MIT
|
|
6
|
-
*/const d=
|
|
6
|
+
*/const d=o`
|
|
7
|
+
:host { display: inline-block; }
|
|
8
|
+
|
|
9
|
+
.tag {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
gap: var(--nuraly-tag-gap, 6px);
|
|
13
|
+
height: var(--nuraly-tag-height, auto);
|
|
14
|
+
padding: var(--nuraly-tag-padding-y, 0px) var(--nuraly-tag-padding-x, 8px);
|
|
15
|
+
font-family: var(--nuraly-font-family);
|
|
16
|
+
font-size: var(--nuraly-tag-font-size, var(--nuraly-font-size-sm));
|
|
17
|
+
line-height: 1;
|
|
18
|
+
color: var(--nuraly-tag-color, var(--nuraly-color-text));
|
|
19
|
+
background-color: var(--nuraly-tag-bg, var(--nuraly-color-background));
|
|
20
|
+
border: 1px solid var(--nuraly-tag-border-color, var(--nuraly-color-border));
|
|
21
|
+
border-radius: var(--nuraly-tag-radius, var(--nuraly-border-radius-sm));
|
|
22
|
+
transition: all var(--nuraly-transition-fast) ease;
|
|
23
|
+
user-select: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.tag--borderless { border-color: transparent; }
|
|
27
|
+
|
|
28
|
+
.tag--small {
|
|
29
|
+
padding: var(--nuraly-tag-padding-y-sm, 0px) var(--nuraly-tag-padding-x-sm, 6px);
|
|
30
|
+
font-size: var(--nuraly-tag-font-size-sm, var(--nuraly-font-size-xs));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Checkable behavior */
|
|
34
|
+
.tag--checkable { cursor: pointer; }
|
|
35
|
+
.tag--checkable:not(.tag--disabled):hover {
|
|
36
|
+
background-color: var(--nuraly-tag-checkable-hover-bg, var(--nuraly-color-background-hover));
|
|
37
|
+
}
|
|
38
|
+
.tag--checkable.tag--checked {
|
|
39
|
+
background-color: var(--nuraly-tag-checked-bg, var(--nuraly-color-primary-light));
|
|
40
|
+
color: var(--nuraly-tag-checked-color, var(--nuraly-color-primary-dark));
|
|
41
|
+
border-color: var(--nuraly-tag-checked-border-color, var(--nuraly-color-border-brand));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.tag--disabled { opacity: 0.6; cursor: not-allowed; }
|
|
45
|
+
|
|
46
|
+
.tag__icon { display: inline-flex; align-items: center; }
|
|
47
|
+
.tag__content { display: inline-flex; align-items: center; }
|
|
48
|
+
|
|
49
|
+
.tag__close {
|
|
50
|
+
display: inline-flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
width: 16px;
|
|
54
|
+
height: 16px;
|
|
55
|
+
line-height: 1;
|
|
56
|
+
padding: 0;
|
|
57
|
+
border: none;
|
|
58
|
+
background: transparent;
|
|
59
|
+
color: currentColor;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
border-radius: var(--nuraly-border-radius-xs);
|
|
62
|
+
transition: background-color var(--nuraly-transition-fast) ease, opacity var(--nuraly-transition-fast) ease;
|
|
63
|
+
}
|
|
64
|
+
.tag__close:hover { background-color: var(--nuraly-color-background-hover); }
|
|
65
|
+
.tag__close:disabled { cursor: not-allowed; opacity: 0.6; }
|
|
66
|
+
|
|
67
|
+
/* Closing animation (height/opacity collapse) */
|
|
68
|
+
@keyframes tagFadeOut { from { opacity: 1; } to { opacity: 0; } }
|
|
69
|
+
.tag--closing { animation: tagFadeOut 0.2s ease forwards; }
|
|
70
|
+
|
|
71
|
+
/* Preset solid color tags similar to AntD */
|
|
72
|
+
.tag--magenta { background-color: #f759ab; border-color: #f759ab; color: #fff; }
|
|
73
|
+
.tag--red { background-color: #ff4d4f; border-color: #ff4d4f; color: #fff; }
|
|
74
|
+
.tag--volcano { background-color: #fa541c; border-color: #fa541c; color: #fff; }
|
|
75
|
+
.tag--orange { background-color: #fa8c16; border-color: #fa8c16; color: #fff; }
|
|
76
|
+
.tag--gold { background-color: #faad14; border-color: #faad14; color: rgba(0,0,0,0.88); }
|
|
77
|
+
.tag--lime { background-color: #a0d911; border-color: #a0d911; color: rgba(0,0,0,0.88); }
|
|
78
|
+
.tag--green { background-color: #52c41a; border-color: #52c41a; color: #fff; }
|
|
79
|
+
.tag--cyan { background-color: #13c2c2; border-color: #13c2c2; color: #fff; }
|
|
80
|
+
.tag--blue { background-color: #1677ff; border-color: #1677ff; color: #fff; }
|
|
81
|
+
.tag--geekblue { background-color: #2f54eb; border-color: #2f54eb; color: #fff; }
|
|
82
|
+
.tag--purple { background-color: #722ed1; border-color: #722ed1; color: #fff; }
|
|
83
|
+
|
|
84
|
+
/* Custom color tag hue via inline CSS variable */
|
|
85
|
+
.tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: var(--nuraly-color-text-on-color, #fff); }
|
|
86
|
+
`
|
|
7
87
|
/**
|
|
8
88
|
* @license
|
|
9
89
|
* Copyright 2025 Nuraly
|
|
10
90
|
* SPDX-License-Identifier: MIT
|
|
11
|
-
*/;var g=function(r,
|
|
91
|
+
*/;var g=function(o,r,a,t){for(var e,l=arguments.length,c=l<3?r:null===t?t=Object.getOwnPropertyDescriptor(r,a):t,i=o.length-1;i>=0;i--)(e=o[i])&&(c=(l<3?e(c):l>3?e(r,a,c):e(r,a))||c);return l>3&&c&&Object.defineProperty(r,a,c),c};let u=class extends(n(r)){constructor(){super(...arguments),this.bordered=!0,this.size="default",this.closable=!1,this.checkable=!1,this.checked=!1,this.disabled=!1,this.closing=!1}connectedCallback(){super.connectedCallback(),this.lightDomObserver=new MutationObserver((()=>{this.requestUpdate()})),this.lightDomObserver.observe(this,{childList:!0,subtree:!1,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){var o;null===(o=this.lightDomObserver)||void 0===o||o.disconnect(),this.lightDomObserver=void 0,super.disconnectedCallback()}onCloseClick(o){o.stopPropagation(),this.closable&&!this.disabled&&(this.closing=!0,setTimeout((()=>{this.dispatchEvent(new CustomEvent("nr-tag-close",{bubbles:!0,composed:!0})),this.closing=!1}),200))}onToggleChecked(){this.checkable&&!this.disabled&&(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("nr-tag-checked-change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}isPreset(o){return!!o&&b.has(o)}render(){const o=!!this.querySelector('[slot="icon"]'),r=!!this.color&&!this.isPreset(this.color),e=Object.assign(Object.assign({tag:!0,"tag--small":"small"===this.size,"tag--borderless":!this.bordered,"tag--closable":this.closable,"tag--checkable":this.checkable,"tag--checked":this.checkable&&this.checked,"tag--disabled":this.disabled,"tag--closing":this.closing},this.color&&this.isPreset(this.color)?{[`tag--${this.color}`]:!0}:{}),{"tag--custom":r}),l={};r&&this.color&&(l["--nr-tag-custom-bg"]=this.color);const c=this.checkable?"switch":"button",n=this.checkable?this.checked?"true":"false":void 0;return a`
|
|
92
|
+
<span
|
|
93
|
+
class=${i(e)}
|
|
94
|
+
style=${Object.entries(l).map((([o,r])=>`${o}: ${r}`)).join(";")}
|
|
95
|
+
role=${c}
|
|
96
|
+
aria-pressed=${s(n)}
|
|
97
|
+
aria-disabled=${this.disabled?"true":"false"}
|
|
98
|
+
@click=${this.checkable?this.onToggleChecked:void 0}
|
|
99
|
+
>
|
|
100
|
+
${o?a`<span class="tag__icon"><slot name="icon"></slot></span>`:t}
|
|
101
|
+
<span class="tag__content"><slot></slot></span>
|
|
102
|
+
${this.closable?a`
|
|
103
|
+
<button class="tag__close" part="close" aria-label="close" ?disabled=${this.disabled} @click=${this.onCloseClick}>
|
|
104
|
+
×
|
|
105
|
+
</button>
|
|
106
|
+
`:t}
|
|
107
|
+
</span>
|
|
108
|
+
`}};u.styles=d,g([e({type:String})],u.prototype,"color",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"bordered",void 0),g([e({type:String})],u.prototype,"size",void 0),g([e({type:Boolean})],u.prototype,"closable",void 0),g([e({type:Boolean})],u.prototype,"checkable",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"checked",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),g([l()],u.prototype,"closing",void 0),u=g([c("nr-tag")],u);const b=new Set(["magenta","red","volcano","orange","gold","lime","green","cyan","blue","geekblue","purple"]);export{u as NrTagElement};
|