@dialpad/dialtone-vue/dist/combobox-DhjZxfUw.cjs

Vue component library for Dialpad's design system Dialtone

require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/utils/index.cjs`),t=require(`./_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./common/mixins/keyboard-list-navigation.cjs`),r=require(`./lib/combobox/combobox-loading-list.cjs`),i=require(`./lib/combobox/combobox-empty-list.cjs`),a=require(`./lib/combobox/combobox-constants.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtCombobox`,components:{ComboboxLoadingList:r.default,ComboboxEmptyList:i.default},mixins:[n.default({indexKey:`highlightIndex`,idKey:`highlightId`,listElementKey:`getListElement`,afterHighlightMethod:`afterHighlight`,beginningOfListMethod:`beginningOfListMethod`,endOfListMethod:`endOfListMethod`,activeItemKey:`activeItemEl`})],props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:e=>Object.values(a.COMBOBOX_LABEL_SIZES).includes(e)},description:{type:String,default:``},listId:{type:String,default(){return e.getUniqueString()}},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},showList:{type:Boolean,default:!1},listRenderedOutside:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:``},emptyStateClass:{type:[String,Object,Array],default:``},clickOnSelect:{type:Boolean,default:!1}},emits:[`select`,`escape`,`highlight`,`opened`],data(){return{outsideRenderedListRef:null,hasSlotContent:e.hasSlotContent}},computed:{inputProps(){return{label:this.label,labelVisible:this.labelVisible,size:this.size,description:this.description,role:`combobox`,"aria-label":this.label,"aria-expanded":this.showList.toString(),"aria-owns":this.listId,"aria-haspopup":`listbox`,"aria-activedescendant":this.activeItemId,"aria-controls":this.listId}},listProps(){return{role:`listbox`,id:this.listId,class:`d-ps-relative`,"aria-label":this.label}},beginningOfListMethod(){return this.onBeginningOfList||this.jumpToEnd},endOfListMethod(){return this.onEndOfList||this.jumpToBeginning},activeItemId(){if(!(!this.showList||this.highlightIndex<0||this.loading))return this.highlightId},activeItemEl(){return this.highlightId?this.getListElement().querySelector(`#`+this.highlightId):``}},watch:{showList(e){this.listRenderedOutside||(this.setInitialHighlightIndex(),this.$emit(`opened`,e)),!e&&this.outsideRenderedListRef&&(this.outsideRenderedListRef.removeEventListener(`mousemove`,this.onMouseHighlight),this.outsideRenderedListRef=null)},loading(){this.$nextTick(()=>{this.setInitialHighlightIndex()})},$props:{deep:!0,immediate:!0,handler(){this.validateEmptyListProps()}}},created(){this.validateEmptyListProps()},methods:{onMouseHighlight(e){if(this.loading)return;let t=e.target.closest(`li`);t&&this.highlightId!==t.id&&this.setHighlightId(t.id)},getListElement(){return this.outsideRenderedListRef??this.$refs.listWrapper?.querySelector(`#${this.listId}`)},clearHighlightIndex(){this.showList&&this.setHighlightIndex(-1)},afterHighlight(){this.loading||this.$emit(`highlight`,this.highlightIndex)},onEnterKey(){this.loading||this.emptyList||this.highlightIndex>=0&&(this.$emit(`select`,this.highlightIndex),this.clickOnSelect&&this.activeItemEl?.click())},onEscapeKey(){this.$emit(`escape`)},onOpen(e,t){this.outsideRenderedListRef=t,this.outsideRenderedListRef?.addEventListener(`mousemove`,this.onMouseHighlight),this.$emit(`opened`,e),e&&this.setInitialHighlightIndex()},onKeyValidation(e,t){!this.showList||!this.getListElement()||this[t](e)},setInitialHighlightIndex(){this.showList&&this.$nextTick(()=>{this.setHighlightIndex(this.loading?-1:0)})},validateEmptyListProps(){this.$slots.emptyListItem||this.emptyList&&!this.emptyStateMessage&&console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
      empty message.`)}}},c={"data-qa":`dt-combobox-input-wrapper`};function l(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`combobox-loading-list`),l=(0,o.resolveComponent)(`combobox-empty-list`);return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,{onKeydown:[t[3]||(t[3]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onEscapeKey`),[`stop`]),[`esc`])),t[4]||(t[4]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onEnterKey`),[`exact`]),[`enter`])),t[5]||(t[5]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onUpKey`),[`stop`,`prevent`]),[`up`])),t[6]||(t[6]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onDownKey`),[`stop`,`prevent`]),[`down`])),t[7]||(t[7]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onHomeKey`),[`stop`,`prevent`]),[`home`])),t[8]||(t[8]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onEndKey`),[`stop`,`prevent`]),[`end`]))]},[(0,o.createElementVNode)(`div`,c,[(0,o.renderSlot)(e.$slots,`input`,{inputProps:a.inputProps})]),n.showList?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,ref:`listWrapper`,"data-qa":`dt-combobox-list-wrapper`,onMouseleave:t[0]||(t[0]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onFocusout:t[1]||(t[1]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onMousemoveCapture:t[2]||(t[2]=(...e)=>a.onMouseHighlight&&a.onMouseHighlight(...e))},[n.loading&&!n.listRenderedOutside?((0,o.openBlock)(),(0,o.createBlock)(s,(0,o.normalizeProps)((0,o.mergeProps)({key:0},a.listProps)),null,16)):n.emptyList&&(n.emptyStateMessage||i.hasSlotContent(e.$slots.emptyListItem))&&!n.listRenderedOutside?((0,o.openBlock)(),(0,o.createBlock)(l,(0,o.mergeProps)({key:1},a.listProps,{message:n.emptyStateMessage,"item-class":n.emptyStateClass}),{default:(0,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`emptyListItem`)]),_:3},16,[`message`,`item-class`])):(0,o.renderSlot)(e.$slots,`list`,{key:2,listProps:a.listProps,opened:a.onOpen,clearHighlightIndex:a.clearHighlightIndex})],544)):(0,o.createCommentVNode)(``,!0)],32)}var u=t.t(s,[[`render`,l]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});
//# sourceMappingURL=combobox-DhjZxfUw.cjs.map