vexip-ui/lib/components/popup/popup.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const o=require("vue");require("./popup-item.vue.cjs");const y=require("@vexip-ui/config"),i=require("@vexip-ui/utils"),h=require("./symbol.cjs"),B=require("./popup-item.vue2.cjs"),S=o.defineComponent({name:"Popup",__name:"popup",props:{transitionName:{type:String,default:null},innerClass:{type:y.classProp,default:null},placement:{default:"top-right",validator:u=>h.popupPlacements.includes(u)},startOffset:{type:Number,default:30},itemGap:{type:Number,default:16}},setup(u,{expose:k}){const l=u,f=y.useNameHelper("popup"),r=o.ref([]),c=[],g=o.ref();let p=!1;const b=o.computed(()=>l.placement.split("-")),C=o.computed(()=>l.transitionName||f.ns("popup-top"));o.watch(()=>l.startOffset,(e,t)=>{r.value.forEach(n=>{n.verticalPosition+=e-t})}),o.provide(h.DELETE_HANDLER,q),k({items:r,wrapper:g,add:I,remove:x,has:N,find:d,clear:P});function E(e){const n={[b.value[0]]:`${e.verticalPosition}px`},a=parseInt(e.zIndex);return Number.isNaN(a)||(n.zIndex=a),n}function I(e){return new Promise(t=>{const n=i.isFunction(e.onOpen)?e.onOpen:i.noop;e.onOpen=a=>{t(a),n()},c.push({type:"add",param:e}),p||(p=!0,v())})}function x(e){return new Promise(t=>{const n=d(e);if(!n)return t(!1);const a=i.isFunction(n.onClose)?n.onClose:i.noop;n.onClose=s=>{t(s),a(s)},c.push({type:"clear",param:e}),p||(p=!0,v())})}function v(){if(c.length){const e=c.shift();e.type==="add"?O(e.param):_(e.param),requestAnimationFrame(v)}else p=!1}function O(e){let t=e.key?d(e.key):null;if(!(t!=null&&t.visible)){const n=i.getGlobalCount(),a=e.key??f.bs(`${n}`);let s=l.startOffset;r.value.forEach(m=>{m.visible&&(s+=m.height+l.itemGap)}),t=o.reactive(Object.assign({key:a,content:"",closable:!1,onOpen:i.noop,onClose:i.noop,onEnter:i.noop,onLeave:i.noop},e,{height:0,visible:!0,verticalPosition:s})),r.value.push(t)}i.isFunction(e.onOpen)&&e.onOpen(t.key)}function _(e){const t=r.value.findIndex(n=>n.key===e);if(~t){const n=r.value[t],a=n.height;n.visible=!1;for(let s=t+1,m=r.value.length;s<m;++s)r.value[s].verticalPosition-=a+l.itemGap;i.isFunction(n.onClose)&&n.onClose(!0)}}function q(e){const t=r.value.findIndex(n=>n.key===e);~t&&r.value.splice(t,1)}function N(e){return!~r.value.findIndex(t=>t.key===e)}function d(e){return r.value.find(t=>t.key===e)}function P(){c.length=0,r.value=[]}function F(e){i.isFunction(e.onEnter)&&e.onEnter()}function L(e){i.isFunction(e.onLeave)&&e.onLeave()}return(e,t)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass([o.unref(f).b(),o.unref(f).bm(u.placement)])},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(r.value,n=>(o.openBlock(),o.createBlock(B,{key:n.key,state:n,"transition-name":C.value,"inner-class":u.innerClass,style:o.normalizeStyle(E(n)),onEnter:a=>F(n),onLeave:a=>L(n)},{default:o.withCtx(({item:a})=>[o.renderSlot(e.$slots,"item",{item:a})]),_:2},1032,["state","transition-name","inner-class","style","onEnter","onLeave"]))),128))],2))}});module.exports=S;
//# sourceMappingURL=popup.vue2.cjs.map