@tidbcloud/uikit 2.0.0-beta.47 → 2.0.0-beta.48
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
|
@@ -1010,18 +1010,62 @@ const theme = {
|
|
|
1010
1010
|
}
|
|
1011
1011
|
},
|
|
1012
1012
|
RangeCalendar: {
|
|
1013
|
-
styles: (theme2) =>
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1013
|
+
styles: (theme2) => {
|
|
1014
|
+
const color = theme2.primaryColor;
|
|
1015
|
+
return {
|
|
1016
|
+
calendarHeaderLevel: {
|
|
1017
|
+
color: theme2.fn.themeColor(color, 7)
|
|
1018
1018
|
},
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1019
|
+
calendarHeaderLevelIcon: {
|
|
1020
|
+
color: `${theme2.fn.themeColor(color, 7)} !important`
|
|
1021
|
+
},
|
|
1022
|
+
calendarHeaderControl: {
|
|
1023
|
+
color: `${theme2.fn.themeColor(color, 7)} !important`
|
|
1024
|
+
},
|
|
1025
|
+
yearPickerControlActive: {
|
|
1026
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
1027
|
+
},
|
|
1028
|
+
monthPickerControlActive: {
|
|
1029
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
1030
|
+
},
|
|
1031
|
+
weekday: {
|
|
1032
|
+
color: theme2.fn.themeColor(color, 7)
|
|
1033
|
+
},
|
|
1034
|
+
day: {
|
|
1035
|
+
color: theme2.fn.themeColor(color, 8),
|
|
1036
|
+
"&[data-in-range]": {
|
|
1037
|
+
backgroundColor: theme2.fn.themeColor(color, 3)
|
|
1038
|
+
},
|
|
1039
|
+
"&[data-first-in-range]": {
|
|
1040
|
+
borderTopLeftRadius: theme2.defaultRadius,
|
|
1041
|
+
borderBottomLeftRadius: theme2.defaultRadius
|
|
1042
|
+
},
|
|
1043
|
+
"&[data-last-in-range]": {
|
|
1044
|
+
borderTopRightRadius: theme2.defaultRadius,
|
|
1045
|
+
borderBottomRightRadius: theme2.defaultRadius
|
|
1046
|
+
},
|
|
1047
|
+
"&[data-selected]": {
|
|
1048
|
+
backgroundColor: theme2.fn.themeColor(color, 9),
|
|
1049
|
+
color: theme2.white
|
|
1050
|
+
},
|
|
1051
|
+
"&[data-weekend]": {
|
|
1052
|
+
color: theme2.fn.themeColor(color, 8),
|
|
1053
|
+
"&[data-selected]": {
|
|
1054
|
+
color: theme2.white
|
|
1055
|
+
},
|
|
1056
|
+
"&[data-disabled], &:disabled": {
|
|
1057
|
+
color: `${theme2.fn.themeColor(color, 5)} !important`
|
|
1058
|
+
}
|
|
1059
|
+
},
|
|
1060
|
+
"&[data-disabled], &:disabled": {
|
|
1061
|
+
color: `${theme2.fn.themeColor(color, 5)} !important`
|
|
1062
|
+
},
|
|
1063
|
+
"&[data-outside]": {
|
|
1064
|
+
color: theme2.fn.themeColor(color, 6)
|
|
1065
|
+
}
|
|
1022
1066
|
}
|
|
1023
|
-
}
|
|
1024
|
-
}
|
|
1067
|
+
};
|
|
1068
|
+
}
|
|
1025
1069
|
},
|
|
1026
1070
|
Anchor: {
|
|
1027
1071
|
styles: (theme2, params) => {
|
package/dist/theme/theme.js
CHANGED
|
@@ -1008,18 +1008,62 @@ const theme = {
|
|
|
1008
1008
|
}
|
|
1009
1009
|
},
|
|
1010
1010
|
RangeCalendar: {
|
|
1011
|
-
styles: (theme2) =>
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1011
|
+
styles: (theme2) => {
|
|
1012
|
+
const color = theme2.primaryColor;
|
|
1013
|
+
return {
|
|
1014
|
+
calendarHeaderLevel: {
|
|
1015
|
+
color: theme2.fn.themeColor(color, 7)
|
|
1016
1016
|
},
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1017
|
+
calendarHeaderLevelIcon: {
|
|
1018
|
+
color: `${theme2.fn.themeColor(color, 7)} !important`
|
|
1019
|
+
},
|
|
1020
|
+
calendarHeaderControl: {
|
|
1021
|
+
color: `${theme2.fn.themeColor(color, 7)} !important`
|
|
1022
|
+
},
|
|
1023
|
+
yearPickerControlActive: {
|
|
1024
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
1025
|
+
},
|
|
1026
|
+
monthPickerControlActive: {
|
|
1027
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
1028
|
+
},
|
|
1029
|
+
weekday: {
|
|
1030
|
+
color: theme2.fn.themeColor(color, 7)
|
|
1031
|
+
},
|
|
1032
|
+
day: {
|
|
1033
|
+
color: theme2.fn.themeColor(color, 8),
|
|
1034
|
+
"&[data-in-range]": {
|
|
1035
|
+
backgroundColor: theme2.fn.themeColor(color, 3)
|
|
1036
|
+
},
|
|
1037
|
+
"&[data-first-in-range]": {
|
|
1038
|
+
borderTopLeftRadius: theme2.defaultRadius,
|
|
1039
|
+
borderBottomLeftRadius: theme2.defaultRadius
|
|
1040
|
+
},
|
|
1041
|
+
"&[data-last-in-range]": {
|
|
1042
|
+
borderTopRightRadius: theme2.defaultRadius,
|
|
1043
|
+
borderBottomRightRadius: theme2.defaultRadius
|
|
1044
|
+
},
|
|
1045
|
+
"&[data-selected]": {
|
|
1046
|
+
backgroundColor: theme2.fn.themeColor(color, 9),
|
|
1047
|
+
color: theme2.white
|
|
1048
|
+
},
|
|
1049
|
+
"&[data-weekend]": {
|
|
1050
|
+
color: theme2.fn.themeColor(color, 8),
|
|
1051
|
+
"&[data-selected]": {
|
|
1052
|
+
color: theme2.white
|
|
1053
|
+
},
|
|
1054
|
+
"&[data-disabled], &:disabled": {
|
|
1055
|
+
color: `${theme2.fn.themeColor(color, 5)} !important`
|
|
1056
|
+
}
|
|
1057
|
+
},
|
|
1058
|
+
"&[data-disabled], &:disabled": {
|
|
1059
|
+
color: `${theme2.fn.themeColor(color, 5)} !important`
|
|
1060
|
+
},
|
|
1061
|
+
"&[data-outside]": {
|
|
1062
|
+
color: theme2.fn.themeColor(color, 6)
|
|
1063
|
+
}
|
|
1020
1064
|
}
|
|
1021
|
-
}
|
|
1022
|
-
}
|
|
1065
|
+
};
|
|
1066
|
+
}
|
|
1023
1067
|
},
|
|
1024
1068
|
Anchor: {
|
|
1025
1069
|
styles: (theme2, params) => {
|