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

A vue based PC component library

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