sapit-ui-plus/lib/js/SFormLayout.js

import { defineComponent as Y, createVNode as p, computed as O, resolveComponent as G, openBlock as x, createElementBlock as H, normalizeStyle as F, withCtx as P, createElementVNode as B, toDisplayString as Z, renderSlot as R, createCommentVNode as T, Fragment as tt, renderList as et, createBlock as L, normalizeClass as at, createTextVNode as K } from "vue";
import { c as U, _ as z, o as nt, a2 as X, P as g, ap as ct, a4 as D, a3 as ot, ac as dt, d as c, q as pt, t as mt, g as gt, m as ht, r as ut, i as ft, u as $t, aq as St, ar as bt, as as yt, at as vt, j as Ct, a1 as It, a9 as xt, l as wt, au as _t, av as Tt, U as zt, aw as Ht } from "./index2.js";
import { P as Bt } from "./index18.js";
function it(t) {
  return typeof t == "string";
}
function Dt() {
}
const rt = () => ({
  prefixCls: String,
  itemWidth: String,
  active: {
    type: Boolean,
    default: void 0
  },
  disabled: {
    type: Boolean,
    default: void 0
  },
  status: X(),
  iconPrefix: String,
  icon: g.any,
  adjustMarginRight: String,
  stepNumber: Number,
  stepIndex: Number,
  description: g.any,
  title: g.any,
  subTitle: g.any,
  progressDot: ct(g.oneOfType([g.looseBool, g.func])),
  tailContent: g.any,
  icons: g.shape({
    finish: g.any,
    error: g.any
  }).loose,
  onClick: D(),
  onStepClick: D(),
  stepIcon: D(),
  itemRender: D(),
  __legacy: ot()
}), st = Y({
  compatConfig: {
    MODE: 3
  },
  name: "Step",
  inheritAttrs: !1,
  props: rt(),
  setup(t, e) {
    let {
      slots: i,
      emit: n,
      attrs: o
    } = e;
    const r = (d) => {
      n("click", d), n("stepClick", t.stepIndex);
    }, u = (d) => {
      let {
        icon: s,
        title: a,
        description: f
      } = d;
      const {
        prefixCls: l,
        stepNumber: C,
        status: h,
        iconPrefix: I,
        icons: m,
        progressDot: $ = i.progressDot,
        stepIcon: _ = i.stepIcon
      } = t;
      let S;
      const y = U(`${l}-icon`, `${I}icon`, {
        [`${I}icon-${s}`]: s && it(s),
        [`${I}icon-check`]: !s && h === "finish" && (m && !m.finish || !m),
        [`${I}icon-cross`]: !s && h === "error" && (m && !m.error || !m)
      }), b = p("span", {
        class: `${l}-icon-dot`
      }, null);
      return $ ? typeof $ == "function" ? S = p("span", {
        class: `${l}-icon`
      }, [$({
        iconDot: b,
        index: C - 1,
        status: h,
        title: a,
        description: f,
        prefixCls: l
      })]) : S = p("span", {
        class: `${l}-icon`
      }, [b]) : s && !it(s) ? S = p("span", {
        class: `${l}-icon`
      }, [s]) : m && m.finish && h === "finish" ? S = p("span", {
        class: `${l}-icon`
      }, [m.finish]) : m && m.error && h === "error" ? S = p("span", {
        class: `${l}-icon`
      }, [m.error]) : s || h === "finish" || h === "error" ? S = p("span", {
        class: y
      }, null) : S = p("span", {
        class: `${l}-icon`
      }, [C]), _ && (S = _({
        index: C - 1,
        status: h,
        title: a,
        description: f,
        node: S
      })), S;
    };
    return () => {
      var d, s, a, f;
      const {
        prefixCls: l,
        itemWidth: C,
        active: h,
        status: I = "wait",
        tailContent: m,
        adjustMarginRight: $,
        disabled: _,
        title: S = (d = i.title) === null || d === void 0 ? void 0 : d.call(i),
        description: y = (s = i.description) === null || s === void 0 ? void 0 : s.call(i),
        subTitle: b = (a = i.subTitle) === null || a === void 0 ? void 0 : a.call(i),
        icon: v = (f = i.icon) === null || f === void 0 ? void 0 : f.call(i),
        onClick: w,
        onStepClick: W
      } = t, A = I || "wait", Q = U(`${l}-item`, `${l}-item-${A}`, {
        [`${l}-item-custom`]: v,
        [`${l}-item-active`]: h,
        [`${l}-item-disabled`]: _ === !0
      }), N = {};
      C && (N.width = C), $ && (N.marginRight = $);
      const M = {
        onClick: w || Dt
      };
      W && !_ && (M.role = "button", M.tabindex = 0, M.onClick = r);
      const j = p("div", z(z({}, nt(o, ["__legacy"])), {}, {
        class: [Q, o.class],
        style: [o.style, N]
      }), [p("div", z(z({}, M), {}, {
        class: `${l}-item-container`
      }), [p("div", {
        class: `${l}-item-tail`
      }, [m]), p("div", {
        class: `${l}-item-icon`
      }, [u({
        icon: v,
        title: S,
        description: y
      })]), p("div", {
        class: `${l}-item-content`
      }, [p("div", {
        class: `${l}-item-title`
      }, [S, b && p("div", {
        title: typeof b == "string" ? b : void 0,
        class: `${l}-item-subtitle`
      }, [b])]), y && p("div", {
        class: `${l}-item-description`
      }, [y])])])]);
      return t.itemRender ? t.itemRender(j) : j;
    };
  }
});
var Wt = function(t, e) {
  var i = {};
  for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && e.indexOf(n) < 0 && (i[n] = t[n]);
  if (t != null && typeof Object.getOwnPropertySymbols == "function") for (var o = 0, n = Object.getOwnPropertySymbols(t); o < n.length; o++)
    e.indexOf(n[o]) < 0 && Object.prototype.propertyIsEnumerable.call(t, n[o]) && (i[n[o]] = t[n[o]]);
  return i;
};
const Pt = Y({
  compatConfig: {
    MODE: 3
  },
  name: "Steps",
  props: {
    type: g.string.def("default"),
    prefixCls: g.string.def("vc-steps"),
    iconPrefix: g.string.def("vc"),
    direction: g.string.def("horizontal"),
    labelPlacement: g.string.def("horizontal"),
    status: X("process"),
    size: g.string.def(""),
    progressDot: g.oneOfType([g.looseBool, g.func]).def(void 0),
    initial: g.number.def(0),
    current: g.number.def(0),
    items: g.array.def(() => []),
    icons: g.shape({
      finish: g.any,
      error: g.any
    }).loose,
    stepIcon: D(),
    isInline: g.looseBool,
    itemRender: D()
  },
  emits: ["change"],
  setup(t, e) {
    let {
      slots: i,
      emit: n
    } = e;
    const o = (d) => {
      const {
        current: s
      } = t;
      s !== d && n("change", d);
    }, r = (d, s, a) => {
      const {
        prefixCls: f,
        iconPrefix: l,
        status: C,
        current: h,
        initial: I,
        icons: m,
        stepIcon: $ = i.stepIcon,
        isInline: _,
        itemRender: S,
        progressDot: y = i.progressDot
      } = t, b = _ || y, v = c(c({}, d), {
        class: ""
      }), w = I + s, W = {
        active: w === h,
        stepNumber: w + 1,
        stepIndex: w,
        key: w,
        prefixCls: f,
        iconPrefix: l,
        progressDot: b,
        stepIcon: $,
        icons: m,
        onStepClick: o
      };
      return C === "error" && s === h - 1 && (v.class = `${f}-next-error`), v.status || (w === h ? v.status = C : w < h ? v.status = "finish" : v.status = "wait"), _ && (v.icon = void 0, v.subTitle = void 0), a ? a(c(c({}, v), W)) : (S && (v.itemRender = (A) => S(v, A)), p(st, z(z(z({}, v), W), {}, {
        __legacy: !1
      }), null));
    }, u = (d, s) => r(c({}, d.props), s, (a) => pt(d, a));
    return () => {
      var d;
      const {
        prefixCls: s,
        direction: a,
        type: f,
        labelPlacement: l,
        iconPrefix: C,
        status: h,
        size: I,
        current: m,
        progressDot: $ = i.progressDot,
        initial: _,
        icons: S,
        items: y,
        isInline: b,
        itemRender: v
      } = t, w = Wt(t, ["prefixCls", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "initial", "icons", "items", "isInline", "itemRender"]), W = f === "navigation", A = b || $, Q = b ? "horizontal" : a, N = b ? void 0 : I, M = A ? "vertical" : l, j = U(s, `${s}-${a}`, {
        [`${s}-${N}`]: N,
        [`${s}-label-${M}`]: Q === "horizontal",
        [`${s}-dot`]: !!A,
        [`${s}-navigation`]: W,
        [`${s}-inline`]: b
      });
      return p("div", z({
        class: j
      }, w), [y.filter((J) => J).map((J, lt) => r(J, lt)), dt((d = i.default) === null || d === void 0 ? void 0 : d.call(i)).map(u)]);
    };
  }
}), Xt = (t) => {
  const {
    componentCls: e,
    stepsIconCustomTop: i,
    stepsIconCustomSize: n,
    stepsIconCustomFontSize: o
  } = t;
  return {
    [`${e}-item-custom`]: {
      [`> ${e}-item-container > ${e}-item-icon`]: {
        height: "auto",
        background: "none",
        border: 0,
        [`> ${e}-icon`]: {
          top: i,
          width: n,
          height: n,
          fontSize: o,
          lineHeight: `${n}px`
        }
      }
    },
    // Only adjust horizontal customize icon width
    [`&:not(${e}-vertical)`]: {
      [`${e}-item-custom`]: {
        [`${e}-item-icon`]: {
          width: "auto",
          background: "none"
        }
      }
    }
  };
}, At = (t) => {
  const {
    componentCls: e,
    stepsIconSize: i,
    lineHeight: n,
    stepsSmallIconSize: o
  } = t;
  return {
    [`&${e}-label-vertical`]: {
      [`${e}-item`]: {
        overflow: "visible",
        "&-tail": {
          marginInlineStart: i / 2 + t.controlHeightLG,
          padding: `${t.paddingXXS}px ${t.paddingLG}px`
        },
        "&-content": {
          display: "block",
          width: (i / 2 + t.controlHeightLG) * 2,
          marginTop: t.marginSM,
          textAlign: "center"
        },
        "&-icon": {
          display: "inline-block",
          marginInlineStart: t.controlHeightLG
        },
        "&-title": {
          paddingInlineEnd: 0,
          paddingInlineStart: 0,
          "&::after": {
            display: "none"
          }
        },
        "&-subtitle": {
          display: "block",
          marginBottom: t.marginXXS,
          marginInlineStart: 0,
          lineHeight: n
        }
      },
      [`&${e}-small:not(${e}-dot)`]: {
        [`${e}-item`]: {
          "&-icon": {
            marginInlineStart: t.controlHeightLG + (i - o) / 2
          }
        }
      }
    }
  };
}, Nt = (t) => {
  const {
    componentCls: e,
    stepsNavContentMaxWidth: i,
    stepsNavArrowColor: n,
    stepsNavActiveColor: o,
    motionDurationSlow: r
  } = t;
  return {
    [`&${e}-navigation`]: {
      paddingTop: t.paddingSM,
      [`&${e}-small`]: {
        [`${e}-item`]: {
          "&-container": {
            marginInlineStart: -t.marginSM
          }
        }
      },
      [`${e}-item`]: {
        overflow: "visible",
        textAlign: "center",
        "&-container": {
          display: "inline-block",
          height: "100%",
          marginInlineStart: -t.margin,
          paddingBottom: t.paddingSM,
          textAlign: "start",
          transition: `opacity ${r}`,
          [`${e}-item-content`]: {
            maxWidth: i
          },
          [`${e}-item-title`]: c(c({
            maxWidth: "100%",
            paddingInlineEnd: 0
          }, mt), {
            "&::after": {
              display: "none"
            }
          })
        },
        [`&:not(${e}-item-active)`]: {
          [`${e}-item-container[role='button']`]: {
            cursor: "pointer",
            "&:hover": {
              opacity: 0.85
            }
          }
        },
        "&:last-child": {
          flex: 1,
          "&::after": {
            display: "none"
          }
        },
        "&::after": {
          position: "absolute",
          top: `calc(50% - ${t.paddingSM / 2}px)`,
          insetInlineStart: "100%",
          display: "inline-block",
          width: t.fontSizeIcon,
          height: t.fontSizeIcon,
          borderTop: `${t.lineWidth}px ${t.lineType} ${n}`,
          borderBottom: "none",
          borderInlineStart: "none",
          borderInlineEnd: `${t.lineWidth}px ${t.lineType} ${n}`,
          transform: "translateY(-50%) translateX(-50%) rotate(45deg)",
          content: '""'
        },
        "&::before": {
          position: "absolute",
          bottom: 0,
          insetInlineStart: "50%",
          display: "inline-block",
          width: 0,
          height: t.lineWidthBold,
          backgroundColor: o,
          transition: `width ${r}, inset-inline-start ${r}`,
          transitionTimingFunction: "ease-out",
          content: '""'
        }
      },
      [`${e}-item${e}-item-active::before`]: {
        insetInlineStart: 0,
        width: "100%"
      }
    },
    [`&${e}-navigation${e}-vertical`]: {
      [`> ${e}-item`]: {
        marginInlineEnd: 0,
        "&::before": {
          display: "none"
        },
        [`&${e}-item-active::before`]: {
          top: 0,
          insetInlineEnd: 0,
          insetInlineStart: "unset",
          display: "block",
          width: t.lineWidth * 3,
          height: `calc(100% - ${t.marginLG}px)`
        },
        "&::after": {
          position: "relative",
          insetInlineStart: "50%",
          display: "block",
          width: t.controlHeight * 0.25,
          height: t.controlHeight * 0.25,
          marginBottom: t.marginXS,
          textAlign: "center",
          transform: "translateY(-50%) translateX(-50%) rotate(135deg)"
        },
        [`> ${e}-item-container > ${e}-item-tail`]: {
          visibility: "hidden"
        }
      }
    },
    [`&${e}-navigation${e}-horizontal`]: {
      [`> ${e}-item > ${e}-item-container > ${e}-item-tail`]: {
        visibility: "hidden"
      }
    }
  };
}, Mt = (t) => {
  const {
    antCls: e,
    componentCls: i
  } = t;
  return {
    [`&${i}-with-progress`]: {
      [`${i}-item`]: {
        paddingTop: t.paddingXXS,
        [`&-process ${i}-item-container ${i}-item-icon ${i}-icon`]: {
          color: t.processIconColor
        }
      },
      [`&${i}-vertical > ${i}-item `]: {
        paddingInlineStart: t.paddingXXS,
        [`> ${i}-item-container > ${i}-item-tail`]: {
          top: t.marginXXS,
          insetInlineStart: t.stepsIconSize / 2 - t.lineWidth + t.paddingXXS
        }
      },
      [`&, &${i}-small`]: {
        [`&${i}-horizontal ${i}-item:first-child`]: {
          paddingBottom: t.paddingXXS,
          paddingInlineStart: t.paddingXXS
        }
      },
      [`&${i}-small${i}-vertical > ${i}-item > ${i}-item-container > ${i}-item-tail`]: {
        insetInlineStart: t.stepsSmallIconSize / 2 - t.lineWidth + t.paddingXXS
      },
      [`&${i}-label-vertical`]: {
        [`${i}-item ${i}-item-tail`]: {
          top: t.margin - 2 * t.lineWidth
        }
      },
      [`${i}-item-icon`]: {
        position: "relative",
        [`${e}-progress`]: {
          position: "absolute",
          insetBlockStart: (t.stepsIconSize - t.stepsProgressSize - t.lineWidth * 2) / 2,
          insetInlineStart: (t.stepsIconSize - t.stepsProgressSize - t.lineWidth * 2) / 2
        }
      }
    }
  };
}, Rt = (t) => {
  const {
    componentCls: e,
    descriptionWidth: i,
    lineHeight: n,
    stepsCurrentDotSize: o,
    stepsDotSize: r,
    motionDurationSlow: u
  } = t;
  return {
    [`&${e}-dot, &${e}-dot${e}-small`]: {
      [`${e}-item`]: {
        "&-title": {
          lineHeight: n
        },
        "&-tail": {
          top: Math.floor((t.stepsDotSize - t.lineWidth * 3) / 2),
          width: "100%",
          marginTop: 0,
          marginBottom: 0,
          marginInline: `${i / 2}px 0`,
          padding: 0,
          "&::after": {
            width: `calc(100% - ${t.marginSM * 2}px)`,
            height: t.lineWidth * 3,
            marginInlineStart: t.marginSM
          }
        },
        "&-icon": {
          width: r,
          height: r,
          marginInlineStart: (t.descriptionWidth - r) / 2,
          paddingInlineEnd: 0,
          lineHeight: `${r}px`,
          background: "transparent",
          border: 0,
          [`${e}-icon-dot`]: {
            position: "relative",
            float: "left",
            width: "100%",
            height: "100%",
            borderRadius: 100,
            transition: `all ${u}`,
            /* expand hover area */
            "&::after": {
              position: "absolute",
              top: -t.marginSM,
              insetInlineStart: (r - t.controlHeightLG * 1.5) / 2,
              width: t.controlHeightLG * 1.5,
              height: t.controlHeight,
              background: "transparent",
              content: '""'
            }
          }
        },
        "&-content": {
          width: i
        },
        [`&-process ${e}-item-icon`]: {
          position: "relative",
          top: (r - o) / 2,
          width: o,
          height: o,
          lineHeight: `${o}px`,
          background: "none",
          marginInlineStart: (t.descriptionWidth - o) / 2
        },
        [`&-process ${e}-icon`]: {
          [`&:first-child ${e}-icon-dot`]: {
            insetInlineStart: 0
          }
        }
      }
    },
    [`&${e}-vertical${e}-dot`]: {
      [`${e}-item-icon`]: {
        marginTop: (t.controlHeight - r) / 2,
        marginInlineStart: 0,
        background: "none"
      },
      [`${e}-item-process ${e}-item-icon`]: {
        marginTop: (t.controlHeight - o) / 2,
        top: 0,
        insetInlineStart: (r - o) / 2,
        marginInlineStart: 0
      },
      // https://github.com/ant-design/ant-design/issues/18354
      [`${e}-item > ${e}-item-container > ${e}-item-tail`]: {
        top: (t.controlHeight - r) / 2,
        insetInlineStart: 0,
        margin: 0,
        padding: `${r + t.paddingXS}px 0 ${t.paddingXS}px`,
        "&::after": {
          marginInlineStart: (r - t.lineWidth) / 2
        }
      },
      [`&${e}-small`]: {
        [`${e}-item-icon`]: {
          marginTop: (t.controlHeightSM - r) / 2
        },
        [`${e}-item-process ${e}-item-icon`]: {
          marginTop: (t.controlHeightSM - o) / 2
        },
        [`${e}-item > ${e}-item-container > ${e}-item-tail`]: {
          top: (t.controlHeightSM - r) / 2
        }
      },
      [`${e}-item:first-child ${e}-icon-dot`]: {
        insetInlineStart: 0
      },
      [`${e}-item-content`]: {
        width: "inherit"
      }
    }
  };
}, Lt = (t) => {
  const {
    componentCls: e
  } = t;
  return {
    [`&${e}-rtl`]: {
      direction: "rtl",
      [`${e}-item`]: {
        "&-subtitle": {
          float: "left"
        }
      },
      // nav
      [`&${e}-navigation`]: {
        [`${e}-item::after`]: {
          transform: "rotate(-45deg)"
        }
      },
      // vertical
      [`&${e}-vertical`]: {
        [`> ${e}-item`]: {
          "&::after": {
            transform: "rotate(225deg)"
          },
          [`${e}-item-icon`]: {
            float: "right"
          }
        }
      },
      // progress-dot
      [`&${e}-dot`]: {
        [`${e}-item-icon ${e}-icon-dot, &${e}-small ${e}-item-icon ${e}-icon-dot`]: {
          float: "right"
        }
      }
    }
  };
}, Et = (t) => {
  const {
    componentCls: e,
    stepsSmallIconSize: i,
    // stepsSmallIconMargin,
    fontSizeSM: n,
    fontSize: o,
    colorTextDescription: r
  } = t;
  return {
    [`&${e}-small`]: {
      [`&${e}-horizontal:not(${e}-label-vertical) ${e}-item`]: {
        paddingInlineStart: t.paddingSM,
        "&:first-child": {
          paddingInlineStart: 0
        }
      },
      [`${e}-item-icon`]: {
        width: i,
        height: i,
        // margin: stepsSmallIconMargin,
        marginTop: 0,
        marginBottom: 0,
        marginInline: `0 ${t.marginXS}px`,
        fontSize: n,
        lineHeight: `${i}px`,
        textAlign: "center",
        borderRadius: i
      },
      [`${e}-item-title`]: {
        paddingInlineEnd: t.paddingSM,
        fontSize: o,
        lineHeight: `${i}px`,
        "&::after": {
          top: i / 2
        }
      },
      [`${e}-item-description`]: {
        color: r,
        fontSize: o
      },
      [`${e}-item-tail`]: {
        top: i / 2 - t.paddingXXS
      },
      [`${e}-item-custom ${e}-item-icon`]: {
        width: "inherit",
        height: "inherit",
        lineHeight: "inherit",
        background: "none",
        border: 0,
        borderRadius: 0,
        [`> ${e}-icon`]: {
          fontSize: i,
          lineHeight: `${i}px`,
          transform: "none"
        }
      }
    }
  };
}, Ot = (t) => {
  const {
    componentCls: e,
    stepsSmallIconSize: i,
    stepsIconSize: n
  } = t;
  return {
    [`&${e}-vertical`]: {
      display: "flex",
      flexDirection: "column",
      [`> ${e}-item`]: {
        display: "block",
        flex: "1 0 auto",
        paddingInlineStart: 0,
        overflow: "visible",
        [`${e}-item-icon`]: {
          float: "left",
          marginInlineEnd: t.margin
        },
        [`${e}-item-content`]: {
          display: "block",
          minHeight: t.controlHeight * 1.5,
          overflow: "hidden"
        },
        [`${e}-item-title`]: {
          lineHeight: `${n}px`
        },
        [`${e}-item-description`]: {
          paddingBottom: t.paddingSM
        }
      },
      [`> ${e}-item > ${e}-item-container > ${e}-item-tail`]: {
        position: "absolute",
        top: 0,
        insetInlineStart: t.stepsIconSize / 2 - t.lineWidth,
        width: t.lineWidth,
        height: "100%",
        padding: `${n + t.marginXXS * 1.5}px 0 ${t.marginXXS * 1.5}px`,
        "&::after": {
          width: t.lineWidth,
          height: "100%"
        }
      },
      [`> ${e}-item:not(:last-child) > ${e}-item-container > ${e}-item-tail`]: {
        display: "block"
      },
      [` > ${e}-item > ${e}-item-container > ${e}-item-content > ${e}-item-title`]: {
        "&::after": {
          display: "none"
        }
      },
      [`&${e}-small ${e}-item-container`]: {
        [`${e}-item-tail`]: {
          position: "absolute",
          top: 0,
          insetInlineStart: t.stepsSmallIconSize / 2 - t.lineWidth,
          padding: `${i + t.marginXXS * 1.5}px 0 ${t.marginXXS * 1.5}px`
        },
        [`${e}-item-title`]: {
          lineHeight: `${i}px`
        }
      }
    }
  };
}, Ft = (t) => {
  const {
    componentCls: e,
    inlineDotSize: i,
    inlineTitleColor: n,
    inlineTailColor: o
  } = t, r = t.paddingXS + t.lineWidth, u = {
    [`${e}-item-container ${e}-item-content ${e}-item-title`]: {
      color: n
    }
  };
  return {
    [`&${e}-inline`]: {
      width: "auto",
      display: "inline-flex",
      [`${e}-item`]: {
        flex: "none",
        "&-container": {
          padding: `${r}px ${t.paddingXXS}px 0`,
          margin: `0 ${t.marginXXS / 2}px`,
          borderRadius: t.borderRadiusSM,
          cursor: "pointer",
          transition: `background-color ${t.motionDurationMid}`,
          "&:hover": {
            background: t.controlItemBgHover
          },
          "&[role='button']:hover": {
            opacity: 1
          }
        },
        "&-icon": {
          width: i,
          height: i,
          marginInlineStart: `calc(50% - ${i / 2}px)`,
          [`> ${e}-icon`]: {
            top: 0
          },
          [`${e}-icon-dot`]: {
            borderRadius: t.fontSizeSM / 4
          }
        },
        "&-content": {
          width: "auto",
          marginTop: t.marginXS - t.lineWidth
        },
        "&-title": {
          color: n,
          fontSize: t.fontSizeSM,
          lineHeight: t.lineHeightSM,
          fontWeight: "normal",
          marginBottom: t.marginXXS / 2
        },
        "&-description": {
          display: "none"
        },
        "&-tail": {
          marginInlineStart: 0,
          top: r + i / 2,
          transform: "translateY(-50%)",
          "&:after": {
            width: "100%",
            height: t.lineWidth,
            borderRadius: 0,
            marginInlineStart: 0,
            background: o
          }
        },
        [`&:first-child ${e}-item-tail`]: {
          width: "50%",
          marginInlineStart: "50%"
        },
        [`&:last-child ${e}-item-tail`]: {
          display: "block",
          width: "50%"
        },
        "&-wait": c({
          [`${e}-item-icon ${e}-icon ${e}-icon-dot`]: {
            backgroundColor: t.colorBorderBg,
            border: `${t.lineWidth}px ${t.lineType} ${o}`
          }
        }, u),
        "&-finish": c({
          [`${e}-item-tail::after`]: {
            backgroundColor: o
          },
          [`${e}-item-icon ${e}-icon ${e}-icon-dot`]: {
            backgroundColor: o,
            border: `${t.lineWidth}px ${t.lineType} ${o}`
          }
        }, u),
        "&-error": u,
        "&-active, &-process": c({
          [`${e}-item-icon`]: {
            width: i,
            height: i,
            marginInlineStart: `calc(50% - ${i / 2}px)`,
            top: 0
          }
        }, u),
        [`&:not(${e}-item-active) > ${e}-item-container[role='button']:hover`]: {
          [`${e}-item-title`]: {
            color: n
          }
        }
      }
    }
  };
};
var E;
(function(t) {
  t.wait = "wait", t.process = "process", t.finish = "finish", t.error = "error";
})(E || (E = {}));
const V = (t, e) => {
  const i = `${e.componentCls}-item`, n = `${t}IconColor`, o = `${t}TitleColor`, r = `${t}DescriptionColor`, u = `${t}TailColor`, d = `${t}IconBgColor`, s = `${t}IconBorderColor`, a = `${t}DotColor`;
  return {
    [`${i}-${t} ${i}-icon`]: {
      backgroundColor: e[d],
      borderColor: e[s],
      [`> ${e.componentCls}-icon`]: {
        color: e[n],
        [`${e.componentCls}-icon-dot`]: {
          background: e[a]
        }
      }
    },
    [`${i}-${t}${i}-custom ${i}-icon`]: {
      [`> ${e.componentCls}-icon`]: {
        color: e[a]
      }
    },
    [`${i}-${t} > ${i}-container > ${i}-content > ${i}-title`]: {
      color: e[o],
      "&::after": {
        backgroundColor: e[u]
      }
    },
    [`${i}-${t} > ${i}-container > ${i}-content > ${i}-description`]: {
      color: e[r]
    },
    [`${i}-${t} > ${i}-container > ${i}-tail::after`]: {
      backgroundColor: e[u]
    }
  };
}, jt = (t) => {
  const {
    componentCls: e,
    motionDurationSlow: i
  } = t, n = `${e}-item`;
  return c(c(c(c(c(c({
    [n]: {
      position: "relative",
      display: "inline-block",
      flex: 1,
      overflow: "hidden",
      verticalAlign: "top",
      "&:last-child": {
        flex: "none",
        [`> ${n}-container > ${n}-tail, > ${n}-container >  ${n}-content > ${n}-title::after`]: {
          display: "none"
        }
      }
    },
    [`${n}-container`]: {
      outline: "none"
    },
    [`${n}-icon, ${n}-content`]: {
      display: "inline-block",
      verticalAlign: "top"
    },
    [`${n}-icon`]: {
      width: t.stepsIconSize,
      height: t.stepsIconSize,
      marginTop: 0,
      marginBottom: 0,
      marginInlineStart: 0,
      marginInlineEnd: t.marginXS,
      fontSize: t.stepsIconFontSize,
      fontFamily: t.fontFamily,
      lineHeight: `${t.stepsIconSize}px`,
      textAlign: "center",
      borderRadius: t.stepsIconSize,
      border: `${t.lineWidth}px ${t.lineType} transparent`,
      transition: `background-color ${i}, border-color ${i}`,
      [`${e}-icon`]: {
        position: "relative",
        top: t.stepsIconTop,
        color: t.colorPrimary,
        lineHeight: 1
      }
    },
    [`${n}-tail`]: {
      position: "absolute",
      top: t.stepsIconSize / 2 - t.paddingXXS,
      insetInlineStart: 0,
      width: "100%",
      "&::after": {
        display: "inline-block",
        width: "100%",
        height: t.lineWidth,
        background: t.colorSplit,
        borderRadius: t.lineWidth,
        transition: `background ${i}`,
        content: '""'
      }
    },
    [`${n}-title`]: {
      position: "relative",
      display: "inline-block",
      paddingInlineEnd: t.padding,
      color: t.colorText,
      fontSize: t.fontSizeLG,
      lineHeight: `${t.stepsTitleLineHeight}px`,
      "&::after": {
        position: "absolute",
        top: t.stepsTitleLineHeight / 2,
        insetInlineStart: "100%",
        display: "block",
        width: 9999,
        height: t.lineWidth,
        background: t.processTailColor,
        content: '""'
      }
    },
    [`${n}-subtitle`]: {
      display: "inline",
      marginInlineStart: t.marginXS,
      color: t.colorTextDescription,
      fontWeight: "normal",
      fontSize: t.fontSize
    },
    [`${n}-description`]: {
      color: t.colorTextDescription,
      fontSize: t.fontSize
    }
  }, V(E.wait, t)), V(E.process, t)), {
    [`${n}-process > ${n}-container > ${n}-title`]: {
      fontWeight: t.fontWeightStrong
    }
  }), V(E.finish, t)), V(E.error, t)), {
    [`${n}${e}-next-error > ${e}-item-title::after`]: {
      background: t.colorError
    },
    [`${n}-disabled`]: {
      cursor: "not-allowed"
    }
  });
}, Gt = (t) => {
  const {
    componentCls: e,
    motionDurationSlow: i
  } = t;
  return {
    [`& ${e}-item`]: {
      [`&:not(${e}-item-active)`]: {
        [`& > ${e}-item-container[role='button']`]: {
          cursor: "pointer",
          [`${e}-item`]: {
            [`&-title, &-subtitle, &-description, &-icon ${e}-icon`]: {
              transition: `color ${i}`
            }
          },
          "&:hover": {
            [`${e}-item`]: {
              "&-title, &-subtitle, &-description": {
                color: t.colorPrimary
              }
            }
          }
        },
        [`&:not(${e}-item-process)`]: {
          [`& > ${e}-item-container[role='button']:hover`]: {
            [`${e}-item`]: {
              "&-icon": {
                borderColor: t.colorPrimary,
                [`${e}-icon`]: {
                  color: t.colorPrimary
                }
              }
            }
          }
        }
      }
    },
    [`&${e}-horizontal:not(${e}-label-vertical)`]: {
      [`${e}-item`]: {
        paddingInlineStart: t.padding,
        whiteSpace: "nowrap",
        "&:first-child": {
          paddingInlineStart: 0
        },
        [`&:last-child ${e}-item-title`]: {
          paddingInlineEnd: 0
        },
        "&-tail": {
          display: "none"
        },
        "&-description": {
          maxWidth: t.descriptionWidth,
          whiteSpace: "normal"
        }
      }
    }
  };
}, Kt = (t) => {
  const {
    componentCls: e
  } = t;
  return {
    [e]: c(c(c(c(c(c(c(c(c(c(c(c(c({}, ut(t)), {
      display: "flex",
      width: "100%",
      fontSize: 0,
      textAlign: "initial"
    }), jt(t)), Gt(t)), Xt(t)), Et(t)), Ot(t)), At(t)), Rt(t)), Nt(t)), Lt(t)), Mt(t)), Ft(t))
  };
}, Vt = gt("Steps", (t) => {
  const {
    wireframe: e,
    colorTextDisabled: i,
    fontSizeHeading3: n,
    fontSize: o,
    controlHeight: r,
    controlHeightLG: u,
    colorTextLightSolid: d,
    colorText: s,
    colorPrimary: a,
    colorTextLabel: f,
    colorTextDescription: l,
    colorTextQuaternary: C,
    colorFillContent: h,
    controlItemBgActive: I,
    colorError: m,
    colorBgContainer: $,
    colorBorderSecondary: _
  } = t, S = t.controlHeight, y = t.colorSplit, b = ht(t, {
    // Steps variable default.less
    processTailColor: y,
    stepsNavArrowColor: i,
    stepsIconSize: S,
    stepsIconCustomSize: S,
    stepsIconCustomTop: 0,
    stepsIconCustomFontSize: u / 2,
    stepsIconTop: -0.5,
    stepsIconFontSize: o,
    stepsTitleLineHeight: r,
    stepsSmallIconSize: n,
    stepsDotSize: r / 4,
    stepsCurrentDotSize: u / 4,
    stepsNavContentMaxWidth: "auto",
    // Steps component less variable
    processIconColor: d,
    processTitleColor: s,
    processDescriptionColor: s,
    processIconBgColor: a,
    processIconBorderColor: a,
    processDotColor: a,
    waitIconColor: e ? i : f,
    waitTitleColor: l,
    waitDescriptionColor: l,
    waitTailColor: y,
    waitIconBgColor: e ? $ : h,
    waitIconBorderColor: e ? i : "transparent",
    waitDotColor: i,
    finishIconColor: a,
    finishTitleColor: s,
    finishDescriptionColor: l,
    finishTailColor: a,
    finishIconBgColor: e ? $ : I,
    finishIconBorderColor: e ? a : I,
    finishDotColor: a,
    errorIconColor: d,
    errorTitleColor: m,
    errorDescriptionColor: m,
    errorTailColor: y,
    errorIconBgColor: m,
    errorIconBorderColor: m,
    errorDotColor: m,
    stepsNavActiveColor: a,
    stepsProgressSize: u,
    // Steps inline variable
    inlineDotSize: 6,
    inlineTitleColor: C,
    inlineTailColor: _
  });
  return [Kt(b)];
}, {
  descriptionWidth: 140
}), qt = () => ({
  prefixCls: String,
  iconPrefix: String,
  current: Number,
  initial: Number,
  percent: Number,
  responsive: ot(),
  items: Ct(),
  labelPlacement: X(),
  status: X(),
  size: X(),
  direction: X(),
  progressDot: It([Boolean, Function]),
  type: X(),
  onChange: D(),
  "onUpdate:current": D()
}), k = Y({
  compatConfig: {
    MODE: 3
  },
  name: "ASteps",
  inheritAttrs: !1,
  props: ft(qt(), {
    current: 0,
    responsive: !0,
    labelPlacement: "horizontal"
  }),
  slots: Object,
  // emits: ['update:current', 'change'],
  setup(t, e) {
    let {
      attrs: i,
      slots: n,
      emit: o
    } = e;
    const {
      prefixCls: r,
      direction: u,
      configProvider: d
    } = $t("steps", t), [s, a] = Vt(r), [, f] = St(), l = bt(), C = O(() => t.responsive && l.value.xs ? "vertical" : t.direction), h = O(() => d.getPrefixCls("", t.iconPrefix)), I = (y) => {
      o("update:current", y), o("change", y);
    }, m = O(() => t.type === "inline"), $ = O(() => m.value ? void 0 : t.percent), _ = (y) => {
      let {
        node: b,
        status: v
      } = y;
      if (v === "process" && t.percent !== void 0) {
        const w = t.size === "small" ? f.value.controlHeight : f.value.controlHeightLG;
        return p("div", {
          class: `${r.value}-progress-icon`
        }, [p(Bt, {
          type: "circle",
          percent: $.value,
          size: w,
          strokeWidth: 4,
          format: () => null
        }, null), b]);
      }
      return b;
    }, S = O(() => ({
      finish: p(yt, {
        class: `${r.value}-finish-icon`
      }, null),
      error: p(vt, {
        class: `${r.value}-error-icon`
      }, null)
    }));
    return () => {
      const y = U({
        [`${r.value}-rtl`]: u.value === "rtl",
        [`${r.value}-with-progress`]: $.value !== void 0
      }, i.class, a.value), b = (v, w) => v.description ? p(xt, {
        title: v.description
      }, {
        default: () => [w]
      }) : w;
      return s(p(Pt, z(z(z({
        icons: S.value
      }, i), nt(t, ["percent", "responsive"])), {}, {
        items: t.items,
        direction: C.value,
        prefixCls: r.value,
        iconPrefix: h.value,
        class: y,
        onChange: I,
        isInline: m.value,
        itemRender: m.value ? b : void 0
      }), c({
        stepIcon: _
      }, n)));
    };
  }
}), q = Y(c(c({
  compatConfig: {
    MODE: 3
  }
}, st), {
  name: "AStep",
  props: rt()
})), Ut = c(k, {
  Step: q,
  install: (t) => (t.component(k.name, k), t.component(q.name, q), t)
}), Yt = {
  name: "SFormLayout",
  components: {},
  data() {
    return {
      height: 0,
      layoutHeight: 0,
      footerWitdh: 0,
      form: {},
      stepActive: 0,
      tabsActive: ""
    };
  },
  props: {
    showAnchor: {
      type: Boolean,
      default: !1
    },
    loading: {
      type: Boolean,
      default: !1
    },
    // 页面标题
    title: {
      type: String,
      required: !0
    },
    subTitle: {
      type: String,
      default: ""
    },
    showBtnIcon: {
      type: Boolean,
      default: !0
    },
    steps: {
      type: Array,
      default() {
        return [];
      }
    },
    stepDefaultActive: {
      type: Number,
      default: 0
    },
    stepValid: {
      type: Function,
      default: void 0
    },
    tabs: {
      type: Array,
      default() {
        return [];
      }
    },
    tabKey: {
      type: Object,
      default() {
        return {
          label: "label",
          value: "value"
        };
      }
    },
    formStyle: {
      type: Object,
      default() {
        return {};
      }
    },
    goBack: {
      type: Boolean,
      default: !0
    },
    isShowSave: {
      type: Boolean,
      default: !0
    },
    saveBtnText: {
      type: String,
      default: "保存"
    }
  },
  methods: {
    initStyle() {
      this.$nextTick(() => {
        var r, u, d, s, a, f, l, C, h;
        const t = ((u = (r = this.$refs) == null ? void 0 : r.step) == null ? void 0 : u.offsetHeight) || 0, e = ((s = (d = this.$refs) == null ? void 0 : d.tabs) == null ? void 0 : s.offsetHeight) || 0, i = ((f = (a = this.$refs) == null ? void 0 : a.footer) == null ? void 0 : f.offsetHeight) || 0, n = ((C = (l = this.$refs) == null ? void 0 : l.tools) == null ? void 0 : C.offsetHeight) || 0;
        this.height = this.$refs.layout.parentNode.offsetHeight + "px", this.layoutHeight = this.$refs.layout.parentNode.offsetHeight - i - (t > 0 ? t + 16 : 0) - e - n + "px";
        const o = !this.$slots.collapses || this.$slots.collapses && !this.showAnchor ? 0 : 220;
        this.footerWitdh = ((h = this.$refs.formMain) == null ? void 0 : h.offsetWidth) - o + "px";
      });
    },
    isFunction(t) {
      return this[t] && typeof this[t] == "function" ? !0 : (this.$notification.error({
        key: "only-you",
        message: "未绑定接口Api方法, 无法操作"
      }), !1);
    },
    rollback() {
      this.$emit("footer-callback", "cancel");
    },
    handPrev() {
      this.stepActive--, this.$emit("footer-callback", "prev", this.stepActive);
    },
    handNext() {
      if (!this.$utils.isFunction(this.stepValid)) {
        this.stepActive++, this.$emit("footer-callback", "next", this.stepActive);
        return;
      }
      this.stepValid(this.stepActive).then((t) => {
        t && (this.stepActive++, this.$emit("footer-callback", "next", this.stepActive));
      });
    },
    save() {
      this.$emit("footer-callback", "save");
    },
    handTabChange(t) {
      const e = this.tabs.find((i) => i[this.tabKey.value] === t);
      this.$emit("tabsChange", e);
    }
  },
  created() {
  },
  mounted() {
    this.initStyle(), this.stepActive = this.stepDefaultActive;
  }
}, Qt = {
  key: 0,
  class: "tools",
  ref: "tools"
}, Jt = { class: "row" }, Zt = { class: "title" }, kt = { class: "btns" }, te = {
  key: 0,
  class: "row sub-title-wrap",
  ref: "subTitle"
}, ee = { class: "sub-title" }, ie = {
  key: 1,
  class: "step-wrap",
  ref: "step"
}, ne = {
  key: 2,
  class: "tabs-wrap",
  ref: "tabs"
}, oe = {
  key: 1,
  class: "collapses-content-wrap"
}, re = {
  key: 0,
  class: "collapses-nav"
}, se = { class: "modal" };
function le(t, e, i, n, o, r) {
  const u = q, d = Ut, s = _t, a = Tt, f = G("close-outlined"), l = zt, C = G("arrow-left-outlined"), h = G("arrow-right-outlined"), I = G("save-outlined"), m = Ht;
  return x(), H("div", {
    class: "form-layout",
    ref: "layout",
    style: F({ height: o.height })
  }, [
    p(m, { spinning: i.loading }, {
      default: P(() => [
        i.title || i.subTitle || t.$slots.otherBtns ? (x(), H("div", Qt, [
          B("div", Jt, [
            B("div", Zt, [
              B("span", null, Z(i.title), 1)
            ]),
            B("div", kt, [
              R(t.$slots, "otherBtns", {}, void 0, !0)
            ])
          ]),
          i.subTitle ? (x(), H("div", te, [
            B("div", ee, Z(i.subTitle), 1)
          ], 512)) : T("", !0)
        ], 512)) : T("", !0),
        i.steps && i.steps.length ? (x(), H("div", ie, [
          p(d, {
            current: o.stepActive,
            type: "navigation",
            size: "small"
          }, {
            default: P(() => [
              (x(!0), H(tt, null, et(i.steps, ($) => (x(), L(u, {
                title: $,
                key: $,
                disabled: ""
              }, null, 8, ["title"]))), 128))
            ]),
            _: 1
          }, 8, ["current"])
        ], 512)) : T("", !0),
        i.tabs && i.tabs.length ? (x(), H("div", ne, [
          p(a, {
            "default-active-key": "1",
            onChange: r.handTabChange
          }, {
            default: P(() => [
              (x(!0), H(tt, null, et(i.tabs, ($) => (x(), L(s, {
                tab: $[i.tabKey.label],
                key: $[i.tabKey.value]
              }, null, 8, ["tab"]))), 128))
            ]),
            _: 1
          }, 8, ["onChange"])
        ], 512)) : T("", !0),
        B("div", {
          class: at(["form-layout-main", { whiteBg: !!t.$slots.form }]),
          id: "form-container",
          ref: "formMain",
          style: F({ height: o.layoutHeight })
        }, [
          t.$slots.form ? (x(), H("div", {
            key: 0,
            class: "form-container-wrap",
            style: F(i.formStyle)
          }, [
            R(t.$slots, "form", {}, void 0, !0)
          ], 4)) : T("", !0),
          t.$slots.collapses ? (x(), H("div", oe, [
            B("div", {
              class: "collapese-container",
              style: F({ width: i.showAnchor ? "calc(100% - 220px)" : "100%" })
            }, [
              R(t.$slots, "collapses", {}, void 0, !0)
            ], 4),
            i.showAnchor && t.$slots.anchor ? (x(), H("div", re, [
              R(t.$slots, "anchor", {}, void 0, !0)
            ])) : T("", !0)
          ])) : T("", !0)
        ], 6),
        B("div", se, [
          R(t.$slots, "other", {}, void 0, !0)
        ]),
        B("div", {
          class: "form-fixed-footer",
          ref: "footer",
          style: F({ width: o.footerWitdh })
        }, [
          i.goBack ? (x(), L(l, {
            key: 0,
            onClick: r.rollback,
            class: "btn"
          }, {
            default: P(() => [
              p(f),
              e[0] || (e[0] = K("取消 "))
            ]),
            _: 1
          }, 8, ["onClick"])) : T("", !0),
          i.steps.length ? (x(), L(l, {
            key: 1,
            class: "btn",
            disabled: o.stepActive === this.stepDefaultActive,
            onClick: r.handPrev
          }, {
            default: P(() => [
              p(C),
              e[1] || (e[1] = K("上一步 "))
            ]),
            _: 1
          }, 8, ["disabled", "onClick"])) : T("", !0),
          i.steps.length ? (x(), L(l, {
            key: 2,
            class: "btn",
            type: "primary",
            disabled: o.stepActive === this.steps.length - 1,
            onClick: r.handNext
          }, {
            default: P(() => [
              p(h),
              e[2] || (e[2] = K("下一步 "))
            ]),
            _: 1
          }, 8, ["disabled", "onClick"])) : T("", !0),
          i.isShowSave ? (x(), L(l, {
            key: 3,
            style: { "margin-right": "8px" },
            type: "primary",
            onClick: r.save
          }, {
            default: P(() => [
              p(I),
              K(" " + Z(i.saveBtnText), 1)
            ]),
            _: 1
          }, 8, ["onClick"])) : T("", !0),
          R(t.$slots, "footer", {}, void 0, !0)
        ], 4)
      ]),
      _: 3
    }, 8, ["spinning"])
  ], 4);
}
const pe = /* @__PURE__ */ wt(Yt, [["render", le], ["__scopeId", "data-v-4331e376"]]);
export {
  pe as default
};