UNPKG

epic-designer-cjh

Version:

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

867 lines (866 loc) 24.7 kB
import { i as O } from "./interopRequireDefault-40f894e3.js"; import { r as ce } from "./_vue_commonjs-external-eb7fec7f.js"; import { r as se, a as He } from "./public_api-1267ff2a.js"; import { r as ze } from "./index-62ef22df.js"; import { r as De, a as _e } from "./index-f96a976e.js"; import { f as Oe, r as Be, a as Le, b as xe, e as Ie, g as Ge } from "./useConfigInject-d85d8c62.js"; import { r as We } from "./LoadingOutlined-7a37e4f8.js"; import { r as Ae } from "./transition-d16825f8.js"; import { a as Ne, r as je } from "./compact-item-020b9c99.js"; import { r as Ve } from "./createContext-a42fe982.js"; var ue = {}, de = {}, q = {}, me; function Me() { if (me) return q; me = 1; var d = O; Object.defineProperty(q, "__esModule", { value: !0 }), q.buttonProps = void 0, q.convertLegacyProps = c, q.default = void 0; var r = d(De()), o = Oe(); function c(u) { return u === "danger" ? { danger: !0 } : { type: u }; } const n = () => ({ prefixCls: String, type: String, htmlType: { type: String, default: "button" }, shape: { type: String }, size: { type: String }, loading: { type: [Boolean, Object], default: () => !1 }, disabled: { type: Boolean, default: void 0 }, ghost: { type: Boolean, default: void 0 }, block: { type: Boolean, default: void 0 }, danger: { type: Boolean, default: void 0 }, icon: r.default.any, href: String, target: String, title: String, onClick: (0, o.eventType)(), onMousedown: (0, o.eventType)() }); q.buttonProps = n; var i = n; return q.default = i, q; } var N = {}, ge; function Ue() { if (ge) return N; ge = 1; var d = O; Object.defineProperty(N, "__esModule", { value: !0 }), N.default = void 0; var r = ce, o = d(We()), c = d(Ae()); const n = (t) => { t && (t.style.width = "0px", t.style.opacity = "0", t.style.transform = "scale(0)"); }, i = (t) => { (0, r.nextTick)(() => { t && (t.style.width = `${t.scrollWidth}px`, t.style.opacity = "1", t.style.transform = "scale(1)"); }); }, u = (t) => { t && t.style && (t.style.width = null, t.style.opacity = null, t.style.transform = null); }; var g = (0, r.defineComponent)({ compatConfig: { MODE: 3 }, name: "LoadingIcon", props: { prefixCls: String, loading: [Boolean, Object], existIcon: Boolean }, setup(t) { return () => { const { existIcon: w, prefixCls: b, loading: B } = t; if (w) return (0, r.createVNode)("span", { class: `${b}-loading-icon` }, [(0, r.createVNode)(o.default, null, null)]); const y = !!B; return (0, r.createVNode)(c.default, { name: `${b}-loading-icon-motion`, onBeforeEnter: n, onEnter: i, onAfterEnter: u, onBeforeLeave: i, onLeave: (h) => { setTimeout(() => { n(h); }); }, onAfterLeave: u }, { default: () => [y ? (0, r.createVNode)("span", { class: `${b}-loading-icon` }, [(0, r.createVNode)(o.default, null, null)]) : null] }); }; } }); return N.default = g, N; } var j = {}, V = {}, be; function Xe() { if (be) return V; be = 1, Object.defineProperty(V, "__esModule", { value: !0 }), V.default = void 0; const d = (c, n) => ({ // Border [`> span, > ${c}`]: { "&:not(:last-child)": { [`&, & > ${c}`]: { "&:not(:disabled)": { borderInlineEndColor: n } } }, "&:not(:first-child)": { [`&, & > ${c}`]: { "&:not(:disabled)": { borderInlineStartColor: n } } } } }); var o = (c) => { const { componentCls: n, fontSize: i, lineWidth: u, colorPrimaryHover: g, colorErrorHover: t } = c; return { [`${n}-group`]: [ { position: "relative", display: "inline-flex", // Border [`> span, > ${n}`]: { "&:not(:last-child)": { [`&, & > ${n}`]: { borderStartEndRadius: 0, borderEndEndRadius: 0 } }, "&:not(:first-child)": { marginInlineStart: -u, [`&, & > ${n}`]: { borderStartStartRadius: 0, borderEndStartRadius: 0 } } }, [n]: { position: "relative", zIndex: 1, "&:hover,\n &:focus,\n &:active": { zIndex: 2 }, "&[disabled]": { zIndex: 0 } }, [`${n}-icon-only`]: { fontSize: i } }, // Border Color d(`${n}-primary`, g), d(`${n}-danger`, t) ] }; }; return V.default = o, V; } var Z = {}, ye; function Fe() { if (ye) return Z; ye = 1; var d = O; Object.defineProperty(Z, "__esModule", { value: !0 }), Z.genCompactItemVerticalStyle = n; var r = d(se()); function o(i, u) { return { // border collapse [`&-item:not(${u}-last-item)`]: { marginBottom: -i.lineWidth }, "&-item": { "&:hover,&:focus,&:active": { zIndex: 2 }, "&[disabled]": { zIndex: 0 } } }; } function c(i, u) { return { [`&-item:not(${u}-first-item):not(${u}-last-item)`]: { borderRadius: 0 }, [`&-item${u}-first-item:not(${u}-last-item)`]: { [`&, &${i}-sm, &${i}-lg`]: { borderEndEndRadius: 0, borderEndStartRadius: 0 } }, [`&-item${u}-last-item:not(${u}-first-item)`]: { [`&, &${i}-sm, &${i}-lg`]: { borderStartStartRadius: 0, borderStartEndRadius: 0 } } }; } function n(i) { const u = `${i.componentCls}-compact-vertical`; return { [u]: (0, r.default)((0, r.default)({}, o(i, u)), c(i.componentCls, u)) }; } return Z; } var he; function Je() { if (he) return j; he = 1; var d = O; Object.defineProperty(j, "__esModule", { value: !0 }), j.default = void 0; var r = d(se()), o = Be(), c = d(Xe()), n = Le(), i = Ne(), u = Fe(); const g = (e) => { const { componentCls: l, iconCls: s } = e; return { [l]: { outline: "none", position: "relative", display: "inline-block", fontWeight: 400, whiteSpace: "nowrap", textAlign: "center", backgroundImage: "none", backgroundColor: "transparent", border: `${e.lineWidth}px ${e.lineType} transparent`, cursor: "pointer", transition: `all ${e.motionDurationMid} ${e.motionEaseInOut}`, userSelect: "none", touchAction: "manipulation", lineHeight: e.lineHeight, color: e.colorText, "> span": { display: "inline-block" }, // Leave a space between icon and text. [`> ${s} + span, > span + ${s}`]: { marginInlineStart: e.marginXS }, "> a": { color: "currentColor" }, "&:not(:disabled)": (0, r.default)({}, (0, n.genFocusStyle)(e)), // make `btn-icon-only` not too narrow [`&-icon-only${l}-compact-item`]: { flex: "none" }, // Special styles for Primary Button [`&-compact-item${l}-primary`]: { [`&:not([disabled]) + ${l}-compact-item${l}-primary:not([disabled])`]: { position: "relative", "&:before": { position: "absolute", top: -e.lineWidth, insetInlineStart: -e.lineWidth, display: "inline-block", width: e.lineWidth, height: `calc(100% + ${e.lineWidth * 2}px)`, backgroundColor: e.colorPrimaryHover, content: '""' } } }, // Special styles for Primary Button "&-compact-vertical-item": { [`&${l}-primary`]: { [`&:not([disabled]) + ${l}-compact-vertical-item${l}-primary:not([disabled])`]: { position: "relative", "&:before": { position: "absolute", top: -e.lineWidth, insetInlineStart: -e.lineWidth, display: "inline-block", width: `calc(100% + ${e.lineWidth * 2}px)`, height: e.lineWidth, backgroundColor: e.colorPrimaryHover, content: '""' } } } } } }; }, t = (e, l) => ({ "&:not(:disabled)": { "&:hover": e, "&:active": l } }), w = (e) => ({ minWidth: e.controlHeight, paddingInlineStart: 0, paddingInlineEnd: 0, borderRadius: "50%" }), b = (e) => ({ borderRadius: e.controlHeight, paddingInlineStart: e.controlHeight / 2, paddingInlineEnd: e.controlHeight / 2 }), B = (e) => ({ cursor: "not-allowed", borderColor: e.colorBorder, color: e.colorTextDisabled, backgroundColor: e.colorBgContainerDisabled, boxShadow: "none" }), y = (e, l, s, v, I, $, R) => ({ [`&${e}-background-ghost`]: (0, r.default)((0, r.default)({ color: l || void 0, backgroundColor: "transparent", borderColor: s || void 0, boxShadow: "none" }, t((0, r.default)({ backgroundColor: "transparent" }, $), (0, r.default)({ backgroundColor: "transparent" }, R))), { "&:disabled": { cursor: "not-allowed", color: v || void 0, borderColor: I || void 0 } }) }), h = (e) => ({ "&:disabled": (0, r.default)({}, B(e)) }), L = (e) => (0, r.default)({}, h(e)), x = (e) => ({ "&:disabled": { cursor: "not-allowed", color: e.colorTextDisabled } }), H = (e) => (0, r.default)((0, r.default)((0, r.default)((0, r.default)((0, r.default)({}, L(e)), { backgroundColor: e.colorBgContainer, borderColor: e.colorBorder, boxShadow: `0 ${e.controlOutlineWidth}px 0 ${e.controlTmpOutline}` }), t({ color: e.colorPrimaryHover, borderColor: e.colorPrimaryHover }, { color: e.colorPrimaryActive, borderColor: e.colorPrimaryActive })), y(e.componentCls, e.colorBgContainer, e.colorBgContainer, e.colorTextDisabled, e.colorBorder)), { [`&${e.componentCls}-dangerous`]: (0, r.default)((0, r.default)((0, r.default)({ color: e.colorError, borderColor: e.colorError }, t({ color: e.colorErrorHover, borderColor: e.colorErrorBorderHover }, { color: e.colorErrorActive, borderColor: e.colorErrorActive })), y(e.componentCls, e.colorError, e.colorError, e.colorTextDisabled, e.colorBorder)), h(e)) }), p = (e) => (0, r.default)((0, r.default)((0, r.default)((0, r.default)((0, r.default)({}, L(e)), { color: e.colorTextLightSolid, backgroundColor: e.colorPrimary, boxShadow: `0 ${e.controlOutlineWidth}px 0 ${e.controlOutline}` }), t({ color: e.colorTextLightSolid, backgroundColor: e.colorPrimaryHover }, { color: e.colorTextLightSolid, backgroundColor: e.colorPrimaryActive })), y(e.componentCls, e.colorPrimary, e.colorPrimary, e.colorTextDisabled, e.colorBorder, { color: e.colorPrimaryHover, borderColor: e.colorPrimaryHover }, { color: e.colorPrimaryActive, borderColor: e.colorPrimaryActive })), { [`&${e.componentCls}-dangerous`]: (0, r.default)((0, r.default)((0, r.default)({ backgroundColor: e.colorError, boxShadow: `0 ${e.controlOutlineWidth}px 0 ${e.colorErrorOutline}` }, t({ backgroundColor: e.colorErrorHover }, { backgroundColor: e.colorErrorActive })), y(e.componentCls, e.colorError, e.colorError, e.colorTextDisabled, e.colorBorder, { color: e.colorErrorHover, borderColor: e.colorErrorHover }, { color: e.colorErrorActive, borderColor: e.colorErrorActive })), h(e)) }), P = (e) => (0, r.default)((0, r.default)({}, H(e)), { borderStyle: "dashed" }), f = (e) => (0, r.default)((0, r.default)((0, r.default)({ color: e.colorLink }, t({ color: e.colorLinkHover }, { color: e.colorLinkActive })), x(e)), { [`&${e.componentCls}-dangerous`]: (0, r.default)((0, r.default)({ color: e.colorError }, t({ color: e.colorErrorHover }, { color: e.colorErrorActive })), x(e)) }), k = (e) => (0, r.default)((0, r.default)((0, r.default)({}, t({ color: e.colorText, backgroundColor: e.colorBgTextHover }, { color: e.colorText, backgroundColor: e.colorBgTextActive })), x(e)), { [`&${e.componentCls}-dangerous`]: (0, r.default)((0, r.default)({ color: e.colorError }, x(e)), t({ color: e.colorErrorHover, backgroundColor: e.colorErrorBg }, { color: e.colorErrorHover, backgroundColor: e.colorErrorBg })) }), G = (e) => (0, r.default)((0, r.default)({}, B(e)), { [`&${e.componentCls}:hover`]: (0, r.default)({}, B(e)) }), M = (e) => { const { componentCls: l } = e; return { [`${l}-default`]: H(e), [`${l}-primary`]: p(e), [`${l}-dashed`]: P(e), [`${l}-link`]: f(e), [`${l}-text`]: k(e), [`${l}-disabled`]: G(e) }; }, W = function(e) { let l = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ""; const { componentCls: s, iconCls: v, controlHeight: I, fontSize: $, lineHeight: R, lineWidth: A, borderRadius: S, buttonPaddingHorizontal: D } = e, F = Math.max(0, (I - $ * R) / 2 - A), oe = D - A, J = `${s}-icon-only`; return [ // Size { [`${s}${l}`]: { fontSize: $, height: I, padding: `${F}px ${oe}px`, borderRadius: S, [`&${J}`]: { width: I, paddingInlineStart: 0, paddingInlineEnd: 0, [`&${s}-round`]: { width: "auto" }, "> span": { transform: "scale(1.143)" // 14px -> 16px } }, // Loading [`&${s}-loading`]: { opacity: e.opacityLoading, cursor: "default" }, [`${s}-loading-icon`]: { transition: `width ${e.motionDurationSlow} ${e.motionEaseInOut}, opacity ${e.motionDurationSlow} ${e.motionEaseInOut}` }, [`&:not(${J}) ${s}-loading-icon > ${v}`]: { marginInlineEnd: e.marginXS } } }, // Shape - patch prefixCls again to override solid border radius style { [`${s}${s}-circle${l}`]: w(e) }, { [`${s}${s}-round${l}`]: b(e) } ]; }, ee = (e) => W(e), z = (e) => { const l = (0, o.mergeToken)(e, { controlHeight: e.controlHeightSM, padding: e.paddingXS, buttonPaddingHorizontal: 8, borderRadius: e.borderRadiusSM }); return W(l, `${e.componentCls}-sm`); }, U = (e) => { const l = (0, o.mergeToken)(e, { controlHeight: e.controlHeightLG, fontSize: e.fontSizeLG, borderRadius: e.borderRadiusLG }); return W(l, `${e.componentCls}-lg`); }, X = (e) => { const { componentCls: l } = e; return { [l]: { [`&${l}-block`]: { width: "100%" } } }; }; var re = (0, o.genComponentStyleHook)("Button", (e) => { const { controlTmpOutline: l, paddingContentHorizontal: s } = e, v = (0, o.mergeToken)(e, { colorOutlineDefault: l, buttonPaddingHorizontal: s }); return [ // Shared g(v), // Size z(v), ee(v), U(v), // Block X(v), // Group (type, ghost, danger, disabled, loading) M(v), // Button Group (0, c.default)(v), // Space Compact (0, i.genCompactItemStyle)(e, { focus: !1 }), (0, u.genCompactItemVerticalStyle)(e) ]; }); return j.default = re, j; } var E = {}, Ce; function Te() { if (Ce) return E; Ce = 1; var d = O; Object.defineProperty(E, "__esModule", { value: !0 }), E.default = E.buttonGroupProps = E.GroupSizeContext = void 0; var r = ce, o = xe(), c = d(Ie()), n = Be(), i = d(_e()), u = d(Ve()); const g = () => ({ prefixCls: String, size: { type: String } }); E.buttonGroupProps = g; const t = (0, u.default)(); E.GroupSizeContext = t; var w = (0, r.defineComponent)({ compatConfig: { MODE: 3 }, name: "AButtonGroup", props: g(), setup(b, B) { let { slots: y } = B; const { prefixCls: h, direction: L } = (0, c.default)("btn-group", b), [, , x] = (0, n.useToken)(); t.useProvide((0, r.reactive)({ size: (0, r.computed)(() => b.size) })); const H = (0, r.computed)(() => { const { size: p } = b; let P = ""; switch (p) { case "large": P = "lg"; break; case "small": P = "sm"; break; case "middle": case void 0: break; default: (0, i.default)(!p, "Button.Group", "Invalid prop `size`."); } return { [`${h.value}`]: !0, [`${h.value}-${P}`]: P, [`${h.value}-rtl`]: L.value === "rtl", [x.value]: !0 }; }); return () => { var p; return (0, r.createVNode)("div", { class: H.value }, [(0, o.flattenChildren)((p = y.default) === null || p === void 0 ? void 0 : p.call(y))]); }; } }); return E.default = w, E; } var $e; function Ke() { return $e || ($e = 1, function(d) { var r = O; Object.defineProperty(d, "__esModule", { value: !0 }), Object.defineProperty(d, "buttonProps", { enumerable: !0, get: function() { return u.default; } }), d.default = void 0; var o = ce, c = r(He()), n = r(se()), i = r(ze()), u = r(Me()), g = xe(), t = r(Ie()), w = Ge(), b = r(_e()), B = r(Ue()), y = r(Je()), h = Te(), L = je(); const x = /^[\u4e00-\u9fa5]{2}$/, H = x.test.bind(x); function p(f) { return f === "text" || f === "link"; } var P = (0, o.defineComponent)({ compatConfig: { MODE: 3 }, name: "AButton", inheritAttrs: !1, __ANT_BUTTON: !0, props: (0, g.initDefaultProps)((0, u.default)(), { type: "default" }), slots: Object, // emits: ['click', 'mousedown'], setup(f, k) { let { slots: G, attrs: M, emit: W, expose: ee } = k; const { prefixCls: z, autoInsertSpaceInButton: U, direction: X, size: re } = (0, t.default)("btn", f), [e, l] = (0, y.default)(z), s = h.GroupSizeContext.useInject(), v = (0, w.useInjectDisabled)(), I = (0, o.computed)(() => { var a; return (a = f.disabled) !== null && a !== void 0 ? a : v.value; }), $ = (0, o.shallowRef)(null), R = (0, o.shallowRef)(void 0); let A = !1; const S = (0, o.shallowRef)(!1), D = (0, o.shallowRef)(!1), F = (0, o.computed)(() => U.value !== !1), { compactSize: oe, compactItemClassnames: J } = (0, L.useCompactItemContext)(z, X), te = (0, o.computed)(() => typeof f.loading == "object" && f.loading.delay ? f.loading.delay || !0 : !!f.loading); (0, o.watch)(te, (a) => { clearTimeout(R.value), typeof te.value == "number" ? R.value = setTimeout(() => { S.value = a; }, te.value) : S.value = a; }, { immediate: !0 }); const Ee = (0, o.computed)(() => { const { type: a, shape: C = "default", ghost: T, block: _, danger: le } = f, m = z.value, K = { large: "lg", small: "sm", middle: void 0 }, Q = oe.value || (s == null ? void 0 : s.size) || re.value, Y = Q && K[Q] || ""; return [J.value, { [l.value]: !0, [`${m}`]: !0, [`${m}-${C}`]: C !== "default" && C, [`${m}-${a}`]: a, [`${m}-${Y}`]: Y, [`${m}-loading`]: S.value, [`${m}-background-ghost`]: T && !p(a), [`${m}-two-chinese-chars`]: D.value && F.value, [`${m}-block`]: _, [`${m}-dangerous`]: !!le, [`${m}-rtl`]: X.value === "rtl" }]; }), fe = () => { const a = $.value; if (!a || U.value === !1) return; const C = a.textContent; A && H(C) ? D.value || (D.value = !0) : D.value && (D.value = !1); }, Pe = (a) => { if (S.value || I.value) { a.preventDefault(); return; } W("click", a); }, Re = (a) => { W("mousedown", a); }, qe = (a, C) => { const T = C ? " " : ""; if (a.type === o.Text) { let _ = a.children.trim(); return H(_) && (_ = _.split("").join(T)), (0, o.createVNode)("span", null, [_]); } return a; }; return (0, o.watchEffect)(() => { (0, b.default)(!(f.ghost && p(f.type)), "Button", "`link` or `text` button can't be a `ghost` button."); }), (0, o.onMounted)(fe), (0, o.onUpdated)(fe), (0, o.onBeforeUnmount)(() => { R.value && clearTimeout(R.value); }), ee({ focus: () => { var a; (a = $.value) === null || a === void 0 || a.focus(); }, blur: () => { var a; (a = $.value) === null || a === void 0 || a.blur(); } }), () => { var a, C; const { icon: T = (a = G.icon) === null || a === void 0 ? void 0 : a.call(G) } = f, _ = (0, g.flattenChildren)((C = G.default) === null || C === void 0 ? void 0 : C.call(G)); A = _.length === 1 && !T && !p(f.type); const { type: le, htmlType: m, href: K, title: Q, target: Y } = f, we = S.value ? "loading" : T, ae = (0, n.default)((0, n.default)({}, M), { title: Q, disabled: I.value, class: [Ee.value, M.class, { [`${z.value}-icon-only`]: _.length === 0 && !!we }], onClick: Pe, onMousedown: Re }); I.value || delete ae.disabled; const pe = T && !S.value ? T : (0, o.createVNode)(B.default, { existIcon: !!T, prefixCls: z.value, loading: !!S.value }, null), ve = _.map((ie) => qe(ie, A && F.value)); if (K !== void 0) return e((0, o.createVNode)("a", (0, c.default)((0, c.default)({}, ae), {}, { href: K, target: Y, ref: $ }), [pe, ve])); let ne = (0, o.createVNode)("button", (0, c.default)((0, c.default)({}, ae), {}, { ref: $, type: m }), [pe, ve]); if (!p(le)) { const ie = function() { return ne; }(); ne = (0, o.createVNode)(i.default, { ref: "wave", disabled: !!S.value }, { default: () => [ie] }); } return e(ne); }; } }); d.default = P; }(de)), de; } var Se; function ur() { return Se || (Se = 1, function(d) { var r = O; Object.defineProperty(d, "__esModule", { value: !0 }), Object.defineProperty(d, "ButtonGroup", { enumerable: !0, get: function() { return c.default; } }), d.default = void 0; var o = r(Ke()), c = r(Te()); o.default.Group = c.default, o.default.install = function(i) { return i.component(o.default.name, o.default), i.component(c.default.name, c.default), i; }; var n = o.default; d.default = n; }(ue)), ue; } export { Me as a, ur as r };