vue-data-ui/dist/ColorPicker-DyZK3Mhl.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

import { ref as l, computed as k, watch as I, withDirectives as P, createElementBlock as r, openBlock as n, withKeys as S, createElementVNode as u, createCommentVNode as z, normalizeStyle as a, createVNode as F, Fragment as E, renderList as N, unref as O } from "vue";
import C from "./BaseIcon-rw8rKNKS.js";
import { G as V } from "./index-BaaDnc4F.js";
import { v as D } from "./usePrinter-y4-4tCWT.js";
import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const $ = ["onClick"], G = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -46%)" } }, L = ["value"], T = {
  __name: "ColorPicker",
  props: {
    value: {
      type: String,
      default: "#ffffff"
    },
    size: {
      type: String,
      default: "50px"
    },
    backgroundColor: {
      type: String,
      default: "#FFFFFF"
    },
    buttonBorderColor: {
      type: String,
      default: "#FFFFFF"
    }
  },
  emits: ["update:value"],
  setup(o, { emit: m }) {
    const c = o, s = m, g = l(null), y = k(() => ({
      backgroundColor: c.value,
      width: "100%",
      height: "100%",
      cursor: "pointer"
    })), i = l(null), t = l(!1), b = () => {
      var e;
      (e = i.value) == null || e.click();
    };
    function h(e) {
      s("update:value", e), t.value = !1;
    }
    function _() {
      t.value = !1;
    }
    function d() {
      t.value && _();
    }
    const x = (e) => {
      const v = e.target.value;
      s("update:value", v);
    }, p = k(() => V(c.value));
    async function w() {
      t.value = !t.value;
    }
    I(
      () => c.value,
      (e) => {
        i.value.value = e;
      }
    );
    const B = l([
      "#000000",
      "#FFFFFF",
      "#FF5733",
      "#33FF57",
      "#3357FF",
      "#FFC300",
      "#800080",
      "#FF1493",
      "#00CED1"
    ]);
    return (e, v) => P((n(), r("div", {
      onKeydown: S(d, ["esc"]),
      style: { height: "100%", width: "100%", position: "relative" }
    }, [
      u("button", {
        class: "icon",
        onClick: w,
        style: a(y.value)
      }, [
        F(C, {
          name: "palette",
          stroke: p.value,
          size: 22
        }, null, 8, ["stroke"])
      ], 4),
      t.value ? (n(), r("div", {
        key: 0,
        ref_key: "picker",
        ref: g,
        tabindex: "0",
        class: "vue-ui-color-picker",
        style: a({
          backgroundColor: o.backgroundColor
        })
      }, [
        (n(!0), r(E, null, N(B.value, (f) => (n(), r("button", {
          tabindex: "0",
          class: "vue-ui-color-picker-option",
          style: a({
            backgroundColor: f,
            outline: `1px solid ${o.buttonBorderColor}`
          }),
          onClick: () => h(f)
        }, null, 12, $))), 256)),
        u("button", {
          class: "vue-ui-color-picker-option",
          onClick: b,
          style: a({
            backgroundColor: o.value,
            outline: `1px solid ${o.buttonBorderColor}`
          })
        }, [
          u("div", G, [
            F(C, {
              name: "colorPicker",
              stroke: p.value,
              size: 22
            }, null, 8, ["stroke"])
          ]),
          u("input", {
            ref_key: "colorInput",
            ref: i,
            type: "color",
            value: o.value,
            class: "hidden-input",
            onInput: x
          }, null, 40, L)
        ], 4)
      ], 4)) : z("", !0)
    ], 32)), [
      [O(D), d]
    ]);
  }
}, M = /* @__PURE__ */ K(T, [["__scopeId", "data-v-f6dd9192"]]);
export {
  M as C
};