@heartlandone/vega 2.83.0 → 2.85.0

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-renderer.js

@@ -1,13 +1,11 @@
 import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
 import styles from '../table-block-styles.css';
 import { DeleteTableBlockAction } from '../actions/delete-table-block-action';
-import { TableSettingPopoverRenderer } from './table-setting-popover-renderer';
 import { RTETableExtensionAnnotationTypeEnum } from '../annotations/table-annotation';
-import { TableDynamicPopoverRenderer } from './table-dynamic-popover-renderer';
 import changeManager from '../../../../../helpers/change-manager/change-manager';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalRTEExtensionTableCellsSelectionAnchor } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { RTETableColorManager } from '../utils/table-color-manager';
+import { TableSettingPopoverRenderer } from './table-setting-popover-renderer';
 /**
  * Renderer for the RTETableBlock.
  */
@@ -16,12 +14,9 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    * @inheritDoc
    */
   doRender(h, renderData, rteContext) {
-    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer(rteContext);
-    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(RTETableColorManager.getTableColors(), rteContext);
     let tableRef;
     const table = this.renderTable(h, renderData, (ref) => (tableRef = ref));
-    const tableSettingPopover = tableSettingPopoverRenderer.render(h, renderData, () => tableRef, tableDynamicPopoverRenderer);
-    const tableDynamicPopover = tableDynamicPopoverRenderer.render(h, () => tableRef, renderData);
+    this.renderTableToolbar(rteContext);
     const tableAnnotation = renderData.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.TABLE);
     const children = rteContext.editable
       ? [
@@ -32,17 +27,23 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
             this.handleTableRemove(renderData, tableRef);
           },
           // eslint-disable-next-line jsdoc/require-jsdoc
-          onClick: (event) => tableSettingPopoverRenderer.handleTableClick(event, tableRef),
+          onClick: (event) => {
+            if (this.tableToolbar) {
+              this.tableToolbar.handleTableClick(event, renderData, () => tableRef);
+            }
+          },
           // eslint-disable-next-line jsdoc/require-jsdoc
           onMouseLeave: () => {
-            tableSettingPopoverRenderer.syncSelectedCells();
+            if (this.tableToolbar) {
+              this.tableToolbar.syncSelectedCells();
+            }
           },
         }, [
           // Add an extra div as slot container, to make sure the cursor can move to before/end of the table.
           h('div', {
             contentEditable: true,
             ref: this.useRef(renderData),
-          }, [table, tableSettingPopover, tableDynamicPopover]),
+          }, [table]),
         ]),
       ]
       : [table];
@@ -64,6 +65,12 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
     result.childrenContainerGetter = () => table;
     return result;
   }
+  /**
+   * Destroys the table toolbar popover.
+   */
+  destroy() {
+    this.destroyTableToolbar();
+  }
   /**
    * @inheritDoc
    */
@@ -113,4 +120,27 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
       }
     }
   }
+  /**
+   * Renders the table setting popover toolbar if the context is editable.
+   *
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
+   */
+  renderTableToolbar(rteContext) {
+    if (!rteContext.editable) {
+      this.destroyTableToolbar();
+      return;
+    }
+    if (!this.tableToolbar) {
+      this.tableToolbar = new TableSettingPopoverRenderer(rteContext);
+      this.tableToolbar.render();
+    }
+  }
+  /**
+   * Destroys the table setting popover toolbar if it exists.
+   */
+  destroyTableToolbar() {
+    var _a;
+    (_a = this.tableToolbar) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.tableToolbar = null;
+  }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-setting-popover-renderer.js

@@ -6,16 +6,19 @@ import { RowOperationEventHandler } from '../setting-event-handlers/row-operatio
 import { CaptionOperationEventHandler } from '../setting-event-handlers/caption-operation';
 import { ColumnOperationEventHandler } from '../setting-event-handlers/column-operation';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaPopoverShow } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { TableDynamicPopoverRenderer } from './table-dynamic-popover-renderer';
 import { MergeCellsOperationEventHandler } from '../setting-event-handlers/merge-cells-operation';
 import { SplitCellOperationEventHandler } from '../setting-event-handlers/split-cell-operation';
 import { TablePopoverBaseRenderer } from './table-popover-base-renderer';
+import { RTETableColorManager } from '../utils/table-color-manager';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
 /**
- * Centralizes the popover rendering and interaction logic for table settings.
+ * Shared popover renderer for table settings.
  */
 export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
