vxe-pc-ui 3.3.67 → 3.3.69

package/es/button/src/button-group.js

@@ -2,7 +2,7 @@ import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, createEvent, globalMixins, renderEmptyElement } from '@vxe-ui/core';
 import VxeButtonComponent from './button';
-export default defineVxeComponent({
+export default {
     name: 'VxeButtonGroup',
     mixins: [
         globalMixins.sizeMixin,
@@ -15,6 +15,7 @@ export default defineVxeComponent({
         round: Boolean,
         vertical: Boolean,
         circle: Boolean,
+        align: String,
         className: [String, Function],
         disabled: Boolean,
         permissionCode: [String, Number],
@@ -86,4 +87,4 @@ export default defineVxeComponent({
     render(h) {
         return this.renderVN(h);
     }
-});
+};

package/es/button/src/button.js

@@ -5,7 +5,7 @@ import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom';
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils';
 import { warnLog } from '../../ui/src/log';
 import VxeTooltipComponent from '../../tooltip/src/tooltip';
-export default defineVxeComponent({
+export default {
     name: 'VxeButton',
     mixins: [
         globalMixins.sizeMixin,
@@ -200,6 +200,19 @@ export default defineVxeComponent({
             }
             return false;
         },
+        computeBtnAlign() {
+            const $xeButton = this;
+            const props = $xeButton;
+            const { align } = props;
+            const $xeButtonGroup = $xeButton.$xeButtonGroup;
+            if (align) {
+                return align;
+            }
+            if ($xeButtonGroup) {
+                return $xeButtonGroup.align;
+            }
+            return false;
+        },
         computeBtnCircle() {
             const $xeButton = this;
             const props = $xeButton;
@@ -572,13 +585,14 @@ export default defineVxeComponent({
             const props = $xeButton;
             const slots = $xeButton.$scopedSlots;
             const reactData = $xeButton.reactData;
-            const { className, popupClassName, align, trigger, title, routerLink, type, destroyOnClose, name, loading } = props;
+            const { className, popupClassName, trigger, title, routerLink, type, destroyOnClose, name, loading } = props;
             const { initialized, isAniVisible, visiblePanel } = reactData;
             const isFormBtn = $xeButton.computeIsFormBtn;
             const btnMode = $xeButton.computeBtnMode;
             const btnStatus = $xeButton.computeBtnStatus;
             const btnRound = $xeButton.computeBtnRound;
             const btnCircle = $xeButton.computeBtnCircle;
+            const btnAlign = $xeButton.computeBtnAlign;
             const btnDisabled = $xeButton.computeBtnDisabled;
             const permissionInfo = $xeButton.computePermissionInfo;
             const vSize = $xeButton.computeSize;
@@ -606,7 +620,7 @@ export default defineVxeComponent({
                     routerLink
                         ? h('router-link', {
                             ref: 'refButton',
-                            class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+                            class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
                                     [`size--${vSize}`]: vSize,
                                     [`theme--${btnStatus}`]: btnStatus,
                                     'is--round': btnRound,
@@ -630,7 +644,7 @@ export default defineVxeComponent({
                         ]))
                         : h('button', {
                             ref: 'refButton',
-                            class: ['vxe-button', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+                            class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
                                     [`size--${vSize}`]: vSize,
                                     [`theme--${btnStatus}`]: btnStatus,
                                     'is--round': btnRound,
@@ -678,7 +692,7 @@ export default defineVxeComponent({
             if (routerLink) {
                 return h('router-link', {
                     ref: 'refButton',
-                    class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+                    class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
                             [`size--${vSize}`]: vSize,
                             [`theme--${btnStatus}`]: btnStatus,
                             'is--round': btnRound,
@@ -703,7 +717,7 @@ export default defineVxeComponent({
             }
             return h('button', {
                 ref: 'refButton',
-                class: ['vxe-button', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+                class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
                         [`size--${vSize}`]: vSize,
                         [`theme--${btnStatus}`]: btnStatus,
                         'is--round': btnRound,
@@ -751,4 +765,4 @@ export default defineVxeComponent({
     render(h) {
         return this.renderVN(h);
     }
-});
+};

package/es/button/style.css

@@ -444,6 +444,10 @@
   margin-left: 0.72em;
 }
 
+.vxe-button--dropdown + .vxe-button-wrapper, .vxe-button--dropdown + .vxe-button.type--button, .vxe-button--dropdown + .vxe-button--dropdown {
+  margin-left: 0.72em;
+}
+
 .vxe-button--loading-icon,
 .vxe-button--icon {
   min-width: var(--vxe-ui-font-size-default);
@@ -470,9 +474,6 @@
   position: relative;
   outline: 0;
 }
-.vxe-button--dropdown + .vxe-button-wrapper, .vxe-button--dropdown + .vxe-button.type--button, .vxe-button--dropdown + .vxe-button--dropdown {
-  margin-left: 12px;
-}
 .vxe-button--dropdown > .vxe-button.type--button.theme--primary {
   color: #fff;
 }

package/es/button/style.min.css

@@ -1 +1 @@
-.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-font-size-default);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 .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%,.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:.1em .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;height:var(--vxe-ui-button-height-default);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-round-border-radius-default)}.vxe-button.type--button:not(.is--round){border-radius:var(--vxe-ui-base-border-radius)}.vxe-button.type--button.is--circle{padding:0 .5em;text-align:center;justify-content:center;min-width:var(--vxe-ui-button-height-default);border-radius:50%}.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.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.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-button.size--medium.type--button{height:var(--vxe-ui-button-height-medium)}.vxe-button.size--medium.type--button.is--circle{min-width:var(--vxe-ui-button-height-medium)}.vxe-button.size--medium.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-medium)}.vxe-button.size--medium .vxe-button--icon,.vxe-button.size--medium .vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-medium)}.vxe-button.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-button.size--small.type--button{height:var(--vxe-ui-button-height-small)}.vxe-button.size--small.type--button.is--circle{min-width:var(--vxe-ui-button-height-small)}.vxe-button.size--small.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-small)}.vxe-button.size--small .vxe-button--icon,.vxe-button.size--small .vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-small)}.vxe-button.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-button.size--mini.type--button{height:var(--vxe-ui-button-height-mini)}.vxe-button.size--mini.type--button.is--circle{min-width:var(--vxe-ui-button-height-mini)}.vxe-button.size--mini.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-mini)}.vxe-button.size--mini .vxe-button--icon,.vxe-button.size--mini .vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-mini)}.vxe-button+.vxe-button--dropdown,.vxe-button+.vxe-button-wrapper,.vxe-button+.vxe-button.type--button,.vxe-button-wrapper+.vxe-button--dropdown,.vxe-button-wrapper+.vxe-button-wrapper,.vxe-button-wrapper+.vxe-button.type--button,.vxe-input+.vxe-button--dropdown,.vxe-input+.vxe-button-wrapper,.vxe-input+.vxe-button.type--button{margin-left:.72em}.vxe-button--icon,.vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-default)}.vxe-button--icon+.vxe-button--content,.vxe-button--loading-icon+.vxe-button--content{margin-left:.25em}.vxe-button--tooltip-prefix-icon+.vxe-button--content,.vxe-button--tooltip-prefix-icon+.vxe-button--icon,.vxe-button--tooltip-prefix-icon+.vxe-button--loading-icon{padding-left:.25em}.vxe-button--content+.vxe-button--tooltip-suffix-icon{margin-left:.25em}.vxe-button--dropdown,.vxe-button--wrapper{display:inline-block}.vxe-button--dropdown{position:relative;outline:0}.vxe-button--dropdown+.vxe-button--dropdown,.vxe-button--dropdown+.vxe-button-wrapper,.vxe-button--dropdown+.vxe-button.type--button{margin-left:12px}.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 .2s ease-in-out}.vxe-button--dropdown-panel{display:none;position:absolute;right:0;padding:4px 0}.vxe-button--dropdown-panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden;transform-style:preserve-3d}.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-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,.2)}.vxe-button--dropdown-wrapper>.vxe-button.type--button,.vxe-button--dropdown-wrapper>.vxe-button.type--text{display:block;width:100%;border:0;margin:.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{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-font-size-default);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 .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%,.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:.1em .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;height:var(--vxe-ui-button-height-default);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-round-border-radius-default)}.vxe-button.type--button:not(.is--round){border-radius:var(--vxe-ui-base-border-radius)}.vxe-button.type--button.is--circle{padding:0 .5em;text-align:center;justify-content:center;min-width:var(--vxe-ui-button-height-default);border-radius:50%}.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.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.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-button.size--medium.type--button{height:var(--vxe-ui-button-height-medium)}.vxe-button.size--medium.type--button.is--circle{min-width:var(--vxe-ui-button-height-medium)}.vxe-button.size--medium.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-medium)}.vxe-button.size--medium .vxe-button--icon,.vxe-button.size--medium .vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-medium)}.vxe-button.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-button.size--small.type--button{height:var(--vxe-ui-button-height-small)}.vxe-button.size--small.type--button.is--circle{min-width:var(--vxe-ui-button-height-small)}.vxe-button.size--small.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-small)}.vxe-button.size--small .vxe-button--icon,.vxe-button.size--small .vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-small)}.vxe-button.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-button.size--mini.type--button{height:var(--vxe-ui-button-height-mini)}.vxe-button.size--mini.type--button.is--circle{min-width:var(--vxe-ui-button-height-mini)}.vxe-button.size--mini.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-mini)}.vxe-button.size--mini .vxe-button--icon,.vxe-button.size--mini .vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-mini)}.vxe-button+.vxe-button--dropdown,.vxe-button+.vxe-button-wrapper,.vxe-button+.vxe-button.type--button,.vxe-button-wrapper+.vxe-button--dropdown,.vxe-button-wrapper+.vxe-button-wrapper,.vxe-button-wrapper+.vxe-button.type--button,.vxe-input+.vxe-button--dropdown,.vxe-input+.vxe-button-wrapper,.vxe-input+.vxe-button.type--button{margin-left:.72em}.vxe-button--dropdown+.vxe-button--dropdown,.vxe-button--dropdown+.vxe-button-wrapper,.vxe-button--dropdown+.vxe-button.type--button{margin-left:.72em}.vxe-button--icon,.vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-default)}.vxe-button--icon+.vxe-button--content,.vxe-button--loading-icon+.vxe-button--content{margin-left:.25em}.vxe-button--tooltip-prefix-icon+.vxe-button--content,.vxe-button--tooltip-prefix-icon+.vxe-button--icon,.vxe-button--tooltip-prefix-icon+.vxe-button--loading-icon{padding-left:.25em}.vxe-button--content+.vxe-button--tooltip-suffix-icon{margin-left:.25em}.vxe-button--dropdown,.vxe-button--wrapper{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 .2s ease-in-out}.vxe-button--dropdown-panel{display:none;position:absolute;right:0;padding:4px 0}.vxe-button--dropdown-panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden;transform-style:preserve-3d}.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-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,.2)}.vxe-button--dropdown-wrapper>.vxe-button.type--button,.vxe-button--dropdown-wrapper>.vxe-button.type--text{display:block;width:100%;border:0;margin:.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}

