sonist/src/js/lib/form/input.js

/**
  *
  * @authors yutent (yutent.io@gmail.com)
  * @date    2022-09-12 18:13:11
  * @version v1.0.6
  * 
  */

var g=Object.defineProperty;var x=(n,l,e)=>l in n?g(n,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[l]=e;var d=(n,l,e)=>(x(n,typeof l!="symbol"?l+"":l,e),e);import"../scroll/index.js";import"../icon/index.js";import r from"../utils.js";class p extends HTMLElement{constructor(){super();d(this,"props",{value:"",placeholder:"",maxlength:0,minlength:0,clearable:!1,autofocus:!1,readonly:!1,disabled:!1,lazy:0});d(this,"state",{list:[],mvidx:null});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}ul,li{list-style:none}: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;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%;padding:0 8px;border:0;border-radius:inherit;font:inherit;color: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 .close{display:none;--size: 16px;margin:0 8px 0 4px;padding:4px;border-radius:50%;color:var(--color-grey-2);cursor:pointer;transition:background .15s linear}.label .close:hover{background:var(--color-plain-1)}:host([clearable]) .label .close{display:block}.suggestion{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)}.suggestion .list{width:100%}.suggestion.show{display:flex}.suggestion li{overflow:hidden;width:100%;height:30px;line-height:30px;padding:0 8px;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.suggestion li:hover,.suggestion li[focus]{background:var(--color-plain-2)}:host([round]){border-radius:26px}:host([round]) .label input{padding:0 10px;margin:0 18px}:host([round]) .label[prepend] input,:host([round]) .label[append] input{padding:0 5px}:host([round]) .label[prepend] input{margin-left:0}:host([round]) .label[append] input{margin-right:0}:host([round]) .prepend{border-radius:26px 0 0 26px}:host([round]) .append{border-radius:0 26px 26px 0}:host([size=large]){min-width:234px}:host([size=large]) .label{height:52px;font-size:18px}:host([size=large]) .label input{padding:0 16px}:host([size=large]) .prepend,:host([size=large]) .append{height:48px;padding:0 16px}:host([size=large]) .icon{--size: 24px;margin:0 20px 0 4px}:host([size=medium]){min-width:160px}:host([size=medium]) .label{height:44px}:host([size=medium]) .label input{padding:0 10px}:host([size=medium]) .prepend,:host([size=medium]) .append{height:40px}:host([size=small]){min-width:96px}:host([size=small]) .label{height:32px}:host([size=small]) .label input{padding:0 6px}:host([size=small]) .prepend,:host([size=small]) .append{height:28px}:host([size=mini]){min-width:72px}:host([size=mini]) .label{height:26px;font-size:12px}:host([size=mini]) .icon{--size: 14px}:host([size=mini]) .prepend,:host([size=mini]) .append{height:22px}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}:host([type=primary]:focus-within){box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]:focus-within){box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]:focus-within){box-shadow:0 0 0 2px var(--color-green-a)}:host([type=danger]:focus-within){box-shadow:0 0 0 2px var(--color-red-a)}:host([type=warning]:focus-within){box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=primary]) .label{border-color:var(--color-teal-2)}:host([type=primary]) .label .prepend,:host([type=primary]) .label .append{border-color:var(--color-teal-a)}:host([type=info]) .label{border-color:var(--color-blue-2)}:host([type=info]) .label .prepend,:host([type=info]) .label .append{border-color:var(--color-blue-a)}:host([type=success]) .label{border-color:var(--color-green-2)}:host([type=success]) .label .prepend,:host([type=success]) .label .append{border-color:var(--color-green-a)}:host([type=danger]) .label{border-color:var(--color-red-2)}:host([type=danger]) .label .prepend,:host([type=danger]) .label .append{border-color:var(--color-red-a)}:host([type=warning]) .label{border-color:var(--color-orange-2)}:host([type=warning]) .label .prepend,:host([type=warning]) .label .append{border-color:var(--color-orange-a)}:host([disabled]){cursor:not-allowed}:host([disabled]) .label{border-color:var(--color-grey-1);background:var(--color-plain-1);opacity:.6}:host([readonly]){cursor:default}:host([no-border]) .label,:host(:focus-within[no-border]) .label{border:0}:host([no-border]) .label[prepend] input,:host(:focus-within[no-border]) .label[prepend] input{padding-left:2px}:host([no-border]) .label[append] input,:host(:focus-within[no-border]) .label[append] input{padding-right:2px}:host([no-border]) .prepend,:host([no-border]) .append,:host(:focus-within[no-border]) .prepend,:host(:focus-within[no-border]) .append{border:0}</style> <div class="label"> <slot class="prepend" name="prepend"></slot> <input spellcheck="false" /> <wc-icon class="close" is="close"></wc-icon> <slot class="append" name="append"></slot> <div class="suggestion"> <wc-scroll> <ul class="list"></ul> </wc-scroll> </div> </div> ',this.__OUTER__=this.root.children[1],this.__PREPEND__=this.__OUTER__.children[0],this.__INPUT__=this.__OUTER__.children[1],this.__CLOSE__=this.__OUTER__.children[2],this.__APPEND__=this.__OUTER__.children[3],this.__LIST__=this.__OUTER__.children[4]}static get observedAttributes(){return["value","placeholder","maxlength","minlength","clearable","autofocus","readonly","disabled","lazy"]}get readOnly(){return this.props.readonly}set readOnly(e){var s=typeof e;e!==this.props.readonly&&(s==="boolean"&&e||s!=="boolean"?(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 s=typeof e;e!==this.props.disabled&&(s==="boolean"&&e||s!=="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.__INPUT__.value}set value(e){this.__INPUT__.value=e}_moveSelect(e){var{list:s}=this.state;if(s&&s.length){e.preventDefault();var t=e.keyCode===38?-1:1,i=Array.from(this.__LIST__.firstElementChild.firstElementChild.children);this.state.mvidx===null?this.state.mvidx=0:this.state.mvidx+=t,this.state.mvidx<0?this.state.mvidx=0:this.state.mvidx>i.length-1&&(this.state.mvidx=i.length-1),i.forEach((o,a)=>{a===this.state.mvidx?(this.__LIST__.firstElementChild.scrollTop=o.offsetTop-150,o.setAttribute("focus","")):o.removeAttribute("focus")})}}_fetchSelect(e,s){var t=this.state.list[e];this.value=t.value,this.dispatchEvent(new CustomEvent("select",{detail:t})),this._handleChange(s),this.__LIST__.classList.remove("show"),this.state.mvidx=null}connectedCallback(){var e=this.__PREPEND__.assignedNodes(),s=this.__APPEND__.assignedNodes();for(this.stamp=0;e.length>1;)this.removeChild(e.pop());for(;s.length>1;)this.removeChild(s.pop());e.length&&this.__OUTER__.setAttribute("prepend",""),s.length&&this.__OUTER__.setAttribute("append",""),this._handleSubmit=r.catch(this.__INPUT__,"keydown",t=>{let{minlength:i,lazy:o}=this.props,a=this.value;if(!(this.disabled||this.readOnly)){if(t.keyCode===38||t.keyCode===40)return this._moveSelect(t);if(t.keyCode===13){t.preventDefault();let h=Date.now();if(this.state.mvidx!==null)return this._fetchSelect(this.state.mvidx,t);if(o&&h-this.stamp<o||i&&i>0&&a.length<i)return;this.stamp=h,this.dispatchEvent(new CustomEvent("submit",{detail:this.value}))}}}),this._handleChange=r.bind(this.__INPUT__,"input",t=>{let i=Date.now(),{lazy:o}=this.props;o&&i-this.stamp<o||(this.stamp=i,this.dispatchEvent(new CustomEvent("fetch-suggest",{detail:{value:this.value,send:a=>{this.state.list=a,this._parseSuggestion()}}})))}),this._parseSuggestion=r.bind(this.__INPUT__,"click",t=>{var{list:i}=this.state;let{x:o,y:a,width:h,height:c}=this.getBoundingClientRect();if(i&&i.length){var u=i.map((_,b)=>`<li data-idx="${b}">${_.value}</li>`).join("");this.__LIST__.firstElementChild.firstElementChild.innerHTML=u,this.__LIST__.classList.toggle("show",!0),this.__LIST__.style.cssText=`left:${o}px;top:${a+c+5}px;width:${h}px;`}else this.__LIST__.classList.toggle("show",!1)}),this._inactiveFn=r.outside(this,t=>{this.__LIST__.classList.remove("show")}),this._handleSelect=r.bind(this.__LIST__,"click",t=>{t.target.tagName==="LI"&&(this._fetchSelect(t.target.dataset.idx,t),this.dispatchEvent(new CustomEvent("input")))}),this._clearFn=r.bind(this.__CLOSE__,"click",t=>{this.value="",this.dispatchEvent(new CustomEvent("input"))})}disconnectedCallback(){r.unbind(this.__INPUT__,"keydown",this._handleSubmit),r.unbind(this.__INPUT__,"input",this._handleChange),r.unbind(this.__INPUT__,"click",this._parseSuggestion),r.unbind(this.__LIST__,"click",this._handleSelect),r.unbind(this.__CLOSE__,"click",this._clearFn),r.clearOutside(this._inactiveFn)}attributeChangedCallback(e,s,t){if(s!==t)switch(e){case"autofocus":this.__INPUT__.setAttribute("autofocus",""),setTimeout(o=>{this.__INPUT__.focus()},10);break;case"placeholder":this.__INPUT__.setAttribute("placeholder",t);break;case"value":this.value=t||"";break;case"maxlength":if(t===null)this.__INPUT__.removeAttribute(e);else{let o=+t;o>0?this.__INPUT__.setAttribute(e,o):this.removeAttribute(e)}break;case"lazy":this.props.lazy=t>>0;break;case"readonly":case"disabled":var i=e;i==="readonly"&&(i="readOnly"),this[i]=t!==null;break}}}customElements.get("wc-input")||customElements.define("wc-input",p);export{p as default};