@aplus-frontend/ui
Version:
93 lines (92 loc) • 2.54 kB
JavaScript
import { resetComponent as o } from "../../style/index.mjs";
import { genComponentStyleHook as i } from "../../utils/cssinjs/index.mjs";
import { genPopoverStyle as t } from "./search-form.mjs";
const l = (r) => {
const { componentCls: e } = r, a = r.calc("100%").div(r.searchFormSorterCountPerRow).equal();
return {
[e]: {
[`${e}-content`]: {
width: r.searchFormSorterWidth
},
[`${e}-header`]: {
padding: `${r.spaceXL} ${r.spaceXL} 0px`,
"&-title": {
...o(r),
color: r.textColor1,
fontWeight: 700,
display: "inline-block",
paddingBottom: r.spaceXS
},
"&-desc": {
...o(r),
color: r.textColor3
},
"&-action-wrapper": {
padding: r.space,
margin: r.calc(-1).mul(r.space).equal(),
cursor: "pointer"
},
"&-reset-btn": {
...o(r),
color: r.colorLink
}
},
[`${e}-sorter-wrapper`]: {
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
marginInlineStart: r.calc(r.searchFormSorterItemGap).div(-2).equal(),
marginInlineEnd: r.calc(r.searchFormSorterItemGap).div(-2).equal(),
rowGap: r.searchFormSorterItemGap
},
[`${e}-sorter-item`]: {
flex: `0 0 ${a}`,
maxWidth: a,
paddingInline: r.calc(r.searchFormSorterItemGap).div(2).equal(),
"> div": {
border: `1px solid ${r.borderColorBase}`,
borderRadius: r.borderRadius,
padding: r.space,
display: "flex",
alignItems: "center",
backgroundColor: "#fff",
"&:hover": {
borderColor: r.colorPrimary,
cursor: "pointer",
[`${r.componentCls}-sorter-sorter-item-holder`]: {
color: `${r.colorPrimary} !important`
}
}
},
"&--hidden": {
display: "none"
}
},
[`${e}-sorter-item-text`]: {
...o(r),
paddingInlineStart: r.spaceXS,
color: r.textColor1,
maxWidth: "100%",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
}
},
...t(r)
};
}, d = i(
"ApForm.SearchFormSorter",
(r) => [l(r)],
{
searchFormSorterWidth: 560,
searchFormSorterItemGap: 8,
searchFormSorterCountPerRow: 3
},
{
skipUnit: ["searchFormSorterCountPerRow"]
}
);
export {
d as default,
l as genSearchFormSorter
};