@dialpad/dialtone/dist/vue3/lib/combobox-with-popover/combobox-with-popover.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("../combobox/combobox-loading-list.cjs"),y=require("../combobox/combobox-empty-list.cjs"),u=require("../../common/utils/index.cjs"),t=require("vue"),L=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),h=require("../popover/popover-constants.cjs"),_=require("../popover/popover.cjs"),x=require("../combobox/combobox.cjs"),m=require("../dropdown/dropdown-constants.cjs"),w=require("../combobox/combobox-constants.cjs"),C={compatConfig:{MODE:3},name:"DtRecipeComboboxWithPopover",components:{DtCombobox:x.default,DtPopover:_.default,ComboboxLoadingList:S.default,ComboboxEmptyList:y.default},props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:e=>Object.values(w.COMBOBOX_LABEL_SIZES).includes(e)},description:{type:String,default:""},showList:{type:Boolean,default:null},listId:{type:String,default(){return u.getUniqueString()}},listClass:{type:[String,Array,Object],default:""},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},padding:{type:String,default:"small",validator:e=>Object.keys(m.DROPDOWN_PADDING_CLASSES).some(n=>n===e)},contentWidth:{type:String,default:null,validator:e=>h.POPOVER_CONTENT_WIDTHS.includes(e)},openWithArrowKeys:{type:Boolean,default:!1},popoverOffset:{type:Array,default:()=>[0,4]},popoverSticky:{type:[Boolean,String],default:!1},hasSuggestionList:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>h.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},transition:{type:String,default:"fade"}},emits:["select","escape","highlight","opened"],data(){return{DROPDOWN_PADDING_CLASSES:m.DROPDOWN_PADDING_CLASSES,isListShown:!1,isInputFocused:!1,isListFocused:!1,externalAnchor:u.getUniqueString(),hasSlotContent:u.hasSlotContent}},computed:{comboboxListeners(){return{...this.$attrs,onSelect:this.onSelect,onEscape:this.onEscape,onHighlight:this.onHighlight}}},watch:{showList:{handler:function(e){e!==null&&(this.isListShown=e)},immediate:!0},isListShown(e){e?window.addEventListener("mousedown",this.onFocusOut):window.removeEventListener("mousedown",this.onFocusOut),this.onOpened(e)}},methods:{handleDisplayList(e){!this.hasSuggestionList&&e&&this.showComboboxList(),!this.hasSuggestionList&&!e&&this.closeComboboxList()},showComboboxList(){this.showList==null&&(this.isListShown=!0)},closeComboboxList(){this.showList==null&&(this.isListShown=!1)},onSelect(e){this.loading||(this.$emit("select",e),this.hasSuggestionList||this.closeComboboxList())},onEscape(){this.$emit("escape"),this.closeComboboxList()},onHighlight(e){this.loading||this.$emit("highlight",e)},onOpened(e){this.$emit("opened",e)},onFocusIn(e){var n;this.hasSuggestionList&&e&&((n=this.$refs.input)==null?void 0:n.querySelector("input"))===e.target&&this.showComboboxList()},onFocusOut(e){var r,i,s;const n=(i=(r=this.$refs.popover)==null?void 0:r.tip)==null?void 0:i.popper,o=this.$refs.input;(s=e.composedPath())!=null&&s.some(a=>[n,o].includes(a))||this.closeComboboxList()},openOnArrowKeyPress(){this.showList!==null||this.isListShown||!this.openWithArrowKeys||this.showComboboxList()}}},v=["id"],O={ref:"header"},E=["onMouseleave","onFocusout"],P={ref:"footer"};function D(e,n,o,r,i,s){const a=t.resolveComponent("combobox-loading-list"),p=t.resolveComponent("combobox-empty-list"),b=t.resolveComponent("dt-popover"),f=t.resolveComponent("dt-combobox");return t.openBlock(),t.createBlock(f,t.mergeProps({ref:"combobox",loading:o.loading,label:o.label,"label-visible":o.labelVisible,size:o.size,description:o.description,"empty-list":o.emptyList,"empty-state-message":o.emptyStateMessage,"show-list":i.isListShown,"on-beginning-of-list":o.onBeginningOfList,"on-end-of-list":o.onEndOfList,"list-rendered-outside":!0,"list-id":o.listId,"data-qa":"dt-combobox"},s.comboboxListeners),{input:t.withCtx(({inputProps:d})=>[t.createElementVNode("div",{id:i.externalAnchor,ref:"input",onFocusin:n[0]||(n[0]=(...l)=>s.onFocusIn&&s.onFocusIn(...l)),onKeydown:[n[1]||(n[1]=t.withKeys(l=>s.openOnArrowKeyPress(l),["up"])),n[2]||(n[2]=t.withKeys(l=>s.openOnArrowKeyPress(l),["down"]))]},[t.renderSlot(e.$slots,"input",{inputProps:d,onInput:s.handleDisplayList})],40,v)]),list:t.withCtx(({opened:d,listProps:l,clearHighlightIndex:c})=>[t.createVNode(b,{ref:"popover",open:i.isListShown,"onUpdate:open":n[3]||(n[3]=g=>i.isListShown=g),"hide-on-click":!1,"max-height":o.maxHeight,"max-width":o.maxWidth,offset:o.popoverOffset,sticky:o.popoverSticky,placement:"bottom-start","initial-focus-element":"none",padding:"none",role:"listbox","external-anchor":i.externalAnchor,"content-width":o.contentWidth,"content-appear":!0,"content-tabindex":null,modal:!1,"auto-focus":!1,"append-to":o.appendTo,transition:o.transition,onOpened:d},t.createSlots({content:t.withCtx(()=>[t.createElementVNode("div",{ref:"listWrapper",class:t.normalizeClass(["d-recipe-combobox-with-popover__list",i.DROPDOWN_PADDING_CLASSES[o.padding],o.listClass]),onMouseleave:c,onFocusout:c},[o.loading?(t.openBlock(),t.createBlock(a,t.normalizeProps(t.mergeProps({key:0},l)),null,16)):o.emptyList&&o.emptyStateMessage?(t.openBlock(),t.createBlock(p,t.mergeProps({key:1},l,{message:o.emptyStateMessage}),null,16,["message"])):t.renderSlot(e.$slots,"list",{key:2,listProps:l})],42,E)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:"headerContent",fn:t.withCtx(()=>[t.createElementVNode("div",O,[t.renderSlot(e.$slots,"header")],512)]),key:"0"}:void 0,i.hasSlotContent(e.$slots.footer)?{name:"footerContent",fn:t.withCtx(()=>[t.createElementVNode("div",P,[t.renderSlot(e.$slots,"footer")],512)]),key:"1"}:void 0]),1032,["open","max-height","max-width","offset","sticky","external-anchor","content-width","append-to","transition","onOpened"])]),_:3},16,["loading","label","label-visible","size","description","empty-list","empty-state-message","show-list","on-beginning-of-list","on-end-of-list","list-id"])}const A=L._(C,[["render",D]]);exports.default=A;
//# sourceMappingURL=combobox-with-popover.cjs.map