178 lines
3.4 KiB
JavaScript
178 lines
3.4 KiB
JavaScript
// src/components/table.ts
|
|
import { tableAnatomy as parts } from "@chakra-ui/anatomy";
|
|
import {
|
|
createMultiStyleConfigHelpers,
|
|
defineStyle
|
|
} from "@chakra-ui/styled-system";
|
|
import { mode } from "@chakra-ui/theme-tools";
|
|
var { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(parts.keys);
|
|
var baseStyle = definePartsStyle({
|
|
table: {
|
|
fontVariantNumeric: "lining-nums tabular-nums",
|
|
borderCollapse: "collapse",
|
|
width: "full"
|
|
},
|
|
th: {
|
|
fontFamily: "heading",
|
|
fontWeight: "bold",
|
|
textTransform: "uppercase",
|
|
letterSpacing: "wider",
|
|
textAlign: "start"
|
|
},
|
|
td: {
|
|
textAlign: "start"
|
|
},
|
|
caption: {
|
|
mt: 4,
|
|
fontFamily: "heading",
|
|
textAlign: "center",
|
|
fontWeight: "medium"
|
|
}
|
|
});
|
|
var numericStyles = defineStyle({
|
|
"&[data-is-numeric=true]": {
|
|
textAlign: "end"
|
|
}
|
|
});
|
|
var variantSimple = definePartsStyle((props) => {
|
|
const { colorScheme: c } = props;
|
|
return {
|
|
th: {
|
|
color: mode("gray.600", "gray.400")(props),
|
|
borderBottom: "1px",
|
|
borderColor: mode(`${c}.100`, `${c}.700`)(props),
|
|
...numericStyles
|
|
},
|
|
td: {
|
|
borderBottom: "1px",
|
|
borderColor: mode(`${c}.100`, `${c}.700`)(props),
|
|
...numericStyles
|
|
},
|
|
caption: {
|
|
color: mode("gray.600", "gray.100")(props)
|
|
},
|
|
tfoot: {
|
|
tr: {
|
|
"&:last-of-type": {
|
|
th: { borderBottomWidth: 0 }
|
|
}
|
|
}
|
|
}
|
|
};
|
|
});
|
|
var variantStripe = definePartsStyle((props) => {
|
|
const { colorScheme: c } = props;
|
|
return {
|
|
th: {
|
|
color: mode("gray.600", "gray.400")(props),
|
|
borderBottom: "1px",
|
|
borderColor: mode(`${c}.100`, `${c}.700`)(props),
|
|
...numericStyles
|
|
},
|
|
td: {
|
|
borderBottom: "1px",
|
|
borderColor: mode(`${c}.100`, `${c}.700`)(props),
|
|
...numericStyles
|
|
},
|
|
caption: {
|
|
color: mode("gray.600", "gray.100")(props)
|
|
},
|
|
tbody: {
|
|
tr: {
|
|
"&:nth-of-type(odd)": {
|
|
"th, td": {
|
|
borderBottomWidth: "1px",
|
|
borderColor: mode(`${c}.100`, `${c}.700`)(props)
|
|
},
|
|
td: {
|
|
background: mode(`${c}.100`, `${c}.700`)(props)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
tfoot: {
|
|
tr: {
|
|
"&:last-of-type": {
|
|
th: { borderBottomWidth: 0 }
|
|
}
|
|
}
|
|
}
|
|
};
|
|
});
|
|
var variants = {
|
|
simple: variantSimple,
|
|
striped: variantStripe,
|
|
unstyled: defineStyle({})
|
|
};
|
|
var sizes = {
|
|
sm: definePartsStyle({
|
|
th: {
|
|
px: "4",
|
|
py: "1",
|
|
lineHeight: "4",
|
|
fontSize: "xs"
|
|
},
|
|
td: {
|
|
px: "4",
|
|
py: "2",
|
|
fontSize: "sm",
|
|
lineHeight: "4"
|
|
},
|
|
caption: {
|
|
px: "4",
|
|
py: "2",
|
|
fontSize: "xs"
|
|
}
|
|
}),
|
|
md: definePartsStyle({
|
|
th: {
|
|
px: "6",
|
|
py: "3",
|
|
lineHeight: "4",
|
|
fontSize: "xs"
|
|
},
|
|
td: {
|
|
px: "6",
|
|
py: "4",
|
|
lineHeight: "5"
|
|
},
|
|
caption: {
|
|
px: "6",
|
|
py: "2",
|
|
fontSize: "sm"
|
|
}
|
|
}),
|
|
lg: definePartsStyle({
|
|
th: {
|
|
px: "8",
|
|
py: "4",
|
|
lineHeight: "5",
|
|
fontSize: "sm"
|
|
},
|
|
td: {
|
|
px: "8",
|
|
py: "5",
|
|
lineHeight: "6"
|
|
},
|
|
caption: {
|
|
px: "6",
|
|
py: "2",
|
|
fontSize: "md"
|
|
}
|
|
})
|
|
};
|
|
var tableTheme = defineMultiStyleConfig({
|
|
baseStyle,
|
|
variants,
|
|
sizes,
|
|
defaultProps: {
|
|
variant: "simple",
|
|
size: "md",
|
|
colorScheme: "gray"
|
|
}
|
|
});
|
|
|
|
export {
|
|
tableTheme
|
|
};
|
|
//# sourceMappingURL=chunk-QWN3S45W.mjs.map
|