164 lines
3.2 KiB
JavaScript
164 lines
3.2 KiB
JavaScript
/**
|
|
*
|
|
* @authors yutent (yutent.io@gmail.com)
|
|
* @date 2020-12-08 11:30:52
|
|
* @version v1.0.0
|
|
*
|
|
*/
|
|
|
|
|
|
export default class Progress extends HTMLElement {
|
|
|
|
|
|
static get observedAttributes() {
|
|
return ["value","max"]
|
|
}
|
|
|
|
props = {
|
|
value: 0,
|
|
max: 1
|
|
}
|
|
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
Object.defineProperty(this, 'root', {
|
|
value: this.attachShadow({ mode: 'open' }),
|
|
writable: true,
|
|
enumerable: false,
|
|
configurable: true
|
|
})
|
|
|
|
this.root.innerHTML = `<style>* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
::before,
|
|
::after {
|
|
box-sizing: border-box; }
|
|
|
|
:host {
|
|
--color-teal-1: #4db6ac;
|
|
--color-teal-2: #26a69a;
|
|
--color-teal-3: #009688;
|
|
--color-green-1: #81c784;
|
|
--color-green-2: #66bb6a;
|
|
--color-green-3: #4caf50;
|
|
--color-purple-1: #9575cd;
|
|
--color-purple-2: #9575cd;
|
|
--color-purple-3: #673ab7;
|
|
--color-blue-1: #64b5f6;
|
|
--color-blue-2: #42a5f5;
|
|
--color-blue-3: #2196f3;
|
|
--color-red-1: #ff5061;
|
|
--color-red-2: #eb3b48;
|
|
--color-red-3: #ce3742;
|
|
--color-orange-1: #ffb618;
|
|
--color-orange-2: #f39c12;
|
|
--color-orange-3: #e67e22;
|
|
--color-plain-1: #f2f5fc;
|
|
--color-plain-2: #e8ebf4;
|
|
--color-plain-3: #dae1e9;
|
|
--color-grey-1: #bdbdbd;
|
|
--color-grey-2: #9e9e9e;
|
|
--color-grey-3: #757575;
|
|
--color-dark-1: #62778d;
|
|
--color-dark-2: #526273;
|
|
--color-dark-3: #425064; }
|
|
|
|
:host {
|
|
display: flex;
|
|
align-items: center; }
|
|
:host label {
|
|
flex: 1;
|
|
height: var(--size, 10px);
|
|
border-radius: 9px;
|
|
background: var(--color-plain-2); }
|
|
:host label span {
|
|
display: block;
|
|
width: 0;
|
|
height: 100%;
|
|
border-radius: 9px;
|
|
background: var(--color-teal-1); }
|
|
|
|
:host([size='large']) label {
|
|
height: 18px; }
|
|
|
|
:host([size='medium']) label {
|
|
height: 14px; }
|
|
|
|
:host([size='mini']) label {
|
|
height: 6px; }
|
|
|
|
:host([color='red']) label span {
|
|
background: var(--color-red-1); }
|
|
|
|
:host([color='blue']) label span {
|
|
background: var(--color-blue-1); }
|
|
|
|
:host([color='green']) label span {
|
|
background: var(--color-green-1); }
|
|
|
|
:host([color='orange']) label span {
|
|
background: var(--color-orange-1); }
|
|
|
|
:host([color='dark']) label span {
|
|
background: var(--color-dark-1); }
|
|
|
|
:host([color='purple']) label span {
|
|
background: var(--color-purple-1); }
|
|
</style>
|
|
<label><span></span></label>
|
|
`
|
|
|
|
this.__THUMB__ = this.root.children[1].lastElementChild
|
|
}
|
|
|
|
get value() {
|
|
return this.props.value
|
|
}
|
|
|
|
set value(val) {
|
|
this.props.value = +val
|
|
this.calculate()
|
|
}
|
|
|
|
calculate() {
|
|
var { max, value } = this.props
|
|
this.__THUMB__.style.width = `${(100 * value) / max}%`
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.calculate()
|
|
}
|
|
|
|
attributeChangedCallback(name, old, val) {
|
|
if (val === null || old === val) {return}
|
|
switch (name) {
|
|
case 'max':
|
|
var max = +val
|
|
if (max !== max || max < 1) {
|
|
max = 1
|
|
}
|
|
this.props.max = max
|
|
this.calculate()
|
|
break
|
|
|
|
case 'value':
|
|
var v = +val
|
|
if (v === v) {
|
|
this.props.value = v
|
|
this.calculate()
|
|
}
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
if(!customElements.get('wc-progress')){
|
|
customElements.define('wc-progress', Progress)
|
|
}
|