v-dropdown/dist/v-dropdown.umd.cjs

A dropdown layer container component for vue3

(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.drop-down-left-enter-from,.drop-down-left-leave-to{transform:scale3d(.95,.95,1) translateZ(0);opacity:0}.drop-down-left-enter-active,.drop-down-left-leave-active{backface-visibility:hidden;will-change:opacity,transform;contain:layout style paint}.drop-down-left-enter-active{transform-origin:top right;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.drop-down-left-leave-active{transform-origin:top right;transition-property:opacity,transform;transition-duration:75ms;transition-timing-function:cubic-bezier(.4,0,.2,1)}.drop-down-right-enter-from,.drop-down-right-leave-to{transform:scale3d(.95,.95,1) translateZ(0);opacity:0}.drop-down-right-enter-active,.drop-down-right-leave-active{backface-visibility:hidden;will-change:opacity,transform;contain:layout style paint}.drop-down-right-enter-active{transform-origin:top left;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.drop-down-right-leave-active{transform-origin:top left;transition-property:opacity,transform;transition-duration:75ms;transition-timing-function:cubic-bezier(.4,0,.2,1)}.drop-up-left-enter-from,.drop-up-left-leave-to{transform:scale3d(.95,.95,1) translateZ(0);opacity:0}.drop-up-left-enter-active,.drop-up-left-leave-active{backface-visibility:hidden;will-change:opacity,transform;contain:layout style paint}.drop-up-left-enter-active{transform-origin:bottom right;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.drop-up-left-leave-active{transform-origin:bottom right;transition-property:opacity,transform;transition-duration:75ms;transition-timing-function:cubic-bezier(.4,0,.2,1)}.drop-up-right-enter-from,.drop-up-right-leave-to{transform:scale3d(.95,.95,1) translateZ(0);opacity:0}.drop-up-right-enter-active,.drop-up-right-leave-active{backface-visibility:hidden;will-change:opacity,transform;contain:layout style paint}.drop-up-right-enter-active{transform-origin:bottom left;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.drop-up-right-leave-active{transform-origin:bottom left;transition-property:opacity,transform;transition-duration:75ms;transition-timing-function:cubic-bezier(.4,0,.2,1)}.dd-trigger{display:inline-flex;box-sizing:border-box;width:-moz-fit-content;width:fit-content}.dd-trigger.dd-trigger--block{display:flex;width:auto}.dd-content-body{display:flex}.dd-content{position:absolute;top:0;left:0;-webkit-font-smoothing:subpixel-antialiased;display:inline-flex;margin:0;padding:0;max-width:80vw;box-sizing:border-box;background-color:#fff;overflow:hidden;border:1px solid #d0d0d0;box-shadow:0 9px 24px #0000002e,0 3px 6px #00000014}.dd-content.dd-no-border{border:0}.dd-rounded--small{border-radius:.25rem!important}.dd-rounded--medium{border-radius:.5rem!important}.dd-rounded--large{border-radius:.75rem!important}.dd-rounded--pill{border-radius:50rem!important}.dd-rounded--circle{border-radius:50%!important}.dd-content-rounded--small{border-radius:6px!important}.dd-content-rounded--medium{border-radius:12px!important}.dd-content-rounded--large{border-radius:18px!important}.dd-trigger-container{display:inline-block}.dd-trigger-container.dd-disabled .dd-default-trigger,.dd-trigger-container.dd-disabled:hover .dd-default-trigger{border:1px solid #eee;background-color:#eee;cursor:default;color:#aaa}.dd-trigger-container .dd-default-trigger{display:inline-flex;align-items:center;padding:.5rem 1rem;background-color:#fff;border:1px solid #ddd;border-radius:.3rem;font-size:14px;line-height:1.42857143;outline:0!important;color:#666;gap:.5rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.dd-trigger-container .dd-default-trigger:hover{border:1px solid #aaa;color:#000}.dd-trigger-container .dd-default-trigger .dd-caret-down{transition:transform .2s ease}.dd-trigger-container .dd-default-trigger.dd-opened{box-shadow:3px 2px 6px #0003;border:1px solid #666;color:#000}.dd-trigger-container .dd-default-trigger.dd-opened .dd-caret-down{transform:rotate(180deg)}.dd-trigger-container .dd-default-trigger.dd-opened:hover{border:1px solid #666}.dd-trigger-container .dd-default-trigger.dd-rounded--circle{width:38px;height:38px;padding:0;justify-content:center}.dd-caret-down{display:inline-block;width:0;height:0;border-top:4px solid;border-left:4px solid transparent;border-right:4px solid transparent;vertical-align:middle;content:""}')),document.head.appendChild(t)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
(function(w,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(w=typeof globalThis<"u"?globalThis:w||self,n(w.VDropdown={},w.Vue))})(this,(function(w,n){"use strict";const M="click",oe="hover",re="contextmenu",z="body",B="small",_="medium",P="large",le="pill",U="circle",G=[B,_,P,le,U],j=[B,_,P],$=Symbol("dropdown"),W=Symbol("internal"),X=Symbol("container"),H="left",se="center",N="right",Y="up",A="down";function ie(e){return window.getComputedStyle(e).display==="none"}function F(e){const t=e.getBoundingClientRect();return{width:e.offsetWidth,height:e.offsetHeight,top:t.top,left:t.left}}function Z(e){if(!e)return{width:0,height:0,top:0,left:0};if(ie(e)){e.style.visibility="hidden",e.style.display="inline-flex";const t=F(e);return e.style.visibility="visible",e.style.display="none",t}return F(e)}function ae(e){return["dd-trigger",{"dd-trigger--block":e.block}]}function ue(e){return`dd-rounded--${!e||!G.includes(e)?_:G.find(o=>o===e)}`}function de(e){return`dd-content-rounded--${!e||!j.includes(e)?B:j.find(o=>o===e)}`}function q(e){return{isTriggerByClick:e===M,isTriggerByHover:e===oe,isTriggerByContextmenu:e===re}}const K=()=>n.inject($,{});function ce(e=300){let t;return o=>{clearTimeout(t),t=setTimeout(o,e)}}function fe(e,t,o,l,r,s){const{trigger:d,gap:c}=s,{isTriggerByContextmenu:f}=q(d);function i(g,a,p){r.value||(l.value.vertical=A);const h=window.scrollY,L=document.documentElement.clientHeight,y=f?g:a.top+h,v=f?g:a.top+a.height+c+h,m=y-c-p.height,C=v+p.height>h+L,T=m<h;return l.value.vertical===Y?T&&!C?(l.value.vertical=A,v):m:!T&&C?(l.value.vertical=Y,m):v}function b(g,a,p){r.value||(l.value.horizontal=N);const h=window.scrollX,L=document.documentElement.clientWidth,y=f?0:a.width,v=f?g:a.left+h,m=v+y/2-p.width/2,C=v+y-p.width,T=v+p.width>h+L,R=m+p.width>h+L,S=C<h,x=n.toRef(s,"align");return x.value===se?(l.value.horizontal=R?H:N,R?C:S?v:m):x.value===N?(l.value.horizontal=S?N:H,S?v:C):(l.value.horizontal=T?H:N,T?C:v)}function D(){const g=Z(e.value),a=Z(t.value);return{top:i(o.value.y,g,a),left:b(o.value.x,g,a)}}return{getDirection:D}}function pe(e,t){let o=null;const l={root:null,rootMargin:"0px",threshold:[.5,.75,1]},r=1e-7,s=i=>{const b=i[0];Math.abs(b.intersectionRatio-1)<r||t?.()};function d(){e.value&&(o||(o=new IntersectionObserver(s,l)),o.observe(e.value))}function c(){o&&o.unobserve(e.value)}function f(){o&&(o.disconnect(),o=null)}return n.onBeforeUnmount(f),{startIntersectionObserving:d,stopIntersectionObserving:c}}function ve(e,t,o){const l=n.ref(!1),r=n.ref(!1);let s=null;const d=()=>{if(!r.value){r.value=!0;return}o?.()},c=()=>{!e.value||!t.value||l.value||(s||(s=new ResizeObserver(d)),s.observe(e.value),s.observe(t.value),l.value=!0)},f=()=>{!s||!l.value||(e.value&&t.value&&(s.unobserve(e.value),s.unobserve(t.value)),l.value=!1,r.value=!1)},i=()=>{s&&(s.disconnect(),s=null,l.value=!1,r.value=!1)};return n.onUnmounted(i),{startObserving:c,stopObserving:f}}function I(e,t,o,l){let r=null;const s=()=>{r&&(r.removeEventListener(t,o,l),r=null)};return n.onMounted(()=>{r=typeof e=="function"?e():e,r?.addEventListener(t,o,l)}),n.onBeforeUnmount(s),s}function ge(e,t,o,l){const{emit:r,expose:s}=l,{disabled:d,manual:c,toggle:f}=n.toRefs(o),i=n.ref(!1),b=n.ref({x:null,y:null}),D=n.ref({vertical:A,horizontal:N}),g=n.ref(),a=n.ref({}),p=n.computed(()=>o.animated?`drop-${D.value.vertical}-${D.value.horizontal}`:""),h=o.appendTo||z,L=o.appendTo!==z,y=ce(150),{isTriggerByClick:v,isTriggerByHover:m,isTriggerByContextmenu:C}=q(o.trigger),{getDirection:T}=fe(e,t,b,D,i,o),{startObserving:R,stopObserving:S}=ve(e,t,V),{startIntersectionObserving:x,stopIntersectionObserving:Ce}=pe(t,V);n.watch(i,u=>{r("visible-change",u),u?(document.body.addEventListener("mousedown",Q),R(),x()):(S(),Ce(),document.body.removeEventListener("mousedown",Q))});function we(){r("open")}function De(){r("opened")}function ye(){r("close")}function Te(){r("closed")}function O(){d.value||(V(),m?y(()=>{i.value=!0}):i.value=!0)}function E(){d.value&&!i.value||(m?y(()=>{i.value=!1}):i.value=!1)}const k=()=>{if(f.value)return i.value?E():O();i.value||O()};function Q(u){if(!i.value||!e.value||!t.value)return;const Ne=e.value.contains(u.target),Ie=t.value.contains(u.target);if(Ne)return C&&u.button===0?E():"";Ie||E()}function V(){const u=T();a.value.top=`${u.top}px`,a.value.left=`${u.left}px`}const Oe=u=>{!v||c.value||(u.stopPropagation(),k())},ee=()=>m&&O(),ne=()=>m&&E(),Ee=u=>{!C||c.value||(u.stopPropagation(),u.preventDefault(),b.value.x=u.pageX,b.value.y=u.pageY,O())};v&&I(()=>e.value,"click",Oe),m&&(I(()=>e.value,"mouseenter",ee),I(()=>e.value,"mouseleave",ne),I(()=>t.value,"mouseenter",ee),I(()=>t.value,"mouseleave",ne)),C&&I(()=>e.value,"contextmenu",Ee);const te={disabled:n.computed(()=>d.value),visible:n.computed(()=>i.value),adjust:V,open:O,close:E,toggleVisible:k};return n.provide($,te),n.provide(W,{contentStyles:a,setContentClassGetter:u=>{g.value=u}}),n.provide(X,{appendTo:h,defer:L,transitionName:p,onDropdownOpen:we,onDropdownOpened:De,onDropdownClose:ye,onDropdownClosed:Te}),s({open:O,close:E,toggleVisible:k,adjust:V,visible:i}),{visible:i,open:O,close:E,toggleVisible:k,slotData:te,getContentClass:g,contentStyles:a}}const J=n.defineComponent({name:"DropdownTrigger",props:{rounded:{type:String,default:_}},setup(e,{slots:t}){const o=K(),l=n.computed(()=>["dd-default-trigger",{"dd-opened":o?.visible?.value},ue(e.rounded)]),r=n.computed(()=>({"dd-trigger-container":!0,"dd-disabled":o?.disabled?.value})),s=()=>t.default?t.default():"Open",d=()=>e.rounded===U?null:t.append?t.append():n.createVNode("span",{class:"dd-caret-down"},null),c=()=>n.createVNode("button",{type:"button",class:l.value},[n.createVNode(s,null,null),n.createVNode(d,null,null)]);return()=>n.createVNode("div",{class:r.value},[n.createVNode(c,null,null)])}}),me=n.defineComponent({name:"DropdownContentContainer",setup(e,{slots:t}){const{appendTo:o,defer:l,transitionName:r,onDropdownOpen:s,onDropdownOpened:d,onDropdownClose:c,onDropdownClosed:f}=n.inject(X,{}),i=(a,p)=>{s(),setTimeout(p,150)},b=a=>{d()},D=(a,p)=>{c(),setTimeout(p,75)},g=a=>{f()};return()=>n.createVNode(n.Teleport,{to:o,defer:l},{default:()=>[n.createVNode(n.Transition,{name:r.value,onEnter:i,onAfterEnter:b,onLeave:D,onAfterLeave:g},{default:()=>t?.default?.()})]})}}),be=n.defineComponent({name:"VDropdown",props:{disabled:{type:Boolean,default:!1},align:{type:String,default:"left"},toggle:{type:Boolean,default:!0},manual:{type:Boolean,default:!1},block:{type:Boolean,default:!1},trigger:{type:String,default:M},animated:{type:Boolean,default:!0},gap:{type:Number,default:5},appendTo:{type:[String,Object],default:z}},emits:["visible-change","open","close","opened","closed"],setup(e,t){const{slots:o}=t,l=n.ref(),r=n.ref(),{slotData:s,visible:d,getContentClass:c,contentStyles:f}=ge(l,r,e,t),i=()=>o.trigger?o.trigger(s):n.createVNode(J,null,null),b=()=>n.createVNode(me,null,{default:()=>n.withDirectives(n.createVNode("div",{ref:r,style:f.value,class:c?.value?.()},[o?.default?.(s)]),[[n.vShow,d.value]])});return()=>n.createVNode("div",{ref:l,class:ae(e)},[n.createVNode(i,null,null),n.createVNode(b,null,null)])}}),he=n.defineComponent({name:"DropdownContent",props:{border:{type:Boolean,default:!0},rounded:{type:String,default:B},zIndex:{type:Number,default:3e3}},setup(e,{slots:t,attrs:o}){const{setContentClassGetter:l,contentStyles:r}=n.inject(W,{});return l?.(()=>{const s=["dd-content",de(e.rounded)];return e.border||s.push("dd-no-border"),s}),()=>(r&&(r.value["z-index"]=e.zIndex),n.createVNode("div",{class:"dd-content-body"},[t?.default?.()]))}});w.Dropdown=be,w.DropdownContent=he,w.DropdownTrigger=J,w.useDropdown=K,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})}));