@tidbcloud/uikit 2.0.0-beta.47 → 2.0.0-beta.49
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/CHANGELOG.md
CHANGED
|
@@ -12,7 +12,6 @@ const RangeCalendar = require("../../node_modules/.pnpm/@mantine_dates@5.10.4_@m
|
|
|
12
12
|
const Alert = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Alert/Alert.cjs");
|
|
13
13
|
const Text = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Text/Text.cjs");
|
|
14
14
|
const Button = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Button/Button.cjs");
|
|
15
|
-
const MantineProvider = require("../../node_modules/.pnpm/@mantine_styles@5.10.4_patch_hash_gj5o633amdkv7b52vinsxkrrr4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.cjs");
|
|
16
15
|
const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
|
|
17
16
|
const Group = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.cjs");
|
|
18
17
|
const AbsoluteTimeRangePicker = ({
|
|
@@ -24,8 +23,6 @@ const AbsoluteTimeRangePicker = ({
|
|
|
24
23
|
onCancel,
|
|
25
24
|
onReturnClick
|
|
26
25
|
}) => {
|
|
27
|
-
const theme = MantineProvider.useMantineTheme();
|
|
28
|
-
const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.carbon[8] } : null;
|
|
29
26
|
const [start, setStart] = React.useState(() => new Date(value[0] * 1e3));
|
|
30
27
|
const [end, setEnd] = React.useState(() => new Date(value[1] * 1e3));
|
|
31
28
|
const startAfterEnd = React.useMemo(() => {
|
|
@@ -93,7 +90,7 @@ const AbsoluteTimeRangePicker = ({
|
|
|
93
90
|
{
|
|
94
91
|
format: "24",
|
|
95
92
|
w: 90,
|
|
96
|
-
styles: { input: { paddingLeft: 4, paddingRight: 4 } },
|
|
93
|
+
styles: { input: { paddingLeft: 4, paddingRight: 4 }, controls: { height: 30 } },
|
|
97
94
|
withSeconds: true,
|
|
98
95
|
value: start,
|
|
99
96
|
onChange: (d) => updateTime(d, setStart),
|
|
@@ -122,7 +119,7 @@ const AbsoluteTimeRangePicker = ({
|
|
|
122
119
|
{
|
|
123
120
|
format: "24",
|
|
124
121
|
w: 90,
|
|
125
|
-
styles: { input: { paddingLeft: 4, paddingRight: 4 } },
|
|
122
|
+
styles: { input: { paddingLeft: 4, paddingRight: 4 }, controls: { height: 30 } },
|
|
126
123
|
withSeconds: true,
|
|
127
124
|
value: end,
|
|
128
125
|
onChange: (d) => updateTime(d, setEnd),
|
|
@@ -131,16 +128,7 @@ const AbsoluteTimeRangePicker = ({
|
|
|
131
128
|
)
|
|
132
129
|
] })
|
|
133
130
|
] }),
|
|
134
|
-
/* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Flex.Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
|
|
135
|
-
RangeCalendar.RangeCalendar,
|
|
136
|
-
{
|
|
137
|
-
value: [start, end],
|
|
138
|
-
onChange: updateDate,
|
|
139
|
-
maxDate: maxDateTime,
|
|
140
|
-
minDate: minDateTime,
|
|
141
|
-
dayStyle
|
|
142
|
-
}
|
|
143
|
-
) }),
|
|
131
|
+
/* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Flex.Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(RangeCalendar.RangeCalendar, { value: [start, end], onChange: updateDate, maxDate: maxDateTime, minDate: minDateTime }) }),
|
|
144
132
|
(startAfterEnd || beyondMin || beyondMax || beyondDuration) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Alert.Alert, { icon: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconAlertCircle, { size: 16 }), color: "red", pt: 8, children: [
|
|
145
133
|
startAfterEnd && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { color: "red", children: "Please select an end time after the start time." }),
|
|
146
134
|
beyondMin && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { color: "red", children: [
|
|
@@ -11,7 +11,6 @@ import { RangeCalendar } from "../../node_modules/.pnpm/@mantine_dates@5.10.4_@m
|
|
|
11
11
|
import { Alert } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Alert/Alert.js";
|
|
12
12
|
import { Text } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Text/Text.js";
|
|
13
13
|
import { Button } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Button/Button.js";
|
|
14
|
-
import { useMantineTheme } from "../../node_modules/.pnpm/@mantine_styles@5.10.4_patch_hash_gj5o633amdkv7b52vinsxkrrr4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.js";
|
|
15
14
|
import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
|
|
16
15
|
import { Group } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.js";
|
|
17
16
|
const AbsoluteTimeRangePicker = ({
|
|
@@ -23,8 +22,6 @@ const AbsoluteTimeRangePicker = ({
|
|
|
23
22
|
onCancel,
|
|
24
23
|
onReturnClick
|
|
25
24
|
}) => {
|
|
26
|
-
const theme = useMantineTheme();
|
|
27
|
-
const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.carbon[8] } : null;
|
|
28
25
|
const [start, setStart] = useState(() => new Date(value[0] * 1e3));
|
|
29
26
|
const [end, setEnd] = useState(() => new Date(value[1] * 1e3));
|
|
30
27
|
const startAfterEnd = useMemo(() => {
|
|
@@ -92,7 +89,7 @@ const AbsoluteTimeRangePicker = ({
|
|
|
92
89
|
{
|
|
93
90
|
format: "24",
|
|
94
91
|
w: 90,
|
|
95
|
-
styles: { input: { paddingLeft: 4, paddingRight: 4 } },
|
|
92
|
+
styles: { input: { paddingLeft: 4, paddingRight: 4 }, controls: { height: 30 } },
|
|
96
93
|
withSeconds: true,
|
|
97
94
|
value: start,
|
|
98
95
|
onChange: (d) => updateTime(d, setStart),
|
|
@@ -121,7 +118,7 @@ const AbsoluteTimeRangePicker = ({
|
|
|
121
118
|
{
|
|
122
119
|
format: "24",
|
|
123
120
|
w: 90,
|
|
124
|
-
styles: { input: { paddingLeft: 4, paddingRight: 4 } },
|
|
121
|
+
styles: { input: { paddingLeft: 4, paddingRight: 4 }, controls: { height: 30 } },
|
|
125
122
|
withSeconds: true,
|
|
126
123
|
value: end,
|
|
127
124
|
onChange: (d) => updateTime(d, setEnd),
|
|
@@ -130,16 +127,7 @@ const AbsoluteTimeRangePicker = ({
|
|
|
130
127
|
)
|
|
131
128
|
] })
|
|
132
129
|
] }),
|
|
133
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
134
|
-
RangeCalendar,
|
|
135
|
-
{
|
|
136
|
-
value: [start, end],
|
|
137
|
-
onChange: updateDate,
|
|
138
|
-
maxDate: maxDateTime,
|
|
139
|
-
minDate: minDateTime,
|
|
140
|
-
dayStyle
|
|
141
|
-
}
|
|
142
|
-
) }),
|
|
130
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RangeCalendar, { value: [start, end], onChange: updateDate, maxDate: maxDateTime, minDate: minDateTime }) }),
|
|
143
131
|
(startAfterEnd || beyondMin || beyondMax || beyondDuration) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(IconAlertCircle, { size: 16 }), color: "red", pt: 8, children: [
|
|
144
132
|
startAfterEnd && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { color: "red", children: "Please select an end time after the start time." }),
|
|
145
133
|
beyondMin && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { color: "red", children: [
|
package/dist/theme/theme.cjs
CHANGED
|
@@ -124,6 +124,12 @@ const getButtonStyles = (theme2, params) => {
|
|
|
124
124
|
paddingRight: 12,
|
|
125
125
|
...variantStyles[params.variant],
|
|
126
126
|
...sizeStyles[params.size]
|
|
127
|
+
},
|
|
128
|
+
leftIcon: {
|
|
129
|
+
marginRight: 4
|
|
130
|
+
},
|
|
131
|
+
rightIcon: {
|
|
132
|
+
marginLeft: 4
|
|
127
133
|
}
|
|
128
134
|
};
|
|
129
135
|
return finalStyles;
|
|
@@ -1010,18 +1016,62 @@ const theme = {
|
|
|
1010
1016
|
}
|
|
1011
1017
|
},
|
|
1012
1018
|
RangeCalendar: {
|
|
1013
|
-
styles: (theme2) =>
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1019
|
+
styles: (theme2) => {
|
|
1020
|
+
const color = theme2.primaryColor;
|
|
1021
|
+
return {
|
|
1022
|
+
calendarHeaderLevel: {
|
|
1023
|
+
color: theme2.fn.themeColor(color, 7)
|
|
1024
|
+
},
|
|
1025
|
+
calendarHeaderLevelIcon: {
|
|
1026
|
+
color: `${theme2.fn.themeColor(color, 7)} !important`
|
|
1027
|
+
},
|
|
1028
|
+
calendarHeaderControl: {
|
|
1029
|
+
color: `${theme2.fn.themeColor(color, 7)} !important`
|
|
1030
|
+
},
|
|
1031
|
+
yearPickerControlActive: {
|
|
1032
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
1033
|
+
},
|
|
1034
|
+
monthPickerControlActive: {
|
|
1035
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
1018
1036
|
},
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1037
|
+
weekday: {
|
|
1038
|
+
color: theme2.fn.themeColor(color, 7)
|
|
1039
|
+
},
|
|
1040
|
+
day: {
|
|
1041
|
+
color: theme2.fn.themeColor(color, 8),
|
|
1042
|
+
"&[data-in-range]": {
|
|
1043
|
+
backgroundColor: theme2.fn.themeColor(color, 3)
|
|
1044
|
+
},
|
|
1045
|
+
"&[data-first-in-range]": {
|
|
1046
|
+
borderTopLeftRadius: theme2.defaultRadius,
|
|
1047
|
+
borderBottomLeftRadius: theme2.defaultRadius
|
|
1048
|
+
},
|
|
1049
|
+
"&[data-last-in-range]": {
|
|
1050
|
+
borderTopRightRadius: theme2.defaultRadius,
|
|
1051
|
+
borderBottomRightRadius: theme2.defaultRadius
|
|
1052
|
+
},
|
|
1053
|
+
"&[data-selected]": {
|
|
1054
|
+
backgroundColor: theme2.fn.themeColor(color, 9),
|
|
1055
|
+
color: theme2.white
|
|
1056
|
+
},
|
|
1057
|
+
"&[data-weekend]": {
|
|
1058
|
+
color: theme2.fn.themeColor(color, 8),
|
|
1059
|
+
"&[data-selected]": {
|
|
1060
|
+
color: theme2.white
|
|
1061
|
+
},
|
|
1062
|
+
"&[data-disabled], &:disabled": {
|
|
1063
|
+
color: `${theme2.fn.themeColor(color, 5)} !important`
|
|
1064
|
+
}
|
|
1065
|
+
},
|
|
1066
|
+
"&[data-disabled], &:disabled": {
|
|
1067
|
+
color: `${theme2.fn.themeColor(color, 5)} !important`
|
|
1068
|
+
},
|
|
1069
|
+
"&[data-outside]": {
|
|
1070
|
+
color: theme2.fn.themeColor(color, 6)
|
|
1071
|
+
}
|
|
1022
1072
|
}
|
|
1023
|
-
}
|
|
1024
|
-
}
|
|
1073
|
+
};
|
|
1074
|
+
}
|
|
1025
1075
|
},
|
|
1026
1076
|
Anchor: {
|
|
1027
1077
|
styles: (theme2, params) => {
|
package/dist/theme/theme.js
CHANGED
|
@@ -122,6 +122,12 @@ const getButtonStyles = (theme2, params) => {
|
|
|
122
122
|
paddingRight: 12,
|
|
123
123
|
...variantStyles[params.variant],
|
|
124
124
|
...sizeStyles[params.size]
|
|
125
|
+
},
|
|
126
|
+
leftIcon: {
|
|
127
|
+
marginRight: 4
|
|
128
|
+
},
|
|
129
|
+
rightIcon: {
|
|
130
|
+
marginLeft: 4
|
|
125
131
|
}
|
|
126
132
|
};
|
|
127
133
|
return finalStyles;
|
|
@@ -1008,18 +1014,62 @@ const theme = {
|
|
|
1008
1014
|
}
|
|
1009
1015
|
},
|
|
1010
1016
|
RangeCalendar: {
|
|
1011
|
-
styles: (theme2) =>
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1017
|
+
styles: (theme2) => {
|
|
1018
|
+
const color = theme2.primaryColor;
|
|
1019
|
+
return {
|
|
1020
|
+
calendarHeaderLevel: {
|
|
1021
|
+
color: theme2.fn.themeColor(color, 7)
|
|
1022
|
+
},
|
|
1023
|
+
calendarHeaderLevelIcon: {
|
|
1024
|
+
color: `${theme2.fn.themeColor(color, 7)} !important`
|
|
1025
|
+
},
|
|
1026
|
+
calendarHeaderControl: {
|
|
1027
|
+
color: `${theme2.fn.themeColor(color, 7)} !important`
|
|
1028
|
+
},
|
|
1029
|
+
yearPickerControlActive: {
|
|
1030
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
1031
|
+
},
|
|
1032
|
+
monthPickerControlActive: {
|
|
1033
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
1016
1034
|
},
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1035
|
+
weekday: {
|
|
1036
|
+
color: theme2.fn.themeColor(color, 7)
|
|
1037
|
+
},
|
|
1038
|
+
day: {
|
|
1039
|
+
color: theme2.fn.themeColor(color, 8),
|
|
1040
|
+
"&[data-in-range]": {
|
|
1041
|
+
backgroundColor: theme2.fn.themeColor(color, 3)
|
|
1042
|
+
},
|
|
1043
|
+
"&[data-first-in-range]": {
|
|
1044
|
+
borderTopLeftRadius: theme2.defaultRadius,
|
|
1045
|
+
borderBottomLeftRadius: theme2.defaultRadius
|
|
1046
|
+
},
|
|
1047
|
+
"&[data-last-in-range]": {
|
|
1048
|
+
borderTopRightRadius: theme2.defaultRadius,
|
|
1049
|
+
borderBottomRightRadius: theme2.defaultRadius
|
|
1050
|
+
},
|
|
1051
|
+
"&[data-selected]": {
|
|
1052
|
+
backgroundColor: theme2.fn.themeColor(color, 9),
|
|
1053
|
+
color: theme2.white
|
|
1054
|
+
},
|
|
1055
|
+
"&[data-weekend]": {
|
|
1056
|
+
color: theme2.fn.themeColor(color, 8),
|
|
1057
|
+
"&[data-selected]": {
|
|
1058
|
+
color: theme2.white
|
|
1059
|
+
},
|
|
1060
|
+
"&[data-disabled], &:disabled": {
|
|
1061
|
+
color: `${theme2.fn.themeColor(color, 5)} !important`
|
|
1062
|
+
}
|
|
1063
|
+
},
|
|
1064
|
+
"&[data-disabled], &:disabled": {
|
|
1065
|
+
color: `${theme2.fn.themeColor(color, 5)} !important`
|
|
1066
|
+
},
|
|
1067
|
+
"&[data-outside]": {
|
|
1068
|
+
color: theme2.fn.themeColor(color, 6)
|
|
1069
|
+
}
|
|
1020
1070
|
}
|
|
1021
|
-
}
|
|
1022
|
-
}
|
|
1071
|
+
};
|
|
1072
|
+
}
|
|
1023
1073
|
},
|
|
1024
1074
|
Anchor: {
|
|
1025
1075
|
styles: (theme2, params) => {
|