import { defineComponent as y, toRefs as _, ref as m, watch as x, createVNode as t, createTextVNode as k, resolveComponent as l, withModifiers as C } from "vue";
import { ElTooltip as b, ElCheckbox as g, ElButton as V, ElPopover as N } from "element-plus";
import { ai as w, A as h } from "./main-Blxobku2.js";
import { N as P } from "./index-CJma-oCZ.js";
const v = {
  "direction-value-setter": "_direction-value-setter_1wwvw_1",
  "outer-top": "_outer-top_1wwvw_41",
  "inner-top": "_inner-top_1wwvw_41",
  "outer-bottom": "_outer-bottom_1wwvw_41",
  "inner-bottom": "_inner-bottom_1wwvw_41",
  "outer-right": "_outer-right_1wwvw_48",
  "inner-right": "_inner-right_1wwvw_48",
  "outer-left": "_outer-left_1wwvw_48",
  "inner-left": "_inner-left_1wwvw_48",
  "un-mark-text": "_un-mark-text_1wwvw_139",
  "dropdown-value-setter": "_dropdown-value-setter_1wwvw_146"
}, S = /* @__PURE__ */ y({
  name: "KlSetValue",
  components: {
    ElTooltip: b,
    ElCheckbox: g,
    ElButton: V,
    NumericUnitSetter: P
  },
  emits: ["change"],
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    currentValue: {
      type: [String, Number],
      default: ""
    }
  },
  setup(i, {
    emit: c
  }) {
    const {
      option: o,
      currentValue: a
    } = _(i), u = m(a.value), n = m(a.value === "auto"), s = m(!1), d = () => {
      c("change", {
        isSync: s.value,
        type: o.value.type,
        property: o.value.property,
        value: u.value
      }), o.value.isPopover = !1;
    }, f = () => {
      s.value = !1, n.value = a.value === "auto", u.value = a.value, c("change", null), o.value.isPopover = !1;
    };
    return x(() => i.currentValue, (e) => {
      u.value = e, n.value = e === "auto", s.value = !1;
    }), () => {
      var e, r;
      return t("section", {
        class: v["dropdown-value-setter"]
      }, [t("header", null, [t("span", null, [w(o.value.property), k(": ")]), !((e = o.value.exclude) != null && e.includes("auto")) && t(l("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "hide-after": 0,
        content: `设置 '${w(o.value.property)}' 值为: 'auto'`
      }, {
        default: () => [t(l("el-checkbox"), {
          modelValue: n.value,
          "onUpdate:modelValue": (p) => n.value = p,
          label: "自动",
          onChange: (p) => {
            u.value = p ? "auto" : "";
          }
        }, null)]
      })]), t("main", null, [!((r = o.value.exclude) != null && r.includes("sync")) && t(l("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "hide-after": 0,
        content: "勾选后, 上右下左将设置为相同值"
      }, {
        default: () => [t(l("el-checkbox"), {
          modelValue: s.value,
          "onUpdate:modelValue": (p) => s.value = p,
          label: "同步"
        }, null)]
      }), t(l("numeric-unit-setter"), {
        modelValue: u.value,
        "onUpdate:modelValue": (p) => u.value = p,
        min: typeof o.value.min == "number" ? o.value.min : -1 / 0,
        max: typeof o.value.max == "number" ? o.value.max : 1 / 0,
        excludeUnits: ["vw", "vh"],
        disabled: n.value
      }, null)]), t("footer", null, [t(l("el-button"), {
        text: !0,
        size: "small",
        onClick: f
      }, {
        default: () => [h.CANCEL]
      }), t(l("el-button"), {
        type: "primary",
        size: "small",
        onClick: d
      }, {
        default: () => [h.COMFIRM]
      })])]);
    };
  }
}), U = /* @__PURE__ */ y({
  name: "KlDirectionValueSetter",
  components: {
    ElTooltip: b,
    ElPopover: N,
    SetValue: S
  },
  emits: ["change"],
  props: {
    styles: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Array,
      default: () => []
    },
    markText: {
      type: Boolean,
      default: !0
    }
  },
  setup(i, {
    emit: c
  }) {
    const {
      styles: o,
      options: a,
      markText: u
    } = _(i), n = document.querySelector(".kl-editor-setter-aside");
    n == null || n.addEventListener("click", () => {
      a.value.forEach((e) => e.isPopover = !1);
    }), a.value.forEach((e) => {
      e.isTooltip = !1, e.isPopover = !1;
    });
    const s = (e) => {
      if (e === "auto")
        return "auto";
      {
        const r = parseFloat(String(e));
        return isNaN(r) ? "-" : r;
      }
    }, d = (e) => {
      a.value.forEach((r) => r.isPopover = !1), e.isPopover = !0;
    }, f = (e) => {
      c("change", e);
    };
    return () => t("div", {
      class: [v["direction-value-setter"], u.value ? "" : v["un-mark-text"]]
    }, [a.value.map((e, r) => t(l("el-tooltip"), {
      effect: "dark",
      placement: /left|right/.test(e.property.toLowerCase()) ? "right" : "top",
      "hide-after": 0,
      content: e.tooltip ? `<span>${e.tooltip}</span>` : `<span>${e.label}: ${w(e.property)}</span>`,
      "raw-content": !0,
      key: r,
      visible: e.isTooltip
    }, {
      default: () => [t("section", {
        class: v[e.className],
        onMouseenter: () => e.isTooltip = !0,
        onMouseleave: () => e.isTooltip = !1
      }, [t(l("el-popover"), {
        width: "225",
        placement: "top",
        transition: "el-zoom-in-bottom",
        visible: e.isPopover
      }, {
        default: () => [t(l("set-value"), {
          option: e,
          currentValue: o.value[e.property],
          onChange: f
        }, null)],
        reference: () => t("em", {
          onMouseenter: () => e.isTooltip = !1,
          onClick: C(() => d(e), ["stop"])
        }, [t(l("el-tooltip"), {
          effect: "dark",
          placement: "top",
          "hide-after": 0,
          content: !isNaN(o.value[e.property]) || o.value[e.property] ? String(o.value[e.property]) : "-"
        }, {
          default: () => [t("span", null, [s(o.value[e.property])])]
        })])
      })])]
    }))]);
  }
});
export {
  U as default
};