-  constructor() {
-    super(...arguments);
+  constructor(renderContext) {
+    super(renderContext);
     this.settingHandlers = [
       new RowOperationEventHandler(),
       new CaptionOperationEventHandler(),
@@ -24,38 +27,38 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       new SplitCellOperationEventHandler(),
     ];
     /**
-     * Show table setting popover when table is clicked.
-     * Only the popover belonging to the nearest table will be shown,
-     * which avoids outer tables showing their popover when an inner (nested) table is clicked.
+     * Re-targets and shows the table setting popover for the clicked table.
      *
-     * @param {MouseEvent} event - The MouseEvent that triggered the table action
-     * @param {HTMLElement} trigger - The element that can triggered the popover open.
+     * @param {MouseEvent} event - The MouseEvent that triggered the click.
+     * @param {RTETableBlock} tableBlock - The clicked table's block data.
+     * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
      */
-    this.handleTableClick = (event, trigger) => {
+    this.handleTableClick = (event, tableBlock, getTableRef) => {
       const target = event.target;
       const ownTrigger = target.closest('table');
-      if (trigger !== ownTrigger) {
-        void this.popoverRef.hide();
-        void this.tableDynamicPopover.hide();
+      if (ownTrigger !== getTableRef()) {
         return;
       }
+      // Prevent the click from bubbling to ancestor tables. When this is a nested
+      // table click, the ancestor table still has the popover's stale click
+      // listener attached (from when it was the popover's target), which would
+      // toggle the popover off immediately after we show it.
+      event.stopPropagation();
+      this.reTarget(tableBlock, getTableRef);
       void this.tableDynamicPopover.hide();
-      if (!this.popoverShow) {
-        remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), ownTrigger);
-        void this.popoverRef.show();
-      }
+      remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), ownTrigger);
+      void this.popoverRef.show(true);
     };
     /**
      * Sync the selected cells from the table selection to the table setting component.
      */
     this.syncSelectedCells = () => {
       if (this.tableSettingRef) {
-        const selectedCells = this.getTableSelectedCells();
-        this.tableSettingRef.selectedCells = selectedCells;
+        this.tableSettingRef.selectedCells = this.getTableSelectedCells();
       }
     };
     /**
-     * Receive setting menu click events.
+     * Handles setting menu click events.
      *
      * @param {CustomEvent<Array<string>>} event - The custom event emitted from the setting menu.
      */
@@ -63,7 +66,7 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       const handler = this.settingHandlers.find((handler) => handler.canHandle(event.detail));
       if (handler) {
         const extensionContext = this.getTableExtensionContext();
-        extensionContext && handler.execute(event.detail, extensionContext, this.tableData);
+        extensionContext && handler.execute(event.detail, extensionContext, this.tableBlock);
         if (event.detail[0] === TableSettingType.CAPTION) {
           this.updateTableSettingCaption();
         }
@@ -78,59 +81,69 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
      */
     this.handleTableSettingPopoverShow = () => {
       this.syncSelectedCells();
-      this.popoverShow = true;
     };
+    this.tableDynamicPopover = new TableDynamicPopoverRenderer(RTETableColorManager.getTableColors(), renderContext);
   }
   /**
-   * Render the popover host and inject the table-setting component with refs wired up.
-   *
-   * @param {VegaRTECreateElementFunction} h - The create element function.
-   * @param {RTETableBlock} renderData - The table block to render.
-   * @param {() => HTMLElement} getTableRef - Current table DOM reference
-   * @param {TableDynamicPopoverRenderer} tableDynamicPopover - Renderer used to show
-   *  the secondary table popover (for example, table-properties-specific settings).
-   * @returns {VegaRTERenderResult} The rendered popover structure.
+   * Destroys the dynamic popover renderer and removes the container from the DOM.
    */
