@quadrats/react 1.1.0 → 1.1.1

package/table/index.js

@@ -7,6 +7,7 @@ export { useTableStateContext } from './hooks/useTableStateContext.js';
 export { useTableCellToolbarActions } from './hooks/useTableCellToolbarActions.js';
 import 'react';
 import '@quadrats/core';
+import './contexts/TableDragContext.js';
 import '@quadrats/common/table';
 import 'slate-react';
 import '@quadrats/react';
@@ -19,6 +20,8 @@ import 'slate';
 import './contexts/TableScrollContext.js';
 import '@quadrats/react/utils';
 import '@quadrats/common/list';
+import 'react-dnd';
 import './contexts/TableHeaderContext.js';
+import 'react-dnd-html5-backend';
 export { defaultRenderTableElements } from './defaultRenderTableElements.js';
 export { createReactTable } from './createReactTable.js';

package/table/table.css

@@ -1 +1 @@
-.qdr-table__table-toolbar{right:unset;left:50%;top:-4px;transform:translate(-50%, -100%)}.qdr-table{display:flex;flex-flow:column;align-items:flex-start;gap:var(--qdr-spacing-4);margin:var(--qdr-spacing-11) 0;position:relative}.qdr-table__selection{padding:0;position:absolute;left:-22px;top:0;z-index:0;width:20px;height:20px;color:var(--qdr-action-inactive);border:none;border-radius:var(--qdr-radius-1);background-color:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;cursor:pointer}.qdr-table__selection:hover{background-color:var(--qdr-secondary-active-bg);color:var(--qdr-action-active)}.qdr-table__portal-container{position:relative;pointer-events:none}.qdr-table__title{width:100%;display:block;position:relative;margin:0;font-size:var(--qdr-typography-article-h6-font-size);line-height:var(--qdr-typography-article-h6-line-height);letter-spacing:var(--qdr-typography-article-h6-letter-spacing);font-weight:var(--qdr-typography-article-h6-font-weight);color:var(--qdr-text-primary);background-color:var(--qdr-surface-secondary)}.qdr-table__title__placeholder{position:absolute;left:0;top:0;color:var(--qdr-text-secondary);pointer-events:none}.qdr-table__header{background-color:var(--qdr-bg)}.qdr-table__header--pinned{position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px rgba(0,0,0,.1490196078)}.qdr-table__scrollContainer{width:100%;max-width:100%;max-height:420px;overflow:auto;scrollbar-width:thin;position:relative}.qdr-table__main{margin:0;border-collapse:separate;border-spacing:0;table-layout:fixed}.qdr-table__main th:not(:first-child),.qdr-table__main td:not(:first-child){border-left:none}.qdr-table__main thead tr:not(:last-child) th,.qdr-table__main tbody tr:not(:last-child) td{border-bottom:none}.qdr-table__inline-table-toolbar,.qdr-table__cell__inline-table-toolbar{pointer-events:none;top:-50px;left:0;right:unset}.qdr-table__mainWrapper{width:100%;max-width:100%;height:100%;position:relative}.qdr-table__mainWrapper--selected .qdr-table__main{border:2px solid var(--qdr-primary)}.qdr-table__mainWrapper--selected .qdr-table__table-toolbar{opacity:1;pointer-events:auto}.qdr-table__body{background-color:var(--qdr-surface-primary)}.qdr-table__cell{position:relative;padding:var(--qdr-spacing-3) var(--qdr-spacing-4);font-size:var(--qdr-typography-article-body1-font-size);line-height:var(--qdr-typography-article-body1-line-height);letter-spacing:var(--qdr-typography-article-body1-letter-spacing);font-weight:var(--qdr-typography-article-body1-font-weight);color:var(--qdr-text-primary);text-align:left;border-top:1px solid var(--qdr-border);border-right:1px solid var(--qdr-border);border-bottom:1px solid var(--qdr-border);border-left:1px solid var(--qdr-border);vertical-align:top;word-break:break-all}.qdr-table__cell p,.qdr-table__cell ul,.qdr-table__cell ol{margin:0}.qdr-table__cell--resizing::after{content:"";position:absolute;right:0;top:0;width:2px;height:100%;background-color:var(--qdr-primary-light);pointer-events:none;opacity:1}.qdr-table__cell__resize-handle{position:absolute;right:0;top:0;width:6px;height:100%;transform:translateX(0);cursor:col-resize;z-index:1}.qdr-table__cell--header{font-weight:var(--qdr-typography-article-h6-font-weight);color:var(--qdr-text-primary);background-color:var(--qdr-bg)}.qdr-table__cell--pinned{position:sticky;z-index:1;left:0;box-shadow:2px 0 4px -2px rgba(0,0,0,.1490196078)}.qdr-table__cell--top-active{border-top:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--right-active{border-right:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--bottom-active{border-bottom:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--left-active{border-left:2px solid var(--qdr-primary-light) !important}.qdr-table__btn-icon{color:var(--qdr-action-disabled);pointer-events:none}.qdr-table__add-column{position:absolute;z-index:0;cursor:pointer;padding:0;background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);display:flex;align-items:center;justify-content:center;right:-24px;top:0;width:20px;height:100%}.qdr-table__add-column:hover{background-color:var(--qdr-bg)}.qdr-table__add-column:hover .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-column:active{background-color:var(--qdr-divider);border:1px solid var(--qdr-border)}.qdr-table__add-column:active .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-row{position:absolute;z-index:0;cursor:pointer;padding:0;background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);display:flex;align-items:center;justify-content:center;bottom:-24px;left:0;width:100%;height:20px}.qdr-table__add-row:hover{background-color:var(--qdr-bg)}.qdr-table__add-row:hover .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-row:active{background-color:var(--qdr-divider);border:1px solid var(--qdr-border)}.qdr-table__add-row:active .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-both{position:absolute;z-index:0;cursor:pointer;padding:0;background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);display:flex;align-items:center;justify-content:center;right:-24px;bottom:-24px;width:20px;height:20px}.qdr-table__add-both:hover{background-color:var(--qdr-bg)}.qdr-table__add-both:hover .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-both:active{background-color:var(--qdr-divider);border:1px solid var(--qdr-border)}.qdr-table__add-both:active .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__delete{color:var(--qdr-error)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.qdr-table__cell__focus-toolbar,.qdr-table__cell__inline-table-toolbar{position:absolute;right:unset;transform:translate(-10%, -100%);padding:4px;border-radius:10px;border:1px solid var(--qdr-border);background:var(--qdr-bg);box-shadow:0 4px 8px -2px rgba(0,0,0,.1019607843),0 2px 4px -2px rgba(0,0,0,.0392156863);animation-name:fade-in;animation-duration:.1s;animation-delay:.1s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:linear;pointer-events:auto;z-index:10}.qdr-table__cell-row-action{position:absolute;z-index:9;width:20px;height:24px;padding:0;border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-primary-active-bg);background-color:var(--qdr-primary-hover-bg);display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;opacity:1}.qdr-table__cell-column-action{position:absolute;z-index:9;width:20px;height:24px;padding:0;border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-primary-active-bg);background-color:var(--qdr-primary-hover-bg);display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;opacity:1;transform:rotate(90deg);transform-origin:center}.qdr-table__size-indicators{display:none;overflow:hidden;position:absolute;z-index:1;left:0;top:0;width:100%;max-width:100%;padding:8px 0;pointer-events:none;transform:translateY(-100%);flex-flow:row nowrap;align-items:center}.qdr-table__size-indicator{display:flex;align-items:center;justify-content:center;position:relative}.qdr-table__size{background-color:var(--qdr-action-inactive);color:var(--qdr-on-primary);padding:4px 8px;font-size:12px;white-space:pre-wrap;position:relative}.qdr-table__size::after{position:absolute;content:"";z-index:-1;top:calc(100% - 2px);left:50%;width:10px;height:10px;background-color:var(--qdr-action-inactive);border-right:1px solid var(--qdr-action-inactive);border-bottom:1px solid var(--qdr-action-inactive);transform:translateX(-50%) translateY(-50%) rotate(45deg)}
+.qdr-table__table-toolbar{right:unset;left:50%;top:-4px;transform:translate(-50%, -100%)}.qdr-table{display:flex;flex-flow:column;align-items:flex-start;gap:var(--qdr-spacing-4);margin:var(--qdr-spacing-11) 0;position:relative}.qdr-table__selection{padding:0;position:absolute;left:-22px;top:0;z-index:0;width:20px;height:20px;color:var(--qdr-action-inactive);border:none;border-radius:var(--qdr-radius-1);background-color:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;cursor:pointer}.qdr-table__selection:hover{background-color:var(--qdr-secondary-active-bg);color:var(--qdr-action-active)}.qdr-table__portal-container{position:relative;pointer-events:none}.qdr-table__title{width:100%;display:block;position:relative;margin:0;font-size:var(--qdr-typography-article-h6-font-size);line-height:var(--qdr-typography-article-h6-line-height);letter-spacing:var(--qdr-typography-article-h6-letter-spacing);font-weight:var(--qdr-typography-article-h6-font-weight);color:var(--qdr-text-primary);background-color:var(--qdr-surface-secondary)}.qdr-table__title__placeholder{position:absolute;left:0;top:0;color:var(--qdr-text-secondary);pointer-events:none}.qdr-table__header{background-color:var(--qdr-bg)}.qdr-table__header--pinned{position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px rgba(0,0,0,.1490196078)}.qdr-table__scrollContainer{width:100%;max-width:100%;max-height:420px;overflow:auto;scrollbar-width:thin;position:relative}.qdr-table__main{margin:0;border-collapse:separate;border-spacing:0;table-layout:fixed}.qdr-table__main th:not(:first-child),.qdr-table__main td:not(:first-child){border-left:none}.qdr-table__main thead tr:not(:last-child) th,.qdr-table__main tbody tr:not(:last-child) td{border-bottom:none}.qdr-table__inline-table-toolbar,.qdr-table__cell__inline-table-toolbar{pointer-events:none;top:-50px;left:0;right:unset}.qdr-table__mainWrapper{width:100%;max-width:100%;height:100%;position:relative}.qdr-table__mainWrapper--selected .qdr-table__main{border:2px solid var(--qdr-primary)}.qdr-table__mainWrapper--selected .qdr-table__table-toolbar{opacity:1;pointer-events:auto}.qdr-table__body{background-color:var(--qdr-surface-primary)}.qdr-table__cell{position:relative;padding:var(--qdr-spacing-3) var(--qdr-spacing-4);font-size:var(--qdr-typography-article-body1-font-size);line-height:var(--qdr-typography-article-body1-line-height);letter-spacing:var(--qdr-typography-article-body1-letter-spacing);font-weight:var(--qdr-typography-article-body1-font-weight);color:var(--qdr-text-primary);text-align:left;border-top:1px solid var(--qdr-border);border-right:1px solid var(--qdr-border);border-bottom:1px solid var(--qdr-border);border-left:1px solid var(--qdr-border);vertical-align:top;word-break:break-all}.qdr-table__cell p,.qdr-table__cell ul,.qdr-table__cell ol{margin:0}.qdr-table__cell--resizing::after{content:"";position:absolute;right:0;top:0;width:2px;height:100%;background-color:var(--qdr-primary-light);pointer-events:none;opacity:1}.qdr-table__cell__resize-handle{position:absolute;right:0;top:0;width:6px;height:100%;transform:translateX(0);cursor:col-resize;z-index:1}.qdr-table__cell--header{font-weight:var(--qdr-typography-article-h6-font-weight);color:var(--qdr-text-primary);background-color:var(--qdr-bg)}.qdr-table__cell--pinned{position:sticky;z-index:1;left:0;box-shadow:2px 0 4px -2px rgba(0,0,0,.1490196078)}.qdr-table__cell--top-active{border-top:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--right-active{border-right:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--bottom-active{border-bottom:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--left-active{border-left:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--drag-row-target-top{border-top:2px solid var(--qdr-error) !important}.qdr-table__cell--drag-row-target-bottom{border-bottom:2px solid var(--qdr-error) !important}.qdr-table__cell--drag-column-target-left{border-left:2px solid var(--qdr-error) !important}.qdr-table__cell--drag-column-target-right{border-right:2px solid var(--qdr-error) !important}.qdr-table__drag-overlay{position:fixed;pointer-events:none;z-index:9999;will-change:transform}.qdr-table__drag-overlay .qdr-table__drag-overlay-content{width:100%;height:100%;background-color:var(--qdr-primary-hover-bg)}.qdr-table__btn-icon{color:var(--qdr-action-disabled);pointer-events:none}.qdr-table__add-column{position:absolute;z-index:0;cursor:pointer;padding:0;background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);display:flex;align-items:center;justify-content:center;right:-24px;top:0;width:20px;height:100%}.qdr-table__add-column:hover{background-color:var(--qdr-bg)}.qdr-table__add-column:hover .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-column:active{background-color:var(--qdr-divider);border:1px solid var(--qdr-border)}.qdr-table__add-column:active .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-row{position:absolute;z-index:0;cursor:pointer;padding:0;background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);display:flex;align-items:center;justify-content:center;bottom:-24px;left:0;width:100%;height:20px}.qdr-table__add-row:hover{background-color:var(--qdr-bg)}.qdr-table__add-row:hover .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-row:active{background-color:var(--qdr-divider);border:1px solid var(--qdr-border)}.qdr-table__add-row:active .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-both{position:absolute;z-index:0;cursor:pointer;padding:0;background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);display:flex;align-items:center;justify-content:center;right:-24px;bottom:-24px;width:20px;height:20px}.qdr-table__add-both:hover{background-color:var(--qdr-bg)}.qdr-table__add-both:hover .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-both:active{background-color:var(--qdr-divider);border:1px solid var(--qdr-border)}.qdr-table__add-both:active .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__delete{color:var(--qdr-error)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.qdr-table__cell__focus-toolbar,.qdr-table__cell__inline-table-toolbar{position:absolute;right:unset;transform:translate(-10%, -100%);padding:4px;border-radius:10px;border:1px solid var(--qdr-border);background:var(--qdr-bg);box-shadow:0 4px 8px -2px rgba(0,0,0,.1019607843),0 2px 4px -2px rgba(0,0,0,.0392156863);animation-name:fade-in;animation-duration:.1s;animation-delay:.1s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:linear;pointer-events:auto;z-index:10}.qdr-table__cell-row-action{position:absolute;z-index:9;width:20px;height:24px;padding:0;border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-primary-active-bg);background-color:var(--qdr-primary-hover-bg);display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;opacity:1}.qdr-table__cell-row-action--dragging{border:1px solid var(--qdr-divider);background-color:var(--qdr-bg);cursor:grabbing}.qdr-table__cell-column-action{position:absolute;z-index:9;width:20px;height:24px;padding:0;border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-primary-active-bg);background-color:var(--qdr-primary-hover-bg);display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;opacity:1;transform:rotate(90deg);transform-origin:center}.qdr-table__cell-column-action--dragging{border:1px solid var(--qdr-divider);background-color:var(--qdr-bg);cursor:grabbing}.qdr-table__size-indicators{display:none;overflow:hidden;position:absolute;z-index:1;left:0;top:0;width:100%;max-width:100%;padding:8px 0;pointer-events:none;transform:translateY(-100%);flex-flow:row nowrap;align-items:center}.qdr-table__size-indicator{display:flex;align-items:center;justify-content:center;position:relative}.qdr-table__size{background-color:var(--qdr-action-inactive);color:var(--qdr-on-primary);padding:4px 8px;font-size:12px;white-space:pre-wrap;position:relative}.qdr-table__size::after{position:absolute;content:"";z-index:-1;top:calc(100% - 2px);left:50%;width:10px;height:10px;background-color:var(--qdr-action-inactive);border-right:1px solid var(--qdr-action-inactive);border-bottom:1px solid var(--qdr-action-inactive);transform:translateX(-50%) translateY(-50%) rotate(45deg)}

