vxe-pc-ui 4.6.39 → 4.6.40

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;

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;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;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:0 .25em;line-height:2em;cursor:pointer;-webkit-user-select:none;-moz-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;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: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:.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;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)}