@tidbcloud/uikit 2.0.3 → 2.0.5
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
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @tidbcloud/uikit
|
|
2
2
|
|
|
3
|
+
## 2.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix(uikit): enforce input placeholder color with !important ([#449](https://github.com/tidbcloud/tidbcloud-uikit/pull/449))
|
|
8
|
+
|
|
9
|
+
## 2.0.4
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- feat(uikit): fix SearchArea components bugs
|
|
14
|
+
- Feat/search area fix ([#448](https://github.com/tidbcloud/tidbcloud-uikit/pull/448))
|
|
15
|
+
- chore: add type checking for UIKit in CI/CD pipeline ([#447](https://github.com/tidbcloud/tidbcloud-uikit/pull/447))
|
|
16
|
+
- feat(story): add RadioCard story demonstrating card-style radio selection ([#446](https://github.com/tidbcloud/tidbcloud-uikit/pull/446))
|
|
17
|
+
|
|
3
18
|
## 2.0.3
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
package/dist/biz/Form/Form.d.cts
CHANGED
|
@@ -17,6 +17,7 @@ export interface FormProps<T extends FieldValues = object> extends BoxProps, Omi
|
|
|
17
17
|
stopPropagation?: boolean;
|
|
18
18
|
preventDefault?: boolean;
|
|
19
19
|
onSubmit: SubmitHandler<T>;
|
|
20
|
+
onRefresh?: () => void;
|
|
20
21
|
onError?: () => any;
|
|
21
22
|
onCancel?: () => void;
|
|
22
23
|
onFormUnMount?: () => void;
|
package/dist/biz/Form/Form.d.mts
CHANGED
|
@@ -17,6 +17,7 @@ export interface FormProps<T extends FieldValues = object> extends BoxProps, Omi
|
|
|
17
17
|
stopPropagation?: boolean;
|
|
18
18
|
preventDefault?: boolean;
|
|
19
19
|
onSubmit: SubmitHandler<T>;
|
|
20
|
+
onRefresh?: () => void;
|
|
20
21
|
onError?: () => any;
|
|
21
22
|
onCancel?: () => void;
|
|
22
23
|
onFormUnMount?: () => void;
|
|
@@ -124,6 +124,7 @@ function FormItemRender(props) {
|
|
|
124
124
|
{
|
|
125
125
|
name,
|
|
126
126
|
value: keyword,
|
|
127
|
+
clearable: true,
|
|
127
128
|
onChange: (val) => {
|
|
128
129
|
setKeyword(val);
|
|
129
130
|
triggerSubmit();
|
|
@@ -137,7 +138,7 @@ function FormItemRender(props) {
|
|
|
137
138
|
}
|
|
138
139
|
const DEFAULT_FORM_STATE_KEY = "__fs";
|
|
139
140
|
function SearchArea(props) {
|
|
140
|
-
const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
|
|
141
|
+
const { data, onSubmit, onRefresh, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
|
|
141
142
|
const [resetSeed, setResetSeed] = React.useState(0);
|
|
142
143
|
const [formState, setFormState] = useURLQueryState.useURLQueryState(formStateQueryKey ?? DEFAULT_FORM_STATE_KEY, defaultValues);
|
|
143
144
|
const state = recoverFromURLEnabled ? formState : defaultValues;
|
|
@@ -150,8 +151,12 @@ function SearchArea(props) {
|
|
|
150
151
|
const handleReset = () => {
|
|
151
152
|
setResetSeed(resetSeed + 1);
|
|
152
153
|
form.reset(defaultValues);
|
|
154
|
+
onSubmit(form.getValues());
|
|
153
155
|
recoverFromURLEnabled && setFormState(defaultValues);
|
|
154
156
|
};
|
|
157
|
+
const handleRefresh = () => {
|
|
158
|
+
onRefresh && onRefresh();
|
|
159
|
+
};
|
|
155
160
|
React.useEffect(() => {
|
|
156
161
|
if (recoverFromURLEnabled) {
|
|
157
162
|
handleSubmit();
|
|
@@ -175,7 +180,7 @@ function SearchArea(props) {
|
|
|
175
180
|
/* @__PURE__ */ jsxRuntime.jsx(index$1.IconEraser, { size: 16, style: { marginRight: 4 } }),
|
|
176
181
|
"Clear Filters"
|
|
177
182
|
] }) }),
|
|
178
|
-
/* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick:
|
|
183
|
+
onRefresh && /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
|
|
179
184
|
] })
|
|
180
185
|
] }) }),
|
|
181
186
|
props.debugEnabled && /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: { height: 320 }, children: [
|
|
@@ -122,6 +122,7 @@ function FormItemRender(props) {
|
|
|
122
122
|
{
|
|
123
123
|
name,
|
|
124
124
|
value: keyword,
|
|
125
|
+
clearable: true,
|
|
125
126
|
onChange: (val) => {
|
|
126
127
|
setKeyword(val);
|
|
127
128
|
triggerSubmit();
|
|
@@ -135,7 +136,7 @@ function FormItemRender(props) {
|
|
|
135
136
|
}
|
|
136
137
|
const DEFAULT_FORM_STATE_KEY = "__fs";
|
|
137
138
|
function SearchArea(props) {
|
|
138
|
-
const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
|
|
139
|
+
const { data, onSubmit, onRefresh, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
|
|
139
140
|
const [resetSeed, setResetSeed] = useState(0);
|
|
140
141
|
const [formState, setFormState] = useURLQueryState(formStateQueryKey ?? DEFAULT_FORM_STATE_KEY, defaultValues);
|
|
141
142
|
const state = recoverFromURLEnabled ? formState : defaultValues;
|
|
@@ -148,8 +149,12 @@ function SearchArea(props) {
|
|
|
148
149
|
const handleReset = () => {
|
|
149
150
|
setResetSeed(resetSeed + 1);
|
|
150
151
|
form.reset(defaultValues);
|
|
152
|
+
onSubmit(form.getValues());
|
|
151
153
|
recoverFromURLEnabled && setFormState(defaultValues);
|
|
152
154
|
};
|
|
155
|
+
const handleRefresh = () => {
|
|
156
|
+
onRefresh && onRefresh();
|
|
157
|
+
};
|
|
153
158
|
useEffect(() => {
|
|
154
159
|
if (recoverFromURLEnabled) {
|
|
155
160
|
handleSubmit();
|
|
@@ -173,7 +178,7 @@ function SearchArea(props) {
|
|
|
173
178
|
/* @__PURE__ */ jsx(IconEraser, { size: 16, style: { marginRight: 4 } }),
|
|
174
179
|
"Clear Filters"
|
|
175
180
|
] }) }),
|
|
176
|
-
/* @__PURE__ */ jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick:
|
|
181
|
+
onRefresh && /* @__PURE__ */ jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsx(IconRefreshCw01, { size: 16 }) }) })
|
|
177
182
|
] })
|
|
178
183
|
] }) }),
|
|
179
184
|
props.debugEnabled && /* @__PURE__ */ jsxs(Box, { sx: { height: 320 }, children: [
|
package/dist/theme/theme.cjs
CHANGED
|
@@ -54,7 +54,7 @@ function getInputStyles(theme2, props) {
|
|
|
54
54
|
...passwordInnerInputSize
|
|
55
55
|
},
|
|
56
56
|
"&::placeholder": {
|
|
57
|
-
color: themeColor(theme2, "carbon", 6)
|
|
57
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
};
|
|
@@ -71,7 +71,7 @@ function getInputStyles(theme2, props) {
|
|
|
71
71
|
...passwordInnerInputSize
|
|
72
72
|
},
|
|
73
73
|
"&::placeholder": {
|
|
74
|
-
color: themeColor(theme2, "carbon", 6)
|
|
74
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
};
|
|
@@ -107,12 +107,12 @@ function getInputStyles(theme2, props) {
|
|
|
107
107
|
opacity: 1
|
|
108
108
|
},
|
|
109
109
|
"&::placeholder": {
|
|
110
|
-
color: themeColor(theme2, "carbon", 6)
|
|
110
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
111
111
|
},
|
|
112
112
|
"& .mantine-PasswordInput-innerInput": {
|
|
113
113
|
...passwordInnerInputSize,
|
|
114
114
|
"&::placeholder": {
|
|
115
|
-
color: themeColor(theme2, "carbon", 6)
|
|
115
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
},
|
|
@@ -134,7 +134,7 @@ function getInputStyles(theme2, props) {
|
|
|
134
134
|
borderColor: themeColor(theme2, "red", 4)
|
|
135
135
|
},
|
|
136
136
|
"&::placeholder": {
|
|
137
|
-
color: themeColor(theme2, "carbon",
|
|
137
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
}
|
|
@@ -624,7 +624,7 @@ const theme = createTheme.createTheme({
|
|
|
624
624
|
},
|
|
625
625
|
inputField: {
|
|
626
626
|
"&::placeholder": {
|
|
627
|
-
color: themeColor(theme2, "carbon", 6)
|
|
627
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
628
628
|
}
|
|
629
629
|
},
|
|
630
630
|
pill: {
|
package/dist/theme/theme.mjs
CHANGED
|
@@ -52,7 +52,7 @@ function getInputStyles(theme2, props) {
|
|
|
52
52
|
...passwordInnerInputSize
|
|
53
53
|
},
|
|
54
54
|
"&::placeholder": {
|
|
55
|
-
color: themeColor(theme2, "carbon", 6)
|
|
55
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
};
|
|
@@ -69,7 +69,7 @@ function getInputStyles(theme2, props) {
|
|
|
69
69
|
...passwordInnerInputSize
|
|
70
70
|
},
|
|
71
71
|
"&::placeholder": {
|
|
72
|
-
color: themeColor(theme2, "carbon", 6)
|
|
72
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
};
|
|
@@ -105,12 +105,12 @@ function getInputStyles(theme2, props) {
|
|
|
105
105
|
opacity: 1
|
|
106
106
|
},
|
|
107
107
|
"&::placeholder": {
|
|
108
|
-
color: themeColor(theme2, "carbon", 6)
|
|
108
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
109
109
|
},
|
|
110
110
|
"& .mantine-PasswordInput-innerInput": {
|
|
111
111
|
...passwordInnerInputSize,
|
|
112
112
|
"&::placeholder": {
|
|
113
|
-
color: themeColor(theme2, "carbon", 6)
|
|
113
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
},
|
|
@@ -132,7 +132,7 @@ function getInputStyles(theme2, props) {
|
|
|
132
132
|
borderColor: themeColor(theme2, "red", 4)
|
|
133
133
|
},
|
|
134
134
|
"&::placeholder": {
|
|
135
|
-
color: themeColor(theme2, "carbon",
|
|
135
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
}
|
|
@@ -622,7 +622,7 @@ const theme = createTheme({
|
|
|
622
622
|
},
|
|
623
623
|
inputField: {
|
|
624
624
|
"&::placeholder": {
|
|
625
|
-
color: themeColor(theme2, "carbon", 6)
|
|
625
|
+
color: `${themeColor(theme2, "carbon", 6)} !important`
|
|
626
626
|
}
|
|
627
627
|
},
|
|
628
628
|
pill: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tidbcloud/uikit",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.5",
|
|
4
4
|
"description": "tidbcloud uikit",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/primitive/index.cjs",
|
|
@@ -136,6 +136,7 @@
|
|
|
136
136
|
"test": "test",
|
|
137
137
|
"copy:raw-icon": "mkdir -p ./dist/icons/raw && cpy 'src/icons/raw/*.svg' ./dist/icons/raw/",
|
|
138
138
|
"build:icon": "tsx ./scripts/icon.ts",
|
|
139
|
-
"build": "vite build && pnpm run copy:raw-icon"
|
|
139
|
+
"build": "vite build && pnpm run copy:raw-icon",
|
|
140
|
+
"type-check": "tsc --noEmit"
|
|
140
141
|
}
|
|
141
142
|
}
|