import { defineComponent as C, toRefs as I, reactive as x, markRaw as a, createVNode as o, resolveComponent as t, isVNode as S } from "vue";
import { ElRow as R, ElCol as E, ElForm as k, ElFormItem as g, ElSelect as V, ElOption as F, ElButtonGroup as j, ElButton as O, ElTooltip as U, ElIcon as B } from "element-plus";
import { useResolveVnode as N } from "@klweb/compose-app-engine";
import { ai as $, an as G } from "./main-Blxobku2.js";
import { N as L } from "./index-CJma-oCZ.js";
import { e as W } from "./index-BbdVezoQ.js";
import { C as v } from "./index.module-DCp39l7Y.js";
const {
  IconRow: A,
  IconColumn: D,
  IconRowReverse: K,
  IconColumnReverse: M,
  IconRowFlexStart: z,
  IconRowCenter: P,
  IconRowFlexEnd: T,
  IconRowSpaceBetween: q,
  IconRowSpaceAround: H,
  IconColumnFlexStart: J,
  IconColumnCenter: Q,
  IconColumnFlexEnd: X,
  IconColumnBaseline: Y,
  IconColumnStretch: Z
} = W;
function s(u) {
  return typeof u == "function" || Object.prototype.toString.call(u) === "[object Object]" && !S(u);
}
const re = /* @__PURE__ */ C({
  name: "KlLayoutSetter",
  components: {
    ElRow: R,
    ElCol: E,
    ElForm: k,
    ElFormItem: g,
    ElSelect: V,
    ElOption: F,
    ElButtonGroup: j,
    ElButton: O,
    ElTooltip: U,
    ElIcon: B,
    NumericUnitSetter: L
  },
  props: {
    parentStyles: {
      type: Object,
      default: () => ({})
    },
    styles: {
      type: Object,
      default: () => ({})
    }
  },
  setup(u) {
    const {
      styles: n,
      parentStyles: f
    } = I(u), m = x([{
      label: "布局模式",
      property: "display",
      type: "mode",
      children: [{
        label: "弹性布局",
        value: "flex"
      }, {
        label: "块级布局",
        value: "block"
      }, {
        label: "行内区块",
        value: "inline-block"
      }, {
        label: "行内元素",
        value: "inline"
      }, {
        label: "隐藏",
        value: "none"
      }]
    }, {
      label: "主轴方向",
      property: "flexDirection",
      type: "layout",
      children: [{
        label: "水平方向",
        value: "row",
        icon: a(A)
      }, {
        label: "水平反向",
        value: "row-reverse",
        icon: a(K)
      }, {
        label: "垂直方向",
        value: "column",
        icon: a(D)
      }, {
        label: "垂直反向",
        value: "column-reverse",
        icon: a(M)
      }]
    }, {
      label: "主轴对齐",
      property: "justifyContent",
      type: "layout",
      children: [{
        label: "左对齐",
        value: "flex-start",
        icon: a(z)
      }, {
        label: "水平居中",
        value: "center",
        icon: a(P)
      }, {
        label: "右对齐",
        value: "flex-end",
        icon: a(T)
      }, {
        label: "两端对齐",
        value: "space-between",
        icon: a(q)
      }, {
        label: "间隔相等",
        value: "space-around",
        icon: a(H)
      }]
    }, {
      label: "交叉轴对齐",
      property: "alignItems",
      type: "layout",
      children: [{
        label: "起点对齐",
        value: "flex-start",
        icon: a(J)
      }, {
        label: "中点对齐",
        value: "center",
        icon: a(Q)
      }, {
        label: "终点对齐",
        value: "flex-end",
        icon: a(X)
      }, {
        label: "基线对齐",
        value: "baseline",
        icon: a(Y)
      }, {
        label: "占满容器高度",
        value: "stretch",
        icon: a(Z)
      }]
    }, {
      label: "换行方式",
      property: "flexWrap",
      type: "layout",
      children: [{
        label: "不换行",
        value: "nowrap"
      }, {
        label: "换行",
        value: "wrap"
      }, {
        label: "逆换行",
        value: "wrap-reverse"
      }]
    }, {
      label: "行列间距",
      type: "gap",
      children: [{
        label: "行间距",
        property: "rowGap"
      }, {
        label: "列间距",
        property: "columnGap"
      }]
    }, {
      label: "排列顺序",
      property: "order",
      type: "order",
      tooltip: "定义当前元素的排列顺序，数值<br />越小，排列越靠前，默认为: 0"
    }]), w = (r) => {
      !["flex", "none"].includes(r) && G(n.value);
    }, h = (r, e) => {
      n.value[r] === e ? delete n.value[r] : n.value[r] = e;
    };
    return () => {
      let r;
      return o(t("el-form"), {
        class: "kl-editor-setter__form",
        model: n.value,
        "label-width": "auto",
        "label-position": "left"
      }, s(r = m.map((e, d) => {
        let i, b, y;
        switch (e.type) {
          // 布局模式 
          case "mode":
            return o(t("el-form-item"), {
              label: e.label,
              key: d
            }, {
              default: () => [o(t("el-select"), {
                class: "width--fill",
                modelValue: n.value[e.property],
                "onUpdate:modelValue": (l) => n.value[e.property] = l,
                clearable: !0,
                placeholder: "默认",
                onChange: w
              }, s(i = e.children.map((l, p) => o(t("el-option"), {
                label: l.label,
                value: l.value,
                key: p
              }, {
                default: () => [o("section", {
                  class: v["display-select-option-item"]
                }, [o("span", null, [l.value]), o("span", null, [l.label])])]
              }))) ? i : {
                default: () => [i]
              })]
            });
          case "layout":
          case "gap":
            return n.value.display === "flex" && o(t("el-form-item"), {
              label: e.label,
              key: d
            }, {
              default: () => [
                // 布局设置
                e.type === "layout" ? o(t("el-button-group"), {
                  class: v["button-group-icons"]
                }, s(b = e.children.map((l, p) => {
                  let c;
                  return o(t("el-tooltip"), {
                    effect: "dark",
                    placement: "top",
                    "hide-after": 0,
                    content: `<span>${e.property !== "flexWrap" ? l.label + ":" : ""} ${l.value}</span>`,
                    "raw-content": !0,
                    key: p
                  }, {
                    default: () => [o(t("el-button"), {
                      plain: !0,
                      class: n.value[e.property] == l.value ? v.active : "",
                      onClick: () => h(e.property, l.value)
                    }, {
                      default: () => [e.property !== "flexWrap" ? o(t("el-icon"), {
                        size: 19
                      }, s(c = N(l.icon)) ? c : {
                        default: () => [c]
                      }) : l.label]
                    })]
                  });
                })) ? b : {
                  default: () => [b]
                }) : e.type === "gap" ? o(t("el-row"), {
                  gutter: 5
                }, s(y = e.children.map((l, p) => o(t("el-col"), {
                  span: 12,
                  key: p
                }, {
                  default: () => [o(t("numeric-unit-setter"), {
                    min: 0,
                    tooltip: `${$(l.property)}`,
                    modelValue: n.value[l.property],
                    "onUpdate:modelValue": (c) => n.value[l.property] = c,
                    excludeUnits: ["vw", "vh"]
                  }, null)]
                }))) ? y : {
                  default: () => [y]
                }) : null
              ]
            });
          case "order":
            return f.value.display === "flex" && o(t("el-form-item"), {
              label: e.label,
              key: d
            }, {
              default: () => [o(t("numeric-unit-setter"), {
                tooltip: `${e.tooltip}`,
                modelValue: n.value[e.property],
                "onUpdate:modelValue": (l) => n.value[e.property] = l,
                unUnit: !0
              }, null)]
            });
        }
      })) ? r : {
        default: () => [r]
      });
    };
  }
});
export {
  re as default
};