-  render(h, renderData, getTableRef, tableDynamicPopover) {
-    this.tableData = renderData;
-    this.tableDynamicPopover = tableDynamicPopover;
-    return h('vega-popover', {
-      trigger: 'click',
-      isScreenPosition: true,
-      class: 'rte-table-setting-popover',
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (popover) => {
-        this.popoverRef = popover;
-        if (this.popoverRef) {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => (this.popoverShow = false));
-        }
-      },
-    }, [
-      h('div', { slot: 'popover' }, [
-        h('vega-rich-text-table-setting', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (ref) => {
-            this.tableSettingRef = ref;
-            if (ref) {
-              ref.target = getTableRef();
-            }
-          },
-          selectedCells: this.getTableSelectedCells(),
-          onVegaClick: this.handleSettingMenuClick,
-        }),
-      ]),
-    ]);
+  destroy() {
+    this.tableDynamicPopover.destroy();
+    if (this.popoverContainer) {
+      this.popoverContainer.remove();
+    }
+  }
+  /**
+   * Builds the popover DOM and appends it to the RTE host. Idempotent: subsequent calls are no-ops.
+   */
+  render() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument && this.renderContext) {
+      this.popoverContainer = safeDocument.createElement('div');
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.renderContext.host.appendChild(this.popoverContainer);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const tableCellPopover = this.tableDynamicPopover.render();
+      const popover = safeDocument.createElement('vega-popover');
+      popover.trigger = 'click';
+      popover.isScreenPosition = true;
+      popover.className = 'rte-table-setting-popover';
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
+      const slotDiv = safeDocument.createElement('div');
+      slotDiv.setAttribute('slot', 'popover');
+      const tableSetting = safeDocument.createElement('vega-rich-text-table-setting');
+      tableSetting.addEventListener('vegaClick', this.handleSettingMenuClick);
+      slotDiv.appendChild(tableSetting);
+      popover.appendChild(slotDiv);
+      this.popoverContainer.appendChild(popover);
+      this.popoverContainer.appendChild(tableCellPopover);
+      this.popoverRef = popover;
+      this.tableSettingRef = tableSetting;
+    }
   }
   /**
-   * Updates the table setting component caption state to match the given table data.
+   * Updates the table setting component caption state to match the current table data.
    */
   updateTableSettingCaption() {
-    const hasCaption = this.tableData.hasCaption();
+    const hasCaption = this.tableBlock.hasCaption();
     if (this.tableSettingRef && this.tableSettingRef.hasCaption !== hasCaption) {
       this.tableSettingRef.hasCaption = hasCaption;
     }
   }
