sonist/src/lib/form/select.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,clickOutside}from"../utils.js";function parseOptions(e,t){let i="";for(let s of e)if(s.list){i+=`<dt>${s.name}</dt>`;for(let e of s.list)t.DICT[e.value]=e,e.disabled||t.LIST.push(e),i+=`<dd sub ${e.disabled?"disabled":`data-idx="${t.LIST.length-1}"`} ${e.value===t.value?"focus":""}>${e.label}</dd>`}else s.disabled||t.LIST.push(s),t.DICT[s.value]=s,i+=`<dd ${s.disabled?"disabled":`data-idx="${t.LIST.length-1}"`} ${s.value===t.value?"focus":""}>${s.label}</dd>`;return i}export default class Select extends HTMLElement{static get observedAttributes(){return["label","placeholder","multi","value","options","mvidx","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{label:"",placeholder:"",multi:"",value:"",options:"",mvidx:null,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;user-select:none;-moz-user-select:none;color:#526273;border-radius:4px}.label{display:flex;justify-content:center;align-items:center;min-width:64px;width:100%;height:32px;line-height:0;font-size:14px;border:1px solid #dae1e9;border-radius:inherit;background:#fff;color:inherit;cursor:default}.label input{flex:1;width:0;min-width:64px;width:0;height:100%;padding:0 5px;border:0;border-radius:inherit;color:inherit;font-size:inherit;background:none;outline:none;box-shadow:none;cursor:inherit}.label input::placeholder{color:#aabac3}.label .prepend,.label .append{display:none;justify-content:center;align-items:center;width:auto;height:30px;padding:0 10px;white-space:nowrap;background:#f3f5fb}.label .prepend{border-right:1px solid #dae1e9;border-radius:4px 0 0 4px}.label .append{border-left:1px solid #dae1e9;border-radius:0 4px 4px 0}.label[prepend] .prepend,.label[append] .append{display:flex}.label .arrow{padding:0 5px;--size: 14px;color:#ddd;transform:rotate(-90deg)}.opt-box{display:none;position:fixed;z-index:10260;left:0;top:0;width:200px;height:auto;max-height:200px;padding:8px 0;border-radius:4px;background:#fff;box-shadow:0 0 5px rgba(0,0,0,0.25);cursor:default}.opt-box .list{width:100%}.opt-box::after{position:absolute;left:30px;top:-4px;width:8px;height:8px;background:#fff;box-shadow:-1px -1px 2px rgba(0,0,0,0.1);transform:rotate(45deg);content:''}.opt-box.show{display:flex}.opt-box dt,.opt-box dd{overflow:hidden;width:100%;height:30px;line-height:30px;padding:0 8px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.opt-box dt{font-size:12px;color:#aabac3}.opt-box dd{cursor:pointer}.opt-box dd:hover,.opt-box dd[focus]{background:#f3f5fb}.opt-box dd[focus]{color:#3fc2a7}.opt-box dd[sub]{text-indent:1em}.opt-box dd[disabled]{color:#aabac3;cursor:not-allowed;background:none}:host([disabled]) .label{background:#f3f5fb;cursor:not-allowed;opacity:0.6}: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]) .prepend{border-radius:21px 0 0 21px}:host([round]) .append{border-radius:0 21px 21px 0}:host([size='large']) .label{height:42px;font-size:16px}:host([size='large']) .prepend,:host([size='large']) .append{height:40px}:host([size='medium']) .label{height:36px}:host([size='medium']) .prepend,:host([size='medium']) .append{height:34px}:host([size='mini']) .label{height:24px;font-size:12px}:host([size='mini']) .arrow{--size: 12px}:host([size='mini']) .prepend,:host([size='mini']) .append{height:18px}\n</style> <div class=\"label\"> <slot class=\"prepend\" name=\"prepend\"></slot> <input readonly /> <wc-icon class=\"arrow\" is=\"left\"></wc-icon> <slot class=\"append\" name=\"append\"></slot> <div class=\"opt-box\"> <wc-scroll> <dl class=\"list\"></dl> </wc-scroll> </div> </div> ",this.__OUTER__=this.root.children[1],this.__PREPEND__=this.__OUTER__.children[0],this.__INPUT__=this.__OUTER__.children[1],this.__APPEND__=this.__OUTER__.children[3],this.__OPTG__=this.__OUTER__.children[4]}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{DICT:t,active:i}=this.props;this.props.value=e,this.__INPUT__.value=t&&t[e]&&t[e].label||e,i||this._updateStyle()}_renderOptions(e){this.props.DICT={},this.props.LIST=[];var t=this.__OPTG__.firstElementChild.firstElementChild;t.innerHTML=parseOptions(e,this.props),this.props.ITEMS=Array.from(t.children).filter(e=>"DD"===e.tagName&&!e.hasAttribute("disabled")),this.value=this.props.value}_moveSelect(e){var{LIST:t,DICT:i,ITEMS:s}=this.props;if(t&&t.length){e.preventDefault();var o=38===e.keyCode?-1:1;null===this.props.mvidx?this.props.mvidx=0:this.props.mvidx+=o,this.props.mvidx<0?this.props.mvidx=0:this.props.mvidx>s.length-1&&(this.props.mvidx=s.length-1),s.forEach((e,t)=>{t===this.props.mvidx?(this.__OPTG__.firstElementChild.scrollTop=e.offsetTop-150,e.setAttribute("focus","")):e.removeAttribute("focus")})}}_updateStyle(e){var{LIST:t,ITEMS:i,value:s}=this.props;if(t&&t.length){if(void 0===e)for(let i,o=-1;i=t[++o];)if(s===i.value){e=o;break}this.props.mvidx=e,i.forEach((t,i)=>{i===e?t.setAttribute("focus",""):t.removeAttribute("focus")})}}_fetchSelect(e,t){var i=this.props.LIST[e];this.value=i.value,this.dispatchEvent(new CustomEvent("select",{detail:i})),t&&this._updateStyle(e),this.props.active=!1,this.__OPTG__.classList.remove("show")}connectedCallback(){for(var e=this.__PREPEND__.assignedNodes(),t=this.__APPEND__.assignedNodes();e.length>1;)this.removeChild(e.pop());for(;t.length>1;)this.removeChild(t.pop());function i(){var{x:e,y:t,width:i}=this.getBoundingClientRect(),s=this.getAttribute("size");this.props.active=!0,t+=s&&"mini"===s?32:50,this.__OPTG__.style.cssText=`left:${e}px;top:${t}px;width:${i}px;`}e.length&&"textarea"!==this.props.type&&this.__OUTER__.setAttribute("prepend",""),t.length&&"textarea"!==this.props.type&&this.__OUTER__.setAttribute("append",""),this._handleKeydown=ebind(this.__INPUT__,"keydown",e=>{if(!this.disabled&&!this.readonly)return 38===e.keyCode||40===e.keyCode?this.props.active?this._moveSelect(e):(i.call(this),void this.__OPTG__.classList.toggle("show",!0)):13===e.keyCode&&null!==this.props.mvidx&&this.props.active?this._fetchSelect(this.props.mvidx):void 0}),this._activeFn=bind(this.__INPUT__,"click",e=>{var{options:t}=this.props;i.call(this),this.__OPTG__.classList.toggle("show")}),this._handleSelect=bind(this.__OPTG__,"click",e=>{"DD"!==e.target.tagName||e.target.hasAttribute("disabled")||(this._fetchSelect(+e.target.dataset.idx,!0),this.dispatchEvent(new CustomEvent("input")))}),this._inactiveFn=clickOutside(this,e=>{this.__OPTG__.classList.toggle("show",!1),this.props.active=!1})}attributeChangedCallback(e,t,i){if(null!==i&&t!==i)switch(e){case"label":case"placeholder":this.__INPUT__.setAttribute("placeholder",i);break;case"options":if(i){try{this._renderOptions(JSON.parse(i))}catch(e){}this.removeAttribute("options")}break;case"value":this.value=i;break;case"readonly":case"disabled":this[e]=!0}}disconnectedCallback(){unbind(this.__INPUT__,"keydown",this._handleKeydown),unbind(this.__INPUT__,"click",this._activeFn),unbind(document,"mousedown",this._inactiveFn),unbind(this.__OPTG__,"click",this._handleSelect)}};

if(!customElements.get('wc-select')){
  customElements.define('wc-select', Select)
}