|
- /*!
- DMXzone Autocomplete
- Version: 1.0.11
- (c) 2022 Wappler.io
- @build 2022-04-14 16:50:55
- */
- dmx.Component("autocomplete",{extends:"input",initialData:{selectedItem:null},attributes:{data:{type:Array,default:[]},matchcase:{type:Boolean,default:!1},matchstart:{type:Boolean,default:!1},matchaccent:{type:Boolean,default:!1},optiontext:{type:String,default:"$value"},optionvalue:{type:String,default:"$value"},optionsearch:{type:String,default:null},noresultslabel:{type:String,default:"No Results..."},placeholder:{type:String,default:""},noclear:{type:Boolean,default:!1}},events:{noresults:Event},render:function(t){dmx.BaseComponent.prototype.render.call(this,t),this.dataItems=[],this.props.value?this.updateValue=!0:this.props.value=this.$node.value,this.$node.disabled=this.props.disabled,this.$node.setAttribute("placeholder",this.props.placeholder),this.input=this.$node.cloneNode(),this.input.removeAttribute("id"),this.input.removeAttribute("name"),this.input.setAttribute("placeholder",this.props.placeholder),this.input.setAttribute("autocomplete","off"),this.input.setAttribute("form","dummy"),this.input.addEventListener("blur",this.onBlur.bind(this)),this.input.addEventListener("input",this.onInput.bind(this)),this.input.addEventListener("keydown",this.onKeydown.bind(this)),this.list=document.createElement("div"),this.list.setAttribute("class","dmx-autocomplete-items"),this.$node.style.display="none",this.$node.addEventListener("change",this.updateData.bind(this)),this.$node.addEventListener("invalid",this.updateData.bind(this)),this.update({})},mounted:function(){this.$node.parentNode.insertBefore(this.input,this.$node),this.$node.form&&this.$node.form.addEventListener("reset",this.onReset.bind(this))},update:function(t){dmx.equal(this.props.data,t.data)&&this.props.optiontext==t.optiontext&&this.props.optionvalue==t.optionvalue||(this.dataItems=dmx.repeatItems(this.props.data).map((function(t,e){const i=dmx.parse(this.props.optiontext,dmx.DataScope(t,this));return{index:e,label:i,value:dmx.parse(this.props.optionvalue,dmx.DataScope(t,this)),search:this.props.optionsearch?dmx.parse(this.props.optionsearch,dmx.DataScope(t,this)):i,item:t}}),this),this.updateValue=!0),this.props.value!=t.value&&(this.updateValue=!0),this.props.disabled!=t.disabled&&(this.$node.disabled=this.props.disabled,this.input.disabled=this.props.disabled),this.props.placeholder!=t.placeholder&&this.input.setAttribute("placeholder",this.props.placeholder),this.updateData()},updated:function(){this.updateValue&&(this.updateValue=!1,this.setValue(this.props.value,!0),this.updateData())},updateData:function(t){dmx.Component("form-element").prototype.updateData.call(this,t);var e=this.dataItems.find((function(t){return t.value==this.$node.value}),this);this.set("selectedItem",e?e.item:null)},setValue:function(t,e){var i=this.dataItems.find((function(e){return e.value==t}),this);this.$node.value=i?i.value:"",this.input.value=i?i.label:"",e&&(this.$node.defaultValue=i?i.value:"",this.input.defaultValue=i?i.label:"")},focus:function(){this.input.focus()},disable:function(t){this.$node.disabled=!0===t,this.input.disabled=!0===t,this.updateData()},onReset:function(t){this.$node.value=this.$node.defaultValue,this.input.value=this.input.defaultValue},onBlur:function(t){var e=!1;if(this.dataItems)for(var i=0;i<this.dataItems.length;i++)this.dataItems[i].label==this.input.value&&(this.$node.value=this.dataItems[i].value,e=!0);e||(this.props.noclear?this.$node.value=this.input.value:(this.input.value="",this.$node.value="")),this.$node.dispatchEvent(new Event("change")),this.closeList()},onInput:function(t){var e=this.$node,i=this.input,s=i.value;if(this.closeList(),s){if(this.currentFocus=-1,this.list.innerHTML="",this.dataItems.forEach((function(t){if(this.matches(t.search,s)){var a=document.createElement("div");a.setAttribute("class","dmx-autocomplete-item"),a.innerHTML=this.getItemHtml(t.label,s),a.item=t,a.addEventListener("mousedown",(s=>{s.preventDefault(),s.stopPropagation(),e.value=t.value,i.value=t.label,this.closeList(),e.dispatchEvent(new Event("change"))})),this.list.appendChild(a)}}),this),!this.list.children.length){var a=document.createElement("div");a.setAttribute("class","dmx-autocomplete-item"),a.textContent=this.props.noresultslabel,a.addEventListener("mousedown",(t=>{t.preventDefault(),t.stopPropagation(),this.closeList(),this.dispatchEvent("noresults",null,{value:s})})),this.list.appendChild(a)}this.showList()}},onKeydown:function(t){if(40==t.keyCode)t.preventDefault(),this.currentFocus++,this.updateActive(),this.showList();else if(38==t.keyCode)t.preventDefault(),this.currentFocus--,this.updateActive(),this.showList();else if(27==t.keyCode)t.preventDefault(),this.currentFocus=-1,this.closeList();else if(13==t.keyCode&&(t.preventDefault(),this.currentFocus>-1)){const t=this.list.getElementsByTagName("div");t&&t[this.currentFocus].dispatchEvent(new MouseEvent("mousedown"))}},matches:function(t,e){return null!=t&&(this.props.matchaccent||(t=this.normalize(t),e=this.normalize(e)),this.props.matchcase||(t=t.toLowerCase(),e=e.toLowerCase()),this.props.matchstart&&(t=t.substring(0,e.length)),-1!=t.indexOf(e))},getItemHtml:function(t,e){var i=this.htmlEncode(t),s=new RegExp((this.props.matchstart?"^":"")+dmx.escapeRegExp(this.htmlEncode(e)),this.props.matchcase?"g":"gi");return i=i.replace(s,(function(t){return"<b>"+t+"</b>"}))},htmlEncode:function(t){return t=(t=(t=(t=t.replace(/&/g,"&")).replace(/"/g,""")).replace(/</g,"<")).replace(/>/g,">")},normalize:function(t){if(t.normalize)return t.normalize("NFD").replace(/[\u0300-\u036f]/g,"");for(var e=t.split(""),i=0;i<e.length;i++){var s=t.charCodeAt(i);s>=192&&s<=383?e[i]=String.fromCharCode("AAAAAAACEEEEIIIIDNOOOOO*OUUUUYIsaaaaaaaceeeeiiii?nooooo/ouuuuy?yAaAaAaCcCcCcCcDdDdEeEeEeEeEeGgGgGgGgHhHhIiIiIiIiIiJjJjKkkLlLlLlLlLlNnNnNnnNnOoOoOoOoRrRrRrSsSsSsSsTtTtTtUuUuUuUuUuUuWwYyYZzZzZzF".charCodeAt(s-192)):s>127&&(e[i]="?")}return e.join("")},updateActive:function(){var t=this.list.getElementsByTagName("div");if(t){this.currentFocus>=t.length&&(this.currentFocus=0),this.currentFocus<0&&(this.currentFocus=t.length-1);for(var e=0;e<t.length;e++)t[e].classList.remove("dmx-autocomplete-active");t[this.currentFocus].classList.add("dmx-autocomplete-active")}},showList:function(){this.input.value&&(this.list.style.left=this.input.offsetLeft+"px",this.list.style.top=this.input.offsetTop+this.input.offsetHeight+"px",this.$node.nextSibling?this.$node.parentNode.insertBefore(this.list,this.$node.nextSibling):this.$node.parentNode.appendChild(this.list))},closeList:function(){this.list.parentNode&&this.list.parentNode.removeChild(this.list)}});
- //# sourceMappingURL=../maps/dmxAutocomplete.js.map
|
