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