vxe-pc-ui/lib/pulldown/src/pulldown.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxePulldown",props:{modelValue:Boolean,disabled:Boolean,placement:String,trigger:{type:String,default:(0,_ui.getConfig)().pulldown.trigger},zIndex:Number,size:{type:String,default:()=>(0,_ui.getConfig)().pulldown.size||(0,_ui.getConfig)().size},options:Array,className:{type:[String,Function],default:(0,_ui.getConfig)().pulldown.className},popupClassName:[String,Function],showPopupShadow:Boolean,popupConfig:Object,destroyOnClose:{type:Boolean,default:(0,_ui.getConfig)().pulldown.destroyOnClose},transfer:{type:Boolean,default:null}},emits:["update:modelValue","click","option-click","show-panel","hide-panel","visible-change"],setup(b,e){let{slots:x,emit:n}=e,i=(0,_vue.inject)("$xeModal",null),t=(0,_vue.inject)("$xeDrawer",null),a=(0,_vue.inject)("$xeTable",null),u=(0,_vue.inject)("$xeForm",null);var l=_xeUtils.default.uniqueId();let w=(0,_ui.useSize)(b).computeSize,h=(0,_vue.reactive)({initialized:!1,panelIndex:0,panelStyle:{},panelPlacement:null,visiblePanel:!1,isAniVisible:!1,isActivated:!1}),o={hpTimeout:void 0},P=(0,_vue.ref)(),y=(0,_vue.ref)(),T=(0,_vue.ref)(),C=(0,_vue.computed)(()=>{var e=b.transfer,l=E.value;if(_xeUtils.default.isBoolean(l.transfer))return l.transfer;if(null===e){l=(0,_ui.getConfig)().pulldown.transfer;if(_xeUtils.default.isBoolean(l))return l;if(a||i||t||u)return!0}return e}),E=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().pulldown.popupConfig,b.popupConfig)),s={refElem:P},z={xID:l,props:b,context:e,reactData:h,internalData:o,getRefMaps:()=>s};let r=()=>{var e=E.value.zIndex||b.zIndex;e?h.panelIndex=_xeUtils.default.toNumber(e):h.panelIndex<(0,_utils.getLastZIndex)()&&(h.panelIndex=(0,_utils.nextZIndex)())};let d=()=>{let i=b.placement,n=h.panelIndex,t=y.value,a=T.value,u=C.value,o=E.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(t,a,{placement:o.placement||i,defaultPlacement:o.defaultPlacement,teleportTo:u}),l=Object.assign(e.style,{zIndex:n});h.panelStyle=l,h.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},p=()=>(h.initialized||(h.initialized=!0),new Promise(e=>{b.disabled?(0,_vue.nextTick)(()=>{e()}):(o.hpTimeout&&clearTimeout(o.hpTimeout),h.isActivated=!0,h.isAniVisible=!0,setTimeout(()=>{h.visiblePanel=!0,n("update:modelValue",!0),d(),setTimeout(()=>{e(d())},40)},10),r(),f("visible-change",{visible:!0},null))})),v=()=>(h.visiblePanel=!1,f("visible-change",{visible:!1},null),n("update:modelValue",!1),new Promise(e=>{h.isAniVisible?o.hpTimeout=setTimeout(()=>{(h.isAniVisible=!1,_vue.nextTick)(()=>{e()})},350):(0,_vue.nextTick)(()=>{e()})}));let V=(e,l)=>{l.disabled||(h.visiblePanel&&(v(),f("hide-panel",{},e)),f("option-click",{option:l},e))},A=e=>{var l=b.trigger,i=E.value;"click"===(l||i.trigger)&&(h.visiblePanel?(v(),f("hide-panel",{},e)):(p(),f("show-panel",{},e))),f("click",{$pulldown:z},e)},c=e=>{var{trigger:l,disabled:i}=b,n=h.visiblePanel,t=T.value,a=E.value,l=l||a.trigger;i||n&&((0,_dom.getEventTargetNode)(e,t).flag?d():"manual"!==l&&(v(),f("hide-panel",{},e)))},_=e=>{var{trigger:l,disabled:i}=b,n=h.visiblePanel,t=E.value,l=l||t.trigger,t=P.value,a=T.value;i||(h.isActivated=(0,_dom.getEventTargetNode)(e,t).flag||(0,_dom.getEventTargetNode)(e,a).flag,n&&!h.isActivated&&"manual"!==l&&(v(),f("hide-panel",{},e)))},g=e=>{var l=b.trigger,{visiblePanel:i,isActivated:n}=h,t=E.value,l=l||t.trigger;i&&"manual"!==l&&(v(),f("hide-panel",{},e)),n&&(h.isActivated=!1)},m=()=>{var e=h.visiblePanel;e&&d()},f=(e,l,i)=>{n(e,(0,_ui.createEvent)(i,{$pulldown:z},l))};l={dispatchEvent:f,isPanelVisible:()=>h.visiblePanel,togglePanel:()=>(h.visiblePanel?v:p)(),showPanel:p,hidePanel:v},Object.assign(z,l),(0,_vue.watch)(()=>b.modelValue,e=>{h.isActivated=!!e,(e?p:v)()}),(0,_vue.nextTick)(()=>{b.modelValue&&p(),_ui.globalEvents.on(z,"mousewheel",c),_ui.globalEvents.on(z,"mousedown",_),_ui.globalEvents.on(z,"blur",g),_ui.globalEvents.on(z,"resize",m)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(z,"mousewheel"),_ui.globalEvents.off(z,"mousedown"),_ui.globalEvents.off(z,"blur"),_ui.globalEvents.off(z,"resize")});return z.renderVN=()=>{var{className:e,options:l,showPopupShadow:i,destroyOnClose:n,disabled:t}=b,{initialized:a,isActivated:u,isAniVisible:o,visiblePanel:s,panelStyle:r,panelPlacement:d}=h,p=C.value,v=w.value,c=E.value,_=x.default,g=x.header,m=x.footer,f=x.dropdown,c=c.className||b.popupClassName;return(0,_vue.h)("div",{ref:P,class:["vxe-pulldown",e?_xeUtils.default.isFunction(e)?e({$pulldown:z}):e:"",{["size--"+v]:v,"is--visible":s,"is--disabled":t,"is--active":u}]},[(0,_vue.h)("div",{ref:y,class:"vxe-pulldown--content",onClick:A},_?_({$pulldown:z}):[]),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!p||!a},[(0,_vue.h)("div",{ref:T,class:["vxe-table--ignore-clear vxe-pulldown--panel",c?_xeUtils.default.isFunction(c)?c({$pulldown:z}):c:"",{["size--"+v]:v,"is--transfer":p,"ani--leave":o,"ani--enter":s}],placement:d,style:r},[(0,_vue.h)("div",{class:["vxe-pulldown--panel-wrapper",{"is--shadow":i}]},a&&(!n||s||o)?[g?(0,_vue.h)("div",{class:"vxe-pulldown--panel-header"},g({$pulldown:z})):(0,_ui.renderEmptyElement)(z),(0,_vue.h)("div",{class:"vxe-pulldown--panel-body"},f?f({$pulldown:z}):[(e=>{let i=x.option;return(0,_vue.h)("div",{class:"vxe-pulldown--panel-list"},e?e.map(l=>(0,_vue.h)("div",{class:"vxe-pulldown--panel-item",onClick(e){V(e,l)}},i?i({$pulldown:z,option:l}):""+(l.label||""))):[])})(l)]),m?(0,_vue.h)("div",{class:"vxe-pulldown--panel-footer"},m({$pulldown:z})):(0,_ui.renderEmptyElement)(z)]:[])])])])},z},render(){return this.renderVN()}});