vxe-pc-ui 4.6.38 → 4.6.40

package/es/button/style.css

@@ -177,7 +177,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;
@@ -387,9 +386,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);
 }
@@ -433,6 +429,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;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;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;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;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

@@ -91,7 +91,9 @@ export default defineVxeComponent({
         const refColorActiveElem = ref();
         const reactData = reactive({
             initialized: false,
+            selectTyle: 'hex',
             selectColor: `${props.modelValue || ''}`,
+            showTypePopup: false,
             panelColor: '',
             hexValue: '',
             rValue: 0,
@@ -105,6 +107,10 @@ export default defineVxeComponent({
             isAniVisible: false,
             isActivated: false
         });
+        const typeList = [
+            { label: 'HEX', value: 'hex' },
+            { label: 'RGB', value: 'rgb' }
+        ];
         const internalData = {
         // hpTimeout: undefined
         };
@@ -159,16 +165,13 @@ export default defineVxeComponent({
             }
             return [];
         });
-        const computeValueType = computed(() => {
-            const { type } = props;
-            if (type === 'rgb' || type === 'rgba') {
-                return 'rgb';
-            }
-            return 'hex';
-        });
         const computeIsRgb = computed(() => {
-            const valueType = computeValueType.value;
-            return valueType === 'rgb';
+            const { selectTyle } = reactData;
+            return selectTyle === 'rgb';
+        });
+        const computeSelectTypeItem = computed(() => {
+            const { selectTyle } = reactData;
+            return typeList.find(item => item.value === selectTyle);
         });
         const refMaps = {
             refElem
@@ -190,6 +193,15 @@ export default defineVxeComponent({
             reactData.selectColor = XEUtils.toValueString(modelValue);
             updateModelColor();
         };
+        const updateType = () => {
+            const { type } = props;
+            let selectTyle = 'hex';
+            if (type === 'rgb' || type === 'rgba') {
+                selectTyle = 'rgb';
+            }
+            reactData.selectTyle = selectTyle;
+            updateMode();
+        };
         const updateModelColor = () => {
             const { selectColor, isAniVisible } = reactData;
             const isRgb = computeIsRgb.value;
@@ -337,6 +349,21 @@ export default defineVxeComponent({
             togglePanelEvent(evnt);
             dispatchEvent('click', {}, evnt);
         };
+        const handlePanelClickEvent = () => {
+            reactData.showTypePopup = false;
+        };
+        const toggleTypeVisibleEvent = (evnt) => {
+            evnt.stopPropagation();
+            reactData.showTypePopup = !reactData.showTypePopup;
+        };
+        const handleChangeType = (type) => {
+            const { selectTyle } = reactData;
+            if (type !== selectTyle) {
+                reactData.selectTyle = type;
+                updateModelColor();
+            }
+            reactData.showTypePopup = false;
+        };
         const handleHueColor = (offsetLeft) => {
             const hueSliderEl = refHueSliderElem.value;
             const hueSliderBtnEl = refHueSliderBtnElem.value;
@@ -598,9 +625,9 @@ export default defineVxeComponent({
         };
         const renderColorBar = () => {
             const { showAlpha, clickToCopy, showEyeDropper } = props;
-            const { hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData;
-            const valueType = computeValueType.value;
+            const { selectTyle, showTypePopup, hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData;
             const isRgb = computeIsRgb.value;
+            const selectTypeItem = computeSelectTypeItem.value;
             return h('div', {
                 class: 'vxe-color-picker--bar-wrapper'
             }, [
@@ -616,7 +643,7 @@ export default defineVxeComponent({
                                 onClick: handleEyeDropperEvent
                             }, [
                                 h('i', {
-                                    class: getIcon().EYE_DROPPER
+                                    class: getIcon().COLOR_PICKER_EYE_DROPPER
                                 })
                             ])
                         ])
@@ -639,7 +666,7 @@ export default defineVxeComponent({
                                         onClick: handleCopyColorEvent
                                     }, [
                                         h('i', {
-                                            class: getIcon().COLOR_COPY
+                                            class: getIcon().COLOR_PICKER_COLOR_COPY
                                         })
                                     ])
                                 ]
@@ -682,108 +709,142 @@ export default defineVxeComponent({
                     ])
                 ]),
                 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',
+                            onClick: toggleTypeVisibleEvent
                         }, [
-                            h(VxeInputComponent, {
-                                type: 'integer',
-                                size: 'mini',
-                                align: 'center',
-                                min: 0,
-                                max: 255,
-                                maxLength: 3,
-                                placeholder: '',
-                                modelValue: rValue,
-                                'onUpdate:modelValue'(val) {
-                                    reactData.rValue = val;
-                                },
-                                onChange: handleInputRgbEvent
-                            }),
-                            h(VxeInputComponent, {
-                                type: 'integer',
-                                size: 'mini',
-                                align: 'center',
-                                min: 0,
-                                max: 255,
-                                maxLength: 3,
-                                placeholder: '',
-                                modelValue: gValue,
-                                'onUpdate:modelValue'(val) {
-                                    reactData.gValue = val;
-                                },
-                                onChange: handleInputRgbEvent
-                            }),
-                            h(VxeInputComponent, {
-                                type: 'integer',
-                                size: 'mini',
-                                align: 'center',
-                                min: 0,
-                                max: 255,
-                                maxLength: 3,
-                                placeholder: '',
-                                modelValue: bValue,
-                                'onUpdate:modelValue'(val) {
-                                    reactData.bValue = val;
-                                },
-                                onChange: handleInputRgbEvent
-                            }),
-                            h(VxeInputComponent, {
-                                type: 'number',
-                                size: 'mini',
-                                align: 'center',
-                                min: 0,
-                                max: 1,
-                                step: 0.01,
-                                maxLength: 4,
-                                placeholder: '',
-                                modelValue: aValue,
-                                'onUpdate:modelValue'(val) {
-                                    reactData.aValue = val;
-                                },
-                                onChange: handleInputAlphaEvent
-                            })
+                            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--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, {
-                                type: 'text',
-                                size: 'mini',
-                                align: 'center',
-                                maxLength: 9,
-                                placeholder: '',
-                                modelValue: hexValue,
-                                'onUpdate:modelValue'(val) {
-                                    reactData.hexValue = val;
-                                },
-                                onChange() {
-                                    const colorRest = parseColor(reactData.hexValue);
-                                    if (colorRest) {
-                                        if (colorRest.value) {
-                                            reactData.selectColor = colorRest.value;
-                                            updateModelColor();
+                            class: ['vxe-color-picker--type-popup', {
+                                    'is--visible': showTypePopup
+                                }]
+                        }, typeList.map(item => {
+                            return h('div', {
+                                class: 'vxe-color-picker--type-item',
+                                onClick(evnt) {
+                                    evnt.stopPropagation();
+                                    handleChangeType(item.value);
+                                }
+                            }, item.label);
+                        }))
+                    ]),
+                    h('div', {
+                        class: `vxe-color-picker--${selectTyle}-wrapper`
+                    }, isRgb
+                        ? [
+                            h('div', {
+                                class: 'vxe-color-picker--input-wrapper'
+                            }, [
+                                h(VxeInputComponent, {
+                                    type: 'integer',
+                                    size: 'mini',
+                                    align: 'center',
+                                    min: 0,
+                                    max: 255,
+                                    maxLength: 3,
+                                    placeholder: '',
+                                    modelValue: rValue,
+                                    'onUpdate:modelValue'(val) {
+                                        reactData.rValue = val;
+                                    },
+                                    onChange: handleInputRgbEvent
+                                }),
+                                h(VxeInputComponent, {
+                                    type: 'integer',
+                                    size: 'mini',
+                                    align: 'center',
+                                    min: 0,
+                                    max: 255,
+                                    maxLength: 3,
+                                    placeholder: '',
+                                    modelValue: gValue,
+                                    'onUpdate:modelValue'(val) {
+                                        reactData.gValue = val;
+                                    },
+                                    onChange: handleInputRgbEvent
+                                }),
+                                h(VxeInputComponent, {
+                                    type: 'integer',
+                                    size: 'mini',
+                                    align: 'center',
+                                    min: 0,
+                                    max: 255,
+                                    maxLength: 3,
+                                    placeholder: '',
+                                    modelValue: bValue,
+                                    'onUpdate:modelValue'(val) {
+                                        reactData.bValue = val;
+                                    },
+                                    onChange: handleInputRgbEvent
+                                }),
+                                h(VxeInputComponent, {
+                                    type: 'number',
+                                    size: 'mini',
+                                    align: 'center',
+                                    min: 0,
+                                    max: 1,
+                                    step: 0.01,
+                                    maxLength: 4,
+                                    placeholder: '',
+                                    modelValue: aValue,
+                                    'onUpdate:modelValue'(val) {
+                                        reactData.aValue = val;
+                                    },
+                                    onChange: 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, {
+                                    type: 'text',
+                                    size: 'mini',
+                                    align: 'center',
+                                    maxLength: 9,
+                                    placeholder: '',
+                                    modelValue: hexValue,
+                                    'onUpdate:modelValue'(val) {
+                                        reactData.hexValue = val;
+                                    },
+                                    onChange() {
+                                        const colorRest = parseColor(reactData.hexValue);
+                                        if (colorRest) {
+                                            if (colorRest.value) {
+                                                reactData.selectColor = colorRest.value;
+                                                updateModelColor();
+                                            }
                                         }
                                     }
-                                }
-                            })
+                                })
+                            ]),
+                            h('div', {
+                                class: 'vxe-color-picker--input-title'
+                            }, 'HEX')
                         ])
-                    ])
+                ])
             ]);
         };
         const renderQuickWrapper = () => {
@@ -872,7 +933,8 @@ export default defineVxeComponent({
                     }, [
                         initialized && (visiblePanel || isAniVisible)
                             ? h('div', {
-                                class: 'vxe-color-picker--panel-wrapper'
+                                class: 'vxe-color-picker--panel-wrapper',
+                                onClick: handlePanelClickEvent
                             }, [
                                 renderColorWrapper(),
                                 renderColorBar(),
@@ -903,6 +965,9 @@ export default defineVxeComponent({
         watch(() => props.modelValue, () => {
             updateMode();
         });
+        watch(() => props.type, () => {
+            updateType();
+        });
         onMounted(() => {
             globalEvents.on($xeColorPicker, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeColorPicker, 'mousedown', handleGlobalMousedownEvent);
@@ -915,7 +980,7 @@ export default defineVxeComponent({
             globalEvents.off($xeColorPicker, 'blur');
             globalEvents.off($xeColorPicker, 'resize');
         });
-        updateMode();
+        updateType();
         provide('$xeColorPicker', $xeColorPicker);
         $xeColorPicker.renderVN = renderVN;
         return $xeColorPicker;

package/es/color-picker/style.css

@@ -322,44 +322,104 @@
   height: 100%;
 }
 
-.vxe-color-picker--hex-wrapper,
-.vxe-color-picker--rgb-wrapper {
-  text-align: center;
+.vxe-color-picker--custom-wrapper {
+  display: flex;
+  flex-direction: row;
+  padding: 0 0.8em;
+}
+
+.vxe-color-picker--type-switch {
+  position: relative;
+  flex-shrink: 0;
   margin-top: 0.4em;
 }
 
-.vxe-color-picker--hex-wrapper {
-  display: flex;
-  flex-direction: row;
-  padding: 0 1.8em;
+.vxe-color-picker--type-icon {
+  padding: 0.25em;
+  color: var(--vxe-ui-input-placeholder-color);
 }
-.vxe-color-picker--hex-wrapper .vxe-color-picker--input-wrapper > .vxe-input {
-  width: 12em;
+.vxe-color-picker--type-icon i {
+  display: inline-block;
+  transition: transform 0.2s ease-in-out;
 }
-.vxe-color-picker--hex-wrapper .vxe-color-picker--input-title {
-  padding: 0 0.6em;
+
+.vxe-color-picker--type-label {
+  padding: 0 0.25em;
+  line-height: 2em;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
-.vxe-color-picker--input-title {
-  color: var(--vxe-ui-input-placeholder-color);
+.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: 0.25em 1em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-color-picker--type-popup.is--visible {
+  display: block;
 }
 
-.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper {
+.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: 0.4em;
+}
+
+.vxe-color-picker--input-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
-}
-.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper > .vxe-input {
-  width: 5.4em;
-  margin: 0 0.4em;
+  justify-content: right;
 }
-.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title {
+
+.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: 20.2em;
+}
+
+.vxe-color-picker--rgb-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper > .vxe-input {
+  width: 4.6em;
+  margin-left: 0.6em;
+}
+.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper > .vxe-input:first-child {
+  margin-left: 0;
+}
+.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper > .vxe-input .vxe-input--control-icon {
+  min-width: 1.6em;
 }
 .vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title > span {
   display: block;