@nokecy/qc-ui-components 0.0.0-stage → 2.0.0-beta.0

package/dist/esm/array-table/columnGroup.js

@@ -0,0 +1,100 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * ArrayTable 分组表头(多级表头)。
+ *
+ * 背景:schema 里的每个 ArrayTable.Column 被抽成「扁平」列定义(buildArrayTableColumns),
+ * 内部一批逻辑(懒挂载列识别、列方案还原、首列拖拽等)都按扁平列取值,不能改。
+ * 所以分组只在「交给 AG-Grid 的那一份 columnDefs」上做:
+ *  1. buildArrayTableColumns 生成列定义时,用 markHeaderGroup 把列声明的 headerGroup 记下来;
+ *  2. index.tsx 把扁平列定义交给 groupColumnDefs,得到含列组的 columnDefs 传给 AgGridReact。
+ *
+ * 分组名记在模块内的 WeakMap 里,不往 colDef 上塞自定义字段——AG-Grid 会把未知属性当作错误告警。
+ *
+ * 只支持一级分组;分组名相同但不相邻的列各自成组。
+ *
+ * @author nokecy
+ */
+
+/** 列定义 -> 它在 schema 里声明的 headerGroup */
+var headerGroupOf = new WeakMap();
+
+/** 列组 id 前缀,与列方案里生成的 col_N 区分开 */
+var GROUP_ID_PREFIX = 'arrayTableGroup_';
+
+/**
+ * 记下列定义所属的表头分组。
+ * headerGroup 不是非空字符串(没声明、空串、纯空白)时不做任何事,该列按无分组处理。
+ * 返回传入的 colDef 本身,方便链式使用。
+ */
+export var markHeaderGroup = function markHeaderGroup(colDef, headerGroup) {
+  if (typeof headerGroup === 'string' && headerGroup.trim() !== '') {
+    headerGroupOf.set(colDef, headerGroup);
+  }
+  return colDef;
+};
+
+/**
+ * 把扁平列定义按「相邻且 headerGroup 相同」合并成 AG-Grid 列组。
+ *
+ *  - 相邻同名的列 -> 一个 { headerName, groupId, children } 列组;
+ *  - 同名但被别的列隔开 -> 各自成组,groupId 各不相同;
+ *  - 没声明分组的列原样保留(同一个对象);
+ *  - 一个分组也没有时直接返回传入的数组本身,没用到分组的表格行为零变化。
+ *
+ * groupId 由分组名派生(同名第 N 次出现追加 _N),同样的输入永远得到同样的 id:
+ * columnDefs 因别的原因重建时,AG-Grid 靠 groupId 认出还是那个列组,列组状态不丢。
+ *
+ * 有意不设 marryChildren:设了以后,任何打破组内相邻的列顺序(用户旧的扁平列方案、
+ * 列设置面板里跨组拖动的实时预览)都会被 AG-Grid 整体丢弃并报 error #39;不设则顺序照常生效,
+ * 组被隔开时表头显示成多段。
+ * openByDefault:列组默认展开(只对配了 columnGroupShow 的可折叠列组有意义)。
+ */
+export var groupColumnDefs = function groupColumnDefs(colDefs) {
+  if (!colDefs.some(function (colDef) {
+    return headerGroupOf.has(colDef);
+  })) return colDefs;
+  var usedGroupIds = new Set();
+  var makeGroupId = function makeGroupId(name) {
+    var id = "".concat(GROUP_ID_PREFIX).concat(name);
+    for (var n = 2; usedGroupIds.has(id); n++) {
+      id = "".concat(GROUP_ID_PREFIX).concat(name, "_").concat(n);
+    }
+    usedGroupIds.add(id);
+    return id;
+  };
+  var result = [];
+  var current = null;
+  var _iterator = _createForOfIteratorHelper(colDefs),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var colDef = _step.value;
+      var name = headerGroupOf.get(colDef);
+      if (name === undefined) {
+        current = null;
+        result.push(colDef);
+      } else if (current && current.name === name) {
+        current.group.children.push(colDef);
+      } else {
+        var group = {
+          headerName: name,
+          groupId: makeGroupId(name),
+          openByDefault: true,
+          children: [colDef]
+        };
+        current = {
+          name: name,
+          group: group
+        };
+        result.push(group);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return result;
+};

package/dist/esm/array-table/columnHelper.d.ts

@@ -0,0 +1,126 @@
+import { ColDef } from 'ag-grid-community';
+/**
+ * 列配置类型定义
+ */
+export interface ColumnConfig {
+    /** 列标题 */
+    headerName: string;
+    /** 数据字段 */
+    dataIndex: string;
+    /** 列宽度 */
+    width?: number;
+    /** 最小宽度 */
+    minWidth?: number;
+    /** 最大宽度 */
+    maxWidth?: number;
+    /** 是否可调整大小 */
+    resizable?: boolean;
+    /** 是否可排序 */
+    sortable?: boolean;
+    /** 是否可筛选 */
+    filter?: boolean | string;
+    /** 对齐方式 */
+    align?: 'left' | 'center' | 'right';
+    /** 是否固定列 */
+    pinned?: 'left' | 'right' | null;
+    /** 是否隐藏 */
+    hide?: boolean;
+    /** 是否省略显示 */
+    ellipsis?: boolean;
+    /** 是否可编辑 */
+    editable?: boolean;
+    /** 自定义 AG-Grid 配置 */
+    agGridProps?: Partial<ColDef>;
+}
+/**
+ * 文本列配置
+ * 用于显示和编辑文本内容
+ */
+export declare const createTextColumn: (config: ColumnConfig) => ColumnConfig;
+/**
+ * 数字列配置
+ * 用于显示和编辑数字内容
+ */
+export declare const createNumberColumn: (config: ColumnConfig) => ColumnConfig;
+/**
+ * 日期列配置
+ * 用于显示和编辑日期内容
+ */
+export declare const createDateColumn: (config: ColumnConfig) => ColumnConfig;
+/**
+ * 选择列配置
+ * 用于下拉选择类型的列
+ */
+export declare const createSelectColumn: (config: ColumnConfig) => ColumnConfig;
+/**
+ * 操作列配置
+ * 用于行操作按钮列
+ */
+export declare const createOperationColumn: (config: Omit<ColumnConfig, 'dataIndex'>) => ColumnConfig;
+/**
+ * 序号列配置
+ * 用于显示行序号
+ */
+export declare const createIndexColumn: (config?: Partial<ColumnConfig>) => ColumnConfig;
+/**
+ * 只读列配置
+ * 用于显示不可编辑的内容
+ */
+export declare const createReadOnlyColumn: (config: ColumnConfig) => ColumnConfig;
+/**
+ * 固定左侧列配置
+ */
+export declare const createPinnedLeftColumn: (config: ColumnConfig) => ColumnConfig;
+/**
+ * 固定右侧列配置
+ */
+export declare const createPinnedRightColumn: (config: ColumnConfig) => ColumnConfig;
+/**
+ * 百分比列配置
+ * 用于显示百分比数值
+ */
+export declare const createPercentColumn: (config: ColumnConfig) => ColumnConfig;
+/**
+ * 货币列配置
+ * 用于显示货币金额
+ */
+export declare const createCurrencyColumn: (config: ColumnConfig) => ColumnConfig;
+/**
+ * 批量创建列配置
+ * @param columns 列配置数组
+ * @returns 标准化的列配置数组
+ */
+export declare const createColumns: (columns: ColumnConfig[]) => ColumnConfig[];
+/**
+ * 列配置预设
+ */
+export declare const ColumnPresets: {
+    /** 文本列 */
+    text: (config: ColumnConfig) => ColumnConfig;
+    /** 数字列 */
+    number: (config: ColumnConfig) => ColumnConfig;
+    /** 日期列 */
+    date: (config: ColumnConfig) => ColumnConfig;
+    /** 选择列 */
+    select: (config: ColumnConfig) => ColumnConfig;
+    /** 操作列 */
+    operation: (config: Omit<ColumnConfig, 'dataIndex'>) => ColumnConfig;
+    /** 序号列 */
+    index: (config?: Partial<ColumnConfig>) => ColumnConfig;
+    /** 只读列 */
+    readOnly: (config: ColumnConfig) => ColumnConfig;
+    /** 固定左侧列 */
+    pinnedLeft: (config: ColumnConfig) => ColumnConfig;
+    /** 固定右侧列 */
+    pinnedRightColumn: (config: ColumnConfig) => ColumnConfig;
+    /** 百分比列 */
+    percent: (config: ColumnConfig) => ColumnConfig;
+    /** 货币列 */
+    currency: (config: ColumnConfig) => ColumnConfig;
+};
+/**
+ * 转换为 AG-Grid 列定义
+ * @param config 列配置
+ * @returns AG-Grid ColDef
+ */
+export declare const toAgGridColDef: (config: ColumnConfig) => Partial<ColDef>;

package/dist/esm/array-table/columnHelper.js

@@ -0,0 +1,235 @@
+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); }
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+/**
+ * 列配置类型定义
+ */
+
+/**
+ * 文本列配置
+ * 用于显示和编辑文本内容
+ */
+export var createTextColumn = function createTextColumn(config) {
+  return _objectSpread({
+    resizable: true,
+    sortable: true,
+    filter: 'agTextColumnFilter',
+    align: 'left',
+    editable: true,
+    ellipsis: true
+  }, config);
+};
+
+/**
+ * 数字列配置
+ * 用于显示和编辑数字内容
+ */
+export var createNumberColumn = function createNumberColumn(config) {
+  return _objectSpread({
+    resizable: true,
+    sortable: true,
+    filter: 'agNumberColumnFilter',
+    align: 'right',
+    editable: true
+  }, config);
+};
+
+/**
+ * 日期列配置
+ * 用于显示和编辑日期内容
+ */
+export var createDateColumn = function createDateColumn(config) {
+  return _objectSpread({
+    resizable: true,
+    sortable: true,
+    filter: 'agDateColumnFilter',
+    align: 'center',
+    editable: true
+  }, config);
+};
+
+/**
+ * 选择列配置
+ * 用于下拉选择类型的列
+ */
+export var createSelectColumn = function createSelectColumn(config) {
+  return _objectSpread({
+    resizable: true,
+    sortable: true,
+    filter: 'agSetColumnFilter',
+    align: 'left',
+    editable: true
+  }, config);
+};
+
+/**
+ * 操作列配置
+ * 用于行操作按钮列
+ */
+export var createOperationColumn = function createOperationColumn(config) {
+  return _objectSpread({
+    dataIndex: 'operations',
+    resizable: false,
+    sortable: false,
+    filter: false,
+    pinned: 'right',
+    width: 120,
+    align: 'center'
+  }, config);
+};
+
+/**
+ * 序号列配置
+ * 用于显示行序号
+ */
+export var createIndexColumn = function createIndexColumn(config) {
+  return _objectSpread({
+    headerName: '序号',
+    dataIndex: 'index',
+    width: 80,
+    resizable: false,
+    sortable: false,
+    filter: false,
+    align: 'center',
+    pinned: 'left'
+  }, config);
+};
+
+/**
+ * 只读列配置
+ * 用于显示不可编辑的内容
+ */
+export var createReadOnlyColumn = function createReadOnlyColumn(config) {
+  return _objectSpread({
+    resizable: true,
+    sortable: true,
+    editable: false
+  }, config);
+};
+
+/**
+ * 固定左侧列配置
+ */
+export var createPinnedLeftColumn = function createPinnedLeftColumn(config) {
+  return _objectSpread(_objectSpread({}, config), {}, {
+    pinned: 'left'
+  });
+};
+
+/**
+ * 固定右侧列配置
+ */
+export var createPinnedRightColumn = function createPinnedRightColumn(config) {
+  return _objectSpread(_objectSpread({}, config), {}, {
+    pinned: 'right'
+  });
+};
+
+/**
+ * 百分比列配置
+ * 用于显示百分比数值
+ */
+export var createPercentColumn = function createPercentColumn(config) {
+  return _objectSpread({
+    resizable: true,
+    sortable: true,
+    filter: 'agNumberColumnFilter',
+    align: 'right',
+    editable: true
+  }, config);
+};
+
+/**
+ * 货币列配置
+ * 用于显示货币金额
+ */
+export var createCurrencyColumn = function createCurrencyColumn(config) {
+  return _objectSpread({
+    resizable: true,
+    sortable: true,
+    filter: 'agNumberColumnFilter',
+    align: 'right',
+    editable: true
+  }, config);
+};
+
+/**
+ * 批量创建列配置
+ * @param columns 列配置数组
+ * @returns 标准化的列配置数组
+ */
+export var createColumns = function createColumns(columns) {
+  return columns.map(function (col) {
+    return _objectSpread({
+      resizable: true,
+      sortable: false,
+      align: 'left'
+    }, col);
+  });
+};
+
+/**
+ * 列配置预设
+ */
+export var ColumnPresets = {
+  /** 文本列 */
+  text: createTextColumn,
+  /** 数字列 */
+  number: createNumberColumn,
+  /** 日期列 */
+  date: createDateColumn,
+  /** 选择列 */
+  select: createSelectColumn,
+  /** 操作列 */
+  operation: createOperationColumn,
+  /** 序号列 */
+  index: createIndexColumn,
+  /** 只读列 */
+  readOnly: createReadOnlyColumn,
+  /** 固定左侧列 */
+  pinnedLeft: createPinnedLeftColumn,
+  /** 固定右侧列 */
+  pinnedRightColumn: createPinnedRightColumn,
+  /** 百分比列 */
+  percent: createPercentColumn,
+  /** 货币列 */
+  currency: createCurrencyColumn
+};
+
+/**
+ * 转换为 AG-Grid 列定义
+ * @param config 列配置
+ * @returns AG-Grid ColDef
+ */
+export var toAgGridColDef = function toAgGridColDef(config) {
+  var headerName = config.headerName,
+    dataIndex = config.dataIndex,
+    width = config.width,
+    minWidth = config.minWidth,
+    maxWidth = config.maxWidth,
+    resizable = config.resizable,
+    sortable = config.sortable,
+    filter = config.filter,
+    align = config.align,
+    pinned = config.pinned,
+    hide = config.hide,
+    editable = config.editable,
+    agGridProps = config.agGridProps;
+  return _objectSpread({
+    headerName: headerName,
+    field: dataIndex,
+    width: width,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    resizable: resizable,
+    sortable: sortable,
+    filter: filter,
+    cellClass: align ? "qc-array-table-align-".concat(align) : undefined,
+    pinned: pinned || undefined,
+    hide: hide,
+    editable: editable
+  }, agGridProps);
+};

