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