@coderlt/form-designer
Version:
基于vue3的设计器,可视化开发页面表单
270 lines (269 loc) • 8.48 kB
JavaScript
import { i as $ } from "./interopRequireDefault-40f894e3.js";
import { r as f } from "./public_api-1267ff2a.js";
import { j as h, r as m, a as y } from "./useConfigInject-d85d8c62.js";
var i = {}, s;
function C() {
if (s)
return i;
s = 1;
var c = $;
Object.defineProperty(i, "__esModule", {
value: !0
}), i.genCheckboxStyle = i.default = void 0, i.getStyle = d;
var a = c(f()), b = h(), n = m(), t = y();
const p = new b.Keyframes("antCheckboxEffect", {
"0%": {
transform: "scale(1)",
opacity: 0.5
},
"100%": {
transform: "scale(1.6)",
opacity: 0
}
}), l = (r) => {
const {
checkboxCls: e
} = r, o = `${e}-wrapper`;
return [
// ===================== Basic =====================
{
// Group
[`${e}-group`]: (0, a.default)((0, a.default)({}, (0, t.resetComponent)(r)), {
display: "inline-flex",
flexWrap: "wrap",
columnGap: r.marginXS,
// Group > Grid
[`> ${r.antCls}-row`]: {
flex: 1
}
}),
// Wrapper
[o]: (0, a.default)((0, a.default)({}, (0, t.resetComponent)(r)), {
display: "inline-flex",
alignItems: "baseline",
cursor: "pointer",
// Fix checkbox & radio in flex align #30260
"&:after": {
display: "inline-block",
width: 0,
overflow: "hidden",
content: "'\\a0'"
},
// Checkbox near checkbox
[`& + ${o}`]: {
marginInlineStart: 0
},
[`&${o}-in-form-item`]: {
'input[type="checkbox"]': {
width: 14,
height: 14
// FIXME: magic
}
}
}),
// Wrapper > Checkbox
[e]: (0, a.default)((0, a.default)({}, (0, t.resetComponent)(r)), {
position: "relative",
whiteSpace: "nowrap",
lineHeight: 1,
cursor: "pointer",
// To make alignment right when `controlHeight` is changed
// Ref: https://github.com/ant-design/ant-design/issues/41564
alignSelf: "center",
// Wrapper > Checkbox > input
[`${e}-input`]: {
position: "absolute",
// Since baseline align will get additional space offset,
// we need to move input to top to make it align with text.
// Ref: https://github.com/ant-design/ant-design/issues/38926#issuecomment-1486137799
inset: 0,
zIndex: 1,
cursor: "pointer",
opacity: 0,
margin: 0,
[`&:focus-visible + ${e}-inner`]: (0, a.default)({}, (0, t.genFocusOutline)(r))
},
// Wrapper > Checkbox > inner
[`${e}-inner`]: {
boxSizing: "border-box",
position: "relative",
top: 0,
insetInlineStart: 0,
display: "block",
width: r.checkboxSize,
height: r.checkboxSize,
direction: "ltr",
backgroundColor: r.colorBgContainer,
border: `${r.lineWidth}px ${r.lineType} ${r.colorBorder}`,
borderRadius: r.borderRadiusSM,
borderCollapse: "separate",
transition: `all ${r.motionDurationSlow}`,
"&:after": {
boxSizing: "border-box",
position: "absolute",
top: "50%",
insetInlineStart: "21.5%",
display: "table",
width: r.checkboxSize / 14 * 5,
height: r.checkboxSize / 14 * 8,
border: `${r.lineWidthBold}px solid ${r.colorWhite}`,
borderTop: 0,
borderInlineStart: 0,
transform: "rotate(45deg) scale(0) translate(-50%,-50%)",
opacity: 0,
content: '""',
transition: `all ${r.motionDurationFast} ${r.motionEaseInBack}, opacity ${r.motionDurationFast}`
}
},
// Wrapper > Checkbox + Text
"& + span": {
paddingInlineStart: r.paddingXS,
paddingInlineEnd: r.paddingXS
}
})
},
// ================= Indeterminate =================
{
[e]: {
"&-indeterminate": {
// Wrapper > Checkbox > inner
[`${e}-inner`]: {
"&:after": {
top: "50%",
insetInlineStart: "50%",
width: r.fontSizeLG / 2,
height: r.fontSizeLG / 2,
backgroundColor: r.colorPrimary,
border: 0,
transform: "translate(-50%, -50%) scale(1)",
opacity: 1,
content: '""'
}
}
}
}
},
// ===================== Hover =====================
{
// Wrapper
[`${o}:hover ${e}:after`]: {
visibility: "visible"
},
// Wrapper & Wrapper > Checkbox
[`
${o}:not(${o}-disabled),
${e}:not(${e}-disabled)
`]: {
[`&:hover ${e}-inner`]: {
borderColor: r.colorPrimary
}
},
[`${o}:not(${o}-disabled)`]: {
[`&:hover ${e}-checked:not(${e}-disabled) ${e}-inner`]: {
backgroundColor: r.colorPrimaryHover,
borderColor: "transparent"
},
[`&:hover ${e}-checked:not(${e}-disabled):after`]: {
borderColor: r.colorPrimaryHover
}
}
},
// ==================== Checked ====================
{
// Wrapper > Checkbox
[`${e}-checked`]: {
[`${e}-inner`]: {
backgroundColor: r.colorPrimary,
borderColor: r.colorPrimary,
"&:after": {
opacity: 1,
transform: "rotate(45deg) scale(1) translate(-50%,-50%)",
transition: `all ${r.motionDurationMid} ${r.motionEaseOutBack} ${r.motionDurationFast}`
}
},
// Checked Effect
"&:after": {
position: "absolute",
top: 0,
insetInlineStart: 0,
width: "100%",
height: "100%",
borderRadius: r.borderRadiusSM,
visibility: "hidden",
border: `${r.lineWidthBold}px solid ${r.colorPrimary}`,
animationName: p,
animationDuration: r.motionDurationSlow,
animationTimingFunction: "ease-in-out",
animationFillMode: "backwards",
content: '""',
transition: `all ${r.motionDurationSlow}`
}
},
[`
${o}-checked:not(${o}-disabled),
${e}-checked:not(${e}-disabled)
`]: {
[`&:hover ${e}-inner`]: {
backgroundColor: r.colorPrimaryHover,
borderColor: "transparent"
},
[`&:hover ${e}:after`]: {
borderColor: r.colorPrimaryHover
}
}
},
// ==================== Disable ====================
{
// Wrapper
[`${o}-disabled`]: {
cursor: "not-allowed"
},
// Wrapper > Checkbox
[`${e}-disabled`]: {
// Wrapper > Checkbox > input
[`&, ${e}-input`]: {
cursor: "not-allowed",
// Disabled for native input to enable Tooltip event handler
// ref: https://github.com/ant-design/ant-design/issues/39822#issuecomment-1365075901
pointerEvents: "none"
},
// Wrapper > Checkbox > inner
[`${e}-inner`]: {
background: r.colorBgContainerDisabled,
borderColor: r.colorBorder,
"&:after": {
borderColor: r.colorTextDisabled
}
},
"&:after": {
display: "none"
},
"& + span": {
color: r.colorTextDisabled
},
[`&${e}-indeterminate ${e}-inner::after`]: {
background: r.colorTextDisabled
}
}
}
];
};
i.genCheckboxStyle = l;
function d(r, e) {
const o = (0, n.mergeToken)(e, {
checkboxCls: `.${r}`,
checkboxSize: e.controlInteractiveSize
});
return [l(o)];
}
var u = (0, n.genComponentStyleHook)("Checkbox", (r, e) => {
let {
prefixCls: o
} = e;
return [d(o, r)];
});
return i.default = u, i;
}
export {
C as r
};