mine-h5-ui/es/MeColorPicker/hooks.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { ref as l, useTemplateRef as i, watch as a, computed as m } from "vue";
import { colorType as p } from "./enums.js";
import { getDefaultValue as f, presetSize as g } from "./config.js";
import { rgbToRgba as d } from "./utils.js";
import { useColorTransform as h } from "../MeComposable/useColorTransform/index.js";
const w = () => {
  const e = l(!1), t = i("colorNode"), r = l();
  return { colorRect: r, dropdown: e, onToggle: () => {
    const { width: s, height: n, x: c, y: u } = t.value.getBoundingClientRect();
    r.value = { width: s, height: n, x: c, y: u }, e.value = !0;
  } };
}, C = (e) => ({ sizeValue: m(() => g[e.size]) }), V = ({ modelValue: e }) => {
  const t = l("");
  return a(
    e,
    (r) => {
      const o = f();
      r && Object.entries(o).forEach(([n, c]) => {
        o[n] = r[n] || c;
      });
      const s = h(o.value, [o.type, p.rgb]);
      t.value = d(s, o.alpha);
    },
    { immediate: !0, deep: !0 }
  ), { showColor: t };
};
export {
  w as useHandler,
  V as useRender,
  C as useSize
};