vxe-pc-ui 3.17.27 → 3.17.29

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

@@ -1108,13 +1108,19 @@ export default {
             if (formReadonly) {
                 return h('div', {
                     ref: 'refElem',
-                    class: ['vxe-color-picker--readonly', className]
+                    class: ['vxe-color-picker--readonly', className, {
+                            [`size--${vSize}`]: vSize
+                        }]
                 }, [
                     h('div', {
-                        class: 'vxe-color-picker--readonly-color',
-                        style: {
-                            backgroundColor: modelValue
-                        }
+                        class: ['vxe-color-picker--readonly-color', {
+                                'is--empty': !modelValue
+                            }],
+                        style: modelValue
+                            ? {
+                                backgroundColor: modelValue
+                            }
+                            : undefined
                     })
                 ]);
             }

package/es/color-picker/style.css

@@ -1,3 +1,40 @@
+.vxe-color-picker,
+.vxe-color-picker--readonly,
+.vxe-color-picker--panel {
+  --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-default);
+}
+.vxe-color-picker.size--xlarge,
+.vxe-color-picker--readonly.size--xlarge,
+.vxe-color-picker--panel.size--xlarge {
+  --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-xlarge);
+  --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-xlarge);
+}
+.vxe-color-picker.size--large,
+.vxe-color-picker--readonly.size--large,
+.vxe-color-picker--panel.size--large {
+  --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-large);
+  --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-large);
+}
+.vxe-color-picker.size--medium,
+.vxe-color-picker--readonly.size--medium,
+.vxe-color-picker--panel.size--medium {
+  --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-medium);
+  --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-medium);
+}
+.vxe-color-picker.size--small,
+.vxe-color-picker--readonly.size--small,
+.vxe-color-picker--panel.size--small {
+  --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-small);
+  --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-small);
+}
+.vxe-color-picker.size--mini,
+.vxe-color-picker--readonly.size--mini,
+.vxe-color-picker--panel.size--mini {
+  --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-mini);
+  --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-mini);
+}
+
 .vxe-color-picker.is--selected .vxe-color-picker--inner-color {
   color: #fff;
 }
@@ -18,8 +55,10 @@
 
 .vxe-color-picker--inner,
 .vxe-color-picker--preview-btn,
-.vxe-color-picker--bar-alpha-slider {
-  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);
+.vxe-color-picker--bar-alpha-slider,
+.vxe-color-picker--readonly-color.is--empty {
+  background-color: #ffffff;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);
 }
 
 .vxe-color-picker--inner,
@@ -444,42 +483,12 @@
 
 .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.size--medium,