package/es/button-group/style.css

@@ -4,6 +4,12 @@
 .vxe-button-group.is--vertical {
   flex-direction: column;
 }
-.vxe-button-group.is--vertical .vxe-button {
-  margin: 0;
+.vxe-button-group.is--vertical .vxe-button + .vxe-button-wrapper, .vxe-button-group.is--vertical .vxe-button + .vxe-button, .vxe-button-group.is--vertical .vxe-button + .vxe-button--dropdown,
+.vxe-button-group.is--vertical .vxe-button-wrapper + .vxe-button-wrapper,
+.vxe-button-group.is--vertical .vxe-button-wrapper + .vxe-button,
+.vxe-button-group.is--vertical .vxe-button-wrapper + .vxe-button--dropdown {
+  margin-top: 0.5em;
+}
+.vxe-button-group.is--vertical .vxe-button--dropdown + .vxe-button-wrapper, .vxe-button-group.is--vertical .vxe-button--dropdown + .vxe-button, .vxe-button-group.is--vertical .vxe-button--dropdown + .vxe-button--dropdown {
+  margin-top: 0.5em;
 }

package/es/button-group/style.min.css

@@ -1 +1 @@
-.vxe-button-group{display:inline-flex}.vxe-button-group.is--vertical{flex-direction:column}.vxe-button-group.is--vertical .vxe-button{margin:0}
+.vxe-button-group{display:inline-flex}.vxe-button-group.is--vertical{flex-direction:column}.vxe-button-group.is--vertical .vxe-button+.vxe-button,.vxe-button-group.is--vertical .vxe-button+.vxe-button--dropdown,.vxe-button-group.is--vertical .vxe-button+.vxe-button-wrapper,.vxe-button-group.is--vertical .vxe-button-wrapper+.vxe-button,.vxe-button-group.is--vertical .vxe-button-wrapper+.vxe-button--dropdown,.vxe-button-group.is--vertical .vxe-button-wrapper+.vxe-button-wrapper{margin-top:.5em}.vxe-button-group.is--vertical .vxe-button--dropdown+.vxe-button,.vxe-button-group.is--vertical .vxe-button--dropdown+.vxe-button--dropdown,.vxe-button-group.is--vertical .vxe-button--dropdown+.vxe-button-wrapper{margin-top:.5em}

package/es/date-picker/src/date-picker.js

@@ -1,11 +1,12 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, globalMixins, renderEmptyElement } from '../../ui';
-import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils';
+import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
 import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom';
 import { toStringTimeDate, getDateQuarter } from './util';
 import { getSlotVNs } from '../..//ui/src/vn';
