@opentiny/vue-renderless 3.10.7 → 3.11.0

package/color-picker/color-select/index.js

@@ -0,0 +1,73 @@
+import "../../chunk-G2ADBYYC.js";
+const setPosition = (el, x, y) => {
+  el.style.top = `${y}px`;
+  el.style.left = `${x}px`;
+};
+const getXBySaturation = (s, width) => s * width / 100;
+const getYByLight = (l, height) => (100 - l) * height / 100;
+const updatePosition = (event, rect, cursor) => {
+  let x = event.clientX - rect.left;
+  let y = event.clientY - rect.top;
+  x = Math.max(0, x);
+  x = Math.min(x, rect.width);
+  y = Math.max(0, y);
+  y = Math.min(y, rect.height);
+  setPosition(cursor.value, x - 1 / 2 * cursor.value.offsetWidth, y - 1 / 2 * cursor.value.offsetWidth);
+  return { x, y };
+};
+const calcSaturation = (x, width) => x / width;
+const calcBrightness = (y, height) => 100 - y / height * 100;
+const getThumbTop = (wrapper, thumb, hue) => {
+  return Math.round(
+    hue * (wrapper.offsetHeight - thumb.offsetHeight / 2) / 360
+  );
+};
+const resetCursor = (s, v, wrapper, cursor, thumb, color, h) => {
+  const { width, height } = wrapper.value.getBoundingClientRect();
+  const x = getXBySaturation(s, width) - 1 / 2 * cursor.value.offsetWidth;
+  const y = getYByLight(v, height) - 1 / 2 * cursor.value.offsetWidth;
+  setPosition(cursor.value, x < 0 ? 0 : x, y < 0 ? 0 : y);
+  const thummbTop = getThumbTop(wrapper.value, thumb.value, color.get("h"));
+  thumb.value.style.top = `${thummbTop}px`;
+  h.value = color.get("h");
+};
+const updateCursor = (wrapper, cursor, emit) => {
+  return (color, event) => {
+    const rect = wrapper.value.getBoundingClientRect();
+    const { x, y } = updatePosition(event, rect, cursor);
+    color.set({
+      s: calcSaturation(x, rect.width) * 100,
+      v: calcBrightness(y, rect.height)
+    });
+    emit("sv-update", {
+      s: color.get("s"),
+      v: color.get("v")
+    });
+  };
+};
+const updateThumb = (bar, thumb, h, emit) => {
+  return (event) => {
+    const e = event;
+    const rect = bar.value.getBoundingClientRect();
+    let top = e.clientY - rect.top;
+    top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+    top = Math.max(thumb.value.offsetHeight / 2, top);
+    thumb.value.style.top = `${top}px`;
+    h.value = Math.round(
+      (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360
+    );
+    emit("hue-update", h.value);
+  };
+};
+export {
+  calcBrightness,
+  calcSaturation,
+  getThumbTop,
+  getXBySaturation,
+  getYByLight,
+  resetCursor,
+  setPosition,
+  updateCursor,
+  updatePosition,
+  updateThumb
+};

package/color-picker/color-select/vue.js

@@ -0,0 +1,67 @@
+import "../../chunk-G2ADBYYC.js";
+import { draggable } from "../utils/use-drag";
+import Color from "../utils/color";
+import {
+  getThumbTop,
+  resetCursor,
+  updateThumb,
+  updateCursor
+} from "./index";
+const api = ["state", "cursor", "wrapper", "bar", "thumb"];
+const renderless = (props, context, { emit }) => {
+  const cursor = context.ref();
+  const wrapper = context.ref();
+  const thumb = context.ref();
+  const bar = context.ref();
+  const color = new Color(props.color);
+  const h = context.ref(color.get("h"));
+  const background = context.computed(() => {
+    return `hsl(${h.value}deg, 100%, 50%)`;
+  });
+  const state = context.reactive({
+    background
+  });
+  const api2 = { state, cursor, wrapper, bar, thumb };
+  context.watch(() => props.color, (newColor) => {
+    color.reset(newColor);
+    resetCursor(color.get("s"), color.get("v"), wrapper, cursor, thumb, color, h);
+  });
+  context.onMounted(() => {
+    const update = {
+      thumb: updateThumb(bar, thumb, h, emit),
+      cursor: updateCursor(wrapper, cursor, emit)
+    };
+    const thumbTop = getThumbTop(wrapper.value, thumb.value, h.value);
+    thumb.value.style.top = `${thumbTop}px`;
+    resetCursor(
+      color.get("s"),
+      color.get("v"),
+      wrapper,
+      cursor,
+      thumb,
+      color,
+      h
+    );
+    draggable(wrapper.value, {
+      drag(event) {
+        update.cursor(color, event);
+      },
+      start(event) {
+        update.cursor(color, event);
+      }
+    });
+    draggable(bar.value, {
+      drag(event) {
+        update.thumb(event);
+      },
+      start(event) {
+        update.thumb(event);
+      }
+    });
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/color-picker/index.js

@@ -0,0 +1,52 @@
+import "../chunk-G2ADBYYC.js";
+const onConfirm = (hex, triggerBg, res, emit, isShow) => {
+  return (color) => {
+    res.value = color;
+    hex.value = res.value;
+    triggerBg.value = res.value;
+    emit("confirm", res.value);
+    isShow.value = false;
+  };
+};
+const onCancel = (res, triggerBg, emit, isShow, hex, color) => {
+  return () => {
+    if (isShow.value) {
+      res.value = triggerBg.value;
+      hex.value = triggerBg.value;
+      color.reset(hex.value);
+      emit("cancel");
+    }
+    isShow.value = false;
+  };
+};
+const onColorUpdate = (color, res, triggerBg) => {
+  res.value = color.getHex();
+};
+const onHSVUpdate = (color, res, hex) => {
+  return {
+    onHueUpdate: (hue) => {
+      color.set({ h: hue });
+      onColorUpdate(color, res);
+      hex.value = color.getHex();
+    },
+    onSVUpdate: ({ s, v }) => {
+      color.set({ s, v });
+      onColorUpdate(color, res);
+    }
+  };
+};
+const onAlphaUpdate = (color, res) => {
+  return {
+    update: (alpha) => {
+      color.set({ a: alpha });
+      onColorUpdate(color, res);
+    }
+  };
+};
+export {
+  onAlphaUpdate,
+  onCancel,
+  onColorUpdate,
+  onConfirm,
+  onHSVUpdate
+};

package/color-picker/utils/color.js

@@ -0,0 +1,96 @@
+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}`;
+};
+class Color {
+  constructor(value, alpha = false) {
+    this.hex = "#000";
+    this.h = 0;
+    this.s = 0;
+    this.v = 0;
+    this.a = 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;
+      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;
+  }
+  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;
+  }
+  /**
+   *
+   * @returns [R,G,B]
+   */
+  getRGB() {
+    return hsv(this.h, this.s, this.v).rgb().array();
+  }
+  getHex() {
+    if (!this.enableAlpha) {
+      return hsv(this.h, this.s, this.v).hex().toString();
+    }
+    return hsv(this.h, this.s, this.v, this.a / 100).hexa().toString();
+  }
+  /**
+   *
+   * @returns [h,s,l]
+   */
+  getHSL() {
+    return hsv(this.h, this.s, this.v).hsl().unitArray();
+  }
+  getHSV() {
+    return {
+      h: this.h,
+      s: this.s,
+      v: this.v,
+      a: this.a
+    };
+  }
+  get(key) {
+    return this[key];
+  }
+}
+export {
+  Color as default
+};

package/color-picker/utils/use-drag.js

@@ -0,0 +1,38 @@
+import "../../chunk-G2ADBYYC.js";
+let isDragging = false;
+function draggable(element, options) {
+  const moveFn = function(event) {
+    var _a;
+    (_a = options.drag) == null ? void 0 : _a.call(options, event);
+  };
+  const upFn = function(event) {
+    var _a;
+    document.removeEventListener("mousemove", moveFn);
+    document.removeEventListener("mouseup", upFn);
+    document.removeEventListener("touchmove", moveFn);
+    document.removeEventListener("touchend", upFn);
+    document.onselectstart = null;
+    document.ondragstart = null;
+    isDragging = false;
+    (_a = options.end) == null ? void 0 : _a.call(options, event);
+  };
+  const downFn = function(event) {
+    var _a;
+    if (isDragging)
+      return;
+    event.preventDefault();
+    document.onselectstart = () => false;
+    document.ondragstart = () => false;
+    document.addEventListener("mousemove", moveFn);
+    document.addEventListener("mouseup", upFn);
+    document.addEventListener("touchmove", moveFn);
+    document.addEventListener("touchend", upFn);
+    isDragging = true;
+    (_a = options.start) == null ? void 0 : _a.call(options, event);
+  };
+  element.addEventListener("mousedown", downFn);
+  element.addEventListener("touchstart", downFn);
+}
+export {
+  draggable
+};

package/color-picker/vue.js

@@ -0,0 +1,63 @@
+import "../chunk-G2ADBYYC.js";
+import Color from "./utils/color";
+import { onConfirm, onCancel, onHSVUpdate, onAlphaUpdate } from ".";
+const api = [
+  "state",
+  "changeVisible",
+  "cursor",
+  "onColorUpdate",
+  "onHueUpdate",
+  "onSVUpdate",
+  "onConfirm",
+  "onCancel",
+  "onAlphaUpdate",
+  "alpha"
+];
+const renderless = (props, context, { emit }) => {
+  var _a, _b, _c, _d;
+  const { modelValue, visible } = context.toRefs(props);
+  const hex = context.ref((_a = modelValue.value) != null ? _a : "transparent");
+  const res = context.ref((_b = modelValue.value) != null ? _b : "transparent");
+  const triggerBg = context.ref((_c = modelValue.value) != null ? _c : "transparent");
+  const isShow = context.ref((_d = visible == null ? void 0 : visible.value) != null ? _d : false);
+  const cursor = context.ref();
+  const changeVisible = (state2) => {
+    isShow.value = state2;
+  };
+  const color = new Color(hex.value, props.alpha);
+  const state = context.reactive({
+    isShow,
+    hex,
+    color,
+    triggerBg,
+    defaultValue: modelValue,
+    res
+  });
+  context.watch(modelValue, (newValue) => {
+    hex.value = newValue;
+    res.value = newValue;
+    triggerBg.value = newValue;
+    color.reset(hex.value);
+  });
+  context.watch(visible, (visible2) => {
+    isShow.value = visible2;
+  });
+  const { onHueUpdate, onSVUpdate } = onHSVUpdate(color, res, hex);
+  const { update } = onAlphaUpdate(color, res);
+  const api2 = {
+    state,
+    changeVisible,
+    onHueUpdate,
+    onSVUpdate,
+    onConfirm: onConfirm(hex, triggerBg, res, emit, isShow),
+    onCancel: onCancel(res, triggerBg, emit, isShow, hex, color),
+    onAlphaUpdate: update,
+    cursor,
+    alpha: props.alpha
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

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

@@ -0,0 +1,24 @@
+import "../../chunk-G2ADBYYC.js";
+const calcLeftByAlpha = (wrapper, thumb, alpha) => {
+  return Math.round(
+    alpha * (wrapper.offsetWidth - thumb.offsetWidth / 2) / 100
+  );
+};
+const updateThumb = (alpha, thumb, wrapper) => {
+  thumb.style.left = `${calcLeftByAlpha(wrapper, thumb, alpha)}px`;
+};
+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
+  );
+};
+export {
+  calcLeftByAlpha,
+  onDrag,
+  updateThumb
+};

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

@@ -0,0 +1,59 @@
+import "../../chunk-G2ADBYYC.js";
+import Color from "../utils/color";
+import { draggable } from "../utils/use-drag";
+import { onDrag, updateThumb } from ".";
+const api = ["state", "color", "slider", "alphaWrapper", "alphaThumb"];
+const renderless = (props, context, { emit }) => {
+  const hex = props.color;
+  const color = new Color(hex, props.alpha);
+  const [rr, gg, bb] = color.getRGB();
+  const r = context.ref(rr);
+  const g = context.ref(gg);
+  const b = context.ref(bb);
+  const slider = context.ref();
+  const alphaWrapper = context.ref();
+  const alphaThumb = context.ref();
+  const alpha = context.ref(color.get("a"));
+  context.watch(() => props.color, (hex2) => {
+    color.reset(hex2);
+    const [rr2, gg2, bb2] = color.getRGB();
+    r.value = rr2;
+    g.value = gg2;
+    b.value = bb2;
+    alpha.value = color.get("a");
+  });
+  context.watch(alpha, (newAlpha) => {
+    updateThumb(newAlpha, alphaThumb.value, alphaWrapper.value);
+    emit("alpha-update", alpha.value);
+  });
+  const background = context.computed(() => {
+    return `linear-gradient(to right, rgba(${r.value}, ${g.value}, ${b.value}, 0) 0%, rgba(${r.value}, ${g.value}, ${b.value}, 1) 100%)`;
+  });
+  const state = context.reactive({
+    background,
+    hex
+  });
+  const api2 = {
+    state,
+    color: props.color,
+    slider,
+    alphaWrapper,
+    alphaThumb
+  };
+  context.onMounted(() => {
+    updateThumb(alpha.value, alphaThumb.value, slider.value);
+    draggable(slider.value, {
+      drag(event) {
+        onDrag(event, slider, alphaThumb, alpha);
+      },
+      start(event) {
+        onDrag(event, slider, alphaThumb, alpha);
+      }
+    });
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

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

@@ -0,0 +1,73 @@
+import "../../chunk-G2ADBYYC.js";
+const setPosition = (el, x, y) => {
+  el.style.top = `${y}px`;
+  el.style.left = `${x}px`;
+};
+const getXBySaturation = (s, width) => s * width / 100;
+const getYByLight = (l, height) => (100 - l) * height / 100;
+const updatePosition = (event, rect, cursor) => {
+  let x = event.clientX - rect.left;
+  let y = event.clientY - rect.top;
+  x = Math.max(0, x);
+  x = Math.min(x, rect.width);
+  y = Math.max(0, y);
+  y = Math.min(y, rect.height);
+  setPosition(cursor.value, x - 1 / 2 * cursor.value.offsetWidth, y - 1 / 2 * cursor.value.offsetWidth);
+  return { x, y };
+};
+const calcSaturation = (x, width) => x / width;
+const calcBrightness = (y, height) => 100 - y / height * 100;
+const getThumbTop = (wrapper, thumb, hue) => {
+  return Math.round(
+    hue * (wrapper.offsetHeight - thumb.offsetHeight / 2) / 360
+  );
+};
+const resetCursor = (s, v, wrapper, cursor, thumb, color, h) => {
+  const { width, height } = wrapper.value.getBoundingClientRect();
+  const x = getXBySaturation(s, width) - 1 / 2 * cursor.value.offsetWidth;
+  const y = getYByLight(v, height) - 1 / 2 * cursor.value.offsetWidth;
+  setPosition(cursor.value, x < 0 ? 0 : x, y < 0 ? 0 : y);
+  const thummbTop = getThumbTop(wrapper.value, thumb.value, color.get("h"));
+  thumb.value.style.top = `${thummbTop}px`;
+  h.value = color.get("h");
+};
+const updateCursor = (wrapper, cursor, emit) => {
+  return (color, event) => {
+    const rect = wrapper.value.getBoundingClientRect();
+    const { x, y } = updatePosition(event, rect, cursor);
+    color.set({
+      s: calcSaturation(x, rect.width) * 100,
+      v: calcBrightness(y, rect.height)
+    });
+    emit("sv-update", {
+      s: color.get("s"),
+      v: color.get("v")
+    });
+  };
+};
+const updateThumb = (bar, thumb, h, emit) => {
+  return (event) => {
+    const e = event;
+    const rect = bar.value.getBoundingClientRect();
+    let top = e.clientY - rect.top;
+    top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+    top = Math.max(thumb.value.offsetHeight / 2, top);
+    thumb.value.style.top = `${top}px`;
+    h.value = Math.round(
+      (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360
+    );
+    emit("hue-update", h.value);
+  };
+};
+export {
+  calcBrightness,
+  calcSaturation,
+  getThumbTop,
+  getXBySaturation,
+  getYByLight,
+  resetCursor,
+  setPosition,
+  updateCursor,
+  updatePosition,
+  updateThumb
+};

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

@@ -0,0 +1,67 @@
+import "../../chunk-G2ADBYYC.js";
+import { draggable } from "../utils/use-drag";
+import Color from "../utils/color";
+import {
+  getThumbTop,
+  resetCursor,
+  updateThumb,
+  updateCursor
+} from "./index";
+const api = ["state", "cursor", "wrapper", "bar", "thumb"];
+const renderless = (props, context, { emit }) => {
+  const cursor = context.ref();
+  const wrapper = context.ref();
+  const thumb = context.ref();
+  const bar = context.ref();
+  const color = new Color(props.color);
+  const h = context.ref(color.get("h"));
+  const background = context.computed(() => {
+    return `hsl(${h.value}deg, 100%, 50%)`;
+  });
+  const state = context.reactive({
+    background
+  });
+  const api2 = { state, cursor, wrapper, bar, thumb };
+  context.watch(() => props.color, (newColor) => {
+    color.reset(newColor);
+    resetCursor(color.get("s"), color.get("v"), wrapper, cursor, thumb, color, h);
+  });
+  context.onMounted(() => {
+    const update = {
+      thumb: updateThumb(bar, thumb, h, emit),
+      cursor: updateCursor(wrapper, cursor, emit)
+    };
+    const thumbTop = getThumbTop(wrapper.value, thumb.value, h.value);
+    thumb.value.style.top = `${thumbTop}px`;
+    resetCursor(
+      color.get("s"),
+      color.get("v"),
+      wrapper,
+      cursor,
+      thumb,
+      color,
+      h
+    );
+    draggable(wrapper.value, {
+      drag(event) {
+        update.cursor(color, event);
+      },
+      start(event) {
+        update.cursor(color, event);
+      }
+    });
+    draggable(bar.value, {
+      drag(event) {
+        update.thumb(event);
+      },
+      start(event) {
+        update.thumb(event);
+      }
+    });
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/color-select-panel/index.js

@@ -0,0 +1,74 @@
+import "../chunk-G2ADBYYC.js";
+const onConfirm = (hex, triggerBg, res, emit, stack, enableHistory) => {
+  return () => {
+    hex.value = res.value;
+    triggerBg.value = res.value;
+    if (enableHistory) {
+      const itemIdx = Math.max(stack.value.indexOf(res.value), stack.value.indexOf(res.value.toLowerCase()), stack.value.indexOf(res.value.toUpperCase()));
+      if (itemIdx !== -1) {
+        stack.value.splice(itemIdx, 1);
+      }
+      stack.value.unshift(res.value);
+    }
+    emit("confirm", res.value);
+  };
+};
+const onCancel = (res, triggerBg, emit, isShow, hex, color) => {
+  return () => {
+    if (isShow.value) {
+      res.value = triggerBg.value;
+      hex.value = triggerBg.value;
+      color.reset(hex.value);
+      emit("cancel");
+    }
+  };
+};
+const onColorUpdate = (color, res) => {
+  res.value = color.getHex();
+};
+const onHSVUpdate = (color, res, hex, emit) => {
+  return {
+    onHueUpdate: (hue) => {
+      color.set({ h: hue });
+      onColorUpdate(color, res);
+      hex.value = color.getHex();
+      emit("hue-update", hue);
+    },
+    onSVUpdate: ({ s, v }) => {
+      color.set({ s, v });
+      onColorUpdate(color, res);
+      emit("sv-update", { s, v });
+    }
+  };
+};
+const onAlphaUpdate = (color, res) => {
+  return {
+    update: (alpha) => {
+      color.set({ a: alpha });
+      onColorUpdate(color, res);
+    }
+  };
+};
+const handleHistoryClick = (hex, res, color) => {
+  return (history) => {
+    hex.value = history;
+    res.value = history;
+    color.reset(history);
+  };
+};
+const handlePredefineClick = (hex, res, color) => {
+  return (selectedColor) => {
+    hex.value = selectedColor;
+    res.value = selectedColor;
+    color.reset(selectedColor);
+  };
+};
+export {
+  handleHistoryClick,
+  handlePredefineClick,
+  onAlphaUpdate,
+  onCancel,
+  onColorUpdate,
+  onConfirm,
+  onHSVUpdate
+};