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

Codex Design System for Wikimedia

"use strict";var be=Object.defineProperty,ye=Object.defineProperties;var ke=Object.getOwnPropertyDescriptors;var Q=Object.getOwnPropertySymbols;var _e=Object.prototype.hasOwnProperty,we=Object.prototype.propertyIsEnumerable;var U=(t,o,c)=>o in t?be(t,o,{enumerable:!0,configurable:!0,writable:!0,value:c}):t[o]=c,K=(t,o)=>{for(var c in o||(o={}))_e.call(o,c)&&U(t,c,o[c]);if(Q)for(var c of Q(o))we.call(o,c)&&U(t,c,o[c]);return t},P=(t,o)=>ye(t,ke(o));const e=require("vue"),Me=require("./CdxMenuItem.cjs"),Be=require("./Icon.js"),xe=require("./CdxProgressBar.cjs"),Ce=require("./useIntersectionObserver.cjs"),Se=require("./useSplitAttributes.cjs"),Te=require("./_plugin-vue_export-helper.js");function $(t){return t!==null&&Array.isArray(t)}function C(t){return"items"in t}const Ve=e.defineComponent({name:"CdxMenu",components:{CdxMenuItem:Me,CdxIcon:Be.CdxIcon,CdxProgressBar:xe},inheritAttrs:!1,props:{menuItems:{type:Array,required:!0},footer:{type:Object,default:null},selected:{type:[String,Number,Array,null],required:!0},expanded:{type:Boolean,required:!0},showPending:{type:Boolean,default:!1},visibleItemLimit:{type:Number,default:null},showThumbnail:{type:Boolean,default:!1},boldLabel:{type:Boolean,default:!1},hideDescriptionOverflow:{type:Boolean,default:!1},searchQuery:{type:String,default:""},showNoResultsSlot:{type:Boolean,default:null},renderInPlace:{type:Boolean,default:!1}},emits:["update:selected","update:expanded","menu-item-click","menu-item-keyboard-navigation","load-more"],setup(t,{emit:o,slots:c,attrs:D}){const R=e.useId();let L=0;const v=new Map;function y(){return L+=1,"".concat(R,"-").concat(L)}function S(l){l.forEach(n=>{if(C(n)){const a="group-".concat(n.label);v.has(a)||v.set(a,y()),n.items.forEach(r=>{v.has(r.value)||v.set(r.value,y())})}else v.has(n.value)||v.set(n.value,y())})}e.watch(e.toRef(t,"menuItems"),l=>{function n(r){const d=new Set;return r.forEach(s=>{C(s)?(d.add("group-".concat(s.label)),s.items.forEach(w=>d.add(w.value))):d.add(s.value)}),d}const a=n(l);v.forEach((r,d)=>{a.has(d)||v.delete(d)})},{deep:!0});const i=e.computed(()=>{S(t.menuItems),t.footer&&S([t.footer]);const l=t.footer&&t.menuItems?[...t.menuItems,t.footer]:t.menuItems;function n(a){const r=v.get(a.value);if(!r)throw new Error("No ID found for menu item with value ".concat(a.value));return P(K({},a),{id:r})}return l.map(a=>{if(C(a)){const r=v.get("group-".concat(a.label));if(!r)throw new Error("No ID found for menu item with value group-".concat(a.label));return P(K({},a),{id:r,items:a.items.map(d=>n(d))})}else return n(a)})}),f=e.computed(()=>{const l=[];return i.value.forEach(n=>{C(n)?l.push(...n.items):l.push(n)}),l}),m=e.computed(()=>c["no-results"]?t.showNoResultsSlot!==null?t.showNoResultsSlot:f.value.length===0:!1),u=e.ref(null),M=e.ref(!1),T=e.ref(null),G=e.inject("CdxTeleportMenus",!1),J=e.computed(()=>!e.unref(G)||t.renderInPlace),X=e.inject("CdxTeleportTarget",void 0),Y=e.computed(()=>{var l;return(l=e.unref(X))!=null?l:"body"}),Z="additions removals";let g="",k=null;function E(){g="",k!==null&&(clearTimeout(k),k=null)}function A(){k!==null&&clearTimeout(k),k=setTimeout(E,1500)}function B(){var l;return(l=f.value.find(n=>$(t.selected)?t.selected.includes(n.value):n.value===t.selected))!=null?l:null}const x=e.computed(()=>$(t.selected));function ee(l){return $(t.selected)?t.selected.includes(l):l===t.selected}function H(l){if($(t.selected)){const n=t.selected.includes(l)?t.selected.filter(a=>a!==l):t.selected.concat(l);o("update:selected",n)}else o("update:selected",l)}function h(l,n){if(!(n!=null&&n.disabled))switch(l){case"selected":n&&H(n.value),x.value||o("update:expanded",!1),T.value=null;break;case"highlighted":u.value=n!=null?n:null,M.value=!1;break;case"highlightedViaKeyboard":u.value=n!=null?n:null,M.value=!0;break;case"active":T.value=n!=null?n:null;break}}const b=e.computed(()=>{if(u.value!==null)return f.value.findIndex(l=>l.value===u.value.value)});function q(l){l&&(h("highlightedViaKeyboard",l),o("menu-item-keyboard-navigation",l))}function F(l){var r;const n=d=>{for(let s=d-1;s>=0;s--)if(!f.value[s].disabled)return f.value[s]};l=l!=null?l:f.value.length;const a=(r=n(l))!=null?r:n(f.value.length);q(a)}function O(l){var r;const n=d=>f.value.find((s,w)=>!s.disabled&&w>d);l=l!=null?l:-1;const a=(r=n(l))!=null?r:n(-1);q(a)}function te(l){if(l.key==="Clear")return E(),!0;if(l.key==="Backspace")return g=g.slice(0,-1),A(),!0;if(l.key.length===1&&!l.metaKey&&!l.ctrlKey&&!l.altKey){if(t.expanded||o("update:expanded",!0),l.key===" "&&g.length<1)return!1;g+=l.key.toLowerCase();const n=g.length>1&&g.split("").every(s=>s===g[0]);let a=f.value,r=g;n&&b.value!==void 0&&(a=a.slice(b.value+1).concat(a.slice(0,b.value)),r=g[0]);const d=a.find(s=>{var w;return!s.disabled&&String((w=s.label)!=null?w:s.value).toLowerCase().startsWith(r)});return d&&(h("highlightedViaKeyboard",d),_()),A(),!0}return!1}function le(l,{prevent:n=!0,characterNavigation:a=!1}={}){if(a){if(te(l))return l.preventDefault(),!0;E()}function r(){n&&(l.preventDefault(),l.stopPropagation())}switch(l.key){case"Enter":case" ":return r(),t.expanded?(u.value&&M.value&&H(u.value.value),x.value||o("update:expanded",!1)):o("update:expanded",!0),!0;case"Tab":return t.expanded&&u.value&&M.value&&!x.value&&(H(u.value.value),o("update:expanded",!1)),!0;case"ArrowUp":return r(),t.expanded?(u.value===null&&h("highlightedViaKeyboard",B()),F(b.value)):o("update:expanded",!0),_(),!0;case"ArrowDown":return r(),t.expanded?(u.value===null&&h("highlightedViaKeyboard",B()),O(b.value)):o("update:expanded",!0),_(),!0;case"Home":return r(),t.expanded?(u.value===null&&h("highlightedViaKeyboard",B()),O()):o("update:expanded",!0),_(),!0;case"End":return r(),t.expanded?(u.value===null&&h("highlightedViaKeyboard",B()),F()):o("update:expanded",!0),_(),!0;case"Escape":return r(),o("update:expanded",!1),!0;default:return!1}}function W(){h("active",null)}const p=[],z=e.ref(void 0),ne=Ce(z,{threshold:.8});e.watch(ne,l=>{l&&o("load-more")});function ae(l,n){if(l){p[n]=l.$el;const a=t.visibleItemLimit;if(!a||t.menuItems.length<a)return;const r=Math.min(a,Math.max(2,Math.floor(.2*t.menuItems.length)));n===t.menuItems.length-r&&(z.value=l.$el)}}const oe=e.ref(),V=e.ref();function _(){const l=V.value&&V.value.scrollHeight>V.value.clientHeight;if(b.value===void 0||!l)return;const n=b.value>=0?b.value:0;requestAnimationFrame(()=>{p[n].scrollIntoView({behavior:"smooth",block:"nearest"})})}const N=e.ref(null),I=e.ref(null);async function j(){await e.nextTick(),re(),ie(),await e.nextTick(),_()}function re(){if(t.footer){const l=p[p.length-1];I.value=l.scrollHeight}else I.value=null}function ie(){if(!t.visibleItemLimit||p.length<=t.visibleItemLimit){N.value=null;return}const l=p[0].getBoundingClientRect().top,n=p[t.visibleItemLimit].getBoundingClientRect().top;N.value=n-l+2}function ue(l){return{"cdx-menu__group-wrapper--hide-label":!!l.hideLabel}}function se(l){return f.value.indexOf(l)}function de(l){var n,a;return K({selected:ee(l.value),active:l.value===((n=T.value)==null?void 0:n.value),highlighted:l.value===((a=u.value)==null?void 0:a.value),showThumbnail:t.showThumbnail,boldLabel:t.boldLabel,hideDescriptionOverflow:t.hideDescriptionOverflow,searchQuery:t.searchQuery,multiselect:x.value},l)}function ce(l){return{change:(n,a)=>h(n,a?l:null),click:()=>o("menu-item-click",l)}}function fe(l){var n,a;return{menuItem:l,active:l.value===((n=T.value)==null?void 0:n.value)&&l.value===((a=u.value)==null?void 0:a.value)}}e.onMounted(()=>{document.addEventListener("mouseup",W)}),e.onUnmounted(()=>{document.removeEventListener("mouseup",W)}),e.watch(e.toRef(t,"expanded"),async l=>{if(l){const n=B();n&&!u.value&&h("highlighted",n),await j()}else h("highlighted",null)}),e.watch(e.toRef(t,"menuItems"),async l=>{l.length<p.length&&(p.length=l.length),t.expanded&&await j()},{deep:!0});const ve=e.computed(()=>({"max-height":N.value?"".concat(N.value,"px"):void 0,"margin-bottom":I.value?"".concat(I.value,"px"):void 0})),he=e.computed(()=>({"cdx-menu--has-footer":!!t.footer})),{rootClasses:ge,rootStyle:me,otherAttrs:pe}=Se(D,he);return{listBoxStyle:ve,rootClasses:ge,rootStyle:me,otherAttrs:pe,assignTemplateRef:ae,computedMenuEntries:i,computedMenuItems:f,computedShowNoResultsSlot:m,highlightedMenuItem:u,highlightedViaKeyboard:M,teleportDisabled:J,computedTarget:Y,handleMenuItemChange:h,handleKeyNavigation:le,ariaRelevant:Z,isMultiselect:x,rootElement:oe,menuListbox:V,getGroupWrapperClasses:ue,getMenuItemIndex:se,getMenuItemBindings:de,getMenuItemHandlers:ce,getSlotBindings:fe,isMenuGroupData:C}},methods:{isExpanded(){return this.expanded},getRootElement(){return this.rootElement},getHighlightedMenuItem(){return this.expanded?this.highlightedMenuItem:null},getHighlightedViaKeyboard(){return this.highlightedViaKeyboard},getComputedMenuItems(){return this.computedMenuItems},clearActive(){this.handleMenuItemChange("active",null)},delegateKeyNavigation(t,{prevent:o=!0,characterNavigation:c=!1}={}){return this.handleKeyNavigation(t,{prevent:o,characterNavigation:c})}}}),Ne=["aria-live","aria-relevant","aria-multiselectable"],Ie={key:0,class:"cdx-menu__pending cdx-menu-item"},Ke={key:1,class:"cdx-menu__no-results cdx-menu-item",role:"option"},$e=["aria-labelledby","aria-describedby"],Le={class:"cdx-menu__group__meta"},Ee={class:"cdx-menu__group__meta__text"},He=["id"],Pe=["id"];function De(t,o,c,D,R,L){const v=e.resolveComponent("cdx-icon"),y=e.resolveComponent("cdx-menu-item"),S=e.resolveComponent("cdx-progress-bar");return e.openBlock(),e.createBlock(e.Teleport,{to:t.computedTarget,disabled:t.teleportDisabled},[e.withDirectives(e.createElementVNode("div",{ref:"rootElement",class:e.normalizeClass(["cdx-menu",t.rootClasses]),style:e.normalizeStyle(t.rootStyle)},[e.createElementVNode("ul",e.mergeProps({ref:"menuListbox",class:"cdx-menu__listbox",role:"listbox",tabindex:"-1",style:t.listBoxStyle,"aria-live":t.showPending?"polite":void 0,"aria-relevant":t.showPending?t.ariaRelevant:void 0,"aria-multiselectable":t.isMultiselect?!0:void 0},t.otherAttrs,{onMousedown:o[0]||(o[0]=e.withModifiers(()=>{},["prevent"]))}),[t.showPending&&t.computedMenuItems.length===0&&t.$slots.pending?(e.openBlock(),e.createElementBlock("li",Ie,[e.renderSlot(t.$slots,"pending")])):e.createCommentVNode("v-if",!0),t.computedShowNoResultsSlot?(e.openBlock(),e.createElementBlock("li",Ke,[e.renderSlot(t.$slots,"no-results")])):e.createCommentVNode("v-if",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.computedMenuEntries,(i,f)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:f},[t.isMenuGroupData(i)?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass(["cdx-menu__group-wrapper",t.getGroupWrapperClasses(i)])},[e.createElementVNode("ul",{class:"cdx-menu__group",role:"group","aria-labelledby":i.id+"-label","aria-describedby":i.id+"-description"},[e.createElementVNode("span",Le,[i.icon?(e.openBlock(),e.createBlock(v,{key:0,class:"cdx-menu__group__icon",icon:i.icon},null,8,["icon"])):e.createCommentVNode("v-if",!0),e.createElementVNode("span",Ee,[e.createElementVNode("span",{id:i.id+"-label",class:"cdx-menu__group__label"},e.toDisplayString(i.label),9,He),i.description?(e.openBlock(),e.createElementBlock("span",{key:0,id:i.id+"-description",class:"cdx-menu__group__description"},e.toDisplayString(i.description),9,Pe)):e.createCommentVNode("v-if",!0)])]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.items,m=>(e.openBlock(),e.createBlock(y,e.mergeProps({key:m.value,ref_for:!0,ref:u=>t.assignTemplateRef(u,t.getMenuItemIndex(m)),class:"cdx-menu__group__item"},{ref_for:!0},t.getMenuItemBindings(m),e.toHandlers(t.getMenuItemHandlers(m))),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",e.mergeProps({ref_for:!0},t.getSlotBindings(m)))]),_:2},1040))),128))],8,$e)],2)):(e.openBlock(),e.createBlock(y,e.mergeProps({key:1,ref_for:!0,ref:m=>t.assignTemplateRef(m,t.getMenuItemIndex(i))},{ref_for:!0},t.getMenuItemBindings(i),e.toHandlers(t.getMenuItemHandlers(i))),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",e.mergeProps({ref_for:!0},t.getSlotBindings(i)))]),_:2},1040))],64))),128)),t.showPending?(e.openBlock(),e.createBlock(S,{key:2,class:"cdx-menu__progress-bar",inline:!0})):e.createCommentVNode("v-if",!0)],16,Ne)],6),[[e.vShow,t.expanded]])],8,["to","disabled"])}const Re=Te._export_sfc(Ve,[["render",De]]);module.exports=Re;