import '@das-fed/ui/packages/components/color-picker/style.css';
import { defineComponent as x, computed as I, ref as y, createElementBlock as V, openBlock as c, createVNode as k, createCommentVNode as w, unref as e, mergeProps as N, isRef as z, withCtx as f, createBlock as v, createElementVNode as P, Fragment as O, renderList as $, normalizeStyle as H, normalizeClass as C, toDisplayString as F } from "vue";
import { withInstall as A } from "@das-fed/utils/with-install/index";
import { currentLang as L, t as R, setI18nRule as M } from "@das-fed/web/packages/i18n/index";
import { DasDropdown as U, DasDropdownMenu as j } from "@das-fed/ui/packages/components/dropdown/index";
import { DasAutoRegisterIcon as q, DasIcon as G } from "@das-fed/ui/packages/components/icon/index";
import { DasInput as J } from "@das-fed/ui/packages/components/input/index";
import { ElConfigProvider as K, ElColorPicker as Q } from "element-plus";
import "element-plus/es/components/color-picker/style/css";
import { useModelValue as g } from "@das-fed/utils/vue";
import W from "element-plus/dist/locale/zh-cn.mjs";
import X from "element-plus/dist/locale/en.mjs";
import { setThemeRule as Y } from "@das-fed/web/packages/theme/index";
const Z = (s, d) => {
  const l = g(s, "modelValue"), u = g(s, "options");
  let p = g(s, "modelValue");
  return { innerValue: l, inputChangeHandler: (i) => {
    p.value = i, d("update:modelValue", i), d("change", i);
  }, inputInputHandler: (i) => {
    p.value = i, d("update:modelValue", i), d("dasInput", i), d("change", i);
  }, colorOption: u, colorPickerValue: p };
}, ee = {
  class: "das-ui-color-picker",
  style: { width: "100%" }
}, oe = { class: "color-predefine-content" }, le = ["onClick"], ae = /* @__PURE__ */ x({
  __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: "bottom" },
    placeholder: { default: "" },
    noSetDefaultVal: { type: Boolean, default: !1 }
  },
  emits: ["update:modelValue", "change", "dasInput"],
  setup(s, { emit: d }) {
    const l = s, u = d;
    q({
      fold: import("@das-fed/ui/packages/icons/fold"),
      close2: import("@das-fed/ui/packages/icons/close-2")
    });
    const p = I(() => L.value === "zh-CN" ? W : X), _ = I(() => l.placeholder || R("请输入")), { innerValue: a, inputChangeHandler: i, inputInputHandler: S, colorOption: o, colorPickerValue: h } = Z(l, u), b = y(), m = y(!1), B = (t) => {
      var n, r;
      u("change", t), a.value = t, (r = (n = b.value) == null ? void 0 : n.getElRef()) == null || r.handleClose(), m.value = !1;
    }, D = () => {
      var t, n;
      o.value.mode != "default" && ((n = (t = b.value) == null ? void 0 : t.getElRef()) == null || n.handleOpen(), m.value = !0);
    }, E = (t) => {
      m.value = t;
    };
    return (t, n) => (c(), V("div", ee, [
      k(e(J), N({
        class: ["das-color-picker-input", [
          `das-color-picker-${e(o).size}`,
          { "das-empty-color": !e(a) },
          { "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 }
        ]],
        modelValue: e(a),
        "onUpdate:modelValue": n[1] || (n[1] = (r) => z(a) ? a.value = r : null)
      }, t.$attrs, {
        isView: e(o).mode == "predefine" ? !0 : e(o).isView || l.isView,
        disabled: e(o).disabled || l.disabled,
        append: "",
        onClick: D,
        onInput: e(S),
        borderType: l.borderType,
        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(a)
      }), {
        append: f(() => [
          e(o).mode == "default" ? (c(), v(e(K), {
            key: 0,
            locale: p.value
          }, {
            default: f(() => [
              !e(o).isView && !l.isView || e(a) ? (c(), v(e(Q), {
                key: 0,
                locale: p.value,
                placement: e(o).placement,
                modelValue: e(h),
                "onUpdate:modelValue": n[0] || (n[0] = (r) => z(h) ? h.value = r : 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(i)
              }, null, 8, ["locale", "placement", "modelValue", "size", "show-alpha", "color-format", "popper-class", "predefine", "disabled", "onChange"])) : w("v-if", !0)
            ]),
            _: 1
            /* STABLE */
          }, 8, ["locale"])) : w("v-if", !0),
          e(o).mode == "predefine" ? (c(), v(e(U), {
            key: 1,
            disabled: e(o).disabled || l.disabled || e(o).isView || l.isView,
            ref_key: "predefineDrown",
            ref: b,
            trigger: "click",
            placement: "bottom-end",
            selfPopperClass: "color-predefine-dropdown",
            "hide-on-click": !1,
            onVisibleChange: E
          }, {
            content: f(() => [
              P(
                "span",
                {
                  class: C([
                    "color-predefine-icon",
                    e(o).size,
                    e(a) && e(a) != "-",
                    { "view-prefine-icon": e(o).disabled || l.disabled || e(o).isView || l.isView }
                  ]),
                  style: H("background-color:" + e(a))
                },
                [
                  k(e(G), {
                    icon: e(a) && e(a) != "-" ? "fold" : "close2",
                    customSize: "6px",
                    iconColor: e(a) && e(a) != "-" ? "#fff" : "#909399"
                  }, null, 8, ["icon", "iconColor"])
                ],
                6
                /* CLASS, STYLE */
              )
            ]),
            default: f(() => [
              k(e(j), null, {
                default: f(() => [
                  P("div", oe, [
                    (c(!0), V(
                      O,
                      null,
                      $(e(o).predefine, (r, T) => (c(), V("div", {
                        class: C(["color-predefine-span", { active: e(a) == r }]),
                        key: T,
                        style: H("background-color:" + r),
                        onClick: (te) => B(r)
                      }, null, 14, le))),
                      128
                      /* KEYED_FRAGMENT */
                    ))
                  ])
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            _: 1
            /* STABLE */
          }, 8, ["disabled"])) : w("v-if", !0)
        ]),
        _: 1
        /* STABLE */
      }, 16, ["class", "modelValue", "isView", "disabled", "onInput", "borderType", "placeholder", "noSetDefaultVal"]),
      e(o).mode == "predefine" && !e(o).isView && !l.isView && !e(o).disabled && !l.disabled && !e(a) ? (c(), V(
        "span",
        {
          key: 0,
          class: C(["predefine-placeholder", { "padding-l": l.borderType == "bordered" }]),
          onClick: D
        },
        F(e(R)("请选择")),
        3
        /* TEXT, CLASS */
      )) : w("v-if", !0)
    ]));
  }
}), ie = (s, d) => {
  const l = s.__vccOpts || s;
  for (const [u, p] of d)
    l[u] = p;
  return l;
}, ne = /* @__PURE__ */ ie(ae, [["__scopeId", "data-v-fa0ac329"]]), re = {
  "--demo-alert-bg": {
    light: "#fff",
    dark: "rgba(255,255,255,.2)"
  },
  "--das-ui-color-picker-primary": "#5582F3"
  // 主题色
}, de = { 请输入: { "zh-CN": "请输入", en: "Please enter", _appCode: "framework" } };
M(de);
Y(re);
const Ce = () => y(null), ge = A(ne);
export {
  ge as DasColorPicker,
  Ce as DasColorPickerRef,
  ge as default
};
