import { defineComponent as m, ref as d, watch as s, createVNode as l, resolveComponent as a, isVNode as b } from "vue";
import { ElColorPicker as v, ElInput as g, ElIcon as y, ElTooltip as h } from "element-plus";
import { useResolveVnode as C } from "@klweb/compose-app-engine";
import { aj as k, ak as S } from "./main-Blxobku2.js";
import { e as V } from "./index-BbdVezoQ.js";
const c = {
  "el-input--custom": "_el-input--custom_1s6qz_1",
  "color-picker-icon": "_color-picker-icon_1s6qz_5"
}, {
  IconTransparent: x,
  IconNoneLine: F
} = V;
function _(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !b(e);
}
const j = /* @__PURE__ */ m({
  name: "KlColorPickerSetter",
  components: {
    ElColorPicker: v,
    ElInput: g,
    ElIcon: y,
    ElTooltip: h
  },
  props: {
    // 颜色值
    modelValue: {
      type: String,
      default: ""
    },
    // 宽度
    width: {
      type: String,
      default: "100%"
    },
    // 尺寸
    size: {
      type: String,
      default: ""
    },
    // 是否支持透明度选择
    showAlpha: {
      type: Boolean,
      default: !0
    },
    // 写入 v-model 的颜色的格式
    colorFormat: {
      type: String,
      default: ""
    },
    // 是否将透明值为 1 的 rgba 颜色值自动转换为 hex 十六进制颜色值
    rgbaToHex: {
      type: Boolean,
      default: !0
    },
    // 预定义颜色
    predefine: {
      type: Array,
      default: () => ["#ff4500", "#ff8c00", "#F5CF01", "rgba(113, 226, 113, 0.7)", "#2CC22C", "#0B850B", "rgba(0, 206, 209, 0.6)", "#409EFF", "rgba(30, 79, 255, 0.7)", "#003399", "#333366", "#F315A0", "rgba(187, 3, 157, 0.6)", "rgba(113, 3, 187, 0.6)"]
    },
    // ColorPicker 下拉框的类名
    popperClass: {
      type: String,
      default: ""
    },
    // 文字提示
    tooltip: {
      type: String,
      default: ""
    },
    // 禁止
    disabled: {
      type: Boolean,
      default: !1
    },
    // 是否将 popover 的下拉列表渲染至 body 下
    teleported: {
      type: Boolean,
      default: !0
    }
  },
  setup(e, {
    emit: n
  }) {
    const r = d(!1), o = d(""), i = () => {
      const {
        modelValue: t
      } = e;
      typeof t == "string" && (o.value = t);
    };
    return i(), s(() => e.modelValue, () => {
      i();
    }), s(o, (t) => {
      if (e.rgbaToHex && k(t)) {
        const u = S(t), f = u.slice(0, 7), p = u.slice(7, 9);
        o.value = p === "ff" ? f : t, n("update:modelValue", o.value), n("updated", o.value);
      } else
        n("update:modelValue", t), n("updated", t);
    }), () => l(a("el-tooltip"), {
      effect: "dark",
      placement: "top",
      "hide-after": 0,
      content: `<span>${e.tooltip}</span>`,
      "raw-content": !0,
      disabled: !e.tooltip || e.disabled,
      visible: r.value
    }, {
      default: () => [l(a("el-input"), {
        class: c["el-input--custom"],
        modelValue: o.value,
        "onUpdate:modelValue": (t) => o.value = t,
        size: e.size,
        disabled: e.disabled,
        style: {
          width: e.width
        },
        clearable: !0,
        onMouseenter: () => r.value = !0,
        onMouseleave: () => r.value = !1
      }, {
        prefix: () => {
          let t;
          return l(a("el-tooltip"), {
            effect: "dark",
            placement: "top",
            "hide-after": 0,
            content: "调色板"
          }, {
            default: () => [l("div", {
              class: c["color-picker-icon"],
              onMouseenter: () => r.value = !1,
              style: {
                background: o.value,
                pointerEvents: e.disabled ? "none" : "auto"
              }
            }, [l(a("el-color-picker"), {
              modelValue: o.value,
              "onUpdate:modelValue": (u) => o.value = u,
              "show-alpha": e.showAlpha,
              "color-format": e.colorFormat,
              "popper-class": e.popperClass,
              predefine: e.predefine,
              teleported: e.teleported,
              size: "small"
            }, null), l(a("el-icon"), null, _(t = C(o.value ? x : F)) ? t : {
              default: () => [t]
            })])]
          });
        }
      })]
    });
  }
});
export {
  j as default
};
