@ldmjs/ui 1.0.0-dev-12 → 1.0.0-dev-13

package/dist/multiselect.js

@@ -0,0 +1 @@
+(function webpackUniversalModuleDefinition(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define(["vue"],t):"object"===typeof exports?exports["ldmui"]=t(require("vue")):e["ldmui"]=t(e["vue"])})(self,(e=>(()=>{"use strict";var t={6262:(e,t)=>{t.A=(e,t)=>{const i=e.__vccOpts||e;for(const[e,s]of t)i[e]=s;return i}},2380:t=>{t.exports=e}},i={};function __webpack_require__(e){var s=i[e];if(void 0!==s)return s.exports;var l=i[e]={exports:{}};return t[e](l,l.exports,__webpack_require__),l.exports}(()=>{__webpack_require__.d=(e,t)=>{for(var i in t)__webpack_require__.o(t,i)&&!__webpack_require__.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})}})(),(()=>{__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{__webpack_require__.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var s={};return(()=>{__webpack_require__.r(s),__webpack_require__.d(s,{default:()=>x});var e=__webpack_require__(2380);const t=["tabindex","aria-owns"],i={ref:"tags",class:"multiselect__tags"},l={class:"multiselect__tags-wrap"},o=["textContent"],r=["onKeypress","onMousedown"],n=["textContent"],a={class:"multiselect__spinner"},h=["name","id","placeholder","value","disabled","tabindex","aria-controls"],p=["id"],c={key:0},u={class:"multiselect__option"},d=["id","role"],m=["onClick","onMouseenter","data-select","data-selected","data-deselect"],g=["data-select","data-deselect","onMouseenter","onMousedown"],f={class:"multiselect__option"},b={class:"multiselect__option"};function render(s,y,w,V,v,_){return(0,e.openBlock)(),(0,e.createElementBlock)("div",{tabindex:s.searchable?-1:w.tabindex,class:(0,e.normalizeClass)([{"multiselect--active":s.isOpen,"multiselect--disabled":w.disabled,"multiselect--above":_.isAbove,"multiselect--has-options-group":_.hasOptionGroup,"multiselect--list-empty":s.isOpen&&!_.showNoResultsSlot&&!_.showNoOptionsSlot&&0===s.filteredOptions.length},"multiselect"]),onFocus:y[13]||(y[13]=e=>s.activate()),onBlur:y[14]||(y[14]=e=>!s.searchable&&s.deactivate()),onKeydown:[y[15]||(y[15]=(0,e.withKeys)((0,e.withModifiers)((e=>s.pointerForward()),["self","prevent"]),["down"])),y[16]||(y[16]=(0,e.withKeys)((0,e.withModifiers)((e=>s.pointerBackward()),["self","prevent"]),["up"]))],onKeypress:y[17]||(y[17]=(0,e.withKeys)((0,e.withModifiers)((e=>s.addPointerElement(e)),["stop","self"]),["enter","tab"])),onKeyup:y[18]||(y[18]=(0,e.withKeys)((e=>s.deactivate()),["esc"])),role:"combobox","aria-owns":"listbox-"+s.id},[(0,e.renderSlot)(s.$slots,"caret",{toggle:s.toggle},(()=>[(0,e.createElementVNode)("div",{onMousedown:y[0]||(y[0]=(0,e.withModifiers)((e=>s.toggle()),["prevent","stop"])),class:"multiselect__select"},null,32)])),(0,e.createTextVNode)(),(0,e.renderSlot)(s.$slots,"clear",{search:s.search}),(0,e.createTextVNode)(),(0,e.createElementVNode)("div",i,[(0,e.renderSlot)(s.$slots,"selection",{search:s.search,remove:s.removeElement,values:_.visibleValues,isOpen:s.isOpen},(()=>[(0,e.withDirectives)((0,e.createElementVNode)("div",l,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(_.visibleValues,((t,i)=>(0,e.renderSlot)(s.$slots,"tag",{option:t,search:s.search,remove:s.removeElement},(()=>[((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"multiselect__tag",key:i},[(0,e.createElementVNode)("span",{textContent:(0,e.toDisplayString)(s.getOptionLabel(t))},null,8,o),(0,e.createTextVNode)(),(0,e.createElementVNode)("i",{tabindex:"1",onKeypress:(0,e.withKeys)((0,e.withModifiers)((e=>s.removeElement(t)),["prevent"]),["enter"]),onMousedown:(0,e.withModifiers)((e=>s.removeElement(t)),["prevent"]),class:"multiselect__tag-icon"},null,40,r)]))])))),256))],512),[[e.vShow,_.visibleValues.length>0]]),(0,e.createTextVNode)(),s.internalValue&&s.internalValue.length>w.limit?(0,e.renderSlot)(s.$slots,"limit",{key:0},(()=>[(0,e.createElementVNode)("strong",{class:"multiselect__strong",textContent:(0,e.toDisplayString)(w.limitText(s.internalValue.length-w.limit))},null,8,n)])):(0,e.createCommentVNode)("",!0)])),(0,e.createTextVNode)(),(0,e.createVNode)(e.Transition,{name:"multiselect__loading"},{default:(0,e.withCtx)((()=>[(0,e.renderSlot)(s.$slots,"loading",{},(()=>[(0,e.withDirectives)((0,e.createElementVNode)("div",a,null,512),[[e.vShow,w.loading]])]))])),_:3}),(0,e.createTextVNode)(),s.searchable?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,ref:"search",name:w.name,id:s.id,type:"text",autocomplete:"off",spellcheck:"false",placeholder:s.placeholder,style:(0,e.normalizeStyle)(_.inputStyle),value:s.search,disabled:w.disabled,tabindex:w.tabindex,onInput:y[1]||(y[1]=e=>s.updateSearch(e.target.value)),onFocus:y[2]||(y[2]=(0,e.withModifiers)((e=>s.activate()),["prevent"])),onBlur:y[3]||(y[3]=(0,e.withModifiers)((e=>s.deactivate()),["prevent"])),onKeyup:y[4]||(y[4]=(0,e.withKeys)((e=>s.deactivate()),["esc"])),onKeydown:[y[5]||(y[5]=(0,e.withKeys)((0,e.withModifiers)((e=>s.pointerForward()),["prevent"]),["down"])),y[6]||(y[6]=(0,e.withKeys)((0,e.withModifiers)((e=>s.pointerBackward()),["prevent"]),["up"])),y[8]||(y[8]=(0,e.withKeys)((0,e.withModifiers)((e=>s.removeLastElement()),["stop"]),["delete"]))],onKeypress:y[7]||(y[7]=(0,e.withKeys)((0,e.withModifiers)((e=>s.addPointerElement(e)),["prevent","stop","self"]),["enter"])),class:"multiselect__input","aria-controls":"listbox-"+s.id},null,44,h)):(0,e.createCommentVNode)("",!0),(0,e.createTextVNode)(),_.isSingleLabelVisible?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:1,class:"multiselect__single",onMousedown:y[9]||(y[9]=(0,e.withModifiers)(((...e)=>s.toggle&&s.toggle(...e)),["prevent"]))},[(0,e.renderSlot)(s.$slots,"singleLabel",{option:_.singleValue},(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(s.currentOptionLabel),1)]))],32)):(0,e.createCommentVNode)("",!0),(0,e.createTextVNode)(),_.isPlaceholderVisible?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:2,class:"multiselect__placeholder",onMousedown:y[10]||(y[10]=(0,e.withModifiers)(((...e)=>s.toggle&&s.toggle(...e)),["prevent"]))},[(0,e.renderSlot)(s.$slots,"placeholder",{},(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(s.placeholder),1)]))],32)):(0,e.createCommentVNode)("",!0)],512),(0,e.createTextVNode)(),(0,e.createVNode)(e.Transition,{name:"multiselect"},{default:(0,e.withCtx)((()=>[(0,e.withDirectives)((0,e.createElementVNode)("div",{class:"multiselect__content-wrapper",onFocus:y[11]||(y[11]=(...e)=>s.activate&&s.activate(...e)),tabindex:"-1",onMousedown:y[12]||(y[12]=(0,e.withModifiers)((()=>{}),["prevent"])),style:(0,e.normalizeStyle)({maxHeight:s.optimizedHeight+"px"}),ref:"list"},[(0,e.createElementVNode)("ul",{class:"multiselect__content",style:(0,e.normalizeStyle)(_.contentStyle),role:"listbox",id:"listbox-"+s.id},[(0,e.renderSlot)(s.$slots,"beforeList"),(0,e.createTextVNode)(),s.multiple&&s.max===s.internalValue.length?((0,e.openBlock)(),(0,e.createElementBlock)("li",c,[(0,e.createElementVNode)("span",u,[(0,e.renderSlot)(s.$slots,"maxElements",{},(()=>[(0,e.createTextVNode)("Maximum of "+(0,e.toDisplayString)(s.max)+" options selected. First remove a selected option to select another.",1)]))])])):(0,e.createCommentVNode)("",!0),(0,e.createTextVNode)(),!s.max||s.internalValue.length<s.max?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:1},(0,e.renderList)(s.filteredOptions,((t,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("li",{class:"multiselect__element",key:i,id:s.id+"-"+i,role:t&&(t.$isLabel||t.$isDisabled)?null:"option"},[t&&(t.$isLabel||t.$isDisabled)?(0,e.createCommentVNode)("",!0):((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:0,class:(0,e.normalizeClass)([s.optionHighlight(i,t),"multiselect__option"]),onClick:(0,e.withModifiers)((e=>s.select(t)),["stop"]),onMouseenter:(0,e.withModifiers)((e=>s.pointerSet(i)),["self"]),"data-select":t&&t.isTag?s.tagPlaceholder:_.selectLabelText,"data-selected":_.selectedLabelText,"data-deselect":_.deselectLabelText},[(0,e.renderSlot)(s.$slots,"option",{option:t,search:s.search,index:i},(()=>[(0,e.createElementVNode)("span",null,(0,e.toDisplayString)(s.getOptionLabel(t)),1)]))],42,m)),(0,e.createTextVNode)(),t&&(t.$isLabel||t.$isDisabled)?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:1,"data-select":s.groupSelect&&_.selectGroupLabelText,"data-deselect":s.groupSelect&&_.deselectGroupLabelText,class:(0,e.normalizeClass)([s.groupHighlight(i,t),"multiselect__option"]),onMouseenter:(0,e.withModifiers)((e=>s.groupSelect&&s.pointerSet(i)),["self"]),onMousedown:(0,e.withModifiers)((e=>s.selectGroup(t)),["prevent"])},[(0,e.renderSlot)(s.$slots,"option",{option:t,search:s.search,index:i},(()=>[(0,e.createElementVNode)("span",null,(0,e.toDisplayString)(s.getOptionLabel(t)),1)]))],42,g)):(0,e.createCommentVNode)("",!0)],8,d)))),128)):(0,e.createCommentVNode)("",!0),(0,e.createTextVNode)(),(0,e.withDirectives)((0,e.createElementVNode)("li",null,[(0,e.createElementVNode)("span",f,[(0,e.renderSlot)(s.$slots,"noResult",{search:s.search},(()=>[(0,e.createTextVNode)("No elements found. Consider changing the search query.")]))])],512),[[e.vShow,_.showNoResultsSlot]]),(0,e.createTextVNode)(),(0,e.withDirectives)((0,e.createElementVNode)("li",null,[(0,e.createElementVNode)("span",b,[(0,e.renderSlot)(s.$slots,"noOptions",{},(()=>[(0,e.createTextVNode)("List is empty.")]))])],512),[[e.vShow,_.showNoOptionsSlot]]),(0,e.createTextVNode)(),(0,e.renderSlot)(s.$slots,"afterList")],12,p)],36),[[e.vShow,s.isOpen]])])),_:3})],42,t)}function isEmpty(e){return 0!==e&&(!(!Array.isArray(e)||0!==e.length)||!e)}function not(e){return(...t)=>!e(...t)}function includes(e,t){void 0===e&&(e="undefined"),null===e&&(e="null"),!1===e&&(e="false");const i=e.toString().toLowerCase();return-1!==i.indexOf(t.trim())}function filterOptions(e,t,i,s){return t?e.filter((e=>includes(s(e,i),t))).sort(((e,t)=>s(e,i).length-s(t,i).length)):e}function stripGroups(e){return e.filter((e=>!e.$isLabel))}function flattenOptions(e,t){return i=>i.reduce(((i,s)=>s[e]&&s[e].length?(i.push({$groupLabel:s[t],$isLabel:!0}),i.concat(s[e])):i),[])}function filterGroups(e,t,i,s,l){return o=>o.map((o=>{if(!o[i])return console.warn("Options passed to vue-multiselect do not contain groups, despite the config."),[];const r=filterOptions(o[i],e,t,l);return r.length?{[s]:o[s],[i]:r}:[]}))}const flow=(...e)=>t=>e.reduce(((e,t)=>t(e)),t),y={data(){return{search:"",isOpen:!1,preferredOpenDirection:"below",optimizedHeight:this.maxHeight}},props:{internalSearch:{type:Boolean,default:!0},options:{type:Array,required:!0},multiple:{type:Boolean,default:!1},trackBy:{type:String},label:{type:String},searchable:{type:Boolean,default:!0},clearOnSelect:{type:Boolean,default:!0},hideSelected:{type:Boolean,default:!1},placeholder:{type:String,default:"Select option"},allowEmpty:{type:Boolean,default:!0},resetAfter:{type:Boolean,default:!1},closeOnSelect:{type:Boolean,default:!0},customLabel:{type:Function,default(e,t){return isEmpty(e)?"":t?e[t]:e}},taggable:{type:Boolean,default:!1},tagPlaceholder:{type:String,default:"Press enter to create a tag"},tagPosition:{type:String,default:"top"},max:{type:[Number,Boolean],default:!1},id:{default:null},optionsLimit:{type:Number,default:1e3},groupValues:{type:String},groupLabel:{type:String},groupSelect:{type:Boolean,default:!1},blockKeys:{type:Array,default(){return[]}},preserveSearch:{type:Boolean,default:!1},preselectFirst:{type:Boolean,default:!1},preventAutofocus:{type:Boolean,default:!1}},mounted(){!this.multiple&&this.max&&console.warn("[Vue-Multiselect warn]: Max prop should not be used when prop Multiple equals false."),this.preselectFirst&&!this.internalValue.length&&this.options.length&&this.select(this.filteredOptions[0])},computed:{internalValue(){return this.modelValue||0===this.modelValue?Array.isArray(this.modelValue)?this.modelValue:[this.modelValue]:[]},filteredOptions(){const e=this.search||"",t=e.toLowerCase().trim();let i=this.options.concat();return i=this.internalSearch?this.groupValues?this.filterAndFlat(i,t,this.label):filterOptions(i,t,this.label,this.customLabel):this.groupValues?flattenOptions(this.groupValues,this.groupLabel)(i):i,i=this.hideSelected?i.filter(not(this.isSelected)):i,this.taggable&&t.length&&!this.isExistingOption(t)&&("bottom"===this.tagPosition?i.push({isTag:!0,label:e}):i.unshift({isTag:!0,label:e})),i.slice(0,this.optionsLimit)},valueKeys(){return this.trackBy?this.internalValue.map((e=>e[this.trackBy])):this.internalValue},optionKeys(){const e=this.groupValues?this.flatAndStrip(this.options):this.options;return e.map((e=>this.customLabel(e,this.label).toString().toLowerCase()))},currentOptionLabel(){return this.multiple?this.searchable?"":this.placeholder:this.internalValue.length?this.getOptionLabel(this.internalValue[0]):this.searchable?"":this.placeholder}},watch:{internalValue:{handler(){this.resetAfter&&this.internalValue.length&&(this.search="",this.$emit("update:modelValue",this.multiple?[]:null))},deep:!0},search(){this.$emit("search-change",this.search)}},emits:["open","search-change","close","select","update:modelValue","remove","tag"],methods:{getValue(){return this.multiple?this.internalValue:0===this.internalValue.length?null:this.internalValue[0]},filterAndFlat(e,t,i){return flow(filterGroups(t,i,this.groupValues,this.groupLabel,this.customLabel),flattenOptions(this.groupValues,this.groupLabel))(e)},flatAndStrip(e){return flow(flattenOptions(this.groupValues,this.groupLabel),stripGroups)(e)},updateSearch(e){this.search=e},isExistingOption(e){return!!this.options&&this.optionKeys.indexOf(e)>-1},isSelected(e){const t=this.trackBy?e[this.trackBy]:e;return this.valueKeys.indexOf(t)>-1},isOptionDisabled(e){return!!e.$isDisabled},getOptionLabel(e){if(isEmpty(e))return"";if(e.isTag)return e.label;if(e.$isLabel)return e.$groupLabel;const t=this.customLabel(e,this.label);return isEmpty(t)?"":t},select(e,t){if(e.$isLabel&&this.groupSelect)this.selectGroup(e);else if(!(-1!==this.blockKeys.indexOf(t)||this.disabled||e.$isDisabled||e.$isLabel)&&(!this.max||!this.multiple||this.internalValue.length!==this.max)&&("Tab"!==t||this.pointerDirty)){if(e.isTag)this.$emit("tag",e.label,this.id),this.search="",this.closeOnSelect&&!this.multiple&&this.deactivate();else{const i=this.isSelected(e);if(i)return void("Tab"!==t&&this.removeElement(e));this.multiple?this.$emit("update:modelValue",this.internalValue.concat([e])):this.$emit("update:modelValue",e),this.$emit("select",e,this.id),this.clearOnSelect&&(this.search="")}this.closeOnSelect&&this.deactivate()}},selectGroup(e){const t=this.options.find((t=>t[this.groupLabel]===e.$groupLabel));if(t){if(this.wholeGroupSelected(t)){this.$emit("remove",t[this.groupValues],this.id);const e=this.internalValue.filter((e=>-1===t[this.groupValues].indexOf(e)));this.$emit("update:modelValue",e)}else{let e=t[this.groupValues].filter((e=>!(this.isOptionDisabled(e)||this.isSelected(e))));this.max&&e.splice(this.max-this.internalValue.length),this.$emit("select",e,this.id),this.$emit("update:modelValue",this.internalValue.concat(e))}this.closeOnSelect&&this.deactivate()}},wholeGroupSelected(e){return e[this.groupValues].every((e=>this.isSelected(e)||this.isOptionDisabled(e)))},wholeGroupDisabled(e){return e[this.groupValues].every(this.isOptionDisabled)},removeElement(e,t=!0){if(this.disabled)return;if(e.$isDisabled)return;if(!this.allowEmpty&&this.internalValue.length<=1)return void this.deactivate();const i="object"===typeof e?this.valueKeys.indexOf(e[this.trackBy]):this.valueKeys.indexOf(e);if(this.multiple){const e=this.internalValue.slice(0,i).concat(this.internalValue.slice(i+1));this.$emit("update:modelValue",e)}else this.$emit("update:modelValue",null);this.$emit("remove",e,this.id),this.closeOnSelect&&t&&this.deactivate()},removeLastElement(){-1===this.blockKeys.indexOf("Delete")&&0===this.search.length&&Array.isArray(this.internalValue)&&this.internalValue.length&&this.removeElement(this.internalValue[this.internalValue.length-1],!1)},activate(){this.isOpen||this.disabled||(this.adjustPosition(),this.groupValues&&0===this.pointer&&this.filteredOptions.length&&(this.pointer=1),this.isOpen=!0,this.searchable?(this.preserveSearch||(this.search=""),this.preventAutofocus||this.$nextTick((()=>this.$refs.search&&this.$refs.search.focus()))):this.preventAutofocus||"undefined"!==typeof this.$el&&this.$el.focus(),this.$emit("open",this.id))},deactivate(){this.isOpen&&(this.isOpen=!1,this.searchable?this.$refs.search&&this.$refs.search.blur():tthis.$el&&this.$el.blur(),this.preserveSearch||(this.search=""),this.$emit("close",this.getValue(),this.id))},toggle(){this.isOpen?this.deactivate():this.activate()},adjustPosition(){if("undefined"===typeof window)return;const e=this.$el.getBoundingClientRect().top,t=window.innerHeight-this.$el.getBoundingClientRect().bottom,i=t>this.maxHeight;i||t>e||"below"===this.openDirection||"bottom"===this.openDirection?(this.preferredOpenDirection="below",this.optimizedHeight=Math.min(t-40,this.maxHeight)):(this.preferredOpenDirection="above",this.optimizedHeight=Math.min(e-40,this.maxHeight))}}},w={data(){return{pointer:0,pointerDirty:!1}},props:{showPointer:{type:Boolean,default:!0},optionHeight:{type:Number,default:40}},computed:{pointerPosition(){return this.pointer*this.optionHeight},visibleElements(){return this.optimizedHeight/this.optionHeight}},watch:{filteredOptions(){this.pointerAdjust()},isOpen(){this.pointerDirty=!1},pointer(){this.$refs.search&&this.$refs.search.setAttribute("aria-activedescendant",this.id+"-"+this.pointer.toString())}},methods:{optionHighlight(e,t){return{"multiselect__option--highlight":e===this.pointer&&this.showPointer,"multiselect__option--selected":this.isSelected(t)}},groupHighlight(e,t){if(!this.groupSelect)return["multiselect__option--disabled",{"multiselect__option--group":t.$isLabel}];const i=this.options.find((e=>e[this.groupLabel]===t.$groupLabel));return i&&!this.wholeGroupDisabled(i)?["multiselect__option--group",{"multiselect__option--highlight":e===this.pointer&&this.showPointer},{"multiselect__option--group-selected":this.wholeGroupSelected(i)}]:"multiselect__option--disabled"},addPointerElement({key:e}="Enter"){this.filteredOptions.length>0&&this.select(this.filteredOptions[this.pointer],e),this.pointerReset()},pointerForward(){this.pointer<this.filteredOptions.length-1&&(this.pointer++,this.$refs.list.scrollTop<=this.pointerPosition-(this.visibleElements-1)*this.optionHeight&&(this.$refs.list.scrollTop=this.pointerPosition-(this.visibleElements-1)*this.optionHeight),this.filteredOptions[this.pointer]&&this.filteredOptions[this.pointer].$isLabel&&!this.groupSelect&&this.pointerForward()),this.pointerDirty=!0},pointerBackward(){this.pointer>0?(this.pointer--,this.$refs.list.scrollTop>=this.pointerPosition&&(this.$refs.list.scrollTop=this.pointerPosition),this.filteredOptions[this.pointer]&&this.filteredOptions[this.pointer].$isLabel&&!this.groupSelect&&this.pointerBackward()):this.filteredOptions[this.pointer]&&this.filteredOptions[0].$isLabel&&!this.groupSelect&&this.pointerForward(),this.pointerDirty=!0},pointerReset(){this.closeOnSelect&&(this.pointer=0,this.$refs.list&&(this.$refs.list.scrollTop=0))},pointerAdjust(){this.pointer>=this.filteredOptions.length-1&&(this.pointer=this.filteredOptions.length?this.filteredOptions.length-1:0),this.filteredOptions.length>0&&this.filteredOptions[this.pointer].$isLabel&&!this.groupSelect&&this.pointerForward()},pointerSet(e){this.pointer=e,this.pointerDirty=!0}}},V={name:"vue-multiselect",mixins:[y,w],compatConfig:{MODE:3,ATTR_ENUMERATED_COERCION:!1},props:{name:{type:String,default:""},modelValue:{type:null,default(){return[]}},selectLabel:{type:String,default:"Press enter to select"},selectGroupLabel:{type:String,default:"Press enter to select group"},selectedLabel:{type:String,default:"Selected"},deselectLabel:{type:String,default:"Press enter to remove"},deselectGroupLabel:{type:String,default:"Press enter to deselect group"},showLabels:{type:Boolean,default:!0},limit:{type:Number,default:99999},maxHeight:{type:Number,default:300},limitText:{type:Function,default:e=>`and ${e} more`},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},openDirection:{type:String,default:""},showNoOptions:{type:Boolean,default:!0},showNoResults:{type:Boolean,default:!0},tabindex:{type:Number,default:0}},computed:{hasOptionGroup(){return this.groupValues&&this.groupLabel&&this.groupSelect},isSingleLabelVisible(){return!1},isPlaceholderVisible(){return!this.internalValue.length&&(!this.searchable||!this.isOpen)},visibleValues(){return this.internalValue.slice(0,this.limit)},singleValue(){return this.internalValue[0]},deselectLabelText(){return this.showLabels?this.deselectLabel:""},deselectGroupLabelText(){return this.showLabels?this.deselectGroupLabel:""},selectLabelText(){return this.showLabels?this.selectLabel:""},selectGroupLabelText(){return this.showLabels?this.selectGroupLabel:""},selectedLabelText(){return this.showLabels?this.selectedLabel:""},inputStyle(){return this.searchable||this.multiple&&this.modelValue&&this.modelValue.length?this.isOpen?{width:"100%"}:{width:"0",position:"absolute",padding:"0"}:""},contentStyle(){return this.options.length?{display:"inline-block"}:{display:"block"}},isAbove(){return"above"===this.openDirection||"top"===this.openDirection||"below"!==this.openDirection&&"bottom"!==this.openDirection&&"above"===this.preferredOpenDirection},showSearchInput(){return this.searchable&&(!this.hasSingleSelectedSlot||!this.visibleSingleValue&&0!==this.visibleSingleValue||this.isOpen)},showNoResultsSlot(){return this.showNoResults&&0===this.filteredOptions.length&&this.search&&!this.loading},showNoOptionsSlot(){return this.showNoOptions&&(0===this.options.length||!0===this.hasOptionGroup&&0===this.filteredOptions.length)&&!this.search&&!this.loading}}};var v=__webpack_require__(6262);const _=(0,v.A)(V,[["render",render]]),S=_,x=S})(),s})()));

