vxe-pc-ui 4.3.63 → 4.3.65

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

@@ -11,6 +11,7 @@ export default defineComponent({
         round: Boolean,
         vertical: Boolean,
         circle: Boolean,
+        align: String,
         className: [String, Function],
         disabled: Boolean,
         permissionCode: [String, Number],

package/es/button/src/button.js

@@ -175,6 +175,16 @@ export default defineComponent({
             }
             return '';
         });
+        const computeBtnAlign = computed(() => {
+            const { align } = props;
+            if (align) {
+                return align;
+            }
+            if ($xeButtonGroup) {
+                return $xeButtonGroup.props.align;
+            }
+            return false;
+        });
         const computeBtnRound = computed(() => {
             const { round } = props;
             if (round) {
@@ -501,12 +511,13 @@ export default defineComponent({
         };
         Object.assign($xeButton, buttonMethods);
         const renderVN = () => {
-            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 = computeIsFormBtn.value;
             const btnMode = computeBtnMode.value;
             const btnStatus = computeBtnStatus.value;
             const btnRound = computeBtnRound.value;
+            const btnAlign = computeBtnAlign.value;
             const btnCircle = computeBtnCircle.value;
             const btnTransfer = computeBtnTransfer.value;
             const btnDisabled = computeBtnDisabled.value;
@@ -534,7 +545,7 @@ export default defineComponent({
                         }]
                 }, [
                     routerLink
-                        ? h(resolveComponent('router-link'), Object.assign({ ref: refButton, class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+                        ? h(resolveComponent('router-link'), Object.assign({ ref: refButton, 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,
@@ -551,7 +562,7 @@ export default defineComponent({
                                 ]);
                             }
                         })
-                        : h('button', Object.assign({ ref: refButton, class: ['vxe-button', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+                        : h('button', Object.assign({ ref: refButton, 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,
@@ -587,7 +598,7 @@ export default defineComponent({
             if (routerLink) {
                 return h(resolveComponent('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,
@@ -611,7 +622,7 @@ export default defineComponent({
             }
             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,

package/es/button/style.css

@@ -443,6 +443,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);
@@ -469,9 +473,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;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;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,10 +1,11 @@
 import { defineComponent, h, Teleport, ref, computed, reactive, inject, nextTick, watch, onUnmounted, createCommentVNode } from 'vue';
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, 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';
+import VxeButtonGroupComponent from '../../button/src/button-group';
 export default defineComponent({
     name: 'VxeDatePicker',
     props: {
@@ -85,6 +86,7 @@ export default defineComponent({
             type: Boolean,
             default: null
         },
+        shortcutConfig: Object,
         // 已废弃 startWeek，被 startDay 替换
         startWeek: Number,
         // 已废弃
@@ -107,7 +109,8 @@ export default defineComponent({
         'suffix-click',
         'date-prev',
         'date-today',
-        'date-next'
+        'date-next',
+        'shortcut-click'
     ],
     setup(props, context) {
         const { slots, emit } = context;
@@ -566,6 +569,9 @@ export default defineComponent({
             const { immediate } = props;
             return immediate;
         });
+        const computeShortcutOpts = computed(() => {
+            return Object.assign({}, getConfig().datePicker.shortcutConfig, props.shortcutConfig);
+        });
         const updateModelValue = (modelValue) => {
             const { isActivated, visiblePanel } = reactData;
             let val = '';
@@ -583,21 +589,27 @@ export default defineComponent({
             }
         };
         const parseDate = (value, format) => {
-            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);
         };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
-            datePickerMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+            dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
         const handleChange = (value, evnt) => {
             reactData.inputValue = value;
             emit('update:modelValue', value);
             if (XEUtils.toValueString(props.modelValue) !== value) {
-                datePickerMethods.dispatchEvent('change', { value }, evnt);
+                dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -615,7 +627,7 @@ export default defineComponent({
                     handleChange(value, evnt);
                 }
                 else {
-                    datePickerMethods.dispatchEvent('input', { value }, evnt);
+                    dispatchEvent('input', { value }, evnt);
                 }
             }
         };
@@ -637,7 +649,7 @@ export default defineComponent({
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                datePickerMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+                dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
         const hidePanel = () => {
@@ -655,13 +667,13 @@ export default defineComponent({
                 hidePanel();
             }
             handleChange('', evnt);
-            datePickerMethods.dispatchEvent('clear', { value }, evnt);
+            dispatchEvent('clear', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                datePickerMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+                dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
         const dateParseValue = (value) => {
@@ -733,7 +745,7 @@ export default defineComponent({
                 reactData.selectMonth = month;
             }
         };
-        const dateChange = (date) => {
+        const dateChange = (date, isReload) => {
             const { modelValue, multiple } = props;
             const { datetimePanelValue } = reactData;
             const isDateTimeType = computeIsDateTimeType.value;
@@ -754,10 +766,9 @@ export default defineComponent({
             dateCheckMonth(date);
             if (multiple) {
                 // 如果为多选
-                const dateMultipleValue = computeDateMultipleValue.value;
                 if (isDateTimeType) {
                     // 如果是datetime特殊类型
-                    const dateListValue = [...computeDateListValue.value];
+                    const dateListValue = isReload ? [] : [...computeDateListValue.value];
                     const datetimeRest = [];
                     const eqIndex = XEUtils.findIndexOf(dateListValue, val => XEUtils.isDateSame(date, val, 'yyyyMMdd'));
                     if (eqIndex === -1) {
@@ -779,6 +790,7 @@ export default defineComponent({
                     handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
                 }
                 else {
+                    const dateMultipleValue = isReload ? [] : computeDateMultipleValue.value;
                     // 如果是日期类型
                     if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
                         handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
@@ -854,7 +866,7 @@ export default defineComponent({
             if (!reactData.visiblePanel) {
                 reactData.isActivated = false;
             }
-            datePickerMethods.dispatchEvent('blur', { value }, evnt);
+            dispatchEvent('blur', { value }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -878,7 +890,21 @@ export default defineComponent({
             reactData.selectMonth = month;
         };
         const dateNowHandle = () => {
-            const currentDate = XEUtils.getWhatDay(Date.now(), 0, 'first');
+            const { type } = props;
+            const firstDayOfWeek = computeFirstDayOfWeek.value;
+            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;
             dateMonthHandle(currentDate, 0);
         };
@@ -923,16 +949,16 @@ export default defineComponent({
                     }
                 }
                 reactData.selectMonth = viewDate;
-                datePickerMethods.dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt);
+                dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt);
             }
         };
         const dateTodayMonthEvent = (evnt) => {
             dateNowHandle();
+            dateChange(reactData.currentDate, true);
             if (!props.multiple) {
-                dateChange(reactData.currentDate);
                 hidePanel();
             }
-            datePickerMethods.dispatchEvent('date-today', { type: props.type }, evnt);
+            dispatchEvent('date-today', { type: props.type }, evnt);
         };
         const dateNextEvent = (evnt) => {
             const { type } = props;
@@ -965,7 +991,7 @@ export default defineComponent({
                     }
                 }
                 reactData.selectMonth = viewDate;
-                datePickerMethods.dispatchEvent('date-next', { viewType: datePanelType, value, type }, evnt);
+                dispatchEvent('date-next', { viewType: datePanelType, value, type }, evnt);
             }
         };
         const isDateDisabled = (item) => {
@@ -1224,20 +1250,30 @@ export default defineComponent({
                     }
                     dateMoveMonth(offsetMonth);
                 }
-                else {
+                else if (datePanelType === 'week') {
                     let offsetDay = datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
                     const firstDayOfWeek = computeFirstDayOfWeek.value;
+                    if (isUpArrow) {
+                        offsetDay = XEUtils.getWhatWeek(offsetDay, -1, firstDayOfWeek);
+                    }
+                    else if (isDwArrow) {
+                        offsetDay = XEUtils.getWhatWeek(offsetDay, 1, firstDayOfWeek);
+                    }
+                    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());
                     }
                     dateMoveDay(offsetDay);
                 }
@@ -1401,7 +1437,22 @@ export default defineComponent({
         const clickEvent = (evnt) => {
             triggerEvent(evnt);
         };
-        // 弹出面板
+        const handleShortcutEvent = ({ option, $event }) => {
+            const shortcutOpts = computeShortcutOpts.value;
+            const { autoClose } = shortcutOpts;
+            const clickMethod = option.clickMethod || shortcutOpts.clickMethod;
+            const shortcutParams = {
+                $datePicker: $xeDatePicker,
+                option: option
+            };
+            if (clickMethod) {
+                clickMethod(shortcutParams);
+            }
+            if (autoClose) {
+                hidePanel();
+            }
+            dispatchEvent('shortcut-click', shortcutParams, $event);
+        };
         // 全局事件
         const handleGlobalMousedownEvent = (evnt) => {
             const { visiblePanel, isActivated } = reactData;
@@ -1934,17 +1985,38 @@ export default defineComponent({
                 ])
             ];
         };
+        const renderShortcutBtn = (pos, isVertical) => {
+            const shortcutOpts = computeShortcutOpts.value;
+            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, {
+                        options,
+                        mode,
+                        align,
+                        vertical: isVertical,
+                        onClick: handleShortcutEvent
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeDatePicker);
+        };
         const renderPanel = () => {
             const { type } = props;
             const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle } = reactData;
             const vSize = computeSize.value;
             const btnTransfer = computeBtnTransfer.value;
+            const shortcutOpts = computeShortcutOpts.value;
+            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', {
@@ -1985,10 +2057,10 @@ export default defineComponent({
                             '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'))
                         }],
                     placement: panelPlacement,
                     style: panelStyle
@@ -2001,7 +2073,7 @@ export default defineComponent({
                                 ? h('div', {
                                     class: 'vxe-date-picker--panel-top-wrapper'
                                 }, topSlot({}))
-                                : renderEmptyElement($xeDatePicker),
+                                : renderShortcutBtn('top'),
                             h('div', {
                                 class: 'vxe-date-picker--panel-body-layout-wrapper'
                             }, [
@@ -2009,7 +2081,7 @@ export default defineComponent({
                                     ? h('div', {
                                         class: 'vxe-date-picker--panel-left-wrapper'
                                     }, leftSlot({}))
-                                    : renderEmptyElement($xeDatePicker),
+                                    : renderShortcutBtn('left', true),
                                 h('div', {
                                     class: 'vxe-date-picker--panel-body-content-wrapper'
                                 }, [
@@ -2017,7 +2089,7 @@ export default defineComponent({
                                         ? h('div', {
                                             class: 'vxe-date-picker--panel-header-wrapper'
                                         }, headerSlot({}))
-                                        : renderEmptyElement($xeDatePicker),
+                                        : renderShortcutBtn('header'),
                                     h('div', {
                                         class: 'vxe-date-picker--panel-body-wrapper'
                                     }, renders),
@@ -2025,19 +2097,19 @@ export default defineComponent({
                                         ? h('div', {
                                             class: 'vxe-date-picker--panel-footer-wrapper'
                                         }, footerSlot({}))
-                                        : renderEmptyElement($xeDatePicker)
+                                        : renderShortcutBtn('footer')
                                 ]),
                                 rightSlot
                                     ? h('div', {
                                         class: 'vxe-date-picker--panel-right-wrapper'
                                     }, rightSlot({}))
-                                    : renderEmptyElement($xeDatePicker)
+                                    : renderShortcutBtn('right', true)
                             ]),
                             bottomSlot
                                 ? h('div', {
                                     class: 'vxe-date-picker--panel-bottom-wrapper'
                                 }, bottomSlot({}))
-                                : renderEmptyElement($xeDatePicker)
+                                : renderShortcutBtn('bottom')
                         ])
                     ]
                     : [])