@uzum-tech/ui 2.0.4 → 2.0.6

package/dist/index.mjs

@@ -2370,7 +2370,7 @@ function getSlot$1(scope, slots, slotName = 'default') {
   return slot();
 }
 // o(n) flatten
-function flatten$3(vNodes, filterCommentNode = true, result = []) {
+function flatten$2(vNodes, filterCommentNode = true, result = []) {
   vNodes.forEach(vNode => {
     if (vNode === null) return;
     if (typeof vNode !== 'object') {
@@ -2380,13 +2380,13 @@ function flatten$3(vNodes, filterCommentNode = true, result = []) {
       return;
     }
     if (Array.isArray(vNode)) {
-      flatten$3(vNode, filterCommentNode, result);
+      flatten$2(vNode, filterCommentNode, result);
       return;
     }
     if (vNode.type === Fragment) {
       if (vNode.children === null) return;
       if (Array.isArray(vNode.children)) {
-        flatten$3(vNode.children, filterCommentNode, result);
+        flatten$2(vNode.children, filterCommentNode, result);
       }
       // rawSlot
     } else if (vNode.type !== Comment) {
@@ -2400,7 +2400,7 @@ function getFirstVNode(scope, slots, slotName = 'default') {
   if (slot === undefined) {
     throw new Error(`[vueuc/${scope}]: slot[${slotName}] is empty.`);
   }
-  const content = flatten$3(slot());
+  const content = flatten$2(slot());
   // vue will normalize the slot, so slot must be an array
   if (content.length === 1) {
     return content[0];
@@ -5551,7 +5551,7 @@ function createRefSetter(ref) {
   };
 }
 
-function flatten$2(vNodes, filterCommentNode = true, result = []) {
+function flatten$1(vNodes, filterCommentNode = true, result = []) {
   vNodes.forEach(vNode => {
     if (vNode === null) return;
     if (typeof vNode !== "object") {
@@ -5561,13 +5561,13 @@ function flatten$2(vNodes, filterCommentNode = true, result = []) {
       return;
     }
     if (Array.isArray(vNode)) {
-      flatten$2(vNode, filterCommentNode, result);
+      flatten$1(vNode, filterCommentNode, result);
       return;
     }
     if (vNode.type === Fragment) {
       if (vNode.children === null) return;
       if (Array.isArray(vNode.children)) {
-        flatten$2(vNode.children, filterCommentNode, result);
+        flatten$1(vNode.children, filterCommentNode, result);
       }
     } else if (vNode.type !== Comment) {
       result.push(vNode);
@@ -5582,7 +5582,7 @@ function getFirstSlotVNode(slots, slotName = "default", props = void 0) {
     warn("getFirstSlotVNode", `slot[${slotName}] is empty`);
     return null;
   }
-  const slotContent = flatten$2(slot(props));
+  const slotContent = flatten$1(slot(props));
   if (slotContent.length === 1) {
     return slotContent[0];
   } else {
@@ -5594,7 +5594,7 @@ function getFirstSlotVNodeWithTypedProps(slotName, slot, props) {
   if (!slot) {
     return null;
   }
-  const slotContent = flatten$2(slot(props));
+  const slotContent = flatten$1(slot(props));
   if (slotContent.length === 1) {
     return slotContent[0];
   } else {
@@ -14154,6 +14154,29 @@ var DownloadIcon = replaceable(
   /* @__PURE__ */ h("svg", { viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, /* @__PURE__ */ h("g", { fill: "currentColor", "fill-rule": "nonzero" }, /* @__PURE__ */ h("path", { d: "M3.5,13 L12.5,13 C12.7761424,13 13,13.2238576 13,13.5 C13,13.7454599 12.8231248,13.9496084 12.5898756,13.9919443 L12.5,14 L3.5,14 C3.22385763,14 3,13.7761424 3,13.5 C3,13.2545401 3.17687516,13.0503916 3.41012437,13.0080557 L3.5,13 L12.5,13 L3.5,13 Z M7.91012437,1.00805567 L8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.292 L11.1819805,7.6109127 C11.3555469,7.43734635 11.6249713,7.4180612 11.8198394,7.55305725 L11.8890873,7.6109127 C12.0626536,7.78447906 12.0819388,8.05390346 11.9469427,8.2487716 L11.8890873,8.31801948 L8.35355339,11.8535534 C8.17998704,12.0271197 7.91056264,12.0464049 7.7156945,11.9114088 L7.64644661,11.8535534 L4.1109127,8.31801948 C3.91565056,8.12275734 3.91565056,7.80617485 4.1109127,7.6109127 C4.28447906,7.43734635 4.55390346,7.4180612 4.7487716,7.55305725 L4.81801948,7.6109127 L7.5,10.292 L7.5,1.5 C7.5,1.25454011 7.67687516,1.05039163 7.91012437,1.00805567 L8,1 L7.91012437,1.00805567 Z" }))))
 );
 
+var DragHandleRound = defineComponent({
+  name: "DragHandleRound",
+  render() {
+    return /* @__PURE__ */ h(
+      "svg",
+      {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ h(
+        "path",
+        {
+          d: "M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z",
+          fill: "currentColor"
+        }
+      )
+    );
+  }
+});
+
 var EditIcon = defineComponent({
   name: "Edit",
   render() {
@@ -18005,7 +18028,7 @@ const moveMethods = {
   }
 };
 
-function flatten$1(treeNodes, expandedKeys) {
+function flatten(treeNodes, expandedKeys) {
   const expandedKeySet = expandedKeys ? new Set(expandedKeys) : undefined;
   const flattenedNodes = [];
   function traverse(treeNodes) {
@@ -18152,7 +18175,7 @@ function createTreeMate(rawNodes, options = {}) {
     maxLevel: Math.max(...levelTreeNodeMap.keys()),
     getChildren,
     getFlattenedNodes(expandedKeys) {
-      return flatten$1(treeNodes, expandedKeys);
+      return flatten(treeNodes, expandedKeys);
     },
     getNode,
     getPrev,
@@ -21147,7 +21170,7 @@ var _UTagGroup = defineComponent({
   render() {
     const { mergedClsPrefix, mergedValue, mergedSize, mergedDisabled } = this;
     const children = mapSlot$1(
-      flatten$2(getSlot(this)),
+      flatten$1(getSlot(this)),
       mergedValue,
       mergedSize,
       mergedDisabled,
@@ -39061,7 +39084,7 @@ var UGrid$1 = defineComponent({
     }
     const renderContent = () => {
       this.overflow = false;
-      const rawChildren = flatten$2(getSlot(this));
+      const rawChildren = flatten$1(getSlot(this));
       const childrenAndRawSpan = [];
       const { collapsed, collapsedRows, responsiveCols, responsiveQuery } = this;
       rawChildren.forEach((child) => {
@@ -41023,7 +41046,7 @@ var _UCarousel = defineComponent({
       dotSlotProps,
       $slots: { default: defaultSlot, dots: dotsSlot, arrow: arrowSlot }
     } = this;
-    const children = defaultSlot && flatten$2(defaultSlot()) || [];
+    const children = defaultSlot && flatten$1(defaultSlot()) || [];
     let slides = filterCarouselItem(children);
     if (!slides.length) {
       slides = children.map((ch) => /* @__PURE__ */ h(_UCarouselItem, null, {
@@ -43814,7 +43837,7 @@ var _UFlex = defineComponent({
       mergedClsPrefix,
       rtlEnabled
     } = this;
-    const children = flatten$2(getSlot(this), false);
+    const children = flatten$1(getSlot(this), false);
     if (!children.length) {
       return null;
     }
@@ -46722,6 +46745,9 @@ function self$T(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,
@@ -65788,6 +65814,7 @@ function areColumnWidthMapsEqual(previousWidths, nextWidths, keys) {
 
 const SELECTION_COL_WIDTH = 40;
 const EXPAND_COL_WIDTH = 40;
+const DRAGGABLE_COL_WIDTH = 40;
 function getNumberColWidth(column) {
   if (column.type === "selection") {
     return column.width === void 0 ? SELECTION_COL_WIDTH : depx(column.width);
@@ -65795,6 +65822,9 @@ function getNumberColWidth(column) {
   if (column.type === "expand") {
     return column.width === void 0 ? EXPAND_COL_WIDTH : depx(column.width);
   }
+  if (column.type === "draggable") {
+    return column.width === void 0 ? DRAGGABLE_COL_WIDTH : depx(column.width);
+  }
   if ("children" in column) return void 0;
   if (typeof column.width === "string") {
     return depx(column.width);
@@ -65808,6 +65838,9 @@ function getStringColWidth(column) {
   if (column.type === "expand") {
     return formatLength(column.width ?? EXPAND_COL_WIDTH);
   }
+  if (column.type === "draggable") {
+    return formatLength(column.width ?? DRAGGABLE_COL_WIDTH);
+  }
   if ("children" in column) {
     return void 0;
   }
@@ -65816,6 +65849,7 @@ function getStringColWidth(column) {
 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;
 }
 function createCustomWidthStyle(column, resizedWidth) {
@@ -65876,7 +65910,7 @@ function formatCsvCell(value) {
   }
 }
 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(",");
@@ -65888,6 +65922,40 @@ function generateCsv(columns, data, getCsvCell, getCsvHeader) {
   return [header, ...rows].join("\n");
 }
 
+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;
+}
+
 const REGEX = {
   ONLY_DIGITS: /\D/g};
 const defaultNumericMask = {
@@ -65960,6 +66028,39 @@ function isColumnSorting(column, mergedSortState) {
   return mergedSortState.some(state => state.columnKey === column.key && state.order);
 }
 
+function renderBodyEmpty(deps) {
+  const {
+    clsPrefix,
+    loading,
+    bodyStyle,
+    dataTableSlots,
+    mergedTheme,
+    emptyProps
+  } = deps;
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      class: [
+        `${clsPrefix}-data-table-empty`,
+        loading && `${clsPrefix}-data-table-empty--hide`
+      ],
+      style: bodyStyle,
+      ref: "emptyElRef"
+    },
+    resolveSlot(dataTableSlots.empty, () => [
+      /* @__PURE__ */ h(
+        UEmpty$1,
+        {
+          size: "large",
+          theme: mergedTheme.peers.Empty,
+          themeOverrides: mergedTheme.peerOverrides.Empty,
+          ...emptyProps
+        }
+      )
+    ])
+  );
+}
+
 var RenderSafeCheckbox = defineComponent({
   name: "DataTableBodyCheckbox",
   props: {
@@ -66618,7 +66719,7 @@ var _URadioGroup = defineComponent({
   render() {
     const { mergedValue, mergedClsPrefix, handleFocusin, handleFocusout } = this;
     const { children, isButtonGroup } = mapSlot(
-      flatten$2(getSlot(this)),
+      flatten$1(getSlot(this)),
       mergedValue,
       mergedClsPrefix
     );
@@ -66682,90 +66783,6 @@ var RenderSafeRadio = defineComponent({
   }
 });
 
-var BodySkeleton = defineComponent({
-  name: "DataTableBodySkeleton",
-  props: {
-    rowCount: {
-      type: Number,
-      default: 10
-    }
-  },
-  setup(props) {
-    const {
-      mergedClsPrefixRef,
-      colsRef,
-      props: dataTableProps
-    } = inject(dataTableInjectionKey);
-    const skeletonRowCount = computed(() => {
-      if (dataTableProps.pagination && typeof dataTableProps.pagination === "object" && dataTableProps.pagination.pageSize) {
-        return dataTableProps.pagination.pageSize;
-      }
-      return props.rowCount;
-    });
-    return {
-      mergedClsPrefix: mergedClsPrefixRef,
-      cols: colsRef,
-      skeletonRowCount
-    };
-  },
-  render() {
-    const { mergedClsPrefix, cols, skeletonRowCount } = this;
-    const skeletonRows = Array.from(
-      { length: skeletonRowCount },
-      (_, index) => /* @__PURE__ */ h(
-        "tr",
-        {
-          key: `skeleton-row-${index}`,
-          class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--skeleton`
-        },
-        cols.map((col) => /* @__PURE__ */ h(
-          "td",
-          {
-            key: col.key,
-            class: [
-              `${mergedClsPrefix}-data-table-td`,
-              `${mergedClsPrefix}-data-table-td--skeleton`,
-              col.column.fixed && `${mergedClsPrefix}-data-table-td--fixed-${col.column.fixed}`,
-              col.column.align && `${mergedClsPrefix}-data-table-td--${col.column.align}-align`
-            ],
-            style: {
-              textAlign: col.column.align || void 0,
-              padding: "var(--u-td-padding)"
-            }
-          },
-          col.column.fixed && /* @__PURE__ */ h(
-            "div",
-            {
-              class: `${mergedClsPrefix}-data-table-td__shadow-holder`
-            }
-          ),
-          /* @__PURE__ */ h(
-            _USkeleton,
-            {
-              height: "var(--u-line-height)",
-              width: col.column.type === "selection" ? "16px" : "85%",
-              animated: true,
-              style: {
-                borderRadius: "16px"
-              }
-            }
-          )
-        ))
-      )
-    );
-    return /* @__PURE__ */ h(
-      "tbody",
-      {
-        class: [
-          `${mergedClsPrefix}-data-table-tbody`,
-          `${mergedClsPrefix}-data-table-tbody--skeleton`
-        ]
-      },
-      skeletonRows
-    );
-  }
-});
-
 function applyMask(value, mask) {
   if (!mask) return value;
   if (!value || value.trim() === "") return "";
@@ -67079,6 +67096,404 @@ var ExpandTrigger = defineComponent({
   }
 });
 
+function renderExpandedRow(context, rowInfo, displayedRowIndex) {
+  const {
+    mergedClsPrefix,
+    colCount,
+    rowCount,
+    stickyExpandedRows,
+    bodyWidthPx,
+    renderExpand
+  } = context;
+  const { index: actualRowIndex } = rowInfo;
+  const {
+    tmNode: { key, rawNode }
+  } = rowInfo;
+  return /* @__PURE__ */ h(
+    "tr",
+    {
+      class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`,
+      key: `${key}__expand`
+    },
+    /* @__PURE__ */ h(
+      "td",
+      {
+        class: [
+          `${mergedClsPrefix}-data-table-td`,
+          `${mergedClsPrefix}-data-table-td--last-col`,
+          displayedRowIndex + 1 === rowCount && `${mergedClsPrefix}-data-table-td--last-row`
+        ],
+        colspan: colCount
+      },
+      stickyExpandedRows ? /* @__PURE__ */ h(
+        "div",
+        {
+          class: `${mergedClsPrefix}-data-table-expand`,
+          style: {
+            width: bodyWidthPx
+          }
+        },
+        renderExpand(rawNode, actualRowIndex)
+      ) : renderExpand(rawNode, actualRowIndex)
+    )
+  );
+}
+function renderBodyRow(context, rowInfo, displayedRowIndex, isVirtual) {
+  if ("isExpandedRow" in rowInfo) {
+    return renderExpandedRow(context, rowInfo, displayedRowIndex);
+  }
+  const {
+    mergedClsPrefix,
+    cols,
+    colCount,
+    rowCount,
+    hasChildren,
+    childTriggerColIndex,
+    indentStyle,
+    rowClassName,
+    rowProps,
+    mergedSortState,
+    mergedExpandedRowKeySet,
+    fixedColumnLeftMap,
+    fixedColumnRightMap,
+    currentPage,
+    loadingKeySet,
+    renderExpandIcon,
+    renderCell,
+    defaultEmptyValue,
+    mergedTheme,
+    rowIndexToKey,
+    cordToPass,
+    cordKey,
+    draggableColumn,
+    droppingRowKey,
+    droppingPosition,
+    draggingRowKeySet,
+    hoverKey,
+    dataTableSlots,
+    setHoverKey,
+    handleCheckboxUpdateChecked,
+    handleRadioUpdateChecked,
+    handleUpdateExpanded,
+    handleRowDragStart,
+    handleRowDragOver,
+    handleRowDragLeave,
+    handleRowDragEnd,
+    handleRowDrop,
+    emitEdit
+  } = context;
+  const { index: actualRowIndex } = rowInfo;
+  const isSummary = "isSummaryRow" in rowInfo;
+  const striped = !isSummary && rowInfo.striped;
+  const { tmNode, key: rowKey } = rowInfo;
+  const { rawNode: rowData } = tmNode;
+  const expanded = mergedExpandedRowKeySet.has(rowKey);
+  const props = rowProps ? rowProps(rowData, actualRowIndex) : void 0;
+  const mergedRowClassName = typeof rowClassName === "string" ? rowClassName : createRowClassName(rowData, actualRowIndex, rowClassName);
+  const { class: _class, ...restProps } = props || {};
+  const isRowDraggable = !isSummary && !!draggableColumn && (typeof draggableColumn.draggable === "function" ? draggableColumn.draggable(rowData) : true);
+  const isDropTarget = !!draggableColumn && droppingRowKey === rowKey;
+  const dropPosition = isDropTarget ? droppingPosition : null;
+  const isBeingDragged = !!draggableColumn && draggingRowKeySet.has(rowKey);
+  const row = /* @__PURE__ */ h(
+    "tr",
+    {
+      onMouseenter: () => {
+        setHoverKey(rowKey);
+      },
+      key: rowKey,
+      "data-row-key": String(rowKey),
+      onDragover: draggableColumn && !isSummary ? (event) => handleRowDragOver(event, rowKey) : void 0,
+      onDragleave: draggableColumn && !isSummary ? (event) => handleRowDragLeave(event, rowKey) : void 0,
+      onDrop: draggableColumn && !isSummary ? (event) => handleRowDrop(event, rowKey) : void 0,
+      class: [
+        `${mergedClsPrefix}-data-table-tr`,
+        rowInfo.tmNode.disabled && `${mergedClsPrefix}-data-table-tr--disabled`,
+        isSummary && `${mergedClsPrefix}-data-table-tr--summary`,
+        striped && `${mergedClsPrefix}-data-table-tr--striped`,
+        expanded && `${mergedClsPrefix}-data-table-tr--expanded`,
+        isBeingDragged && `${mergedClsPrefix}-data-table-tr--dragging`,
+        isDropTarget && dropPosition === "before" && `${mergedClsPrefix}-data-table-tr--drop-before`,
+        isDropTarget && dropPosition === "after" && `${mergedClsPrefix}-data-table-tr--drop-after`,
+        mergedRowClassName,
+        _class
+      ],
+      ...restProps
+    },
+    cols.map((col, colIndex) => {
+      if (displayedRowIndex in cordToPass) {
+        const cordOfRowToPass = cordToPass[displayedRowIndex];
+        const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
+        if (~indexInCordOfRowToPass) {
+          cordOfRowToPass.splice(indexInCordOfRowToPass, 1);
+          return null;
+        }
+      }
+      const { column } = col;
+      const colKey = getColKey(col);
+      const { rowSpan, colSpan } = column;
+      const mergedColSpan = isSummary ? rowInfo.tmNode.rawNode[colKey]?.colSpan || 1 : colSpan ? colSpan(rowData, actualRowIndex) : 1;
+      const mergedRowSpan = isSummary ? rowInfo.tmNode.rawNode[colKey]?.rowSpan || 1 : rowSpan ? rowSpan(rowData, actualRowIndex) : 1;
+      const isLastCol = colIndex + mergedColSpan === colCount;
+      const isLastRow = displayedRowIndex + mergedRowSpan === rowCount;
+      const isCrossRowTd = mergedRowSpan > 1;
+      if (isCrossRowTd) {
+        cordKey[displayedRowIndex] = {
+          [colIndex]: []
+        };
+      }
+      if (mergedColSpan > 1 || isCrossRowTd) {
+        for (let i = displayedRowIndex; i < displayedRowIndex + mergedRowSpan; ++i) {
+          if (isCrossRowTd) {
+            cordKey[displayedRowIndex][colIndex].push(rowIndexToKey[i]);
+          }
+          for (let j = colIndex; j < colIndex + mergedColSpan; ++j) {
+            if (i === displayedRowIndex && j === colIndex) {
+              continue;
+            }
+            if (!(i in cordToPass)) {
+              cordToPass[i] = [j];
+            } else {
+              cordToPass[i].push(j);
+            }
+          }
+        }
+      }
+      const cellHoverKey = isCrossRowTd ? hoverKey : null;
+      const { cellProps } = column;
+      const resolvedCellProps = cellProps?.(rowData, actualRowIndex);
+      const indentOffsetStyle = {
+        "--indent-offset": ""
+      };
+      const isDraggableHandleCell = column.type === "draggable" && !isSummary && isRowDraggable;
+      return /* @__PURE__ */ h(
+        "td",
+        {
+          ...resolvedCellProps,
+          key: colKey,
+          draggable: isDraggableHandleCell || void 0,
+          onDragstart: isDraggableHandleCell ? (event) => handleRowDragStart(event, rowKey) : void 0,
+          onDragend: isDraggableHandleCell ? () => handleRowDragEnd() : void 0,
+          style: [
+            {
+              textAlign: column.align || void 0,
+              left: pxfy(fixedColumnLeftMap[colKey]?.start),
+              right: pxfy(fixedColumnRightMap[colKey]?.start)
+            },
+            indentOffsetStyle,
+            resolvedCellProps?.style || ""
+          ],
+          colspan: mergedColSpan,
+          rowspan: isVirtual ? void 0 : mergedRowSpan,
+          "data-col-key": colKey,
+          class: [
+            `${mergedClsPrefix}-data-table-td`,
+            column.className,
+            resolvedCellProps?.class,
+            isSummary && `${mergedClsPrefix}-data-table-td--summary`,
+            (cellHoverKey !== null && cordKey[displayedRowIndex][colIndex].includes(cellHoverKey) || isColumnSorting(column, mergedSortState)) && `${mergedClsPrefix}-data-table-td--hover`,
+            column.fixed && `${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`,
+            column.align && `${mergedClsPrefix}-data-table-td--${column.align}-align`,
+            column.type === "selection" && `${mergedClsPrefix}-data-table-td--selection`,
+            column.type === "expand" && `${mergedClsPrefix}-data-table-td--expand`,
+            column.type === "draggable" && `${mergedClsPrefix}-data-table-td--draggable`,
+            isLastCol && `${mergedClsPrefix}-data-table-td--last-col`,
+            isLastRow && `${mergedClsPrefix}-data-table-td--last-row`,
+            "editable" in column && (typeof column.editable === "function" ? column.editable(rowData) : column.editable) && !isSummary && `${mergedClsPrefix}-data-table-td--editable`
+          ]
+        },
+        column.fixed && /* @__PURE__ */ h(
+          "div",
+          {
+            class: `${mergedClsPrefix}-data-table-td__shadow-holder`
+          }
+        ),
+        hasChildren && colIndex === childTriggerColIndex ? [
+          repeat(
+            indentOffsetStyle["--indent-offset"] = isSummary ? 0 : rowInfo.tmNode.level,
+            /* @__PURE__ */ h(
+              "div",
+              {
+                class: `${mergedClsPrefix}-data-table-indent`,
+                style: indentStyle
+              }
+            )
+          ),
+          isSummary || rowInfo.tmNode.isLeaf ? /* @__PURE__ */ h(
+            "div",
+            {
+              class: `${mergedClsPrefix}-data-table-expand-placeholder`
+            }
+          ) : /* @__PURE__ */ h(
+            ExpandTrigger,
+            {
+              class: `${mergedClsPrefix}-data-table-expand-trigger`,
+              clsPrefix: mergedClsPrefix,
+              expanded,
+              renderExpandIcon,
+              loading: loadingKeySet.has(rowInfo.key),
+              onClick: () => {
+                handleUpdateExpanded(rowKey, rowInfo.tmNode);
+              }
+            }
+          )
+        ] : null,
+        column.type === "selection" ? !isSummary ? column.multiple === false ? /* @__PURE__ */ h(
+          RenderSafeRadio,
+          {
+            key: currentPage,
+            rowKey,
+            disabled: rowInfo.tmNode.disabled,
+            onClick: (event) => {
+              event.stopPropagation();
+            },
+            onUpdateChecked: () => {
+              handleRadioUpdateChecked(rowInfo.tmNode);
+            }
+          }
+        ) : /* @__PURE__ */ h(
+          RenderSafeCheckbox,
+          {
+            key: currentPage,
+            rowKey,
+            disabled: rowInfo.tmNode.disabled,
+            onUpdateChecked: (checked, event) => {
+              event.stopPropagation();
+              handleCheckboxUpdateChecked(
+                rowInfo.tmNode,
+                checked,
+                event.shiftKey
+              );
+            }
+          }
+        ) : null : column.type === "expand" ? !isSummary ? !column.expandable || column.expandable?.(rowData) ? /* @__PURE__ */ h(
+          ExpandTrigger,
+          {
+            clsPrefix: mergedClsPrefix,
+            expanded,
+            renderExpandIcon,
+            onClick: () => {
+              handleUpdateExpanded(rowKey, null);
+            }
+          }
+        ) : null : null : column.type === "draggable" ? isDraggableHandleCell ? /* @__PURE__ */ h(
+          "span",
+          {
+            class: `${mergedClsPrefix}-data-table-td__drag-handle`,
+            "aria-label": "Drag to reorder"
+          },
+          resolveSlot(dataTableSlots["drag-handle"], () => [
+            /* @__PURE__ */ h(DragHandleRound, null)
+          ])
+        ) : null : /* @__PURE__ */ h(
+          Cell,
+          {
+            clsPrefix: mergedClsPrefix,
+            index: actualRowIndex,
+            row: rowData,
+            column,
+            isSummary,
+            mergedTheme,
+            renderCell,
+            defaultEmptyValue,
+            onEdit: (value, row2, key) => {
+              emitEdit(value, row2, key);
+            }
+          }
+        )
+      );
+    })
+  );
+  return row;
+}
+
+const ICON_COLUMN_SKELETON_WIDTH = "16px";
+const DEFAULT_COLUMN_SKELETON_WIDTH = "85%";
+const SKELETON_BORDER_RADIUS = "16px";
+var BodySkeleton = defineComponent({
+  name: "DataTableBodySkeleton",
+  props: {
+    rowCount: {
+      type: Number,
+      default: 10
+    }
+  },
+  setup(props) {
+    const {
+      mergedClsPrefixRef,
+      colsRef,
+      props: dataTableProps
+    } = inject(dataTableInjectionKey);
+    const skeletonRowCount = computed(() => {
+      if (dataTableProps.pagination && typeof dataTableProps.pagination === "object" && dataTableProps.pagination.pageSize) {
+        return dataTableProps.pagination.pageSize;
+      }
+      return props.rowCount;
+    });
+    return {
+      mergedClsPrefix: mergedClsPrefixRef,
+      cols: colsRef,
+      skeletonRowCount
+    };
+  },
+  render() {
+    const { mergedClsPrefix, cols, skeletonRowCount } = this;
+    const skeletonRows = Array.from(
+      { length: skeletonRowCount },
+      (_, index) => /* @__PURE__ */ h(
+        "tr",
+        {
+          key: `skeleton-row-${index}`,
+          class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--skeleton`
+        },
+        cols.map((col) => /* @__PURE__ */ h(
+          "td",
+          {
+            key: col.key,
+            class: [
+              `${mergedClsPrefix}-data-table-td`,
+              `${mergedClsPrefix}-data-table-td--skeleton`,
+              col.column.fixed && `${mergedClsPrefix}-data-table-td--fixed-${col.column.fixed}`,
+              col.column.align && `${mergedClsPrefix}-data-table-td--${col.column.align}-align`
+            ],
+            style: {
+              textAlign: col.column.align || void 0,
+              padding: "var(--u-td-padding)"
+            }
+          },
+          col.column.fixed && /* @__PURE__ */ h(
+            "div",
+            {
+              class: `${mergedClsPrefix}-data-table-td__shadow-holder`
+            }
+          ),
+          /* @__PURE__ */ h(
+            _USkeleton,
+            {
+              height: "var(--u-line-height)",
+              width: col.column.type === "selection" || col.column.type === "draggable" ? ICON_COLUMN_SKELETON_WIDTH : DEFAULT_COLUMN_SKELETON_WIDTH,
+              animated: true,
+              style: {
+                borderRadius: SKELETON_BORDER_RADIUS
+              }
+            }
+          )
+        ))
+      )
+    );
+    return /* @__PURE__ */ h(
+      "tbody",
+      {
+        class: [
+          `${mergedClsPrefix}-data-table-tbody`,
+          `${mergedClsPrefix}-data-table-tbody--skeleton`
+        ]
+      },
+      skeletonRows
+    );
+  }
+});
+
 var UDataTableFilterMenu = defineComponent({
   name: "DataTableFilterMenu",
   props: {
@@ -67661,6 +68076,8 @@ var SelectionMenu = defineComponent({
 });
 
 function renderTitle(column) {
+  if (column.type === "draggable")
+    return null;
   return typeof column.title === "function" ? column.title(column) : column.title;
 }
 var TableHeader = defineComponent({
@@ -67869,6 +68286,9 @@ var TableHeader = defineComponent({
           const { ellipsis } = column;
           const ellipsisEnabled = isColumnEllipsisEnabled(column);
           const createColumnVNode = () => {
+            if (column.type === "draggable") {
+              return null;
+            }
             if (column.type === "selection") {
               return column.multiple !== false ? /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
                 _UCheckbox,
@@ -67960,7 +68380,7 @@ var TableHeader = defineComponent({
                 },
                 column.className
               ],
-              onClick: column.type !== "selection" && column.type !== "expand" && !("children" in column) ? (e) => {
+              onClick: column.type !== "selection" && column.type !== "expand" && column.type !== "draggable" && !("children" in column) ? (e) => {
                 handleColHeaderClick(e, column);
               } : void 0
             },
@@ -68003,38 +68423,8 @@ var TableHeader = defineComponent({
   }
 });
 
-function flatten(rowInfos, expandedRowKeys) {
-  const fRows = [];
-  function traverse(rs, rootIndex) {
-    rs.forEach((r) => {
-      if (r.children && expandedRowKeys.has(r.key)) {
-        fRows.push({
-          tmNode: r,
-          striped: false,
-          key: r.key,
-          index: rootIndex
-        });
-        traverse(r.children, rootIndex);
-      } else {
-        fRows.push({
-          key: r.key,
-          tmNode: r,
-          striped: false,
-          index: rootIndex
-        });
-      }
-    });
-  }
-  rowInfos.forEach((rowInfo) => {
-    fRows.push(rowInfo);
-    const { children } = rowInfo.tmNode;
-    if (children && expandedRowKeys.has(rowInfo.key)) {
-      traverse(children, rowInfo.index);
-    }
-  });
-  return fRows;
-}
-const VirtualListItemWrapper = defineComponent({
+var VirtualListItemWrapper = defineComponent({
+  name: "VirtualListItemWrapper",
   props: {
     clsPrefix: {
       type: String,
@@ -68067,6 +68457,7 @@ const VirtualListItemWrapper = defineComponent({
     );
   }
 });
+
 var TableBody = defineComponent({
   name: "DataTableBody",
   emits: ["edit"],
@@ -68126,7 +68517,16 @@ var TableBody = defineComponent({
       doUncheck,
       renderCell,
       defaultEmptyValueRef,
-      emptyPropsRef
+      emptyPropsRef,
+      draggableColumnRef,
+      draggingRowKeySetRef,
+      droppingRowKeyRef,
+      droppingPositionRef,
+      handleRowDragStart,
+      handleRowDragOver,
+      handleRowDragLeave,
+      handleRowDragEnd,
+      handleRowDrop
     } = inject(dataTableInjectionKey);
     const UConfigProvider = inject(configProviderInjectionKey, null);
     const scrollbarInstRef = ref(null);
@@ -68429,6 +68829,15 @@ var TableBody = defineComponent({
       renderCell,
       defaultEmptyValueRef,
       emptyPropsRef,
+      draggableColumn: draggableColumnRef,
+      draggingRowKeySet: draggingRowKeySetRef,
+      droppingRowKey: droppingRowKeyRef,
+      droppingPosition: droppingPositionRef,
+      handleRowDragStart,
+      handleRowDragOver,
+      handleRowDragLeave,
+      handleRowDragEnd,
+      handleRowDrop,
       ...exposedMethods
     };
   },
@@ -68505,7 +68914,7 @@ var TableBody = defineComponent({
           const { length: colCount } = cols;
           let mergedData;
           const { data: paginatedData, hasChildren } = paginatedDataAndInfo;
-          const mergedPaginationData = hasChildren ? flatten(paginatedData, mergedExpandedRowKeySet) : paginatedData;
+          const mergedPaginationData = hasChildren ? flattenExpandedRows(paginatedData, mergedExpandedRowKeySet) : paginatedData;
           if (summary) {
             const summaryRows = summary(this.rawPaginatedData);
             if (Array.isArray(summaryRows)) {
@@ -68556,246 +68965,59 @@ var TableBody = defineComponent({
           });
           const bodyWidth = stickyExpandedRows ? this.bodyWidth : null;
           const bodyWidthPx = bodyWidth === null ? void 0 : `${bodyWidth}px`;
-          const renderRow = (rowInfo, displayedRowIndex, isVirtual) => {
-            const { index: actualRowIndex } = rowInfo;
-            if ("isExpandedRow" in rowInfo) {
-              const {
-                tmNode: { key, rawNode }
-              } = rowInfo;
-              return /* @__PURE__ */ h(
-                "tr",
-                {
-                  class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`,
-                  key: `${key}__expand`
-                },
-                /* @__PURE__ */ h(
-                  "td",
-                  {
-                    class: [
-                      `${mergedClsPrefix}-data-table-td`,
-                      `${mergedClsPrefix}-data-table-td--last-col`,
-                      displayedRowIndex + 1 === rowCount && `${mergedClsPrefix}-data-table-td--last-row`
-                    ],
-                    colspan: colCount
-                  },
-                  stickyExpandedRows ? /* @__PURE__ */ h(
-                    "div",
-                    {
-                      class: `${mergedClsPrefix}-data-table-expand`,
-                      style: {
-                        width: bodyWidthPx
-                      }
-                    },
-                    renderExpand(rawNode, actualRowIndex)
-                  ) : renderExpand(rawNode, actualRowIndex)
-                )
-              );
+          const renderContext = {
+            mergedClsPrefix,
+            cols,
+            colCount,
+            rowCount,
+            hasChildren,
+            childTriggerColIndex,
+            indentStyle,
+            rowClassName,
+            rowProps,
+            mergedSortState,
+            mergedExpandedRowKeySet,
+            fixedColumnLeftMap,
+            fixedColumnRightMap,
+            currentPage,
+            loadingKeySet,
+            stickyExpandedRows,
+            bodyWidthPx,
+            renderExpand,
+            renderExpandIcon: this.renderExpandIcon,
+            renderCell: this.renderCell,
+            defaultEmptyValue: this.defaultEmptyValueRef,
+            mergedTheme: mergedTheme2,
+            rowIndexToKey,
+            cordToPass,
+            cordKey,
+            draggableColumn: this.draggableColumn,
+            droppingRowKey: this.droppingRowKey,
+            droppingPosition: this.droppingPosition,
+            draggingRowKeySet: this.draggingRowKeySet,
+            hoverKey: this.hoverKey,
+            dataTableSlots: this.dataTableSlots,
+            setHoverKey: (key) => {
+              this.hoverKey = key;
+            },
+            handleCheckboxUpdateChecked,
+            handleRadioUpdateChecked,
+            handleUpdateExpanded,
+            handleRowDragStart: this.handleRowDragStart,
+            handleRowDragOver: this.handleRowDragOver,
+            handleRowDragLeave: this.handleRowDragLeave,
+            handleRowDragEnd: this.handleRowDragEnd,
+            handleRowDrop: this.handleRowDrop,
+            emitEdit: (value, row, key) => {
+              this.$emit("edit", value, row, key);
             }
-            const isSummary = "isSummaryRow" in rowInfo;
-            const striped = !isSummary && rowInfo.striped;
-            const { tmNode, key: rowKey } = rowInfo;
-            const { rawNode: rowData } = tmNode;
-            const expanded = mergedExpandedRowKeySet.has(rowKey);
-            const props = rowProps ? rowProps(rowData, actualRowIndex) : void 0;
-            const mergedRowClassName = typeof rowClassName === "string" ? rowClassName : createRowClassName(rowData, actualRowIndex, rowClassName);
-            const { class: _class, ...restProps } = props || {};
-            const row = /* @__PURE__ */ h(
-              "tr",
-              {
-                onMouseenter: () => {
-                  this.hoverKey = rowKey;
-                },
-                key: rowKey,
-                class: [
-                  `${mergedClsPrefix}-data-table-tr`,
-                  rowInfo.tmNode.disabled && `${mergedClsPrefix}-data-table-tr--disabled`,
-                  isSummary && `${mergedClsPrefix}-data-table-tr--summary`,
-                  striped && `${mergedClsPrefix}-data-table-tr--striped`,
-                  expanded && `${mergedClsPrefix}-data-table-tr--expanded`,
-                  mergedRowClassName,
-                  _class
-                ],
-                ...restProps
-              },
-              cols.map((col, colIndex) => {
-                if (displayedRowIndex in cordToPass) {
-                  const cordOfRowToPass = cordToPass[displayedRowIndex];
-                  const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
-                  if (~indexInCordOfRowToPass) {
-                    cordOfRowToPass.splice(indexInCordOfRowToPass, 1);
-                    return null;
-                  }
-                }
-                const { column } = col;
-                const colKey = getColKey(col);
-                const { rowSpan, colSpan } = column;
-                const mergedColSpan = isSummary ? rowInfo.tmNode.rawNode[colKey]?.colSpan || 1 : colSpan ? colSpan(rowData, actualRowIndex) : 1;
-                const mergedRowSpan = isSummary ? rowInfo.tmNode.rawNode[colKey]?.rowSpan || 1 : rowSpan ? rowSpan(rowData, actualRowIndex) : 1;
-                const isLastCol = colIndex + mergedColSpan === colCount;
-                const isLastRow = displayedRowIndex + mergedRowSpan === rowCount;
-                const isCrossRowTd = mergedRowSpan > 1;
-                if (isCrossRowTd) {
-                  cordKey[displayedRowIndex] = {
-                    [colIndex]: []
-                  };
-                }
-                if (mergedColSpan > 1 || isCrossRowTd) {
-                  for (let i = displayedRowIndex; i < displayedRowIndex + mergedRowSpan; ++i) {
-                    if (isCrossRowTd) {
-                      cordKey[displayedRowIndex][colIndex].push(
-                        rowIndexToKey[i]
-                      );
-                    }
-                    for (let j = colIndex; j < colIndex + mergedColSpan; ++j) {
-                      if (i === displayedRowIndex && j === colIndex) {
-                        continue;
-                      }
-                      if (!(i in cordToPass)) {
-                        cordToPass[i] = [j];
-                      } else {
-                        cordToPass[i].push(j);
-                      }
-                    }
-                  }
-                }
-                const hoverKey = isCrossRowTd ? this.hoverKey : null;
-                const { cellProps } = column;
-                const resolvedCellProps = cellProps?.(
-                  rowData,
-                  actualRowIndex
-                );
-                const indentOffsetStyle = {
-                  "--indent-offset": ""
-                };
-                return /* @__PURE__ */ h(
-                  "td",
-                  {
-                    ...resolvedCellProps,
-                    key: colKey,
-                    style: [
-                      {
-                        textAlign: column.align || void 0,
-                        left: pxfy(fixedColumnLeftMap[colKey]?.start),
-                        right: pxfy(fixedColumnRightMap[colKey]?.start)
-                      },
-                      indentOffsetStyle,
-                      resolvedCellProps?.style || ""
-                    ],
-                    colspan: mergedColSpan,
-                    rowspan: isVirtual ? void 0 : mergedRowSpan,
-                    "data-col-key": colKey,
-                    class: [
-                      `${mergedClsPrefix}-data-table-td`,
-                      column.className,
-                      resolvedCellProps?.class,
-                      isSummary && `${mergedClsPrefix}-data-table-td--summary`,
-                      (hoverKey !== null && cordKey[displayedRowIndex][colIndex].includes(
-                        hoverKey
-                      ) || isColumnSorting(column, mergedSortState)) && `${mergedClsPrefix}-data-table-td--hover`,
-                      column.fixed && `${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`,
-                      column.align && `${mergedClsPrefix}-data-table-td--${column.align}-align`,
-                      column.type === "selection" && `${mergedClsPrefix}-data-table-td--selection`,
-                      column.type === "expand" && `${mergedClsPrefix}-data-table-td--expand`,
-                      isLastCol && `${mergedClsPrefix}-data-table-td--last-col`,
-                      isLastRow && `${mergedClsPrefix}-data-table-td--last-row`,
-                      "editable" in column && (typeof column.editable === "function" ? column.editable(rowData) : column.editable) && !isSummary && `${mergedClsPrefix}-data-table-td--editable`
-                    ]
-                  },
-                  column.fixed && /* @__PURE__ */ h(
-                    "div",
-                    {
-                      class: `${mergedClsPrefix}-data-table-td__shadow-holder`
-                    }
-                  ),
-                  hasChildren && colIndex === childTriggerColIndex ? [
-                    repeat(
-                      indentOffsetStyle["--indent-offset"] = isSummary ? 0 : rowInfo.tmNode.level,
-                      /* @__PURE__ */ h(
-                        "div",
-                        {
-                          class: `${mergedClsPrefix}-data-table-indent`,
-                          style: indentStyle
-                        }
-                      )
-                    ),
-                    isSummary || rowInfo.tmNode.isLeaf ? /* @__PURE__ */ h(
-                      "div",
-                      {
-                        class: `${mergedClsPrefix}-data-table-expand-placeholder`
-                      }
-                    ) : /* @__PURE__ */ h(
-                      ExpandTrigger,
-                      {
-                        class: `${mergedClsPrefix}-data-table-expand-trigger`,
-                        clsPrefix: mergedClsPrefix,
-                        expanded,
-                        renderExpandIcon: this.renderExpandIcon,
-                        loading: loadingKeySet.has(rowInfo.key),
-                        onClick: () => {
-                          handleUpdateExpanded(rowKey, rowInfo.tmNode);
-                        }
-                      }
-                    )
-                  ] : null,
-                  column.type === "selection" ? !isSummary ? column.multiple === false ? /* @__PURE__ */ h(
-                    RenderSafeRadio,
-                    {
-                      key: currentPage,
-                      rowKey,
-                      disabled: rowInfo.tmNode.disabled,
-                      onClick: (event) => {
-                        event.stopPropagation();
-                      },
-                      onUpdateChecked: () => {
-                        handleRadioUpdateChecked(rowInfo.tmNode);
-                      }
-                    }
-                  ) : /* @__PURE__ */ h(
-                    RenderSafeCheckbox,
-                    {
-                      key: currentPage,
-                      rowKey,
-                      disabled: rowInfo.tmNode.disabled,
-                      onUpdateChecked: (checked, event) => {
-                        event.stopPropagation();
-                        handleCheckboxUpdateChecked(
-                          rowInfo.tmNode,
-                          checked,
-                          event.shiftKey
-                        );
-                      }
-                    }
-                  ) : null : column.type === "expand" ? !isSummary ? !column.expandable || column.expandable?.(rowData) ? /* @__PURE__ */ h(
-                    ExpandTrigger,
-                    {
-                      clsPrefix: mergedClsPrefix,
-                      expanded,
-                      renderExpandIcon: this.renderExpandIcon,
-                      onClick: () => {
-                        handleUpdateExpanded(rowKey, null);
-                      }
-                    }
-                  ) : null : null : /* @__PURE__ */ h(
-                    Cell,
-                    {
-                      clsPrefix: mergedClsPrefix,
-                      index: actualRowIndex,
-                      row: rowData,
-                      column,
-                      isSummary,
-                      mergedTheme: mergedTheme2,
-                      renderCell: this.renderCell,
-                      defaultEmptyValue: this.defaultEmptyValueRef,
-                      onEdit: (value, row2, key) => {
-                        this.$emit("edit", value, row2, key);
-                      }
-                    }
-                  )
-                );
-              })
-            );
-            return row;
           };
+          const renderRow = (rowInfo, displayedRowIndex, isVirtual) => renderBodyRow(
+            renderContext,
+            rowInfo,
+            displayedRowIndex,
+            isVirtual
+          );
           if (!virtualScroll) {
             return /* @__PURE__ */ h(
               "table",
@@ -68869,28 +69091,14 @@ var TableBody = defineComponent({
       }
     );
     if (this.empty && !this.loadingSkeleton) {
-      const createEmptyNode = () => /* @__PURE__ */ h(
-        "div",
-        {
-          class: [
-            `${mergedClsPrefix}-data-table-empty`,
-            this.loading && `${mergedClsPrefix}-data-table-empty--hide`
-          ],
-          style: this.bodyStyle,
-          ref: "emptyElRef"
-        },
-        resolveSlot(this.dataTableSlots.empty, () => [
-          /* @__PURE__ */ h(
-            UEmpty$1,
-            {
-              size: "large",
-              theme: this.mergedTheme.peers.Empty,
-              themeOverrides: this.mergedTheme.peerOverrides.Empty,
-              ...emptyPropsRef
-            }
-          )
-        ])
-      );
+      const createEmptyNode = () => renderBodyEmpty({
+        clsPrefix: mergedClsPrefix,
+        loading: this.loading,
+        bodyStyle: this.bodyStyle,
+        dataTableSlots: this.dataTableSlots,
+        mergedTheme: this.mergedTheme,
+        emptyProps: emptyPropsRef
+      });
       if (this.shouldDisplaySomeTablePart) {
         return /* @__PURE__ */ h(Fragment, null, tableNode, createEmptyNode());
       } else {
@@ -69092,7 +69300,11 @@ c$1("&:last-child", "flex-grow: 1;")])])])])])])]), c$1(">", [cB("data-table-loa
         margin: calc(var(--u-th-padding) * -1);
         padding: var(--u-th-padding);
         box-sizing: border-box;
-      `), cM("disabled", null, [cB("data-table-td", "color: var(--u-td-opacity-disabled);")]), cM("striped", "background-color: var(--u-merged-td-color-striped);", [cB("data-table-td", "background-color: var(--u-merged-td-color-striped);")]), c$1("&:hover", "background-color: var(--u-merged-td-color-hover);", [c$1(">", [cB("data-table-td", "background-color: var(--u-merged-td-color-hover);")])]), c$1("&:has(.u-data-table-td--editable:hover)", [c$1(">", [cB("data-table-td", "background-color: var(--u-merged-td-color);", [cM("editable", [c$1("&:hover", "background-color: var(--u-merged-td-color-hover);")])])])])]), cB("data-table-th", `
+      `), cM("disabled", null, [cB("data-table-td", "color: var(--u-td-opacity-disabled);")]), cM("dragging", "opacity: 0.4;"), cM("drop-before", null, [c$1(">", [cB("data-table-td", `
+            box-shadow: inset 0 2px 0 0 var(--u-drop-mark-color);
+          `)])]), cM("drop-after", null, [c$1(">", [cB("data-table-td", `
+            box-shadow: inset 0 -2px 0 0 var(--u-drop-mark-color);
+          `)])]), cM("striped", "background-color: var(--u-merged-td-color-striped);", [cB("data-table-td", "background-color: var(--u-merged-td-color-striped);")]), c$1("&:hover", "background-color: var(--u-merged-td-color-hover);", [c$1(">", [cB("data-table-td", "background-color: var(--u-merged-td-color-hover);")])]), c$1("&:has(.u-data-table-td--editable:hover)", [c$1(">", [cB("data-table-td", "background-color: var(--u-merged-td-color);", [cM("editable", [c$1("&:hover", "background-color: var(--u-merged-td-color-hover);")])])])])]), cB("data-table-th", `
       padding: var(--u-th-padding);
       position: relative;
       height: var(--u-th-height);
@@ -69245,7 +69457,22 @@ c$1("&:last-child", "flex-grow: 1;")])])])])])])]), c$1(">", [cB("data-table-loa
       `), cM("selection, expand", `
         text-align: center;
         line-height: 0;
-      `), cM("editable", `
+      `), cM("draggable", `
+        text-align: center;
+        line-height: 0;
+        cursor: grab;
+      `, [c$1("&:active", `
+          cursor: grabbing;
+        `), c$1("&:hover", [cE("drag-handle", `
+            color: var(--u-th-icon-color-active);
+          `)]), cE("drag-handle", `
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          color: var(--u-th-icon-color);
+          line-height: 0;
+          pointer-events: none;
+        `)]), cM("editable", `
         cursor: pointer;
         position: relative;
         padding: 0;
@@ -69265,7 +69492,11 @@ c$1("&:last-child", "flex-grow: 1;")])])])])])])]), c$1(">", [cB("data-table-loa
           height: 100%;
           width: 100%;
         }
-      `), fixedColumnStyle]), cB("data-table-empty", `
+      `), fixedColumnStyle]), cB("data-table-drag-ghost", `
+      opacity: var(--u-drag-ghost-opacity);
+      filter: var(--u-drag-ghost-filter);
+      pointer-events: none;
+    `), cB("data-table-empty", `
       box-sizing: border-box;
       padding: var(--u-empty-padding);
       flex-grow: 1;
@@ -69753,6 +69984,242 @@ function useResizable() {
   };
 }
 
+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 = -1e4;
+const GHOST_CLEANUP_DELAY_MS = 0;
+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) {
+    return paginatedDataRef.value.find(node => node.key === targetKey)?.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?.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?.[orderKey];
+    return typeof value === "number" ? value : Number(value) || FALLBACK_ORDER;
+  }
+  function computeNewOrders(draggedKeys, dropIndex, position, orderKey) {
+    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 = filtered[insertAt - 1]?.rawNode;
+    const next = filtered[insertAt]?.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 = rows.find(node => node.key === key)?.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) => {
+      const row = rows.find(node => node.key === key)?.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) => {
+      if (!entry) return;
+      column.onDragEnd?.(entry.row, {
+        index: baseIndex + index,
+        oldOrder: entry.oldOrder,
+        newOrder: entry.newOrder
+      });
+    });
+  }
+  return {
+    draggableColumnRef,
+    draggingRowKeySetRef,
+    droppingRowKeyRef,
+    droppingPositionRef,
+    handleRowDragStart,
+    handleRowDragOver,
+    handleRowDragLeave,
+    handleRowDragEnd,
+    handleRowDrop
+  };
+}
+
 function useScroll(props, {
   mainTableInstRef,
   mergedCurrentPageRef,
@@ -70018,7 +70485,7 @@ function useSorter(props, {
   });
   const uncontrolledSortStateRef = ref(defaultSortState);
   const mergedSortStateRef = computed(() => {
-    const columnsWithControlledSortOrder = dataRelatedColsRef.value.filter(column => column.type !== "selection" && column.sorter !== void 0 && (column.sortOrder === "ascend" || column.sortOrder === "descend" || column.sortOrder === false));
+    const columnsWithControlledSortOrder = dataRelatedColsRef.value.filter(column => column.type !== "selection" && column.type !== "draggable" && column.sorter !== void 0 && (column.sortOrder === "ascend" || column.sortOrder === "descend" || column.sortOrder === false));
     const columnToSort = columnsWithControlledSortOrder.filter(col => col.sortOrder !== false);
     if (columnToSort.length) {
       return columnToSort.map(column => {
@@ -70072,6 +70539,18 @@ 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) {
@@ -70110,7 +70589,7 @@ 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?.sorter) return;
       const sorter = columnToSort.sorter;
       deriveNextSorter({
@@ -70202,7 +70681,9 @@ function useTableData(props, {
     });
     const controlledFilterState = {};
     columnsWithControlledFilter.forEach(column => {
-      if (column.type === "selection" || column.type === "expand") return;
+      if (column.type === "selection" || column.type === "expand" || column.type === "draggable") {
+        return;
+      }
       if (column.filterOptionValues === void 0) {
         controlledFilterState[column.key] = column.filterOptionValue ?? null;
       } else {
@@ -70227,7 +70708,7 @@ 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]);
@@ -70504,7 +70985,7 @@ function restoreSortStateFromStored(stored, dataRelatedCols) {
   if (!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 !== void 0);
+    const column = dataRelatedCols.find(col => col.type !== "selection" && col.type !== "expand" && col.type !== "draggable" && "key" in col && col.key === item.columnKey && col.sorter !== void 0);
     if (column?.sorter) {
       result.push({
         columnKey: item.columnKey,
@@ -70650,6 +71131,21 @@ var _UDataTable = defineComponent({
       expandableRef,
       doUpdateExpandedRowKeys
     } = useExpand(props, treeMateRef);
+    const {
+      draggableColumnRef,
+      draggingRowKeySetRef,
+      droppingRowKeyRef,
+      droppingPositionRef,
+      handleRowDragStart,
+      handleRowDragOver,
+      handleRowDragLeave,
+      handleRowDragEnd,
+      handleRowDrop
+    } = useRowDrag(props, {
+      paginatedDataRef,
+      mergedCheckedRowKeySetRef,
+      mergedClsPrefixRef
+    });
     const {
       handleTableBodyScroll,
       handleTableHeaderScroll,
@@ -71091,6 +71587,15 @@ var _UDataTable = defineComponent({
           "--u-action-divider-color": actionDividerColor
         };
       }),
+      draggableColumnRef,
+      draggingRowKeySetRef,
+      droppingRowKeyRef,
+      droppingPositionRef,
+      handleRowDragStart,
+      handleRowDragOver,
+      handleRowDragLeave,
+      handleRowDragEnd,
+      handleRowDrop,
       onLoadRef: toRef(props, "onLoad"),
       mergedTableLayoutRef,
       resizableEnabledRef,
@@ -71166,6 +71671,9 @@ var _UDataTable = defineComponent({
           thButtonColorHover,
           thIconColor,
           thIconColorActive,
+          dropMarkColor,
+          dragGhostOpacity,
+          dragGhostFilter,
           filterSize,
           borderRadius,
           lineHeight,
@@ -71234,6 +71742,9 @@ var _UDataTable = defineComponent({
         "--u-th-button-color-hover": thButtonColorHover,
         "--u-th-icon-color": thIconColor,
         "--u-th-icon-color-active": thIconColorActive,
+        "--u-drop-mark-color": dropMarkColor,
+        "--u-drag-ghost-opacity": dragGhostOpacity,
+        "--u-drag-ghost-filter": dragGhostFilter,
         "--u-filter-size": filterSize,
         "--u-pagination-margin": paginationMargin,
         "--u-empty-padding": emptyPadding,
@@ -80200,7 +80711,7 @@ var _UDescriptions = defineComponent({
   },
   render() {
     const defaultSlots = this.$slots.default;
-    const children = defaultSlots ? flatten$2(defaultSlots()) : [];
+    const children = defaultSlots ? flatten$1(defaultSlots()) : [];
     const memorizedLength = children.length;
     const {
       contentClass,
@@ -83860,7 +84371,7 @@ var USpace$1 = defineComponent({
       wrapItem,
       internalUseGap
     } = this;
-    const children = flatten$2(getSlot(this), false);
+    const children = flatten$1(getSlot(this), false);
     if (!children.length)
       return null;
     const horizontalMargin = `${margin.horizontal}px`;
@@ -95381,6 +95892,10 @@ const mappingCardInjectionKey = createInjectionKey("u-mapping-card");
 const mappingCardProps = {
   title: [String, Function],
   description: [String, Function],
+  subTitle: [String, Function],
+  subDescription: [String, Function],
+  headerInfo: Function,
+  headerSubInfo: Function,
   rows: Array,
   cols: {
     type: Number,
@@ -95999,6 +96514,26 @@ var MappingCardHeader = defineComponent({
     const theme = mergedThemeRef.value;
     const locale = localeRef.value;
     const renderTextProp = (value) => typeof value === "function" ? value() : value;
+    const renderInfoText = (title, description) => {
+      if (!title && !description)
+        return null;
+      return /* @__PURE__ */ h("div", { class: `${prefix}-mapping-card__header-info-text` }, title && /* @__PURE__ */ h("div", { class: `${prefix}-mapping-card__header-title` }, renderTextProp(title)), description && /* @__PURE__ */ h("div", { class: `${prefix}-mapping-card__header-description` }, renderTextProp(description)));
+    };
+    const mainInfo = resolveSlot(slots.headerInfo, () => {
+      const fromProp = props.headerInfo?.();
+      if (fromProp)
+        return [fromProp];
+      const fallback = renderInfoText(props.title, props.description);
+      return fallback ? [fallback] : [];
+    });
+    const subInfo = resolveSlot(slots.headerSubInfo, () => {
+      const fromProp = props.headerSubInfo?.();
+      if (fromProp)
+        return [fromProp];
+      const fallback = renderInfoText(props.subTitle, props.subDescription);
+      return fallback ? [fallback] : [];
+    });
+    const hasSubInfo = subInfo.length > 0;
     return /* @__PURE__ */ h("div", { class: `${prefix}-mapping-card__header` }, /* @__PURE__ */ h(
       _UFlex,
       {
@@ -96007,7 +96542,7 @@ var MappingCardHeader = defineComponent({
         class: `${prefix}-mapping-card__header-info`
       },
       {
-        default: () => /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h("div", { class: `${prefix}-mapping-card__header-info-text` }, /* @__PURE__ */ h("div", { class: `${prefix}-mapping-card__header-title` }, renderTextProp(props.title)), props.description && /* @__PURE__ */ h("div", { class: `${prefix}-mapping-card__header-description` }, renderTextProp(props.description))), !props.hideCopy && /* @__PURE__ */ h(_UTooltip, null, {
+        default: () => /* @__PURE__ */ h(Fragment, null, mainInfo, !props.hideCopy && /* @__PURE__ */ h(_UTooltip, null, {
           trigger: () => /* @__PURE__ */ h(
             Button,
             {
@@ -96031,7 +96566,7 @@ var MappingCardHeader = defineComponent({
             }
           ),
           default: () => locale.copyTooltip
-        }))
+        }), hasSubInfo && /* @__PURE__ */ h("div", { class: `${prefix}-mapping-card__header-info-divider` }), hasSubInfo && subInfo)
       }
     ), !props.hideHeaderActions && /* @__PURE__ */ h(_UFlex, { align: "center", size: "small" }, {
       default: () => resolveSlot(slots.headerActions, () => {
@@ -96044,7 +96579,7 @@ var MappingCardHeader = defineComponent({
                 ...props.headerSwitchProps ?? {},
                 theme: theme.peers.Switch,
                 themeOverrides: theme.peerOverrides.Switch,
-                onUpdateValue: (val) => props.onSwitchChange?.(val)
+                onUpdateValue: (value) => props.onSwitchChange?.(value)
               }
             ),
             default: () => locale.switchTooltip
@@ -96113,85 +96648,92 @@ var MappingCardHeader = defineComponent({
 });
 
 var style$o = c$1([cB("mapping-card", `
-  background-color: var(--u-background-color);
-  border: 1px solid var(--u-border-color);
-  border-radius: var(--u-border-radius);
-  overflow: hidden;
-  box-sizing: border-box;
-`, [cE("header", `
-    padding: var(--u-header-padding);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    position: relative;
-  `, [c$1("&::after", `
-      content: '';
-      position: absolute;
-      left: 24px;
-      right: 24px;
-      bottom: 0;
-      height: 1px;
+    background-color: var(--u-background-color);
+    border: 1px solid var(--u-border-color);
+    border-radius: var(--u-border-radius);
+    overflow: hidden;
+    box-sizing: border-box;
+  `, [cE("header", `
+      padding: var(--u-header-padding);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      position: relative;
+    `, [c$1("&::after", `
+        content: '';
+        position: absolute;
+        left: 24px;
+        right: 24px;
+        bottom: 0;
+        height: 1px;
+        background: var(--u-border-color);
+      `)]), cE("header-info", `
+      min-width: 0;
+    `), cE("header-info-text", `
+      min-width: 0;
+      margin-right: 12px;
+    `), cE("header-title", `
+      color: var(--u-title-color);
+    `), cE("header-description", `
+      color: var(--u-description-color);
+      margin-top: 2px;
+    `), cE("header-info-divider", `
+      margin-right: 12px;
+      width: 1px;
+      align-self: stretch;
       background: var(--u-border-color);
-    `)]), cE("header-info", `
-    min-width: 0;
-  `), cE("header-info-text", `
-    min-width: 0;
-  `), cE("header-title", `
-    color: var(--u-title-color);
-  `), cE("header-description", `
-    color: var(--u-description-color);
-    margin-top: 2px;
-  `), cE("body", `
-    display: flex;
-    padding: var(--u-body-padding);
-  `), cE("body-group", `
-    flex: 1;
-    position: relative;
-  `, [c$1("&:last-child", `
-      padding: 0 0 12px 20px;
-    `), c$1("&:first-child", `
-      padding: 0 20px 12px 0;
-    `), c$1("&:only-child", `
-      padding: 0 0 12px 0;
-    `), c$1("&::after", `
-      content: '';
+      flex-shrink: 0;
+    `), cE("body", `
+      display: flex;
+      padding: var(--u-body-padding);
+    `), cE("body-group", `
+      flex: 1;
+      position: relative;
+    `, [c$1("&:last-child", `
+        padding: 0 0 12px 20px;
+      `), c$1("&:first-child", `
+        padding: 0 20px 12px 0;
+      `), c$1("&:only-child", `
+        padding: 0 0 12px 0;
+      `), c$1("&::after", `
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 1px;
+        height: calc(100% - 12px);
+        background: var(--u-border-color);
+      `), c$1("&:last-child::after", `
+        display: none;
+      `)]), cE("body-items", `
+      align-items: center;
+    `), cE("body-item", [cM("text", `
+        padding: 0 24px;
+      `)]), cE("body-group-icon", `
       position: absolute;
       right: 0;
-      top: 0;
-      width: 1px;
-      height: calc(100% - 12px);
-      background: var(--u-border-color);
-    `), c$1("&:last-child::after", `
-      display: none;
-    `)]), cE("body-items", `
-    align-items: center;
-  `), cE("body-item", [cM("text", `
-      padding: 0 24px;
-    `)]), cE("body-group-icon", `
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translate(50%, -50%);
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    height: 44px;
-    width: 44px;
-    border-radius: 100px;
-    justify-content: center;
-    background-color: var(--u-divider-background-color);
-  `), cE("side", `
-    flex: 1;
-    min-width: 0;
-  `), cE("arrow", `
-    display: flex;
-    align-items: center;
-    padding-top: 32px;
-    color: var(--u-arrow-color);
-    font-size: 16px;
-    flex-shrink: 0;
-  `)]), cB("mapping-card-list", `
+      top: 50%;
+      transform: translate(50%, -50%);
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      height: 44px;
+      width: 44px;
+      border-radius: 100px;
+      justify-content: center;
+      background-color: var(--u-divider-background-color);
+    `), cE("side", `
+      flex: 1;
+      min-width: 0;
+    `), cE("arrow", `
+      display: flex;
+      align-items: center;
+      padding-top: 32px;
+      color: var(--u-arrow-color);
+      font-size: 16px;
+      flex-shrink: 0;
+    `)]), cB("mapping-card-list", `
     display: flex;
     justify-content: space-between;
     flex-direction: column;
@@ -96268,7 +96810,11 @@ var _UMappingCard = defineComponent({
         class: [`${this.mergedClsPrefix}-mapping-card`, themeClass],
         style: cssVars
       },
-      /* @__PURE__ */ h(MappingCardHeader, null, { headerActions: this.$slots.headerActions }),
+      /* @__PURE__ */ h(MappingCardHeader, null, {
+        headerActions: this.$slots.headerActions,
+        headerInfo: this.$slots.headerInfo,
+        headerSubInfo: this.$slots.headerSubInfo
+      }),
       /* @__PURE__ */ h(MappingCardBody, null)
     );
   }
@@ -103657,7 +104203,7 @@ var _USteps = defineComponent({
           (variantConfigs[this.variant]?.vertical ?? this.vertical) && `${mergedClsPrefix}-steps--vertical`
         ]
       },
-      stepsWithIndex(flatten$2(getSlot(this)))
+      stepsWithIndex(flatten$1(getSlot(this)))
     );
   }
 });
@@ -104839,7 +105385,7 @@ var _UTabs = defineComponent({
     });
     const compitableValueRef = useCompitable(props, ["activeName", "value"]);
     const uncontrolledValueRef = ref(
-      compitableValueRef.value ?? props.defaultValue ?? (slots.default ? flatten$2(slots.default())[0]?.props?.name : null)
+      compitableValueRef.value ?? props.defaultValue ?? (slots.default ? flatten$1(slots.default())[0]?.props?.name : null)
     );
     const mergedValueRef = useMergedState(
       compitableValueRef,
@@ -105334,10 +105880,10 @@ var _UTabs = defineComponent({
       $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot }
     } = this;
     onRender?.();
-    const tabPaneChildren = defaultSlot ? flatten$2(defaultSlot()).filter((v) => {
+    const tabPaneChildren = defaultSlot ? flatten$1(defaultSlot()).filter((v) => {
       return v.type.name === "TabPane";
     }) : [];
-    const tabChildren = defaultSlot ? flatten$2(defaultSlot()).filter((v) => {
+    const tabChildren = defaultSlot ? flatten$1(defaultSlot()).filter((v) => {
       return v.type.name === "Tab";
     }) : [];
     const showPane = !tabChildren.length;
@@ -108939,7 +109485,7 @@ var _UTree = defineComponent({
         if (~expandedNodeIndex) {
           const children = afNodesRef.value[expandedNodeIndex].children;
           if (children) {
-            const expandedChildren = flatten$1(children, value);
+            const expandedChildren = flatten(children, value);
             afNodesRef.value.splice(expandedNodeIndex + 1, 0, {
               __motion: true,
               mode: "expand",
@@ -108958,7 +109504,7 @@ var _UTree = defineComponent({
           if (!collapsedNodeChildren)
             return;
           aipRef.value = true;
-          const collapsedChildren = flatten$1(collapsedNodeChildren, value);
+          const collapsedChildren = flatten(collapsedNodeChildren, value);
           afNodesRef.value.splice(collapsedNodeIndex + 1, 0, {
             __motion: true,
             mode: "collapse",
@@ -112623,7 +113169,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.0.4";
+var version = "2.0.6";
 
 function create({
   componentPrefix = "U",