vxe-pc-ui 3.16.21 → 3.16.22

package/es/color-picker/index.js

@@ -1,6 +1,7 @@
 import { VxeUI } from '@vxe-ui/core';
 import VxeColorPickerComponent from './src/color-picker';
 import { dynamicApp } from '../dynamics';
+import { parseColor, hasRgb, hasHex, toRgb, toHex, toHsl, toHsv, toRgbString, toHexString, lighten, darken } from './src/util';
 export const VxeColorPicker = Object.assign({}, VxeColorPickerComponent, {
     install(app) {
         app.component(VxeColorPickerComponent.name, VxeColorPickerComponent);
@@ -8,5 +9,18 @@ export const VxeColorPicker = Object.assign({}, VxeColorPickerComponent, {
 });
 dynamicApp.use(VxeColorPicker);
 VxeUI.component(VxeColorPickerComponent);
+VxeUI.color = {
+    parseColor,
+    hasRgb,
+    hasHex,
+    toRgb,
+    toRgbString,
+    toHex,
+    toHexString,
+    toHsl,
+    toHsv,
+    lighten,
+    darken
+};
 export const ColorPicker = VxeColorPicker;
 export default VxeColorPicker;

package/es/color-picker/src/color-picker.js

@@ -3,7 +3,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI, getIcon, getConfig, getI18n, globalEvents, createEvent, globalMixins, renderEmptyElement } from '../../ui';
 import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
-import { parseColor, updateColorAlpha, hexToHsv, rgbToHsv, rgbToHex, hexToRgb, hsvToRgb, toRgb } from './util';
+import { parseValColor, updateColorAlpha, hexToHsv, rgbToHsv, rgbToHexVal, hexToRgb, hsvToRgb, toValRgb } from './util';
 import VxeButtonComponent from '../../button';
 import VxeInputComponent from '../../input';
 import VxeNumberInputComponent from '../../number-input';
@@ -162,6 +162,7 @@ export default {
             const $xeTable = $xeColorPicker.$xeTable;
             const $xeModal = $xeColorPicker.$xeModal;
             const $xeDrawer = $xeColorPicker.$xeDrawer;
+            const $xeCard = $xeColorPicker.$xeCard;
             const $xeForm = $xeColorPicker.$xeForm;
             const { transfer } = props;
             if (transfer === null) {
@@ -169,7 +170,7 @@ export default {
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+                if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
                     return true;
                 }
             }
@@ -257,32 +258,43 @@ export default {
             const isRgb = $xeColorPicker.computeIsRgb;
             const hueSliderEl = $xeColorPicker.$refs.refHueSliderElem;
             const alphaSliderEl = $xeColorPicker.$refs.refAlphaSliderElem;
-            const colorRest = parseColor(selectColor);
-            reactData.hexValue = colorRest.hex;
-            reactData.rValue = colorRest.r;
-            reactData.gValue = colorRest.g;
-            reactData.bValue = colorRest.b;
-            reactData.aValue = colorRest.a;
-            if (colorRest.value) {
-                if (isRgb) {
-                    if (colorRest.type === 'hex') {
-                        const rgbRest = hexToRgb(colorRest.hex);
-                        if (rgbRest) {
-                            reactData.rValue = rgbRest.r;
-                            reactData.gValue = rgbRest.g;
-                            reactData.bValue = rgbRest.b;
-                            reactData.aValue = rgbRest.a;
-                        }
-                    }
+            const colorRest = parseValColor(selectColor);
+            reactData.hexValue = '';
+            reactData.rValue = 0;
+            reactData.gValue = 0;
+            reactData.bValue = 0;
+            reactData.aValue = 1;
+            if (colorRest) {
+                if (colorRest.type === 'hex') {
+                    reactData.hexValue = colorRest.hex;
                 }
                 else {
-                    if (colorRest.type !== 'hex') {
-                        reactData.hexValue = rgbToHex(colorRest);
+                    reactData.rValue = colorRest.r;
+                    reactData.gValue = colorRest.g;
+                    reactData.bValue = colorRest.b;
+                    reactData.aValue = colorRest.a;
+                }
+                if (colorRest.value) {
+                    if (isRgb) {
+                        if (colorRest.type === 'hex') {
+                            const rgbRest = hexToRgb(colorRest.hex);
+                            if (rgbRest) {
+                                reactData.rValue = rgbRest.r;
+                                reactData.gValue = rgbRest.g;
+                                reactData.bValue = rgbRest.b;
+                                reactData.aValue = rgbRest.a;
+                            }
+                        }
+                    }
+                    else {
+                        if (colorRest.type !== 'hex') {
+                            reactData.hexValue = rgbToHexVal(colorRest.r, colorRest.g, colorRest.b, colorRest.a);
+                        }
                     }
                 }
             }
             if (isAniVisible) {
-                const hsvRest = colorRest.type === 'hex' ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest);
+                const hsvRest = colorRest ? (colorRest.type === 'hex' ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest)) : null;
                 const colorPanelEl = $xeColorPicker.$refs.refColorPanelElem;
                 if (hsvRest) {
                     if (colorPanelEl) {
@@ -295,7 +307,7 @@ export default {
                     }
                 }
                 if (alphaSliderEl) {
-                    $xeColorPicker.handleAlphaColor(alphaSliderEl.clientWidth * colorRest.a);
+                    $xeColorPicker.handleAlphaColor(alphaSliderEl.clientWidth * reactData.aValue);
                 }
             }
         },
@@ -502,7 +514,7 @@ export default {
                         gNum = itemNum - offsetNum;
                         break;
                 }
-                reactData.panelColor = toRgb(rNum, gNum, bNum);
+                reactData.panelColor = toValRgb(rNum, gNum, bNum);
                 hueSliderBtnEl.style.left = toCssUnit(offsetLeft);
             }
         },
@@ -580,7 +592,7 @@ export default {
             const $xeColorPicker = this;
             const reactData = $xeColorPicker.reactData;
             const { rValue, gValue, bValue, aValue } = reactData;
-            reactData.selectColor = toRgb(rValue, gValue, bValue, aValue);
+            reactData.selectColor = toValRgb(rValue, gValue, bValue, aValue);
             $xeColorPicker.updateModelColor();
         },
         handleInputAlphaEvent() {
@@ -641,12 +653,12 @@ export default {
                 const colorPanelRect = colorPanelEl.getBoundingClientRect();
                 const offsetTop = Math.min(clientHeight, Math.max(0, clientY - colorPanelRect.y));
                 const offsetLeft = Math.min(clientWidth, Math.max(0, clientX - colorPanelRect.x));
-                const colorRest = parseColor(panelColor);
+                const colorRest = parseValColor(panelColor);
                 if (colorRest) {
                     const hsvRest = colorRest.type === 'hex' ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest);
                     if (hsvRest) {
                         const ragRest = hsvToRgb(hsvRest.h, offsetLeft / clientWidth, (1 - offsetTop / clientHeight));
-                        reactData.selectColor = toRgb(ragRest.r, ragRest.g, ragRest.b, showAlpha ? aValue : null);
+                        reactData.selectColor = toValRgb(ragRest.r, ragRest.g, ragRest.b, showAlpha ? aValue : null);
                         $xeColorPicker.handlePanelColor(offsetLeft, offsetTop);
                     }
                 }
@@ -1031,7 +1043,7 @@ export default {
                                             reactData.hexValue = val;
                                         },
                                         change() {
-                                            const colorRest = parseColor(reactData.hexValue);
+                                            const colorRest = parseValColor(reactData.hexValue);
                                             if (colorRest) {
                                                 if (colorRest.value) {
                                                     reactData.selectColor = colorRest.value;

package/es/color-picker/src/util.js

@@ -8,13 +8,142 @@ const hexAlphaNumMaps = {};
 });
 const rgbRE = /^rgb(a?)\((\d{1,3})[,\s]+(\d{1,3})[,\s]+(\d{1,3})([,//\s]+([0-9.]{1,4})(%?))?\)$/;
 export function hasRgb(value) {
-    return value && rgbRE.test(value);
+    return !!(value && rgbRE.test(value));
 }
 const hexRE = /^(#?)([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/;
 export function hasHex(value) {
-    return value && hexRE.test(value);
+    return !!(value && hexRE.test(value));
 }
-export function parseColor(value) {
+export function toRgb(value) {
+    if (value) {
+        if (hexRE.test(value)) {
+            return hexToRgb(value);
+        }
+        return parseRgbVal(value);
+    }
+    return null;
+}
+export function toRgbString(value) {
+    const rgbRest = toRgb(value);
+    if (rgbRest) {
+        return rgbRest.label;
+    }
+    return '';
+}
+export function toHex(value) {
+    if (value) {
+        if (rgbRE.test(value)) {
+            return rgbValToHex(value);
+        }
+        return parseHexVal(value);
+    }
+    return null;
+}
+export function toHexString(value) {
+    const hexRest = toHex(value);
+    if (hexRest) {
+        return hexRest.label;
+    }
+    return '';
+}
+export function toHsl(value) {
+    const rgbRest = toRgb(value);
+    if (rgbRest) {
+        const hslRest = rgbToHsl(rgbRest);
+        if (hslRest) {
+            const rest = Object.assign({ value, type: 'hsl' }, hslRest);
+            return rest;
+        }
+    }
+    return null;
+}
+export function toHsv(value) {
+    const rgbRest = toRgb(value);
+    if (rgbRest) {
+        const hslRest = rgbToHsv(rgbRest);
+        if (hslRest) {
+            const rest = Object.assign({ value, type: 'hsv' }, hslRest);
+            return rest;
+        }
+    }
+    return null;
+}
+export function parseColor(val, format) {
+    if (val) {
+        if (format === 'hex') {
+            return toHex(val);
+        }
+        if (format === 'hsl') {
+            return toHsl(val);
+        }
+        if (format === 'hsv') {
+            return toHsv(val);
+        }
+        return toRgb(val);
+    }
+    return null;
+}
+function handleNumClamp(val) {
+    return Math.min(1, Math.max(0, val));
+}
+function createLightenDarken(isAdd) {
+    return function (val, ratio) {
+        const colorRest = parseColor(val);
+        const hslRest = toHsl(val);
+        if (colorRest && hslRest) {
+            ratio = ratio === 0 ? 0 : ratio || 10;
+            hslRest.l += (isAdd ? ratio : -ratio) / 100;
+            hslRest.l = handleNumClamp(hslRest.l);
+            const rgbRest = hslToRgb(hslRest);
+            if (rgbRest) {
+                if ((colorRest === null || colorRest === void 0 ? void 0 : colorRest.type) === 'hex') {
+                    return rgbToHexVal(rgbRest.r, rgbRest.g, rgbRest.b, hslRest.a);
+                }
+                return toValRgb(rgbRest.r, rgbRest.g, rgbRest.b, hslRest.a);
+            }
+        }
+        return val;
+    };
+}
+export const lighten = createLightenDarken(1);
+export const darken = createLightenDarken(0);
+function parseHexVal(value) {
+    if (value) {
+        const hexRest = value.match(hexRE);
+        if (hexRest) {
+            const rest = {
+                value,
+                label: value,
+                type: 'hex',
+                hex: value,
+                hexV: hexRest[2],
+                hexA: hexRest[3] || '',
+                a: (hexRest[3] ? hexAlphaKeyMaps[hexRest[3].toUpperCase()] : 1) || 1
+            };
+            return rest;
+        }
+    }
+    return null;
+}
+function parseRgbVal(value) {
+    if (value) {
+        const rgbRest = value.match(rgbRE);
+        if (rgbRest) {
+            const rest = {
+                value,
+                label: value,
+                type: (rgbRest[6] ? 'rgba' : 'rgb'),
+                r: parseInt(rgbRest[2]),
+                g: parseInt(rgbRest[3]),
+                b: parseInt(rgbRest[4]),
+                a: rgbRest[7] ? parseInt(rgbRest[6]) / 100 : (rgbRest[6] ? parseFloat(rgbRest[6]) : 1)
+            };
+            return rest;
+        }
+    }
+    return null;
+}
+export function parseValColor(value) {
     const rest = {
         value: '',
         type: '',
@@ -27,49 +156,44 @@ export function parseColor(value) {
         a: 1
     };
     if (value) {
-        const hexRest = value.match(hexRE);
-        if (hexRest) {
-            rest.value = value;
-            rest.type = 'hex';
-            rest.hex = value;
-            rest.hexV = hexRest[2];
-            rest.hexA = hexRest[3] || '';
-            rest.a = (hexRest[3] ? hexAlphaKeyMaps[hexRest[3].toUpperCase()] : 1) || 1;
+        if (hexRE.test(value)) {
+            return Object.assign(rest, parseHexVal(value));
         }
-        const rgbRest = value.match(rgbRE);
-        if (rgbRest) {
-            rest.value = value;
-            rest.type = rgbRest[6] ? 'rgba' : 'rgb';
-            rest.r = parseInt(rgbRest[2]);
-            rest.g = parseInt(rgbRest[3]);
-            rest.b = parseInt(rgbRest[4]);
-            rest.a = rgbRest[7] ? parseInt(rgbRest[6]) / 100 : (rgbRest[6] ? parseFloat(rgbRest[6]) : 1);
+        else if (rgbRE.test(value)) {
+            return Object.assign(rest, parseRgbVal(value));
         }
     }
     return rest;
 }
 export function updateColorAlpha(value, alpha = 1) {
-    const colorRest = parseColor(value);
-    const { type, hexV, r, g, b } = colorRest;
-    if (type === 'rgb' || type === 'rgba') {
-        return toRgb(r, g, b, alpha);
-    }
-    if (type === 'hex') {
-        return `#${hexV}${alpha === 1 ? '' : (hexAlphaNumMaps[alpha] || '')}`;
+    const colorRest = parseValColor(value);
+    if (colorRest) {
+        const { type } = colorRest;
+        if (type === 'hex') {
+            return `#${colorRest.hexV}${alpha === 1 ? '' : (hexAlphaNumMaps[alpha] || '')}`;
+        }
+        return toValRgb(colorRest.r, colorRest.g, colorRest.b, alpha);
     }
     return '';
 }
-export function toRgb(r, g, b, a) {
-    if (XEUtils.eqNull(a)) {
+export function toValRgb(r, g, b, a) {
+    if (XEUtils.eqNull(a) || a === 1) {
         return `rgb(${r},${g},${b})`;
     }
     return `rgba(${r},${g},${b},${a})`;
 }
-export function rgbToHex(rgbRest) {
-    if (!rgbRest) {
-        return '';
+function rgbValToHex(value) {
+    const rgbRest = parseRgbVal(value);
+    if (rgbRest) {
+        const hexVal = rgbToHexVal(rgbRest.r, rgbRest.g, rgbRest.b, rgbRest.a);
+        if (hexVal) {
+            return parseHexVal(hexVal);
+        }
     }
-    const { r, g, b, a = 1 } = rgbRest;
+    return null;
+}
+export function rgbToHexVal(r, g, b, a) {
+    a = XEUtils.isNumber(a) ? a : 1;
     const hexR = r.toString(16).padStart(2, '0');
     const hexG = g.toString(16).padStart(2, '0');
     const hexB = b.toString(16).padStart(2, '0');
@@ -120,6 +244,91 @@ export function rgbToHsv(rgbRest) {
         v: XEUtils.round(val, 2)
     };
 }
+function rgbToHsl(rgbRest) {
+    if (!rgbRest) {
+        return null;
+    }
+    const { r, g, b, a } = rgbRest;
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    const delta = max - min;
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (delta !== 0) {
+        s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+        if (max === rNorm) {
+            h = ((gNorm - bNorm) / delta) % 6;
+        }
+        else if (max === gNorm) {
+            h = (bNorm - rNorm) / delta + 2;
+        }
+        else {
+            h = (rNorm - gNorm) / delta + 4;
+        }
+        h *= 60;
+        if (h < 0) {
+            h += 360;
+        }
+    }
+    return {
+        h,
+        s,
+        l,
+        a: XEUtils.isNumber(a) ? a : 1
+    };
+}
+function hslToRgb(slRest) {
+    if (!slRest) {
+        return null;
+    }
+    let { h, s, l } = slRest;
+    const sNorm = s;
+    const lNorm = l;
+    h = ((h % 360) + 360) % 360;
+    const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+    const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+    const m = lNorm - c / 2;
+    let r, g, b;
+    if (h >= 0 && h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    }
+    else if (h >= 60 && h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    }
+    else if (h >= 120 && h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    }
+    else if (h >= 180 && h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    }
+    else if (h >= 240 && h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    }
+    else {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255)
+    };
+}
 export function hsvToRgb(h, s, v) {
     let r = 0;
     let g = 0;
@@ -178,11 +387,18 @@ export function hexToRgb(str) {
     if (str) {
         const rests = str.match(/^(#?)([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})?$/);
         if (rests) {
+            const r = parseInt(rests[2], 16);
+            const g = parseInt(rests[3], 16);
+            const b = parseInt(rests[4], 16);
+            const a = (rests[5] ? hexAlphaKeyMaps[rests[5].toUpperCase()] : 1) || 1;
             return {
-                r: parseInt(rests[2], 16),
-                g: parseInt(rests[3], 16),
-                b: parseInt(rests[4], 16),
-                a: (rests[5] ? hexAlphaKeyMaps[rests[5].toUpperCase()] : 1) || 1
+                value: str,
+                label: toValRgb(r, g, b, rests[5] ? a : null),
+                type: (rests[5] ? 'rgba' : 'rgb'),
+                r,
+                g,
+                b,
+                a
             };
         }
     }

package/es/date-picker/src/date-picker.js

@@ -186,6 +186,7 @@ export default {
             const $xeTable = $xeDatePicker.$xeTable;
             const $xeModal = $xeDatePicker.$xeModal;
             const $xeDrawer = $xeDatePicker.$xeDrawer;
+            const $xeCard = $xeDatePicker.$xeCard;
             const $xeForm = $xeDatePicker.$xeForm;
             const { transfer } = props;
             const popupOpts = $xeDatePicker.computePopupOpts;
@@ -197,7 +198,7 @@ export default {
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+                if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
                     return true;
                 }
             }

package/es/date-range-picker/src/date-range-picker.js

@@ -181,6 +181,7 @@ export default {
             const $xeTable = $xeDateRangePicker.$xeTable;
             const $xeModal = $xeDateRangePicker.$xeModal;
             const $xeDrawer = $xeDateRangePicker.$xeDrawer;
+            const $xeCard = $xeDateRangePicker.$xeCard;
             const $xeForm = $xeDateRangePicker.$xeForm;
             const { transfer } = props;
             const popupOpts = $xeDateRangePicker.computePopupOpts;
@@ -192,7 +193,7 @@ export default {
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+                if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
                     return true;
                 }
             }