@uzum-tech/ui 2.0.4 → 2.0.6

package/es/data-table/src/use-group-header.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, CSSProperties } from 'vue';
-import type { ColumnKey, DataTableSetupProps, TableBaseColumn, TableColumn, TableExpandColumn, TableSelectionColumn } from './interface';
+import type { ColumnKey, DataRelatedColumn, DataTableSetupProps, TableColumn } from './interface';
 export interface RowItem {
     colSpan: number;
     rowSpan: number;
@@ -9,11 +9,11 @@ export interface RowItem {
 export interface ColItem {
     key: string | number;
     style: CSSProperties;
-    column: TableSelectionColumn | TableExpandColumn | TableBaseColumn;
+    column: DataRelatedColumn;
 }
 export declare function useGroupHeader(props: DataTableSetupProps, getResizableWidth: (key: ColumnKey) => number | undefined): {
     rowsRef: ComputedRef<RowItem[][]>;
     colsRef: ComputedRef<ColItem[]>;
     hasEllipsisRef: ComputedRef<boolean>;
-    dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
+    dataRelatedColsRef: ComputedRef<DataRelatedColumn[]>;
 };

package/es/data-table/src/use-row-drag.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableSetupProps, UseRowDragDeps, UseRowDragReturn } from './interface';
+export declare function useRowDrag(props: DataTableSetupProps, { paginatedDataRef, mergedCheckedRowKeySetRef, mergedClsPrefixRef }: UseRowDragDeps): UseRowDragReturn;

package/es/data-table/src/use-row-drag.mjs

@@ -0,0 +1,241 @@
+import { useMemo } from 'vooks';
+import { computed, ref } from 'vue';
+const DROP_HALF_DIVISOR = 2;
+const DROP_STEP_BIAS = 1;
+const FALLBACK_ORDER = 0;
+const SINGLE_ROW_DRAG_SIZE = 1;
+const DRAG_IMAGE_OFFSET = 0;
+const GHOST_OFFSCREEN_TOP_PX = -10000;
+const GHOST_CLEANUP_DELAY_MS = 0;
+export function useRowDrag(props, {
+  paginatedDataRef,
+  mergedCheckedRowKeySetRef,
+  mergedClsPrefixRef
+}) {
+  const draggableColumnRef = useMemo(() => {
+    const findDraggableColumn = columns => {
+      for (const column of columns) {
+        if ('children' in column) {
+          const nested = findDraggableColumn(column.children);
+          if (nested) return nested;
+        } else if (column.type === 'draggable') {
+          return column;
+        }
+      }
+      return null;
+    };
+    return findDraggableColumn(props.columns);
+  });
+  const draggingRowKeysRef = ref([]);
+  const draggingRowKeySetRef = computed(() => new Set(draggingRowKeysRef.value));
+  const droppingRowKeyRef = ref(null);
+  const droppingPositionRef = ref(null);
+  function resetDropState() {
+    droppingRowKeyRef.value = null;
+    droppingPositionRef.value = null;
+  }
+  function isRowDraggable(rowData) {
+    const column = draggableColumnRef.value;
+    if (!column) return false;
+    if (typeof column.draggable === 'function') {
+      return column.draggable(rowData);
+    }
+    return true;
+  }
+  function getRowByKey(targetKey) {
+    var _a;
+    return (_a = paginatedDataRef.value.find(node => node.key === targetKey)) === null || _a === void 0 ? void 0 : _a.rawNode;
+  }
+  function resolveDragKeys(initialRowKey) {
+    const checkedSet = mergedCheckedRowKeySetRef.value;
+    if (!checkedSet.has(initialRowKey)) return [initialRowKey];
+    const keysInOrder = [];
+    for (const node of paginatedDataRef.value) {
+      if (checkedSet.has(node.key) && isRowDraggable(node.rawNode)) {
+        keysInOrder.push(node.key);
+      }
+    }
+    return keysInOrder.length ? keysInOrder : [initialRowKey];
+  }
+  function applyDragImage(event) {
+    if (!event.dataTransfer || typeof event.dataTransfer.setDragImage !== 'function') {
+      return;
+    }
+    const cellElement = event.currentTarget;
+    const rowElement = cellElement === null || cellElement === void 0 ? void 0 : cellElement.closest('tr');
+    if (!rowElement) return;
+    const draggedSet = draggingRowKeySetRef.value;
+    if (draggedSet.size <= SINGLE_ROW_DRAG_SIZE) {
+      event.dataTransfer.setDragImage(rowElement, DRAG_IMAGE_OFFSET, DRAG_IMAGE_OFFSET);
+      return;
+    }
+    const tableElement = rowElement.closest('table');
+    if (!tableElement) {
+      event.dataTransfer.setDragImage(rowElement, DRAG_IMAGE_OFFSET, DRAG_IMAGE_OFFSET);
+      return;
+    }
+    const mergedClsPrefix = mergedClsPrefixRef.value;
+    const keyStringSet = new Set(Array.from(draggedSet).map(String));
+    const ghost = tableElement.cloneNode(true);
+    ghost.classList.add(`${mergedClsPrefix}-data-table-drag-ghost`);
+    ghost.querySelectorAll('thead').forEach(headElement => headElement.remove());
+    ghost.querySelectorAll('tbody > tr').forEach(rowChild => {
+      const childKey = rowChild.getAttribute('data-row-key');
+      if (childKey === null || !keyStringSet.has(childKey)) rowChild.remove();
+    });
+    ghost.style.position = 'fixed';
+    ghost.style.top = `${GHOST_OFFSCREEN_TOP_PX}px`;
+    ghost.style.left = '0';
+    ghost.style.pointerEvents = 'none';
+    ghost.style.width = `${tableElement.offsetWidth}px`;
+    const hostElement = tableElement.closest(`.${mergedClsPrefix}-data-table`) || document.body;
+    hostElement.appendChild(ghost);
+    event.dataTransfer.setDragImage(ghost, DRAG_IMAGE_OFFSET, DRAG_IMAGE_OFFSET);
+    setTimeout(() => {
+      if (ghost.parentNode) ghost.parentNode.removeChild(ghost);
+    }, GHOST_CLEANUP_DELAY_MS);
+  }
+  function handleRowDragStart(event, rowKey) {
+    const row = getRowByKey(rowKey);
+    if (!row || !isRowDraggable(row)) {
+      event.preventDefault();
+      return;
+    }
+    draggingRowKeysRef.value = resolveDragKeys(rowKey);
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', draggingRowKeysRef.value.map(String).join(','));
+    }
+    applyDragImage(event);
+  }
+  function handleRowDragOver(event, rowKey) {
+    if (!draggableColumnRef.value) return;
+    if (!draggingRowKeysRef.value.length) return;
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+    if (draggingRowKeySetRef.value.has(rowKey)) {
+      resetDropState();
+      return;
+    }
+    const target = event.currentTarget;
+    if (!target) return;
+    const rect = target.getBoundingClientRect();
+    const offset = event.clientY - rect.top;
+    const position = offset < rect.height / DROP_HALF_DIVISOR ? 'before' : 'after';
+    droppingRowKeyRef.value = rowKey;
+    droppingPositionRef.value = position;
+  }
+  function handleRowDragLeave(event, rowKey) {
+    if (droppingRowKeyRef.value !== rowKey) return;
+    const related = event.relatedTarget;
+    const current = event.currentTarget;
+    if (related && current && current.contains(related)) {
+      return;
+    }
+    resetDropState();
+  }
+  function handleRowDragEnd() {
+    draggingRowKeysRef.value = [];
+    resetDropState();
+  }
+  function readOrder(row, orderKey) {
+    const value = row === null || row === void 0 ? void 0 : row[orderKey];
+    return typeof value === 'number' ? value : Number(value) || FALLBACK_ORDER;
+  }
+  function computeNewOrders(draggedKeys, dropIndex, position, orderKey) {
+    var _a, _b, _c;
+    const rows = paginatedDataRef.value;
+    if (!rows.length) return null;
+    const draggedSet = new Set(draggedKeys);
+    const draggedIndexes = rows.map((node, index) => draggedSet.has(node.key) ? index : -1).filter(index => index >= 0);
+    if (!draggedIndexes.length) return null;
+    const filtered = rows.filter(node => !draggedSet.has(node.key));
+    const targetIndex = position === 'before' ? dropIndex : dropIndex + 1;
+    const removedBefore = draggedIndexes.filter(index => index < targetIndex).length;
+    const insertAt = Math.max(0, targetIndex - removedBefore);
+    const prev = (_a = filtered[insertAt - 1]) === null || _a === void 0 ? void 0 : _a.rawNode;
+    const next = (_b = filtered[insertAt]) === null || _b === void 0 ? void 0 : _b.rawNode;
+    const draggedCount = draggedKeys.length;
+    const orders = [];
+    if (prev && next) {
+      const prevOrder = readOrder(prev, orderKey);
+      const nextOrder = readOrder(next, orderKey);
+      const step = (nextOrder - prevOrder) / (draggedCount + DROP_STEP_BIAS);
+      for (let index = 0; index < draggedCount; index++) {
+        orders.push(prevOrder + step * (index + DROP_STEP_BIAS));
+      }
+    } else if (!prev && next) {
+      const nextOrder = readOrder(next, orderKey);
+      for (let index = 0; index < draggedCount; index++) {
+        orders.push(nextOrder - (draggedCount - index));
+      }
+    } else if (prev && !next) {
+      const prevOrder = readOrder(prev, orderKey);
+      for (let index = 0; index < draggedCount; index++) {
+        orders.push(prevOrder + (index + DROP_STEP_BIAS));
+      }
+    } else {
+      for (const key of draggedKeys) {
+        const row = (_c = rows.find(node => node.key === key)) === null || _c === void 0 ? void 0 : _c.rawNode;
+        orders.push(readOrder(row, orderKey));
+      }
+    }
+    return orders;
+  }
+  function handleRowDrop(event, rowKey) {
+    event.preventDefault();
+    const column = draggableColumnRef.value;
+    const draggedKeys = draggingRowKeysRef.value;
+    const position = droppingPositionRef.value;
+    if (!column || !draggedKeys.length || position === null || draggingRowKeySetRef.value.has(rowKey)) {
+      handleRowDragEnd();
+      return;
+    }
+    const rows = paginatedDataRef.value;
+    const dropIndex = rows.findIndex(node => node.key === rowKey);
+    if (dropIndex < 0) {
+      handleRowDragEnd();
+      return;
+    }
+    const orderKey = column.key;
+    const newOrders = computeNewOrders(draggedKeys, dropIndex, position, orderKey);
+    const dispatchPlan = draggedKeys.map((key, index) => {
+      var _a;
+      const row = (_a = rows.find(node => node.key === key)) === null || _a === void 0 ? void 0 : _a.rawNode;
+      return row ? {
+        row,
+        oldOrder: readOrder(row, orderKey),
+        newOrder: newOrders ? newOrders[index] : readOrder(row, orderKey)
+      } : null;
+    });
+    const targetIndex = position === 'before' ? dropIndex : dropIndex + 1;
+    const draggedSet = draggingRowKeySetRef.value;
+    const draggedIndexes = rows.map((node, index) => draggedSet.has(node.key) ? index : -1).filter(index => index >= 0);
+    const removedBefore = draggedIndexes.filter(index => index < targetIndex).length;
+    const baseIndex = Math.max(0, targetIndex - removedBefore);
+    handleRowDragEnd();
+    if (!newOrders) return;
+    dispatchPlan.forEach((entry, index) => {
+      var _a;
+      if (!entry) return;
+      (_a = column.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(column, entry.row, {
+        index: baseIndex + index,
+        oldOrder: entry.oldOrder,
+        newOrder: entry.newOrder
+      });
+    });
+  }
+  return {
+    draggableColumnRef,
+    draggingRowKeySetRef,
+    droppingRowKeyRef,
+    droppingPositionRef,
+    handleRowDragStart,
+    handleRowDragOver,
+    handleRowDragLeave,
+    handleRowDragEnd,
+    handleRowDrop
+  };
+}

package/es/data-table/src/use-sorter.d.ts

@@ -1,13 +1,9 @@
-import type { ComputedRef } from 'vue';
-import type { ColumnKey, CompareFn, DataTableSetupProps, InternalRowData, SortOrder, SortState, TableBaseColumn, TableExpandColumn, TableSelectionColumn, TmNode } from './interface';
-export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsRef, filteredDataRef }: {
-    dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
-    filteredDataRef: ComputedRef<TmNode[]>;
-}): {
+import type { ColumnKey, CompareFn, DataTableSetupProps, InternalRowData, SortOrder, SortState, TmNode, UseSorterDeps } from './interface';
+export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsRef, filteredDataRef }: UseSorterDeps): {
     clearSorter: () => void;
     sort: (columnKey: ColumnKey, order?: SortOrder) => void;
-    sortedDataRef: ComputedRef<TmNode[]>;
-    mergedSortStateRef: ComputedRef<{
+    sortedDataRef: import("vue").ComputedRef<TmNode[]>;
+    mergedSortStateRef: import("vue").ComputedRef<{
         columnKey: ColumnKey;
         order: SortOrder;
         sorter: boolean | "default" | CompareFn<InternalRowData> | {

package/es/data-table/src/use-sorter.mjs

@@ -51,7 +51,7 @@ export function useSorter(props, {
   const mergedSortStateRef = computed(() => {
     // If one of the columns's sort order is false or 'ascend' or 'descend',
     // the table's controll functionality should work in controlled manner.
-    const columnsWithControlledSortOrder = dataRelatedColsRef.value.filter(column => column.type !== 'selection' && column.sorter !== undefined && (column.sortOrder === 'ascend' || column.sortOrder === 'descend' || column.sortOrder === false));
+    const columnsWithControlledSortOrder = dataRelatedColsRef.value.filter(column => column.type !== 'selection' && column.type !== 'draggable' && column.sorter !== undefined && (column.sortOrder === 'ascend' || column.sortOrder === 'descend' || column.sortOrder === false));
     // if multiple columns are controlled sortable, then we need to find columns with active sortOrder
     const columnToSort = columnsWithControlledSortOrder.filter(col => col.sortOrder !== false);
     if (columnToSort.length) {
@@ -108,6 +108,18 @@ export function useSorter(props, {
         return compareResult;
       });
     }
+    const draggableColumn = dataRelatedColsRef.value.find(column => column.type === 'draggable' && column.sortByKey !== false);
+    if (draggableColumn) {
+      const orderKey = draggableColumn.key;
+      return filteredDataRef.value.slice().sort((tmNode1, tmNode2) => {
+        const order1 = tmNode1.rawNode[orderKey];
+        const order2 = tmNode2.rawNode[orderKey];
+        if (typeof order1 === 'number' && typeof order2 === 'number') {
+          return order1 - order2;
+        }
+        return 0;
+      });
+    }
     return filteredDataRef.value;
   });
   function getUpdatedSorterState(sortState) {
@@ -150,7 +162,7 @@ export function useSorter(props, {
     if (!columnKey) {
       clearSorter();
     } else {
-      const columnToSort = dataRelatedColsRef.value.find(column => column.type !== 'selection' && column.type !== 'expand' && column.key === columnKey);
+      const columnToSort = dataRelatedColsRef.value.find(column => column.type !== 'selection' && column.type !== 'expand' && column.type !== 'draggable' && column.key === columnKey);
       if (!(columnToSort === null || columnToSort === void 0 ? void 0 : columnToSort.sorter)) return;
       const sorter = columnToSort.sorter;
       deriveNextSorter({

package/es/data-table/src/use-table-data.d.ts

@@ -1,16 +1,13 @@
-import type { ComputedRef } from 'vue';
 import type { PaginationProps } from '../../pagination/src/Pagination';
-import type { ColumnKey, DataTableSetupProps, FilterState, InternalRowData, RowKey, SortState, TableBaseColumn, TableExpandColumn, TableSelectionColumn, TmNode } from './interface';
-export declare function useTableData(props: DataTableSetupProps, { dataRelatedColsRef }: {
-    dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
-}): {
-    treeMateRef: ComputedRef<import("treemate").TreeMate<InternalRowData, InternalRowData, InternalRowData>>;
-    mergedCurrentPageRef: ComputedRef<number>;
-    mergedPaginationRef: ComputedRef<PaginationProps>;
-    paginatedDataRef: ComputedRef<TmNode[]>;
-    rawPaginatedDataRef: ComputedRef<InternalRowData[]>;
-    mergedFilterStateRef: ComputedRef<FilterState>;
-    mergedSortStateRef: ComputedRef<{
+import type { ColumnKey, DataTableSetupProps, FilterState, InternalRowData, RowKey, SortState, TableBaseColumn, TableSelectionColumn, TmNode, UseTableDataDeps } from './interface';
+export declare function useTableData(props: DataTableSetupProps, { dataRelatedColsRef }: UseTableDataDeps): {
+    treeMateRef: import("vue").ComputedRef<import("treemate").TreeMate<InternalRowData, InternalRowData, InternalRowData>>;
+    mergedCurrentPageRef: import("vue").ComputedRef<number>;
+    mergedPaginationRef: import("vue").ComputedRef<PaginationProps>;
+    paginatedDataRef: import("vue").ComputedRef<TmNode[]>;
+    rawPaginatedDataRef: import("vue").ComputedRef<InternalRowData[]>;
+    mergedFilterStateRef: import("vue").ComputedRef<FilterState>;
+    mergedSortStateRef: import("vue").ComputedRef<{
         columnKey: ColumnKey;
         order: import("./interface").SortOrder;
         sorter: boolean | "default" | import("./interface").CompareFn<InternalRowData> | {
@@ -19,8 +16,8 @@ export declare function useTableData(props: DataTableSetupProps, { dataRelatedCo
         };
     }[]>;
     hoverKeyRef: import("vue").Ref<RowKey | null, RowKey | null>;
-    selectionColumnRef: ComputedRef<TableSelectionColumn | null>;
-    childTriggerColIndexRef: ComputedRef<number>;
+    selectionColumnRef: import("vue").ComputedRef<TableSelectionColumn | null>;
+    childTriggerColIndexRef: import("vue").ComputedRef<number>;
     doUpdateFilters: (filters: FilterState, sourceColumn: TableBaseColumn) => void;
     deriveNextSorter: (sortState: SortState | null) => void;
     doUpdatePageSize: (pageSize: number) => void;

package/es/data-table/src/use-table-data.mjs

@@ -68,7 +68,9 @@ export function useTableData(props, {
     const controlledFilterState = {};
     columnsWithControlledFilter.forEach(column => {
       var _a;
-      if (column.type === 'selection' || column.type === 'expand') return;
+      if (column.type === 'selection' || column.type === 'expand' || column.type === 'draggable') {
+        return;
+      }
       if (column.filterOptionValues === undefined) {
         controlledFilterState[column.key] = (_a = column.filterOptionValue) !== null && _a !== void 0 ? _a : null;
       } else {
@@ -93,7 +95,7 @@ export function useTableData(props, {
     } = treeMateRef;
     const columnEntries = [];
     columns.forEach(column => {
-      if (column.type === 'selection' || column.type === 'expand' || 'children' in column) {
+      if (column.type === 'selection' || column.type === 'expand' || column.type === 'draggable' || 'children' in column) {
         return;
       }
       columnEntries.push([column.key, column]);

package/es/data-table/src/use-table-storage.d.ts

@@ -1,4 +1,4 @@
-import type { DataTableStorageState, SortState, TableBaseColumn, TableExpandColumn, TableSelectionColumn } from './interface';
+import type { DataRelatedColumn, DataTableStorageState, SortState } from './interface';
 export declare function loadTableState(localStorageKey: string): DataTableStorageState | null;
 export declare function saveTableState(localStorageKey: string, state: DataTableStorageState): void;
-export declare function restoreSortStateFromStored(stored: DataTableStorageState['sortState'], dataRelatedCols: Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>): SortState[] | null;
+export declare function restoreSortStateFromStored(stored: DataTableStorageState['sortState'], dataRelatedCols: DataRelatedColumn[]): SortState[] | null;

package/es/data-table/src/use-table-storage.mjs

@@ -22,7 +22,7 @@ export function restoreSortStateFromStored(stored, dataRelatedCols) {
   if (!(stored === null || stored === void 0 ? void 0 : stored.length)) return null;
   const result = [];
   for (const item of stored) {
-    const column = dataRelatedCols.find(col => col.type !== 'selection' && col.type !== 'expand' && 'key' in col && col.key === item.columnKey && col.sorter !== undefined);
+    const column = dataRelatedCols.find(col => col.type !== 'selection' && col.type !== 'expand' && col.type !== 'draggable' && 'key' in col && col.key === item.columnKey && col.sorter !== undefined);
     if (column === null || column === void 0 ? void 0 : column.sorter) {
       result.push({
         columnKey: item.columnKey,

package/es/data-table/src/utils/column-utils.d.ts

@@ -1,11 +1,12 @@
 import type { CSSProperties } from 'vue';
-import type { CreateRowClassName, InternalRowData, TableBaseColumn, TableColumn, TableExpandColumn, TableSelectionColumn } from '../interface';
+import type { CreateRowClassName, DataRelatedColumn, InternalRowData, TableColumn } from '../interface';
 export declare const SELECTION_COL_WIDTH = 40;
 export declare const EXPAND_COL_WIDTH = 40;
+export declare const DRAGGABLE_COL_WIDTH = 40;
 export declare function getNumberColWidth(column: TableColumn): number | undefined;
 export declare function getStringColWidth(column: TableColumn): string | undefined;
 export declare function getColKey(column: TableColumn): string | number;
-export declare function createCustomWidthStyle(column: TableBaseColumn | TableSelectionColumn | TableExpandColumn, resizedWidth?: string): CSSProperties;
+export declare function createCustomWidthStyle(column: DataRelatedColumn, resizedWidth?: string): CSSProperties;
 export declare function createRowClassName(row: InternalRowData, index: number, rowClassName?: string | CreateRowClassName): string;
 export declare function isColumnSortable(column: TableColumn): boolean;
 export declare function isColumnEllipsisEnabled(column: Pick<TableColumn, 'ellipsis'>): boolean;

package/es/data-table/src/utils/column-utils.mjs

@@ -3,6 +3,7 @@ import { formatLength } from "../../../_utils/index.mjs";
 import { clampValueFollowCSSRules, parseLengthToNumber } from "./width-utils.mjs";
 export const SELECTION_COL_WIDTH = 40;
 export const EXPAND_COL_WIDTH = 40;
+export const DRAGGABLE_COL_WIDTH = 40;
 export function getNumberColWidth(column) {
   if (column.type === 'selection') {
     return column.width === undefined ? SELECTION_COL_WIDTH : depx(column.width);
@@ -10,6 +11,9 @@ export function getNumberColWidth(column) {
   if (column.type === 'expand') {
     return column.width === undefined ? EXPAND_COL_WIDTH : depx(column.width);
   }
+  if (column.type === 'draggable') {
+    return column.width === undefined ? DRAGGABLE_COL_WIDTH : depx(column.width);
+  }
   if ('children' in column) return undefined;
   if (typeof column.width === 'string') {
     return depx(column.width);
@@ -17,13 +21,16 @@ export function getNumberColWidth(column) {
   return column.width;
 }
 export function getStringColWidth(column) {
-  var _a, _b;
+  var _a, _b, _c;
   if (column.type === 'selection') {
     return formatLength((_a = column.width) !== null && _a !== void 0 ? _a : SELECTION_COL_WIDTH);
   }
   if (column.type === 'expand') {
     return formatLength((_b = column.width) !== null && _b !== void 0 ? _b : EXPAND_COL_WIDTH);
   }
+  if (column.type === 'draggable') {
+    return formatLength((_c = column.width) !== null && _c !== void 0 ? _c : DRAGGABLE_COL_WIDTH);
+  }
   if ('children' in column) {
     return undefined;
   }
@@ -32,6 +39,7 @@ export function getStringColWidth(column) {
 export function getColKey(column) {
   if (column.type === 'selection') return '__n_selection__';
   if (column.type === 'expand') return '__n_expand__';
+  if (column.type === 'draggable') return '__n_draggable__';
   return column.key;
 }
 export function createCustomWidthStyle(column, resizedWidth) {

package/es/data-table/src/utils/csv-utils.mjs

@@ -8,7 +8,7 @@ function formatCsvCell(value) {
   }
 }
 export function generateCsv(columns, data, getCsvCell, getCsvHeader) {
-  const exportableColumns = columns.filter(column => column.type !== 'expand' && column.type !== 'selection' && column.allowExport !== false);
+  const exportableColumns = columns.filter(column => column.type !== 'expand' && column.type !== 'selection' && column.type !== 'draggable' && column.allowExport !== false);
   const header = exportableColumns.map(col => {
     return getCsvHeader ? getCsvHeader(col) : col.title;
   }).join(',');

package/es/data-table/src/utils/flatten-rows.d.ts

@@ -0,0 +1,2 @@
+import type { NormalRowRenderInfo, RowKey } from '../interface';
+export declare function flattenExpandedRows(rowInfos: NormalRowRenderInfo[], expandedRowKeys: Set<RowKey>): NormalRowRenderInfo[];

package/es/data-table/src/utils/flatten-rows.mjs

@@ -0,0 +1,33 @@
+export function flattenExpandedRows(rowInfos, expandedRowKeys) {
+  const flattenedRows = [];
+  function traverse(nodes, rootIndex) {
+    nodes.forEach(node => {
+      if (node.children && expandedRowKeys.has(node.key)) {
+        flattenedRows.push({
+          tmNode: node,
+          striped: false,
+          key: node.key,
+          index: rootIndex
+        });
+        traverse(node.children, rootIndex);
+      } else {
+        flattenedRows.push({
+          key: node.key,
+          tmNode: node,
+          striped: false,
+          index: rootIndex
+        });
+      }
+    });
+  }
+  rowInfos.forEach(rowInfo => {
+    flattenedRows.push(rowInfo);
+    const {
+      children
+    } = rowInfo.tmNode;
+    if (children && expandedRowKeys.has(rowInfo.key)) {
+      traverse(children, rowInfo.index);
+    }
+  });
+  return flattenedRows;
+}

package/es/data-table/src/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './column-utils';
 export * from './csv-utils';
+export * from './flatten-rows';
 export * from './mask-defaults';
 export * from './resize-orchestrator-utils';
 export * from './sort-filter-utils';

package/es/data-table/src/utils/index.mjs

@@ -1,5 +1,6 @@
 export * from "./column-utils.mjs";
 export * from "./csv-utils.mjs";
+export * from "./flatten-rows.mjs";
 export * from "./mask-defaults.mjs";
 export * from "./resize-orchestrator-utils.mjs";
 export * from "./sort-filter-utils.mjs";

package/es/data-table/src/utils/resize-orchestrator-utils.d.ts

@@ -1,6 +1,4 @@
-import type { ColumnWidthComputationItem, TableBaseColumn, TableExpandColumn, TableSelectionColumn } from '../interface';
-type ResizableLeafColumn = TableSelectionColumn | TableBaseColumn | TableExpandColumn;
-export declare function deriveVisibleLeafColumnWidthItems(columns: ResizableLeafColumn[]): ColumnWidthComputationItem[];
-export declare function deriveResizableColumnWidthItems(columns: ResizableLeafColumn[]): ColumnWidthComputationItem[];
+import type { ColumnWidthComputationItem, DataRelatedColumn } from '../interface';
+export declare function deriveVisibleLeafColumnWidthItems(columns: DataRelatedColumn[]): ColumnWidthComputationItem[];
+export declare function deriveResizableColumnWidthItems(columns: DataRelatedColumn[]): ColumnWidthComputationItem[];
 export declare function deriveColumnWidthSignature(columns: ColumnWidthComputationItem[]): string;
-export {};

package/es/data-table/src/utils/width-utils.d.ts

@@ -1,11 +1,11 @@
-import type { ColumnKey, ColumnWidthComputationItem, TableBaseColumn, TableExpandColumn, TableSelectionColumn } from '../interface';
+import type { ColumnKey, ColumnWidthComputationItem, DataRelatedColumn } from '../interface';
 export interface ColumnWidthConstraint {
     min?: number;
     max?: number;
 }
 export declare function clampValueFollowCSSRules(value: number, min?: number | string, max?: number | string): number;
 export declare function parseLengthToNumber(value: number | string | undefined): number | undefined;
-export declare function resolveColumnWidthConstraint(column: TableBaseColumn | TableSelectionColumn | TableExpandColumn | ColumnWidthComputationItem, systemMinWidth?: number | string, systemMaxWidth?: number | string): ColumnWidthConstraint;
+export declare function resolveColumnWidthConstraint(column: DataRelatedColumn | ColumnWidthComputationItem, systemMinWidth?: number | string, systemMaxWidth?: number | string): ColumnWidthConstraint;
 export declare function computeFixedTableColumnWidths(columns: ColumnWidthComputationItem[], { containerWidth, systemMinWidth, systemMaxWidth, preferredWidths }: {
     containerWidth?: number;
     systemMinWidth?: number | string;

package/es/data-table/styles/light.d.ts

@@ -41,6 +41,9 @@ export declare function self(vars: ThemeCommonVars): {
     thButtonColorHover: string;
     thIconColor: string;
     thIconColorActive: string;
+    dropMarkColor: string;
+    dragGhostOpacity: string;
+    dragGhostFilter: string;
     borderColorModal: string;
     tdColorHoverModal: string;
     tdColorStripedModal: string;
@@ -102,6 +105,9 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
     thButtonColorHover: string;
     thIconColor: string;
     thIconColorActive: string;
+    dropMarkColor: string;
+    dragGhostOpacity: string;
+    dragGhostFilter: string;
     borderColorModal: string;
     tdColorHoverModal: string;
     tdColorStripedModal: string;

package/es/data-table/styles/light.mjs

@@ -71,6 +71,9 @@ export function self(vars) {
     thButtonColorHover: elementsTertiary,
     thIconColor: elementsPrimary,
     thIconColorActive: brandPrimary500,
+    dropMarkColor: brandPrimary500,
+    dragGhostOpacity: '0.85',
+    dragGhostFilter: 'drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18))',
     // modal
     borderColorModal: elementsQuaternary,
     tdColorHoverModal: elementsTertiary,

package/es/mapping-card/src/MappingCard.d.ts

@@ -1,6 +1,10 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     title: import("vue").PropType<import("./interface").MappingCardInterface["title"]>;
     description: import("vue").PropType<import("./interface").MappingCardInterface["description"]>;
+    subTitle: import("vue").PropType<import("./interface").MappingCardInterface["subTitle"]>;
+    subDescription: import("vue").PropType<import("./interface").MappingCardInterface["subDescription"]>;
+    headerInfo: import("vue").PropType<import("./interface").MappingCardInterface["headerInfo"]>;
+    headerSubInfo: import("vue").PropType<import("./interface").MappingCardInterface["headerSubInfo"]>;
     rows: import("vue").PropType<import("./interface").MappingCardInterface["rows"]>;
     cols: {
         readonly type: import("vue").PropType<import("./interface").MappingCardInterface["cols"]>;
@@ -1055,6 +1059,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: import("vue").PropType<import("./interface").MappingCardInterface["title"]>;
     description: import("vue").PropType<import("./interface").MappingCardInterface["description"]>;
+    subTitle: import("vue").PropType<import("./interface").MappingCardInterface["subTitle"]>;
+    subDescription: import("vue").PropType<import("./interface").MappingCardInterface["subDescription"]>;
+    headerInfo: import("vue").PropType<import("./interface").MappingCardInterface["headerInfo"]>;
+    headerSubInfo: import("vue").PropType<import("./interface").MappingCardInterface["headerSubInfo"]>;
     rows: import("vue").PropType<import("./interface").MappingCardInterface["rows"]>;
     cols: {
         readonly type: import("vue").PropType<import("./interface").MappingCardInterface["cols"]>;

package/es/mapping-card/src/MappingCard.mjs

@@ -71,7 +71,9 @@ export default defineComponent({
       class: [`${this.mergedClsPrefix}-mapping-card`, themeClass],
       style: cssVars
     }, h(MappingCardHeader, null, {
-      headerActions: this.$slots.headerActions
+      headerActions: this.$slots.headerActions,
+      headerInfo: this.$slots.headerInfo,
+      headerSubInfo: this.$slots.headerSubInfo
     }), h(MappingCardBody, null));
   }
 });