16 lines
2.8 KiB
JavaScript
16 lines
2.8 KiB
JavaScript
|
import{css as l,html as r,Component as o}from"wkit";import"../base/icon.js";class h extends o{static props={value:"num!0",text:[],allowHalf:!1,showValue:!1,disabled:!1,clearable:!1};static styles=[l`:host{display:flex;font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none}main{display:flex;align-items:center;line-height:1;cursor:inherit}main wc-icon{--wc-icon-size: var(--wc-star-size, 32px);margin:0 3px;transition:transform .15s linear,color .15s linear}main wc-icon[name=star]{color:var(--color-plain-3)}main wc-icon:nth-child(1)[name=star-full],main wc-icon:nth-child(1)[name=star-half]{color:var(--wc-star-active-1, var(--color-teal-1))}main wc-icon:nth-child(2)[name=star-full],main wc-icon:nth-child(2)[name=star-half]{color:var(--wc-star-active-2, var(--color-teal-1))}main wc-icon:nth-child(3)[name=star-full],main wc-icon:nth-child(3)[name=star-half]{color:var(--wc-star-active-3, var(--color-teal-1))}main wc-icon:nth-child(4)[name=star-full],main wc-icon:nth-child(4)[name=star-half]{color:var(--wc-star-active-4, var(--color-teal-1))}main wc-icon:nth-child(5)[name=star-full],main wc-icon:nth-child(5)[name=star-half]{color:var(--wc-star-active-5, var(--color-teal-1))}main wc-icon:hover{transform:scale(1.05)}main span{padding:2px 8px 0;margin:0 6px;color:var(--color-dark-1)}`,l`:host([size=small]){--wc-star-size: 24px;font-size:12px}`,l`:host([disabled]){cursor:not-allowed;opacity:.6}`];#i=32;#t={i:0,f:0};#a=[];#e(a,t=0){let i="star-half",e=this.value,s=this.#t;a===-1?(a=Math.floor(e),t=+(e%1).toFixed(1),a>0&&a===e&&(a--,t=1)):t=t<.5?.5:1,this.allowHalf||(t=t>0?1:0),!(a===s.i&&t===s.f)&&(t>.5&&(i="star-full"),this.#a.forEach((n,c)=>{n.name=c<a?"star-full":"star"}),t>0&&(this.#a[a].name=i),this.#t={i:a,f:t})}#l(a){if(!this.disabled&&a.target.tagName==="WC-ICON"){let t=+a.target.dataset.idx;this.#e(t,+(a.offsetX/this.#i).toFixed(1))}}#s(){this.disabled||this.#e(-1)}#n(a){let t=this.#t;this.disabled||a.target.tagName==="WC-ICON"&&(this.clearable&&this.value===t.i+t.f?(t.i=0,t.f=0,this.value=0,this.#a.forEach(i=>(i.name="star",i.style.color=""))):this.value=t.i+t.f,this.$emit("input",{value:this.value}),this.$emit("change",{value:this.value}))}mounted(){this.#a=[...this.$refs.box.children],this.#i=this.#a[0].clientWidth}render(){let a=this.value;return this.text.length===5?a=this.text[Math.ceil(a)-1]:a=a||"",r`
|
||
|
|
<main
|
||
|
|
ref="box"
|
||
|
|
@mousemove=${this.#l}
|
||
|
|
@mouseleave=${this.#s}
|
||
|
|
@click=${this.#n}
|
||
|
|
>
|
||
|
|
<wc-icon data-idx="0" name="star"></wc-icon>
|
||
|
|
<wc-icon data-idx="1" name="star"></wc-icon>
|
||
|
|
<wc-icon data-idx="2" name="star"></wc-icon>
|
||
|
|
<wc-icon data-idx="3" name="star"></wc-icon>
|
||
|
|
<wc-icon data-idx="4" name="star"></wc-icon>
|
||
|
|
<span class="text">${this.showValue?a:""}</span>
|
||
|
|
</main>
|
||
|
|
`}}h.reg("star");
|