UNPKG

vue-multiselect-items

Version:

![alt text](https://github.com/imrancse94/vue-multiselect-items/blob/main/multiselect.gif?raw=true)

1 lines 14.2 kB
var VueMultiselectItems=function(){"use strict";function e(e,c){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var c=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==c)return;var a,o,r=[],i=!0,n=!1;try{for(c=c.call(e);!(i=(a=c.next()).done)&&(r.push(a.value),!t||r.length!==t);i=!0);}catch(e){n=!0,o=e}finally{try{i||null==c.return||c.return()}finally{if(n)throw o}}return r}(e,c)||function(e,c){if(!e)return;if("string"==typeof e)return t(e,c);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return t(e,c)}(e,c)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var c=0,a=new Array(t);c<t;c++)a[c]=e[c];return a}var c={props:{title:{type:String,required:!0},placeholder:{type:String},data:{default:{},required:!0},value:{required:!0},label:{type:String,required:!0},errors:{type:String}},data:function(){return{search:"",checkedFilters:[],allSelected:!1,selectAllText:"Select All",activeTrigger:!1,dropdown:!1,showLoader:!1,showdropdown:""}},computed:{filteredList:function(){var e=this;return this.data.filter((function(t){return t.name.toLowerCase().includes(e.search.toLowerCase())}))}},methods:{updateInput:function(e){var t=e.target.value;e.target.checked?this.addValue(t):this.removeValue(t),this.$emit("input",this.checkedFilters)},selectAll:function(){var e=this;this.checkedFilters=[],"Select All"==this.selectAllText&&this.data.filter((function(t){e.checkedFilters.push(t.id)})),this.selectAllText="Select All"==this.selectAllText?"Clear All":"Select All"},showDropdown:function(){0==this.dropdown?(this.dropdown=!0,this.activeTrigger=!0,this.showdropdown="showdropdown"):(this.dropdown=!1,this.activeTrigger=!1,this.showdropdown="")},close:function(e){this.$refs.multi_select_area.contains(e.target)||(this.dropdown=!1,this.activeTrigger=!1,this.showdropdown="")},removeValue:function(e){this.checkedFilters.splice(this.checkedFilters.indexOf(e),1)},addValue:function(e){this.checkedFilters.push(e)}},mounted:function(){this.checkedFilters=this.value,document.addEventListener("click",this.close)},beforeDestroy:function(){document.removeEventListener("click",this.close)}};function a(e,t,c,a,o,r,i,n,s,l){"boolean"!=typeof i&&(s=n,n=i,i=!1);const d="function"==typeof c?c.options:c;let p;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),a&&(d._scopeId=a),r?(p=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},d._ssrRegister=p):t&&(p=i?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,n(e))}),p)if(d.functional){const e=d.render;d.render=function(t,c){return p.call(c),e(t,c)}}else{const e=d.beforeCreate;d.beforeCreate=e?[].concat(e,p):[p]}return c}const o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(e){return(e,t)=>function(e,t){const c=o?t.media||"default":e,a=n[c]||(n[c]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.ids.add(e);let c=t.source;if(t.map&&(c+="\n/*# sourceURL="+t.map.sources[0]+" */",c+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",t.media&&a.element.setAttribute("media",t.media),void 0===i&&(i=document.head||document.getElementsByTagName("head")[0]),i.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(c),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{const e=a.ids.size-1,t=document.createTextNode(c),o=a.element.childNodes;o[e]&&a.element.removeChild(o[e]),o.length?a.element.insertBefore(t,o[e]):a.element.appendChild(t)}}}(e,t)}let i;const n={};var s=a({render:function(){var e=this,t=this,c=t.$createElement,a=t._self._c||c;return a("div",{ref:"multi_select_area"},[a("label",{attrs:{for:""}},[t._v(t._s(t.label))]),t._v(" "),a("div",{staticClass:"checkbox-select"},[a("div",{staticClass:"checkbox-select__trigger form-control",class:{isActive:t.activeTrigger,"is-invalid":t.errors},on:{click:function(e){return e.preventDefault(),t.showDropdown.apply(null,arguments)}}},[a("span",{staticClass:"checkbox-select__title"},[t._v(t._s(t.checkedFilters.length>0&&Object.values(this.data).some((function(t){return e.checkedFilters.some((function(e){return e==t.id}))}))?t.checkedFilters.length+" Selected":t.title))]),t._v(" "),a("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 129 129"}},[a("path",{attrs:{d:"M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"}})])]),t._v(" "),t.errors?a("div",{staticClass:"invalid-feedback"},[t._v("\n "+t._s(t.errors)+"\n ")]):t._e(),t._v(" "),0===Object.keys(t.data).length?a("div",{staticClass:"checkbox-select__dropdown pb-0 rounded-0",class:{activeSearch:t.showLoader,showdropdown:t.showdropdown},attrs:{id:"dropdown"}},[a("p",{staticClass:"text-center text-bold text-gray mt-2"},[t._v("No data found")])]):t._e(),t._v(" "),Object.keys(t.data).length>0?a("div",{staticClass:"checkbox-select__dropdown",class:{activeSearch:t.showLoader,showdropdown:t.showdropdown},attrs:{id:"dropdown"}},[a("div",{staticClass:"checkbox-select__search-wrapp"},[a("input",{directives:[{name:"model",rawName:"v-model",value:t.search,expression:"search"}],attrs:{type:"text",placeholder:t.placeholder},domProps:{value:t.search},on:{focus:function(e){t.showLoader=!1},blur:function(e){t.showLoader=!1},input:function(e){e.target.composing||(t.search=e.target.value)}}})]),t._v(" "),a("div",{staticClass:"checkbox-select__col"},[a("div",{staticClass:"checkbox-select__select-all"},[a("label",{attrs:{for:"selectAll"}},[t._v(t._s(t.selectAllText))]),t._v(" "),a("input",{directives:[{name:"model",rawName:"v-model",value:t.allSelected,expression:"allSelected"}],attrs:{type:"checkbox",id:"selectAll"},domProps:{checked:Array.isArray(t.allSelected)?t._i(t.allSelected,null)>-1:t.allSelected},on:{click:t.selectAll,change:function(e){var c=t.allSelected,a=e.target,o=!!a.checked;if(Array.isArray(c)){var r=t._i(c,null);a.checked?r<0&&(t.allSelected=c.concat([null])):r>-1&&(t.allSelected=c.slice(0,r).concat(c.slice(r+1)))}else t.allSelected=o}}})]),t._v(" "),a("div",{staticClass:"checkbox-select__info"},[t._v("\n "+t._s(t.checkedFilters.length)+" SELECTED\n ")])]),t._v(" "),a("ul",{staticClass:"checkbox-select__filters-wrapp",attrs:{id:"customScroll","data-simplebar-auto-hide":"false"}},t._l(t.filteredList,(function(e,c){return a("li",{key:c},[a("div",{staticClass:"checkbox-select__check-wrapp"},[a("input",{directives:[{name:"model",rawName:"v-model",value:t.checkedFilters,expression:"checkedFilters"}],staticClass:"conditions-check",attrs:{id:c,type:"checkbox"},domProps:{value:e.id,checked:Array.isArray(t.checkedFilters)?t._i(t.checkedFilters,e.id)>-1:t.checkedFilters},on:{click:t.updateInput,change:function(c){var a=t.checkedFilters,o=c.target,r=!!o.checked;if(Array.isArray(a)){var i=e.id,n=t._i(a,i);o.checked?n<0&&(t.checkedFilters=a.concat([i])):n>-1&&(t.checkedFilters=a.slice(0,n).concat(a.slice(n+1)))}else t.checkedFilters=r}}}),t._v(" "),a("label",{attrs:{for:c}},[t._v(t._s(e.name))])])])})),0)]):t._e()])])},staticRenderFns:[]},(function(e){e&&e("data-v-126c1407_0",{source:'.checkbox-select .form-control[data-v-126c1407]{width:100%;height:calc(2.25rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;box-shadow:inset 0 0 0 transparent;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.checkbox-select .invalid-feedback[data-v-126c1407]{display:none;width:100%;margin-top:.25rem;font-size:16px!important;color:#dc3545}.checkbox-select .is-invalid~.invalid-feedback[data-v-126c1407]{display:block}.checkbox-select .showdropdown[data-v-126c1407]{visibility:inherit;opacity:1;transform:matrix(1,0,0,1,0,0)}.checkbox-select ul[data-v-126c1407]{margin:0;padding:0}.checkbox-select ul li[data-v-126c1407]{list-style:none}.checkbox-select .checkbox-select__search-wrapp input[data-v-126c1407]{border:none;padding:10px}.checkbox-select input[data-v-126c1407],.checkbox-select textarea[data-v-126c1407]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}.checkbox-select[data-v-126c1407]{position:relative;width:100%}@media only screen and (max-width:600px){.checkbox-select[data-v-126c1407]{margin:0 auto 0}}.checkbox-select__trigger[data-v-126c1407]{border:1px solid #ced4da;background:#fff;position:relative;z-index:1;display:flex;align-items:center;cursor:pointer;padding:0 10px;transition:all .4s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:4px 4px 4px 4px}@media only screen and (max-width:600px){.checkbox-select__trigger[data-v-126c1407]{padding:0 15px;height:36px}}.checkbox-select__trigger.isActive[data-v-126c1407]{border-radius:4px 4px 4px 4px;background:#f2f2f2}.checkbox-select__trigger.isActive svg[data-v-126c1407]{transform:rotate(-180deg)}.checkbox-select__trigger[data-v-126c1407]:hover{background:#f4f4f4}.checkbox-select__trigger svg[data-v-126c1407]{width:15px;stroke:4px;transition:all .4s ease}@media only screen and (max-width:600px){.checkbox-select__trigger svg[data-v-126c1407]{width:15px}}.checkbox-select__title[data-v-126c1407]{flex:1;padding:7px;letter-spacing:1px;padding-left:0}.checkbox-select__dropdown[data-v-126c1407]{opacity:0;visibility:hidden;background:#fff;position:absolute;left:0;right:0;box-shadow:0 12px 15px 6px rgba(0,0,0,.1);border-radius:0 0 8px 8px;overflow:hidden}.checkbox-select__dropdown[data-v-126c1407]:after,.checkbox-select__dropdown[data-v-126c1407]:before{position:absolute;content:"";top:0;display:block;height:4px;z-index:1}.checkbox-select__dropdown[data-v-126c1407]:after{opacity:0;background:#000;left:-200px;width:200px;background-color:#2980b9;transition:opacity .3s ease;animation:load-data-v-126c1407 1.8s linear infinite;background:linear-gradient(135deg,#8f24ed 20%,#8f24ed 20%,#8f24ed 22%,#8f24ed 25%,#107cb3 100%)}.checkbox-select__dropdown[data-v-126c1407]:before{width:100%}.checkbox-select__dropdown.activeSearch[data-v-126c1407]:after{opacity:1}.checkbox-select__dropdown .simplebar-scrollbar[data-v-126c1407]{width:3px;right:1px}.checkbox-select__search-wrapp[data-v-126c1407]{padding:10px 25px 5px}@media only screen and (max-width:600px){.checkbox-select__search-wrapp[data-v-126c1407]{padding:10px 15px 5px}}.checkbox-select__search-wrapp input[data-v-126c1407]{width:100%;height:36px;border:none;font-size:16px;font-family:"Roboto Slab",serif;background:0 0}.checkbox-select__search-wrapp[data-v-126c1407] ::-webkit-input-placeholder{color:#b8b8b8;opacity:1}.checkbox-select__search-wrapp[data-v-126c1407] ::-moz-placeholder{color:#b8b8b8;opacity:1}.checkbox-select__search-wrapp[data-v-126c1407] :-ms-input-placeholder{color:#b8b8b8;opacity:1}.checkbox-select__search-wrapp[data-v-126c1407] :-moz-placeholder{color:#b8b8b8;opacity:1}.checkbox-select__col[data-v-126c1407]{display:flex;font-size:12px;padding:0 25px;justify-content:space-between;text-transform:uppercase;margin-bottom:10px}@media only screen and (max-width:600px){.checkbox-select__col[data-v-126c1407]{padding:0 15px}}.checkbox-select__select-all label[data-v-126c1407]{cursor:pointer}.checkbox-select__select-all input[data-v-126c1407]{display:none}.checkbox-select__filters-wrapp[data-v-126c1407]{margin-top:20px;height:161px;overflow-y:auto;margin-bottom:15px!important}.checkbox-select__check-wrapp[data-v-126c1407]{position:relative;padding:0 25px;margin-bottom:5px}@media only screen and (max-width:600px){.checkbox-select__check-wrapp[data-v-126c1407]{padding:0 15px}}.checkbox-select__check-wrapp input[type=checkbox][data-v-126c1407]{display:none}.checkbox-select__check-wrapp input[type=checkbox]+label[data-v-126c1407]{position:relative;cursor:pointer;font-size:16px;line-height:22px;padding-left:30px;display:inline-block;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:padding .25s ease;font-weight:400}.checkbox-select__check-wrapp input[type=checkbox]+label[data-v-126c1407]:after{border:solid 2px #5cb85c;content:"";width:22px;height:22px;top:0;left:0;position:absolute}.checkbox-select__check-wrapp input[type=checkbox]+label[data-v-126c1407]:before{width:14px;height:14px;content:"";position:absolute;top:4px;left:4px;background-color:#5cb85c;opacity:0;will-change:transform;transform:scale(.5);transition:all .2s ease}.checkbox-select__check-wrapp input[type=checkbox]+label[data-v-126c1407]:hover{padding-left:32px}.checkbox-select__check-wrapp input[type=checkbox]:checked+label[data-v-126c1407]:before{opacity:1;transform:scale(1)}@keyframes load-data-v-126c1407{0%{left:-200px;width:20%}50%{width:40%}70%{width:60%}80%{left:50%}95%{left:120%}100%{left:100%}}.link[data-v-126c1407]{position:absolute;left:0;bottom:0;padding:20px;z-index:9999}.link a[data-v-126c1407]{display:flex;align-items:center;text-decoration:none;color:#fff}.link .fa[data-v-126c1407]{font-size:28px;margin-right:8px;color:#fff}.form-control.is-invalid[data-v-126c1407]{border-color:#dc3545}',map:void 0,media:void 0})}),c,"data-v-126c1407",false,undefined,!1,r,void 0,void 0),l=s,d=function(){var e=l;return e.install=function(t){t.component("VueMultiselectItems",e)},e}(),p=Object.freeze({__proto__:null,default:d});return Object.entries(p).forEach((function(t){var c=e(t,2),a=c[0],o=c[1];"default"!==a&&(d[a]=o)})),d}();