@uzum-tech/ui 2.0.5 → 2.0.7

package/es/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>;
@@ -2910,6 +2909,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     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("../../..").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>;

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;