@opentiny/vue-renderless/color-select-panel/alpha-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 = (hooks) => {
  const { ref, reactive } = hooks;
  const ctx = useContext(hooks);
  const background = ref(ctx.activeColor.value.color.value);
  const left = ref(0);
  const state = reactive({ background, left, activeColor: ctx.activeColor });
  return state;
};
const useEvent = (state, slider, alphaWrapper, alphaThumb, props, ctx) => {
  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
    );
    ctx.activeColor.value.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 = ctx.activeColor.value.color.get("alpha");
    return alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100;
  };
  const getBackground = () => {
    if (ctx.activeColor && ctx.activeColor.value) {
      const { r, g, b } = ctx.activeColor.value.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 }, ctx) => {
  watch(
    () => ctx.activeColor.value.color,
    () => {
      update();
    },
    { deep: true }
  );
  watch(
    () => ctx.activeColor,
    () => update(),
    { deep: true }
  );
};
export {
  initState,
  initWatch,
  useEvent
};