sonist/src/js/lib/form/number.js

/**
 *
 * @authors yutent (yutent@doui.cc)
 * @date    2019-11-05 23:34:04
 * @version v2.0.1
 * 
 */

'use strict'

import"../scroll/index.js";import"../icon/index.js";import{ebind,bind,unbind}from"../utils.js";export default class Number extends HTMLElement{static get observedAttributes(){return["value","max","min","step","autofocus","readonly","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:0,max:null,min:null,step:1,autofocus:!1,readonly:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{overflow:hidden;display:inline-block;width:128px;height:32px;user-select:none;-moz-user-select:none;color:#526273;border-radius:4px}.label{display:flex;width:100%;height:100%;margin:0 auto;line-height:0;font-size:14px;border:1px solid #dae1e9;border-radius:inherit;background:#fff;color:inherit;cursor:text}.label span{display:flex;justify-content:center;align-items:center;width:32px;height:100%;background:#f3f5fb;font-size:18px;cursor:pointer}.label span:first-child{border-radius:4px 0 0 4px;border-right:1px solid #dae1e9}.label span:last-child{border-radius:0 4px 4px 0;border-left:1px solid #dae1e9}.label span.disabled{cursor:not-allowed;opacity:0.6}.label input{flex:1;min-width:0;width:0;height:100%;padding:0 5px;border:0;border-radius:inherit;color:inherit;text-align:center;font-size:inherit;font-family:inherit;background:none;outline:none;box-shadow:none;cursor:inherit}.label input::placeholder{color:#aabac3}.label .icon{padding:0 5px;--size: 20px}:host([readonly]) .label{cursor:default;opacity:0.8}:host([readonly]) .label span{cursor:inherit}:host([disabled]) .label{background:#f3f5fb;cursor:not-allowed;opacity:0.6}:host([disabled]) .label span{cursor:inherit}:host(:focus-within){box-shadow:0 0 2px #88f7df}:host(:focus-within[readonly]){box-shadow:0 0 2px #f3be4d}:host([round]){border-radius:21px}:host([round]) .label span:first-child{border-radius:21px 0 0 21px}:host([round]) .label span:last-child{border-radius:0 21px 21px 0}:host([size='large']){width:192px;height:42px}:host([size='large']) .label{font-size:16px}:host([size='large']) .label span{width:48px}:host([size='large']) .prepend,:host([size='large']) .append{height:40px}:host([size='medium']){width:144px;height:36px}:host([size='medium']) .label span{width:36px}:host([size='medium']) .prepend,:host([size='medium']) .append{height:34px}:host([size='mini']){width:96px;height:24px}:host([size='mini']) .label{font-size:12px}:host([size='mini']) .label span{width:28px}:host([size='mini']) .icon{--size: 16px}:host([size='mini']) .prepend,:host([size='mini']) .append{height:18px}\n</style> <div class=\"label\"> <span data-act=\"-\">-</span> \x3c!-- <wc-icon class=\"icon\" icon=\"minus\"></wc-icon> --\x3e <input value=\"0\" maxlength=\"9\" /> <span data-act=\"+\">+</span> \x3c!-- <wc-icon class=\"icon\" icon=\"plus\"></wc-icon> --\x3e </div> ",this.__OUTER__=this.root.children[1],this.__INPUT__=this.__OUTER__.children[1]}get readonly(){return this.props.readonly}set readonly(e){var t=typeof e;e!==this.props.readonly&&("boolean"===t&&e||"boolean"!==t?(this.props.readonly=!0,this.setAttribute("readonly",""),this.__INPUT__.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly"),this.__INPUT__.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&("boolean"===t&&e||"boolean"!==t?(this.props.disabled=!0,this.setAttribute("disabled",""),this.__INPUT__.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled"),this.__INPUT__.removeAttribute("disabled")))}get value(){return this.props.value}set value(e){var t=+e;e=t==t?t:0,this.props.value=e,this.__INPUT__.value=this.props.value,this._checkActionEnable()}_checkActionEnable(){var{max:e,min:t,value:i}=this.props;null!==e&&this.__OUTER__.children[2].classList.toggle("disabled",i>=e),null!==t&&this.__OUTER__.children[0].classList.toggle("disabled",i<=t)}_updateValue(e){var{max:t,min:i,value:s,step:a}=this.props;if("+"===e){if(null!==t&&t<s+a)return;s+=a}else{if(null!==i&&i>s-a)return;s-=a}this.props.value=+s.toFixed(2),this.__INPUT__.value=this.props.value,this._checkActionEnable(),this.dispatchEvent(new CustomEvent("input"))}connectedCallback(){this._handleSubmit=ebind(this.__INPUT__,"keydown",e=>{if(!this.disabled&&!this.readonly)return 38===e.keyCode||40===e.keyCode?(e.preventDefault(),this._updateValue(38===e.keyCode?"+":"-")):void(13===e.keyCode&&(e.preventDefault(),this.dispatchEvent(new CustomEvent("submit",{detail:this.value}))))}),this._handleChange=ebind(this.__INPUT__,"change",e=>{isFinite(this.__INPUT__.value)?(this.props.value=+this.__INPUT__.value,this.__INPUT__.value.endsWith(".")||(this.__INPUT__.value=this.props.value)):this.__INPUT__.value=this.props.value=0,this.dispatchEvent(new CustomEvent("input"))}),this._handleAction=bind(this.__OUTER__,"click",e=>{if(!this.disabled&&!this.readonly){var t=e.target;if("SPAN"===t.tagName||"SPAN"===t.parentNode){var i=t.dataset.act||t.parentNode.dataset.act;this._updateValue(i)}}})}disconnectedCallback(){unbind(this.__INPUT__,"keydown",this._handleSubmit)}attributeChangedCallback(e,t,i){if(null!==i&&t!==i)switch(e){case"autofocus":this.__INPUT__.setAttribute("autofocus",""),setTimeout(e=>{this.__INPUT__.focus()},10);break;case"value":this.value=i>>0;break;case"step":case"max":case"min":var s=+i;s==s&&(this.props[e]=s),this._checkActionEnable();break;case"readonly":case"disabled":this[e]=!0}}};

if(!customElements.get('wc-number')){
  customElements.define('wc-number', Number)
}