ColorPicker: support hsl/hsv model input (#9991)

packages/color-picker/src/color.js

@@ -202,9 +202,9 @@ export default class Color {
     }
 
     const fromHSV = (h, s, v) => {
-      this._hue = h;
-      this._saturation = s;
-      this._value = v;
+      this._hue = Math.max(0, Math.min(360, h));
+      this._saturation = Math.max(0, Math.min(100, s));
+      this._value = Math.max(0, Math.min(100, v));
 
       this.doOnChange();
     };

packages/color-picker/src/components/picker-dropdown.vue

@@ -84,26 +84,7 @@
       },
 
       handleConfirm() {
-        const valid = this.showAlpha ? this.validRGBA(this.customInput) : this.validRGBHex(this.customInput);
-        if (valid) {
-          this.color.fromString(this.customInput);
-        } else {
-          this.customInput = this.currentColor;
-        }
-      },
-
-      validRGBHex(color) {
-        return /^#[A-Fa-f0-9]{6}$/.test(color);
-      },
-
-      validRGBA(color) {
-        const matches = color.match(/^rgba\((\d+), ?(\d+), ?(\d+), ?([.0-9]+)\)$/);
-        if (!matches) return false;
-        const list = matches.map(v => parseInt(v, 10)).slice(1);
-        if (list.some(v => isNaN(v))) return false;
-        const [r, g, b, a] = list;
-        if ([r, g, b].some(v => v < 0 || v > 255) || a < 0 || a > 1) return false;
-        return true;
+        this.color.fromString(this.customInput);
       }
     },