18 lines
1.4 KiB
JavaScript
18 lines
1.4 KiB
JavaScript
|
import{css as t,html as e,Component as i}from"wkit";import"../base/icon.js";class o extends i{static props={title:"str!",subTitle:"",type:"success",icon:""};static styles=[t`:host{display:inline-flex}:host([type=success]) .icon{background:var(--color-teal-1)}:host([type=warning]) .icon{background:var(--color-orange-1)}:host([type=error]) .icon{background:var(--color-red-1)}:host([type=info]) .icon{background:var(--color-blue-1)}.container{display:flex;align-items:center;flex-direction:column;text-align:center;max-width:440px;padding:36px 32px;line-height:1.5;font-size:14px;color:var(--color-dark-1)}.icon{display:flex;justify-content:center;align-items:center;width:52px;height:52px;line-height:1;border-radius:50%;background:var(--wc-result-icon-color, var(--color-dark-1));color:#fff}.title{margin-top:16px;font-size:18px}.sub-title{margin-top:6px}.extra{margin-top:12px}`];get#t(){return this.icon?this.icon:this.type==="success"?"get":this.type==="error"?"deny":this.type}render(){return e`
|
||
|
|
<main class="container">
|
||
|
|
<div class="icon">
|
||
|
|
<slot name="icon"><wc-icon name=${this.#t}></wc-icon></slot>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 class="title">
|
||
|
|
<slot name="title">${this.title}</slot>
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<section class="sub-title">
|
||
|
|
<slot name="sub-title">${this.subTitle}</slot>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<cite class="extra"><slot></slot></cite>
|
||
|
|
</main>
|
||
|
|
`}}o.reg("result");
|