@v-c/table 1.0.3-beta.1 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Body/BodyRow.js +8 -6
- package/dist/Body/ExpandedRow.js +6 -4
- package/dist/Body/MeasureCell.js +4 -2
- package/dist/Body/MeasureRow.js +6 -4
- package/dist/Body/index.js +10 -8
- package/dist/Cell/index.js +4 -2
- package/dist/Cell/useHoverState.js +2 -0
- package/dist/ColGroup.js +4 -2
- package/dist/FixedHolder/index.js +6 -4
- package/dist/Footer/Cell.js +6 -4
- package/dist/Footer/Row.js +4 -2
- package/dist/Footer/Summary.js +7 -6
- package/dist/Footer/SummaryContext.js +2 -0
- package/dist/Footer/index.js +8 -6
- package/dist/Header/Header.js +6 -4
- package/dist/Header/HeaderRow.js +6 -4
- package/dist/Panel/index.js +4 -2
- package/dist/Table.js +57 -29
- package/dist/VirtualTable/BodyGrid.js +21 -14
- package/dist/VirtualTable/BodyLine.js +8 -6
- package/dist/VirtualTable/VirtualCell.js +6 -4
- package/dist/VirtualTable/context.js +2 -0
- package/dist/VirtualTable/index.js +15 -10
- package/dist/constant.js +4 -2
- package/dist/context/PerfContext.js +2 -0
- package/dist/context/TableContext.js +5 -3
- package/dist/hooks/useColumns/index.js +4 -2
- package/dist/hooks/useColumns/useWidthColumns.js +2 -0
- package/dist/hooks/useExpand.js +3 -1
- package/dist/hooks/useFixedInfo.js +2 -0
- package/dist/hooks/useFlattenRecords.js +2 -0
- package/dist/hooks/useFrame.js +2 -0
- package/dist/hooks/useHover.js +2 -0
- package/dist/hooks/useRowInfo.js +2 -0
- package/dist/hooks/useSticky.js +2 -0
- package/dist/hooks/useStickyOffsets.js +2 -0
- package/dist/index.js +10 -8
- package/dist/interface.d.ts +5 -1
- package/dist/stickyScrollBar.js +4 -2
- package/dist/sugar/Column.js +8 -2
- package/dist/sugar/ColumnGroup.js +8 -2
- package/dist/utils/expandUtil.js +2 -0
- package/dist/utils/fixUtil.js +2 -0
- package/dist/utils/legacyUtil.js +3 -1
- package/dist/utils/offsetUtil.js +2 -0
- package/dist/utils/valueUtil.js +2 -0
- package/package.json +3 -3
package/dist/Body/BodyRow.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Cell from "../Cell/index.js";
|
|
2
2
|
import useRowInfo from "../hooks/useRowInfo.js";
|
|
3
3
|
import { computedExpandedClassName } from "../utils/expandUtil.js";
|
|
4
|
-
import
|
|
4
|
+
import ExpandedRow from "./ExpandedRow.js";
|
|
5
5
|
import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, ref, watchEffect } from "vue";
|
|
6
6
|
import { clsx } from "@v-c/util";
|
|
7
|
+
//#region src/Body/BodyRow.tsx
|
|
7
8
|
function _isSlot(s) {
|
|
8
9
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
9
10
|
}
|
|
@@ -42,7 +43,7 @@ function getCellProps(rowInfo, record, column, colIndex, indent, index, rowKeys
|
|
|
42
43
|
additionalCellProps
|
|
43
44
|
};
|
|
44
45
|
}
|
|
45
|
-
var
|
|
46
|
+
var BodyRow = /* @__PURE__ */ defineComponent({
|
|
46
47
|
name: "TableBodyRow",
|
|
47
48
|
props: [
|
|
48
49
|
"record",
|
|
@@ -91,7 +92,7 @@ var BodyRow_default = /* @__PURE__ */ defineComponent({
|
|
|
91
92
|
const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(rowInfo, record, column, colIndex, indent, index, rowKeys, expandedRowInfo?.offset);
|
|
92
93
|
const scope = column.rowScope ? column.rowScope : column.title ? "row" : void 0;
|
|
93
94
|
const CellComponent = column.rowScope ? scopeCellComponent : BodyCellComponent;
|
|
94
|
-
return createVNode(
|
|
95
|
+
return createVNode(Cell, mergeProps({
|
|
95
96
|
"className": clsx(columnClassName, classNames?.cell),
|
|
96
97
|
"style": styles?.cell,
|
|
97
98
|
"ellipsis": column.ellipsis,
|
|
@@ -116,7 +117,7 @@ var BodyRow_default = /* @__PURE__ */ defineComponent({
|
|
|
116
117
|
if (rowSupportExpand.value && (expandedRef.value || expanded.value)) {
|
|
117
118
|
const expandContent = expandedRowRender(record, index, indent + 1, expanded.value);
|
|
118
119
|
const computedExpandedRowClassName = computedExpandedClassName(expandedRowClassName, record, index, indent);
|
|
119
|
-
expandRowNode = createVNode(
|
|
120
|
+
expandRowNode = createVNode(ExpandedRow, {
|
|
120
121
|
"expanded": expanded.value,
|
|
121
122
|
"className": clsx(`${prefixCls}-expanded-row`, `${prefixCls}-expanded-row-level-${indent + 1}`, computedExpandedRowClassName),
|
|
122
123
|
"key": `expanded-row-${rowKey}`,
|
|
@@ -133,4 +134,5 @@ var BodyRow_default = /* @__PURE__ */ defineComponent({
|
|
|
133
134
|
};
|
|
134
135
|
}
|
|
135
136
|
});
|
|
136
|
-
|
|
137
|
+
//#endregion
|
|
138
|
+
export { BodyRow as default, getCellProps };
|
package/dist/Body/ExpandedRow.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { useInjectTableContext } from "../context/TableContext.js";
|
|
2
|
-
import
|
|
2
|
+
import Cell from "../Cell/index.js";
|
|
3
3
|
import { createVNode, defineComponent, isVNode } from "vue";
|
|
4
|
+
//#region src/Body/ExpandedRow.tsx
|
|
4
5
|
function _isSlot(s) {
|
|
5
6
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
6
7
|
}
|
|
7
|
-
var
|
|
8
|
+
var ExpandedRow = /* @__PURE__ */ defineComponent({
|
|
8
9
|
name: "TableExpandedRow",
|
|
9
10
|
props: [
|
|
10
11
|
"prefixCls",
|
|
@@ -38,7 +39,7 @@ var ExpandedRow_default = /* @__PURE__ */ defineComponent({
|
|
|
38
39
|
return createVNode(Component, {
|
|
39
40
|
"class": className,
|
|
40
41
|
"style": { display: expanded ? null : "none" }
|
|
41
|
-
}, { default: () => [createVNode(
|
|
42
|
+
}, { default: () => [createVNode(Cell, {
|
|
42
43
|
"component": cellComponent,
|
|
43
44
|
"prefixCls": prefixCls,
|
|
44
45
|
"colSpan": colSpan
|
|
@@ -46,4 +47,5 @@ var ExpandedRow_default = /* @__PURE__ */ defineComponent({
|
|
|
46
47
|
};
|
|
47
48
|
}
|
|
48
49
|
});
|
|
49
|
-
|
|
50
|
+
//#endregion
|
|
51
|
+
export { ExpandedRow as default };
|
package/dist/Body/MeasureCell.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { createVNode, defineComponent, ref } from "vue";
|
|
2
2
|
import ResizeObserver from "@v-c/resize-observer";
|
|
3
3
|
import { useLayoutEffect } from "@v-c/util/dist/hooks/useLayoutEffect";
|
|
4
|
-
|
|
4
|
+
//#region src/Body/MeasureCell.tsx
|
|
5
|
+
var MeasureCell = /* @__PURE__ */ defineComponent({
|
|
5
6
|
name: "TableMeasureCell",
|
|
6
7
|
props: [
|
|
7
8
|
"columnKey",
|
|
@@ -29,4 +30,5 @@ var MeasureCell_default = /* @__PURE__ */ defineComponent({
|
|
|
29
30
|
} }, [props.title || "\xA0"])])] });
|
|
30
31
|
}
|
|
31
32
|
});
|
|
32
|
-
|
|
33
|
+
//#endregion
|
|
34
|
+
export { MeasureCell as default };
|
package/dist/Body/MeasureRow.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { useInjectTableContext } from "../context/TableContext.js";
|
|
2
|
-
import
|
|
2
|
+
import MeasureCell from "./MeasureCell.js";
|
|
3
3
|
import { cloneVNode, createVNode, defineComponent, isVNode, ref } from "vue";
|
|
4
4
|
import ResizeObserver from "@v-c/resize-observer";
|
|
5
5
|
import { filterEmpty } from "@v-c/util/dist/props-util";
|
|
6
6
|
import isVisible from "@v-c/util/dist/Dom/isVisible";
|
|
7
|
+
//#region src/Body/MeasureRow.tsx
|
|
7
8
|
function _isSlot(s) {
|
|
8
9
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
9
10
|
}
|
|
10
|
-
var
|
|
11
|
+
var MeasureRow = /* @__PURE__ */ defineComponent({
|
|
11
12
|
name: "TableMeasureRow",
|
|
12
13
|
props: [
|
|
13
14
|
"prefixCls",
|
|
@@ -46,7 +47,7 @@ var MeasureRow_default = /* @__PURE__ */ defineComponent({
|
|
|
46
47
|
});
|
|
47
48
|
} }, _isSlot(_slot = props.columnsKey.map((columnKey) => {
|
|
48
49
|
const titleForMeasure = cloneTitle(props.columns.find((col) => col.key === columnKey)?.title);
|
|
49
|
-
return createVNode(
|
|
50
|
+
return createVNode(MeasureCell, {
|
|
50
51
|
"key": columnKey,
|
|
51
52
|
"columnKey": columnKey,
|
|
52
53
|
"onColumnResize": props.onColumnResize,
|
|
@@ -57,4 +58,5 @@ var MeasureRow_default = /* @__PURE__ */ defineComponent({
|
|
|
57
58
|
};
|
|
58
59
|
}
|
|
59
60
|
});
|
|
60
|
-
|
|
61
|
+
//#endregion
|
|
62
|
+
export { MeasureRow as default };
|
package/dist/Body/index.js
CHANGED
|
@@ -2,12 +2,13 @@ import { useInjectTableContext } from "../context/TableContext.js";
|
|
|
2
2
|
import { useProvidePerfContext } from "../context/PerfContext.js";
|
|
3
3
|
import useFlattenRecords from "../hooks/useFlattenRecords.js";
|
|
4
4
|
import { getColumnsKey } from "../utils/valueUtil.js";
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
5
|
+
import ExpandedRow from "./ExpandedRow.js";
|
|
6
|
+
import BodyRow from "./BodyRow.js";
|
|
7
|
+
import MeasureRow from "./MeasureRow.js";
|
|
8
8
|
import { computed, createVNode, defineComponent } from "vue";
|
|
9
9
|
import { clsx } from "@v-c/util";
|
|
10
|
-
|
|
10
|
+
//#region src/Body/index.tsx
|
|
11
|
+
var Body = /* @__PURE__ */ defineComponent({
|
|
11
12
|
name: "TableBody",
|
|
12
13
|
props: ["data", "measureColumnWidth"],
|
|
13
14
|
setup(props) {
|
|
@@ -35,7 +36,7 @@ var Body_default = /* @__PURE__ */ defineComponent({
|
|
|
35
36
|
let rows;
|
|
36
37
|
if (props.data.length) rows = flattenData.value.map((item, idx) => {
|
|
37
38
|
const { record, indent, index: renderIndex, rowKey } = item;
|
|
38
|
-
return createVNode(
|
|
39
|
+
return createVNode(BodyRow, {
|
|
39
40
|
"classNames": bodyCls.value,
|
|
40
41
|
"styles": bodyStyles.value,
|
|
41
42
|
"key": rowKey,
|
|
@@ -51,7 +52,7 @@ var Body_default = /* @__PURE__ */ defineComponent({
|
|
|
51
52
|
"expandedRowInfo": expandedRowInfo.value
|
|
52
53
|
}, null);
|
|
53
54
|
});
|
|
54
|
-
else rows = createVNode(
|
|
55
|
+
else rows = createVNode(ExpandedRow, {
|
|
55
56
|
"expanded": true,
|
|
56
57
|
"className": `${context.prefixCls}-placeholder`,
|
|
57
58
|
"prefixCls": context.prefixCls,
|
|
@@ -64,7 +65,7 @@ var Body_default = /* @__PURE__ */ defineComponent({
|
|
|
64
65
|
return createVNode(WrapperComponent, {
|
|
65
66
|
"style": bodyStyles.value.wrapper,
|
|
66
67
|
"class": clsx(`${context.prefixCls}-tbody`, bodyCls.value.wrapper)
|
|
67
|
-
}, { default: () => [props.measureColumnWidth && createVNode(
|
|
68
|
+
}, { default: () => [props.measureColumnWidth && createVNode(MeasureRow, {
|
|
68
69
|
"prefixCls": context.prefixCls,
|
|
69
70
|
"columnsKey": columnsKey,
|
|
70
71
|
"onColumnResize": context.onColumnResize,
|
|
@@ -73,4 +74,5 @@ var Body_default = /* @__PURE__ */ defineComponent({
|
|
|
73
74
|
};
|
|
74
75
|
}
|
|
75
76
|
});
|
|
76
|
-
|
|
77
|
+
//#endregion
|
|
78
|
+
export { Body as default };
|
package/dist/Cell/index.js
CHANGED
|
@@ -6,6 +6,7 @@ import { computed, createVNode, defineComponent, isVNode, mergeProps } from "vue
|
|
|
6
6
|
import { clsx, warning } from "@v-c/util";
|
|
7
7
|
import { filterEmpty, getStylePxValue } from "@v-c/util/dist/props-util";
|
|
8
8
|
import getValue from "@v-c/util/dist/utils/get";
|
|
9
|
+
//#region src/Cell/index.tsx
|
|
9
10
|
function getTitleFromCellRenderChildren({ ellipsis, rowType, children }) {
|
|
10
11
|
const ellipsisConfig = ellipsis === true ? { showTitle: true } : ellipsis;
|
|
11
12
|
const showTitle = !!(ellipsisConfig && typeof ellipsisConfig === "object" && ellipsisConfig.showTitle);
|
|
@@ -38,7 +39,7 @@ function resolveCellRender({ record, dataIndex, renderIndex, children, render, p
|
|
|
38
39
|
}
|
|
39
40
|
return [returnChildNode, returnCellProps];
|
|
40
41
|
}
|
|
41
|
-
var
|
|
42
|
+
var Cell = /* @__PURE__ */ defineComponent({
|
|
42
43
|
name: "TableCell",
|
|
43
44
|
props: [
|
|
44
45
|
"prefixCls",
|
|
@@ -192,4 +193,5 @@ var Cell_default = /* @__PURE__ */ defineComponent({
|
|
|
192
193
|
};
|
|
193
194
|
}
|
|
194
195
|
});
|
|
195
|
-
|
|
196
|
+
//#endregion
|
|
197
|
+
export { Cell as default };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { computed } from "vue";
|
|
2
|
+
//#region src/Cell/useHoverState.ts
|
|
2
3
|
function inHoverRange(cellStartRow, cellRowSpan, startRow, endRow) {
|
|
3
4
|
const cellEndRow = cellStartRow + cellRowSpan - 1;
|
|
4
5
|
return cellStartRow <= endRow && cellEndRow >= startRow;
|
|
@@ -8,4 +9,5 @@ function useHoverState(rowIndex, rowSpan, context) {
|
|
|
8
9
|
return inHoverRange(rowIndex, rowSpan || 1, context.hoverStartRow, context.hoverEndRow);
|
|
9
10
|
}), context.onHover];
|
|
10
11
|
}
|
|
12
|
+
//#endregion
|
|
11
13
|
export { useHoverState as default };
|
package/dist/ColGroup.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { useInjectTableContext } from "./context/TableContext.js";
|
|
2
2
|
import { INTERNAL_COL_DEFINE } from "./utils/legacyUtil.js";
|
|
3
3
|
import { createVNode, defineComponent, mergeProps } from "vue";
|
|
4
|
-
|
|
4
|
+
//#region src/ColGroup.tsx
|
|
5
|
+
var ColGroup = /* @__PURE__ */ defineComponent({
|
|
5
6
|
name: "TableColGroup",
|
|
6
7
|
props: [
|
|
7
8
|
"colWidths",
|
|
@@ -42,4 +43,5 @@ var ColGroup_default = /* @__PURE__ */ defineComponent({
|
|
|
42
43
|
};
|
|
43
44
|
}
|
|
44
45
|
});
|
|
45
|
-
|
|
46
|
+
//#endregion
|
|
47
|
+
export { ColGroup as default };
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { useInjectTableContext } from "../context/TableContext.js";
|
|
2
|
-
import
|
|
2
|
+
import ColGroup from "../ColGroup.js";
|
|
3
3
|
import { computed, createVNode, defineComponent, onBeforeUnmount, onMounted, ref } from "vue";
|
|
4
4
|
import { clsx } from "@v-c/util";
|
|
5
5
|
import { getStylePxValue, toPropsRefs } from "@v-c/util/dist/props-util";
|
|
6
|
+
//#region src/FixedHolder/index.tsx
|
|
6
7
|
function useColumnWidth(colWidths, columnCount) {
|
|
7
8
|
return computed(() => {
|
|
8
9
|
const cloneColumns = [];
|
|
@@ -14,7 +15,7 @@ function useColumnWidth(colWidths, columnCount) {
|
|
|
14
15
|
return cloneColumns;
|
|
15
16
|
});
|
|
16
17
|
}
|
|
17
|
-
var
|
|
18
|
+
var FixedHolder = /* @__PURE__ */ defineComponent({
|
|
18
19
|
name: "TableFixedHolder",
|
|
19
20
|
props: [
|
|
20
21
|
"className",
|
|
@@ -125,7 +126,7 @@ var FixedHolder_default = /* @__PURE__ */ defineComponent({
|
|
|
125
126
|
tableLayout: props.tableLayout,
|
|
126
127
|
minWidth: "100%",
|
|
127
128
|
width: typeof props.scrollX === "number" ? `${props.scrollX}px` : props.scrollX
|
|
128
|
-
} }, { default: () => [isColGroupEmpty.value ? props.colGroup : createVNode(
|
|
129
|
+
} }, { default: () => [isColGroupEmpty.value ? props.colGroup : createVNode(ColGroup, {
|
|
129
130
|
"colWidths": [...mergedColumnWidth.value || [], combinationScrollBarSize.value],
|
|
130
131
|
"columCount": props.columCount + 1,
|
|
131
132
|
"columns": flattenColumnsWithScrollbar.value
|
|
@@ -133,4 +134,5 @@ var FixedHolder_default = /* @__PURE__ */ defineComponent({
|
|
|
133
134
|
};
|
|
134
135
|
}
|
|
135
136
|
});
|
|
136
|
-
|
|
137
|
+
//#endregion
|
|
138
|
+
export { FixedHolder as default };
|
package/dist/Footer/Cell.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { useInjectTableContext } from "../context/TableContext.js";
|
|
2
|
-
import
|
|
2
|
+
import Cell from "../Cell/index.js";
|
|
3
3
|
import { getCellFixedInfo } from "../utils/fixUtil.js";
|
|
4
4
|
import { useInjectSummaryContext } from "./SummaryContext.js";
|
|
5
5
|
import { computed, createVNode, defineComponent, mergeProps } from "vue";
|
|
6
|
-
|
|
6
|
+
//#region src/Footer/Cell.tsx
|
|
7
|
+
var SummaryCell = /* @__PURE__ */ defineComponent({
|
|
7
8
|
name: "TableSummaryCell",
|
|
8
9
|
props: [
|
|
9
10
|
"className",
|
|
@@ -28,7 +29,7 @@ var Cell_default = /* @__PURE__ */ defineComponent({
|
|
|
28
29
|
};
|
|
29
30
|
return getCellFixedInfo(props.index, props.index + mergedColSpan.value - 1, summaryContext.flattenColumns || [], stickyOffsets);
|
|
30
31
|
});
|
|
31
|
-
return () => createVNode(
|
|
32
|
+
return () => createVNode(Cell, mergeProps({
|
|
32
33
|
"className": props.className,
|
|
33
34
|
"index": props.index,
|
|
34
35
|
"component": "td",
|
|
@@ -42,4 +43,5 @@ var Cell_default = /* @__PURE__ */ defineComponent({
|
|
|
42
43
|
}, fixedInfo.value), null);
|
|
43
44
|
}
|
|
44
45
|
});
|
|
45
|
-
|
|
46
|
+
//#endregion
|
|
47
|
+
export { SummaryCell as default };
|
package/dist/Footer/Row.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { createVNode, defineComponent } from "vue";
|
|
2
|
-
|
|
2
|
+
//#region src/Footer/Row.tsx
|
|
3
|
+
var FooterRow = /* @__PURE__ */ defineComponent({
|
|
3
4
|
name: "TableFooterRow",
|
|
4
5
|
props: [
|
|
5
6
|
"className",
|
|
@@ -14,4 +15,5 @@ var Row_default = /* @__PURE__ */ defineComponent({
|
|
|
14
15
|
}, [slots.default?.()]);
|
|
15
16
|
}
|
|
16
17
|
});
|
|
17
|
-
|
|
18
|
+
//#endregion
|
|
19
|
+
export { FooterRow as default };
|
package/dist/Footer/Summary.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import SummaryCell from "./Cell.js";
|
|
2
|
+
import FooterRow from "./Row.js";
|
|
3
3
|
import { defineComponent } from "vue";
|
|
4
|
+
//#region src/Footer/Summary.tsx
|
|
4
5
|
var Summary = /* @__PURE__ */ defineComponent({
|
|
5
6
|
name: "TableSummary",
|
|
6
7
|
props: ["fixed"],
|
|
@@ -8,7 +9,7 @@ var Summary = /* @__PURE__ */ defineComponent({
|
|
|
8
9
|
return () => slots.default?.();
|
|
9
10
|
}
|
|
10
11
|
});
|
|
11
|
-
Summary.Row =
|
|
12
|
-
Summary.Cell =
|
|
13
|
-
|
|
14
|
-
export {
|
|
12
|
+
Summary.Row = FooterRow;
|
|
13
|
+
Summary.Cell = SummaryCell;
|
|
14
|
+
//#endregion
|
|
15
|
+
export { Summary as default };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { inject, provide } from "vue";
|
|
2
|
+
//#region src/Footer/SummaryContext.tsx
|
|
2
3
|
var SummaryContextKey = Symbol("TableSummaryContext");
|
|
3
4
|
function useProvideSummaryContext(value) {
|
|
4
5
|
provide(SummaryContextKey, value);
|
|
@@ -6,4 +7,5 @@ function useProvideSummaryContext(value) {
|
|
|
6
7
|
function useInjectSummaryContext() {
|
|
7
8
|
return inject(SummaryContextKey, {});
|
|
8
9
|
}
|
|
10
|
+
//#endregion
|
|
9
11
|
export { useInjectSummaryContext, useProvideSummaryContext };
|
package/dist/Footer/index.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { useInjectTableContext } from "../context/TableContext.js";
|
|
2
2
|
import { useProvideSummaryContext } from "./SummaryContext.js";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
3
|
+
import SummaryCell from "./Cell.js";
|
|
4
|
+
import FooterRow from "./Row.js";
|
|
5
|
+
import Summary from "./Summary.js";
|
|
6
6
|
import { createVNode, defineComponent, reactive, watchEffect } from "vue";
|
|
7
|
-
|
|
7
|
+
//#region src/Footer/index.tsx
|
|
8
|
+
var Footer = /* @__PURE__ */ defineComponent({
|
|
8
9
|
name: "TableFooter",
|
|
9
10
|
props: ["stickyOffsets", "flattenColumns"],
|
|
10
11
|
inheritAttrs: false,
|
|
@@ -26,5 +27,6 @@ var Footer_default = /* @__PURE__ */ defineComponent({
|
|
|
26
27
|
return () => createVNode("tfoot", { "class": `${context.prefixCls}-summary` }, [slots.default?.()]);
|
|
27
28
|
}
|
|
28
29
|
});
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
var FooterComponents = Summary;
|
|
31
|
+
//#endregion
|
|
32
|
+
export { FooterComponents, SummaryCell, FooterRow as SummaryRow, Footer as default };
|
package/dist/Header/Header.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { useInjectTableContext } from "../context/TableContext.js";
|
|
2
|
-
import
|
|
2
|
+
import HeaderRow from "./HeaderRow.js";
|
|
3
3
|
import { computed, createVNode, defineComponent, isVNode } from "vue";
|
|
4
4
|
import { clsx } from "@v-c/util";
|
|
5
|
+
//#region src/Header/Header.tsx
|
|
5
6
|
function _isSlot(s) {
|
|
6
7
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
7
8
|
}
|
|
@@ -41,7 +42,7 @@ function parseHeaderRows(rootColumns, classNames, styles) {
|
|
|
41
42
|
});
|
|
42
43
|
return rows;
|
|
43
44
|
}
|
|
44
|
-
var
|
|
45
|
+
var Header = /* @__PURE__ */ defineComponent({
|
|
45
46
|
name: "TableHeader",
|
|
46
47
|
inheritAttrs: false,
|
|
47
48
|
props: [
|
|
@@ -64,7 +65,7 @@ var Header_default = /* @__PURE__ */ defineComponent({
|
|
|
64
65
|
"class": clsx(`${context.prefixCls}-thead`, headerCls.value.wrapper),
|
|
65
66
|
"style": headerStyles.value.wrapper
|
|
66
67
|
}, _isSlot(_slot = rows.map((row, rowIndex) => {
|
|
67
|
-
return createVNode(
|
|
68
|
+
return createVNode(HeaderRow, {
|
|
68
69
|
"classNames": headerCls.value,
|
|
69
70
|
"styles": headerStyles.value,
|
|
70
71
|
"key": rowIndex,
|
|
@@ -80,4 +81,5 @@ var Header_default = /* @__PURE__ */ defineComponent({
|
|
|
80
81
|
};
|
|
81
82
|
}
|
|
82
83
|
});
|
|
83
|
-
|
|
84
|
+
//#endregion
|
|
85
|
+
export { Header as default };
|
package/dist/Header/HeaderRow.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { useInjectTableContext } from "../context/TableContext.js";
|
|
2
2
|
import { getColumnsKey } from "../utils/valueUtil.js";
|
|
3
|
-
import
|
|
3
|
+
import Cell from "../Cell/index.js";
|
|
4
4
|
import { getCellFixedInfo } from "../utils/fixUtil.js";
|
|
5
5
|
import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
|
|
6
6
|
import { clsx } from "@v-c/util";
|
|
7
|
+
//#region src/Header/HeaderRow.tsx
|
|
7
8
|
function _isSlot(s) {
|
|
8
9
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
9
10
|
}
|
|
10
|
-
var
|
|
11
|
+
var HeaderRow = /* @__PURE__ */ defineComponent({
|
|
11
12
|
name: "TableHeaderRow",
|
|
12
13
|
props: [
|
|
13
14
|
"cells",
|
|
@@ -41,7 +42,7 @@ var HeaderRow_default = /* @__PURE__ */ defineComponent({
|
|
|
41
42
|
const { column, colStart, colEnd, colSpan } = cell;
|
|
42
43
|
const fixedInfo = getCellFixedInfo(colStart, colEnd, flattenColumns, stickyOffsets);
|
|
43
44
|
const additionalProps = column?.onHeaderCell?.(column) || {};
|
|
44
|
-
return createVNode(
|
|
45
|
+
return createVNode(Cell, mergeProps(cell, {
|
|
45
46
|
"colIndex": colStart ?? cellIndex,
|
|
46
47
|
"scope": column.title ? colSpan > 1 ? "colgroup" : "col" : null,
|
|
47
48
|
"ellipsis": column.ellipsis,
|
|
@@ -57,4 +58,5 @@ var HeaderRow_default = /* @__PURE__ */ defineComponent({
|
|
|
57
58
|
};
|
|
58
59
|
}
|
|
59
60
|
});
|
|
60
|
-
|
|
61
|
+
//#endregion
|
|
62
|
+
export { HeaderRow as default };
|
package/dist/Panel/index.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { createVNode, defineComponent } from "vue";
|
|
2
|
-
|
|
2
|
+
//#region src/Panel/index.tsx
|
|
3
|
+
var Panel = /* @__PURE__ */ defineComponent((_, { attrs, slots }) => {
|
|
3
4
|
return () => {
|
|
4
5
|
return createVNode("div", attrs, [slots?.default?.()]);
|
|
5
6
|
};
|
|
6
7
|
});
|
|
7
|
-
|
|
8
|
+
//#endregion
|
|
9
|
+
export { Panel as default };
|
package/dist/Table.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { useProvideTableContext } from "./context/TableContext.js";
|
|
2
|
-
import
|
|
2
|
+
import ColGroup from "./ColGroup.js";
|
|
3
3
|
import { getColumnsKey, validNumberValue, validateValue } from "./utils/valueUtil.js";
|
|
4
|
-
import
|
|
4
|
+
import Body from "./Body/index.js";
|
|
5
5
|
import { EXPAND_COLUMN, INTERNAL_HOOKS } from "./constant.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
6
|
+
import FixedHolder from "./FixedHolder/index.js";
|
|
7
|
+
import Footer, { FooterComponents } from "./Footer/index.js";
|
|
8
|
+
import Header from "./Header/Header.js";
|
|
9
9
|
import useColumns from "./hooks/useColumns/index.js";
|
|
10
10
|
import useExpand from "./hooks/useExpand.js";
|
|
11
11
|
import useFixedInfo from "./hooks/useFixedInfo.js";
|
|
@@ -13,10 +13,10 @@ import { useTimeoutLock } from "./hooks/useFrame.js";
|
|
|
13
13
|
import useHover from "./hooks/useHover.js";
|
|
14
14
|
import useSticky from "./hooks/useSticky.js";
|
|
15
15
|
import useStickyOffsets from "./hooks/useStickyOffsets.js";
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
16
|
+
import Panel from "./Panel/index.js";
|
|
17
|
+
import StickyScrollBar from "./stickyScrollBar.js";
|
|
18
|
+
import Column from "./sugar/Column.js";
|
|
19
|
+
import ColumnGroup from "./sugar/ColumnGroup.js";
|
|
20
20
|
import { Fragment, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, nextTick, onMounted, reactive, ref, shallowRef, watch, watchEffect } from "vue";
|
|
21
21
|
import ResizeObserver from "@v-c/resize-observer";
|
|
22
22
|
import { clsx, get, warning } from "@v-c/util";
|
|
@@ -26,10 +26,36 @@ import { getTargetScrollBarSize } from "@v-c/util/dist/getScrollBarSize";
|
|
|
26
26
|
import isEqual from "@v-c/util/dist/isEqual";
|
|
27
27
|
import pickAttrs from "@v-c/util/dist/pickAttrs";
|
|
28
28
|
import { filterEmpty } from "@v-c/util/dist/props-util";
|
|
29
|
+
//#region src/Table.tsx
|
|
30
|
+
/**
|
|
31
|
+
* Feature:
|
|
32
|
+
* - fixed not need to set width
|
|
33
|
+
* - support `rowExpandable` to config row expand logic
|
|
34
|
+
* - add `summary` to support `() => VueNode`
|
|
35
|
+
*
|
|
36
|
+
* Update:
|
|
37
|
+
* - `dataIndex` is `array[]` now
|
|
38
|
+
* - `expandable` wrap all the expand related props
|
|
39
|
+
*
|
|
40
|
+
* Removed:
|
|
41
|
+
* - expandIconAsCell
|
|
42
|
+
* - useFixedHeader
|
|
43
|
+
* - rowRef
|
|
44
|
+
* - columns[number].onCellClick
|
|
45
|
+
* - onRowClick
|
|
46
|
+
* - onRowDoubleClick
|
|
47
|
+
* - onRowMouseEnter
|
|
48
|
+
* - onRowMouseLeave
|
|
49
|
+
* - getBodyWrapper
|
|
50
|
+
* - bodyStyle
|
|
51
|
+
*
|
|
52
|
+
* Deprecated:
|
|
53
|
+
* - All expanded props, move into expandable
|
|
54
|
+
*/
|
|
29
55
|
function _isSlot(s) {
|
|
30
56
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
31
57
|
}
|
|
32
|
-
|
|
58
|
+
var DEFAULT_PREFIX = "vc-table";
|
|
33
59
|
var EMPTY_DATA = [];
|
|
34
60
|
var EMPTY_SCROLL_TARGET = {};
|
|
35
61
|
function defaultEmpty() {
|
|
@@ -102,13 +128,15 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
|
|
|
102
128
|
const targetRef = scrollBodyRef.value;
|
|
103
129
|
const targetElement = getDOM(targetRef);
|
|
104
130
|
if (targetElement instanceof HTMLElement) {
|
|
105
|
-
const { index, top, key, offset } = config || {};
|
|
131
|
+
const { index, top, key, offset, align = "nearest" } = config || {};
|
|
106
132
|
if (validNumberValue(top)) targetElement.scrollTo({ top });
|
|
107
133
|
else {
|
|
108
134
|
const mergedKey = key ?? getRowKey.value(mergedData.value[index]);
|
|
109
135
|
const rowElement = targetElement.querySelector(`[data-row-key="${mergedKey}"]`);
|
|
110
|
-
if (rowElement)
|
|
111
|
-
|
|
136
|
+
if (rowElement) {
|
|
137
|
+
rowElement.scrollIntoView({ block: align });
|
|
138
|
+
if (offset) targetElement.scrollTo({ top: targetElement.scrollTop + offset });
|
|
139
|
+
}
|
|
112
140
|
}
|
|
113
141
|
} else if (targetRef?.scrollTo) targetRef.scrollTo(config);
|
|
114
142
|
}
|
|
@@ -335,14 +363,14 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
|
|
|
335
363
|
let _slot, _slot2;
|
|
336
364
|
slotChildren.value = slots.default?.();
|
|
337
365
|
const renderFixedHeaderTable = (fixedHolderPassProps) => {
|
|
338
|
-
return createVNode(Fragment, null, [createVNode(
|
|
366
|
+
return createVNode(Fragment, null, [createVNode(Header, fixedHolderPassProps, null), fixFooter.value === "top" && createVNode(Footer, fixedHolderPassProps, { default: () => [summaryNode.value] })]);
|
|
339
367
|
};
|
|
340
|
-
const renderFixedFooterTable = (fixedHolderPassProps) => createVNode(
|
|
341
|
-
const bodyTableNode = createVNode(
|
|
368
|
+
const renderFixedFooterTable = (fixedHolderPassProps) => createVNode(Footer, fixedHolderPassProps, { default: () => [summaryNode.value] });
|
|
369
|
+
const bodyTableNode = createVNode(Body, {
|
|
342
370
|
"data": mergedData.value,
|
|
343
371
|
"measureColumnWidth": fixHeader.value || horizonScroll.value || stickyConfig.value.isSticky
|
|
344
372
|
}, null);
|
|
345
|
-
const bodyColGroupNode = createVNode(
|
|
373
|
+
const bodyColGroupNode = createVNode(ColGroup, {
|
|
346
374
|
"colWidths": flattenColumns.value.map(({ width }) => width),
|
|
347
375
|
"columns": flattenColumns.value
|
|
348
376
|
}, null);
|
|
@@ -372,7 +400,7 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
|
|
|
372
400
|
captionElement,
|
|
373
401
|
bodyColGroupNode,
|
|
374
402
|
bodyTableNode,
|
|
375
|
-
!fixFooter.value && summaryNode.value && createVNode(
|
|
403
|
+
!fixFooter.value && summaryNode.value && createVNode(Footer, {
|
|
376
404
|
"stickyOffsets": mergedStickyOffsets.value,
|
|
377
405
|
"flattenColumns": flattenColumns.value
|
|
378
406
|
}, { default: () => [summaryNode.value] })
|
|
@@ -391,20 +419,20 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
|
|
|
391
419
|
onScroll: onInternalScroll
|
|
392
420
|
};
|
|
393
421
|
groupTableNode = createVNode(Fragment, null, [
|
|
394
|
-
props.showHeader !== false && createVNode(
|
|
422
|
+
props.showHeader !== false && createVNode(FixedHolder, mergeProps(fixedHolderProps, {
|
|
395
423
|
"stickyTopOffset": stickyConfig.value.offsetHeader,
|
|
396
424
|
"className": `${mergedPrefixCls.value}-header`,
|
|
397
425
|
"ref": scrollHeaderRef,
|
|
398
426
|
"colGroup": bodyColGroupNode
|
|
399
427
|
}), { default: renderFixedHeaderTable }),
|
|
400
428
|
bodyContent,
|
|
401
|
-
fixFooter.value && fixFooter.value !== "top" && createVNode(
|
|
429
|
+
fixFooter.value && fixFooter.value !== "top" && createVNode(FixedHolder, mergeProps(fixedHolderProps, {
|
|
402
430
|
"stickyBottomOffset": stickyConfig.value.offsetSummary,
|
|
403
431
|
"className": `${mergedPrefixCls.value}-summary`,
|
|
404
432
|
"ref": scrollSummaryRef,
|
|
405
433
|
"colGroup": bodyColGroupNode
|
|
406
434
|
}), { default: renderFixedFooterTable }),
|
|
407
|
-
stickyConfig.value.isSticky && scrollBodyRef.value?.nodeType === 1 && createVNode(
|
|
435
|
+
stickyConfig.value.isSticky && scrollBodyRef.value?.nodeType === 1 && createVNode(StickyScrollBar, {
|
|
408
436
|
"ref": stickyRef,
|
|
409
437
|
"offsetScroll": stickyConfig.value.offsetScroll,
|
|
410
438
|
"scrollBodyRef": scrollBodyRef,
|
|
@@ -430,12 +458,12 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
|
|
|
430
458
|
} }, ariaProps), { default: () => [
|
|
431
459
|
captionElement,
|
|
432
460
|
bodyColGroupNode,
|
|
433
|
-
props.showHeader !== false && createVNode(
|
|
461
|
+
props.showHeader !== false && createVNode(Header, mergeProps(headerProps.value, {
|
|
434
462
|
"columns": columns.value,
|
|
435
463
|
"flattenColumns": flattenColumns.value
|
|
436
464
|
}), null),
|
|
437
465
|
bodyTableNode,
|
|
438
|
-
!fixFooter.value && summaryNode.value && createVNode(
|
|
466
|
+
!fixFooter.value && summaryNode.value && createVNode(Footer, {
|
|
439
467
|
"stickyOffsets": mergedStickyOffsets.value,
|
|
440
468
|
"flattenColumns": flattenColumns.value
|
|
441
469
|
}, { default: () => [summaryNode.value] })
|
|
@@ -461,7 +489,7 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
|
|
|
461
489
|
"id": props.id,
|
|
462
490
|
"ref": fullTableRef
|
|
463
491
|
}, dataProps), [
|
|
464
|
-
props.title && createVNode(
|
|
492
|
+
props.title && createVNode(Panel, {
|
|
465
493
|
"className": clsx(`${mergedPrefixCls.value}-title`, props.classNames?.title),
|
|
466
494
|
"style": props.styles?.title
|
|
467
495
|
}, _isSlot(_slot = props.title(mergedData.value)) ? _slot : { default: () => [_slot] }),
|
|
@@ -470,7 +498,7 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
|
|
|
470
498
|
"class": clsx(`${mergedPrefixCls.value}-container`, props.classNames?.section),
|
|
471
499
|
"style": props.styles?.section
|
|
472
500
|
}, [groupTableNode]),
|
|
473
|
-
props.footer && createVNode(
|
|
501
|
+
props.footer && createVNode(Panel, {
|
|
474
502
|
"className": clsx(`${mergedPrefixCls.value}-footer`, props.classNames?.footer),
|
|
475
503
|
"style": props.styles?.footer
|
|
476
504
|
}, _isSlot(_slot2 = props.footer(mergedData.value)) ? _slot2 : { default: () => [_slot2] })
|
|
@@ -722,8 +750,8 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
|
|
|
722
750
|
}, defaults) });
|
|
723
751
|
ImmutableTable.EXPAND_COLUMN = EXPAND_COLUMN;
|
|
724
752
|
ImmutableTable.INTERNAL_HOOKS = INTERNAL_HOOKS;
|
|
725
|
-
ImmutableTable.Column =
|
|
726
|
-
ImmutableTable.ColumnGroup =
|
|
753
|
+
ImmutableTable.Column = Column;
|
|
754
|
+
ImmutableTable.ColumnGroup = ColumnGroup;
|
|
727
755
|
ImmutableTable.Summary = FooterComponents;
|
|
728
|
-
|
|
729
|
-
export { DEFAULT_PREFIX,
|
|
756
|
+
//#endregion
|
|
757
|
+
export { DEFAULT_PREFIX, ImmutableTable as default };
|