import { defineComponent as w, ref as m, reactive as x, watch as h, createVNode as n, resolveComponent as a, isVNode as V } from "vue";
import { ElInputNumber as g, ElDropdown as N, ElDropdownMenu as U, ElDropdownItem as S, ElTooltip as _ } from "element-plus";
import { extractNumerAndUnit as C } from "@klweb/utils";
const f = {
  "el-input-number--custom": "_el-input-number--custom_1w01r_1",
  "unit-value": "_unit-value_1w01r_9"
};
function p(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !V(e);
}
const $ = /* @__PURE__ */ w({
  // 通用数值单位设置器 TSX 组件，如设置宽度、高度、行高等
  name: "KlNumericUnitSetter",
  components: {
    ElInputNumber: g,
    ElDropdown: N,
    ElDropdownMenu: U,
    ElDropdownItem: S,
    ElTooltip: _
  },
  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: d
  }) {
    const i = m(!1), o = m(), u = m("px"), r = x(e.units.filter((t) => !e.excludeUnits.includes(t))), c = () => {
      const {
        modelValue: t,
        unUnit: l
      } = e, {
        number: y,
        unit: s
      } = C(String(t));
      o.value = y, u.value = l ? "" : s && r.includes(s) ? s : r[0];
    };
    c();
    const b = (t) => {
      const l = typeof t == "number" && u.value ? `${t}${u.value}` : typeof t == "number" && !u.value ? t : "";
      d("update:modelValue", l), d("updated", l);
    }, v = (t) => {
      const l = typeof o.value == "number" ? `${o.value}${t}` : "";
      u.value = t, d("update:modelValue", l), d("updated", l);
    };
    return h(() => e.modelValue, () => {
      c();
    }), () => n(a("el-tooltip"), {
      effect: "dark",
      placement: "top",
      "hide-after": 0,
      content: `<span>${e.tooltip}</span>`,
      "raw-content": !0,
      disabled: !e.tooltip || e.disabled,
      visible: i.value
    }, {
      default: () => [n(a("el-input-number"), {
        class: f["el-input-number--custom"],
        modelValue: o.value,
        "onUpdate:modelValue": (t) => o.value = t,
        min: e.min,
        max: e.max,
        step: e.step,
        size: e.size,
        "controls-position": "right",
        disabled: e.disabled,
        style: {
          width: e.width
        },
        onChange: b,
        onMouseenter: () => i.value = !0,
        onMouseleave: () => i.value = !1
      }, {
        suffix: () => !e.unUnit && n(a("el-tooltip"), {
          effect: "dark",
          placement: "top",
          "hide-after": 0,
          content: "切换单位"
        }, {
          default: () => [n(a("el-dropdown"), {
            placement: "bottom",
            trigger: "click",
            onCommand: v
          }, {
            default: () => [n("span", {
              class: f["unit-value"],
              onMouseenter: () => i.value = !1,
              style: {
                "line-height": e.size === "large" ? "38px" : e.size === "small" ? "20px" : "30px"
              }
            }, [u.value])],
            dropdown: () => {
              let t;
              return n(a("el-dropdown-menu"), null, p(t = r.map((l) => e.excludeUnits.includes(l) ? null : n(a("el-dropdown-item"), {
                command: l
              }, p(l) ? l : {
                default: () => [l]
              }))) ? t : {
                default: () => [t]
              });
            }
          })]
        })
      })]
    });
  }
});
export {
  $ as default
};