package/dist/esm/array-table/fixedGuard.d.ts

@@ -0,0 +1,77 @@
+/**
+ * 列 `fixed` 别名的宽度保护。
+ *
+ * `fixed`(antd Table 写法)会映射成 AG-Grid 的 pinned。schema 里写了很多 fixed 的表(几列固定在左、操作列固定在右),
+ * 在窄屏上固定列自己就占满可视宽度,中间区域没有空间、无法横向滚动。保护的做法:固定列总宽超过
+ * 可视宽度的 `fixedColumnsMaxRatio`(默认 0.5)时,取消「由 fixed 推导出来」的固定列,表格变宽后再恢复。
+ * 开发者显式写的 `pinned`、默认序号列等不受影响(但它们的宽度计入占用)。
+ *
+ * 取消顺序:左固定组从最靠内侧(最右)的列开始逐列取消;右固定(通常是操作列)优先保留,
+ * 仅靠取消左固定仍超阈值时,才从右固定组最靠内侧(最左)的列开始取消。
+ *
+ * 本文件是纯计算,不依赖 AG-Grid 运行时;index.tsx 用 onGridSizeChanged / onColumnResized 等事件调用并用
+ * applyColumnState 应用结果。
+ *
+ * @author nokecy
+ */
+import type { ColDef } from 'ag-grid-community';
+export type PinnedSide = 'left' | 'right';
+/** 默认阈值:固定列总宽最多占可视宽度的一半 */
+export declare const DEFAULT_FIXED_COLUMNS_MAX_RATIO = 0.5;
+/** 记下列的固定来自 fixed 别名;side 为空时不做事。返回传入的 colDef。 */
+export declare const markFixedDerived: <T extends object>(colDef: T, side: PinnedSide | undefined) => T;
+/** 取列定义上记录的 fixed 推导固定侧 */
+export declare const getFixedDerivedSide: (colDef: ColDef | object) => PinnedSide | undefined;
+export interface GuardColumn {
+    colId: string;
+    width: number;
+    /** 有效固定侧(包含「保护取消了、原本该固定」的列),未固定为 null */
+    pinned: PinnedSide | null | undefined;
+    /** 固定是否来自 fixed 别名(只有它们能被取消) */
+    derived?: boolean;
+}
+/** 固定列(左+右)总宽 / 可视宽度 */
+export declare const pinnedWidthRatio: (columns: GuardColumn[], viewportWidth: number) => number;
+/**
+ * 给定列(按显示顺序)、可视宽度与阈值,返回应取消固定的列 id(按取消顺序)。
+ */
+export declare const planFixedRelease: (columns: GuardColumn[], viewportWidth: number, maxRatio?: number) => string[];
+/** 来自 AG-Grid getColumnState() 的最小子集 */
+export interface ColumnStateLite {
+    colId: string;
+    width?: number;
+    pinned?: PinnedSide | boolean | null;
+    hide?: boolean | null;
+}
+export interface ReconcileInput {
+    /** 按显示顺序的列状态 */
+    state: ColumnStateLite[];
+    /** 由 fixed 别名推导固定的列 -> 固定侧 */
+    derivedSides: Record<string, PinnedSide>;
+    /** 已被保护取消固定的列 */
+    released: ReadonlySet<string>;
+    viewportWidth: number;
+    maxRatio?: number;
+}
+export interface ReconcileResult {
+    /** 需要应用到 AG-Grid 的固定状态变更;空数组表示无需调用 API */
+    changes: Array<{
+        colId: string;
+        pinned: PinnedSide | null;
+    }>;
+    /** 应用后被保护取消固定的列 */
+    released: Set<string>;
+    /** 本次新取消固定的列(用于开发环境告警) */
+    newlyReleased: string[];
+    /** 计算时固定列总宽 / 可视宽度 */
+    ratio: number;
+}
+/**
+ * 对照当前列状态重新计算哪些推导固定列该取消、哪些该恢复。
+ *
+ * 与用户手动操作的取舍:
+ *  - 用户把推导列手动取消固定(不在 released 里却已是未固定):尊重,不恢复;
+ *  - 用户把推导列改固定到另一侧,或把被保护取消的列重新固定:视为显式 pinned,此后不再受保护(宽度仍计入占用);
+ *  - 用户拖拽列宽无法与窗口变化区分,宽度保护始终按当前实际列宽计算。
+ */
+export declare const reconcileFixedColumns: (input: ReconcileInput) => ReconcileResult;