11 lines
7.5 KiB
JavaScript
11 lines
7.5 KiB
JavaScript
/**
|
|
*
|
|
* @authors yutent (yutent.io@gmail.com)
|
|
* @date 2022-06-23 15:46:28
|
|
* @version v1.0.6
|
|
*
|
|
*/
|
|
|
|
var c=Object.defineProperty;var u=(l,s,t)=>s in l?c(l,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[s]=t;var n=(l,s,t)=>(u(l,typeof s!="symbol"?s+"":s,t),t);import"../scroll/index.js";import"../icon/index.js";import d from"../utils.js";function b(l,s){let t="";for(let e of l)if(e.list){t+=`<dt>${e.name}</dt>`;for(let i of e.list)s.DICT[i.value]=i,i.disabled||s.LIST.push(i),t+=`<dd sub ${i.disabled?"disabled":`data-idx="${s.LIST.length-1}"`} ${i.value===s.value?"focus":""}>${i.label}</dd>`}else e.disabled||s.LIST.push(e),s.DICT[e.value]=e,t+=`<dd ${e.disabled?"disabled":`data-idx="${s.LIST.length-1}"`} ${e.value===s.value?"focus":""}>${e.label}</dd>`;return t}class p extends HTMLElement{constructor(){super();n(this,"props",{label:"",placeholder:"",multi:"",value:"",mvidx:null,readonly:!1,disabled:!1});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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-flex;min-width:128px;user-select:none;-moz-user-select:none;color:var(--color-dark-1);border-radius:3px;cursor:text;transition:box-shadow .15s linear}.label{flex:1;display:flex;justify-content:center;align-items:center;height:36px;padding:0 8px;font-size:14px;border:1px solid var(--color-grey-2);border-radius:inherit;background:var(--bg-color, #fff);color:inherit;cursor:inherit}.label input{flex:1;min-width:36px;width:0;height:100%;border:0;border-radius:inherit;color:inherit;font:inherit;background:none;outline:none;box-shadow:none;cursor:inherit}.label input::placeholder{color:var(--color-grey-1)}.label .prepend,.label .append{display:none;justify-content:center;align-items:center;width:auto;height:34px;padding:0 10px;line-height:1;white-space:nowrap}.label .prepend{border-right:1px solid var(--color-grey-a);border-radius:6px 0 0 6px}.label .append{border-left:1px solid var(--color-grey-a);border-radius:0 6px 6px 0}.label[prepend] .prepend,.label[append] .append{display:flex}.label[prepend] input,.label[append] input{min-width:64px}.label .arrow{--size: 14px;color:var(--color-grey-2)}.opt-box{display:none;overflow:hidden;position:fixed;z-index:10240;left:0;top:0;width:200px;height:auto;max-height:200px;min-height:46px;padding:4px 0;border-radius:4px;background:var(--color-plain-1);box-shadow:0 2px 5px rgba(0,0,0,.15)}.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:var(--color-grey-1)}.opt-box dd{cursor:pointer}.opt-box dd:hover,.opt-box dd[focus]{background:var(--color-plain-1)}.opt-box dd[focus]{color:var(--color-teal-1)}.opt-box dd[sub]{text-indent:1em}.opt-box dd[disabled]{color:var(--color-grey-1);cursor:not-allowed;background:none}:host([disabled]) .label{background:var(--color-plain-1);cursor:not-allowed;opacity:.6}:host([readonly]) .label{opacity:.8}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}:host([round]){border-radius:21px}:host([round]) .label input{padding:0 10px}: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}</style> <div class="label"> <input readonly /> <wc-icon class="arrow" is="trigon-down"></wc-icon> <wc-scroll class="opt-box"> <div class="list"><slot /></div> </wc-scroll> </div> ',this.__OUTER__=this.root.children[1],this.__INPUT__=this.__OUTER__.children[0],this.__OPTG__=this.__OUTER__.children[2]}static get observedAttributes(){return["label","placeholder","multi","value","mvidx","readonly","disabled"]}get readOnly(){return this.props.readonly}set readOnly(t){var e=typeof t;t!==this.props.readonly&&(e==="boolean"&&t||e!=="boolean"?(this.props.readonly=!0,this.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(t){var e=typeof t;t!==this.props.disabled&&(e==="boolean"&&t||e!=="boolean"?(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(t){var{DICT:e,active:i}=this.props;this.props.value=t,this.__INPUT__.value=e&&e[t]&&e[t].label||t,i||this._updateStyle()}_renderOptions(t){this.props.DICT={},this.props.LIST=[];var e=this.__OPTG__.firstElementChild.firstElementChild;e.innerHTML=b(t,this.props),this.props.ITEMS=Array.from(e.children).filter(i=>i.tagName==="DD"&&!i.hasAttribute("disabled")),this.value=this.props.value}_moveSelect(t){var{LIST:e,DICT:i,ITEMS:r}=this.props;if(e&&e.length){t.preventDefault();var o=t.keyCode===38?-1:1;this.props.mvidx===null?this.props.mvidx=0:this.props.mvidx+=o,this.props.mvidx<0?this.props.mvidx=0:this.props.mvidx>r.length-1&&(this.props.mvidx=r.length-1),r.forEach((a,h)=>{h===this.props.mvidx?(this.__OPTG__.firstElementChild.scrollTop=a.offsetTop-150,a.setAttribute("focus","")):a.removeAttribute("focus")})}}_updateStyle(t){var{LIST:e,ITEMS:i,value:r}=this.props;if(e&&e.length){if(t===void 0){for(let o=-1,a;a=e[++o];)if(r===a.value){t=o;break}}this.props.mvidx=t,i.forEach((o,a)=>{a===t?o.setAttribute("focus",""):o.removeAttribute("focus")})}}_fetchSelect(t,e){var i=this.props.LIST[t];this.value=i.value,this.dispatchEvent(new CustomEvent("select",{detail:i})),e&&this._updateStyle(t),this.props.active=!1,this.__OPTG__.classList.remove("show")}connectedCallback(){function t(){var{x:e,y:i,width:r}=this.getBoundingClientRect(),o=this.getAttribute("size");this.props.active=!0,o&&o==="mini"?i+=32:i+=50,this.__OPTG__.style.cssText=`left:${e}px;top:${i}px;width:${r}px;`}this._handleKeydown=d.catch(this.__INPUT__,"keydown",e=>{if(!(this.disabled||this.readOnly)){if(e.keyCode===38||e.keyCode===40){if(!this.props.active){t.call(this),this.__OPTG__.classList.toggle("show",!0);return}return this._moveSelect(e)}if(e.keyCode===13&&this.props.mvidx!==null&&this.props.active)return this._fetchSelect(this.props.mvidx)}}),this._activeFn=d.bind(this.__INPUT__,"click",e=>{var{options:i}=this.props;this.disabled||this.readOnly||(t.call(this),this.__OPTG__.classList.toggle("show"))}),this._handleSelect=d.bind(this.__OPTG__,"click",e=>{e.target.tagName==="DD"&&!e.target.hasAttribute("disabled")&&(this._fetchSelect(+e.target.dataset.idx,!0),this.dispatchEvent(new CustomEvent("input")))}),this._inactiveFn=d.outside(this,e=>{this.__OPTG__.classList.toggle("show",!1),this.props.active=!1})}attributeChangedCallback(t,e,i){if(e!==i)switch(t){case"label":case"placeholder":this.__INPUT__.setAttribute("placeholder",i);break;case"value":this.value=i;break;case"readonly":case"disabled":var r=t;r==="readonly"&&(r="readOnly"),this[r]=i!==null;break}}disconnectedCallback(){d.unbind(this.__INPUT__,"keydown",this._handleKeydown),d.unbind(this.__INPUT__,"click",this._activeFn),d.unbind(this.__OPTG__,"click",this._handleSelect),d.clearOutside(this._inactiveFn)}}customElements.get("wc-select")||customElements.define("wc-select",p);export{p as default};
|
|
|