-.vxe-color-picker--readonly.size--medium {
-  height: var(--vxe-ui-input-height-medium);
-  line-height: var(--vxe-ui-input-height-medium);
-}
-.vxe-color-picker.size--small,
-.vxe-color-picker--readonly.size--small {
-  height: var(--vxe-ui-input-height-small);
-  line-height: var(--vxe-ui-input-height-small);
-}
-.vxe-color-picker.size--mini,
-.vxe-color-picker--readonly.size--mini {
-  height: var(--vxe-ui-input-height-mini);
-  line-height: var(--vxe-ui-input-height-mini);
+  height: var(--vxe-ui-color-picker-current-height);
+  line-height: var(--vxe-ui-color-picker-current-height);
 }
 
 .vxe-color-picker,
 .vxe-color-picker--readonly,
 .vxe-color-picker--panel {
-  font-size: var(--vxe-ui-font-size-default);
-}
-.vxe-color-picker.size--medium,
-.vxe-color-picker--readonly.size--medium,
-.vxe-color-picker--panel.size--medium {
-  font-size: var(--vxe-ui-font-size-medium);
-}
-.vxe-color-picker.size--small,
-.vxe-color-picker--readonly.size--small,
-.vxe-color-picker--panel.size--small {
-  font-size: var(--vxe-ui-font-size-small);
-}
-.vxe-color-picker.size--mini,
-.vxe-color-picker--readonly.size--mini,
-.vxe-color-picker--panel.size--mini {
-  font-size: var(--vxe-ui-font-size-mini);
+  font-size: var(--vxe-ui-color-picker-current-font-size);
 }

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--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;-ms-user-select:none;user-select:none}.vxe-color-picker--color-wrapper{position:relative;height:160px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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--custom-wrapper{display:flex;flex-direction:row;padding:0 .8em}.vxe-color-picker--type-switch{position:relative;flex-shrink:0;margin-top:.4em}.vxe-color-picker--type-icon{padding:.25em;color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--type-icon i{display:inline-block;transition:transform .2s ease-in-out}.vxe-color-picker--type-label{padding-left:.25em;line-height:2em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-color-picker--type-popup{position:absolute;display:none;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);padding:.25em 1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-color-picker--type-popup.is--visible{display:block}.vxe-color-picker--type-item{line-height:1.6em;cursor:pointer}.vxe-color-picker--type-item:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-color-picker--hex-wrapper,.vxe-color-picker--rgb-wrapper{flex-grow:1;text-align:center;margin-top:.4em}.vxe-color-picker--input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:right}.vxe-color-picker--input-title{display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1.4em;color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--hex-wrapper{display:flex;flex-direction:column}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:98%}.vxe-color-picker--rgb-wrapper{display:flex;flex-direction:column;overflow:hidden}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper>.vxe-number-input{width:23%;margin-left:2%}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper>.vxe-number-input .vxe-number-input--input{padding:0 0 0 .15em}.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,.vxe-color-picker--panel,.vxe-color-picker--readonly{--vxe-ui-color-picker-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-color-picker-current-height:var(--vxe-ui-input-height-default)}.vxe-color-picker--panel.size--xlarge,.vxe-color-picker--readonly.size--xlarge,.vxe-color-picker.size--xlarge{--vxe-ui-color-picker-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-color-picker-current-height:var(--vxe-ui-input-height-xlarge)}.vxe-color-picker--panel.size--large,.vxe-color-picker--readonly.size--large,.vxe-color-picker.size--large{--vxe-ui-color-picker-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-color-picker-current-height:var(--vxe-ui-input-height-large)}.vxe-color-picker--panel.size--medium,.vxe-color-picker--readonly.size--medium,.vxe-color-picker.size--medium{--vxe-ui-color-picker-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-color-picker-current-height:var(--vxe-ui-input-height-medium)}.vxe-color-picker--panel.size--small,.vxe-color-picker--readonly.size--small,.vxe-color-picker.size--small{--vxe-ui-color-picker-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-color-picker-current-height:var(--vxe-ui-input-height-small)}.vxe-color-picker--panel.size--mini,.vxe-color-picker--readonly.size--mini,.vxe-color-picker.size--mini{--vxe-ui-color-picker-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-color-picker-current-height:var(--vxe-ui-input-height-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,.vxe-color-picker--readonly-color.is--empty{background-color:#fff;background-image: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;-ms-user-select:none;user-select:none}.vxe-color-picker--color-wrapper{position:relative;height:160px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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--custom-wrapper{display:flex;flex-direction:row;padding:0 .8em}.vxe-color-picker--type-switch{position:relative;flex-shrink:0;margin-top:.4em}.vxe-color-picker--type-icon{padding:.25em;color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--type-icon i{display:inline-block;transition:transform .2s ease-in-out}.vxe-color-picker--type-label{padding-left:.25em;line-height:2em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-color-picker--type-popup{position:absolute;display:none;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);padding:.25em 1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-color-picker--type-popup.is--visible{display:block}.vxe-color-picker--type-item{line-height:1.6em;cursor:pointer}.vxe-color-picker--type-item:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-color-picker--hex-wrapper,.vxe-color-picker--rgb-wrapper{flex-grow:1;text-align:center;margin-top:.4em}.vxe-color-picker--input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:right}.vxe-color-picker--input-title{display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1.4em;color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--hex-wrapper{display:flex;flex-direction:column}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:98%}.vxe-color-picker--rgb-wrapper{display:flex;flex-direction:column;overflow:hidden}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper>.vxe-number-input{width:23%;margin-left:2%}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper>.vxe-number-input .vxe-number-input--input{padding:0 0 0 .15em}.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-color-picker-current-height);line-height:var(--vxe-ui-color-picker-current-height)}.vxe-color-picker,.vxe-color-picker--panel,.vxe-color-picker--readonly{font-size:var(--vxe-ui-color-picker-current-font-size)}

package/es/drawer/index.js

@@ -1,6 +1,7 @@
 import { VxeUI } from '@vxe-ui/core';
 import XEUtils from 'xe-utils';
-import VxeDrawerComponent, { allActiveDrawers } from './src/drawer';
+import VxeDrawerComponent from './src/drawer';
+import { allActiveDrawers } from './src/store';
 import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics';
 function handleDrawer(options) {
     // 使用动态组件渲染动态弹框

package/es/drawer/src/drawer.js

@@ -2,11 +2,11 @@ import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { globalMixins, getIcon, getConfig, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, renderEmptyElement } from '../../ui';
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils';
-import { getDomNode, getPopupAppendElement, toCssUnit } from '../../ui/src/dom';
+import { getPopupAppendElement, getPopupWrapperElement, toCssUnit } from '../../ui/src/dom';
+import { allActiveDrawers } from './store';
 import { getSlotVNs } from '../../ui/src/vn';
 import VxeButtonComponent from '../../button';
 import VxeLoadingComponent from '../../loading';
-export const allActiveDrawers = [];
 export default {
     name: 'VxeDrawer',
     mixins: [
@@ -93,12 +93,34 @@ export default {
             default: () => getConfig().drawer.showTitleOverflow
         },
         preload: Boolean,
-        width: [Number, String],
-        height: [Number, String],
+        width: {
+            type: [Number, String],
+            default: () => getConfig().drawer.width
+        },
+        height: {
+            type: [Number, String],
+            default: () => getConfig().drawer.height
+        },
+        minWidth: {
+            type: [Number, String],
+            default: () => getConfig().drawer.minWidth
+        },
+        minHeight: {
+            type: [Number, String],
+            default: () => getConfig().drawer.minHeight
+        },
         resize: {
             type: Boolean,
             default: () => getConfig().drawer.resize
         },
+        border: {
+            type: Boolean,
+            default: () => getConfig().drawer.border
+        },
+        showTitleBackground: {
+            type: Boolean,
+            default: () => getConfig().drawer.showTitleBackground
+        },
         zIndex: Number,
         transfer: {
             type: Boolean,
@@ -108,6 +130,10 @@ export default {
             type: [String, Function],
             default: () => getConfig().drawer.appendTo
         },
+        isWithinAppendTo: {
+            type: Boolean,
+            default: () => getConfig().drawer.isWithinAppendTo
+        },
         padding: {
             type: Boolean,
             default: () => getConfig().drawer.padding
@@ -153,7 +179,8 @@ export default {
         };
         return {
             xID: XEUtils.uniqueId(),
-            reactData
+            reactData,
+            reFlag: 0
         };
     },
     computed: Object.assign(Object.assign({}, {}), { computeBtnTransfer() {
@@ -236,11 +263,15 @@ export default {
         recalculate() {
             const $xeDrawer = this;
             const props = $xeDrawer;
-            const { width, height } = props;
+            const { position, width, height } = props;
             const boxElem = $xeDrawer.getBox();
             if (boxElem) {
-                boxElem.style.width = toCssUnit(width);
-                boxElem.style.height = toCssUnit(height);
+                if (position === 'top' || position === 'bottom') {
+                    boxElem.style.height = toCssUnit(height);
+                }
+                else {
+                    boxElem.style.width = toCssUnit(width);
+                }
             }
             return $xeDrawer.$nextTick();
         },
@@ -273,6 +304,10 @@ export default {
             if (visible) {
                 Promise.resolve(beforeHideMethod ? beforeHideMethod(params) : null).then((rest) => {
                     if (!XEUtils.isError(rest)) {
+                        const el = $xeDrawer.$refs.refElem;
+                        if (el) {
+                            el.setAttribute('data-effect', 'y');
+                        }
                         reactData.contentVisible = false;
                         $xeDrawer.removeActiveQueue();
                         $xeDrawer.dispatchEvent('before-hide', params, null);
@@ -281,6 +316,12 @@ export default {
                             $xeDrawer.emitModel(false);
                             $xeDrawer.dispatchEvent('hide', params, null);
                         }, 200);
+                        setTimeout(() => {
+                            const el = $xeDrawer.$refs.refElem;
+                            if (el) {
+                                el.removeAttribute('data-effect');
+                            }
+                        }, 350);
                     }
                 }).catch(e => e);
             }
@@ -331,6 +372,12 @@ export default {
                 reactData.contentVisible = false;
                 $xeDrawer.updateZindex();
                 allActiveDrawers.push($xeDrawer);
+                $xeDrawer.$nextTick(() => {
+                    const el = $xeDrawer.$refs.refElem;
+                    if (el) {
+                        el.setAttribute('data-effect', 'y');
+                    }
+                });
                 setTimeout(() => {
                     $xeDrawer.recalculate();
                     reactData.contentVisible = true;
@@ -349,6 +396,12 @@ export default {
                         $xeDrawer.dispatchEvent('show', params, null);
                     });
                 }, 10);
+                setTimeout(() => {
+                    const el = $xeDrawer.$refs.refElem;
+                    if (el) {
+                        el.removeAttribute('data-effect');
+                    }
+                }, 350);
             }
             return $xeDrawer.$nextTick();
         },
@@ -387,18 +440,26 @@ export default {
             }
         },
         dragEvent(evnt) {
-            const $xeModal = this;
-            const reactData = $xeModal.reactData;
+            const $xeDrawer = this;
+            const props = $xeDrawer;
+            const reactData = $xeDrawer.reactData;
             evnt.preventDefault();
-            const { visibleHeight, visibleWidth } = getDomNode();
+            const { isWithinAppendTo } = props;
+            const el = $xeDrawer.$refs.refElem;
+            const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
+            if (!parentWrapperEl) {
+                return;
+            }
+            const visibleWidth = parentWrapperEl.clientWidth;
+            const visibleHeight = parentWrapperEl.clientHeight;
             const marginSize = 0;
             const targetElem = evnt.target;
             const type = targetElem.getAttribute('type');
-            const minWidth = 0;
-            const minHeight = 0;
+            const minWidth = XEUtils.toNumber(props.minWidth);
+            const minHeight = XEUtils.toNumber(props.minHeight);
             const maxWidth = visibleWidth;
             const maxHeight = visibleHeight;
-            const boxElem = $xeModal.getBox();
+            const boxElem = $xeDrawer.getBox();
             const clientWidth = boxElem.clientWidth;
             const clientHeight = boxElem.clientHeight;
             const disX = evnt.clientX;
@@ -451,7 +512,7 @@ export default {
                         break;
                 }
                 boxElem.className = boxElem.className.replace(/\s?is--drag/, '') + ' is--drag';
-                $xeModal.dispatchEvent('resize', params, evnt);
+                $xeDrawer.dispatchEvent('resize', params, evnt);
                 reactData.resizeFlag++;
             };
             document.onmouseup = () => {
@@ -625,16 +686,18 @@ export default {
             const props = $xeDrawer;
             const slots = $xeDrawer.$scopedSlots;
             const reactData = $xeDrawer.reactData;
-            const { slots: propSlots = {}, className, position, loading, lockScroll, padding, lockView, mask, resize, destroyOnClose } = props;
+            const { border, showTitleBackground, slots: propSlots = {}, className, position, loading, lockScroll, padding, lockView, mask, resize, destroyOnClose, isWithinAppendTo } = props;
             const { initialized, contentVisible, visible } = reactData;
             const asideSlot = slots.aside || propSlots.aside;
             const vSize = $xeDrawer.computeSize;
             const dragType = $xeDrawer.computeDragType;
             return h('div', {
                 ref: 'refElem',
-                class: ['vxe-drawer--wrapper', `pos--${position}`, className || '', {
+                class: ['vxe-drawer--wrapper', `pos--${position}`, isWithinAppendTo ? 'ctx--within' : 'ctx--free', className || '', {
                         [`size--${vSize}`]: vSize,
                         'is--padding': padding,
+                        'is--border': border,
+                        'is--title-bg': showTitleBackground,
                         'lock--scroll': lockScroll,
                         'lock--view': lockView,
                         'is--mask': mask,
@@ -694,9 +757,17 @@ export default {
     watch: {
         width() {
             const $xeDrawer = this;
-            $xeDrawer.recalculate();
+            $xeDrawer.reFlag++;
         },
         height() {
+            const $xeDrawer = this;
+            $xeDrawer.reFlag++;
+        },
+        position() {
+            const $xeDrawer = this;
+            $xeDrawer.reFlag++;
+        },
+        reFlag() {
             const $xeDrawer = this;
             $xeDrawer.recalculate();
         },

package/es/drawer/src/store.js

@@ -0,0 +1 @@
+export const allActiveDrawers = [];

package/es/drawer/style.css

@@ -1,12 +1,29 @@
+.vxe-drawer--wrapper {
+  --vxe-ui-drawer-current-font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-drawer--wrapper.size--xlarge {
+  --vxe-ui-drawer-current-font-size: var(--vxe-ui-font-size-xlarge);
+}
+.vxe-drawer--wrapper.size--large {
+  --vxe-ui-drawer-current-font-size: var(--vxe-ui-font-size-large);
+}
+.vxe-drawer--wrapper.size--medium {
+  --vxe-ui-drawer-current-font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-drawer--wrapper.size--small {
+  --vxe-ui-drawer-current-font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-drawer--wrapper.size--mini {
+  --vxe-ui-drawer-current-font-size: var(--vxe-ui-font-size-mini);
+}
+
 .vxe-drawer--wrapper {
   display: none;
-  position: fixed;
   top: 0;
   left: 0;
   line-height: 1.5;
-  width: calc(100% + 18px);
-  height: calc(100% + 18px);
   color: var(--vxe-ui-font-color);
+  font-size: var(--vxe-ui-drawer-current-font-size);
   font-family: var(--vxe-ui-font-family);
   outline: 0;
 }
@@ -42,7 +59,6 @@
 }
 .vxe-drawer--wrapper.lock--view:before, .vxe-drawer--wrapper.is--mask:before {
   content: "";
-  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
@@ -89,12 +105,33 @@
   padding-right: 0.6em;
 }
 
+.vxe-drawer--wrapper.ctx--free {
+  position: fixed;
+  width: calc(100% + 18px);
+  height: calc(100% + 18px);
+}
+.vxe-drawer--wrapper.ctx--free.lock--view:before, .vxe-drawer--wrapper.ctx--free.is--mask:before {
+  position: fixed;
+}
+.vxe-drawer--wrapper.ctx--free .vxe-drawer--box {
+  position: fixed;
+}
+.vxe-drawer--wrapper.ctx--within {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.vxe-drawer--wrapper.ctx--within.lock--view:before, .vxe-drawer--wrapper.ctx--within.is--mask:before {
+  position: absolute;
+}
+.vxe-drawer--wrapper.ctx--within .vxe-drawer--box {
+  position: absolute;
+}
+
 .vxe-drawer--box {
   display: flex;
   flex-direction: row;
-  position: fixed;
   background-color: var(--vxe-ui-layout-background-color);
-  border: 1px solid var(--vxe-ui-base-popup-border-color);
   text-align: left;
   pointer-events: auto;
   opacity: 0;
@@ -176,7 +213,6 @@
   flex-shrink: 0;
   font-size: 1.1em;
   font-weight: 700;
-  border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
 }
 .vxe-drawer--header.is--ellipsis .vxe-drawer--header-title {
   overflow: hidden;
@@ -184,6 +220,16 @@
   white-space: nowrap;
 }
 
+.vxe-drawer--wrapper.is--title-bg .vxe-drawer--header {
+  background-color: var(--vxe-ui-drawer-header-background-color);
+}
+.vxe-drawer--wrapper.is--border .vxe-drawer--header {
+  border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+.vxe-drawer--wrapper.is--border .vxe-drawer--box {
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+
 .vxe-drawer--header-title {
   flex-grow: 1;
   padding: 0.6em 0 0.6em 1em;
@@ -237,10 +283,10 @@
   cursor: w-resize;
 }
 .vxe-drawer--resize .wl-resize {
-  left: -5px;
+  left: -4px;
 }
 .vxe-drawer--resize .wr-resize {
-  right: -5px;
+  right: -4px;
 }
 .vxe-drawer--resize .st-resize,
 .vxe-drawer--resize .sb-resize {
@@ -250,21 +296,12 @@
   cursor: s-resize;
 }
 .vxe-drawer--resize .st-resize {
-  top: -5px;
+  top: -4px;
 }
 .vxe-drawer--resize .sb-resize {
-  bottom: -5px;
+  bottom: -4px;
 }
 
-.vxe-drawer--wrapper {
-  font-size: var(--vxe-ui-font-size-default);
-}
-.vxe-drawer--wrapper.size--medium {
-  font-size: var(--vxe-ui-font-size-medium);
-}
-.vxe-drawer--wrapper.size--small {
-  font-size: var(--vxe-ui-font-size-small);
-}
-.vxe-drawer--wrapper.size--mini {
-  font-size: var(--vxe-ui-font-size-mini);
+.vxe-drawer--wrapper[data-effect] {
+  overflow: hidden;
 }

package/es/drawer/style.min.css

@@ -1 +1 @@
-.vxe-drawer--wrapper{display:none;position:fixed;top:0;left:0;line-height:1.5;width:calc(100% + 18px);height:calc(100% + 18px);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);outline:0}.vxe-drawer--wrapper.is--active{display:block}.vxe-drawer--wrapper.is--visible.is--mask:before{background-color:rgba(0,0,0,.5)}.vxe-drawer--wrapper.is--visible.pos--left .vxe-drawer--box{left:0}.vxe-drawer--wrapper.is--visible.pos--right .vxe-drawer--box{right:0}.vxe-drawer--wrapper.is--visible.pos--top .vxe-drawer--box{top:0}.vxe-drawer--wrapper.is--visible.pos--bottom .vxe-drawer--box{bottom:0}.vxe-drawer--wrapper.is--visible .vxe-drawer--box{opacity:1}.vxe-drawer--wrapper:not(.lock--view){pointer-events:none}.vxe-drawer--wrapper.lock--scroll{overflow:hidden}.vxe-drawer--wrapper:not(.lock--scroll){overflow:auto}.vxe-drawer--wrapper.is--mask:before,.vxe-drawer--wrapper.lock--view:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:auto}.vxe-drawer--wrapper.is--mask:before{background-color:rgba(0,0,0,0);transition:background-color .2s ease-in-out}.vxe-drawer--wrapper.pos--left .vxe-drawer--box{top:0;left:-100%;box-shadow:2px 0 10px 0 rgba(0,0,0,.2)}.vxe-drawer--wrapper.pos--right .vxe-drawer--box{top:0;right:-100%;box-shadow:-2px 0 10px 0 rgba(0,0,0,.2)}.vxe-drawer--wrapper.pos--top .vxe-drawer--box{top:-100%;left:0;box-shadow:0 2px 10px 0 rgba(0,0,0,.2)}.vxe-drawer--wrapper.pos--bottom .vxe-drawer--box{bottom:-100%;left:0;box-shadow:0 -2px 10px 0 rgba(0,0,0,.2)}.vxe-drawer--wrapper.pos--left .vxe-drawer--box,.vxe-drawer--wrapper.pos--right .vxe-drawer--box{width:30%;height:100%}.vxe-drawer--wrapper.pos--bottom .vxe-drawer--box,.vxe-drawer--wrapper.pos--top .vxe-drawer--box{width:100%;height:30%}.vxe-drawer--wrapper.is--padding .vxe-drawer--body-default{padding:.8em .6em}.vxe-drawer--wrapper.is--padding .vxe-drawer--body-default .vxe-drawer--status-wrapper{padding-right:.6em}.vxe-drawer--box{display:flex;flex-direction:row;position:fixed;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-base-popup-border-color);text-align:left;pointer-events:auto;opacity:0;transition:all .3s ease-in-out}.vxe-drawer--box.is--drag{cursor:move;transition:none}.vxe-drawer--box.is--drag .vxe-modal--body:after,.vxe-drawer--box.is--drag .vxe-modal--footer:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.vxe-drawer--box.is--drag .vxe-modal--body{overflow:hidden}.vxe-drawer--box.is--drag .vxe-modal--body .vxe-modal--content{overflow:hidden}.vxe-drawer--aside{flex-shrink:0;overflow:auto;outline:0}.vxe-drawer--container{display:flex;flex-direction:column;width:100%;height:100%;overflow:auto;outline:0}.vxe-drawer--content{flex-grow:1;white-space:pre-line}.vxe-drawer--body,.vxe-drawer--footer,.vxe-drawer--header{position:relative}.vxe-drawer--body{display:flex;flex-grow:1;overflow:auto;outline:0}.vxe-drawer--body .vxe-drawer--content{overflow:auto}.vxe-drawer--body-left,.vxe-drawer--body-right{flex-shrink:0;overflow:auto;outline:0}.vxe-drawer--body-default{display:flex;flex-grow:1;overflow:auto;outline:0}.vxe-drawer--header{display:flex;flex-direction:row;flex-shrink:0;font-size:1.1em;font-weight:700;border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-drawer--header.is--ellipsis .vxe-drawer--header-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-drawer--header-title{flex-grow:1;padding:.6em 0 .6em 1em}.vxe-drawer--header-right{display:flex;flex-direction:row;flex-shrink:0;padding:.6em 1em .6em 0}.vxe-drawer--footer-wrapper{display:flex;flex-direction:row}.vxe-drawer--footer-wrapper .vxe-drawer--footer-left{flex-grow:1;text-align:left}.vxe-drawer--footer-wrapper .vxe-drawer--footer-right{flex-shrink:0}.vxe-drawer--close-btn{cursor:pointer;margin-left:.6em}.vxe-drawer--close-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-drawer--footer{flex-shrink:0;text-align:right;padding:.4em 1em .8em 1em}.vxe-drawer--resize .sb-resize,.vxe-drawer--resize .st-resize,.vxe-drawer--resize .wl-resize,.vxe-drawer--resize .wr-resize{position:absolute;z-index:100}.vxe-drawer--resize .wl-resize,.vxe-drawer--resize .wr-resize{width:8px;height:100%;top:0;cursor:w-resize}.vxe-drawer--resize .wl-resize{left:-5px}.vxe-drawer--resize .wr-resize{right:-5px}.vxe-drawer--resize .sb-resize,.vxe-drawer--resize .st-resize{width:100%;height:8px;left:0;cursor:s-resize}.vxe-drawer--resize .st-resize{top:-5px}.vxe-drawer--resize .sb-resize{bottom:-5px}.vxe-drawer--wrapper{font-size:var(--vxe-ui-font-size-default)}.vxe-drawer--wrapper.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-drawer--wrapper.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-drawer--wrapper.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-drawer--wrapper{--vxe-ui-drawer-current-font-size:var(--vxe-ui-font-size-default)}.vxe-drawer--wrapper.size--xlarge{--vxe-ui-drawer-current-font-size:var(--vxe-ui-font-size-xlarge)}.vxe-drawer--wrapper.size--large{--vxe-ui-drawer-current-font-size:var(--vxe-ui-font-size-large)}.vxe-drawer--wrapper.size--medium{--vxe-ui-drawer-current-font-size:var(--vxe-ui-font-size-medium)}.vxe-drawer--wrapper.size--small{--vxe-ui-drawer-current-font-size:var(--vxe-ui-font-size-small)}.vxe-drawer--wrapper.size--mini{--vxe-ui-drawer-current-font-size:var(--vxe-ui-font-size-mini)}.vxe-drawer--wrapper{display:none;top:0;left:0;line-height:1.5;color:var(--vxe-ui-font-color);font-size:var(--vxe-ui-drawer-current-font-size);font-family:var(--vxe-ui-font-family);outline:0}.vxe-drawer--wrapper.is--active{display:block}.vxe-drawer--wrapper.is--visible.is--mask:before{background-color:rgba(0,0,0,.5)}.vxe-drawer--wrapper.is--visible.pos--left .vxe-drawer--box{left:0}.vxe-drawer--wrapper.is--visible.pos--right .vxe-drawer--box{right:0}.vxe-drawer--wrapper.is--visible.pos--top .vxe-drawer--box{top:0}.vxe-drawer--wrapper.is--visible.pos--bottom .vxe-drawer--box{bottom:0}.vxe-drawer--wrapper.is--visible .vxe-drawer--box{opacity:1}.vxe-drawer--wrapper:not(.lock--view){pointer-events:none}.vxe-drawer--wrapper.lock--scroll{overflow:hidden}.vxe-drawer--wrapper:not(.lock--scroll){overflow:auto}.vxe-drawer--wrapper.is--mask:before,.vxe-drawer--wrapper.lock--view:before{content:"";top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:auto}.vxe-drawer--wrapper.is--mask:before{background-color:rgba(0,0,0,0);transition:background-color .2s ease-in-out}.vxe-drawer--wrapper.pos--left .vxe-drawer--box{top:0;left:-100%;box-shadow:2px 0 10px 0 rgba(0,0,0,.2)}.vxe-drawer--wrapper.pos--right .vxe-drawer--box{top:0;right:-100%;box-shadow:-2px 0 10px 0 rgba(0,0,0,.2)}.vxe-drawer--wrapper.pos--top .vxe-drawer--box{top:-100%;left:0;box-shadow:0 2px 10px 0 rgba(0,0,0,.2)}.vxe-drawer--wrapper.pos--bottom .vxe-drawer--box{bottom:-100%;left:0;box-shadow:0 -2px 10px 0 rgba(0,0,0,.2)}.vxe-drawer--wrapper.pos--left .vxe-drawer--box,.vxe-drawer--wrapper.pos--right .vxe-drawer--box{width:30%;height:100%}.vxe-drawer--wrapper.pos--bottom .vxe-drawer--box,.vxe-drawer--wrapper.pos--top .vxe-drawer--box{width:100%;height:30%}.vxe-drawer--wrapper.is--padding .vxe-drawer--body-default{padding:.8em .6em}.vxe-drawer--wrapper.is--padding .vxe-drawer--body-default .vxe-drawer--status-wrapper{padding-right:.6em}.vxe-drawer--wrapper.ctx--free{position:fixed;width:calc(100% + 18px);height:calc(100% + 18px)}.vxe-drawer--wrapper.ctx--free.is--mask:before,.vxe-drawer--wrapper.ctx--free.lock--view:before{position:fixed}.vxe-drawer--wrapper.ctx--free .vxe-drawer--box{position:fixed}.vxe-drawer--wrapper.ctx--within{position:absolute;width:100%;height:100%}.vxe-drawer--wrapper.ctx--within.is--mask:before,.vxe-drawer--wrapper.ctx--within.lock--view:before{position:absolute}.vxe-drawer--wrapper.ctx--within .vxe-drawer--box{position:absolute}.vxe-drawer--box{display:flex;flex-direction:row;background-color:var(--vxe-ui-layout-background-color);text-align:left;pointer-events:auto;opacity:0;transition:all .3s ease-in-out}.vxe-drawer--box.is--drag{cursor:move;transition:none}.vxe-drawer--box.is--drag .vxe-modal--body:after,.vxe-drawer--box.is--drag .vxe-modal--footer:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.vxe-drawer--box.is--drag .vxe-modal--body{overflow:hidden}.vxe-drawer--box.is--drag .vxe-modal--body .vxe-modal--content{overflow:hidden}.vxe-drawer--aside{flex-shrink:0;overflow:auto;outline:0}.vxe-drawer--container{display:flex;flex-direction:column;width:100%;height:100%;overflow:auto;outline:0}.vxe-drawer--content{flex-grow:1;white-space:pre-line}.vxe-drawer--body,.vxe-drawer--footer,.vxe-drawer--header{position:relative}.vxe-drawer--body{display:flex;flex-grow:1;overflow:auto;outline:0}.vxe-drawer--body .vxe-drawer--content{overflow:auto}.vxe-drawer--body-left,.vxe-drawer--body-right{flex-shrink:0;overflow:auto;outline:0}.vxe-drawer--body-default{display:flex;flex-grow:1;overflow:auto;outline:0}.vxe-drawer--header{display:flex;flex-direction:row;flex-shrink:0;font-size:1.1em;font-weight:700}.vxe-drawer--header.is--ellipsis .vxe-drawer--header-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-drawer--wrapper.is--title-bg .vxe-drawer--header{background-color:var(--vxe-ui-drawer-header-background-color)}.vxe-drawer--wrapper.is--border .vxe-drawer--header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-drawer--wrapper.is--border .vxe-drawer--box{border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-drawer--header-title{flex-grow:1;padding:.6em 0 .6em 1em}.vxe-drawer--header-right{display:flex;flex-direction:row;flex-shrink:0;padding:.6em 1em .6em 0}.vxe-drawer--footer-wrapper{display:flex;flex-direction:row}.vxe-drawer--footer-wrapper .vxe-drawer--footer-left{flex-grow:1;text-align:left}.vxe-drawer--footer-wrapper .vxe-drawer--footer-right{flex-shrink:0}.vxe-drawer--close-btn{cursor:pointer;margin-left:.6em}.vxe-drawer--close-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-drawer--footer{flex-shrink:0;text-align:right;padding:.4em 1em .8em 1em}.vxe-drawer--resize .sb-resize,.vxe-drawer--resize .st-resize,.vxe-drawer--resize .wl-resize,.vxe-drawer--resize .wr-resize{position:absolute;z-index:100}.vxe-drawer--resize .wl-resize,.vxe-drawer--resize .wr-resize{width:8px;height:100%;top:0;cursor:w-resize}.vxe-drawer--resize .wl-resize{left:-4px}.vxe-drawer--resize .wr-resize{right:-4px}.vxe-drawer--resize .sb-resize,.vxe-drawer--resize .st-resize{width:100%;height:8px;left:0;cursor:s-resize}.vxe-drawer--resize .st-resize{top:-4px}.vxe-drawer--resize .sb-resize{bottom:-4px}.vxe-drawer--wrapper[data-effect]{overflow:hidden}