package/dist/scss/_multiselect.scss

@@ -0,0 +1,164 @@
+:root {
+  --multiselect-height: calc(var(--input-height) - 2px);
+}
+
+.multiselect {
+  position: relative;
+  min-height: var(--multiselect-height);
+  flex-basis: 100%;
+  width: 100%;
+  font-family: 'Roboto';
+  font-size: var(--font-size);
+
+  &--with-right-button {
+    .multiselect__tags {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+    & + .v-btn {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+      border-left: none;
+    }
+  }
+
+  & .multiselect__single {
+    margin-left: 12px;
+  }
+
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    height: var(--multiselect-height);
+    padding-left: 4px;
+  }
+
+  &--active {
+    & .multiselect__tags {
+      border-color: var(--grey-l-4) !important;
+    }
+  }
+
+  & .multiselect__tags {
+    min-height: var(--multiselect-height);
+    border: 1px solid var(--grey-l-5);
+    border-radius: var(--border-radius);
+
+    .multiselect__strong {
+      font-size: var(--font-size);
+      color: var(--grey);
+    }
+
+    &-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      min-height: var(--multiselect-height);
+      padding-top: 3px;
+
+      .v-chip {
+        margin-left: 8px !important;
+        max-width: 228px;
+      }
+    }
+
+    & > span:not(.multiselect__placeholder) {
+      padding-top: 5px;
+    }
+  }
+
+  & input {
+    height: var(--multiselect-height);
+    padding-left: 8px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &--list-empty {
+    .multiselect__content-wrapper {
+      border: none !important;
+    }
+  }
+
+  &__content-wrapper {
+    z-index: 99;
+    width: 100%;
+    display: block;
+    background-color: var(--white);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-1);
+    overflow: auto;
+    padding: 0;
+    border: 1px solid var(--grey-l-5);
+    border-top: none;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+
+    & ul {
+      width: 100%;
+      padding: 0;
+    }
+
+    & li {
+      min-height: var(--multiselect-height);
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      width: 100%;
+      font-size: var(--font-size);
+
+      & .multiselect__option {
+        width: 100%;
+        padding-left: 10px;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        text-transform: none;
+        position: relative;
+        cursor: pointer;
+      }
+
+      & .multiselect__option--highlight {
+        background-color: var(--grey-l-4);
+      }
+    }
+  }
+
+  &.multiselect--arrow {
+    &.mobile {
+      height: 25px !important;
+    }
+    .multiselect__select {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 100%;
+      right: 1px;
+      top: 1px;
+      &:before {
+        position: relative;
+        color: var(--grey);
+        border-style: solid;
+        border-width: 5px 5px 0;
+        border-color: var(--grey) transparent transparent;
+        content: '';
+      }
+    }
+    &.multiselect--active {
+      .multiselect__select {
+        &:before {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    .multiselect__tags {
+      background-color: var(--grey-l-6);
+    }
+  }
+}

package/dist/scss/_variables.scss

@@ -11,6 +11,7 @@ $shadow-3: 0px 5px 6px 0px rgba(0, 0, 0, 0.30);
 $shadow-4: 0px 16px 20px 0px rgba(0, 0, 0, 0.20);
 
 :root {
+  --font-size--1: #{calc(var(--font-size) - 1px)};
   --font-size: #{$font-size};
   --font-size-2: #{calc(var(--font-size) + 2px)};
   --input-height: #{$input-height};

package/dist/scss/index.scss

@@ -7,3 +7,4 @@
 @import 'inputs';
 @import 'calendar';
 @import 'toolbar';
+@import 'multiselect';

package/dist/types/options.d.ts

@@ -11,6 +11,8 @@ export interface ldmuiOptions {
     'ld-tab'?: string;
     'ld-tabs'?: string;
     'ld-page-toolbar'?: string;
+    'ld-select-list-box'?: string;
+    'ld-checkbox'?: string;
   },
   viewport?: {
     isMobile: string;

package/dist/types/validation.d.ts

@@ -0,0 +1,20 @@
+import { ValidateFunction } from '@/mixins/validators';
+
+export interface IInput {
+  uid: number;
+  validate: ValidateFunction;
+  reset(): void;
+  resetValidation(): void;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  __cardSection: string | number;
+}
+
+export interface IWatcher {
+  uid: number;
+  valid: () => void;
+  shouldValidate: () => void;
+}
+
+export {
+  ValidateFunction
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.0-dev-12",
+  "version": "1.0.0-dev-13",
   "description": "ldm ui",
   "main": "dist/index.js",
   "engines": {
@@ -41,6 +41,7 @@
     "@babel/plugin-transform-typescript": "7.23.6",
     "@babel/preset-env": "7.23.6",
     "@babel/preset-typescript": "7.23.3",
+    "@floating-ui/dom": "^1.6.3",
     "@popperjs/core": "^2.11.8",
     "@types/babel__core": "^7",
     "@types/babel__plugin-transform-runtime": "^7",
@@ -71,6 +72,7 @@
     "postcss-loader": "7.3.3",
     "sass": "1.69.5",
     "sass-loader": "13.3.2",
+    "string-replace-loader": "^3.1.0",
     "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.10",
     "ts-jest": "29.0.3",

package/dist/css/main.css

@@ -1,14 +0,0 @@
-.loader[data-v-a5beedac]{width:100%;height:100%;top:0px;left:0px;display:flex;justify-content:center;align-items:center;overflow:hidden;transition:opacity 0.15s linear}.loader__icon[data-v-a5beedac]{vertical-align:middle;height:48px}.loader__icon-gray[data-v-a5beedac]{color:var(--grey-l-5)}.loader .circle.small[data-v-a5beedac]{width:calc(var(--font-size) + 4px);height:calc(var(--font-size) + 4px);border-width:3px}.loader .circle.big[data-v-a5beedac]{width:calc(var(--font-size) * 3);height:calc(var(--font-size) * 3);border-width:3px}.loader .circle[data-v-a5beedac]{animation:rotating-a5beedac 0.7s linear infinite;width:calc(var(--font-size) * 2);height:calc(var(--font-size) * 2);border-radius:50%;border:2px solid transparent}.loader.loader__color-primary[data-v-a5beedac]:not(.loader__transparent){background:rgba(255,255,255,0.5)}.loader.loader__color-primary .circle[data-v-a5beedac]{border-right-color:var(--primary);border-bottom-color:var(--primary)}.loader.loader__color-white[data-v-a5beedac]{background:none}.loader.loader__color-white .circle[data-v-a5beedac]{border-right-color:var(--white);border-bottom-color:var(--white)}.loader.loader__white-bg[data-v-a5beedac]:not(.loader__transparent){background:#fff}.loading-mask-global[data-v-a5beedac]{position:fixed !important;width:100vw !important;height:100vh !important}.loading-mask[data-v-a5beedac]{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden}.loader__relative[data-v-a5beedac]{position:relative}@-moz-keyframes rotating-a5beedac{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-webkit-keyframes rotating-a5beedac{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-o-keyframes rotating-a5beedac{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes rotating-a5beedac{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
-
-.ld-splitter[data-v-c282e58e]{height:inherit;display:flex}.ld-splitter .splitter-pane[data-v-c282e58e]{height:inherit;overflow-y:auto;background:var(--white)}.ld-splitter .splitter[data-v-c282e58e]{display:flex;align-items:center;width:7px;background-color:var(--white) !important;border-width:0 1px;border-color:var(--grey-l-5);border-style:solid}.ld-splitter.splitter[data-v-c282e58e]{width:100%;border-left:none;border-right:none}
-
-.label[data-v-12071c41]{word-wrap:break-word;max-width:100%;padding-bottom:2px;color:var(--label) !important;font-size:var(--font-size)}.label-wrapper[data-v-12071c41]{display:flex;align-items:center;min-height:var(--input-height)}.require[data-v-12071c41]::after{content:'*';display:inline-block;color:var(--error)}
-
-.input-class[data-v-7ded9864]{height:var(--input-height);font-size:var(--font-size);max-width:100%;border-radius:var(--border-radius);border:1px solid var(--grey-l-5);padding:0 6px}.input-class[data-v-7ded9864]:not(.disabled){background-color:var(--white)}.input-class[data-v-7ded9864]:focus{border:1px solid var(--grey-l-4);outline:none}.input-class__suffix[data-v-7ded9864]{position:absolute;top:3px;right:6px;color:var(--label)}
-
-.ld-datepicker[data-v-2278e290]{min-width:100%;max-width:100%;width:100%;height:100%;font-size:inherit !important;display:flex}.ld-datepicker.column[data-v-2278e290]{flex-flow:column nowrap}.ld-datepicker-validate[data-v-2278e290]{overflow:hidden;height:20px}.custom-time-picker[data-v-2278e290]{max-width:var(--date-time-width);border-radius:var(--border-radius);background-color:var(--white);font-size:inherit !important}.custom-time-picker-validate[data-v-2278e290]{overflow:hidden;height:20px}.date-input[data-v-2278e290]{padding-left:5px;width:100%;font-size:var(--font-size)}.time-input[data-v-2278e290]{width:100%;padding-left:5px;font-size:var(--font-size)}.time-input-btn[data-v-2278e290]{padding-right:5px}.dt-col[data-v-2278e290]{max-width:110px}.time-selector[data-v-2278e290]{display:flex;flex-wrap:wrap;max-width:186px;padding:3px}.time-selector>span[data-v-2278e290]{display:inline-block;width:100%;text-align:center;font-family:'Roboto';font-size:var(--font-size-2);font-weight:700}.time-selector .v-btn[data-v-2278e290]{width:30px !important;height:30px !important;max-width:30px !important;max-height:30px !important;min-width:30px !important;min-height:30px !important;margin:3px}[data-v-2278e290]  .vc-popover-content-wrapper{position:fixed !important}[data-v-2278e290]  .v-input--is-disabled input{color:var(--text) !important}[data-v-2278e290]  .vc-popover-content{border-color:var(--grey-l-5)}[data-v-2278e290]  .vc-title span{color:var(--text);font-size:var(--font-size-2);font-weight:600;font-family:'Roboto'}[data-v-2278e290]  .vc-arrow{color:var(--grey)}[data-v-2278e290]  .vc-weekday{color:var(--grey-l-2);font-size:var(--font-size);font-weight:600;font-family:'Roboto'}[data-v-2278e290]  .vc-day-content{color:var(--text);font-size:var(--font-size);font-weight:400;font-family:'Roboto'}[data-v-2278e290]  .vc-day-content.vc-disabled{color:var(--grey-l-2) !important}[data-v-2278e290]  .vc-day-content.vc-highlight-content-solid{color:var(--white) !important;font-weight:600 !important}
-
-.ld-tabs[data-v-2882a2f2]{margin-left:0;display:flex;height:100%;width:100%;overflow-y:auto}.ld-tabs .header-text[data-v-2882a2f2]{font-size:var(--font-size-2)}.ld-tabs-mobile[data-v-2882a2f2]{height:100%}.ld-tabs .body[data-v-2882a2f2]{display:flex;flex-flow:column nowrap;max-width:100%;width:100%;height:100%;justify-content:space-between;padding-top:3px}.ld-tabs .vertical-body[data-v-2882a2f2]{--w: 44px;display:flex;flex-flow:column nowrap;width:calc(100% - var(--w)) !important;height:100%}.v-window[data-v-2882a2f2]{background-color:var(--white);box-shadow:1px 0 var(--grey-l-5),-1px 0 0 var(--grey-l-5);overflow-y:auto;height:100%;width:100%}.vertical-window.v-window[data-v-2882a2f2]{padding:10px 12px;border-bottom:1px solid var(--grey-l-5);border-right:1px solid var(--grey-l-5);border-top:1px solid var(--grey-l-5)}[data-v-2882a2f2]  .ld-tabs .v-tab{background-color:transparent}[data-v-2882a2f2]  .ld-tabs .v-slide-group-item--active{background-color:var(--white)}[data-v-2882a2f2]  .v-window.mobile .tg-field .v-row .v-col{flex:1 0 0 !important}[data-v-2882a2f2]  .v-window.mobile .tg-field .text-viewer-wrapper .v-col{flex:1 0 0 !important}[data-v-2882a2f2]  .vertical-tab .v-tab{justify-content:flex-start;border:1px solid var(--grey-l-5);border-radius:0 !important;text-transform:none !important;width:100%;min-width:auto !important}[data-v-2882a2f2]  .vertical-tab .v-tab:last-child{border-bottom:1px solid var(--grey-l-5) !important}[data-v-2882a2f2]  .vertical-tab .v-slide-group__content{flex-flow:column nowrap;height:100% !important;width:100% !important}[data-v-2882a2f2]  .vertical-tab .v-slide-group__content .v-btn__content{text-overflow:ellipsis;display:inline-flex;justify-content:flex-start;gap:4px;white-space:nowrap;overflow:hidden}[data-v-2882a2f2]  .v-tab{height:var(--ld-tab-height) !important;display:flex !important;text-transform:uppercase !important;border-bottom:none !important;padding:0 12px !important;font-size:var(--font-size);color:var(--text) !important;background-color:var(--white);letter-spacing:0 !important}[data-v-2882a2f2]  .v-tab.v-slide-group-item--active{border-right-color:transparent}[data-v-2882a2f2]  .v-slide-group-item--active .v-btn__content{font-weight:bold;color:var(--primary) !important}[data-v-2882a2f2]  .v-btn:hover::before{background-color:inherit}[data-v-2882a2f2]  .v-slide-group--vertical{border-color:var(--grey-l-5);border:1px}[data-v-2882a2f2]  .v-slide-group--vertical .v-tab__slider{width:0px}[data-v-2882a2f2]  .v-tabs-bar{flex:none;height:fit-content;height:-moz-max-content;max-height:fit-content;max-height:-moz-max-content;z-index:1}[data-v-2882a2f2]  .v-window-item{height:100%}[data-v-2882a2f2]  .ld-tabs-mobile.hide-tabs .v-tab{display:none !important}[data-v-2882a2f2]  .ld-tabs-mobile.hide-body .v-slide-group{width:100% !important}[data-v-2882a2f2]  .ld-tabs-mobile.hide-body .v-window{display:none !important}[data-v-2882a2f2]  .v-tabs-mobile .v-slide-group__content .v-btn__content{display:block !important}
-
-.v-toolbar[data-v-79e04ede]{position:relative;background-color:var(--white);box-shadow:var(--shadow-1);z-index:1}.toolbar-wrapper[data-v-79e04ede]{display:grid;width:100%;height:100%;padding:0 12px}.toolbar-wrapper[data-v-79e04ede]:not(.--preview){grid-template-columns:100%;grid-template-rows:var(--input-height);row-gap:4px}.toolbar-wrapper.--preview[data-v-79e04ede]{grid-template-columns:1fr}.toolbar-inner[data-v-79e04ede]{display:grid;grid-template-rows:100%;grid-template-columns:1fr max-content;column-gap:8px}.toolbar-caption[data-v-79e04ede]{--left: calc(var(--input-height) + 8px);display:flex;align-items:center;position:absolute;height:100%;width:calc(100% - var(--left));top:0;left:var(--left)}
-