@dialpad/dialtone/dist/vue3/lib/combobox-multi-select/combobox-multi-select.cjs

Dialpad's Dialtone design system monorepo

Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../validation-messages/validation-messages.cjs`),i=require(`../chip/chip.cjs`),a=require(`../popover/popover-constants.cjs`),o=require(`../input/input.cjs`),s=require(`../combobox-with-popover/combobox-with-popover.cjs`),c=require(`./combobox-multi-select-constants.cjs`);let l=require(`vue`);var u={compatConfig:{MODE:3},name:`DtComboboxMultiSelect`,components:{DtComboboxWithPopover:s.default,DtInput:o.default,DtChip:i.default,DtValidationMessages:r.default},inheritAttrs:!1,props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},description:{type:String,default:``},placeholder:{type:String,default:`Select one or start typing`},inputMessages:{type:Array,default:()=>[],validator:t=>e.validationMessageValidator(t)},showInputMessages:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingMessage:{type:String,default:`loading...`},showList:{type:Boolean,default:null},listMaxHeight:{type:String,default:`300px`},selectedItems:{type:Array,default:function(){return[]}},maxSelected:{type:Number,default:0},maxSelectedMessage:{type:Array,default:function(){return[]}},hasSuggestionList:{type:Boolean,default:!0},size:{type:String,default:`md`,validator:e=>Object.values(c.MULTI_SELECT_SIZES).includes(e)},appendTo:{type:[HTMLElement,String],default:`body`,validator:e=>a.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},transition:{type:String,default:`fade`},collapseOnFocusOut:{type:Boolean,default:!1},listMaxWidth:{type:String,default:``},reservedRightSpace:{type:Number,default:64},chipMaxWidth:{type:String,default:``},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{type:[String,Object,Array],default:``},disabled:{type:Boolean,default:!1},dialogClass:{type:[String,Object,Array],default:``}},emits:[`input`,`select`,`remove`,`max-selected`,`keydown`,`chip-keydown`,`escape`,`enter`,`combobox-highlight`],data(){return{value:``,popoverOffset:[0,4],showValidationMessages:!1,resizeWindowObserver:null,initialInputHeight:null,CHIP_SIZES:c.CHIP_SIZES,hasSlotContent:t.hasSlotContent,inputFocused:!1,hideInputText:!1}},computed:{inputPlaceHolder(){return this.selectedItems?.length>0?``:this.placeholder},chipListeners(){return{keydown:e=>{this.disabled||(this.onChipKeyDown(e),this.$emit(`chip-keydown`,e))}}},inputListeners(){return{...t.extractVueListeners(this.$attrs),onInput:e=>{this.$emit(`input`,e),this.hasSuggestionList&&this.showComboboxList()},onKeydown:e=>{if(this.disabled)return;this.onInputKeyDown(e),this.$emit(`keydown`,e);let t=e.key?.toLowerCase();t===`escape`?this.$emit(`escape`,e):t===`enter`&&this.$emit(`enter`,e)},onClick:()=>{this.hasSuggestionList&&this.showComboboxList()}}},chipWrapperClass(){return{[`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]:!this.inputFocused&&this.collapseOnFocusOut}}},watch:{selectedItems:{deep:!0,handler:async function(){await this.initSelectedItems()}},chipMaxWidth:{async handler(){await this.initSelectedItems()}},async label(){await this.$nextTick(),this.setChipsTopPosition()},async description(){await this.$nextTick(),this.setChipsTopPosition()},size:{async handler(){await this.$nextTick();let e=this.getInput();this.revertInputPadding(e),this.initialInputHeight=e.getBoundingClientRect().height,this.setInputPadding(),this.setChipsTopPosition()}}},async mounted(){this.setInitialInputHeight(),this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),await this.initSelectedItems()},beforeUnmount(){this.resizeWindowObserver?.unobserve(document.body)},methods:{extractNonListeners:t.extractNonListeners,comboboxHighlight(e){this.$emit(`combobox-highlight`,e)},async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(e){this.$emit(`remove`,e),this.$refs.input?.focus()},onComboboxSelect(e){this.loading||(this.value=``,this.$emit(`select`,e))},showComboboxList(){this.showList??this.$refs.comboboxWithPopover?.showComboboxList()},closeComboboxList(){this.showList??this.$refs.comboboxWithPopover?.closeComboboxList()},getChips(){if(!this.selectedItems.length||!this.$refs.chips)return null;let e=new Set;return this.selectedItems.map(n=>this.$refs.chips.find((r,i)=>e.has(i)?!1:t.returnFirstEl(r.$el)?.querySelector(`.d-chip__label`)?.textContent?.trim()===n?(e.add(i),!0):!1)).filter(Boolean).map(e=>t.returnFirstEl(e.$el))},getChipButtons(){let e=this.getChips();return e&&e.map(e=>t.returnFirstEl(e).querySelector(`button`))},getLastChipButton(){let e=this.getChipButtons();return e&&e[e.length-1]},getLastChip(){let e=this.getChips();return e&&e[e.length-1]},getFirstChip(){let e=this.getChips();return e&&e[0]},getInput(){return this.$refs.input?.$refs.input},onChipKeyDown(e){let t=e.code?.toLowerCase();t===`arrowleft`?this.navigateBetweenChips(e.target,!0):t===`arrowright`&&(e.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(e.target,!1))},onInputKeyDown(e){let t=e.key?.toLowerCase();if(this.selectedItems.length>0&&e.target.selectionStart===0){if(e.target.selectionEnd!==e.target.selectionStart)return;(t===`backspace`||t===`arrowleft`)&&this.moveFromInputToChip()}},moveFromInputToChip(){this.getLastChipButton().focus(),this.$refs.input?.blur(),this.closeComboboxList()},moveFromChipToInput(){this.getLastChipButton().blur(),this.$refs.input?.focus(),this.showComboboxList()},navigateBetweenChips(e,t){let n=this.getChipButtons().indexOf(e),r=t?n-1:n+1;r<0||r>=this.$refs.chips?.length||(this.getChipButtons()[n].blur(),this.getChipButtons()[r].focus(),this.closeComboboxList())},setChipsTopPosition(){let e=this.getInput();if(!e)return;let t=this.$refs.inputSlotWrapper,n=e.getBoundingClientRect().top-t.getBoundingClientRect().top,r=this.$refs.chipsWrapper;r.style.top=n-c.CHIP_TOP_POSITION[this.size]+`px`},setInputPadding(){let e=this.getLastChip(),t=this.getInput(),n=this.$refs.chipsWrapper;if(!t||(this.revertInputPadding(t),this.popoverOffset=[0,4],!e)||this.collapseOnFocusOut&&!this.inputFocused)return;let r=e.offsetLeft+this.getFullWidth(e),i=t.getBoundingClientRect().width-r;i>this.reservedRightSpace?t.style.paddingLeft=r+`px`:t.style.paddingLeft=`4px`;let a=n.getBoundingClientRect().height-4,o=e.getBoundingClientRect().height-4,s=i>this.reservedRightSpace?e.offsetTop+2:a+o-9;t.style.paddingTop=`${s}px`},revertInputPadding(e){e.style.paddingLeft=``,e.style.paddingTop=``,e.style.paddingBottom=``},getFullWidth(e){let t=window.getComputedStyle(e);return e.offsetWidth+parseInt(t.marginLeft)+parseInt(t.marginRight)},setInputMinWidth(){let e=this.getFirstChip(),t=this.getInput();t&&(e?t.style.minWidth=this.getFullWidth(e)+4+`px`:t.style.minWidth=``)},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit(`max-selected`)):this.showValidationMessages=!1)},setInitialInputHeight(){let e=this.getInput();e&&(this.initialInputHeight=e.getBoundingClientRect().height)},async handleInputFocusIn(){this.inputFocused=!0,this.collapseOnFocusOut&&(this.hideInputText=!1,await this.$nextTick(),this.setInputPadding())},async handleInputFocusOut(){if(this.inputFocused=!1,this.collapseOnFocusOut){this.hideInputText=!0;let e=this.getInput();if(!e||!e.style.paddingTop)return;this.revertInputPadding(e)}}}},d={ref:`header`},f={key:1,class:`d-recipe-combobox-multi-select__list--loading`},p={ref:`footer`};function m(e,t,n,r,i,a){let o=(0,l.resolveComponent)(`dt-chip`),s=(0,l.resolveComponent)(`dt-input`),c=(0,l.resolveComponent)(`dt-validation-messages`),u=(0,l.resolveComponent)(`dt-combobox-with-popover`);return(0,l.openBlock)(),(0,l.createBlock)(u,(0,l.mergeProps)({ref:`comboboxWithPopover`,label:n.label,"show-list":n.showList,"max-height":n.listMaxHeight,"max-width":n.listMaxWidth,"popover-offset":i.popoverOffset,"has-suggestion-list":n.hasSuggestionList,"content-width":`anchor`,"append-to":n.appendTo,"dialog-class":n.dialogClass,transition:n.transition},a.extractNonListeners(e.$attrs),{onSelect:a.onComboboxSelect,onHighlight:a.comboboxHighlight}),(0,l.createSlots)({input:(0,l.withCtx)(({onInput:e})=>[(0,l.createElementVNode)(`span`,{ref:`inputSlotWrapper`,class:`d-recipe-combobox-multi-select__input-wrapper`,onFocusin:t[1]||(t[1]=(...e)=>a.handleInputFocusIn&&a.handleInputFocusIn(...e)),onFocusout:t[2]||(t[2]=(...e)=>a.handleInputFocusOut&&a.handleInputFocusOut(...e))},[(0,l.createElementVNode)(`span`,{ref:`chipsWrapper`,class:(0,l.normalizeClass)([`d-recipe-combobox-multi-select__chip-wrapper`,a.chipWrapperClass])},[((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)(n.selectedItems,(e,t)=>((0,l.openBlock)(),(0,l.createBlock)(o,(0,l.mergeProps)({ref_for:!0,ref:`chips`,key:`${t}-${e}`,"label-class":[`d-chip__label`],class:[`d-recipe-combobox-multi-select__chip`,{"d-recipe-combobox-multi-select__chip--truncate":!!n.chipMaxWidth}],style:{maxWidth:n.chipMaxWidth},size:i.CHIP_SIZES[n.size],disabled:n.disabled},(0,l.toHandlers)(a.chipListeners),{onKeydown:(0,l.withKeys)(t=>a.onChipRemove(e),[`backspace`]),onClose:t=>a.onChipRemove(e)}),{default:(0,l.withCtx)(()=>[(0,l.createTextVNode)((0,l.toDisplayString)(e),1)]),_:2},1040,[`class`,`style`,`size`,`disabled`,`onKeydown`,`onClose`]))),128))],2),(0,l.createVNode)(s,(0,l.mergeProps)({ref:`input`,modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=e=>i.value=e),class:`d-recipe-combobox-multi-select__input`,"input-class":[n.inputClass,{"d-recipe-combobox-multi-select__input--hidden":i.hideInputText}],"input-wrapper-class":n.inputWrapperClass,disabled:n.disabled,"aria-label":n.label,label:n.labelVisible?n.label:``,description:n.description,placeholder:a.inputPlaceHolder,"show-messages":n.showInputMessages,messages:n.inputMessages,size:n.size},a.inputListeners,{onInput:e}),null,16,[`modelValue`,`input-class`,`input-wrapper-class`,`disabled`,`aria-label`,`label`,`description`,`placeholder`,`show-messages`,`messages`,`size`,`onInput`]),(0,l.createVNode)(c,{"validation-messages":n.maxSelectedMessage,"show-messages":i.showValidationMessages},null,8,[`validation-messages`,`show-messages`])],544)]),list:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,{ref:`list`,class:`d-recipe-combobox-multi-select__list`,onMousedown:t[3]||(t[3]=(0,l.withModifiers)(()=>{},[`prevent`]))},[n.loading?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,f,(0,l.toDisplayString)(n.loadingMessage),1)):(0,l.renderSlot)(e.$slots,`list`,{key:0})],544)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:`header`,fn:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,d,[(0,l.renderSlot)(e.$slots,`header`)],512)]),key:`0`}:void 0,i.hasSlotContent(e.$slots.footer)?{name:`footer`,fn:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,p,[(0,l.renderSlot)(e.$slots,`footer`)],512)]),key:`1`}:void 0]),1040,[`label`,`show-list`,`max-height`,`max-width`,`popover-offset`,`has-suggestion-list`,`append-to`,`dialog-class`,`transition`,`onSelect`,`onHighlight`])}var h=n.t(u,[[`render`,m]]);exports.default=h;
//# sourceMappingURL=combobox-multi-select.cjs.map