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"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log"),_tooltip=_interopRequireDefault(require("../../tooltip/src/tooltip"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeButtonComponent=(0,_comp.defineVxeComponent)({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,iconRender:Object,prefixIcon:String,prefixRender:Object,suffixIcon:String,suffixRender:Object,round:Boolean,circle:Boolean,disabled:Boolean,loading:Boolean,trigger:{type:String,default:()=>(0,_ui.getConfig)().button.trigger},align:String,prefixTooltip:Object,suffixTooltip:Object,options:Array,destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().button.destroyOnClose},transfer:{type:Boolean,default:null}},emits:["click","mouseenter","mouseleave","dropdown-click","dropdownClick"],setup(O,e){const{slots:P,emit:i}=e,n=(0,_vue.inject)("$xeModal",null),o=(0,_vue.inject)("$xeDrawer",null),u=(0,_vue.inject)("$xeTable",null),s=(0,_vue.inject)("$xeForm",null),l=(0,_vue.inject)("$xeButtonGroup",null);var t=_xeUtils.default.uniqueId();const N=(0,_ui.useSize)(O)["computeSize"],w=(0,_ui.usePermission)(O)["computePermissionInfo"],S=(0,_vue.reactive)({initialized:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1,panelIndex:0,panelStyle:{},panelPlacement:""}),a={showTime:void 0,tooltipTimeout:void 0},I=(0,_vue.ref)(),B=(0,_vue.ref)(),j=(0,_vue.ref)(),r={refElem:I},z={xID:t,props:O,context:e,reactData:S,internalData:a,getRefMaps:()=>r};const V=(0,_vue.computed)(()=>{var e=O["transfer"];if(null===e){var t=(0,_ui.getConfig)().button.transfer;if(_xeUtils.default.isBoolean(t))return t;if(u||n||o||s)return!0}return e}),$=(0,_vue.computed)(()=>{var e=O["disabled"],t=w.value;return e||t.disabled}),E=(0,_vue.computed)(()=>{var e=O["type"];return!!e&&-1<["submit","reset","button"].indexOf(e)}),M=(0,_vue.computed)(()=>{var{type:e,mode:t}=O;return"text"===t||"text"===e||l&&"text"===l.props.mode?"text":"button"}),U=(0,_vue.computed)(()=>{var e=O["status"];return e||(l?l.props.status:"")}),q=(0,_vue.computed)(()=>{var e=O["align"];return e||!!l&&l.props.align}),W=(0,_vue.computed)(()=>{var e=O["round"];return e||!!l&&l.props.round}),Z=(0,_vue.computed)(()=>{var e=O["circle"];return e||!!l&&l.props.circle}),J=(0,_vue.computed)(()=>{var e=O["options"];return e?e.filter(e=>{e=e.permissionCode;return!e||_ui.permission.checkVisible(e)}):[]}),_=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().button.prefixTooltip,O.prefixTooltip)),b=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().button.suffixTooltip,O.suffixTooltip)),d=()=>{S.panelIndex<(0,_utils.getLastZIndex)()&&(S.panelIndex=(0,_utils.nextZIndex)())},v=()=>{const n=O["placement"],i=S["panelIndex"],o=B.value,u=j.value,s=V.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(o,u,{placement:n,teleportTo:s}),t=Object.assign(e.style,{zIndex:i});S.panelStyle=t,S.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},A=e=>{l&&l.handleClick({name:O.name},e),H("click",{$event:e},e)},K=e=>{0===e.button&&e.stopPropagation()},Q=e=>{var t=e.currentTarget;const n=j.value;var{flag:t,targetElem:i}=(0,_dom.getEventTargetNode)(e,t,"vxe-button");t&&(n&&(n.dataset.active="N"),S.visiblePanel=!1,setTimeout(()=>{n&&"Y"===n.dataset.active||(S.isAniVisible=!1)},350),H("dropdown-click",{name:i.getAttribute("name"),option:null},e))},D=()=>{const e=j.value;e&&(e.dataset.active="Y",S.isAniVisible=!0,setTimeout(()=>{"Y"===e.dataset.active&&(S.visiblePanel=!0,d(),v(),setTimeout(()=>{S.visiblePanel&&v()},50))},20))},X=e=>{var t=O["loading"];$.value||t||(c(),R(e))},ee=e=>{Y(),F(e)},R=e=>{H("mouseenter",{},e)},F=e=>{H("mouseleave",{},e)},L=e=>{var{loading:t,trigger:n}=O;$.value||t||("click"===n&&(S.visiblePanel?Y:c)(),A(e))},c=()=>{var e=O["trigger"];const t=j.value;return t&&(t.dataset.active="Y",S.initialized||(S.initialized=!0),a.showTime=setTimeout(()=>{"Y"===t.dataset.active?D():S.isAniVisible=!1},"click"===e?50:250)),(0,_vue.nextTick)()},Y=()=>{const e=j.value;return clearTimeout(a.showTime),e?(e.dataset.active="N",setTimeout(()=>{"Y"!==e.dataset.active&&(S.visiblePanel=!1,setTimeout(()=>{"Y"!==e.dataset.active&&(S.isAniVisible=!1)},350))},100)):(S.isAniVisible=!1,S.visiblePanel=!1),(0,_vue.nextTick)()},te=()=>{Y()},m=(e,t)=>(0,_vue.h)(_tooltip.default,{useHTML:e.useHTML,content:e.content,enterable:e.enterable,theme:e.theme},{default(){return(0,_vue.h)("span",{class:`vxe-button--item vxe-button--tooltip-${t}-icon`},[(0,_vue.h)("i",{class:e.icon||(0,_ui.getIcon)().BUTTON_TOOLTIP_ICON})])}}),G=()=>{var{content:e,suffixIcon:t,loading:n,prefixTooltip:i,suffixTooltip:o,suffixRender:u}=O,s=O.prefixIcon||O.icon,l=O.prefixRender||O.iconRender,a=_.value,r=b.value,v=P.prefix||P.icon,c=P.suffix,d=P.default,p=[];return i&&p.push(m(a,"prefix")),n?p.push((0,_vue.h)("i",{class:["vxe-button--item vxe-button--loading-icon",(0,_ui.getIcon)().BUTTON_LOADING]})):v?p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--custom-prefix-icon"},v({}))):l?(a=(i=_ui.renderer.get(l.name))?i.renderButtonPrefix:null,p.push((0,_vue.h)("span",{class:["vxe-button--item vxe-button--custom-prefix-icon"]},a?(0,_vn.getSlotVNs)(a(l,{$button:z})):[]))):s&&p.push((0,_vue.h)("i",{class:["vxe-button--item vxe-button--prefix-icon",s]})),d?p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--content"},d({}))):e&&p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--content"},(0,_utils.getFuncText)(e))),c?p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--custom-suffix-icon"},c({}))):u?(v=(n=_ui.renderer.get(u.name))?n.renderButtonSuffix:null,p.push((0,_vue.h)("span",{class:["vxe-button--item vxe-button--custom-suffix-icon"]},v?(0,_vn.getSlotVNs)(v(u,{$button:z})):[]))):t&&p.push((0,_vue.h)("i",{class:["vxe-button--item vxe-button--suffix-icon",t]})),o&&p.push(m(r,"suffix")),p},H=(e,t,n)=>{i(e,(0,_ui.createEvent)(n,{$button:z},t))},p=(t={dispatchEvent:H,openPanel:c,closePanel:Y,focus(){var e=B.value;return e&&e.focus(),(0,_vue.nextTick)()},blur(){var e=B.value;return e&&e.blur(),(0,_vue.nextTick)()}},e=>{var t=j.value;S.visiblePanel&&!(0,_dom.getEventTargetNode)(e,t).flag&&Y()}),x=e=>{var t,n=$.value,i=S["visiblePanel"];n||(n=I.value,t=j.value,S.isActivated=(0,_dom.getEventTargetNode)(e,n).flag||(0,_dom.getEventTargetNode)(e,t).flag,i&&!S.isActivated&&Y())},f=()=>{var e=S["visiblePanel"];e&&v()};Object.assign(z,t);return z.renderVN=()=>{var{className:e,popupClassName:t,trigger:n,title:i,routerLink:o,type:u,destroyOnClose:s,name:l,loading:a}=O,{initialized:r,isAniVisible:v,visiblePanel:c}=S,d=E.value;const p=M.value;var m=U.value;const _=W.value;var b=q.value;const x=Z.value;var f,g=V.value,h=$.value,T=w.value,y=J.value,C=N.value,k=P.dropdowns;return T.visible?k||y.length?(T={},f={},"hover"===n&&(T.onMouseenter=X,T.onMouseleave=ee,f.onMouseenter=D,f.onMouseleave=te),(0,_vue.h)("div",{ref:I,class:["vxe-button--dropdown",e?_xeUtils.default.isFunction(e)?e({$button:z}):e:"",{["size--"+C]:C,"is--active":c}]},[o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({ref:B,class:["vxe-button","vxe-button--link","type--"+p,b?"align--"+b:"",e?_xeUtils.default.isFunction(e)?e({$button:z}):e:"",{["size--"+C]:C,["theme--"+m]:m,"is--round":_,"is--circle":x,"is--disabled":h||a,"is--loading":a}],title:i,name:l,type:d?u:"button",disabled:h||a,to:o,onClick:L},T),{default(){return G().concat([(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})])}}):(0,_vue.h)("button",Object.assign({ref:B,class:["vxe-button","type--"+p,b?"align--"+b:"",e?_xeUtils.default.isFunction(e)?e({$button:z}):e:"",{["size--"+C]:C,["theme--"+m]:m,"is--round":_,"is--circle":x,"is--disabled":h||a,"is--loading":a}],title:i,name:l,type:d?u:"button",disabled:h||a,onClick:L},T),G().concat([(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})])),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!g||!r},[(0,_vue.h)("div",Object.assign({ref:j,class:["vxe-button--dropdown-panel",t?_xeUtils.default.isFunction(t)?t({$button:z}):t:"",{["size--"+C]:C,"is--transfer":g,"ani--leave":v,"ani--enter":c}],placement:S.panelPlacement,style:S.panelStyle},f),r&&(c||v)?[k?(0,_vue.h)("div",{class:"vxe-button--dropdown-wrapper",onMousedown:K,onClick:Q},r&&(!s||c||v)?k({}):[]):(0,_vue.h)("div",{class:"vxe-button--dropdown-wrapper"},r&&(!s||c||v)?y.map((i,e)=>(0,_vue.h)(VxeButtonComponent,{key:e,type:i.type,mode:i.mode||p,className:i.className,name:i.name,routerLink:i.routerLink,permissionCode:i.permissionCode,title:i.title,content:i.content,status:i.status,icon:i.icon,round:_xeUtils.default.isBoolean(i.round)?i.round:"text"!==p&&_,circle:_xeUtils.default.isBoolean(i.circle)?i.circle:"text"!==p&&x,disabled:i.disabled,loading:i.loading,align:i.align,onClick(e){var t=e,n=i;t=e.$event,Y(),H("dropdown-click",{name:n.name,option:n},t)}})):[])]:[])])])):o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{ref:B,class:["vxe-button","vxe-button--link","type--"+p,b?"align--"+b:"",e?_xeUtils.default.isFunction(e)?e({$button:z}):e:"",{["size--"+C]:C,["theme--"+m]:m,"is--round":_,"is--circle":x,"is--disabled":h||a,"is--loading":a}],title:i,name:l,type:d?u:"button",disabled:h||a,to:o,onClick:A,onMouseenter:R,onMouseleave:F},{default(){return G()}}):(0,_vue.h)("button",{ref:B,class:["vxe-button","type--"+p,b?"align--"+b:"",e?_xeUtils.default.isFunction(e)?e({$button:z}):e:"",{["size--"+C]:C,["theme--"+m]:m,"is--round":_,"is--circle":x,"is--disabled":h||a,"is--loading":a}],title:i,name:l,type:d?u:"button",disabled:h||a,onClick:A,onMouseenter:R,onMouseleave:F},G()):(0,_ui.renderEmptyElement)(z)},(0,_vue.onMounted)(()=>{"text"===O.type&&(0,_log.warnLog)("vxe.error.delProp",["type=text","mode=text"]),_ui.globalEvents.on(z,"mousewheel",p),_ui.globalEvents.on(z,"mousedown",x),_ui.globalEvents.on(z,"resize",f)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(z,"mousewheel"),_ui.globalEvents.off(z,"mousedown"),_ui.globalEvents.off(z,"resize")}),z},render(){return this.renderVN()}});var _default=exports.default=VxeButtonComponent;