@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
69 lines • 3.08 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js';
import { paletteMainColors } from '../services/palette-css-vars.js';
const defaultColors = {
main: cssVariableTheme.palette.error.main,
mainContrast: cssVariableTheme.palette.error.mainContrast,
};
export const Badge = Shade({
customElementName: 'shade-badge',
css: {
display: 'inline-flex',
fontFamily: cssVariableTheme.typography.fontFamily,
position: 'relative',
verticalAlign: 'middle',
flexShrink: '0',
'& .badge-indicator': {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: '0',
right: '0',
transform: 'translate(50%, -50%)',
transformOrigin: '100% 0%',
fontFamily: cssVariableTheme.typography.fontFamily,
fontSize: cssVariableTheme.typography.fontSize.xs,
fontWeight: cssVariableTheme.typography.fontWeight.medium,
lineHeight: '1',
minWidth: '20px',
height: '20px',
padding: `0 ${cssVariableTheme.spacing.xs}`,
borderRadius: cssVariableTheme.shape.borderRadius.full,
background: 'var(--badge-color-main)',
color: 'var(--badge-color-contrast)',
boxSizing: 'border-box',
whiteSpace: 'nowrap',
zIndex: '1',
transition: buildTransition(['transform', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default], ['opacity', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default]),
},
'& .badge-indicator[data-dot]': {
minWidth: '8px',
width: '8px',
height: '8px',
padding: '0',
borderRadius: cssVariableTheme.shape.borderRadius.full,
},
'& .badge-indicator[data-hidden]': {
transform: 'translate(50%, -50%) scale(0)',
opacity: '0',
},
},
render: ({ props, children, useHostProps }) => {
const { count, dot, color, max = 99, showZero, visible = true, style } = props;
const colors = color ? paletteMainColors[color] : defaultColors;
useHostProps({
style: {
'--badge-color-main': colors.main,
'--badge-color-contrast': colors.mainContrast,
...style,
},
});
const shouldHide = !visible || (!dot && !showZero && (count === undefined || count === 0));
const displayValue = dot ? '' : count !== undefined && count > max ? `${max}+` : (count?.toString() ?? '');
return (createComponent(createComponent, null,
children,
createComponent("span", { className: "badge-indicator", ...(dot ? { 'data-dot': '' } : {}), ...(shouldHide ? { 'data-hidden': '' } : {}) }, displayValue)));
},
});
//# sourceMappingURL=badge.js.map