@aplus-frontend/ui
Version:
260 lines (259 loc) • 6.96 kB
JavaScript
import { genComponentStyleHook as s } from "../../utils/cssinjs/index.mjs";
const i = () => ({
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
}), l = (r) => ({
position: "absolute",
zIndex: 1,
display: "none",
background: r.colorPrimary,
opacity: 0.2,
transition: "none",
pointerEvents: "none"
}), n = (r) => {
const { componentCls: e, namespace: o } = r, t = `--${o}-splitter-bar-preview-offset`, a = `${e}-bar`;
return {
[e]: {
boxSizing: "border-box",
margin: 0,
padding: 0,
color: r.textColor1,
fontSize: r.fontSize,
lineHeight: r.lineHeight,
listStyle: "none",
fontFamily: "inherit",
display: "flex",
width: "100%",
height: "100%",
alignItems: "stretch",
[`${e}-bar`]: {
flex: "none",
position: "relative",
userSelect: "none",
[`${e}-bar-dragger`]: {
zIndex: 1,
...i(r),
// Hover background
"&::before": {
content: '""',
background: "rgba(0, 0, 0, 0.04)",
...i(r)
},
// Spinner
"&::after": {
content: '""',
background: "rgba(0, 0, 0, 0.15)",
...i(r)
},
// Hover
[`&:hover:not(${e}-bar-dragger-active)`]: {
"&::before": {
background: "#e6f4ff"
}
},
// Active
"&-active": {
zIndex: 2,
"&::before": {
background: "#bae0ff"
}
},
[`&-active${a}-dragger-customize`]: {
[`${a}-dragger-icon`]: {
color: r.colorPrimary
}
},
[`&-disabled${e}-bar-dragger`]: {
zIndex: 0,
"&, &:hover, &-active": {
cursor: "default",
"&::before": {
background: "rgba(0,0,0,0.04)"
}
},
"&::after": {
display: "none"
}
},
"&-customize": {
[`${a}-dragger-icon`]: {
...i(r),
display: "flex",
alignItems: "center",
color: r.antdv.colorFill
},
"&::after": {
display: "none"
}
}
},
[`${e}-bar-collapse-bar`]: {
...i(r),
zIndex: 1e3,
background: "rgba(0,0,0,0.04)",
fontSize: r.fontSizeSM,
borderRadius: r.calc(r.borderRadius).div(2).equal(),
color: r.textColor1,
cursor: "pointer",
opacity: 0,
display: "flex",
justifyContent: "center",
alignItems: "center",
// Hover
[`&:hover:not(${a}-collapse-bar-customize)`]: {
background: r.antdv.controlItemBgActive
},
// Active
[`&:active:not(${a}-collapse-bar-customize)`]: {
background: r.antdv.controlItemBgActiveHover
},
[`${a}-collapse-icon`]: {
display: "flex",
alignItems: "center"
}
},
[`${a}-collapse-bar-customize`]: {
background: "transparent"
},
"&:hover, &:active": {
[`${e}-bar-collapse-bar-hover-only`]: {
opacity: 1
}
},
[`${e}-bar-collapse-bar-hover-only`]: {
"@media(hover:none)": {
opacity: 1
}
},
[`${e}-bar-collapse-bar-always-hidden`]: {
display: "none"
},
[`${e}-bar-collapse-bar-always-visible`]: {
opacity: 1
}
},
[`${e}-mask`]: {
position: "fixed",
zIndex: 1e3,
inset: 0,
"&-horizontal": {
cursor: "col-resize"
},
"&-vertical": {
cursor: "row-resize"
}
},
"&-horizontal": {
flexDirection: "row",
[`& > ${e}-bar`]: {
width: 0,
[`${e}-bar-preview`]: {
height: "100%",
width: r.splitterBarSize,
...l(r),
"&-active": {
display: "block",
transform: `translateX(var(${t}))`
}
},
[`${e}-bar-dragger`]: {
cursor: "col-resize",
height: "100%",
width: r.splitterTriggerSize,
"&::before": {
height: "100%",
width: r.splitterBarSize
},
"&::after": {
height: r.splitterSplitBarDraggableSize,
width: r.splitterBarSize
}
},
[`${e}-bar-collapse-bar`]: {
width: r.fontSizeSM,
height: "24px",
"&-start": {
left: "auto",
right: r.calc(r.splitterTriggerSize).div(2).equal(),
transform: "translateY(-50%)"
},
"&-end": {
left: r.calc(r.splitterTriggerSize).div(2).equal(),
right: "auto",
transform: "translateY(-50%)"
}
}
}
},
"&-vertical": {
flexDirection: "column",
[`& > ${e}-bar`]: {
height: 0,
[`${e}-bar-preview`]: {
height: r.splitterBarSize,
width: "100%",
...l(r),
[`&${e}-bar-preview-active`]: {
display: "block",
transform: `translateY(var(${t}))`
}
},
[`${e}-bar-dragger`]: {
cursor: "row-resize",
width: "100%",
height: r.splitterTriggerSize,
"&::before": {
width: "100%",
height: r.splitterBarSize
},
"&::after": {
width: r.splitterSplitBarDraggableSize,
height: r.splitterBarSize
}
},
[`${e}-bar-collapse-bar`]: {
height: r.fontSizeSM,
width: "24px",
"&-start": {
top: "auto",
bottom: r.calc(r.splitterTriggerSize).div(2).equal(),
transform: "translateX(-50%)"
},
"&-end": {
top: r.calc(r.splitterTriggerSize).div(2).equal(),
bottom: "auto",
transform: "translateX(-50%)"
}
}
}
},
[`${e}-panel`]: {
overflow: "auto",
padding: "0 1px",
scrollbarWidth: "thin",
boxSizing: "border-box",
"&-hidden": {
padding: 0,
overflow: "hidden"
},
[`&:has(${e}:only-child)`]: {
overflow: "hidden"
}
}
}
};
}, d = s(
"Splitter",
(r) => [n(r)],
{
splitterBarSize: 2,
splitterTriggerSize: 6,
splitterSplitBarDraggableSize: 20
}
);
export {
d as default,
n as genSplitterStyle
};