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

A vue based PC component library

"use strict";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){const{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();const 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};const d=()=>{var e=E.value.zIndex||b.zIndex;e?h.panelIndex=_xeUtils.default.toNumber(e):h.panelIndex<(0,_utils.getLastZIndex)()&&(h.panelIndex=(0,_utils.nextZIndex)())};const r=()=>{const 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,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),r(),setTimeout(()=>{e(r())},40)},10),d(),g("visible-change",{visible:!0},null))})),v=()=>(h.visiblePanel=!1,g("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()})}));const V=(e,l)=>{l.disabled||(h.visiblePanel&&(v(),g("hide-panel",{},e)),g("option-click",{option:l},e))},A=e=>{var l=b["trigger"];"click"===l&&(h.visiblePanel?(v(),g("hide-panel",{},e)):(p(),g("show-panel",{},e))),g("click",{$pulldown:z},e)},c=e=>{var l=b["disabled"],i=h["visiblePanel"],n=T.value;l||i&&((0,_dom.getEventTargetNode)(e,n).flag?r():(v(),g("hide-panel",{},e)))},_=e=>{var l=b["disabled"],i=h["visiblePanel"],n=P.value,t=T.value;l||(h.isActivated=(0,_dom.getEventTargetNode)(e,n).flag||(0,_dom.getEventTargetNode)(e,t).flag,i&&!h.isActivated&&(v(),g("hide-panel",{},e)))},m=e=>{var{visiblePanel:l,isActivated:i}=h;l&&(v(),g("hide-panel",{},e)),i&&(h.isActivated=!1)},f=()=>{var e=h["visiblePanel"];e&&r()},g=(e,l,i)=>{n(e,(0,_ui.createEvent)(i,{$pulldown:z},l))};l={dispatchEvent:g,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",m),_ui.globalEvents.on(z,"resize",f)}),(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:d,panelPlacement:r}=h,p=C.value,v=w.value,c=E.value,_=x.default,m=x.header,f=x.footer,g=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:r,style:d},[(0,_vue.h)("div",{class:["vxe-pulldown--panel-wrapper",{"is--shadow":i}]},a&&(!n||s||o)?[m?(0,_vue.h)("div",{class:"vxe-pulldown--panel-header"},m({$pulldown:z})):(0,_ui.renderEmptyElement)(z),(0,_vue.h)("div",{class:"vxe-pulldown--panel-body"},g?g({$pulldown:z}):[(e=>{const 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)]),f?(0,_vue.h)("div",{class:"vxe-pulldown--panel-footer"},f({$pulldown:z})):(0,_ui.renderEmptyElement)(z)]:[])])])])},z},render(){return this.renderVN()}});