@wikimedia/codex/dist/modules/CdxMenuButton.cjs

Codex Design System for Wikimedia

"use strict";const t=require("vue"),q=require("./CdxButton.cjs"),w=require("./CdxMenu.cjs"),B=require("./useFieldData.cjs"),k=require("./useFloatingMenu.cjs"),S=require("./useModelWrapper.cjs"),A=require("./useSplitAttributes.cjs"),K=require("./_plugin-vue_export-helper.js"),M=t.defineComponent({name:"CdxMenuButton",components:{CdxButton:q,CdxMenu:w},inheritAttrs:!1,props:{selected:{type:[String,Number,Array,null],required:!0},menuItems:{type:Array,required:!0},menuConfig:{type:Object,default:()=>({})},action:{type:String,default:"default"},weight:{type:String,default:"quiet"},disabled:{type:Boolean,default:!1},footer:{type:Object,default:null}},emits:["update:selected"],setup(e,{emit:u,attrs:i}){const o=t.ref(),a=t.ref(),p=t.toRef(e,"selected"),l=S(p,u,"update:selected"),n=t.ref(!1),r=t.useId(),c=t.useId(),{computedDisabled:m}=B(t.toRef(e,"disabled")),{rootClasses:f,rootStyle:b,otherAttrs:g}=A(i);let s=!1;function y(d){if(!(!o.value||m.value||e.menuItems.length===0||d.key===" ")){if(d.key==="Enter"){const C=o.value.getHighlightedMenuItem(),I=o.value.getHighlightedViaKeyboard();n.value&&C&&I?o.value.delegateKeyNavigation(d):(d.preventDefault(),n.value=!n.value),s=!0;return}o.value.delegateKeyNavigation(d)}}function v(){if(s){s=!1;return}n.value=!n.value}function h(){n.value=!1}return k(a,o,{useAvailableWidth:!0,placement:"bottom-start",offset:4}),{computedDisabled:m,expanded:n,menu:o,menuId:c,modelWrapper:l,onKeydown:y,onClick:v,onBlur:h,button:a,buttonId:r,rootClasses:f,rootStyle:b,otherAttrs:g}}}),N={class:"cdx-menu-button__menu-wrapper"};function V(e,u,i,o,a,p){const l=t.resolveComponent("cdx-button"),n=t.resolveComponent("cdx-menu");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["cdx-menu-button",e.rootClasses]),style:t.normalizeStyle(e.rootStyle)},[t.createVNode(l,t.mergeProps({id:e.buttonId,ref:"button"},e.otherAttrs,{disabled:e.computedDisabled,weight:e.weight,action:e.action,"aria-haspopup":"menu","aria-controls":e.menuId,"aria-expanded":e.expanded,onClick:e.onClick,onBlur:e.onBlur,onKeydown:e.onKeydown}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},16,["id","disabled","weight","action","aria-controls","aria-expanded","onClick","onBlur","onKeydown"]),t.createElementVNode("div",N,[t.createVNode(n,t.mergeProps({id:e.menuId,ref:"menu",selected:e.modelWrapper,"onUpdate:selected":u[0]||(u[0]=r=>e.modelWrapper=r),expanded:e.expanded,"onUpdate:expanded":u[1]||(u[1]=r=>e.expanded=r),class:"cdx-menu-button__menu","menu-items":e.menuItems},e.menuConfig,{role:"menu","aria-labelledby":e.buttonId,footer:e.footer}),{default:t.withCtx(({menuItem:r})=>[t.renderSlot(e.$slots,"menu-item",{menuItem:r})]),_:3},16,["id","selected","expanded","menu-items","aria-labelledby","footer"])])],6)}const $=K._export_sfc(M,[["render",V]]);module.exports=$;