@uzum-tech/ui 2.0.4 → 2.0.6

package/es/data-table/src/TableParts/Body.mjs

@@ -1,106 +1,19 @@
-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;
-};
-import { depx, pxfy, repeat } from 'seemly';
+import { depx, pxfy } from 'seemly';
 import { useMemo } from 'vooks';
 import { computed, defineComponent, Fragment, h, inject, onUnmounted, ref, watchEffect } from 'vue';
 import { VirtualList, VResizeObserver } from 'vueuc';
 import { UScrollbar } from "../../../_internal/index.mjs";
 import { cssrAnchorMetaName } from "../../../_mixins/common.mjs";
-import { formatLength, resolveSlot, warn } from "../../../_utils/index.mjs";
+import { formatLength, warn } from "../../../_utils/index.mjs";
 import { c } from "../../../_utils/cssr/index.mjs";
 import { configProviderInjectionKey } from "../../../config-provider/src/context.mjs";
-import { UEmpty } from "../../../empty/index.mjs";
 import { dataTableInjectionKey } from "../interface.mjs";
-import { createRowClassName, getColKey, isColumnSorting } from "../utils/index.mjs";
-import RenderSafeCheckbox from "./BodyCheckbox.mjs";
-import RenderSafeRadio from "./BodyRadio.mjs";
+import { flattenExpandedRows } from "../utils/index.mjs";
+import { renderBodyEmpty } from "./BodyEmpty.mjs";
+import { renderBodyRow } from "./BodyRow.mjs";
 import BodySkeleton from "./BodySkeleton.mjs";
-import Cell from "./Cell.mjs";
-import ExpandTrigger from "./ExpandTrigger.mjs";
 import TableHeader from "./Header.mjs";
-function flatten(rowInfos, expandedRowKeys) {
-  const fRows = [];
-  function traverse(rs, rootIndex) {
-    rs.forEach(r => {
-      if (r.children && expandedRowKeys.has(r.key)) {
-        fRows.push({
-          tmNode: r,
-          striped: false,
-          key: r.key,
-          index: rootIndex
-        });
-        traverse(r.children, rootIndex);
-      } else {
-        fRows.push({
-          key: r.key,
-          tmNode: r,
-          striped: false,
-          index: rootIndex
-        });
-      }
-    });
-  }
-  rowInfos.forEach(rowInfo => {
-    fRows.push(rowInfo);
-    const {
-      children
-    } = rowInfo.tmNode;
-    if (children && expandedRowKeys.has(rowInfo.key)) {
-      traverse(children, rowInfo.index);
-    }
-  });
-  return fRows;
-}
-const VirtualListItemWrapper = defineComponent({
-  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 h("table", {
-      style: {
-        tableLayout: 'fixed',
-        width: tableWidth
-      },
-      class: `${clsPrefix}-data-table-table`,
-      onMouseenter: onMouseenter,
-      onMouseleave: onMouseleave
-    }, h("colgroup", null, cols.map(col => h("col", {
-      key: col.key,
-      style: col.style
-    }))), h("tbody", {
-      "data-u-id": id,
-      class: `${clsPrefix}-data-table-tbody`
-    }, this.$slots));
-  }
-});
+import VirtualListItemWrapper from "./VirtualListItemWrapper.mjs";
 export default defineComponent({
   name: 'DataTableBody',
   emits: ['edit'],
@@ -160,7 +73,16 @@ export default defineComponent({
       doUncheck,
       renderCell,
       defaultEmptyValueRef,
-      emptyPropsRef
+      emptyPropsRef,
+      draggableColumnRef,
+      draggingRowKeySetRef,
+      droppingRowKeyRef,
+      droppingPositionRef,
+      handleRowDragStart,
+      handleRowDragOver,
+      handleRowDragLeave,
+      handleRowDragEnd,
+      handleRowDrop
     } = inject(dataTableInjectionKey);
     const UConfigProvider = inject(configProviderInjectionKey, null);
     const scrollbarInstRef = ref(null);
@@ -467,7 +389,16 @@ export default defineComponent({
       handleUpdateExpanded,
       renderCell,
       defaultEmptyValueRef,
-      emptyPropsRef
+      emptyPropsRef,
+      draggableColumn: draggableColumnRef,
+      draggingRowKeySet: draggingRowKeySetRef,
+      droppingRowKey: droppingRowKeyRef,
+      droppingPosition: droppingPositionRef,
+      handleRowDragStart,
+      handleRowDragOver,
+      handleRowDragLeave,
+      handleRowDragEnd,
+      handleRowDrop
     }, exposedMethods);
   },
   render() {
@@ -554,7 +485,7 @@ export default defineComponent({
           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)) {
@@ -612,177 +543,54 @@ export default 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 h("tr", {
-              class: `${mergedClsPrefix}-data-table-tr ${mergedClsPrefix}-data-table-tr--expanded`,
-              key: `${key}__expand`
-            }, 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 ? 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 : createRowClassName(rowData, actualRowIndex, rowClassName);
-          const _a = props || {},
-            {
-              class: _class
-            } = _a,
-            restProps = __rest(_a, ["class"]);
-          const row = 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 = 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 h("td", Object.assign({}, resolvedCellProps, {
-              key: colKey,
-              style: [{
-                textAlign: column.align || undefined,
-                left: pxfy((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
-                right: 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) || 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 && h("div", {
-              class: `${mergedClsPrefix}-data-table-td__shadow-holder`
-            }), hasChildren && colIndex === childTriggerColIndex ? [repeat(indentOffsetStyle['--indent-offset'] = isSummary ? 0 : rowInfo.tmNode.level, h("div", {
-              class: `${mergedClsPrefix}-data-table-indent`,
-              style: indentStyle
-            })), isSummary || rowInfo.tmNode.isLeaf ? h("div", {
-              class: `${mergedClsPrefix}-data-table-expand-placeholder`
-            }) : h(ExpandTrigger, {
-              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 ? h(RenderSafeRadio, {
-              key: currentPage,
-              rowKey: rowKey,
-              disabled: rowInfo.tmNode.disabled,
-              onClick: event => {
-                event.stopPropagation();
-              },
-              onUpdateChecked: () => {
-                handleRadioUpdateChecked(rowInfo.tmNode);
-              }
-            }) : h(RenderSafeCheckbox, {
-              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)) ? h(ExpandTrigger, {
-              clsPrefix: mergedClsPrefix,
-              expanded: expanded,
-              renderExpandIcon: this.renderExpandIcon,
-              onClick: () => {
-                handleUpdateExpanded(rowKey, null);
-              }
-            }) : null : null : h(Cell, {
-              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) => renderBodyRow(renderContext, rowInfo, displayedRowIndex, isVirtual);
         if (!virtualScroll) {
           return h("table", {
             class: `${mergedClsPrefix}-data-table-table`,
@@ -845,15 +653,14 @@ export default defineComponent({
       }
     });
     if (this.empty && !this.loadingSkeleton) {
-      const createEmptyNode = () => h("div", {
-        class: [`${mergedClsPrefix}-data-table-empty`, this.loading && `${mergedClsPrefix}-data-table-empty--hide`],
-        style: this.bodyStyle,
-        ref: "emptyElRef"
-      }, resolveSlot(this.dataTableSlots.empty, () => [h(UEmpty, Object.assign({
-        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 h(Fragment, null, tableNode, createEmptyNode());
       } else {

package/es/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/es/data-table/src/TableParts/BodyEmpty.mjs

@@ -0,0 +1,22 @@
+import { h } from 'vue';
+import { resolveSlot } from "../../../_utils/index.mjs";
+import { UEmpty } from "../../../empty/index.mjs";
+export function renderBodyEmpty(deps) {
+  const {
+    clsPrefix,
+    loading,
+    bodyStyle,
+    dataTableSlots,
+    mergedTheme,
+    emptyProps
+  } = deps;
+  return h("div", {
+    class: [`${clsPrefix}-data-table-empty`, loading && `${clsPrefix}-data-table-empty--hide`],
+    style: bodyStyle,
+    ref: "emptyElRef"
+  }, resolveSlot(dataTableSlots.empty, () => [h(UEmpty, Object.assign({
+    size: "large",
+    theme: mergedTheme.peers.Empty,
+    themeOverrides: mergedTheme.peerOverrides.Empty
+  }, emptyProps))]));
+}

package/es/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;