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