@nokecy/qc-ui 1.0.67 → 1.0.68

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.
@@ -1,6 +1,7 @@
1
- import { AgGridColumn, AgGridPlus, flattenTreeDeep, GridPlusContext } from "./ag-grid-plus";
1
+ import { AgGridColumn, AgGridPlus, flattenTreeDeep, GridPlusContext, useGridPlusColumnState } from "./ag-grid-plus";
2
2
  import ArrayTable from "./array-table";
3
3
  import ArrayTableIndex from "./array-table-index";
4
+ import { ColumnPresets } from "./array-table/columnHelper";
4
5
  import Card from "./card";
5
6
  import Dashboard from "./dashboard";
6
7
  import DialogSelect from "./dialogSelect";
@@ -20,11 +21,12 @@ import { StandardFormDialog, withStandardForm, FieldCreators, createSelectField,
20
21
  import DeleteConfirm from "./deleteConfirm";
21
22
  import { RuleBuilder } from "./RuleBuilder";
22
23
  import { RegexEditor, useRegexValidation, useTemplateManager, TemplateSelector, TemplateCategory, RegexTester, FlagsSelector, MatchItem, RegexRailroadDiagram } from "./components/RegexEditor";
23
- export { AgGridColumn, AgGridPlus, ArrayTable, ArrayTableIndex, Card, Dashboard, DialogSelect, DraggableModal, Editable, ExtensibleGrid, flattenTreeDeep, FormDesigner, FormProContext, FormProLayout, GridPlusContext, ImportModal, QueryBuilder, ToolBar, FullScreenAlert, ConfirmPro, GeneratedListPage, StandardFormDialog, withStandardForm, FieldCreators, createSelectField, createCascaderField, DeleteConfirm, RuleBuilder, RegexEditor, useRegexValidation, useTemplateManager, TemplateSelector, TemplateCategory, RegexTester, FlagsSelector, MatchItem, RegexRailroadDiagram, };
24
+ export { AgGridColumn, AgGridPlus, ArrayTable, ArrayTableIndex, ColumnPresets, Card, Dashboard, DialogSelect, DraggableModal, Editable, ExtensibleGrid, flattenTreeDeep, FormDesigner, FormProContext, FormProLayout, GridPlusContext, useGridPlusColumnState, ImportModal, QueryBuilder, ToolBar, FullScreenAlert, ConfirmPro, GeneratedListPage, StandardFormDialog, withStandardForm, FieldCreators, createSelectField, createCascaderField, DeleteConfirm, RuleBuilder, RegexEditor, useRegexValidation, useTemplateManager, TemplateSelector, TemplateCategory, RegexTester, FlagsSelector, MatchItem, RegexRailroadDiagram, };
24
25
  export type * from "./generatedListPage";
25
26
  export type * from "./standardFormDialog";
26
27
  export type * from "./deleteConfirm";
27
28
  export type * from "./importModal";
28
29
  export type * from "./fullScreenAlert";
29
30
  export type * from "./RuleBuilder";
31
+ export type { ColumnConfig } from "./array-table/columnHelper";
30
32
  export type { ParseResult as RegexParseResult, ValidationResult as RegexValidationResult, RegexError, ComplexityMetrics, ASTNode, AstRegExp, RegexTemplate, TestResult as RegexTestResult, CodeMirrorWrapperProps, RegexEditorProps, RegexFlags, MatchResult, RegexTesterProps, FlagsSelectorProps, MatchItemProps, RegexRailroadDiagramProps, } from "./components/RegexEditor";
package/dist/cjs/index.js CHANGED
@@ -33,6 +33,12 @@ Object.defineProperty(exports, "Card", {
33
33
  return _card.default;
34
34
  }
35
35
  });
