@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 2.46 kB
JavaScript
;const t=require("vue"),y=require("./CdxToggleButton.cjs"),C=require("./CdxMenu.cjs"),q=require("./useFieldData.cjs"),v=require("./useFloatingMenu.cjs"),I=require("./useModelWrapper.cjs"),w=require("./useSplitAttributes.cjs"),B=require("./_plugin-vue_export-helper.js"),S=t.defineComponent({name:"CdxMenuButton",components:{CdxToggleButton:y,CdxMenu:C},inheritAttrs:!1,props:{selected:{type:[String,Number,null],required:!0},menuItems:{type:Array,required:!0},menuConfig:{type:Object,default:()=>({})},disabled:{type:Boolean,default:!1},footer:{type:Object,default:null}},emits:["update:selected"],setup(e,{emit:o,attrs:u}){const d=t.ref(),r=t.ref(),a=t.toRef(e,"selected"),s=I(a,o,"update:selected"),l=t.ref(!1),n=t.useId(),m=t.useId(),{computedDisabled:i}=q(t.toRef(e,"disabled")),{rootClasses:f,rootStyle:g,otherAttrs:c}=w(u);function b(p){!d.value||i.value||e.menuItems.length===0||p.key===" "||d.value.delegateKeyNavigation(p)}return v(r,d,{useAvailableWidth:!0,placement:"bottom-start",offset:4}),{computedDisabled:i,expanded:l,menu:d,menuId:m,modelWrapper:s,onKeydown:b,toggle:r,toggleId:n,rootClasses:f,rootStyle:g,otherAttrs:c}}}),V={class:"cdx-menu-button__menu-wrapper"};function $(e,o,u,d,r,a){const s=t.resolveComponent("cdx-toggle-button"),l=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(s,t.mergeProps({id:e.toggleId,ref:"toggle"},e.otherAttrs,{modelValue:e.expanded,"onUpdate:modelValue":o[0]||(o[0]=n=>e.expanded=n),disabled:e.computedDisabled,quiet:"","aria-haspopup":"menu","aria-controls":e.menuId,"aria-expanded":e.expanded,onBlur:o[1]||(o[1]=n=>e.expanded=!1),onKeydown:e.onKeydown}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},16,["id","modelValue","disabled","aria-controls","aria-expanded","onKeydown"]),t.createElementVNode("div",V,[t.createVNode(l,t.mergeProps({id:e.menuId,ref:"menu",selected:e.modelWrapper,"onUpdate:selected":o[2]||(o[2]=n=>e.modelWrapper=n),expanded:e.expanded,"onUpdate:expanded":o[3]||(o[3]=n=>e.expanded=n),"menu-items":e.menuItems},e.menuConfig,{role:"menu","aria-labelledby":e.toggleId,footer:e.footer}),{default:t.withCtx(({menuItem:n})=>[t.renderSlot(e.$slots,"menu-item",{menuItem:n})]),_:3},16,["id","selected","expanded","menu-items","aria-labelledby","footer"])])],6)}const A=B._export_sfc(S,[["render",$]]);module.exports=A;