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