@opentiny/vue-renderless/color-select-panel/sv-select/index.js

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

import "../../chunk-G2ADBYYC.js";
import { getClientXY } from "../utils/getClientXY";
import { useContext } from "../utils/context";
const initState = (props, hooks) => {
  const { ref, computed, reactive } = hooks;
  const context = useContext(hooks);
  const cursorTop = ref(0);
  const cursorLeft = ref(0);
  const bg = ref("hsl(0, 100%, 50%)");
  const colorValue = computed(() => {
    const hue = context.activeColor.value.color.get("hue");
    const value = context.activeColor.value.color.get("value");
    return { hue, value };
  });
  const state = reactive({
    colorValue,
    bg,
    cursorLeft,
    cursorTop
  });
  return state;
};
const useUpdate = (state, props, wrapper, context) => {
  return () => {
    const el = wrapper.value;
    if (!el) {
      return;
    }
    const sat = context.activeColor.value.color.get("sat");
    const value = context.activeColor.value.color.get("value");
    const { clientWidth: width, clientHeight: height } = el;
    state.cursorLeft = sat * width / 100;
    state.cursorTop = (100 - value) * height / 100;
    state.bg = `hsl(${context.activeColor.value.color.get("hue")}, 100%, 50%)`;
  };
};
const useDrag = (state, wrapper, props, { emit }, context) => {
  return (event) => {
    const el = wrapper.value;
    const rect = el.getBoundingClientRect();
    const { clientX, clientY } = getClientXY(event);
    let left = clientX - rect.left;
    let top = clientY - rect.top;
    left = Math.max(0, left);
    left = Math.min(left, rect.width);
    top = Math.max(0, top);
    top = Math.min(top, rect.height);
    state.cursorLeft = Math.max(left, 0);
    state.cursorTop = Math.max(top, 0);
    const s = left / rect.width * 100;
    const v = 100 - top / rect.height * 100;
    emit("svUpdate", { s, v });
    context.activeColor.value.color.set({
      sat: s,
      value: v
    });
  };
};
const initWatch = (state, update, { watch }) => {
  watch(
    () => state.colorValue.value,
    () => update(),
    { deep: true }
  );
};
export {
  initState,
  initWatch,
  useDrag,
  useUpdate
};