From c45924fea109bd3f64ea3e37166992154c609f65 Mon Sep 17 00:00:00 2001 From: Sa Si Dev Date: Sat, 23 Jan 2021 12:34:02 +0530 Subject: [PATCH] issue fixed and docs updated --- dist/tooltip.min.js | 2 +- dist/virtual-select.min.css | 2 +- dist/virtual-select.min.js | 2 +- docs/assets/script.js | 19 ++++ docs/assets/styles.min.js | 5 - docs/assets/tooltip.min.js | 2 +- docs/assets/virtual-select.min.css | 2 +- docs/assets/virtual-select.min.js | 2 +- docs/examples.md | 34 ++++++ docs/methods.md | 24 ++++- docs/properties.md | 9 +- package-lock.json | 146 -------------------------- package.json | 1 - src/main.js | 0 src/sass/partials/virtual-select.scss | 23 +++- src/virtual-select.js | 136 ++++++++++++++++++++---- static/tooltip.min.js | 2 +- webpack.config.js | 14 +-- 18 files changed, 233 insertions(+), 192 deletions(-) delete mode 100644 docs/assets/styles.min.js delete mode 100644 src/main.js diff --git a/dist/tooltip.min.js b/dist/tooltip.min.js index d9edfb4..3dee33e 100644 --- a/dist/tooltip.min.js +++ b/dist/tooltip.min.js @@ -2,4 +2,4 @@ * Tooltip 1.0 * https://sa-si-dev.github.io/tooltip * Licensed under MIT (https://github.com/sa-si-dev/tooltip/blob/master/LICENSE) - */!function(){if(!window.tooltipComponentInitiated){window.tooltipComponentInitiated=!0;var t,o,i,e,n,a=document.querySelector("body"),r={};document.addEventListener("mouseover",l),document.addEventListener("mouseout",c),document.addEventListener("touchmove",p)}function l(l){if(!o){var c=l.target.closest("[data-tooltip]");c&&(o=c,function(){if(o){var l,c=o.dataset;if((r={tooltip:c.tooltip,position:c.tooltipPosition||"auto",zIndex:parseFloat(c.tooltipZindex)||1,enterDelay:parseFloat(c.tooltipEnterDelay)||0,exitDelay:parseFloat(c.tooltipExitDelay)||0,margin:parseFloat(c.tooltipMargin)||4,showDuration:parseFloat(c.tooltipShowDuration)||300,hideDuration:parseFloat(c.tooltipHideDuration)||200,transitionDistance:parseFloat(c.tooltipTransitionDistance)||10}).position=r.position.toLowerCase(),r.tooltip)s(),l='
'.concat(r.tooltip,"
"),a.insertAdjacentHTML("afterend",l),d(t=document.querySelector(".tooltip-box"),"zIndex",r.zIndex),function(){var i,e,n=window.innerWidth,a=h(o),l=h(t),c=a.left,p=a.top,u=l.width,s=l.height,m=a.width,w=a.height,g=r.position,v=m/2-u/2,D=w/2-s/2,x=r.margin,y=r.transitionDistance;"auto"===g&&(g=function(t){if(!t)return{};var o=t.getBoundingClientRect(),i=window.innerWidth,e=window.innerHeight,n=o.left,a=o.top,r=i-n-o.width,l=e-a-o.height;return{horizontal:n>r?"left":"right",vertical:a>l?"top":"bottom"}}(o).vertical),"top"===g?(p=p-s-x,c+=v):"right"===g?(p+=D,c=c+m+x):"left"===g?(p+=D,c=c-u-x):(p=p+w+x,c+=v),c<0?c=0:c+u>n&&(c=n-u),"top"===g?(i=p+y,e=c):"right"===g?(i=p,e=c-y):"left"===g?(i=p,e=c+y):(i=p-y,e=c);var T="translate3d(".concat(e,"px, ").concat(i,"px, 0)");d(t,"transform",T),f(t,"fromLeft",e),f(t,"fromTop",i),f(t,"top",p),f(t,"left",c),h(t)}(),clearTimeout(e),clearTimeout(n),i=setTimeout((function(){var o=m(t,"left"),i=m(t,"top"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)");d(t,"transitionDuration",r.showDuration+"ms"),d(t,"transform",e),d(t,"opacity",1)}),r.enterDelay)}}())}}function c(t){if(o){for(var i=t.relatedTarget;i;){if(i===o)return;i=i.parentNode}u()}}function p(){u()}function u(){(t||o)&&(clearTimeout(i),e=setTimeout((function(){if(t){var o=m(t,"fromLeft"),i=m(t,"fromTop"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)"),a=r.hideDuration;d(t,"transitionDuration",a+"ms"),d(t,"transform",e),d(t,"opacity",0),n=setTimeout((function(){s()}),a)}}),r.exitDelay),o=null)}function s(){t&&t.remove()}function d(t,o,i){t&&(t.style[o]=i)}function f(t,o,i){t&&(t.dataset[o]=i)}function m(t,o,i){var e=t?t.dataset[o]:"";return"number"===i?e=parseFloat(e)||0:"true"===e?e=!0:"false"===e&&(e=!1),e}function h(t){if(t){var o=t.getBoundingClientRect(),i=window.pageXOffset,e=window.pageYOffset;return{width:o.width,height:o.height,top:o.top+e,right:o.right+i,bottom:o.bottom+e,left:o.left+i}}}}(); \ No newline at end of file + */!function(){if(!window.tooltipComponentInitiated){window.tooltipComponentInitiated=!0;var t,o,i,e,n,a=document.querySelector("body"),r={};document.addEventListener("mouseover",l),document.addEventListener("mouseout",s),document.addEventListener("touchmove",p)}function l(l){if(!o){var s=l.target.closest("[data-tooltip]");s&&(o=s,function(){if(o){var l,s,p=o.dataset;if((r={tooltip:p.tooltip,position:p.tooltipPosition||"auto",zIndex:parseFloat(p.tooltipZIndex)||1,enterDelay:parseFloat(p.tooltipEnterDelay)||0,exitDelay:parseFloat(p.tooltipExitDelay)||0,margin:parseFloat(p.tooltipMargin)||4,showDuration:parseFloat(p.tooltipShowDuration)||300,hideDuration:parseFloat(p.tooltipHideDuration)||200,transitionDistance:parseFloat(p.tooltipTransitionDistance)||10,ellipsisOnly:w(p.tooltipEllipsisOnly)}).position=r.position.toLowerCase(),r.tooltip&&(!r.ellipsisOnly||(l=o)&&l.scrollWidth>l.offsetWidth))c(),s='
'.concat(r.tooltip,"
"),a.insertAdjacentHTML("afterend",s),f(t=document.querySelector(".tooltip-box"),"zIndex",r.zIndex),function(){var i,e,n=window.innerWidth,a=m(o),l=m(t),s=a.left,p=a.top,u=l.width,c=l.height,h=a.width,w=a.height,g=r.position,v=h/2-u/2,D=w/2-c/2,x=r.margin,y=r.transitionDistance;"auto"===g&&(g=function(t){if(!t)return{};var o=t.getBoundingClientRect(),i=window.innerWidth,e=window.innerHeight,n=o.left,a=o.top,r=i-n-o.width,l=e-a-o.height;return{horizontal:n>r?"left":"right",vertical:a>l?"top":"bottom"}}(o).vertical),"top"===g?(p=p-c-x,s+=v):"right"===g?(p+=D,s=s+h+x):"left"===g?(p+=D,s=s-u-x):(p=p+w+x,s+=v),s<0?s=0:s+u>n&&(s=n-u),"top"===g?(i=p+y,e=s):"right"===g?(i=p,e=s-y):"left"===g?(i=p,e=s+y):(i=p-y,e=s);var T="translate3d(".concat(e,"px, ").concat(i,"px, 0)");f(t,"transform",T),d(t,"fromLeft",e),d(t,"fromTop",i),d(t,"top",p),d(t,"left",s),m(t)}(),clearTimeout(e),clearTimeout(n),i=setTimeout((function(){var o=h(t,"left"),i=h(t,"top"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)");f(t,"transitionDuration",r.showDuration+"ms"),f(t,"transform",e),f(t,"opacity",1)}),r.enterDelay)}}())}}function s(t){if(o){for(var i=t.relatedTarget;i;){if(i===o)return;i=i.parentNode}u()}}function p(){u()}function u(){(t||o)&&(clearTimeout(i),e=setTimeout((function(){if(t){var o=h(t,"fromLeft"),i=h(t,"fromTop"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)"),a=r.hideDuration;f(t,"transitionDuration",a+"ms"),f(t,"transform",e),f(t,"opacity",0),n=setTimeout((function(){c()}),a)}}),r.exitDelay),o=null)}function c(){t&&t.remove()}function f(t,o,i){t&&(t.style[o]=i)}function d(t,o,i){t&&(t.dataset[o]=i)}function h(t,o,i){var e=t?t.dataset[o]:"";return"number"===i?e=parseFloat(e)||0:"true"===e?e=!0:"false"===e&&(e=!1),e}function m(t){if(t){var o=t.getBoundingClientRect(),i=window.pageXOffset,e=window.pageYOffset;return{width:o.width,height:o.height,top:o.top+e,right:o.right+i,bottom:o.bottom+e,left:o.left+i}}}function w(t){return!0===t||"true"===t}}(); \ No newline at end of file diff --git a/dist/virtual-select.min.css b/dist/virtual-select.min.css index e44a4a9..cf77d33 100644 --- a/dist/virtual-select.min.css +++ b/dist/virtual-select.min.css @@ -3,5 +3,5 @@ * https://sa-si-dev.github.io/virtual-select * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE) */ -.vscomp-ele{font-family:sans-serif;display:inline-block;width:100%;max-width:250px}.vscomp-wrapper{display:inline-flex;position:relative;width:100%;font-size:14px;color:#333;text-align:left}.vscomp-wrapper *,.vscomp-wrapper *::before,.vscomp-wrapper *::after{box-sizing:border-box}.vscomp-wrapper:focus{outline:none}.vscomp-toggle-button{display:flex;position:relative;align-items:center;width:100%;padding:7px 30px 7px 10px;border:1px solid #ddd;background-color:#fff;cursor:pointer}.vscomp-value{width:100%;height:20px;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vscomp-value-tag{white-space:nowrap}.vscomp-arrow{position:absolute;display:flex;top:0;right:0;width:30px;height:100%;align-items:center;justify-content:center}.vscomp-arrow::after{content:'';border:6px solid transparent;border-top-color:#111;margin-bottom:-6px}.vscomp-clear-button{position:absolute;display:none;top:50%;right:30px;width:24px;height:24px;justify-content:center;border-radius:50%;margin-top:-12px}.vscomp-clear-button::before,.vscomp-clear-button::after{content:'';position:absolute;width:2px;height:12px;top:50%;margin-top:-6px;background:#999}.vscomp-clear-button::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.vscomp-clear-button::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.vscomp-clear-button:hover{background:#ccc}.vscomp-clear-button:hover::before,.vscomp-clear-button:hover::after{background:#333}.vscomp-dropbox{position:absolute;top:calc(100% + 4px);left:0;width:100%;opacity:0;box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);background-color:#fff;z-index:1;-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}.vscomp-options-container{position:relative;max-height:210px;overflow:auto}.vscomp-option{display:flex;align-items:center;padding:10px 15px;height:40px;align-items:center;cursor:pointer}.vscomp-option.selected{background-color:#eee}.vscomp-option.focused{background-color:#ccc}.vscomp-option.disabled{opacity:0.5;cursor:default}.vscomp-option-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vscomp-search-container{display:flex;align-items:center;position:relative;height:40px;padding:0 5px 0 15px;border-bottom:1px solid #ddd}.vscomp-search-input{border:none;width:calc(100% - 30px);height:38px;padding:10px 0;font-size:15px}.vscomp-search-input:focus{outline:none}.vscomp-search-clear{display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:25px;color:#999;cursor:pointer;user-select:none;visibility:hidden}.vscomp-search-clear:hover{color:#333}.vscomp-no-options{display:none;text-align:center;padding:20px 10px}.vscomp-wrapper .checkbox-icon{display:inline-flex;position:relative;width:15px;height:15px;margin-right:10px}.vscomp-wrapper .checkbox-icon::after{content:'';width:100%;height:100%;border:2px solid #888;-webkit-transition-duration:0.2s;transition-duration:0.2s}.vscomp-wrapper .checkbox-icon.checked::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.position-top .vscomp-dropbox{top:auto;bottom:calc(100% + 4px);-webkit-transform:translate3d(0, 30px, 0);transform:translate3d(0, 30px, 0)}.vscomp-wrapper.selected .checkbox-icon::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.multiple .toggle-all-options{cursor:pointer}.vscomp-wrapper.multiple .vscomp-search-input{width:calc(100% - 55px)}.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.focused .vscomp-toggle-button,.vscomp-wrapper:focus .vscomp-toggle-button{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.vscomp-wrapper.opened .vscomp-dropbox{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.vscomp-wrapper.closed .vscomp-dropbox{display:none}.vscomp-wrapper:not(.has-value) .vscomp-value{opacity:0.5}.vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button{display:flex}.vscomp-wrapper.has-clear-button .vscomp-toggle-button{padding-right:54px}.vscomp-wrapper.has-no-options .vscomp-options-container{display:none}.vscomp-wrapper.has-no-options .vscomp-no-options{display:block}.vscomp-wrapper.has-search-value .vscomp-search-clear{visibility:visible} +.vscomp-ele{font-family:sans-serif;display:inline-block;width:100%;max-width:250px}.vscomp-wrapper{display:inline-flex;position:relative;width:100%;font-size:14px;color:#333;text-align:left}.vscomp-wrapper *,.vscomp-wrapper *::before,.vscomp-wrapper *::after{box-sizing:border-box}.vscomp-wrapper:focus{outline:none}.vscomp-toggle-button{display:flex;position:relative;align-items:center;width:100%;padding:7px 30px 7px 10px;border:1px solid #ddd;background-color:#fff;cursor:pointer}.vscomp-value{width:100%;height:20px;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vscomp-value-tag{white-space:nowrap}.vscomp-arrow{position:absolute;display:flex;top:0;right:0;width:30px;height:100%;align-items:center;justify-content:center}.vscomp-arrow::after{content:'';border:6px solid transparent;border-top-color:#111;margin-bottom:-6px}.vscomp-clear-button{position:absolute;display:none;top:50%;right:30px;width:24px;height:24px;justify-content:center;border-radius:50%;margin-top:-12px}.vscomp-clear-button::before,.vscomp-clear-button::after{content:'';position:absolute;width:2px;height:12px;top:50%;margin-top:-6px;background:#999}.vscomp-clear-button::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.vscomp-clear-button::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.vscomp-clear-button:hover{background:#ccc}.vscomp-clear-button:hover::before,.vscomp-clear-button:hover::after{background:#333}.vscomp-dropbox{position:absolute;top:calc(100% + 4px);left:0;width:100%;opacity:0;box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);background-color:#fff;z-index:1;-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}.vscomp-options-container{position:relative;max-height:210px;overflow:auto}.vscomp-option{display:flex;align-items:center;padding:10px 15px;height:40px;align-items:center;cursor:pointer}.vscomp-option.selected{background-color:#eee}.vscomp-option.focused{background-color:#ccc}.vscomp-option.disabled{opacity:0.5;cursor:default}.vscomp-option-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 25px)}.vscomp-search-container{display:flex;align-items:center;position:relative;height:40px;padding:0 5px 0 15px;border-bottom:1px solid #ddd}.vscomp-search-input{border:none;width:calc(100% - 30px);height:38px;padding:10px 0;font-size:15px}.vscomp-search-input:focus{outline:none}.vscomp-search-clear{display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:25px;color:#999;cursor:pointer;user-select:none;visibility:hidden}.vscomp-search-clear:hover{color:#333}.vscomp-no-options,.vscomp-no-search-results{display:none;text-align:center;padding:20px 10px}.vscomp-wrapper .checkbox-icon{display:inline-flex;position:relative;width:15px;height:15px;margin-right:10px}.vscomp-wrapper .checkbox-icon::after{content:'';display:inline-block;width:100%;height:100%;border:2px solid #888;-webkit-transition-duration:0.2s;transition-duration:0.2s}.vscomp-wrapper .checkbox-icon.checked::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.position-top .vscomp-dropbox{top:auto;bottom:calc(100% + 4px);-webkit-transform:translate3d(0, 30px, 0);transform:translate3d(0, 30px, 0)}.vscomp-wrapper.position-left .vscomp-dropbox{right:0;left:auto}.vscomp-wrapper.selected .checkbox-icon::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.multiple .toggle-all-options{cursor:pointer}.vscomp-wrapper.multiple .vscomp-search-input{width:calc(100% - 55px)}.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.focused .vscomp-toggle-button,.vscomp-wrapper:focus .vscomp-toggle-button{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.vscomp-wrapper.opened .vscomp-dropbox{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.vscomp-wrapper.closed .vscomp-dropbox{display:none}.vscomp-wrapper:not(.has-value) .vscomp-value{opacity:0.5}.vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button{display:flex}.vscomp-wrapper.has-clear-button .vscomp-toggle-button{padding-right:54px}.vscomp-wrapper.has-no-options .vscomp-options-container,.vscomp-wrapper.has-no-search-results .vscomp-options-container{display:none}.vscomp-wrapper.has-no-options .vscomp-no-options{display:block}.vscomp-wrapper.has-no-search-results .vscomp-no-search-results{display:block}.vscomp-wrapper.has-search-value .vscomp-search-clear{visibility:visible} diff --git a/dist/virtual-select.min.js b/dist/virtual-select.min.js index 7666cf5..dd783aa 100644 --- a/dist/virtual-select.min.js +++ b/dist/virtual-select.min.js @@ -2,4 +2,4 @@ * Virtual Select 1.0 * https://sa-si-dev.github.io/virtual-select * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE) - */(()=>{"use strict";var t={657:(t,e,o)=>{function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t){return function(t){if(Array.isArray(t))return l(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||n(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){if(t){if("string"==typeof t)return l(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);return"Object"===o&&t.constructor&&(o=t.constructor.name),"Map"===o||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?l(t,e):void 0}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,i=new Array(e);o\n
\n
').concat(this.placeholder,'
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
').concat(this.noOptionsText,"
\n
\n ");this.$ele.innerHTML=o,this.$wrapper=this.$ele.querySelector(".vscomp-wrapper"),this.$toggleButton=this.$ele.querySelector(".vscomp-toggle-button"),this.$clearButton=this.$ele.querySelector(".vscomp-clear-button"),this.$dropbox=this.$ele.querySelector(".vscomp-dropbox"),this.$search=this.$ele.querySelector(".vscomp-search-wrapper"),this.$optionsContainer=this.$ele.querySelector(".vscomp-options-container"),this.$optionsList=this.$ele.querySelector(".vscomp-options-list"),this.$options=this.$ele.querySelector(".vscomp-options"),this.$valueText=this.$ele.querySelector(".vscomp-value"),this.addClass(this.$ele,"vscomp-ele"),this.renderSearch(),this.setOptionsHeight(),this.setVisibleOptions()}}},{key:"renderOptions",value:function(){var t=this,e="",o=this.labelKey,i=this.getVisibleOptions(),s="",n=this.getStyleText({height:this.optionHeight+"px"});this.multiple&&(s=''),i.forEach((function(i){var l=i[o],a="vscomp-option";i.isSelected&&(a+=" selected"),i.isFocused&&(a+=" focused"),i.isDisabled&&(a+=" disabled"),e+='
\n ").concat(s,'\n \n ').concat(l,"\n \n
")})),this.$options.innerHTML=e,this.toggleClass(this.$wrapper,"has-no-options",!i.length),this.setOptionsPosition(),this.moveFocusedOptionToView()}},{key:"renderSearch",value:function(){if(this.hasSearch){var t="";this.multiple&&(t='');var e='
\n '.concat(t,'\n \n ×\n
');this.$search.innerHTML=e,this.$searchInput=this.$ele.querySelector(".vscomp-search-input"),this.$searchClear=this.$ele.querySelector(".vscomp-search-clear"),this.$toggleAllOptions=this.$ele.querySelector(".toggle-all-options"),this.addEvent(this.$searchInput,"keyup change","onSearch"),this.addEvent(this.$searchClear,"click","onSearchClear"),this.addEvent(this.$toggleAllOptions,"click","onToggleAllOptions")}}},{key:"addEvents",value:function(){this.addEvent(document,"click","onDocumentClick"),this.addEvent(this.$wrapper,"keydown","onKeyDown"),this.addEvent(this.$toggleButton,"click","onToggleButtonClick"),this.addEvent(this.$clearButton,"click","onClearButtonClick"),this.addEvent(this.$optionsContainer,"scroll","onOptionsScroll"),this.addEvent(this.$options,"click","onOptionsClick"),this.addEvent(this.$options,"mouseover","onOptionsMouseOver"),this.addEvent(this.$options,"touchmove","onOptionsTouchMove")}},{key:"addEvent",value:function(t,e,o){var i=this;t&&(e=this.removeArrayEmpty(e.split(" "))).forEach((function(e){var s="".concat(o,"-").concat(e),n=i.events[s];n||(n=i[o].bind(i),i.events[s]=n),(t=i.getElements(t)).forEach((function(t){t.addEventListener(e,n)}))}))}},{key:"dispatchEvent",value:function(t,e){t&&(t=this.getElements(t)).forEach((function(t){t.dispatchEvent(new Event(e))}))}},{key:"onDocumentClick",value:function(e){t.closeAllDropbox(e.target.closest(".vscomp-wrapper"))}},{key:"onKeyDown",value:function(t){var e=t.which||t.keyCode,o=r[e];o&&this[o](t)}},{key:"onEnterPress",value:function(){this.isOpened()?this.selectFocusedOption():this.openDropbox()}},{key:"onEscPress",value:function(){this.isOpened()&&this.closeDropbox()}},{key:"onDownArrowPress",value:function(t){t.preventDefault(),this.isOpened()?this.focusOption("next"):this.openDropbox()}},{key:"onUpArrowPress",value:function(t){t.preventDefault(),this.isOpened()?this.focusOption("previous"):this.openDropbox()}},{key:"onToggleButtonClick",value:function(t){t.target.closest(".toggle-button-child")||this.toggleDropbox()}},{key:"onClearButtonClick",value:function(){this.reset()}},{key:"onOptionsScroll",value:function(){this.setVisibleOptions()}},{key:"onOptionsClick",value:function(t){this.selectOption(t.target.closest(".vscomp-option:not(.disabled)"))}},{key:"onOptionsMouseOver",value:function(t){var e=t.target.closest(".vscomp-option:not(.disabled)");e&&this.focusOption(null,e)}},{key:"onOptionsTouchMove",value:function(){this.removeOptionFocus()}},{key:"onSearch",value:function(t){t.stopPropagation(),this.setSearchValue(t.target.value,!0)}},{key:"onSearchClear",value:function(){this.setSearchValue(""),this.focusSearchInput()}},{key:"onToggleAllOptions",value:function(){this.toggleAllOptions()}},{key:"setMethods",value:function(){var e=this.$ele;e.virtualSelect=this,e.value=this.multiple?[]:"",e.reset=t.reset,e.setValue=t.setValueMethod,e.setOptions=t.setOptionsMethod,e.setDisabledOptions=t.setDisabledOptionsMethod}},{key:"setValueMethod",value:function(t,e){Array.isArray(t)||(t=[t]),t=t.map((function(t){return t||0==t?t.toString():""}));var o=[];this.options.forEach((function(e){-1===t.indexOf(e.value)||e.isDisabled?e.isSelected=!1:(e.isSelected=!0,o.push(e.value))})),this.multiple||(o=o[0]),this.setValue(o,!e),this.afterValueSet()}},{key:"setOptionsMethod",value:function(t){this.setOptions(t),this.setOptionsHeight(),this.setVisibleOptions(),this.reset()}},{key:"setDisabledOptionsMethod",value:function(t){this.setDisabledOptions(t,!0),this.setValueMethod(null),this.setVisibleOptions()}},{key:"setDisabledOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t=t.map((function(t){return t.toString()})),this.disabledOptions=t,e&&t.length&&this.options.forEach((function(e){return e.isDisabled=-1!==t.indexOf(e.value),e}))}},{key:"setOptions",value:function(t){t||(t=[]);var e=this.disabledOptions,o=e.length,i=this.valueKey,s=this.labelKey;this.visibleOptionsCount=t.length,this.options=t.map((function(t,n){var l=t[i].toString();return t.index=n,t.value=l,t.label=t[s],t.isVisible=!0,o&&(t.isDisabled=-1!==e.indexOf(l)),t}))}},{key:"setVisibleOptions",value:function(){var t=s(this.options),e=2*this.optionsCount,o=this.getVisibleStartIndex(),i=o+e-1,n=0;t=t.filter((function(t){var e=!1;return t.isVisible&&(e=n>=o&&n<=i,n++),e})),this.visibleOptions=t,this.renderOptions()}},{key:"setOptionsPosition",value:function(t){void 0===t&&(t=this.getVisibleStartIndex());var e=t*this.optionHeight;this.$options.style.transform="translate3d(0, ".concat(e,"px, 0)"),this.setData(this.$options,"top",e)}},{key:"setValue",value:function(t,e){t?Array.isArray(t)?this.selectedValues=s(t):this.selectedValues=[t]:this.selectedValues=[],this.$ele.value=this.multiple?this.selectedValues:this.selectedValues[0]||"",this.setValueText(),this.toggleClass(this.$wrapper,"has-value",this.isNotEmpty(this.selectedValues)),e&&this.dispatchEvent(this.$ele,"change")}},{key:"setValueText",value:function(){var t,e=[],o=[],i=this.selectedValues,s=this.maximumValuesToShow,l=0,a=function(t,e){var o;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(o=n(t))||e&&t&&"number"==typeof t.length){o&&(t=o);var i=0,s=function(){};return{s,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:s}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var l,a=!0,r=!1;return{s:function(){o=t[Symbol.iterator]()},n:function(){var t=o.next();return a=t.done,t},e:function(t){r=!0,l=t},f:function(){try{a||null==o.return||o.return()}finally{if(r)throw l}}}}(this.options);try{for(a.s();!(t=a.n()).done;){var r=t.value;if(l>s)break;var c=r.value;if(-1!==i.indexOf(c)){var u=r[this.labelKey];e.push(u),o.push(''.concat(u,"")),l++}}}catch(t){a.e(t)}finally{a.f()}var h=i.length-s;h>0&&o.push('+ '.concat(h," more...")),this.$valueText.innerHTML=e.join(", ")||this.placeholder,this.setData(this.$valueText,"tooltip",o.join(", "))}},{key:"setSearchValue",value:function(t,e){if(t!==this.searchValue){e||(this.$searchInput.value=t);var o=t.toLowerCase().trim(),i=0;this.searchValue=o,this.options.forEach((function(t){var e=-1!==t.label.toString().toLowerCase().indexOf(o);t.isVisible=e,e&&i++})),this.visibleOptionsCount=i,this.toggleClass(this.$wrapper,"has-search-value",t),this.scrollToTop(),this.setOptionsHeight(),this.setVisibleOptions()}}},{key:"setOptionProp",value:function(t,e,o){isNaN(t)||null===t||(this.options[t][e]=o)}},{key:"setOptionsHeight",value:function(){this.$optionsList.style.height=this.optionHeight*this.visibleOptionsCount+"px"}},{key:"setDropboxPosition",value:function(){if("auto"===this.position){var t=this.getMoreVisibleSides(this.$wrapper);this.toggleClass(this.$wrapper,"position-top","top"===t.vertical)}}},{key:"getVisibleOptions",value:function(){return this.visibleOptions||[]}},{key:"getValue",value:function(){return this.multiple?this.selectedValues:this.selectedValues[0]}},{key:"getFirstVisibleOptionIndex",value:function(){return Math.ceil(this.$optionsContainer.scrollTop/this.optionHeight)}},{key:"getVisibleStartIndex",value:function(){var t=this.getFirstVisibleOptionIndex()-this.halfOptionsCount;return t<0&&(t=0),t}},{key:"openDropbox",value:function(t){var e=this;this.setDropboxPosition(),this.removeClass(this.$wrapper,"closed"),setTimeout((function(){e.addClass(e.$wrapper,"opened"),t||e.addClass(e.$wrapper,"focused"),e.focusSearchInput()}),0)}},{key:"closeDropbox",value:function(t){var e=this,o=t?0:this.transitionDuration;setTimeout((function(){e.removeClass(e.$wrapper,"opened focused"),e.removeOptionFocus()}),0),setTimeout((function(){e.addClass(e.$wrapper,"closed")}),o)}},{key:"toggleDropbox",value:function(){this.isOpened()?this.closeDropbox():this.openDropbox()}},{key:"isOpened",value:function(){return this.hasClass(this.$wrapper,"opened")}},{key:"focusSearchInput",value:function(){var t=this.$searchInput;t&&t.focus()}},{key:"focusOption",value:function(t,e){var o,i=this.$dropbox.querySelector(".vscomp-option.focused");if(e)o=e;else if(i)o=this.getSibling(i,t);else{var s=this.getFirstVisibleOptionIndex();o=this.$dropbox.querySelector('.vscomp-option[data-index="'.concat(s,'"]')),this.hasClass(o,"disabled")&&(o=this.getSibling(o,"next"))}o&&o!==i&&(i&&this.removeClass(i,"focused"),this.addClass(o,"focused"),this.toggleFocusedProp(this.getData(o,"index"),!0),this.moveFocusedOptionToView(o))}},{key:"moveFocusedOptionToView",value:function(t){if(t||(t=this.$dropbox.querySelector(".vscomp-option.focused")),t){var e,o=this.$optionsContainer.getBoundingClientRect(),i=t.getBoundingClientRect(),s=o.top,n=o.bottom,l=o.height,a=i.top,r=i.bottom,c=i.height,u=t.offsetTop,h=this.getData(this.$options,"top","number");s>a?e=u+h:n1&&void 0!==arguments[1]&&arguments[1];this.focusedOptionIndex&&this.setOptionProp(this.focusedOptionIndex,"isFocused",!1),this.setOptionProp(t,"isFocused",e),this.focusedOptionIndex=t}},{key:"toggleSelectedProp",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setOptionProp(t,"isSelected",e)}},{key:"scrollToTop",value:function(){var t=!this.isOpened();t&&this.openDropbox(!0),this.$optionsContainer.scrollTop>0&&(this.$optionsContainer.scrollTop=0),t&&this.closeDropbox(!0)}},{key:"reset",value:function(){this.options.forEach((function(t){t.isSelected=!1})),this.setValue(null,!0),this.afterValueSet(!0)}},{key:"afterValueSet",value:function(t){this.scrollToTop(),this.toggleAllOptionsClass(!t&&void 0),this.setSearchValue(""),this.renderOptions()}},{key:"addClass",value:function(t,e){t&&(e=e.split(" "),this.getElements(t).forEach((function(t){var o;(o=t.classList).add.apply(o,s(e))})))}},{key:"removeClass",value:function(t,e){t&&(e=e.split(" "),this.getElements(t).forEach((function(t){var o;(o=t.classList).remove.apply(o,s(e))})))}},{key:"toggleClass",value:function(t,e,o){var i;if(t)return void 0!==o&&(o=Boolean(o)),this.getElements(t).forEach((function(t){i=t.classList.toggle(e,o)})),i}},{key:"hasClass",value:function(t,e){return!!t&&t.classList.contains(e)}},{key:"isEmpty",value:function(t){var e=!1;return t?Array.isArray(t)?0===t.length&&(e=!0):"object"===i(t)&&0===Object.keys(t).length&&(e=!0):e=!0,e}},{key:"isNotEmpty",value:function(t){return!this.isEmpty(t)}},{key:"setData",value:function(t,e,o){t&&(t.dataset[e]=o)}},{key:"getStyleText",value:function(t,e){var o="";for(var i in t)o+="".concat(i,": ").concat(t[i],";");return o&&!e&&(o='style="'.concat(o,'"')),o}},{key:"getElements",value:function(t){if(t)return void 0===t.length&&(t=[t]),t}},{key:"getData",value:function(t,e,o){if(t){var i=t?t.dataset[e]:"";return"number"===o?i=parseFloat(i)||0:"true"===i?i=!0:"false"===i&&(i=!1),i}}},{key:"removeItemFromArray",value:function(t,e,o){if(!Array.isArray(t)||!t.length||!e)return t;o&&(t=s(t));var i=t.indexOf(e);return-1!==i&&t.splice(i,1),t}},{key:"removeArrayEmpty",value:function(t){return Array.isArray(t)&&t.length?t.filter((function(t){return!!t})):[]}},{key:"getMoreVisibleSides",value:function(t){if(!t)return{};var e=t.getBoundingClientRect(),o=window.innerWidth,i=window.innerHeight,s=e.left,n=e.top;return{horizontal:s>o-s-e.width?"left":"right",vertical:n>i-n-e.height?"top":"bottom"}}},{key:"getSibling",value:function(t,e){var o="next"===e?"nextElementSibling":"previousElementSibling";do{t&&(t=t[o])}while(this.hasClass(t,"disabled"));return t}}])&&a(e.prototype,o),l&&a(e,l),t}();document.addEventListener("reset",c.resetForm),window.VirtualSelect=c}},e={};function o(i){if(e[i])return e[i].exports;var s=e[i]={exports:{}};return t[i](s,s.exports,o),s.exports}o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o(657)})(); \ No newline at end of file + */(()=>{"use strict";var t={657:(t,e,i)=>{function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t){return function(t){if(Array.isArray(t))return l(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||n(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){if(t){if("string"==typeof t)return l(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?l(t,e):void 0}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,s=new Array(e);i\n
\n
\n ").concat(this.placeholder,'\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
').concat(this.noOptionsText,'
\n
').concat(this.noSearchResultsText,"
\n
\n ");this.$ele.innerHTML=n,this.$wrapper=this.$ele.querySelector(".vscomp-wrapper"),this.$toggleButton=this.$ele.querySelector(".vscomp-toggle-button"),this.$clearButton=this.$ele.querySelector(".vscomp-clear-button"),this.$dropbox=this.$ele.querySelector(".vscomp-dropbox"),this.$search=this.$ele.querySelector(".vscomp-search-wrapper"),this.$optionsContainer=this.$ele.querySelector(".vscomp-options-container"),this.$optionsList=this.$ele.querySelector(".vscomp-options-list"),this.$options=this.$ele.querySelector(".vscomp-options"),this.$valueText=this.$ele.querySelector(".vscomp-value"),this.addClass(this.$ele,"vscomp-ele"),this.renderSearch(),this.setOptionsHeight(),this.setVisibleOptions()}}},{key:"renderOptions",value:function(){var t=this,e="",i=this.labelKey,s=(this.zIndex,this.tooltipEnterDelay,this.getVisibleOptions()),o="",n=this.getStyleText({height:this.optionHeight+"px"});this.multiple&&(o=''),s.forEach((function(s){var l=s[i],a="vscomp-option",r=t.getTooltipAttrText(l,!0);s.isSelected&&(a+=" selected"),s.isFocused&&(a+=" focused"),s.isDisabled&&(a+=" disabled"),e+='
\n ").concat(o,'\n \n ").concat(l,"\n \n
")})),this.$options.innerHTML=e;var l=!this.options.length,a=!l&&!s.length;this.toggleClass(this.$wrapper,"has-no-options",l),this.toggleClass(this.$wrapper,"has-no-search-results",a),this.setOptionsPosition(),this.moveFocusedOptionToView()}},{key:"renderSearch",value:function(){if(this.hasSearch){var t="";this.multiple&&(t='');var e='
\n '.concat(t,'\n \n ×\n
');this.$search.innerHTML=e,this.$searchInput=this.$ele.querySelector(".vscomp-search-input"),this.$searchClear=this.$ele.querySelector(".vscomp-search-clear"),this.$toggleAllOptions=this.$ele.querySelector(".toggle-all-options"),this.addEvent(this.$searchInput,"keyup change","onSearch"),this.addEvent(this.$searchClear,"click","onSearchClear"),this.addEvent(this.$toggleAllOptions,"click","onToggleAllOptions")}}},{key:"addEvents",value:function(){this.addEvent(document,"click","onDocumentClick"),this.addEvent(this.$wrapper,"keydown","onKeyDown"),this.addEvent(this.$toggleButton,"click","onToggleButtonClick"),this.addEvent(this.$clearButton,"click","onClearButtonClick"),this.addEvent(this.$optionsContainer,"scroll","onOptionsScroll"),this.addEvent(this.$options,"click","onOptionsClick"),this.addEvent(this.$options,"mouseover","onOptionsMouseOver"),this.addEvent(this.$options,"touchmove","onOptionsTouchMove")}},{key:"addEvent",value:function(t,e,i){var s=this;t&&(e=this.removeArrayEmpty(e.split(" "))).forEach((function(e){var o="".concat(i,"-").concat(e),n=s.events[o];n||(n=s[i].bind(s),s.events[o]=n),(t=s.getElements(t)).forEach((function(t){t.addEventListener(e,n)}))}))}},{key:"dispatchEvent",value:function(t,e){t&&(t=this.getElements(t)).forEach((function(t){t.dispatchEvent(new Event(e,{bubbles:!0}))}))}},{key:"onDocumentClick",value:function(e){t.closeAllDropbox(e.target.closest(".vscomp-wrapper"))}},{key:"onKeyDown",value:function(t){var e=t.which||t.keyCode,i=r[e];i&&this[i](t)}},{key:"onEnterPress",value:function(){this.isOpened()?this.selectFocusedOption():this.openDropbox()}},{key:"onEscPress",value:function(){this.isOpened()&&this.closeDropbox()}},{key:"onDownArrowPress",value:function(t){t.preventDefault(),this.isOpened()?this.focusOption("next"):this.openDropbox()}},{key:"onUpArrowPress",value:function(t){t.preventDefault(),this.isOpened()?this.focusOption("previous"):this.openDropbox()}},{key:"onToggleButtonClick",value:function(t){t.target.closest(".toggle-button-child")||this.toggleDropbox()}},{key:"onClearButtonClick",value:function(){this.reset()}},{key:"onOptionsScroll",value:function(){this.setVisibleOptions()}},{key:"onOptionsClick",value:function(t){this.selectOption(t.target.closest(".vscomp-option:not(.disabled)"))}},{key:"onOptionsMouseOver",value:function(t){var e=t.target.closest(".vscomp-option:not(.disabled)");e&&this.focusOption(null,e)}},{key:"onOptionsTouchMove",value:function(){this.removeOptionFocus()}},{key:"onSearch",value:function(t){t.stopPropagation(),this.setSearchValue(t.target.value,!0)}},{key:"onSearchClear",value:function(){this.setSearchValue(""),this.focusSearchInput()}},{key:"onToggleAllOptions",value:function(){this.toggleAllOptions()}},{key:"setMethods",value:function(){var e=this.$ele;e.virtualSelect=this,e.value=this.multiple?[]:"",e.reset=t.reset,e.setValue=t.setValueMethod,e.setOptions=t.setOptionsMethod,e.setDisabledOptions=t.setDisabledOptionsMethod,e.toggleSelectAll=t.toggleSelectAll,e.isAllSelected=t.isAllSelected}},{key:"setValueMethod",value:function(t,e){Array.isArray(t)||(t=[t]),t=t.map((function(t){return t||0==t?t.toString():""}));var i=[];this.options.forEach((function(e){-1===t.indexOf(e.value)||e.isDisabled?e.isSelected=!1:(e.isSelected=!0,i.push(e.value))})),this.multiple||(i=i[0]),this.setValue(i,!e),this.afterValueSet()}},{key:"setOptionsMethod",value:function(t){this.setOptions(t),this.setOptionsHeight(),this.setVisibleOptions(),this.reset()}},{key:"setDisabledOptionsMethod",value:function(t){this.setDisabledOptions(t,!0),this.setValueMethod(null),this.setVisibleOptions()}},{key:"setDisabledOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t=t.map((function(t){return t.toString()})),this.disabledOptions=t,e&&t.length&&this.options.forEach((function(e){return e.isDisabled=-1!==t.indexOf(e.value),e}))}},{key:"setOptions",value:function(t){t||(t=[]);var e=this.disabledOptions,i=e.length,s=this.valueKey,o=this.labelKey;this.visibleOptionsCount=t.length,this.options=t.map((function(t,n){var l=t[s].toString(),a={index:n,value:l,label:t[o],isVisible:!0};return i&&(a.isDisabled=-1!==e.indexOf(l)),a}))}},{key:"setVisibleOptions",value:function(){var t=o(this.options),e=2*this.optionsCount,i=this.getVisibleStartIndex(),s=i+e-1,n=0;t=t.filter((function(t){var e=!1;return t.isVisible&&(e=n>=i&&n<=s,t.visibleIndex=n,n++),e})),this.visibleOptions=t,this.renderOptions()}},{key:"setOptionsPosition",value:function(t){void 0===t&&(t=this.getVisibleStartIndex());var e=t*this.optionHeight;this.$options.style.transform="translate3d(0, ".concat(e,"px, 0)"),this.setData(this.$options,"top",e)}},{key:"setValue",value:function(t,e){t?Array.isArray(t)?this.selectedValues=o(t):this.selectedValues=[t]:this.selectedValues=[],this.$ele.value=this.multiple?this.selectedValues:this.selectedValues[0]||"",this.setValueText(),this.toggleClass(this.$wrapper,"has-value",this.isNotEmpty(this.selectedValues)),e&&this.dispatchEvent(this.$ele,"change")}},{key:"setValueText",value:function(){var t,e=[],i=[],s=this.selectedValues,o=this.maximumValuesToShow,l=0,a=function(t,e){var i;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(i=n(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var s=0,o=function(){};return{s:o,n:function(){return s>=t.length?{done:!0}:{done:!1,value:t[s++]}},e:function(t){throw t},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var l,a=!0,r=!1;return{s:function(){i=t[Symbol.iterator]()},n:function(){var t=i.next();return a=t.done,t},e:function(t){r=!0,l=t},f:function(){try{a||null==i.return||i.return()}finally{if(r)throw l}}}}(this.options);try{for(a.s();!(t=a.n()).done;){var r=t.value;if(l>o)break;var c=r.value;if(-1!==s.indexOf(c)){var h=r[this.labelKey];e.push(h),i.push(''.concat(h,"")),l++}}}catch(t){a.e(t)}finally{a.f()}var u=s.length-o;u>0&&i.push('+ '.concat(u," more...")),this.$valueText.innerHTML=e.join(", ")||this.placeholder,this.setData(this.$valueText,"tooltip",i.join(", "))}},{key:"setSearchValue",value:function(t,e){if(t!==this.searchValue){e||(this.$searchInput.value=t);var i=t.toLowerCase().trim(),s=0;this.searchValue=i,this.options.forEach((function(t){var e=-1!==t.label.toString().toLowerCase().indexOf(i);t.isVisible=e,e&&s++})),this.visibleOptionsCount=s,this.toggleClass(this.$wrapper,"has-search-value",t),this.scrollToTop(),this.setOptionsHeight(),this.setVisibleOptions()}}},{key:"setOptionProp",value:function(t,e,i){isNaN(t)||null===t||(this.options[t][e]=i)}},{key:"setOptionsHeight",value:function(){this.$optionsList.style.height=this.optionHeight*this.visibleOptionsCount+"px"}},{key:"setDropboxPosition",value:function(){if("auto"===this.position){var t=this.getMoreVisibleSides(this.$wrapper),e=!1;if(this.dropboxWidth){var i=this.$toggleButton.getBoundingClientRect(),s=window.innerWidth,o=parseFloat(this.dropboxWidth),n=i.left+o>s,l=o>i.right;n&&!l&&(e=!0)}this.toggleClass(this.$wrapper,"position-top","top"===t.vertical),this.toggleClass(this.$wrapper,"position-left",e)}}},{key:"getVisibleOptions",value:function(){return this.visibleOptions||[]}},{key:"getValue",value:function(){return this.multiple?this.selectedValues:this.selectedValues[0]}},{key:"getFirstVisibleOptionIndex",value:function(){return Math.ceil(this.$optionsContainer.scrollTop/this.optionHeight)}},{key:"getVisibleStartIndex",value:function(){var t=this.getFirstVisibleOptionIndex()-this.halfOptionsCount;return t<0&&(t=0),t}},{key:"getTooltipAttrText",value:function(t,e){var i={"data-tooltip":t||"","data-tooltip-enter-delay":this.tooltipEnterDelay,"data-tooltip-z-index":this.zIndex,"data-tooltip-ellipsis-only":e||!1};return this.getAttributesText(i)}},{key:"openDropbox",value:function(t){var e=this;this.setDropboxPosition(),this.removeClass(this.$wrapper,"closed"),setTimeout((function(){e.addClass(e.$wrapper,"opened"),t||(e.addClass(e.$wrapper,"focused"),e.focusSearchInput())}),0)}},{key:"closeDropbox",value:function(t){var e=this,i=t?0:this.transitionDuration;setTimeout((function(){e.removeClass(e.$wrapper,"opened focused"),e.removeOptionFocus()}),0),setTimeout((function(){e.addClass(e.$wrapper,"closed")}),i)}},{key:"toggleDropbox",value:function(){this.isOpened()?this.closeDropbox():this.openDropbox()}},{key:"isOpened",value:function(){return this.hasClass(this.$wrapper,"opened")}},{key:"focusSearchInput",value:function(){var t=this.$searchInput;t&&t.focus()}},{key:"focusOption",value:function(t,e){var i,s=this.$dropbox.querySelector(".vscomp-option.focused");if(e)i=e;else if(s)i=this.getSibling(s,t);else{var o=this.getFirstVisibleOptionIndex();i=this.$dropbox.querySelector('.vscomp-option[data-visible-index="'.concat(o,'"]')),this.hasClass(i,"disabled")&&(i=this.getSibling(i,"next"))}i&&i!==s&&(s&&this.removeClass(s,"focused"),this.addClass(i,"focused"),this.toggleFocusedProp(this.getData(i,"index"),!0),this.moveFocusedOptionToView(i))}},{key:"moveFocusedOptionToView",value:function(t){if(t||(t=this.$dropbox.querySelector(".vscomp-option.focused")),t){var e,i=this.$optionsContainer.getBoundingClientRect(),s=t.getBoundingClientRect(),o=i.top,n=i.bottom,l=i.height,a=s.top,r=s.bottom,c=s.height,h=t.offsetTop,u=this.getData(this.$options,"top","number");o>a?e=h+u:n1&&void 0!==arguments[1]&&arguments[1];this.focusedOptionIndex&&this.setOptionProp(this.focusedOptionIndex,"isFocused",!1),this.setOptionProp(t,"isFocused",e),this.focusedOptionIndex=t}},{key:"toggleSelectedProp",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setOptionProp(t,"isSelected",e)}},{key:"scrollToTop",value:function(){var t=!this.isOpened();t&&this.openDropbox(!0),this.$optionsContainer.scrollTop>0&&(this.$optionsContainer.scrollTop=0),t&&this.closeDropbox(!0)}},{key:"reset",value:function(){this.options.forEach((function(t){t.isSelected=!1})),this.setValue(null,!0),this.afterValueSet(!0)}},{key:"afterValueSet",value:function(t){this.scrollToTop(),this.toggleAllOptionsClass(!t&&void 0),this.setSearchValue(""),this.renderOptions()}},{key:"addClass",value:function(t,e){t&&(e=e.split(" "),this.getElements(t).forEach((function(t){var i;(i=t.classList).add.apply(i,o(e))})))}},{key:"removeClass",value:function(t,e){t&&(e=e.split(" "),this.getElements(t).forEach((function(t){var i;(i=t.classList).remove.apply(i,o(e))})))}},{key:"toggleClass",value:function(t,e,i){var s;if(t)return void 0!==i&&(i=Boolean(i)),this.getElements(t).forEach((function(t){s=t.classList.toggle(e,i)})),s}},{key:"hasClass",value:function(t,e){return!!t&&t.classList.contains(e)}},{key:"isEmpty",value:function(t){var e=!1;return t?Array.isArray(t)?0===t.length&&(e=!0):"object"===s(t)&&0===Object.keys(t).length&&(e=!0):e=!0,e}},{key:"isNotEmpty",value:function(t){return!this.isEmpty(t)}},{key:"setData",value:function(t,e,i){t&&(t.dataset[e]=i)}},{key:"getStyleText",value:function(t,e){var i="";for(var s in t)i+="".concat(s,": ").concat(t[s],";");return i&&!e&&(i='style="'.concat(i,'"')),i}},{key:"getElements",value:function(t){if(t)return void 0===t.length&&(t=[t]),t}},{key:"getData",value:function(t,e,i){if(t){var s=t?t.dataset[e]:"";return"number"===i?s=parseFloat(s)||0:"true"===s?s=!0:"false"===s&&(s=!1),s}}},{key:"removeItemFromArray",value:function(t,e,i){if(!Array.isArray(t)||!t.length||!e)return t;i&&(t=o(t));var s=t.indexOf(e);return-1!==s&&t.splice(s,1),t}},{key:"removeArrayEmpty",value:function(t){return Array.isArray(t)&&t.length?t.filter((function(t){return!!t})):[]}},{key:"getMoreVisibleSides",value:function(t){if(!t)return{};var e=t.getBoundingClientRect(),i=window.innerWidth,s=window.innerHeight,o=e.left,n=e.top;return{horizontal:o>i-o-e.width?"left":"right",vertical:n>s-n-e.height?"top":"bottom"}}},{key:"getSibling",value:function(t,e){var i="next"===e?"nextElementSibling":"previousElementSibling";do{t&&(t=t[i])}while(this.hasClass(t,"disabled"));return t}},{key:"getAttributesText",value:function(t){var e="";if(!t)return e;for(var i in t)e+=" ".concat(i,'="').concat(t[i],'" ');return e}}])&&a(e.prototype,i),l&&a(e,l),t}();document.addEventListener("reset",c.resetForm),window.VirtualSelect=c}},e={};function i(s){if(e[s])return e[s].exports;var o=e[s]={exports:{}};return t[s](o,o.exports,i),o.exports}i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i(657)})(); \ No newline at end of file diff --git a/docs/assets/script.js b/docs/assets/script.js index 585d315..8d41949 100644 --- a/docs/assets/script.js +++ b/docs/assets/script.js @@ -108,9 +108,28 @@ function initPageExamples() { disabledOptions: [2, 6, 9], }); + VirtualSelect.init({ + ele: '#preselect-single-select', + options: getOptions(), + selectedValue: 3, + }); + + VirtualSelect.init({ + ele: '#preselect-multiple-select', + options: getOptions(), + multiple: true, + selectedValue: [3, 4], + }); + VirtualSelect.init({ ele: '#hide-clear-select', options: getOptions(), hideClearButton: true, }); + + VirtualSelect.init({ + ele: '#custom-width-select', + options: getOptions(), + dropboxWidth: '130px', + }); } \ No newline at end of file diff --git a/docs/assets/styles.min.js b/docs/assets/styles.min.js deleted file mode 100644 index 97757d8..0000000 --- a/docs/assets/styles.min.js +++ /dev/null @@ -1,5 +0,0 @@ -/*! - * Virtual Select 1.0 - * https://sa-si-dev.github.io/virtual-select - * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE) - */(()=>{var e={60:()=>{}},r={};function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{}};return e[o](n,n.exports,t),n.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{"use strict";t(60)})()})(); \ No newline at end of file diff --git a/docs/assets/tooltip.min.js b/docs/assets/tooltip.min.js index d9edfb4..3dee33e 100644 --- a/docs/assets/tooltip.min.js +++ b/docs/assets/tooltip.min.js @@ -2,4 +2,4 @@ * Tooltip 1.0 * https://sa-si-dev.github.io/tooltip * Licensed under MIT (https://github.com/sa-si-dev/tooltip/blob/master/LICENSE) - */!function(){if(!window.tooltipComponentInitiated){window.tooltipComponentInitiated=!0;var t,o,i,e,n,a=document.querySelector("body"),r={};document.addEventListener("mouseover",l),document.addEventListener("mouseout",c),document.addEventListener("touchmove",p)}function l(l){if(!o){var c=l.target.closest("[data-tooltip]");c&&(o=c,function(){if(o){var l,c=o.dataset;if((r={tooltip:c.tooltip,position:c.tooltipPosition||"auto",zIndex:parseFloat(c.tooltipZindex)||1,enterDelay:parseFloat(c.tooltipEnterDelay)||0,exitDelay:parseFloat(c.tooltipExitDelay)||0,margin:parseFloat(c.tooltipMargin)||4,showDuration:parseFloat(c.tooltipShowDuration)||300,hideDuration:parseFloat(c.tooltipHideDuration)||200,transitionDistance:parseFloat(c.tooltipTransitionDistance)||10}).position=r.position.toLowerCase(),r.tooltip)s(),l='
'.concat(r.tooltip,"
"),a.insertAdjacentHTML("afterend",l),d(t=document.querySelector(".tooltip-box"),"zIndex",r.zIndex),function(){var i,e,n=window.innerWidth,a=h(o),l=h(t),c=a.left,p=a.top,u=l.width,s=l.height,m=a.width,w=a.height,g=r.position,v=m/2-u/2,D=w/2-s/2,x=r.margin,y=r.transitionDistance;"auto"===g&&(g=function(t){if(!t)return{};var o=t.getBoundingClientRect(),i=window.innerWidth,e=window.innerHeight,n=o.left,a=o.top,r=i-n-o.width,l=e-a-o.height;return{horizontal:n>r?"left":"right",vertical:a>l?"top":"bottom"}}(o).vertical),"top"===g?(p=p-s-x,c+=v):"right"===g?(p+=D,c=c+m+x):"left"===g?(p+=D,c=c-u-x):(p=p+w+x,c+=v),c<0?c=0:c+u>n&&(c=n-u),"top"===g?(i=p+y,e=c):"right"===g?(i=p,e=c-y):"left"===g?(i=p,e=c+y):(i=p-y,e=c);var T="translate3d(".concat(e,"px, ").concat(i,"px, 0)");d(t,"transform",T),f(t,"fromLeft",e),f(t,"fromTop",i),f(t,"top",p),f(t,"left",c),h(t)}(),clearTimeout(e),clearTimeout(n),i=setTimeout((function(){var o=m(t,"left"),i=m(t,"top"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)");d(t,"transitionDuration",r.showDuration+"ms"),d(t,"transform",e),d(t,"opacity",1)}),r.enterDelay)}}())}}function c(t){if(o){for(var i=t.relatedTarget;i;){if(i===o)return;i=i.parentNode}u()}}function p(){u()}function u(){(t||o)&&(clearTimeout(i),e=setTimeout((function(){if(t){var o=m(t,"fromLeft"),i=m(t,"fromTop"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)"),a=r.hideDuration;d(t,"transitionDuration",a+"ms"),d(t,"transform",e),d(t,"opacity",0),n=setTimeout((function(){s()}),a)}}),r.exitDelay),o=null)}function s(){t&&t.remove()}function d(t,o,i){t&&(t.style[o]=i)}function f(t,o,i){t&&(t.dataset[o]=i)}function m(t,o,i){var e=t?t.dataset[o]:"";return"number"===i?e=parseFloat(e)||0:"true"===e?e=!0:"false"===e&&(e=!1),e}function h(t){if(t){var o=t.getBoundingClientRect(),i=window.pageXOffset,e=window.pageYOffset;return{width:o.width,height:o.height,top:o.top+e,right:o.right+i,bottom:o.bottom+e,left:o.left+i}}}}(); \ No newline at end of file + */!function(){if(!window.tooltipComponentInitiated){window.tooltipComponentInitiated=!0;var t,o,i,e,n,a=document.querySelector("body"),r={};document.addEventListener("mouseover",l),document.addEventListener("mouseout",s),document.addEventListener("touchmove",p)}function l(l){if(!o){var s=l.target.closest("[data-tooltip]");s&&(o=s,function(){if(o){var l,s,p=o.dataset;if((r={tooltip:p.tooltip,position:p.tooltipPosition||"auto",zIndex:parseFloat(p.tooltipZIndex)||1,enterDelay:parseFloat(p.tooltipEnterDelay)||0,exitDelay:parseFloat(p.tooltipExitDelay)||0,margin:parseFloat(p.tooltipMargin)||4,showDuration:parseFloat(p.tooltipShowDuration)||300,hideDuration:parseFloat(p.tooltipHideDuration)||200,transitionDistance:parseFloat(p.tooltipTransitionDistance)||10,ellipsisOnly:w(p.tooltipEllipsisOnly)}).position=r.position.toLowerCase(),r.tooltip&&(!r.ellipsisOnly||(l=o)&&l.scrollWidth>l.offsetWidth))c(),s='
'.concat(r.tooltip,"
"),a.insertAdjacentHTML("afterend",s),f(t=document.querySelector(".tooltip-box"),"zIndex",r.zIndex),function(){var i,e,n=window.innerWidth,a=m(o),l=m(t),s=a.left,p=a.top,u=l.width,c=l.height,h=a.width,w=a.height,g=r.position,v=h/2-u/2,D=w/2-c/2,x=r.margin,y=r.transitionDistance;"auto"===g&&(g=function(t){if(!t)return{};var o=t.getBoundingClientRect(),i=window.innerWidth,e=window.innerHeight,n=o.left,a=o.top,r=i-n-o.width,l=e-a-o.height;return{horizontal:n>r?"left":"right",vertical:a>l?"top":"bottom"}}(o).vertical),"top"===g?(p=p-c-x,s+=v):"right"===g?(p+=D,s=s+h+x):"left"===g?(p+=D,s=s-u-x):(p=p+w+x,s+=v),s<0?s=0:s+u>n&&(s=n-u),"top"===g?(i=p+y,e=s):"right"===g?(i=p,e=s-y):"left"===g?(i=p,e=s+y):(i=p-y,e=s);var T="translate3d(".concat(e,"px, ").concat(i,"px, 0)");f(t,"transform",T),d(t,"fromLeft",e),d(t,"fromTop",i),d(t,"top",p),d(t,"left",s),m(t)}(),clearTimeout(e),clearTimeout(n),i=setTimeout((function(){var o=h(t,"left"),i=h(t,"top"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)");f(t,"transitionDuration",r.showDuration+"ms"),f(t,"transform",e),f(t,"opacity",1)}),r.enterDelay)}}())}}function s(t){if(o){for(var i=t.relatedTarget;i;){if(i===o)return;i=i.parentNode}u()}}function p(){u()}function u(){(t||o)&&(clearTimeout(i),e=setTimeout((function(){if(t){var o=h(t,"fromLeft"),i=h(t,"fromTop"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)"),a=r.hideDuration;f(t,"transitionDuration",a+"ms"),f(t,"transform",e),f(t,"opacity",0),n=setTimeout((function(){c()}),a)}}),r.exitDelay),o=null)}function c(){t&&t.remove()}function f(t,o,i){t&&(t.style[o]=i)}function d(t,o,i){t&&(t.dataset[o]=i)}function h(t,o,i){var e=t?t.dataset[o]:"";return"number"===i?e=parseFloat(e)||0:"true"===e?e=!0:"false"===e&&(e=!1),e}function m(t){if(t){var o=t.getBoundingClientRect(),i=window.pageXOffset,e=window.pageYOffset;return{width:o.width,height:o.height,top:o.top+e,right:o.right+i,bottom:o.bottom+e,left:o.left+i}}}function w(t){return!0===t||"true"===t}}(); \ No newline at end of file diff --git a/docs/assets/virtual-select.min.css b/docs/assets/virtual-select.min.css index e44a4a9..cf77d33 100644 --- a/docs/assets/virtual-select.min.css +++ b/docs/assets/virtual-select.min.css @@ -3,5 +3,5 @@ * https://sa-si-dev.github.io/virtual-select * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE) */ -.vscomp-ele{font-family:sans-serif;display:inline-block;width:100%;max-width:250px}.vscomp-wrapper{display:inline-flex;position:relative;width:100%;font-size:14px;color:#333;text-align:left}.vscomp-wrapper *,.vscomp-wrapper *::before,.vscomp-wrapper *::after{box-sizing:border-box}.vscomp-wrapper:focus{outline:none}.vscomp-toggle-button{display:flex;position:relative;align-items:center;width:100%;padding:7px 30px 7px 10px;border:1px solid #ddd;background-color:#fff;cursor:pointer}.vscomp-value{width:100%;height:20px;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vscomp-value-tag{white-space:nowrap}.vscomp-arrow{position:absolute;display:flex;top:0;right:0;width:30px;height:100%;align-items:center;justify-content:center}.vscomp-arrow::after{content:'';border:6px solid transparent;border-top-color:#111;margin-bottom:-6px}.vscomp-clear-button{position:absolute;display:none;top:50%;right:30px;width:24px;height:24px;justify-content:center;border-radius:50%;margin-top:-12px}.vscomp-clear-button::before,.vscomp-clear-button::after{content:'';position:absolute;width:2px;height:12px;top:50%;margin-top:-6px;background:#999}.vscomp-clear-button::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.vscomp-clear-button::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.vscomp-clear-button:hover{background:#ccc}.vscomp-clear-button:hover::before,.vscomp-clear-button:hover::after{background:#333}.vscomp-dropbox{position:absolute;top:calc(100% + 4px);left:0;width:100%;opacity:0;box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);background-color:#fff;z-index:1;-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}.vscomp-options-container{position:relative;max-height:210px;overflow:auto}.vscomp-option{display:flex;align-items:center;padding:10px 15px;height:40px;align-items:center;cursor:pointer}.vscomp-option.selected{background-color:#eee}.vscomp-option.focused{background-color:#ccc}.vscomp-option.disabled{opacity:0.5;cursor:default}.vscomp-option-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vscomp-search-container{display:flex;align-items:center;position:relative;height:40px;padding:0 5px 0 15px;border-bottom:1px solid #ddd}.vscomp-search-input{border:none;width:calc(100% - 30px);height:38px;padding:10px 0;font-size:15px}.vscomp-search-input:focus{outline:none}.vscomp-search-clear{display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:25px;color:#999;cursor:pointer;user-select:none;visibility:hidden}.vscomp-search-clear:hover{color:#333}.vscomp-no-options{display:none;text-align:center;padding:20px 10px}.vscomp-wrapper .checkbox-icon{display:inline-flex;position:relative;width:15px;height:15px;margin-right:10px}.vscomp-wrapper .checkbox-icon::after{content:'';width:100%;height:100%;border:2px solid #888;-webkit-transition-duration:0.2s;transition-duration:0.2s}.vscomp-wrapper .checkbox-icon.checked::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.position-top .vscomp-dropbox{top:auto;bottom:calc(100% + 4px);-webkit-transform:translate3d(0, 30px, 0);transform:translate3d(0, 30px, 0)}.vscomp-wrapper.selected .checkbox-icon::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.multiple .toggle-all-options{cursor:pointer}.vscomp-wrapper.multiple .vscomp-search-input{width:calc(100% - 55px)}.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.focused .vscomp-toggle-button,.vscomp-wrapper:focus .vscomp-toggle-button{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.vscomp-wrapper.opened .vscomp-dropbox{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.vscomp-wrapper.closed .vscomp-dropbox{display:none}.vscomp-wrapper:not(.has-value) .vscomp-value{opacity:0.5}.vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button{display:flex}.vscomp-wrapper.has-clear-button .vscomp-toggle-button{padding-right:54px}.vscomp-wrapper.has-no-options .vscomp-options-container{display:none}.vscomp-wrapper.has-no-options .vscomp-no-options{display:block}.vscomp-wrapper.has-search-value .vscomp-search-clear{visibility:visible} +.vscomp-ele{font-family:sans-serif;display:inline-block;width:100%;max-width:250px}.vscomp-wrapper{display:inline-flex;position:relative;width:100%;font-size:14px;color:#333;text-align:left}.vscomp-wrapper *,.vscomp-wrapper *::before,.vscomp-wrapper *::after{box-sizing:border-box}.vscomp-wrapper:focus{outline:none}.vscomp-toggle-button{display:flex;position:relative;align-items:center;width:100%;padding:7px 30px 7px 10px;border:1px solid #ddd;background-color:#fff;cursor:pointer}.vscomp-value{width:100%;height:20px;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vscomp-value-tag{white-space:nowrap}.vscomp-arrow{position:absolute;display:flex;top:0;right:0;width:30px;height:100%;align-items:center;justify-content:center}.vscomp-arrow::after{content:'';border:6px solid transparent;border-top-color:#111;margin-bottom:-6px}.vscomp-clear-button{position:absolute;display:none;top:50%;right:30px;width:24px;height:24px;justify-content:center;border-radius:50%;margin-top:-12px}.vscomp-clear-button::before,.vscomp-clear-button::after{content:'';position:absolute;width:2px;height:12px;top:50%;margin-top:-6px;background:#999}.vscomp-clear-button::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.vscomp-clear-button::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.vscomp-clear-button:hover{background:#ccc}.vscomp-clear-button:hover::before,.vscomp-clear-button:hover::after{background:#333}.vscomp-dropbox{position:absolute;top:calc(100% + 4px);left:0;width:100%;opacity:0;box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);background-color:#fff;z-index:1;-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}.vscomp-options-container{position:relative;max-height:210px;overflow:auto}.vscomp-option{display:flex;align-items:center;padding:10px 15px;height:40px;align-items:center;cursor:pointer}.vscomp-option.selected{background-color:#eee}.vscomp-option.focused{background-color:#ccc}.vscomp-option.disabled{opacity:0.5;cursor:default}.vscomp-option-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 25px)}.vscomp-search-container{display:flex;align-items:center;position:relative;height:40px;padding:0 5px 0 15px;border-bottom:1px solid #ddd}.vscomp-search-input{border:none;width:calc(100% - 30px);height:38px;padding:10px 0;font-size:15px}.vscomp-search-input:focus{outline:none}.vscomp-search-clear{display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:25px;color:#999;cursor:pointer;user-select:none;visibility:hidden}.vscomp-search-clear:hover{color:#333}.vscomp-no-options,.vscomp-no-search-results{display:none;text-align:center;padding:20px 10px}.vscomp-wrapper .checkbox-icon{display:inline-flex;position:relative;width:15px;height:15px;margin-right:10px}.vscomp-wrapper .checkbox-icon::after{content:'';display:inline-block;width:100%;height:100%;border:2px solid #888;-webkit-transition-duration:0.2s;transition-duration:0.2s}.vscomp-wrapper .checkbox-icon.checked::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.position-top .vscomp-dropbox{top:auto;bottom:calc(100% + 4px);-webkit-transform:translate3d(0, 30px, 0);transform:translate3d(0, 30px, 0)}.vscomp-wrapper.position-left .vscomp-dropbox{right:0;left:auto}.vscomp-wrapper.selected .checkbox-icon::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.multiple .toggle-all-options{cursor:pointer}.vscomp-wrapper.multiple .vscomp-search-input{width:calc(100% - 55px)}.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after{width:50%;border-color:#512DA8;border-left-color:transparent;border-top-color:transparent;-webkit-transform:rotate(45deg) translate(1px, -4px);transform:rotate(45deg) translate(1px, -4px)}.vscomp-wrapper.focused .vscomp-toggle-button,.vscomp-wrapper:focus .vscomp-toggle-button{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.vscomp-wrapper.opened .vscomp-dropbox{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.vscomp-wrapper.closed .vscomp-dropbox{display:none}.vscomp-wrapper:not(.has-value) .vscomp-value{opacity:0.5}.vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button{display:flex}.vscomp-wrapper.has-clear-button .vscomp-toggle-button{padding-right:54px}.vscomp-wrapper.has-no-options .vscomp-options-container,.vscomp-wrapper.has-no-search-results .vscomp-options-container{display:none}.vscomp-wrapper.has-no-options .vscomp-no-options{display:block}.vscomp-wrapper.has-no-search-results .vscomp-no-search-results{display:block}.vscomp-wrapper.has-search-value .vscomp-search-clear{visibility:visible} diff --git a/docs/assets/virtual-select.min.js b/docs/assets/virtual-select.min.js index 7666cf5..dd783aa 100644 --- a/docs/assets/virtual-select.min.js +++ b/docs/assets/virtual-select.min.js @@ -2,4 +2,4 @@ * Virtual Select 1.0 * https://sa-si-dev.github.io/virtual-select * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE) - */(()=>{"use strict";var t={657:(t,e,o)=>{function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t){return function(t){if(Array.isArray(t))return l(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||n(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){if(t){if("string"==typeof t)return l(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);return"Object"===o&&t.constructor&&(o=t.constructor.name),"Map"===o||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?l(t,e):void 0}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,i=new Array(e);o\n
\n
').concat(this.placeholder,'
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
').concat(this.noOptionsText,"
\n
\n ");this.$ele.innerHTML=o,this.$wrapper=this.$ele.querySelector(".vscomp-wrapper"),this.$toggleButton=this.$ele.querySelector(".vscomp-toggle-button"),this.$clearButton=this.$ele.querySelector(".vscomp-clear-button"),this.$dropbox=this.$ele.querySelector(".vscomp-dropbox"),this.$search=this.$ele.querySelector(".vscomp-search-wrapper"),this.$optionsContainer=this.$ele.querySelector(".vscomp-options-container"),this.$optionsList=this.$ele.querySelector(".vscomp-options-list"),this.$options=this.$ele.querySelector(".vscomp-options"),this.$valueText=this.$ele.querySelector(".vscomp-value"),this.addClass(this.$ele,"vscomp-ele"),this.renderSearch(),this.setOptionsHeight(),this.setVisibleOptions()}}},{key:"renderOptions",value:function(){var t=this,e="",o=this.labelKey,i=this.getVisibleOptions(),s="",n=this.getStyleText({height:this.optionHeight+"px"});this.multiple&&(s=''),i.forEach((function(i){var l=i[o],a="vscomp-option";i.isSelected&&(a+=" selected"),i.isFocused&&(a+=" focused"),i.isDisabled&&(a+=" disabled"),e+='
\n ").concat(s,'\n \n ').concat(l,"\n \n
")})),this.$options.innerHTML=e,this.toggleClass(this.$wrapper,"has-no-options",!i.length),this.setOptionsPosition(),this.moveFocusedOptionToView()}},{key:"renderSearch",value:function(){if(this.hasSearch){var t="";this.multiple&&(t='');var e='
\n '.concat(t,'\n \n ×\n
');this.$search.innerHTML=e,this.$searchInput=this.$ele.querySelector(".vscomp-search-input"),this.$searchClear=this.$ele.querySelector(".vscomp-search-clear"),this.$toggleAllOptions=this.$ele.querySelector(".toggle-all-options"),this.addEvent(this.$searchInput,"keyup change","onSearch"),this.addEvent(this.$searchClear,"click","onSearchClear"),this.addEvent(this.$toggleAllOptions,"click","onToggleAllOptions")}}},{key:"addEvents",value:function(){this.addEvent(document,"click","onDocumentClick"),this.addEvent(this.$wrapper,"keydown","onKeyDown"),this.addEvent(this.$toggleButton,"click","onToggleButtonClick"),this.addEvent(this.$clearButton,"click","onClearButtonClick"),this.addEvent(this.$optionsContainer,"scroll","onOptionsScroll"),this.addEvent(this.$options,"click","onOptionsClick"),this.addEvent(this.$options,"mouseover","onOptionsMouseOver"),this.addEvent(this.$options,"touchmove","onOptionsTouchMove")}},{key:"addEvent",value:function(t,e,o){var i=this;t&&(e=this.removeArrayEmpty(e.split(" "))).forEach((function(e){var s="".concat(o,"-").concat(e),n=i.events[s];n||(n=i[o].bind(i),i.events[s]=n),(t=i.getElements(t)).forEach((function(t){t.addEventListener(e,n)}))}))}},{key:"dispatchEvent",value:function(t,e){t&&(t=this.getElements(t)).forEach((function(t){t.dispatchEvent(new Event(e))}))}},{key:"onDocumentClick",value:function(e){t.closeAllDropbox(e.target.closest(".vscomp-wrapper"))}},{key:"onKeyDown",value:function(t){var e=t.which||t.keyCode,o=r[e];o&&this[o](t)}},{key:"onEnterPress",value:function(){this.isOpened()?this.selectFocusedOption():this.openDropbox()}},{key:"onEscPress",value:function(){this.isOpened()&&this.closeDropbox()}},{key:"onDownArrowPress",value:function(t){t.preventDefault(),this.isOpened()?this.focusOption("next"):this.openDropbox()}},{key:"onUpArrowPress",value:function(t){t.preventDefault(),this.isOpened()?this.focusOption("previous"):this.openDropbox()}},{key:"onToggleButtonClick",value:function(t){t.target.closest(".toggle-button-child")||this.toggleDropbox()}},{key:"onClearButtonClick",value:function(){this.reset()}},{key:"onOptionsScroll",value:function(){this.setVisibleOptions()}},{key:"onOptionsClick",value:function(t){this.selectOption(t.target.closest(".vscomp-option:not(.disabled)"))}},{key:"onOptionsMouseOver",value:function(t){var e=t.target.closest(".vscomp-option:not(.disabled)");e&&this.focusOption(null,e)}},{key:"onOptionsTouchMove",value:function(){this.removeOptionFocus()}},{key:"onSearch",value:function(t){t.stopPropagation(),this.setSearchValue(t.target.value,!0)}},{key:"onSearchClear",value:function(){this.setSearchValue(""),this.focusSearchInput()}},{key:"onToggleAllOptions",value:function(){this.toggleAllOptions()}},{key:"setMethods",value:function(){var e=this.$ele;e.virtualSelect=this,e.value=this.multiple?[]:"",e.reset=t.reset,e.setValue=t.setValueMethod,e.setOptions=t.setOptionsMethod,e.setDisabledOptions=t.setDisabledOptionsMethod}},{key:"setValueMethod",value:function(t,e){Array.isArray(t)||(t=[t]),t=t.map((function(t){return t||0==t?t.toString():""}));var o=[];this.options.forEach((function(e){-1===t.indexOf(e.value)||e.isDisabled?e.isSelected=!1:(e.isSelected=!0,o.push(e.value))})),this.multiple||(o=o[0]),this.setValue(o,!e),this.afterValueSet()}},{key:"setOptionsMethod",value:function(t){this.setOptions(t),this.setOptionsHeight(),this.setVisibleOptions(),this.reset()}},{key:"setDisabledOptionsMethod",value:function(t){this.setDisabledOptions(t,!0),this.setValueMethod(null),this.setVisibleOptions()}},{key:"setDisabledOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t=t.map((function(t){return t.toString()})),this.disabledOptions=t,e&&t.length&&this.options.forEach((function(e){return e.isDisabled=-1!==t.indexOf(e.value),e}))}},{key:"setOptions",value:function(t){t||(t=[]);var e=this.disabledOptions,o=e.length,i=this.valueKey,s=this.labelKey;this.visibleOptionsCount=t.length,this.options=t.map((function(t,n){var l=t[i].toString();return t.index=n,t.value=l,t.label=t[s],t.isVisible=!0,o&&(t.isDisabled=-1!==e.indexOf(l)),t}))}},{key:"setVisibleOptions",value:function(){var t=s(this.options),e=2*this.optionsCount,o=this.getVisibleStartIndex(),i=o+e-1,n=0;t=t.filter((function(t){var e=!1;return t.isVisible&&(e=n>=o&&n<=i,n++),e})),this.visibleOptions=t,this.renderOptions()}},{key:"setOptionsPosition",value:function(t){void 0===t&&(t=this.getVisibleStartIndex());var e=t*this.optionHeight;this.$options.style.transform="translate3d(0, ".concat(e,"px, 0)"),this.setData(this.$options,"top",e)}},{key:"setValue",value:function(t,e){t?Array.isArray(t)?this.selectedValues=s(t):this.selectedValues=[t]:this.selectedValues=[],this.$ele.value=this.multiple?this.selectedValues:this.selectedValues[0]||"",this.setValueText(),this.toggleClass(this.$wrapper,"has-value",this.isNotEmpty(this.selectedValues)),e&&this.dispatchEvent(this.$ele,"change")}},{key:"setValueText",value:function(){var t,e=[],o=[],i=this.selectedValues,s=this.maximumValuesToShow,l=0,a=function(t,e){var o;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(o=n(t))||e&&t&&"number"==typeof t.length){o&&(t=o);var i=0,s=function(){};return{s,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:s}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var l,a=!0,r=!1;return{s:function(){o=t[Symbol.iterator]()},n:function(){var t=o.next();return a=t.done,t},e:function(t){r=!0,l=t},f:function(){try{a||null==o.return||o.return()}finally{if(r)throw l}}}}(this.options);try{for(a.s();!(t=a.n()).done;){var r=t.value;if(l>s)break;var c=r.value;if(-1!==i.indexOf(c)){var u=r[this.labelKey];e.push(u),o.push(''.concat(u,"")),l++}}}catch(t){a.e(t)}finally{a.f()}var h=i.length-s;h>0&&o.push('+ '.concat(h," more...")),this.$valueText.innerHTML=e.join(", ")||this.placeholder,this.setData(this.$valueText,"tooltip",o.join(", "))}},{key:"setSearchValue",value:function(t,e){if(t!==this.searchValue){e||(this.$searchInput.value=t);var o=t.toLowerCase().trim(),i=0;this.searchValue=o,this.options.forEach((function(t){var e=-1!==t.label.toString().toLowerCase().indexOf(o);t.isVisible=e,e&&i++})),this.visibleOptionsCount=i,this.toggleClass(this.$wrapper,"has-search-value",t),this.scrollToTop(),this.setOptionsHeight(),this.setVisibleOptions()}}},{key:"setOptionProp",value:function(t,e,o){isNaN(t)||null===t||(this.options[t][e]=o)}},{key:"setOptionsHeight",value:function(){this.$optionsList.style.height=this.optionHeight*this.visibleOptionsCount+"px"}},{key:"setDropboxPosition",value:function(){if("auto"===this.position){var t=this.getMoreVisibleSides(this.$wrapper);this.toggleClass(this.$wrapper,"position-top","top"===t.vertical)}}},{key:"getVisibleOptions",value:function(){return this.visibleOptions||[]}},{key:"getValue",value:function(){return this.multiple?this.selectedValues:this.selectedValues[0]}},{key:"getFirstVisibleOptionIndex",value:function(){return Math.ceil(this.$optionsContainer.scrollTop/this.optionHeight)}},{key:"getVisibleStartIndex",value:function(){var t=this.getFirstVisibleOptionIndex()-this.halfOptionsCount;return t<0&&(t=0),t}},{key:"openDropbox",value:function(t){var e=this;this.setDropboxPosition(),this.removeClass(this.$wrapper,"closed"),setTimeout((function(){e.addClass(e.$wrapper,"opened"),t||e.addClass(e.$wrapper,"focused"),e.focusSearchInput()}),0)}},{key:"closeDropbox",value:function(t){var e=this,o=t?0:this.transitionDuration;setTimeout((function(){e.removeClass(e.$wrapper,"opened focused"),e.removeOptionFocus()}),0),setTimeout((function(){e.addClass(e.$wrapper,"closed")}),o)}},{key:"toggleDropbox",value:function(){this.isOpened()?this.closeDropbox():this.openDropbox()}},{key:"isOpened",value:function(){return this.hasClass(this.$wrapper,"opened")}},{key:"focusSearchInput",value:function(){var t=this.$searchInput;t&&t.focus()}},{key:"focusOption",value:function(t,e){var o,i=this.$dropbox.querySelector(".vscomp-option.focused");if(e)o=e;else if(i)o=this.getSibling(i,t);else{var s=this.getFirstVisibleOptionIndex();o=this.$dropbox.querySelector('.vscomp-option[data-index="'.concat(s,'"]')),this.hasClass(o,"disabled")&&(o=this.getSibling(o,"next"))}o&&o!==i&&(i&&this.removeClass(i,"focused"),this.addClass(o,"focused"),this.toggleFocusedProp(this.getData(o,"index"),!0),this.moveFocusedOptionToView(o))}},{key:"moveFocusedOptionToView",value:function(t){if(t||(t=this.$dropbox.querySelector(".vscomp-option.focused")),t){var e,o=this.$optionsContainer.getBoundingClientRect(),i=t.getBoundingClientRect(),s=o.top,n=o.bottom,l=o.height,a=i.top,r=i.bottom,c=i.height,u=t.offsetTop,h=this.getData(this.$options,"top","number");s>a?e=u+h:n1&&void 0!==arguments[1]&&arguments[1];this.focusedOptionIndex&&this.setOptionProp(this.focusedOptionIndex,"isFocused",!1),this.setOptionProp(t,"isFocused",e),this.focusedOptionIndex=t}},{key:"toggleSelectedProp",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setOptionProp(t,"isSelected",e)}},{key:"scrollToTop",value:function(){var t=!this.isOpened();t&&this.openDropbox(!0),this.$optionsContainer.scrollTop>0&&(this.$optionsContainer.scrollTop=0),t&&this.closeDropbox(!0)}},{key:"reset",value:function(){this.options.forEach((function(t){t.isSelected=!1})),this.setValue(null,!0),this.afterValueSet(!0)}},{key:"afterValueSet",value:function(t){this.scrollToTop(),this.toggleAllOptionsClass(!t&&void 0),this.setSearchValue(""),this.renderOptions()}},{key:"addClass",value:function(t,e){t&&(e=e.split(" "),this.getElements(t).forEach((function(t){var o;(o=t.classList).add.apply(o,s(e))})))}},{key:"removeClass",value:function(t,e){t&&(e=e.split(" "),this.getElements(t).forEach((function(t){var o;(o=t.classList).remove.apply(o,s(e))})))}},{key:"toggleClass",value:function(t,e,o){var i;if(t)return void 0!==o&&(o=Boolean(o)),this.getElements(t).forEach((function(t){i=t.classList.toggle(e,o)})),i}},{key:"hasClass",value:function(t,e){return!!t&&t.classList.contains(e)}},{key:"isEmpty",value:function(t){var e=!1;return t?Array.isArray(t)?0===t.length&&(e=!0):"object"===i(t)&&0===Object.keys(t).length&&(e=!0):e=!0,e}},{key:"isNotEmpty",value:function(t){return!this.isEmpty(t)}},{key:"setData",value:function(t,e,o){t&&(t.dataset[e]=o)}},{key:"getStyleText",value:function(t,e){var o="";for(var i in t)o+="".concat(i,": ").concat(t[i],";");return o&&!e&&(o='style="'.concat(o,'"')),o}},{key:"getElements",value:function(t){if(t)return void 0===t.length&&(t=[t]),t}},{key:"getData",value:function(t,e,o){if(t){var i=t?t.dataset[e]:"";return"number"===o?i=parseFloat(i)||0:"true"===i?i=!0:"false"===i&&(i=!1),i}}},{key:"removeItemFromArray",value:function(t,e,o){if(!Array.isArray(t)||!t.length||!e)return t;o&&(t=s(t));var i=t.indexOf(e);return-1!==i&&t.splice(i,1),t}},{key:"removeArrayEmpty",value:function(t){return Array.isArray(t)&&t.length?t.filter((function(t){return!!t})):[]}},{key:"getMoreVisibleSides",value:function(t){if(!t)return{};var e=t.getBoundingClientRect(),o=window.innerWidth,i=window.innerHeight,s=e.left,n=e.top;return{horizontal:s>o-s-e.width?"left":"right",vertical:n>i-n-e.height?"top":"bottom"}}},{key:"getSibling",value:function(t,e){var o="next"===e?"nextElementSibling":"previousElementSibling";do{t&&(t=t[o])}while(this.hasClass(t,"disabled"));return t}}])&&a(e.prototype,o),l&&a(e,l),t}();document.addEventListener("reset",c.resetForm),window.VirtualSelect=c}},e={};function o(i){if(e[i])return e[i].exports;var s=e[i]={exports:{}};return t[i](s,s.exports,o),s.exports}o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o(657)})(); \ No newline at end of file + */(()=>{"use strict";var t={657:(t,e,i)=>{function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t){return function(t){if(Array.isArray(t))return l(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||n(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){if(t){if("string"==typeof t)return l(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?l(t,e):void 0}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,s=new Array(e);i\n
\n
\n ").concat(this.placeholder,'\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
').concat(this.noOptionsText,'
\n
').concat(this.noSearchResultsText,"
\n
\n ");this.$ele.innerHTML=n,this.$wrapper=this.$ele.querySelector(".vscomp-wrapper"),this.$toggleButton=this.$ele.querySelector(".vscomp-toggle-button"),this.$clearButton=this.$ele.querySelector(".vscomp-clear-button"),this.$dropbox=this.$ele.querySelector(".vscomp-dropbox"),this.$search=this.$ele.querySelector(".vscomp-search-wrapper"),this.$optionsContainer=this.$ele.querySelector(".vscomp-options-container"),this.$optionsList=this.$ele.querySelector(".vscomp-options-list"),this.$options=this.$ele.querySelector(".vscomp-options"),this.$valueText=this.$ele.querySelector(".vscomp-value"),this.addClass(this.$ele,"vscomp-ele"),this.renderSearch(),this.setOptionsHeight(),this.setVisibleOptions()}}},{key:"renderOptions",value:function(){var t=this,e="",i=this.labelKey,s=(this.zIndex,this.tooltipEnterDelay,this.getVisibleOptions()),o="",n=this.getStyleText({height:this.optionHeight+"px"});this.multiple&&(o=''),s.forEach((function(s){var l=s[i],a="vscomp-option",r=t.getTooltipAttrText(l,!0);s.isSelected&&(a+=" selected"),s.isFocused&&(a+=" focused"),s.isDisabled&&(a+=" disabled"),e+='
\n ").concat(o,'\n \n ").concat(l,"\n \n
")})),this.$options.innerHTML=e;var l=!this.options.length,a=!l&&!s.length;this.toggleClass(this.$wrapper,"has-no-options",l),this.toggleClass(this.$wrapper,"has-no-search-results",a),this.setOptionsPosition(),this.moveFocusedOptionToView()}},{key:"renderSearch",value:function(){if(this.hasSearch){var t="";this.multiple&&(t='');var e='
\n '.concat(t,'\n \n ×\n
');this.$search.innerHTML=e,this.$searchInput=this.$ele.querySelector(".vscomp-search-input"),this.$searchClear=this.$ele.querySelector(".vscomp-search-clear"),this.$toggleAllOptions=this.$ele.querySelector(".toggle-all-options"),this.addEvent(this.$searchInput,"keyup change","onSearch"),this.addEvent(this.$searchClear,"click","onSearchClear"),this.addEvent(this.$toggleAllOptions,"click","onToggleAllOptions")}}},{key:"addEvents",value:function(){this.addEvent(document,"click","onDocumentClick"),this.addEvent(this.$wrapper,"keydown","onKeyDown"),this.addEvent(this.$toggleButton,"click","onToggleButtonClick"),this.addEvent(this.$clearButton,"click","onClearButtonClick"),this.addEvent(this.$optionsContainer,"scroll","onOptionsScroll"),this.addEvent(this.$options,"click","onOptionsClick"),this.addEvent(this.$options,"mouseover","onOptionsMouseOver"),this.addEvent(this.$options,"touchmove","onOptionsTouchMove")}},{key:"addEvent",value:function(t,e,i){var s=this;t&&(e=this.removeArrayEmpty(e.split(" "))).forEach((function(e){var o="".concat(i,"-").concat(e),n=s.events[o];n||(n=s[i].bind(s),s.events[o]=n),(t=s.getElements(t)).forEach((function(t){t.addEventListener(e,n)}))}))}},{key:"dispatchEvent",value:function(t,e){t&&(t=this.getElements(t)).forEach((function(t){t.dispatchEvent(new Event(e,{bubbles:!0}))}))}},{key:"onDocumentClick",value:function(e){t.closeAllDropbox(e.target.closest(".vscomp-wrapper"))}},{key:"onKeyDown",value:function(t){var e=t.which||t.keyCode,i=r[e];i&&this[i](t)}},{key:"onEnterPress",value:function(){this.isOpened()?this.selectFocusedOption():this.openDropbox()}},{key:"onEscPress",value:function(){this.isOpened()&&this.closeDropbox()}},{key:"onDownArrowPress",value:function(t){t.preventDefault(),this.isOpened()?this.focusOption("next"):this.openDropbox()}},{key:"onUpArrowPress",value:function(t){t.preventDefault(),this.isOpened()?this.focusOption("previous"):this.openDropbox()}},{key:"onToggleButtonClick",value:function(t){t.target.closest(".toggle-button-child")||this.toggleDropbox()}},{key:"onClearButtonClick",value:function(){this.reset()}},{key:"onOptionsScroll",value:function(){this.setVisibleOptions()}},{key:"onOptionsClick",value:function(t){this.selectOption(t.target.closest(".vscomp-option:not(.disabled)"))}},{key:"onOptionsMouseOver",value:function(t){var e=t.target.closest(".vscomp-option:not(.disabled)");e&&this.focusOption(null,e)}},{key:"onOptionsTouchMove",value:function(){this.removeOptionFocus()}},{key:"onSearch",value:function(t){t.stopPropagation(),this.setSearchValue(t.target.value,!0)}},{key:"onSearchClear",value:function(){this.setSearchValue(""),this.focusSearchInput()}},{key:"onToggleAllOptions",value:function(){this.toggleAllOptions()}},{key:"setMethods",value:function(){var e=this.$ele;e.virtualSelect=this,e.value=this.multiple?[]:"",e.reset=t.reset,e.setValue=t.setValueMethod,e.setOptions=t.setOptionsMethod,e.setDisabledOptions=t.setDisabledOptionsMethod,e.toggleSelectAll=t.toggleSelectAll,e.isAllSelected=t.isAllSelected}},{key:"setValueMethod",value:function(t,e){Array.isArray(t)||(t=[t]),t=t.map((function(t){return t||0==t?t.toString():""}));var i=[];this.options.forEach((function(e){-1===t.indexOf(e.value)||e.isDisabled?e.isSelected=!1:(e.isSelected=!0,i.push(e.value))})),this.multiple||(i=i[0]),this.setValue(i,!e),this.afterValueSet()}},{key:"setOptionsMethod",value:function(t){this.setOptions(t),this.setOptionsHeight(),this.setVisibleOptions(),this.reset()}},{key:"setDisabledOptionsMethod",value:function(t){this.setDisabledOptions(t,!0),this.setValueMethod(null),this.setVisibleOptions()}},{key:"setDisabledOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t=t.map((function(t){return t.toString()})),this.disabledOptions=t,e&&t.length&&this.options.forEach((function(e){return e.isDisabled=-1!==t.indexOf(e.value),e}))}},{key:"setOptions",value:function(t){t||(t=[]);var e=this.disabledOptions,i=e.length,s=this.valueKey,o=this.labelKey;this.visibleOptionsCount=t.length,this.options=t.map((function(t,n){var l=t[s].toString(),a={index:n,value:l,label:t[o],isVisible:!0};return i&&(a.isDisabled=-1!==e.indexOf(l)),a}))}},{key:"setVisibleOptions",value:function(){var t=o(this.options),e=2*this.optionsCount,i=this.getVisibleStartIndex(),s=i+e-1,n=0;t=t.filter((function(t){var e=!1;return t.isVisible&&(e=n>=i&&n<=s,t.visibleIndex=n,n++),e})),this.visibleOptions=t,this.renderOptions()}},{key:"setOptionsPosition",value:function(t){void 0===t&&(t=this.getVisibleStartIndex());var e=t*this.optionHeight;this.$options.style.transform="translate3d(0, ".concat(e,"px, 0)"),this.setData(this.$options,"top",e)}},{key:"setValue",value:function(t,e){t?Array.isArray(t)?this.selectedValues=o(t):this.selectedValues=[t]:this.selectedValues=[],this.$ele.value=this.multiple?this.selectedValues:this.selectedValues[0]||"",this.setValueText(),this.toggleClass(this.$wrapper,"has-value",this.isNotEmpty(this.selectedValues)),e&&this.dispatchEvent(this.$ele,"change")}},{key:"setValueText",value:function(){var t,e=[],i=[],s=this.selectedValues,o=this.maximumValuesToShow,l=0,a=function(t,e){var i;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(i=n(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var s=0,o=function(){};return{s:o,n:function(){return s>=t.length?{done:!0}:{done:!1,value:t[s++]}},e:function(t){throw t},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var l,a=!0,r=!1;return{s:function(){i=t[Symbol.iterator]()},n:function(){var t=i.next();return a=t.done,t},e:function(t){r=!0,l=t},f:function(){try{a||null==i.return||i.return()}finally{if(r)throw l}}}}(this.options);try{for(a.s();!(t=a.n()).done;){var r=t.value;if(l>o)break;var c=r.value;if(-1!==s.indexOf(c)){var h=r[this.labelKey];e.push(h),i.push(''.concat(h,"")),l++}}}catch(t){a.e(t)}finally{a.f()}var u=s.length-o;u>0&&i.push('+ '.concat(u," more...")),this.$valueText.innerHTML=e.join(", ")||this.placeholder,this.setData(this.$valueText,"tooltip",i.join(", "))}},{key:"setSearchValue",value:function(t,e){if(t!==this.searchValue){e||(this.$searchInput.value=t);var i=t.toLowerCase().trim(),s=0;this.searchValue=i,this.options.forEach((function(t){var e=-1!==t.label.toString().toLowerCase().indexOf(i);t.isVisible=e,e&&s++})),this.visibleOptionsCount=s,this.toggleClass(this.$wrapper,"has-search-value",t),this.scrollToTop(),this.setOptionsHeight(),this.setVisibleOptions()}}},{key:"setOptionProp",value:function(t,e,i){isNaN(t)||null===t||(this.options[t][e]=i)}},{key:"setOptionsHeight",value:function(){this.$optionsList.style.height=this.optionHeight*this.visibleOptionsCount+"px"}},{key:"setDropboxPosition",value:function(){if("auto"===this.position){var t=this.getMoreVisibleSides(this.$wrapper),e=!1;if(this.dropboxWidth){var i=this.$toggleButton.getBoundingClientRect(),s=window.innerWidth,o=parseFloat(this.dropboxWidth),n=i.left+o>s,l=o>i.right;n&&!l&&(e=!0)}this.toggleClass(this.$wrapper,"position-top","top"===t.vertical),this.toggleClass(this.$wrapper,"position-left",e)}}},{key:"getVisibleOptions",value:function(){return this.visibleOptions||[]}},{key:"getValue",value:function(){return this.multiple?this.selectedValues:this.selectedValues[0]}},{key:"getFirstVisibleOptionIndex",value:function(){return Math.ceil(this.$optionsContainer.scrollTop/this.optionHeight)}},{key:"getVisibleStartIndex",value:function(){var t=this.getFirstVisibleOptionIndex()-this.halfOptionsCount;return t<0&&(t=0),t}},{key:"getTooltipAttrText",value:function(t,e){var i={"data-tooltip":t||"","data-tooltip-enter-delay":this.tooltipEnterDelay,"data-tooltip-z-index":this.zIndex,"data-tooltip-ellipsis-only":e||!1};return this.getAttributesText(i)}},{key:"openDropbox",value:function(t){var e=this;this.setDropboxPosition(),this.removeClass(this.$wrapper,"closed"),setTimeout((function(){e.addClass(e.$wrapper,"opened"),t||(e.addClass(e.$wrapper,"focused"),e.focusSearchInput())}),0)}},{key:"closeDropbox",value:function(t){var e=this,i=t?0:this.transitionDuration;setTimeout((function(){e.removeClass(e.$wrapper,"opened focused"),e.removeOptionFocus()}),0),setTimeout((function(){e.addClass(e.$wrapper,"closed")}),i)}},{key:"toggleDropbox",value:function(){this.isOpened()?this.closeDropbox():this.openDropbox()}},{key:"isOpened",value:function(){return this.hasClass(this.$wrapper,"opened")}},{key:"focusSearchInput",value:function(){var t=this.$searchInput;t&&t.focus()}},{key:"focusOption",value:function(t,e){var i,s=this.$dropbox.querySelector(".vscomp-option.focused");if(e)i=e;else if(s)i=this.getSibling(s,t);else{var o=this.getFirstVisibleOptionIndex();i=this.$dropbox.querySelector('.vscomp-option[data-visible-index="'.concat(o,'"]')),this.hasClass(i,"disabled")&&(i=this.getSibling(i,"next"))}i&&i!==s&&(s&&this.removeClass(s,"focused"),this.addClass(i,"focused"),this.toggleFocusedProp(this.getData(i,"index"),!0),this.moveFocusedOptionToView(i))}},{key:"moveFocusedOptionToView",value:function(t){if(t||(t=this.$dropbox.querySelector(".vscomp-option.focused")),t){var e,i=this.$optionsContainer.getBoundingClientRect(),s=t.getBoundingClientRect(),o=i.top,n=i.bottom,l=i.height,a=s.top,r=s.bottom,c=s.height,h=t.offsetTop,u=this.getData(this.$options,"top","number");o>a?e=h+u:n1&&void 0!==arguments[1]&&arguments[1];this.focusedOptionIndex&&this.setOptionProp(this.focusedOptionIndex,"isFocused",!1),this.setOptionProp(t,"isFocused",e),this.focusedOptionIndex=t}},{key:"toggleSelectedProp",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setOptionProp(t,"isSelected",e)}},{key:"scrollToTop",value:function(){var t=!this.isOpened();t&&this.openDropbox(!0),this.$optionsContainer.scrollTop>0&&(this.$optionsContainer.scrollTop=0),t&&this.closeDropbox(!0)}},{key:"reset",value:function(){this.options.forEach((function(t){t.isSelected=!1})),this.setValue(null,!0),this.afterValueSet(!0)}},{key:"afterValueSet",value:function(t){this.scrollToTop(),this.toggleAllOptionsClass(!t&&void 0),this.setSearchValue(""),this.renderOptions()}},{key:"addClass",value:function(t,e){t&&(e=e.split(" "),this.getElements(t).forEach((function(t){var i;(i=t.classList).add.apply(i,o(e))})))}},{key:"removeClass",value:function(t,e){t&&(e=e.split(" "),this.getElements(t).forEach((function(t){var i;(i=t.classList).remove.apply(i,o(e))})))}},{key:"toggleClass",value:function(t,e,i){var s;if(t)return void 0!==i&&(i=Boolean(i)),this.getElements(t).forEach((function(t){s=t.classList.toggle(e,i)})),s}},{key:"hasClass",value:function(t,e){return!!t&&t.classList.contains(e)}},{key:"isEmpty",value:function(t){var e=!1;return t?Array.isArray(t)?0===t.length&&(e=!0):"object"===s(t)&&0===Object.keys(t).length&&(e=!0):e=!0,e}},{key:"isNotEmpty",value:function(t){return!this.isEmpty(t)}},{key:"setData",value:function(t,e,i){t&&(t.dataset[e]=i)}},{key:"getStyleText",value:function(t,e){var i="";for(var s in t)i+="".concat(s,": ").concat(t[s],";");return i&&!e&&(i='style="'.concat(i,'"')),i}},{key:"getElements",value:function(t){if(t)return void 0===t.length&&(t=[t]),t}},{key:"getData",value:function(t,e,i){if(t){var s=t?t.dataset[e]:"";return"number"===i?s=parseFloat(s)||0:"true"===s?s=!0:"false"===s&&(s=!1),s}}},{key:"removeItemFromArray",value:function(t,e,i){if(!Array.isArray(t)||!t.length||!e)return t;i&&(t=o(t));var s=t.indexOf(e);return-1!==s&&t.splice(s,1),t}},{key:"removeArrayEmpty",value:function(t){return Array.isArray(t)&&t.length?t.filter((function(t){return!!t})):[]}},{key:"getMoreVisibleSides",value:function(t){if(!t)return{};var e=t.getBoundingClientRect(),i=window.innerWidth,s=window.innerHeight,o=e.left,n=e.top;return{horizontal:o>i-o-e.width?"left":"right",vertical:n>s-n-e.height?"top":"bottom"}}},{key:"getSibling",value:function(t,e){var i="next"===e?"nextElementSibling":"previousElementSibling";do{t&&(t=t[i])}while(this.hasClass(t,"disabled"));return t}},{key:"getAttributesText",value:function(t){var e="";if(!t)return e;for(var i in t)e+=" ".concat(i,'="').concat(t[i],'" ');return e}}])&&a(e.prototype,i),l&&a(e,l),t}();document.addEventListener("reset",c.resetForm),window.VirtualSelect=c}},e={};function i(s){if(e[s])return e[s].exports;var o=e[s]={exports:{}};return t[s](o,o.exports,i),o.exports}i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i(657)})(); \ No newline at end of file diff --git a/docs/examples.md b/docs/examples.md index 95a891f..842184d 100644 --- a/docs/examples.md +++ b/docs/examples.md @@ -52,6 +52,29 @@ VirtualSelect.init({ }); ``` +## Preselect value + +
+ +```js +VirtualSelect.init({ + ... + selectedValue: 3, +}); +``` + +## Preselect multiple values + +
+ +```js +VirtualSelect.init({ + ... + multiple: true, + selectedValue: [3, 4], +}); +``` + ## Hide clear button
@@ -63,6 +86,17 @@ VirtualSelect.init({ }); ``` +## Custom width for dropbox + +
+ +```js +VirtualSelect.init({ + ... + dropboxWidth: '130px', +}); +``` + \ No newline at end of file diff --git a/docs/methods.md b/docs/methods.md index 25b91e4..4982fc3 100644 --- a/docs/methods.md +++ b/docs/methods.md @@ -11,8 +11,8 @@ $('#sample-select').val(); ### setValue() ```js -var value = 3; /* for single select */ -var value = [2, 3]; /* for multi-select */ +var value = 3; /** for single select */ +var value = [2, 3]; /** for multi-select */ document.querySelector('#sample-select').setValue(value); ``` @@ -41,4 +41,24 @@ document.querySelector('#sample-select').setOptions(options); var disabledOptions = [2, 6, 9]; document.querySelector('#sample-select').setDisabledOptions(disabledOptions); +``` + +### toggleSelectAll() + +Select / Deselect all options + +```js +/** select all options */ +document.querySelector('#sample-select').toggleSelectAll(true); + +/** deselect all options */ +document.querySelector('#sample-select').toggleSelectAll(false); +``` + +### isAllSelected() + +To check that if all options selected or not + +```js +document.querySelector('#sample-select').isAllSelected(); ``` \ No newline at end of file diff --git a/docs/properties.md b/docs/properties.md index 1e08aaa..e951aae 100644 --- a/docs/properties.md +++ b/docs/properties.md @@ -2,7 +2,7 @@ | Name | Type | Default value | Description | | --- | --- | --- | ---- | -| ele | String \| Element | null | DOM element to initialize plugin
String - #sample-select
Element - document.querySelector('#sample-select') | +| ele | String \| Element | | DOM element to initialize plugin
String - #sample-select
Element - document.querySelector('#sample-select') | | options | Array | [] | List of options
[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' }
...
] | | labelKey | String | label | Object key to use to get label from options array | | valueKey | String | value | Object key to use to get value from options array | @@ -14,4 +14,9 @@ | optionHeight | String | 40px | Height of each dropdown options | | position | String | auto | Position of dropbox (top, bottom, auto) | | placeholder | String | Select | Text to show when no options selected | -| noOptionsText | String | No results found | Text to show when no options to show | +| noOptionsText | String | No options found | Text to show when no options to show | +| noSearchResultsText | String | No results found | Text to show when no results on search | +| selectedValue | String \| Array | | Single value or array of values to select on init | +| silentInitialValueSet | Boolean | false | To avoid "change event" trigger on setting initial value | +| dropboxWidth | String | | Custom width for dropbox | +| zIndex | Number | 1 | CSS z-index value for dropbox | diff --git a/package-lock.json b/package-lock.json index de9b7a2..ee8f236 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1055,12 +1055,6 @@ "fastq": "^1.6.0" } }, - "@types/anymatch": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", - "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==", - "dev": true - }, "@types/eslint": { "version": "7.2.6", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz", @@ -1115,76 +1109,6 @@ "integrity": "sha512-SOIyrdADB4cq6eY1F+9iU48iIomFAPltu11LCvA9PKcyEwHadjCFzNVPotAR+oEJA0bCP4Xvvgy+vwu1ZjVh8g==", "dev": true }, - "@types/source-list-map": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", - "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==", - "dev": true - }, - "@types/tapable": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz", - "integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==", - "dev": true - }, - "@types/uglify-js": { - "version": "3.9.3", - "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.3.tgz", - "integrity": "sha512-KswB5C7Kwduwjj04Ykz+AjvPcfgv/37Za24O2EDzYNbwyzOo8+ydtvzUfZ5UMguiVu29Gx44l1A6VsPPcmYu9w==", - "dev": true, - "requires": { - "source-map": "^0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, - "@types/webpack": { - "version": "4.41.22", - "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.22.tgz", - "integrity": "sha512-JQDJK6pj8OMV9gWOnN1dcLCyU9Hzs6lux0wBO4lr1+gyEhIBR9U3FMrz12t2GPkg110XAxEAw2WHF6g7nZIbRQ==", - "dev": true, - "requires": { - "@types/anymatch": "*", - "@types/node": "*", - "@types/tapable": "*", - "@types/uglify-js": "*", - "@types/webpack-sources": "*", - "source-map": "^0.6.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, - "@types/webpack-sources": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-1.4.2.tgz", - "integrity": "sha512-77T++JyKow4BQB/m9O96n9d/UUHWLQHlcqXb9Vsf4F1+wKNrrlWNFPDLKNT92RJnCSL6CieTc+NDXtCVZswdTw==", - "dev": true, - "requires": { - "@types/node": "*", - "@types/source-list-map": "*", - "source-map": "^0.7.3" - }, - "dependencies": { - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true - } - } - }, "@webassemblyjs/ast": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz", @@ -1943,16 +1867,6 @@ "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", "dev": true }, - "clean-webpack-plugin": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz", - "integrity": "sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==", - "dev": true, - "requires": { - "@types/webpack": "^4.4.31", - "del": "^4.1.1" - } - }, "cliui": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", @@ -2371,21 +2285,6 @@ } } }, - "del": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz", - "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==", - "dev": true, - "requires": { - "@types/glob": "^7.1.1", - "globby": "^6.1.0", - "is-path-cwd": "^2.0.0", - "is-path-in-cwd": "^2.0.0", - "p-map": "^2.0.0", - "pify": "^4.0.1", - "rimraf": "^2.6.3" - } - }, "delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -3264,27 +3163,6 @@ "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", "dev": true }, - "globby": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", - "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", - "dev": true, - "requires": { - "array-union": "^1.0.1", - "glob": "^7.0.3", - "object-assign": "^4.0.1", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0" - }, - "dependencies": { - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true - } - } - }, "globule": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz", @@ -3681,24 +3559,6 @@ "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==", "dev": true }, - "is-path-in-cwd": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz", - "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==", - "dev": true, - "requires": { - "is-path-inside": "^2.1.0" - } - }, - "is-path-inside": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz", - "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==", - "dev": true, - "requires": { - "path-is-inside": "^1.0.2" - } - }, "is-plain-obj": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", @@ -4618,12 +4478,6 @@ "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true }, - "path-is-inside": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz", - "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=", - "dev": true - }, "path-key": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", diff --git a/package.json b/package.json index 5957944..989b8f5 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", "babel-loader": "^8.2.2", - "clean-webpack-plugin": "^3.0.0", "css-loader": "^4.2.2", "filemanager-webpack-plugin": "^3.0.0", "mini-css-extract-plugin": "^0.11.3", diff --git a/src/main.js b/src/main.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/sass/partials/virtual-select.scss b/src/sass/partials/virtual-select.scss index 142ab74..4f2ec95 100755 --- a/src/sass/partials/virtual-select.scss +++ b/src/sass/partials/virtual-select.scss @@ -151,6 +151,7 @@ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + width: calc(100% - #{$checkboxFullWidth}); } .vscomp-search-container { @@ -191,7 +192,7 @@ } } -.vscomp-no-options { +.vscomp-no-options, .vscomp-no-search-results { display: none; text-align: center; padding: 20px 10px; @@ -207,6 +208,7 @@ &::after { content: ''; + display: inline-block; width: 100%; height: 100%; border: 2px solid $checkboxColor; @@ -228,6 +230,13 @@ } } + &.position-left { + .vscomp-dropbox { + right: 0; + left: auto; + } + } + &.selected .checkbox-icon::after { width: 50%; border-color: $primaryColor; @@ -289,16 +298,24 @@ } } - &.has-no-options { + &.has-no-options, &.has-no-search-results { .vscomp-options-container { display: none; } - + } + + &.has-no-options { .vscomp-no-options { display: block; } } + &.has-no-search-results { + .vscomp-no-search-results { + display: block; + } + } + &.has-search-value { .vscomp-search-clear { visibility: visible; diff --git a/src/virtual-select.js b/src/virtual-select.js index 9ea97bb..abd4f64 100755 --- a/src/virtual-select.js +++ b/src/virtual-select.js @@ -22,8 +22,13 @@ export class VirtualSelect { * @property {string} [optionHeight=40px] - Height of each dropdown options * @property {string} [position=auto] - Position of dropbox (top, bottom, auto) * @property {string} [placeholder=Select] - Text to show when no options selected - * @property {string} [noOptionsText=No results found] - Text to show when no options to show + * @property {string} [noOptionsText=No options found] - Text to show when no options to show + * @property {string} [noSearchResultsText=No results found] - Text to show when no results on search * @property {array} [disabledOptions] - Options to disable (array of values) + * @property {(string|array)} [selectedValue] - Single value or array of values to select on init + * @property {boolean} [silentInitialValueSet=false] - To avoid "change event" trigger on setting initial value + * @property {string} [dropboxWidth] - Custom width for dropbox + * @property {number} [zIndex=1] - CSS z-index value for dropbox */ constructor(options) { try { @@ -34,9 +39,11 @@ export class VirtualSelect { optionHeight: '40px', multiple: false, hideClearButton: false, - noOptionsText: 'No results found', + noOptionsText: 'No options found', + noSearchResultsText: 'No results found', placeholder: 'Select', position: 'auto', + zIndex: 1, }; options = Object.assign(defaultOptions, options); @@ -50,14 +57,18 @@ export class VirtualSelect { this.hasSearch = options.search ? true : false; this.hideClearButton = options.hideClearButton ? true : false; this.noOptionsText = options.noOptionsText; + this.noSearchResultsText = options.noSearchResultsText; this.placeholder = options.placeholder; this.position = options.position; + this.dropboxWidth = options.dropboxWidth; + this.zIndex = options.zIndex; this.selectedValues = []; this.events = {}; - this.tooltipEnterDelay = 500; + this.tooltipEnterDelay = 200; this.maximumValuesToShow = 50; this.transitionDuration = 250; this.searchValue = ''; + this.isAllSelected = false; this.optionsHeight = this.optionsCount * this.optionHeight + 'px'; this.$ele = options.ele; @@ -70,6 +81,10 @@ export class VirtualSelect { this.render(); this.addEvents(); this.setMethods(); + + if (options.selectedValue) { + this.setValueMethod(options.selectedValue, options.silentInitialValueSet); + } } catch (e) { console.warn(`Couldn't initiate Virtual Select`); console.error(e); @@ -83,10 +98,20 @@ export class VirtualSelect { } let wrapperClasses = 'vscomp-wrapper closed'; + let valueTooltip = this.getTooltipAttrText('', true); + let clearButtonTooltip = this.getTooltipAttrText('Clear'); let optionsStyleText = this.getStyleText({ 'max-height': this.optionsHeight, }); + let dropboxStyle = { + 'z-index': this.zIndex, + }; + + if (this.dropboxWidth) { + dropboxStyle.width = this.dropboxWidth; + } + if (this.multiple) { wrapperClasses += ' multiple'; } @@ -101,11 +126,14 @@ export class VirtualSelect { let html = `
-
${this.placeholder}
+
+ ${this.placeholder} +
-
+
+
-
+
@@ -113,6 +141,7 @@ export class VirtualSelect {
${this.noOptionsText}
+
${this.noSearchResultsText}
`; @@ -136,6 +165,8 @@ export class VirtualSelect { renderOptions() { let html = ''; let labelKey = this.labelKey; + let zIndex = this.zIndex; + let tooltipEnterDelay = this.tooltipEnterDelay; let visibleOptions = this.getVisibleOptions(); let checkboxHtml = ''; let styleText = this.getStyleText({ @@ -149,6 +180,7 @@ export class VirtualSelect { visibleOptions.forEach((d) => { let optionLabel = d[labelKey]; let optionClasses = 'vscomp-option'; + let optionTooltip = this.getTooltipAttrText(optionLabel, true); if (d.isSelected) { optionClasses += ' selected'; @@ -162,16 +194,20 @@ export class VirtualSelect { optionClasses += ' disabled'; } - html += `
+ html += `
${checkboxHtml} - + ${optionLabel}
`; }); this.$options.innerHTML = html; - this.toggleClass(this.$wrapper, 'has-no-options', !visibleOptions.length); + let hasNoOptions = !this.options.length; + let hasNoSearchResults = !hasNoOptions && !visibleOptions.length; + + this.toggleClass(this.$wrapper, 'has-no-options', hasNoOptions); + this.toggleClass(this.$wrapper, 'has-no-search-results', hasNoSearchResults); this.setOptionsPosition(); this.moveFocusedOptionToView(); } @@ -248,7 +284,7 @@ export class VirtualSelect { $ele = this.getElements($ele); $ele.forEach((_this) => { - _this.dispatchEvent(new Event(eventName)); + _this.dispatchEvent(new Event(eventName, { bubbles: true })); }); } @@ -357,6 +393,8 @@ export class VirtualSelect { $ele.setValue = VirtualSelect.setValueMethod; $ele.setOptions = VirtualSelect.setOptionsMethod; $ele.setDisabledOptions = VirtualSelect.setDisabledOptionsMethod; + $ele.toggleSelectAll = VirtualSelect.toggleSelectAll; + $ele.isAllSelected = VirtualSelect.isAllSelected; } setValueMethod(value, silentChange) { @@ -428,16 +466,18 @@ export class VirtualSelect { this.options = options.map((d, i) => { let value = d[valueKey].toString(); - d.index = i; - d.value = value; - d.label = d[labelKey]; - d.isVisible = true; - + let option = { + index: i, + value, + label: d[labelKey], + isVisible: true, + }; + if (hasDisabledOptions) { - d.isDisabled = disabledOptions.indexOf(value) !== -1; + option.isDisabled = disabledOptions.indexOf(value) !== -1; } - return d; + return option; }); } @@ -453,6 +493,7 @@ export class VirtualSelect { if (d.isVisible) { inView = i >= startIndex && i <= endIndex; + d.visibleIndex = i; i++; } @@ -573,7 +614,23 @@ export class VirtualSelect { } let moreVisibleSides = this.getMoreVisibleSides(this.$wrapper); + let showOnLeft = false; + + /** check that is dropbox hidden on right edge - only if custom width given */ + if (this.dropboxWidth) { + let buttonCoords = this.$toggleButton.getBoundingClientRect(); + let viewportWidth = window.innerWidth; + let dropboxWidth = parseFloat(this.dropboxWidth); + let hiddenOnRight = buttonCoords.left + dropboxWidth > viewportWidth; + let hiddenOnLeft = dropboxWidth > buttonCoords.right; + + if (hiddenOnRight && !hiddenOnLeft) { + showOnLeft = true; + } + } + this.toggleClass(this.$wrapper, 'position-top', moreVisibleSides.vertical === 'top'); + this.toggleClass(this.$wrapper, 'position-left', showOnLeft); } /** set methods - end */ @@ -600,6 +657,17 @@ export class VirtualSelect { return startIndex; } + + getTooltipAttrText(text, ellipsisOnly) { + let data = { + 'data-tooltip': text || '', + 'data-tooltip-enter-delay': this.tooltipEnterDelay, + 'data-tooltip-z-index': this.zIndex, + 'data-tooltip-ellipsis-only': ellipsisOnly || false, + }; + + return this.getAttributesText(data); + } /** get methods - end */ openDropbox(isSilent) { @@ -611,9 +679,8 @@ export class VirtualSelect { if (!isSilent) { this.addClass(this.$wrapper, 'focused'); + this.focusSearchInput(); } - - this.focusSearchInput(); }, 0); } @@ -659,7 +726,7 @@ export class VirtualSelect { } else if (!$focusedEle) { /* if no element on focus choose first visible one */ let firstVisibleOptionIndex = this.getFirstVisibleOptionIndex(); - $newFocusedEle = this.$dropbox.querySelector(`.vscomp-option[data-index="${firstVisibleOptionIndex}"]`); + $newFocusedEle = this.$dropbox.querySelector(`.vscomp-option[data-visible-index="${firstVisibleOptionIndex}"]`); if (this.hasClass($newFocusedEle, 'disabled')) { $newFocusedEle = this.getSibling($newFocusedEle, 'next'); @@ -731,7 +798,9 @@ export class VirtualSelect { let isAdding = !this.hasClass($ele, 'selected'); + /** on selecting same value in single select */ if (!isAdding && !this.multiple) { + this.closeDropbox(); return; } @@ -773,6 +842,10 @@ export class VirtualSelect { } toggleAllOptions(isSelected) { + if (!this.multiple) { + return; + } + if (typeof isSelected !== 'boolean') { isSelected = !this.hasClass(this.$toggleAllOptions, 'checked'); } @@ -808,6 +881,7 @@ export class VirtualSelect { } this.toggleClass(this.$toggleAllOptions, 'checked', isAllSelected); + this.isAllSelected = isAllSelected; } toggleFocusedProp(index, isFocused = false) { @@ -1042,6 +1116,20 @@ export class VirtualSelect { return $ele; } + + getAttributesText(data) { + let html = ''; + + if (!data) { + return html; + } + + for (let k in data) { + html += ` ${k}="${data[k]}" `; + } + + return html; + } /** helper methods - end */ /** static methods - start */ @@ -1113,6 +1201,14 @@ export class VirtualSelect { static setDisabledOptionsMethod(options) { this.virtualSelect.setDisabledOptionsMethod(options); } + + static toggleSelectAll(isSelected) { + this.virtualSelect.toggleAllOptions(isSelected); + } + + static isAllSelected() { + return this.virtualSelect.isAllSelected; + } /** static methods - start */ } diff --git a/static/tooltip.min.js b/static/tooltip.min.js index d9edfb4..3dee33e 100644 --- a/static/tooltip.min.js +++ b/static/tooltip.min.js @@ -2,4 +2,4 @@ * Tooltip 1.0 * https://sa-si-dev.github.io/tooltip * Licensed under MIT (https://github.com/sa-si-dev/tooltip/blob/master/LICENSE) - */!function(){if(!window.tooltipComponentInitiated){window.tooltipComponentInitiated=!0;var t,o,i,e,n,a=document.querySelector("body"),r={};document.addEventListener("mouseover",l),document.addEventListener("mouseout",c),document.addEventListener("touchmove",p)}function l(l){if(!o){var c=l.target.closest("[data-tooltip]");c&&(o=c,function(){if(o){var l,c=o.dataset;if((r={tooltip:c.tooltip,position:c.tooltipPosition||"auto",zIndex:parseFloat(c.tooltipZindex)||1,enterDelay:parseFloat(c.tooltipEnterDelay)||0,exitDelay:parseFloat(c.tooltipExitDelay)||0,margin:parseFloat(c.tooltipMargin)||4,showDuration:parseFloat(c.tooltipShowDuration)||300,hideDuration:parseFloat(c.tooltipHideDuration)||200,transitionDistance:parseFloat(c.tooltipTransitionDistance)||10}).position=r.position.toLowerCase(),r.tooltip)s(),l='
'.concat(r.tooltip,"
"),a.insertAdjacentHTML("afterend",l),d(t=document.querySelector(".tooltip-box"),"zIndex",r.zIndex),function(){var i,e,n=window.innerWidth,a=h(o),l=h(t),c=a.left,p=a.top,u=l.width,s=l.height,m=a.width,w=a.height,g=r.position,v=m/2-u/2,D=w/2-s/2,x=r.margin,y=r.transitionDistance;"auto"===g&&(g=function(t){if(!t)return{};var o=t.getBoundingClientRect(),i=window.innerWidth,e=window.innerHeight,n=o.left,a=o.top,r=i-n-o.width,l=e-a-o.height;return{horizontal:n>r?"left":"right",vertical:a>l?"top":"bottom"}}(o).vertical),"top"===g?(p=p-s-x,c+=v):"right"===g?(p+=D,c=c+m+x):"left"===g?(p+=D,c=c-u-x):(p=p+w+x,c+=v),c<0?c=0:c+u>n&&(c=n-u),"top"===g?(i=p+y,e=c):"right"===g?(i=p,e=c-y):"left"===g?(i=p,e=c+y):(i=p-y,e=c);var T="translate3d(".concat(e,"px, ").concat(i,"px, 0)");d(t,"transform",T),f(t,"fromLeft",e),f(t,"fromTop",i),f(t,"top",p),f(t,"left",c),h(t)}(),clearTimeout(e),clearTimeout(n),i=setTimeout((function(){var o=m(t,"left"),i=m(t,"top"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)");d(t,"transitionDuration",r.showDuration+"ms"),d(t,"transform",e),d(t,"opacity",1)}),r.enterDelay)}}())}}function c(t){if(o){for(var i=t.relatedTarget;i;){if(i===o)return;i=i.parentNode}u()}}function p(){u()}function u(){(t||o)&&(clearTimeout(i),e=setTimeout((function(){if(t){var o=m(t,"fromLeft"),i=m(t,"fromTop"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)"),a=r.hideDuration;d(t,"transitionDuration",a+"ms"),d(t,"transform",e),d(t,"opacity",0),n=setTimeout((function(){s()}),a)}}),r.exitDelay),o=null)}function s(){t&&t.remove()}function d(t,o,i){t&&(t.style[o]=i)}function f(t,o,i){t&&(t.dataset[o]=i)}function m(t,o,i){var e=t?t.dataset[o]:"";return"number"===i?e=parseFloat(e)||0:"true"===e?e=!0:"false"===e&&(e=!1),e}function h(t){if(t){var o=t.getBoundingClientRect(),i=window.pageXOffset,e=window.pageYOffset;return{width:o.width,height:o.height,top:o.top+e,right:o.right+i,bottom:o.bottom+e,left:o.left+i}}}}(); \ No newline at end of file + */!function(){if(!window.tooltipComponentInitiated){window.tooltipComponentInitiated=!0;var t,o,i,e,n,a=document.querySelector("body"),r={};document.addEventListener("mouseover",l),document.addEventListener("mouseout",s),document.addEventListener("touchmove",p)}function l(l){if(!o){var s=l.target.closest("[data-tooltip]");s&&(o=s,function(){if(o){var l,s,p=o.dataset;if((r={tooltip:p.tooltip,position:p.tooltipPosition||"auto",zIndex:parseFloat(p.tooltipZIndex)||1,enterDelay:parseFloat(p.tooltipEnterDelay)||0,exitDelay:parseFloat(p.tooltipExitDelay)||0,margin:parseFloat(p.tooltipMargin)||4,showDuration:parseFloat(p.tooltipShowDuration)||300,hideDuration:parseFloat(p.tooltipHideDuration)||200,transitionDistance:parseFloat(p.tooltipTransitionDistance)||10,ellipsisOnly:w(p.tooltipEllipsisOnly)}).position=r.position.toLowerCase(),r.tooltip&&(!r.ellipsisOnly||(l=o)&&l.scrollWidth>l.offsetWidth))c(),s='
'.concat(r.tooltip,"
"),a.insertAdjacentHTML("afterend",s),f(t=document.querySelector(".tooltip-box"),"zIndex",r.zIndex),function(){var i,e,n=window.innerWidth,a=m(o),l=m(t),s=a.left,p=a.top,u=l.width,c=l.height,h=a.width,w=a.height,g=r.position,v=h/2-u/2,D=w/2-c/2,x=r.margin,y=r.transitionDistance;"auto"===g&&(g=function(t){if(!t)return{};var o=t.getBoundingClientRect(),i=window.innerWidth,e=window.innerHeight,n=o.left,a=o.top,r=i-n-o.width,l=e-a-o.height;return{horizontal:n>r?"left":"right",vertical:a>l?"top":"bottom"}}(o).vertical),"top"===g?(p=p-c-x,s+=v):"right"===g?(p+=D,s=s+h+x):"left"===g?(p+=D,s=s-u-x):(p=p+w+x,s+=v),s<0?s=0:s+u>n&&(s=n-u),"top"===g?(i=p+y,e=s):"right"===g?(i=p,e=s-y):"left"===g?(i=p,e=s+y):(i=p-y,e=s);var T="translate3d(".concat(e,"px, ").concat(i,"px, 0)");f(t,"transform",T),d(t,"fromLeft",e),d(t,"fromTop",i),d(t,"top",p),d(t,"left",s),m(t)}(),clearTimeout(e),clearTimeout(n),i=setTimeout((function(){var o=h(t,"left"),i=h(t,"top"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)");f(t,"transitionDuration",r.showDuration+"ms"),f(t,"transform",e),f(t,"opacity",1)}),r.enterDelay)}}())}}function s(t){if(o){for(var i=t.relatedTarget;i;){if(i===o)return;i=i.parentNode}u()}}function p(){u()}function u(){(t||o)&&(clearTimeout(i),e=setTimeout((function(){if(t){var o=h(t,"fromLeft"),i=h(t,"fromTop"),e="translate3d(".concat(o,"px, ").concat(i,"px, 0)"),a=r.hideDuration;f(t,"transitionDuration",a+"ms"),f(t,"transform",e),f(t,"opacity",0),n=setTimeout((function(){c()}),a)}}),r.exitDelay),o=null)}function c(){t&&t.remove()}function f(t,o,i){t&&(t.style[o]=i)}function d(t,o,i){t&&(t.dataset[o]=i)}function h(t,o,i){var e=t?t.dataset[o]:"";return"number"===i?e=parseFloat(e)||0:"true"===e?e=!0:"false"===e&&(e=!1),e}function m(t){if(t){var o=t.getBoundingClientRect(),i=window.pageXOffset,e=window.pageYOffset;return{width:o.width,height:o.height,top:o.top+e,right:o.right+i,bottom:o.bottom+e,left:o.left+i}}}function w(t){return!0===t||"true"===t}}(); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 67617de..08dba61 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,6 @@ const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const FileManagerPlugin = require('filemanager-webpack-plugin'); @@ -26,16 +25,19 @@ module.exports = (env, options) => { filename: 'virtual-select.min.css', }), - new CleanWebpackPlugin({ - protectWebpackAssets: false, - cleanAfterEveryBuildPatterns: ['main.min.js', 'styles.min.js'], - }), - new webpack.BannerPlugin(banner), new FileManagerPlugin({ events: { + onStart: { + delete: [ + 'dist', + ] + }, onEnd: { + delete: [ + 'dist/styles.min.js', + ], copy: [ { source: 'static', destination: 'dist' }, { source: 'static', destination: 'docs/assets' },