6 lines
1015 B
JavaScript
6 lines
1015 B
JavaScript
|
import{html as t,css as e,Component as i}from"wkit";import"../base/icon.js";class r extends i{static props={src:{type:String,default:null}};static styles=[e`:host{display:inline-flex;width:32px;height:32px;--wc-icon-size: 22px;font-size:14px;border-radius:3px}.avatar{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:4px;border-radius:inherit;text-align:center;background:var(--wc-avatar-color, var(--color-grey-3));color:#fff;-webkit-user-select:none;user-select:none}.avatar img{width:100%;height:100%;border-radius:inherit;-webkit-user-drag:none}:host([src]) .avatar{padding:0}:host([circle]){border-radius:50%}`,e`:host([size=small]){width:24px;height:24px;font-size:12px;--wc-icon-size: 14px}`];mounted(){this.textContent.trim().length>4&&(this.textContent=this.textContent.trim().slice(0,4))}render(){return t`
|
||
|
|
<main class="avatar">
|
||
|
|
${this.src?t`<img src=${this.src} />`:t`<slot><wc-icon name="user"></wc-icon></slot>`}
|
||
|
|
</main>
|
||
|
|
`}}r.reg("avatar");
|