@phpsoftbox/react-softbox 1.2.1 → 1.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.
|
@@ -6,8 +6,16 @@ type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
6
6
|
right?: React.ReactNode;
|
|
7
7
|
};
|
|
8
8
|
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
9
|
+
type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
10
|
+
align?: 'left' | 'right' | 'between';
|
|
11
|
+
};
|
|
12
|
+
type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement>;
|
|
13
|
+
type CardToolbarComponent = React.FC<CardToolbarProps> & {
|
|
14
|
+
Group: React.FC<CardToolbarGroupProps>;
|
|
15
|
+
};
|
|
9
16
|
type CardComponent = React.FC<CardProps> & {
|
|
10
17
|
Header: React.FC<CardHeaderProps>;
|
|
18
|
+
Toolbar: CardToolbarComponent;
|
|
11
19
|
Body: React.FC<CardSectionProps>;
|
|
12
20
|
Footer: React.FC<CardSectionProps>;
|
|
13
21
|
};
|
|
@@ -17,8 +17,25 @@ function CardFooter({ className, ...props }) {
|
|
|
17
17
|
const classes = [styles.footer, className].filter(Boolean).join(' ');
|
|
18
18
|
return _jsx("div", { className: classes, ...props });
|
|
19
19
|
}
|
|
20
|
+
function CardToolbarBase({ align = 'left', className, ...props }) {
|
|
21
|
+
const alignClass = align === 'right'
|
|
22
|
+
? styles.toolbarAlignRight
|
|
23
|
+
: align === 'between'
|
|
24
|
+
? styles.toolbarAlignBetween
|
|
25
|
+
: styles.toolbarAlignLeft;
|
|
26
|
+
const classes = [styles.toolbar, alignClass, className].filter(Boolean).join(' ');
|
|
27
|
+
return _jsx("div", { className: classes, ...props });
|
|
28
|
+
}
|
|
29
|
+
function CardToolbarGroup({ className, ...props }) {
|
|
30
|
+
const classes = [styles.toolbarGroup, className].filter(Boolean).join(' ');
|
|
31
|
+
return _jsx("div", { className: classes, ...props });
|
|
32
|
+
}
|
|
33
|
+
const CardToolbar = Object.assign(CardToolbarBase, {
|
|
34
|
+
Group: CardToolbarGroup,
|
|
35
|
+
});
|
|
20
36
|
const Card = Object.assign(CardBase, {
|
|
21
37
|
Header: CardHeader,
|
|
38
|
+
Toolbar: CardToolbar,
|
|
22
39
|
Body: CardBody,
|
|
23
40
|
Footer: CardFooter,
|
|
24
41
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,6 +17,52 @@
|
|
|
17
17
|
flex-wrap: wrap;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
.toolbar {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: var(--spacing-2);
|
|
24
|
+
padding: var(--spacing-2) var(--spacing-3);
|
|
25
|
+
border-radius: var(--radius-md);
|
|
26
|
+
border: 1px solid var(--color-line);
|
|
27
|
+
background: var(--surface-panel-soft);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.toolbarAlignLeft {
|
|
31
|
+
justify-content: flex-start;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.toolbarAlignRight {
|
|
35
|
+
justify-content: flex-end;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.toolbarAlignBetween {
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.toolbarGroup {
|
|
43
|
+
display: inline-flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
gap: var(--spacing-2);
|
|
46
|
+
min-height: 30px;
|
|
47
|
+
position: relative;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.toolbarGroup + .toolbarGroup {
|
|
51
|
+
margin-left: var(--spacing-1);
|
|
52
|
+
padding-left: var(--spacing-3);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.toolbarGroup + .toolbarGroup::before {
|
|
56
|
+
content: '';
|
|
57
|
+
position: absolute;
|
|
58
|
+
left: 0;
|
|
59
|
+
top: 2px;
|
|
60
|
+
bottom: 2px;
|
|
61
|
+
width: 1px;
|
|
62
|
+
background: var(--color-line);
|
|
63
|
+
opacity: 0.55;
|
|
64
|
+
}
|
|
65
|
+
|
|
20
66
|
.headerMain {
|
|
21
67
|
display: flex;
|
|
22
68
|
flex-direction: column;
|
|
@@ -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;
|
|
@@ -63,7 +63,7 @@ declare const Input: import("react").FC<import("react").HTMLAttributes<HTMLDivEl
|
|
|
63
63
|
gap?: number | string;
|
|
64
64
|
labelWidth?: number | string;
|
|
65
65
|
align?: "center" | "end" | "start";
|
|
66
|
-
labelAlign?: "
|
|
66
|
+
labelAlign?: "left" | "right" | "center";
|
|
67
67
|
}> & {
|
|
68
68
|
Label: React.FC<import("react").LabelHTMLAttributes<HTMLLabelElement> & {
|
|
69
69
|
hint?: React.ReactNode;
|