@phpsoftbox/react-softbox 2.1.0 → 2.2.1
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 +39 -0
- package/dist/components/Button/Button.d.ts +17 -10
- package/dist/components/Button/Button.js +31 -2
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Card/Card.d.ts +13 -8
- package/dist/components/Card/Card.js +13 -2
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.module.css +55 -2
- package/dist/foundations/tokens.css +12 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js.map +1 -1
- package/docs/card.md +73 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -106,6 +106,10 @@ yarn build
|
|
|
106
106
|
<Button variant="info" appearance="outline">Info</Button>
|
|
107
107
|
<Button variant="danger" appearance="ghost">Danger</Button>
|
|
108
108
|
<Button variant="primary" size="sm">Small</Button>
|
|
109
|
+
<Button as="a" href="/settings">Link button</Button>
|
|
110
|
+
<Button as="a" href="/reports.csv" download>
|
|
111
|
+
Download
|
|
112
|
+
</Button>
|
|
109
113
|
|
|
110
114
|
<Button.Group aria-label="Режим просмотра">
|
|
111
115
|
<Button appearance="outline">День</Button>
|
|
@@ -114,6 +118,41 @@ yarn build
|
|
|
114
118
|
</Button.Group>
|
|
115
119
|
```
|
|
116
120
|
|
|
121
|
+
Основной polymorphic prop для `Button` — `as`.
|
|
122
|
+
Для Inertia/Router-ссылок передайте link-компонент через `as`:
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
import { Link } from '@inertiajs/react';
|
|
126
|
+
|
|
127
|
+
<Button as={Link} href="/orders">
|
|
128
|
+
Заказы
|
|
129
|
+
</Button>
|
|
130
|
+
|
|
131
|
+
<Button as={Link} href="/orders" method="post" preserveScroll>
|
|
132
|
+
Создать
|
|
133
|
+
</Button>
|
|
134
|
+
|
|
135
|
+
<Button as={Link} href="/orders" disabled>
|
|
136
|
+
Недоступно
|
|
137
|
+
</Button>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Если нужно передать Inertia `Link` собственный `as="button"`, используйте тонкий adapter:
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
import { Link } from '@inertiajs/react';
|
|
144
|
+
|
|
145
|
+
const InertiaButtonLink = (props) => (
|
|
146
|
+
<Link as="button" {...props} />
|
|
147
|
+
);
|
|
148
|
+
|
|
149
|
+
<Button as={InertiaButtonLink} href="/logout" method="post">
|
|
150
|
+
Выйти
|
|
151
|
+
</Button>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
Для `as="a"` и внешних link-компонентов `disabled` добавляет `aria-disabled`, убирает элемент из tab order и блокирует click handler.
|
|
155
|
+
|
|
117
156
|
Custom variants задаются через `--variant-{name}-*` токены:
|
|
118
157
|
|
|
119
158
|
```tsx
|
|
@@ -1,21 +1,28 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { UiVariant } from '../../types';
|
|
3
|
-
type ButtonVariant = UiVariant;
|
|
4
|
-
type ButtonAppearance = 'solid' | 'outline' | 'ghost';
|
|
5
|
-
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
6
|
-
type ButtonGroupOrientation = 'horizontal' | 'vertical';
|
|
7
|
-
type
|
|
3
|
+
export type ButtonVariant = UiVariant;
|
|
4
|
+
export type ButtonAppearance = 'solid' | 'outline' | 'ghost';
|
|
5
|
+
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
6
|
+
export type ButtonGroupOrientation = 'horizontal' | 'vertical';
|
|
7
|
+
type ButtonOwnProps<TElement extends React.ElementType> = {
|
|
8
|
+
as?: TElement;
|
|
8
9
|
variant?: ButtonVariant | 'ghost' | 'outline';
|
|
9
10
|
appearance?: ButtonAppearance;
|
|
10
11
|
size?: ButtonSize;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
className?: string;
|
|
14
|
+
style?: React.CSSProperties;
|
|
15
|
+
tabIndex?: number;
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
onClick?: React.MouseEventHandler;
|
|
11
18
|
};
|
|
12
|
-
type
|
|
19
|
+
export type ButtonProps<TElement extends React.ElementType = 'button'> = ButtonOwnProps<TElement> & Omit<React.ComponentPropsWithoutRef<TElement>, keyof ButtonOwnProps<TElement>>;
|
|
20
|
+
export type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
13
21
|
orientation?: ButtonGroupOrientation;
|
|
14
22
|
stretch?: boolean;
|
|
15
23
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
declare const Button: typeof ButtonBase & {
|
|
19
|
-
Group: typeof ButtonGroup;
|
|
24
|
+
type ButtonComponent = (<TElement extends React.ElementType = 'button'>(props: ButtonProps<TElement>) => React.ReactElement | null) & {
|
|
25
|
+
Group: React.FC<ButtonGroupProps>;
|
|
20
26
|
};
|
|
27
|
+
declare const Button: ButtonComponent;
|
|
21
28
|
export default Button;
|
|
@@ -34,19 +34,48 @@ const normalizeVariant = (variant, appearance) => {
|
|
|
34
34
|
appearance: appearance ?? 'solid',
|
|
35
35
|
};
|
|
36
36
|
};
|
|
37
|
-
function ButtonBase({ variant, appearance, size = 'md', className, ...props }) {
|
|
37
|
+
function ButtonBase({ as, variant, appearance, size = 'md', className, disabled = false, onClick, tabIndex, style, ...props }) {
|
|
38
38
|
const resolved = normalizeVariant(variant, appearance);
|
|
39
39
|
const variantStyle = isBuiltinUiVariant(resolved.variant) ? undefined : buildButtonVariantStyle(resolved.variant);
|
|
40
|
+
const Component = (as ?? 'button');
|
|
41
|
+
const isNativeButton = as === undefined || as === 'button';
|
|
40
42
|
const classes = [
|
|
41
43
|
'btn',
|
|
42
44
|
getBuiltinUiVariantClass(variantClass, resolved.variant),
|
|
43
45
|
appearanceClass[resolved.appearance],
|
|
44
46
|
sizeClass[size],
|
|
47
|
+
disabled ? 'btn-disabled' : null,
|
|
45
48
|
className,
|
|
46
49
|
]
|
|
47
50
|
.filter(Boolean)
|
|
48
51
|
.join(' ');
|
|
49
|
-
|
|
52
|
+
const handleClick = (event) => {
|
|
53
|
+
if (disabled && !isNativeButton) {
|
|
54
|
+
event.preventDefault();
|
|
55
|
+
event.stopPropagation();
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
onClick?.(event);
|
|
59
|
+
};
|
|
60
|
+
const componentProps = {
|
|
61
|
+
...props,
|
|
62
|
+
className: classes,
|
|
63
|
+
style: mergeStyles(variantStyle, style),
|
|
64
|
+
};
|
|
65
|
+
if (onClick || (disabled && !isNativeButton)) {
|
|
66
|
+
componentProps.onClick = handleClick;
|
|
67
|
+
}
|
|
68
|
+
if (isNativeButton) {
|
|
69
|
+
componentProps.disabled = disabled;
|
|
70
|
+
}
|
|
71
|
+
else if (disabled) {
|
|
72
|
+
componentProps['aria-disabled'] = true;
|
|
73
|
+
componentProps.tabIndex = -1;
|
|
74
|
+
}
|
|
75
|
+
else if (tabIndex !== undefined) {
|
|
76
|
+
componentProps.tabIndex = tabIndex;
|
|
77
|
+
}
|
|
78
|
+
return _jsx(Component, { ...componentProps });
|
|
50
79
|
}
|
|
51
80
|
function ButtonGroup({ orientation = 'horizontal', stretch = false, className, role = 'group', ...props }) {
|
|
52
81
|
const classes = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,GACZ,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import
|
|
2
|
+
import type { ButtonProps } from '../Button/Button';
|
|
3
3
|
type CardProps = React.HTMLAttributes<HTMLDivElement>;
|
|
4
4
|
type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
5
5
|
title?: React.ReactNode;
|
|
@@ -17,28 +17,33 @@ 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
|
-
type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
export type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
21
21
|
align?: 'left' | 'right' | 'between';
|
|
22
22
|
buttonHideLabelOn?: 'never' | 'md';
|
|
23
23
|
};
|
|
24
|
-
type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
24
|
+
export type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
25
25
|
attached?: boolean;
|
|
26
26
|
};
|
|
27
|
-
type CardToolbarButtonBaseProps = Omit<
|
|
27
|
+
type CardToolbarButtonBaseProps<TElement extends React.ElementType = 'button'> = Omit<ButtonProps<TElement>, 'children'> & {
|
|
28
28
|
icon?: React.ReactNode;
|
|
29
29
|
label?: React.ReactNode;
|
|
30
30
|
hideLabelOn?: 'never' | 'md';
|
|
31
31
|
};
|
|
32
|
-
type CardToolbarButtonProps = (CardToolbarButtonBaseProps & {
|
|
32
|
+
export type CardToolbarButtonProps<TElement extends React.ElementType = 'button'> = (CardToolbarButtonBaseProps<TElement> & {
|
|
33
33
|
icon: React.ReactNode;
|
|
34
|
-
label?:
|
|
35
|
-
|
|
34
|
+
label?: undefined;
|
|
35
|
+
'aria-label': string;
|
|
36
|
+
}) | (CardToolbarButtonBaseProps<TElement> & {
|
|
37
|
+
icon: React.ReactNode;
|
|
38
|
+
label: React.ReactNode;
|
|
39
|
+
}) | (CardToolbarButtonBaseProps<TElement> & {
|
|
36
40
|
icon?: React.ReactNode;
|
|
37
41
|
label: React.ReactNode;
|
|
38
42
|
});
|
|
43
|
+
type CardToolbarButtonComponent = <TElement extends React.ElementType = 'button'>(props: CardToolbarButtonProps<TElement>) => React.ReactElement | null;
|
|
39
44
|
type CardToolbarComponent = React.FC<CardToolbarProps> & {
|
|
40
45
|
Group: React.FC<CardToolbarGroupProps>;
|
|
41
|
-
Button:
|
|
46
|
+
Button: CardToolbarButtonComponent;
|
|
42
47
|
};
|
|
43
48
|
type CardHeaderComponent = React.FC<CardHeaderProps> & {
|
|
44
49
|
Title: CardHeaderTitleComponent;
|
|
@@ -57,6 +57,11 @@ const isSameRows = (left, right) => {
|
|
|
57
57
|
}
|
|
58
58
|
return true;
|
|
59
59
|
};
|
|
60
|
+
const toolbarButtonSizeClass = {
|
|
61
|
+
sm: styles.toolbarButtonSizeSm,
|
|
62
|
+
md: styles.toolbarButtonSizeMd,
|
|
63
|
+
lg: styles.toolbarButtonSizeLg,
|
|
64
|
+
};
|
|
60
65
|
function CardToolbarBase({ align = 'left', buttonHideLabelOn = 'md', className, children, ...props }) {
|
|
61
66
|
const alignClass = align === 'right'
|
|
62
67
|
? styles.toolbarAlignRight
|
|
@@ -131,24 +136,30 @@ function CardToolbarBase({ align = 'left', buttonHideLabelOn = 'md', className,
|
|
|
131
136
|
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', children: child }, key));
|
|
132
137
|
}) }) }));
|
|
133
138
|
}
|
|
134
|
-
function CardToolbarButton({ icon, label, hideLabelOn, className, ...props }) {
|
|
139
|
+
function CardToolbarButton({ icon, label, hideLabelOn, size, appearance, className, ...props }) {
|
|
135
140
|
const toolbarConfig = React.useContext(CardToolbarContext);
|
|
136
141
|
const resolvedHideLabelOn = hideLabelOn ?? toolbarConfig.hideLabelOn;
|
|
142
|
+
const resolvedSize = (size ?? 'md');
|
|
143
|
+
const resolvedAppearance = (appearance ?? 'outline');
|
|
137
144
|
const hasIcon = icon !== undefined && icon !== null;
|
|
138
145
|
const hasLabel = label !== undefined && label !== null;
|
|
139
146
|
if (!hasIcon && !hasLabel) {
|
|
140
147
|
return null;
|
|
141
148
|
}
|
|
142
149
|
const hasBoth = hasIcon && hasLabel;
|
|
150
|
+
const isIconOnly = hasIcon && !hasLabel;
|
|
143
151
|
const classes = [
|
|
144
152
|
styles.toolbarButton,
|
|
153
|
+
toolbarButtonSizeClass[resolvedSize],
|
|
154
|
+
isIconOnly ? styles.toolbarButtonIconOnly : null,
|
|
145
155
|
hasBoth ? styles.toolbarButtonHasBoth : null,
|
|
146
156
|
hasBoth && resolvedHideLabelOn === 'md' ? styles.toolbarButtonHideLabelMd : null,
|
|
147
157
|
className,
|
|
148
158
|
]
|
|
149
159
|
.filter(Boolean)
|
|
150
160
|
.join(' ');
|
|
151
|
-
|
|
161
|
+
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, hasBoth ? (_jsx("span", { className: styles.toolbarButtonSeparator, "data-card-toolbar-button-slot": "separator", "aria-hidden": "true" })) : null, hasLabel ? (_jsx("span", { className: styles.toolbarButtonLabel, "data-card-toolbar-button-slot": "label", children: label })) : null] }));
|
|
152
163
|
}
|
|
153
164
|
function CardToolbarGroup({ attached = false, className, role, ...props }) {
|
|
154
165
|
const classes = [
|
|
@@ -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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"}
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
flex-wrap: wrap;
|
|
99
99
|
gap: var(--spacing-2);
|
|
100
100
|
padding-inline: var(--spacing-1);
|
|
101
|
-
min-height:
|
|
101
|
+
min-height: var(--card-toolbar-button-height-md);
|
|
102
102
|
min-width: 0;
|
|
103
103
|
}
|
|
104
104
|
|
|
@@ -109,15 +109,68 @@
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.toolbarButton {
|
|
112
|
-
|
|
112
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-md);
|
|
113
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-md);
|
|
114
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-md);
|
|
115
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-md);
|
|
116
|
+
min-height: var(--card-toolbar-button-height);
|
|
113
117
|
min-width: 0;
|
|
114
118
|
max-width: 100%;
|
|
115
119
|
}
|
|
116
120
|
|
|
121
|
+
:global(.btn).toolbarButton {
|
|
122
|
+
height: var(--card-toolbar-button-height);
|
|
123
|
+
min-height: var(--card-toolbar-button-height);
|
|
124
|
+
padding-block: 0;
|
|
125
|
+
padding-inline: var(--card-toolbar-button-padding-x);
|
|
126
|
+
font-size: var(--card-toolbar-button-font-size);
|
|
127
|
+
white-space: nowrap;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.toolbarButtonSizeSm {
|
|
131
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-sm);
|
|
132
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-sm);
|
|
133
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-sm);
|
|
134
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-sm);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.toolbarButtonSizeMd {
|
|
138
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-md);
|
|
139
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-md);
|
|
140
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-md);
|
|
141
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-md);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.toolbarButtonSizeLg {
|
|
145
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-lg);
|
|
146
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-lg);
|
|
147
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-lg);
|
|
148
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-lg);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
:global(.btn).toolbarButtonIconOnly {
|
|
152
|
+
width: var(--card-toolbar-button-height);
|
|
153
|
+
min-width: var(--card-toolbar-button-height);
|
|
154
|
+
max-width: var(--card-toolbar-button-height);
|
|
155
|
+
padding: 0;
|
|
156
|
+
flex: 0 0 var(--card-toolbar-button-height);
|
|
157
|
+
aspect-ratio: 1 / 1;
|
|
158
|
+
}
|
|
159
|
+
|
|
117
160
|
.toolbarButtonIcon {
|
|
118
161
|
display: inline-flex;
|
|
119
162
|
align-items: center;
|
|
120
163
|
justify-content: center;
|
|
164
|
+
width: var(--card-toolbar-button-icon-size);
|
|
165
|
+
height: var(--card-toolbar-button-icon-size);
|
|
166
|
+
line-height: 1;
|
|
167
|
+
flex: 0 0 var(--card-toolbar-button-icon-size);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.toolbarButtonIcon :where(svg) {
|
|
171
|
+
width: var(--card-toolbar-button-icon-size);
|
|
172
|
+
height: var(--card-toolbar-button-icon-size);
|
|
173
|
+
flex-shrink: 0;
|
|
121
174
|
}
|
|
122
175
|
|
|
123
176
|
.toolbarButtonLabel {
|
|
@@ -225,6 +225,18 @@
|
|
|
225
225
|
--badge-circle-border-radius: var(--radius-circle);
|
|
226
226
|
--card-border-radius: var(--radius-default);
|
|
227
227
|
--card-toolbar-border-radius: var(--radius-default);
|
|
228
|
+
--card-toolbar-button-height-sm: 2rem;
|
|
229
|
+
--card-toolbar-button-height-md: 2.125rem;
|
|
230
|
+
--card-toolbar-button-height-lg: 2.5rem;
|
|
231
|
+
--card-toolbar-button-padding-x-sm: 0.625rem;
|
|
232
|
+
--card-toolbar-button-padding-x-md: 0.75rem;
|
|
233
|
+
--card-toolbar-button-padding-x-lg: 0.875rem;
|
|
234
|
+
--card-toolbar-button-icon-size-sm: 0.875rem;
|
|
235
|
+
--card-toolbar-button-icon-size-md: 1rem;
|
|
236
|
+
--card-toolbar-button-icon-size-lg: 1.125rem;
|
|
237
|
+
--card-toolbar-button-font-size-sm: var(--font-size-2);
|
|
238
|
+
--card-toolbar-button-font-size-md: var(--font-size-3);
|
|
239
|
+
--card-toolbar-button-font-size-lg: var(--font-size-4);
|
|
228
240
|
--alert-border-radius: var(--radius-default);
|
|
229
241
|
--table-border-radius: var(--radius-default);
|
|
230
242
|
--input-border-radius: var(--radius-default);
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +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
3
|
export { default as Badge } from './components/Badge/Badge';
|
|
3
4
|
export { default as Card } from './components/Card/Card';
|
|
5
|
+
export type { CardToolbarButtonProps, CardToolbarGroupProps, CardToolbarProps, } from './components/Card/Card';
|
|
4
6
|
export { default as CollapseButton } from './components/CollapseButton/CollapseButton';
|
|
5
7
|
export { default as Collapse } from './components/Collapse/Collapse';
|
|
6
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;AAS/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAMzD,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
|
@@ -34,9 +34,19 @@
|
|
|
34
34
|
|
|
35
35
|
```tsx
|
|
36
36
|
<Card.Toolbar>
|
|
37
|
+
<Card.Toolbar.Group attached>
|
|
38
|
+
<Card.Toolbar.Button label="Обзор" />
|
|
39
|
+
<Card.Toolbar.Button label="Метрики" />
|
|
40
|
+
<Card.Toolbar.Button label="Логи" />
|
|
41
|
+
</Card.Toolbar.Group>
|
|
42
|
+
|
|
37
43
|
<Card.Toolbar.Group attached>
|
|
38
44
|
<Card.Toolbar.Button icon={<SaveIcon />} label="Сохранить" />
|
|
39
|
-
<Card.Toolbar.Button icon={<RefreshIcon />} />
|
|
45
|
+
<Card.Toolbar.Button icon={<RefreshIcon />} label="Обновить" />
|
|
46
|
+
</Card.Toolbar.Group>
|
|
47
|
+
|
|
48
|
+
<Card.Toolbar.Group>
|
|
49
|
+
<Card.Toolbar.Button aria-label="Настройки" icon={<SettingsIcon />} />
|
|
40
50
|
</Card.Toolbar.Group>
|
|
41
51
|
</Card.Toolbar>
|
|
42
52
|
```
|
|
@@ -45,6 +55,68 @@
|
|
|
45
55
|
Если переданы оба, внутри кнопки появится вертикальный разделитель. На средних экранах текстовая часть скрывается.
|
|
46
56
|
`Card.Toolbar.Group attached` склеивает соседние кнопки в одну группу; без `attached` группы остаются разделёнными gap и toolbar-разделителями.
|
|
47
57
|
|
|
58
|
+
Если передан `icon` без `label`, кнопка становится стабильным square-контролом. Для таких кнопок указывайте `aria-label`.
|
|
59
|
+
|
|
60
|
+
Размер toolbar-кнопки по умолчанию — `md`. Его можно переопределить через `size="sm" | "md" | "lg"`;
|
|
61
|
+
высота, горизонтальный padding и размер icon-only слота берутся из `--card-toolbar-button-*` токенов.
|
|
62
|
+
|
|
63
|
+
Основной polymorphic prop для `Card.Toolbar.Button` — `as`.
|
|
64
|
+
Для ссылок используйте `as`. Это работает и с native `<a>`, и с внешними link-компонентами:
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { Link } from '@inertiajs/react';
|
|
68
|
+
|
|
69
|
+
<Card.Toolbar.Button
|
|
70
|
+
as="a"
|
|
71
|
+
href="/reports.csv"
|
|
72
|
+
download
|
|
73
|
+
icon={<DownloadIcon />}
|
|
74
|
+
label="Скачать"
|
|
75
|
+
/>
|
|
76
|
+
|
|
77
|
+
<Card.Toolbar.Button
|
|
78
|
+
as={Link}
|
|
79
|
+
href="/reports"
|
|
80
|
+
icon={<ReportIcon />}
|
|
81
|
+
label="Отчеты"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<Card.Toolbar.Button
|
|
85
|
+
as={Link}
|
|
86
|
+
href="/reports/export"
|
|
87
|
+
method="post"
|
|
88
|
+
preserveScroll
|
|
89
|
+
icon={<ExportIcon />}
|
|
90
|
+
label="Экспорт"
|
|
91
|
+
/>
|
|
92
|
+
|
|
93
|
+
<Card.Toolbar.Button
|
|
94
|
+
as={Link}
|
|
95
|
+
href="/reports/export"
|
|
96
|
+
disabled
|
|
97
|
+
icon={<ExportIcon />}
|
|
98
|
+
label="Экспорт"
|
|
99
|
+
/>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Если нужно передать Inertia `Link` собственный `as="button"`, используйте adapter:
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
const InertiaToolbarButtonLink = (props) => (
|
|
106
|
+
<Link as="button" {...props} />
|
|
107
|
+
);
|
|
108
|
+
|
|
109
|
+
<Card.Toolbar.Button
|
|
110
|
+
as={InertiaToolbarButtonLink}
|
|
111
|
+
href="/reports/export"
|
|
112
|
+
method="post"
|
|
113
|
+
icon={<ExportIcon />}
|
|
114
|
+
label="Экспорт"
|
|
115
|
+
/>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
Для link-рендера `disabled` добавляет `aria-disabled`, убирает ссылку из tab order и блокирует click handler.
|
|
119
|
+
|
|
48
120
|
Скрытие текста включено по умолчанию (`md`) и настраивается:
|
|
49
121
|
- на уровне `Card.Toolbar`: `buttonHideLabelOn="md" | "never"`
|
|
50
122
|
- на уровне конкретной кнопки: `hideLabelOn="md" | "never"` (переопределяет тулбар)
|