wiki.techinc.nl/resources/lib/codex/modules/CdxMenu.cjs

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