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

Vue component library for Dialpad's design system Dialtone

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./combobox-loading-list.cjs"),o=require("./combobox-empty-list.cjs"),l=require("../../common/utils/index.cjs"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a=require("../../common/mixins/keyboard-list-navigation.cjs"),d=require("./combobox-constants.cjs"),h={name:"DtCombobox",components:{ComboboxLoadingList:n.default,ComboboxEmptyList:o.default},mixins:[a.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:i=>Object.values(d.COMBOBOX_LABEL_SIZES).includes(i)},description:{type:String,default:""},listId:{type:String,default(){return l.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}},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(i){this.listRenderedOutside||(this.setInitialHighlightIndex(),this.$emit("opened",i)),!i&&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(i){if(this.loading)return;const t=i.target.closest("li");t&&this.highlightId!==t.id&&this.setHighlightId(t.id)},getListElement(){var i;return this.outsideRenderedListRef??((i=this.$refs.listWrapper)==null?void 0:i.querySelector(`#${this.listId}`))},clearHighlightIndex(){this.showList&&this.setHighlightIndex(-1)},afterHighlight(){this.loading||this.$emit("highlight",this.highlightIndex)},onEnterKey(){var i;this.loading||this.emptyList||this.highlightIndex>=0&&(this.$emit("select",this.highlightIndex),this.clickOnSelect&&((i=this.activeItemEl)==null||i.click()))},onEscapeKey(){this.$emit("escape")},onOpen(i,t){var s;this.outsideRenderedListRef=t,(s=this.outsideRenderedListRef)==null||s.addEventListener("mousemove",this.onMouseHighlight),this.$emit("opened",i),i&&this.setInitialHighlightIndex()},onKeyValidation(i,t){!this.showList||!this.getListElement()||this[t](i)},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.`)}}};var u=function(){var t=this,s=t._self._c;return s("div",{on:{keydown:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"esc",27,e.key,["Esc","Escape"])?null:(e.stopPropagation(),t.onKeyValidation(e,"onEscapeKey"))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")||e.ctrlKey||e.shiftKey||e.altKey||e.metaKey?null:t.onKeyValidation(e,"onEnterKey")},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:(e.stopPropagation(),e.preventDefault(),t.onKeyValidation(e,"onUpKey"))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:(e.stopPropagation(),e.preventDefault(),t.onKeyValidation(e,"onDownKey"))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"home",void 0,e.key,void 0)?null:(e.stopPropagation(),e.preventDefault(),t.onKeyValidation(e,"onHomeKey"))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"end",void 0,e.key,void 0)?null:(e.stopPropagation(),e.preventDefault(),t.onKeyValidation(e,"onEndKey"))}]}},[s("div",{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[t._t("input",null,{inputProps:t.inputProps})],2),t.showList?s("div",{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{mouseleave:t.clearHighlightIndex,focusout:t.clearHighlightIndex,"!mousemove":function(e){return t.onMouseHighlight.apply(null,arguments)}}},[t.loading&&!t.listRenderedOutside?s("combobox-loading-list",t._b({},"combobox-loading-list",t.listProps,!1)):t.emptyList&&(t.emptyStateMessage||t.$slots.emptyListItem)&&!t.listRenderedOutside?s("combobox-empty-list",t._b({attrs:{message:t.emptyStateMessage,"item-class":t.emptyStateClass}},"combobox-empty-list",t.listProps,!1),[t._t("emptyListItem")],2):t._t("list",null,{listProps:t.listProps,opened:t.onOpen,clearHighlightIndex:t.clearHighlightIndex})],2):t._e()])},p=[],g=r.n(h,u,p);const f=g.exports;exports.default=f;
//# sourceMappingURL=combobox.cjs.map