@uzum-tech/ui 2.0.5 → 2.0.6

package/dist/index.js

@@ -2374,7 +2374,7 @@
     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') {
@@ -2384,13 +2384,13 @@
         return;
       }
       if (Array.isArray(vNode)) {
-        flatten$3(vNode, filterCommentNode, result);
+        flatten$2(vNode, filterCommentNode, result);
         return;
       }
       if (vNode.type === vue.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 !== vue.Comment) {
@@ -2404,7 +2404,7 @@
     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];
@@ -5555,7 +5555,7 @@
     };
   }
 
-  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") {
@@ -5565,13 +5565,13 @@
         return;
       }
       if (Array.isArray(vNode)) {
-        flatten$2(vNode, filterCommentNode, result);
+        flatten$1(vNode, filterCommentNode, result);
         return;
       }
       if (vNode.type === vue.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 !== vue.Comment) {
         result.push(vNode);
@@ -5586,7 +5586,7 @@
       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 {
@@ -5598,7 +5598,7 @@
     if (!slot) {
       return null;
     }
-    const slotContent = flatten$2(slot(props));
+    const slotContent = flatten$1(slot(props));
     if (slotContent.length === 1) {
       return slotContent[0];
     } else {
@@ -14158,6 +14158,29 @@
     /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, /* @__PURE__ */ vue.h("g", { fill: "currentColor", "fill-rule": "nonzero" }, /* @__PURE__ */ vue.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 = vue.defineComponent({
+    name: "DragHandleRound",
+    render() {
+      return /* @__PURE__ */ vue.h(
+        "svg",
+        {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        /* @__PURE__ */ vue.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 = vue.defineComponent({
     name: "Edit",
     render() {
@@ -18009,7 +18032,7 @@
     }
   };
 
-  function flatten$1(treeNodes, expandedKeys) {
+  function flatten(treeNodes, expandedKeys) {
     const expandedKeySet = expandedKeys ? new Set(expandedKeys) : undefined;
     const flattenedNodes = [];
     function traverse(treeNodes) {
@@ -18156,7 +18179,7 @@
       maxLevel: Math.max(...levelTreeNodeMap.keys()),
       getChildren,
       getFlattenedNodes(expandedKeys) {
-        return flatten$1(treeNodes, expandedKeys);
+        return flatten(treeNodes, expandedKeys);
       },
       getNode,
       getPrev,
@@ -21151,7 +21174,7 @@
     render() {
       const { mergedClsPrefix, mergedValue, mergedSize, mergedDisabled } = this;
       const children = mapSlot$1(
-        flatten$2(getSlot(this)),
+        flatten$1(getSlot(this)),
         mergedValue,
         mergedSize,
         mergedDisabled,
@@ -39065,7 +39088,7 @@
       }
       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) => {
@@ -41027,7 +41050,7 @@
         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__ */ vue.h(_UCarouselItem, null, {
@@ -43818,7 +43841,7 @@
         mergedClsPrefix,
         rtlEnabled
       } = this;
-      const children = flatten$2(getSlot(this), false);
+      const children = flatten$1(getSlot(this), false);
       if (!children.length) {
         return null;
       }
@@ -46726,6 +46749,9 @@
       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,
@@ -65792,6 +65818,7 @@
 
   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);
@@ -65799,6 +65826,9 @@
     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);
@@ -65812,6 +65842,9 @@
     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;
     }
@@ -65820,6 +65853,7 @@
   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) {
@@ -65880,7 +65914,7 @@
     }
   }
   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(",");
@@ -65892,6 +65926,40 @@
     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 = {
@@ -65964,6 +66032,39 @@
     return mergedSortState.some(state => state.columnKey === column.key && state.order);
   }
 
+  function renderBodyEmpty(deps) {
+    const {
+      clsPrefix,
+      loading,
+      bodyStyle,
+      dataTableSlots,
+      mergedTheme,
+      emptyProps
+    } = deps;
+    return /* @__PURE__ */ vue.h(
+      "div",
+      {
+        class: [
+          `${clsPrefix}-data-table-empty`,
+          loading && `${clsPrefix}-data-table-empty--hide`
+        ],
+        style: bodyStyle,
+        ref: "emptyElRef"
+      },
+      resolveSlot(dataTableSlots.empty, () => [
+        /* @__PURE__ */ vue.h(
+          UEmpty$1,
+          {
+            size: "large",
+            theme: mergedTheme.peers.Empty,
+            themeOverrides: mergedTheme.peerOverrides.Empty,
+            ...emptyProps
+          }
+        )
+      ])
+    );
+  }
+
   var RenderSafeCheckbox = vue.defineComponent({
     name: "DataTableBodyCheckbox",
     props: {
@@ -66622,7 +66723,7 @@
     render() {
       const { mergedValue, mergedClsPrefix, handleFocusin, handleFocusout } = this;
       const { children, isButtonGroup } = mapSlot(
-        flatten$2(getSlot(this)),
+        flatten$1(getSlot(this)),
         mergedValue,
         mergedClsPrefix
       );
@@ -66686,90 +66787,6 @@
     }
   });
 
-  var BodySkeleton = vue.defineComponent({
-    name: "DataTableBodySkeleton",
-    props: {
-      rowCount: {
-        type: Number,
-        default: 10
-      }
-    },
-    setup(props) {
-      const {
-        mergedClsPrefixRef,
-        colsRef,
-        props: dataTableProps
-      } = vue.inject(dataTableInjectionKey);
-      const skeletonRowCount = vue.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__ */ vue.h(
-          "tr",
-          {
-            key: `skeleton-row-${index}`,
-            class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--skeleton`
-          },
-          cols.map((col) => /* @__PURE__ */ vue.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__ */ vue.h(
-              "div",
-              {
-                class: `${mergedClsPrefix}-data-table-td__shadow-holder`
-              }
-            ),
-            /* @__PURE__ */ vue.h(
-              _USkeleton,
-              {
-                height: "var(--u-line-height)",
-                width: col.column.type === "selection" ? "16px" : "85%",
-                animated: true,
-                style: {
-                  borderRadius: "16px"
-                }
-              }
-            )
-          ))
-        )
-      );
-      return /* @__PURE__ */ vue.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 "";
@@ -67083,6 +67100,404 @@
     }
   });
 
+  function renderExpandedRow(context, rowInfo, displayedRowIndex) {
+    const {
+      mergedClsPrefix,
+      colCount,
+      rowCount,
+      stickyExpandedRows,
+      bodyWidthPx,
+      renderExpand
+    } = context;
+    const { index: actualRowIndex } = rowInfo;
+    const {
+      tmNode: { key, rawNode }
+    } = rowInfo;
+    return /* @__PURE__ */ vue.h(
+      "tr",
+      {
+        class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`,
+        key: `${key}__expand`
+      },
+      /* @__PURE__ */ vue.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__ */ vue.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__ */ vue.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__ */ vue.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__ */ vue.h(
+            "div",
+            {
+              class: `${mergedClsPrefix}-data-table-td__shadow-holder`
+            }
+          ),
+          hasChildren && colIndex === childTriggerColIndex ? [
+            repeat(
+              indentOffsetStyle["--indent-offset"] = isSummary ? 0 : rowInfo.tmNode.level,
+              /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: `${mergedClsPrefix}-data-table-indent`,
+                  style: indentStyle
+                }
+              )
+            ),
+            isSummary || rowInfo.tmNode.isLeaf ? /* @__PURE__ */ vue.h(
+              "div",
+              {
+                class: `${mergedClsPrefix}-data-table-expand-placeholder`
+              }
+            ) : /* @__PURE__ */ vue.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__ */ vue.h(
+            RenderSafeRadio,
+            {
+              key: currentPage,
+              rowKey,
+              disabled: rowInfo.tmNode.disabled,
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              onUpdateChecked: () => {
+                handleRadioUpdateChecked(rowInfo.tmNode);
+              }
+            }
+          ) : /* @__PURE__ */ vue.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__ */ vue.h(
+            ExpandTrigger,
+            {
+              clsPrefix: mergedClsPrefix,
+              expanded,
+              renderExpandIcon,
+              onClick: () => {
+                handleUpdateExpanded(rowKey, null);
+              }
+            }
+          ) : null : null : column.type === "draggable" ? isDraggableHandleCell ? /* @__PURE__ */ vue.h(
+            "span",
+            {
+              class: `${mergedClsPrefix}-data-table-td__drag-handle`,
+              "aria-label": "Drag to reorder"
+            },
+            resolveSlot(dataTableSlots["drag-handle"], () => [
+              /* @__PURE__ */ vue.h(DragHandleRound, null)
+            ])
+          ) : null : /* @__PURE__ */ vue.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 = vue.defineComponent({
+    name: "DataTableBodySkeleton",
+    props: {
+      rowCount: {
+        type: Number,
+        default: 10
+      }
+    },
+    setup(props) {
+      const {
+        mergedClsPrefixRef,
+        colsRef,
+        props: dataTableProps
+      } = vue.inject(dataTableInjectionKey);
+      const skeletonRowCount = vue.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__ */ vue.h(
+          "tr",
+          {
+            key: `skeleton-row-${index}`,
+            class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--skeleton`
+          },
+          cols.map((col) => /* @__PURE__ */ vue.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__ */ vue.h(
+              "div",
+              {
+                class: `${mergedClsPrefix}-data-table-td__shadow-holder`
+              }
+            ),
+            /* @__PURE__ */ vue.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__ */ vue.h(
+        "tbody",
+        {
+          class: [
+            `${mergedClsPrefix}-data-table-tbody`,
+            `${mergedClsPrefix}-data-table-tbody--skeleton`
+          ]
+        },
+        skeletonRows
+      );
+    }
+  });
+
   var UDataTableFilterMenu = vue.defineComponent({
     name: "DataTableFilterMenu",
     props: {
@@ -67665,6 +68080,8 @@
   });
 
   function renderTitle(column) {
+    if (column.type === "draggable")
+      return null;
     return typeof column.title === "function" ? column.title(column) : column.title;
   }
   var TableHeader = vue.defineComponent({
@@ -67873,6 +68290,9 @@
             const { ellipsis } = column;
             const ellipsisEnabled = isColumnEllipsisEnabled(column);
             const createColumnVNode = () => {
+              if (column.type === "draggable") {
+                return null;
+              }
               if (column.type === "selection") {
                 return column.multiple !== false ? /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
                   _UCheckbox,
@@ -67964,7 +68384,7 @@
                   },
                   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
               },
@@ -68007,38 +68427,8 @@
     }
   });
 
-  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 = vue.defineComponent({
+  var VirtualListItemWrapper = vue.defineComponent({
+    name: "VirtualListItemWrapper",
     props: {
       clsPrefix: {
         type: String,
@@ -68071,6 +68461,7 @@
       );
     }
   });
+
   var TableBody = vue.defineComponent({
     name: "DataTableBody",
     emits: ["edit"],
@@ -68130,7 +68521,16 @@
         doUncheck,
         renderCell,
         defaultEmptyValueRef,
-        emptyPropsRef
+        emptyPropsRef,
+        draggableColumnRef,
+        draggingRowKeySetRef,
+        droppingRowKeyRef,
+        droppingPositionRef,
+        handleRowDragStart,
+        handleRowDragOver,
+        handleRowDragLeave,
+        handleRowDragEnd,
+        handleRowDrop
       } = vue.inject(dataTableInjectionKey);
       const UConfigProvider = vue.inject(configProviderInjectionKey, null);
       const scrollbarInstRef = vue.ref(null);
@@ -68433,6 +68833,15 @@
         renderCell,
         defaultEmptyValueRef,
         emptyPropsRef,
+        draggableColumn: draggableColumnRef,
+        draggingRowKeySet: draggingRowKeySetRef,
+        droppingRowKey: droppingRowKeyRef,
+        droppingPosition: droppingPositionRef,
+        handleRowDragStart,
+        handleRowDragOver,
+        handleRowDragLeave,
+        handleRowDragEnd,
+        handleRowDrop,
         ...exposedMethods
       };
     },
@@ -68509,7 +68918,7 @@
             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)) {
@@ -68560,246 +68969,59 @@
             });
             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__ */ vue.h(
-                  "tr",
-                  {
-                    class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`,
-                    key: `${key}__expand`
-                  },
-                  /* @__PURE__ */ vue.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__ */ vue.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__ */ vue.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__ */ vue.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__ */ vue.h(
-                      "div",
-                      {
-                        class: `${mergedClsPrefix}-data-table-td__shadow-holder`
-                      }
-                    ),
-                    hasChildren && colIndex === childTriggerColIndex ? [
-                      repeat(
-                        indentOffsetStyle["--indent-offset"] = isSummary ? 0 : rowInfo.tmNode.level,
-                        /* @__PURE__ */ vue.h(
-                          "div",
-                          {
-                            class: `${mergedClsPrefix}-data-table-indent`,
-                            style: indentStyle
-                          }
-                        )
-                      ),
-                      isSummary || rowInfo.tmNode.isLeaf ? /* @__PURE__ */ vue.h(
-                        "div",
-                        {
-                          class: `${mergedClsPrefix}-data-table-expand-placeholder`
-                        }
-                      ) : /* @__PURE__ */ vue.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__ */ vue.h(
-                      RenderSafeRadio,
-                      {
-                        key: currentPage,
-                        rowKey,
-                        disabled: rowInfo.tmNode.disabled,
-                        onClick: (event) => {
-                          event.stopPropagation();
-                        },
-                        onUpdateChecked: () => {
-                          handleRadioUpdateChecked(rowInfo.tmNode);
-                        }
-                      }
-                    ) : /* @__PURE__ */ vue.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__ */ vue.h(
-                      ExpandTrigger,
-                      {
-                        clsPrefix: mergedClsPrefix,
-                        expanded,
-                        renderExpandIcon: this.renderExpandIcon,
-                        onClick: () => {
-                          handleUpdateExpanded(rowKey, null);
-                        }
-                      }
-                    ) : null : null : /* @__PURE__ */ vue.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__ */ vue.h(
                 "table",
@@ -68873,28 +69095,14 @@
         }
       );
       if (this.empty && !this.loadingSkeleton) {
-        const createEmptyNode = () => /* @__PURE__ */ vue.h(
-          "div",
-          {
-            class: [
-              `${mergedClsPrefix}-data-table-empty`,
-              this.loading && `${mergedClsPrefix}-data-table-empty--hide`
-            ],
-            style: this.bodyStyle,
-            ref: "emptyElRef"
-          },
-          resolveSlot(this.dataTableSlots.empty, () => [
-            /* @__PURE__ */ vue.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__ */ vue.h(vue.Fragment, null, tableNode, createEmptyNode());
         } else {
@@ -69096,7 +69304,11 @@
         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);
@@ -69249,7 +69461,22 @@
       `), 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;
@@ -69269,7 +69496,11 @@
           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;
@@ -69757,6 +69988,242 @@
     };
   }
 
+  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 = vue.ref([]);
+    const draggingRowKeySetRef = vue.computed(() => new Set(draggingRowKeysRef.value));
+    const droppingRowKeyRef = vue.ref(null);
+    const droppingPositionRef = vue.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,
@@ -70022,7 +70489,7 @@
     });
     const uncontrolledSortStateRef = vue.ref(defaultSortState);
     const mergedSortStateRef = vue.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 => {
@@ -70076,6 +70543,18 @@
           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) {
@@ -70114,7 +70593,7 @@
       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({
@@ -70206,7 +70685,9 @@
       });
       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 {
@@ -70231,7 +70712,7 @@
       } = 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]);
@@ -70508,7 +70989,7 @@
     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,
@@ -70654,6 +71135,21 @@
         expandableRef,
         doUpdateExpandedRowKeys
       } = useExpand(props, treeMateRef);
+      const {
+        draggableColumnRef,
+        draggingRowKeySetRef,
+        droppingRowKeyRef,
+        droppingPositionRef,
+        handleRowDragStart,
+        handleRowDragOver,
+        handleRowDragLeave,
+        handleRowDragEnd,
+        handleRowDrop
+      } = useRowDrag(props, {
+        paginatedDataRef,
+        mergedCheckedRowKeySetRef,
+        mergedClsPrefixRef
+      });
       const {
         handleTableBodyScroll,
         handleTableHeaderScroll,
@@ -71095,6 +71591,15 @@
             "--u-action-divider-color": actionDividerColor
           };
         }),
+        draggableColumnRef,
+        draggingRowKeySetRef,
+        droppingRowKeyRef,
+        droppingPositionRef,
+        handleRowDragStart,
+        handleRowDragOver,
+        handleRowDragLeave,
+        handleRowDragEnd,
+        handleRowDrop,
         onLoadRef: vue.toRef(props, "onLoad"),
         mergedTableLayoutRef,
         resizableEnabledRef,
@@ -71170,6 +71675,9 @@
             thButtonColorHover,
             thIconColor,
             thIconColorActive,
+            dropMarkColor,
+            dragGhostOpacity,
+            dragGhostFilter,
             filterSize,
             borderRadius,
             lineHeight,
@@ -71238,6 +71746,9 @@
           "--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,
@@ -80204,7 +80715,7 @@
     },
     render() {
       const defaultSlots = this.$slots.default;
-      const children = defaultSlots ? flatten$2(defaultSlots()) : [];
+      const children = defaultSlots ? flatten$1(defaultSlots()) : [];
       const memorizedLength = children.length;
       const {
         contentClass,
@@ -83864,7 +84375,7 @@
         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`;
@@ -95385,6 +95896,10 @@
   const mappingCardProps = {
     title: [String, Function],
     description: [String, Function],
+    subTitle: [String, Function],
+    subDescription: [String, Function],
+    headerInfo: Function,
+    headerSubInfo: Function,
     rows: Array,
     cols: {
       type: Number,
@@ -96003,6 +96518,26 @@
       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__ */ vue.h("div", { class: `${prefix}-mapping-card__header-info-text` }, title && /* @__PURE__ */ vue.h("div", { class: `${prefix}-mapping-card__header-title` }, renderTextProp(title)), description && /* @__PURE__ */ vue.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__ */ vue.h("div", { class: `${prefix}-mapping-card__header` }, /* @__PURE__ */ vue.h(
         _UFlex,
         {
@@ -96011,7 +96546,7 @@
           class: `${prefix}-mapping-card__header-info`
         },
         {
-          default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h("div", { class: `${prefix}-mapping-card__header-info-text` }, /* @__PURE__ */ vue.h("div", { class: `${prefix}-mapping-card__header-title` }, renderTextProp(props.title)), props.description && /* @__PURE__ */ vue.h("div", { class: `${prefix}-mapping-card__header-description` }, renderTextProp(props.description))), !props.hideCopy && /* @__PURE__ */ vue.h(_UTooltip, null, {
+          default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, mainInfo, !props.hideCopy && /* @__PURE__ */ vue.h(_UTooltip, null, {
             trigger: () => /* @__PURE__ */ vue.h(
               Button,
               {
@@ -96035,7 +96570,7 @@
               }
             ),
             default: () => locale.copyTooltip
-          }))
+          }), hasSubInfo && /* @__PURE__ */ vue.h("div", { class: `${prefix}-mapping-card__header-info-divider` }), hasSubInfo && subInfo)
         }
       ), !props.hideHeaderActions && /* @__PURE__ */ vue.h(_UFlex, { align: "center", size: "small" }, {
         default: () => resolveSlot(slots.headerActions, () => {
@@ -96048,7 +96583,7 @@
                   ...props.headerSwitchProps ?? {},
                   theme: theme.peers.Switch,
                   themeOverrides: theme.peerOverrides.Switch,
-                  onUpdateValue: (val) => props.onSwitchChange?.(val)
+                  onUpdateValue: (value) => props.onSwitchChange?.(value)
                 }
               ),
               default: () => locale.switchTooltip
@@ -96117,85 +96652,92 @@
   });
 
   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;
@@ -96272,7 +96814,11 @@
           class: [`${this.mergedClsPrefix}-mapping-card`, themeClass],
           style: cssVars
         },
-        /* @__PURE__ */ vue.h(MappingCardHeader, null, { headerActions: this.$slots.headerActions }),
+        /* @__PURE__ */ vue.h(MappingCardHeader, null, {
+          headerActions: this.$slots.headerActions,
+          headerInfo: this.$slots.headerInfo,
+          headerSubInfo: this.$slots.headerSubInfo
+        }),
         /* @__PURE__ */ vue.h(MappingCardBody, null)
       );
     }
@@ -103661,7 +104207,7 @@
             (variantConfigs[this.variant]?.vertical ?? this.vertical) && `${mergedClsPrefix}-steps--vertical`
           ]
         },
-        stepsWithIndex(flatten$2(getSlot(this)))
+        stepsWithIndex(flatten$1(getSlot(this)))
       );
     }
   });
@@ -104843,7 +105389,7 @@
       });
       const compitableValueRef = useCompitable(props, ["activeName", "value"]);
       const uncontrolledValueRef = vue.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,
@@ -105338,10 +105884,10 @@
         $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;
@@ -108943,7 +109489,7 @@
           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",
@@ -108962,7 +109508,7 @@
             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",
@@ -112627,7 +113173,7 @@
     });
   }
 
-  var version = "2.0.5";
+  var version = "2.0.6";
 
   function create({
     componentPrefix = "U",