vxe-pc-ui 3.16.0 → 3.16.2

package/lib/button/src/button.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_comp=require("../../ui/src/comp"),_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}}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _defineProperty(e,t,n){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0===n)return("string"===t?String:Number)(e);n=n.call(e,t||"default");if("object"!=_typeof(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}var _createComponentLog=(0,_log.createComponentLog)("button"),warnLog=_createComponentLog.warnLog,_default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeButton",mixins:[_ui.globalMixins.sizeMixin,_ui.globalMixins.permissionMixin],props:{type:String,mode:String,className:[String,Function],popupClassName:[String,Function],size:{type:String,default:function(){return(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:function(){return(0,_ui.getConfig)().button.trigger}},align:String,prefixTooltip:Object,suffixTooltip:Object,options:Array,showDropdownIcon:{type:Boolean,default:function(){return(0,_ui.getConfig)().button.showDropdownIcon}},destroyOnClose:{type:Boolean,default:function(){return(0,_ui.getConfig)().button.destroyOnClose}},popupConfig:Object,transfer:{type:Boolean,default:null}},inject:{$xeModal:{default:null},$xeDrawer:{default:null},$xeTable:{default:null},$xeTree:{default:null},$xeForm:{default:null},$xeButtonGroup:{default:null}},data:function(){var e={showTime:void 0};return{xID:_xeUtils.default.uniqueId(),reactData:{initialized:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1,panelIndex:0,panelStyle:{},panelPlacement:""},internalData:e}},computed:Object.assign(Object.assign({},{}),{computeBtnTransfer:function(){var e=this,t=e.$xeTable,n=e.$xeTree,o=e.$xeModal,i=e.$xeDrawer,r=e.$xeForm,s=e.transfer,e=e.computePopupOpts;if(_xeUtils.default.isBoolean(e.transfer))return e.transfer;if(null===s){e=(0,_ui.getConfig)().button.transfer;if(_xeUtils.default.isBoolean(e))return e;if(t||n||o||i||r)return!0}return s},computeBtnDisabled:function(){var e=this.disabled,t=this.computePermissionInfo;return e||t.disabled},computeIsFormBtn:function(){var e=this.type;return!!e&&-1<["submit","reset","button"].indexOf(e)},computeBtnMode:function(){var e=this.type,t=this.mode,n=this.$xeButtonGroup;return"text"===t||"text"===e||n&&"text"===n.mode?"text":"button"},computeBtnStatus:function(){var e=this.status,t=this.$xeButtonGroup;return e||(t?t.status:"")},computeBtnRound:function(){var e=this.round,t=this.$xeButtonGroup;return e||!!t&&t.round},computeBtnAlign:function(){var e=this.align,t=this.$xeButtonGroup;return e||!!t&&t.align},computeBtnCircle:function(){var e=this.circle,t=this.$xeButtonGroup;return e||!!t&&t.circle},computeDownBtnList:function(){var e=this.options;return e?e.filter(function(e){e=e.permissionCode;return!e||_ui.permission.checkVisible(e)}):[]},computePopupOpts:function(){return Object.assign({},(0,_ui.getConfig)().button.popupConfig,this.popupConfig)},computePrefixTipOpts:function(){return Object.assign({},(0,_ui.getConfig)().button.prefixTooltip,this.prefixTooltip)},computeSuffixTipOpts:function(){return Object.assign({},(0,_ui.getConfig)().button.suffixTooltip,this.suffixTooltip)}}),methods:{dispatchEvent:function(e,t,n){this.$emit((0,_vn.getEventCaseName)(this,e),(0,_ui.createEvent)(n,{$button:this},t))},openPanel:function(){var e=this,t=e.reactData,n=e.internalData,o=e.trigger,i=e.computeBtnTransfer,r=e.$refs.refBtnPanel;return r&&(r.dataset.active="Y",t.initialized||(t.initialized=!0,i&&document.body.appendChild(r)),n.showTime=setTimeout(function(){"Y"===r.dataset.active?e.mouseenterDropdownEvent():t.isAniVisible=!1},"click"===o?50:250)),e.$nextTick()},closePanel:function(){return this.hidePanel()},hidePanel:function(){var e=this.reactData,t=this.internalData,n=this.$refs.refBtnPanel;return clearTimeout(t.showTime),n?(n.dataset.active="N",setTimeout(function(){"Y"!==n.dataset.active&&(e.visiblePanel=!1,setTimeout(function(){"Y"!==n.dataset.active&&(e.isAniVisible=!1)},350))},100)):(e.isAniVisible=!1,e.visiblePanel=!1),this.$nextTick()},focus:function(){var e=this.$refs.refButton;return e&&e.focus(),this.$nextTick()},blur:function(){var e=this.$refs.refButton;return e&&e.blur(),this.$nextTick()},updateZindex:function(){var e=this.reactData,t=this.computePopupOpts.zIndex||this.zIndex;t?e.panelIndex=_xeUtils.default.toNumber(t):e.panelIndex<(0,_utils.getLastZIndex)()&&(e.panelIndex=(0,_utils.nextZIndex)())},updatePlacement:function(){function e(){var e=(0,_dom.updatePanelPlacement)(r,s,{placement:a.placement||o,defaultPlacement:a.defaultPlacement,teleportTo:u}),t=Object.assign(e.style,{zIndex:i});n.panelStyle=t,n.panelPlacement=e.placement}var t=this,n=t.reactData,o=t.placement,i=n.panelIndex,r=t.$refs.refButton,s=t.$refs.refBtnPanel,u=t.computeBtnTransfer,a=t.computePopupOpts;return e(),t.$nextTick().then(e)},clickEvent:function(e){var t=this.$xeButtonGroup;t&&t.handleClick({name:this.name},e),this.dispatchEvent("click",{$event:e},e)},downBtnClickEvent:function(e,t){e=e.$event;this.hidePanel(),this.dispatchEvent("dropdown-click",{name:t.name,option:t},e)},mousedownDropdownEvent:function(e){0===e.button&&e.stopPropagation()},clickDropdownEvent:function(e){var t=this.reactData,n=e.currentTarget,o=this.$refs.refBtnPanel,n=(0,_dom.getEventTargetNode)(e,n,"vxe-button"),i=n.flag,n=n.targetElem;i&&(o&&(o.dataset.active="N"),t.visiblePanel=!1,setTimeout(function(){o&&"Y"===o.dataset.active||(t.isAniVisible=!1)},350),this.dispatchEvent("dropdown-click",{name:n.getAttribute("name"),option:null,$event:e},e))},mouseenterDropdownEvent:function(){var e=this,t=e.reactData,n=e.$refs.refBtnPanel;n&&(n.dataset.active="Y",t.isAniVisible=!0,setTimeout(function(){"Y"===n.dataset.active&&(t.visiblePanel=!0,e.updateZindex(),e.updatePlacement(),setTimeout(function(){t.visiblePanel&&e.updatePlacement()},50))},20))},mouseenterTargetEvent:function(e){var t=this.loading;this.computeBtnDisabled||t||(this.openPanel(),this.mouseenterEvent(e))},mouseleaveTargetEvent:function(e){this.hidePanel(),this.mouseleaveEvent(e)},mouseenterEvent:function(e){this.dispatchEvent("mouseenter",{},e)},mouseleaveEvent:function(e){this.dispatchEvent("mouseleave",{},e)},contextmenuEvent:function(e){this.dispatchEvent("contextmenu",{},e)},clickTargetEvent:function(e){var t=this,n=t.reactData,o=t.loading;t.computeBtnDisabled||o||("click"===t.trigger&&(n.visiblePanel?t.hidePanel():t.openPanel()),t.clickEvent(e))},mouseleaveDropdownEvent:function(){this.hidePanel()},handleGlobalMousewheelEvent:function(e){var t=this.reactData,n=this.$refs.refBtnPanel;t.visiblePanel&&!(0,_dom.getEventTargetNode)(e,n).flag&&this.hidePanel()},handleGlobalMousedownEvent:function(e){var t,n,o=this,i=o.reactData,r=i.visiblePanel;o.computeBtnDisabled||(t=o.$refs.refElem,n=o.$refs.refBtnPanel,i.isActivated=(0,_dom.getEventTargetNode)(e,t).flag||(0,_dom.getEventTargetNode)(e,n).flag,r&&!i.isActivated&&o.hidePanel())},handleGlobalResizeEvent:function(){this.reactData.visiblePanel&&this.updatePlacement()},renderTooltipIcon:function(e,t,n){return e(_tooltip.default,{props:{useHtml:_xeUtils.default.isBoolean(t.useHtml)?t.useHtml:t.useHTML,content:t.content,enterable:t.enterable,theme:t.theme},scopedSlots:{default:function(){return e("span",{class:"vxe-button--item vxe-button--tooltip-".concat(n,"-icon")},[e("i",{class:t.icon||(0,_ui.getIcon)().BUTTON_TOOLTIP_ICON})])}}})},renderContent:function(e){var t=this,n=t.$scopedSlots,o=t.content,i=t.suffixIcon,r=t.loading,s=t.suffixTooltip,u=t.suffixRender,a=t.prefixIcon||t.icon,l=t.prefixRender||t.iconRender,c=t.computeSuffixTipOpts,d=n.prefix||n.icon,p=n.suffix,n=n.default,f=[];return t.prefixTooltip&&f.push(t.renderTooltipIcon(e,t.computePrefixTipOpts,"prefix")),r?f.push(e("i",{class:["vxe-button--item vxe-button--loading-icon",(0,_ui.getIcon)().BUTTON_LOADING]})):d?f.push(e("span",{class:"vxe-button--item vxe-button--custom-prefix-icon"},d.call(t,{}))):l?(d=(r=_ui.renderer.get(l.name))?r.renderButtonPrefix:null,f.push(e("span",{class:["vxe-button--item vxe-button--custom-prefix-icon"]},d?(0,_vn.getSlotVNs)(d.call(t,e,l,{$button:t})):[]))):a&&f.push(e("i",{class:["vxe-button--item vxe-button--prefix-icon",a]})),n?f.push(e("span",{class:"vxe-button--item vxe-button--content"},n.call(t,{}))):o&&f.push(e("span",{class:"vxe-button--item vxe-button--content"},(0,_utils.getFuncText)(o))),p?f.push(e("span",{class:"vxe-button--item vxe-button--custom-suffix-icon"},p.call(t,{}))):u?(d=(r=_ui.renderer.get(u.name))?r.renderButtonSuffix:null,f.push(e("span",{class:["vxe-button--item vxe-button--custom-suffix-icon"]},d?(0,_vn.getSlotVNs)(d.call(t,e,u,{$button:t})):[]))):i&&f.push(e("i",{class:["vxe-button--item vxe-button--suffix-icon",i]})),s&&f.push(t.renderTooltipIcon(e,c,"suffix")),f},renderVN:function(n){var e,t,o=this,i=o.$scopedSlots,r=o.reactData,s=o.className,u=o.trigger,a=o.title,l=o.routerLink,c=o.type,d=o.destroyOnClose,p=o.name,f=o.loading,m=o.shadow,v=o.showDropdownIcon,b=r.initialized,x=r.isAniVisible,g=r.visiblePanel,h=o.computeIsFormBtn,_=o.computeBtnMode,P=o.computeBtnStatus,y=o.computeBtnRound,B=o.computeBtnCircle,E=o.computeBtnTransfer,T=o.computeBtnAlign,w=o.computeBtnDisabled,$=o.computeDownBtnList,D=o.computeSize,i=i.dropdowns,O=o.computePopupOpts.className||o.popupClassName;return o.computePermissionInfo.visible?i||$.length?(e={contextmenu:o.contextmenuEvent},t={},"hover"===u&&(e.mouseenter=o.mouseenterTargetEvent,e.mouseleave=o.mouseleaveTargetEvent,t.mouseenter=o.mouseenterDropdownEvent,t.mouseleave=o.mouseleaveDropdownEvent),n("div",{ref:"refElem",class:["vxe-button--dropdown",s?_xeUtils.default.isFunction(s)?s({$button:o}):s:"",_defineProperty(_defineProperty({},"size--".concat(D),D),"is--active",g)]},[l?n("router-link",{ref:"refButton",class:["vxe-button","vxe-button--link","type--".concat(_),T?"align--".concat(T):"",s?_xeUtils.default.isFunction(s)?s({$button:o}):s:"",_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(D),D),"theme--".concat(P),P),"is--round",y),"is--circle",B),"is--shadow",m),"is--disabled",w||f),"is--loading",f)],attrs:{title:a,name:p,type:h?c:"button",disabled:w||f,custom:!0,to:l},on:Object.assign({click:o.clickTargetEvent},e)},o.renderContent(n).concat(v?[n("i",{class:"vxe-button--dropdown-arrow ".concat((0,_ui.getIcon)().BUTTON_DROPDOWN)})]:[])):n("button",{ref:"refButton",class:["vxe-button","type--".concat(_),T?"align--".concat(T):"",s?_xeUtils.default.isFunction(s)?s({$button:o}):s:"",_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(D),D),"theme--".concat(P),P),"is--round",y),"is--circle",B),"is--shadow",m),"is--disabled",w||f),"is--loading",f)],attrs:{title:a,name:p,type:h?c:"button",disabled:w||f},on:Object.assign({click:o.clickTargetEvent},e)},o.renderContent(n).concat(v?[n("i",{class:"vxe-button--dropdown-arrow ".concat((0,_ui.getIcon)().BUTTON_DROPDOWN)})]:[])),n("div",{ref:"refBtnPanel",class:["vxe-button--dropdown-panel",O?_xeUtils.default.isFunction(O)?O({$button:o}):O:"",_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(D),D),"is--transfer",E),"ani--leave",x),"ani--enter",g)],attrs:{placement:r.panelPlacement},style:r.panelStyle,on:t},b&&(g||x)?[i?n("div",{class:"vxe-button--dropdown-wrapper",on:{mousedown:o.mousedownDropdownEvent,click:o.clickDropdownEvent}},b&&(!d||g||x)?i.call(o,{}):[]):n("div",{class:"vxe-button--dropdown-wrapper"},b&&(!d||g||x)?$.map(function(t,e){return n("vxe-button",{key:e,props:{type:t.type,mode:t.mode||_,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"!==_&&y,circle:_xeUtils.default.isBoolean(t.circle)?t.circle:"text"!==_&&B,disabled:t.disabled,loading:t.loading,align:t.align},on:{click:function(e){o.downBtnClickEvent(e,t)}}})}):[])]:[])])):l?n("router-link",{ref:"refButton",class:["vxe-button","vxe-button--link","type--".concat(_),T?"align--".concat(T):"",s?_xeUtils.default.isFunction(s)?s({$button:o}):s:"",_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(D),D),"theme--".concat(P),P),"is--round",y),"is--circle",B),"is--shadow",m),"is--disabled",w||f),"is--loading",f)],props:{title:a,name:p,type:h?c:"button",disabled:w||f,custom:!0,to:l},on:{click:o.clickEvent,mouseenter:o.mouseenterEvent,mouseleave:o.mouseleaveEvent,contextmenu:o.contextmenuEvent}},o.renderContent(n)):n("button",{ref:"refButton",class:["vxe-button","type--".concat(_),T?"align--".concat(T):"",s?_xeUtils.default.isFunction(s)?s({$button:o}):s:"",_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(D),D),"theme--".concat(P),P),"is--round",y),"is--circle",B),"is--shadow",m),"is--disabled",w||f),"is--loading",f)],attrs:{title:a,name:p,type:h?c:"button",disabled:w||f},on:{click:o.clickEvent,mouseenter:o.mouseenterEvent,mouseleave:o.mouseleaveEvent,contextmenu:o.contextmenuEvent}},o.renderContent(n)):(0,_ui.renderEmptyElement)(o)}},mounted:function(){var e=this;"text"===e.type&&warnLog("vxe.error.delProp",["type=text","mode=text"]),_ui.globalEvents.on(e,"mousewheel",e.handleGlobalMousewheelEvent),_ui.globalEvents.on(e,"mousedown",e.handleGlobalMousedownEvent),_ui.globalEvents.on(e,"resize",e.handleGlobalResizeEvent)},beforeDestroy:function(){var e=this.$refs.refBtnPanel;e&&e.parentNode&&e.parentNode.removeChild(e)},destroyed:function(){_ui.globalEvents.off(this,"mousewheel"),_ui.globalEvents.off(this,"mousedown"),_ui.globalEvents.off(this,"resize")},render:function(e){return this.renderVN(e)}});

