vue-float-menu
Version:
smart floating menu for Vue 3
3 lines (2 loc) • 48.8 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueFloatMenu={},e.Vue)}(this,(function(e,t){"use strict";const n=(e,t,n,o)=>{const{top:a,bottom:i}=e.getBoundingClientRect(),r=Math.round((t.clientWidth-n)/2),l=t.clientHeight;let s="bottom";let c=null;return l>a?(c={top:`${n+15}px`,left:`-${r}px`},s="top"):window.innerHeight-i<l?(c={bottom:`${n+15}px`,left:`-${r}px`},s="bottom"):(c={top:`${n+15}px`,left:`-${r}px`},s="top"),Object.assign({},c,{"min-height":`${o.height}px`,width:`${o.width}px`,newOrientation:s})},o=(e,t,n,o)=>{const{top:a,bottom:i,left:r,right:l}=e.getBoundingClientRect(),{innerWidth:s,innerHeight:c}=window,u=o.clientWidth,d=Math.ceil(u/2);let m=null,p=!1,h=!1;return n&&(p=!1),i>c&&(m={left:t.left,top:t.top-(i-c)},h=!0),a<0&&(m={left:t.left,top:t.top+Math.abs(a)},h=!0),(r<0||r<d)&&(m={left:d,top:t.top},h=!0),(l>s||s-l<u)&&(m={left:s-u,top:t.top},n&&(p=!0),h=!0),{position:m,flip:p,reveal:h}},a=(e,t)=>{const n=15;let o=n,a=n;switch(e){case"top left":o=n,a=n;break;case"top right":o=window.innerWidth-t-n,a=n;break;case"bottom left":o=n,a=window.innerHeight-t-n;break;case"bottom right":o=window.innerWidth-t-n,a=window.innerHeight-t-n}return{left:`${o}px`,top:`${a}px`,width:`${t}px`,height:`${t}px`}};var i=t.defineComponent({name:"MenuIcon"});const r={xmlns:"http://www.w3.org/2000/svg",width:"50%",height:"50%",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-menu"};i.render=function(e,n,o,a,i,l){return t.openBlock(),t.createElementBlock("svg",r,n[0]||(n[0]=[t.createElementVNode("line",{x1:"3",y1:"12",x2:"21",y2:"12"},null,-1),t.createElementVNode("line",{x1:"3",y1:"6",x2:"21",y2:"6"},null,-1),t.createElementVNode("line",{x1:"3",y1:"18",x2:"21",y2:"18"},null,-1)]))},i.__file="src/components/icons/MenuIcon.vue";var l={name:"XIcon"};const s={xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-x"};l.render=function(e,n,o,a,i,r){return t.openBlock(),t.createElementBlock("svg",s,n[0]||(n[0]=[t.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"},null,-1),t.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"},null,-1)]))},l.__file="src/components/icons/XIcon.vue";var c=t.defineComponent({name:"ChevronRightIcon"});const u={xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-chevron-right"};c.render=function(e,n,o,a,i,r){return t.openBlock(),t.createElementBlock("svg",u,n[0]||(n[0]=[t.createElementVNode("polyline",{points:"9 18 15 12 9 6"},null,-1)]))},c.__file="src/components/icons/ChevRightIcon.vue";var d=t.defineComponent({name:"PlusIcon"});const m={xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",class:"feather feather-plus"};d.render=function(e,n,o,a,i,r){return t.openBlock(),t.createElementBlock("svg",m,n[0]||(n[0]=[t.createElementVNode("line",{x1:"12",y1:"5",x2:"12",y2:"19"},null,-1),t.createElementVNode("line",{x1:"5",y1:"12",x2:"19",y2:"12"},null,-1)]))},d.__file="src/components/icons/PlusIcon.vue";var p=t.defineComponent({name:"PlusIcon"});const h={xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",class:"feather feather-minus"};p.render=function(e,n,o,a,i,r){return t.openBlock(),t.createElementBlock("svg",h,n[0]||(n[0]=[t.createElementVNode("line",{x1:"5",y1:"12",x2:"19",y2:"12"},null,-1)]))},p.__file="src/components/icons/MinusIcon.vue";const b={primary:"#4f46e5",textColor:"#374151",menuBgColor:"rgba(255, 255, 255, 0.95)",textSelectedColor:"#1f2937",hoverBackground:"rgba(79, 70, 229, 0.1)"};const v=()=>{const e=t.ref(!1),n=t.ref(!1),o=t.ref(0),a=t.ref({x:0,y:0}),i=t.ref({x:0,y:0});return t.onMounted((()=>{e.value="ontouchstart"in window||navigator.maxTouchPoints>0||/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),e.value&&document.body.classList.add("touch-device");const t=document.createElement("style");t.textContent="\n .touch-device .menu-list-item {\n min-height: 44px !important;\n padding: 12px 16px !important;\n touch-action: manipulation;\n }\n \n .touch-device .menu-head {\n min-width: 44px !important;\n min-height: 44px !important;\n touch-action: manipulation;\n }\n \n .touch-device .chev-icon {\n min-width: 44px !important;\n min-height: 44px !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }\n \n @media (hover: none) and (pointer: coarse) {\n .menu-list-item:hover {\n background-color: transparent !important;\n }\n \n .menu-list-item:active {\n background-color: var(--hover-background) !important;\n transform: scale(0.98) !important;\n }\n }\n ",document.head.appendChild(t)})),t.onUnmounted((()=>{document.body.classList.remove("touch-device")})),{isTouchDevice:t.computed((()=>e.value)),isLongPress:t.computed((()=>n.value)),handleTouchStart:(e,t)=>{const r=e.touches[0];o.value=Date.now(),a.value={x:r.clientX,y:r.clientY},i.value={x:r.clientX,y:r.clientY};const l=setTimeout((()=>{if(n.value)return;n.value=!0;const i={type:"longpress",target:e.target,startPosition:a.value,duration:Date.now()-o.value,force:r.force||1};t?.(i)}),500);e.target._longPressTimer=l},handleTouchMove:e=>{const t=e.touches[0];i.value={x:t.clientX,y:t.clientY};const o=Math.sqrt(Math.pow(i.value.x-a.value.x,2)+Math.pow(i.value.y-a.value.y,2)),r=e.target;o>10&&r._longPressTimer&&(clearTimeout(r._longPressTimer),n.value=!1)},handleTouchEnd:(e,t)=>{const r=Date.now()-o.value,l=e.target;if(l._longPressTimer&&clearTimeout(l._longPressTimer),n.value)return void(n.value=!1);const s=Math.sqrt(Math.pow(i.value.x-a.value.x,2)+Math.pow(i.value.y-a.value.y,2)),c=s/r;let u;u=s<10?{type:"tap",target:e.target,startPosition:a.value,endPosition:i.value,duration:r}:s>50&&c>.3?{type:"swipe",target:e.target,startPosition:a.value,endPosition:i.value,duration:r}:{type:"tap",target:e.target,startPosition:a.value,endPosition:i.value,duration:r},t?.(u)},getSwipeDirection:()=>{const e=i.value.x-a.value.x,t=i.value.y-a.value.y,n=Math.sqrt(e*e+t*t);if(n<50)return null;const r=n/(Date.now()-o.value);return Math.abs(e)>Math.abs(t)?{direction:e>0?"right":"left",velocity:r,distance:n}:{direction:t>0?"down":"up",velocity:r,distance:n}},triggerHapticFeedback:(e="light")=>{if("vibrate"in navigator){const t={light:[10],medium:[20],heavy:[30]};navigator.vibrate(t[e])}},ensureTouchTarget:(e,t=44)=>{const n=e.getBoundingClientRect(),o=Math.min(n.width,n.height);if(o<t){const n=(t-o)/2;e.style.padding=`${n}px`,e.style.minWidth=`${t}px`,e.style.minHeight=`${t}px`}},getOptimalMenuOrientation:(t,n,o)=>{const a=n.getBoundingClientRect(),i=t.getBoundingClientRect();if(e.value&&o.width<768){const e=o.height-a.bottom,t=a.top;return e>=i.height+20?"bottom":t>=i.height+20?"top":"bottom-scroll"}return a.top>o.height/2?"top":"bottom"},enhanceAccessibility:e=>{e.style.touchAction="manipulation",e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),e.hasAttribute("aria-label")||e.hasAttribute("aria-labelledby")||e.setAttribute("aria-label","Interactive menu item"),e.hasAttribute("role")||e.setAttribute("role","button")}}};var f=Object.freeze({__proto__:null,useTouchOptimizations:v});const g=()=>{const e=t.ref({lazyLoad:!0,treeShaking:!0,codesplitting:!0,compression:!0}),n=async e=>{try{switch(e){case"TouchOptimizations":return await Promise.resolve().then((function(){return f}));case"Animations":return await Promise.resolve().then((function(){return I}));case"Performance":return await Promise.resolve().then((function(){return N}));case"ErrorHandling":return await Promise.resolve().then((function(){return P}));default:throw new Error(`Unknown component: ${e}`)}}catch(e){return null}},o=async()=>{const e="ontouchstart"in window||navigator.maxTouchPoints>0,t=window.matchMedia("(prefers-reduced-motion: reduce)").matches,o=navigator.hardwareConcurrency&&navigator.hardwareConcurrency>=4,a=[];e&&a.push(n("TouchOptimizations")),t||a.push(n("Animations")),o&&a.push(n("Performance")),a.push(n("Accessibility"),n("ErrorHandling"),n("KeyboardNavigation"));try{await Promise.all(a)}catch(e){}},a=t.computed((()=>{const e=navigator.userAgent.toLowerCase(),t=/android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(e),n=navigator,o="connection"in navigator&&"slow-2g"===n.connection?.effectiveType||"2g"===n.connection?.effectiveType;return t||o?"aggressive":"standard"})),i=()=>{[{href:"/vue-float-menu.css",as:"style"},{href:"/vue-float-menu.js",as:"script"}].forEach((e=>{const t=document.createElement("link");t.rel="preload",t.href=e.href,t.as=e.as,document.head.appendChild(t)}))};return t.onMounted((()=>{e.value.lazyLoad&&o(),e.value.compression})),{optimizations:t.computed((()=>e.value)),loadComponent:n,loadComposablesConditionally:o,getBundleInfo:()=>({core:12,touchOptimizations:3,accessibility:2,animations:2,performance:1.5,errorHandling:1,keyboardNavigation:1.5,total:23}),measurePerformance:(e,t)=>{if("performance"in window&&performance.mark){const n=`${e}-start`,o=`${e}-end`,a=`${e}-duration`;performance.mark(n),t(),performance.mark(o);try{performance.measure(a,n,o);performance.getEntriesByName(a)[0]}catch(e){}}else t()},markAsUsed:e=>{undefined},monitorMemoryUsage:()=>{const e=performance;return"memory"in e&&e.memory?{used:e.memory.usedJSHeapSize,total:e.memory.totalJSHeapSize,limit:e.memory.jsHeapSizeLimit}:null},splitStrategy:a,enableCompression:()=>"serviceWorker"in navigator,preloadCriticalResources:i}};var y=t.defineComponent({name:"FloatMenu",components:{ChevRightIcon:c,PlusIcon:d,MinusIcon:p},props:{data:{type:Array,default:()=>[]},flip:{type:Boolean,default:!1},onSelection:{type:Function,default:null},onClose:{type:Function,default:null,required:!0},theme:{type:Object,required:!1,default:b},menuStyle:{type:String,default:"slide-out",required:!1},isTouchDevice:{type:Boolean,default:!1}},setup(e){const{measurePerformance:n,markAsUsed:o}=g(),{activeIndex:a,menuItems:i,toggleMenu:r,selectMenuItem:l,setActiveIndex:s,closeAllSubMenus:c,updateSelectedItem:u}=function(e){const n=t.ref(-1),o=t.ref(e.map((e=>Object.assign({},e,{id:`menu-item-${Math.random().toString(16)}`,showSubMenu:!1})))),a=(e,t)=>{const n=o.value.find((t=>t.id===e)),a=n?.showSubMenu;a?o.value=o.value.map((t=>t.id===e?Object.assign({},t,{showSubMenu:!1}):t)):(o.value=o.value.map((t=>t.id!==e&&t.showSubMenu?Object.assign({},t,{showSubMenu:!1}):t)),a||setTimeout((()=>{o.value=o.value.map((n=>Object.assign({},n,{showSubMenu:n.id===e?!n.showSubMenu:n.showSubMenu,subMenu:t&&n.id===e?{items:n.subMenu?.items.map(((e,t)=>Object.assign({},e,{selected:0===t})))}:n.subMenu})))}),50))};return{activeIndex:t.computed((()=>t.unref(n))),menuItems:t.computed((()=>t.unref(o))),toggleMenu:a,selectMenuItem:(e,t,n,o,i)=>{n?a(t,o):e&&i&&i(e)},setActiveIndex:e=>{n.value=e},resetActiveIndex:()=>{n.value=-1},updateMenuItems:e=>{o.value=e.map((e=>Object.assign({},e,{id:`menu-item-${Math.random().toString(16)}`,showSubMenu:!1})))},closeAllSubMenus:()=>{setTimeout((()=>{o.value=o.value.map((e=>Object.assign({},e,{showSubMenu:!1})))}),30)},updateSelectedItem:e=>{o.value=o.value.map(((t,n)=>Object.assign({},t,{selected:n===e})))}}}(e.data),d=t.ref(),m=t.resolveComponent("FloatMenu"),p=t.ref(!1);t.onMounted((()=>{const e=window.matchMedia("(prefers-reduced-motion: reduce)");p.value=e.matches;e.addEventListener("change",(e=>{p.value=e.matches})),t.nextTick((()=>{if(d.value&&(d.value.focus(),i.value.length>0)){const e=i.value.findIndex((e=>!e.divider&&!e.disabled));-1!==e&&s(e)}}))}));const h=t.computed((()=>p.value?0:300)),b=e.isTouchDevice?(()=>{const{triggerHapticFeedback:e}=v();return{triggerHapticFeedback:e}})():null,f=e=>{try{t.nextTick((()=>{const t=document.querySelector(`[data-submenu-id="${e}"]`);if(t){const e=t.querySelector('[role="menuitem"]:not([aria-disabled="true"]):not(.divider)');if(e){e.focus();const t=document.createElement("div");t.setAttribute("aria-live","polite"),t.className="sr-only",t.textContent="Submenu opened",document.body.appendChild(t),setTimeout((()=>document.body.removeChild(t)),1e3)}}}))}catch(e){}},y=t.computed((()=>({"--background":e.theme.primary,"--menu-background":e.theme.menuBgColor,"--menu-text-color":e.theme.textColor,"--text-selected-color":e.theme.textSelectedColor,"--hover-background":e.theme.hoverBackground}))),x=t.computed((()=>`sub-menu-wrapper ${e.menuStyle}`)),w=t.computed((()=>`menu-item-wrapper ${e.menuStyle}`)),k=t.computed((()=>"accordion"===e.menuStyle));return t.onMounted((()=>{try{d.value&&d.value.focus(),t.nextTick((()=>{const t=e.data[0]?.selected;t&&s(0)}))}catch(e){}})),t.watch(a,(e=>{u(e)})),{menuItems:i,handleMenuItemClickWithErrorHandling:(t,a,i,c,u,d,m)=>{n("menuItemClick",(()=>{o("menuItemClick");try{if(t.stopPropagation(),t.preventDefault(),d||m)return;e.isTouchDevice&&b&&b.triggerHapticFeedback("light"),s(u),c?r(a,!1):l(i,a,c,!1,e.onSelection);const n=t.currentTarget;if(n&&(n.style.outline="none",n.style.border="none",setTimeout((()=>{n&&n.classList.contains("selected")&&(n.style.outline="none",n.style.border="none")}),10)),!c&&i){const e=document.createElement("div");e.setAttribute("aria-live","polite"),e.className="sr-only",e.textContent=`Selected ${i}`,document.body.appendChild(e),setTimeout((()=>document.body.removeChild(e)),1e3)}}catch(e){}}))},SubMenuComponent:m,themeStyles:y,menuRef:d,handleKeyUpWithErrorHandling:t=>{try{t.preventDefault(),t.stopPropagation();const n=a.value,o=i.value[n>-1?n:0],c=t.key,u=e.data.length;switch(c){case"ArrowDown":if(n<u-1){let e=n+1;for(;e<u&&(i.value[e]?.divider||i.value[e]?.disabled);)e++;if(e>=u)for(e=0;e<n&&(i.value[e]?.divider||i.value[e]?.disabled);)e++;s(e)}else if(n===u-1){let e=0;for(;e<u&&(i.value[e]?.divider||i.value[e]?.disabled);)e++;e>=u&&(e=n),s(e)}break;case"ArrowUp":if(n>0){let e=n-1;for(;e>=0&&(i.value[e]?.divider||i.value[e]?.disabled);)e--;if(e<0)for(e=u-1;e>n&&(i.value[e]?.divider||i.value[e]?.disabled);)e--;s(e)}else{let e=u-1;for(;e>=0&&(i.value[e]?.divider||i.value[e]?.disabled);)e--;e<0&&(e=n),s(e)}break;case"ArrowLeft":if(o?.disabled)break;e.flip?o.subMenu&&r(o.id,!0):e.onClose("ArrowLeft");break;case"ArrowRight":if(o?.disabled)break;!e.flip&&o?.subMenu?(r(o.id||"",!0),f(o.id||"")):e.flip&&e.onClose?.("ArrowRight");break;case"Enter":if(o?.disabled)break;if(l(o?.name,o?.id||"",Boolean(o?.subMenu),!1,e.onSelection),o?.name){const e=document.createElement("div");e.setAttribute("aria-live","polite"),e.className="sr-only",e.textContent=`Selected ${o.name}`,document.body.appendChild(e),setTimeout((()=>document.body.removeChild(e)),1e3)}break;case"Escape":const t=document.createElement("div");t.setAttribute("aria-live","polite"),t.className="sr-only",t.textContent="Menu closed",document.body.appendChild(t),setTimeout((()=>document.body.removeChild(t)),1e3),e.onClose?.()}}catch(e){}},activeIndex:a,handleSubmenuClose:()=>{try{i.value.filter((e=>e.showSubMenu)).length>0?t.nextTick((()=>{c(),setTimeout((()=>{d.value&&d.value.focus()}),300)})):d.value&&d.value.focus()}catch(e){}},subMenuClass:x,menuItemClass:w,isAccordion:k,handleMouseEnter:e=>{if(!p.value){const t=e.currentTarget;t&&(t.style.transform="scale(1.02)",t.style.transition="all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94)",t.style.backgroundColor="var(--hover-background, rgba(0, 0, 0, 0.05))")}},handleMouseLeave:e=>{if(!p.value){const t=e.currentTarget;t&&(t.style.transform="scale(1)",t.style.transition="all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94)",t.style.backgroundColor="")}},prefersReducedMotion:p,animationDuration:h,handleSubmenuOpen:f,handleBeforeTransitionLeave:e=>{try{if(!p.value){const e=document.createElement("div");e.setAttribute("aria-live","polite"),e.className="sr-only",e.textContent="Submenu closing",document.body.appendChild(e),setTimeout((()=>document.body.removeChild(e)),1e3)}}catch(e){}},handleAfterTransitionEnter:e=>{try{t.nextTick((()=>{const t=e.querySelector('[role="menuitem"]:not([aria-disabled="true"]):not(.divider)');t&&t.focus()}))}catch(e){}}}}});const x=["aria-setsize","aria-posinset","aria-haspopup","aria-expanded","aria-disabled","onMousedown"],w={key:0,class:"menu-item-icon"},k=["data-submenu-id"],M={key:1,class:"menu-item-divider"};function C(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}C('.menu-wrapper[data-v-9bcc0be2]{align-items:flex-start;display:flex;height:100%;justify-content:flex-start;outline:0;padding:8px;width:100%;z-index:9999}.sub-menu-wrapper[data-v-9bcc0be2]{background:var(--menu-background);border:1px solid rgba(0,0,0,.05);border-radius:8px;box-shadow:0 8px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);min-width:180px;z-index:50000}.sub-menu-wrapper.slide-out[data-v-9bcc0be2]{left:102%;position:absolute;top:0}.sub-menu-wrapper.accordion[data-v-9bcc0be2]{border-radius:6px;margin-left:auto;max-height:900px;overflow:visible;position:relative;transition:max-height .3s ease;width:99%}.sub-menu-wrapper.accordion.accordion-submenu[data-v-9bcc0be2]{background:var(--menu-background)!important;border-radius:8px!important;box-shadow:0 8px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)!important;left:100%!important;margin-left:8px!important;min-width:180px!important;overflow:visible!important;position:absolute!important;top:0!important;width:auto!important;z-index:50001!important}.chev-icon[data-v-9bcc0be2]{display:block;height:1.5rem;opacity:.7;transition:all .2s cubic-bezier(.25,.46,.45,.94);width:1.5rem}.chev-icon svg[data-v-9bcc0be2]{height:100%;width:100%}.chev-icon.disabled[data-v-9bcc0be2]{opacity:.3}.chev-icon.show-submenu[data-v-9bcc0be2]{transform:rotate(90deg)}.menu-list[data-v-9bcc0be2]{align-items:flex-start;display:flex;flex-direction:column;gap:2px;justify-content:flex-start;list-style:none;margin:0;padding:4px;width:100%}.menu-list .name[data-v-9bcc0be2]{font-size:.9rem;font-weight:500;padding-left:.75rem;transition:all .2s cubic-bezier(.25,.46,.45,.94)}.menu-list .name.disabled[data-v-9bcc0be2]{opacity:.4}.menu-item-wrapper[data-v-9bcc0be2]{align-items:center;border-radius:6px;display:flex;justify-content:flex-start;min-height:2.75rem;padding:0 .5rem;transition:all .2s cubic-bezier(.25,.46,.45,.94);width:100%}.menu-item-wrapper.slide-out .name[data-v-9bcc0be2]{flex:1;order:1}.menu-item-wrapper.slide-out .chev-icon[data-v-9bcc0be2]{margin-left:auto;order:2}.menu-item-wrapper.accordion .name[data-v-9bcc0be2]{flex:1;order:2}.menu-item-wrapper.accordion .chev-icon[data-v-9bcc0be2]{margin-right:.5rem;order:1}.menu-item-icon[data-v-9bcc0be2]{align-items:center;display:flex;height:32px;justify-content:center;opacity:.8;padding:0 8px;transition:all .2s cubic-bezier(.25,.46,.45,.94);width:32px}.menu-item-icon svg[data-v-9bcc0be2]{height:100%;width:100%}.menu-item-icon img[data-v-9bcc0be2]{height:100%;object-fit:contain;width:100%}.menu-list-item[data-v-9bcc0be2]{align-items:center;border-radius:6px;color:var(--menu-text-color);cursor:pointer;display:flex;font-size:.9rem;justify-content:flex-start;position:relative;transition:all .2s cubic-bezier(.25,.46,.45,.94);width:100%}.menu-list-item.divider[data-v-9bcc0be2]{align-items:center;cursor:default;display:flex;height:1rem;justify-content:center;margin:4px 0}.menu-list-item.accordion[data-v-9bcc0be2]{flex-direction:column;position:relative}.menu-list-item.accordion.selected[data-v-9bcc0be2]:not(.divider){background-color:var(--hover-background);max-height:900px}.menu-list-item.slide-out[data-v-9bcc0be2]:not(.divider){height:2.75rem}.menu-list-item.slide-out[data-v-9bcc0be2]:not(.divider):hover{background-color:var(--hover-background);box-shadow:0 4px 12px -2px rgba(0,0,0,.05);color:var(--text-selected-color)}.menu-list-item[data-v-9bcc0be2]:first-child{border-top-left-radius:6px;border-top-right-radius:6px}.menu-list-item[data-v-9bcc0be2]:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.menu-list-item.selected[data-v-9bcc0be2]{background-color:var(--hover-background);box-shadow:0 4px 12px -2px rgba(0,0,0,.05);color:var(--text-selected-color);font-weight:500;position:relative}.menu-list-item.selected .menu-item-icon[data-v-9bcc0be2]{opacity:1}.menu-list-item.highlight[data-v-9bcc0be2]{border:2px solid #4f46e5}.menu-list-item.flip .name[data-v-9bcc0be2]{margin-left:auto;order:2;padding-left:0;padding-right:.75rem}.menu-list-item.flip .chev-icon[data-v-9bcc0be2]{margin-left:0;order:1;transform:rotate(-180deg)}.menu-list-item.flip .sub-menu-wrapper.slide-out[data-v-9bcc0be2]{left:auto!important;right:102%!important}.menu-list-item.flip .sub-menu-wrapper.accordion.accordion-submenu[data-v-9bcc0be2]{left:auto!important;margin-left:0!important;margin-right:8px!important;right:100%!important}.menu-list-item.flip .menu-item-icon[data-v-9bcc0be2]{order:3}.menu-list-item.disabled[data-v-9bcc0be2]{cursor:default;opacity:.6}.menu-list-item.disabled[data-v-9bcc0be2]:hover{background-color:transparent;box-shadow:none}.menu-item-divider[data-v-9bcc0be2]{background:rgba(0,0,0,.08);border-radius:1px;display:block;height:1px;margin:0 auto;pointer-events:none;width:90%}@keyframes show-9bcc0be2{0%{opacity:0;transform:scale(.95) translateX(-10px)}to{opacity:1;transform:scale(1) translateX(0)}}.submenu-enter-active[data-v-9bcc0be2]{transition:all .3s cubic-bezier(.25,.46,.45,.94);transition-delay:.05s}.submenu-leave-active[data-v-9bcc0be2]{transition:all .3s cubic-bezier(.25,.46,.45,.94)}.submenu-enter-from[data-v-9bcc0be2],.submenu-leave-to[data-v-9bcc0be2]{opacity:0;transform:scale(.95) translateX(-8px)}.submenu-enter-to[data-v-9bcc0be2],.submenu-leave-from[data-v-9bcc0be2]{opacity:1;transform:scale(1) translateX(0)}.flip .submenu-enter-from[data-v-9bcc0be2],.flip .submenu-leave-to[data-v-9bcc0be2]{opacity:0;transform:scale(.95) translateX(8px)}.flip .submenu-enter-to[data-v-9bcc0be2],.flip .submenu-leave-from[data-v-9bcc0be2]{opacity:1;transform:scale(1) translateX(0)}.error-display[data-v-9bcc0be2]{max-width:300px;position:fixed;right:20px;top:20px;z-index:10000}.error-display .error-error[data-v-9bcc0be2]{background:#fee2e2;border:1px solid #fecaca;border-radius:6px;color:#991b1b;font-size:.875rem;margin-bottom:4px;padding:8px 12px}.error-display .error-warning[data-v-9bcc0be2]{background:#fef3c7;border:1px solid #fde68a;border-radius:6px;color:#92400e;font-size:.875rem;margin-bottom:4px;padding:8px 12px}.error-display .error-info[data-v-9bcc0be2]{background:#dbeafe;border:1px solid #93c5fd;border-radius:6px;color:#1e40af;font-size:.875rem;margin-bottom:4px;padding:8px 12px}.sr-only[data-v-9bcc0be2]{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.menu-head[data-v-9bcc0be2]:focus-visible{border-radius:50%;outline:2px solid #007bff;outline-offset:2px}[role=menuitem]:focus-visible.highlight[data-v-9bcc0be2],[role=menuitem]:focus-visible.selected[data-v-9bcc0be2]{border-color:transparent!important;box-shadow:none!important;outline:none!important}[role=menuitem]:focus-visible.sub-menu.selected .menu-item-wrapper[data-v-9bcc0be2]{background-color:var(--hover-background)}[role=menuitem][data-v-9bcc0be2]:focus-visible:not(.selected,.highlight){outline:2px solid #007bff;outline-offset:-2px;position:relative;z-index:1}.menu-head[data-v-9bcc0be2]:focus:not(:focus-visible),.menu-list-item[data-v-9bcc0be2]:focus:not(:focus-visible),[role=menuitem][data-v-9bcc0be2]:focus:not(:focus-visible){outline:none}.menu-list-item[role=menuitem]:focus-visible.selected[data-v-9bcc0be2]{outline:none!important}.menu-list-item[role=menuitem]:focus-visible.selected .menu-item-wrapper[data-v-9bcc0be2]{background-color:var(--hover-background);box-shadow:0 2px 8px rgba(0,0,0,.08)}.menu-list-item.highlight[data-v-9bcc0be2]:focus-visible,.menu-list-item[data-v-9bcc0be2]:focus-visible,li.menu-list-item[role=menuitem][data-v-9bcc0be2]:focus-visible{border-color:transparent!important;outline:none!important}.menu-list-item[data-v-9bcc0be2]:focus{border-color:transparent!important;outline:none!important}.menu-list-item[data-v-9bcc0be2]:focus-visible{border-color:transparent!important;outline:none!important}.menu-list-item[data-v-9bcc0be2]:not(.selected,.highlight):focus-visible{outline:2px solid #007bff;outline-offset:-2px}.menu-list-item[data-v-9bcc0be2]:has(.name:contains("Edit")):focus-visible{border:none!important;box-shadow:none!important;outline:none!important}.menu-wrapper [role=menuitem].highlight[data-v-9bcc0be2],.menu-wrapper [role=menuitem].selected[data-v-9bcc0be2]{border:none!important;outline:none!important}.menu-list-item.highlight[data-v-9bcc0be2],.menu-list-item.selected[data-v-9bcc0be2]{border:none!important;box-shadow:none!important;outline:none!important}.menu-list-item.highlight[data-v-9bcc0be2]:focus,.menu-list-item.highlight[data-v-9bcc0be2]:focus-visible,.menu-list-item.selected[data-v-9bcc0be2]:focus,.menu-list-item.selected[data-v-9bcc0be2]:focus-visible{border:none!important;box-shadow:none!important;outline:none!important}'),y.render=function(e,n,o,a,i,r){const l=t.resolveComponent("chev-right-icon"),s=t.resolveComponent("plus-icon"),c=t.resolveComponent("minus-icon");return t.openBlock(),t.createElementBlock("div",{ref:"menuRef",class:"menu-wrapper",role:"menu","aria-label":"Context menu","aria-orientation":"vertical",tabindex:"0",onKeyup:n[3]||(n[3]=(...t)=>e.handleKeyUpWithErrorHandling&&e.handleKeyUpWithErrorHandling(...t))},[t.createElementVNode("ul",{class:"menu-list",style:t.normalizeStyle(e.themeStyles)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.menuItems,(({id:o,selected:a,name:i,subMenu:r,showSubMenu:u,disabled:d,divider:m,iconSlot:p},h)=>(t.openBlock(),t.createElementBlock("li",{key:o,class:t.normalizeClass([{"sub-menu":r,selected:a,disabled:d,flip:e.flip,divider:m},"menu-list-item",e.menuStyle]),style:t.normalizeStyle(e.themeStyles),role:"menuitem","aria-setsize":e.menuItems.length,"aria-posinset":h+1,"aria-haspopup":r?"menu":void 0,"aria-expanded":r?!!u:void 0,"aria-disabled":!!d,tabindex:-1,onMousedown:t=>e.handleMenuItemClickWithErrorHandling(t,o||"",i||"",!!r,h,!!d,!!m),onMouseenter:n[1]||(n[1]=t=>!e.prefersReducedMotion&&e.handleMouseEnter(t)),onMouseleave:n[2]||(n[2]=t=>!e.prefersReducedMotion&&e.handleMouseLeave(t))},[m?(t.openBlock(),t.createElementBlock("span",M)):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("div",{class:t.normalizeClass(e.menuItemClass),onClick:n[0]||(n[0]=e=>e.stopPropagation())},[p?(t.openBlock(),t.createElementBlock("span",w,[t.renderSlot(e.$slots,p)])):t.createCommentVNode("v-if",!0),t.createElementVNode("span",{class:t.normalizeClass(["name",{disabled:d}])},t.toDisplayString(i),3),r?(t.openBlock(),t.createElementBlock("span",{key:1,class:t.normalizeClass(["chev-icon",{disabled:d,"show-submenu":u},e.menuStyle])},[e.isAccordion?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock(l,{key:0})),r&&!u&&e.isAccordion?(t.openBlock(),t.createBlock(s,{key:1})):t.createCommentVNode("v-if",!0),r&&u&&e.isAccordion?(t.openBlock(),t.createBlock(c,{key:2})):t.createCommentVNode("v-if",!0)],2)):t.createCommentVNode("v-if",!0)],2),t.createVNode(t.Transition,{name:e.prefersReducedMotion?"":"submenu",duration:e.animationDuration,onBeforeLeave:e.handleBeforeTransitionLeave,onAfterEnter:e.handleAfterTransitionEnter},{default:t.withCtx((()=>[!d&&u?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass([e.subMenuClass,{"accordion-submenu":e.isAccordion}]),style:t.normalizeStyle(e.themeStyles),"data-submenu-id":o,role:"menu","aria-label":"Submenu"},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.SubMenuComponent),{data:r?.items||[],"on-selection":e.onSelection,theme:e.theme,"on-close":e.handleSubmenuClose,flip:e.flip,"menu-style":e.menuStyle},t.createSlots({_:2},[t.renderList(Object.keys(e.$slots),(n=>({name:n,fn:t.withCtx((o=>[t.renderSlot(e.$slots,n,t.mergeProps({ref_for:!0},o))]))})))]),1064,["data","on-selection","theme","on-close","flip","menu-style"]))],14,k)):t.createCommentVNode("v-if",!0)])),_:2},1032,["name","duration","onBeforeLeave","onAfterEnter"])],64))],46,x)))),128))],4)],544)},y.__scopeId="data-v-9bcc0be2",y.__file="src/components/Menu.vue";const E={dimension:{type:Number,default:45},position:{type:String,default:"bottom right"},fixed:{type:Boolean,default:!1},menuDimension:{type:Object,default:{height:250,width:250}},menuData:{type:Array,default:[]},useCustomContent:{type:Boolean,default:!1},onSelected:{type:Function,default:null},flipOnEdges:{type:Boolean,default:!1},theme:{type:Object,required:!1,default:b},preserveMenuPosition:{type:Boolean,default:!0},menuStyle:{type:String,default:"slide-out",required:!1}};var S=t.defineComponent({name:"FloatMenu",components:{MenuIcon:i,MenuComponent:y,XIcon:l},props:E,setup(e,{slots:i}){const{measurePerformance:r,markAsUsed:l}=g(),{isTouchDevice:s,handleTouchStart:c,handleTouchMove:u,handleTouchEnd:d,getSwipeDirection:m,triggerHapticFeedback:p,ensureTouchTarget:h}=v(),b=t.ref(null),f=t.ref(null),y=t.ref(),x=t.ref(),w=t.ref(!1),k=t.ref(),M=t.ref(void 0),C=t.ref("top"),E=t.ref(!1),S=t.ref(!1),T=t.ref(!1),A=t.ref(void 0!==window.ontouchstart),z=t.computed((()=>t.unref(A)?"touchmove":"mousemove")),B=t.computed((()=>"touchmove"===t.unref(z)?"accordion":e.menuStyle)),$=t.ref(!1),I=t.computed((()=>{const n=t.unref(b);return n?{left:`${n.left}px`,top:`${n.top}px`,width:`${e.dimension}px`,height:`${e.dimension}px`}:{}})),N=t.computed((()=>!Object.keys(i).length)),P=e=>{if(w.value){$.value&&(b.value=f.value);if(Array.from(e.target.classList).some((e=>"sub-menu"===e||"disabled"===e)))return;w.value=!1}},j=()=>{const t=a(e.position,e.dimension);b.value={left:Number(t.left.replace(/px/gi,"")),top:Number(t.top.replace(/px/gi,""))}},D=t=>{let n=0,o=0;if(t instanceof MouseEvent?(n=t.clientX,o=t.clientY):t instanceof TouchEvent&&(n=t.touches[0].clientX,o=t.touches[0].clientY),S.value){const t=o-Math.round(e.dimension/2);b.value={left:n-Math.round(e.dimension/2),top:t>0&&t<window.innerHeight-e.dimension?t:t<0?0:t-e.dimension}}};t.onMounted((()=>{const t=a(e.position,e.dimension),n={left:Number(t.left.replace(/px/gi,"")),top:Number(t.top.replace(/px/gi,""))};b.value=n,f.value=n,window.addEventListener("click",P),window.addEventListener("resize",j),window.addEventListener("mouseup",(e=>{const t=e.target.nodeName;("#document"===t||"HTML"===t)&&(T.value=!1,S.value=!1,f.value=b.value)}),{capture:!0}),!e.fixed&&x.value&&document.addEventListener(z.value,D)})),t.onUnmounted((()=>{window.removeEventListener("click",P),window.removeEventListener("resize",j),document.removeEventListener(z.value,D)}));const _=a=>{r("toggleMenu",(()=>{if(l("menuToggle"),S.value)return;a.stopPropagation(),a.preventDefault();if(!Array.from(a.target.classList).some((e=>"menu-list-item"===e)))if(w.value)w.value=!1,$.value&&(b.value=f.value);else{T.value=!1,S.value=!1,(()=>{const t=k.value,o=x.value,{dimension:a}=e;if(!t||!o)return;const i=n(o,t,a,e.menuDimension);C.value=i.newOrientation,M.value=i})(),(n=>{const a=t.unref(b);if(a&&k.value){const t=o(n,a,e.flipOnEdges,k.value);E.value=t.flip,$.value=t.reveal,t.position&&(b.value=t.position)}})(y.value);const a=k.value;a&&a.getAnimations&&a.getAnimations().forEach((e=>e.cancel())),w.value=!0,t.nextTick((()=>{if(k.value){const e=k.value.querySelector(".menu-wrapper");if(e){e.focus();const t=document.createElement("div");t.setAttribute("aria-live","polite"),t.className="sr-only",t.textContent="Menu opened",document.body.appendChild(t),setTimeout((()=>document.body.removeChild(t)),1e3)}}}))}}))},O=e=>{if("ArrowLeft"===e||"ArrowRight"===e)return;const n=k.value;if(n){const e=n.animate([{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(0.95)"}],{duration:250,easing:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",fill:"forwards"});if(n.getAnimations){n.getAnimations().forEach((t=>{t!==e&&t.cancel()}))}e.onfinish=()=>{w.value=!1,$.value&&(b.value=f.value),T.value=!1,S.value=!1,t.nextTick((()=>{y.value&&y.value.focus()}))}}else w.value=!1,T.value=!1,S.value=!1,$.value&&(b.value=f.value),t.nextTick((()=>{y.value?.focus()}))},L=t.computed((()=>({"--background":e.theme.primary}))),H=e=>{A.value||e.preventDefault(),T.value=!0},V=()=>{T.value&&(w.value=!1,S.value=!0)},R=t=>{let n,o;"touches"in t&&t.touches.length>0?(n=t.touches[0].clientX,o=t.touches[0].clientY):"changedTouches"in t&&t.changedTouches.length>0?(n=t.changedTouches[0].clientX,o=t.changedTouches[0].clientY):(n=t.clientX,o=t.clientY),S.value&&(f.value={left:n-Math.round(e.dimension/2),top:o-Math.round(e.dimension/2)},setTimeout((()=>{S.value=!1}),100)),T.value=!1},X=e=>{if(w.value&&("up"===e||"down"===e||"left"===e)){const n=k.value;if(n){const o="up"===e?"translateY(-20px)":"down"===e?"translateY(20px)":"translateX(-20px)";return n.animate([{opacity:1,transform:"scale(1)"},{opacity:0,transform:`scale(0.95) ${o}`}],{duration:250,easing:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",fill:"forwards"}).onfinish=()=>{w.value=!1,$.value&&(b.value=f.value),t.nextTick((()=>{y.value?.focus()}))},s.value&&p("light"),!0}}return!1};return t.nextTick((()=>{x.value&&h(x.value)})),{menuHead:y,menuHeadContainer:x,menuContainer:k,position:b,menuActive:w,dragActive:S,isTouchDevice:s,slotsEmpty:N,menuOrientation:C,menuCSS:M,flipMenu:E,style:I,computedMenuStyle:B,getTheme:L,toggleMenu:_,handleMenuClose:O,handleCloseClick:e=>{e.stopPropagation(),e.preventDefault(),s.value&&p("light"),O()},handleMenuItemSelection:t=>{r("menuItemSelection",(()=>{l("menuItemSelection");const n=k.value;if(n){n.animate([{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(0.95)"}],{duration:250,easing:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",fill:"forwards"}).onfinish=()=>{w.value=!1,e.onSelected&&e.onSelected(t)}}else w.value=!1,e.onSelected&&e.onSelected(t)}))},handleDragStart:H,handleDragMove:V,handleDragEnd:R,handleEnhancedTouchStart:e=>{c(e,(t=>{"longpress"===t.type&&(p("medium"),_(e))})),H(e)},handleEnhancedTouchMove:e=>{u(e),V()},handleEnhancedTouchEnd:e=>{d(e,(t=>{if("tap"===t.type)p("light"),_(e);else if("swipe"===t.type){const e=m();e&&w.value&&X(e.direction)}})),R(e)},handleKeyboardMenuActivation:e=>{"Enter"!==e.key&&" "!==e.key&&"Space"!==e.key||(e.preventDefault(),_(e))},handleSwipeToClose:X}}});const T=["aria-expanded"],A={class:"menu-head-icon"};C(".menu-head-wrapper{position:fixed;touch-action:none;z-index:9999}.menu-head-wrapper:not(.drag-active){transition:left .3s cubic-bezier(.25,.46,.45,.94),right .3s cubic-bezier(.25,.46,.45,.94),top .3s cubic-bezier(.25,.46,.45,.94),bottom .3s cubic-bezier(.25,.46,.45,.94)}.menu-head{align-items:center;backdrop-filter:blur(10px);background:var(--background);border:2px solid hsla(0,0%,100%,.2);border-radius:50%;box-shadow:0 8px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);cursor:pointer;display:flex;height:100%;justify-content:center;pointer-events:auto;position:relative;transition:all .3s cubic-bezier(.25,.46,.45,.94);width:100%}.menu-head:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);transform:scale(1.05)}.menu-head:active{transform:scale(.95)}.menu-head.menu-active{box-shadow:inset 0 0 12px 4px rgba(0,0,0,.15),0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);transform:scale(1.02)}.menu-head.drag-active{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);cursor:grabbing;transform:scale(1.1)}.menu-head-icon{align-items:center;color:#fff;display:flex;height:60%;justify-content:center;transition:transform .2s cubic-bezier(.25,.46,.45,.94);width:60%}.menu-head-icon svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));height:100%;width:100%}.menu-head.menu-active .menu-head-icon{transform:rotate(180deg)}.menu-container{align-items:flex-start;backdrop-filter:blur(20px);background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;box-shadow:0 8px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);display:flex;justify-content:flex-start;max-height:600px;min-height:300px;opacity:0;overflow:visible;position:absolute;transform:scale(.95);transition:opacity .25s cubic-bezier(.25,.46,.45,.94),transform .25s cubic-bezier(.25,.46,.45,.94),visibility 0s linear .25s;visibility:hidden;width:260px}.menu-container.menu-active{opacity:1;transform:scale(1);transition:opacity .25s cubic-bezier(.25,.46,.45,.94),transform .25s cubic-bezier(.25,.46,.45,.94),visibility 0s linear 0s;visibility:visible}.close-btn{align-items:center;backdrop-filter:blur(10px);background:rgba(0,0,0,.8);border:1px solid hsla(0,0%,100%,.2);border-radius:50%;cursor:pointer;display:flex;height:32px;justify-content:center;position:absolute;right:8px;top:-3rem;transition:all .2s cubic-bezier(.25,.46,.45,.94);width:32px}.close-btn:hover{background:rgba(0,0,0,.9);transform:scale(1.1)}.close-btn svg{color:#fff;height:16px;width:16px}@keyframes show{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes hide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in{0%{opacity:0;transform:scale(.9) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.menu-head:focus-visible{border-radius:50%;outline:2px solid #007bff;outline-offset:2px}[role=menuitem]:focus-visible.highlight,[role=menuitem]:focus-visible.selected{border-color:transparent!important;box-shadow:none!important;outline:none!important}[role=menuitem]:focus-visible.sub-menu.selected .menu-item-wrapper{background-color:var(--hover-background)}[role=menuitem]:focus-visible:not(.selected,.highlight){outline:2px solid #007bff;outline-offset:-2px;position:relative;z-index:1}.menu-head:focus:not(:focus-visible),.menu-list-item:focus:not(:focus-visible),[role=menuitem]:focus:not(:focus-visible){outline:none}.menu-list-item.highlight,.menu-list-item.selected{border:none!important;outline:none!important}.menu-list-item.highlight:focus,.menu-list-item.highlight:focus-visible,.menu-list-item.selected:focus,.menu-list-item.selected:focus-visible{border:none!important;outline:none!important}.menu-list-item:not(.selected,.highlight):focus-visible{outline:2px solid #007bff}"),S.render=function(e,n,o,a,i,r){const l=t.resolveComponent("MenuIcon"),s=t.resolveComponent("XIcon"),c=t.resolveComponent("MenuComponent");return t.openBlock(),t.createElementBlock("div",{ref:"menuHeadContainer",class:t.normalizeClass([{dragActive:e.dragActive,"touch-device":e.isTouchDevice},"menu-head-wrapper"]),style:t.normalizeStyle(e.style),onMousedown:n[4]||(n[4]=(...t)=>e.handleDragStart&&e.handleDragStart(...t)),onMouseup:n[5]||(n[5]=(...t)=>e.handleDragEnd&&e.handleDragEnd(...t)),onMousemove:n[6]||(n[6]=(...t)=>e.handleDragMove&&e.handleDragMove(...t)),onTouchstart:n[7]||(n[7]=(...t)=>e.handleEnhancedTouchStart&&e.handleEnhancedTouchStart(...t)),onTouchend:n[8]||(n[8]=(...t)=>e.handleEnhancedTouchEnd&&e.handleEnhancedTouchEnd(...t)),onTouchmove:n[9]||(n[9]=(...t)=>e.handleEnhancedTouchMove&&e.handleEnhancedTouchMove(...t))},[t.createElementVNode("div",{ref:"menuHead",tabindex:"0",class:t.normalizeClass([{"menu-active":e.menuActive,"drag-active":e.dragActive},"menu-head"]),style:t.normalizeStyle(e.getTheme),draggable:"false","aria-haspopup":"menu","aria-expanded":e.menuActive,"aria-label":"Menu",onClick:n[0]||(n[0]=(...t)=>e.toggleMenu&&e.toggleMenu(...t)),onKeydown:n[1]||(n[1]=(...t)=>e.handleKeyboardMenuActivation&&e.handleKeyboardMenuActivation(...t))},[t.createElementVNode("span",A,[t.renderSlot(e.$slots,"icon"),t.renderSlot(e.$slots,"default"),e.slotsEmpty?(t.openBlock(),t.createBlock(l,{key:0})):t.createCommentVNode("v-if",!0)])],46,T),t.createElementVNode("div",{ref:"menuContainer",class:t.normalizeClass([{"menu-active":e.menuActive},"menu-container"]),style:t.normalizeStyle(e.menuCSS),draggable:"false"},[t.createElementVNode("span",{class:"close-btn",onMousedown:n[2]||(n[2]=(...t)=>e.handleCloseClick&&e.handleCloseClick(...t)),onTouchstart:n[3]||(n[3]=(...t)=>e.handleCloseClick&&e.handleCloseClick(...t))},[t.createVNode(s)],32),e.menuActive?(t.openBlock(),t.createBlock(c,{key:0,data:e.menuData,flip:e.flipMenu,"on-selection":e.handleMenuItemSelection,theme:e.theme,"on-close":e.handleMenuClose,"menu-style":e.computedMenuStyle,"is-touch-device":e.isTouchDevice},t.createSlots({_:2},[t.renderList(Object.keys(e.$slots),(n=>({name:n,fn:t.withCtx((o=>[t.renderSlot(e.$slots,n,t.normalizeProps(t.guardReactiveProps(o)))]))})))]),1032,["data","flip","on-selection","theme","on-close","menu-style","is-touch-device"])):t.createCommentVNode("v-if",!0)],6)],38)},S.__file="src/components/index.vue";const z=S;function B(e){e.component("FloatMenu",S)}var $={install:B,FloatMenu:S};var I=Object.freeze({__proto__:null,useAnimations:function(){const e=t.ref(!1),n=t.ref([]),o=t.ref(!1);t.onMounted((()=>{const n=window.matchMedia("(prefers-reduced-motion: reduce)");e.value=n.matches;const o=t=>{e.value=t.matches};n.addEventListener("change",o),t.onUnmounted((()=>{n.removeEventListener("change",o)}))}));const a=(t,n=0)=>e.value?n:t,i=(t="ease-out")=>{if(e.value)return"ease";return{ease:"ease","ease-in":"cubic-bezier(0.4, 0, 1, 1)","ease-out":"cubic-bezier(0, 0, 0.2, 1)","ease-in-out":"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}[t]},r=(e,t,n={})=>{const{duration:o=300,delay:r=0,easing:l=i("ease-out"),onComplete:s}=n,c=a(o);if(0===c)return Object.entries(t).forEach((([t,n])=>{e.style.setProperty(t,String(n))})),void s?.();const u=`all ${c}ms ${l}`;function d(){Object.entries(t).forEach((([t,n])=>{e.style.setProperty(t,String(n))})),s&&setTimeout((()=>{e.style.transition="",s()}),c)}e.style.transition=u,r>0?setTimeout((()=>d()),r):d()},l=async()=>{if(0===n.value.length)return void(o.value=!1);o.value=!0;const e=n.value.shift();e&&(e(),setTimeout(l,a(100)))},s=t.computed((()=>({"menu-enter-active":`transition-all duration-${a(200)} ${i("ease-out")}`,"menu-leave-active":`transition-all duration-${a(150)} ${i("ease-in")}`,"menu-enter-from":"opacity-0 transform scale-95","menu-enter-to":"opacity-100 transform scale-100","menu-leave-from":"opacity-100 transform scale-100","menu-leave-to":"opacity-0 transform scale-95"})));return{prefersReducedMotion:t.computed((()=>e.value)),getAnimationDuration:a,getTimingFunction:i,animateElement:r,slideIn:(e,t="right",n=200)=>{e.style.transform={left:"translateX(-100%)",right:"translateX(100%)",up:"translateY(-100%)",down:"translateY(100%)"}[t],e.style.opacity="0",requestAnimationFrame((()=>{r(e,{transform:"translateX(0) translateY(0)",opacity:"1"},{duration:a(n),easing:i("ease-out")})}))},fadeIn:(e,t=150)=>{e.style.opacity="0",requestAnimationFrame((()=>{r(e,{opacity:"1"},{duration:a(t),easing:i("ease-out")})}))},fadeOut:(e,t=150,n)=>{r(e,{opacity:"0",transform:"scale(0.95)"},{duration:a(t),easing:i("ease-in"),onComplete:n})},scaleAnimation:(e,t=1.05,n=100)=>{r(e,{transform:`scale(${t})`},{duration:a(n),easing:i("ease-out")})},resetScale:(e,t=100)=>{r(e,{transform:"scale(1)"},{duration:a(t),easing:i("ease-out")})},createRipple:(t,n)=>{if(e.value)return;const o=t.getBoundingClientRect(),a=Math.max(o.width,o.height),i=n.clientX-o.left-a/2,r=n.clientY-o.top-a/2,l=document.createElement("span");if(l.style.cssText=`\n position: absolute;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.6);\n pointer-events: none;\n left: ${i}px;\n top: ${r}px;\n width: ${a}px;\n height: ${a}px;\n transform: scale(0);\n animation: ripple 600ms ease-out;\n `,!document.querySelector("#ripple-keyframes")){const e=document.createElement("style");e.id="ripple-keyframes",e.textContent="\n @keyframes ripple {\n 0% { transform: scale(0); opacity: 1; }\n 100% { transform: scale(1); opacity: 0; }\n }\n ",document.head.appendChild(e)}t.style.position="relative",t.style.overflow="hidden",t.appendChild(l),setTimeout((()=>{l.parentNode&&l.parentNode.removeChild(l)}),600)},queueAnimation:e=>{n.value.push(e),o.value||l()},transitionClasses:s}}});var N=Object.freeze({__proto__:null,usePerformanceOptimizations:function(){const e=t.shallowRef(new Map);return{memoize:(t,n)=>(...o)=>{const a=n?n(...o):JSON.stringify(o);if(e.value.has(a))return e.value.get(a);const i=t(...o);return e.value.set(a,i),i},useLazyMenuItems:e=>{const n=t.ref([]),o=t.ref(0),a=()=>{const t=10*o.value,a=t+10,i=e.slice(t,a);n.value.push(...i),o.value++},i=t.computed((()=>n.value.length<e.length));return e.length>0&&a(),{visibleItems:n,loadNextBatch:a,loadAllItems:()=>{n.value=[...e]},hasMoreItems:i}},debounce:(e,t)=>{let n;return(...o)=>{clearTimeout(n),n=window.setTimeout((()=>e(...o)),t)}},throttle:(e,t)=>{let n;return(...o)=>{n||(e(...o),n=!0,setTimeout((()=>n=!1),t))}},clearCache:()=>{e.value.clear()},getCacheSize:()=>e.value.size}}});var P=Object.freeze({__proto__:null,useErrorHandling:function(){const e=t.ref([]),n=(t,n="error",o)=>{const a={id:`error-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,message:t,type:n,timestamp:new Date,context:o};return e.value.unshift(a),e.value.length>10&&(e.value=e.value.slice(0,10)),a.id},o=e=>{if(!Array.isArray(e))return n("Menu data must be an array","error"),!1;for(let t=0;t<e.length;t++){const a=e[t];if(!a||"object"!=typeof a)return n(`Menu item at index ${t} must be an object`,"error"),!1;if(!a.name&&!a.divider)return n(`Menu item at index ${t} must have a name or be a divider`,"error"),!1;if(a.subMenu&&!Array.isArray(a.subMenu.items))return n(`Submenu items at index ${t} must be an array`,"error"),!1;if(a.subMenu?.items){if(!o(a.subMenu.items))return!1}}return!0},a=t.computed((()=>e.value.length>0)),i=t.computed((()=>e.value.length)),r=t.computed((()=>e.value[0]||null)),l=t.computed((()=>({errors:e.value.filter((e=>"error"===e.type)),warnings:e.value.filter((e=>"warning"===e.type)),info:e.value.filter((e=>"info"===e.type))})));return{errors:t.computed((()=>e.value)),hasErrors:a,errorCount:i,latestError:r,errorsByType:l,addError:n,removeError:t=>{const n=e.value.findIndex((e=>e.id===t));n>-1&&e.value.splice(n,1)},clearErrors:()=>{e.value=[]},clearErrorsByType:t=>{e.value=e.value.filter((e=>e.type!==t))},tryAsync:async(e,t,o)=>{try{return await e()}catch(e){const a=t||`An error occurred: ${e instanceof Error?e.message:"Unknown error"}`;return n(a,"error",e),o?.(e instanceof Error?e:new Error(String(e))),null}},trySync:(e,t,o)=>{try{return e()}catch(e){const a=t||`An error occurred: ${e instanceof Error?e.message:"Unknown error"}`;return n(a,"error",e),o?.(e instanceof Error?e:new Error(String(e))),null}},validateMenuData:o,validateTheme:e=>{if(!e||"object"!=typeof e)return n("Theme must be an object","error"),!1;const t=["primary","menuBgColor","textColor","textSelectedColor","hoverBackground"];for(const o of t)o in e||n(`Theme is missing required property: ${o}`,"warning");return!0},handleDOMError:(e,t)=>{n(`DOM operation failed: ${e.message}`,"error",{error:e,element:t?.tagName})},handleKeyboardError:(e,t)=>{n(`Keyboard navigation error: ${e.message}`,"error",{error:e,keyCode:t})},handleAnimationError:(e,t)=>{n(`Animation error: ${e.message}`,"warning",{error:e,animationType:t})},getUserFriendlyMessage:e=>{const t={"Menu data must be an array":"Invalid menu configuration. Please check your menu data.","DOM operation failed":"Interface error occurred. Please try again.","Keyboard navigation error":"Navigation issue detected. Please use mouse or try again.","Animation error":"Display issue occurred. Functionality is not affected."};for(const[n,o]of Object.entries(t))if(e.message.includes(n))return o;return"An unexpected error occurred. Please try again."}}}});e.FloatMenu=z,e.ThemeDefault=b,e.default=$,e.install=B,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=vue-float-menu.umd.js.map