vxe-pc-ui 3.6.39 → 3.6.41

package/packages/language/zh-CHT.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: '清除',
       confirm: '確認',
-      copySuccess: '已復製到剪貼板：{0}'
+      copySuccess: '已復製到剪貼板：{0}',
+      hex: '十六进制'
     },
     formDesign: {
       formName: '表單名稱',

package/packages/language/zh-CN.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: '清除',
       confirm: '确认',
-      copySuccess: '已复制到剪贴板：{0}'
+      copySuccess: '已复制到剪贴板：{0}',
+      hex: '十六进制'
     },
     formDesign: {
       formName: '表单名称',

package/packages/ui/index.ts

@@ -419,7 +419,6 @@ setIcon({
   // icon-picker
   ICON_PICKER_OPEN: iconPrefix + 'caret-down rotate180',
   ICON_PICKER_CLOSE: iconPrefix + 'caret-down',
-  RADIO_DISABLED_UNCHECKED: iconPrefix + 'radio-unchecked-fill',
 
   // pager
   PAGER_HOME: iconPrefix + 'home-page',
@@ -433,6 +432,7 @@ setIcon({
   // radio
   RADIO_CHECKED: iconPrefix + 'radio-checked-fill',
   RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
+  RADIO_DISABLED_UNCHECKED: iconPrefix + 'radio-unchecked-fill',
 
   // checkbox
   CHECKBOX_INDETERMINATE: iconPrefix + 'checkbox-indeterminate-fill',
@@ -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,100 @@
   }
 }
 
+.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-left: 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: 98%;
     }
   }
-  .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;
+  overflow: hidden;
   .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: 23%;
+      margin-left: 2%;
+      .vxe-input--control-icon {
+        min-width: 1.6em;
+      }
+      .vxe-input--inner {
+        padding: 0 0 0 0.15em;
+      }
     }
   }
   .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

@@ -67,7 +67,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

@@ -75,7 +75,6 @@ declare module '@vxe-ui/core' {
     // icon-picker
     ICON_PICKER_OPEN?: string
     ICON_PICKER_CLOSE?: string
-    RADIO_DISABLED_UNCHECKED?: string
 
     // pager
     PAGER_HOME?: string
@@ -89,6 +88,7 @@ declare module '@vxe-ui/core' {
     // radio
     RADIO_CHECKED?: string
     RADIO_UNCHECKED?: string
+    RADIO_DISABLED_UNCHECKED?: string
 
     // checkbox
     CHECKBOX_INDETERMINATE?: string
@@ -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