epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
800 lines (799 loc) • 23.4 kB
JavaScript
import { i as G } from "./interopRequireDefault-40f894e3.js";
import { r as T } from "./public_api-1267ff2a.js";
import { r as A, a as M } from "./useConfigInject-d85d8c62.js";
import { a as L } from "./compact-item-020b9c99.js";
var d = {}, I;
function q() {
if (I)
return d;
I = 1;
var v = G;
Object.defineProperty(d, "__esModule", {
value: !0
}), d.genStatusStyle = d.genPlaceholderStyle = d.genInputSmallStyle = d.genInputGroupStyle = d.genHoverStyle = d.genDisabledStyle = d.genBasicInputStyle = d.genActiveStyle = d.default = void 0, d.initInputToken = y;
var i = v(T()), a = A(), u = M(), H = L();
const f = (r) => ({
// Firefox
"&::-moz-placeholder": {
opacity: 1
},
"&::placeholder": {
color: r,
userSelect: "none"
// https://github.com/ant-design/ant-design/pull/32639
},
"&:placeholder-shown": {
textOverflow: "ellipsis"
}
});
d.genPlaceholderStyle = f;
const s = (r) => ({
borderColor: r.inputBorderHoverColor,
borderInlineEndWidth: r.lineWidth
});
d.genHoverStyle = s;
const c = (r) => ({
borderColor: r.inputBorderHoverColor,
boxShadow: `0 0 0 ${r.controlOutlineWidth}px ${r.controlOutline}`,
borderInlineEndWidth: r.lineWidth,
outline: 0
});
d.genActiveStyle = c;
const S = (r) => ({
color: r.colorTextDisabled,
backgroundColor: r.colorBgContainerDisabled,
borderColor: r.colorBorder,
boxShadow: "none",
cursor: "not-allowed",
opacity: 1,
"&:hover": (0, i.default)({}, s((0, a.mergeToken)(r, {
inputBorderHoverColor: r.colorBorder
})))
});
d.genDisabledStyle = S;
const x = (r) => {
const {
inputPaddingVerticalLG: e,
fontSizeLG: t,
lineHeightLG: o,
borderRadiusLG: l,
inputPaddingHorizontalLG: n
} = r;
return {
padding: `${e}px ${n}px`,
fontSize: t,
lineHeight: o,
borderRadius: l
};
}, p = (r) => ({
padding: `${r.inputPaddingVerticalSM}px ${r.controlPaddingHorizontalSM - 1}px`,
borderRadius: r.borderRadiusSM
});
d.genInputSmallStyle = p;
const g = (r, e) => {
const {
componentCls: t,
colorError: o,
colorWarning: l,
colorErrorOutline: n,
colorWarningOutline: $,
colorErrorBorderHover: b,
colorWarningBorderHover: B
} = r;
return {
[`&-status-error:not(${e}-disabled):not(${e}-borderless)${e}`]: {
borderColor: o,
"&:hover": {
borderColor: b
},
"&:focus, &-focused": (0, i.default)({}, c((0, a.mergeToken)(r, {
inputBorderActiveColor: o,
inputBorderHoverColor: o,
controlOutline: n
}))),
[`${t}-prefix`]: {
color: o
}
},
[`&-status-warning:not(${e}-disabled):not(${e}-borderless)${e}`]: {
borderColor: l,
"&:hover": {
borderColor: B
},
"&:focus, &-focused": (0, i.default)({}, c((0, a.mergeToken)(r, {
inputBorderActiveColor: l,
inputBorderHoverColor: l,
controlOutline: $
}))),
[`${t}-prefix`]: {
color: l
}
}
};
};
d.genStatusStyle = g;
const h = (r) => (0, i.default)((0, i.default)({
position: "relative",
display: "inline-block",
width: "100%",
minWidth: 0,
padding: `${r.inputPaddingVertical}px ${r.inputPaddingHorizontal}px`,
color: r.colorText,
fontSize: r.fontSize,
lineHeight: r.lineHeight,
backgroundColor: r.colorBgContainer,
backgroundImage: "none",
borderWidth: r.lineWidth,
borderStyle: r.lineType,
borderColor: r.colorBorder,
borderRadius: r.borderRadius,
transition: `all ${r.motionDurationMid}`
}, f(r.colorTextPlaceholder)), {
"&:hover": (0, i.default)({}, s(r)),
"&:focus, &-focused": (0, i.default)({}, c(r)),
"&-disabled, &[disabled]": (0, i.default)({}, S(r)),
"&-borderless": {
"&, &:hover, &:focus, &-focused, &-disabled, &[disabled]": {
backgroundColor: "transparent",
border: "none",
boxShadow: "none"
}
},
// Reset height for `textarea`s
"textarea&": {
maxWidth: "100%",
height: "auto",
minHeight: r.controlHeight,
lineHeight: r.lineHeight,
verticalAlign: "bottom",
transition: `all ${r.motionDurationSlow}, height 0s`,
resize: "vertical"
},
// Size
"&-lg": (0, i.default)({}, x(r)),
"&-sm": (0, i.default)({}, p(r)),
// RTL
"&-rtl": {
direction: "rtl"
},
"&-textarea-rtl": {
direction: "rtl"
}
});
d.genBasicInputStyle = h;
const m = (r) => {
const {
componentCls: e,
antCls: t
} = r;
return {
position: "relative",
display: "table",
width: "100%",
borderCollapse: "separate",
borderSpacing: 0,
// Undo padding and float of grid classes
"&[class*='col-']": {
paddingInlineEnd: r.paddingXS,
"&:last-child": {
paddingInlineEnd: 0
}
},
// Sizing options
[`&-lg ${e}, &-lg > ${e}-group-addon`]: (0, i.default)({}, x(r)),
[`&-sm ${e}, &-sm > ${e}-group-addon`]: (0, i.default)({}, p(r)),
[`> ${e}`]: {
display: "table-cell",
"&:not(:first-child):not(:last-child)": {
borderRadius: 0
}
},
[`${e}-group`]: {
"&-addon, &-wrap": {
display: "table-cell",
width: 1,
whiteSpace: "nowrap",
verticalAlign: "middle",
"&:not(:first-child):not(:last-child)": {
borderRadius: 0
}
},
"&-wrap > *": {
display: "block !important"
},
"&-addon": {
position: "relative",
padding: `0 ${r.inputPaddingHorizontal}px`,
color: r.colorText,
fontWeight: "normal",
fontSize: r.fontSize,
textAlign: "center",
backgroundColor: r.colorFillAlter,
border: `${r.lineWidth}px ${r.lineType} ${r.colorBorder}`,
borderRadius: r.borderRadius,
transition: `all ${r.motionDurationSlow}`,
lineHeight: 1,
// Reset Select's style in addon
[`${t}-select`]: {
margin: `-${r.inputPaddingVertical + 1}px -${r.inputPaddingHorizontal}px`,
[`&${t}-select-single:not(${t}-select-customize-input)`]: {
[`${t}-select-selector`]: {
backgroundColor: "inherit",
border: `${r.lineWidth}px ${r.lineType} transparent`,
boxShadow: "none"
}
},
"&-open, &-focused": {
[`${t}-select-selector`]: {
color: r.colorPrimary
}
}
},
// https://github.com/ant-design/ant-design/issues/31333
[`${t}-cascader-picker`]: {
margin: `-9px -${r.inputPaddingHorizontal}px`,
backgroundColor: "transparent",
[`${t}-cascader-input`]: {
textAlign: "start",
border: 0,
boxShadow: "none"
}
}
},
"&-addon:first-child": {
borderInlineEnd: 0
},
"&-addon:last-child": {
borderInlineStart: 0
}
},
[`${e}`]: {
float: "inline-start",
width: "100%",
marginBottom: 0,
textAlign: "inherit",
"&:focus": {
zIndex: 1,
borderInlineEndWidth: 1
},
"&:hover": {
zIndex: 1,
borderInlineEndWidth: 1,
[`${e}-search-with-button &`]: {
zIndex: 0
}
}
},
// Reset rounded corners
[`> ${e}:first-child, ${e}-group-addon:first-child`]: {
borderStartEndRadius: 0,
borderEndEndRadius: 0,
// Reset Select's style in addon
[`${t}-select ${t}-select-selector`]: {
borderStartEndRadius: 0,
borderEndEndRadius: 0
}
},
[`> ${e}-affix-wrapper`]: {
[`&:not(:first-child) ${e}`]: {
borderStartStartRadius: 0,
borderEndStartRadius: 0
},
[`&:not(:last-child) ${e}`]: {
borderStartEndRadius: 0,
borderEndEndRadius: 0
}
},
[`> ${e}:last-child, ${e}-group-addon:last-child`]: {
borderStartStartRadius: 0,
borderEndStartRadius: 0,
// Reset Select's style in addon
[`${t}-select ${t}-select-selector`]: {
borderStartStartRadius: 0,
borderEndStartRadius: 0
}
},
[`${e}-affix-wrapper`]: {
"&:not(:last-child)": {
borderStartEndRadius: 0,
borderEndEndRadius: 0,
[`${e}-search &`]: {
borderStartStartRadius: r.borderRadius,
borderEndStartRadius: r.borderRadius
}
},
[`&:not(:first-child), ${e}-search &:not(:first-child)`]: {
borderStartStartRadius: 0,
borderEndStartRadius: 0
}
},
[`&${e}-group-compact`]: (0, i.default)((0, i.default)({
display: "block"
}, (0, u.clearFix)()), {
[`${e}-group-addon, ${e}-group-wrap, > ${e}`]: {
"&:not(:first-child):not(:last-child)": {
borderInlineEndWidth: r.lineWidth,
"&:hover": {
zIndex: 1
},
"&:focus": {
zIndex: 1
}
}
},
"& > *": {
display: "inline-block",
float: "none",
verticalAlign: "top",
borderRadius: 0
},
[`& > ${e}-affix-wrapper`]: {
display: "inline-flex"
},
[`& > ${t}-picker-range`]: {
display: "inline-flex"
},
"& > *:not(:last-child)": {
marginInlineEnd: -r.lineWidth,
borderInlineEndWidth: r.lineWidth
},
// Undo float for .ant-input-group .ant-input
[`${e}`]: {
float: "none"
},
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
[`& > ${t}-select > ${t}-select-selector,
& > ${t}-select-auto-complete ${e},
& > ${t}-cascader-picker ${e},
& > ${e}-group-wrapper ${e}`]: {
borderInlineEndWidth: r.lineWidth,
borderRadius: 0,
"&:hover": {
zIndex: 1
},
"&:focus": {
zIndex: 1
}
},
[`& > ${t}-select-focused`]: {
zIndex: 1
},
// update z-index for arrow icon
[`& > ${t}-select > ${t}-select-arrow`]: {
zIndex: 1
// https://github.com/ant-design/ant-design/issues/20371
},
[`& > *:first-child,
& > ${t}-select:first-child > ${t}-select-selector,
& > ${t}-select-auto-complete:first-child ${e},
& > ${t}-cascader-picker:first-child ${e}`]: {
borderStartStartRadius: r.borderRadius,
borderEndStartRadius: r.borderRadius
},
[`& > *:last-child,
& > ${t}-select:last-child > ${t}-select-selector,
& > ${t}-cascader-picker:last-child ${e},
& > ${t}-cascader-picker-focused:last-child ${e}`]: {
borderInlineEndWidth: r.lineWidth,
borderStartEndRadius: r.borderRadius,
borderEndEndRadius: r.borderRadius
},
// https://github.com/ant-design/ant-design/issues/12493
[`& > ${t}-select-auto-complete ${e}`]: {
verticalAlign: "top"
},
[`${e}-group-wrapper + ${e}-group-wrapper`]: {
marginInlineStart: -r.lineWidth,
[`${e}-affix-wrapper`]: {
borderRadius: 0
}
},
[`${e}-group-wrapper:not(:last-child)`]: {
[`&${e}-search > ${e}-group`]: {
[`& > ${e}-group-addon > ${e}-search-button`]: {
borderRadius: 0
},
[`& > ${e}`]: {
borderStartStartRadius: r.borderRadius,
borderStartEndRadius: 0,
borderEndEndRadius: 0,
borderEndStartRadius: r.borderRadius
}
}
}
}),
[`&&-sm ${t}-btn`]: {
fontSize: r.fontSizeSM,
height: r.controlHeightSM,
lineHeight: "normal"
},
[`&&-lg ${t}-btn`]: {
fontSize: r.fontSizeLG,
height: r.controlHeightLG,
lineHeight: "normal"
},
// Fix https://github.com/ant-design/ant-design/issues/5754
[`&&-lg ${t}-select-single ${t}-select-selector`]: {
height: `${r.controlHeightLG}px`,
[`${t}-select-selection-item, ${t}-select-selection-placeholder`]: {
// -2 is for the border size & override default
lineHeight: `${r.controlHeightLG - 2}px`
},
[`${t}-select-selection-search-input`]: {
height: `${r.controlHeightLG}px`
}
},
[`&&-sm ${t}-select-single ${t}-select-selector`]: {
height: `${r.controlHeightSM}px`,
[`${t}-select-selection-item, ${t}-select-selection-placeholder`]: {
// -2 is for the border size & override default
lineHeight: `${r.controlHeightSM - 2}px`
},
[`${t}-select-selection-search-input`]: {
height: `${r.controlHeightSM}px`
}
}
};
};
d.genInputGroupStyle = m;
const R = (r) => {
const {
componentCls: e,
controlHeightSM: t,
lineWidth: o
} = r, l = 16, n = (t - o * 2 - l) / 2;
return {
[e]: (0, i.default)((0, i.default)((0, i.default)((0, i.default)({}, (0, u.resetComponent)(r)), h(r)), g(r, e)), {
'&[type="color"]': {
height: r.controlHeight,
[`&${e}-lg`]: {
height: r.controlHeightLG
},
[`&${e}-sm`]: {
height: t,
paddingTop: n,
paddingBottom: n
}
}
})
};
}, E = (r) => {
const {
componentCls: e
} = r;
return {
// ========================= Input =========================
[`${e}-clear-icon`]: {
margin: 0,
color: r.colorTextQuaternary,
fontSize: r.fontSizeIcon,
verticalAlign: -1,
// https://github.com/ant-design/ant-design/pull/18151
// https://codesandbox.io/s/wizardly-sun-u10br
cursor: "pointer",
transition: `color ${r.motionDurationSlow}`,
"&:hover": {
color: r.colorTextTertiary
},
"&:active": {
color: r.colorText
},
"&-hidden": {
visibility: "hidden"
},
"&-has-suffix": {
margin: `0 ${r.inputAffixPadding}px`
}
},
// ======================= TextArea ========================
"&-textarea-with-clear-btn": {
padding: "0 !important",
border: "0 !important",
[`${e}-clear-icon`]: {
position: "absolute",
insetBlockStart: r.paddingXS,
insetInlineEnd: r.paddingXS,
zIndex: 1
}
}
};
}, w = (r) => {
const {
componentCls: e,
inputAffixPadding: t,
colorTextDescription: o,
motionDurationSlow: l,
colorIcon: n,
colorIconHover: $,
iconCls: b
} = r;
return {
[`${e}-affix-wrapper`]: (0, i.default)((0, i.default)((0, i.default)((0, i.default)((0, i.default)({}, h(r)), {
display: "inline-flex",
[`&:not(${e}-affix-wrapper-disabled):hover`]: (0, i.default)((0, i.default)({}, s(r)), {
zIndex: 1,
[`${e}-search-with-button &`]: {
zIndex: 0
}
}),
"&-focused, &:focus": {
zIndex: 1
},
"&-disabled": {
[`${e}[disabled]`]: {
background: "transparent"
}
},
[`> input${e}`]: {
padding: 0,
fontSize: "inherit",
border: "none",
borderRadius: 0,
outline: "none",
"&:focus": {
boxShadow: "none !important"
}
},
"&::before": {
width: 0,
visibility: "hidden",
content: '"\\a0"'
},
[`${e}`]: {
"&-prefix, &-suffix": {
display: "flex",
flex: "none",
alignItems: "center",
"> *:not(:last-child)": {
marginInlineEnd: r.paddingXS
}
},
"&-show-count-suffix": {
color: o
},
"&-show-count-has-suffix": {
marginInlineEnd: r.paddingXXS
},
"&-prefix": {
marginInlineEnd: t
},
"&-suffix": {
marginInlineStart: t
}
}
}), E(r)), {
// password
[`${b}${e}-password-icon`]: {
color: n,
cursor: "pointer",
transition: `all ${l}`,
"&:hover": {
color: $
}
}
}), g(r, `${e}-affix-wrapper`))
};
}, z = (r) => {
const {
componentCls: e,
colorError: t,
colorSuccess: o,
borderRadiusLG: l,
borderRadiusSM: n
} = r;
return {
[`${e}-group`]: (0, i.default)((0, i.default)((0, i.default)({}, (0, u.resetComponent)(r)), m(r)), {
"&-rtl": {
direction: "rtl"
},
"&-wrapper": {
display: "inline-block",
width: "100%",
textAlign: "start",
verticalAlign: "top",
"&-rtl": {
direction: "rtl"
},
// Size
"&-lg": {
[`${e}-group-addon`]: {
borderRadius: l
}
},
"&-sm": {
[`${e}-group-addon`]: {
borderRadius: n
}
},
// Status
"&-status-error": {
[`${e}-group-addon`]: {
color: t,
borderColor: t
}
},
"&-status-warning": {
[`${e}-group-addon:last-child`]: {
color: o,
borderColor: o
}
}
}
})
};
}, C = (r) => {
const {
componentCls: e,
antCls: t
} = r, o = `${e}-search`;
return {
[o]: {
[`${e}`]: {
"&:hover, &:focus": {
borderColor: r.colorPrimaryHover,
[`+ ${e}-group-addon ${o}-button:not(${t}-btn-primary)`]: {
borderInlineStartColor: r.colorPrimaryHover
}
}
},
[`${e}-affix-wrapper`]: {
borderRadius: 0
},
// fix slight height diff in Firefox:
// https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
[`${e}-lg`]: {
lineHeight: r.lineHeightLG - 2e-4
},
[`> ${e}-group`]: {
[`> ${e}-group-addon:last-child`]: {
insetInlineStart: -1,
padding: 0,
border: 0,
[`${o}-button`]: {
paddingTop: 0,
paddingBottom: 0,
borderStartStartRadius: 0,
borderStartEndRadius: r.borderRadius,
borderEndEndRadius: r.borderRadius,
borderEndStartRadius: 0
},
[`${o}-button:not(${t}-btn-primary)`]: {
color: r.colorTextDescription,
"&:hover": {
color: r.colorPrimaryHover
},
"&:active": {
color: r.colorPrimaryActive
},
[`&${t}-btn-loading::before`]: {
insetInlineStart: 0,
insetInlineEnd: 0,
insetBlockStart: 0,
insetBlockEnd: 0
}
}
}
},
[`${o}-button`]: {
height: r.controlHeight,
"&:hover, &:focus": {
zIndex: 1
}
},
[`&-large ${o}-button`]: {
height: r.controlHeightLG
},
[`&-small ${o}-button`]: {
height: r.controlHeightSM
},
"&-rtl": {
direction: "rtl"
},
// ===================== Compact Item Customized Styles =====================
[`&${e}-compact-item`]: {
[`&:not(${e}-compact-last-item)`]: {
[`${e}-group-addon`]: {
[`${e}-search-button`]: {
marginInlineEnd: -r.lineWidth,
borderRadius: 0
}
}
},
[`&:not(${e}-compact-first-item)`]: {
[`${e},${e}-affix-wrapper`]: {
borderRadius: 0
}
},
[`> ${e}-group-addon ${e}-search-button,
> ${e},
${e}-affix-wrapper`]: {
"&:hover,&:focus,&:active": {
zIndex: 2
}
},
[`> ${e}-affix-wrapper-focused`]: {
zIndex: 2
}
}
}
};
};
function y(r) {
return (0, a.mergeToken)(r, {
inputAffixPadding: r.paddingXXS,
inputPaddingVertical: Math.max(Math.round((r.controlHeight - r.fontSize * r.lineHeight) / 2 * 10) / 10 - r.lineWidth, 3),
inputPaddingVerticalLG: Math.ceil((r.controlHeightLG - r.fontSizeLG * r.lineHeightLG) / 2 * 10) / 10 - r.lineWidth,
inputPaddingVerticalSM: Math.max(Math.round((r.controlHeightSM - r.fontSize * r.lineHeight) / 2 * 10) / 10 - r.lineWidth, 0),
inputPaddingHorizontal: r.paddingSM - r.lineWidth,
inputPaddingHorizontalSM: r.paddingXS - r.lineWidth,
inputPaddingHorizontalLG: r.controlPaddingHorizontal - r.lineWidth,
inputBorderHoverColor: r.colorPrimaryHover,
inputBorderActiveColor: r.colorPrimaryHover
});
}
const P = (r) => {
const {
componentCls: e,
inputPaddingHorizontal: t,
paddingLG: o
} = r, l = `${e}-textarea`;
return {
[l]: {
position: "relative",
[`${l}-suffix`]: {
position: "absolute",
top: 0,
insetInlineEnd: t,
bottom: 0,
zIndex: 1,
display: "inline-flex",
alignItems: "center",
margin: "auto"
},
"&-status-error,\n &-status-warning,\n &-status-success,\n &-status-validating": {
[`&${l}-has-feedback`]: {
[`${e}`]: {
paddingInlineEnd: o
}
}
},
"&-show-count": {
// https://github.com/ant-design/ant-design/issues/33049
[`> ${e}`]: {
height: "100%"
},
"&::after": {
color: r.colorTextDescription,
whiteSpace: "nowrap",
content: "attr(data-count)",
pointerEvents: "none",
float: "right"
}
},
"&-rtl": {
"&::after": {
float: "left"
}
}
}
};
};
var W = (0, a.genComponentStyleHook)("Input", (r) => {
const e = y(r);
return [
R(e),
P(e),
w(e),
z(e),
C(e),
// =====================================================
// == Space Compact ==
// =====================================================
(0, H.genCompactItemStyle)(e)
];
});
return d.default = W, d;
}
export {
q as r
};