package/lib/button/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/lib/button/style/style.css

@@ -0,0 +1,638 @@
+.vxe-button,
+.vxe-button--dropdown {
+  --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-default);
+  --vxe-ui-button-current-height: var(--vxe-ui-button-height-default);
+  --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-default);
+}
+.vxe-button.size--medium,
+.vxe-button--dropdown.size--medium {
+  --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-medium);
+  --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-medium);
+  --vxe-ui-button-current-height: var(--vxe-ui-button-height-medium);
+  --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-medium);
+}
+.vxe-button.size--small,
+.vxe-button--dropdown.size--small {
+  --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-small);
+  --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-small);
+  --vxe-ui-button-current-height: var(--vxe-ui-button-height-small);
+  --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-small);
+}
+.vxe-button.size--mini,
+.vxe-button--dropdown.size--mini {
+  --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-mini);
+  --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-mini);
+  --vxe-ui-button-current-height: var(--vxe-ui-button-height-mini);
+  --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-mini);
+}
+
+.vxe-button {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  position: relative;
+  background-color: var(--vxe-ui-layout-background-color);
+  outline: 0;
+  font-size: var(--vxe-ui-button-current-font-size);
+  max-width: var(--vxe-ui-button-max-width);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  white-space: nowrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  transition: border 0.2s ease-in-out;
+}
+.vxe-button.align--left {
+  justify-content: left;
+}
+.vxe-button.align--center {
+  justify-content: center;
+}
+.vxe-button.align--right {
+  justify-content: right;
+}
+.vxe-button:not(.is--disabled) {
+  color: var(--vxe-ui-font-color);
+  cursor: pointer;
+}
+.vxe-button.is--loading {
+  cursor: progress;
+}
+.vxe-button.is--loading:before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  border-radius: inherit;
+  background-color: hsla(0, 0%, 100%, 0.35);
+  pointer-events: none;
+}
+.vxe-button.is--disabled {
+  color: var(--vxe-ui-font-disabled-color);
+}
+.vxe-button.is--disabled:not(.is--loading) {
+  cursor: no-drop;
+}
+.vxe-button.type--text {
+  text-decoration: none;
+  border: 0;
+  padding: 0.1em 0.5em;
+  background-color: transparent;
+  text-decoration: none;
+}
+.vxe-button.type--text:not(.is--disabled):focus {
+  color: var(--vxe-ui-font-darken-color);
+}
+.vxe-button.type--text:not(.is--disabled):hover {
+  color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-button.type--text:not(.is--disabled):active {
+  color: var(--vxe-ui-font-primary-darken-color);
+}
+.vxe-button.type--text.theme--primary {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-button.type--text.theme--primary:not(.is--disabled):focus {
+  color: var(--vxe-ui-font-primary-darken-color);
+}
+.vxe-button.type--text.theme--primary:not(.is--disabled):hover {
+  color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-button.type--text.theme--primary:not(.is--disabled):active {
+  color: var(--vxe-ui-font-primary-darken-color);
+}
+.vxe-button.type--text.theme--primary.is--disabled {
+  color: var(--vxe-ui-font-primary-disabled-color);
+}
+.vxe-button.type--text.theme--success {
+  color: var(--vxe-ui-status-success-color);
+}
+.vxe-button.type--text.theme--success:not(.is--disabled):focus {
+  color: var(--vxe-ui-status-success-darken-color);
+}
+.vxe-button.type--text.theme--success:not(.is--disabled):hover {
+  color: var(--vxe-ui-status-success-lighten-color);
+}
+.vxe-button.type--text.theme--success:not(.is--disabled):active {
+  color: var(--vxe-ui-status-success-darken-color);
+}
+.vxe-button.type--text.theme--success.is--disabled {
+  color: var(--vxe-ui-status-success-disabled-color);
+}
+.vxe-button.type--text.theme--info {
+  color: var(--vxe-ui-status-info-color);
+}
+.vxe-button.type--text.theme--info:not(.is--disabled):focus {
+  color: var(--vxe-ui-status-info-darken-color);
+}
+.vxe-button.type--text.theme--info:not(.is--disabled):hover {
+  color: var(--vxe-ui-status-info-lighten-color);
+}
+.vxe-button.type--text.theme--info:not(.is--disabled):active {
+  color: var(--vxe-ui-status-info-darken-color);
+}
+.vxe-button.type--text.theme--info.is--disabled {
+  color: var(--vxe-ui-status-info-disabled-color);
+}
+.vxe-button.type--text.theme--warning {
+  color: var(--vxe-ui-status-warning-color);
+}
+.vxe-button.type--text.theme--warning:not(.is--disabled):focus {
+  color: var(--vxe-ui-status-warning-darken-color);
+}
+.vxe-button.type--text.theme--warning:not(.is--disabled):hover {
+  color: var(--vxe-ui-status-warning-lighten-color);
+}
+.vxe-button.type--text.theme--warning:not(.is--disabled):active {
+  color: var(--vxe-ui-status-warning-darken-color);
+}
+.vxe-button.type--text.theme--warning.is--disabled {
+  color: var(--vxe-ui-status-warning-disabled-color);
+}
+.vxe-button.type--text.theme--danger {
+  color: var(--vxe-ui-status-danger-color);
+}
+.vxe-button.type--text.theme--danger:not(.is--disabled):focus {
+  color: var(--vxe-ui-status-danger-darken-color);
+}
+.vxe-button.type--text.theme--danger:not(.is--disabled):hover {
+  color: var(--vxe-ui-status-danger-lighten-color);
+}
+.vxe-button.type--text.theme--danger:not(.is--disabled):active {
+  color: var(--vxe-ui-status-danger-darken-color);
+}
+.vxe-button.type--text.theme--danger.is--disabled {
+  color: var(--vxe-ui-status-danger-disabled-color);
+}
+.vxe-button.type--text.theme--error {
+  color: var(--vxe-ui-status-error-color);
+}
+.vxe-button.type--text.theme--error:not(.is--disabled):focus {
+  color: var(--vxe-ui-status-error-darken-color);
+}
+.vxe-button.type--text.theme--error:not(.is--disabled):hover {
+  color: var(--vxe-ui-status-error-lighten-color);
+}
+.vxe-button.type--text.theme--error:not(.is--disabled):active {
+  color: var(--vxe-ui-status-error-darken-color);
+}
+.vxe-button.type--text.theme--error.is--disabled {
+  color: var(--vxe-ui-status-error-disabled-color);
+}
+.vxe-button.type--text.theme--perfect {
+  color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button.type--text.theme--perfect:not(.is--disabled):focus {
+  color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button.type--text.theme--perfect:not(.is--disabled):hover {
+  color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button.type--text.theme--perfect:not(.is--disabled):active {
+  color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button.type--text.theme--perfect.is--disabled {
+  color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button.type--button {
+  font-family: inherit;
+  line-height: 1;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  text-decoration: none;
+}
+.vxe-button.type--button.is--round {
+  border-radius: var(--vxe-ui-button-current-border-radius);
+}
+.vxe-button.type--button:not(.is--round) {
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+.vxe-button.type--button.is--circle {
+  padding: 0 0.5em;
+  text-align: center;
+  justify-content: center;
+  min-width: var(--vxe-ui-button-current-height);
+  border-radius: 50%;
+}
+.vxe-button.type--button.is--shadow {
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
+}
+.vxe-button.type--button:not(.is--circle) {
+  padding: 0 1em;
+}
+.vxe-button.type--button:not(.is--disabled):hover {
+  color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-button.type--button:not(.is--disabled):focus {
+  border-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-button.type--button:not(.is--disabled):active {
+  color: var(--vxe-ui-font-primary-darken-color);
+  border-color: var(--vxe-ui-font-primary-darken-color);
+  background-color: var(--vxe-ui-layout-background-color);
+}
+.vxe-button.type--button:not(.is--disabled):hover {
+  color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-button.type--button:not(.is--disabled):focus {
+  border-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-button.type--button:not(.is--disabled):active {
+  color: var(--vxe-ui-font-primary-darken-color);
+  border-color: var(--vxe-ui-font-primary-darken-color);
+  background-color: var(--vxe-ui-layout-background-color);
+}
+.vxe-button.type--button.theme--primary {
+  color: #fff;
+}
+.vxe-button.type--button.theme--primary:not(.is--disabled) {
+  border-color: var(--vxe-ui-font-primary-color);
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-button.type--button.theme--primary:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+  border-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-button.type--button.theme--primary:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-font-primary-darken-color);
+  border-color: var(--vxe-ui-font-primary-darken-color);
+}
+.vxe-button.type--button.theme--primary.is--disabled {
+  border-color: var(--vxe-ui-font-primary-disabled-color);
+  background-color: var(--vxe-ui-font-primary-disabled-color);
+}
+.vxe-button.type--button.theme--primary.is--loading {
+  border-color: var(--vxe-ui-font-primary-color);
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-button.type--button.theme--success {
+  color: #fff;
+}
+.vxe-button.type--button.theme--success:not(.is--disabled) {
+  border-color: var(--vxe-ui-status-success-color);
+  background-color: var(--vxe-ui-status-success-color);
+}
+.vxe-button.type--button.theme--success:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-success-lighten-color);
+  border-color: var(--vxe-ui-status-success-lighten-color);
+}
+.vxe-button.type--button.theme--success:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-success-darken-color);
+  border-color: var(--vxe-ui-status-success-darken-color);
+}
+.vxe-button.type--button.theme--success.is--disabled {
+  border-color: var(--vxe-ui-status-success-disabled-color);
+  background-color: var(--vxe-ui-status-success-disabled-color);
+}
+.vxe-button.type--button.theme--success.is--loading {
+  border-color: var(--vxe-ui-status-success-color);
+  background-color: var(--vxe-ui-status-success-color);
+}
+.vxe-button.type--button.theme--info {
+  color: #fff;
+}
+.vxe-button.type--button.theme--info:not(.is--disabled) {
+  border-color: var(--vxe-ui-status-info-color);
+  background-color: var(--vxe-ui-status-info-color);
+}
+.vxe-button.type--button.theme--info:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-info-lighten-color);
+  border-color: var(--vxe-ui-status-info-lighten-color);
+}
+.vxe-button.type--button.theme--info:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-info-darken-color);
+  border-color: var(--vxe-ui-status-info-darken-color);
+}
+.vxe-button.type--button.theme--info.is--disabled {
+  border-color: var(--vxe-ui-status-info-disabled-color);
+  background-color: var(--vxe-ui-status-info-disabled-color);
+}
+.vxe-button.type--button.theme--info.is--loading {
+  border-color: var(--vxe-ui-status-info-color);
+  background-color: var(--vxe-ui-status-info-color);
+}
+.vxe-button.type--button.theme--warning {
+  color: #fff;
+}
+.vxe-button.type--button.theme--warning:not(.is--disabled) {
+  border-color: var(--vxe-ui-status-warning-color);
+  background-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-button.type--button.theme--warning:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-warning-lighten-color);
+  border-color: var(--vxe-ui-status-warning-lighten-color);
+}
+.vxe-button.type--button.theme--warning:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-warning-darken-color);
+  border-color: var(--vxe-ui-status-warning-darken-color);
+}
+.vxe-button.type--button.theme--warning.is--disabled {
+  border-color: var(--vxe-ui-status-warning-disabled-color);
+  background-color: var(--vxe-ui-status-warning-disabled-color);
+}
+.vxe-button.type--button.theme--warning.is--loading {
+  border-color: var(--vxe-ui-status-warning-color);
+  background-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-button.type--button.theme--danger {
+  color: #fff;
+}
+.vxe-button.type--button.theme--danger:not(.is--disabled) {
+  border-color: var(--vxe-ui-status-danger-color);
+  background-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-button.type--button.theme--danger:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-danger-lighten-color);
+  border-color: var(--vxe-ui-status-danger-lighten-color);
+}
+.vxe-button.type--button.theme--danger:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-danger-darken-color);
+  border-color: var(--vxe-ui-status-danger-darken-color);
+}
+.vxe-button.type--button.theme--danger.is--disabled {
+  border-color: var(--vxe-ui-status-danger-disabled-color);
+  background-color: var(--vxe-ui-status-danger-disabled-color);
+}
+.vxe-button.type--button.theme--danger.is--loading {
+  border-color: var(--vxe-ui-status-danger-color);
+  background-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-button.type--button.theme--error {
+  color: #fff;
+}
+.vxe-button.type--button.theme--error:not(.is--disabled) {
+  border-color: var(--vxe-ui-status-error-color);
+  background-color: var(--vxe-ui-status-error-color);
+}
+.vxe-button.type--button.theme--error:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-error-lighten-color);
+  border-color: var(--vxe-ui-status-error-lighten-color);
+}
+.vxe-button.type--button.theme--error:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-error-darken-color);
+  border-color: var(--vxe-ui-status-error-darken-color);
+}
+.vxe-button.type--button.theme--error.is--disabled {
+  border-color: var(--vxe-ui-status-error-disabled-color);
+  background-color: var(--vxe-ui-status-error-disabled-color);
+}
+.vxe-button.type--button.theme--error.is--loading {
+  border-color: var(--vxe-ui-status-error-color);
+  background-color: var(--vxe-ui-status-error-color);
+}
+.vxe-button.type--button.theme--perfect {
+  color: var(--vxe-ui-font-color);
+}
+.vxe-button.type--button.theme--perfect:not(.is--disabled) {
+  border-color: var(--vxe-ui-table-header-background-color);
+  background-color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button.type--button.theme--perfect:not(.is--disabled):hover {
+  color: var(--vxe-ui-font-color);
+  background-color: var(--vxe-ui-table-header-background-color);
+  border-color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button.type--button.theme--perfect:not(.is--disabled):active {
+  color: var(--vxe-ui-font-color);
+  background-color: var(--vxe-ui-table-header-background-color);
+  border-color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button.type--button.theme--perfect.is--disabled {
+  border-color: var(--vxe-ui-table-header-background-color);
+  background-color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button.type--button.theme--perfect.is--loading {
+  border-color: var(--vxe-ui-table-header-background-color);
+  background-color: var(--vxe-ui-table-header-background-color);
+}
+
+.vxe-button.type--button {
+  height: var(--vxe-ui-button-current-height);
+}
+
+.vxe-button--custom-prefix-icon > svg,
+.vxe-button--custom-suffix-icon > svg {
+  max-width: 1em;
+  max-height: 1em;
+  vertical-align: middle;
+}
+
+.vxe-input--prefix-icon > .vxe-button.type--button,
+.vxe-input--suffix-icon > .vxe-button.type--button {
+  height: 100%;
+}
+
+.vxe-button--item {
+  padding: 0 0.1em;
+}
+.vxe-button--item:first-child {
+  padding-left: 0;
+}
+.vxe-button--item:last-child {
+  padding-right: 0;
+}
+
+.vxe-button--wrapper,
+.vxe-button--dropdown {
+  display: inline-block;
+}
+
+.vxe-button--dropdown {
+  position: relative;
+  outline: 0;
+}
+.vxe-button--dropdown > .vxe-button.type--button.theme--primary {
+  color: #fff;
+}
+.vxe-button--dropdown > .vxe-button.type--button.theme--success {
+  color: #fff;
+}
+.vxe-button--dropdown > .vxe-button.type--button.theme--info {
+  color: #fff;
+}
+.vxe-button--dropdown > .vxe-button.type--button.theme--warning {
+  color: #fff;
+}
+.vxe-button--dropdown > .vxe-button.type--button.theme--danger {
+  color: #fff;
+}
+.vxe-button--dropdown > .vxe-button.type--button.theme--error {
+  color: #fff;
+}
+.vxe-button--dropdown > .vxe-button.type--button.theme--perfect {
+  color: var(--vxe-ui-font-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button:not(.is--disabled) {
+  color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--primary {
+  color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--success {
+  color: var(--vxe-ui-status-success-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--info {
+  color: var(--vxe-ui-status-info-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--warning {
+  color: var(--vxe-ui-status-warning-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--danger {
+  color: var(--vxe-ui-status-danger-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--error {
+  color: var(--vxe-ui-status-error-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--perfect {
+  color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--primary {
+  color: #fff;
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+  border-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--success {
+  color: #fff;
+  background-color: var(--vxe-ui-status-success-lighten-color);
+  border-color: var(--vxe-ui-status-success-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--info {
+  color: #fff;
+  background-color: var(--vxe-ui-status-info-lighten-color);
+  border-color: var(--vxe-ui-status-info-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--warning {
+  color: #fff;
+  background-color: var(--vxe-ui-status-warning-lighten-color);
+  border-color: var(--vxe-ui-status-warning-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--danger {
+  color: #fff;
+  background-color: var(--vxe-ui-status-danger-lighten-color);
+  border-color: var(--vxe-ui-status-danger-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--error {
+  color: #fff;
+  background-color: var(--vxe-ui-status-error-lighten-color);
+  border-color: var(--vxe-ui-status-error-lighten-color);
+}
+.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--perfect {
+  color: var(--vxe-ui-font-color);
+  background-color: var(--vxe-ui-table-header-background-color);
+  border-color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-button--dropdown.is--active .vxe-button--dropdown-arrow {
+  transform: rotate(180deg);
+}
+
+.vxe-button--dropdown-arrow {
+  display: inline-block;
+  font-size: 12px;
+  margin-left: 4px;
+  transition: transform 0.2s ease-in-out;
+}
+
+.vxe-button--dropdown-panel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-ui-font-color);
+  text-align: left;
+}
+.vxe-button--dropdown-panel:not(.is--transfer) {
+  min-width: 100%;
+}
+.vxe-button--dropdown-panel.is--transfer {
+  position: fixed;
+}
+.vxe-button--dropdown-panel.ani--leave {
+  display: block;
+  opacity: 0;
+  transform: scaleY(0.5);
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center top;
+  backface-visibility: hidden;
+}
+.vxe-button--dropdown-panel.ani--leave[placement=top] {
+  transform-origin: center bottom;
+}
+.vxe-button--dropdown-panel.ani--enter {
+  opacity: 1;
+  transform: scaleY(1);
+}
+.vxe-button--dropdown-panel.ani--enter > div::after {
+  display: none;
+}
+.vxe-button--dropdown-panel > div::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.vxe-button--dropdown-wrapper {
+  padding: 5px;
+  background-color: var(--vxe-ui-layout-background-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  border: 1px solid var(--vxe-ui-input-border-color);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+}
+.vxe-button--dropdown-wrapper > .vxe-button.type--text, .vxe-button--dropdown-wrapper > .vxe-button.type--button {
+  display: block;
+  width: 100%;
+  border: 0;
+  margin: 0.4em 0 0 0;
+}
+.vxe-button--dropdown-wrapper > .vxe-button.type--text {
+  padding: 2px 8px;
+}
+.vxe-button--dropdown-wrapper > .vxe-button:first-child {
+  margin-top: 0;
+}
+.vxe-button--dropdown-wrapper > .vxe-button:last-child {
+  margin-bottom: 0;
+}
+
+.vxe-button.type--button,
+.vxe-button--dropdown {
+  margin-right: var(--vxe-ui-button-current-margin-left);
+}
+.vxe-button.type--button:last-of-type,
+.vxe-button--dropdown:last-of-type {
+  margin-right: 0;
+}
+
+.vxe-button + .vxe-button--dropdown,
+.vxe-button--dropdown + .vxe-button {
+  margin-left: var(--vxe-ui-button-current-margin-left);
+}