35 lines
3.4 KiB
JavaScript
35 lines
3.4 KiB
JavaScript
|
import{css as o,html as a,Component as n,styleMap as i}from"wkit";const c="line",l="circle",x="dashboard",r=50,t=2*Math.PI*r,h={circle:0,dashboard:-.25*t/2+"px"},d={circle:`${t}px, ${t}px`,dashboard:`${t*.75}px, ${t}px`};class v extends n{static props={value:{type:Number,default:0,observer(e){this.value=this.#t(e)}},type:c};static styles=[o`:host{display:flex}.container{position:relative;width:100%;-webkit-user-select:none;user-select:none;--line-width: var(--wc-progress-line-width, 6px);--base-color: var(--wc-progress-inactive-color, var(--color-plain-2))}.container[step="1"]{--wc-progress-active-color: var(--wc-progress-active-color-1)}.container[step="2"]{--wc-progress-active-color: var(--wc-progress-active-color-2)}.container[step="3"]{--wc-progress-active-color: var(--wc-progress-active-color-3)}.container[step="4"]{--wc-progress-active-color: var(--wc-progress-active-color-4)}.container[step="5"]{--wc-progress-active-color: var(--wc-progress-active-color-5)}`,o`:host([type=line]){width:100%}:host([type=line]) .progress-value{display:none;position:absolute;z-index:1;top:-32px;margin-left:-24px;padding:4px 8px;border-radius:4px;font-size:14px;text-align:center;background:var(--color-dark-2);color:#fff}:host([type=line]) .progress-value::after{display:block;position:absolute;left:50%;margin-left:-3px;width:6px;height:6px;background:var(--color-dark-2);content:"";transform:rotate(45deg)}:host([type=line]):host(:hover) .progress-value{display:block}.progress-bar{display:flex;width:100%;height:var(--line-width);border-radius:32px;background:var(--base-color)}.progress-bar .thumb{width:0;height:var(--line-width);border-radius:32px;background:var(--wc-progress-active-color, var(--color-teal-1));transition:width .5s ease}`,o`:host([type=circle]),:host([type=dashboard]){width:var(--wc-progress-size, 128px);height:var(--wc-progress-size, 128px)}:host([type=circle]) svg,:host([type=dashboard]) svg{color:var(--wc-progress-active-color)}:host([type=circle]) path,:host([type=dashboard]) path{fill:none;stroke-linecap:round;stroke-width:var(--line-width);transition:stroke-dasharray .5s ease}:host([type=circle]) text,:host([type=dashboard]) text{font-size:calc(var(--line-width)*4);fill:currentColor;text-anchor:middle;alignment-baseline:middle}`];get#e(){let e=this.type===l?-1:1;return`
|
||
|
|
M 64 64
|
||
|
|
m 0 ${e*r}
|
||
|
|
a ${r} ${r} 0 1 1 0 ${-2*e*r}
|
||
|
|
a ${r} ${r} 0 1 1 0 ${2*e*r}
|
||
|
|
`}get#r(){let e=this.type===l?1:.75;return`${t*e*(this.value/100)}px, ${t}px`}#t(e){return Math.max(0,Math.min(e,100))}#s(e){let s=h[this.type],p=d[this.type];return a`
|
||
|
|
<svg viewBox="0 0 128 128">
|
||
|
|
<path
|
||
|
|
d=${this.#e}
|
||
|
|
stroke="var(--base-color)"
|
||
|
|
stroke-dashoffset=${s}
|
||
|
|
stroke-dasharray=${p}
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d=${this.#e}
|
||
|
|
opacity=${e>0?"":0}
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-dashoffset=${s}
|
||
|
|
stroke-dasharray=${this.#r}
|
||
|
|
/>
|
||
|
|
<text x="64" y="64">${e}%</text>
|
||
|
|
</svg>
|
||
|
|
`}#o(e){let s=e<2?2:e>98?98:e;return a`
|
||
|
|
<div class="progress-bar">
|
||
|
|
<mark class="thumb" style=${i({width:e+"%"})}></mark>
|
||
|
|
</div>
|
||
|
|
<div class="progress-value" style=${i({left:s+"%"})}>
|
||
|
|
${e}%
|
||
|
|
</div>
|
||
|
|
`}render(){let e=this.value,s=~~(e/20)||1;return a`
|
||
|
|
<main class="container" step=${s}>
|
||
|
|
${this.type===c?this.#o(e):this.#s(e)}
|
||
|
|
</main>
|
||
|
|
`}}v.reg("progress");
|