@nokecy/qc-ui 1.1.61 → 1.1.63
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.
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
* AG-Grid v33 主题配置
|
|
3
3
|
* 使用 themeQuartz API 替代 CSS 变量方式
|
|
4
4
|
*/
|
|
5
|
-
export declare const agGridTheme: import("ag-grid-community").Theme<import("ag-grid-community").
|
|
5
|
+
export declare const agGridTheme: import("ag-grid-community").Theme<import("ag-grid-community").CoreParams & import("ag-grid-community").ButtonStyleParams & import("ag-grid-community").CheckboxStyleParams & import("ag-grid-community").TabStyleParams & import("ag-grid-community").InputStyleParams & {}>;
|
|
6
6
|
/**
|
|
7
7
|
* 根据当前 Ant Design ConfigProvider 主题生成 AgGrid 主题色。
|
|
8
|
-
*
|
|
8
|
+
* 网格、筛选弹层、输入框和强调状态均直接跟随 antd 主题。@author nokecy
|
|
9
9
|
*/
|
|
10
|
-
export declare function useAgGridTheme(): import("ag-grid-community").Theme<import("ag-grid-community").
|
|
10
|
+
export declare function useAgGridTheme(): import("ag-grid-community").Theme<import("ag-grid-community").CoreParams & import("ag-grid-community").ButtonStyleParams & import("ag-grid-community").CheckboxStyleParams & import("ag-grid-community").TabStyleParams & import("ag-grid-community").InputStyleParams & {}>;
|
|
@@ -13,7 +13,12 @@ var _react = require("react");
|
|
|
13
13
|
* 使用 themeQuartz API 替代 CSS 变量方式
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
/** 右对齐只影响标题和数值，筛选入口在所有列中统一位于右侧。@author nokecy */
|
|
17
|
+
var headerFilterPlacement = (0, _agGridCommunity.createPart)({
|
|
18
|
+
feature: 'qcHeaderFilterPlacement',
|
|
19
|
+
css: "\n .ag-ltr .ag-right-aligned-header .ag-cell-label-container {\n flex-direction: row-reverse;\n }\n .ag-ltr .ag-right-aligned-header .ag-header-cell-filter-button {\n margin-left: var(--ag-spacing);\n margin-right: 0;\n }\n "
|
|
20
|
+
});
|
|
21
|
+
var agGridTheme = exports.agGridTheme = _agGridCommunity.themeQuartz.withPart(headerFilterPlacement).withParams({
|
|
17
22
|
// 基础颜色
|
|
18
23
|
backgroundColor: '#FFFFFF',
|
|
19
24
|
foregroundColor: '#555B62',
|
|
@@ -82,13 +87,34 @@ var agGridTheme = exports.agGridTheme = _agGridCommunity.themeQuartz.withParams(
|
|
|
82
87
|
|
|
83
88
|
/**
|
|
84
89
|
* 根据当前 Ant Design ConfigProvider 主题生成 AgGrid 主题色。
|
|
85
|
-
*
|
|
90
|
+
* 网格、筛选弹层、输入框和强调状态均直接跟随 antd 主题。@author nokecy
|
|
86
91
|
*/
|
|
87
92
|
function useAgGridTheme() {
|
|
88
93
|
var _antdTheme$useToken = _antd.theme.useToken(),
|
|
89
94
|
token = _antdTheme$useToken.token;
|
|
90
95
|
return (0, _react.useMemo)(function () {
|
|
91
96
|
return agGridTheme.withParams({
|
|
97
|
+
// 弹层可能挂到网格容器之外，必须由组件主题完整声明颜色。@author nokecy
|
|
98
|
+
backgroundColor: token.colorBgContainer,
|
|
99
|
+
foregroundColor: token.colorText,
|
|
100
|
+
cellTextColor: token.colorText,
|
|
101
|
+
headerTextColor: token.colorText,
|
|
102
|
+
subtleTextColor: token.colorTextSecondary,
|
|
103
|
+
headerBackgroundColor: token.colorFillAlter,
|
|
104
|
+
oddRowBackgroundColor: token.colorBgContainer,
|
|
105
|
+
borderColor: token.colorBorderSecondary,
|
|
106
|
+
menuBackgroundColor: token.colorBgElevated,
|
|
107
|
+
menuTextColor: token.colorText,
|
|
108
|
+
panelBackgroundColor: token.colorBgElevated,
|
|
109
|
+
inputBackgroundColor: token.colorBgContainer,
|
|
110
|
+
inputTextColor: token.colorText,
|
|
111
|
+
inputBorder: {
|
|
112
|
+
color: token.colorBorder
|
|
113
|
+
},
|
|
114
|
+
inputPlaceholderTextColor: token.colorTextPlaceholder,
|
|
115
|
+
dragAndDropImageBackgroundColor: token.colorBgElevated,
|
|
116
|
+
invalidColor: token.colorError,
|
|
117
|
+
browserColorScheme: 'inherit',
|
|
92
118
|
accentColor: token.colorPrimary,
|
|
93
119
|
rowHoverColor: token.colorPrimaryBg,
|
|
94
120
|
selectedRowBackgroundColor: token.colorPrimaryBgHover,
|
|
@@ -106,5 +132,5 @@ function useAgGridTheme() {
|
|
|
106
132
|
checkboxIndeterminateShapeColor: token.colorWhite,
|
|
107
133
|
toggleButtonOnBackgroundColor: token.colorPrimary
|
|
108
134
|
});
|
|
109
|
-
}, [token
|
|
135
|
+
}, [token]);
|
|
110
136
|
}
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
* AG-Grid v33 主题配置
|
|
3
3
|
* 使用 themeQuartz API 替代 CSS 变量方式
|
|
4
4
|
*/
|
|
5
|
-
export declare const agGridTheme: import("ag-grid-community").Theme<import("ag-grid-community").
|
|
5
|
+
export declare const agGridTheme: import("ag-grid-community").Theme<import("ag-grid-community").CoreParams & import("ag-grid-community").ButtonStyleParams & import("ag-grid-community").CheckboxStyleParams & import("ag-grid-community").TabStyleParams & import("ag-grid-community").InputStyleParams & {}>;
|
|
6
6
|
/**
|
|
7
7
|
* 根据当前 Ant Design ConfigProvider 主题生成 AgGrid 主题色。
|
|
8
|
-
*
|
|
8
|
+
* 网格、筛选弹层、输入框和强调状态均直接跟随 antd 主题。@author nokecy
|
|
9
9
|
*/
|
|
10
|
-
export declare function useAgGridTheme(): import("ag-grid-community").Theme<import("ag-grid-community").
|
|
10
|
+
export declare function useAgGridTheme(): import("ag-grid-community").Theme<import("ag-grid-community").CoreParams & import("ag-grid-community").ButtonStyleParams & import("ag-grid-community").CheckboxStyleParams & import("ag-grid-community").TabStyleParams & import("ag-grid-community").InputStyleParams & {}>;
|
|
@@ -3,10 +3,16 @@
|
|
|
3
3
|
* 使用 themeQuartz API 替代 CSS 变量方式
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import { themeQuartz } from 'ag-grid-community';
|
|
6
|
+
import { createPart, themeQuartz } from 'ag-grid-community';
|
|
7
7
|
import { theme as antdTheme } from 'antd';
|
|
8
8
|
import { useMemo } from 'react';
|
|
9
|
-
|
|
9
|
+
|
|
10
|
+
/** 右对齐只影响标题和数值，筛选入口在所有列中统一位于右侧。@author nokecy */
|
|
11
|
+
var headerFilterPlacement = createPart({
|
|
12
|
+
feature: 'qcHeaderFilterPlacement',
|
|
13
|
+
css: "\n .ag-ltr .ag-right-aligned-header .ag-cell-label-container {\n flex-direction: row-reverse;\n }\n .ag-ltr .ag-right-aligned-header .ag-header-cell-filter-button {\n margin-left: var(--ag-spacing);\n margin-right: 0;\n }\n "
|
|
14
|
+
});
|
|
15
|
+
export var agGridTheme = themeQuartz.withPart(headerFilterPlacement).withParams({
|
|
10
16
|
// 基础颜色
|
|
11
17
|
backgroundColor: '#FFFFFF',
|
|
12
18
|
foregroundColor: '#555B62',
|
|
@@ -75,13 +81,34 @@ export var agGridTheme = themeQuartz.withParams({
|
|
|
75
81
|
|
|
76
82
|
/**
|
|
77
83
|
* 根据当前 Ant Design ConfigProvider 主题生成 AgGrid 主题色。
|
|
78
|
-
*
|
|
84
|
+
* 网格、筛选弹层、输入框和强调状态均直接跟随 antd 主题。@author nokecy
|
|
79
85
|
*/
|
|
80
86
|
export function useAgGridTheme() {
|
|
81
87
|
var _antdTheme$useToken = antdTheme.useToken(),
|
|
82
88
|
token = _antdTheme$useToken.token;
|
|
83
89
|
return useMemo(function () {
|
|
84
90
|
return agGridTheme.withParams({
|
|
91
|
+
// 弹层可能挂到网格容器之外，必须由组件主题完整声明颜色。@author nokecy
|
|
92
|
+
backgroundColor: token.colorBgContainer,
|
|
93
|
+
foregroundColor: token.colorText,
|
|
94
|
+
cellTextColor: token.colorText,
|
|
95
|
+
headerTextColor: token.colorText,
|
|
96
|
+
subtleTextColor: token.colorTextSecondary,
|
|
97
|
+
headerBackgroundColor: token.colorFillAlter,
|
|
98
|
+
oddRowBackgroundColor: token.colorBgContainer,
|
|
99
|
+
borderColor: token.colorBorderSecondary,
|
|
100
|
+
menuBackgroundColor: token.colorBgElevated,
|
|
101
|
+
menuTextColor: token.colorText,
|
|
102
|
+
panelBackgroundColor: token.colorBgElevated,
|
|
103
|
+
inputBackgroundColor: token.colorBgContainer,
|
|
104
|
+
inputTextColor: token.colorText,
|
|
105
|
+
inputBorder: {
|
|
106
|
+
color: token.colorBorder
|
|
107
|
+
},
|
|
108
|
+
inputPlaceholderTextColor: token.colorTextPlaceholder,
|
|
109
|
+
dragAndDropImageBackgroundColor: token.colorBgElevated,
|
|
110
|
+
invalidColor: token.colorError,
|
|
111
|
+
browserColorScheme: 'inherit',
|
|
85
112
|
accentColor: token.colorPrimary,
|
|
86
113
|
rowHoverColor: token.colorPrimaryBg,
|
|
87
114
|
selectedRowBackgroundColor: token.colorPrimaryBgHover,
|
|
@@ -99,5 +126,5 @@ export function useAgGridTheme() {
|
|
|
99
126
|
checkboxIndeterminateShapeColor: token.colorWhite,
|
|
100
127
|
toggleButtonOnBackgroundColor: token.colorPrimary
|
|
101
128
|
});
|
|
102
|
-
}, [token
|
|
129
|
+
}, [token]);
|
|
103
130
|
}
|