@uzum-tech/ui 2.0.4 → 2.0.6

package/es/mapping-card/src/MappingCardParts/Header.mjs

@@ -33,6 +33,31 @@ export default 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 h("div", {
+        class: `${prefix}-mapping-card__header-info-text`
+      }, title && h("div", {
+        class: `${prefix}-mapping-card__header-title`
+      }, renderTextProp(title)), description && h("div", {
+        class: `${prefix}-mapping-card__header-description`
+      }, renderTextProp(description)));
+    };
+    const mainInfo = resolveSlot(slots.headerInfo, () => {
+      var _a;
+      const fromProp = (_a = props.headerInfo) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (fromProp) return [fromProp];
+      const fallback = renderInfoText(props.title, props.description);
+      return fallback ? [fallback] : [];
+    });
+    const subInfo = resolveSlot(slots.headerSubInfo, () => {
+      var _a;
+      const fromProp = (_a = props.headerSubInfo) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (fromProp) return [fromProp];
+      const fallback = renderInfoText(props.subTitle, props.subDescription);
+      return fallback ? [fallback] : [];
+    });
+    const hasSubInfo = subInfo.length > 0;
     return h("div", {
       class: `${prefix}-mapping-card__header`
     }, h(UFlex, {
@@ -40,13 +65,7 @@ export default defineComponent({
       size: "small",
       class: `${prefix}-mapping-card__header-info`
     }, {
-      default: () => h(Fragment, null, h("div", {
-        class: `${prefix}-mapping-card__header-info-text`
-      }, h("div", {
-        class: `${prefix}-mapping-card__header-title`
-      }, renderTextProp(props.title)), props.description && h("div", {
-        class: `${prefix}-mapping-card__header-description`
-      }, renderTextProp(props.description))), !props.hideCopy && h(UTooltip, null, {
+      default: () => h(Fragment, null, mainInfo, !props.hideCopy && h(UTooltip, null, {
         trigger: () => {
           var _a;
           return h(UButton, Object.assign({
@@ -72,7 +91,9 @@ export default defineComponent({
           });
         },
         default: () => locale.copyTooltip
-      }))
+      }), hasSubInfo && h("div", {
+        class: `${prefix}-mapping-card__header-info-divider`
+      }), hasSubInfo && subInfo)
     }), !props.hideHeaderActions && h(UFlex, {
       align: "center",
       size: "small"
@@ -86,9 +107,9 @@ export default defineComponent({
             return h(USwitch, Object.assign({}, (_a = props.headerSwitchProps) !== null && _a !== void 0 ? _a : {}, {
               theme: theme.peers.Switch,
               themeOverrides: theme.peerOverrides.Switch,
-              onUpdateValue: val => {
+              onUpdateValue: value => {
                 var _a;
-                return (_a = props.onSwitchChange) === null || _a === void 0 ? void 0 : _a.call(props, val);
+                return (_a = props.onSwitchChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
               }
             }));
           },

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

@@ -32,6 +32,10 @@ export interface MappingRow {
 export interface MappingCardInterface {
     title: string | (() => VNodeChild);
     description: string | (() => VNodeChild);
+    subTitle?: string | (() => VNodeChild);
+    subDescription?: string | (() => VNodeChild);
+    headerInfo?: () => VNodeChild;
+    headerSubInfo?: () => VNodeChild;
     rows: MappingRow[];
     cols?: number;
     defaultSpan?: number;
@@ -61,6 +65,10 @@ export interface MappingCardListInterface {
 export declare const mappingCardProps: {
     readonly title: PropType<MappingCardInterface["title"]>;
     readonly description: PropType<MappingCardInterface["description"]>;
+    readonly subTitle: PropType<MappingCardInterface["subTitle"]>;
+    readonly subDescription: PropType<MappingCardInterface["subDescription"]>;
+    readonly headerInfo: PropType<MappingCardInterface["headerInfo"]>;
+    readonly headerSubInfo: PropType<MappingCardInterface["headerSubInfo"]>;
     readonly rows: PropType<MappingCardInterface["rows"]>;
     readonly cols: {
         readonly type: PropType<MappingCardInterface["cols"]>;

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

@@ -1,6 +1,10 @@
 export const mappingCardProps = {
   title: [String, Function],
   description: [String, Function],
+  subTitle: [String, Function],
+  subDescription: [String, Function],
+  headerInfo: Function,
+  headerSubInfo: Function,
   rows: Array,
   cols: {
     type: Number,

package/es/mapping-card/src/styles/index.cssr.mjs

@@ -14,7 +14,7 @@ export default c([cB('mapping-card', `
  border-radius: var(--u-border-radius);
  overflow: hidden;
  box-sizing: border-box;
-`, [cE('header', `
+ `, [cE('header', `
  padding: var(--u-header-padding);
  display: flex;
  align-items: center;
@@ -33,11 +33,18 @@ export default c([cB('mapping-card', `
  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);
+ flex-shrink: 0;
  `), cE('body', `
  display: flex;
  padding: var(--u-body-padding);

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.4";
+declare const _default: "2.0.6";
 export default _default;

package/es/version.mjs

@@ -1 +1 @@
-export default '2.0.4';
+export default '2.0.6';

package/lib/_internal/icons/DragHandleRound.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/_internal/icons/DragHandleRound.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'DragHandleRound',
+    render() {
+        return ((0, vue_1.h)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            (0, vue_1.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" })));
+    }
+});

package/lib/_internal/icons/index.d.ts

@@ -22,6 +22,7 @@ export { default as ContentCopy } from './ContentCopy';
 export { default as DateIcon } from './Date';
 export { default as DismissCircleIcon } from './DismissCircle';
 export { default as DownloadIcon } from './Download';
+export { default as DragHandleRound } from './DragHandleRound';
 export { default as EditIcon } from './Edit';
 export { default as EmptyIcon } from './Empty';
 export { default as ErrorIcon } from './Error';

package/lib/_internal/icons/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RotateClockwiseIcon = exports.RetryIcon = exports.ResizeSmallIcon = exports.RemoveIcon = exports.Refresh = exports.PhotoIcon = exports.PersonOutline = exports.PersonNote = exports.OzbekFlag = exports.MoreIcon = exports.MdTime = exports.LogoutIcon = exports.InfoOutlineIcon = exports.InfoIcon = exports.InactiveIcon = exports.ForwardIcon = exports.FilterIcon = exports.FileHeart = exports.FileIcon = exports.FastForwardIcon = exports.FastBackwardIcon = exports.EyeOffIcon = exports.EyeIcon = exports.ErrorIcon = exports.EmptyIcon = exports.EditIcon = exports.DownloadIcon = exports.DismissCircleIcon = exports.DateIcon = exports.ContentCopy = exports.CloseIcon = exports.ClearSmallIcon = exports.ClearIcon = exports.ChevronRightIcon = exports.ChevronLeftIcon = exports.ChevronDownOutline = exports.ChevronDownFilledIcon = exports.ChevronDownIcon = exports.CheckmarkDoneSharp = exports.CheckmarkCircleIcon = exports.CheckmarkIcon = exports.CancelIcon = exports.BurgerMenuIcon = exports.BackwardIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowHookUpRight = exports.ArrowDownIcon = exports.ArrowBackIcon = exports.AddIcon = void 0;
-exports.ZoomOutIcon = exports.ZoomInIcon = exports.WarningIcon = exports.TrashIcon = exports.ToIcon = exports.TimeIcon = exports.SwitcherIcon = exports.SuccessIcon = exports.SiderUnionBorder = exports.SendFilled = exports.SearchIcon = exports.RussiaFlag = exports.RotateCounterclockwiseIcon = void 0;
+exports.RetryIcon = exports.ResizeSmallIcon = exports.RemoveIcon = exports.Refresh = exports.PhotoIcon = exports.PersonOutline = exports.PersonNote = exports.OzbekFlag = exports.MoreIcon = exports.MdTime = exports.LogoutIcon = exports.InfoOutlineIcon = exports.InfoIcon = exports.InactiveIcon = exports.ForwardIcon = exports.FilterIcon = exports.FileHeart = exports.FileIcon = exports.FastForwardIcon = exports.FastBackwardIcon = exports.EyeOffIcon = exports.EyeIcon = exports.ErrorIcon = exports.EmptyIcon = exports.EditIcon = exports.DragHandleRound = exports.DownloadIcon = exports.DismissCircleIcon = exports.DateIcon = exports.ContentCopy = exports.CloseIcon = exports.ClearSmallIcon = exports.ClearIcon = exports.ChevronRightIcon = exports.ChevronLeftIcon = exports.ChevronDownOutline = exports.ChevronDownFilledIcon = exports.ChevronDownIcon = exports.CheckmarkDoneSharp = exports.CheckmarkCircleIcon = exports.CheckmarkIcon = exports.CancelIcon = exports.BurgerMenuIcon = exports.BackwardIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowHookUpRight = exports.ArrowDownIcon = exports.ArrowBackIcon = exports.AddIcon = void 0;
+exports.ZoomOutIcon = exports.ZoomInIcon = exports.WarningIcon = exports.TrashIcon = exports.ToIcon = exports.TimeIcon = exports.SwitcherIcon = exports.SuccessIcon = exports.SiderUnionBorder = exports.SendFilled = exports.SearchIcon = exports.RussiaFlag = exports.RotateCounterclockwiseIcon = exports.RotateClockwiseIcon = void 0;
 var Add_1 = require("./Add");
 Object.defineProperty(exports, "AddIcon", { enumerable: true, get: function () { return __importDefault(Add_1).default; } });
 var ArrowBack_1 = require("./ArrowBack");
@@ -53,6 +53,8 @@ var DismissCircle_1 = require("./DismissCircle");
 Object.defineProperty(exports, "DismissCircleIcon", { enumerable: true, get: function () { return __importDefault(DismissCircle_1).default; } });
 var Download_1 = require("./Download");
 Object.defineProperty(exports, "DownloadIcon", { enumerable: true, get: function () { return __importDefault(Download_1).default; } });
+var DragHandleRound_1 = require("./DragHandleRound");
+Object.defineProperty(exports, "DragHandleRound", { enumerable: true, get: function () { return __importDefault(DragHandleRound_1).default; } });
 var Edit_1 = require("./Edit");
 Object.defineProperty(exports, "EditIcon", { enumerable: true, get: function () { return __importDefault(Edit_1).default; } });
 var Empty_1 = require("./Empty");

package/lib/components.d.ts

@@ -34658,6 +34658,9 @@ export declare const UDataTable: import("vue").DefineComponent<import("vue").Ext
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -35613,6 +35616,9 @@ export declare const UDataTable: import("vue").DefineComponent<import("vue").Ext
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -36568,6 +36574,9 @@ export declare const UDataTable: import("vue").DefineComponent<import("vue").Ext
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -37550,6 +37559,9 @@ export declare const UDataTable: import("vue").DefineComponent<import("vue").Ext
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;
@@ -38939,6 +38951,9 @@ export declare const UDataTable: import("vue").DefineComponent<import("vue").Ext
         '--u-th-button-color-hover': string;
         '--u-th-icon-color': string;
         '--u-th-icon-color-active': string;
+        '--u-drop-mark-color': string;
+        '--u-drag-ghost-opacity': string;
+        '--u-drag-ghost-filter': string;
         '--u-filter-size': string;
         '--u-pagination-margin': string;
         '--u-empty-padding': string;
@@ -39123,6 +39138,9 @@ export declare const UDataTable: import("vue").DefineComponent<import("vue").Ext
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -40078,6 +40096,9 @@ export declare const UDataTable: import("vue").DefineComponent<import("vue").Ext
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -41033,6 +41054,9 @@ export declare const UDataTable: import("vue").DefineComponent<import("vue").Ext
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -77057,6 +77081,10 @@ export { mappingCardDark, mappingCardLight, renderConfig } from './mapping-card'
 export declare const UMappingCard: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     title: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["title"]>;
     description: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["description"]>;
+    subTitle: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["subTitle"]>;
+    subDescription: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["subDescription"]>;
+    headerInfo: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["headerInfo"]>;
+    headerSubInfo: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["headerSubInfo"]>;
     rows: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["rows"]>;
     cols: {
         readonly type: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["cols"]>;
@@ -78111,6 +78139,10 @@ export declare const UMappingCard: import("vue").DefineComponent<import("vue").E
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["title"]>;
     description: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["description"]>;
+    subTitle: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["subTitle"]>;
+    subDescription: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["subDescription"]>;
+    headerInfo: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["headerInfo"]>;
+    headerSubInfo: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["headerSubInfo"]>;
     rows: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["rows"]>;
     cols: {
         readonly type: import("vue").PropType<import("./mapping-card/src/interface").MappingCardInterface["cols"]>;

package/lib/data-table/src/DataTable.d.ts

@@ -166,6 +166,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -1121,6 +1124,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -2076,6 +2082,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -3058,6 +3067,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;
@@ -4447,6 +4459,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         '--u-th-button-color-hover': string;
         '--u-th-icon-color': string;
         '--u-th-icon-color-active': string;
+        '--u-drop-mark-color': string;
+        '--u-drag-ghost-opacity': string;
+        '--u-drag-ghost-filter': string;
         '--u-filter-size': string;
         '--u-pagination-margin': string;
         '--u-empty-padding': string;
@@ -4631,6 +4646,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -5586,6 +5604,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -6541,6 +6562,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;

package/lib/data-table/src/DataTable.js

@@ -16,6 +16,7 @@ const use_check_1 = require("./use-check");
 const use_expand_1 = require("./use-expand");
 const use_group_header_1 = require("./use-group-header");
 const use_resizable_1 = require("./use-resizable");
+const use_row_drag_1 = require("./use-row-drag");
 const use_scroll_1 = require("./use-scroll");
 const use_table_data_1 = require("./use-table-data");
 const use_table_storage_1 = require("./use-table-storage");
@@ -78,6 +79,11 @@ exports.default = (0, vue_1.defineComponent)({
             paginatedDataRef
         });
         const { stickyExpandedRowsRef, mergedExpandedRowKeysRef, renderExpandRef, expandableRef, doUpdateExpandedRowKeys } = (0, use_expand_1.useExpand)(props, treeMateRef);
+        const { draggableColumnRef, draggingRowKeySetRef, droppingRowKeyRef, droppingPositionRef, handleRowDragStart, handleRowDragOver, handleRowDragLeave, handleRowDragEnd, handleRowDrop } = (0, use_row_drag_1.useRowDrag)(props, {
+            paginatedDataRef,
+            mergedCheckedRowKeySetRef,
+            mergedClsPrefixRef
+        });
         const { handleTableBodyScroll, handleTableHeaderScroll, syncScrollState, setHeaderScrollLeft, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, leftFixedColumnsRef, rightFixedColumnsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef } = (0, use_scroll_1.useScroll)(props, {
             bodyWidthRef,
             mainTableInstRef,
@@ -482,6 +488,15 @@ exports.default = (0, vue_1.defineComponent)({
                     '--u-action-divider-color': actionDividerColor
                 };
             }),
+            draggableColumnRef,
+            draggingRowKeySetRef,
+            droppingRowKeyRef,
+            droppingPositionRef,
+            handleRowDragStart,
+            handleRowDragOver,
+            handleRowDragLeave,
+            handleRowDragEnd,
+            handleRowDrop,
             onLoadRef: (0, vue_1.toRef)(props, 'onLoad'),
             mergedTableLayoutRef,
             resizableEnabledRef,
@@ -546,7 +561,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { size } = props;
-            const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, fixedBoxShadow, sorterSize, resizableContainerSize, resizableSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, thSubFontSize, thSubColor, thSubFontWeight, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('thPadding', size)]: thPadding, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding, [(0, _utils_1.createKey)('thHeight', size)]: thHeight, [(0, _utils_1.createKey)('tdHeight', size)]: tdHeight } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, dropMarkColor, dragGhostOpacity, dragGhostFilter, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, fixedBoxShadow, sorterSize, resizableContainerSize, resizableSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, thSubFontSize, thSubColor, thSubFontWeight, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('thPadding', size)]: thPadding, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding, [(0, _utils_1.createKey)('thHeight', size)]: thHeight, [(0, _utils_1.createKey)('tdHeight', size)]: tdHeight } } = themeRef.value;
             return {
                 '--u-th-height': thHeight,
                 '--u-td-height': tdHeight,
@@ -580,6 +595,9 @@ exports.default = (0, vue_1.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,

package/lib/data-table/src/HeaderButton/FilterButton.d.ts

@@ -54,6 +54,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;
@@ -1448,6 +1451,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;

package/lib/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -79,6 +79,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;
@@ -1473,6 +1476,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;

package/lib/data-table/src/TableParts/Body.d.ts

@@ -1,14 +1,7 @@
 import type { CSSProperties, PropType } from 'vue';
 import type { VirtualListInst } from 'vueuc';
 import type { ScrollbarInst } from '../../../_internal';
-import type { ColumnKey, RowKey, TmNode } from '../interface';
-import type { ColItem } from '../use-group-header';
-interface NormalRowRenderInfo {
-    striped: boolean;
-    tmNode: TmNode;
-    key: RowKey;
-    index: number;
-}
+import type { ColumnKey, NormalRowRenderInfo, RowKey, TmNode } from '../interface';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     onEdit: PropType<(value: string, row: string, key: string) => void>;
     onResize: PropType<(e: ResizeObserverEntry) => void>;
@@ -103,6 +96,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;
@@ -1497,6 +1493,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
+            dropMarkColor: string;
+            dragGhostOpacity: string;
+            dragGhostFilter: string;
             borderColorModal: string;
             tdColorHoverModal: string;
             tdColorStripedModal: string;
@@ -2849,7 +2848,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
     }>;
     scrollX: import("vue").Ref<string | number | undefined, string | number | undefined>;
-    cols: import("vue").Ref<ColItem[], ColItem[]>;
+    cols: import("vue").Ref<import("../use-group-header").ColItem[], import("../use-group-header").ColItem[]>;
     loading: import("vue").Ref<boolean, boolean>;
     loadingSkeleton: import("vue").Ref<boolean, boolean>;
     bodyShowHeaderOnly: import("vue").ComputedRef<boolean>;
@@ -2909,7 +2908,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     handleUpdateExpanded: (key: RowKey, tmNode: TmNode | null) => void;
     renderCell: import("vue").Ref<((value: any, rowData: object, column: import("../interface").TableBaseColumn) => import("vue").VNodeChild) | undefined, ((value: any, rowData: object, column: import("../interface").TableBaseColumn) => import("vue").VNodeChild) | undefined>;
     defaultEmptyValueRef: import("vue").Ref<string | (() => import("vue").VNodeChild) | undefined, string | (() => import("vue").VNodeChild) | undefined>;
-    emptyPropsRef: import("vue").Ref<Partial<import("../../../empty").EmptyProps> | undefined, Partial<import("../../../empty").EmptyProps> | undefined>;
+    emptyPropsRef: import("vue").Ref<Partial<import("../../..").EmptyProps> | undefined, Partial<import("../../..").EmptyProps> | undefined>;
+    draggableColumn: import("vue").Ref<import("../interface").TableDraggableColumn<import("../interface").InternalRowData> | null, import("../interface").TableDraggableColumn<import("../interface").InternalRowData> | null>;
+    draggingRowKeySet: import("vue").Ref<Set<RowKey>, Set<RowKey>>;
+    droppingRowKey: import("vue").Ref<RowKey | null, RowKey | null>;
+    droppingPosition: import("vue").Ref<import("../interface").RowDropPosition | null, import("../interface").RowDropPosition | null>;
+    handleRowDragStart: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragOver: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragLeave: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragEnd: () => void;
+    handleRowDrop: (event: DragEvent, rowKey: RowKey) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "edit"[], "edit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     onEdit: PropType<(value: string, row: string, key: string) => void>;
     onResize: PropType<(e: ResizeObserverEntry) => void>;