@opentiny/vue-renderless/color-select-panel/hue-select/vue.js

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

import {
  __objRest,
  __spreadValues
} from "../../chunk-G2ADBYYC.js";
import { draggable } from "../utils/use-drag";
import { initDom, initState, useEvent, useOnClickBar } from ".";
import { useContext } from "../utils/context";
import { useColorPoints } from "../utils/color-points";
const api = ["state", "onSvReady", "bar", "thumb", "wrapper", "onClickBar"];
const renderless = (props, hooks, utils) => {
  const { onMounted, watch } = hooks;
  const { emit } = utils;
  const { thumb, bar, wrapper } = initDom(hooks);
  const state = initState(props, hooks);
  const ctx = useContext(hooks);
  const { onSvReady, onDrag, update, getLeft, getThumbTop } = useEvent(
    { thumb, bar, wrapper },
    state,
    props,
    utils,
    ctx
  );
  const _a = useColorPoints(
    { wrapper: bar, points: [ctx.activeColor.value] },
    hooks,
    ctx
  ), { addPoint, setActivePoint } = _a, rest = __objRest(_a, ["addPoint", "setActivePoint"]);
  const onClickBar = useOnClickBar(__spreadValues({ addPoint, setActivePoint }, rest), { bar, thumb, wrapper }, getLeft);
  const api2 = {
    state,
    onSvReady,
    bar,
    thumb,
    wrapper,
    onClickBar
  };
  onMounted(() => {
    if (!bar.value || !thumb.value) {
      return;
    }
    const dragConfig = {
      drag: (event) => {
        onDrag(event);
      },
      end: (event) => {
        onDrag(event);
      }
    };
    draggable(bar.value, dragConfig);
    draggable(thumb.value, dragConfig);
    emit("hueReady", update);
    update();
  });
  watch(
    () => ctx.activeColor.value.color,
    () => {
      state.thumbLeft = getThumbTop();
    },
    { immediate: true, deep: true }
  );
  return api2;
};
export {
  api,
  renderless
};