@opentiny/vue-renderless 3.19.4 → 3.20.0

package/color-picker/utils/color.js

@@ -1,102 +1,377 @@
-import "../../chunk-G2ADBYYC.js";
-import { hsv, rgb } from "color";
-function hexToRgb(hex) {
-  let r = parseInt(hex.substring(1, 3), 16);
-  let g = parseInt(hex.substring(3, 5), 16);
-  let b = parseInt(hex.substring(5, 7), 16);
-  let a = parseInt(hex.slice(7), 16) / 255;
-  return { r, g, b, a: a * 100 };
-}
-const normalizeHexColor = (color) => {
-  let normalizedColor = color.replace("#", "");
-  if (normalizedColor.length === 3) {
-    normalizedColor = normalizedColor.split("").map((char) => char + char).join("");
-  }
-  normalizedColor = normalizedColor.padEnd(6, "0");
-  const r = parseInt(normalizedColor.substr(0, 2), 16);
-  const g = parseInt(normalizedColor.substr(2, 2), 16);
-  const b = parseInt(normalizedColor.substr(4, 2), 16);
-  let a = 255;
-  if (normalizedColor.length === 8) {
-    a = parseInt(normalizedColor.slice(6), 16);
-  }
-  const hexR = ("0" + r.toString(16)).slice(-2);
-  const hexG = ("0" + g.toString(16)).slice(-2);
-  const hexB = ("0" + b.toString(16)).slice(-2);
-  const alpha = ("0" + a.toString(16)).slice(-2);
-  return `#${hexR}${hexG}${hexB}${alpha}`;
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-G2ADBYYC.js";
+const INT_HEX_MAP = {
+  10: "A",
+  11: "B",
+  12: "C",
+  13: "D",
+  14: "E",
+  15: "F"
+};
+const HEX_INT_MAP = {
+  A: 10,
+  B: 11,
+  C: 12,
+  D: 13,
+  E: 14,
+  F: 15
+};
+const parseHex = function(hex) {
+  if (hex.length === 2) {
+    return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
+  }
+  return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
+};
+const hsv2hsl = ({ hue, sat, val }) => {
+  const hue_ = (2 - sat) * val;
+  return [hue, sat * val / (hue_ < 1 ? hue_ : 2 - hue_) || 0, hue_ / 2];
+};
+const isString = (val) => typeof val === "string";
+const isOnePointZero = (n) => {
+  return isString(n) && n.includes(".") && Number.parseFloat(n) === 1;
+};
+const isPercentage = (n) => {
+  return isString(n) && n.includes("%");
+};
+const normalized = (value, max) => {
+  if (isOnePointZero(value))
+    value = "100%";
+  const processPercent = isPercentage(value);
+  value = Math.min(max, Math.max(0, Number.parseFloat(`${value}`)));
+  if (processPercent) {
+    value = Number.parseInt(`${value * max}`, 10) / 100;
+  }
+  if (Math.abs(value - max) < 1e-6) {
+    return 1;
+  }
+  return value % max / Number.parseFloat(max);
+};
+const hexOne = (value) => {
+  value = Math.min(Math.round(value), 255);
+  const high = Math.floor(value / 16);
+  const low = value % 16;
+  return `${INT_HEX_MAP[high] || high}${INT_HEX_MAP[low] || low}`;
+};
+const toHex = ({ r, g, b }) => {
+  if (Number.isNaN(+r) || Number.isNaN(+g) || Number.isNaN(+b))
+    return "";
+  return `#${hexOne(r)}${hexOne(g)}${hexOne(b)}`;
+};
+const hsl2hsv = ({ hue, sat, light }) => {
+  sat = sat / 100;
+  light = light / 100;
+  let smin = sat;
+  const lmin = Math.max(light, 0.01);
+  light *= 2;
+  sat *= light <= 1 ? light : 2 - light;
+  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  const v = (light + sat) / 2;
+  const sv = light === 0 ? 2 * smin / (lmin + smin) : 2 * sat / (light + sat);
+  return {
+    h: hue,
+    s: sv * 100,
+    v: v * 100
+  };
+};
+const rgb2hsv = ({ r, g, b }) => {
+  r = normalized(r, 255);
+  g = normalized(g, 255);
+  b = normalized(b, 255);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h;
+  const v = max;
+  const d = max - min;
+  const s = max === 0 ? 0 : d / max;
+  if (max === min) {
+    h = 0;
+  } else {
+    switch (max) {
+      case r: {
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      }
+      case g: {
+        h = (b - r) / d + 2;
+        break;
+      }
+      case b: {
+        h = (r - g) / d + 4;
+        break;
+      }
+    }
+    h /= 6;
+  }
+  return { h: h * 360, s: s * 100, v: v * 100 };
+};
+const hsv2rgb = ({ h, s, v }) => {
+  h = normalized(h, 360) * 6;
+  s = normalized(s, 100);
+  v = normalized(v, 100);
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const mod = i % 6;
+  const r = [v, q, p, p, t, v][mod];
+  const g = [t, v, v, q, p, p][mod];
+  const b = [p, p, t, v, v, q][mod];
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
 };
 class Color {
-  constructor(value, alpha = false) {
-    this.hex = "#000";
-    this.h = 0;
-    this.s = 0;
-    this.v = 0;
-    this.a = 100;
-    this.preH = 0;
+  constructor(opts) {
+    this._hue = 0;
+    this._sat = 100;
+    this._value = 100;
+    this._alpha = 100;
     this.enableAlpha = false;
-    this.reset(value);
-    this.enableAlpha = alpha;
-  }
-  reset(hex) {
-    if (this.hex === "transparent") {
-      this.h = 0;
-      this.s = 0;
-      this.v = 0;
-      this.a = 0;
+    this.format = "hex";
+    this.value = "";
+    for (const opt in opts) {
+      if (opt in opts) {
+        this[opt] = opts[opt];
+      }
+    }
+    if (opts.value) {
+      this.fromString(opts.value);
+    } else {
+      this.onChange();
+    }
+  }
+  get(prop) {
+    if (prop === "alpha") {
+      return Math.floor(this._alpha);
+    }
+    return this[`_${prop}`];
+  }
+  set(props, value) {
+    if (arguments.length === 1 && typeof props === "object") {
+      for (const p in props) {
+        if (Object.hasOwn(props, p)) {
+          this.set(p, props[p]);
+        }
+      }
       return;
     }
-    this.hex = normalizeHexColor(hex);
-    const { r, g, b, a } = hexToRgb(this.hex);
-    const { h, s, v } = rgb([r, g, b, a]).hsv().object();
-    this.h = h;
-    this.s = s;
-    this.v = v;
-    this.a = a;
-    this.preH = h;
+    this[`_${props}`] = value;
+    this.onChange();
   }
-  set({ h, s, v, a }) {
-    this.h = h != null ? h : this.h;
-    this.s = s != null ? s : this.s;
-    this.v = v != null ? v : this.v;
-    this.a = a != null ? a : this.a;
+  compare(color) {
+    return Math.abs(color._hue - this._hue) < 2 && Math.abs(color._sat - this._sat) < 1 && Math.abs(color._value - this._value) < 1 && Math.abs(color._alpha - this._alpha) < 1;
   }
-  setPrevH(val) {
-    this.preH = val;
+  isHSL(value) {
+    return value.includes("hsl");
   }
-  /**
-   *
-   * @returns [R,G,B]
-   */
-  getRGB() {
-    return hsv(this.h, this.s, this.v).rgb().array();
+  isHsv(value) {
+    return value.includes("hsv");
+  }
+  isRgb(value) {
+    return value.includes("rgb");
   }
-  getHex() {
-    if (!this.enableAlpha) {
-      return hsv(this.h, this.s, this.v).hex().toString();
+  isHex(value) {
+    return value.includes("#");
+  }
+  splitPart(value, regExp) {
+    return value.replace(regExp, "").split(/\s|,/g).filter((v) => v).map((val, idx) => {
+      return idx > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10);
+    });
+  }
+  onHsv(value) {
+    const parts = this.splitPart(value, /hsva|hsv|\(|\)/gm);
+    if (parts.length === 4) {
+      this._alpha = Number.parseFloat(String(parts[3])) * 100;
+    } else {
+      this._alpha = 100;
+    }
+    if (parts.length >= 3) {
+      this.fromHSV({
+        h: parts[0],
+        s: parts[1],
+        v: parts[2]
+      });
+    }
+  }
+  onRgb(value) {
+    const rgbRegExp = /rgba|rgb|\(|\)/gm;
+    const parts = this.splitPart(value, rgbRegExp);
+    if (parts.length === 4) {
+      this._alpha = Number.parseFloat(String(parts[3])) * 100;
+    } else {
+      this._alpha = 100;
+    }
+    if (parts.length >= 3) {
+      const { h, s, v } = rgb2hsv({ r: parts[0], g: parts[1], b: parts[2] });
+      this.fromHSV({ h, s, v });
+    }
+  }
+  onHex(value) {
+    const hex = value.replace("#", "").trim();
+    const isValidHex = (hex2) => /^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(hex2);
+    if (!isValidHex(hex)) {
+      return;
+    }
+    let [r, g, b] = [0, 0, 0];
+    if (hex.length === 3) {
+      r = parseHex(hex[0] + hex[0]);
+      g = parseHex(hex[1] + hex[1]);
+      b = parseHex(hex[2] + hex[2]);
+    } else if (hex.length === 6 || hex.length === 8) {
+      r = parseHex(hex.slice(0, 2));
+      g = parseHex(hex.slice(2, 4));
+      b = parseHex(hex.slice(4, 6));
+    }
+    if (hex.length === 8) {
+      this._alpha = parseHex(hex.slice(6)) / 255 * 100;
+    } else if (hex.length === 3 || hex.length === 6) {
+      this._alpha = 100;
+    }
+    const { h, s, v } = rgb2hsv({ r, g, b });
+    this.fromHSV({ h, s, v });
+  }
+  onHsl(value) {
+    const parts = value.replace(/hsla|hsl\(|\)gm/, "").split(/\s|,/g).filter((val) => val).map((val, idx) => {
+      return idx > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10);
+    });
+    if (parts.length === 4) {
+      this._alpha = Number.parseFloat(String(parts[3])) * 100;
+    } else {
+      this._alpha = 100;
+    }
+    if (parent.length >= 3) {
+      const { h, s, v } = hsl2hsv({
+        hue: parts[0],
+        sat: parts[1],
+        light: parts[2]
+      });
+      this.fromHSV({ h, s, v });
     }
-    return hsv(this.h, this.s, this.v, this.a / 100).hexa().toString();
   }
   /**
-   *
-   * @returns [h,s,l]
+   * @effect 会修改 this._hue, this._sat, this._value
    */
-  getHSL() {
-    return hsv(this.h, this.s, this.v).hsl().unitArray();
+  fromHSV({ h, s, v }) {
+    this._hue = Math.max(0, Math.min(360, h));
+    this._sat = Math.max(0, Math.min(100, s));
+    this._value = Math.max(0, Math.min(100, v));
+    this.onChange();
+  }
+  fromString(value) {
+    if (!value) {
+      this._hue = 0;
+      this._sat = 0;
+      this._value = 0;
+      this.onChange();
+      return;
+    }
+    if (this.isHSL(value)) {
+      this.onHsl(value);
+    }
+    if (this.isHsv(value)) {
+      this.onHsv(value);
+    }
+    if (this.isRgb(value)) {
+      this.onRgb(value);
+    }
+    if (this.isHex(value)) {
+      this.onHex(value);
+    }
+  }
+  toRgb() {
+    return hsv2rgb({
+      h: this._hue,
+      s: this._sat,
+      v: this._value
+    });
   }
-  getHSV() {
-    return {
-      h: this.h,
-      s: this.s,
-      v: this.v,
-      a: this.a
-    };
+  toRgba() {
+    return __spreadProps(__spreadValues({}, hsv2rgb({
+      h: this._hue,
+      s: this._sat,
+      v: this._value
+    })), {
+      a: this._alpha / 100
+    });
   }
-  get(key) {
-    return this[key];
+  onChange() {
+    const { _hue, _sat, _value, _alpha, format, enableAlpha } = this;
+    if (!enableAlpha) {
+      switch (format) {
+        case "hsl": {
+          let [_, sat, light] = hsv2hsl({
+            hue: _hue,
+            sat: _sat / 100,
+            val: _value / 100
+          });
+          sat = Math.round(sat * 100);
+          light = Math.round(light * 100);
+          this.value = `hsl(${_hue}, ${sat}%, ${light}%)`;
+          break;
+        }
+        case "hsv": {
+          this.value = `hsv(${_hue}, ${Math.round(_sat)}%, ${Math.round(_value)}%)`;
+          break;
+        }
+        case "rgb": {
+          const { r, g, b } = hsv2rgb({ h: _hue, s: _sat, v: _value });
+          this.value = `rgb(${r},${g},${b})`;
+          break;
+        }
+        default: {
+          this.value = toHex(
+            hsv2rgb({
+              h: _hue,
+              s: _sat,
+              v: _value
+            })
+          );
+        }
+      }
+      return;
+    }
+    switch (format) {
+      case "hsl": {
+        let [_, sat, light] = hsv2hsl({
+          hue: _hue,
+          sat: _sat / 100,
+          val: _value / 100
+        });
+        sat = Math.round(sat * 100);
+        light = Math.round(light * 100);
+        this.value = `hsla(${_hue}, ${sat}%, ${light}%, ${this.get("alpha") / 100})`;
+        break;
+      }
+      case "hsv": {
+        this.value = `hsva(${_hue}, ${Math.round(_sat)}%, ${Math.round(_value)}%, ${this.get("alpha") / 100})`;
+        break;
+      }
+      case "hex": {
+        this.value = `${toHex(
+          hsv2rgb({
+            h: _hue,
+            s: _sat,
+            v: _value
+          })
+        )}${hexOne(_alpha * 255 / 100)}`;
+        break;
+      }
+      default: {
+        const { r, g, b } = hsv2rgb({
+          h: _hue,
+          s: _sat,
+          v: _value
+        });
+        this.value = `rgba(${r}, ${g}, ${b}, ${this.get("alpha") / 100})`;
+      }
+    }
   }
 }
 export {
-  Color as default,
-  normalizeHexColor
+  Color
 };

package/color-picker/utils/hsv-to-rgb.js

@@ -0,0 +1,59 @@
+import "../../chunk-G2ADBYYC.js";
+const splitPart = (value, regExp) => {
+  return value.replace(regExp, "").split(/\s|,/g).filter((v) => v).map((val, idx) => {
+    return idx > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10);
+  });
+};
+const parseHSV = (value) => {
+  const parts = splitPart(value, /hsva|hsv|\(|\)/gm);
+  if (parts.length >= 3) {
+    return hsv2rgb({
+      h: parts[0],
+      s: parts[1],
+      v: parts[2]
+    });
+  }
+  return { r: 0, g: 0, b: 0 };
+};
+const isString = (val) => typeof val === "string";
+const isOnePointZero = (n) => {
+  return isString(n) && n.includes(".") && Number.parseFloat(n) === 1;
+};
+const isPercentage = (n) => {
+  return isString(n) && n.includes("%");
+};
+const normalized = (value, max) => {
+  if (isOnePointZero(value))
+    value = "100%";
+  const processPercent = isPercentage(value);
+  value = Math.min(max, Math.max(0, Number.parseFloat(`${value}`)));
+  if (processPercent) {
+    value = Number.parseInt(`${value * max}`, 10) / 100;
+  }
+  if (Math.abs(value - max) < 1e-6) {
+    return 1;
+  }
+  return value % max / Number.parseFloat(max);
+};
+const hsv2rgb = ({ h, s, v }) => {
+  h = normalized(h, 360) * 6;
+  s = normalized(s, 100);
+  v = normalized(v, 100);
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const mod = i % 6;
+  const r = [v, q, p, p, t, v][mod];
+  const g = [t, v, v, q, p, p][mod];
+  const b = [p, p, t, v, v, q][mod];
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
+};
+export {
+  parseHSV
+};

package/color-picker/vue.js

@@ -1,5 +1,6 @@
 import "../chunk-G2ADBYYC.js";
-import { toggleVisible, useEvent } from "./index";
+import { updateModelValue, toggleVisible, useEvent } from "./index";
+import { Color } from "./utils/color";
 const api = ["state", "changeVisible", "onConfirm", "onCancel", "onHueUpdate", "onSVUpdate", "onColorUpdate"];
 const renderless = (props, ctx, { emit }) => {
   var _a, _b, _c;
@@ -28,16 +29,34 @@ const renderless = (props, ctx, { emit }) => {
     triggerBg: ctx.ref(modelValue.value),
     size,
     stack,
-    predefineStack
+    predefineStack,
+    enablePredefineColor: ctx.computed(() => props.enablePredefineColor),
+    enableHistory: ctx.computed(() => props.enableHistory)
   });
-  ctx.watch(props, () => {
-    hex.value = props.modelValue;
-  });
-  ctx.watch(hex, () => {
-    emit("update:modelValue", hex.value);
+  const color = new Color({
+    value: props.modelValue,
+    format: props.format,
+    enableAlpha: props.alpha
   });
+  ctx.watch(
+    () => [props.alpha, props.format],
+    () => {
+      color.enableAlpha = props.alpha;
+      color.format = props.format || color.format;
+      color.onChange();
+      updateModelValue(color.value, emit);
+    }
+  );
+  ctx.watch(
+    () => props.modelValue,
+    () => {
+      color.fromString(props.modelValue);
+      const { r, g, b, a } = color.toRgba();
+      state.hex = `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+  );
   const changeVisible = toggleVisible(isShow);
-  const { onConfirm, onCancel } = useEvent(hex, emit, changeVisible);
+  const { onConfirm, onCancel } = useEvent(state, emit, changeVisible, color);
   const api2 = {
     state,
     changeVisible,

package/color-select-panel/alpha-select/index.js

@@ -1,20 +1,71 @@
 import "../../chunk-G2ADBYYC.js";
-const calcLeftByAlpha = (wrapper, thumb, alpha) => {
-  return Math.round(alpha * (wrapper.offsetWidth - thumb.offsetWidth / 2) / 100);
+import { getClientXY } from "../utils/getClientXY";
+const initState = ({ ref, reactive }) => {
+  const background = ref("");
+  const left = ref(0);
+  const state = reactive({ background, left });
+  return state;
 };
-const updateThumb = (alpha, thumb, wrapper) => {
-  thumb.style.left = `${calcLeftByAlpha(wrapper, thumb, alpha)}px`;
+const useEvent = (state, slider, alphaWrapper, alphaThumb, props) => {
+  const onDrag = (event) => {
+    if (!slider.value || !alphaThumb.value) {
+      return;
+    }
+    const el = alphaWrapper.value;
+    const rect = el.getBoundingClientRect();
+    const { clientX } = getClientXY(event);
+    let left = clientX - rect.left;
+    left = Math.max(alphaThumb.value.offsetWidth / 2, left);
+    left = Math.min(left, rect.width - alphaThumb.value.offsetWidth / 2);
+    const alpha = Math.round(
+      (left - alphaThumb.value.offsetWidth / 2) / (rect.width - alphaThumb.value.offsetWidth) * 100
+    );
+    props.color.set("alpha", alpha);
+  };
+  const onClick = (event) => {
+    if (event.target !== alphaThumb.value) {
+      onDrag(event);
+    }
+  };
+  const getLeft = () => {
+    const thumb = alphaThumb.value;
+    if (!thumb) {
+      return 0;
+    }
+    const el = alphaWrapper.value;
+    if (!el) {
+      return 0;
+    }
+    const alpha = props.color.get("alpha");
+    return alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100;
+  };
+  const getBackground = () => {
+    if (props.color && props.color.value) {
+      const { r, g, b } = props.color.toRgb();
+      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
+    }
+    return "";
+  };
+  const update = () => {
+    state.left = getLeft();
+    state.background = getBackground();
+  };
+  return { onDrag, onClick, update };
 };
-const onDrag = (event, bar, thumb, alpha) => {
-  const rect = bar.value.getBoundingClientRect();
-  const { clientX } = event;
-  let left = clientX - rect.left;
-  left = Math.max(thumb.value.offsetWidth / 2, left);
-  left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
-  alpha.value = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100);
+const initWatch = (props, update, { watch }) => {
+  watch(
+    () => props.color.get("alpha"),
+    () => update(),
+    { deep: true }
+  );
+  watch(
+    () => props.color,
+    () => update(),
+    { deep: true }
+  );
 };
 export {
-  calcLeftByAlpha,
-  onDrag,
-  updateThumb
+  initState,
+  initWatch,
+  useEvent
 };