vuux/dist/es/ColorPicker/src/index.vue.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { defineComponent as R, useTemplateRef as T, ref as i, createElementBlock as _, openBlock as w, unref as e, createElementVNode as r, createVNode as a, normalizeStyle as f, Transition as q, withCtx as W, createCommentVNode as X, normalizeClass as Y, isRef as u, mergeProps as j } from "vue";
import A from "./component/panel.vue.mjs";
import D from "./component/hue.vue.mjs";
import F from "./component/alpha.vue.mjs";
import G from "./component/preset.vue.mjs";
import { useColorPicker as H } from "./hook/useColorPicker.mjs";
const I = { class: "controls-container" }, J = { class: "square-container" }, le = /* @__PURE__ */ R({
  name: "ColorPicker",
  __name: "index",
  props: {
    modelValue: { default: "" },
    preset: { default: () => ["#db5048", "#35a8df", "#1573fa", "#37abaf", "#c9412e", "#9d38d3", "#f3474d", "#07975c", "#e36a26"] },
    shadow: { type: Boolean },
    width: { default: 20 },
    height: { default: 20 }
  },
  emits: ["update:modelValue", "change"],
  setup(P, { emit: U }) {
    const d = P, b = U, m = T("colorPickerEl"), h = i(null), k = i(null), v = i(null), y = i(null), { ckey: g, savedX: x, savedY: S, sliderWidth: C, hue: t, sat: s, val: n, alpha: c, isOpen: V, isPreset: $, colorPickerButStyle: B, currentColor: p, onSelect: N, onUpdateCursor: z, handleOpenPanel: E } = H(d, m, v, h, k, y, b);
    return (O, l) => (w(), _("div", {
      ref_key: "colorPickerEl",
      ref: m,
      key: e(g),
      class: "app-color-picker"
    }, [
      r("div", {
        class: "color-picker-but",
        style: f(e(B)),
        onClick: l[0] || (l[0] = //@ts-ignore
        (...o) => e(E) && e(E)(...o))
      }, [
        r("div", {
          class: "picker-but-color",
          style: f({ backgroundColor: e(p) })
        }, null, 4)
      ], 4),
      a(q, { name: "ease" }, {
        default: W(() => [
          e(V) ? (w(), _("div", {
            key: 0,
            class: Y(["color-picker-data", { "is-shadow": d.shadow }])
          }, [
            a(A, {
              ref_key: "panelEl",
              ref: y,
              sat: e(s),
              "onUpdate:sat": l[1] || (l[1] = (o) => u(s) ? s.value = o : null),
              val: e(n),
              "onUpdate:val": l[2] || (l[2] = (o) => u(n) ? n.value = o : null),
              x: e(x),
              y: e(S),
              "is-preset": e($),
              width: 240,
              height: 170,
              "current-color": e(p),
              hue: e(t),
              onUpdateCursor: e(z)
            }, null, 8, ["sat", "val", "x", "y", "is-preset", "current-color", "hue", "onUpdateCursor"]),
            r("div", I, [
              r("div", {
                ref_key: "sliderEl",
                ref: v,
                class: "slider-container"
              }, [
                a(D, {
                  ref_key: "hueEl",
                  ref: h,
                  hue: e(t),
                  "onUpdate:hue": l[3] || (l[3] = (o) => u(t) ? t.value = o : null),
                  width: e(C)
                }, null, 8, ["hue", "width"]),
                a(F, {
                  ref_key: "alphaEl",
                  ref: k,
                  alpha: e(c),
                  "onUpdate:alpha": l[4] || (l[4] = (o) => u(c) ? c.value = o : null),
                  width: e(C),
                  hue: e(t),
                  sat: e(s),
                  val: e(n)
                }, null, 8, ["alpha", "width", "hue", "sat", "val"])
              ], 512),
              r("div", J, [
                r("span", {
                  style: f({ backgroundColor: e(p) })
                }, null, 4)
              ])
            ]),
            a(G, j(O.$attrs, {
              preset: d.preset,
              onSelect: e(N)
            }), null, 16, ["preset", "onSelect"])
          ], 2)) : X("", !0)
        ]),
        _: 1
      })
    ]));
  }
});
export {
  le as default
};