vxe-pc-ui 4.6.39 → 4.6.40

package/packages/ui/index.ts

@@ -597,8 +597,10 @@ setIcon({
   RATE_UNCHECKED: iconPrefix + 'star',
 
   // color-picker
-  COLOR_COPY: iconPrefix + 'copy',
-  EYE_DROPPER: iconPrefix + 'dropper',
+  COLOR_PICKER_COLOR_COPY: iconPrefix + 'copy',
+  COLOR_PICKER_EYE_DROPPER: iconPrefix + 'dropper',
+  COLOR_PICKER_TPTY_OPEN: iconPrefix + 'arrow-down rotate180',
+  COLOR_PICKER_TPTY_CLOSE: iconPrefix + 'arrow-down',
 
   // split
   SPLIT_TOP_ACTION: iconPrefix + 'arrow-up',

package/styles/components/color-picker.scss

@@ -269,47 +269,99 @@
   }
 }
 
+.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--type-icon {
+  padding: 0.25em;
+  color: var(--vxe-ui-input-placeholder-color);
+  i {
+    display: inline-block;
+    @include baseMixin.createAnimationTransition(transform, .2s);
+  }
+}
+.vxe-color-picker--type-label {
+  padding: 0 0.25em;
+  line-height: 2em;
+  cursor: pointer;
+  user-select: none;
+}
+.vxe-color-picker--type-popup {
+  position: absolute;
+  display: none;
+  border-radius: var(--vxe-ui-base-border-radius);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  box-shadow: var(--vxe-ui-base-popup-box-shadow);
+  background-color: var(--vxe-ui-layout-background-color);
+  padding: 0.25em 1em;
+  user-select: none;
+  &.is--visible {
+    display: block;
+  }
+}
+.vxe-color-picker--type-item {
+  line-height: 1.6em;
+  cursor: pointer;
+  &: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--hex-wrapper {
+.vxe-color-picker--input-wrapper {
   display: flex;
   flex-direction: row;
-  padding: 0 1.8em;
+  align-items: center;
+  justify-content: right;
+}
+.vxe-color-picker--input-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.4em;
+  color: var(--vxe-ui-input-placeholder-color);
+}
+
+.vxe-color-picker--hex-wrapper {
+  display: flex;
+  flex-direction: column;
   .vxe-color-picker--input-wrapper{
     & > .vxe-input {
-      width: 12em;
+      width: 20.2em;
     }
   }
-  .vxe-color-picker--input-title {
-    padding: 0 0.6em;
-  }
-}
-
-.vxe-color-picker--input-title {
-  color: var(--vxe-ui-input-placeholder-color);
 }
 
 .vxe-color-picker--rgb-wrapper {
+  display: flex;
+  flex-direction: column;
   .vxe-color-picker--input-wrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
     & > .vxe-input {
-      width: 5.4em;
-      margin: 0 0.4em;
+      width: 4.6em;
+      margin-left: 0.6em;
+      &:first-child {
+        margin-left: 0;
+      }
+      .vxe-input--control-icon {
+        min-width: 1.6em;
+      }
     }
   }
   .vxe-color-picker--input-title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    line-height: 1.4em;
     & > span {
       display: block;
       width: 50px;

package/types/components/color-picker.d.ts

@@ -74,7 +74,9 @@ export interface VxeColorPickerPrivateComputed extends ColorPickerPrivateCompute
 
 export interface ColorPickerReactData {
   initialized: boolean
+  selectTyle: VxeColorPickerPropTypes.Type
   selectColor: string
+  showTypePopup: boolean
   panelColor: string
   hexValue: string
   rValue: number

package/types/ui/global-icon.d.ts

@@ -253,8 +253,10 @@ declare module '@vxe-ui/core' {
     RATE_UNCHECKED?: string
 
     // color-picker
-    COLOR_COPY?: string
-    EYE_DROPPER?: string
+    COLOR_PICKER_COLOR_COPY?: string
+    COLOR_PICKER_EYE_DROPPER?: string
+    COLOR_PICKER_TPTY_OPEN?: string
+    COLOR_PICKER_TPTY_CLOSE?: string
 
     // split
     SPLIT_TOP_ACTION?: string