@opentinyvue/vue-renderless 3.21.0

package/color-picker/utils/color.js

@@ -0,0 +1,377 @@
+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(opts) {
+    this._hue = 0;
+    this._sat = 100;
+    this._value = 100;
+    this._alpha = 100;
+    this.enableAlpha = false;
+    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[`_${props}`] = value;
+    this.onChange();
+  }
+  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;
+  }
+  isHSL(value) {
+    return value.includes("hsl");
+  }
+  isHsv(value) {
+    return value.includes("hsv");
+  }
+  isRgb(value) {
+    return value.includes("rgb");
+  }
+  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 });
+    }
+  }
+  /**
+   * @effect 会修改 this._hue, this._sat, this._value
+   */
+  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
+    });
+  }
+  toRgba() {
+    return __spreadProps(__spreadValues({}, hsv2rgb({
+      h: this._hue,
+      s: this._sat,
+      v: this._value
+    })), {
+      a: this._alpha / 100
+    });
+  }
+  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
+};

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

@@ -0,0 +1,71 @@
+import "../chunk-G2ADBYYC.js";
+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;
+  const { modelValue, visible, predefine, size, history } = ctx.toRefs(props);
+  const isShow = ctx.ref(visible.value);
+  const hex = ctx.ref((_a = modelValue.value) != null ? _a : "transparent");
+  const stack = ctx.ref([...(_b = history == null ? void 0 : history.value) != null ? _b : []]);
+  const predefineStack = ctx.ref([...(_c = predefine == null ? void 0 : predefine.value) != null ? _c : []]);
+  ctx.watch(
+    predefine,
+    (newPredefine) => {
+      predefineStack.value = [...newPredefine];
+    },
+    { deep: true }
+  );
+  ctx.watch(
+    history,
+    (newHistory) => {
+      stack.value = [...newHistory];
+    },
+    { deep: true }
+  );
+  const state = ctx.reactive({
+    isShow,
+    hex,
+    triggerBg: ctx.ref(modelValue.value),
+    size,
+    stack,
+    predefineStack,
+    enablePredefineColor: ctx.computed(() => props.enablePredefineColor),
+    enableHistory: ctx.computed(() => props.enableHistory)
+  });
+  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(state, emit, changeVisible, color);
+  const api2 = {
+    state,
+    changeVisible,
+    onConfirm,
+    onCancel
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

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

@@ -0,0 +1,71 @@
+import "../../chunk-G2ADBYYC.js";
+import { getClientXY } from "../utils/getClientXY";
+const initState = ({ ref, reactive }) => {
+  const background = ref("");
+  const left = ref(0);
+  const state = reactive({ background, left });
+  return state;
+};
+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 initWatch = (props, update, { watch }) => {
+  watch(
+    () => props.color.get("alpha"),
+    () => update(),
+    { deep: true }
+  );
+  watch(
+    () => props.color,
+    () => update(),
+    { deep: true }
+  );
+};
+export {
+  initState,
+  initWatch,
+  useEvent
+};

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

@@ -0,0 +1,43 @@
+import "../../chunk-G2ADBYYC.js";
+import { draggable } from "../utils/use-drag";
+import { initState, initWatch, useEvent } from ".";
+const api = ["state", "color", "slider", "alphaWrapper", "alphaThumb", "onClick"];
+const renderless = (props, hooks, utils) => {
+  const { onMounted, ref } = hooks;
+  const { emit } = utils;
+  const slider = ref();
+  const alphaWrapper = ref();
+  const alphaThumb = ref();
+  const state = initState(hooks);
+  const { update, onClick, onDrag } = useEvent(state, slider, alphaWrapper, alphaThumb, props);
+  onMounted(() => {
+    if (!slider.value || !alphaThumb.value) {
+      return;
+    }
+    const dragConfig = {
+      drag: (event) => {
+        onDrag(event);
+      },
+      end: (event) => {
+        onDrag(event);
+      }
+    };
+    draggable(slider.value, dragConfig);
+    draggable(alphaThumb.value, dragConfig);
+    update();
+    emit("ready", update);
+  });
+  initWatch(props, update, hooks);
+  const api2 = {
+    state,
+    slider,
+    alphaWrapper,
+    alphaThumb,
+    onClick
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

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

@@ -0,0 +1,57 @@
+import "../../chunk-G2ADBYYC.js";
+import { getClientXY } from "../utils/getClientXY";
+const initState = (props, { reactive, ref, computed }) => {
+  const hueValue = computed(() => props.color.get("hue"));
+  const thumbTop = ref(0);
+  const state = reactive({ hueValue, thumbTop });
+  return state;
+};
+const initDom = ({ ref }) => {
+  return {
+    thumb: ref(),
+    bar: ref(),
+    wrapper: ref()
+  };
+};
+const useEvent = ({ thumb, bar }, state, props, { emit }) => {
+  const onSvReady = (update2) => {
+    emit("svReady", update2);
+  };
+  const getThumbTop = () => {
+    if (!thumb.value) {
+      return 0;
+    }
+    const hue = props.color.get("hue");
+    if (!bar.value) {
+      return 0;
+    }
+    return hue * (bar.value.offsetHeight - thumb.value.offsetHeight / 2) / 360;
+  };
+  const update = () => {
+    state.thumbTop = getThumbTop();
+  };
+  const onDrag = (event) => {
+    if (!bar.value || !thumb.value) {
+      return;
+    }
+    const el = bar.value;
+    if (!el) {
+      return;
+    }
+    const rect = el == null ? void 0 : el.getBoundingClientRect();
+    const { clientY } = getClientXY(event);
+    let top = clientY - rect.top;
+    top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+    top = Math.max(thumb.value.offsetHeight / 2, top);
+    const hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
+    state.thumbTop = top;
+    emit("hueUpdate", hue);
+    props.color.set("hue", hue);
+  };
+  return { update, onDrag, onSvReady };
+};
+export {
+  initDom,
+  initState,
+  useEvent
+};