bkui-vue 0.0.1-beta.21 → 0.0.1-beta.22
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/bkui-vue.cjs.js +117 -31
- package/dist/bkui-vue.esm.js +117 -31
- package/dist/bkui-vue.umd.js +117 -31
- package/dist/style.css +17 -1
- package/lib/table/index.d.ts +24 -1
- package/lib/table/index.js +1 -1
- package/lib/table/props.d.ts +8 -0
- package/lib/table/render.d.ts +2 -0
- package/lib/table/table.css +8 -1
- package/lib/table/table.d.ts +11 -0
- package/lib/table/table.less +10 -1
- package/lib/table/table.variable.css +8 -1
- package/lib/tree/index.d.ts +39 -10
- package/lib/tree/index.js +1 -1
- package/lib/tree/props.d.ts +8 -0
- package/lib/tree/tree.css +9 -0
- package/lib/tree/tree.d.ts +22 -5
- package/lib/tree/tree.less +11 -0
- package/lib/tree/tree.variable.css +9 -0
- package/lib/tree/util.d.ts +11 -6
- package/package.json +1 -1
package/dist/bkui-vue.umd.js
CHANGED
@@ -6004,7 +6004,8 @@ ${$(r2)}`), n2;
|
|
6004
6004
|
showHead: PropTypes.bool.def(true),
|
6005
6005
|
virtualEnabled: PropTypes.bool.def(false),
|
6006
6006
|
border: PropTypes.arrayOf(PropTypes.commonType(BORDER_OPRIONS, "border")).def(["row"]),
|
6007
|
-
pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false)
|
6007
|
+
pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false),
|
6008
|
+
remotePagination: PropTypes.bool.def(false)
|
6008
6009
|
}, EventProps$1);
|
6009
6010
|
const resolvePropVal = (prop, key, args) => {
|
6010
6011
|
if (Object.prototype.hasOwnProperty.call(prop, key)) {
|
@@ -6127,7 +6128,13 @@ ${$(r2)}`), n2;
|
|
6127
6128
|
const resolvePaginationOption = (propPagination, defVal) => {
|
6128
6129
|
if (!!propPagination) {
|
6129
6130
|
if (typeof propPagination === "object") {
|
6130
|
-
|
6131
|
+
let current = Object.prototype.hasOwnProperty.call(propPagination, "current") ? propPagination.current : propPagination.value;
|
6132
|
+
if (!/\d+/.test(current)) {
|
6133
|
+
current = 1;
|
6134
|
+
}
|
6135
|
+
return __spreadProps(__spreadValues(__spreadValues({}, defVal), propPagination), {
|
6136
|
+
current
|
6137
|
+
});
|
6131
6138
|
}
|
6132
6139
|
return defVal;
|
6133
6140
|
}
|
@@ -6607,7 +6614,24 @@ ${$(r2)}`), n2;
|
|
6607
6614
|
}, [this.renderColGroup(), this.renderTBody(rows)]);
|
6608
6615
|
}
|
6609
6616
|
renderTableFooter(options) {
|
6610
|
-
return vue.createVNode(BkPagination, options,
|
6617
|
+
return vue.createVNode(BkPagination, vue.mergeProps(options, {
|
6618
|
+
"modelValue": options.current,
|
6619
|
+
"onLimitChange": (limit) => this.handlePageLimitChange(limit),
|
6620
|
+
"onChange": (current) => this.hanlePageChange(current)
|
6621
|
+
}), null);
|
6622
|
+
}
|
6623
|
+
handlePageLimitChange(limit) {
|
6624
|
+
Object.assign(this.props.pagination, {
|
6625
|
+
limit
|
6626
|
+
});
|
6627
|
+
this.context.emit("page-limit-change", limit);
|
6628
|
+
}
|
6629
|
+
hanlePageChange(current) {
|
6630
|
+
Object.assign(this.props.pagination, {
|
6631
|
+
current,
|
6632
|
+
value: current
|
6633
|
+
});
|
6634
|
+
this.context.emit("page-value-change", current);
|
6611
6635
|
}
|
6612
6636
|
setColumnActive(index, single = false) {
|
6613
6637
|
const col = this.propActiveCols.find((item) => item.index === index);
|
@@ -6947,11 +6971,24 @@ ${$(r2)}`), n2;
|
|
6947
6971
|
const colgroups = vue.reactive(props.columns.map((col) => __spreadProps(__spreadValues({}, col), {
|
6948
6972
|
calcWidth: null
|
6949
6973
|
})));
|
6974
|
+
const startIndex = vue.ref(0);
|
6975
|
+
const endIndex = vue.ref(0);
|
6950
6976
|
let pagination2 = vue.reactive({
|
6951
6977
|
count: 0,
|
6952
6978
|
limit: 10,
|
6953
6979
|
current: 1
|
6954
6980
|
});
|
6981
|
+
pagination2 = resolvePaginationOption(props.pagination, pagination2);
|
6982
|
+
const resetStartEndIndex = () => {
|
6983
|
+
if (!props.pagination || props.remotePagination) {
|
6984
|
+
startIndex.value = 0;
|
6985
|
+
endIndex.value = props.data.length;
|
6986
|
+
return;
|
6987
|
+
}
|
6988
|
+
startIndex.value = (pagination2.current - 1) * pagination2.limit;
|
6989
|
+
endIndex.value = pagination2.current * pagination2.limit;
|
6990
|
+
};
|
6991
|
+
resetStartEndIndex();
|
6955
6992
|
let observerIns = null;
|
6956
6993
|
const root = vue.ref();
|
6957
6994
|
const getActiveColumns = () => (props.columns || []).map((_column, index) => ({
|
@@ -6963,21 +7000,6 @@ ${$(r2)}`), n2;
|
|
6963
7000
|
activeColumns: getActiveColumns(),
|
6964
7001
|
scrollTranslateY: 0
|
6965
7002
|
});
|
6966
|
-
const wrapperStyle = vue.computed(() => ({
|
6967
|
-
minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
|
6968
|
-
}));
|
6969
|
-
const contentStyle = vue.computed(() => {
|
6970
|
-
const resolveHeight = resolveNumberOrStringToPix(props.height);
|
6971
|
-
const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
|
6972
|
-
const isAutoHeight = !isPercentPixOrNumber(props.height);
|
6973
|
-
return __spreadValues({
|
6974
|
-
display: "block"
|
6975
|
-
}, isAutoHeight ? {
|
6976
|
-
maxHeight: `calc(${resolveHeight} - ${resolveHeadHeight} - 2px)`
|
6977
|
-
} : {
|
6978
|
-
height: `calc(${resolveHeight} - ${resolveHeadHeight} - 2px)`
|
6979
|
-
});
|
6980
|
-
});
|
6981
7003
|
vue.watch(() => [props.activeColumn, props.columns, props.pagination], () => {
|
6982
7004
|
vue.nextTick(() => {
|
6983
7005
|
reactiveProp.activeColumns = getActiveColumns();
|
@@ -6988,11 +7010,38 @@ ${$(r2)}`), n2;
|
|
6988
7010
|
});
|
6989
7011
|
});
|
6990
7012
|
pagination2 = resolvePaginationOption(props.pagination, pagination2);
|
7013
|
+
resetStartEndIndex();
|
6991
7014
|
});
|
6992
7015
|
}, {
|
6993
7016
|
deep: true
|
6994
7017
|
});
|
6995
7018
|
const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
|
7019
|
+
const wrapperStyle = vue.computed(() => ({
|
7020
|
+
minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
|
7021
|
+
}));
|
7022
|
+
const pageData = vue.computed(() => props.data.slice(startIndex.value, endIndex.value));
|
7023
|
+
const localPagination = vue.computed(() => {
|
7024
|
+
if (!props.pagination) {
|
7025
|
+
return null;
|
7026
|
+
}
|
7027
|
+
return props.remotePagination ? pagination2 : __spreadProps(__spreadValues({}, pagination2), {
|
7028
|
+
count: props.data.length
|
7029
|
+
});
|
7030
|
+
});
|
7031
|
+
const contentStyle = vue.computed(() => {
|
7032
|
+
const resolveHeight = resolveNumberOrStringToPix(props.height);
|
7033
|
+
const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
|
7034
|
+
const isAutoHeight = !isPercentPixOrNumber(props.height);
|
7035
|
+
const resolveFooterHeight = props.pagination ? 40 : 0;
|
7036
|
+
const contentHeight = `calc(${resolveHeight} - ${resolveHeadHeight} - ${resolveFooterHeight}px - 2px)`;
|
7037
|
+
return __spreadValues({
|
7038
|
+
display: "block"
|
7039
|
+
}, isAutoHeight ? {
|
7040
|
+
maxHeight: contentHeight
|
7041
|
+
} : {
|
7042
|
+
height: contentHeight
|
7043
|
+
});
|
7044
|
+
});
|
6996
7045
|
const tableClass = vue.computed(() => classes({
|
6997
7046
|
[resolveClassName("table")]: true
|
6998
7047
|
}, resolvePropBorderToClassStr(props.border)));
|
@@ -7030,9 +7079,9 @@ ${$(r2)}`), n2;
|
|
7030
7079
|
"class": headClass
|
7031
7080
|
}, [props.showHead && tableRender.renderTableHeadSchema()]), vue.createVNode(BkVirtualRender, {
|
7032
7081
|
"lineHeight": props.rowHeight,
|
7033
|
-
"
|
7082
|
+
"class": contentClass,
|
7034
7083
|
"style": contentStyle.value,
|
7035
|
-
"list":
|
7084
|
+
"list": pageData.value,
|
7036
7085
|
"onContentScroll": handleScrollChanged,
|
7037
7086
|
"throttleDelay": 0,
|
7038
7087
|
"enabled": props.virtualEnabled
|
@@ -7043,7 +7092,7 @@ ${$(r2)}`), n2;
|
|
7043
7092
|
}, null)
|
7044
7093
|
}), vue.createVNode("div", {
|
7045
7094
|
"class": footerClass
|
7046
|
-
}, [props.pagination && tableRender.renderTableFooter(
|
7095
|
+
}, [props.pagination && tableRender.renderTableFooter(localPagination.value)])]);
|
7047
7096
|
}
|
7048
7097
|
});
|
7049
7098
|
const BkTable = withInstall(Component$4);
|
@@ -12752,6 +12801,7 @@ ${$(r2)}`), n2;
|
|
12752
12801
|
__isRoot: parent === null,
|
12753
12802
|
__order: order2,
|
12754
12803
|
__isOpen: isOpen,
|
12804
|
+
__checked: false,
|
12755
12805
|
[children]: null
|
12756
12806
|
};
|
12757
12807
|
Object.assign(item, { __uuid: uuid2 });
|
@@ -12810,15 +12860,14 @@ ${$(r2)}`), n2;
|
|
12810
12860
|
"--level-line": levelLine,
|
12811
12861
|
"--lineHeight": `${props.lineHeight}px`,
|
12812
12862
|
"--indent": `${props.indent}px`,
|
12813
|
-
|
12863
|
+
"--offset-left": `${props.offsetLeft}px`
|
12814
12864
|
};
|
12815
12865
|
};
|
12816
12866
|
const getNodeItemStyle = (item, props, flatData = {}) => {
|
12817
12867
|
const { schema } = flatData;
|
12818
12868
|
const depth = getNodeAttr(schema, item.__uuid, "__depth");
|
12819
12869
|
return __spreadValues({
|
12820
|
-
"--depth": depth
|
12821
|
-
paddingLeft: 0
|
12870
|
+
"--depth": depth
|
12822
12871
|
}, typeof props.levelLine === "function" ? {
|
12823
12872
|
"--level-line": getPropsOneOfBoolValueWithDefault(props, "levelLine", item, DEFAULT_LEVLE_LINE, null, [
|
12824
12873
|
"node"
|
@@ -12835,6 +12884,13 @@ ${$(r2)}`), n2;
|
|
12835
12884
|
"level-line": props.levelLine
|
12836
12885
|
};
|
12837
12886
|
};
|
12887
|
+
const getNodeRowClass = (item, schema) => {
|
12888
|
+
const { __checked } = getSchemaVal(schema, item.__uuid) || {};
|
12889
|
+
return {
|
12890
|
+
"is-checked": __checked,
|
12891
|
+
"bk-node-row": true
|
12892
|
+
};
|
12893
|
+
};
|
12838
12894
|
const updateTreeNode = (path, treeData, childKey, nodekey, nodeValue) => {
|
12839
12895
|
assignTreeNode(path, treeData, childKey, { [nodekey]: nodeValue });
|
12840
12896
|
};
|
@@ -12866,20 +12922,21 @@ ${$(r2)}`), n2;
|
|
12866
12922
|
async: PropTypes.shape({
|
12867
12923
|
callback: PropTypes.func.def(null),
|
12868
12924
|
cache: PropTypes.bool.def(true)
|
12869
|
-
})
|
12925
|
+
}),
|
12926
|
+
offsetLeft: PropTypes.number.def(15)
|
12870
12927
|
};
|
12871
12928
|
var Component = vue.defineComponent({
|
12872
12929
|
name: "Tree",
|
12873
12930
|
props: treeProps,
|
12874
|
-
setup(props) {
|
12931
|
+
setup(props, ctx) {
|
12875
12932
|
const formatData = getFlatdata(props);
|
12933
|
+
const checkedNodes = [];
|
12876
12934
|
const flatData = vue.reactive({
|
12877
12935
|
data: formatData[0],
|
12878
12936
|
schema: formatData[1],
|
12879
12937
|
levelLineSchema: {}
|
12880
12938
|
});
|
12881
12939
|
vue.watch(() => [props.data], (newData) => {
|
12882
|
-
console.log("props.data changed");
|
12883
12940
|
const formatData2 = getFlatdata(props, newData, schemaValues.value);
|
12884
12941
|
flatData.data = formatData2[0];
|
12885
12942
|
flatData.schema = formatData2[1];
|
@@ -12920,6 +12977,9 @@ ${$(r2)}`), n2;
|
|
12920
12977
|
return val;
|
12921
12978
|
}
|
12922
12979
|
if (typeof val === "object" && val !== null) {
|
12980
|
+
if (val.__v_isVNode) {
|
12981
|
+
return val;
|
12982
|
+
}
|
12923
12983
|
const {
|
12924
12984
|
node,
|
12925
12985
|
className,
|
@@ -12957,7 +13017,7 @@ ${$(r2)}`), n2;
|
|
12957
13017
|
}
|
12958
13018
|
}
|
12959
13019
|
if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
|
12960
|
-
return isRootNode(item) ? getRootIcon(item) : vue.createVNode(textFile, {
|
13020
|
+
return isRootNode(item) || hasChildNode(item) ? getRootIcon(item) : vue.createVNode(textFile, {
|
12961
13021
|
"class": "bk-tree-icon"
|
12962
13022
|
}, null);
|
12963
13023
|
}
|
@@ -13004,6 +13064,23 @@ ${$(r2)}`), n2;
|
|
13004
13064
|
setNodeOpened(item);
|
13005
13065
|
}
|
13006
13066
|
};
|
13067
|
+
const handleNodeActionClick = (node) => {
|
13068
|
+
hanldeTreeNodeClick(node);
|
13069
|
+
};
|
13070
|
+
const handleNodeContentClick = (item) => {
|
13071
|
+
if (!checkedNodes.includes(item.__uuid)) {
|
13072
|
+
checkedNodes.forEach((__uuid) => setNodeAttr({
|
13073
|
+
__uuid
|
13074
|
+
}, "__checked", false));
|
13075
|
+
checkedNodes.length = 0;
|
13076
|
+
setNodeAttr(item, "__checked", true);
|
13077
|
+
checkedNodes.push(item.__uuid);
|
13078
|
+
if (!isNodeOpened(item)) {
|
13079
|
+
hanldeTreeNodeClick(item);
|
13080
|
+
}
|
13081
|
+
ctx.emit("check", item, getSchemaVal2(item.__uuid));
|
13082
|
+
}
|
13083
|
+
};
|
13007
13084
|
const checkNodeIsOpen = (node) => isRootNode(node) || isItemOpen(node) || isItemOpen(getNodeAttr2(node, "__parentId"));
|
13008
13085
|
const filterNextNode = (depth, node) => {
|
13009
13086
|
if (isRootNode(node)) {
|
@@ -13038,6 +13115,8 @@ ${$(r2)}`), n2;
|
|
13038
13115
|
renderData,
|
13039
13116
|
flatData,
|
13040
13117
|
hanldeTreeNodeClick,
|
13118
|
+
handleNodeContentClick,
|
13119
|
+
handleNodeActionClick,
|
13041
13120
|
getActionIcon,
|
13042
13121
|
getRootIcon,
|
13043
13122
|
getVirtualLines,
|
@@ -13048,10 +13127,17 @@ ${$(r2)}`), n2;
|
|
13048
13127
|
render() {
|
13049
13128
|
const props = this.$props;
|
13050
13129
|
const renderTreeNode = (item) => vue.createVNode("div", {
|
13130
|
+
"class": getNodeRowClass(item, this.flatData.schema)
|
13131
|
+
}, [vue.createVNode("div", {
|
13051
13132
|
"class": getNodeItemClass(item, this.flatData.schema, props),
|
13052
|
-
"style": getNodeItemStyle(item, props, this.flatData)
|
13053
|
-
|
13054
|
-
|
13133
|
+
"style": getNodeItemStyle(item, props, this.flatData)
|
13134
|
+
}, [vue.createVNode("span", {
|
13135
|
+
"class": "node-action",
|
13136
|
+
"onClick": () => this.handleNodeActionClick(item)
|
13137
|
+
}, [this.getActionIcon(item)]), vue.createVNode("span", {
|
13138
|
+
"class": "node-content",
|
13139
|
+
"onClick": () => this.handleNodeContentClick(item)
|
13140
|
+
}, [[this.getNodePrefixIcon(item), this.getLoadingIcon(item)], vue.createVNode("span", null, [getLabel(item, props)])]), this.getVirtualLines(item)])]);
|
13055
13141
|
return vue.createVNode(BkVirtualRender, {
|
13056
13142
|
"class": "bk-tree",
|
13057
13143
|
"style": getTreeStyle(null, props),
|
package/dist/style.css
CHANGED
@@ -2537,10 +2537,14 @@ optgroup {
|
|
2537
2537
|
}
|
2538
2538
|
}
|
2539
2539
|
.bk-table {
|
2540
|
-
overflow:
|
2540
|
+
overflow: hidden;
|
2541
|
+
height: 100%;
|
2541
2542
|
border-top: 1px solid #dcdee5;
|
2542
2543
|
border-bottom: 1px solid #dcdee5;
|
2543
2544
|
}
|
2545
|
+
.bk-table .bk-table-body {
|
2546
|
+
overflow: auto;
|
2547
|
+
}
|
2544
2548
|
.bk-table .bk-table-head,
|
2545
2549
|
.bk-table .bk-table-body {
|
2546
2550
|
background: white;
|
@@ -2587,6 +2591,9 @@ optgroup {
|
|
2587
2591
|
.bk-table .bk-table-body table tbody tr:hover td {
|
2588
2592
|
background: #f5f7fa;
|
2589
2593
|
}
|
2594
|
+
.bk-table .bk-table-footer {
|
2595
|
+
line-height: 40px;
|
2596
|
+
}
|
2590
2597
|
.bk-table.bordered-row .cell {
|
2591
2598
|
border-bottom: 1px solid #dcdee5;
|
2592
2599
|
}
|
@@ -3139,6 +3146,12 @@ optgroup {
|
|
3139
3146
|
display: inline-block;
|
3140
3147
|
padding-left: 23px;
|
3141
3148
|
}
|
3149
|
+
.bk-tree .bk-node-row {
|
3150
|
+
padding-left: calc(var(--offset-left));
|
3151
|
+
}
|
3152
|
+
.bk-tree .bk-node-row.is-checked {
|
3153
|
+
background-color: #EBF2FF;
|
3154
|
+
}
|
3142
3155
|
.bk-tree .bk-tree-node {
|
3143
3156
|
position: relative;
|
3144
3157
|
height: var(--lineHeight);
|
@@ -3172,6 +3185,9 @@ optgroup {
|
|
3172
3185
|
.bk-tree .bk-tree-node .bk-tree-icon {
|
3173
3186
|
margin: 0 6px 0 4px;
|
3174
3187
|
}
|
3188
|
+
.bk-tree .bk-tree-node .node-content {
|
3189
|
+
display: inline-block;
|
3190
|
+
}
|
3175
3191
|
.bk-slider {
|
3176
3192
|
display: flex;
|
3177
3193
|
flex-direction: row;
|
package/lib/table/index.d.ts
CHANGED
@@ -15,6 +15,7 @@ declare const BkTable: {
|
|
15
15
|
pagination: boolean | {
|
16
16
|
[key: string]: any;
|
17
17
|
};
|
18
|
+
remotePagination: boolean;
|
18
19
|
}> & Omit<Readonly<import("vue").ExtractPropTypes<{
|
19
20
|
onRowClick: FunctionConstructor;
|
20
21
|
data: import("vue-types").VueTypeDef<any[]> & {
|
@@ -59,7 +60,12 @@ declare const BkTable: {
|
|
59
60
|
[key: string]: any;
|
60
61
|
});
|
61
62
|
};
|
62
|
-
|
63
|
+
remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
|
64
|
+
default: boolean;
|
65
|
+
} & {
|
66
|
+
default: boolean;
|
67
|
+
};
|
68
|
+
}>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "height" | "minHeight" | "border" | "headHeight" | "columnPick" | "rowHeight" | "showHead" | "virtualEnabled" | "pagination" | "remotePagination">;
|
63
69
|
$attrs: {
|
64
70
|
[x: string]: unknown;
|
65
71
|
};
|
@@ -117,6 +123,11 @@ declare const BkTable: {
|
|
117
123
|
[key: string]: any;
|
118
124
|
});
|
119
125
|
};
|
126
|
+
remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
|
127
|
+
default: boolean;
|
128
|
+
} & {
|
129
|
+
default: boolean;
|
130
|
+
};
|
120
131
|
}>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {
|
121
132
|
data: any[];
|
122
133
|
height: string | number;
|
@@ -130,6 +141,7 @@ declare const BkTable: {
|
|
130
141
|
pagination: boolean | {
|
131
142
|
[key: string]: any;
|
132
143
|
};
|
144
|
+
remotePagination: boolean;
|
133
145
|
}> & {
|
134
146
|
beforeCreate?: (() => void) | (() => void)[];
|
135
147
|
created?: (() => void) | (() => void)[];
|
@@ -194,6 +206,11 @@ declare const BkTable: {
|
|
194
206
|
[key: string]: any;
|
195
207
|
});
|
196
208
|
};
|
209
|
+
remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
|
210
|
+
default: boolean;
|
211
|
+
} & {
|
212
|
+
default: boolean;
|
213
|
+
};
|
197
214
|
}>> & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
|
198
215
|
__isFragment?: never;
|
199
216
|
__isTeleport?: never;
|
@@ -242,6 +259,11 @@ declare const BkTable: {
|
|
242
259
|
[key: string]: any;
|
243
260
|
});
|
244
261
|
};
|
262
|
+
remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
|
263
|
+
default: boolean;
|
264
|
+
} & {
|
265
|
+
default: boolean;
|
266
|
+
};
|
245
267
|
}>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {
|
246
268
|
data: any[];
|
247
269
|
height: string | number;
|
@@ -255,5 +277,6 @@ declare const BkTable: {
|
|
255
277
|
pagination: boolean | {
|
256
278
|
[key: string]: any;
|
257
279
|
};
|
280
|
+
remotePagination: boolean;
|
258
281
|
}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
|
259
282
|
export default BkTable;
|
package/lib/table/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../pagination"),require("../virtual-render")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../pagination","../virtual-render"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e.Pagination,e["@bkui-vue/virtual-render"])}(this,(function(e,t,r,o,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(o),s=i(n);function c(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var u={exports:{}};!function(e){e.exports=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},e.exports.__esModule=!0,e.exports.default=e.exports}(u);var l=c(u.exports),p=["none","row","col","outer"],d={onRowClick:Function},f=Object.assign({data:r.PropTypes.arrayOf(r.PropTypes.any).def([]),columns:r.PropTypes.arrayOf(r.PropTypes.shape({label:r.PropTypes.oneOfType([r.PropTypes.func.def((function(){return""})),r.PropTypes.string.def("")]),field:r.PropTypes.oneOfType([r.PropTypes.func.def((function(){return""})),r.PropTypes.string.def("")]),render:r.PropTypes.oneOfType([r.PropTypes.func.def((function(){return""})),r.PropTypes.string.def("")]),width:r.PropTypes.oneOfType([r.PropTypes.number.def(void 0),r.PropTypes.string.def("auto")])})),activeColumn:r.PropTypes.oneOfType([r.PropTypes.number.def(-1),r.PropTypes.arrayOf(r.PropTypes.number.def(-1))]),columnPick:r.PropTypes.commonType(["multi","single","disabled"],"columnPick").def("disabled"),height:r.PropTypes.oneOfType([r.PropTypes.number,r.PropTypes.string]).def("auto"),minHeight:r.PropTypes.oneOfType([r.PropTypes.number,r.PropTypes.string]).def("auto"),rowHeight:r.PropTypes.oneOfType([r.PropTypes.number,r.PropTypes.func]).def(40),headHeight:r.PropTypes.number.def(40),showHead:r.PropTypes.bool.def(!0),virtualEnabled:r.PropTypes.bool.def(!1),border:r.PropTypes.arrayOf(r.PropTypes.commonType(p,"border")).def(["row"]),pagination:r.PropTypes.oneOfType([r.PropTypes.bool.def(!1),r.PropTypes.object.def({})]).def(!1)},d),y={exports:{}};!function(e){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e.exports.__esModule=!0,e.exports.default=e.exports}(y);var v=c(y.exports),h={exports:{}};!function(e){function t(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}e.exports=function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),Object.defineProperty(e,"prototype",{writable:!1}),e},e.exports.__esModule=!0,e.exports.default=e.exports}(h);var m=c(h.exports),b={exports:{}};!function(e){function t(r){return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=!0,e.exports.default=e.exports,t(r)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}(b);var x=c(b.exports),g={exports:{}},T={exports:{}},P={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o},e.exports.__esModule=!0,e.exports.default=e.exports}(P),function(e){var t=P.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(T);var C={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(C);var w={exports:{}};!function(e){var t=P.exports;e.exports=function(e,r){if(e){if("string"==typeof e)return t(e,r);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,r):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}(w);var O={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(O),function(e){var t=T.exports,r=C.exports,o=w.exports,n=O.exports;e.exports=function(e){return t(e)||r(e)||o(e)||n()},e.exports.__esModule=!0,e.exports.default=e.exports}(g);var k=c(g.exports),_=void 0,N=function(e,t,r){var o;if(Object.prototype.hasOwnProperty.call(e,t))return"function"==typeof e[t]?(o=e[t]).call.apply(o,[_].concat(k(r))):e[t]},j=function(e){return"disabled"!==e.columnPick?"multi"===e.columnPick?Array.isArray(e.activeColumn)?e.activeColumn:A(e.activeColumn):Array.isArray(e.activeColumn)?A(e.activeColumn[0]):A(e.activeColumn):[]},A=function(e){return/^\d+$/.test("".concat(e))?[parseInt("".concat(e),10)]:[]},H=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"100%",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,o="";return o=/^auto|null|undefined$/gi.test("".concat(e))?t:/^\d+\.?\d+$/.test("".concat(e))?"".concat(e,"px"):e,r&&(o="calc(".concat(o," - ").concat(r,")")),o},V=m((function e(t,r){v(this,e),this.props=null,this.ctx=null,this.props=t,this.ctx=r})),S=function(){function e(t,r,o,n){v(this,e),this.props=t,this.context=r,this.reactiveProp=o,this.colgroups=n,this.plugins=new V(t,r)}return m(e,[{key:"propActiveCols",get:function(){return this.reactiveProp.activeColumns}},{key:"renderTableHeadSchema",value:function(){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderHeader()])}},{key:"renderTableBodySchema",value:function(e){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderTBody(e)])}},{key:"renderTableFooter",value:function(e){return t.createVNode(a.default,e,null)}},{key:"setColumnActive",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=this.propActiveCols.find((function(t){return t.index===e}));Object.assign(r,{active:!r.active}),t&&this.propActiveCols.filter((function(t){return t.index!==e&&t.active})).forEach((function(e){Object.assign(e,{active:!1})}))}},{key:"handleColumnHeadClick",value:function(e){"disabled"!==this.props.columnPick&&(this.setColumnActive(e,"single"===this.props.columnPick),this.context.emit("column-pick",this.propActiveCols))}},{key:"renderHeader",value:function(){var e=this,o={"--row-height":"".concat(N(this.props,"headHeight",["thead"]),"px")};return t.createVNode("thead",{style:o},[t.createVNode("tr",null,[this.props.columns.map((function(o,n){return t.createVNode("th",{colspan:1,rowspan:1,class:r.classes({active:e.isColActive(n)}),onClick:function(){return e.handleColumnHeadClick(n)}},[t.createVNode("div",{class:"cell"},[N(o,"label",[o])])])}))])])}},{key:"renderTBody",value:function(e){var r=this;return t.createVNode("tbody",null,[e.map((function(o,n){var i={"--row-height":"".concat(N(r.props,"rowHeight",["tbody",o,n]),"px")};return t.createVNode("tr",{style:i,onClick:function(t){return r.handleRowClick(t,o,n,e)}},[r.props.columns.map((function(i){return t.createVNode("td",{colspan:1,rowspan:1},[t.createVNode("div",{class:"cell"},[r.renderCell(o,i,n,e)])])}))])}))])}},{key:"handleRowClick",value:function(e,t,r,o){this.context.emit("row-click",e,t,r,o,this)}},{key:"renderCell",value:function(e,t,r,o){var n=e[N(t,"field",[t,e])];return"function"==typeof t.render?t.render(n,e,r,o):n}},{key:"isColActive",value:function(e){return"disabled"!==this.props.columnPick&&this.propActiveCols.some((function(t){return t.index===e&&t.active}))}},{key:"renderColGroup",value:function(){var e=this;return t.createVNode("colgroup",null,[(this.colgroups||[]).map((function(o,n){var i,a=r.classes({active:e.isColActive(n)}),s={width:(i=o.calcWidth,H(i,"auto"))};return t.createVNode("col",{class:a,style:s},null)}))])}}]),e}(),M=t.defineComponent({name:"Table",props:f,setup:function(e,o){var n=t.reactive(j(e)),i=t.reactive(e.columns.map((function(e){return Object.assign(Object.assign({},e),{calcWidth:null})}))),a=t.reactive({count:0,limit:10,current:1}),c=null,u=t.ref(),d=function(){return(e.columns||[]).map((function(e,t){return{index:t,active:n.some((function(e){return e===t})),_column:e}}))},f=t.reactive({activeColumns:d(),scrollTranslateY:0}),y=t.computed((function(){return{minHeight:H(e.minHeight,"auto")}})),v=t.computed((function(){var t,r=H(e.height),o=e.showHead?H(e.headHeight):"0",n=(t=e.height,!/^\d+\.?\d*(px|%)?$/.test("".concat(t)));return Object.assign({display:"block"},n?{maxHeight:"calc(".concat(r," - ").concat(o," - 2px)")}:{height:"calc(".concat(r," - ").concat(o," - 2px)")})}));t.watch((function(){return[e.activeColumn,e.columns,e.pagination]}),(function(){t.nextTick((function(){f.activeColumns=d();var t,r,o=j(e);f.activeColumns.forEach((function(e,t){Object.assign(e,{active:o.some((function(e){return e===t}))})})),t=e.pagination,r=a,a=t?"object"===x(t)?Object.assign(Object.assign({},t),r):r:{}}))}),{deep:!0});var h=new S(e,o,f,i),m=t.computed((function(){return r.classes(l({},r.resolveClassName("table"),!0),(t=e.border,o=["row"],"string"==typeof t&&o.push(t),Array.isArray(t)&&o.push.apply(o,k(t.filter((function(e){return p.includes(e)})))),k(new Set(o)).map((function(e){return"bordered-".concat(e)})).join(" ")));var t,o})),b=r.classes(l({},r.resolveClassName("table-head"),!0)),g=r.classes(l({},r.resolveClassName("table-body"),!0)),T=r.classes(l({},r.resolveClassName("table-footer"),!0)),P=function(e){var t=e[1];f.scrollTranslateY=t.translateY};return t.onMounted((function(){c=function(e,t){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:60,n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=r.throttle((function(){"function"==typeof t&&t()}),o),a=new ResizeObserver((function(){i()}));return n&&"function"==typeof t&&t(),{start:function(){a.observe(e)},stop:function(){a.disconnect(),a.unobserve(e)}}}(u.value,(function(){!function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:20,o=(e.getBoundingClientRect()||{}).width,n=[],i=function(e,t){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];Object.assign(e,{calcWidth:t}),r&&(o-=t)<0&&(o=0)};if(t.forEach((function(e,t){var a=String(e.width),s=!0;if(/^\d+\.?\d*(px)?$/.test(a)){var c=Number(a.replace("px",""));i(e,c),s=!1}if(/^\d+\.?\d*%$/.test(a)){var u=r;if(o>0){var l=Number(a.replace("%",""));u=o*l/100}i(e,u),s=!1}s&&n.push(t)})),n.length>0){var a=r;o>0&&(a=o/n.length,n.forEach((function(e){return i(t[e],a,!1)})))}}(u.value,i,20)}),60,!0),c.start()})),t.onBeforeUnmount((function(){c.stop(),c=null})),o.expose({plugins:h.plugins}),function(){return t.createVNode("div",{class:m.value,style:y.value,ref:u},[t.createVNode("div",{class:b},[e.showHead&&h.renderTableHeadSchema()]),t.createVNode(s.default,{lineHeight:e.rowHeight,contentClassName:g,style:v.value,list:e.data,onContentScroll:P,throttleDelay:0,enabled:e.virtualEnabled},{default:function(t){return h.renderTableBodySchema(t.data||e.data)},afterContent:function(){return t.createVNode("div",{class:r.resolveClassName("table-fixed")},null)}}),t.createVNode("div",{class:T},[e.pagination&&h.renderTableFooter(a)])])}}}),E=r.withInstall(M);e.default=E,Object.defineProperty(e,"__esModule",{value:!0})}));
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../pagination"),require("../virtual-render")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../pagination","../virtual-render"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e.Pagination,e["@bkui-vue/virtual-render"])}(this,(function(e,t,n,r,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(r),s=a(o);function u(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var c={exports:{}};!function(e){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},e.exports.__esModule=!0,e.exports.default=e.exports}(c);var l=u(c.exports),p=["none","row","col","outer"],f={onRowClick:Function},d=Object.assign({data:n.PropTypes.arrayOf(n.PropTypes.any).def([]),columns:n.PropTypes.arrayOf(n.PropTypes.shape({label:n.PropTypes.oneOfType([n.PropTypes.func.def((function(){return""})),n.PropTypes.string.def("")]),field:n.PropTypes.oneOfType([n.PropTypes.func.def((function(){return""})),n.PropTypes.string.def("")]),render:n.PropTypes.oneOfType([n.PropTypes.func.def((function(){return""})),n.PropTypes.string.def("")]),width:n.PropTypes.oneOfType([n.PropTypes.number.def(void 0),n.PropTypes.string.def("auto")])})),activeColumn:n.PropTypes.oneOfType([n.PropTypes.number.def(-1),n.PropTypes.arrayOf(n.PropTypes.number.def(-1))]),columnPick:n.PropTypes.commonType(["multi","single","disabled"],"columnPick").def("disabled"),height:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string]).def("auto"),minHeight:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string]).def("auto"),rowHeight:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.func]).def(40),headHeight:n.PropTypes.number.def(40),showHead:n.PropTypes.bool.def(!0),virtualEnabled:n.PropTypes.bool.def(!1),border:n.PropTypes.arrayOf(n.PropTypes.commonType(p,"border")).def(["row"]),pagination:n.PropTypes.oneOfType([n.PropTypes.bool.def(!1),n.PropTypes.object.def({})]).def(!1),remotePagination:n.PropTypes.bool.def(!1)},f),v={exports:{}};!function(e){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e.exports.__esModule=!0,e.exports.default=e.exports}(v);var y=u(v.exports),h={exports:{}};!function(e){function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e},e.exports.__esModule=!0,e.exports.default=e.exports}(h);var m=u(h.exports),g={exports:{}};!function(e){function t(n){return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=!0,e.exports.default=e.exports,t(n)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}(g);var b=u(g.exports),x={exports:{}},T={exports:{}},P={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r},e.exports.__esModule=!0,e.exports.default=e.exports}(P),function(e){var t=P.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(T);var C={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(C);var O={exports:{}};!function(e){var t=P.exports;e.exports=function(e,n){if(e){if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}(O);var w={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(w),function(e){var t=T.exports,n=C.exports,r=O.exports,o=w.exports;e.exports=function(e){return t(e)||n(e)||r(e)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(x);var k=u(x.exports),j=void 0,_=function(e,t,n){var r;if(Object.prototype.hasOwnProperty.call(e,t))return"function"==typeof e[t]?(r=e[t]).call.apply(r,[j].concat(k(n))):e[t]},N=function(e){return"disabled"!==e.columnPick?"multi"===e.columnPick?Array.isArray(e.activeColumn)?e.activeColumn:A(e.activeColumn):Array.isArray(e.activeColumn)?A(e.activeColumn[0]):A(e.activeColumn):[]},A=function(e){return/^\d+$/.test("".concat(e))?[parseInt("".concat(e),10)]:[]},V=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"100%",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r="";return r=/^auto|null|undefined$/gi.test("".concat(e))?t:/^\d+\.?\d+$/.test("".concat(e))?"".concat(e,"px"):e,n&&(r="calc(".concat(r," - ").concat(n,")")),r},H=function(e,t){if(e){if("object"===b(e)){var n=Object.prototype.hasOwnProperty.call(e,"current")?e.current:e.value;return/\d+/.test(n)||(n=1),Object.assign(Object.assign(Object.assign({},t),e),{current:n})}return t}return{}},S=m((function e(t,n){y(this,e),this.props=null,this.ctx=null,this.props=t,this.ctx=n})),M=function(){function e(t,n,r,o){y(this,e),this.props=t,this.context=n,this.reactiveProp=r,this.colgroups=o,this.plugins=new S(t,n)}return m(e,[{key:"propActiveCols",get:function(){return this.reactiveProp.activeColumns}},{key:"renderTableHeadSchema",value:function(){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderHeader()])}},{key:"renderTableBodySchema",value:function(e){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderTBody(e)])}},{key:"renderTableFooter",value:function(e){var n=this;return t.createVNode(i.default,t.mergeProps(e,{modelValue:e.current,onLimitChange:function(e){return n.handlePageLimitChange(e)},onChange:function(e){return n.hanlePageChange(e)}}),null)}},{key:"handlePageLimitChange",value:function(e){Object.assign(this.props.pagination,{limit:e}),this.context.emit("page-limit-change",e)}},{key:"hanlePageChange",value:function(e){Object.assign(this.props.pagination,{current:e,value:e}),this.context.emit("page-value-change",e)}},{key:"setColumnActive",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=this.propActiveCols.find((function(t){return t.index===e}));Object.assign(n,{active:!n.active}),t&&this.propActiveCols.filter((function(t){return t.index!==e&&t.active})).forEach((function(e){Object.assign(e,{active:!1})}))}},{key:"handleColumnHeadClick",value:function(e){"disabled"!==this.props.columnPick&&(this.setColumnActive(e,"single"===this.props.columnPick),this.context.emit("column-pick",this.propActiveCols))}},{key:"renderHeader",value:function(){var e=this,r={"--row-height":"".concat(_(this.props,"headHeight",["thead"]),"px")};return t.createVNode("thead",{style:r},[t.createVNode("tr",null,[this.props.columns.map((function(r,o){return t.createVNode("th",{colspan:1,rowspan:1,class:n.classes({active:e.isColActive(o)}),onClick:function(){return e.handleColumnHeadClick(o)}},[t.createVNode("div",{class:"cell"},[_(r,"label",[r])])])}))])])}},{key:"renderTBody",value:function(e){var n=this;return t.createVNode("tbody",null,[e.map((function(r,o){var a={"--row-height":"".concat(_(n.props,"rowHeight",["tbody",r,o]),"px")};return t.createVNode("tr",{style:a,onClick:function(t){return n.handleRowClick(t,r,o,e)}},[n.props.columns.map((function(a){return t.createVNode("td",{colspan:1,rowspan:1},[t.createVNode("div",{class:"cell"},[n.renderCell(r,a,o,e)])])}))])}))])}},{key:"handleRowClick",value:function(e,t,n,r){this.context.emit("row-click",e,t,n,r,this)}},{key:"renderCell",value:function(e,t,n,r){var o=e[_(t,"field",[t,e])];return"function"==typeof t.render?t.render(o,e,n,r):o}},{key:"isColActive",value:function(e){return"disabled"!==this.props.columnPick&&this.propActiveCols.some((function(t){return t.index===e&&t.active}))}},{key:"renderColGroup",value:function(){var e=this;return t.createVNode("colgroup",null,[(this.colgroups||[]).map((function(r,o){var a,i=n.classes({active:e.isColActive(o)}),s={width:(a=r.calcWidth,V(a,"auto"))};return t.createVNode("col",{class:i,style:s},null)}))])}}]),e}(),E=t.defineComponent({name:"Table",props:d,setup:function(e,r){var o=t.reactive(N(e)),a=t.reactive(e.columns.map((function(e){return Object.assign(Object.assign({},e),{calcWidth:null})}))),i=t.ref(0),u=t.ref(0),c=t.reactive({count:0,limit:10,current:1});c=H(e.pagination,c);var f=function(){if(!e.pagination||e.remotePagination)return i.value=0,void(u.value=e.data.length);i.value=(c.current-1)*c.limit,u.value=c.current*c.limit};f();var d=null,v=t.ref(),y=function(){return(e.columns||[]).map((function(e,t){return{index:t,active:o.some((function(e){return e===t})),_column:e}}))},h=t.reactive({activeColumns:y(),scrollTranslateY:0});t.watch((function(){return[e.activeColumn,e.columns,e.pagination]}),(function(){t.nextTick((function(){h.activeColumns=y();var t=N(e);h.activeColumns.forEach((function(e,n){Object.assign(e,{active:t.some((function(e){return e===n}))})})),c=H(e.pagination,c),f()}))}),{deep:!0});var m=new M(e,r,h,a),g=t.computed((function(){return{minHeight:V(e.minHeight,"auto")}})),b=t.computed((function(){return e.data.slice(i.value,u.value)})),x=t.computed((function(){return e.pagination?e.remotePagination?c:Object.assign(Object.assign({},c),{count:e.data.length}):null})),T=t.computed((function(){var t,n=V(e.height),r=e.showHead?V(e.headHeight):"0",o=(t=e.height,!/^\d+\.?\d*(px|%)?$/.test("".concat(t))),a=e.pagination?40:0,i="calc(".concat(n," - ").concat(r," - ").concat(a,"px - 2px)");return Object.assign({display:"block"},o?{maxHeight:i}:{height:i})})),P=t.computed((function(){return n.classes(l({},n.resolveClassName("table"),!0),(t=e.border,r=["row"],"string"==typeof t&&r.push(t),Array.isArray(t)&&r.push.apply(r,k(t.filter((function(e){return p.includes(e)})))),k(new Set(r)).map((function(e){return"bordered-".concat(e)})).join(" ")));var t,r})),C=n.classes(l({},n.resolveClassName("table-head"),!0)),O=n.classes(l({},n.resolveClassName("table-body"),!0)),w=n.classes(l({},n.resolveClassName("table-footer"),!0)),j=function(e){var t=e[1];h.scrollTranslateY=t.translateY};return t.onMounted((function(){d=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:60,o=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=n.throttle((function(){"function"==typeof t&&t()}),r),i=new ResizeObserver((function(){a()}));return o&&"function"==typeof t&&t(),{start:function(){i.observe(e)},stop:function(){i.disconnect(),i.unobserve(e)}}}(v.value,(function(){!function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:20,r=(e.getBoundingClientRect()||{}).width,o=[],a=function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];Object.assign(e,{calcWidth:t}),n&&(r-=t)<0&&(r=0)};if(t.forEach((function(e,t){var i=String(e.width),s=!0;if(/^\d+\.?\d*(px)?$/.test(i)){var u=Number(i.replace("px",""));a(e,u),s=!1}if(/^\d+\.?\d*%$/.test(i)){var c=n;if(r>0){var l=Number(i.replace("%",""));c=r*l/100}a(e,c),s=!1}s&&o.push(t)})),o.length>0){var i=n;r>0&&(i=r/o.length,o.forEach((function(e){return a(t[e],i,!1)})))}}(v.value,a,20)}),60,!0),d.start()})),t.onBeforeUnmount((function(){d.stop(),d=null})),r.expose({plugins:m.plugins}),function(){return t.createVNode("div",{class:P.value,style:g.value,ref:v},[t.createVNode("div",{class:C},[e.showHead&&m.renderTableHeadSchema()]),t.createVNode(s.default,{lineHeight:e.rowHeight,class:O,style:T.value,list:b.value,onContentScroll:j,throttleDelay:0,enabled:e.virtualEnabled},{default:function(t){return m.renderTableBodySchema(t.data||e.data)},afterContent:function(){return t.createVNode("div",{class:n.resolveClassName("table-fixed")},null)}}),t.createVNode("div",{class:w},[e.pagination&&m.renderTableFooter(x.value)])])}}}),$=n.withInstall(E);e.default=$,Object.defineProperty(e,"__esModule",{value:!0})}));
|
package/lib/table/props.d.ts
CHANGED
@@ -89,6 +89,14 @@ export declare const tableProps: {
|
|
89
89
|
[key: string]: any;
|
90
90
|
});
|
91
91
|
};
|
92
|
+
/**
|
93
|
+
* 是否启用远程分页
|
94
|
+
*/
|
95
|
+
remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
|
96
|
+
default: boolean;
|
97
|
+
} & {
|
98
|
+
default: boolean;
|
99
|
+
};
|
92
100
|
};
|
93
101
|
export declare type Column = {
|
94
102
|
label: Function | string;
|
package/lib/table/render.d.ts
CHANGED
package/lib/table/table.css
CHANGED
@@ -1,8 +1,12 @@
|
|
1
1
|
.bk-table {
|
2
|
-
overflow:
|
2
|
+
overflow: hidden;
|
3
|
+
height: 100%;
|
3
4
|
border-top: 1px solid #dcdee5;
|
4
5
|
border-bottom: 1px solid #dcdee5;
|
5
6
|
}
|
7
|
+
.bk-table .bk-table-body {
|
8
|
+
overflow: auto;
|
9
|
+
}
|
6
10
|
.bk-table .bk-table-head,
|
7
11
|
.bk-table .bk-table-body {
|
8
12
|
background: white;
|
@@ -49,6 +53,9 @@
|
|
49
53
|
.bk-table .bk-table-body table tbody tr:hover td {
|
50
54
|
background: #f5f7fa;
|
51
55
|
}
|
56
|
+
.bk-table .bk-table-footer {
|
57
|
+
line-height: 40px;
|
58
|
+
}
|
52
59
|
.bk-table.bordered-row .cell {
|
53
60
|
border-bottom: 1px solid #dcdee5;
|
54
61
|
}
|
package/lib/table/table.d.ts
CHANGED
@@ -43,6 +43,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
43
43
|
[key: string]: any;
|
44
44
|
});
|
45
45
|
};
|
46
|
+
remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
|
47
|
+
default: boolean;
|
48
|
+
} & {
|
49
|
+
default: boolean;
|
50
|
+
};
|
46
51
|
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
47
52
|
onRowClick: FunctionConstructor;
|
48
53
|
data: import("vue-types").VueTypeDef<any[]> & {
|
@@ -87,6 +92,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
87
92
|
[key: string]: any;
|
88
93
|
});
|
89
94
|
};
|
95
|
+
remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
|
96
|
+
default: boolean;
|
97
|
+
} & {
|
98
|
+
default: boolean;
|
99
|
+
};
|
90
100
|
}>>, {
|
91
101
|
data: any[];
|
92
102
|
height: string | number;
|
@@ -100,5 +110,6 @@ declare const _default: import("vue").DefineComponent<{
|
|
100
110
|
pagination: boolean | {
|
101
111
|
[key: string]: any;
|
102
112
|
};
|
113
|
+
remotePagination: boolean;
|
103
114
|
}>;
|
104
115
|
export default _default;
|
package/lib/table/table.less
CHANGED
@@ -1,9 +1,14 @@
|
|
1
1
|
@import '../styles/themes/themes.less';
|
2
2
|
|
3
3
|
.@{bk-prefix}-table {
|
4
|
-
overflow:
|
4
|
+
overflow: hidden;
|
5
|
+
height: 100%;
|
5
6
|
border-top: 1px solid @table-border-color;
|
6
7
|
border-bottom: 1px solid @table-border-color;
|
8
|
+
.@{bk-prefix}-table-body {
|
9
|
+
overflow: auto;
|
10
|
+
}
|
11
|
+
|
7
12
|
.@{bk-prefix}-table-head,
|
8
13
|
.@{bk-prefix}-table-body {
|
9
14
|
background: @table-bg-color;
|
@@ -55,6 +60,10 @@
|
|
55
60
|
}
|
56
61
|
}
|
57
62
|
|
63
|
+
.@{bk-prefix}-table-footer {
|
64
|
+
line-height: 40px;
|
65
|
+
}
|
66
|
+
|
58
67
|
&.bordered-row {
|
59
68
|
.cell {
|
60
69
|
border-bottom: 1px solid @table-border-color;
|
@@ -92,10 +92,14 @@
|
|
92
92
|
--table-row-hover-bg-color: #f5f7fa;
|
93
93
|
}
|
94
94
|
.bk-table {
|
95
|
-
overflow:
|
95
|
+
overflow: hidden;
|
96
|
+
height: 100%;
|
96
97
|
border-top: 1px solid var(--table-border-color);
|
97
98
|
border-bottom: 1px solid var(--table-border-color);
|
98
99
|
}
|
100
|
+
.bk-table .bk-table-body {
|
101
|
+
overflow: auto;
|
102
|
+
}
|
99
103
|
.bk-table .bk-table-head,
|
100
104
|
.bk-table .bk-table-body {
|
101
105
|
background: var(--table-bg-color);
|
@@ -142,6 +146,9 @@
|
|
142
146
|
.bk-table .bk-table-body table tbody tr:hover td {
|
143
147
|
background: var(--table-row-hover-bg-color);
|
144
148
|
}
|
149
|
+
.bk-table .bk-table-footer {
|
150
|
+
line-height: 40px;
|
151
|
+
}
|
145
152
|
.bk-table.bordered-row .cell {
|
146
153
|
border-bottom: 1px solid var(--table-border-color);
|
147
154
|
}
|