vuux/dist/es/ColorPicker/src/hook/useColorPicker.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as s, computed as g, watch as j, nextTick as S, onMounted as D } from "vue";
import { Utils as B } from "@vuux/utils";
import { HSVtoRGB as J, RGBtoHEX as K, componentToHex as L, parseColor as N, HEXtoRGB as G, RGBtoHSV as O } from "../utils.mjs";
const R = (o, A, b, x, f, $, V) => {
  const F = B.snowflakeId(), k = s(0), y = s(0), M = g(() => b.value ? b.value.offsetWidth : 0), c = s(0), r = s(0), v = s(0), i = s(1), d = s(!1), h = s(!1), z = s(!1), U = g(() => {
    const e = `${o.width}px`;
    return {
      width: e,
      height: `${o.height}px`,
      minWidth: e,
      minHeight: `${o.height}px`
    };
  }), C = g(() => Math.round(i.value * 100) / 100), W = () => {
    const e = /^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6})/, t = /^(rgba?)\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/;
    e.test(o.modelValue) ? d.value = !0 : t.test(o.modelValue) ? d.value = !1 : d.value = !0;
  }, m = g(() => {
    const { r: e, g: t, b: a } = J({ h: c.value, s: r.value, v: v.value }), l = K({ r: e, g: t, b: a }), u = C.value === 1, n = L(Math.round(C.value * 255));
    return d.value ? u ? l : `${l}${n}` : u ? `rgb(${e}, ${t}, ${a})` : `rgba(${e}, ${t}, ${a}, ${C.value})`;
  }), X = () => {
    !x.value || !$.value || !f.value || (x.value.setSizePoses(), $.value.setSizePoses(), f.value.setSizePoses());
  }, E = () => {
    x.value?.setCursor(), $.value?.setCursor(), f.value?.setCursor();
  }, w = async () => {
    await S(), X(), E();
  }, I = async () => {
    if (await S(), o.modelValue) {
      const { hex: e, a: t } = N(o.modelValue), { r: a, g: l, b: u } = G(e), { h: n, s: H, v: P } = O({ r: a, g: l, b: u });
      c.value = n, r.value = H, v.value = P, i.value = t;
    }
    w(), W();
  }, T = (e, t = 1) => {
    z.value = !0;
    const { r: a, g: l, b: u } = G(e), { h: n, s: H, v: P } = O({ r: a, g: l, b: u });
    c.value = n, r.value = H, v.value = P, i.value = t;
  }, p = (e, t) => {
    k.value = e, y.value = t;
  }, q = () => {
    h.value = !h.value, w();
  }, Y = () => {
    h.value = !1;
  };
  return B.useClickOutside(A, Y), j(m, async () => {
    await S(), V("update:modelValue", m.value), V("change", m.value), w();
  }), D(() => {
    I();
  }), {
    ckey: F,
    savedX: k,
    savedY: y,
    sliderWidth: M,
    hue: c,
    sat: r,
    val: v,
    alpha: i,
    isOpen: h,
    isPreset: z,
    colorPickerButStyle: U,
    currentColor: m,
    onSelect: T,
    onUpdateCursor: p,
    handleOpenPanel: q
  };
};
export {
  R as useColorPicker
};