import { defineComponent as g, toRefs as S, reactive as I, markRaw as i, createVNode as n, resolveComponent as p, isVNode as V } from "vue";
import { ElForm as C, ElFormItem as E, ElSelect as z, ElOption as D, ElButtonGroup as q, ElButton as R, ElTooltip as x, ElIcon as B } from "element-plus";
import { ai as T } from "./main-Blxobku2.js";
import { useResolveVnode as w } from "@klweb/compose-app-engine";
import { N as L, D as O } from "./index-CJma-oCZ.js";
import { e as j } from "./index-BbdVezoQ.js";
import { C as y } from "./index.module-DCp39l7Y.js";
const {
  IconLeftTop: M,
  IconRightTop: U,
  IconLeftBottom: $,
  IconRightBottom: A,
  IconStickyTop: K,
  IconStickyRight: P,
  IconStickyBottom: G,
  IconStickyLeft: H,
  IconStickyAuto: J,
  IconFloatLeft: Q,
  IconFloatRight: W,
  IconNone: h,
  IconClearLeft: X,
  IconClearRight: Y,
  IconClearBoth: Z
} = j;
function d(c) {
  return typeof c == "function" || Object.prototype.toString.call(c) === "[object Object]" && !V(c);
}
const se = /* @__PURE__ */ g({
  name: "KlPositionSetter",
  components: {
    ElForm: C,
    ElFormItem: E,
    ElSelect: z,
    ElOption: D,
    ElButtonGroup: q,
    ElButton: R,
    ElTooltip: x,
    ElIcon: B,
    NumericUnitSetter: L,
    DirectionValueSetter: O
  },
  props: {
    styles: {
      type: Object,
      default: () => ({})
    }
  },
  setup(c) {
    const {
      styles: l
    } = S(c), N = I([{
      label: "定位方式",
      property: "position",
      type: "positionMode",
      children: [{
        label: "静态定位",
        value: "static"
      }, {
        label: "相对定位",
        value: "relative"
      }, {
        label: "绝对定位",
        value: "absolute"
      }, {
        label: "相对视窗悬浮",
        value: "fixed"
      }, {
        label: "滚动吸附",
        value: "sticky"
      }]
    }, {
      label: "",
      type: "quickDirectionValue",
      children: [{
        label: "定位到左上角",
        property: "left,top",
        value: 0,
        icon: i(M)
      }, {
        label: "定位到右上角",
        property: "right,top",
        value: 0,
        icon: i(U)
      }, {
        label: "定位到左下角",
        property: "left,bottom",
        value: 0,
        icon: i($)
      }, {
        label: "定位到右下角",
        property: "right,bottom",
        value: 0,
        icon: i(A)
      }]
    }, {
      label: "",
      type: "quickStickyValue",
      children: [{
        label: "吸附顶部",
        property: "top",
        value: 0,
        icon: i(K)
      }, {
        label: "吸附右边",
        property: "right",
        value: 0,
        icon: i(P)
      }, {
        label: "吸附底部",
        property: "bottom",
        value: 0,
        icon: i(G)
      }, {
        label: "吸附左边",
        property: "left",
        value: 0,
        icon: i(H)
      }, {
        label: "自动吸附",
        property: "auto",
        value: 0,
        icon: i(J)
      }]
    }, {
      label: "",
      type: "directionValue",
      children: [{
        label: "上偏移",
        property: "top",
        className: "outer-top"
      }, {
        label: "右偏移",
        property: "right",
        className: "outer-right"
      }, {
        label: "下偏移",
        property: "bottom",
        className: "outer-bottom"
      }, {
        label: "左偏移",
        property: "left",
        className: "outer-left"
      }]
    }, {
      label: "堆叠顺序",
      property: "zIndex",
      type: "zIndex"
    }, {
      label: "浮动方向",
      type: "floatDirection",
      children: [{
        label: "左浮动",
        property: "float",
        value: "left",
        icon: i(Q),
        iconSize: 16,
        tooltip: "左浮动: left"
      }, {
        label: "右浮动",
        property: "float",
        value: "right",
        icon: i(W),
        iconSize: 16,
        tooltip: "右浮动: right"
      }, {
        label: "不浮动",
        property: "float",
        value: "none",
        icon: i(h),
        tooltip: "禁止浮动: none"
      }]
    }, {
      label: "清除浮动",
      type: "clearFloat",
      children: [{
        label: "清除左",
        property: "clear",
        value: "left",
        icon: i(X),
        iconSize: 17,
        tooltip: "清除左: left"
      }, {
        label: "清除右",
        property: "clear",
        value: "right",
        icon: i(Y),
        iconSize: 17,
        tooltip: "清除右: right"
      }, {
        label: "清除两边",
        property: "clear",
        value: "both",
        icon: i(Z),
        iconSize: 17,
        tooltip: "清除两边: both"
      }, {
        label: "不清除",
        property: "clear",
        value: "none",
        icon: i(h),
        tooltip: "不清除: none"
      }]
    }]), b = ["top", "right", "bottom", "left"], F = (s) => {
      (!s || ["static", "sticky"].includes(s)) && b.forEach((t) => {
        delete l.value[t];
      }), !s && delete l.value.zIndex;
    }, v = (s, t) => {
      const {
        top: o,
        right: a,
        bottom: r,
        left: e,
        float: u,
        clear: f
      } = l.value;
      switch (s) {
        case "left,top":
          return parseFloat(e) === 0 && parseFloat(o) === 0 && isNaN(parseFloat(a)) && isNaN(parseFloat(r));
        case "right,top":
          return parseFloat(a) === 0 && parseFloat(o) === 0 && isNaN(parseFloat(e)) && isNaN(parseFloat(r));
        case "left,bottom":
          return parseFloat(e) === 0 && parseFloat(r) === 0 && isNaN(parseFloat(a)) && isNaN(parseFloat(o));
        case "right,bottom":
          return parseFloat(a) === 0 && parseFloat(r) === 0 && isNaN(parseFloat(e)) && isNaN(parseFloat(o));
        case "top":
          return parseFloat(o) === 0 && isNaN(parseFloat(e)) && isNaN(parseFloat(a)) && isNaN(parseFloat(r));
        case "right":
          return parseFloat(a) === 0 && isNaN(parseFloat(e)) && isNaN(parseFloat(o)) && isNaN(parseFloat(r));
        case "bottom":
          return parseFloat(r) === 0 && isNaN(parseFloat(e)) && isNaN(parseFloat(a)) && isNaN(parseFloat(o));
        case "left":
          return parseFloat(e) === 0 && isNaN(parseFloat(a)) && isNaN(parseFloat(o)) && isNaN(parseFloat(r));
        case "auto":
          return parseFloat(e) === 0 && parseFloat(a) === 0 && parseFloat(o) === 0 && parseFloat(r) === 0;
        case "float":
          return u === t;
        case "clear":
          return f === t;
        default:
          return !1;
      }
    }, m = (s, t) => {
      const o = s.split(",");
      v(s, t) ? o.forEach((a) => {
        a === "auto" ? b.forEach((r) => {
          delete l.value[r];
        }) : delete l.value[a];
      }) : ["float", "clear"].includes(s) ? l.value[s] = t : b.forEach((a) => {
        o.includes("auto") || o.includes(a) ? l.value[a] = t : delete l.value[a];
      }), delete l.value.inset;
    }, k = (s) => {
      if (!s) return;
      const {
        isSync: t,
        property: o,
        value: a
      } = s;
      t ? b.forEach((r) => {
        a ? l.value[r] = a : delete l.value[r];
      }) : a ? l.value[o] = a : delete l.value[o], delete l.value.inset;
    };
    return () => {
      let s;
      return n(p("el-form"), {
        class: "kl-editor-setter__form",
        model: l.value,
        "label-width": "auto",
        "label-position": "left"
      }, d(s = N.map((t, o) => {
        let a, r;
        switch (t.type) {
          case "positionMode":
            return n(p("el-form-item"), {
              label: t.label,
              key: o
            }, {
              default: () => [n(p("el-select"), {
                class: "width--fill",
                modelValue: l.value[t.property],
                "onUpdate:modelValue": (e) => l.value[t.property] = e,
                clearable: !0,
                placeholder: "默认",
                onChange: F
              }, d(a = t.children.map((e, u) => n(p("el-option"), {
                label: e.label,
                value: e.value,
                key: u
              }, {
                default: () => [n("section", {
                  class: y["display-select-option-item"]
                }, [n("span", null, [e.value]), n("span", null, [e.label])])]
              }))) ? a : {
                default: () => [a]
              })]
            });
          case "quickDirectionValue":
          case "quickStickyValue":
          case "floatDirection":
          case "clearFloat":
            return (t.type === "quickDirectionValue" && ["absolute", "fixed"].includes(l.value.position) || t.type === "quickStickyValue" && ["sticky"].includes(l.value.position) || ["floatDirection", "clearFloat"].includes(t.type)) && n(p("el-form-item"), {
              label: t.label,
              key: o,
              style: {
                "margin-bottom": ["quickDirectionValue", "quickStickyValue"].includes(t.type) ? "5px" : ""
              }
            }, {
              default: () => [n(p("el-button-group"), {
                class: y["button-group-icons"]
              }, d(r = t.children.map((e, u) => {
                let f;
                return n(p("el-tooltip"), {
                  effect: "dark",
                  placement: "top",
                  "hide-after": 0,
                  content: e.tooltip ? `<span>${e.tooltip}</span>` : `<span>${e.label}</span>`,
                  "raw-content": !0,
                  key: u
                }, {
                  default: () => [n(p("el-button"), {
                    plain: !0,
                    class: v(e.property, e.value) ? y.active : "",
                    onClick: () => m(e.property, e.value)
                  }, {
                    default: () => [e.icon ? n(p("el-icon"), {
                      size: e.iconSize ?? 15
                    }, d(f = w(e.icon)) ? f : {
                      default: () => [f]
                    }) : e.label]
                  })]
                });
              })) ? r : {
                default: () => [r]
              })]
            });
          case "directionValue":
            return l.value.position && l.value.position !== "static" && n(p("el-form-item"), {
              label: t.label,
              key: o
            }, {
              default: () => [n(p("direction-value-setter"), {
                styles: l.value,
                options: t.children,
                markText: !1,
                style: "height: 82px",
                onChange: k
              }, null)]
            });
          case "zIndex":
            return l.value.position && l.value.position !== "static" && n(p("el-form-item"), {
              label: t.label,
              key: o
            }, {
              default: () => [n(p("numeric-unit-setter"), {
                unUnit: !0,
                modelValue: l.value[t.property],
                "onUpdate:modelValue": (e) => l.value[t.property] = e,
                tooltip: `${T(t.property)}`
              }, null)]
            });
        }
      })) ? s : {
        default: () => [s]
      });
    };
  }
});
export {
  se as default
};