-export default defineVxeComponent({
+import VxeButtonGroupComponent from '../../button/src/button-group';
+export default {
     name: 'VxeDatePicker',
     mixins: [
         globalMixins.sizeMixin
@@ -92,6 +93,7 @@ export default defineVxeComponent({
             type: Boolean,
             default: null
         },
+        shortcutConfig: Object,
         // 已废弃 startWeek，被 startDay 替换
         startWeek: Number,
         // 已废弃
@@ -629,6 +631,11 @@ export default defineVxeComponent({
             const props = $xeDatePicker;
             const { immediate } = props;
             return immediate;
+        },
+        computeShortcutOpts() {
+            const $xeDatePicker = this;
+            const props = $xeDatePicker;
+            return Object.assign({}, getConfig().datePicker.shortcutConfig, props.shortcutConfig);
         } }),
     methods: {
         //
@@ -693,10 +700,16 @@ export default defineVxeComponent({
         parseDate(value, format) {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
-            const { type } = props;
+            const { type, multiple } = props;
             if (type === 'time') {
                 return toStringTimeDate(value);
             }
+            if (XEUtils.isArray(value)) {
+                return XEUtils.toStringDate(value[0], format);
+            }
+            if (XEUtils.isString(value)) {
+                return XEUtils.toStringDate(multiple ? XEUtils.last(value.split(',')) : value, format);
+            }
             return XEUtils.toStringDate(value, format);
         },
         triggerEvent(evnt) {
@@ -876,7 +889,7 @@ export default defineVxeComponent({
                 reactData.selectMonth = month;
             }
         },
-        dateChange(date) {
+        dateChange(date, isReload) {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
             const reactData = $xeDatePicker.reactData;
@@ -900,10 +913,9 @@ export default defineVxeComponent({
             $xeDatePicker.dateCheckMonth(date);
             if (multiple) {
                 // 如果为多选
-                const dateMultipleValue = $xeDatePicker.computeDateMultipleValue;
                 if (isDateTimeType) {
                     // 如果是datetime特殊类型
-                    const dateListValue = [...$xeDatePicker.computeDateListValue];
+                    const dateListValue = isReload ? [] : [...$xeDatePicker.computeDateListValue];
                     const datetimeRest = [];
                     const eqIndex = XEUtils.findIndexOf(dateListValue, val => XEUtils.isDateSame(date, val, 'yyyyMMdd'));
                     if (eqIndex === -1) {
@@ -925,6 +937,7 @@ export default defineVxeComponent({
                     $xeDatePicker.handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
                 }
                 else {
+                    const dateMultipleValue = isReload ? [] : $xeDatePicker.computeDateMultipleValue;
                     // 如果是日期类型
                     if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
                         $xeDatePicker.handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
@@ -1037,8 +1050,23 @@ export default defineVxeComponent({
         },
         dateNowHandle() {
             const $xeDatePicker = this;
+            const props = $xeDatePicker;
             const reactData = $xeDatePicker.reactData;
-            const currentDate = XEUtils.getWhatDay(Date.now(), 0, 'first');
+            const { type } = props;
+            const firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+            let currentDate = new Date();
+            switch (type) {
+                case 'week':
+                    currentDate = XEUtils.getWhatWeek(currentDate, 0, firstDayOfWeek);
+                    break;
+                case 'datetime':
+                    currentDate = new Date();
+                    reactData.datetimePanelValue = new Date();
+                    break;
+                default:
+                    currentDate = XEUtils.getWhatDay(Date.now(), 0, 'first');
+                    break;
+            }
             reactData.currentDate = currentDate;
             $xeDatePicker.dateMonthHandle(currentDate, 0);
         },
@@ -1097,8 +1125,8 @@ export default defineVxeComponent({
             const props = $xeDatePicker;
             const reactData = $xeDatePicker.reactData;
             $xeDatePicker.dateNowHandle();
+            $xeDatePicker.dateChange(reactData.currentDate, true);
             if (!props.multiple) {
-                $xeDatePicker.dateChange(reactData.currentDate);
                 $xeDatePicker.hidePanel();
             }
             $xeDatePicker.dispatchEvent('date-today', { type: props.type }, evnt);
@@ -1423,20 +1451,30 @@ export default defineVxeComponent({
                     }
                     $xeDatePicker.dateMoveMonth(offsetMonth);
                 }
-                else {
+                else if (datePanelType === 'week') {
                     let offsetDay = datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
                     const firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+                    if (isUpArrow) {
+                        offsetDay = XEUtils.getWhatWeek(offsetDay, -1, firstDayOfWeek);
+                    }
+                    else if (isDwArrow) {
+                        offsetDay = XEUtils.getWhatWeek(offsetDay, 1, firstDayOfWeek);
+                    }
+                    $xeDatePicker.dateMoveDay(offsetDay);
+                }
+                else {
+                    let offsetDay = datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
                     if (isLeftArrow) {
                         offsetDay = XEUtils.getWhatDay(offsetDay, -1);
                     }
                     else if (isUpArrow) {
-                        offsetDay = XEUtils.getWhatWeek(offsetDay, -1, firstDayOfWeek);
+                        offsetDay = XEUtils.getWhatWeek(offsetDay, -1, offsetDay.getDay());
                     }
                     else if (isRightArrow) {
                         offsetDay = XEUtils.getWhatDay(offsetDay, 1);
                     }
                     else if (isDwArrow) {
-                        offsetDay = XEUtils.getWhatWeek(offsetDay, 1, firstDayOfWeek);
+                        offsetDay = XEUtils.getWhatWeek(offsetDay, 1, offsetDay.getDay());
                     }
                     $xeDatePicker.dateMoveDay(offsetDay);
                 }
@@ -1621,6 +1659,23 @@ export default defineVxeComponent({
             const $xeDatePicker = this;
             $xeDatePicker.triggerEvent(evnt);
         },
+        handleShortcutEvent({ option, $event }) {
+            const $xeDatePicker = this;
+            const shortcutOpts = $xeDatePicker.computeShortcutOpts;
+            const { autoClose } = shortcutOpts;
+            const clickMethod = option.clickMethod || shortcutOpts.clickMethod;
+            const shortcutParams = {
+                $datePicker: $xeDatePicker,
+                option: option
+            };
+            if (clickMethod) {
+                clickMethod(shortcutParams);
+            }
+            if (autoClose) {
+                $xeDatePicker.hidePanel();
+            }
+            $xeDatePicker.dispatchEvent('shortcut-click', shortcutParams, $event);
+        },
         // 全局事件
         handleGlobalMousedownEvent(evnt) {
             const $xeDatePicker = this;
@@ -2203,6 +2258,29 @@ export default defineVxeComponent({
                 ])
             ];
         },
+        renderShortcutBtn(h, pos, isVertical) {
+            const $xeDatePicker = this;
+            const shortcutOpts = $xeDatePicker.computeShortcutOpts;
+            const { options, position, align, mode } = shortcutOpts;
+            if (isEnableConf(shortcutOpts) && options && options.length && (position || 'left') === pos) {
+                return h('div', {
+                    class: `vxe-date-picker--panel-${pos}-wrapper`
+                }, [
+                    h(VxeButtonGroupComponent, {
+                        props: {
+                            options: options,
+                            mode,
+                            align,
+                            vertical: isVertical
+                        },
+                        on: {
+                            click: $xeDatePicker.handleShortcutEvent
+                        }
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeDatePicker);
+        },
         renderPanel(h) {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
@@ -2212,12 +2290,15 @@ export default defineVxeComponent({
             const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle } = reactData;
             const vSize = $xeDatePicker.computeSize;
             const btnTransfer = $xeDatePicker.computeBtnTransfer;
+            const shortcutOpts = $xeDatePicker.computeShortcutOpts;
+            const { options, position } = shortcutOpts;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
             const topSlot = slots.top;
             const bottomSlot = slots.bottom;
             const leftSlot = slots.left;
             const rightSlot = slots.right;
+            const hasShortcutBtn = options && options.length;
             const renders = [];
             if (type === 'datetime') {
                 renders.push(h('div', {
@@ -2254,10 +2335,10 @@ export default defineVxeComponent({
                         'is--transfer': btnTransfer,
                         'ani--leave': isAniVisible,
                         'ani--enter': visiblePanel,
-                        'show--top': !!(topSlot || headerSlot),
-                        'show--bottom': !!(bottomSlot || footerSlot),
-                        'show--left': !!leftSlot,
-                        'show--right': !!rightSlot
+                        'show--top': !!(topSlot || headerSlot || (hasShortcutBtn && (position === 'top' || position === 'header'))),
+                        'show--bottom': !!(bottomSlot || footerSlot || (hasShortcutBtn && (position === 'bottom' || position === 'footer'))),
+                        'show--left': !!(leftSlot || (hasShortcutBtn && position === 'left')),
+                        'show--right': !!(rightSlot || (hasShortcutBtn && position === 'right'))
                     }],
                 attrs: {
                     placement: panelPlacement
@@ -2272,7 +2353,7 @@ export default defineVxeComponent({
                             ? h('div', {
                                 class: 'vxe-date-picker--panel-top-wrapper'
                             }, topSlot({}))
-                            : renderEmptyElement($xeDatePicker),
+                            : $xeDatePicker.renderShortcutBtn(h, 'top'),
                         h('div', {
                             class: 'vxe-date-picker--panel-body-layout-wrapper'
                         }, [
@@ -2280,7 +2361,7 @@ export default defineVxeComponent({
                                 ? h('div', {
                                     class: 'vxe-date-picker--panel-left-wrapper'
                                 }, leftSlot({}))
-                                : renderEmptyElement($xeDatePicker),
+                                : $xeDatePicker.renderShortcutBtn(h, 'left', true),
                             h('div', {
                                 class: 'vxe-date-picker--panel-body-content-wrapper'
                             }, [
@@ -2288,7 +2369,7 @@ export default defineVxeComponent({
                                     ? h('div', {
                                         class: 'vxe-date-picker--panel-header-wrapper'
                                     }, headerSlot({}))
-                                    : renderEmptyElement($xeDatePicker),
+                                    : $xeDatePicker.renderShortcutBtn(h, 'header'),
                                 h('div', {
                                     class: 'vxe-date-picker--panel-body-wrapper'
                                 }, renders),
@@ -2296,19 +2377,19 @@ export default defineVxeComponent({
                                     ? h('div', {
                                         class: 'vxe-date-picker--panel-footer-wrapper'
                                     }, footerSlot({}))
-                                    : renderEmptyElement($xeDatePicker)
+                                    : $xeDatePicker.renderShortcutBtn(h, 'footer')
                             ]),
                             rightSlot
                                 ? h('div', {
                                     class: 'vxe-date-picker--panel-right-wrapper'
                                 }, rightSlot({}))
-                                : renderEmptyElement($xeDatePicker)
+                                : $xeDatePicker.renderShortcutBtn(h, 'right', true)
                         ]),
                         bottomSlot
                             ? h('div', {
                                 class: 'vxe-date-picker--panel-bottom-wrapper'
                             }, bottomSlot({}))
-                            : renderEmptyElement($xeDatePicker)
+                            : $xeDatePicker.renderShortcutBtn(h, 'bottom')
                     ])
                 ]
                 : []);
@@ -2528,4 +2609,4 @@ export default defineVxeComponent({
     render(h) {
         return this.renderVN(h);
     }
-});
+};

package/es/date-picker/style.css

@@ -383,6 +383,10 @@
 .vxe-date-picker--date-picker-body th {
   box-shadow: inset 0 -1px 0 0 var(--vxe-ui-base-popup-border-color);
 }
+.vxe-date-picker--date-picker-body td {
+  border: 1px solid transparent;
+  border-radius: 1em;
+}
 .vxe-date-picker--date-picker-body td.is--prev, .vxe-date-picker--date-picker-body td.is--next {
   color: var(--vxe-ui-font-disabled-color);
 }
@@ -392,7 +396,7 @@
   color: var(--vxe-ui-font-disabled-color);
 }
 .vxe-date-picker--date-picker-body td.is--now {
-  box-shadow: inset 0 0 0 1px var(--vxe-ui-base-popup-border-color);
+  color: var(--vxe-ui-base-popup-border-color);
 }
 .vxe-date-picker--date-picker-body td.is--now:not(.is--selected).is--current {
   color: var(--vxe-ui-font-primary-color);
@@ -402,14 +406,20 @@
   color: var(--vxe-ui-font-primary-color);
 }
 .vxe-date-picker--date-picker-body td.is--hover {
-  background-color: var(--vxe-ui-input-date-picker-hover-background-color);
+  border-color: var(--vxe-ui-font-primary-color);
+  background-color: var(--vxe-ui-font-primary-tinge-color);
 }
 .vxe-date-picker--date-picker-body td.is--selected {
   color: var(--vxe-ui-input-date-picker-selected-color);
   background-color: var(--vxe-ui-font-primary-color);
 }
-.vxe-date-picker--date-picker-body td.is--selected.is--prev, .vxe-date-picker--date-picker-body td.is--selected.is--next {
-  background-color: var(--vxe-ui-font-primary-lighten-color);
+.vxe-date-picker--date-picker-body td.is--selected.is--hover {
+  box-shadow: 0 0px 6px 1px var(--vxe-ui-font-primary-color);
+}
+.vxe-date-picker--date-picker-body td.is--selected.is--prev .vxe-date-picker--date-label,
+.vxe-date-picker--date-picker-body td.is--selected.is--prev .vxe-date-picker--date-festival, .vxe-date-picker--date-picker-body td.is--selected.is--next .vxe-date-picker--date-label,
+.vxe-date-picker--date-picker-body td.is--selected.is--next .vxe-date-picker--date-festival {
+  color: var(--vxe-ui-base-popup-border-color);
 }
 .vxe-date-picker--date-picker-body td.is--selected .vxe-date-picker--date-label,
 .vxe-date-picker--date-picker-body td.is--selected .vxe-date-picker--date-festival {
@@ -434,8 +444,25 @@
 .vxe-date-picker--date-week-view th:first-child {
   box-shadow: inset -1px -1px 0 0 var(--vxe-ui-base-popup-border-color);
 }
+.vxe-date-picker--date-week-view td {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-left-width: 0;
+  border-right-width: 0;
+}
 .vxe-date-picker--date-week-view td:first-child {
-  box-shadow: inset -1px 0 0 0 var(--vxe-ui-base-popup-border-color);
+  border-bottom-left-radius: 1em;
+  border-top-left-radius: 1em;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  border-right-color: var(--vxe-ui-base-popup-border-color);
+}
+.vxe-date-picker--date-week-view td:last-child {
+  border-top-right-radius: 1em;
+  border-bottom-right-radius: 1em;
+  border-right-width: 1px;
 }
 
 .vxe-date-picker--date-label,
@@ -463,9 +490,8 @@
   position: absolute;
   right: 0.1em;
   top: -0.2em;
-  font-size: 12px;
-  line-height: 12px;
-  transform: scale(0.7);
+  font-size: 0.86em;
+  transform: scale(0.85);
   color: var(--vxe-ui-input-date-extra-color);
 }
 .vxe-date-picker--date-label--extra.is-important {
@@ -475,7 +501,6 @@
 .vxe-date-picker--date-festival {
   color: var(--vxe-ui-input-date-festival-color);
   height: 14px;
-  line-height: 1;
   overflow: hidden;
 }
 .vxe-date-picker--date-festival.is-important {
@@ -484,8 +509,8 @@
 
 .vxe-date-picker--date-festival--label {
   display: block;
-  font-size: 12px;
-  transform: scale(0.8);
+  font-size: 0.86em;
+  transform: scale(0.9);
 }
 
 @keyframes festivalOverlap2 {
@@ -509,7 +534,7 @@
 }
 .vxe-date-picker--date-festival--overlap {
   display: block;
-  font-size: 12px;
+  font-size: 0.86em;
 }
 .vxe-date-picker--date-festival--overlap.overlap--2 {
   animation: festivalOverlap2 6s infinite ease-in-out;