vxe-pc-ui/lib/button/src/button.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"),_log=require("../../ui/src/log"),_tooltip=_interopRequireDefault(require("../../tooltip/src/tooltip"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeButton",props:{type:String,mode:String,className:[String,Function],popupClassName:[String,Function],size:{type:String,default:()=>(0,_ui.getConfig)().button.size||(0,_ui.getConfig)().size},name:[String,Number],routerLink:Object,permissionCode:[String,Number],content:String,placement:String,status:String,title:String,icon:String,round:Boolean,circle:Boolean,disabled:Boolean,loading:Boolean,trigger:{type:String,default:()=>(0,_ui.getConfig)().button.trigger},align:String,prefixTooltip:Object,suffixTooltip:Object,destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().button.destroyOnClose},transfer:{type:Boolean,default:null}},emits:["click","mouseenter","mouseleave","dropdown-click"],setup(N,e){const{slots:k,emit:n}=e,i=(0,_vue.inject)("$xeModal",null),o=(0,_vue.inject)("$xeDrawer",null),u=(0,_vue.inject)("$xeTable",null),l=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("$xeButtonGroup",null);var t=_xeUtils.default.uniqueId();const P=(0,_ui.useSize)(N)["computeSize"],C=(0,_ui.usePermission)(N)["computePermissionInfo"],w=(0,_vue.reactive)({initialized:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1,panelIndex:0,panelStyle:{},panelPlacement:""}),s={showTime:void 0,tooltipTimeout:void 0},S=(0,_vue.ref)(),I=(0,_vue.ref)(),j=(0,_vue.ref)(),r={refElem:S},z={xID:t,props:N,context:e,reactData:w,internalData:s,getRefMaps:()=>r};const M=(0,_vue.computed)(()=>{var e=N["transfer"];if(null===e){var t=(0,_ui.getConfig)().button.transfer;if(_xeUtils.default.isBoolean(t))return t;if(u||i||o||l)return!0}return e}),$=(0,_vue.computed)(()=>{var e=N["disabled"],t=C.value;return e||t.disabled}),E=(0,_vue.computed)(()=>{var e=N["type"];return!!e&&-1<["submit","reset","button"].indexOf(e)}),U=(0,_vue.computed)(()=>{var{type:e,mode:t}=N;return"text"===t||"text"===e||a&&"text"===a.props.mode?"text":"button"}),A=(0,_vue.computed)(()=>{var e=N["status"];return e||(a?a.props.status:"")}),B=(0,_vue.computed)(()=>{var e=N["align"];return e||!!a&&a.props.align}),R=(0,_vue.computed)(()=>{var e=N["round"];return e||!!a&&a.props.round}),W=(0,_vue.computed)(()=>{var e=N["circle"];return e||!!a&&a.props.circle}),b=(0,_vue.computed)(()=>Object.assign({},N.prefixTooltip)),g=(0,_vue.computed)(()=>Object.assign({},N.suffixTooltip)),m=()=>{w.panelIndex<(0,_utils.getLastZIndex)()&&(w.panelIndex=(0,_utils.nextZIndex)())},v=()=>(0,_vue.nextTick)().then(()=>{var n=N["placement"],o=w["panelIndex"],u=I.value,l=j.value,e=M.value;if(l&&u){var a=u.offsetHeight,s=u.offsetWidth,r=l.offsetHeight,l=l.offsetWidth,o={zIndex:o},{top:u,left:v,boundingTop:d,visibleHeight:c,visibleWidth:p}=(0,_dom.getAbsolutePos)(u);let i="bottom";if(e){let e=v+s-l,t=u+a;"top"===n?(i="top",t=u-r):n||(c<d+a+r+5&&(i="top",t=u-r),t<5&&(i="bottom",t=u+a)),e+l+5>p&&(e-=e+l+5-p),e<5&&(e=5),Object.assign(o,{left:e+"px",right:"auto",top:t+"px",minWidth:s+"px"})}else"top"===n?(i="top",o.bottom=a+"px"):n||c<d+a+r&&5<d-a-r&&(i="top",o.bottom=a+"px");return w.panelStyle=o,w.panelPlacement=i,(0,_vue.nextTick)()}}),D=e=>{a&&a.handleClick({name:N.name},e),_("click",{$event:e},e)},H=e=>{0===e.button&&e.stopPropagation()},G=e=>{var t=e.currentTarget;const i=j.value;var{flag:t,targetElem:n}=(0,_dom.getEventTargetNode)(e,t,"vxe-button");t&&(i&&(i.dataset.active="N"),w.visiblePanel=!1,setTimeout(()=>{i&&"Y"===i.dataset.active||(w.isAniVisible=!1)},350),_("dropdown-click",{name:n.getAttribute("name"),$event:e},e))},V=()=>{const e=j.value;e&&(e.dataset.active="Y",w.isAniVisible=!0,setTimeout(()=>{"Y"===e.dataset.active&&(w.visiblePanel=!0,m(),v(),setTimeout(()=>{w.visiblePanel&&v()},50))},20))},Z=e=>{var t=N["loading"];$.value||t||(d(),q(e))},J=e=>{c(),F(e)},q=e=>{_("mouseenter",{},e)},F=e=>{_("mouseleave",{},e)},L=e=>{var{loading:t,trigger:i}=N;$.value||t||("click"===i&&(w.visiblePanel?c:d)(),D(e))},d=()=>{var e=N["trigger"];const t=j.value;return t&&(t.dataset.active="Y",w.initialized||(w.initialized=!0),s.showTime=setTimeout(()=>{"Y"===t.dataset.active?V():w.isAniVisible=!1},"click"===e?50:250)),(0,_vue.nextTick)()},c=()=>{const e=j.value;return clearTimeout(s.showTime),e?(e.dataset.active="N",setTimeout(()=>{"Y"!==e.dataset.active&&(w.visiblePanel=!1,setTimeout(()=>{"Y"!==e.dataset.active&&(w.isAniVisible=!1)},350))},100)):(w.isAniVisible=!1,w.visiblePanel=!1),(0,_vue.nextTick)()},K=()=>{c()},p=(e,t)=>(0,_vue.h)(_tooltip.default,{useHTML:e.useHTML,content:e.content,enterable:e.enterable,theme:e.theme},{default(){return(0,_vue.h)("i",{class:[`vxe-button--tooltip-${t}-icon`,e.icon||(0,_ui.getIcon)().BUTTON_TOOLTIP_ICON]})}}),Y=()=>{var{content:e,icon:t,loading:i,prefixTooltip:n,suffixTooltip:o}=N,u=b.value,l=g.value,a=k.icon,s=k.default,r=[];return n&&r.push(p(u,"prefix")),i?r.push((0,_vue.h)("i",{class:["vxe-button--loading-icon",(0,_ui.getIcon)().BUTTON_LOADING]})):a?r.push((0,_vue.h)("span",{class:"vxe-button--custom-icon"},a({}))):t&&r.push((0,_vue.h)("i",{class:["vxe-button--icon",t]})),s?r.push((0,_vue.h)("span",{class:"vxe-button--content"},s({}))):e&&r.push((0,_vue.h)("span",{class:"vxe-button--content"},(0,_utils.getFuncText)(e))),o&&r.push(p(l,"suffix")),r},_=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$button:z},t))},f=(t={dispatchEvent:_,openPanel:d,closePanel:c,focus(){var e=I.value;return e&&e.focus(),(0,_vue.nextTick)()},blur(){var e=I.value;return e&&e.blur(),(0,_vue.nextTick)()}},e=>{var t=j.value;w.visiblePanel&&!(0,_dom.getEventTargetNode)(e,t).flag&&c()}),x=e=>{var t,i=$.value,n=w["visiblePanel"];i||(i=S.value,t=j.value,w.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,t).flag,n&&!w.isActivated&&c())};Object.assign(z,t);return z.renderVN=()=>{var e,{className:t,popupClassName:i,trigger:n,title:o,routerLink:u,type:l,destroyOnClose:a,name:s,loading:r}=N,{initialized:v,isAniVisible:d,visiblePanel:c}=w,p=E.value,_=U.value,b=A.value,g=R.value,m=B.value,f=W.value,x=M.value,h=$.value,T=C.value,O=P.value,y=k.dropdowns;return T.visible?y?(T={},e={},"hover"===n&&(T.onMouseenter=Z,T.onMouseleave=J,e.onMouseenter=V,e.onMouseleave=K),(0,_vue.h)("div",{ref:S,class:["vxe-button--dropdown",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,"is--active":c}]},[u?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({ref:I,class:["vxe-button","vxe-button--link","type--"+_,m?"align--"+m:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+b]:b,"is--round":g,"is--circle":f,"is--disabled":h||r,"is--loading":r}],title:o,name:s,type:p?l:"button",disabled:h||r,to:u,onClick:L},T),{default(){return Y().concat([(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})])}}):(0,_vue.h)("button",Object.assign({ref:I,class:["vxe-button","type--"+_,m?"align--"+m:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+b]:b,"is--round":g,"is--circle":f,"is--disabled":h||r,"is--loading":r}],title:o,name:s,type:p?l:"button",disabled:h||r,onClick:L},T),Y().concat([(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})])),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!x||!v},[(0,_vue.h)("div",Object.assign({ref:j,class:["vxe-button--dropdown-panel",i?_xeUtils.default.isFunction(i)?i({$button:z}):i:"",{["size--"+O]:O,"ani--leave":d,"ani--enter":c}],placement:w.panelPlacement,style:w.panelStyle},e),v&&(c||d)?[(0,_vue.h)("div",{class:"vxe-button--dropdown-wrapper",onMousedown:H,onClick:G},a&&!c?[]:y({}))]:[])])])):u?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{ref:I,class:["vxe-button","vxe-button--link","type--"+_,m?"align--"+m:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+b]:b,"is--round":g,"is--circle":f,"is--disabled":h||r,"is--loading":r}],title:o,name:s,type:p?l:"button",disabled:h||r,to:u,onClick:D,onMouseenter:q,onMouseleave:F},{default(){return Y()}}):(0,_vue.h)("button",{ref:I,class:["vxe-button","type--"+_,m?"align--"+m:"",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+O]:O,["theme--"+b]:b,"is--round":g,"is--circle":f,"is--disabled":h||r,"is--loading":r}],title:o,name:s,type:p?l:"button",disabled:h||r,onClick:D,onMouseenter:q,onMouseleave:F},Y()):(0,_vue.createCommentVNode)()},(0,_vue.onMounted)(()=>{"development"===process.env.NODE_ENV&&"text"===N.type&&(0,_log.warnLog)("vxe.error.delProp",["type=text","mode=text"]),_ui.globalEvents.on(z,"mousewheel",f),_ui.globalEvents.on(z,"mousedown",x)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(z,"mousewheel"),_ui.globalEvents.off(z,"mousedown")}),z},render(){return this.renderVN()}});