package/table/table.scss

@@ -46,6 +46,12 @@ $toolbar-z-index: 10;
   pointer-events: auto;
   cursor: pointer;
   opacity: 1;
+
+  &--dragging {
+    border: 1px solid var(--qdr-divider);
+    background-color: var(--qdr-bg);
+    cursor: grabbing;
+  }
 }
 
 @mixin cell-selected($border-position) {
@@ -262,6 +268,35 @@ $toolbar-z-index: 10;
     &--left-active {
       @include cell-selected('left');
     }
+
+    &--drag-row-target-top {
+      border-top: 2px solid var(--qdr-error) !important;
+    }
+
+    &--drag-row-target-bottom {
+      border-bottom: 2px solid var(--qdr-error) !important;
+    }
+
+    &--drag-column-target-left {
+      border-left: 2px solid var(--qdr-error) !important;
+    }
+
+    &--drag-column-target-right {
+      border-right: 2px solid var(--qdr-error) !important;
+    }
+  }
+
+  &__drag-overlay {
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    will-change: transform;
+
+    .qdr-table__drag-overlay-content {
+      width: 100%;
+      height: 100%;
+      background-color: var(--qdr-primary-hover-bg);
+    }
   }
 
   &__btn-icon {

package/table/typings.d.ts

@@ -35,6 +35,8 @@ export type TableContextType = {
     unpinColumn: () => void;
     pinRow: (rowIndex: number) => void;
     unpinRow: () => void;
+    moveOrSwapRow: (sourceRowIndex: number, targetRowIndex: number, mode?: 'swap' | 'move') => void;
+    moveOrSwapColumn: (sourceColumnIndex: number, targetColumnIndex: number, mode?: 'swap' | 'move') => void;
     isColumnPinned: (columnIndex: number) => boolean;
     isRowPinned: (rowIndex: number) => boolean;
     isReachMaximumColumns: boolean;

package/table/utils/helper.d.ts

@@ -2,6 +2,22 @@ import { Element } from '@quadrats/core';
 import { TableElement, ColumnWidth } from '@quadrats/common/table';
 import { QuadratsReactEditor } from '@quadrats/react';
 import { AlignValue } from '@quadrats/common/align';
+/**
+ * 分配百分比寬度，確保總和為 100%
+ * 前 n-1 個欄位使用四捨五入的平均值，最後一個欄位使用剩餘寬度
+ * @param count - 欄位數量
+ * @returns 百分比陣列，總和為 100%
+ */
+export declare function distributeEqualPercentages(count: number): number[];
+/**
+ * 等比例縮減現有百分比並加入新欄位
+ * 前 n-1 個縮減後的欄位使用四捨五入，最後一個縮減欄位使用剩餘寬度
+ * @param currentPercentages - 當前的百分比陣列
+ * @param newColumnPercentage - 新欄位要佔的百分比
+ * @param insertIndex - 新欄位插入的位置（0-based）
+ * @returns 新的百分比陣列，總和為 100%
+ */
+export declare function scalePercentagesWithNewColumn(currentPercentages: number[], newColumnPercentage: number, insertIndex: number): number[];
 export interface TableElements {
     tableMainElement: TableElement | null;
     tableBodyElement: TableElement | null;
@@ -103,14 +119,16 @@ export declare function setColumnWidths(editor: QuadratsReactEditor, tableElemen
  * 計算新增欄位後的欄位寬度
  * - 如果所有欄位都是 percentage：按比例縮減現有欄位，新欄位佔平均寬度
  * - 如果有混合模式（percentage + pixel）：
- *   * percentage 欄位（pinned）保持不變
- *   * 新欄位使用 pixel（與其他 pixel 欄位平均分配剩餘空間）
+ *   * 如果用戶操作的欄位是 pinned column：新欄位使用 percentage（需要調整 pinned columns 的百分比）
+ *   * 如果用戶操作的欄位是 unpinned column：新欄位使用 pixel（與其他 pixel 欄位相同寬度）
  *
  * @param currentWidths - 當前的欄位寬度陣列
  * @param insertIndex - 新欄位插入的位置（0-based）
+ * @param pinnedColumnIndices - 當前釘選欄位的索引陣列（插入前的索引）
+ * @param operatingColumnIndex - 用戶實際操作的欄位索引（用於判斷是在 pinned 還是 unpinned column 操作）
  * @returns 新的欄位寬度陣列
  */
-export declare function calculateColumnWidthsAfterAdd(currentWidths: ColumnWidth[], insertIndex: number): ColumnWidth[];
+export declare function calculateColumnWidthsAfterAdd(currentWidths: ColumnWidth[], insertIndex: number, pinnedColumnIndices?: number[], operatingColumnIndex?: number): ColumnWidth[];
 /**
  * 計算刪除欄位後的欄位寬度
  * 此函數會智慧處理欄位寬度的重新分配：
@@ -143,13 +161,14 @@ export declare function calculateColumnWidthsAfterDelete(currentWidths: ColumnWi
  */
 export declare function calculateResizedColumnWidths(currentWidths: ColumnWidth[], columnIndex: number, deltaPercentage: number, deltaPixel: number, pinnedColumnIndices?: number[]): ColumnWidth[];
 /**
- * 移動 columnWidths 陣列中的元素位置
+ * 移動或交換欄位寬度設定
  * @param currentWidths - 當前的欄位寬度陣列
- * @param fromIndex - 來源索引
- * @param toIndex - 目標索引
- * @returns 新的欄位寬度陣列
+ * @param sourceIndex - 來源欄位的索引
+ * @param targetIndex - 目標欄位的索引
+ * @param mode - 'swap' 為交換兩個位置，'move' 為移動到目標位置
+ * @returns 處理後的欄位寬度陣列
  */
-export declare function moveColumnWidth(currentWidths: ColumnWidth[], fromIndex: number, toIndex: number): ColumnWidth[];
+export declare function moveOrSwapColumnWidth(currentWidths: ColumnWidth[], sourceIndex: number, targetIndex: number, mode?: 'swap' | 'move'): ColumnWidth[];
 /**
  * 將 columnWidths 轉換為混合模式（釘選欄位用 percentage，未釘選欄位用 pixel）
  * @param currentWidths - 當前的欄位寬度陣列
@@ -158,3 +177,10 @@ export declare function moveColumnWidth(currentWidths: ColumnWidth[], fromIndex:
  * @returns 轉換後的欄位寬度陣列
  */
 export declare function convertToMixedWidthMode(currentWidths: ColumnWidth[], pinnedColumnIndices: number[], tableWidth: number): ColumnWidth[];
+/**
+ * 將混合模式的欄位寬度轉換回純百分比模式
+ * 當所有 pinned columns 都被 unpin 後，需要將 pixel 欄位轉換回 percentage
+ * @param currentWidths - 當前的欄位寬度陣列（混合模式）
+ * @returns 轉換後的純百分比欄位寬度陣列，總和為 100%
+ */
+export declare function convertToPercentageMode(currentWidths: ColumnWidth[]): ColumnWidth[];

package/table/utils/helper.js

@@ -3,6 +3,58 @@ import { ReactEditor } from 'slate-react';
 import { TABLE_MAIN_TYPE, TABLE_BODY_TYPE, TABLE_HEADER_TYPE, MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE, TABLE_CELL_TYPE, TABLE_ROW_TYPE, MIN_COLUMN_WIDTH_PERCENTAGE, MIN_COLUMN_WIDTH_PIXEL } from '@quadrats/common/table';
 import { ALIGNABLE_TYPES, ALIGN_TYPE } from '@quadrats/common/align';
 
+/**
+ * 分配百分比寬度，確保總和為 100%
+ * 前 n-1 個欄位使用四捨五入的平均值，最後一個欄位使用剩餘寬度
+ * @param count - 欄位數量
+ * @returns 百分比陣列，總和為 100%
+ */
+function distributeEqualPercentages(count) {
+    if (count <= 0)
+        return [];
+    if (count === 1)
+        return [100];
+    const percentages = [];
+    const averagePercentage = Math.round((100 / count) * 10) / 10;
+    // 前 n-1 個欄位使用四捨五入的平均值
+    for (let i = 0; i < count - 1; i++) {
+        percentages.push(averagePercentage);
+    }
+    // 最後一個欄位使用剩餘寬度，確保總和為 100%
+    const sumOfFirst = percentages.reduce((sum, val) => sum + val, 0);
+    const lastPercentage = Math.round((100 - sumOfFirst) * 10) / 10;
+    percentages.push(lastPercentage);
+    return percentages;
+}
+/**
+ * 等比例縮減現有百分比並加入新欄位
+ * 前 n-1 個縮減後的欄位使用四捨五入，最後一個縮減欄位使用剩餘寬度
+ * @param currentPercentages - 當前的百分比陣列
+ * @param newColumnPercentage - 新欄位要佔的百分比
+ * @param insertIndex - 新欄位插入的位置（0-based）
+ * @returns 新的百分比陣列，總和為 100%
+ */
+function scalePercentagesWithNewColumn(currentPercentages, newColumnPercentage, insertIndex) {
+    if (currentPercentages.length === 0)
+        return [100];
+    const currentTotal = currentPercentages.reduce((sum, val) => sum + val, 0);
+    const targetTotal = 100 - newColumnPercentage;
+    const scaleFactor = targetTotal / currentTotal;
+    const scaledPercentages = [];
+    // 前 n-1 個欄位使用縮放後四捨五入的值
+    for (let i = 0; i < currentPercentages.length - 1; i++) {
+        const scaledValue = Math.round(currentPercentages[i] * scaleFactor * 10) / 10;
+        scaledPercentages.push(scaledValue);
+    }
+    // 最後一個現有欄位使用剩餘寬度，確保總和正確
+    const sumOfScaled = scaledPercentages.reduce((sum, val) => sum + val, 0);
+    const lastScaledValue = Math.round((targetTotal - sumOfScaled) * 10) / 10;
+    scaledPercentages.push(lastScaledValue);
+    // 在指定位置插入新欄位
+    const result = [...scaledPercentages];
+    result.splice(insertIndex, 0, newColumnPercentage);
+    return result;
+}
 /**
  * 提取表格的所有基本元素
  */
@@ -329,11 +381,9 @@ function getColumnWidths(tableElement, tableWidth) {
         }
         return widths;
     }
-    // 否則返回平均分配的 percentage（精確到小數點後一位）
-    const equalPercentage = Math.round((100 / columnCount) * 10) / 10;
-    return Array(columnCount)
-        .fill(null)
-        .map(() => ({ type: 'percentage', value: equalPercentage }));
+    // 否則返回平均分配的 percentage（總和為 100%）
+    const percentages = distributeEqualPercentages(columnCount);
+    return percentages.map((value) => ({ type: 'percentage', value }));
 }
 /**
  * 設定表格的欄位寬度
@@ -349,16 +399,17 @@ function setColumnWidths(editor, tableElement, columnWidths) {
  * 計算新增欄位後的欄位寬度
  * - 如果所有欄位都是 percentage：按比例縮減現有欄位，新欄位佔平均寬度
  * - 如果有混合模式（percentage + pixel）：
- *   * percentage 欄位（pinned）保持不變
- *   * 新欄位使用 pixel（與其他 pixel 欄位平均分配剩餘空間）
+ *   * 如果用戶操作的欄位是 pinned column：新欄位使用 percentage（需要調整 pinned columns 的百分比）
+ *   * 如果用戶操作的欄位是 unpinned column：新欄位使用 pixel（與其他 pixel 欄位相同寬度）
  *
  * @param currentWidths - 當前的欄位寬度陣列
  * @param insertIndex - 新欄位插入的位置（0-based）
+ * @param pinnedColumnIndices - 當前釘選欄位的索引陣列（插入前的索引）
+ * @param operatingColumnIndex - 用戶實際操作的欄位索引（用於判斷是在 pinned 還是 unpinned column 操作）
  * @returns 新的欄位寬度陣列
  */
-function calculateColumnWidthsAfterAdd(currentWidths, insertIndex) {
+function calculateColumnWidthsAfterAdd(currentWidths, insertIndex, pinnedColumnIndices = [], operatingColumnIndex) {
     const newColumnCount = currentWidths.length + 1;
-    const averagePercentage = Math.round((100 / newColumnCount) * 10) / 10;
     // 分離 percentage 和 pixel 欄位
     const percentageColumns = [];
     const pixelColumns = [];
@@ -372,46 +423,68 @@ function calculateColumnWidthsAfterAdd(currentWidths, insertIndex) {
     });
     // 如果所有欄位都是 percentage（正常模式，無 pinned columns）
     if (percentageColumns.length === currentWidths.length) {
-        const currentTotal = percentageColumns.reduce((sum, col) => sum + col.value, 0);
-        const targetTotal = 100 - averagePercentage;
-        const scaleFactor = targetTotal / currentTotal;
-        const newWidths = [];
-        currentWidths.forEach((width, index) => {
-            if (index === insertIndex) {
-                newWidths.push({ type: 'percentage', value: averagePercentage });
-            }
-            // 按比例縮減現有欄位
-            const scaledValue = Math.round(width.value * scaleFactor * 10) / 10;
-            newWidths.push({ type: 'percentage', value: scaledValue });
-        });
-        if (insertIndex >= currentWidths.length) {
-            newWidths.push({ type: 'percentage', value: averagePercentage });
-        }
-        return newWidths;
+        // 計算新欄位的平均百分比
+        const averagePercentage = Math.round((100 / newColumnCount) * 10) / 10;
+        // 提取當前的百分比值
+        const currentPercentages = currentWidths.map((w) => w.value);
+        // 等比例縮減現有欄位並插入新欄位
+        const newPercentages = scalePercentagesWithNewColumn(currentPercentages, averagePercentage, insertIndex);
+        return newPercentages.map((value) => ({ type: 'percentage', value }));
     }
     // 如果有混合的 pixel 和 percentage 欄位（有 pinned columns）
-    // percentage 欄位（pinned）保持不變
-    // 新欄位應維持 pixel（此時一般欄位必定是 pixel）
     if (percentageColumns.length && pixelColumns.length) {
-        const newWidths = [];
-        // 找到最後一個 pixel 欄位的寬度，新欄位將複製這個寬度
-        const lastPixelWidth = pixelColumns.length > 0 ? pixelColumns[pixelColumns.length - 1].value : 150;
-        currentWidths.forEach((width, index) => {
-            if (index === insertIndex) {
+        // 判斷新欄位是否應該是 pinned column
+        const isNewColumnPinned = typeof operatingColumnIndex === 'number' ? pinnedColumnIndices.includes(operatingColumnIndex) : false;
+        if (isNewColumnPinned) {
+            // 新欄位應該是 pinned column，使用 percentage
+            // 需要調整所有 pinned columns 的百分比
+            const newWidths = [];
+            const pinnedColumnCount = pinnedColumnIndices.length + 1; // 加上新欄位
+            const pinnedPercentagePerColumn = Math.min(Math.round((MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / pinnedColumnCount) * 10) / 10, MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE);
+            currentWidths.forEach((width, index) => {
+                if (index === insertIndex) {
+                    newWidths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
+                }
+                if (pinnedColumnIndices.includes(index)) {
+                    // 調整現有 pinned column 的百分比
+                    newWidths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
+                }
+                else {
+                    // 保持非 pinned column (pixel) 不變
+                    newWidths.push(Object.assign({}, width));
+                }
+            });
+            // 如果插入位置在最後（但仍在 pinned 區域內）
+            if (insertIndex >= currentWidths.length) {
+                newWidths.push({ type: 'percentage', value: pinnedPercentagePerColumn });
+            }
+            return newWidths;
+        }
+        else {
+            // 新欄位應該是 unpinned column，使用 pixel
+            const newWidths = [];
+            // 找到最後一個 pixel 欄位的寬度，新欄位將複製這個寬度
+            const lastPixelWidth = pixelColumns.length > 0 ? pixelColumns[pixelColumns.length - 1].value : 150;
+            currentWidths.forEach((width, index) => {
+                if (index === insertIndex) {
+                    newWidths.push({ type: 'pixel', value: lastPixelWidth });
+                }
+                newWidths.push(Object.assign({}, width));
+            });
+            // 如果插入位置在最後
+            if (insertIndex >= currentWidths.length) {
                 newWidths.push({ type: 'pixel', value: lastPixelWidth });
             }
-            newWidths.push(Object.assign({}, width));
-        });
-        // 如果插入位置在最後
-        if (insertIndex >= currentWidths.length) {
-            newWidths.push({ type: 'pixel', value: lastPixelWidth });
+            return newWidths;
         }
-        return newWidths;
     }
-    // Fallback: 返回原始寬度加一個平均 percentage 欄位
-    const newWidths = [...currentWidths];
-    newWidths.splice(insertIndex, 0, { type: 'percentage', value: averagePercentage });
-    return newWidths;
+    // Fallback: 等比例縮減並插入新欄位
+    const averagePercentage = Math.round((100 / newColumnCount) * 10) / 10;
+    // 提取當前的百分比值（假設都是 percentage，否則轉為平均分配）
+    const currentPercentages = currentWidths.map((w) => (w.type === 'percentage' ? w.value : 100 / currentWidths.length));
+    // 等比例縮減現有欄位並插入新欄位
+    const newPercentages = scalePercentagesWithNewColumn(currentPercentages, averagePercentage, insertIndex);
+    return newPercentages.map((value) => ({ type: 'percentage', value }));
 }
 /**
  * 計算刪除欄位後的欄位寬度
@@ -606,19 +679,33 @@ function calculateResizedColumnWidths(currentWidths, columnIndex, deltaPercentag
     return newWidths;
 }
 /**
- * 移動 columnWidths 陣列中的元素位置
+ * 移動或交換欄位寬度設定
  * @param currentWidths - 當前的欄位寬度陣列
- * @param fromIndex - 來源索引
- * @param toIndex - 目標索引
- * @returns 新的欄位寬度陣列
+ * @param sourceIndex - 來源欄位的索引
+ * @param targetIndex - 目標欄位的索引
+ * @param mode - 'swap' 為交換兩個位置，'move' 為移動到目標位置
+ * @returns 處理後的欄位寬度陣列
  */
-function moveColumnWidth(currentWidths, fromIndex, toIndex) {
-    if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= currentWidths.length) {
+function moveOrSwapColumnWidth(currentWidths, sourceIndex, targetIndex, mode = 'move') {
+    if (sourceIndex === targetIndex ||
+        sourceIndex < 0 ||
+        targetIndex < 0 ||
+        sourceIndex >= currentWidths.length ||
+        targetIndex >= currentWidths.length) {
         return currentWidths;
     }
     const newWidths = [...currentWidths];
-    const [movedWidth] = newWidths.splice(fromIndex, 1);
-    newWidths.splice(toIndex, 0, movedWidth);
+    if (mode === 'swap') {
+        // swap 邏輯：直接交換兩個位置的值
+        const temp = newWidths[sourceIndex];
+        newWidths[sourceIndex] = newWidths[targetIndex];
+        newWidths[targetIndex] = temp;
+    }
+    else {
+        // move 邏輯：移除再插入
+        const [movedWidth] = newWidths.splice(sourceIndex, 1);
+        newWidths.splice(targetIndex, 0, movedWidth);
+    }
     return newWidths;
 }
 /**
@@ -649,28 +736,28 @@ function convertToMixedWidthMode(currentWidths, pinnedColumnIndices, tableWidth)
         }
     });
     // 確保釘選欄位總和不超過指定範圍
-    if (totalPinnedPercentage > MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE) {
-        const scaleFactor = MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / totalPinnedPercentage;
-        totalPinnedPercentage = MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE;
-        // 調整釘選欄位的百分比
-        currentWidths.forEach((width, index) => {
-            if (pinnedColumnIndices.includes(index)) {
-                if (width.type === 'percentage') {
-                    currentWidths[index] = {
-                        type: 'percentage',
-                        value: Math.round(width.value * scaleFactor * 10) / 10,
-                    };
-                }
-                else {
-                    const percentage = (width.value / tableWidth) * 100;
-                    currentWidths[index] = {
-                        type: 'percentage',
-                        value: Math.round(percentage * scaleFactor * 10) / 10,
-                    };
-                }
+    const scaleFactor = totalPinnedPercentage > MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE
+        ? MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE / totalPinnedPercentage
+        : 1;
+    totalPinnedPercentage = Math.min(totalPinnedPercentage, MAX_PINNED_COLUMNS_WIDTH_PERCENTAGE);
+    // 調整釘選欄位的百分比
+    currentWidths.forEach((width, index) => {
+        if (pinnedColumnIndices.includes(index)) {
+            if (width.type === 'percentage') {
+                currentWidths[index] = {
+                    type: 'percentage',
+                    value: Math.round(width.value * scaleFactor * 10) / 10,
+                };
             }
-        });
-    }
+            else {
+                const percentage = (width.value / tableWidth) * 100;
+                currentWidths[index] = {
+                    type: 'percentage',
+                    value: Math.round(percentage * scaleFactor * 10) / 10,
+                };
+            }
+        }
+    });
     // 計算剩餘空間（用於未釘選欄位）
     const remainingPercentage = 100 - totalPinnedPercentage;
     const remainingPixelWidth = (tableWidth * remainingPercentage) / 100;
@@ -689,5 +776,24 @@ function convertToMixedWidthMode(currentWidths, pinnedColumnIndices, tableWidth)
     });
     return newWidths;
 }
+/**
+ * 將混合模式的欄位寬度轉換回純百分比模式
+ * 當所有 pinned columns 都被 unpin 後，需要將 pixel 欄位轉換回 percentage
+ * @param currentWidths - 當前的欄位寬度陣列（混合模式）
+ * @returns 轉換後的純百分比欄位寬度陣列，總和為 100%
+ */
+function convertToPercentageMode(currentWidths) {
+    if (currentWidths.length === 0)
+        return [];
+    // 檢查是否有 pixel 欄位
+    const hasPixelColumns = currentWidths.some((width) => width.type === 'pixel');
+    // 如果沒有 pixel 欄位，表示已經是純百分比模式，直接返回
+    if (!hasPixelColumns) {
+        return currentWidths;
+    }
+    // 使用 distributeEqualPercentages 重新分配百分比，確保總和為 100%
+    const percentages = distributeEqualPercentages(currentWidths.length);
+    return percentages.map((value) => ({ type: 'percentage', value }));
+}
 
-export { calculateColumnWidthsAfterAdd, calculateColumnWidthsAfterDelete, calculateResizedColumnWidths, collectCells, convertToMixedWidthMode, createTableCell, enforcePinnedColumnsMaxWidth, getAlignFromCells, getColumnWidths, getPinnedColumnsInfo, getReferenceRowFromHeaderOrBody, getTableElements, getTableStructure, hasAnyPinnedColumns, hasAnyPinnedRows, moveColumnWidth, setAlignForCells, setColumnWidths };
+export { calculateColumnWidthsAfterAdd, calculateColumnWidthsAfterDelete, calculateResizedColumnWidths, collectCells, convertToMixedWidthMode, convertToPercentageMode, createTableCell, distributeEqualPercentages, enforcePinnedColumnsMaxWidth, getAlignFromCells, getColumnWidths, getPinnedColumnsInfo, getReferenceRowFromHeaderOrBody, getTableElements, getTableStructure, hasAnyPinnedColumns, hasAnyPinnedRows, moveOrSwapColumnWidth, scalePercentagesWithNewColumn, setAlignForCells, setColumnWidths };