@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 2.48 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"),A=require("./_plugin-vue_export-helper.js"),B=t.defineComponent({name:"CdxMenuButton",components:{CdxToggleButton:y,CdxMenu:C},inheritAttrs:!1,props:{selected:{type:[String,Number,Array,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:a}){const d=t.ref(),r=t.ref(),i=t.toRef(e,"selected"),s=I(i,o,"update:selected"),l=t.ref(!1),n=t.useId(),m=t.useId(),{computedDisabled:p}=q(t.toRef(e,"disabled")),{rootClasses:f,rootStyle:g,otherAttrs:c}=w(a);function b(u){!d.value||p.value||e.menuItems.length===0||u.key===" "||u.key==="Enter"||d.value.delegateKeyNavigation(u)}return v(r,d,{useAvailableWidth:!0,placement:"bottom-start",offset:4}),{computedDisabled:p,expanded:l,menu:d,menuId:m,modelWrapper:s,onKeydown:b,toggle:r,toggleId:n,rootClasses:f,rootStyle:g,otherAttrs:c}}}),S={class:"cdx-menu-button__menu-wrapper"};function V(e,o,a,d,r,i){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",S,[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._export_sfc(B,[["render",V]]);module.exports=$;