epic-designer-cjh/dist/index-e2fad891.js

基于vue3的设计器,可视化开发页面表单

import { i as H } from "./interopRequireDefault-40f894e3.js";
import { r as R } from "./_vue_commonjs-external-eb7fec7f.js";
import { r as W, c as X, a as U } from "./public_api-1267ff2a.js";
import { r as K } from "./LoadingOutlined-7a37e4f8.js";
import { r as G } from "./index-f96a976e.js";
import { r as Q } from "./KeyCode-5c436a1d.js";
import { r as J } from "./index-62ef22df.js";
import { r as Y, a as Z, h as k, f as ee, b as ie, e as ne, g as te } from "./useConfigInject-d85d8c62.js";
import { r as ae } from "./FormItemContext-6c3deaca.js";
import { r as re } from "./omit-84b99e2b.js";
function ce(a, g) {
  for (var l = 0; l < g.length; l++) {
    const s = g[l];
    if (typeof s != "string" && !Array.isArray(s)) {
      for (const u in s)
        if (u !== "default" && !(u in a)) {
          const d = Object.getOwnPropertyDescriptor(s, u);
          d && Object.defineProperty(a, u, d.get ? d : {
            enumerable: !0,
            get: () => s[u]
          });
        }
    }
  }
  return Object.freeze(Object.defineProperty(a, Symbol.toStringTag, { value: "Module" }));
}
var p = {}, I = {}, P;
function de() {
  if (P)
    return I;
  P = 1;
  var a = H;
  Object.defineProperty(I, "__esModule", {
    value: !0
  }), I.default = void 0;
  var g = a(W()), l = X, s = Y(), u = Z();
  const d = (e) => {
    const {
      componentCls: i
    } = e, n = `${i}-inner`;
    return {
      [i]: {
        [`&${i}-small`]: {
          minWidth: e.switchMinWidthSM,
          height: e.switchHeightSM,
          lineHeight: `${e.switchHeightSM}px`,
          [`${i}-inner`]: {
            paddingInlineStart: e.switchInnerMarginMaxSM,
            paddingInlineEnd: e.switchInnerMarginMinSM,
            [`${n}-checked`]: {
              marginInlineStart: `calc(-100% + ${e.switchPinSizeSM + e.switchPadding * 2}px - ${e.switchInnerMarginMaxSM * 2}px)`,
              marginInlineEnd: `calc(100% - ${e.switchPinSizeSM + e.switchPadding * 2}px + ${e.switchInnerMarginMaxSM * 2}px)`
            },
            [`${n}-unchecked`]: {
              marginTop: -e.switchHeightSM,
              marginInlineStart: 0,
              marginInlineEnd: 0
            }
          },
          [`${i}-handle`]: {
            width: e.switchPinSizeSM,
            height: e.switchPinSizeSM
          },
          [`${i}-loading-icon`]: {
            top: (e.switchPinSizeSM - e.switchLoadingIconSize) / 2,
            fontSize: e.switchLoadingIconSize
          },
          [`&${i}-checked`]: {
            [`${i}-inner`]: {
              paddingInlineStart: e.switchInnerMarginMinSM,
              paddingInlineEnd: e.switchInnerMarginMaxSM,
              [`${n}-checked`]: {
                marginInlineStart: 0,
                marginInlineEnd: 0
              },
              [`${n}-unchecked`]: {
                marginInlineStart: `calc(100% - ${e.switchPinSizeSM + e.switchPadding * 2}px + ${e.switchInnerMarginMaxSM * 2}px)`,
                marginInlineEnd: `calc(-100% + ${e.switchPinSizeSM + e.switchPadding * 2}px - ${e.switchInnerMarginMaxSM * 2}px)`
              }
            },
            [`${i}-handle`]: {
              insetInlineStart: `calc(100% - ${e.switchPinSizeSM + e.switchPadding}px)`
            }
          },
          [`&:not(${i}-disabled):active`]: {
            [`&:not(${i}-checked) ${n}`]: {
              [`${n}-unchecked`]: {
                marginInlineStart: e.marginXXS / 2,
                marginInlineEnd: -e.marginXXS / 2
              }
            },
            [`&${i}-checked ${n}`]: {
              [`${n}-checked`]: {
                marginInlineStart: -e.marginXXS / 2,
                marginInlineEnd: e.marginXXS / 2
              }
            }
          }
        }
      }
    };
  }, M = (e) => {
    const {
      componentCls: i
    } = e;
    return {
      [i]: {
        [`${i}-loading-icon${e.iconCls}`]: {
          position: "relative",
          top: (e.switchPinSize - e.fontSize) / 2,
          color: e.switchLoadingIconColor,
          verticalAlign: "top"
        },
        [`&${i}-checked ${i}-loading-icon`]: {
          color: e.switchColor
        }
      }
    };
  }, y = (e) => {
    const {
      componentCls: i
    } = e, n = `${i}-handle`;
    return {
      [i]: {
        [n]: {
          position: "absolute",
          top: e.switchPadding,
          insetInlineStart: e.switchPadding,
          width: e.switchPinSize,
          height: e.switchPinSize,
          transition: `all ${e.switchDuration} ease-in-out`,
          "&::before": {
            position: "absolute",
            top: 0,
            insetInlineEnd: 0,
            bottom: 0,
            insetInlineStart: 0,
            backgroundColor: e.colorWhite,
            borderRadius: e.switchPinSize / 2,
            boxShadow: e.switchHandleShadow,
            transition: `all ${e.switchDuration} ease-in-out`,
            content: '""'
          }
        },
        [`&${i}-checked ${n}`]: {
          insetInlineStart: `calc(100% - ${e.switchPinSize + e.switchPadding}px)`
        },
        [`&:not(${i}-disabled):active`]: {
          [`${n}::before`]: {
            insetInlineEnd: e.switchHandleActiveInset,
            insetInlineStart: 0
          },
          [`&${i}-checked ${n}::before`]: {
            insetInlineEnd: 0,
            insetInlineStart: e.switchHandleActiveInset
          }
        }
      }
    };
  }, m = (e) => {
    const {
      componentCls: i
    } = e, n = `${i}-inner`;
    return {
      [i]: {
        [n]: {
          display: "block",
          overflow: "hidden",
          borderRadius: 100,
          height: "100%",
          paddingInlineStart: e.switchInnerMarginMax,
          paddingInlineEnd: e.switchInnerMarginMin,
          transition: `padding-inline-start ${e.switchDuration} ease-in-out, padding-inline-end ${e.switchDuration} ease-in-out`,
          [`${n}-checked, ${n}-unchecked`]: {
            display: "block",
            color: e.colorTextLightSolid,
            fontSize: e.fontSizeSM,
            transition: `margin-inline-start ${e.switchDuration} ease-in-out, margin-inline-end ${e.switchDuration} ease-in-out`,
            pointerEvents: "none"
          },
          [`${n}-checked`]: {
            marginInlineStart: `calc(-100% + ${e.switchPinSize + e.switchPadding * 2}px - ${e.switchInnerMarginMax * 2}px)`,
            marginInlineEnd: `calc(100% - ${e.switchPinSize + e.switchPadding * 2}px + ${e.switchInnerMarginMax * 2}px)`
          },
          [`${n}-unchecked`]: {
            marginTop: -e.switchHeight,
            marginInlineStart: 0,
            marginInlineEnd: 0
          }
        },
        [`&${i}-checked ${n}`]: {
          paddingInlineStart: e.switchInnerMarginMin,
          paddingInlineEnd: e.switchInnerMarginMax,
          [`${n}-checked`]: {
            marginInlineStart: 0,
            marginInlineEnd: 0
          },
          [`${n}-unchecked`]: {
            marginInlineStart: `calc(100% - ${e.switchPinSize + e.switchPadding * 2}px + ${e.switchInnerMarginMax * 2}px)`,
            marginInlineEnd: `calc(-100% + ${e.switchPinSize + e.switchPadding * 2}px - ${e.switchInnerMarginMax * 2}px)`
          }
        },
        [`&:not(${i}-disabled):active`]: {
          [`&:not(${i}-checked) ${n}`]: {
            [`${n}-unchecked`]: {
              marginInlineStart: e.switchPadding * 2,
              marginInlineEnd: -e.switchPadding * 2
            }
          },
          [`&${i}-checked ${n}`]: {
            [`${n}-checked`]: {
              marginInlineStart: -e.switchPadding * 2,
              marginInlineEnd: e.switchPadding * 2
            }
          }
        }
      }
    };
  }, $ = (e) => {
    const {
      componentCls: i
    } = e;
    return {
      [i]: (0, g.default)((0, g.default)((0, g.default)((0, g.default)({}, (0, u.resetComponent)(e)), {
        position: "relative",
        display: "inline-block",
        boxSizing: "border-box",
        minWidth: e.switchMinWidth,
        height: e.switchHeight,
        lineHeight: `${e.switchHeight}px`,
        verticalAlign: "middle",
        background: e.colorTextQuaternary,
        border: "0",
        borderRadius: 100,
        cursor: "pointer",
        transition: `all ${e.motionDurationMid}`,
        userSelect: "none",
        [`&:hover:not(${i}-disabled)`]: {
          background: e.colorTextTertiary
        }
      }), (0, u.genFocusStyle)(e)), {
        [`&${i}-checked`]: {
          background: e.switchColor,
          [`&:hover:not(${i}-disabled)`]: {
            background: e.colorPrimaryHover
          }
        },
        [`&${i}-loading, &${i}-disabled`]: {
          cursor: "not-allowed",
          opacity: e.switchDisabledOpacity,
          "*": {
            boxShadow: "none",
            cursor: "not-allowed"
          }
        },
        // rtl style
        [`&${i}-rtl`]: {
          direction: "rtl"
        }
      })
    };
  };
  var b = (0, s.genComponentStyleHook)("Switch", (e) => {
    const i = e.fontSize * e.lineHeight, n = e.controlHeight / 2, o = 2, v = i - o * 2, h = n - o * 2, S = (0, s.mergeToken)(e, {
      switchMinWidth: v * 2 + o * 4,
      switchHeight: i,
      switchDuration: e.motionDurationMid,
      switchColor: e.colorPrimary,
      switchDisabledOpacity: e.opacityLoading,
      switchInnerMarginMin: v / 2,
      switchInnerMarginMax: v + o + o * 2,
      switchPadding: o,
      switchPinSize: v,
      switchBg: e.colorBgContainer,
      switchMinWidthSM: h * 2 + o * 2,
      switchHeightSM: n,
      switchInnerMarginMinSM: h / 2,
      switchInnerMarginMaxSM: h + o + o * 2,
      switchPinSizeSM: h,
      switchHandleShadow: `0 2px 4px 0 ${new l.TinyColor("#00230b").setAlpha(0.2).toRgbString()}`,
      switchLoadingIconSize: e.fontSizeIcon * 0.75,
      switchLoadingIconColor: `rgba(0, 0, 0, ${e.opacityLoading})`,
      switchHandleActiveInset: "-30%"
    });
    return [
      $(S),
      // inner style
      m(S),
      // handle style
      y(S),
      // loading style
      M(S),
      // small style
      d(S)
    ];
  });
  return I.default = b, I;
}
var w = H;
Object.defineProperty(p, "__esModule", {
  value: !0
});
var q = p.switchProps = F = p.default = O = p.SwitchSizes = void 0, c = R, x = w(U()), le = w(K()), r = w(G()), _ = w(Q()), se = w(J()), z = w(k()), T = ee(), E = ie(), oe = w(ne()), ue = ae(), he = w(re()), ge = w(de()), we = te();
const D = (0, T.tuple)("small", "default");
var O = p.SwitchSizes = D;
const V = () => ({
  id: String,
  prefixCls: String,
  size: r.default.oneOf(D),
  disabled: {
    type: Boolean,
    default: void 0
  },
  checkedChildren: r.default.any,
  unCheckedChildren: r.default.any,
  tabindex: r.default.oneOfType([r.default.string, r.default.number]),
  autofocus: {
    type: Boolean,
    default: void 0
  },
  loading: {
    type: Boolean,
    default: void 0
  },
  checked: r.default.oneOfType([r.default.string, r.default.number, r.default.looseBool]),
  checkedValue: r.default.oneOfType([r.default.string, r.default.number, r.default.looseBool]).def(!0),
  unCheckedValue: r.default.oneOfType([r.default.string, r.default.number, r.default.looseBool]).def(!1),
  onChange: {
    type: Function
  },
  onClick: {
    type: Function
  },
  onKeydown: {
    type: Function
  },
  onMouseup: {
    type: Function
  },
  "onUpdate:checked": {
    type: Function
  },
  onBlur: Function,
  onFocus: Function
});
q = p.switchProps = V;
const Se = (0, c.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: "ASwitch",
  __ANT_SWITCH: !0,
  inheritAttrs: !1,
  props: V(),
  slots: Object,
  // emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown', 'blur'],
  setup(a, g) {
    let {
      attrs: l,
      slots: s,
      expose: u,
      emit: d
    } = g;
    const M = (0, ue.useInjectFormItemContext)(), y = (0, we.useInjectDisabled)(), m = (0, c.computed)(() => {
      var t;
      return (t = a.disabled) !== null && t !== void 0 ? t : y.value;
    });
    (0, c.onBeforeMount)(() => {
      (0, z.default)(!("defaultChecked" in l), "Switch", "'defaultChecked' is deprecated, please use 'v-model:checked'"), (0, z.default)(!("value" in l), "Switch", "`value` is not validate prop, do you mean `checked`?");
    });
    const $ = (0, c.ref)(a.checked !== void 0 ? a.checked : l.defaultChecked), b = (0, c.computed)(() => $.value === a.checkedValue);
    (0, c.watch)(() => a.checked, () => {
      $.value = a.checked;
    });
    const {
      prefixCls: e,
      direction: i,
      size: n
    } = (0, oe.default)("switch", a), [o, v] = (0, ge.default)(e), h = (0, c.ref)(), S = () => {
      var t;
      (t = h.value) === null || t === void 0 || t.focus();
    };
    u({
      focus: S,
      blur: () => {
        var t;
        (t = h.value) === null || t === void 0 || t.blur();
      }
    }), (0, c.onMounted)(() => {
      (0, c.nextTick)(() => {
        a.autofocus && !m.value && h.value.focus();
      });
    });
    const C = (t, f) => {
      m.value || (d("update:checked", t), d("change", t, f), M.onFieldChange());
    }, j = (t) => {
      d("blur", t);
    }, B = (t) => {
      S();
      const f = b.value ? a.unCheckedValue : a.checkedValue;
      C(f, t), d("click", f, t);
    }, L = (t) => {
      t.keyCode === _.default.LEFT ? C(a.unCheckedValue, t) : t.keyCode === _.default.RIGHT && C(a.checkedValue, t), d("keydown", t);
    }, A = (t) => {
      var f;
      (f = h.value) === null || f === void 0 || f.blur(), d("mouseup", t);
    }, N = (0, c.computed)(() => ({
      [`${e.value}-small`]: n.value === "small",
      [`${e.value}-loading`]: a.loading,
      [`${e.value}-checked`]: b.value,
      [`${e.value}-disabled`]: m.value,
      [e.value]: !0,
      [`${e.value}-rtl`]: i.value === "rtl",
      [v.value]: !0
    }));
    return () => {
      var t;
      return o((0, c.createVNode)(se.default, null, {
        default: () => [(0, c.createVNode)("button", (0, x.default)((0, x.default)((0, x.default)({}, (0, he.default)(a, ["prefixCls", "checkedChildren", "unCheckedChildren", "checked", "autofocus", "checkedValue", "unCheckedValue", "id", "onChange", "onUpdate:checked"])), l), {}, {
          id: (t = a.id) !== null && t !== void 0 ? t : M.id.value,
          onKeydown: L,
          onClick: B,
          onBlur: j,
          onMouseup: A,
          type: "button",
          role: "switch",
          "aria-checked": $.value,
          disabled: m.value || a.loading,
          class: [l.class, N.value],
          ref: h
        }), [(0, c.createVNode)("div", {
          class: `${e.value}-handle`
        }, [a.loading ? (0, c.createVNode)(le.default, {
          class: `${e.value}-loading-icon`
        }, null) : null]), (0, c.createVNode)("span", {
          class: `${e.value}-inner`
        }, [(0, c.createVNode)("span", {
          class: `${e.value}-inner-checked`
        }, [(0, E.getPropsSlot)(s, a, "checkedChildren")]), (0, c.createVNode)("span", {
          class: `${e.value}-inner-unchecked`
        }, [(0, E.getPropsSlot)(s, a, "unCheckedChildren")])])])]
      }));
    };
  }
});
var fe = (0, T.withInstall)(Se), F = p.default = fe;
const _e = /* @__PURE__ */ ce({
  __proto__: null,
  get SwitchSizes() {
    return O;
  },
  get default() {
    return F;
  },
  get switchProps() {
    return q;
  }
}, [p]);
export {
  _e as i
};