Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vueform/multiselect

Package Overview
Dependencies
Maintainers
1
Versions
59
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vueform/multiselect - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/multiselect.js

2

dist/multiselect.vue2.js

@@ -1,1 +0,1 @@

function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?e(Object(a),!0).forEach((function(e){n(t,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):e(Object(a)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))}))}return t}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}import{toRefs as r,computed as a,ref as l,watch as u,nextTick as o}from"@vue/composition-api";function i(e){return String(e).toLowerCase().trim()}function c(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return s(e,t)}(e)||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 s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t,n){var u=r(e),o=u.options,s=u.mode,f=u.trackBy,v=u.limit,y=u.hideSelectedTag,m=u.createTag,h=u.label,b=u.appendNewTag,g=u.multipleLabel,k=u.object,O=n.value,_=n.search,w=n.blurSearch,S=n.clearSearch,x=n.update,P=n.blurInput,C=l([]),j=a((function(){var e,t=void 0===o||void 0===o.value?[]:o.value;return e=t,"[object Object]"===Object.prototype.toString.call(e)&&(t=Object.keys(t).map((function(e){var n,r=t[e];return p(n={value:e},f.value,r),p(n,h.value,r),n}))),t=t.map((function(e,t){var n;return"object"===d(e)?e:(p(n={value:t},f.value,e),p(n,h.value,e),n)})),C.value.length&&(t=t.concat(C.value)),t})),T=a((function(){var e=j.value;return N.value.length&&(e=N.value.concat(e)),_.value&&(e=e.filter((function(e){return-1!==i(e[f.value]).indexOf(i(_.value))}))),y.value&&(e=e.filter((function(e){return!W(e)}))),v.value>0&&(e=e.slice(0,v.value)),e})),E=a((function(){return R.value||0===O.value.length||k.value?O.value:"single"==s.value?M(O.value):O.value.map((function(e){return M(e)}))})),q=a((function(){switch(s.value){case"single":return!R.value;case"multiple":case"tags":return!R.value&&O.value.length>0}})),D=a((function(){return void 0!==g&&void 0!==g.value?g.value(O.value):O.value&&O.value.length>1?"".concat(O.value.length," options selected"):"1 option selected"})),A=a((function(){return!j.value.length})),B=a((function(){return j.value.length>0&&0==T.value.length})),N=a((function(){var e;return!1!==m.value&&_.value?-1!==V(_.value)?[]:[(e={},p(e,h.value,_.value),p(e,f.value,_.value),p(e,"value",_.value),e)]:[]})),I=a((function(){switch(s.value){case"single":return null;case"multiple":case"tags":return[]}})),R=a((function(){return-1!==[null,void 0].indexOf(O.value)})),U=function(e){switch("object"!==d(e)&&(e=M(e)),s.value){case"single":x(L(e));break;case"multiple":case"tags":x(c(O.value||[]).concat(L(e)))}t.emit("select",L(e))},H=function(e){switch("object"!==d(e)&&(e=M(e)),s.value){case"single":$();break;case"tags":case"multiple":x(O.value.filter((function(t){return k.value&&t.value!=e.value||!k.value&&t!=e.value})))}t.emit("deselect",L(e))},L=function(e){return k.value?e:e.value},$=function(e){x(I.value)},F=function(e){switch(s.value){case"single":return!R.value&&E.value.value==e.value;case"tags":case"multiple":return!R.value&&-1!==E.value.map((function(e){return e.value})).indexOf(e.value)}},M=function(e){return j.value[j.value.map((function(e){return e.value})).indexOf(e)]},V=function(e){return j.value.map((function(e){return i(e[f.value])})).indexOf(i(e))},W=function(e){return"tags"===s.value&&y.value&&F(e)},X=function(e){C.value.push(e)};return{filteredOptions:T,hasSelected:q,multipleLabelText:D,extendedOptions:j,noOptions:A,noResults:B,valueObject:E,select:U,deselect:H,remove:function(e){H(e)},clear:$,isSelected:F,getOption:M,handleOptionClick:function(e){switch(s.value){case"single":if(F(e))return void H(e);$(),U(e),w(),P();break;case"multiple":if(F(e))return void H(e);U(e),S();break;case"tags":if(F(e))return void H(e);void 0===M(e.value)&&m.value&&(t.emit("tag",e.value),b.value&&X(e),S()),U(e)}}}}function v(e){return function(e){if(Array.isArray(e))return y(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return y(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return y(e,t)}(e)||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 y(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function m(e,t,n,r,a,l,u,o,i,c){"boolean"!=typeof u&&(i=o,o=u,u=!1);var s,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,a&&(d.functional=!0)),r&&(d._scopeId=r),l?(s=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,i(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},d._ssrRegister=s):t&&(s=u?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),s)if(d.functional){var p=d.render;d.render=function(e,t){return s.call(t),p(e,t)}}else{var f=d.beforeCreate;d.beforeCreate=f?[].concat(f,s):[s]}return n}var h={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelectedTag:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1}},setup:function(e,n){var i=function(e,t){return{update:function(e){t.emit("input",e),t.emit("update:modelValue",e)}}}(0,n),c=function(e,t){var n=r(e),l=n.value,u=n.modelValue;return{value:a((function(){return void 0===l?u.value:l.value}))}}(e),s=function(e,t,n){var o=r(e),i=o.searchable,c=o.mode,s=n.value,d=l(null),p=l(null),f=a((function(){return d.value?"".concat(d.value.length,"ch"):"tags"===c.value&&-1===[null,void 0].indexOf(s.value)&&s.value.length?"1ch":"100%"}));return u(d,(function(e){t.emit("search-change",e)})),{search:d,input:p,tagsSearchWidth:f,clearSearch:function(){d.value=null},blurSearch:function(){i.value&&p.value.blur()},handleTagsSearchBackspace:function(e){null!==d.value&&e.stopPropagation(),""===d.value&&(d.value=null)}}}(e,n,{value:c.value}),d=function(e,t,n){var u=r(e),o=u.maxHeight,i=u.disabled,c=l(!1),s=a((function(){return"".concat(o.value,"px")}));return{isOpen:c,contentMaxHeight:s,open:function(){i.value||(c.value=!0,t.emit("open"))},close:function(){c.value=!1,t.emit("close")}}}(e,n),p=function(e,t,n){var u=r(e),o=u.searchable,i=u.id;return{multiselect:l(null),tabindex:a((function(){return o.value?-1:0})),blurInput:function(){document.getElementById(i.value).querySelector(".multiselect-input").blur()}}}(e),y=f(e,n,{value:c.value,search:s.search,blurSearch:s.blurSearch,clearSearch:s.clearSearch,update:i.update,blurInput:p.blurInput}),m=function(e,t,n){var a=r(e).id,i=n.filteredOptions,c=n.handleOptionClick,s=n.search,d=l(null),p=function(e){d.value=e},f=function(){d.value=i.value[0]||null},v=function(){d.value=null},y=function(){var e=document.getElementById(a.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop<t.scrollTop&&(t.scrollTop=e.offsetTop)}};return u(s,(function(e){f()})),{pointer:d,isPointed:function(e){return!!d.value&&d.value.value==e.value},setPointer:p,setPointerFirst:f,clearPointer:v,selectPointer:function(){d.value&&(c(d.value),v())},forwardPointer:function(e){if(null===d.value)p(i.value[0]);else{var t=i.value.map((function(e){return e.value})).indexOf(d.value.value)+1;i.value.length<=t&&(t=0),p(i.value[t])}o((function(){y()}))},backwardPointer:function(){if(null===d.value)p(i.value[i.value.length-1]);else{var e=i.value.map((function(e){return e.value})).indexOf(d.value.value)-1;e<0&&(e=i.value.length-1),p(i.value[e])}o((function(){y()}))}}}(e,0,{filteredOptions:y.filteredOptions,handleOptionClick:y.handleOptionClick,search:s.search}),h=function(e,t,n){var r=n.value,a=n.update,l=n.close,u=n.clearPointer;return{handleBackspace:function(e){a(v(r.value).slice(0,-1))},handleEsc:function(e){l(),u(),e.target.blur()}}}(0,0,{value:c.value,update:i.update,close:d.close,clearPointer:m.clearPointer});return t(t(t(t(t(t(t({},i),s),d),p),y),m),h)}},b=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"multiselect",staticClass:"multiselect",class:["is-"+e.mode,{"is-open":e.isOpen,"is-searchable":e.searchable,"is-disabled":e.disabled,"no-caret":!e.caret}],attrs:{id:e.id},on:{keydown:function(t){if(!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;t.preventDefault()}}},[n("div",{staticClass:"multiselect-input",attrs:{tabindex:e.tabindex},on:{focus:e.open,blur:e.close,keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.handleEsc(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.selectPointer(t)}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:(t.preventDefault(),e.handleBackspace(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.preventDefault(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.preventDefault(),e.forwardPointer(t))}]}},["single"==e.mode&&e.hasSelected&&!e.search?[e._t("singleLabel",[n("div",{staticClass:"multiselect-single-label"},[e._v("\n "+e._s(e.valueObject[e.label])+"\n ")])],{value:e.valueObject})]:e._e(),e._v(" "),"multiple"==e.mode&&e.hasSelected&&!e.search?[e._t("multipleLabel",[n("div",{staticClass:"multiselect-multiple-label"},[e._v("\n "+e._s(e.multipleLabelText)+"\n ")])],{values:e.valueObject})]:e._e(),e._v(" "),"tags"==e.mode?[n("div",{staticClass:"multiselect-tags"},[e._l(e.valueObject,(function(t,r,a){return n("span",{key:a},[e._t("tag",[n("div",{staticClass:"multiselect-tag"},[e._v("\n "+e._s(t[e.label])+"\n "),e.disabled?e._e():n("i",{on:{click:function(e){e.preventDefault()},mousedown:function(n){return n.preventDefault(),e.remove(t)}}})])],{option:t,remove:e.remove,disabled:e.disabled})],2)})),e._v(" "),e.searchable&&!e.disabled?n("div",{staticClass:"multiselect-search",style:{width:e.tagsSearchWidth}},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",style:{width:e.tagsSearchWidth},domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleTagsSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})]):e._e()],2)]:e._e(),e._v(" "),"tags"!==e.mode&&e.searchable&&!e.disabled?[n("div",{staticClass:"multiselect-search"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){if(!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"]))return null;t.stopPropagation()},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})])]:e._e(),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:e.placeholder&&!e.hasSelected&&!e.search,expression:"placeholder && !hasSelected && !search"}],staticClass:"multiselect-placeholder"},[e._v("\n "+e._s(e.placeholder)+"\n ")]),e._v(" "),n("transition",{attrs:{name:"multiselect-loading"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.loading,expression:"loading"}],staticClass:"multiselect-spinner"})])],2),e._v(" "),n("transition",{attrs:{name:"multiselect"},on:{"after-leave":e.clearSearch}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[e._t("beforeList"),e._v(" "),e._l(e.filteredOptions,(function(t,r,a){return n("a",{key:a,staticClass:"multiselect-option",class:{"is-pointed":e.isPointed(t),"is-selected":e.isSelected(t)},attrs:{href:""},on:{mousedown:function(e){e.preventDefault()},mouseenter:function(n){return e.setPointer(t)},click:function(n){return n.stopPropagation(),n.preventDefault(),e.handleOptionClick(t)}}},[e._t("option",[n("span",[e._v(e._s(t[e.label]))])],{option:t,search:e.search})],2)})),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noOptions,expression:"noOptions"}]},[e._t("noOptions",[n("div",{staticClass:"multiselect-no-options"},[e._v(e._s(e.noOptionsText))])])],2),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noResults,expression:"noResults"}]},[e._t("noResults",[n("div",{staticClass:"multiselect-no-results"},[e._v(e._s(e.noResultsText))])])],2),e._v(" "),e._t("afterList")],2)])],1)};b._withStripped=!0;var g=m({render:b,staticRenderFns:[]},undefined,h,undefined,false,undefined,!1,void 0,void 0,void 0);export default g;
function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?e(Object(a),!0).forEach((function(e){n(t,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):e(Object(a)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))}))}return t}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}import{toRefs as r,computed as a,ref as l,watch as u,nextTick as o}from"@vue/composition-api";function i(e){return String(e).toLowerCase().trim()}function c(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return s(e,t)}(e)||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 s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t,n){var u=r(e),o=u.options,s=u.mode,f=u.trackBy,v=u.limit,y=u.hideSelectedTag,m=u.createTag,h=u.label,b=u.appendNewTag,g=u.multipleLabel,k=u.object,O=n.value,_=n.search,w=n.blurSearch,S=n.clearSearch,x=n.update,P=n.blurInput,C=l([]),j=a((function(){var e,t=void 0===o||void 0===o.value?[]:o.value;return e=t,"[object Object]"===Object.prototype.toString.call(e)&&(t=Object.keys(t).map((function(e){var n,r=t[e];return p(n={value:e},f.value,r),p(n,h.value,r),n}))),t=t.map((function(e,t){var n;return"object"===d(e)?e:(p(n={value:t},f.value,e),p(n,h.value,e),n)})),C.value.length&&(t=t.concat(C.value)),t})),T=a((function(){var e=j.value;return N.value.length&&(e=N.value.concat(e)),_.value&&(e=e.filter((function(e){return-1!==i(e[f.value]).indexOf(i(_.value))}))),y.value&&(e=e.filter((function(e){return!W(e)}))),v.value>0&&(e=e.slice(0,v.value)),e})),E=a((function(){return R.value||0===O.value.length||k.value?O.value:"single"==s.value?F(O.value):O.value.map((function(e){return F(e)}))})),q=a((function(){switch(s.value){case"single":return!R.value;case"multiple":case"tags":return!R.value&&O.value.length>0}})),D=a((function(){return void 0!==g&&void 0!==g.value?g.value(O.value):O.value&&O.value.length>1?"".concat(O.value.length," options selected"):"1 option selected"})),A=a((function(){return!j.value.length})),B=a((function(){return j.value.length>0&&0==T.value.length})),N=a((function(){var e;return!1!==m.value&&_.value?-1!==M(_.value)?[]:[(e={},p(e,h.value,_.value),p(e,f.value,_.value),p(e,"value",_.value),e)]:[]})),I=a((function(){switch(s.value){case"single":return null;case"multiple":case"tags":return[]}})),R=a((function(){return-1!==[null,void 0,!1].indexOf(O.value)})),U=function(e){switch("object"!==d(e)&&(e=F(e)),s.value){case"single":x(H(e));break;case"multiple":case"tags":x(c(O.value||[]).concat(H(e)))}t.emit("select",H(e))},V=function(e){switch("object"!==d(e)&&(e=F(e)),s.value){case"single":L();break;case"tags":case"multiple":x(O.value.filter((function(t){return k.value&&t.value!=e.value||!k.value&&t!=e.value})))}t.emit("deselect",H(e))},H=function(e){return k.value?e:e.value},L=function(e){x(I.value)},$=function(e){switch(s.value){case"single":return!R.value&&E.value.value==e.value;case"tags":case"multiple":return!R.value&&-1!==E.value.map((function(e){return e.value})).indexOf(e.value)}},F=function(e){return j.value[j.value.map((function(e){return e.value})).indexOf(e)]},M=function(e){return j.value.map((function(e){return i(e[f.value])})).indexOf(i(e))},W=function(e){return"tags"===s.value&&y.value&&$(e)},X=function(e){C.value.push(e)};return{filteredOptions:T,hasSelected:q,multipleLabelText:D,extendedOptions:j,noOptions:A,noResults:B,valueObject:E,select:U,deselect:V,remove:function(e){V(e)},clear:L,isSelected:$,getOption:F,handleOptionClick:function(e){switch(s.value){case"single":if($(e))return void V(e);L(),U(e),w(),P();break;case"multiple":if($(e))return void V(e);U(e),S();break;case"tags":if($(e))return void V(e);void 0===F(e.value)&&m.value&&(t.emit("tag",e.value),b.value&&X(e),S()),U(e)}}}}function v(e){return function(e){if(Array.isArray(e))return y(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return y(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return y(e,t)}(e)||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 y(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function m(e,t,n,r,a,l,u,o,i,c){"boolean"!=typeof u&&(i=o,o=u,u=!1);var s,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,a&&(d.functional=!0)),r&&(d._scopeId=r),l?(s=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,i(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},d._ssrRegister=s):t&&(s=u?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),s)if(d.functional){var p=d.render;d.render=function(e,t){return s.call(t),p(e,t)}}else{var f=d.beforeCreate;d.beforeCreate=f?[].concat(f,s):[s]}return n}var h={name:"Multiselect",emits:["open","close","select","deselect","input","search-change","tag","update:modelValue"],props:{value:{required:!1},modelValue:{required:!1},options:{type:[Array,Object],required:!1},id:{type:[String,Number],required:!1,default:"multiselect"},name:{type:[String,Number],required:!1,default:"multiselect"},disabled:{type:Boolean,required:!1,default:!1},label:{type:String,required:!1,default:"label"},trackBy:{type:String,required:!1,default:"label"},placeholder:{type:String,required:!1,default:null},mode:{type:String,required:!1,default:"single"},searchable:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:-1},maxHeight:{type:Number,required:!1,default:160},hideSelectedTag:{type:Boolean,required:!1,default:!0},createTag:{type:Boolean,required:!1,default:!1},appendNewTag:{type:Boolean,required:!1,default:!0},caret:{type:Boolean,required:!1,default:!0},loading:{type:Boolean,required:!1,default:!1},noOptionsText:{type:String,required:!1,default:"The list is empty"},noResultsText:{type:String,required:!1,default:"No results found"},multipleLabel:{type:Function,required:!1},object:{type:Boolean,required:!1,default:!1}},setup:function(e,n){var i=function(e,t){return{update:function(e){t.emit("input",e),t.emit("update:modelValue",e)}}}(0,n),c=function(e,t){var n=r(e),l=n.value,u=n.modelValue;return{externalValue:a((function(){return void 0===l?u.value:l.value}))}}(e),s=function(e,t,n){var o=r(e),i=o.searchable,c=o.mode,s=n.value,d=l(null),p=l(null),f=a((function(){return d.value?"".concat(d.value.length,"ch"):"tags"===c.value&&-1===[null,void 0].indexOf(s.value)&&s.value.length?"1ch":"100%"}));return u(d,(function(e){t.emit("search-change",e)})),{search:d,input:p,tagsSearchWidth:f,clearSearch:function(){d.value=null},blurSearch:function(){i.value&&p.value.blur()},handleTagsSearchBackspace:function(e){null!==d.value&&e.stopPropagation(),""===d.value&&(d.value=null)}}}(e,n,{value:c.externalValue}),d=function(e,t,n){var u=r(e),o=u.maxHeight,i=u.disabled,c=l(!1),s=a((function(){return"".concat(o.value,"px")}));return{isOpen:c,contentMaxHeight:s,open:function(){i.value||(c.value=!0,t.emit("open"))},close:function(){c.value=!1,t.emit("close")}}}(e,n),p=function(e,t,n){var u=r(e),o=u.searchable,i=u.id;return{multiselect:l(null),tabindex:a((function(){return o.value?-1:0})),blurInput:function(){document.getElementById(i.value).querySelector(".multiselect-input").blur()}}}(e),y=f(e,n,{value:c.externalValue,search:s.search,blurSearch:s.blurSearch,clearSearch:s.clearSearch,update:i.update,blurInput:p.blurInput}),m=function(e,t,n){var a=r(e).id,i=n.filteredOptions,c=n.handleOptionClick,s=n.search,d=l(null),p=function(e){d.value=e},f=function(){d.value=i.value[0]||null},v=function(){d.value=null},y=function(){var e=document.getElementById(a.value).querySelector(".is-pointed");if(e){var t=e.parentElement;e.offsetTop+e.offsetHeight>t.clientHeight+t.scrollTop&&(t.scrollTop=e.offsetTop+e.offsetHeight-t.clientHeight),e.offsetTop<t.scrollTop&&(t.scrollTop=e.offsetTop)}};return u(s,(function(e){f()})),{pointer:d,isPointed:function(e){return!!d.value&&d.value.value==e.value},setPointer:p,setPointerFirst:f,clearPointer:v,selectPointer:function(){d.value&&(c(d.value),v())},forwardPointer:function(e){if(null===d.value)p(i.value[0]);else{var t=i.value.map((function(e){return e.value})).indexOf(d.value.value)+1;i.value.length<=t&&(t=0),p(i.value[t])}o((function(){y()}))},backwardPointer:function(){if(null===d.value)p(i.value[i.value.length-1]);else{var e=i.value.map((function(e){return e.value})).indexOf(d.value.value)-1;e<0&&(e=i.value.length-1),p(i.value[e])}o((function(){y()}))}}}(e,0,{filteredOptions:y.filteredOptions,handleOptionClick:y.handleOptionClick,search:s.search}),h=function(e,t,n){var r=n.value,a=n.update,l=n.close,u=n.clearPointer;return{handleBackspace:function(e){a(v(r.value).slice(0,-1))},handleEsc:function(e){l(),u(),e.target.blur()}}}(0,0,{value:c.externalValue,update:i.update,close:d.close,clearPointer:m.clearPointer});return t(t(t(t(t(t(t(t({},i),s),d),p),y),m),h),c)}},b=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"multiselect",staticClass:"multiselect",class:["is-"+e.mode,{"is-open":e.isOpen,"is-searchable":e.searchable,"is-disabled":e.disabled,"no-caret":!e.caret}],attrs:{id:e.id},on:{keydown:function(t){if(!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;t.preventDefault()}}},[n("div",{staticClass:"multiselect-input",attrs:{tabindex:e.tabindex},on:{focus:e.open,blur:e.close,keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:e.handleEsc(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.selectPointer(t)}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:(t.preventDefault(),e.handleBackspace(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.preventDefault(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.preventDefault(),e.forwardPointer(t))}]}},["single"==e.mode&&e.hasSelected&&!e.search&&e.valueObject?[e._t("singleLabel",[n("div",{staticClass:"multiselect-single-label"},[e._v("\n "+e._s(e.valueObject[e.label])+"\n ")])],{value:e.valueObject})]:e._e(),e._v(" "),"multiple"==e.mode&&e.hasSelected&&!e.search?[e._t("multipleLabel",[n("div",{staticClass:"multiselect-multiple-label"},[e._v("\n "+e._s(e.multipleLabelText)+"\n ")])],{values:e.valueObject})]:e._e(),e._v(" "),"tags"==e.mode?[n("div",{staticClass:"multiselect-tags"},[e._l(e.valueObject,(function(t,r,a){return n("span",{key:a},[e._t("tag",[n("div",{staticClass:"multiselect-tag"},[e._v("\n "+e._s(t[e.label])+"\n "),e.disabled?e._e():n("i",{on:{click:function(e){e.preventDefault()},mousedown:function(n){return n.preventDefault(),e.remove(t)}}})])],{option:t,remove:e.remove,disabled:e.disabled})],2)})),e._v(" "),e.searchable&&!e.disabled?n("div",{staticClass:"multiselect-search",style:{width:e.tagsSearchWidth}},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",style:{width:e.tagsSearchWidth},domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:e.handleTagsSearchBackspace(t)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})]):e._e()],2)]:e._e(),e._v(" "),"tags"!==e.mode&&e.searchable&&!e.disabled?[n("div",{staticClass:"multiselect-search"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.search,expression:"search"}],ref:"input",domProps:{value:e.search},on:{focus:function(t){return t.stopPropagation(),e.open(t)},blur:function(t){return t.stopPropagation(),e.close(t)},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.handleEsc(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.selectPointer(t))}],keydown:[function(t){if(!t.type.indexOf("key")&&e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"]))return null;t.stopPropagation()},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.backwardPointer(t))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.forwardPointer(t))}],input:function(t){t.target.composing||(e.search=t.target.value)}}})])]:e._e(),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:e.placeholder&&!e.hasSelected&&!e.search,expression:"placeholder && !hasSelected && !search"}],staticClass:"multiselect-placeholder"},[e._v("\n "+e._s(e.placeholder)+"\n ")]),e._v(" "),n("transition",{attrs:{name:"multiselect-loading"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.loading,expression:"loading"}],staticClass:"multiselect-spinner"})])],2),e._v(" "),n("transition",{attrs:{name:"multiselect"},on:{"after-leave":e.clearSearch}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"multiselect-options",style:{maxHeight:e.contentMaxHeight}},[e._t("beforeList"),e._v(" "),e._l(e.filteredOptions,(function(t,r,a){return n("a",{key:a,staticClass:"multiselect-option",class:{"is-pointed":e.isPointed(t),"is-selected":e.isSelected(t)},attrs:{href:""},on:{mousedown:function(e){e.preventDefault()},mouseenter:function(n){return e.setPointer(t)},click:function(n){return n.stopPropagation(),n.preventDefault(),e.handleOptionClick(t)}}},[e._t("option",[n("span",[e._v(e._s(t[e.label]))])],{option:t,search:e.search})],2)})),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noOptions,expression:"noOptions"}]},[e._t("noOptions",[n("div",{staticClass:"multiselect-no-options"},[e._v(e._s(e.noOptionsText))])])],2),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:e.noResults,expression:"noResults"}]},[e._t("noResults",[n("div",{staticClass:"multiselect-no-results"},[e._v(e._s(e.noResultsText))])])],2),e._v(" "),e._t("afterList")],2)])],1)};b._withStripped=!0;var g=m({render:b,staticRenderFns:[]},undefined,h,undefined,false,undefined,!1,void 0,void 0,void 0);export default g;
{
"name": "@vueform/multiselect",
"version": "1.0.1",
"version": "1.0.2",
"private": false,

@@ -8,4 +8,5 @@ "description": "Vue 3 multiselect component with single select, multiselect and tagging options.",

"author": "Adam Berecz <adam@vueform.com>",
"main": "./dist/multiselect.vue3.js",
"module": "./dist/multiselect.vue3.js",
"main": "./dist/multiselect.js",
"module": "./dist/multiselect.js",
"unpkg": "./dist/multiselect.umd.js",
"repository": {

@@ -23,8 +24,9 @@ "type": "git",

"build:themes": "rollup --config build/themes.rollup.config.js",
"test": "jest --config=jest/jest.config.vue2.js; jest --config=jest/jest.config.vue3.js;",
"test:vue2": "jest --watchAll --verbose --config=jest/jest.config.vue2.js",
"test:vue3": "jest --watchAll --verbose --config=jest/jest.config.vue3.js"
"test": "jest --config=jest/jest.config.vue3.js; jest --config=jest/jest.config.vue2.js;",
"test:vue2": "jest --verbose --config=jest/jest.config.vue2.js",
"test:vue3": "jest --verbose --config=jest/jest.config.vue3.js"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-transform-modules-umd": "^7.12.1",
"@babel/preset-env": "^7.12.10",

@@ -38,2 +40,3 @@ "@rollup/plugin-alias": "^3.1.1",

"babel-jest": "^26.6.1",
"babel-plugin-rename-umd-globals": "^1.0.0",
"jest": "^26.6.1",

@@ -47,3 +50,3 @@ "jest-environment-jsdom-sixteen": "^1.0.3",

"typescript": "^4.1.2",
"vue-next": "npm:vue@^3.0.0",
"vue-next": "npm:vue@^3.0.4",
"vue-next-jest": "npm:vue-jest@^5.0.0-alpha.4",

@@ -50,0 +53,0 @@ "vue-next-rollup-plugin-vue": "npm:rollup-plugin-vue@^6.0.0",

<div align="center">
<img alt="CircleCI" src="https://img.shields.io/circleci/build/github/vueform/multiselect">
<a href="https://codecov.io/gh/vueform/multiselect" target="_blank">
<img src="https://img.shields.io/codecov/c/github/vueform/multiselect"/>
</a>
<img alt="npm bundle size (scoped version)" src="https://img.shields.io/bundlephobia/minzip/@vueform/multiselect/1.0.1?color=53ca2f">
<a href="https://github.com/vueform/multiselect/blob/main/LICENSE.md" target="_blank">
<img alt="GitHub" src="https://img.shields.io/github/license/vueform/multiselect?color=53ca2f">
</a>
<a href="https://discord.com/channels/787237947635793940" target="_blank">
<img alt="Discord" src="https://img.shields.io/discord/787237947635793940">
</a>
<img alt="npm" src="https://img.shields.io/npm/v/@vueform/multiselect">
<h1>Vue 3 multiselect by @vueform</h1>
<img align="center" src="https://github.com/vueform/multiselect/raw/main/assets/screenshot.jpg">
<a href="https://www.npmjs.com/package/@vueform/multiselect" target="_blank">
<img align="center" src="https://github.com/vueform/multiselect/raw/main/assets/screenshot.jpg">
</a>
</div>

@@ -10,2 +31,3 @@

* No dependencies
* Lightweight (~4.5 kB gzipped)
* 100% coverage

@@ -17,3 +39,2 @@ * ESM support

* Search & filtering
* Async options
* Custom slots

@@ -86,4 +107,4 @@ * Events

| maxHeight | `number` | `160` | The maximum height of options list. |
| mode | `string` | `single` | Possible values: `single|multiple|tags`. |
| modelValue | `string|number|array` | `null` | The variable that should store the select value when using **Vue 3**. If `v-model` is used it does not need to be set. |
| mode | `string` | `single` | Possible values: `single\|multiple\|tags`. |
| modelValue | `string\|number\|array` | `null` | The variable that should store the select value when using **Vue 3**. If `v-model` is used it does not need to be set. |
| multipleLabel | `function` | | A function that should return how the label should be displayed when using `multiple` mode. It receives `value` as an argument. By default it renders `1 option selected` and `[n] options selected` based on `value` length. |

@@ -93,7 +114,7 @@ | noOptionsText | `string` | `'The list is empty'` | The text that should be displayed when options list is empty. |

| object | `boolean` | `false` | Whether the value should be stored as an object. If set to `false` while using an array of objects as `:options` the `value` property will be used as value. If set to `true` without using an array of objects as `:options` an object that contains `value` property along with `:trackBy`'s and `:label`'s value will be set as value. |
| options | `array|object` | `[]` | List of options. Can be:<br>- an array (eg. `[1,2,3]`)<br>- an object (eg. `{a:1,b:2,c:3}`)<br>- an array of objects `[{value:1,label:'v1'},{value:2,label:'v2'},{value:3,label:'v3'}]`.<br>When an array of objects is provided it **must** have a `value` property as well as properties that equal to `:trackBy`'s and `:label`'s value (both configurable and default to `label`). |
| options | `array\|object` | `[]` | List of options. Can be:<br>- an array (eg. `[1,2,3]`)<br>- an object (eg. `{a:1,b:2,c:3}`)<br>- an array of objects `[{value:1,label:'v1'},{value:2,label:'v2'},{value:3,label:'v3'}]`.<br>When an array of objects is provided it **must** have a `value` property as well as properties that equal to `:trackBy`'s and `:label`'s value (both configurable and default to `label`). |
| placeholder | `string` | `null` | The text that should be displayed before an options are selected. |
| searchable | `boolean` | `false` | Whether the options should be searchable. |
| trackBy | `string` | `label` | The name of the property that should be searched when `searchable` is `true` and an array of objects are provided as `:options`. |
| value | `string|number|array` | `null` | The variable that should store the select value when using **Vue 2**. If `v-model` is used it does not need to be set. |
| value | `string\|number\|array` | `null` | The variable that should store the select value when using **Vue 2**. If `v-model` is used it does not need to be set. |

@@ -371,60 +392,4 @@ ## Events

### Tags with **async** options and loader
``` html
<template>
<div>
<Multiselect
v-model="value"
mode="tags"
placeholder="Select your character"
:options="options"
:searchable="true"
:object="true"
:loading="loading"
@search-change="refreshOptions"
/>
</div>
</template>
<script>
import Multiselect from '@vueform/multiselect'
export default {
components: { Multiselect },
data() {
return {
value: [],
options: [],
loading: false,
lastQuery: null,
}
},
methods: {
async refreshOptions(query) {
this.lastQuery = query
this.loading = true
let response = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(['Robin', 'Batman', 'Joker'])
}, 500);
})
if (this.lastQuery != query) {
return
}
this.options = response
this.loading = false
}
}
}
</script>
<style src="@vueform/multiselect/themes/default.css"></style>
```
## License
[MIT](https://github.com/vueform/multiselect/blob/main/LICENSE.md)

@@ -136,3 +136,3 @@ import { ref, toRefs, computed } from 'composition-api'

const isValueNull = computed(() => {
return [null, undefined].indexOf(value.value) !== -1
return [null, undefined, false].indexOf(value.value) !== -1
})

@@ -139,0 +139,0 @@

@@ -15,4 +15,4 @@ import { computed, toRefs } from 'composition-api'

return {
value: externalValue,
externalValue,
}
}

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc