@uzum-tech/ui 2.0.5 → 2.0.6

package/lib/data-table/src/TableParts/Body.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -23,72 +12,13 @@ const common_1 = require("../../../_mixins/common");
 const _utils_1 = require("../../../_utils");
 const cssr_1 = require("../../../_utils/cssr");
 const context_1 = require("../../../config-provider/src/context");
-const empty_1 = require("../../../empty");
 const interface_1 = require("../interface");
 const utils_1 = require("../utils");
-const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
-const BodyRadio_1 = __importDefault(require("./BodyRadio"));
+const BodyEmpty_1 = require("./BodyEmpty");
+const BodyRow_1 = require("./BodyRow");
 const BodySkeleton_1 = __importDefault(require("./BodySkeleton"));
-const Cell_1 = __importDefault(require("./Cell"));
-const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
 const Header_1 = __importDefault(require("./Header"));
-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 = (0, vue_1.defineComponent)({
-    props: {
-        clsPrefix: {
-            type: String,
-            required: true
-        },
-        id: {
-            type: String,
-            required: true
-        },
-        cols: {
-            type: Array,
-            required: true
-        },
-        tableWidth: String,
-        onMouseenter: Function,
-        onMouseleave: Function
-    },
-    render() {
-        const { clsPrefix, id, cols, tableWidth, onMouseenter, onMouseleave } = this;
-        return ((0, vue_1.h)("table", { style: { tableLayout: 'fixed', width: tableWidth }, class: `${clsPrefix}-data-table-table`, onMouseenter: onMouseenter, onMouseleave: onMouseleave },
-            (0, vue_1.h)("colgroup", null, cols.map(col => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
-            (0, vue_1.h)("tbody", { "data-u-id": id, class: `${clsPrefix}-data-table-tbody` }, this.$slots)));
-    }
-});
+const VirtualListItemWrapper_1 = __importDefault(require("./VirtualListItemWrapper"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTableBody',
     emits: ['edit'],
@@ -100,7 +30,7 @@ exports.default = (0, vue_1.defineComponent)({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, resizableEnabledRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell, defaultEmptyValueRef, emptyPropsRef } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, resizableEnabledRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell, defaultEmptyValueRef, emptyPropsRef, draggableColumnRef, draggingRowKeySetRef, droppingRowKeyRef, droppingPositionRef, handleRowDragStart, handleRowDragOver, handleRowDragLeave, handleRowDragEnd, handleRowDrop } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const UConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const scrollbarInstRef = (0, vue_1.ref)(null);
         const virtualListRef = (0, vue_1.ref)(null);
@@ -366,7 +296,11 @@ exports.default = (0, vue_1.defineComponent)({
             handleUpdateExpanded,
             renderCell,
             defaultEmptyValueRef,
-            emptyPropsRef }, exposedMethods);
+            emptyPropsRef, draggableColumn: draggableColumnRef, draggingRowKeySet: draggingRowKeySetRef, droppingRowKey: droppingRowKeyRef, droppingPosition: droppingPositionRef, handleRowDragStart,
+            handleRowDragOver,
+            handleRowDragLeave,
+            handleRowDragEnd,
+            handleRowDrop }, exposedMethods);
     },
     render() {
         const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, fixedResizableMode, fixedResizableTableWidth, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft, emptyPropsRef } = this;
@@ -397,7 +331,7 @@ exports.default = (0, vue_1.defineComponent)({
                 // if there is children in data, we should expand mergedData first
                 const { data: paginatedData, hasChildren } = paginatedDataAndInfo;
                 const mergedPaginationData = hasChildren
-                    ? flatten(paginatedData, mergedExpandedRowKeySet)
+                    ? (0, utils_1.flattenExpandedRows)(paginatedData, mergedExpandedRowKeySet)
                     : paginatedData;
                 if (summary) {
                     const summaryRows = summary(this.rawPaginatedData);
@@ -462,162 +396,54 @@ exports.default = (0, vue_1.defineComponent)({
                 });
                 const bodyWidth = stickyExpandedRows ? this.bodyWidth : null;
                 const bodyWidthPx = bodyWidth === null ? undefined : `${bodyWidth}px`;
-                const renderRow = (rowInfo, displayedRowIndex, isVirtual) => {
-                    const { index: actualRowIndex } = rowInfo;
-                    if ('isExpandedRow' in rowInfo) {
-                        const { tmNode: { key, rawNode } } = rowInfo;
-                        return ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`, key: `${key}__expand` },
-                            (0, vue_1.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 ? ((0, vue_1.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,
+                    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)
-                        : undefined;
-                    const mergedRowClassName = typeof rowClassName === 'string'
-                        ? rowClassName
-                        : (0, utils_1.createRowClassName)(rowData, actualRowIndex, rowClassName);
-                    const _a = props || {}, { class: _class } = _a, restProps = __rest(_a, ["class"]);
-                    const row = ((0, vue_1.h)("tr", Object.assign({ 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) => {
-                        var _a, _b, _c, _d, _e;
-                        if (displayedRowIndex in cordToPass) {
-                            const cordOfRowToPass = cordToPass[displayedRowIndex];
-                            const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
-                            if (~indexInCordOfRowToPass) {
-                                cordOfRowToPass.splice(indexInCordOfRowToPass, 1);
-                                return null;
-                            }
-                        }
-                        // TODO: Simplify row calculation
-                        const { column } = col;
-                        const colKey = (0, utils_1.getColKey)(col);
-                        const { rowSpan, colSpan } = column;
-                        const mergedColSpan = isSummary
-                            ? ((_a = rowInfo.tmNode.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
-                            : colSpan
-                                ? colSpan(rowData, actualRowIndex)
-                                : 1;
-                        const mergedRowSpan = isSummary
-                            ? ((_b = rowInfo.tmNode.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
-                            : 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 === null || cellProps === void 0 ? void 0 : cellProps(rowData, actualRowIndex);
-                        const indentOffsetStyle = {
-                            '--indent-offset': ''
-                        };
-                        return ((0, vue_1.h)("td", Object.assign({}, resolvedCellProps, { key: colKey, style: [
-                                {
-                                    textAlign: column.align || undefined,
-                                    left: (0, seemly_1.pxfy)((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
-                                    right: (0, seemly_1.pxfy)((_d = fixedColumnRightMap[colKey]) === null || _d === void 0 ? void 0 : _d.start)
-                                },
-                                indentOffsetStyle,
-                                (resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.style) || ''
-                            ], colspan: mergedColSpan, rowspan: isVirtual ? undefined : mergedRowSpan, "data-col-key": colKey, class: [
-                                `${mergedClsPrefix}-data-table-td`,
-                                column.className,
-                                resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.class,
-                                isSummary
-                                    && `${mergedClsPrefix}-data-table-td--summary`,
-                                ((hoverKey !== null
-                                    && cordKey[displayedRowIndex][colIndex].includes(hoverKey))
-                                    || (0, utils_1.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 && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-td__shadow-holder` })),
-                            hasChildren && colIndex === childTriggerColIndex
-                                ? [
-                                    (0, seemly_1.repeat)((indentOffsetStyle['--indent-offset']
-                                        = isSummary ? 0 : rowInfo.tmNode.level), (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
-                                    isSummary || rowInfo.tmNode.isLeaf ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : ((0, vue_1.h)(ExpandTrigger_1.default, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, loading: loadingKeySet.has(rowInfo.key), onClick: () => {
-                                            handleUpdateExpanded(rowKey, rowInfo.tmNode);
-                                        } }))
-                                ]
-                                : null,
-                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? ((0, vue_1.h)(BodyRadio_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onClick: (event) => {
-                                    event.stopPropagation();
-                                }, onUpdateChecked: () => {
-                                    handleRadioUpdateChecked(rowInfo.tmNode);
-                                } })) : ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, event) => {
-                                    event.stopPropagation();
-                                    handleCheckboxUpdateChecked(rowInfo.tmNode, checked, event.shiftKey);
-                                } }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable
-                                || ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => {
-                                    handleUpdateExpanded(rowKey, null);
-                                } })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell, defaultEmptyValue: this.defaultEmptyValueRef, onEdit: (value, row, key) => {
-                                    this.$emit('edit', value, row, key);
-                                } }))));
-                    })));
-                    return row;
                 };
+                const renderRow = (rowInfo, displayedRowIndex, isVirtual) => (0, BodyRow_1.renderBodyRow)(renderContext, rowInfo, displayedRowIndex, isVirtual);
                 if (!virtualScroll) {
                     return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
                             width: fixedResizableTableWidth,
@@ -639,7 +465,7 @@ exports.default = (0, vue_1.defineComponent)({
                             this.showHeader ? (0, vue_1.h)(Header_1.default, { discrete: false }) : null,
                             (0, vue_1.h)(BodySkeleton_1.default, null)));
                     }
-                    return ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: 28, visibleItemsTag: VirtualListItemWrapper, visibleItemsProps: {
+                    return ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: 28, visibleItemsTag: VirtualListItemWrapper_1.default, visibleItemsProps: {
                             clsPrefix: mergedClsPrefix,
                             id: componentId,
                             cols,
@@ -652,12 +478,14 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }));
         if (this.empty && !this.loadingSkeleton) {
-            const createEmptyNode = () => ((0, vue_1.h)("div", { class: [
-                    `${mergedClsPrefix}-data-table-empty`,
-                    this.loading && `${mergedClsPrefix}-data-table-empty--hide`
-                ], style: this.bodyStyle, ref: "emptyElRef" }, (0, _utils_1.resolveSlot)(this.dataTableSlots.empty, () => [
-                (0, vue_1.h)(empty_1.UEmpty, Object.assign({ size: "large", theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty }, emptyPropsRef))
-            ])));
+            const createEmptyNode = () => (0, BodyEmpty_1.renderBodyEmpty)({
+                clsPrefix: mergedClsPrefix,
+                loading: this.loading,
+                bodyStyle: this.bodyStyle,
+                dataTableSlots: this.dataTableSlots,
+                mergedTheme: this.mergedTheme,
+                emptyProps: emptyPropsRef
+            });
             if (this.shouldDisplaySomeTablePart) {
                 return ((0, vue_1.h)(vue_1.Fragment, null,
                     tableNode,

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

@@ -0,0 +1,3 @@
+import type { VNode } from 'vue';
+import type { BodyEmptyDeps } from '../interface';
+export declare function renderBodyEmpty(deps: BodyEmptyDeps): VNode;

package/lib/data-table/src/TableParts/BodyEmpty.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderBodyEmpty = renderBodyEmpty;
+const vue_1 = require("vue");
+const _utils_1 = require("../../../_utils");
+const empty_1 = require("../../../empty");
+function renderBodyEmpty(deps) {
+    const { clsPrefix, loading, bodyStyle, dataTableSlots, mergedTheme, emptyProps } = deps;
+    return ((0, vue_1.h)("div", { class: [
+            `${clsPrefix}-data-table-empty`,
+            loading && `${clsPrefix}-data-table-empty--hide`
+        ], style: bodyStyle, ref: "emptyElRef" }, (0, _utils_1.resolveSlot)(dataTableSlots.empty, () => [
+        (0, vue_1.h)(empty_1.UEmpty, Object.assign({ size: "large", theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }, emptyProps))
+    ])));
+}

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

@@ -0,0 +1,3 @@
+import type { VNode } from 'vue';
+import type { BodyRowRenderContext, RowRenderInfo } from '../interface';
+export declare function renderBodyRow(context: BodyRowRenderContext, rowInfo: RowRenderInfo, displayedRowIndex: number, isVirtual: boolean): VNode;

package/lib/data-table/src/TableParts/BodyRow.js

@@ -0,0 +1,210 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderBodyRow = renderBodyRow;
+const seemly_1 = require("seemly");
+const vue_1 = require("vue");
+const icons_1 = require("../../../_internal/icons");
+const _utils_1 = require("../../../_utils");
+const utils_1 = require("../utils");
+const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
+const BodyRadio_1 = __importDefault(require("./BodyRadio"));
+const Cell_1 = __importDefault(require("./Cell"));
+const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
+function renderExpandedRow(context, rowInfo, displayedRowIndex) {
+    const { mergedClsPrefix, colCount, rowCount, stickyExpandedRows, bodyWidthPx, renderExpand } = context;
+    const { index: actualRowIndex } = rowInfo;
+    const { tmNode: { key, rawNode } } = rowInfo;
+    return ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`, key: `${key}__expand` },
+        (0, vue_1.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 ? ((0, vue_1.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) : undefined;
+    const mergedRowClassName = typeof rowClassName === 'string'
+        ? rowClassName
+        : (0, utils_1.createRowClassName)(rowData, actualRowIndex, rowClassName);
+    const _a = props || {}, { class: _class } = _a, restProps = __rest(_a, ["class"]);
+    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 = ((0, vue_1.h)("tr", Object.assign({ onMouseenter: () => {
+            setHoverKey(rowKey);
+        }, key: rowKey, "data-row-key": String(rowKey), onDragover: draggableColumn && !isSummary
+            ? (event) => handleRowDragOver(event, rowKey)
+            : undefined, onDragleave: draggableColumn && !isSummary
+            ? (event) => handleRowDragLeave(event, rowKey)
+            : undefined, onDrop: draggableColumn && !isSummary
+            ? (event) => handleRowDrop(event, rowKey)
+            : undefined, 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) => {
+        var _a, _b, _c, _d, _e;
+        if (displayedRowIndex in cordToPass) {
+            const cordOfRowToPass = cordToPass[displayedRowIndex];
+            const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
+            if (~indexInCordOfRowToPass) {
+                cordOfRowToPass.splice(indexInCordOfRowToPass, 1);
+                return null;
+            }
+        }
+        // TODO: Simplify row calculation
+        const { column } = col;
+        const colKey = (0, utils_1.getColKey)(col);
+        const { rowSpan, colSpan } = column;
+        const mergedColSpan = isSummary
+            ? ((_a = rowInfo.tmNode.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
+            : colSpan
+                ? colSpan(rowData, actualRowIndex)
+                : 1;
+        const mergedRowSpan = isSummary
+            ? ((_b = rowInfo.tmNode.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
+            : 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 === null || cellProps === void 0 ? void 0 : cellProps(rowData, actualRowIndex);
+        const indentOffsetStyle = {
+            '--indent-offset': ''
+        };
+        const isDraggableHandleCell = column.type === 'draggable' && !isSummary && isRowDraggable;
+        return ((0, vue_1.h)("td", Object.assign({}, resolvedCellProps, { key: colKey, draggable: isDraggableHandleCell || undefined, onDragstart: isDraggableHandleCell
+                ? (event) => handleRowDragStart(event, rowKey)
+                : undefined, onDragend: isDraggableHandleCell ? () => handleRowDragEnd() : undefined, style: [
+                {
+                    textAlign: column.align || undefined,
+                    left: (0, seemly_1.pxfy)((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
+                    right: (0, seemly_1.pxfy)((_d = fixedColumnRightMap[colKey]) === null || _d === void 0 ? void 0 : _d.start)
+                },
+                indentOffsetStyle,
+                (resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.style) || ''
+            ], colspan: mergedColSpan, rowspan: isVirtual ? undefined : mergedRowSpan, "data-col-key": colKey, class: [
+                `${mergedClsPrefix}-data-table-td`,
+                column.className,
+                resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.class,
+                isSummary && `${mergedClsPrefix}-data-table-td--summary`,
+                ((cellHoverKey !== null
+                    && cordKey[displayedRowIndex][colIndex].includes(cellHoverKey))
+                    || (0, utils_1.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 && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-td__shadow-holder` })),
+            hasChildren && colIndex === childTriggerColIndex
+                ? [
+                    (0, seemly_1.repeat)((indentOffsetStyle['--indent-offset'] = isSummary
+                        ? 0
+                        : rowInfo.tmNode.level), (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
+                    isSummary || rowInfo.tmNode.isLeaf ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : ((0, vue_1.h)(ExpandTrigger_1.default, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: renderExpandIcon, loading: loadingKeySet.has(rowInfo.key), onClick: () => {
+                            handleUpdateExpanded(rowKey, rowInfo.tmNode);
+                        } }))
+                ]
+                : null,
+            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? ((0, vue_1.h)(BodyRadio_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onClick: (event) => {
+                    event.stopPropagation();
+                }, onUpdateChecked: () => {
+                    handleRadioUpdateChecked(rowInfo.tmNode);
+                } })) : ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, event) => {
+                    event.stopPropagation();
+                    handleCheckboxUpdateChecked(rowInfo.tmNode, checked, event.shiftKey);
+                } }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable || ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: renderExpandIcon, onClick: () => {
+                    handleUpdateExpanded(rowKey, null);
+                } })) : null) : null) : column.type === 'draggable' ? (isDraggableHandleCell ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-data-table-td__drag-handle`, "aria-label": "Drag to reorder" }, (0, _utils_1.resolveSlot)(dataTableSlots['drag-handle'], () => [
+                (0, vue_1.h)(icons_1.DragHandleRound, null)
+            ]))) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: renderCell, defaultEmptyValue: defaultEmptyValue, onEdit: (value, row, key) => {
+                    emitEdit(value, row, key);
+                } }))));
+    })));
+    return row;
+}

package/lib/data-table/src/TableParts/BodySkeleton.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const skeleton_1 = require("../../../skeleton");
 const interface_1 = require("../interface");
+const ICON_COLUMN_SKELETON_WIDTH = '16px';
+const DEFAULT_COLUMN_SKELETON_WIDTH = '85%';
+const SKELETON_BORDER_RADIUS = '16px';
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTableBodySkeleton',
     props: {
@@ -41,8 +44,11 @@ exports.default = (0, vue_1.defineComponent)({
                 padding: 'var(--u-td-padding)'
             } },
             col.column.fixed && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-td__shadow-holder` })),
-            (0, vue_1.h)(skeleton_1.USkeleton, { height: "var(--u-line-height)", width: col.column.type === 'selection' ? '16px' : '85%', animated: true, style: {
-                    borderRadius: '16px'
+            (0, vue_1.h)(skeleton_1.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 ((0, vue_1.h)("tbody", { class: [
                 `${mergedClsPrefix}-data-table-tbody`,

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

@@ -73,6 +73,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;
@@ -1467,6 +1470,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;