@opentiny/vue-renderless 3.11.8 → 3.12.0

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

@@ -1,69 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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/utils/use-drag.js

@@ -1,38 +0,0 @@
-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
-};