36
+ Object.defineProperty(exports, "ColumnPresets", {
37
+ enumerable: true,
38
+ get: function get() {
39
+ return _columnHelper.ColumnPresets;
40
+ }
41
+ });
36
42
  Object.defineProperty(exports, "ConfirmPro", {
37
43
  enumerable: true,
38
44
  get: function get() {
@@ -207,6 +213,12 @@ Object.defineProperty(exports, "flattenTreeDeep", {
207
213
  return _agGridPlus.flattenTreeDeep;
208
214
  }
209
215
  });
216
+ Object.defineProperty(exports, "useGridPlusColumnState", {
217
+ enumerable: true,
218
+ get: function get() {
219
+ return _agGridPlus.useGridPlusColumnState;
220
+ }
221
+ });
210
222
  Object.defineProperty(exports, "useRegexValidation", {
211
223
  enumerable: true,
212
224
  get: function get() {
@@ -228,6 +240,7 @@ Object.defineProperty(exports, "withStandardForm", {
228
240
  var _agGridPlus = require("./ag-grid-plus");
229
241
  var _arrayTable = _interopRequireDefault(require("./array-table"));
230
242
  var _arrayTableIndex = _interopRequireDefault(require("./array-table-index"));
243
+ var _columnHelper = require("./array-table/columnHelper");
231
244
  var _card = _interopRequireDefault(require("./card"));
232
245
  var _dashboard = _interopRequireDefault(require("./dashboard"));
233
246
  var _dialogSelect = _interopRequireDefault(require("./dialogSelect"));
@@ -0,0 +1,12 @@
1
+ /**
2
+ * 使用 GridPlusContext 的 Hook
3
+ * 用于访问列状态管理相关的方法和数据
4
+ */
5
+ export declare const useGridPlusColumnState: () => {
6
+ extensibleColumns: any;
7
+ columnState: any;
8
+ onSaveColumnState: (gridKey: string, columnState: any[]) => void;
9
+ applyToGlobal: (gridKey: string) => void;
10
+ resetCurrent: (gridKey: string) => void;
11
+ resetAll: (gridKey: string) => void;
12
+ };
@@ -0,0 +1,10 @@
1
+ import { useContext } from 'react';
2
+ import { GridPlusContext } from "../context/gridContext";
3
+
4
+ /**
5
+ * 使用 GridPlusContext 的 Hook
6
+ * 用于访问列状态管理相关的方法和数据
7
+ */
8
+ export var useGridPlusColumnState = function useGridPlusColumnState() {
9
+ return useContext(GridPlusContext);
10
+ };
@@ -1,14 +1,7 @@
1
1
  import AgGridPlus from "./ag-gridPlus";
2
2
  import { AgGridColumn } from "./interface";
3
3
  import { GridPlusContext } from "./context/gridContext";
4
+ import { useGridPlusColumnState } from "./hooks/useGridPlusColumnState";
4
5
  import "./ag-grid-theme-builder.css";
5
- export declare const useGridPlusColumnState: () => {
6
- extensibleColumns: any;
7
- columnState: any;
8
- onSaveColumnState: (gridKey: string, columnState: any[]) => void;
9
- applyToGlobal: (gridKey: string) => void;
10
- resetCurrent: (gridKey: string) => void;
11
- resetAll: (gridKey: string) => void;
12
- };
13
- export { AgGridPlus, AgGridColumn, GridPlusContext };
6
+ export { AgGridPlus, AgGridColumn, GridPlusContext, useGridPlusColumnState };
14
7
  export { dateValueFormatter, dateTimeValueFormatter, convertFilterModel, convertSortModel, flattenTreeDeep, toTree, flatten } from "./utils";
@@ -1,10 +1,7 @@
1
- import React from "react";
2
1
  import AgGridPlus from "./ag-gridPlus";
3
2
  import { AgGridColumn } from "./interface";
4
3
  import { GridPlusContext } from "./context/gridContext";
4
+ import { useGridPlusColumnState } from "./hooks/useGridPlusColumnState";
5
5
  import "./ag-grid-theme-builder.css";
6
- export var useGridPlusColumnState = function useGridPlusColumnState() {
7
- return React.useContext(GridPlusContext);
8
- };
9
- export { AgGridPlus, AgGridColumn, GridPlusContext };
6
+ export { AgGridPlus, AgGridColumn, GridPlusContext, useGridPlusColumnState };
10
7
  export { dateValueFormatter, dateTimeValueFormatter, convertFilterModel, convertSortModel, flattenTreeDeep, toTree, flatten } from "./utils";
@@ -16,7 +16,7 @@ import { SettingOutlined } from '@ant-design/icons';
16
16
  import ArrayTable from "../../array-table";
17
17
  import { Dropdown } from 'antd';
18
18
  import DiySetting from "./diySetting";
19
- import { useGridPlusColumnState } from '..';
19
+ import { useGridPlusColumnState } from "../hooks/useGridPlusColumnState";
20
20
  var Setting = function Setting(props) {
21
21
  var gridKey = props.gridKey,
22
22
  gridApi = props.gridApi,
@@ -0,0 +1,126 @@
1
+ import { ColDef } from 'ag-grid-community';
2
+ /**
3
+ * 列配置类型定义
4
+ */
5
+ export interface ColumnConfig {
6
+ /** 列标题 */
7
+ headerName: string;
8
+ /** 数据字段 */
9
+ dataIndex: string;
10
+ /** 列宽度 */
11
+ width?: number;
12
+ /** 最小宽度 */
13
+ minWidth?: number;
14
+ /** 最大宽度 */
15
+ maxWidth?: number;
16
+ /** 是否可调整大小 */
17
+ resizable?: boolean;
18
+ /** 是否可排序 */
19
+ sortable?: boolean;
20
+ /** 是否可筛选 */
21
+ filter?: boolean | string;
22
+ /** 对齐方式 */
23
+ align?: 'left' | 'center' | 'right';
24
+ /** 是否固定列 */
25
+ pinned?: 'left' | 'right' | null;
26
+ /** 是否隐藏 */
27
+ hide?: boolean;
28
+ /** 是否省略显示 */
29
+ ellipsis?: boolean;
30
+ /** 是否可编辑 */
31
+ editable?: boolean;
32
+ /** 自定义 AG-Grid 配置 */
33
+ agGridProps?: Partial<ColDef>;
34
+ }
35
+ /**
36
+ * 文本列配置
37
+ * 用于显示和编辑文本内容
38
+ */
39
+ export declare const createTextColumn: (config: ColumnConfig) => ColumnConfig;
40
+ /**
41
+ * 数字列配置
42
+ * 用于显示和编辑数字内容
43
+ */
44
+ export declare const createNumberColumn: (config: ColumnConfig) => ColumnConfig;
45
+ /**
46
+ * 日期列配置
47
+ * 用于显示和编辑日期内容
48
+ */
49
+ export declare const createDateColumn: (config: ColumnConfig) => ColumnConfig;
50
+ /**
51
+ * 选择列配置
52
+ * 用于下拉选择类型的列
53
+ */
54
+ export declare const createSelectColumn: (config: ColumnConfig) => ColumnConfig;
55
+ /**
56
+ * 操作列配置
57
+ * 用于行操作按钮列
58
+ */
59
+ export declare const createOperationColumn: (config: Omit<ColumnConfig, 'dataIndex'>) => ColumnConfig;
60
+ /**
61
+ * 序号列配置
62
+ * 用于显示行序号
63
+ */
64
+ export declare const createIndexColumn: (config?: Partial<ColumnConfig>) => ColumnConfig;
65
+ /**
66
+ * 只读列配置
67
+ * 用于显示不可编辑的内容
68
+ */
69
+ export declare const createReadOnlyColumn: (config: ColumnConfig) => ColumnConfig;
70
+ /**
71
+ * 固定左侧列配置
72
+ */
73
+ export declare const createPinnedLeftColumn: (config: ColumnConfig) => ColumnConfig;
74
+ /**
75
+ * 固定右侧列配置
76
+ */
77
+ export declare const createPinnedRightColumn: (config: ColumnConfig) => ColumnConfig;
78
+ /**
79
+ * 百分比列配置
80
+ * 用于显示百分比数值
81
+ */
82
+ export declare const createPercentColumn: (config: ColumnConfig) => ColumnConfig;
83
+ /**
84
+ * 货币列配置
85
+ * 用于显示货币金额
86
+ */
87
+ export declare const createCurrencyColumn: (config: ColumnConfig) => ColumnConfig;
88
+ /**
89
+ * 批量创建列配置
90
+ * @param columns 列配置数组
91
+ * @returns 标准化的列配置数组
92
+ */
93
+ export declare const createColumns: (columns: ColumnConfig[]) => ColumnConfig[];
94
+ /**
95
+ * 列配置预设
96
+ */
97
+ export declare const ColumnPresets: {
98
+ /** 文本列 */
99
+ text: (config: ColumnConfig) => ColumnConfig;
100
+ /** 数字列 */
101
+ number: (config: ColumnConfig) => ColumnConfig;
102
+ /** 日期列 */
103
+ date: (config: ColumnConfig) => ColumnConfig;
104
+ /** 选择列 */
105
+ select: (config: ColumnConfig) => ColumnConfig;
106
+ /** 操作列 */
107
+ operation: (config: Omit<ColumnConfig, 'dataIndex'>) => ColumnConfig;
108
+ /** 序号列 */
109
+ index: (config?: Partial<ColumnConfig>) => ColumnConfig;
110
+ /** 只读列 */
111
+ readOnly: (config: ColumnConfig) => ColumnConfig;
112
+ /** 固定左侧列 */
113
+ pinnedLeft: (config: ColumnConfig) => ColumnConfig;
114
+ /** 固定右侧列 */
115
+ pinnedRightColumn: (config: ColumnConfig) => ColumnConfig;
116
+ /** 百分比列 */
117
+ percent: (config: ColumnConfig) => ColumnConfig;
118
+ /** 货币列 */
119
+ currency: (config: ColumnConfig) => ColumnConfig;
120
+ };
121
+ /**
122
+ * 转换为 AG-Grid 列定义
123
+ * @param config 列配置
124
+ * @returns AG-Grid ColDef
125
+ */
126
+ export declare const toAgGridColDef: (config: ColumnConfig) => Partial<ColDef>;
@@ -0,0 +1,235 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
+ /**
8
+ * 列配置类型定义
9
+ */
10
+
11
+ /**
12
+ * 文本列配置
13
+ * 用于显示和编辑文本内容
14
+ */
15
+ export var createTextColumn = function createTextColumn(config) {
16
+ return _objectSpread({
17
+ resizable: true,
18
+ sortable: true,
19
+ filter: 'agTextColumnFilter',
20
+ align: 'left',
21
+ editable: true,
22
+ ellipsis: true
23
+ }, config);
24
+ };
25
+
26
+ /**
27
+ * 数字列配置
28
+ * 用于显示和编辑数字内容
29
+ */
30
+ export var createNumberColumn = function createNumberColumn(config) {
31
+ return _objectSpread({
32
+ resizable: true,
33
+ sortable: true,
34
+ filter: 'agNumberColumnFilter',
35
+ align: 'right',
36
+ editable: true
37
+ }, config);
38
+ };
39
+
40
+ /**
41
+ * 日期列配置
42
+ * 用于显示和编辑日期内容
43
+ */
44
+ export var createDateColumn = function createDateColumn(config) {
45
+ return _objectSpread({
46
+ resizable: true,
47
+ sortable: true,
48
+ filter: 'agDateColumnFilter',
49
+ align: 'center',
50
+ editable: true
51
+ }, config);
52
+ };
53
+
54
+ /**
55
+ * 选择列配置
56
+ * 用于下拉选择类型的列
57
+ */
58
+ export var createSelectColumn = function createSelectColumn(config) {
59
+ return _objectSpread({
60
+ resizable: true,
61
+ sortable: true,
62
+ filter: 'agSetColumnFilter',
63
+ align: 'left',
64
+ editable: true
65
+ }, config);
66
+ };
67
+
68
+ /**
69
+ * 操作列配置
70
+ * 用于行操作按钮列
71
+ */
72
+ export var createOperationColumn = function createOperationColumn(config) {
73
+ return _objectSpread({
74
+ dataIndex: 'operations',
75
+ resizable: false,
76
+ sortable: false,
77
+ filter: false,
78
+ pinned: 'right',
79
+ width: 120,
80
+ align: 'center'
81
+ }, config);
82
+ };
83
+
84
+ /**
85
+ * 序号列配置
86
+ * 用于显示行序号
87
+ */
88
+ export var createIndexColumn = function createIndexColumn(config) {
89
+ return _objectSpread({
90
+ headerName: '序号',
91
+ dataIndex: 'index',
92
+ width: 80,
93
+ resizable: false,
94
+ sortable: false,
95
+ filter: false,
96
+ align: 'center',
97
+ pinned: 'left'
98
+ }, config);
99
+ };
100
+
101
+ /**
102
+ * 只读列配置
103
+ * 用于显示不可编辑的内容
104
+ */
105
+ export var createReadOnlyColumn = function createReadOnlyColumn(config) {
106
+ return _objectSpread({
107
+ resizable: true,
108
+ sortable: true,
109
+ editable: false
110
+ }, config);
111
+ };
112
+
113
+ /**
114
+ * 固定左侧列配置
115
+ */
116
+ export var createPinnedLeftColumn = function createPinnedLeftColumn(config) {
117
+ return _objectSpread(_objectSpread({}, config), {}, {
118
+ pinned: 'left'
119
+ });
120
+ };
121
+
122
+ /**
123
+ * 固定右侧列配置
124
+ */
125
+ export var createPinnedRightColumn = function createPinnedRightColumn(config) {
126
+ return _objectSpread(_objectSpread({}, config), {}, {
127
+ pinned: 'right'
128
+ });
129
+ };
130
+
131
+ /**
132
+ * 百分比列配置
133
+ * 用于显示百分比数值
134
+ */
135
+ export var createPercentColumn = function createPercentColumn(config) {
136
+ return _objectSpread({
137
+ resizable: true,
138
+ sortable: true,
139
+ filter: 'agNumberColumnFilter',
140
+ align: 'right',
141
+ editable: true
142
+ }, config);
143
+ };
144
+
145
+ /**
146
+ * 货币列配置
147
+ * 用于显示货币金额
148
+ */
149
+ export var createCurrencyColumn = function createCurrencyColumn(config) {
150
+ return _objectSpread({
151
+ resizable: true,
152
+ sortable: true,
153
+ filter: 'agNumberColumnFilter',
154
+ align: 'right',
155
+ editable: true
156
+ }, config);
157
+ };
158
+
159
+ /**
160
+ * 批量创建列配置
161
+ * @param columns 列配置数组
162
+ * @returns 标准化的列配置数组
163
+ */
164
+ export var createColumns = function createColumns(columns) {
165
+ return columns.map(function (col) {
166
+ return _objectSpread({
167
+ resizable: true,
168
+ sortable: false,
169
+ align: 'left'
170
+ }, col);
171
+ });
172
+ };
173
+
174
+ /**
175
+ * 列配置预设
176
+ */
177
+ export var ColumnPresets = {
178
+ /** 文本列 */
179
+ text: createTextColumn,
180
+ /** 数字列 */
181
+ number: createNumberColumn,
182
+ /** 日期列 */
183
+ date: createDateColumn,
184
+ /** 选择列 */
185
+ select: createSelectColumn,
186
+ /** 操作列 */
187
+ operation: createOperationColumn,
188
+ /** 序号列 */
189
+ index: createIndexColumn,
190
+ /** 只读列 */
191
+ readOnly: createReadOnlyColumn,
192
+ /** 固定左侧列 */
193
+ pinnedLeft: createPinnedLeftColumn,
194
+ /** 固定右侧列 */
195
+ pinnedRightColumn: createPinnedRightColumn,
196
+ /** 百分比列 */
197
+ percent: createPercentColumn,
198
+ /** 货币列 */
199
+ currency: createCurrencyColumn
200
+ };
201
+
202
+ /**
203
+ * 转换为 AG-Grid 列定义
204
+ * @param config 列配置
205
+ * @returns AG-Grid ColDef
206
+ */
207
+ export var toAgGridColDef = function toAgGridColDef(config) {
208
+ var headerName = config.headerName,
209
+ dataIndex = config.dataIndex,
210
+ width = config.width,
211
+ minWidth = config.minWidth,
212
+ maxWidth = config.maxWidth,
213
+ resizable = config.resizable,
214
+ sortable = config.sortable,
215
+ filter = config.filter,
216
+ align = config.align,
217
+ pinned = config.pinned,
218
+ hide = config.hide,
219
+ editable = config.editable,
220
+ agGridProps = config.agGridProps;
221
+ return _objectSpread({
222
+ headerName: headerName,
223
+ field: dataIndex,
224
+ width: width,
225
+ minWidth: minWidth,
226
+ maxWidth: maxWidth,
227
+ resizable: resizable,
228
+ sortable: sortable,
229
+ filter: filter,
230
+ cellClass: align ? "ag-cell-".concat(align) : undefined,
231
+ pinned: pinned || undefined,
232
+ hide: hide,
233
+ editable: editable
234
+ }, agGridProps);
235
+ };
@@ -0,0 +1,23 @@
1
+ import { RefObject } from 'react';
2
+ import { ArrayField } from '@formily/core';
3
+ /**
4
+ * 单元格聚焦 Hook
5
+ * 处理 Editable 包装和普通输入框的聚焦逻辑
6
+ */
7
+ export declare const useCellFocus: () => {
8
+ focusInputInCell: (cell: Element) => void;
9
+ };
10
+ /**
11
+ * 键盘导航 Hook
12
+ * 处理方向键在表格单元格间的导航
13
+ */
14
+ export declare const useKeyboardNavigation: (ref: RefObject<any>, dataSource: any[], focusInputInCell: (cell: Element) => void) => {
15
+ handleCellKeyDown: (event: any) => void;
16
+ };
17
+ /**
18
+ * 行拖拽 Hook
19
+ * 处理行拖拽排序逻辑
20
+ */
21
+ export declare const useRowDrag: (field: ArrayField) => {
22
+ handleRowDragMove: (event: any) => void;
23
+ };