import { defineComponent as g, toRefs as k, ref as B, reactive as w, markRaw as d, createVNode as o, resolveComponent as a, isVNode as E } from "vue";
import { ElForm as V, ElFormItem as I, ElSelect as U, ElOption as O, ElButtonGroup as P, ElButton as R, ElTooltip as W, ElIcon as j } from "element-plus";
import { toKebabCase as f } from "@klweb/utils";
import { useResolveVnode as N } from "@klweb/compose-app-engine";
import { N as F, C as T } from "./index-BRrmKl1s.js";
import { e as z } from "./index-ClGUov3E.js";
import { C as y } from "./index.module-DCp39l7Y.js";
const {
  IconBorder: K,
  IconBorderTop: L,
  IconBorderRight: x,
  IconBorderBottom: G,
  IconBorderLeft: M
} = z;
function s(n) {
  return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !E(n);
}
const Y = /* @__PURE__ */ g({
  name: "KlBorderSetter",
  components: {
    ElForm: V,
    ElFormItem: I,
    ElSelect: U,
    ElOption: O,
    ElButtonGroup: P,
    ElButton: R,
    ElTooltip: W,
    ElIcon: j,
    NumericUnitSetter: F,
    ColorPickerSetter: T
  },
  props: {
    styles: {
      type: Object,
      default: () => ({})
    }
  },
  setup(n) {
    const {
      styles: t
    } = k(n), e = B(""), m = w([{
      label: "",
      type: "propPrefixes",
      children: [{
        label: "全边框",
        property: "border",
        icon: d(K)
      }, {
        label: "上边框",
        property: "borderTop",
        icon: d(L)
      }, {
        label: "右边框",
        property: "borderRight",
        icon: d(x)
      }, {
        label: "下边框",
        property: "borderBottom",
        icon: d(G)
      }, {
        label: "左边框",
        property: "borderLeft",
        icon: d(M)
      }]
    }, {
      label: "边框类型",
      type: "styles",
      children: [{
        label: "实线",
        value: "solid"
      }, {
        label: "虚线",
        value: "dashed"
      }, {
        label: "点状线",
        value: "dotted"
      }, {
        label: "双线",
        value: "double"
      }, {
        label: "凹槽线",
        value: "groove"
      }, {
        label: "凸起线",
        value: "ridge"
      }, {
        label: "内嵌线",
        value: "inset"
      }, {
        label: "外凸线",
        value: "outset"
      }, {
        label: "无边框",
        value: "none"
      }]
    }, {
      label: "宽度值",
      type: "width"
    }, {
      label: "颜色值",
      type: "color"
    }]), h = (r) => {
      if (e.value === r) {
        delete t.value[`${e.value}Style`], delete t.value[`${e.value}Width`], delete t.value[`${e.value}Color`], e.value = "";
        return;
      }
      e.value = r;
    }, C = (r) => {
      !r && delete t.value[`${e.value}Style`];
    }, $ = (r) => {
      !r && delete t.value[`${e.value}Width`];
    }, S = (r) => {
      !r && delete t.value[`${e.value}Color`];
    };
    return () => {
      let r;
      return o(a("el-form"), {
        class: "kl-editor-setter__form",
        model: t.value,
        "label-width": "auto",
        "label-position": "left"
      }, s(r = m.map((u, p) => {
        let c, i;
        switch (u.type) {
          case "propPrefixes":
            return o(a("el-form-item"), {
              label: u.label,
              key: p
            }, {
              default: () => [o(a("el-button-group"), {
                class: y["button-group-icons"]
              }, s(c = u.children.map((l, v) => {
                let b;
                return o(a("el-tooltip"), {
                  effect: "dark",
                  placement: "top",
                  "hide-after": 0,
                  content: l.tooltip ? `<span>${l.tooltip}</span>` : `<span>${l.label}: ${f(l.property)}</span>`,
                  "raw-content": !0,
                  key: v
                }, {
                  default: () => [o(a("el-button"), {
                    plain: !0,
                    class: e.value === l.property ? y.active : "",
                    onClick: () => h(l.property)
                  }, {
                    default: () => [l.icon ? o(a("el-icon"), {
                      size: l.iconSize ?? 15
                    }, s(b = N(l.icon)) ? b : {
                      default: () => [b]
                    }) : l.label]
                  })]
                });
              })) ? c : {
                default: () => [c]
              })]
            });
          case "styles":
            return e.value && o(a("el-form-item"), {
              label: u.label,
              key: p
            }, {
              default: () => [o(a("el-select"), {
                class: "width--full",
                modelValue: t.value[`${e.value}Style`],
                "onUpdate:modelValue": (l) => t.value[`${e.value}Style`] = l,
                placeholder: "请选择",
                clearable: !0,
                onChange: C
              }, s(i = u.children.map((l, v) => o(a("el-option"), {
                label: l.label,
                value: l.value,
                key: v
              }, {
                default: () => [o("section", {
                  class: y["display-select-option-item"]
                }, [o("span", null, [l.value]), o("span", null, [l.label])])]
              }))) ? i : {
                default: () => [i]
              })]
            });
          case "width":
            return e.value && o(a("el-form-item"), {
              label: u.label,
              key: p
            }, {
              default: () => [o(a("numeric-unit-setter"), {
                modelValue: t.value[`${e.value}Width`],
                "onUpdate:modelValue": (l) => t.value[`${e.value}Width`] = l,
                excludeUnits: ["%", "vw", "vh"],
                min: 0,
                tooltip: `${f(e.value)}-width`,
                onUpdated: $
              }, null)]
            });
          case "color":
            return e.value && o(a("el-form-item"), {
              label: u.label,
              key: p
            }, {
              default: () => [o(a("color-picker-setter"), {
                modelValue: t.value[`${e.value}Color`],
                "onUpdate:modelValue": (l) => t.value[`${e.value}Color`] = l,
                tooltip: `${f(e.value)}-color`,
                onUpdated: S
              }, null)]
            });
        }
      })) ? r : {
        default: () => [r]
      });
    };
  }
});
export {
  Y as default
};
