vxe-pc-ui 4.6.3 → 4.6.5

package/es/button/src/button.js

@@ -1,7 +1,7 @@
 import { defineComponent, h, ref, computed, Teleport, resolveComponent, onUnmounted, reactive, nextTick, onMounted, inject, createCommentVNode } from 'vue';
 import XEUtils from 'xe-utils';
 import { getConfig, globalEvents, getIcon, createEvent, useSize, usePermission } from '../../ui';
-import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom';
+import { getEventTargetNode, updatePanelPlacement } from '../../ui/src/dom';
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils';
 import { warnLog } from '../../ui/src/log';
 import VxeTooltipComponent from '../../tooltip/src/tooltip';
@@ -217,78 +217,24 @@ export default defineComponent({
             }
         };
         const updatePlacement = () => {
-            return nextTick().then(() => {
-                const { placement } = props;
-                const { panelIndex } = reactData;
-                const targetElem = refButton.value;
-                const panelElem = refBtnPanel.value;
-                const btnTransfer = computeBtnTransfer.value;
-                if (panelElem && targetElem) {
-                    const targetHeight = targetElem.offsetHeight;
-                    const targetWidth = targetElem.offsetWidth;
-                    const panelHeight = panelElem.offsetHeight;
-                    const panelWidth = panelElem.offsetWidth;
-                    const marginSize = 5;
-                    const panelStyle = {
-                        zIndex: panelIndex
-                    };
-                    const { top, left, boundingTop, visibleHeight, visibleWidth } = getAbsolutePos(targetElem);
-                    let panelPlacement = 'bottom';
-                    if (btnTransfer) {
-                        let btnLeft = left + targetWidth - panelWidth;
-                        let btnTop = top + targetHeight;
-                        if (placement === 'top') {
-                            panelPlacement = 'top';
-                            btnTop = top - panelHeight;
-                        }
-                        else if (!placement) {
-                            // 如果下面不够放，则向上
-                            if (boundingTop + targetHeight + panelHeight + marginSize > visibleHeight) {
-                                panelPlacement = 'top';
-                                btnTop = top - panelHeight;
-                            }
-                            // 如果上面不够放，则向下（优先）
-                            if (btnTop < marginSize) {
-                                panelPlacement = 'bottom';
-                                btnTop = top + targetHeight;
-                            }
-                        }
-                        // 如果溢出右边
-                        if (btnLeft + panelWidth + marginSize > visibleWidth) {
-                            btnLeft -= btnLeft + panelWidth + marginSize - visibleWidth;
-                        }
-                        // 如果溢出左边
-                        if (btnLeft < marginSize) {
-                            btnLeft = marginSize;
-                        }
-                        Object.assign(panelStyle, {
-                            left: `${btnLeft}px`,
-                            right: 'auto',
-                            top: `${btnTop}px`,
-                            minWidth: `${targetWidth}px`
-                        });
-                    }
-                    else {
-                        if (placement === 'top') {
-                            panelPlacement = 'top';
-                            panelStyle.bottom = `${targetHeight}px`;
-                        }
-                        else if (!placement) {
-                            // 如果下面不够放，则向上
-                            if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                                // 如果上面不够放，则向下（优先）
-                                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                                    panelPlacement = 'top';
-                                    panelStyle.bottom = `${targetHeight}px`;
-                                }
-                            }
-                        }
-                    }
-                    reactData.panelStyle = panelStyle;
-                    reactData.panelPlacement = panelPlacement;
-                    return nextTick();
-                }
-            });
+            const { placement } = props;
+            const { panelIndex } = reactData;
+            const targetElem = refButton.value;
+            const panelElem = refBtnPanel.value;
+            const btnTransfer = computeBtnTransfer.value;
+            const handleStyle = () => {
+                const ppObj = updatePanelPlacement(targetElem, panelElem, {
+                    placement,
+                    teleportTo: btnTransfer
+                });
+                const panelStyle = Object.assign(ppObj.style, {
+                    zIndex: panelIndex
+                });
+                reactData.panelStyle = panelStyle;
+                reactData.panelPlacement = ppObj.placement;
+            };
+            handleStyle();
+            return nextTick().then(handleStyle);
         };
         const clickEvent = (evnt) => {
             if ($xeButtonGroup) {
@@ -581,6 +527,7 @@ export default defineComponent({
                     }, [
                         h('div', Object.assign({ ref: refBtnPanel, class: ['vxe-button--dropdown-panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $button: $xeButton }) : popupClassName) : '', {
                                     [`size--${vSize}`]: vSize,
+                                    'is--transfer': btnTransfer,
                                     'ani--leave': isAniVisible,
                                     'ani--enter': visiblePanel
                                 }], placement: reactData.panelPlacement, style: reactData.panelStyle }, panelOns), initialized && (visiblePanel || isAniVisible)

package/es/button/style.css

@@ -567,8 +567,16 @@
 .vxe-button--dropdown-panel {
   display: none;
   position: absolute;
-  right: 0;
+  left: 0;
   padding: 4px 0;
+  color: var(--vxe-ui-font-color);
+  text-align: left;
+}
+.vxe-button--dropdown-panel:not(.is--transfer) {
+  min-width: 100%;
+}
+.vxe-button--dropdown-panel.is--transfer {
+  position: fixed;
 }
 .vxe-button--dropdown-panel.ani--leave {
   display: block;
@@ -577,7 +585,6 @@
   transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   transform-origin: center top;
   backface-visibility: hidden;
-  transform-style: preserve-3d;
 }
 .vxe-button--dropdown-panel.ani--leave[placement=top] {
   transform-origin: center bottom;
@@ -586,6 +593,21 @@
   opacity: 1;
   transform: scaleY(1);
 }
+.vxe-button--dropdown-panel.ani--enter > div::after {
+  display: none;
+}
+.vxe-button--dropdown-panel > div::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
 
 .vxe-button--dropdown-wrapper {
   padding: 5px;

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--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}
+.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;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-button--dropdown-panel:not(.is--transfer){min-width:100%}.vxe-button--dropdown-panel.is--transfer{position:fixed}.vxe-button--dropdown-panel.ani--leave{display:block;opacity:0;transform:scaleY(.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}.vxe-button--dropdown-panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-button--dropdown-panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-button--dropdown-panel.ani--enter>div::after{display:none}.vxe-button--dropdown-panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-button--dropdown-wrapper{padding:5px;background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color);box-shadow:0 1px 6px rgba(0,0,0,.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/color-picker/src/color-picker.js

@@ -1,7 +1,7 @@
 import { defineComponent, watch, computed, provide, ref, inject, Teleport, h, nextTick, reactive, onMounted, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI, getIcon, getConfig, getI18n, globalEvents, createEvent, useSize, renderEmptyElement } from '../../ui';
-import { getEventTargetNode, getAbsolutePos, toCssUnit } from '../../ui/src/dom';
+import { getEventTargetNode, toCssUnit, updatePanelPlacement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
 import { parseColor, updateColorAlpha, hexToHsv, rgbToHsv, rgbToHex, hexToRgb, hsvToRgb, toRgb } from './util';
 import VxeButtonComponent from '../../button/src/button';
@@ -242,77 +242,24 @@ export default defineComponent({
             }
         };
         const updatePlacement = () => {
-            return nextTick().then(() => {
-                const { placement } = props;
-                const { panelIndex } = reactData;
-                const el = refElem.value;
-                const panelElem = refOptionPanel.value;
-                const btnTransfer = computeBtnTransfer.value;
-                if (panelElem && el) {
-                    const targetHeight = el.offsetHeight;
-                    const targetWidth = el.offsetWidth;
-                    const panelHeight = panelElem.offsetHeight;
-                    const panelWidth = panelElem.offsetWidth;
-                    const marginSize = 5;
-                    const panelStyle = {
-                        zIndex: panelIndex
-                    };
-                    const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(el);
-                    let panelPlacement = 'bottom';
-                    if (btnTransfer) {
-                        let left = boundingLeft;
-                        let top = boundingTop + targetHeight;
-                        if (placement === 'top') {
-                            panelPlacement = 'top';
-                            top = boundingTop - panelHeight;
-                        }
-                        else if (!placement) {
-                            // 如果下面不够放，则向上
-                            if (top + panelHeight + marginSize > visibleHeight) {
-                                panelPlacement = 'top';
-                                top = boundingTop - panelHeight;
-                            }
-                            // 如果上面不够放，则向下（优先）
-                            if (top < marginSize) {
-                                panelPlacement = 'bottom';
-                                top = boundingTop + targetHeight;
-                            }
-                        }
-                        // 如果溢出右边
-                        if (left + panelWidth + marginSize > visibleWidth) {
-                            left -= left + panelWidth + marginSize - visibleWidth;
-                        }
-                        // 如果溢出左边
-                        if (left < marginSize) {
-                            left = marginSize;
-                        }
-                        Object.assign(panelStyle, {
-                            left: `${left}px`,
-                            top: `${top}px`,
-                            minWidth: `${targetWidth}px`
-                        });
-                    }
-                    else {
-                        if (placement === 'top') {
-                            panelPlacement = 'top';
-                            panelStyle.bottom = `${targetHeight}px`;
-                        }
-                        else if (!placement) {
-                            // 如果下面不够放，则向上
-                            if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                                // 如果上面不够放，则向下（优先）
-                                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                                    panelPlacement = 'top';
-                                    panelStyle.bottom = `${targetHeight}px`;
-                                }
-                            }
-                        }
-                    }
-                    reactData.panelStyle = panelStyle;
-                    reactData.panelPlacement = panelPlacement;
-                    return nextTick();
-                }
-            });
+            const { placement } = props;
+            const { panelIndex } = reactData;
+            const targetElem = refElem.value;
+            const panelElem = refOptionPanel.value;
+            const btnTransfer = computeBtnTransfer.value;
+            const handleStyle = () => {
+                const ppObj = updatePanelPlacement(targetElem, panelElem, {
+                    placement,
+                    teleportTo: btnTransfer
+                });
+                const panelStyle = Object.assign(ppObj.style, {
+                    zIndex: panelIndex
+                });
+                reactData.panelStyle = panelStyle;
+                reactData.panelPlacement = ppObj.placement;
+            };
+            handleStyle();
+            return nextTick().then(handleStyle);
         };
         const showOptionPanel = () => {
             const { hpTimeout } = internalData;

package/es/color-picker/style.css

@@ -96,6 +96,21 @@
   opacity: 1;
   transform: scaleY(1);
 }
+.vxe-color-picker--panel.ani--enter > div::after {
+  display: none;
+}
+.vxe-color-picker--panel > div::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
 
 .vxe-color-picker--color-wrapper {
   position: relative;

package/es/color-picker/style.min.css

@@ -1 +1 @@
-.vxe-color-picker.is--selected .vxe-color-picker--inner-color{color:#fff}.vxe-color-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-color-picker,.vxe-color-picker--readonly{position:relative;display:inline-block;width:2.4em;padding:.25em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color)}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--inner,.vxe-color-picker--preview-btn{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==)}.vxe-color-picker--inner,.vxe-color-picker--readonly-color{width:100%;height:100%;background-size:1em 1em;border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--readonly-color{border:1px solid var(--vxe-ui-input-border-color)}.vxe-color-picker--inner{cursor:pointer}.vxe-color-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-color-picker--inner-color{width:100%;height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--panel-wrapper{position:relative;width:23.4em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-color-picker--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-color-picker--panel:not(.is--transfer){min-width:100%}.vxe-color-picker--panel.is--transfer{position:fixed}.vxe-color-picker--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}.vxe-color-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-color-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-color-picker--color-wrapper{position:relative;height:160px;overflow:hidden}.vxe-color-picker--black-bg,.vxe-color-picker--color-bg,.vxe-color-picker--white-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--white-bg{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.vxe-color-picker--black-bg{background:linear-gradient(to top,#000,rgba(255,255,255,0))}.vxe-color-picker--color-active{position:absolute;left:0;top:0;width:.8em;height:.8em;border-radius:50%;border:1px solid #fff;background-color:transparent;box-shadow:0 0 4px 1px rgba(0,0,0,.3);transform:translate(-.4em,-.4em)}.vxe-color-picker--quick-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:auto;max-height:9.2em}.vxe-color-picker--quick-item{width:1.5em;height:1.5em;margin:.4em;border:1px solid var(--vxe-ui-base-popup-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer;transition:transform .1s ease-in-out}.vxe-color-picker--quick-item:hover{transform:scale(1.2);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-color-picker--quick-item:active{transform:scale(.8)}.vxe-color-picker--bar-wrapper{margin-top:.4em}.vxe-color-picker--slider-wrapper{display:flex;flex-direction:row}.vxe-color-picker--color-dropper,.vxe-color-picker--slider-preview{padding-left:.8em}.vxe-color-picker--color-dropper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding-left:.8em;font-size:1.2em;cursor:pointer;transition:transform .1s ease-in-out}.vxe-color-picker--color-dropper:hover{color:var(--vxe-ui-font-primary-color)}.vxe-color-picker--color-dropper:active{transform:scale(.8)}.vxe-color-picker--slider-preview{display:flex;flex-direction:row;flex-shrink:0;align-items:center;justify-content:center}.vxe-color-picker--preview-btn,.vxe-color-picker--preview-color{width:2.2em;height:2.2em;border-radius:50%}.vxe-color-picker--preview-btn{background-size:.8em .8em}.vxe-color-picker--preview-color{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-color-picker--preview-color:hover::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:rgba(0,0,0,.3);z-index:0}.vxe-color-picker--preview-color:hover .vxe-color-picker--preview-copy-btn{display:block;z-index:1}.vxe-color-picker--preview-color:active .vxe-color-picker--preview-copy-btn{font-size:.8em}.vxe-color-picker--preview-copy-btn{display:none;color:#fff;cursor:pointer}.vxe-color-picker--slider-handle{display:flex;flex-direction:column;justify-content:center;flex-grow:1;padding:0 .8em}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{position:relative;height:1em;width:100%;margin:.4em 0;cursor:pointer}.vxe-color-picker--bar-alpha-bg,.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--bar-hue-slider{background:linear-gradient(to left,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.vxe-color-picker--bar-alpha-btn,.vxe-color-picker--bar-hue-btn{position:absolute;left:0;top:-4px;width:.6em;height:calc(100% + 8px);border-radius:.2em;background-color:#fff;border:1px solid var(--vxe-ui-base-popup-border-color);transform:translateX(-.3em);cursor:grab;box-shadow:0 0 8px 0 rgba(0,0,0,.3);transition:transform .1s ease-in-out}.vxe-color-picker--bar-alpha-btn:hover,.vxe-color-picker--bar-hue-btn:hover{transform:translateX(-.3em) scale(1.1)}.vxe-color-picker--bar-alpha-btn:active,.vxe-color-picker--bar-hue-btn:active{transform:translateX(-.3em) scale(1.2);cursor:grabbing}.vxe-color-picker--bar-alpha-slider{background-size:1em 1em}.vxe-color-picker--bar-alpha-slider .vxe-color-picker--bar-alpha-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--hex-wrapper,.vxe-color-picker--rgb-wrapper{text-align:center;margin-top:.4em}.vxe-color-picker--hex-wrapper{display:flex;flex-direction:row;padding:0 1.8em}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:12em}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-title{padding:0 .6em}.vxe-color-picker--input-title{color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:5.4em;margin:0 .4em}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title{display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1.4em}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title>span{display:block;width:50px;margin:0 .4em}.vxe-color-picker--footer-wrapper{text-align:right;margin-top:.4em;padding:0 .4em .4em .4em}.vxe-color-picker,.vxe-color-picker--readonly{height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-color-picker--readonly.size--medium,.vxe-color-picker.size--medium{height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-color-picker--readonly.size--small,.vxe-color-picker.size--small{height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-color-picker--readonly.size--mini,.vxe-color-picker.size--mini{height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}.vxe-color-picker,.vxe-color-picker--panel,.vxe-color-picker--readonly{font-size:var(--vxe-ui-font-size-default)}.vxe-color-picker--panel.size--medium,.vxe-color-picker--readonly.size--medium,.vxe-color-picker.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-color-picker--panel.size--small,.vxe-color-picker--readonly.size--small,.vxe-color-picker.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-color-picker--panel.size--mini,.vxe-color-picker--readonly.size--mini,.vxe-color-picker.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-color-picker.is--selected .vxe-color-picker--inner-color{color:#fff}.vxe-color-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-color-picker,.vxe-color-picker--readonly{position:relative;display:inline-block;width:2.4em;padding:.25em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color)}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--inner,.vxe-color-picker--preview-btn{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==)}.vxe-color-picker--inner,.vxe-color-picker--readonly-color{width:100%;height:100%;background-size:1em 1em;border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--readonly-color{border:1px solid var(--vxe-ui-input-border-color)}.vxe-color-picker--inner{cursor:pointer}.vxe-color-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-color-picker--inner-color{width:100%;height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--panel-wrapper{position:relative;width:23.4em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-color-picker--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-color-picker--panel:not(.is--transfer){min-width:100%}.vxe-color-picker--panel.is--transfer{position:fixed}.vxe-color-picker--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}.vxe-color-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-color-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-color-picker--panel.ani--enter>div::after{display:none}.vxe-color-picker--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-color-picker--color-wrapper{position:relative;height:160px;overflow:hidden}.vxe-color-picker--black-bg,.vxe-color-picker--color-bg,.vxe-color-picker--white-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--white-bg{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.vxe-color-picker--black-bg{background:linear-gradient(to top,#000,rgba(255,255,255,0))}.vxe-color-picker--color-active{position:absolute;left:0;top:0;width:.8em;height:.8em;border-radius:50%;border:1px solid #fff;background-color:transparent;box-shadow:0 0 4px 1px rgba(0,0,0,.3);transform:translate(-.4em,-.4em)}.vxe-color-picker--quick-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:auto;max-height:9.2em}.vxe-color-picker--quick-item{width:1.5em;height:1.5em;margin:.4em;border:1px solid var(--vxe-ui-base-popup-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer;transition:transform .1s ease-in-out}.vxe-color-picker--quick-item:hover{transform:scale(1.2);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-color-picker--quick-item:active{transform:scale(.8)}.vxe-color-picker--bar-wrapper{margin-top:.4em}.vxe-color-picker--slider-wrapper{display:flex;flex-direction:row}.vxe-color-picker--color-dropper,.vxe-color-picker--slider-preview{padding-left:.8em}.vxe-color-picker--color-dropper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding-left:.8em;font-size:1.2em;cursor:pointer;transition:transform .1s ease-in-out}.vxe-color-picker--color-dropper:hover{color:var(--vxe-ui-font-primary-color)}.vxe-color-picker--color-dropper:active{transform:scale(.8)}.vxe-color-picker--slider-preview{display:flex;flex-direction:row;flex-shrink:0;align-items:center;justify-content:center}.vxe-color-picker--preview-btn,.vxe-color-picker--preview-color{width:2.2em;height:2.2em;border-radius:50%}.vxe-color-picker--preview-btn{background-size:.8em .8em}.vxe-color-picker--preview-color{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-color-picker--preview-color:hover::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:rgba(0,0,0,.3);z-index:0}.vxe-color-picker--preview-color:hover .vxe-color-picker--preview-copy-btn{display:block;z-index:1}.vxe-color-picker--preview-color:active .vxe-color-picker--preview-copy-btn{font-size:.8em}.vxe-color-picker--preview-copy-btn{display:none;color:#fff;cursor:pointer}.vxe-color-picker--slider-handle{display:flex;flex-direction:column;justify-content:center;flex-grow:1;padding:0 .8em}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{position:relative;height:1em;width:100%;margin:.4em 0;cursor:pointer}.vxe-color-picker--bar-alpha-bg,.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--bar-hue-slider{background:linear-gradient(to left,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.vxe-color-picker--bar-alpha-btn,.vxe-color-picker--bar-hue-btn{position:absolute;left:0;top:-4px;width:.6em;height:calc(100% + 8px);border-radius:.2em;background-color:#fff;border:1px solid var(--vxe-ui-base-popup-border-color);transform:translateX(-.3em);cursor:grab;box-shadow:0 0 8px 0 rgba(0,0,0,.3);transition:transform .1s ease-in-out}.vxe-color-picker--bar-alpha-btn:hover,.vxe-color-picker--bar-hue-btn:hover{transform:translateX(-.3em) scale(1.1)}.vxe-color-picker--bar-alpha-btn:active,.vxe-color-picker--bar-hue-btn:active{transform:translateX(-.3em) scale(1.2);cursor:grabbing}.vxe-color-picker--bar-alpha-slider{background-size:1em 1em}.vxe-color-picker--bar-alpha-slider .vxe-color-picker--bar-alpha-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--hex-wrapper,.vxe-color-picker--rgb-wrapper{text-align:center;margin-top:.4em}.vxe-color-picker--hex-wrapper{display:flex;flex-direction:row;padding:0 1.8em}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:12em}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-title{padding:0 .6em}.vxe-color-picker--input-title{color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:5.4em;margin:0 .4em}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title{display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1.4em}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title>span{display:block;width:50px;margin:0 .4em}.vxe-color-picker--footer-wrapper{text-align:right;margin-top:.4em;padding:0 .4em .4em .4em}.vxe-color-picker,.vxe-color-picker--readonly{height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-color-picker--readonly.size--medium,.vxe-color-picker.size--medium{height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-color-picker--readonly.size--small,.vxe-color-picker.size--small{height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-color-picker--readonly.size--mini,.vxe-color-picker.size--mini{height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}.vxe-color-picker,.vxe-color-picker--panel,.vxe-color-picker--readonly{font-size:var(--vxe-ui-font-size-default)}.vxe-color-picker--panel.size--medium,.vxe-color-picker--readonly.size--medium,.vxe-color-picker.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-color-picker--panel.size--small,.vxe-color-picker--readonly.size--small,.vxe-color-picker.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-color-picker--panel.size--mini,.vxe-color-picker--readonly.size--mini,.vxe-color-picker.size--mini{font-size:var(--vxe-ui-font-size-mini)}

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

@@ -2,7 +2,7 @@ import { defineComponent, h, Teleport, ref, computed, provide, reactive, inject,
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, commands, createEvent, globalEvents, useSize, renderEmptyElement } from '../../ui';
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
-import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom';
+import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
 import { parseDateObj, getDateByCode } from '../../date-panel/src/util';
 import { errLog } from '../../ui/src/log';
@@ -461,79 +461,24 @@ export default defineComponent({
             }
         };
         const updatePlacement = () => {
-            return nextTick().then(() => {
-                const { placement } = props;
-                const { panelIndex } = reactData;
-                const targetElem = refInputTarget.value;
-                const panelElem = refInputPanel.value;
-                const btnTransfer = computeBtnTransfer.value;
-                if (targetElem && panelElem) {
-                    const targetHeight = targetElem.offsetHeight;
-                    const targetWidth = targetElem.offsetWidth;
-                    const panelHeight = panelElem.offsetHeight;
-                    const panelWidth = panelElem.offsetWidth;
-                    const marginSize = 5;
-                    const panelStyle = {
-                        zIndex: panelIndex
-                    };
-                    const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(targetElem);
-                    let panelPlacement = 'bottom';
-                    if (btnTransfer) {
-                        let left = boundingLeft;
-                        let top = boundingTop + targetHeight;
-                        if (placement === 'top') {
-                            panelPlacement = 'top';
-                            top = boundingTop - panelHeight;
-                        }
-                        else if (!placement) {
-                            // 如果下面不够放，则向上
-                            if (top + panelHeight + marginSize > visibleHeight) {
-                                panelPlacement = 'top';
-                                top = boundingTop - panelHeight;
-                            }
-                            // 如果上面不够放，则向下（优先）
-                            if (top < marginSize) {
-                                panelPlacement = 'bottom';
-                                top = boundingTop + targetHeight;
-                            }
-                        }
-                        // 如果溢出右边
-                        if (left + panelWidth + marginSize > visibleWidth) {
-                            left -= left + panelWidth + marginSize - visibleWidth;
-                        }
-                        // 如果溢出左边
-                        if (left < marginSize) {
-                            left = marginSize;
-                        }
-                        Object.assign(panelStyle, {
-                            left: `${left}px`,
-                            top: `${top}px`,
-                            minWidth: `${targetWidth}px`
-                        });
-                    }
-                    else {
-                        if (placement === 'top') {
-                            panelPlacement = 'top';
-                            panelStyle.bottom = `${targetHeight}px`;
-                        }
-                        else if (!placement) {
-                            // 如果下面不够放，则向上
-                            panelStyle.top = `${targetHeight}px`;
-                            if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                                // 如果上面不够放，则向下（优先）
-                                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                                    panelPlacement = 'top';
-                                    panelStyle.top = '';
-                                    panelStyle.bottom = `${targetHeight}px`;
-                                }
-                            }
-                        }
-                    }
-                    reactData.panelStyle = panelStyle;
-                    reactData.panelPlacement = panelPlacement;
-                    return nextTick();
-                }
-            });
+            const { placement } = props;
+            const { panelIndex } = reactData;
+            const targetElem = refInputTarget.value;
+            const panelElem = refInputPanel.value;
+            const btnTransfer = computeBtnTransfer.value;
+            const handleStyle = () => {
+                const ppObj = updatePanelPlacement(targetElem, panelElem, {
+                    placement,
+                    teleportTo: btnTransfer
+                });
+                const panelStyle = Object.assign(ppObj.style, {
+                    zIndex: panelIndex
+                });
+                reactData.panelStyle = panelStyle;
+                reactData.panelPlacement = ppObj.placement;
+            };
+            handleStyle();
+            return nextTick().then(handleStyle);
         };
         const showPanel = () => {
             const { visiblePanel } = reactData;

package/es/date-picker/style.css

@@ -110,9 +110,11 @@
   left: 0;
   padding: 4px 0;
   color: var(--vxe-ui-font-color);
-  font-size: var(--vxe-ui-font-size-default);
   text-align: left;
 }
+.vxe-date-picker--panel:not(.is--transfer) {
+  min-width: 100%;
+}
 .vxe-date-picker--panel.is--transfer {
   position: fixed;
 }
@@ -123,7 +125,6 @@
   transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   transform-origin: center top;
   backface-visibility: hidden;
-  transform-style: preserve-3d;
 }
 .vxe-date-picker--panel.ani--leave[placement=top] {
   transform-origin: center bottom;

package/es/date-picker/style.min.css

@@ -1 +1 @@
-.vxe-date-picker--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-date-picker--wrapper{flex-grow:1;overflow:hidden}.vxe-date-picker--inner{display:block;width:100%;height:100%;outline:0;margin:0;font-size:inherit;font-family:inherit;line-height:inherit;padding:0 .5em;color:var(--vxe-ui-font-color);border:0;border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);box-shadow:none}.vxe-date-picker--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-date-picker--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-date-picker--inner::-webkit-autofill{background-color:var(--vxe-ui-layout-background-color)}.vxe-date-picker--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-date-picker.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-date-picker.is--disabled .vxe-date-picker--clear-icon,.vxe-date-picker.is--disabled .vxe-date-picker--control-icon,.vxe-date-picker.is--disabled .vxe-date-picker--prefix,.vxe-date-picker.is--disabled .vxe-date-picker--suffix{cursor:not-allowed}.vxe-date-picker.is--disabled .vxe-date-picker--prefix,.vxe-date-picker.is--disabled .vxe-date-picker--suffix{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-date-picker{display:inline-flex;flex-direction:row;position:relative;border-radius:var(--vxe-ui-base-border-radius);width:180px;border:1px solid var(--vxe-ui-input-border-color)}.vxe-date-picker.is--active{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-date-picker.show--clear:hover .vxe-date-picker--clear-icon{display:block}.vxe-date-picker--prefix,.vxe-date-picker--suffix{display:flex;flex-direction:row;align-items:center;flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-date-picker--prefix-icon{padding-left:.5em}.vxe-date-picker--clear-icon,.vxe-date-picker--control-icon,.vxe-date-picker--suffix-icon{padding-right:.5em}.vxe-date-picker--clear-icon,.vxe-date-picker--control-icon{height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-date-picker--clear-icon{display:none}.vxe-date-picker--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-date-picker--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-date-picker--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);font-size:var(--vxe-ui-font-size-default);text-align:left}.vxe-date-picker--panel.is--transfer{position:fixed}.vxe-date-picker--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-date-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-date-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-date-picker--panel.ani--enter>div::after{display:none}.vxe-date-picker--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-date-picker--panel{pointer-events:none}.vxe-date-picker--panel.show--right .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--right .vxe-date-picker--layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-wrapper{border-top-right-radius:0}.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-wrapper,.vxe-date-picker--panel.show--right .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--right .vxe-date-picker--layout-wrapper{border-bottom-right-radius:0}.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-wrapper,.vxe-date-picker--panel.show--left .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--left .vxe-date-picker--layout-wrapper{border-bottom-left-radius:0}.vxe-date-picker--panel.show--left .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--left .vxe-date-picker--layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-wrapper{border-top-left-radius:0}.vxe-date-picker--panel.show--top .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-wrapper{border-top-width:1px}.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-wrapper{border-bottom-width:1px}.vxe-date-picker--panel.show--left .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--left .vxe-date-picker--layout-wrapper{border-left-width:1px}.vxe-date-picker--panel.show--right .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--right .vxe-date-picker--layout-wrapper{border-right-width:1px}.vxe-date-picker--layout-all-wrapper{display:inline-flex;flex-direction:column;pointer-events:auto;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:0 0 6px 2px rgba(0,0,0,.1);border-radius:var(--vxe-ui-base-border-radius)}.vxe-date-picker--layout-body-layout-wrapper{display:flex;flex-direction:row;white-space:nowrap}.vxe-date-picker--layout-body-content-wrapper,.vxe-date-picker--layout-body-layout-wrapper,.vxe-date-picker--layout-body-wrapper{flex-grow:1}.vxe-date-picker--layout-body-wrapper{display:flex;flex-direction:row}.vxe-date-picker--layout-bottom-wrapper,.vxe-date-picker--layout-footer-wrapper,.vxe-date-picker--layout-header-wrapper,.vxe-date-picker--layout-left-wrapper,.vxe-date-picker--layout-right-wrapper,.vxe-date-picker--layout-top-wrapper{flex-shrink:0}.vxe-date-picker--layout-top-wrapper{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-date-picker--layout-bottom-wrapper{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-date-picker--layout-left-wrapper{border-right:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-date-picker--layout-right-wrapper{border-left:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-date-picker--layout-footer-wrapper{display:flex;flex-direction:row}.vxe-date-picker--layout-footer-custom{flex-grow:1}.vxe-date-picker--layout-footer-btns{flex-shrink:0;padding:0 .8em .8em .8em;display:flex;align-items:center}.vxe-date-picker{font-size:var(--vxe-ui-font-size-default);height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-date-picker.size--medium{font-size:var(--vxe-ui-font-size-medium);height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-date-picker.size--small{font-size:var(--vxe-ui-font-size-small);height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-date-picker.size--mini{font-size:var(--vxe-ui-font-size-mini);height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}
+.vxe-date-picker--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-date-picker--wrapper{flex-grow:1;overflow:hidden}.vxe-date-picker--inner{display:block;width:100%;height:100%;outline:0;margin:0;font-size:inherit;font-family:inherit;line-height:inherit;padding:0 .5em;color:var(--vxe-ui-font-color);border:0;border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);box-shadow:none}.vxe-date-picker--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-date-picker--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-date-picker--inner::-webkit-autofill{background-color:var(--vxe-ui-layout-background-color)}.vxe-date-picker--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-date-picker.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-date-picker.is--disabled .vxe-date-picker--clear-icon,.vxe-date-picker.is--disabled .vxe-date-picker--control-icon,.vxe-date-picker.is--disabled .vxe-date-picker--prefix,.vxe-date-picker.is--disabled .vxe-date-picker--suffix{cursor:not-allowed}.vxe-date-picker.is--disabled .vxe-date-picker--prefix,.vxe-date-picker.is--disabled .vxe-date-picker--suffix{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-date-picker{display:inline-flex;flex-direction:row;position:relative;border-radius:var(--vxe-ui-base-border-radius);width:180px;border:1px solid var(--vxe-ui-input-border-color)}.vxe-date-picker.is--active{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-date-picker.show--clear:hover .vxe-date-picker--clear-icon{display:block}.vxe-date-picker--prefix,.vxe-date-picker--suffix{display:flex;flex-direction:row;align-items:center;flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-date-picker--prefix-icon{padding-left:.5em}.vxe-date-picker--clear-icon,.vxe-date-picker--control-icon,.vxe-date-picker--suffix-icon{padding-right:.5em}.vxe-date-picker--clear-icon,.vxe-date-picker--control-icon{height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-date-picker--clear-icon{display:none}.vxe-date-picker--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-date-picker--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-date-picker--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-date-picker--panel:not(.is--transfer){min-width:100%}.vxe-date-picker--panel.is--transfer{position:fixed}.vxe-date-picker--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}.vxe-date-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-date-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-date-picker--panel.ani--enter>div::after{display:none}.vxe-date-picker--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-date-picker--panel{pointer-events:none}.vxe-date-picker--panel.show--right .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--right .vxe-date-picker--layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-wrapper{border-top-right-radius:0}.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-wrapper,.vxe-date-picker--panel.show--right .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--right .vxe-date-picker--layout-wrapper{border-bottom-right-radius:0}.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-wrapper,.vxe-date-picker--panel.show--left .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--left .vxe-date-picker--layout-wrapper{border-bottom-left-radius:0}.vxe-date-picker--panel.show--left .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--left .vxe-date-picker--layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-wrapper{border-top-left-radius:0}.vxe-date-picker--panel.show--top .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--top .vxe-date-picker--layout-wrapper{border-top-width:1px}.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--bottom .vxe-date-picker--layout-wrapper{border-bottom-width:1px}.vxe-date-picker--panel.show--left .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--left .vxe-date-picker--layout-wrapper{border-left-width:1px}.vxe-date-picker--panel.show--right .vxe-date-picker--layout-datetime-layout-wrapper,.vxe-date-picker--panel.show--right .vxe-date-picker--layout-wrapper{border-right-width:1px}.vxe-date-picker--layout-all-wrapper{display:inline-flex;flex-direction:column;pointer-events:auto;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:0 0 6px 2px rgba(0,0,0,.1);border-radius:var(--vxe-ui-base-border-radius)}.vxe-date-picker--layout-body-layout-wrapper{display:flex;flex-direction:row;white-space:nowrap}.vxe-date-picker--layout-body-content-wrapper,.vxe-date-picker--layout-body-layout-wrapper,.vxe-date-picker--layout-body-wrapper{flex-grow:1}.vxe-date-picker--layout-body-wrapper{display:flex;flex-direction:row}.vxe-date-picker--layout-bottom-wrapper,.vxe-date-picker--layout-footer-wrapper,.vxe-date-picker--layout-header-wrapper,.vxe-date-picker--layout-left-wrapper,.vxe-date-picker--layout-right-wrapper,.vxe-date-picker--layout-top-wrapper{flex-shrink:0}.vxe-date-picker--layout-top-wrapper{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-date-picker--layout-bottom-wrapper{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-date-picker--layout-left-wrapper{border-right:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-date-picker--layout-right-wrapper{border-left:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-date-picker--layout-footer-wrapper{display:flex;flex-direction:row}.vxe-date-picker--layout-footer-custom{flex-grow:1}.vxe-date-picker--layout-footer-btns{flex-shrink:0;padding:0 .8em .8em .8em;display:flex;align-items:center}.vxe-date-picker{font-size:var(--vxe-ui-font-size-default);height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-date-picker.size--medium{font-size:var(--vxe-ui-font-size-medium);height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-date-picker.size--small{font-size:var(--vxe-ui-font-size-small);height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-date-picker.size--mini{font-size:var(--vxe-ui-font-size-mini);height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}