@opentiny/vue-renderless 3.19.5 → 3.20.1

package/color-select-panel/sv-select/vue.js

@@ -0,0 +1,32 @@
+import "../../chunk-G2ADBYYC.js";
+import { draggable } from "../utils/use-drag";
+import { initState, initWatch, useDrag, useUpdate } from "./index";
+const api = ["state", "wrapper", "cursor"];
+const renderless = (props, hooks, utils) => {
+  const state = initState(props, hooks);
+  const { ref, onMounted } = hooks;
+  const { emit } = utils;
+  const wrapper = ref();
+  const update = useUpdate(state, props, wrapper);
+  const onDrag = useDrag(state, wrapper, props, utils);
+  initWatch(state, update, hooks);
+  onMounted(() => {
+    const drag = {
+      drag: (event) => {
+        onDrag(event);
+      },
+      end: (event) => {
+        onDrag(event);
+      }
+    };
+    draggable(wrapper.value, drag);
+    update();
+    emit("ready", update);
+  });
+  const api2 = { state, wrapper };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/color-select-panel/utils/color.js

@@ -1,102 +1,365 @@
 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}`;
+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.preH = h;
-    this.h = h;
-    this.s = s;
-    this.v = v;
-    this.a = a;
+    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);
+    }
   }
-  getHSV() {
-    return {
-      h: this.h,
-      s: this.s,
-      v: this.v,
-      a: this.a
-    };
+  toRgb() {
+    return hsv2rgb({
+      h: this._hue,
+      s: this._sat,
+      v: this._value
+    });
   }
-  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-select-panel/utils/getClientXY.js

@@ -0,0 +1,54 @@
+import "../../chunk-G2ADBYYC.js";
+const isInContainer = (el, container) => {
+  if (!el || !container)
+    return false;
+  const elRect = el.getBoundingClientRect();
+  let containerRect;
+  if (container instanceof Element) {
+    containerRect = container.getBoundingClientRect();
+  } else {
+    containerRect = {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  }
+  return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
+};
+const getOffsetTop = (el) => {
+  let offset = 0;
+  let parent = el;
+  while (parent) {
+    offset += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  return offset;
+};
+const getOffsetTopDistance = (el, containerEl) => {
+  return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl));
+};
+const getClientXY = (event) => {
+  let clientX;
+  let clientY;
+  if (event.type === "touchend") {
+    clientY = event.changedTouches[0].clientY;
+    clientX = event.changedTouches[0].clientX;
+  } else if (event.type.startsWith("touch")) {
+    clientY = event.touches[0].clientY;
+    clientX = event.touches[0].clientX;
+  } else {
+    clientY = event.clientY;
+    clientX = event.clientX;
+  }
+  return {
+    clientX,
+    clientY
+  };
+};
+export {
+  getClientXY,
+  getOffsetTop,
+  getOffsetTopDistance,
+  isInContainer
+};

package/color-select-panel/vue.js

@@ -1,85 +1,60 @@
 import "../chunk-G2ADBYYC.js";
-import Color from "./utils/color";
-import { onConfirm, onCancel, onHSVUpdate, onAlphaUpdate, handleHistoryClick, handlePredefineClick } from ".";
+import { initApi, initState, initWatch } from "./index";
 const api = [
   "state",
-  "changeVisible",
-  "cursor",
-  "onColorUpdate",
-  "onHueUpdate",
-  "onSVUpdate",
+  "open",
+  "close",
+  "resetColor",
   "onConfirm",
   "onCancel",
-  "onAlphaUpdate",
+  "submitValue",
+  "clear",
+  "onHueReady",
+  "onSvReady",
+  "onAlphaReady",
+  "onPredefineColorClick",
   "onHistoryClick",
-  "onPredefineColorClick"
+  "onClickOutside"
 ];
-const renderless = (props, context, { emit }) => {
-  var _a, _b, _c, _d, _e, _f;
-  const { modelValue, visible, history, predefine } = context.toRefs(props);
-  const hex = context.ref((_a = modelValue == null ? void 0 : modelValue.value) != null ? _a : "transparent");
-  const res = context.ref((_b = modelValue == null ? void 0 : modelValue.value) != null ? _b : "transparent");
-  const pre = context.ref(res.value);
-  const triggerBg = context.ref((_c = modelValue == null ? void 0 : modelValue.value) != null ? _c : "transparent");
-  const isShow = context.ref((_d = visible == null ? void 0 : visible.value) != null ? _d : false);
-  const cursor = context.ref();
-  const stack = context.ref([...(_e = history == null ? void 0 : history.value) != null ? _e : []]);
-  const predefineStack = context.ref([...(_f = predefine == null ? void 0 : predefine.value) != null ? _f : []]);
-  const enableHistory = history == null ? void 0 : history.value;
-  const enablePredefineColor = predefine == null ? void 0 : predefine.value;
-  const changeVisible = (state2) => {
-    isShow.value = state2;
-  };
-  const color = context.ref(new Color(hex.value, props.alpha));
-  const state = context.reactive({
-    isShow,
-    hex,
-    color,
-    triggerBg,
-    defaultValue: modelValue,
-    res,
-    stack,
-    predefineStack,
-    enableHistory,
-    enablePredefineColor
-  });
-  context.watch(
-    predefine,
-    (newPredefine) => {
-      predefineStack.value = [...newPredefine];
-    },
-    { deep: true }
-  );
-  context.watch(
-    history,
-    (newHistory) => {
-      stack.value = [...newHistory];
-    },
-    { deep: true }
-  );
-  context.watch(modelValue, (newValue) => {
-    hex.value = newValue;
-    res.value = newValue;
-    color.value.reset(newValue);
-    state.color.reset(newValue);
-  });
-  context.watch(visible, (visible2) => {
-    isShow.value = visible2;
-  });
-  const { onHueUpdate, onSVUpdate } = onHSVUpdate(color, res, hex, emit);
-  const { update } = onAlphaUpdate(color, res, emit);
+const renderless = (props, hooks, utils) => {
+  const state = initState(props, hooks);
+  const {
+    open,
+    close,
+    resetColor,
+    onConfirm,
+    onCancel,
+    submitValue,
+    clear,
+    onHueReady,
+    onSvReady,
+    onAlphaReady,
+    onPredefineColorClick,
+    onHistoryClick,
+    onClickOutside
+  } = initApi(props, state, utils);
   const api2 = {
     state,
-    changeVisible,
-    onHueUpdate,
-    onSVUpdate,
-    onConfirm: onConfirm(hex, pre, res, emit, stack, enableHistory, color),
-    onCancel: onCancel(res, pre, emit, isShow, hex, color),
-    onAlphaUpdate: update,
-    onHistoryClick: handleHistoryClick(hex, res, color, emit),
-    onPredefineColorClick: handlePredefineClick(hex, res, color, emit),
-    cursor
+    open,
+    close,
+    resetColor,
+    onConfirm,
+    onCancel,
+    submitValue,
+    clear,
+    onHueReady,
+    onSvReady,
+    onAlphaReady,
+    onPredefineColorClick,
+    onHistoryClick,
+    onClickOutside
   };
+  initWatch(state, props, hooks, utils);
+  hooks.onMounted(() => {
+    if (props.modelValue) {
+      state.input = state.currentColor;
+    }
+  });
   return api2;
 };
 export {

package/common/deps/popper.js

@@ -508,7 +508,7 @@ class Popper {
       if (this._options.updateHiddenPopperOnScroll) {
         this.state.updateBoundFn();
       } else {
-        if (isDisplayNone(this._popper))
+        if (isDisplayNone(this._reference))
           return;
         this.state.updateBoundFn();
       }

package/common/deps/useUserAgent.js

@@ -0,0 +1,16 @@
+import "../../chunk-G2ADBYYC.js";
+import { isServer } from "./dom";
+function getIsIOS() {
+  if (isServer)
+    return false;
+  return window.navigator && window.navigator.userAgent && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || // The new iPad Pro Gen3 does not identify itself as iPad, but as Macintosh.
+  // https://github.com/vueuse/vueuse/issues/3577
+  window.navigator.maxTouchPoints > 2 && /iPad|Macintosh/.test(window.navigator.userAgent));
+}
+const useUserAgent = () => {
+  const isIOS = getIsIOS();
+  return { isIOS };
+};
+export {
+  useUserAgent
+};