+  /**
+   * Re-targets the shared popovers to the given table.
+   *
+   * @param {RTETableBlock} tableBlock - The clicked table's block data.
+   * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
+   */
+  reTarget(tableBlock, getTableRef) {
+    if (this.tableSettingRef) {
+      this.tableBlock = tableBlock;
+      this.tableSettingRef.target = getTableRef();
+      this.tableSettingRef.selectedCells = this.getTableSelectedCells();
+      this.tableDynamicPopover.reTarget(tableBlock, getTableRef);
+    }
+  }
   /**
    * Collects and returns the currently selected table cells.
    *

package/dist/collection/components/vega-rich-text-editor/extensions/table/table-extension.js

@@ -138,6 +138,7 @@ export class VegaRTETableExtension extends VegaRTEExtension {
    * @inheritDoc
    */
   destroyExtension() {
+    this.tableBlockRenderer.destroy();
     this.tableSelection.destroy();
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-styles-toolbar-button-slimmer.js

@@ -118,6 +118,21 @@ TextStylesToolbarButtonSlimmer.allItems = [
     label: 'Heading 3',
     bold: true,
   },
+  {
+    key: 'heading-4',
+    label: 'Heading 4',
+    bold: true,
+  },
+  {
+    key: 'heading-5',
+    label: 'Heading 5',
+    bold: true,
+  },
+  {
+    key: 'heading-6',
+    label: 'Heading 6',
+    bold: true,
+  },
   {
     key: 'paragraph',
     label: 'Paragraph',

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-expand-row-controller.js

@@ -26,7 +26,7 @@ export class VegaTableExpandRowController extends VegaSlimmer {
      * @param {string} rowKey - The row key of the row
      */
     this.toggleExpandRow = (rowKey) => {
-      this.rowExpandable && this.handleToggleExpandRow(rowKey, !this.isExpanded(rowKey));
+      this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, !this.isExpanded(rowKey));
     };
     /**
      * Open expandable row by rowKey
@@ -34,7 +34,7 @@ export class VegaTableExpandRowController extends VegaSlimmer {
      * @param {string} rowKey - The row key of the row
      */
     this.openExpandRow = (rowKey) => {
-      this.rowExpandable && this.handleToggleExpandRow(rowKey, true);
+      this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, true);
     };
     /**
      * Close expanded row by rowKey
@@ -42,13 +42,22 @@ export class VegaTableExpandRowController extends VegaSlimmer {
      * @param {string} rowKey - The row key of the row
      */
     this.closeExpandRow = (rowKey) => {
-      this.rowExpandable && this.handleToggleExpandRow(rowKey, false);
+      this.isRowExpandable(rowKey) && this.handleToggleExpandRow(rowKey, false);
     };
     /**
      * Close all expanded row
      */
     this.closeAllExpandRow = () => {
-      this.rowExpandable && this.handleCloseAllExpandRow();
+      this.hasExpandableRow && this.handleCloseAllExpandRow();
+    };
+    /**
+     * Whether the row is expandable
+     *
+     * @param {VegaTableDataSourceItem} row - The row data
+     * @returns {boolean} Return true if the row is expandable
+     */
+    this.isExpandableRow = (row) => {
+      return this.expandableRows.includes(this.vegaTableDataSourceController.getRecordKey(row));
     };
     /**
      * Whether the row is expandable
@@ -159,6 +168,12 @@ export class VegaTableExpandRowController extends VegaSlimmer {
     ChangeManager.unregister(TABLE_EXPAND_ROW, this.expandObserver);
     remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand));
   }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    this.setExpandableRows();
+  }
   /**
    * Component lifecycle - componentDidLoad
    */
@@ -169,8 +184,16 @@ export class VegaTableExpandRowController extends VegaSlimmer {
    * The callback to handle [watchRowExpandable]{@link VegaTable.watchRowExpandable}
    */
   watchRowExpandable() {
+    this.setExpandableRows();
     this.handleCloseAllExpandRow();
   }
+  /**
+   * Set the expandable rows based on the rowExpandable prop
+   */
+  watchCurrentData() {
+    this.setExpandableRows();
+    this.clearUnusedExpandRowSlot();
+  }
   /**
    * Initializes row expand observer
    */
@@ -201,6 +224,52 @@ export class VegaTableExpandRowController extends VegaSlimmer {
     return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
       this.host === findParent(input['host'], 'vega-table'));
   }
+  /**
+   * Sets expandable rows and hasExpandableRow based on rowExpandable and currentData
+   */
+  setExpandableRows() {
+    if (typeof this.rowExpandable === 'boolean') {
+      this.expandableRows = this.rowExpandable
+        ? this.currentData.map((item) => this.vegaTableDataSourceController.getRecordKey(item))
+        : [];
+      this.hasExpandableRow = this.rowExpandable;
+    }
+    else if (typeof this.rowExpandable === 'function') {
+      const result = [];
+      this.currentData.forEach((item) => {
+        const rowKey = this.vegaTableDataSourceController.getRecordKey(item);
+        if (this.rowExpandable(rowKey)) {
+          result.push(rowKey);
+        }
+      });
+      this.expandableRows = result;
+      this.hasExpandableRow = result.length > 0;
+    }
+    else {
+      this.expandableRows = [];
+      this.hasExpandableRow = false;
+    }
+  }
+  /**
+   * Whether the row is expandable by rowKey
+   *
+   * @param {string} rowKey - The row key of the row
+   * @returns {boolean} Return true if the row is expandable
+   */
+  isRowExpandable(rowKey) {
+    return this.expandableRows.includes(rowKey);
+  }
+  /**
+   * Clear the expand row slot which is not expandable anymore to avoid confusion,
+   *    this can be triggered by the change of rowExpandable or currentData
+   */
+  clearUnusedExpandRowSlot() {
+    this.expandedRowKeySet.toArray().forEach((rowKey) => {
+      if (!this.isRowExpandable(rowKey)) {
+        this.expandedRowKeySet.delete(rowKey);
+      }
+    });
+  }
 }
 VegaTableExpandRowController.expandRowSlotNamePrefix = 'vega-table-expand-row-';
 __decorate([
@@ -209,9 +278,18 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "expandableRows", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowController.prototype, "hasExpandableRow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "currentData", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
@@ -224,6 +302,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableExpandRowController.prototype, "componentWillLoad", null);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
@@ -242,3 +323,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
+__decorate([
+  MapToComponentMethod('watchCurrentData')
+], VegaTableExpandRowController.prototype, "watchCurrentData", null);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-row-draggable-controller.js

@@ -0,0 +1,132 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { createDynamicSlimmer, InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, VegaSlimmer, } from 'vega-slimmer/core';
+import { DraggableElementSlimmer } from '../../../../helpers/slimmers/draggable-element-slimmer';
+/**
+ * The row draggable controller for the vega-table
+ */
+export class VegaTableRowDraggableController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.draggableElementSlimmer = createDynamicSlimmer(VegaTableRowDraggableController, DraggableElementSlimmer, [{ mapFrom: 'rowDraggable', mapTo: 'isDraggable' }], [{ mapFrom: 'watchRowDraggable', mapTo: 'watchIsDraggable' }], [
+      {
+        container: this.getDragContainer.bind(this),
+        itemSelector: 'vega-table-row',
+        triggerElementSelector: 'td.vega-table-draggable-column',
+        visualElementSelector: 'tr.vega-table-row',
+        onDragDrop: this.onDragDrop.bind(this),
+      },
+    ]);
+  }
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaPopover.connectedCallback}
+   */
+  connectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaPopover.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.componentDidLoad}
+   */
+  componentDidLoad() {
+    methodPlaceholder();
+  }
+  /**
+   * Watches for changes to the rowDraggable property and initializes or destroys the DraggableElement instance accordingly.
+   * If rowDraggable is true, it calls setRowDraggableElement to initialize the instance;
+   * if false, it calls destroyRowDraggableElement to clean up.
+   */
+  watchRowDraggable() {
+    methodPlaceholder();
+  }
+  /**
+   * Resolve the draggable container for current render mode.
+   *
+   * @returns {Nullable<HTMLElement>} The table body container used by drag behavior.
+   */
+  getDragContainer() {
+    return this.isTemplateRenderMode
+      ? this.host.querySelector('vega-table-body')
+      : this.vegaTableBodyRenderer.getTableBodyRef();
+  }
+  /**
+   * Handles the drag and drop event emitted by the DraggableElement instance, re-emitting it through the rowDragDropEventEmitter with additional details.
+   *
+   * @param {DragDropEventPayload} payload - An object containing payload about the drag event.
+   */
+  onDragDrop(payload) {
+    const event = this.rowDragDropEventEmitter.emit(payload);
+    if (!event.defaultPrevented) {
+      payload.status === 'end' && this.onDragEnd(payload);
+    }
+  }
+  /**
+   * Handles the logic for reordering rows in the table when a drag and drop action is completed.
+   *
+   * @param {DragDropEventPayload} payload - An object containing details about the completed drag event, including fromIndex and toIndex.
+   */
+  onDragEnd(payload) {
+    const fromIndex = payload.options.fromIndex;
+    const toIndex = payload.options.toIndex;
+    this.vegaTableSortController.clearSorter();
+    if (this.isTemplateRenderMode) {
+      const rows = Array.from(this.host.querySelectorAll('vega-table-row'));
+      const container = this.host.querySelector('vega-table-body');
+      fromIndex > toIndex
+        ? container.insertBefore(rows[fromIndex], rows[toIndex])
+        : container.insertBefore(rows[fromIndex], rows[toIndex].nextSibling);
+    }
+    else {
+      const rows = this.vegaTableDataSourceController.getCurrentData();
+      const copiedRows = [...rows];
+      const [moved] = copiedRows.splice(fromIndex, 1);
+      copiedRows.splice(toIndex, 0, moved);
+      this.vegaTableDataSourceController.setCurrentData(copiedRows);
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "rowDraggable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableDataSourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "isTemplateRenderMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableBodyRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "vegaTableSortController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowDraggableController.prototype, "rowDragDropEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRowDraggableController.prototype, "draggableElementSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowDraggableController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRowDraggableController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableRowDraggableController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('watchRowDraggable')
+], VegaTableRowDraggableController.prototype, "watchRowDraggable", null);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-sort-controller.js

@@ -11,6 +11,20 @@ import { VegaTableSorter } from './vega-table-sorter';
  * The sort controller for the vega-table
  */
 export class VegaTableSortController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The method to clear all sorters
+     */
+    this.clearSorter = () => {
+      if (this.sortersMap.size > 0) {
+        this.sortersMap.clear(false);
+        this.changeEventEmitter.emit({
+          sorters: [],
+        });
+      }
+    };
+  }
   /**
    * The callback of [watchColumns]{@link VegaTable.watchColumns}
    */