epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
867 lines (866 loc) • 24.7 kB
JavaScript
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
};