@hsu-react/ui 2.2.8 → 2.2.10
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/es/components/Button/index.module.scss +16 -5
- package/es/components/Table/_hooks/useEllipsisTooltip.js +14 -3
- package/lib/components/Button/index.module.scss +16 -5
- package/lib/components/Table/_hooks/useEllipsisTooltip.js +13 -3
- package/package.json +1 -1
- package/src/components/Button/index.module.scss +16 -5
- package/src/components/Table/_hooks/useEllipsisTooltip.ts +16 -2
|
@@ -30,20 +30,31 @@
|
|
|
30
30
|
--ant-btn-border-color-hover: var(--ant-btn-color-hover);
|
|
31
31
|
--ant-btn-border-color-active: var(--ant-btn-color-active);
|
|
32
32
|
|
|
33
|
-
//
|
|
33
|
+
// 中性色系要单独处理：它的 color-base 就是边框色，而边框色与浅底色在暗色下恰好同值
|
|
34
34
|
// （--vita-border 与 --vita-muted 都是 #27272a），照抄就等于没有边框。
|
|
35
|
-
//
|
|
35
|
+
//
|
|
36
|
+
// 从**按钮自己那一档浅底**（--ant-btn-color-light，即 antd 给 filled 的底色）往文字色
|
|
37
|
+
// 混一档推出边框：同一色系、只是深一度，浅色下变深、暗色下变浅，一条规则两个主题都成立。
|
|
38
|
+
// 消费方把浅底换成暖色，边框自动跟着变暖，不会一个冷一个暖。
|
|
39
|
+
//
|
|
40
|
+
// 12% 是照标准边框相对面板的落差定的（#ffffff → #e4e4e7 约 27/255），够看见又不抢眼。
|
|
41
|
+
// 从前混的是 color-base 且高达 38%，等于往中性黑里灌，浅底上就是一圈发黑的框。
|
|
42
|
+
// 三个状态各自从对应那档底色推，边框始终比自己的底深一度。
|
|
36
43
|
&:global(.ant-btn-color-default) {
|
|
37
44
|
--ant-btn-border-color: color-mix(
|
|
38
45
|
in srgb,
|
|
39
|
-
var(--ant-btn-color-
|
|
46
|
+
var(--ant-btn-color-light) 88%,
|
|
40
47
|
var(--vita-foreground)
|
|
41
48
|
);
|
|
42
49
|
--ant-btn-border-color-hover: color-mix(
|
|
43
50
|
in srgb,
|
|
44
|
-
var(--ant-btn-color-
|
|
51
|
+
var(--ant-btn-color-light-hover) 88%,
|
|
52
|
+
var(--vita-foreground)
|
|
53
|
+
);
|
|
54
|
+
--ant-btn-border-color-active: color-mix(
|
|
55
|
+
in srgb,
|
|
56
|
+
var(--ant-btn-color-light-active) 88%,
|
|
45
57
|
var(--vita-foreground)
|
|
46
58
|
);
|
|
47
|
-
--ant-btn-border-color-active: var(--ant-btn-border-color-hover);
|
|
48
59
|
}
|
|
49
60
|
}
|
|
@@ -23,17 +23,28 @@ var useEllipsisTooltip = function useEllipsisTooltip(tooltipConfig) {
|
|
|
23
23
|
|
|
24
24
|
// If ellipsis is set and there is no custom render
|
|
25
25
|
if (column.ellipsis && !column.render && column.dataIndex) {
|
|
26
|
+
var _column$width;
|
|
27
|
+
// 宽列（声明宽度 > 300）让 Tooltip 至少铺到列宽：这类列本来就是放长文本的，
|
|
28
|
+
// Tooltip 仍按 200 起步会把一行摊成十几行。
|
|
29
|
+
//
|
|
30
|
+
// 窄列（≤ 300）依旧不传，回落到 TextEllipsis 实测的单元格宽度 —— 声明宽度经
|
|
31
|
+
// fixedWidth 比例分配后与实际渲染宽度并不相等，拿它当 Tooltip 宽度会偏。
|
|
32
|
+
//
|
|
33
|
+
// Number() 只对数值宽度有意义："20%" / "auto" 这类会得到 NaN，而
|
|
34
|
+
// Math.max(NaN, 300) 仍是 NaN、且 NaN === 300 为 false，不拦住就会把 NaN
|
|
35
|
+
// 当宽度传下去。非数值一律按窄列处理，交给实测。
|
|
36
|
+
var declaredWidth = Number((_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : 0);
|
|
37
|
+
var tooltipWidth = Number.isFinite(declaredWidth) ? Math.max(declaredWidth, 300) : 300;
|
|
26
38
|
return _objectSpread(_objectSpread({}, column), {}, {
|
|
27
39
|
render: function render(text) {
|
|
28
40
|
var _column$ellipsisPosit;
|
|
29
41
|
// Get the actual display value
|
|
30
42
|
var displayValue = typeof text === "string" || typeof text === "number" ? text : String(text !== null && text !== void 0 ? text : "");
|
|
31
|
-
|
|
32
|
-
// Do not pass width: let TextEllipsis measure the cell's actual rendered width as the Tooltip width
|
|
33
|
-
// (the declared column width, after fixedWidth proportional allocation, does not match the actual width)
|
|
34
43
|
return /*#__PURE__*/React.createElement(TextEllipsis, {
|
|
35
44
|
tooltipConfig: tooltipConfig,
|
|
36
45
|
children: displayValue,
|
|
46
|
+
// 见上：只有宽列才给显式宽度，undefined 表示交给 TextEllipsis 实测
|
|
47
|
+
width: tooltipWidth === 300 ? undefined : tooltipWidth,
|
|
37
48
|
ellipsisPosition: (_column$ellipsisPosit = column.ellipsisPosition) !== null && _column$ellipsisPosit !== void 0 ? _column$ellipsisPosit : tooltipConfig === null || tooltipConfig === void 0 ? void 0 : tooltipConfig.ellipsisPosition,
|
|
38
49
|
key: text
|
|
39
50
|
});
|
|
@@ -30,20 +30,31 @@
|
|
|
30
30
|
--ant-btn-border-color-hover: var(--ant-btn-color-hover);
|
|
31
31
|
--ant-btn-border-color-active: var(--ant-btn-color-active);
|
|
32
32
|
|
|
33
|
-
//
|
|
33
|
+
// 中性色系要单独处理：它的 color-base 就是边框色，而边框色与浅底色在暗色下恰好同值
|
|
34
34
|
// （--vita-border 与 --vita-muted 都是 #27272a），照抄就等于没有边框。
|
|
35
|
-
//
|
|
35
|
+
//
|
|
36
|
+
// 从**按钮自己那一档浅底**（--ant-btn-color-light，即 antd 给 filled 的底色）往文字色
|
|
37
|
+
// 混一档推出边框：同一色系、只是深一度，浅色下变深、暗色下变浅，一条规则两个主题都成立。
|
|
38
|
+
// 消费方把浅底换成暖色，边框自动跟着变暖，不会一个冷一个暖。
|
|
39
|
+
//
|
|
40
|
+
// 12% 是照标准边框相对面板的落差定的（#ffffff → #e4e4e7 约 27/255），够看见又不抢眼。
|
|
41
|
+
// 从前混的是 color-base 且高达 38%，等于往中性黑里灌，浅底上就是一圈发黑的框。
|
|
42
|
+
// 三个状态各自从对应那档底色推，边框始终比自己的底深一度。
|
|
36
43
|
&:global(.ant-btn-color-default) {
|
|
37
44
|
--ant-btn-border-color: color-mix(
|
|
38
45
|
in srgb,
|
|
39
|
-
var(--ant-btn-color-
|
|
46
|
+
var(--ant-btn-color-light) 88%,
|
|
40
47
|
var(--vita-foreground)
|
|
41
48
|
);
|
|
42
49
|
--ant-btn-border-color-hover: color-mix(
|
|
43
50
|
in srgb,
|
|
44
|
-
var(--ant-btn-color-
|
|
51
|
+
var(--ant-btn-color-light-hover) 88%,
|
|
52
|
+
var(--vita-foreground)
|
|
53
|
+
);
|
|
54
|
+
--ant-btn-border-color-active: color-mix(
|
|
55
|
+
in srgb,
|
|
56
|
+
var(--ant-btn-color-light-active) 88%,
|
|
45
57
|
var(--vita-foreground)
|
|
46
58
|
);
|
|
47
|
-
--ant-btn-border-color-active: var(--ant-btn-border-color-hover);
|
|
48
59
|
}
|
|
49
60
|
}
|
|
@@ -25,17 +25,27 @@ const useEllipsisTooltip = tooltipConfig => {
|
|
|
25
25
|
|
|
26
26
|
// If ellipsis is set and there is no custom render
|
|
27
27
|
if (column.ellipsis && !column.render && column.dataIndex) {
|
|
28
|
+
// 宽列（声明宽度 > 300）让 Tooltip 至少铺到列宽：这类列本来就是放长文本的，
|
|
29
|
+
// Tooltip 仍按 200 起步会把一行摊成十几行。
|
|
30
|
+
//
|
|
31
|
+
// 窄列（≤ 300）依旧不传，回落到 TextEllipsis 实测的单元格宽度 —— 声明宽度经
|
|
32
|
+
// fixedWidth 比例分配后与实际渲染宽度并不相等，拿它当 Tooltip 宽度会偏。
|
|
33
|
+
//
|
|
34
|
+
// Number() 只对数值宽度有意义："20%" / "auto" 这类会得到 NaN，而
|
|
35
|
+
// Math.max(NaN, 300) 仍是 NaN、且 NaN === 300 为 false，不拦住就会把 NaN
|
|
36
|
+
// 当宽度传下去。非数值一律按窄列处理，交给实测。
|
|
37
|
+
const declaredWidth = Number(column.width ?? 0);
|
|
38
|
+
const tooltipWidth = Number.isFinite(declaredWidth) ? Math.max(declaredWidth, 300) : 300;
|
|
28
39
|
return {
|
|
29
40
|
...column,
|
|
30
41
|
render: text => {
|
|
31
42
|
// Get the actual display value
|
|
32
43
|
const displayValue = typeof text === "string" || typeof text === "number" ? text : String(text ?? "");
|
|
33
|
-
|
|
34
|
-
// Do not pass width: let TextEllipsis measure the cell's actual rendered width as the Tooltip width
|
|
35
|
-
// (the declared column width, after fixedWidth proportional allocation, does not match the actual width)
|
|
36
44
|
return /*#__PURE__*/_react.default.createElement(_TextEllipsis.default, {
|
|
37
45
|
tooltipConfig: tooltipConfig,
|
|
38
46
|
children: displayValue,
|
|
47
|
+
// 见上：只有宽列才给显式宽度，undefined 表示交给 TextEllipsis 实测
|
|
48
|
+
width: tooltipWidth === 300 ? undefined : tooltipWidth,
|
|
39
49
|
ellipsisPosition: column.ellipsisPosition ?? tooltipConfig?.ellipsisPosition,
|
|
40
50
|
key: text
|
|
41
51
|
});
|
package/package.json
CHANGED
|
@@ -30,20 +30,31 @@
|
|
|
30
30
|
--ant-btn-border-color-hover: var(--ant-btn-color-hover);
|
|
31
31
|
--ant-btn-border-color-active: var(--ant-btn-color-active);
|
|
32
32
|
|
|
33
|
-
//
|
|
33
|
+
// 中性色系要单独处理：它的 color-base 就是边框色，而边框色与浅底色在暗色下恰好同值
|
|
34
34
|
// （--vita-border 与 --vita-muted 都是 #27272a），照抄就等于没有边框。
|
|
35
|
-
//
|
|
35
|
+
//
|
|
36
|
+
// 从**按钮自己那一档浅底**（--ant-btn-color-light，即 antd 给 filled 的底色）往文字色
|
|
37
|
+
// 混一档推出边框：同一色系、只是深一度，浅色下变深、暗色下变浅，一条规则两个主题都成立。
|
|
38
|
+
// 消费方把浅底换成暖色，边框自动跟着变暖，不会一个冷一个暖。
|
|
39
|
+
//
|
|
40
|
+
// 12% 是照标准边框相对面板的落差定的（#ffffff → #e4e4e7 约 27/255），够看见又不抢眼。
|
|
41
|
+
// 从前混的是 color-base 且高达 38%，等于往中性黑里灌，浅底上就是一圈发黑的框。
|
|
42
|
+
// 三个状态各自从对应那档底色推，边框始终比自己的底深一度。
|
|
36
43
|
&:global(.ant-btn-color-default) {
|
|
37
44
|
--ant-btn-border-color: color-mix(
|
|
38
45
|
in srgb,
|
|
39
|
-
var(--ant-btn-color-
|
|
46
|
+
var(--ant-btn-color-light) 88%,
|
|
40
47
|
var(--vita-foreground)
|
|
41
48
|
);
|
|
42
49
|
--ant-btn-border-color-hover: color-mix(
|
|
43
50
|
in srgb,
|
|
44
|
-
var(--ant-btn-color-
|
|
51
|
+
var(--ant-btn-color-light-hover) 88%,
|
|
52
|
+
var(--vita-foreground)
|
|
53
|
+
);
|
|
54
|
+
--ant-btn-border-color-active: color-mix(
|
|
55
|
+
in srgb,
|
|
56
|
+
var(--ant-btn-color-light-active) 88%,
|
|
45
57
|
var(--vita-foreground)
|
|
46
58
|
);
|
|
47
|
-
--ant-btn-border-color-active: var(--ant-btn-border-color-hover);
|
|
48
59
|
}
|
|
49
60
|
}
|
|
@@ -23,6 +23,20 @@ const useEllipsisTooltip = <T extends AnyObject>(
|
|
|
23
23
|
|
|
24
24
|
// If ellipsis is set and there is no custom render
|
|
25
25
|
if (column.ellipsis && !column.render && column.dataIndex) {
|
|
26
|
+
// 宽列（声明宽度 > 300）让 Tooltip 至少铺到列宽：这类列本来就是放长文本的，
|
|
27
|
+
// Tooltip 仍按 200 起步会把一行摊成十几行。
|
|
28
|
+
//
|
|
29
|
+
// 窄列（≤ 300）依旧不传，回落到 TextEllipsis 实测的单元格宽度 —— 声明宽度经
|
|
30
|
+
// fixedWidth 比例分配后与实际渲染宽度并不相等，拿它当 Tooltip 宽度会偏。
|
|
31
|
+
//
|
|
32
|
+
// Number() 只对数值宽度有意义："20%" / "auto" 这类会得到 NaN，而
|
|
33
|
+
// Math.max(NaN, 300) 仍是 NaN、且 NaN === 300 为 false，不拦住就会把 NaN
|
|
34
|
+
// 当宽度传下去。非数值一律按窄列处理，交给实测。
|
|
35
|
+
const declaredWidth = Number(column.width ?? 0);
|
|
36
|
+
const tooltipWidth = Number.isFinite(declaredWidth)
|
|
37
|
+
? Math.max(declaredWidth, 300)
|
|
38
|
+
: 300;
|
|
39
|
+
|
|
26
40
|
return {
|
|
27
41
|
...column,
|
|
28
42
|
render: (text) => {
|
|
@@ -32,11 +46,11 @@ const useEllipsisTooltip = <T extends AnyObject>(
|
|
|
32
46
|
? text
|
|
33
47
|
: String(text ?? "");
|
|
34
48
|
|
|
35
|
-
// Do not pass width: let TextEllipsis measure the cell's actual rendered width as the Tooltip width
|
|
36
|
-
// (the declared column width, after fixedWidth proportional allocation, does not match the actual width)
|
|
37
49
|
return React.createElement(TextEllipsis, {
|
|
38
50
|
tooltipConfig: tooltipConfig,
|
|
39
51
|
children: displayValue,
|
|
52
|
+
// 见上：只有宽列才给显式宽度，undefined 表示交给 TextEllipsis 实测
|
|
53
|
+
width: tooltipWidth === 300 ? undefined : tooltipWidth,
|
|
40
54
|
ellipsisPosition:
|
|
41
55
|
column.ellipsisPosition ?? tooltipConfig?.ellipsisPosition,
|
|
42
56
|
key: text,
|