rbro-tat-uds 2.0.1 → 2.1.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/build/cjs/components/Bar/Bar.cjs +23 -18
- package/build/cjs/index.cjs +23 -18
- package/build/esm/components/Bar/Bar.js +23 -18
- package/build/esm/index.js +23 -18
- package/build/types/components/Bar/Bar.d.ts +6 -3
- package/package.json +1 -1
|
@@ -16,37 +16,42 @@ const StyledBar = styled.div`
|
|
|
16
16
|
width: 100%;
|
|
17
17
|
position: relative;
|
|
18
18
|
overflow: hidden;
|
|
19
|
+
display: flex;
|
|
19
20
|
height: ${(props) => props.$height && _constraint_height.includes(props.$height) ? props.$height + "px" : "24px"};
|
|
20
|
-
background-color: ${(props) => props.$
|
|
21
|
+
background-color: ${(props) => props.$backgroundColor && Object.keys(utils.colors).includes(props.$backgroundColor) ? utils.colors[props.$backgroundColor] : utils.colors.gray_60};
|
|
21
22
|
border-radius: ${(props) => props.$radius && _constraint_radius.includes(props.$radius) ? props.$radius + "px" : "4px"};
|
|
22
|
-
|
|
23
|
-
&:after {
|
|
24
|
-
content: "";
|
|
25
|
-
width: ${(props) => typeof props.$value === "number" ? props.$value * 100 + "%" : "50%"};
|
|
26
|
-
height: 100%;
|
|
27
|
-
position: absolute;
|
|
28
|
-
top: 0;
|
|
29
|
-
left: 0;
|
|
30
|
-
background-color: ${(props) => props.$leftColor && Object.keys(utils.colors).includes(props.$leftColor) ? utils.colors[props.$leftColor] : utils.colors.gray_950};
|
|
31
|
-
}
|
|
32
23
|
`;
|
|
33
24
|
const Bar = ({
|
|
34
|
-
value = 0,
|
|
35
|
-
leftColor = "gray_950",
|
|
36
|
-
rightColor = "gray_60",
|
|
37
25
|
height = 24,
|
|
38
26
|
radius = 4,
|
|
27
|
+
backgroundColor = "gray_60",
|
|
28
|
+
max = 100,
|
|
29
|
+
items = [],
|
|
39
30
|
...rest
|
|
40
31
|
}) => {
|
|
41
32
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
33
|
StyledBar,
|
|
43
34
|
{
|
|
44
|
-
$
|
|
45
|
-
$leftColor: leftColor,
|
|
46
|
-
$rightColor: rightColor,
|
|
35
|
+
$backgroundColor: backgroundColor,
|
|
47
36
|
$height: height,
|
|
48
37
|
$radius: radius,
|
|
49
|
-
...rest
|
|
38
|
+
...rest,
|
|
39
|
+
children: items.length > 0 && items.map((item, index) => {
|
|
40
|
+
const thisColor = utils.colors[item.color] || utils.colors.gray_950;
|
|
41
|
+
const percentage = item.value / max * 100;
|
|
42
|
+
const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
|
|
43
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
44
|
+
"div",
|
|
45
|
+
{
|
|
46
|
+
style: {
|
|
47
|
+
width: `${clampedPercentage}%`,
|
|
48
|
+
height: "100%",
|
|
49
|
+
backgroundColor: thisColor
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
index
|
|
53
|
+
);
|
|
54
|
+
})
|
|
50
55
|
}
|
|
51
56
|
);
|
|
52
57
|
};
|
package/build/cjs/index.cjs
CHANGED
|
@@ -2769,37 +2769,42 @@ const StyledBar = styled__default.default.div`
|
|
|
2769
2769
|
width: 100%;
|
|
2770
2770
|
position: relative;
|
|
2771
2771
|
overflow: hidden;
|
|
2772
|
+
display: flex;
|
|
2772
2773
|
height: ${(props) => props.$height && _constraint_height$1.includes(props.$height) ? props.$height + "px" : "24px"};
|
|
2773
|
-
background-color: ${(props) => props.$
|
|
2774
|
+
background-color: ${(props) => props.$backgroundColor && Object.keys(utils.colors).includes(props.$backgroundColor) ? utils.colors[props.$backgroundColor] : utils.colors.gray_60};
|
|
2774
2775
|
border-radius: ${(props) => props.$radius && _constraint_radius.includes(props.$radius) ? props.$radius + "px" : "4px"};
|
|
2775
|
-
|
|
2776
|
-
&:after {
|
|
2777
|
-
content: "";
|
|
2778
|
-
width: ${(props) => typeof props.$value === "number" ? props.$value * 100 + "%" : "50%"};
|
|
2779
|
-
height: 100%;
|
|
2780
|
-
position: absolute;
|
|
2781
|
-
top: 0;
|
|
2782
|
-
left: 0;
|
|
2783
|
-
background-color: ${(props) => props.$leftColor && Object.keys(utils.colors).includes(props.$leftColor) ? utils.colors[props.$leftColor] : utils.colors.gray_950};
|
|
2784
|
-
}
|
|
2785
2776
|
`;
|
|
2786
2777
|
const Bar = ({
|
|
2787
|
-
value = 0,
|
|
2788
|
-
leftColor = "gray_950",
|
|
2789
|
-
rightColor = "gray_60",
|
|
2790
2778
|
height = 24,
|
|
2791
2779
|
radius = 4,
|
|
2780
|
+
backgroundColor = "gray_60",
|
|
2781
|
+
max = 100,
|
|
2782
|
+
items = [],
|
|
2792
2783
|
...rest
|
|
2793
2784
|
}) => {
|
|
2794
2785
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2795
2786
|
StyledBar,
|
|
2796
2787
|
{
|
|
2797
|
-
$
|
|
2798
|
-
$leftColor: leftColor,
|
|
2799
|
-
$rightColor: rightColor,
|
|
2788
|
+
$backgroundColor: backgroundColor,
|
|
2800
2789
|
$height: height,
|
|
2801
2790
|
$radius: radius,
|
|
2802
|
-
...rest
|
|
2791
|
+
...rest,
|
|
2792
|
+
children: items.length > 0 && items.map((item, index) => {
|
|
2793
|
+
const thisColor = utils.colors[item.color] || utils.colors.gray_950;
|
|
2794
|
+
const percentage = item.value / max * 100;
|
|
2795
|
+
const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
|
|
2796
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2797
|
+
"div",
|
|
2798
|
+
{
|
|
2799
|
+
style: {
|
|
2800
|
+
width: `${clampedPercentage}%`,
|
|
2801
|
+
height: "100%",
|
|
2802
|
+
backgroundColor: thisColor
|
|
2803
|
+
}
|
|
2804
|
+
},
|
|
2805
|
+
index
|
|
2806
|
+
);
|
|
2807
|
+
})
|
|
2803
2808
|
}
|
|
2804
2809
|
);
|
|
2805
2810
|
};
|
|
@@ -12,37 +12,42 @@ const StyledBar = styled.div`
|
|
|
12
12
|
width: 100%;
|
|
13
13
|
position: relative;
|
|
14
14
|
overflow: hidden;
|
|
15
|
+
display: flex;
|
|
15
16
|
height: ${(props) => props.$height && _constraint_height.includes(props.$height) ? props.$height + "px" : "24px"};
|
|
16
|
-
background-color: ${(props) => props.$
|
|
17
|
+
background-color: ${(props) => props.$backgroundColor && Object.keys(colors).includes(props.$backgroundColor) ? colors[props.$backgroundColor] : colors.gray_60};
|
|
17
18
|
border-radius: ${(props) => props.$radius && _constraint_radius.includes(props.$radius) ? props.$radius + "px" : "4px"};
|
|
18
|
-
|
|
19
|
-
&:after {
|
|
20
|
-
content: "";
|
|
21
|
-
width: ${(props) => typeof props.$value === "number" ? props.$value * 100 + "%" : "50%"};
|
|
22
|
-
height: 100%;
|
|
23
|
-
position: absolute;
|
|
24
|
-
top: 0;
|
|
25
|
-
left: 0;
|
|
26
|
-
background-color: ${(props) => props.$leftColor && Object.keys(colors).includes(props.$leftColor) ? colors[props.$leftColor] : colors.gray_950};
|
|
27
|
-
}
|
|
28
19
|
`;
|
|
29
20
|
const Bar = ({
|
|
30
|
-
value = 0,
|
|
31
|
-
leftColor = "gray_950",
|
|
32
|
-
rightColor = "gray_60",
|
|
33
21
|
height = 24,
|
|
34
22
|
radius = 4,
|
|
23
|
+
backgroundColor = "gray_60",
|
|
24
|
+
max = 100,
|
|
25
|
+
items = [],
|
|
35
26
|
...rest
|
|
36
27
|
}) => {
|
|
37
28
|
return /* @__PURE__ */ jsx(
|
|
38
29
|
StyledBar,
|
|
39
30
|
{
|
|
40
|
-
$
|
|
41
|
-
$leftColor: leftColor,
|
|
42
|
-
$rightColor: rightColor,
|
|
31
|
+
$backgroundColor: backgroundColor,
|
|
43
32
|
$height: height,
|
|
44
33
|
$radius: radius,
|
|
45
|
-
...rest
|
|
34
|
+
...rest,
|
|
35
|
+
children: items.length > 0 && items.map((item, index) => {
|
|
36
|
+
const thisColor = colors[item.color] || colors.gray_950;
|
|
37
|
+
const percentage = item.value / max * 100;
|
|
38
|
+
const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
|
|
39
|
+
return /* @__PURE__ */ jsx(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
style: {
|
|
43
|
+
width: `${clampedPercentage}%`,
|
|
44
|
+
height: "100%",
|
|
45
|
+
backgroundColor: thisColor
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
index
|
|
49
|
+
);
|
|
50
|
+
})
|
|
46
51
|
}
|
|
47
52
|
);
|
|
48
53
|
};
|
package/build/esm/index.js
CHANGED
|
@@ -2746,37 +2746,42 @@ const StyledBar = styled.div`
|
|
|
2746
2746
|
width: 100%;
|
|
2747
2747
|
position: relative;
|
|
2748
2748
|
overflow: hidden;
|
|
2749
|
+
display: flex;
|
|
2749
2750
|
height: ${(props) => props.$height && _constraint_height$1.includes(props.$height) ? props.$height + "px" : "24px"};
|
|
2750
|
-
background-color: ${(props) => props.$
|
|
2751
|
+
background-color: ${(props) => props.$backgroundColor && Object.keys(colors).includes(props.$backgroundColor) ? colors[props.$backgroundColor] : colors.gray_60};
|
|
2751
2752
|
border-radius: ${(props) => props.$radius && _constraint_radius.includes(props.$radius) ? props.$radius + "px" : "4px"};
|
|
2752
|
-
|
|
2753
|
-
&:after {
|
|
2754
|
-
content: "";
|
|
2755
|
-
width: ${(props) => typeof props.$value === "number" ? props.$value * 100 + "%" : "50%"};
|
|
2756
|
-
height: 100%;
|
|
2757
|
-
position: absolute;
|
|
2758
|
-
top: 0;
|
|
2759
|
-
left: 0;
|
|
2760
|
-
background-color: ${(props) => props.$leftColor && Object.keys(colors).includes(props.$leftColor) ? colors[props.$leftColor] : colors.gray_950};
|
|
2761
|
-
}
|
|
2762
2753
|
`;
|
|
2763
2754
|
const Bar = ({
|
|
2764
|
-
value = 0,
|
|
2765
|
-
leftColor = "gray_950",
|
|
2766
|
-
rightColor = "gray_60",
|
|
2767
2755
|
height = 24,
|
|
2768
2756
|
radius = 4,
|
|
2757
|
+
backgroundColor = "gray_60",
|
|
2758
|
+
max = 100,
|
|
2759
|
+
items = [],
|
|
2769
2760
|
...rest
|
|
2770
2761
|
}) => {
|
|
2771
2762
|
return /* @__PURE__ */ jsx(
|
|
2772
2763
|
StyledBar,
|
|
2773
2764
|
{
|
|
2774
|
-
$
|
|
2775
|
-
$leftColor: leftColor,
|
|
2776
|
-
$rightColor: rightColor,
|
|
2765
|
+
$backgroundColor: backgroundColor,
|
|
2777
2766
|
$height: height,
|
|
2778
2767
|
$radius: radius,
|
|
2779
|
-
...rest
|
|
2768
|
+
...rest,
|
|
2769
|
+
children: items.length > 0 && items.map((item, index) => {
|
|
2770
|
+
const thisColor = colors[item.color] || colors.gray_950;
|
|
2771
|
+
const percentage = item.value / max * 100;
|
|
2772
|
+
const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
|
|
2773
|
+
return /* @__PURE__ */ jsx(
|
|
2774
|
+
"div",
|
|
2775
|
+
{
|
|
2776
|
+
style: {
|
|
2777
|
+
width: `${clampedPercentage}%`,
|
|
2778
|
+
height: "100%",
|
|
2779
|
+
backgroundColor: thisColor
|
|
2780
|
+
}
|
|
2781
|
+
},
|
|
2782
|
+
index
|
|
2783
|
+
);
|
|
2784
|
+
})
|
|
2780
2785
|
}
|
|
2781
2786
|
);
|
|
2782
2787
|
};
|
|
@@ -2,11 +2,14 @@ import React, { HTMLAttributes } from 'react';
|
|
|
2
2
|
import { colors } from '../../utils/colors.js';
|
|
3
3
|
|
|
4
4
|
interface BarProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
-
value?: number;
|
|
6
|
-
leftColor?: keyof typeof colors;
|
|
7
|
-
rightColor?: keyof typeof colors;
|
|
8
5
|
height?: 8 | 12 | 16 | 24 | 32 | 40;
|
|
9
6
|
radius?: 2 | 4 | 8 | 12 | 16;
|
|
7
|
+
backgroundColor?: keyof typeof colors;
|
|
8
|
+
max?: number;
|
|
9
|
+
items?: {
|
|
10
|
+
value: number;
|
|
11
|
+
color: keyof typeof colors;
|
|
12
|
+
}[];
|
|
10
13
|
}
|
|
11
14
|
declare const Bar: React.FC<BarProps>;
|
|
12
15
|
|