vxe-pc-ui 3.6.38 → 3.6.40

package/es/button/style.css

@@ -178,7 +178,6 @@
 }
 .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;
@@ -388,9 +387,6 @@
 .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);
 }
@@ -434,6 +430,24 @@
   min-width: var(--vxe-ui-font-size-mini);
 }
 
+.vxe-button.type--button {
+  height: var(--vxe-ui-button-height-default);
+}
+.vxe-button.type--button.size--medium {
+  height: var(--vxe-ui-button-height-medium);
+}
+.vxe-button.type--button.size--small {
+  height: var(--vxe-ui-button-height-small);
+}
+.vxe-button.type--button.size--mini {
+  height: var(--vxe-ui-button-height-mini);
+}
+
+.vxe-input--prefix-icon > .vxe-button.type--button,
+.vxe-input--suffix-icon > .vxe-button.type--button {
+  height: 100%;
+}
+
 .vxe-button--loading-icon,
 .vxe-button--icon {
   min-width: var(--vxe-ui-font-size-default);

package/es/button/style.min.css

@@ -1 +1 @@
-.vxe-button{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;position:relative;background-color:var(--vxe-ui-layout-background-color);outline:0;font-size:var(--vxe-ui-font-size-default);max-width:var(--vxe-ui-button-max-width);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border .2s ease-in-out}.vxe-button.align--left{justify-content:left}.vxe-button.align--center{justify-content:center}.vxe-button.align--right{justify-content:right}.vxe-button:not(.is--disabled){color:var(--vxe-ui-font-color);cursor:pointer}.vxe-button.is--loading{cursor:progress}.vxe-button.is--loading:before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35);pointer-events:none}.vxe-button.is--disabled{color:var(--vxe-ui-font-disabled-color)}.vxe-button.is--disabled:not(.is--loading){cursor:no-drop}.vxe-button.type--text{text-decoration:none;border:0;padding:.1em .5em;background-color:transparent;text-decoration:none}.vxe-button.type--text:not(.is--disabled):focus{color:var(--vxe-ui-font-darken-color)}.vxe-button.type--text:not(.is--disabled):hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-button.type--text:not(.is--disabled):active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-button.type--text.theme--primary{color:var(--vxe-ui-font-primary-color)}.vxe-button.type--text.theme--primary:not(.is--disabled):focus{color:var(--vxe-ui-font-primary-darken-color)}.vxe-button.type--text.theme--primary:not(.is--disabled):hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-button.type--text.theme--primary:not(.is--disabled):active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-button.type--text.theme--primary.is--disabled{color:var(--vxe-ui-font-primary-disabled-color)}.vxe-button.type--text.theme--success{color:var(--vxe-ui-status-success-color)}.vxe-button.type--text.theme--success:not(.is--disabled):focus{color:var(--vxe-ui-status-success-darken-color)}.vxe-button.type--text.theme--success:not(.is--disabled):hover{color:var(--vxe-ui-status-success-lighten-color)}.vxe-button.type--text.theme--success:not(.is--disabled):active{color:var(--vxe-ui-status-success-darken-color)}.vxe-button.type--text.theme--success.is--disabled{color:var(--vxe-ui-status-success-disabled-color)}.vxe-button.type--text.theme--info{color:var(--vxe-ui-status-info-color)}.vxe-button.type--text.theme--info:not(.is--disabled):focus{color:var(--vxe-ui-status-info-darken-color)}.vxe-button.type--text.theme--info:not(.is--disabled):hover{color:var(--vxe-ui-status-info-lighten-color)}.vxe-button.type--text.theme--info:not(.is--disabled):active{color:var(--vxe-ui-status-info-darken-color)}.vxe-button.type--text.theme--info.is--disabled{color:var(--vxe-ui-status-info-disabled-color)}.vxe-button.type--text.theme--warning{color:var(--vxe-ui-status-warning-color)}.vxe-button.type--text.theme--warning:not(.is--disabled):focus{color:var(--vxe-ui-status-warning-darken-color)}.vxe-button.type--text.theme--warning:not(.is--disabled):hover{color:var(--vxe-ui-status-warning-lighten-color)}.vxe-button.type--text.theme--warning:not(.is--disabled):active{color:var(--vxe-ui-status-warning-darken-color)}.vxe-button.type--text.theme--warning.is--disabled{color:var(--vxe-ui-status-warning-disabled-color)}.vxe-button.type--text.theme--danger{color:var(--vxe-ui-status-danger-color)}.vxe-button.type--text.theme--danger:not(.is--disabled):focus{color:var(--vxe-ui-status-danger-darken-color)}.vxe-button.type--text.theme--danger:not(.is--disabled):hover{color:var(--vxe-ui-status-danger-lighten-color)}.vxe-button.type--text.theme--danger:not(.is--disabled):active{color:var(--vxe-ui-status-danger-darken-color)}.vxe-button.type--text.theme--danger.is--disabled{color:var(--vxe-ui-status-danger-disabled-color)}.vxe-button.type--text.theme--error{color:var(--vxe-ui-status-error-color)}.vxe-button.type--text.theme--error:not(.is--disabled):focus{color:var(--vxe-ui-status-error-darken-color)}.vxe-button.type--text.theme--error:not(.is--disabled):hover{color:var(--vxe-ui-status-error-lighten-color)}.vxe-button.type--text.theme--error:not(.is--disabled):active{color:var(--vxe-ui-status-error-darken-color)}.vxe-button.type--text.theme--error.is--disabled{color:var(--vxe-ui-status-error-disabled-color)}.vxe-button.type--text.theme--perfect{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--text.theme--perfect:not(.is--disabled):focus{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--text.theme--perfect:not(.is--disabled):hover{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--text.theme--perfect:not(.is--disabled):active{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--text.theme--perfect.is--disabled{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--button{font-family:inherit;height:var(--vxe-ui-button-height-default);line-height:1;border:1px solid var(--vxe-ui-input-border-color);text-decoration:none}.vxe-button.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-default)}.vxe-button.type--button:not(.is--round){border-radius:var(--vxe-ui-base-border-radius)}.vxe-button.type--button.is--circle{padding:0 .5em;text-align:center;justify-content:center;min-width:var(--vxe-ui-button-height-default);border-radius:50%}.vxe-button.type--button:not(.is--circle){padding:0 1em}.vxe-button.type--button:not(.is--disabled):hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-button.type--button:not(.is--disabled):focus{border-color:var(--vxe-ui-font-primary-color)}.vxe-button.type--button:not(.is--disabled):active{color:var(--vxe-ui-font-primary-darken-color);border-color:var(--vxe-ui-font-primary-darken-color);background-color:var(--vxe-ui-layout-background-color)}.vxe-button.type--button.theme--primary{color:#fff}.vxe-button.type--button.theme--primary:not(.is--disabled){border-color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-color)}.vxe-button.type--button.theme--primary:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-font-primary-lighten-color);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-button.type--button.theme--primary:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-font-primary-darken-color);border-color:var(--vxe-ui-font-primary-darken-color)}.vxe-button.type--button.theme--primary.is--disabled{border-color:var(--vxe-ui-font-primary-disabled-color);background-color:var(--vxe-ui-font-primary-disabled-color)}.vxe-button.type--button.theme--primary.is--loading{border-color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-color)}.vxe-button.type--button.theme--success{color:#fff}.vxe-button.type--button.theme--success:not(.is--disabled){border-color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-color)}.vxe-button.type--button.theme--success:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-success-lighten-color);border-color:var(--vxe-ui-status-success-lighten-color)}.vxe-button.type--button.theme--success:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-success-darken-color);border-color:var(--vxe-ui-status-success-darken-color)}.vxe-button.type--button.theme--success.is--disabled{border-color:var(--vxe-ui-status-success-disabled-color);background-color:var(--vxe-ui-status-success-disabled-color)}.vxe-button.type--button.theme--success.is--loading{border-color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-color)}.vxe-button.type--button.theme--info{color:#fff}.vxe-button.type--button.theme--info:not(.is--disabled){border-color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-color)}.vxe-button.type--button.theme--info:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-info-lighten-color);border-color:var(--vxe-ui-status-info-lighten-color)}.vxe-button.type--button.theme--info:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-info-darken-color);border-color:var(--vxe-ui-status-info-darken-color)}.vxe-button.type--button.theme--info.is--disabled{border-color:var(--vxe-ui-status-info-disabled-color);background-color:var(--vxe-ui-status-info-disabled-color)}.vxe-button.type--button.theme--info.is--loading{border-color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-color)}.vxe-button.type--button.theme--warning{color:#fff}.vxe-button.type--button.theme--warning:not(.is--disabled){border-color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-color)}.vxe-button.type--button.theme--warning:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-warning-lighten-color);border-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-button.type--button.theme--warning:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-warning-darken-color);border-color:var(--vxe-ui-status-warning-darken-color)}.vxe-button.type--button.theme--warning.is--disabled{border-color:var(--vxe-ui-status-warning-disabled-color);background-color:var(--vxe-ui-status-warning-disabled-color)}.vxe-button.type--button.theme--warning.is--loading{border-color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-color)}.vxe-button.type--button.theme--danger{color:#fff}.vxe-button.type--button.theme--danger:not(.is--disabled){border-color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-color)}.vxe-button.type--button.theme--danger:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-danger-lighten-color);border-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-button.type--button.theme--danger:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-danger-darken-color);border-color:var(--vxe-ui-status-danger-darken-color)}.vxe-button.type--button.theme--danger.is--disabled{border-color:var(--vxe-ui-status-danger-disabled-color);background-color:var(--vxe-ui-status-danger-disabled-color)}.vxe-button.type--button.theme--danger.is--loading{border-color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-color)}.vxe-button.type--button.theme--error{color:#fff}.vxe-button.type--button.theme--error:not(.is--disabled){border-color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-color)}.vxe-button.type--button.theme--error:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-error-lighten-color);border-color:var(--vxe-ui-status-error-lighten-color)}.vxe-button.type--button.theme--error:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-error-darken-color);border-color:var(--vxe-ui-status-error-darken-color)}.vxe-button.type--button.theme--error.is--disabled{border-color:var(--vxe-ui-status-error-disabled-color);background-color:var(--vxe-ui-status-error-disabled-color)}.vxe-button.type--button.theme--error.is--loading{border-color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-color)}.vxe-button.type--button.theme--perfect{color:var(--vxe-ui-font-color)}.vxe-button.type--button.theme--perfect:not(.is--disabled){border-color:var(--vxe-ui-table-header-background-color);background-color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--button.theme--perfect:not(.is--disabled):hover{color:var(--vxe-ui-font-color);background-color:var(--vxe-ui-table-header-background-color);border-color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--button.theme--perfect:not(.is--disabled):active{color:var(--vxe-ui-font-color);background-color:var(--vxe-ui-table-header-background-color);border-color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--button.theme--perfect.is--disabled{border-color:var(--vxe-ui-table-header-background-color);background-color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--button.theme--perfect.is--loading{border-color:var(--vxe-ui-table-header-background-color);background-color:var(--vxe-ui-table-header-background-color)}.vxe-button.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-button.size--medium.type--button{height:var(--vxe-ui-button-height-medium)}.vxe-button.size--medium.type--button.is--circle{min-width:var(--vxe-ui-button-height-medium)}.vxe-button.size--medium.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-medium)}.vxe-button.size--medium .vxe-button--icon,.vxe-button.size--medium .vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-medium)}.vxe-button.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-button.size--small.type--button{height:var(--vxe-ui-button-height-small)}.vxe-button.size--small.type--button.is--circle{min-width:var(--vxe-ui-button-height-small)}.vxe-button.size--small.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-small)}.vxe-button.size--small .vxe-button--icon,.vxe-button.size--small .vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-small)}.vxe-button.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-button.size--mini.type--button{height:var(--vxe-ui-button-height-mini)}.vxe-button.size--mini.type--button.is--circle{min-width:var(--vxe-ui-button-height-mini)}.vxe-button.size--mini.type--button.is--round{border-radius:var(--vxe-ui-button-round-border-radius-mini)}.vxe-button.size--mini .vxe-button--icon,.vxe-button.size--mini .vxe-button--loading-icon{min-width:var(--vxe-ui-font-size-mini)}.vxe-button--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;-ms-user-select:none;user-select:none}.vxe-button--dropdown-wrapper{padding:5px;background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color);box-shadow:0 1px 6px rgba(0,0,0,.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--dropdown,.vxe-button.type--button{margin-right:var(--vxe-ui-base-margin-gap-default)}.vxe-button--dropdown.size--medium,.vxe-button.type--button.size--medium{margin-right:var(--vxe-ui-base-margin-gap-medium)}.vxe-button--dropdown.size--small,.vxe-button.type--button.size--small{margin-right:var(--vxe-ui-base-margin-gap-small)}.vxe-button--dropdown.size--mini,.vxe-button.type--button.size--mini{margin-right:var(--vxe-ui-base-margin-gap-mini)}.vxe-button--dropdown:last-of-type,.vxe-button.type--button:last-of-type{margin-right:0}.vxe-button+.vxe-button--dropdown,.vxe-button--dropdown+.vxe-button{margin-left:var(--vxe-ui-base-margin-gap-default)}.vxe-button+.vxe-button--dropdown.size--medium,.vxe-button--dropdown+.vxe-button.size--medium{margin-left:var(--vxe-ui-base-margin-gap-medium)}.vxe-button+.vxe-button--dropdown.size--small,.vxe-button--dropdown+.vxe-button.size--small{margin-left:var(--vxe-ui-base-margin-gap-small)}.vxe-button+.vxe-button--dropdown.size--mini,.vxe-button--dropdown+.vxe-button.size--mini{margin-left:var(--vxe-ui-base-margin-gap-mini)}
+.vxe-button{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;position:relative;background-color:var(--vxe-ui-layout-background-color);outline:0;font-size:var(--vxe-ui-font-size-default);max-width:var(--vxe-ui-button-max-width);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border .2s ease-in-out}.vxe-button.align--left{justify-content:left}.vxe-button.align--center{justify-content:center}.vxe-button.align--right{justify-content:right}.vxe-button:not(.is--disabled){color:var(--vxe-ui-font-color);cursor:pointer}.vxe-button.is--loading{cursor:progress}.vxe-button.is--loading:before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35);pointer-events:none}.vxe-button.is--disabled{color:var(--vxe-ui-font-disabled-color)}.vxe-button.is--disabled:not(.is--loading){cursor:no-drop}.vxe-button.type--text{text-decoration:none;border:0;padding:.1em .5em;background-color:transparent;text-decoration:none}.vxe-button.type--text:not(.is--disabled):focus{color:var(--vxe-ui-font-darken-color)}.vxe-button.type--text:not(.is--disabled):hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-button.type--text:not(.is--disabled):active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-button.type--text.theme--primary{color:var(--vxe-ui-font-primary-color)}.vxe-button.type--text.theme--primary:not(.is--disabled):focus{color:var(--vxe-ui-font-primary-darken-color)}.vxe-button.type--text.theme--primary:not(.is--disabled):hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-button.type--text.theme--primary:not(.is--disabled):active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-button.type--text.theme--primary.is--disabled{color:var(--vxe-ui-font-primary-disabled-color)}.vxe-button.type--text.theme--success{color:var(--vxe-ui-status-success-color)}.vxe-button.type--text.theme--success:not(.is--disabled):focus{color:var(--vxe-ui-status-success-darken-color)}.vxe-button.type--text.theme--success:not(.is--disabled):hover{color:var(--vxe-ui-status-success-lighten-color)}.vxe-button.type--text.theme--success:not(.is--disabled):active{color:var(--vxe-ui-status-success-darken-color)}.vxe-button.type--text.theme--success.is--disabled{color:var(--vxe-ui-status-success-disabled-color)}.vxe-button.type--text.theme--info{color:var(--vxe-ui-status-info-color)}.vxe-button.type--text.theme--info:not(.is--disabled):focus{color:var(--vxe-ui-status-info-darken-color)}.vxe-button.type--text.theme--info:not(.is--disabled):hover{color:var(--vxe-ui-status-info-lighten-color)}.vxe-button.type--text.theme--info:not(.is--disabled):active{color:var(--vxe-ui-status-info-darken-color)}.vxe-button.type--text.theme--info.is--disabled{color:var(--vxe-ui-status-info-disabled-color)}.vxe-button.type--text.theme--warning{color:var(--vxe-ui-status-warning-color)}.vxe-button.type--text.theme--warning:not(.is--disabled):focus{color:var(--vxe-ui-status-warning-darken-color)}.vxe-button.type--text.theme--warning:not(.is--disabled):hover{color:var(--vxe-ui-status-warning-lighten-color)}.vxe-button.type--text.theme--warning:not(.is--disabled):active{color:var(--vxe-ui-status-warning-darken-color)}.vxe-button.type--text.theme--warning.is--disabled{color:var(--vxe-ui-status-warning-disabled-color)}.vxe-button.type--text.theme--danger{color:var(--vxe-ui-status-danger-color)}.vxe-button.type--text.theme--danger:not(.is--disabled):focus{color:var(--vxe-ui-status-danger-darken-color)}.vxe-button.type--text.theme--danger:not(.is--disabled):hover{color:var(--vxe-ui-status-danger-lighten-color)}.vxe-button.type--text.theme--danger:not(.is--disabled):active{color:var(--vxe-ui-status-danger-darken-color)}.vxe-button.type--text.theme--danger.is--disabled{color:var(--vxe-ui-status-danger-disabled-color)}.vxe-button.type--text.theme--error{color:var(--vxe-ui-status-error-color)}.vxe-button.type--text.theme--error:not(.is--disabled):focus{color:var(--vxe-ui-status-error-darken-color)}.vxe-button.type--text.theme--error:not(.is--disabled):hover{color:var(--vxe-ui-status-error-lighten-color)}.vxe-button.type--text.theme--error:not(.is--disabled):active{color:var(--vxe-ui-status-error-darken-color)}.vxe-button.type--text.theme--error.is--disabled{color:var(--vxe-ui-status-error-disabled-color)}.vxe-button.type--text.theme--perfect{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--text.theme--perfect:not(.is--disabled):focus{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--text.theme--perfect:not(.is--disabled):hover{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--text.theme--perfect:not(.is--disabled):active{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--text.theme--perfect.is--disabled{color:var(--vxe-ui-table-header-background-color)}.vxe-button.type--button{font-family:inherit;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.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.type--button{height:var(--vxe-ui-button-height-default)}.vxe-button.type--button.size--medium{height:var(--vxe-ui-button-height-medium)}.vxe-button.type--button.size--small{height:var(--vxe-ui-button-height-small)}.vxe-button.type--button.size--mini{height:var(--vxe-ui-button-height-mini)}.vxe-input--prefix-icon>.vxe-button.type--button,.vxe-input--suffix-icon>.vxe-button.type--button{height:100%}.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;-ms-user-select:none;user-select:none}.vxe-button--dropdown-wrapper{padding:5px;background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color);box-shadow:0 1px 6px rgba(0,0,0,.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--dropdown,.vxe-button.type--button{margin-right:var(--vxe-ui-base-margin-gap-default)}.vxe-button--dropdown.size--medium,.vxe-button.type--button.size--medium{margin-right:var(--vxe-ui-base-margin-gap-medium)}.vxe-button--dropdown.size--small,.vxe-button.type--button.size--small{margin-right:var(--vxe-ui-base-margin-gap-small)}.vxe-button--dropdown.size--mini,.vxe-button.type--button.size--mini{margin-right:var(--vxe-ui-base-margin-gap-mini)}.vxe-button--dropdown:last-of-type,.vxe-button.type--button:last-of-type{margin-right:0}.vxe-button+.vxe-button--dropdown,.vxe-button--dropdown+.vxe-button{margin-left:var(--vxe-ui-base-margin-gap-default)}.vxe-button+.vxe-button--dropdown.size--medium,.vxe-button--dropdown+.vxe-button.size--medium{margin-left:var(--vxe-ui-base-margin-gap-medium)}.vxe-button+.vxe-button--dropdown.size--small,.vxe-button--dropdown+.vxe-button.size--small{margin-left:var(--vxe-ui-base-margin-gap-small)}.vxe-button+.vxe-button--dropdown.size--mini,.vxe-button--dropdown+.vxe-button.size--mini{margin-left:var(--vxe-ui-base-margin-gap-mini)}

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

@@ -7,6 +7,10 @@ import { parseColor, updateColorAlpha, hexToHsv, rgbToHsv, rgbToHex, hexToRgb, h
 import VxeButtonComponent from '../../button/src/button';
 import VxeInputComponent from '../../input/src/input';
 const WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
+const typeList = [
+    { label: 'HEX', value: 'hex' },
+    { label: 'RGB', value: 'rgb' }
+];
 export default {
     name: 'VxeColorPicker',
     mixins: [
@@ -99,7 +103,9 @@ export default {
         const xID = XEUtils.uniqueId();
         const reactData = {
             initialized: false,
+            selectTyle: 'hex',
             selectColor: '',
+            showTypePopup: false,
             panelColor: '',
             hexValue: '',
             rValue: 0,
@@ -198,8 +204,15 @@ export default {
         },
         computeIsRgb() {
             const $xeColorPicker = this;
-            const valueType = $xeColorPicker.computeValueType;
-            return valueType === 'rgb';
+            const reactData = $xeColorPicker.reactData;
+            const { selectTyle } = reactData;
+            return selectTyle === 'rgb';
+        },
+        computeSelectTypeItem() {
+            const $xeColorPicker = this;
+            const reactData = $xeColorPicker.reactData;
+            const { selectTyle } = reactData;
+            return typeList.find(item => item.value === selectTyle);
         } }),
     methods: {
         //
@@ -227,6 +240,18 @@ export default {
             reactData.selectColor = XEUtils.toValueString(value);
             $xeColorPicker.updateModelColor();
         },
+        updateType() {
+            const $xeColorPicker = this;
+            const props = $xeColorPicker;
+            const reactData = $xeColorPicker.reactData;
+            const { type } = props;
+            let selectTyle = 'hex';
+            if (type === 'rgb' || type === 'rgba') {
+                selectTyle = 'rgb';
+            }
+            reactData.selectTyle = selectTyle;
+            $xeColorPicker.updateMode();
+        },
         updateModelColor() {
             const $xeColorPicker = this;
             const reactData = $xeColorPicker.reactData;
@@ -410,6 +435,27 @@ export default {
             $xeColorPicker.togglePanelEvent(evnt);
             $xeColorPicker.dispatchEvent('click', {}, evnt);
         },
+        handlePanelClickEvent() {
+            const $xeColorPicker = this;
+            const reactData = $xeColorPicker.reactData;
+            reactData.showTypePopup = false;
+        },
+        toggleTypeVisibleEvent(evnt) {
+            const $xeColorPicker = this;
+            const reactData = $xeColorPicker.reactData;
+            evnt.stopPropagation();
+            reactData.showTypePopup = !reactData.showTypePopup;
+        },
+        handleChangeType(type) {
+            const $xeColorPicker = this;
+            const reactData = $xeColorPicker.reactData;
+            const { selectTyle } = reactData;
+            if (type !== selectTyle) {
+                reactData.selectTyle = type;
+                $xeColorPicker.updateModelColor();
+            }
+            reactData.showTypePopup = false;
+        },
         handleHueColor(offsetLeft) {
             const $xeColorPicker = this;
             const reactData = $xeColorPicker.reactData;
@@ -703,9 +749,9 @@ export default {
             const props = $xeColorPicker;
             const reactData = $xeColorPicker.reactData;
             const { showAlpha, clickToCopy, showEyeDropper } = props;
-            const { hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData;
-            const valueType = $xeColorPicker.computeValueType;
+            const { selectTyle, showTypePopup, hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData;
             const isRgb = $xeColorPicker.computeIsRgb;
+            const selectTypeItem = $xeColorPicker.computeSelectTypeItem;
             return h('div', {
                 class: 'vxe-color-picker--bar-wrapper'
             }, [
@@ -723,7 +769,7 @@ export default {
                                 }
                             }, [
                                 h('i', {
-                                    class: getIcon().EYE_DROPPER
+                                    class: getIcon().COLOR_PICKER_EYE_DROPPER
                                 })
                             ])
                         ])
@@ -748,7 +794,7 @@ export default {
                                         }
                                     }, [
                                         h('i', {
-                                            class: getIcon().COLOR_COPY
+                                            class: getIcon().COLOR_PICKER_COLOR_COPY
                                         })
                                     ])
                                 ]
@@ -799,128 +845,166 @@ export default {
                     ])
                 ]),
                 h('div', {
-                    class: `vxe-color-picker--${valueType}-wrapper`
-                }, isRgb
-                    ? [
+                    class: 'vxe-color-picker--custom-wrapper'
+                }, [
+                    h('div', {
+                        class: 'vxe-color-picker--type-switch'
+                    }, [
                         h('div', {
-                            class: 'vxe-color-picker--input-wrapper'
+                            class: 'vxe-color-picker--type-label',
+                            on: {
+                                click: $xeColorPicker.toggleTypeVisibleEvent
+                            }
                         }, [
-                            h(VxeInputComponent, {
-                                props: {
-                                    type: 'integer',
-                                    size: 'mini',
-                                    align: 'center',
-                                    min: 0,
-                                    max: 255,
-                                    maxLength: 3,
-                                    placeholder: '',
-                                    value: rValue
-                                },
+                            h('span', `${selectTypeItem ? selectTypeItem.label : selectTyle}`),
+                            h('span', {
+                                class: 'vxe-color-picker--type-icon'
+                            }, [
+                                h('i', {
+                                    class: showTypePopup ? getIcon().COLOR_PICKER_TPTY_OPEN : getIcon().COLOR_PICKER_TPTY_CLOSE
+                                })
+                            ])
+                        ]),
+                        h('div', {
+                            class: ['vxe-color-picker--type-popup', {
+                                    'is--visible': showTypePopup
+                                }]
+                        }, typeList.map(item => {
+                            return h('div', {
+                                class: 'vxe-color-picker--type-item',
                                 on: {
-                                    'modelValue'(val) {
-                                        reactData.rValue = val;
-                                    },
-                                    change: $xeColorPicker.handleInputRgbEvent
+                                    click(evnt) {
+                                        evnt.stopPropagation();
+                                        $xeColorPicker.handleChangeType(item.value);
+                                    }
                                 }
-                            }),
-                            h(VxeInputComponent, {
-                                props: {
-                                    type: 'integer',
-                                    size: 'mini',
-                                    align: 'center',
-                                    min: 0,
-                                    max: 255,
-                                    maxLength: 3,
-                                    placeholder: '',
-                                    value: gValue
-                                },
-                                on: {
-                                    'modelValue'(val) {
-                                        reactData.gValue = val;
+                            }, item.label);
+                        }))
+                    ]),
+                    h('div', {
+                        class: `vxe-color-picker--${selectTyle}-wrapper`
+                    }, isRgb
+                        ? [
+                            h('div', {
+                                class: 'vxe-color-picker--input-wrapper'
+                            }, [
+                                h(VxeInputComponent, {
+                                    props: {
+                                        type: 'integer',
+                                        size: 'mini',
+                                        align: 'center',
+                                        min: 0,
+                                        max: 255,
+                                        maxLength: 3,
+                                        placeholder: '',
+                                        value: rValue
                                     },
-                                    change: $xeColorPicker.handleInputRgbEvent
-                                }
-                            }),
-                            h(VxeInputComponent, {
-                                props: {
-                                    type: 'integer',
-                                    size: 'mini',
-                                    align: 'center',
-                                    min: 0,
-                                    max: 255,
-                                    maxLength: 3,
-                                    placeholder: '',
-                                    value: bValue
-                                },
-                                on: {
-                                    'modelValue'(val) {
-                                        reactData.bValue = val;
+                                    on: {
+                                        'modelValue'(val) {
+                                            reactData.rValue = val;
+                                        },
+                                        change: $xeColorPicker.handleInputRgbEvent
+                                    }
+                                }),
+                                h(VxeInputComponent, {
+                                    props: {
+                                        type: 'integer',
+                                        size: 'mini',
+                                        align: 'center',
+                                        min: 0,
+                                        max: 255,
+                                        maxLength: 3,
+                                        placeholder: '',
+                                        value: gValue
                                     },
-                                    change: $xeColorPicker.handleInputRgbEvent
-                                }
-                            }),
-                            h(VxeInputComponent, {
-                                props: {
-                                    type: 'number',
-                                    size: 'mini',
-                                    align: 'center',
-                                    min: 0,
-                                    max: 1,
-                                    step: 0.01,
-                                    maxLength: 4,
-                                    placeholder: '',
-                                    value: aValue
-                                },
-                                on: {
-                                    'modelValue'(val) {
-                                        reactData.aValue = val;
+                                    on: {
+                                        'modelValue'(val) {
+                                            reactData.gValue = val;
+                                        },
+                                        change: $xeColorPicker.handleInputRgbEvent
+                                    }
+                                }),
+                                h(VxeInputComponent, {
+                                    props: {
+                                        type: 'integer',
+                                        size: 'mini',
+                                        align: 'center',
+                                        min: 0,
+                                        max: 255,
+                                        maxLength: 3,
+                                        placeholder: '',
+                                        value: bValue
                                     },
-                                    change: $xeColorPicker.handleInputAlphaEvent
-                                }
-                            })
-                        ]),
-                        h('div', {
-                            class: 'vxe-color-picker--input-title'
-                        }, [
-                            h('span', 'R'),
-                            h('span', 'G'),
-                            h('span', 'B'),
-                            h('span', 'A')
-                        ])
-                    ]
-                    : [
-                        h('div', {
-                            class: 'vxe-color-picker--input-title'
-                        }, 'HEX'),
-                        h('div', {
-                            class: 'vxe-color-picker--input-wrapper'
-                        }, [
-                            h(VxeInputComponent, {
-                                props: {
-                                    type: 'text',
-                                    size: 'mini',
-                                    align: 'center',
-                                    maxLength: 9,
-                                    placeholder: '',
-                                    value: hexValue
-                                },
-                                on: {
-                                    'modelValue'(val) {
-                                        reactData.hexValue = val;
+                                    on: {
+                                        'modelValue'(val) {
+                                            reactData.bValue = val;
+                                        },
+                                        change: $xeColorPicker.handleInputRgbEvent
+                                    }
+                                }),
+                                h(VxeInputComponent, {
+                                    props: {
+                                        type: 'number',
+                                        size: 'mini',
+                                        align: 'center',
+                                        min: 0,
+                                        max: 1,
+                                        step: 0.01,
+                                        maxLength: 4,
+                                        placeholder: '',
+                                        value: aValue
+                                    },
+                                    on: {
+                                        'modelValue'(val) {
+                                            reactData.aValue = val;
+                                        },
+                                        change: $xeColorPicker.handleInputAlphaEvent
+                                    }
+                                })
+                            ]),
+                            h('div', {
+                                class: 'vxe-color-picker--input-title'
+                            }, [
+                                h('span', 'R'),
+                                h('span', 'G'),
+                                h('span', 'B'),
+                                h('span', 'A')
+                            ])
+                        ]
+                        : [
+                            h('div', {
+                                class: 'vxe-color-picker--input-wrapper'
+                            }, [
+                                h(VxeInputComponent, {
+                                    props: {
+                                        type: 'text',
+                                        size: 'mini',
+                                        align: 'center',
+                                        maxLength: 9,
+                                        placeholder: '',
+                                        value: hexValue
                                     },
-                                    change() {
-                                        const colorRest = parseColor(reactData.hexValue);
-                                        if (colorRest) {
-                                            if (colorRest.value) {
-                                                reactData.selectColor = colorRest.value;
-                                                $xeColorPicker.updateModelColor();
+                                    on: {
+                                        'modelValue'(val) {
+                                            reactData.hexValue = val;
+                                        },
+                                        change() {
+                                            const colorRest = parseColor(reactData.hexValue);
+                                            if (colorRest) {
+                                                if (colorRest.value) {
+                                                    reactData.selectColor = colorRest.value;
+                                                    $xeColorPicker.updateModelColor();
+                                                }
                                             }
                                         }
                                     }
-                                }
-                            })
+                                })
+                            ]),
+                            h('div', {
+                                class: 'vxe-color-picker--input-title'
+                            }, 'HEX')
                         ])
-                    ])
+                ])
             ]);
         },
         renderQuickWrapper(h) {
@@ -1020,7 +1104,10 @@ export default {
                 }, [
                     initialized && (visiblePanel || isAniVisible)
                         ? h('div', {
-                            class: 'vxe-color-picker--panel-wrapper'
+                            class: 'vxe-color-picker--panel-wrapper',
+                            on: {
+                                click: $xeColorPicker.handlePanelClickEvent
+                            }
                         }, [
                             $xeColorPicker.renderColorWrapper(h),
                             $xeColorPicker.renderColorBar(h),
@@ -1060,6 +1147,10 @@ export default {
         value() {
             const $xeColorPicker = this;
             $xeColorPicker.updateMode();
+        },
+        type() {
+            const $xeColorPicker = this;
+            $xeColorPicker.updateType();
         }
     },
     created() {
@@ -1067,7 +1158,7 @@ export default {
         const props = $xeColorPicker;
         const reactData = $xeColorPicker.reactData;
         reactData.selectColor = `${props.value || ''}`;
-        $xeColorPicker.updateMode();
+        $xeColorPicker.updateType();
         globalEvents.on($xeColorPicker, 'mousewheel', $xeColorPicker.handleGlobalMousewheelEvent);
         globalEvents.on($xeColorPicker, 'mousedown', $xeColorPicker.handleGlobalMousedownEvent);
         globalEvents.on($xeColorPicker, 'blur', $xeColorPicker.handleGlobalBlurEvent);