7 lines
1.1 KiB
JavaScript
7 lines
1.1 KiB
JavaScript
|
import{css as e,html as t,Component as n}from"wkit";class o extends n{static props={value:0,max:0};static styles=[e`:host{display:inline-flex}.container{position:relative}.dot{position:absolute;z-index:9;left:calc(100% - 5px);top:-6px;display:inline-flex;justify-content:center;align-items:center;min-width:10px;min-height:10px;border-radius:10px;background:var(--color-red-1);-webkit-user-select:none;user-select:none}.num{padding:1px 3px;line-height:12px;font-size:12px;font-style:normal;text-align:center;white-space:nowrap;font-family:Tahoma,Verdana,Helvetica,Arial,sans-serif;color:#fff}.num:not(:empty){min-width:14px}:host([hidden-value]) .dot .num{display:none}`,e`:host([type=info]) .dot{background-color:var(--color-blue-1)}:host([type=success]) .dot{background-color:var(--color-green-1)}:host([type=warning]) .dot{background-color:var(--color-orange-1)}`];get#e(){return this.value>0?this.max>0&&this.value>this.max?this.max+"+":this.value:""}render(){return t`
|
||
|
|
<main class="container">
|
||
|
|
<slot></slot>
|
||
|
|
<span class="dot"><i class="num">${this.#e}</i></span>
|
||
|
|
</main>
|
||
|
|
`}}o.reg("badge");
|