@dialpad/dialtone/dist/vue3/lib/dropdown/dropdown.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("../../common/mixins/keyboard-list-navigation.cjs"),l=require("./dropdown-constants.cjs"),c=require("../../common/utils/index.cjs"),o=require("../../common/constants/index.cjs"),y=require("../../common/mixins/sr-only-close-button.cjs"),m=require("../../shared/sr_only_close_button.cjs"),t=require("vue"),E=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),f=require("../popover/popover.cjs"),d=require("../list-item/list-item-constants.cjs"),_=require("../popover/popover-constants.cjs"),S={compatConfig:{MODE:3},name:"DtDropdown",components:{DtPopover:f.default,SrOnlyCloseButton:m.default},mixins:[g.default({indexKey:"highlightIndex",idKey:"highlightId",listElementKey:"getListElement",listItemRole:"menuitem",afterHighlightMethod:"afterHighlight",beginningOfListMethod:"beginningOfListMethod",endOfListMethod:"endOfListMethod",activeItemKey:"activeItemEl",focusOnKeyboardNavigation:!0}),y.default],inheritAttrs:!1,props:{open:{type:Boolean,default:null},openOnContext:{type:Boolean,default:!1},padding:{type:String,default:"small",validator:e=>Object.keys(l.DROPDOWN_PADDING_CLASSES).some(n=>n===e)},modal:{type:Boolean,default:!0},contentWidth:{type:String,default:null},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},listId:{type:String,default(){return c.getUniqueString()}},navigationType:{type:String,default:d.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,validator:e=>Object.values(d.LIST_ITEM_NAVIGATION_TYPES).includes(e)},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"bottom"},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},listClass:{type:[String,Array,Object],default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>_.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},tether:{type:Boolean,default:!0},transition:{type:String,default:"fade"}},emits:["keydown","highlight","update:open","opened","update:open"],data(){return{LIST_ITEM_NAVIGATION_TYPES:d.LIST_ITEM_NAVIGATION_TYPES,DROPDOWN_PADDING_CLASSES:l.DROPDOWN_PADDING_CLASSES,EVENT_KEYNAMES:o.EVENT_KEYNAMES,openedWithKeyboard:!1,isOpen:null}},computed:{dropdownListeners(){return{opened:e=>{this.updateInitialHighlightIndex(e)},keydown:e=>{switch(e.code){case o.EVENT_KEYNAMES.up:case o.EVENT_KEYNAMES.arrowup:this.onUpKeyPress(e),e.stopPropagation(),e.preventDefault();break;case o.EVENT_KEYNAMES.down:case o.EVENT_KEYNAMES.arrowdown:this.onDownKeyPress(e),e.stopPropagation(),e.preventDefault();break;case o.EVENT_KEYNAMES.space:case o.EVENT_KEYNAMES.spacebar:this.onSpaceKey();break;case o.EVENT_KEYNAMES.enter:this.onEnterKey();break;case o.EVENT_KEYNAMES.home:this.onHomeKeyPress(e),e.stopPropagation(),e.preventDefault();break;case o.EVENT_KEYNAMES.end:this.onEndKeyPress(e),e.stopPropagation(),e.preventDefault();break;default:this.onKeyPress(e);break}this.$emit("keydown",e)}}},beginningOfListMethod(){return this.onBeginningOfList||this.jumpToEnd},endOfListMethod(){return this.onEndOfList||this.jumpToBeginning},activeItemEl(){return this.getListElement().querySelector("#"+this.highlightId)},isArrowKeyNav(){return this.navigationType===this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS},listClasses(){return["d-dropdown-list",l.DROPDOWN_PADDING_CLASSES[this.padding],this.listClass,{"d-context-menu-list":this.openOnContext}]},shouldOpenWithArrowKeys(){return!this.openOnContext}},methods:{onMouseHighlight(e){const n=e.target.closest("li");n&&n.role&&this.highlightId!==n.id&&(this.setHighlightId(n.id),n.focus())},getListElement(){return this.$refs.listWrapper},clearHighlightIndex(){this.setHighlightIndex(-1)},afterHighlight(){this.visuallyHiddenClose&&this.highlightIndex===this._itemsLength()-1||this.$emit("highlight",this.highlightIndex)},updateInitialHighlightIndex(e){this.isOpen=e,e?(this.openedWithKeyboard&&this.isArrowKeyNav&&this.setHighlightIndex(0),this.$emit("opened",!0)):(this.clearHighlightIndex(),this.openedWithKeyboard=!1,this.$emit("opened",!1))},onSpaceKey(){this.open||(this.openedWithKeyboard=!0)},onEnterKey(){this.open||(this.openedWithKeyboard=!0)},onUpKeyPress(){if(!this.isOpen){this.openedWithKeyboard=!0;return}if(this.isArrowKeyNav)return this.onUpKey()},onDownKeyPress(){if(!this.isOpen){this.openedWithKeyboard=!0;return}if(this.isArrowKeyNav)return this.onDownKey()},onHomeKeyPress(){if(!(!this.isOpen||!this.isArrowKeyNav))return this.onHomeKey()},onEndKeyPress(){if(!(!this.isOpen||!this.isArrowKeyNav))return this.onEndKey()},onKeyPress(e){if(!(!this.isOpen||!this.isArrowKeyNav||!this.isValidLetter(e.key)))return e.stopPropagation(),e.preventDefault(),this.onNavigationKey(e.key)}}},K=["id"];function N(e,n,i,O,h,s){const u=t.resolveComponent("sr-only-close-button"),p=t.resolveComponent("dt-popover");return t.openBlock(),t.createBlock(p,t.mergeProps({ref:"popover","content-width":i.contentWidth,open:i.open,placement:i.placement,"initial-focus-element":h.openedWithKeyboard?"first":"dialog","fallback-placements":i.fallbackPlacements,padding:"none",role:"menu","append-to":i.appendTo,modal:i.modal,"max-height":i.maxHeight,"max-width":i.maxWidth,"open-with-arrow-keys":s.shouldOpenWithArrowKeys,"open-on-context":i.openOnContext},e.$attrs,{tether:i.tether,transition:i.transition},t.toHandlers(s.dropdownListeners)),{anchor:t.withCtx(({attrs:r})=>[t.renderSlot(e.$slots,"anchor",t.mergeProps({ref:"anchor"},r))]),content:t.withCtx(({close:r})=>[t.createElementVNode("ul",{id:i.listId,ref:"listWrapper",class:t.normalizeClass(s.listClasses),"data-qa":"dt-dropdown-list-wrapper",onMouseleave:n[0]||(n[0]=(...a)=>s.clearHighlightIndex&&s.clearHighlightIndex(...a)),onMousemoveCapture:n[1]||(n[1]=(...a)=>s.onMouseHighlight&&s.onMouseHighlight(...a))},[t.renderSlot(e.$slots,"list",{close:r}),e.showVisuallyHiddenClose?(t.openBlock(),t.createBlock(u,{key:0,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,tabindex:s.isArrowKeyNav?-1:0,onClose:r},null,8,["visually-hidden-close-label","tabindex","onClose"])):t.createCommentVNode("",!0)],42,K)]),footerContent:t.withCtx(({close:r})=>[t.renderSlot(e.$slots,"footer",{close:r})]),_:3},16,["content-width","open","placement","initial-focus-element","fallback-placements","append-to","modal","max-height","max-width","open-with-arrow-keys","open-on-context","tether","transition"])}const I=E._(S,[["render",N]]);exports.default=I;
//# sourceMappingURL=dropdown.cjs.map