@tidbcloud/uikit 2.4.12 → 2.4.14
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 +12 -0
- package/dist/biz/AppShell/navbar/NavItemBase.d.cts +1 -1
- package/dist/biz/AppShell/navbar/NavItemBase.d.mts +1 -1
- package/dist/biz/AppShell/navbar/SubNavItemBase.d.cts +1 -1
- package/dist/biz/AppShell/navbar/SubNavItemBase.d.mts +1 -1
- package/dist/theme/theme.cjs +28 -9
- package/dist/theme/theme.mjs +28 -9
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @tidbcloud/uikit
|
|
2
2
|
|
|
3
|
+
## 2.4.14
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- feat(TagsInput): add size support and styles to theme configuration ([#570](https://github.com/tidbcloud/tidbcloud-uikit/pull/570))
|
|
8
|
+
|
|
9
|
+
## 2.4.13
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- refactor(AppShell): enhance `NavItemBase` props and refine `SubNavItemBase` type ([#568](https://github.com/tidbcloud/tidbcloud-uikit/pull/568))
|
|
14
|
+
|
|
3
15
|
## 2.4.12
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NavLinkProps } from '../../../primitive/index.cjs';
|
|
2
|
-
export interface NavItemBaseProps extends Pick<NavLinkProps, 'label' | 'leftSection' | 'rightSection' | 'active' | 'defaultOpened' | '
|
|
2
|
+
export interface NavItemBaseProps extends Pick<NavLinkProps, 'label' | 'leftSection' | 'rightSection' | 'active' | 'disabled' | 'defaultOpened' | 'opened' | 'onChange' | 'onClick' | 'onKeyDown' | 'mod' | 'sx' | 'styles' | 'style' | 'children'> {
|
|
3
3
|
/**
|
|
4
4
|
* Tooltip content
|
|
5
5
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NavLinkProps } from '../../../primitive/index.mjs';
|
|
2
|
-
export interface NavItemBaseProps extends Pick<NavLinkProps, 'label' | 'leftSection' | 'rightSection' | 'active' | 'defaultOpened' | '
|
|
2
|
+
export interface NavItemBaseProps extends Pick<NavLinkProps, 'label' | 'leftSection' | 'rightSection' | 'active' | 'disabled' | 'defaultOpened' | 'opened' | 'onChange' | 'onClick' | 'onKeyDown' | 'mod' | 'sx' | 'styles' | 'style' | 'children'> {
|
|
3
3
|
/**
|
|
4
4
|
* Tooltip content
|
|
5
5
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NavItemBaseProps } from './NavItemBase.cjs';
|
|
2
|
-
export type SubNavItemBaseProps = Omit<NavItemBaseProps, 'leftSection' | 'defaultOpened'>;
|
|
2
|
+
export type SubNavItemBaseProps = Omit<NavItemBaseProps, 'leftSection' | 'defaultOpened' | 'opened'>;
|
|
3
3
|
/**
|
|
4
4
|
* Base component for sub navigation items
|
|
5
5
|
* Handles only the styling aspects, no routing logic
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NavItemBaseProps } from './NavItemBase.mjs';
|
|
2
|
-
export type SubNavItemBaseProps = Omit<NavItemBaseProps, 'leftSection' | 'defaultOpened'>;
|
|
2
|
+
export type SubNavItemBaseProps = Omit<NavItemBaseProps, 'leftSection' | 'defaultOpened' | 'opened'>;
|
|
3
3
|
/**
|
|
4
4
|
* Base component for sub navigation items
|
|
5
5
|
* Handles only the styling aspects, no routing logic
|
package/dist/theme/theme.cjs
CHANGED
|
@@ -38,6 +38,11 @@ function getInputStyles(theme2, props) {
|
|
|
38
38
|
"--input-line-height": `${size - 2}px`,
|
|
39
39
|
"--input-fz": `${inputFontSize}px`
|
|
40
40
|
} : {};
|
|
41
|
+
const withInputSize = {
|
|
42
|
+
"&:not(.mantine-Textarea-input)": {
|
|
43
|
+
...inputSize
|
|
44
|
+
}
|
|
45
|
+
};
|
|
41
46
|
const passwordInnerInputSize = size ? {
|
|
42
47
|
height: size - 2,
|
|
43
48
|
minHeight: size - 2,
|
|
@@ -47,9 +52,7 @@ function getInputStyles(theme2, props) {
|
|
|
47
52
|
if (props.variant === "unstyled") {
|
|
48
53
|
return {
|
|
49
54
|
input: {
|
|
50
|
-
|
|
51
|
-
...inputSize
|
|
52
|
-
},
|
|
55
|
+
...withInputSize,
|
|
53
56
|
"& .mantine-PasswordInput-innerInput": {
|
|
54
57
|
...passwordInnerInputSize
|
|
55
58
|
},
|
|
@@ -64,9 +67,7 @@ function getInputStyles(theme2, props) {
|
|
|
64
67
|
input: {
|
|
65
68
|
"--input-bg": themeColor(theme2, "carbon", 3),
|
|
66
69
|
"--input-bd-focus": themeColor(theme2, "carbon", 9),
|
|
67
|
-
|
|
68
|
-
...inputSize
|
|
69
|
-
},
|
|
70
|
+
...withInputSize,
|
|
70
71
|
"& .mantine-PasswordInput-innerInput": {
|
|
71
72
|
...passwordInnerInputSize
|
|
72
73
|
},
|
|
@@ -91,9 +92,7 @@ function getInputStyles(theme2, props) {
|
|
|
91
92
|
color: theme2.colors.carbon[8],
|
|
92
93
|
border: `1px solid ${themeColor(theme2, "carbon", 4)}`,
|
|
93
94
|
backgroundColor: themeColor(theme2, "carbon", 0),
|
|
94
|
-
|
|
95
|
-
...inputSize
|
|
96
|
-
},
|
|
95
|
+
...withInputSize,
|
|
97
96
|
"&:hover": {
|
|
98
97
|
borderColor: themeColor(theme2, "carbon", 5)
|
|
99
98
|
},
|
|
@@ -692,6 +691,26 @@ const theme = createTheme.createTheme({
|
|
|
692
691
|
Textarea: {
|
|
693
692
|
styles: getInputStyles
|
|
694
693
|
},
|
|
694
|
+
TagsInput: {
|
|
695
|
+
styles: (theme2, props) => {
|
|
696
|
+
const size = InputSizes[props.size ?? "md"];
|
|
697
|
+
const inputSize = `calc(${size}px - 2 * var(--input-padding-y, 0rem) - 2px)`;
|
|
698
|
+
return {
|
|
699
|
+
input: {
|
|
700
|
+
height: "auto"
|
|
701
|
+
},
|
|
702
|
+
inputField: {
|
|
703
|
+
height: inputSize
|
|
704
|
+
},
|
|
705
|
+
pill: {
|
|
706
|
+
height: inputSize,
|
|
707
|
+
"& .mantine-Pill-label": {
|
|
708
|
+
lineHeight: inputSize
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
};
|
|
712
|
+
}
|
|
713
|
+
},
|
|
695
714
|
Badge: {
|
|
696
715
|
defaultProps: {
|
|
697
716
|
color: "peacock",
|
package/dist/theme/theme.mjs
CHANGED
|
@@ -36,6 +36,11 @@ function getInputStyles(theme2, props) {
|
|
|
36
36
|
"--input-line-height": `${size - 2}px`,
|
|
37
37
|
"--input-fz": `${inputFontSize}px`
|
|
38
38
|
} : {};
|
|
39
|
+
const withInputSize = {
|
|
40
|
+
"&:not(.mantine-Textarea-input)": {
|
|
41
|
+
...inputSize
|
|
42
|
+
}
|
|
43
|
+
};
|
|
39
44
|
const passwordInnerInputSize = size ? {
|
|
40
45
|
height: size - 2,
|
|
41
46
|
minHeight: size - 2,
|
|
@@ -45,9 +50,7 @@ function getInputStyles(theme2, props) {
|
|
|
45
50
|
if (props.variant === "unstyled") {
|
|
46
51
|
return {
|
|
47
52
|
input: {
|
|
48
|
-
|
|
49
|
-
...inputSize
|
|
50
|
-
},
|
|
53
|
+
...withInputSize,
|
|
51
54
|
"& .mantine-PasswordInput-innerInput": {
|
|
52
55
|
...passwordInnerInputSize
|
|
53
56
|
},
|
|
@@ -62,9 +65,7 @@ function getInputStyles(theme2, props) {
|
|
|
62
65
|
input: {
|
|
63
66
|
"--input-bg": themeColor(theme2, "carbon", 3),
|
|
64
67
|
"--input-bd-focus": themeColor(theme2, "carbon", 9),
|
|
65
|
-
|
|
66
|
-
...inputSize
|
|
67
|
-
},
|
|
68
|
+
...withInputSize,
|
|
68
69
|
"& .mantine-PasswordInput-innerInput": {
|
|
69
70
|
...passwordInnerInputSize
|
|
70
71
|
},
|
|
@@ -89,9 +90,7 @@ function getInputStyles(theme2, props) {
|
|
|
89
90
|
color: theme2.colors.carbon[8],
|
|
90
91
|
border: `1px solid ${themeColor(theme2, "carbon", 4)}`,
|
|
91
92
|
backgroundColor: themeColor(theme2, "carbon", 0),
|
|
92
|
-
|
|
93
|
-
...inputSize
|
|
94
|
-
},
|
|
93
|
+
...withInputSize,
|
|
95
94
|
"&:hover": {
|
|
96
95
|
borderColor: themeColor(theme2, "carbon", 5)
|
|
97
96
|
},
|
|
@@ -690,6 +689,26 @@ const theme = createTheme({
|
|
|
690
689
|
Textarea: {
|
|
691
690
|
styles: getInputStyles
|
|
692
691
|
},
|
|
692
|
+
TagsInput: {
|
|
693
|
+
styles: (theme2, props) => {
|
|
694
|
+
const size = InputSizes[props.size ?? "md"];
|
|
695
|
+
const inputSize = `calc(${size}px - 2 * var(--input-padding-y, 0rem) - 2px)`;
|
|
696
|
+
return {
|
|
697
|
+
input: {
|
|
698
|
+
height: "auto"
|
|
699
|
+
},
|
|
700
|
+
inputField: {
|
|
701
|
+
height: inputSize
|
|
702
|
+
},
|
|
703
|
+
pill: {
|
|
704
|
+
height: inputSize,
|
|
705
|
+
"& .mantine-Pill-label": {
|
|
706
|
+
lineHeight: inputSize
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
};
|
|
710
|
+
}
|
|
711
|
+
},
|
|
693
712
|
Badge: {
|
|
694
713
|
defaultProps: {
|
|
695
714
|
color: "peacock",
|