@phpsoftbox/react-softbox 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -0
- package/dist/components/Button/Button.d.ts +45 -0
- package/dist/components/Button/Button.js +44 -1
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Card/Card.d.ts +5 -0
- package/dist/components/Card/Card.js +18 -3
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.module.css +120 -9
- package/dist/components/Input/Input.d.ts +2 -2
- package/dist/foundations/buttons.css +81 -0
- package/dist/foundations/tokens.css +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js.map +1 -1
- package/docs/card.md +33 -1
- package/docs/overlays.md +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -116,6 +116,26 @@ yarn build
|
|
|
116
116
|
<Button appearance="outline">Неделя</Button>
|
|
117
117
|
<Button appearance="outline">Месяц</Button>
|
|
118
118
|
</Button.Group>
|
|
119
|
+
|
|
120
|
+
<Button.Split
|
|
121
|
+
variant="primary"
|
|
122
|
+
main={{
|
|
123
|
+
label: 'Импорт Ozon',
|
|
124
|
+
icon: <UploadIcon />,
|
|
125
|
+
onClick: handleImport,
|
|
126
|
+
}}
|
|
127
|
+
menu={{
|
|
128
|
+
ariaLabel: 'Действия импорта Ozon',
|
|
129
|
+
items: [
|
|
130
|
+
{
|
|
131
|
+
key: 'reset-cache',
|
|
132
|
+
label: 'Сбросить кеш',
|
|
133
|
+
icon: <RefreshIcon />,
|
|
134
|
+
onSelect: handleResetCache,
|
|
135
|
+
},
|
|
136
|
+
],
|
|
137
|
+
}}
|
|
138
|
+
/>
|
|
119
139
|
```
|
|
120
140
|
|
|
121
141
|
Основной polymorphic prop для `Button` — `as`.
|
|
@@ -152,6 +172,7 @@ const InertiaButtonLink = (props) => (
|
|
|
152
172
|
```
|
|
153
173
|
|
|
154
174
|
Для `as="a"` и внешних link-компонентов `disabled` добавляет `aria-disabled`, убирает элемент из tab order и блокирует click handler.
|
|
175
|
+
`Button.Split` использует тот же `as` для `main`; если Inertia `Link` должен отрендериться как `button`, передайте adapter в `main.as`.
|
|
155
176
|
|
|
156
177
|
Custom variants задаются через `--variant-{name}-*` токены:
|
|
157
178
|
|
|
@@ -160,6 +181,38 @@ Custom variants задаются через `--variant-{name}-*` токены:
|
|
|
160
181
|
<Badge variant="brand">Brand</Badge>
|
|
161
182
|
```
|
|
162
183
|
|
|
184
|
+
### Card.Toolbar
|
|
185
|
+
|
|
186
|
+
`Card.Toolbar align="left|right|between"` задает общее выравнивание прямых групп. Если нужно разнести группы по зонам, используйте `Card.Toolbar.Section`:
|
|
187
|
+
|
|
188
|
+
```tsx
|
|
189
|
+
<Card.Toolbar>
|
|
190
|
+
<Card.Toolbar.Section align="left">
|
|
191
|
+
<Card.Toolbar.Group attached>
|
|
192
|
+
<Card.Toolbar.Button label="Все" />
|
|
193
|
+
<Card.Toolbar.Button label="Активные" />
|
|
194
|
+
</Card.Toolbar.Group>
|
|
195
|
+
</Card.Toolbar.Section>
|
|
196
|
+
|
|
197
|
+
<Card.Toolbar.Section align="center">
|
|
198
|
+
<Card.Toolbar.Group attached>
|
|
199
|
+
<Card.Toolbar.Button label="День" />
|
|
200
|
+
<Card.Toolbar.Button label="Неделя" />
|
|
201
|
+
</Card.Toolbar.Group>
|
|
202
|
+
</Card.Toolbar.Section>
|
|
203
|
+
|
|
204
|
+
<Card.Toolbar.Section align="right">
|
|
205
|
+
<Card.Toolbar.Group>
|
|
206
|
+
<Button.Split
|
|
207
|
+
variant="primary"
|
|
208
|
+
main={{ label: 'Импорт', onClick: handleImport }}
|
|
209
|
+
menu={{ ariaLabel: 'Действия импорта', items }}
|
|
210
|
+
/>
|
|
211
|
+
</Card.Toolbar.Group>
|
|
212
|
+
</Card.Toolbar.Section>
|
|
213
|
+
</Card.Toolbar>
|
|
214
|
+
```
|
|
215
|
+
|
|
163
216
|
### Input / FloatLabel
|
|
164
217
|
|
|
165
218
|
```tsx
|
|
@@ -4,6 +4,7 @@ export type ButtonVariant = UiVariant;
|
|
|
4
4
|
export type ButtonAppearance = 'solid' | 'outline' | 'ghost';
|
|
5
5
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
6
6
|
export type ButtonGroupOrientation = 'horizontal' | 'vertical';
|
|
7
|
+
export type ButtonSplitMenuAlign = 'start' | 'end';
|
|
7
8
|
type ButtonOwnProps<TElement extends React.ElementType> = {
|
|
8
9
|
as?: TElement;
|
|
9
10
|
variant?: ButtonVariant | 'ghost' | 'outline';
|
|
@@ -21,8 +22,52 @@ export type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
21
22
|
orientation?: ButtonGroupOrientation;
|
|
22
23
|
stretch?: boolean;
|
|
23
24
|
};
|
|
25
|
+
type ButtonSplitLinkComponent = React.ElementType<{
|
|
26
|
+
href?: string;
|
|
27
|
+
className?: string;
|
|
28
|
+
style?: React.CSSProperties;
|
|
29
|
+
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
30
|
+
onMouseEnter?: React.MouseEventHandler<HTMLElement>;
|
|
31
|
+
children?: React.ReactNode;
|
|
32
|
+
}>;
|
|
33
|
+
export type ButtonSplitMainProps<TElement extends React.ElementType = 'button'> = Omit<ButtonProps<TElement>, 'children' | 'variant' | 'appearance' | 'size' | 'label'> & {
|
|
34
|
+
label: React.ReactNode;
|
|
35
|
+
icon?: React.ReactNode;
|
|
36
|
+
};
|
|
37
|
+
export type ButtonSplitMenuItem = {
|
|
38
|
+
key: React.Key;
|
|
39
|
+
label: React.ReactNode;
|
|
40
|
+
icon?: React.ReactNode;
|
|
41
|
+
disabled?: boolean;
|
|
42
|
+
danger?: boolean;
|
|
43
|
+
href?: string;
|
|
44
|
+
as?: ButtonSplitLinkComponent;
|
|
45
|
+
className?: string;
|
|
46
|
+
style?: React.CSSProperties;
|
|
47
|
+
onSelect?: () => void;
|
|
48
|
+
};
|
|
49
|
+
export type ButtonSplitMenuProps = {
|
|
50
|
+
ariaLabel: string;
|
|
51
|
+
items: ButtonSplitMenuItem[];
|
|
52
|
+
align?: ButtonSplitMenuAlign;
|
|
53
|
+
disabled?: boolean;
|
|
54
|
+
className?: string;
|
|
55
|
+
};
|
|
56
|
+
export type ButtonSplitProps<TElement extends React.ElementType = 'button'> = {
|
|
57
|
+
variant?: ButtonVariant | 'ghost' | 'outline';
|
|
58
|
+
appearance?: ButtonAppearance;
|
|
59
|
+
size?: ButtonSize;
|
|
60
|
+
disabled?: boolean;
|
|
61
|
+
main: ButtonSplitMainProps<TElement>;
|
|
62
|
+
menu: ButtonSplitMenuProps;
|
|
63
|
+
className?: string;
|
|
64
|
+
style?: React.CSSProperties;
|
|
65
|
+
ariaLabel?: string;
|
|
66
|
+
};
|
|
67
|
+
type ButtonSplitComponent = <TElement extends React.ElementType = 'button'>(props: ButtonSplitProps<TElement>) => React.ReactElement | null;
|
|
24
68
|
type ButtonComponent = (<TElement extends React.ElementType = 'button'>(props: ButtonProps<TElement>) => React.ReactElement | null) & {
|
|
25
69
|
Group: React.FC<ButtonGroupProps>;
|
|
70
|
+
Split: ButtonSplitComponent;
|
|
26
71
|
};
|
|
27
72
|
declare const Button: ButtonComponent;
|
|
28
73
|
export default Button;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import Dropdown from '../Menu/Dropdown';
|
|
2
3
|
import { buildButtonVariantStyle, getBuiltinUiVariantClass, isBuiltinUiVariant, mergeStyles, } from '../../utils/uiVariant';
|
|
3
4
|
const variantClass = {
|
|
4
5
|
default: 'btn-default',
|
|
@@ -88,8 +89,50 @@ function ButtonGroup({ orientation = 'horizontal', stretch = false, className, r
|
|
|
88
89
|
.join(' ');
|
|
89
90
|
return _jsx("div", { className: classes, role: role, ...props });
|
|
90
91
|
}
|
|
92
|
+
const splitMenuAlignMap = {
|
|
93
|
+
start: 'left',
|
|
94
|
+
end: 'right',
|
|
95
|
+
};
|
|
96
|
+
function SplitChevron() {
|
|
97
|
+
return _jsx("span", { className: "btn-split-chevron", "aria-hidden": "true" });
|
|
98
|
+
}
|
|
99
|
+
function ButtonSplit({ variant = 'primary', appearance = 'solid', size = 'md', disabled = false, main, menu, className, style, ariaLabel, }) {
|
|
100
|
+
const { label, icon, disabled: mainDisabled = false, className: mainClassName, ...mainProps } = main;
|
|
101
|
+
const menuDisabled = disabled || menu.disabled || menu.items.length === 0;
|
|
102
|
+
const resolvedMainDisabled = disabled || mainDisabled;
|
|
103
|
+
const mainAs = mainProps.as;
|
|
104
|
+
const mainButtonProps = {
|
|
105
|
+
...mainProps,
|
|
106
|
+
};
|
|
107
|
+
if (mainAs === undefined || mainAs === 'button') {
|
|
108
|
+
mainButtonProps.type = mainProps.type ?? 'button';
|
|
109
|
+
}
|
|
110
|
+
const menuItems = menu.items.map((item) => ({
|
|
111
|
+
id: String(item.key),
|
|
112
|
+
label: item.label,
|
|
113
|
+
icon: item.icon,
|
|
114
|
+
href: item.href,
|
|
115
|
+
as: item.as,
|
|
116
|
+
disabled: item.disabled,
|
|
117
|
+
style: item.style,
|
|
118
|
+
className: [
|
|
119
|
+
'btn-split-menu-item',
|
|
120
|
+
item.danger ? 'btn-split-menu-item-danger' : null,
|
|
121
|
+
item.className,
|
|
122
|
+
]
|
|
123
|
+
.filter(Boolean)
|
|
124
|
+
.join(' '),
|
|
125
|
+
onClick: item.onSelect,
|
|
126
|
+
}));
|
|
127
|
+
const menuAlign = splitMenuAlignMap[menu.align ?? 'end'];
|
|
128
|
+
const classes = ['btn-split', `btn-split-${size}`, className].filter(Boolean).join(' ');
|
|
129
|
+
const MainButtonComponent = ButtonBase;
|
|
130
|
+
const ToggleButtonComponent = ButtonBase;
|
|
131
|
+
return (_jsxs(ButtonGroup, { className: classes, style: style, "aria-label": ariaLabel, children: [_jsxs(MainButtonComponent, { ...mainButtonProps, variant: variant, appearance: appearance, size: size, disabled: resolvedMainDisabled, className: ['btn-split-main', mainClassName].filter(Boolean).join(' '), children: [icon ? _jsx("span", { className: "btn-split-main-icon", children: icon }) : null, _jsx("span", { className: "btn-split-main-label", children: label })] }), _jsx(Dropdown, { className: "btn-split-dropdown", align: menuAlign, trigger: (_jsx(ToggleButtonComponent, { type: "button", variant: variant, appearance: appearance, size: size, disabled: menuDisabled, className: "btn-split-toggle", "aria-label": menu.ariaLabel, children: _jsx(SplitChevron, {}) })), children: _jsx(Dropdown.Nav, { className: menu.className, children: menuItems.map((item) => (_jsx(Dropdown.Item, { id: item.id, href: item.href, as: item.as, icon: item.icon, disabled: item.disabled, className: item.className, style: item.style, onClick: item.onClick, children: item.label }, item.id))) }) })] }));
|
|
132
|
+
}
|
|
91
133
|
const Button = Object.assign(ButtonBase, {
|
|
92
134
|
Group: ButtonGroup,
|
|
135
|
+
Split: ButtonSplit,
|
|
93
136
|
});
|
|
94
137
|
export default Button;
|
|
95
138
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,11 +17,15 @@ type CardHeaderTextProps<TElement extends React.ElementType> = CardHeaderTextOwn
|
|
|
17
17
|
type CardHeaderTitleComponent = <TElement extends React.ElementType = 'h1'>(props: CardHeaderTextProps<TElement>) => React.ReactElement | null;
|
|
18
18
|
type CardHeaderSubtitleComponent = <TElement extends React.ElementType = 'p'>(props: CardHeaderTextProps<TElement>) => React.ReactElement | null;
|
|
19
19
|
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
20
|
+
export type CardToolbarSectionAlign = 'left' | 'center' | 'right';
|
|
20
21
|
export type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
21
22
|
align?: 'left' | 'right' | 'between';
|
|
22
23
|
buttonHideLabelOn?: 'never' | 'md';
|
|
23
24
|
dividers?: boolean;
|
|
24
25
|
};
|
|
26
|
+
export type CardToolbarSectionProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
27
|
+
align?: CardToolbarSectionAlign;
|
|
28
|
+
};
|
|
25
29
|
export type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
26
30
|
attached?: boolean;
|
|
27
31
|
};
|
|
@@ -43,6 +47,7 @@ export type CardToolbarButtonProps<TElement extends React.ElementType = 'button'
|
|
|
43
47
|
});
|
|
44
48
|
type CardToolbarButtonComponent = <TElement extends React.ElementType = 'button'>(props: CardToolbarButtonProps<TElement>) => React.ReactElement | null;
|
|
45
49
|
type CardToolbarComponent = React.FC<CardToolbarProps> & {
|
|
50
|
+
Section: React.FC<CardToolbarSectionProps>;
|
|
46
51
|
Group: React.FC<CardToolbarGroupProps>;
|
|
47
52
|
Button: CardToolbarButtonComponent;
|
|
48
53
|
};
|
|
@@ -62,16 +62,25 @@ const toolbarButtonSizeClass = {
|
|
|
62
62
|
md: styles.toolbarButtonSizeMd,
|
|
63
63
|
lg: styles.toolbarButtonSizeLg,
|
|
64
64
|
};
|
|
65
|
+
const getToolbarSectionAlign = (child) => {
|
|
66
|
+
if (!React.isValidElement(child) || child.type !== CardToolbarSection) {
|
|
67
|
+
return undefined;
|
|
68
|
+
}
|
|
69
|
+
return child.props.align ?? 'left';
|
|
70
|
+
};
|
|
65
71
|
function CardToolbarBase({ align = 'left', buttonHideLabelOn = 'md', dividers = true, className, children, ...props }) {
|
|
66
72
|
const alignClass = align === 'right'
|
|
67
73
|
? styles.toolbarAlignRight
|
|
68
74
|
: align === 'between'
|
|
69
75
|
? styles.toolbarAlignBetween
|
|
70
76
|
: styles.toolbarAlignLeft;
|
|
71
|
-
const classes = [styles.toolbar, alignClass, className].filter(Boolean).join(' ');
|
|
72
77
|
const rootRef = React.useRef(null);
|
|
73
78
|
const [rows, setRows] = React.useState([]);
|
|
74
79
|
const toolbarChildren = React.Children.toArray(children);
|
|
80
|
+
const hasSections = toolbarChildren.some((child) => getToolbarSectionAlign(child) !== undefined);
|
|
81
|
+
const classes = [styles.toolbar, alignClass, hasSections ? styles.toolbarSections : null, className]
|
|
82
|
+
.filter(Boolean)
|
|
83
|
+
.join(' ');
|
|
75
84
|
useIsomorphicLayoutEffect(() => {
|
|
76
85
|
const root = rootRef.current;
|
|
77
86
|
if (!root) {
|
|
@@ -133,7 +142,8 @@ function CardToolbarBase({ align = 'left', buttonHideLabelOn = 'md', dividers =
|
|
|
133
142
|
const key = React.isValidElement(child) && child.key !== null ? child.key : `toolbar-item-${index}`;
|
|
134
143
|
const row = rowMeta?.row ?? 0;
|
|
135
144
|
const rowStart = rowMeta?.rowStart ?? index === 0;
|
|
136
|
-
|
|
145
|
+
const sectionAlign = getToolbarSectionAlign(child);
|
|
146
|
+
return (_jsx("div", { className: styles.toolbarItem, "data-card-toolbar-item": "true", "data-toolbar-row": row, "data-toolbar-row-start": rowStart ? 'true' : 'false', "data-toolbar-row-wrapped": row > 0 ? 'true' : 'false', "data-toolbar-divider": dividers && !hasSections && !rowStart ? 'true' : 'false', "data-toolbar-section-align": sectionAlign, children: child }, key));
|
|
137
147
|
}) }) }));
|
|
138
148
|
}
|
|
139
149
|
function CardToolbarButton({ icon, label, hideLabelOn, size, appearance, className, ...props }) {
|
|
@@ -159,7 +169,11 @@ function CardToolbarButton({ icon, label, hideLabelOn, size, appearance, classNa
|
|
|
159
169
|
.filter(Boolean)
|
|
160
170
|
.join(' ');
|
|
161
171
|
const ToolbarButtonComponent = Button;
|
|
162
|
-
return (_jsxs(ToolbarButtonComponent, { size: resolvedSize, appearance: resolvedAppearance, className: classes, "data-card-toolbar-button-icon-only": isIconOnly ? 'true' : undefined, ...props, children: [hasIcon ? (_jsx("span", { className: styles.toolbarButtonIcon, "data-card-toolbar-button-slot": "icon", children: icon })) : null,
|
|
172
|
+
return (_jsxs(ToolbarButtonComponent, { size: resolvedSize, appearance: resolvedAppearance, className: classes, "data-card-toolbar-button-icon-only": isIconOnly ? 'true' : undefined, ...props, children: [hasIcon ? (_jsx("span", { className: styles.toolbarButtonIcon, "data-card-toolbar-button-slot": "icon", children: icon })) : null, hasLabel ? (_jsx("span", { className: styles.toolbarButtonLabel, "data-card-toolbar-button-slot": "label", children: label })) : null] }));
|
|
173
|
+
}
|
|
174
|
+
function CardToolbarSection({ align = 'left', className, ...props }) {
|
|
175
|
+
const classes = [styles.toolbarSection, className].filter(Boolean).join(' ');
|
|
176
|
+
return _jsx("div", { className: classes, "data-card-toolbar-section": align, ...props });
|
|
163
177
|
}
|
|
164
178
|
function CardToolbarGroup({ attached = false, className, role, ...props }) {
|
|
165
179
|
const classes = [
|
|
@@ -172,6 +186,7 @@ function CardToolbarGroup({ attached = false, className, role, ...props }) {
|
|
|
172
186
|
return _jsx("div", { className: classes, role: resolvedRole, ...props });
|
|
173
187
|
}
|
|
174
188
|
const CardToolbar = Object.assign(CardToolbarBase, {
|
|
189
|
+
Section: CardToolbarSection,
|
|
175
190
|
Group: CardToolbarGroup,
|
|
176
191
|
Button: CardToolbarButton,
|
|
177
192
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -42,12 +42,33 @@
|
|
|
42
42
|
justify-content: space-between;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
+
.toolbarSections {
|
|
46
|
+
display: grid;
|
|
47
|
+
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
48
|
+
align-items: stretch;
|
|
49
|
+
}
|
|
50
|
+
|
|
45
51
|
.toolbarItem {
|
|
46
52
|
display: flex;
|
|
47
53
|
align-items: center;
|
|
48
54
|
min-width: 0;
|
|
49
55
|
}
|
|
50
56
|
|
|
57
|
+
.toolbarSections .toolbarItem[data-toolbar-section-align='left'] {
|
|
58
|
+
grid-column: 1;
|
|
59
|
+
justify-content: flex-start;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.toolbarSections .toolbarItem[data-toolbar-section-align='center'] {
|
|
63
|
+
grid-column: 2;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.toolbarSections .toolbarItem[data-toolbar-section-align='right'] {
|
|
68
|
+
grid-column: 3;
|
|
69
|
+
justify-content: flex-end;
|
|
70
|
+
}
|
|
71
|
+
|
|
51
72
|
.toolbarItem[data-toolbar-divider="true"] {
|
|
52
73
|
position: relative;
|
|
53
74
|
}
|
|
@@ -108,6 +129,30 @@
|
|
|
108
129
|
padding-inline: var(--spacing-1);
|
|
109
130
|
}
|
|
110
131
|
|
|
132
|
+
.toolbarSection {
|
|
133
|
+
display: inline-flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
gap: var(--spacing-2);
|
|
136
|
+
flex-wrap: wrap;
|
|
137
|
+
min-width: 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.toolbarItem[data-toolbar-section-align] .toolbarSection {
|
|
141
|
+
width: 100%;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.toolbarItem[data-toolbar-section-align='left'] .toolbarSection {
|
|
145
|
+
justify-content: flex-start;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.toolbarItem[data-toolbar-section-align='center'] .toolbarSection {
|
|
149
|
+
justify-content: center;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.toolbarItem[data-toolbar-section-align='right'] .toolbarSection {
|
|
153
|
+
justify-content: flex-end;
|
|
154
|
+
}
|
|
155
|
+
|
|
111
156
|
.toolbarButton {
|
|
112
157
|
--card-toolbar-button-height: var(--card-toolbar-button-height-md);
|
|
113
158
|
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-md);
|
|
@@ -179,17 +224,71 @@
|
|
|
179
224
|
min-width: 0;
|
|
180
225
|
}
|
|
181
226
|
|
|
182
|
-
.toolbarButtonSeparator {
|
|
183
|
-
width: 1px;
|
|
184
|
-
align-self: stretch;
|
|
185
|
-
background: currentColor;
|
|
186
|
-
opacity: 0.4;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
227
|
.toolbarButtonHasBoth {
|
|
190
228
|
gap: var(--spacing-2);
|
|
191
229
|
}
|
|
192
230
|
|
|
231
|
+
.toolbarGroup :global(.btn-split) {
|
|
232
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-md);
|
|
233
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-md);
|
|
234
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-md);
|
|
235
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-md);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.toolbarGroup :global(.btn-split-sm) {
|
|
239
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-sm);
|
|
240
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-sm);
|
|
241
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-sm);
|
|
242
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-sm);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.toolbarGroup :global(.btn-split-md) {
|
|
246
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-md);
|
|
247
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-md);
|
|
248
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-md);
|
|
249
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-md);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.toolbarGroup :global(.btn-split-lg) {
|
|
253
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-lg);
|
|
254
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-lg);
|
|
255
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-lg);
|
|
256
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-lg);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.toolbarGroup :global(.btn-split .btn) {
|
|
260
|
+
height: var(--card-toolbar-button-height);
|
|
261
|
+
min-height: var(--card-toolbar-button-height);
|
|
262
|
+
padding-block: 0;
|
|
263
|
+
font-size: var(--card-toolbar-button-font-size);
|
|
264
|
+
white-space: nowrap;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.toolbarGroup :global(.btn-split .btn-split-main) {
|
|
268
|
+
padding-inline: var(--card-toolbar-button-padding-x);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.toolbarGroup :global(.btn-split .btn-split-toggle) {
|
|
272
|
+
width: var(--card-toolbar-button-height);
|
|
273
|
+
min-width: var(--card-toolbar-button-height);
|
|
274
|
+
flex-basis: var(--card-toolbar-button-height);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.toolbarGroup :global(.btn-split .btn-split-main-icon) {
|
|
278
|
+
display: inline-flex;
|
|
279
|
+
align-items: center;
|
|
280
|
+
justify-content: center;
|
|
281
|
+
width: var(--card-toolbar-button-icon-size);
|
|
282
|
+
height: var(--card-toolbar-button-icon-size);
|
|
283
|
+
flex: 0 0 var(--card-toolbar-button-icon-size);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.toolbarGroup :global(.btn-split .btn-split-main-icon svg) {
|
|
287
|
+
width: var(--card-toolbar-button-icon-size);
|
|
288
|
+
height: var(--card-toolbar-button-icon-size);
|
|
289
|
+
flex-shrink: 0;
|
|
290
|
+
}
|
|
291
|
+
|
|
193
292
|
.headerMain {
|
|
194
293
|
display: flex;
|
|
195
294
|
flex-direction: column;
|
|
@@ -228,8 +327,7 @@
|
|
|
228
327
|
}
|
|
229
328
|
|
|
230
329
|
@media (max-width: 1024px) {
|
|
231
|
-
.toolbarButtonHideLabelMd .toolbarButtonLabel
|
|
232
|
-
.toolbarButtonHideLabelMd .toolbarButtonSeparator {
|
|
330
|
+
.toolbarButtonHideLabelMd .toolbarButtonLabel {
|
|
233
331
|
display: none;
|
|
234
332
|
}
|
|
235
333
|
}
|
|
@@ -238,4 +336,17 @@
|
|
|
238
336
|
.toolbar {
|
|
239
337
|
padding: var(--spacing-2);
|
|
240
338
|
}
|
|
339
|
+
|
|
340
|
+
.toolbarSections {
|
|
341
|
+
grid-template-columns: 1fr;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.toolbarSections .toolbarItem[data-toolbar-section-align] {
|
|
345
|
+
grid-column: 1;
|
|
346
|
+
justify-content: flex-start;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.toolbarItem[data-toolbar-section-align] .toolbarSection {
|
|
350
|
+
justify-content: flex-start;
|
|
351
|
+
}
|
|
241
352
|
}
|
|
@@ -16,7 +16,7 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
|
|
|
16
16
|
gap?: number | string;
|
|
17
17
|
labelWidth?: number | string;
|
|
18
18
|
align?: "center" | "end" | "start";
|
|
19
|
-
labelAlign?: "
|
|
19
|
+
labelAlign?: "left" | "right" | "center";
|
|
20
20
|
}> & {
|
|
21
21
|
Label: React.FC<import("react").LabelHTMLAttributes<HTMLLabelElement> & {
|
|
22
22
|
hint?: React.ReactNode;
|
|
@@ -73,7 +73,7 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
|
|
|
73
73
|
gap?: number | string;
|
|
74
74
|
labelWidth?: number | string;
|
|
75
75
|
align?: "center" | "end" | "start";
|
|
76
|
-
labelAlign?: "
|
|
76
|
+
labelAlign?: "left" | "right" | "center";
|
|
77
77
|
}> & {
|
|
78
78
|
Label: React.FC<import("react").LabelHTMLAttributes<HTMLLabelElement> & {
|
|
79
79
|
hint?: React.ReactNode;
|
|
@@ -192,6 +192,28 @@
|
|
|
192
192
|
border-bottom-left-radius: var(--btn-group-border-radius, var(--btn-border-radius, var(--radius-default)));
|
|
193
193
|
}
|
|
194
194
|
|
|
195
|
+
.btn-group-horizontal > .btn-group > :where(.btn):first-child:not(:last-child) {
|
|
196
|
+
border-top-right-radius: 0;
|
|
197
|
+
border-bottom-right-radius: 0;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.btn-group-horizontal > .btn-group > :where(.btn):last-child:not(:first-child) {
|
|
201
|
+
border-top-left-radius: 0;
|
|
202
|
+
border-bottom-left-radius: 0;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.btn-group-horizontal > .btn-group:not(:first-child) > :where(.btn):first-child,
|
|
206
|
+
.btn-group-horizontal > .btn-group:not(:first-child) > :first-child > :where(.btn) {
|
|
207
|
+
border-top-left-radius: 0;
|
|
208
|
+
border-bottom-left-radius: 0;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.btn-group-horizontal > .btn-group:not(:last-child) > :where(.btn):last-child,
|
|
212
|
+
.btn-group-horizontal > .btn-group:not(:last-child) > :last-child > :where(.btn) {
|
|
213
|
+
border-top-right-radius: 0;
|
|
214
|
+
border-bottom-right-radius: 0;
|
|
215
|
+
}
|
|
216
|
+
|
|
195
217
|
.btn-group-stretch > * {
|
|
196
218
|
flex: 1 1 0;
|
|
197
219
|
min-width: 0;
|
|
@@ -202,6 +224,65 @@
|
|
|
202
224
|
width: 100%;
|
|
203
225
|
}
|
|
204
226
|
|
|
227
|
+
.btn-split {
|
|
228
|
+
--btn-split-toggle-width: 2.75rem;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.btn-split .btn-split-dropdown {
|
|
232
|
+
display: inline-flex;
|
|
233
|
+
align-items: stretch;
|
|
234
|
+
align-self: stretch;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.btn-split .btn-split-dropdown > :where(.btn) {
|
|
238
|
+
height: 100%;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.btn-split-main-icon,
|
|
242
|
+
.btn-split-main-label {
|
|
243
|
+
display: inline-flex;
|
|
244
|
+
align-items: center;
|
|
245
|
+
min-width: 0;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.btn-split-toggle {
|
|
249
|
+
width: var(--btn-split-toggle-width);
|
|
250
|
+
min-width: var(--btn-split-toggle-width);
|
|
251
|
+
padding-inline: 0;
|
|
252
|
+
gap: 0;
|
|
253
|
+
flex: 0 0 var(--btn-split-toggle-width);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.btn-split-toggle.btn-sm {
|
|
257
|
+
--btn-split-toggle-width: 2rem;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.btn-split-toggle.btn-md {
|
|
261
|
+
--btn-split-toggle-width: 2.75rem;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.btn-split-toggle.btn-lg {
|
|
265
|
+
--btn-split-toggle-width: 3rem;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.btn-split-chevron {
|
|
269
|
+
display: inline-block;
|
|
270
|
+
width: 0.45em;
|
|
271
|
+
height: 0.45em;
|
|
272
|
+
border-right: 2px solid currentColor;
|
|
273
|
+
border-bottom: 2px solid currentColor;
|
|
274
|
+
transform: translateY(-0.1em) rotate(45deg);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.btn-split-menu-item-danger {
|
|
278
|
+
color: var(--variant-danger-accent) !important;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.btn-split-menu-item-danger:hover {
|
|
282
|
+
background: var(--variant-danger-soft) !important;
|
|
283
|
+
border-color: var(--variant-danger-border) !important;
|
|
284
|
+
}
|
|
285
|
+
|
|
205
286
|
.btn-default {
|
|
206
287
|
--btn-accent: var(--variant-default-accent);
|
|
207
288
|
--btn-accent-soft: var(--variant-default-soft);
|
|
@@ -243,7 +243,7 @@
|
|
|
243
243
|
--select-border-radius: var(--input-border-radius);
|
|
244
244
|
--textarea-border-radius: var(--input-border-radius);
|
|
245
245
|
--modal-border-radius: var(--radius-default);
|
|
246
|
-
--drawer-border-radius:
|
|
246
|
+
--drawer-border-radius: 0;
|
|
247
247
|
--tooltip-border-radius: var(--radius-default);
|
|
248
248
|
--toast-border-radius: var(--radius-default);
|
|
249
249
|
--progress-border-radius: var(--radius-pill);
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export { default as Button } from './components/Button/Button';
|
|
2
|
-
export type { ButtonAppearance, ButtonGroupOrientation, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, } from './components/Button/Button';
|
|
2
|
+
export type { ButtonAppearance, ButtonGroupOrientation, ButtonGroupProps, ButtonProps, ButtonSize, ButtonSplitMainProps, ButtonSplitMenuAlign, ButtonSplitMenuItem, ButtonSplitMenuProps, ButtonSplitProps, ButtonVariant, } from './components/Button/Button';
|
|
3
3
|
export { default as Badge } from './components/Badge/Badge';
|
|
4
4
|
export { default as Card } from './components/Card/Card';
|
|
5
|
-
export type { CardToolbarButtonProps, CardToolbarGroupProps, CardToolbarProps, } from './components/Card/Card';
|
|
5
|
+
export type { CardToolbarButtonProps, CardToolbarGroupProps, CardToolbarProps, CardToolbarSectionAlign, CardToolbarSectionProps, } from './components/Card/Card';
|
|
6
6
|
export { default as CollapseButton } from './components/CollapseButton/CollapseButton';
|
|
7
7
|
export { default as Collapse } from './components/Collapse/Collapse';
|
|
8
8
|
export { default as FormField } from './components/Input/FormField/FormField';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAc/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAQzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAElE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAE3E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AA+B/D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
|
package/docs/card.md
CHANGED
|
@@ -52,10 +52,42 @@
|
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
`Card.Toolbar.Button` принимает `icon` и/или `label` (минимум одно из них обязательно).
|
|
55
|
-
Если переданы оба,
|
|
55
|
+
Если переданы оба, контент рендерится через отдельные icon/label слоты. На средних экранах текстовая часть скрывается.
|
|
56
56
|
`Card.Toolbar.Group attached` склеивает соседние кнопки в одну группу; без `attached` группы остаются разделёнными gap и toolbar-разделителями.
|
|
57
57
|
`Card.Toolbar` по умолчанию рисует вертикальные разделители между группами; если они не нужны, передайте `dividers={false}`.
|
|
58
58
|
|
|
59
|
+
`Card.Toolbar align="left" | "right" | "between"` задает общее выравнивание прямых групп. Если нужно разнести несколько зон независимо, используйте `Card.Toolbar.Section`:
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<Card.Toolbar>
|
|
63
|
+
<Card.Toolbar.Section align="left">
|
|
64
|
+
<Card.Toolbar.Group attached>
|
|
65
|
+
<Card.Toolbar.Button label="Все" />
|
|
66
|
+
<Card.Toolbar.Button label="Активные" />
|
|
67
|
+
</Card.Toolbar.Group>
|
|
68
|
+
</Card.Toolbar.Section>
|
|
69
|
+
|
|
70
|
+
<Card.Toolbar.Section align="center">
|
|
71
|
+
<Card.Toolbar.Group attached>
|
|
72
|
+
<Card.Toolbar.Button label="День" />
|
|
73
|
+
<Card.Toolbar.Button label="Неделя" />
|
|
74
|
+
</Card.Toolbar.Group>
|
|
75
|
+
</Card.Toolbar.Section>
|
|
76
|
+
|
|
77
|
+
<Card.Toolbar.Section align="right">
|
|
78
|
+
<Card.Toolbar.Group>
|
|
79
|
+
<Button.Split
|
|
80
|
+
variant="primary"
|
|
81
|
+
main={{ label: 'Импорт', onClick: handleImport }}
|
|
82
|
+
menu={{ ariaLabel: 'Действия импорта', items }}
|
|
83
|
+
/>
|
|
84
|
+
</Card.Toolbar.Group>
|
|
85
|
+
</Card.Toolbar.Section>
|
|
86
|
+
</Card.Toolbar>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
`Button.Split` можно размещать внутри `Card.Toolbar.Group`; toolbar выставит ему ту же высоту, размер и attached-геометрию, что и обычным toolbar-кнопкам.
|
|
90
|
+
|
|
59
91
|
Если передан `icon` без `label`, кнопка становится стабильным square-контролом. Для таких кнопок указывайте `aria-label`.
|
|
60
92
|
|
|
61
93
|
Размер toolbar-кнопки по умолчанию — `md`. Его можно переопределить через `size="sm" | "md" | "lg"`;
|
package/docs/overlays.md
CHANGED