@open-data-v/ui/es/ColorPicker/ColorPicker.vue.esm.js

OpenDataV UI基础包

import { defineComponent as g, computed as b, reactive as C, openBlock as i, createElementBlock as k, createVNode as r, unref as n, normalizeStyle as w, withDirectives as c, createBlock as _, Transition as y, withCtx as S, createElementVNode as x, normalizeClass as A, withModifiers as B, vShow as V } from "vue";
import { ClickOutsideDirective as H } from "@open-data-v/base";
import O from "../Input/Input.vue.esm.js";
/* empty css                      */
import z from "./ColorPane.vue.esm.js";
import { transColor as D, tinycolor as E } from "./utils.esm.js";
const N = { class: "w-full" }, j = /* @__PURE__ */ g({
  __name: "ColorPicker",
  props: {
    value: { default: "#fff" },
    format: { default: "hex" },
    text: {},
    disableAlpha: { type: Boolean, default: !1 },
    swatches: { default: () => [] }
  },
  emits: ["change", "update:value", "updateValue"],
  setup(u, { emit: p }) {
    const f = H, l = u, m = b(() => D(l.value)), o = p, s = C({
      visible: !1
    }), d = () => {
      s.visible = !0;
    }, v = () => {
      s.visible = !1;
    };
    function h(t) {
      const e = E(t.rgba);
      l.disableAlpha ? e.setAlpha(1) : e.setAlpha(t.a);
      let a;
      switch (l.format) {
        case "hex":
          a = (l.disableAlpha ? e.toHexString() : e.toHex8String()).toUpperCase();
          break;
        case "rgb":
          a = e.toRgbString();
          break;
        case "hsl":
          a = e.toHslString();
          break;
      }
      o("update:value", a), o("change", a), o("updateValue", a);
    }
    return (t, e) => (i(), k("div", N, [
      r(n(O), {
        readonly: "",
        value: t.value,
        style: w({ backgroundColor: t.value }),
        onClick: d
      }, null, 8, ["value", "style"]),
      c((i(), _(y, { name: "slide-toggle" }, {
        default: S(() => [
          c(x("div", {
            class: A("o-color-picker"),
            onClick: e[0] || (e[0] = B(() => {
            }, ["stop"]))
          }, [
            r(z, {
              value: m.value,
              swatches: t.swatches,
              onChange: h
            }, null, 8, ["value", "swatches"])
          ], 512), [
            [V, s.visible]
          ])
        ]),
        _: 1
      })), [
        [n(f), v]
      ])
    ]));
  }
});
export {
  j as default
};
//# sourceMappingURL=ColorPicker.vue.esm.js.map