@aplus-frontend/ui
Version:
190 lines (189 loc) • 5.28 kB
JavaScript
import { multiRows as l, resetScrollbar as i } from "../../style/index.mjs";
import { genComponentStyleHook as o } from "../../utils/cssinjs/index.mjs";
const r = (t) => ({
[`.${t.namespace}-ap-table-setting-trigger-button`]: {
color: t.textColor2,
"&:hover": {
color: "unset"
}
}
}), p = (t) => {
const { componentCls: a, namespace: n } = t, e = `--${n}-ap-table-scroll-bar-width`;
return {
[a]: {
...i(t),
"&-wrapper": {
padding: t.space,
backgroundColor: "#fff",
"&:has(.ant-pagination)": {
paddingBlockEnd: 0
}
},
"&-adaptive": {
height: "100%",
display: "flex",
flexDirection: "column",
".ant-table-wrapper": {
flex: 1
},
".ant-spin-nested-loading,.ant-spin-container": {
height: "100%"
},
".ant-spin-container": {
display: "flex",
flexDirection: "column"
},
".ant-table": {
flex: 1
},
".ant-table-container,.ant-table-content": {
height: "100%"
},
".ant-table-content > table": {
height: "100%"
}
},
[`${a}__search-wrapper`]: {
padding: t.space,
paddingBlockEnd: 0,
backgroundColor: "#fff",
marginBlockEnd: "10px",
borderRadius: t.borderRadius
},
[`${a}__table-wrapper`]: {
flex: 1,
maxHeight: "100%",
display: "flex",
flexDirection: "column"
},
[`${a}__table-wrapper-card`]: {
padding: t.space,
borderRadius: t.borderRadius,
backgroundColor: "#fff",
overflow: "hidden",
"&:has(.ant-pagination)": {
paddingBlockEnd: 0
}
},
[`${a}-table`]: {
"ul.ant-table-pagination.ant-pagination": {
marginBlock: t.space,
alignItems: "center",
".ant-pagination-total-text": {
flex: 1,
height: "unset",
lineHeight: t.lineHeight,
display: "flex",
alignItems: "center"
}
},
"tr > th.ant-table-cell": {
"&::before": {
backgroundColor: "#D8DDE5 !important"
},
backgroundColor: t.apTableHeaderBg
}
},
".ant-table.ant-table-middle .ant-table-row .ant-table-cell:not(.ant-table-selection-column)": {
padding: "9px 12px"
},
".ant-table.ant-table-middle .ant-table-thead .ant-table-cell:not(.ant-table-selection-column)": {
padding: "9px 12px"
},
".ant-table.ant-table-small .ant-table-row .ant-table-cell:not(.ant-table-selection-column)": {
padding: "6px 9px"
},
".ant-table.ant-table-small .ant-table-thead .ant-table-cell:not(.ant-table-selection-column)": {
padding: "6px 9px"
},
".ant-table-placeholder .ant-table-expanded-row-fixed": {
// 这里不需要滚动的时候显示单边框，因为默认情况下会显示双边框
"&::after": {
borderInlineEndWidth: "0px !important"
}
},
// 重设当包含排序按钮时表头的样式
".ant-table-column-sorters": {
justifyContent: "unset",
display: "inline-flex",
".ant-table-column-title": {
flex: "unset"
}
},
// 重设当包含筛选按钮时表头的样式
".ant-table-filter-column": {
justifyContent: "unset",
display: "inline-flex",
".ant-table-column-title": {
flex: "unset"
},
".ant-table-filter-trigger": {
marginInlineStart: "2px",
paddingInlineStart: "2px"
}
},
".ant-table-cell .ant-typography": {
marginBlockEnd: 0
},
"&-pagination-count-text": {
color: t.textColor1
},
"&-pagination--total-right": {
paddingLeft: "12px"
},
"&-pagination-total-wrapper": {
color: t.textColor2
},
// ApTable的header区域
[`${a}-header`]: {
paddingBlockEnd: t.space,
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexWrap: "nowrap",
"&__title": {
flex: 1,
flexShrink: 1,
minWidth: 0
}
},
// ApTable中Table的Header区域
[`${a}-table-header__title`]: {
...l(t),
textAlign: "right"
},
// 表格设置触发按钮样式
...r(t),
// 粘贴布局并且滚动条占据空间
"&--sticky-relative": {
".ant-table-container": {
"& > div:last-child": {
marginBottom: `calc(var(${e}) * -1)`,
clipPath: `inset(0 0 var(${e}) 0)`
}
}
},
// 粘贴布局滚动条不占据空间
"&--sticky-absolute": {
".ant-table-container": {
"& > div:last-child": {
paddingBottom: "15px",
marginBottom: "-15px",
clipPath: "inset(0 0 15px 0)"
}
}
}
}
};
}, b = o(
"ApTable",
(t) => [p(t)],
{
apTableHeaderBg: "#F2F6F9"
}
);
export {
b as default,
p as genApTableStyle,
r as genSettingTriggerBtnStyle
};