epic-designer-cjh/dist/Group-9e132bf3.js

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

import { i as X } from "./interopRequireDefault-40f894e3.js";
import { r as J } from "./_vue_commonjs-external-eb7fec7f.js";
import { r as re, a as ae } from "./public_api-1267ff2a.js";
import { j as me, r as ye, a as xe, d as ne, e as ie, f as de, g as Se } from "./useConfigInject-d85d8c62.js";
import { r as le } from "./index-f96a976e.js";
import { r as $e } from "./Checkbox-017588c3.js";
import { r as ue } from "./FormItemContext-6c3deaca.js";
import { r as ke } from "./omit-84b99e2b.js";
function Ie(t, a) {
  for (var h = 0; h < a.length; h++) {
    const C = a[h];
    if (typeof C != "string" && !Array.isArray(C)) {
      for (const l in C)
        if (l !== "default" && !(l in t)) {
          const x = Object.getOwnPropertyDescriptor(C, l);
          x && Object.defineProperty(t, l, x.get ? x : {
            enumerable: !0,
            get: () => C[l]
          });
        }
    }
  }
  return Object.freeze(Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }));
}
var N = {}, z = {}, R = {}, Y;
function se() {
  if (Y)
    return R;
  Y = 1, Object.defineProperty(R, "__esModule", {
    value: !0
  }), R.useProvideRadioOptionTypeContext = R.useProvideRadioGroupContext = R.useInjectRadioOptionTypeContext = R.useInjectRadioGroupContext = void 0;
  var t = J;
  const a = Symbol("radioGroupContextKey"), h = (P) => {
    (0, t.provide)(a, P);
  };
  R.useProvideRadioGroupContext = h;
  const C = () => (0, t.inject)(a, void 0);
  R.useInjectRadioGroupContext = C;
  const l = Symbol("radioOptionTypeContextKey"), x = (P) => {
    (0, t.provide)(l, P);
  };
  R.useProvideRadioOptionTypeContext = x;
  const T = () => (0, t.inject)(l, void 0);
  return R.useInjectRadioOptionTypeContext = T, R;
}
var K = {}, Z;
function ce() {
  if (Z)
    return K;
  Z = 1;
  var t = X;
  Object.defineProperty(K, "__esModule", {
    value: !0
  }), K.default = void 0;
  var a = t(re()), h = me(), C = ye(), l = xe();
  const x = new h.Keyframes("antRadioEffect", {
    "0%": {
      transform: "scale(1)",
      opacity: 0.5
    },
    "100%": {
      transform: "scale(1.6)",
      opacity: 0
    }
  }), T = (u) => {
    const {
      componentCls: e,
      antCls: s
    } = u, r = `${e}-group`;
    return {
      [r]: (0, a.default)((0, a.default)({}, (0, l.resetComponent)(u)), {
        display: "inline-block",
        fontSize: 0,
        // RTL
        [`&${r}-rtl`]: {
          direction: "rtl"
        },
        [`${s}-badge ${s}-badge-count`]: {
          zIndex: 1
        },
        [`> ${s}-badge:not(:first-child) > ${s}-button-wrapper`]: {
          borderInlineStart: "none"
        }
      })
    };
  }, P = (u) => {
    const {
      componentCls: e,
      radioWrapperMarginRight: s,
      radioCheckedColor: r,
      radioSize: o,
      motionDurationSlow: p,
      motionDurationMid: b,
      motionEaseInOut: d,
      motionEaseInOutCirc: c,
      radioButtonBg: v,
      colorBorder: i,
      lineWidth: n,
      radioDotSize: S,
      colorBgContainerDisabled: I,
      colorTextDisabled: B,
      paddingXS: j,
      radioDotDisabledColor: f,
      lineType: w,
      radioDotDisabledSize: $,
      wireframe: g,
      colorWhite: D
    } = u, m = `${e}-inner`;
    return {
      [`${e}-wrapper`]: (0, a.default)((0, a.default)({}, (0, l.resetComponent)(u)), {
        position: "relative",
        display: "inline-flex",
        alignItems: "baseline",
        marginInlineStart: 0,
        marginInlineEnd: s,
        cursor: "pointer",
        // RTL
        [`&${e}-wrapper-rtl`]: {
          direction: "rtl"
        },
        "&-disabled": {
          cursor: "not-allowed",
          color: u.colorTextDisabled
        },
        "&::after": {
          display: "inline-block",
          width: 0,
          overflow: "hidden",
          content: '"\\a0"'
        },
        // hashId 在 wrapper 上，只能铺平
        [`${e}-checked::after`]: {
          position: "absolute",
          insetBlockStart: 0,
          insetInlineStart: 0,
          width: "100%",
          height: "100%",
          border: `${n}px ${w} ${r}`,
          borderRadius: "50%",
          visibility: "hidden",
          animationName: x,
          animationDuration: p,
          animationTimingFunction: d,
          animationFillMode: "both",
          content: '""'
        },
        [e]: (0, a.default)((0, a.default)({}, (0, l.resetComponent)(u)), {
          position: "relative",
          display: "inline-block",
          outline: "none",
          cursor: "pointer",
          alignSelf: "center"
        }),
        [`${e}-wrapper:hover &,
        &:hover ${m}`]: {
          borderColor: r
        },
        [`${e}-input:focus-visible + ${m}`]: (0, a.default)({}, (0, l.genFocusOutline)(u)),
        [`${e}:hover::after, ${e}-wrapper:hover &::after`]: {
          visibility: "visible"
        },
        [`${e}-inner`]: {
          "&::after": {
            boxSizing: "border-box",
            position: "absolute",
            insetBlockStart: "50%",
            insetInlineStart: "50%",
            display: "block",
            width: o,
            height: o,
            marginBlockStart: o / -2,
            marginInlineStart: o / -2,
            backgroundColor: g ? r : D,
            borderBlockStart: 0,
            borderInlineStart: 0,
            borderRadius: o,
            transform: "scale(0)",
            opacity: 0,
            transition: `all ${p} ${c}`,
            content: '""'
          },
          boxSizing: "border-box",
          position: "relative",
          insetBlockStart: 0,
          insetInlineStart: 0,
          display: "block",
          width: o,
          height: o,
          backgroundColor: v,
          borderColor: i,
          borderStyle: "solid",
          borderWidth: n,
          borderRadius: "50%",
          transition: `all ${b}`
        },
        [`${e}-input`]: {
          position: "absolute",
          insetBlockStart: 0,
          insetInlineEnd: 0,
          insetBlockEnd: 0,
          insetInlineStart: 0,
          zIndex: 1,
          cursor: "pointer",
          opacity: 0
        },
        // 选中状态
        [`${e}-checked`]: {
          [m]: {
            borderColor: r,
            backgroundColor: g ? v : r,
            "&::after": {
              transform: `scale(${S / o})`,
              opacity: 1,
              transition: `all ${p} ${c}`
            }
          }
        },
        [`${e}-disabled`]: {
          cursor: "not-allowed",
          [m]: {
            backgroundColor: I,
            borderColor: i,
            cursor: "not-allowed",
            "&::after": {
              backgroundColor: f
            }
          },
          [`${e}-input`]: {
            cursor: "not-allowed"
          },
          [`${e}-disabled + span`]: {
            color: B,
            cursor: "not-allowed"
          },
          [`&${e}-checked`]: {
            [m]: {
              "&::after": {
                transform: `scale(${$ / o})`
              }
            }
          }
        },
        [`span${e} + *`]: {
          paddingInlineStart: j,
          paddingInlineEnd: j
        }
      })
    };
  }, E = (u) => {
    const {
      radioButtonColor: e,
      controlHeight: s,
      componentCls: r,
      lineWidth: o,
      lineType: p,
      colorBorder: b,
      motionDurationSlow: d,
      motionDurationMid: c,
      radioButtonPaddingHorizontal: v,
      fontSize: i,
      radioButtonBg: n,
      fontSizeLG: S,
      controlHeightLG: I,
      controlHeightSM: B,
      paddingXS: j,
      borderRadius: f,
      borderRadiusSM: w,
      borderRadiusLG: $,
      radioCheckedColor: g,
      radioButtonCheckedBg: D,
      radioButtonHoverColor: m,
      radioButtonActiveColor: O,
      radioSolidCheckedColor: k,
      colorTextDisabled: M,
      colorBgContainerDisabled: H,
      radioDisabledButtonCheckedColor: V,
      radioDisabledButtonCheckedBg: L
    } = u;
    return {
      [`${r}-button-wrapper`]: {
        position: "relative",
        display: "inline-block",
        height: s,
        margin: 0,
        paddingInline: v,
        paddingBlock: 0,
        color: e,
        fontSize: i,
        lineHeight: `${s - o * 2}px`,
        background: n,
        border: `${o}px ${p} ${b}`,
        // strange align fix for chrome but works
        // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
        borderBlockStartWidth: o + 0.02,
        borderInlineStartWidth: 0,
        borderInlineEndWidth: o,
        cursor: "pointer",
        transition: [`color ${c}`, `background ${c}`, `border-color ${c}`, `box-shadow ${c}`].join(","),
        a: {
          color: e
        },
        [`> ${r}-button`]: {
          position: "absolute",
          insetBlockStart: 0,
          insetInlineStart: 0,
          zIndex: -1,
          width: "100%",
          height: "100%"
        },
        "&:not(:first-child)": {
          "&::before": {
            position: "absolute",
            insetBlockStart: -o,
            insetInlineStart: -o,
            display: "block",
            boxSizing: "content-box",
            width: 1,
            height: "100%",
            paddingBlock: o,
            paddingInline: 0,
            backgroundColor: b,
            transition: `background-color ${d}`,
            content: '""'
          }
        },
        "&:first-child": {
          borderInlineStart: `${o}px ${p} ${b}`,
          borderStartStartRadius: f,
          borderEndStartRadius: f
        },
        "&:last-child": {
          borderStartEndRadius: f,
          borderEndEndRadius: f
        },
        "&:first-child:last-child": {
          borderRadius: f
        },
        [`${r}-group-large &`]: {
          height: I,
          fontSize: S,
          lineHeight: `${I - o * 2}px`,
          "&:first-child": {
            borderStartStartRadius: $,
            borderEndStartRadius: $
          },
          "&:last-child": {
            borderStartEndRadius: $,
            borderEndEndRadius: $
          }
        },
        [`${r}-group-small &`]: {
          height: B,
          paddingInline: j - o,
          paddingBlock: 0,
          lineHeight: `${B - o * 2}px`,
          "&:first-child": {
            borderStartStartRadius: w,
            borderEndStartRadius: w
          },
          "&:last-child": {
            borderStartEndRadius: w,
            borderEndEndRadius: w
          }
        },
        "&:hover": {
          position: "relative",
          color: g
        },
        "&:has(:focus-visible)": (0, a.default)({}, (0, l.genFocusOutline)(u)),
        [`${r}-inner, input[type='checkbox'], input[type='radio']`]: {
          width: 0,
          height: 0,
          opacity: 0,
          pointerEvents: "none"
        },
        [`&-checked:not(${r}-button-wrapper-disabled)`]: {
          zIndex: 1,
          color: g,
          background: D,
          borderColor: g,
          "&::before": {
            backgroundColor: g
          },
          "&:first-child": {
            borderColor: g
          },
          "&:hover": {
            color: m,
            borderColor: m,
            "&::before": {
              backgroundColor: m
            }
          },
          "&:active": {
            color: O,
            borderColor: O,
            "&::before": {
              backgroundColor: O
            }
          }
        },
        [`${r}-group-solid &-checked:not(${r}-button-wrapper-disabled)`]: {
          color: k,
          background: g,
          borderColor: g,
          "&:hover": {
            color: k,
            background: m,
            borderColor: m
          },
          "&:active": {
            color: k,
            background: O,
            borderColor: O
          }
        },
        "&-disabled": {
          color: M,
          backgroundColor: H,
          borderColor: b,
          cursor: "not-allowed",
          "&:first-child, &:hover": {
            color: M,
            backgroundColor: H,
            borderColor: b
          }
        },
        [`&-disabled${r}-button-wrapper-checked`]: {
          color: V,
          backgroundColor: L,
          borderColor: b,
          boxShadow: "none"
        }
      }
    };
  };
  var A = (0, C.genComponentStyleHook)("Radio", (u) => {
    const {
      padding: e,
      lineWidth: s,
      controlItemBgActiveDisabled: r,
      colorTextDisabled: o,
      colorBgContainer: p,
      fontSizeLG: b,
      controlOutline: d,
      colorPrimaryHover: c,
      colorPrimaryActive: v,
      colorText: i,
      colorPrimary: n,
      marginXS: S,
      controlOutlineWidth: I,
      colorTextLightSolid: B,
      wireframe: j
    } = u, f = `0 0 0 ${I}px ${d}`, w = f, $ = b, g = 4, D = $ - g * 2, m = j ? D : $ - (g + s) * 2, O = n, k = i, M = c, H = v, V = e - s, L = o, Q = S, U = (0, C.mergeToken)(u, {
      radioFocusShadow: f,
      radioButtonFocusShadow: w,
      radioSize: $,
      radioDotSize: m,
      radioDotDisabledSize: D,
      radioCheckedColor: O,
      radioDotDisabledColor: o,
      radioSolidCheckedColor: B,
      radioButtonBg: p,
      radioButtonCheckedBg: p,
      radioButtonColor: k,
      radioButtonHoverColor: M,
      radioButtonActiveColor: H,
      radioButtonPaddingHorizontal: V,
      radioDisabledButtonCheckedBg: r,
      radioDisabledButtonCheckedColor: L,
      radioWrapperMarginRight: Q
    });
    return [T(U), P(U), E(U)];
  });
  return K.default = A, K;
}
var ee;
function Re() {
  if (ee)
    return z;
  ee = 1;
  var t = X;
  Object.defineProperty(z, "__esModule", {
    value: !0
  }), z.radioProps = z.default = void 0;
  var a = J, h = t(ae()), C = t(re()), l = t(le()), x = t($e()), T = t(ne()), P = t(ie()), E = ue(), A = t(ke()), u = se(), e = de(), s = t(ce()), r = Se(), o = function(d, c) {
    var v = {};
    for (var i in d)
      Object.prototype.hasOwnProperty.call(d, i) && c.indexOf(i) < 0 && (v[i] = d[i]);
    if (d != null && typeof Object.getOwnPropertySymbols == "function")
      for (var n = 0, i = Object.getOwnPropertySymbols(d); n < i.length; n++)
        c.indexOf(i[n]) < 0 && Object.prototype.propertyIsEnumerable.call(d, i[n]) && (v[i[n]] = d[i[n]]);
    return v;
  };
  const p = () => ({
    prefixCls: String,
    checked: (0, e.booleanType)(),
    disabled: (0, e.booleanType)(),
    isGroup: (0, e.booleanType)(),
    value: l.default.any,
    name: String,
    id: String,
    autofocus: (0, e.booleanType)(),
    onChange: (0, e.functionType)(),
    onFocus: (0, e.functionType)(),
    onBlur: (0, e.functionType)(),
    onClick: (0, e.functionType)(),
    "onUpdate:checked": (0, e.functionType)(),
    "onUpdate:value": (0, e.functionType)()
  });
  z.radioProps = p;
  var b = (0, a.defineComponent)({
    compatConfig: {
      MODE: 3
    },
    name: "ARadio",
    inheritAttrs: !1,
    props: p(),
    setup(d, c) {
      let {
        emit: v,
        expose: i,
        slots: n,
        attrs: S
      } = c;
      const I = (0, E.useInjectFormItemContext)(), B = E.FormItemInputContext.useInject(), j = (0, u.useInjectRadioOptionTypeContext)(), f = (0, u.useInjectRadioGroupContext)(), w = (0, r.useInjectDisabled)(), $ = (0, a.computed)(() => {
        var y;
        return (y = O.value) !== null && y !== void 0 ? y : w.value;
      }), g = (0, a.ref)(), {
        prefixCls: D,
        direction: m,
        disabled: O
      } = (0, P.default)("radio", d), k = (0, a.computed)(() => (f == null ? void 0 : f.optionType.value) === "button" || j === "button" ? `${D.value}-button` : D.value), M = (0, r.useInjectDisabled)(), [H, V] = (0, s.default)(D);
      i({
        focus: () => {
          g.value.focus();
        },
        blur: () => {
          g.value.blur();
        }
      });
      const U = (y) => {
        const q = y.target.checked;
        v("update:checked", q), v("update:value", q), v("change", y), I.onFieldChange();
      }, ve = (y) => {
        v("change", y), f && f.onChange && f.onChange(y);
      };
      return () => {
        var y;
        const q = f, {
          prefixCls: je,
          id: ge = I.id.value
        } = d, Ce = o(d, ["prefixCls", "id"]), G = (0, C.default)((0, C.default)({
          prefixCls: k.value,
          id: ge
        }, (0, A.default)(Ce, ["onUpdate:checked", "onUpdate:value"])), {
          disabled: (y = O.value) !== null && y !== void 0 ? y : M.value
        });
        q ? (G.name = q.name.value, G.onChange = ve, G.checked = d.value === q.value.value, G.disabled = $.value || q.disabled.value) : G.onChange = U;
        const he = (0, T.default)({
          [`${k.value}-wrapper`]: !0,
          [`${k.value}-wrapper-checked`]: G.checked,
          [`${k.value}-wrapper-disabled`]: G.disabled,
          [`${k.value}-wrapper-rtl`]: m.value === "rtl",
          [`${k.value}-wrapper-in-form-item`]: B.isFormItemInput
        }, S.class, V.value);
        return H((0, a.createVNode)("label", (0, h.default)((0, h.default)({}, S), {}, {
          class: he
        }), [(0, a.createVNode)(x.default, (0, h.default)((0, h.default)({}, G), {}, {
          type: "radio",
          ref: g
        }), null), n.default && (0, a.createVNode)("span", null, [n.default()])]));
      };
    }
  });
  return z.default = b, z;
}
var W = X;
Object.defineProperty(N, "__esModule", {
  value: !0
});
var pe = N.radioGroupProps = fe = N.default = void 0, _ = J, oe = W(ae()), _e = W(ne()), Te = W(le()), te = W(Re()), Be = W(ie()), F = de(), we = ue(), De = se(), Oe = W(ce());
const be = () => ({
  prefixCls: String,
  value: Te.default.any,
  size: (0, F.stringType)(),
  options: (0, F.arrayType)(),
  disabled: (0, F.booleanType)(),
  name: String,
  buttonStyle: (0, F.stringType)("outline"),
  id: String,
  optionType: (0, F.stringType)("default"),
  onChange: (0, F.functionType)(),
  "onUpdate:value": (0, F.functionType)()
});
pe = N.radioGroupProps = be;
var Pe = (0, _.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: "ARadioGroup",
  inheritAttrs: !1,
  props: be(),
  // emits: ['update:value', 'change'],
  setup(t, a) {
    let {
      slots: h,
      emit: C,
      attrs: l
    } = a;
    const x = (0, we.useInjectFormItemContext)(), {
      prefixCls: T,
      direction: P,
      size: E
    } = (0, Be.default)("radio", t), [A, u] = (0, Oe.default)(T), e = (0, _.ref)(t.value), s = (0, _.ref)(!1);
    (0, _.watch)(() => t.value, (o) => {
      e.value = o, s.value = !1;
    });
    const r = (o) => {
      const p = e.value, {
        value: b
      } = o.target;
      "value" in t || (e.value = b), !s.value && b !== p && (s.value = !0, C("update:value", b), C("change", o), x.onFieldChange()), (0, _.nextTick)(() => {
        s.value = !1;
      });
    };
    return (0, De.useProvideRadioGroupContext)({
      onChange: r,
      value: e,
      disabled: (0, _.computed)(() => t.disabled),
      name: (0, _.computed)(() => t.name),
      optionType: (0, _.computed)(() => t.optionType)
    }), () => {
      var o;
      const {
        options: p,
        buttonStyle: b,
        id: d = x.id.value
      } = t, c = `${T.value}-group`, v = (0, _e.default)(c, `${c}-${b}`, {
        [`${c}-${E.value}`]: E.value,
        [`${c}-rtl`]: P.value === "rtl"
      }, l.class, u.value);
      let i = null;
      return p && p.length > 0 ? i = p.map((n) => {
        if (typeof n == "string" || typeof n == "number")
          return (0, _.createVNode)(te.default, {
            key: n,
            prefixCls: T.value,
            disabled: t.disabled,
            value: n,
            checked: e.value === n
          }, {
            default: () => [n]
          });
        const {
          value: S,
          disabled: I,
          label: B
        } = n;
        return (0, _.createVNode)(te.default, {
          key: `radio-group-value-options-${S}`,
          prefixCls: T.value,
          disabled: I || t.disabled,
          value: S,
          checked: e.value === S
        }, {
          default: () => [B]
        });
      }) : i = (o = h.default) === null || o === void 0 ? void 0 : o.call(h), A((0, _.createVNode)("div", (0, oe.default)((0, oe.default)({}, l), {}, {
        class: v,
        id: d
      }), [i]));
    };
  }
}), fe = N.default = Pe;
const We = /* @__PURE__ */ Ie({
  __proto__: null,
  get default() {
    return fe;
  },
  get radioGroupProps() {
    return pe;
  }
}, [N]);
export {
  We as G
};