import { defineComponent as B, toRefs as h, ref as S, reactive as C, markRaw as s, createVNode as l, resolveComponent as r, isVNode as I } from "vue";
import { ElForm as V, ElFormItem as g, ElButtonGroup as k, ElButton as z, ElTooltip as E, ElIcon as w } from "element-plus";
import { ai as f } from "./main-Blxobku2.js";
import { useResolveVnode as T } from "@klweb/compose-app-engine";
import { N as j } from "./index-CJma-oCZ.js";
import { e as L } from "./index-BbdVezoQ.js";
import { C as b } from "./index.module-DCp39l7Y.js";
const {
  IconBorderRadius: N,
  IconBorderRadiusTL: O,
  IconBorderRadiusTR: P,
  IconBorderRadiusBL: U,
  IconBorderRadiusBR: x
} = L;
function d(a) {
  return typeof a == "function" || Object.prototype.toString.call(a) === "[object Object]" && !I(a);
}
const D = /* @__PURE__ */ B({
  name: "KlBorderRadiusSetter",
  components: {
    ElForm: V,
    ElFormItem: g,
    ElButtonGroup: k,
    ElButton: z,
    ElTooltip: E,
    ElIcon: w,
    NumericUnitSetter: j
  },
  props: {
    styles: {
      type: Object,
      default: () => ({})
    }
  },
  setup(a) {
    const {
      styles: n
    } = h(a), o = S(""), m = C([{
      label: "",
      type: "propPrefixes",
      children: [{
        label: "全圆角",
        property: "borderRadius",
        icon: s(N)
      }, {
        label: "上左圆角",
        property: "borderTopLeftRadius",
        icon: s(O),
        iconSize: 18
      }, {
        label: "上右圆角",
        property: "borderTopRightRadius",
        icon: s(P),
        iconSize: 18
      }, {
        label: "下左圆角",
        property: "borderBottomLeftRadius",
        icon: s(U),
        iconSize: 18
      }, {
        label: "下右圆角",
        property: "borderBottomRightRadius",
        icon: s(x),
        iconSize: 18
      }]
    }, {
      label: "圆角值",
      type: "radiusValue"
    }]), v = (t) => {
      if (o.value === t) {
        delete n.value[t], o.value = "";
        return;
      }
      o.value = t;
    }, y = (t) => {
      !t && delete n.value[o.value];
    };
    return () => {
      let t;
      return l(r("el-form"), {
        class: "kl-editor-setter__form",
        model: n.value,
        "label-width": "auto",
        "label-position": "left"
      }, d(t = m.map((u, c) => {
        let i;
        switch (u.type) {
          case "propPrefixes":
            return l(r("el-form-item"), {
              label: u.label,
              key: c
            }, {
              default: () => [l(r("el-button-group"), {
                class: b["button-group-icons"]
              }, d(i = u.children.map((e, R) => {
                let p;
                return l(r("el-tooltip"), {
                  effect: "dark",
                  placement: "top",
                  "hide-after": 0,
                  content: e.tooltip ? `<span>${e.tooltip}</span>` : `<span>${e.label}: ${f(e.property)}</span>`,
                  "raw-content": !0,
                  key: R
                }, {
                  default: () => [l(r("el-button"), {
                    plain: !0,
                    class: o.value === e.property ? b.active : "",
                    onClick: () => v(e.property)
                  }, {
                    default: () => [e.icon ? l(r("el-icon"), {
                      size: e.iconSize ?? 15
                    }, d(p = T(e.icon)) ? p : {
                      default: () => [p]
                    }) : e.label]
                  })]
                });
              })) ? i : {
                default: () => [i]
              })]
            });
          case "radiusValue":
            return o.value && l(r("el-form-item"), {
              label: u.label,
              key: c
            }, {
              default: () => [l(r("numeric-unit-setter"), {
                modelValue: n.value[o.value],
                "onUpdate:modelValue": (e) => n.value[o.value] = e,
                excludeUnits: ["vw", "vh"],
                min: 0,
                tooltip: f(o.value),
                onUpdated: y
              }, null)]
            });
        }
      })) ? t : {
        default: () => [t]
      });
    };
  }
});
export {
  D as default
};
