@canvas-components/list-table 0.3.34 → 0.3.36

package/dist/index.cjs

@@ -783,6 +783,7 @@ function normalizeColumn(column, depth, parentKey) {
     showExpandIcon: column.showExpandIcon,
     ellipsis: column.ellipsis,
     editable: column.editable,
+    showEditIcon: column.showEditIcon,
     formItemProps: column.formItemProps,
     allowSort: column.allowSort ?? (column.sorter != null ? column.sorter !== false : void 0),
     sortValueGetter: column.sortValueGetter,
@@ -5313,6 +5314,31 @@ function drawHeaderActionGlyph(ctx, rect, actionType, color = "#8c8c8c", sortOrd
   }
   ctx.restore();
 }
+function drawHeaderEditMarker(ctx, headerRect) {
+  const size = Math.max(0, Math.min(10, headerRect.width - 2, headerRect.height - 2));
+  const rect = { x: headerRect.x + 1, y: headerRect.y + 1, width: size, height: size };
+  if (size > 0) {
+    ctx.save();
+    ctx.fillStyle = "rgba(22, 119, 255, 0.08)";
+    ctx.beginPath();
+    const { x, y } = rect;
+    const radius = Math.min(4, size / 2);
+    if (typeof ctx.arcTo === "function") {
+      ctx.moveTo(x + radius, y);
+      ctx.arcTo(x + size, y, x + size, y + size, radius);
+      ctx.arcTo(x + size, y + size, x, y + size, radius);
+      ctx.arcTo(x, y + size, x, y, radius);
+      ctx.arcTo(x, y, x + size, y, radius);
+      ctx.closePath();
+    } else {
+      ctx.rect(x, y, size, size);
+    }
+    ctx.fill();
+    ctx.restore();
+    drawHeaderActionGlyph(ctx, rect, "edit", "#1677ff");
+  }
+  return rect;
+}
 function drawEditIcon(ctx, rect) {
   const scale = Math.min(rect.width, rect.height) / 14;
   const x = rect.x + (rect.width - 14 * scale) / 2;
@@ -8850,15 +8876,14 @@ function drawHeaderCell(params, cell, clipRect) {
   );
   const isExpandSystemColumn = cell.node.children.length === 0 && cell.node.column.meta?.systemType === "expandable";
   const isRowSelectorSystemColumn = cell.node.children.length === 0 && cell.node.column.meta?.systemType === "rowSelector";
-  const isEditableLeaf = cell.node.children.length === 0 && !!cell.node.column.editable;
+  const isEditableLeaf = cell.node.children.length === 0 && !!cell.node.column.editable && cell.node.column.showEditIcon !== false;
   const visibleState = getHeaderActionVisibilityState(
     cell.node.key,
     params.hoveredColumnKey,
     params.sortState.find((item) => item.key === cell.node.key)?.key ?? null,
     params.filteredColumnKeys,
     params.filterableColumnKeys,
-    params.fixedColumnKeys,
-    isEditableLeaf
+    params.fixedColumnKeys
   );
   const titleContent = cell.node.titleContent ?? [
     { type: "text", text: cell.node.title }
@@ -8870,7 +8895,6 @@ function drawHeaderCell(params, cell, clipRect) {
     actionVisibilityState: visibleState,
     allowActions: cell.node.children.length === 0,
     hasFilter: params.filterableColumnKeys.has(cell.node.key),
-    hasEdit: isEditableLeaf,
     contentWidth: measureHeaderContentWidth(ctx, titleContent),
     paddingInline: cell.node.style?.paddingInline,
     contentInsetStart: resolveHeaderContentInsetStart({
@@ -9037,18 +9061,29 @@ function measureHeaderContentWidth(ctx, contents) {
   ) + Math.max(contents.length - 1, 0) * gap;
 }
 function drawHeaderActions(params, rect, columnKey, visibilityState, fixed, visibleRect = rect, hasEdit = false, selected = false) {
-  if (!visibilityState.visible) {
-    return;
-  }
   const { ctx, descriptors } = params;
   ctx.save();
   ctx.beginPath();
   ctx.rect(visibleRect.x, visibleRect.y, visibleRect.width, visibleRect.height);
   ctx.clip();
+  if (hasEdit) {
+    const hitRect = intersectRects(drawHeaderEditMarker(ctx, rect), visibleRect);
+    if (hitRect) descriptors.push({
+      kind: "header",
+      rect: hitRect,
+      columnKey,
+      fixed,
+      debugNodeType: "header-edit-icon",
+      debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
+    });
+  }
+  if (!visibilityState.visible) {
+    ctx.restore();
+    return;
+  }
   const actionLayout = getHeaderActionLayout({
     rect,
     hasFilter: params.filterableColumnKeys.has(columnKey),
-    hasEdit,
     visibilityState,
     trailingInset: resolveCollapsedColumnMarkerSet(
       params.collapsedColumnMarkers,
@@ -9079,28 +9114,7 @@ function drawHeaderActions(params, rect, columnKey, visibilityState, fixed, visi
       width: ACTION_SIZE2,
       height: ACTION_SIZE2
     };
-    if (actionType === "edit") {
-      drawHeaderActionIcon(
-        ctx,
-        actionRect,
-        "edit",
-        true,
-        false,
-        headerSelected,
-        params.theme.selectionBackgroundColor
-      );
-      const hitRect2 = intersectRects(actionRect, visibleRect);
-      if (hitRect2)
-        descriptors.push({
-          kind: "header",
-          rect: hitRect2,
-          columnKey,
-          fixed,
-          debugNodeType: "header-edit-icon",
-          debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
-        });
-      return;
-    }
+    if (actionType === "edit") return;
     const iconHovered = params.hoveredColumnKey === columnKey && params.hoveredActionType === (actionType === "sort" ? "sort-trigger" : actionType === "filter" ? "filter-trigger" : "fixed-trigger");
     drawHeaderActionIcon(
       ctx,
@@ -9253,7 +9267,7 @@ function getHeaderSelectionRect(rect) {
     height: size
   };
 }
-function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColumnKey, filteredColumnKeys, filterableColumnKeys, fixedColumnKeys, editable) {
+function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColumnKey, filteredColumnKeys, filterableColumnKeys, fixedColumnKeys) {
   const hovered = hoveredColumnKey === columnKey;
   const sorted = sortedColumnKey === columnKey;
   const filtered = filterableColumnKeys.has(columnKey) && filteredColumnKeys.has(columnKey);
@@ -9263,7 +9277,7 @@ function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColum
     sorted,
     filtered,
     fixed,
-    visible: hovered || sorted || filtered || fixed || editable
+    visible: hovered || sorted || filtered || fixed
   };
 }
 function getActionActive(actionType, visibilityState) {
@@ -10350,8 +10364,7 @@ function drawBodyNestedTableContent(params) {
       align: column.align ?? "left",
       actionVisibilityState,
       allowActions: true,
-      hasFilter: column.allowFilter === true,
-      hasEdit: !!column.editable
+      hasFilter: column.allowFilter === true
     });
     const headerHighlighted = isNestedTableHeaderHighlighted(
       content,
@@ -10728,11 +10741,27 @@ function drawNestedTableHeaderActions(params) {
   const filtered = highlight?.filterState?.[columnKey] != null;
   const fixed = resolveNestedColumnFixed(column, highlight);
   const headerSelected = highlight?.kind === "header" && isNestedTableRuntimeColumnMatched(highlight, column, columnIndex);
+  if (column.editable && column.showEditIcon !== false) {
+    const markerRect = drawHeaderEditMarker(drawParams.ctx, rect);
+    drawParams.descriptors.push({
+      kind: "body-content",
+      rect: markerRect,
+      columnKey: drawParams.column.key,
+      rowIndex: drawParams.rowIndex,
+      contentIndex: drawParams.contentIndex,
+      contentKey: "nested-table",
+      nestedColumnDataIndex: columnKey,
+      nestedColumnIndex: columnIndex,
+      fixed: drawParams.column.fixed,
+      frozen: drawParams.frozen,
+      debugNodeType: "nested-table-header-edit-icon",
+      debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
+    });
+  }
   if (!visibilityState.visible) return;
   const { actionTypes, startX, totalWidth } = getHeaderActionLayout({
     rect,
     hasFilter: column.allowFilter === true,
-    hasEdit: !!column.editable,
     visibilityState
   });
   drawParams.ctx.save();
@@ -10754,33 +10783,7 @@ function drawNestedTableHeaderActions(params) {
       width: size,
       height: size
     };
-    if (actionType === "edit") {
-      drawHeaderActionIcon(
-        drawParams.ctx,
-        actionRect,
-        "edit",
-        true,
-        false,
-        headerSelected,
-        drawParams.theme.selectionBackgroundColor
-      );
-      drawParams.descriptors.push({
-        kind: "body-content",
-        rect: actionRect,
-        columnKey: drawParams.column.key,
-        rowIndex: drawParams.rowIndex,
-        contentIndex: drawParams.contentIndex,
-        contentKey: "nested-table",
-        nestedColumnDataIndex: columnKey,
-        nestedColumnIndex: columnIndex,
-        fixed: drawParams.column.fixed,
-        frozen: drawParams.frozen,
-        debugNodeType: "nested-table-header-edit-icon",
-        debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
-      });
-      actionX += size + gap;
-      return;
-    }
+    if (actionType === "edit") return;
     const active = actionType === "sort" && sortOrder != null || actionType === "filter" && filtered || actionType === "fixed" && fixed != null;
     drawHeaderActionIcon(
       drawParams.ctx,
@@ -10824,7 +10827,7 @@ function resolveNestedTableHeaderActionVisibility(params) {
     sorted,
     filtered,
     fixed,
-    visible: hovered || sorted || filtered || fixed || !!column.editable
+    visible: hovered || sorted || filtered || fixed
   };
 }
 function isNestedTableRowHighlighted(content, record, rowIndex, highlight, highlightMode) {

package/dist/index.d.cts

@@ -959,6 +959,8 @@ interface ListTableNestedTableColumn {
     align?: ListTableHorizontalAlign;
     /** 是否允许编辑子表格单元格。 */
     editable?: ListTableEditable<Record<string, unknown>>;
+    /** 是否显示可编辑列的表头左上角编辑图标，默认 true；不影响编辑能力。 */
+    showEditIcon?: boolean;
     /** 子表格单元格编辑器配置。 */
     formItemProps?: ListTableFormItemProps<Record<string, unknown>>;
     fixed?: "left" | "right";
@@ -1138,6 +1140,8 @@ interface ListTableColumn<RecordType = Record<string, unknown>> {
     ellipsis?: boolean;
     /** 是否允许进入编辑输入态。 */
     editable?: ListTableEditable<RecordType>;
+    /** 是否显示可编辑列的表头左上角编辑图标，默认 true；不影响编辑能力。 */
+    showEditIcon?: boolean;
     /** 编辑器配置，未传时默认使用文本输入。 */
     formItemProps?: ListTableFormItemProps<RecordType>;
     /** 是否允许拖拽改变列宽。默认取表格级配置。 */

package/dist/index.d.ts

@@ -959,6 +959,8 @@ interface ListTableNestedTableColumn {
     align?: ListTableHorizontalAlign;
     /** 是否允许编辑子表格单元格。 */
     editable?: ListTableEditable<Record<string, unknown>>;
+    /** 是否显示可编辑列的表头左上角编辑图标，默认 true；不影响编辑能力。 */
+    showEditIcon?: boolean;
     /** 子表格单元格编辑器配置。 */
     formItemProps?: ListTableFormItemProps<Record<string, unknown>>;
     fixed?: "left" | "right";
@@ -1138,6 +1140,8 @@ interface ListTableColumn<RecordType = Record<string, unknown>> {
     ellipsis?: boolean;
     /** 是否允许进入编辑输入态。 */
     editable?: ListTableEditable<RecordType>;
+    /** 是否显示可编辑列的表头左上角编辑图标，默认 true；不影响编辑能力。 */
+    showEditIcon?: boolean;
     /** 编辑器配置，未传时默认使用文本输入。 */
     formItemProps?: ListTableFormItemProps<RecordType>;
     /** 是否允许拖拽改变列宽。默认取表格级配置。 */

package/dist/index.js

@@ -761,6 +761,7 @@ function normalizeColumn(column, depth, parentKey) {
     showExpandIcon: column.showExpandIcon,
     ellipsis: column.ellipsis,
     editable: column.editable,
+    showEditIcon: column.showEditIcon,
     formItemProps: column.formItemProps,
     allowSort: column.allowSort ?? (column.sorter != null ? column.sorter !== false : void 0),
     sortValueGetter: column.sortValueGetter,
@@ -5291,6 +5292,31 @@ function drawHeaderActionGlyph(ctx, rect, actionType, color = "#8c8c8c", sortOrd
   }
   ctx.restore();
 }
+function drawHeaderEditMarker(ctx, headerRect) {
+  const size = Math.max(0, Math.min(10, headerRect.width - 2, headerRect.height - 2));
+  const rect = { x: headerRect.x + 1, y: headerRect.y + 1, width: size, height: size };
+  if (size > 0) {
+    ctx.save();
+    ctx.fillStyle = "rgba(22, 119, 255, 0.08)";
+    ctx.beginPath();
+    const { x, y } = rect;
+    const radius = Math.min(4, size / 2);
+    if (typeof ctx.arcTo === "function") {
+      ctx.moveTo(x + radius, y);
+      ctx.arcTo(x + size, y, x + size, y + size, radius);
+      ctx.arcTo(x + size, y + size, x, y + size, radius);
+      ctx.arcTo(x, y + size, x, y, radius);
+      ctx.arcTo(x, y, x + size, y, radius);
+      ctx.closePath();
+    } else {
+      ctx.rect(x, y, size, size);
+    }
+    ctx.fill();
+    ctx.restore();
+    drawHeaderActionGlyph(ctx, rect, "edit", "#1677ff");
+  }
+  return rect;
+}
 function drawEditIcon(ctx, rect) {
   const scale = Math.min(rect.width, rect.height) / 14;
   const x = rect.x + (rect.width - 14 * scale) / 2;
@@ -8828,15 +8854,14 @@ function drawHeaderCell(params, cell, clipRect) {
   );
   const isExpandSystemColumn = cell.node.children.length === 0 && cell.node.column.meta?.systemType === "expandable";
   const isRowSelectorSystemColumn = cell.node.children.length === 0 && cell.node.column.meta?.systemType === "rowSelector";
-  const isEditableLeaf = cell.node.children.length === 0 && !!cell.node.column.editable;
+  const isEditableLeaf = cell.node.children.length === 0 && !!cell.node.column.editable && cell.node.column.showEditIcon !== false;
   const visibleState = getHeaderActionVisibilityState(
     cell.node.key,
     params.hoveredColumnKey,
     params.sortState.find((item) => item.key === cell.node.key)?.key ?? null,
     params.filteredColumnKeys,
     params.filterableColumnKeys,
-    params.fixedColumnKeys,
-    isEditableLeaf
+    params.fixedColumnKeys
   );
   const titleContent = cell.node.titleContent ?? [
     { type: "text", text: cell.node.title }
@@ -8848,7 +8873,6 @@ function drawHeaderCell(params, cell, clipRect) {
     actionVisibilityState: visibleState,
     allowActions: cell.node.children.length === 0,
     hasFilter: params.filterableColumnKeys.has(cell.node.key),
-    hasEdit: isEditableLeaf,
     contentWidth: measureHeaderContentWidth(ctx, titleContent),
     paddingInline: cell.node.style?.paddingInline,
     contentInsetStart: resolveHeaderContentInsetStart({
@@ -9015,18 +9039,29 @@ function measureHeaderContentWidth(ctx, contents) {
   ) + Math.max(contents.length - 1, 0) * gap;
 }
 function drawHeaderActions(params, rect, columnKey, visibilityState, fixed, visibleRect = rect, hasEdit = false, selected = false) {
-  if (!visibilityState.visible) {
-    return;
-  }
   const { ctx, descriptors } = params;
   ctx.save();
   ctx.beginPath();
   ctx.rect(visibleRect.x, visibleRect.y, visibleRect.width, visibleRect.height);
   ctx.clip();
+  if (hasEdit) {
+    const hitRect = intersectRects(drawHeaderEditMarker(ctx, rect), visibleRect);
+    if (hitRect) descriptors.push({
+      kind: "header",
+      rect: hitRect,
+      columnKey,
+      fixed,
+      debugNodeType: "header-edit-icon",
+      debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
+    });
+  }
+  if (!visibilityState.visible) {
+    ctx.restore();
+    return;
+  }
   const actionLayout = getHeaderActionLayout({
     rect,
     hasFilter: params.filterableColumnKeys.has(columnKey),
-    hasEdit,
     visibilityState,
     trailingInset: resolveCollapsedColumnMarkerSet(
       params.collapsedColumnMarkers,
@@ -9057,28 +9092,7 @@ function drawHeaderActions(params, rect, columnKey, visibilityState, fixed, visi
       width: ACTION_SIZE2,
       height: ACTION_SIZE2
     };
-    if (actionType === "edit") {
-      drawHeaderActionIcon(
-        ctx,
-        actionRect,
-        "edit",
-        true,
-        false,
-        headerSelected,
-        params.theme.selectionBackgroundColor
-      );
-      const hitRect2 = intersectRects(actionRect, visibleRect);
-      if (hitRect2)
-        descriptors.push({
-          kind: "header",
-          rect: hitRect2,
-          columnKey,
-          fixed,
-          debugNodeType: "header-edit-icon",
-          debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
-        });
-      return;
-    }
+    if (actionType === "edit") return;
     const iconHovered = params.hoveredColumnKey === columnKey && params.hoveredActionType === (actionType === "sort" ? "sort-trigger" : actionType === "filter" ? "filter-trigger" : "fixed-trigger");
     drawHeaderActionIcon(
       ctx,
@@ -9231,7 +9245,7 @@ function getHeaderSelectionRect(rect) {
     height: size
   };
 }
-function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColumnKey, filteredColumnKeys, filterableColumnKeys, fixedColumnKeys, editable) {
+function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColumnKey, filteredColumnKeys, filterableColumnKeys, fixedColumnKeys) {
   const hovered = hoveredColumnKey === columnKey;
   const sorted = sortedColumnKey === columnKey;
   const filtered = filterableColumnKeys.has(columnKey) && filteredColumnKeys.has(columnKey);
@@ -9241,7 +9255,7 @@ function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColum
     sorted,
     filtered,
     fixed,
-    visible: hovered || sorted || filtered || fixed || editable
+    visible: hovered || sorted || filtered || fixed
   };
 }
 function getActionActive(actionType, visibilityState) {
@@ -10328,8 +10342,7 @@ function drawBodyNestedTableContent(params) {
       align: column.align ?? "left",
       actionVisibilityState,
       allowActions: true,
-      hasFilter: column.allowFilter === true,
-      hasEdit: !!column.editable
+      hasFilter: column.allowFilter === true
     });
     const headerHighlighted = isNestedTableHeaderHighlighted(
       content,
@@ -10706,11 +10719,27 @@ function drawNestedTableHeaderActions(params) {
   const filtered = highlight?.filterState?.[columnKey] != null;
   const fixed = resolveNestedColumnFixed(column, highlight);
   const headerSelected = highlight?.kind === "header" && isNestedTableRuntimeColumnMatched(highlight, column, columnIndex);
+  if (column.editable && column.showEditIcon !== false) {
+    const markerRect = drawHeaderEditMarker(drawParams.ctx, rect);
+    drawParams.descriptors.push({
+      kind: "body-content",
+      rect: markerRect,
+      columnKey: drawParams.column.key,
+      rowIndex: drawParams.rowIndex,
+      contentIndex: drawParams.contentIndex,
+      contentKey: "nested-table",
+      nestedColumnDataIndex: columnKey,
+      nestedColumnIndex: columnIndex,
+      fixed: drawParams.column.fixed,
+      frozen: drawParams.frozen,
+      debugNodeType: "nested-table-header-edit-icon",
+      debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
+    });
+  }
   if (!visibilityState.visible) return;
   const { actionTypes, startX, totalWidth } = getHeaderActionLayout({
     rect,
     hasFilter: column.allowFilter === true,
-    hasEdit: !!column.editable,
     visibilityState
   });
   drawParams.ctx.save();
@@ -10732,33 +10761,7 @@ function drawNestedTableHeaderActions(params) {
       width: size,
       height: size
     };
-    if (actionType === "edit") {
-      drawHeaderActionIcon(
-        drawParams.ctx,
-        actionRect,
-        "edit",
-        true,
-        false,
-        headerSelected,
-        drawParams.theme.selectionBackgroundColor
-      );
-      drawParams.descriptors.push({
-        kind: "body-content",
-        rect: actionRect,
-        columnKey: drawParams.column.key,
-        rowIndex: drawParams.rowIndex,
-        contentIndex: drawParams.contentIndex,
-        contentKey: "nested-table",
-        nestedColumnDataIndex: columnKey,
-        nestedColumnIndex: columnIndex,
-        fixed: drawParams.column.fixed,
-        frozen: drawParams.frozen,
-        debugNodeType: "nested-table-header-edit-icon",
-        debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
-      });
-      actionX += size + gap;
-      return;
-    }
+    if (actionType === "edit") return;
     const active = actionType === "sort" && sortOrder != null || actionType === "filter" && filtered || actionType === "fixed" && fixed != null;
     drawHeaderActionIcon(
       drawParams.ctx,
@@ -10802,7 +10805,7 @@ function resolveNestedTableHeaderActionVisibility(params) {
     sorted,
     filtered,
     fixed,
-    visible: hovered || sorted || filtered || fixed || !!column.editable
+    visible: hovered || sorted || filtered || fixed
   };
 }
 function isNestedTableRowHighlighted(content, record, rowIndex, highlight, highlightMode) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas-components/list-table",
-  "version": "0.3.34",
+  "version": "0.3.36",
   "description": "Framework-agnostic list table core engine.",
   "license": "MIT",
   "type": "module",
@@ -27,11 +27,11 @@
   },
   "dependencies": {
     "@ant-design/icons-svg": "4.6.0",
-    "@canvas-components/qrcode": "0.2.2",
-    "@canvas-components/barcode": "0.2.2",
     "@canvas-components/utils": "0.2.8",
-    "@canvas-components/stats": "0.1.4",
-    "@canvas-components/chart": "0.3.8"
+    "@canvas-components/chart": "0.3.8",
+    "@canvas-components/barcode": "0.2.2",
+    "@canvas-components/qrcode": "0.2.2",
+    "@canvas-components/stats": "0.1.4"
   },
   "scripts": {
     "build": "tsup --config tsup.config.ts"