import { defineComponent as f, ref as c, reactive as V, watch as b, createVNode as l, resolveComponent as u, isVNode as w } from "vue";
import { ElInputNumber as M, ElDropdown as S, ElDropdownMenu as z, ElDropdownItem as _, ElTooltip as x, ElColorPicker as k, ElInput as N, ElIcon as U } from "element-plus";
import { extractNumerAndUnit as B, isRgba as E, rgbaToHex as F } from "@klweb/utils";
import { useResolveVnode as $ } from "@klweb/compose-app-engine";
const h = {
  "el-input-number--custom": "_el-input-number--custom_1w01r_1",
  "unit-value": "_unit-value_1w01r_9"
};
function y(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !w(e);
}
const D = /* @__PURE__ */ f({
  // 通用数值单位设置器 TSX 组件，如设置宽度、高度、行高等
  name: "KlNumericUnitSetter",
  components: {
    ElInputNumber: M,
    ElDropdown: S,
    ElDropdownMenu: z,
    ElDropdownItem: _,
    ElTooltip: x
  },
  props: {
    // 数值单位，如：`20px` 或 20
    modelValue: {
      type: [String, Number],
      default: ""
    },
    // 宽度
    width: {
      type: String,
      default: "100%"
    },
    // 设置计数器允许的最小值
    min: {
      type: Number,
      default: -1 / 0
    },
    // 设置计数器允许的最大值
    max: {
      type: Number,
      default: 1 / 0
    },
    // 计数器步长
    step: {
      type: Number,
      default: 1
    },
    // 计数器尺寸
    size: {
      type: String,
      default: ""
    },
    // 默认单位
    units: {
      type: Array,
      default: () => ["px", "%", "vw", "vh", "rem", "em"]
    },
    // 排除某个单位
    excludeUnits: {
      type: Array,
      default: () => []
    },
    // 禁用单位：
    unUnit: {
      type: Boolean,
      default: !1
    },
    // 文字提示
    tooltip: {
      type: String,
      default: ""
    },
    // 禁止
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  setup(e, {
    emit: i
  }) {
    const d = c(!1), o = c(), r = c("px"), t = V(e.units.filter((a) => !e.excludeUnits.includes(a))), s = () => {
      const {
        modelValue: a,
        unUnit: n
      } = e, {
        number: C,
        unit: v
      } = B(String(a));
      o.value = C, r.value = n ? "" : v && t.includes(v) ? v : t[0];
    };
    s();
    const p = (a) => {
      const n = typeof a == "number" && r.value ? `${a}${r.value}` : typeof a == "number" && !r.value ? a : "";
      i("update:modelValue", n), i("updated", n);
    }, m = (a) => {
      const n = typeof o.value == "number" ? `${o.value}${a}` : "";
      r.value = a, i("update:modelValue", n), i("updated", n);
    };
    return b(() => e.modelValue, () => {
      s();
    }), () => l(u("el-tooltip"), {
      effect: "dark",
      placement: "top",
      "hide-after": 0,
      content: `<span>${e.tooltip}</span>`,
      "raw-content": !0,
      disabled: !e.tooltip || e.disabled,
      visible: d.value
    }, {
      default: () => [l(u("el-input-number"), {
        class: h["el-input-number--custom"],
        modelValue: o.value,
        "onUpdate:modelValue": (a) => o.value = a,
        min: e.min,
        max: e.max,
        step: e.step,
        size: e.size,
        "controls-position": "right",
        disabled: e.disabled,
        style: {
          width: e.width
        },
        onChange: p,
        onMouseenter: () => d.value = !0,
        onMouseleave: () => d.value = !1
      }, {
        suffix: () => !e.unUnit && l(u("el-tooltip"), {
          effect: "dark",
          placement: "top",
          "hide-after": 0,
          content: "切换单位"
        }, {
          default: () => [l(u("el-dropdown"), {
            placement: "bottom",
            trigger: "click",
            onCommand: m
          }, {
            default: () => [l("span", {
              class: h["unit-value"],
              onMouseenter: () => d.value = !1,
              style: {
                "line-height": e.size === "large" ? "38px" : e.size === "small" ? "20px" : "30px"
              }
            }, [r.value])],
            dropdown: () => {
              let a;
              return l(u("el-dropdown-menu"), null, y(a = t.map((n) => e.excludeUnits.includes(n) ? null : l(u("el-dropdown-item"), {
                command: n
              }, y(n) ? n : {
                default: () => [n]
              }))) ? a : {
                default: () => [a]
              });
            }
          })]
        })
      })]
    });
  }
}), I = /* @__PURE__ */ f({
  setup() {
    return () => l("svg", {
      viewBox: "0 0 1024 1024",
      xmlns: "http://www.w3.org/2000/svg"
    }, [l("path", {
      d: "M0 0m68.266667 0l887.466666 0q68.266667 0 68.266667 68.266667l0 887.466666q0 68.266667-68.266667 68.266667l-887.466666 0q-68.266667 0-68.266667-68.266667l0-887.466666q0-68.266667 68.266667-68.266667Z",
      fill: "var(--el-bg-color)"
    }, null), l("path", {
      d: "M273.066667 34.133333h238.933333v238.933334H273.066667zM273.066667 512h238.933333v238.933333H273.066667zM34.133333 273.066667h238.933334v238.933333H34.133333zM34.133333 750.933333h238.933334v238.933334H68.266667a34.133333 34.133333 0 0 1-34.133334-34.133334v-204.8zM750.933333 34.133333h238.933334v238.933334h-238.933334zM750.933333 512h238.933334v238.933333h-238.933334zM512 273.066667h238.933333v238.933333h-238.933333zM512 750.933333h238.933333v238.933334h-238.933333z",
      fill: "var(--el-text-color-disabled)"
    }, null)]);
  }
}), A = /* @__PURE__ */ f({
  setup() {
    return () => l("svg", {
      viewBox: "0 0 1024 1024",
      xmlns: "http://www.w3.org/2000/svg"
    }, [l("path", {
      d: "M977.969 3.516l45.228 45.28-974.369 973.267L3.6 976.783z",
      fill: "#f00"
    }, null)]);
  }
}), g = {
  "el-input--custom": "_el-input--custom_13kt4_1",
  "color-picker-icon": "_color-picker-icon_13kt4_5"
};
function H(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !w(e);
}
const P = /* @__PURE__ */ f({
  name: "KlColorPickerSetter",
  components: {
    ElColorPicker: k,
    ElInput: N,
    ElIcon: U,
    ElTooltip: x
  },
  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: i
  }) {
    const d = c(!1), o = c(""), r = () => {
      const {
        modelValue: t
      } = e;
      typeof t == "string" && (o.value = t);
    };
    return r(), b(() => e.modelValue, () => {
      r();
    }), b(o, (t) => {
      if (t && e.rgbaToHex && E(t)) {
        const s = F(t), p = s.slice(0, 7), m = s.slice(7, 9);
        o.value = m === "ff" ? p : t, i("update:modelValue", o.value), i("updated", o.value);
      } else
        i("update:modelValue", t), i("updated", t);
    }), () => l(u("el-tooltip"), {
      effect: "dark",
      placement: "top",
      "hide-after": 0,
      content: `<span>${e.tooltip}</span>`,
      "raw-content": !0,
      disabled: !e.tooltip || e.disabled,
      visible: d.value
    }, {
      default: () => [l(u("el-input"), {
        class: g["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: () => d.value = !0,
        onMouseleave: () => d.value = !1
      }, {
        prefix: () => {
          let t;
          return l(u("el-tooltip"), {
            effect: "dark",
            placement: "top",
            "hide-after": 0,
            content: "调色板"
          }, {
            default: () => [l("div", {
              class: g["color-picker-icon"],
              onMouseenter: () => d.value = !1,
              style: {
                background: o.value,
                pointerEvents: e.disabled ? "none" : "auto"
              }
            }, [l(u("el-color-picker"), {
              modelValue: o.value,
              "onUpdate:modelValue": (s) => o.value = s,
              "show-alpha": e.showAlpha,
              "color-format": e.colorFormat,
              "popper-class": e.popperClass,
              predefine: e.predefine,
              teleported: e.teleported,
              size: "small"
            }, null), l(u("el-icon"), null, H(t = $(o.value ? I : A)) ? t : {
              default: () => [t]
            })])]
          });
        }
      })]
    });
  }
});
export {
  P as ColorPickerSetter,
  D as NumericUnitSetter
};
