import '@das-fed/upf-ui/packages/components/color-picker/style.css';
import { defineComponent as N, computed as b, ref as y, openBlock as p, createElementBlock as V, createCommentVNode as u, createVNode as v, unref as e, mergeProps as O, isRef as I, withCtx as f, createBlock as k, createElementVNode as P, normalizeClass as C, normalizeStyle as S, Fragment as $, renderList as M, toDisplayString as A } from "vue";
import { withInstall as F } from "@das-fed/upf-utils/with-install/index";
import { currentLang as L, t as H, setI18nRule as U } from "@das-fed/upf-web/packages/i18n/index";
import { DasDropdown as j, DasDropdownMenu as q } from "@das-fed/upf-ui/packages/components/dropdown/index";
import { DasAutoRegisterIcon as G, DasIcon as J } from "@das-fed/upf-ui/packages/components/icon/index";
import { DasInput as K } from "@das-fed/upf-ui/packages/components/input/index";
import { ElConfigProvider as Q, ElColorPicker as W } from "element-plus";
import "element-plus/es/components/color-picker/style/css";
import { useModelValue as g } from "@das-fed/upf-utils/vue";
import X from "element-plus/dist/locale/zh-cn.mjs";
import Y from "element-plus/dist/locale/en.mjs";
const Z = (s, r) => {
  const l = g(s, "modelValue"), c = g(s, "options");
  let t = g(s, "modelValue");
  return { innerValue: l, inputChangeHandler: (i) => {
    t.value = i, r("update:modelValue", i), r("change", i);
  }, inputInputHandler: (i) => {
    t.value = i, r("update:modelValue", i), r("dasInput", i), r("change", i);
  }, colorOption: c, colorPickerValue: t };
}, ee = {
  class: "das-ui-color-picker",
  style: { width: "100%" }
}, oe = { class: "color-predefine-content" }, le = ["onClick"], ie = /* @__PURE__ */ N({
  __name: "Index",
  props: {
    modelValue: { default: "" },
    options: { default: () => ({
      size: "mini",
      popperClass: "",
      mode: "default",
      isView: !1,
      placement: "bottom-end"
    }) },
    disabled: { type: Boolean, default: !1 },
    isView: { type: Boolean, default: !1 },
    borderType: { default: "bordered" },
    placeholder: { default: "" },
    noSetDefaultVal: { type: Boolean, default: !1 },
    formSize: {}
  },
  emits: ["update:modelValue", "change", "dasInput"],
  setup(s, { emit: r }) {
    const l = s, c = r;
    G({
      fold: import("@das-fed/upf-ui/packages/icons/fold"),
      close2: import("@das-fed/upf-ui/packages/icons/close-2")
    });
    const t = b(() => L.value === "zh-CN" ? X : Y), _ = b(() => l.placeholder || H("请输入")), z = b(() => l.borderType), { innerValue: i, inputChangeHandler: x, inputInputHandler: B, colorOption: o, colorPickerValue: w } = Z(l, c), h = y(), m = y(!1), E = (d) => {
      var a, n;
      c("change", d), i.value = d, (n = (a = h.value) == null ? void 0 : a.getElRef()) == null || n.handleClose(), m.value = !1;
    }, D = () => {
      var d, a;
      o.value.mode != "default" && ((a = (d = h.value) == null ? void 0 : d.getElRef()) == null || a.handleOpen(), m.value = !0);
    }, R = (d) => {
      m.value = d;
    };
    return (d, a) => (p(), V("div", ee, [
      u(" 内部 input 宽度跟随容器自适应，避免使用 das-input 默认的 230px 固定宽度 "),
      v(e(K), O({
        class: ["das-color-picker-input", [
          `das-color-picker-${e(o).size}`,
          { "das-empty-color": !e(i) },
          { "das-predefine-cell": e(o).mode == "predefine" && (!e(o).isView || !l.isView) },
          { "das-predefine-view-cell": e(o).mode == "predefine" && (e(o).isView || l.isView) },
          { "das-both-view-cell": e(o).isView || l.isView },
          { "focus-predefine-view-cell": e(o).mode == "predefine" && m.value }
        ]],
        width: "100%",
        modelValue: e(i),
        "onUpdate:modelValue": a[1] || (a[1] = (n) => I(i) ? i.value = n : null)
      }, d.$attrs, {
        isView: e(o).mode == "predefine" ? !0 : e(o).isView || l.isView,
        disabled: e(o).disabled || l.disabled,
        append: "",
        onClick: D,
        onInput: e(B),
        borderType: z.value,
        placeholder: _.value,
        noSetDefaultVal: e(o).mode == "predefine" && !e(o).isView && !l.isView && !e(o).disabled && !l.disabled || l.noSetDefaultVal && (e(o).isView || l.isView) && !e(i),
        size: l.formSize
      }), {
        append: f(() => [
          e(o).mode == "default" ? (p(), k(e(Q), {
            key: 0,
            locale: t.value
          }, {
            default: f(() => [
              !e(o).isView && !l.isView || e(i) ? (p(), k(e(W), {
                key: 0,
                locale: t.value,
                placement: e(o).placement,
                modelValue: e(w),
                "onUpdate:modelValue": a[0] || (a[0] = (n) => I(w) ? w.value = n : null),
                size: e(o).size,
                "show-alpha": e(o).showAlpha,
                "color-format": e(o).colorFormat,
                "popper-class": `das-color-picker-popper ${e(o).popperClass}`,
                predefine: e(o).predefine,
                disabled: e(o).disabled || l.disabled || e(o).isView || l.isView,
                onChange: e(x)
              }, null, 8, ["locale", "placement", "modelValue", "size", "show-alpha", "color-format", "popper-class", "predefine", "disabled", "onChange"])) : u("v-if", !0)
            ]),
            _: 1
            /* STABLE */
          }, 8, ["locale"])) : u("v-if", !0),
          e(o).mode == "predefine" ? (p(), k(e(j), {
            key: 1,
            disabled: e(o).disabled || l.disabled || e(o).isView || l.isView,
            ref_key: "predefineDrown",
            ref: h,
            trigger: "click",
            placement: "bottom-end",
            selfPopperClass: "color-predefine-dropdown",
            "hide-on-click": !1,
            onVisibleChange: R
          }, {
            content: f(() => [
              P(
                "span",
                {
                  class: C([
                    "color-predefine-icon",
                    e(o).size,
                    { "border-predefine": e(i) && e(i) != "-" },
                    { "view-prefine-icon": e(o).disabled || l.disabled || e(o).isView || l.isView }
                  ]),
                  style: S("background-color:" + e(i))
                },
                [
                  v(e(J), {
                    icon: e(i) && e(i) != "-" ? "fold" : "close2",
                    customSize: "6px",
                    iconColor: e(i) && e(i) != "-" ? "var(--upf-bg-primary)" : "var(--upf-text-secondary)"
                  }, null, 8, ["icon", "iconColor"])
                ],
                6
                /* CLASS, STYLE */
              )
            ]),
            default: f(() => [
              v(e(q), null, {
                default: f(() => [
                  P("div", oe, [
                    (p(!0), V(
                      $,
                      null,
                      M(e(o).predefine, (n, T) => (p(), V("div", {
                        class: C(["color-predefine-span", { active: e(i) == n }]),
                        key: T,
                        style: S("background-color:" + n),
                        onClick: (de) => E(n)
                      }, null, 14, le))),
                      128
                      /* KEYED_FRAGMENT */
                    ))
                  ])
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            _: 1
            /* STABLE */
          }, 8, ["disabled"])) : u("v-if", !0)
        ]),
        _: 1
        /* STABLE */
      }, 16, ["class", "modelValue", "isView", "disabled", "onInput", "borderType", "placeholder", "noSetDefaultVal", "size"]),
      e(o).mode == "predefine" && !e(o).isView && !l.isView && !e(o).disabled && !l.disabled && !e(i) ? (p(), V(
        "span",
        {
          key: 0,
          class: C(["predefine-placeholder", { "padding-l": l.borderType == "bordered" }]),
          onClick: D
        },
        A(e(H)("请选择")),
        3
        /* TEXT, CLASS */
      )) : u("v-if", !0)
    ]));
  }
}), ae = (s, r) => {
  const l = s.__vccOpts || s;
  for (const [c, t] of r)
    l[c] = t;
  return l;
}, ne = /* @__PURE__ */ ae(ie, [["__scopeId", "data-v-3798695f"]]), re = { 请输入: { "zh-CN": "请输入", en: "Please enter", "zh-MO": "請輸入", _appCode: "framework" } };
U(re);
const ve = () => y(null), ke = F(ne);
export {
  ke as DasColorPicker,
  ve as DasColorPickerRef,
  ke as default
};
