vxe-pc-ui 3.6.39 → 3.6.41

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'
+                            }, getI18n('vxe.colorPicker.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);

package/es/color-picker/style.css

@@ -323,44 +323,107 @@
   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-left: 0.25em;
+  line-height: 2em;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-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;
+      -ms-user-select: none;
+          user-select: none;
+}
+.vxe-color-picker--type-popup.is--visible {
+  display: block;
+}
+
+.vxe-color-picker--type-item {
+  line-height: 1.6em;
+  cursor: pointer;
+}
+.vxe-color-picker--type-item:hover {
+  color: var(--vxe-ui-font-primary-lighten-color);
+}
+
+.vxe-color-picker--hex-wrapper,
+.vxe-color-picker--rgb-wrapper {
+  flex-grow: 1;
+  text-align: center;
+  margin-top: 0.4em;
 }
 
-.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper {
+.vxe-color-picker--input-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
+  justify-content: right;
 }
-.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper > .vxe-input {
-  width: 5.4em;
-  margin: 0 0.4em;
-}
-.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: 98%;
+}
+
+.vxe-color-picker--rgb-wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper > .vxe-input {
+  width: 23%;
+  margin-left: 2%;
+}
+.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-wrapper > .vxe-input .vxe-input--inner {
+  padding: 0 0 0 0.15em;
 }
 .vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title > span {
   display: block;

package/es/color-picker/style.min.css

@@ -1 +1 @@
-.vxe-color-picker.is--selected .vxe-color-picker--inner-color{color:#fff}.vxe-color-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-color-picker,.vxe-color-picker--readonly{position:relative;display:inline-block;width:2.4em;padding:.25em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color)}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--inner,.vxe-color-picker--preview-btn{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==)}.vxe-color-picker--inner,.vxe-color-picker--readonly-color{width:100%;height:100%;background-size:1em 1em;border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--readonly-color{border:1px solid var(--vxe-ui-input-border-color)}.vxe-color-picker--inner{cursor:pointer}.vxe-color-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-color-picker--inner-color{width:100%;height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--panel-wrapper{position:relative;width:23.4em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-color-picker--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-color-picker--panel:not(.is--transfer){min-width:100%}.vxe-color-picker--panel.is--transfer{position:fixed}.vxe-color-picker--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-color-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-color-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-color-picker--panel.ani--enter>div::after{display:none}.vxe-color-picker--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-color-picker--color-wrapper{position:relative;height:160px;overflow:hidden}.vxe-color-picker--black-bg,.vxe-color-picker--color-bg,.vxe-color-picker--white-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--white-bg{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.vxe-color-picker--black-bg{background:linear-gradient(to top,#000,rgba(255,255,255,0))}.vxe-color-picker--color-active{position:absolute;left:0;top:0;width:.8em;height:.8em;border-radius:50%;border:1px solid #fff;background-color:transparent;box-shadow:0 0 4px 1px rgba(0,0,0,.3);transform:translate(-.4em,-.4em)}.vxe-color-picker--quick-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:auto;max-height:9.2em}.vxe-color-picker--quick-item{width:1.5em;height:1.5em;margin:.4em;border:1px solid var(--vxe-ui-base-popup-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer;transition:transform .1s ease-in-out}.vxe-color-picker--quick-item:hover{transform:scale(1.2);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-color-picker--quick-item:active{transform:scale(.8)}.vxe-color-picker--bar-wrapper{margin-top:.4em}.vxe-color-picker--slider-wrapper{display:flex;flex-direction:row}.vxe-color-picker--color-dropper,.vxe-color-picker--slider-preview{padding-left:.8em}.vxe-color-picker--color-dropper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding-left:.8em;font-size:1.2em;cursor:pointer;transition:transform .1s ease-in-out}.vxe-color-picker--color-dropper:hover{color:var(--vxe-ui-font-primary-color)}.vxe-color-picker--color-dropper:active{transform:scale(.8)}.vxe-color-picker--slider-preview{display:flex;flex-direction:row;flex-shrink:0;align-items:center;justify-content:center}.vxe-color-picker--preview-btn,.vxe-color-picker--preview-color{width:2.2em;height:2.2em;border-radius:50%}.vxe-color-picker--preview-btn{background-size:.8em .8em}.vxe-color-picker--preview-color{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-color-picker--preview-color:hover::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:rgba(0,0,0,.3);z-index:0}.vxe-color-picker--preview-color:hover .vxe-color-picker--preview-copy-btn{display:block;z-index:1}.vxe-color-picker--preview-color:active .vxe-color-picker--preview-copy-btn{font-size:.8em}.vxe-color-picker--preview-copy-btn{display:none;color:#fff;cursor:pointer}.vxe-color-picker--slider-handle{display:flex;flex-direction:column;justify-content:center;flex-grow:1;padding:0 .8em}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{position:relative;height:1em;width:100%;margin:.4em 0;cursor:pointer}.vxe-color-picker--bar-alpha-bg,.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--bar-hue-slider{background:linear-gradient(to left,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.vxe-color-picker--bar-alpha-btn,.vxe-color-picker--bar-hue-btn{position:absolute;left:0;top:-4px;width:.6em;height:calc(100% + 8px);border-radius:.2em;background-color:#fff;border:1px solid var(--vxe-ui-base-popup-border-color);transform:translateX(-.3em);cursor:grab;box-shadow:0 0 8px 0 rgba(0,0,0,.3);transition:transform .1s ease-in-out}.vxe-color-picker--bar-alpha-btn:hover,.vxe-color-picker--bar-hue-btn:hover{transform:translateX(-.3em) scale(1.1)}.vxe-color-picker--bar-alpha-btn:active,.vxe-color-picker--bar-hue-btn:active{transform:translateX(-.3em) scale(1.2);cursor:grabbing}.vxe-color-picker--bar-alpha-slider{background-size:1em 1em}.vxe-color-picker--bar-alpha-slider .vxe-color-picker--bar-alpha-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--hex-wrapper,.vxe-color-picker--rgb-wrapper{text-align:center;margin-top:.4em}.vxe-color-picker--hex-wrapper{display:flex;flex-direction:row;padding:0 1.8em}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:12em}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-title{padding:0 .6em}.vxe-color-picker--input-title{color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--rgb-wrapper .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 .4em}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title{display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1.4em}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title>span{display:block;width:50px;margin:0 .4em}.vxe-color-picker--footer-wrapper{text-align:right;margin-top:.4em;padding:0 .4em .4em .4em}.vxe-color-picker,.vxe-color-picker--readonly{height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-color-picker--readonly.size--medium,.vxe-color-picker.size--medium{height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-color-picker--readonly.size--small,.vxe-color-picker.size--small{height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-color-picker--readonly.size--mini,.vxe-color-picker.size--mini{height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}.vxe-color-picker,.vxe-color-picker--panel,.vxe-color-picker--readonly{font-size:var(--vxe-ui-font-size-default)}.vxe-color-picker--panel.size--medium,.vxe-color-picker--readonly.size--medium,.vxe-color-picker.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-color-picker--panel.size--small,.vxe-color-picker--readonly.size--small,.vxe-color-picker.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-color-picker--panel.size--mini,.vxe-color-picker--readonly.size--mini,.vxe-color-picker.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-color-picker.is--selected .vxe-color-picker--inner-color{color:#fff}.vxe-color-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-color-picker,.vxe-color-picker--readonly{position:relative;display:inline-block;width:2.4em;padding:.25em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color)}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--inner,.vxe-color-picker--preview-btn{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==)}.vxe-color-picker--inner,.vxe-color-picker--readonly-color{width:100%;height:100%;background-size:1em 1em;border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--readonly-color{border:1px solid var(--vxe-ui-input-border-color)}.vxe-color-picker--inner{cursor:pointer}.vxe-color-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-color-picker--inner-color{width:100%;height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--panel-wrapper{position:relative;width:23.4em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-color-picker--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-color-picker--panel:not(.is--transfer){min-width:100%}.vxe-color-picker--panel.is--transfer{position:fixed}.vxe-color-picker--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-color-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-color-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-color-picker--panel.ani--enter>div::after{display:none}.vxe-color-picker--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-color-picker--color-wrapper{position:relative;height:160px;overflow:hidden}.vxe-color-picker--black-bg,.vxe-color-picker--color-bg,.vxe-color-picker--white-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--white-bg{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.vxe-color-picker--black-bg{background:linear-gradient(to top,#000,rgba(255,255,255,0))}.vxe-color-picker--color-active{position:absolute;left:0;top:0;width:.8em;height:.8em;border-radius:50%;border:1px solid #fff;background-color:transparent;box-shadow:0 0 4px 1px rgba(0,0,0,.3);transform:translate(-.4em,-.4em)}.vxe-color-picker--quick-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:auto;max-height:9.2em}.vxe-color-picker--quick-item{width:1.5em;height:1.5em;margin:.4em;border:1px solid var(--vxe-ui-base-popup-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer;transition:transform .1s ease-in-out}.vxe-color-picker--quick-item:hover{transform:scale(1.2);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-color-picker--quick-item:active{transform:scale(.8)}.vxe-color-picker--bar-wrapper{margin-top:.4em}.vxe-color-picker--slider-wrapper{display:flex;flex-direction:row}.vxe-color-picker--color-dropper,.vxe-color-picker--slider-preview{padding-left:.8em}.vxe-color-picker--color-dropper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding-left:.8em;font-size:1.2em;cursor:pointer;transition:transform .1s ease-in-out}.vxe-color-picker--color-dropper:hover{color:var(--vxe-ui-font-primary-color)}.vxe-color-picker--color-dropper:active{transform:scale(.8)}.vxe-color-picker--slider-preview{display:flex;flex-direction:row;flex-shrink:0;align-items:center;justify-content:center}.vxe-color-picker--preview-btn,.vxe-color-picker--preview-color{width:2.2em;height:2.2em;border-radius:50%}.vxe-color-picker--preview-btn{background-size:.8em .8em}.vxe-color-picker--preview-color{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-color-picker--preview-color:hover::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:rgba(0,0,0,.3);z-index:0}.vxe-color-picker--preview-color:hover .vxe-color-picker--preview-copy-btn{display:block;z-index:1}.vxe-color-picker--preview-color:active .vxe-color-picker--preview-copy-btn{font-size:.8em}.vxe-color-picker--preview-copy-btn{display:none;color:#fff;cursor:pointer}.vxe-color-picker--slider-handle{display:flex;flex-direction:column;justify-content:center;flex-grow:1;padding:0 .8em}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{position:relative;height:1em;width:100%;margin:.4em 0;cursor:pointer}.vxe-color-picker--bar-alpha-bg,.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--bar-hue-slider{background:linear-gradient(to left,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.vxe-color-picker--bar-alpha-btn,.vxe-color-picker--bar-hue-btn{position:absolute;left:0;top:-4px;width:.6em;height:calc(100% + 8px);border-radius:.2em;background-color:#fff;border:1px solid var(--vxe-ui-base-popup-border-color);transform:translateX(-.3em);cursor:grab;box-shadow:0 0 8px 0 rgba(0,0,0,.3);transition:transform .1s ease-in-out}.vxe-color-picker--bar-alpha-btn:hover,.vxe-color-picker--bar-hue-btn:hover{transform:translateX(-.3em) scale(1.1)}.vxe-color-picker--bar-alpha-btn:active,.vxe-color-picker--bar-hue-btn:active{transform:translateX(-.3em) scale(1.2);cursor:grabbing}.vxe-color-picker--bar-alpha-slider{background-size:1em 1em}.vxe-color-picker--bar-alpha-slider .vxe-color-picker--bar-alpha-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--custom-wrapper{display:flex;flex-direction:row;padding:0 .8em}.vxe-color-picker--type-switch{position:relative;flex-shrink:0;margin-top:.4em}.vxe-color-picker--type-icon{padding:.25em;color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--type-icon i{display:inline-block;transition:transform .2s ease-in-out}.vxe-color-picker--type-label{padding-left:.25em;line-height:2em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-color-picker--type-popup{position:absolute;display:none;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color);padding:.25em 1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-color-picker--type-popup.is--visible{display:block}.vxe-color-picker--type-item{line-height:1.6em;cursor:pointer}.vxe-color-picker--type-item:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-color-picker--hex-wrapper,.vxe-color-picker--rgb-wrapper{flex-grow:1;text-align:center;margin-top:.4em}.vxe-color-picker--input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:right}.vxe-color-picker--input-title{display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1.4em;color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--hex-wrapper{display:flex;flex-direction:column}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:98%}.vxe-color-picker--rgb-wrapper{display:flex;flex-direction:column;overflow:hidden}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:23%;margin-left:2%}.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-wrapper>.vxe-input .vxe-input--inner{padding:0 0 0 .15em}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title>span{display:block;width:50px;margin:0 .4em}.vxe-color-picker--footer-wrapper{text-align:right;margin-top:.4em;padding:0 .4em .4em .4em}.vxe-color-picker,.vxe-color-picker--readonly{height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-color-picker--readonly.size--medium,.vxe-color-picker.size--medium{height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-color-picker--readonly.size--small,.vxe-color-picker.size--small{height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-color-picker--readonly.size--mini,.vxe-color-picker.size--mini{height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}.vxe-color-picker,.vxe-color-picker--panel,.vxe-color-picker--readonly{font-size:var(--vxe-ui-font-size-default)}.vxe-color-picker--panel.size--medium,.vxe-color-picker--readonly.size--medium,.vxe-color-picker.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-color-picker--panel.size--small,.vxe-color-picker--readonly.size--small,.vxe-color-picker.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-color-picker--panel.size--mini,.vxe-color-picker--readonly.size--mini,.vxe-color-picker.size--mini{font-size:var(--vxe-ui-font-size-mini)}