yc-pro-components 0.0.42 → 0.0.44
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/es/component.mjs +2 -0
- package/es/components/check-card/index.d.ts +61 -61
- package/es/components/check-card/src/index.vue.d.ts +4 -4
- package/es/components/check-card-group/index.d.ts +43 -43
- package/es/components/check-card-group/src/index.vue.d.ts +3 -3
- package/es/components/date-picker/index.d.ts +20 -20
- package/es/components/date-picker/src/index.vue.d.ts +12 -12
- package/es/components/dialog/index.d.ts +26 -26
- package/es/components/dialog/src/index.vue.d.ts +2 -2
- package/es/components/dialog-form/index.d.ts +31 -31
- package/es/components/dialog-form/src/index.vue.d.ts +9 -9
- package/es/components/display-item/index.d.ts +41 -41
- package/es/components/display-item/src/index.vue.d.ts +22 -22
- package/es/components/drawer-form/index.d.ts +65 -65
- package/es/components/drawer-form/src/index.vue.d.ts +15 -15
- package/es/components/form/index.d.ts +45 -45
- package/es/components/form/src/form-content.vue.d.ts +20 -20
- package/es/components/form/src/index.vue.d.ts +17 -17
- package/es/components/form-item/index.d.ts +48 -48
- package/es/components/form-item/src/index.vue.d.ts +14 -14
- package/es/components/header/index.d.ts +19 -19
- package/es/components/header/src/index.vue.d.ts +1 -1
- package/es/components/index.d.ts +1 -0
- package/es/components/index.mjs +4 -0
- package/es/components/input-tag/index.d.ts +15 -15
- package/es/components/input-tag/src/index.vue.d.ts +3 -3
- package/es/components/layout/index.d.ts +50 -50
- package/es/components/layout/src/index.vue.d.ts +11 -11
- package/es/components/page/index.d.ts +4166 -2538
- package/es/components/page/src/index.vue.d.ts +712 -137
- package/es/components/page/src/index.vue2.mjs +120 -31
- package/es/components/pagination/index.d.ts +42 -42
- package/es/components/pagination/src/index.vue.d.ts +3 -3
- package/es/components/radio/index.d.ts +35 -35
- package/es/components/radio/src/index.vue.d.ts +27 -27
- package/es/components/render/index.d.ts +3 -3
- package/es/components/render/src/index.vue.d.ts +1 -1
- package/es/components/search/index.d.ts +154 -154
- package/es/components/search/src/index.vue.d.ts +50 -50
- package/es/components/sidebar/index.d.ts +15 -15
- package/es/components/sidebar/src/index.vue.d.ts +5 -5
- package/es/components/steps-form/index.d.ts +23 -23
- package/es/components/steps-form/src/index.vue.d.ts +2 -2
- package/es/components/table/src/table-column.vue.d.ts +37 -37
- package/es/components/utils/index.d.ts +2 -2
- package/es/components/virtual-table/index.d.ts +646 -0
- package/es/components/virtual-table/index.mjs +8 -0
- package/es/components/virtual-table/src/index.vue.d.ts +139 -0
- package/es/components/virtual-table/src/index.vue.mjs +6 -0
- package/es/components/virtual-table/src/index.vue2.mjs +327 -0
- package/es/components/virtual-table/src/type.d.ts +295 -0
- package/es/components/virtual-table/src/type.mjs +1 -0
- package/es/components/virtual-table/src/use-column-adapter.d.ts +40 -0
- package/es/components/virtual-table/src/use-column-adapter.mjs +137 -0
- package/es/components/virtual-table/src/use-virtual-scroll.d.ts +35 -0
- package/es/components/virtual-table/src/use-virtual-scroll.mjs +71 -0
- package/es/components/virtual-table/src/use-virtual-selection.d.ts +40 -0
- package/es/components/virtual-table/src/use-virtual-selection.mjs +112 -0
- package/es/components/virtual-table/src/virtual-table-action-bar.d.ts +11 -0
- package/es/components/virtual-table/src/virtual-table-action-bar.mjs +121 -0
- package/es/components/virtual-table/src/virtual-table-cell-renderer.d.ts +16 -0
- package/es/components/virtual-table/src/virtual-table-cell-renderer.mjs +170 -0
- package/es/components/virtual-table/src/virtual-table-header-renderer.d.ts +10 -0
- package/es/components/virtual-table/src/virtual-table-header-renderer.mjs +51 -0
- package/es/components/virtual-table/style/css.d.ts +3 -0
- package/es/components/virtual-table/style/css.mjs +1 -0
- package/es/components/virtual-table/style/index.d.ts +12 -0
- package/es/components/virtual-table/style/index.mjs +1 -0
- package/es/components/yc-dialog/index.d.ts +24 -24
- package/es/components/yc-download-dialog/index.d.ts +19 -19
- package/es/components/yc-download-dialog/src/index.vue.d.ts +1 -1
- package/es/components/yc-form-container-header/index.d.ts +12 -12
- package/es/components/yc-more-actions/index.d.ts +46 -46
- package/es/components/yc-more-actions/src/index.vue.d.ts +3 -3
- package/es/components/yc-plus-page/src/index.vue.d.ts +2445 -1430
- package/es/components/yc-plus-page/src/index.vue.mjs +1 -1
- package/es/components/yc-plus-page/src/type.d.ts +8 -2
- package/es/components/yc-segmented/index.d.ts +2 -2
- package/es/components/yc-segmented/src/index.d.ts +2 -2
- package/es/components/yc-select-v2/src/index.vue.d.ts +3 -3
- package/es/components/yc-status-dialog/src/index.vue.d.ts +1 -1
- package/es/components/yc-tabs-with-filter/index.d.ts +16 -16
- package/es/components/yc-text/src/index.vue.d.ts +2 -2
- package/es/hooks/usePlusFormReset.d.ts +238 -238
- package/es/index.css +20 -1
- package/es/index.d.ts +1 -0
- package/es/index.mjs +4 -0
- package/es/yc-components/index.d.ts +1 -0
- package/index.css +111 -6
- package/index.js +1141 -149
- package/index.min.css +2 -1
- package/index.min.js +13 -10
- package/index.min.mjs +13 -10
- package/index.mjs +1139 -151
- package/lib/component.js +42 -40
- package/lib/components/check-card/index.d.ts +61 -61
- package/lib/components/check-card/src/index.vue.d.ts +4 -4
- package/lib/components/check-card-group/index.d.ts +43 -43
- package/lib/components/check-card-group/src/index.vue.d.ts +3 -3
- package/lib/components/date-picker/index.d.ts +20 -20
- package/lib/components/date-picker/src/index.vue.d.ts +12 -12
- package/lib/components/dialog/index.d.ts +26 -26
- package/lib/components/dialog/src/index.vue.d.ts +2 -2
- package/lib/components/dialog-form/index.d.ts +31 -31
- package/lib/components/dialog-form/src/index.vue.d.ts +9 -9
- package/lib/components/display-item/index.d.ts +41 -41
- package/lib/components/display-item/src/index.vue.d.ts +22 -22
- package/lib/components/drawer-form/index.d.ts +65 -65
- package/lib/components/drawer-form/src/index.vue.d.ts +15 -15
- package/lib/components/form/index.d.ts +45 -45
- package/lib/components/form/src/form-content.vue.d.ts +20 -20
- package/lib/components/form/src/index.vue.d.ts +17 -17
- package/lib/components/form-item/index.d.ts +48 -48
- package/lib/components/form-item/src/index.vue.d.ts +14 -14
- package/lib/components/header/index.d.ts +19 -19
- package/lib/components/header/src/index.vue.d.ts +1 -1
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.js +98 -90
- package/lib/components/input-tag/index.d.ts +15 -15
- package/lib/components/input-tag/src/index.vue.d.ts +3 -3
- package/lib/components/layout/index.d.ts +50 -50
- package/lib/components/layout/src/index.vue.d.ts +11 -11
- package/lib/components/page/index.d.ts +4166 -2538
- package/lib/components/page/src/index.vue.d.ts +712 -137
- package/lib/components/page/src/index.vue2.js +125 -36
- package/lib/components/pagination/index.d.ts +42 -42
- package/lib/components/pagination/src/index.vue.d.ts +3 -3
- package/lib/components/radio/index.d.ts +35 -35
- package/lib/components/radio/src/index.vue.d.ts +27 -27
- package/lib/components/render/index.d.ts +3 -3
- package/lib/components/render/src/index.vue.d.ts +1 -1
- package/lib/components/search/index.d.ts +154 -154
- package/lib/components/search/src/index.vue.d.ts +50 -50
- package/lib/components/sidebar/index.d.ts +15 -15
- package/lib/components/sidebar/src/index.vue.d.ts +5 -5
- package/lib/components/steps-form/index.d.ts +23 -23
- package/lib/components/steps-form/src/index.vue.d.ts +2 -2
- package/lib/components/table/src/table-column.vue.d.ts +37 -37
- package/lib/components/utils/index.d.ts +2 -2
- package/lib/components/virtual-table/index.d.ts +646 -0
- package/lib/components/virtual-table/index.js +13 -0
- package/lib/components/virtual-table/src/index.vue.d.ts +139 -0
- package/lib/components/virtual-table/src/index.vue.js +10 -0
- package/lib/components/virtual-table/src/index.vue2.js +331 -0
- package/lib/components/virtual-table/src/type.d.ts +295 -0
- package/lib/components/virtual-table/src/type.js +2 -0
- package/lib/components/virtual-table/src/use-column-adapter.d.ts +40 -0
- package/lib/components/virtual-table/src/use-column-adapter.js +139 -0
- package/lib/components/virtual-table/src/use-virtual-scroll.d.ts +35 -0
- package/lib/components/virtual-table/src/use-virtual-scroll.js +73 -0
- package/lib/components/virtual-table/src/use-virtual-selection.d.ts +40 -0
- package/lib/components/virtual-table/src/use-virtual-selection.js +114 -0
- package/lib/components/virtual-table/src/virtual-table-action-bar.d.ts +11 -0
- package/lib/components/virtual-table/src/virtual-table-action-bar.js +123 -0
- package/lib/components/virtual-table/src/virtual-table-cell-renderer.d.ts +16 -0
- package/lib/components/virtual-table/src/virtual-table-cell-renderer.js +172 -0
- package/lib/components/virtual-table/src/virtual-table-header-renderer.d.ts +10 -0
- package/lib/components/virtual-table/src/virtual-table-header-renderer.js +53 -0
- package/lib/components/virtual-table/style/css.d.ts +3 -0
- package/lib/components/virtual-table/style/css.js +2 -0
- package/lib/components/virtual-table/style/index.d.ts +12 -0
- package/lib/components/virtual-table/style/index.js +2 -0
- package/lib/components/yc-dialog/index.d.ts +24 -24
- package/lib/components/yc-download-dialog/index.d.ts +19 -19
- package/lib/components/yc-download-dialog/src/index.vue.d.ts +1 -1
- package/lib/components/yc-form-container-header/index.d.ts +12 -12
- package/lib/components/yc-more-actions/index.d.ts +46 -46
- package/lib/components/yc-more-actions/src/index.vue.d.ts +3 -3
- package/lib/components/yc-plus-page/src/index.vue.d.ts +2445 -1430
- package/lib/components/yc-plus-page/src/index.vue.js +1 -1
- package/lib/components/yc-plus-page/src/type.d.ts +8 -2
- package/lib/components/yc-segmented/index.d.ts +2 -2
- package/lib/components/yc-segmented/src/index.d.ts +2 -2
- package/lib/components/yc-select-v2/src/index.vue.d.ts +3 -3
- package/lib/components/yc-status-dialog/src/index.vue.d.ts +1 -1
- package/lib/components/yc-tabs-with-filter/index.d.ts +16 -16
- package/lib/components/yc-text/src/index.vue.d.ts +2 -2
- package/lib/hooks/usePlusFormReset.d.ts +238 -238
- package/lib/index.css +20 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +143 -135
- package/lib/yc-components/index.d.ts +1 -0
- package/locale/en.js +1 -1
- package/locale/en.min.js +1 -1
- package/locale/en.min.mjs +1 -1
- package/locale/en.mjs +1 -1
- package/locale/ja.js +1 -1
- package/locale/ja.min.js +1 -1
- package/locale/ja.min.mjs +1 -1
- package/locale/ja.mjs +1 -1
- package/locale/ko.js +1 -1
- package/locale/ko.min.js +1 -1
- package/locale/ko.min.mjs +1 -1
- package/locale/ko.mjs +1 -1
- package/locale/zh-cn.js +1 -1
- package/locale/zh-cn.min.js +1 -1
- package/locale/zh-cn.min.mjs +1 -1
- package/locale/zh-cn.mjs +1 -1
- package/locale/zh-tw.js +1 -1
- package/locale/zh-tw.min.js +1 -1
- package/locale/zh-tw.min.mjs +1 -1
- package/locale/zh-tw.mjs +1 -1
- package/package.json +1 -1
- package/theme-chalk/index.css +1 -1
- package/theme-chalk/plus-virtual-table.css +1 -0
- package/theme-chalk/src/index.scss +3 -0
- package/theme-chalk/src/virtual-table.scss +128 -0
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { ref, computed, watch, h } from 'vue';
|
|
2
|
+
import { ElCheckbox } from 'element-plus';
|
|
3
|
+
|
|
4
|
+
function useVirtualSelection(options) {
|
|
5
|
+
const selectedKeys = ref(/* @__PURE__ */ new Set());
|
|
6
|
+
const getRowKey = (row) => {
|
|
7
|
+
const key = options.rowKey();
|
|
8
|
+
return row[key];
|
|
9
|
+
};
|
|
10
|
+
const dataLength = computed(() => options.data().length);
|
|
11
|
+
const isAllSelected = computed(() => {
|
|
12
|
+
if (dataLength.value === 0) return false;
|
|
13
|
+
return selectedKeys.value.size === dataLength.value;
|
|
14
|
+
});
|
|
15
|
+
const isIndeterminate = computed(() => {
|
|
16
|
+
const size = selectedKeys.value.size;
|
|
17
|
+
return size > 0 && size < dataLength.value;
|
|
18
|
+
});
|
|
19
|
+
const getSelectionRows = () => {
|
|
20
|
+
const data = options.data();
|
|
21
|
+
const keys = selectedKeys.value;
|
|
22
|
+
if (keys.size === 0) return [];
|
|
23
|
+
return data.filter((row) => keys.has(getRowKey(row)));
|
|
24
|
+
};
|
|
25
|
+
const clearSelection = () => {
|
|
26
|
+
var _a;
|
|
27
|
+
selectedKeys.value = /* @__PURE__ */ new Set();
|
|
28
|
+
(_a = options.onSelectionChange) == null ? void 0 : _a.call(options, []);
|
|
29
|
+
};
|
|
30
|
+
const toggleRowSelection = (row, selected) => {
|
|
31
|
+
var _a, _b;
|
|
32
|
+
const key = getRowKey(row);
|
|
33
|
+
const newSet = new Set(selectedKeys.value);
|
|
34
|
+
const shouldSelect = selected != null ? selected : !newSet.has(key);
|
|
35
|
+
if (shouldSelect) {
|
|
36
|
+
newSet.add(key);
|
|
37
|
+
} else {
|
|
38
|
+
newSet.delete(key);
|
|
39
|
+
}
|
|
40
|
+
selectedKeys.value = newSet;
|
|
41
|
+
const selection = getSelectionRows();
|
|
42
|
+
(_a = options.onSelect) == null ? void 0 : _a.call(options, selection, row);
|
|
43
|
+
(_b = options.onSelectionChange) == null ? void 0 : _b.call(options, selection);
|
|
44
|
+
};
|
|
45
|
+
const toggleAllSelection = (selected) => {
|
|
46
|
+
var _a, _b;
|
|
47
|
+
const shouldSelectAll = selected != null ? selected : !isAllSelected.value;
|
|
48
|
+
if (shouldSelectAll) {
|
|
49
|
+
const data = options.data();
|
|
50
|
+
selectedKeys.value = new Set(data.map((row) => getRowKey(row)));
|
|
51
|
+
} else {
|
|
52
|
+
selectedKeys.value = /* @__PURE__ */ new Set();
|
|
53
|
+
}
|
|
54
|
+
const selection = getSelectionRows();
|
|
55
|
+
(_a = options.onSelectAll) == null ? void 0 : _a.call(options, selection);
|
|
56
|
+
(_b = options.onSelectionChange) == null ? void 0 : _b.call(options, selection);
|
|
57
|
+
};
|
|
58
|
+
watch(
|
|
59
|
+
() => options.data(),
|
|
60
|
+
(newData) => {
|
|
61
|
+
var _a;
|
|
62
|
+
if (selectedKeys.value.size === 0) return;
|
|
63
|
+
const currentKeys = new Set(newData.map((row) => getRowKey(row)));
|
|
64
|
+
const filtered = /* @__PURE__ */ new Set();
|
|
65
|
+
for (const key of selectedKeys.value) {
|
|
66
|
+
if (currentKeys.has(key)) {
|
|
67
|
+
filtered.add(key);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
if (filtered.size !== selectedKeys.value.size) {
|
|
71
|
+
selectedKeys.value = filtered;
|
|
72
|
+
(_a = options.onSelectionChange) == null ? void 0 : _a.call(options, getSelectionRows());
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
const selectionCellRenderer = (params) => {
|
|
77
|
+
const row = params.rowData;
|
|
78
|
+
const key = getRowKey(row);
|
|
79
|
+
const checked = selectedKeys.value.has(key);
|
|
80
|
+
return h(ElCheckbox, {
|
|
81
|
+
modelValue: checked,
|
|
82
|
+
onChange: (value) => {
|
|
83
|
+
toggleRowSelection(row, !!value);
|
|
84
|
+
},
|
|
85
|
+
onClick: (e) => {
|
|
86
|
+
e.stopPropagation();
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
};
|
|
90
|
+
const selectionHeaderRenderer = (_params) => {
|
|
91
|
+
return h(ElCheckbox, {
|
|
92
|
+
modelValue: isAllSelected.value,
|
|
93
|
+
indeterminate: isIndeterminate.value,
|
|
94
|
+
onChange: (value) => {
|
|
95
|
+
toggleAllSelection(!!value);
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
};
|
|
99
|
+
return {
|
|
100
|
+
selectedKeys,
|
|
101
|
+
isAllSelected,
|
|
102
|
+
isIndeterminate,
|
|
103
|
+
getSelectionRows,
|
|
104
|
+
clearSelection,
|
|
105
|
+
toggleRowSelection,
|
|
106
|
+
toggleAllSelection,
|
|
107
|
+
selectionCellRenderer,
|
|
108
|
+
selectionHeaderRenderer
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export { useVirtualSelection };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { VirtualTableColumn } from './type';
|
|
2
|
+
import { ActionBarProps, ButtonsCallBackParams } from 'yc-pro-components/es/components/table';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 创建操作栏列配置
|
|
6
|
+
*
|
|
7
|
+
* @param actionBar - 操作栏配置
|
|
8
|
+
* @param onClickAction - 按钮点击回调(冒泡到父组件)
|
|
9
|
+
* @returns VirtualTableColumn 配置
|
|
10
|
+
*/
|
|
11
|
+
export declare function createActionBarColumn(actionBar: Partial<ActionBarProps>, onClickAction?: (params: ButtonsCallBackParams) => void): VirtualTableColumn;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { unref, h } from 'vue';
|
|
2
|
+
import { TableV2FixedDir, ElDropdown, ElButton, ElDropdownMenu, ElDropdownItem } from 'element-plus';
|
|
3
|
+
|
|
4
|
+
function resolveButtonText(button, row, index) {
|
|
5
|
+
var _a, _b;
|
|
6
|
+
const {
|
|
7
|
+
text
|
|
8
|
+
} = button;
|
|
9
|
+
if (typeof text === "function") {
|
|
10
|
+
return String((_a = unref(text(row, index, button))) != null ? _a : "");
|
|
11
|
+
}
|
|
12
|
+
return String((_b = unref(text)) != null ? _b : "");
|
|
13
|
+
}
|
|
14
|
+
function resolveButtonShow(button, row, index) {
|
|
15
|
+
const {
|
|
16
|
+
show
|
|
17
|
+
} = button;
|
|
18
|
+
if (show === void 0) return true;
|
|
19
|
+
if (typeof show === "function") {
|
|
20
|
+
return !!unref(show(row, index, button));
|
|
21
|
+
}
|
|
22
|
+
return !!unref(show);
|
|
23
|
+
}
|
|
24
|
+
function resolveButtonProps(button, row, index) {
|
|
25
|
+
const {
|
|
26
|
+
props
|
|
27
|
+
} = button;
|
|
28
|
+
if (!props) return {};
|
|
29
|
+
if (typeof props === "function") {
|
|
30
|
+
return props(row, index, button) || {};
|
|
31
|
+
}
|
|
32
|
+
return unref(props) || {};
|
|
33
|
+
}
|
|
34
|
+
function createActionBarColumn(actionBar, onClickAction) {
|
|
35
|
+
const label = typeof actionBar.label === "string" ? actionBar.label : unref(actionBar.label) || "\u64CD\u4F5C\u680F";
|
|
36
|
+
const width = typeof actionBar.width === "number" ? actionBar.width : parseInt(String(actionBar.width || "200"), 10) || 200;
|
|
37
|
+
const showNumber = typeof actionBar.showNumber === "number" ? actionBar.showNumber : 3;
|
|
38
|
+
const buttons = actionBar.buttons || [];
|
|
39
|
+
return {
|
|
40
|
+
key: "__action__",
|
|
41
|
+
dataKey: "__action__",
|
|
42
|
+
title: label,
|
|
43
|
+
width,
|
|
44
|
+
fixed: actionBar.fixed === "right" || actionBar.fixed === void 0 ? TableV2FixedDir.RIGHT : void 0,
|
|
45
|
+
align: "center",
|
|
46
|
+
cellRenderer: (params) => {
|
|
47
|
+
const {
|
|
48
|
+
rowData,
|
|
49
|
+
rowIndex
|
|
50
|
+
} = params;
|
|
51
|
+
const visibleButtons = buttons.filter((btn) => resolveButtonShow(btn, rowData, rowIndex));
|
|
52
|
+
if (visibleButtons.length === 0) return "";
|
|
53
|
+
const currentShowNumber = typeof actionBar.showNumber === "function" ? actionBar.showNumber(rowData, rowIndex) : showNumber;
|
|
54
|
+
const directButtons = visibleButtons.slice(0, currentShowNumber);
|
|
55
|
+
const moreButtons = visibleButtons.slice(currentShowNumber);
|
|
56
|
+
const handleClick = (button, e) => {
|
|
57
|
+
var _a;
|
|
58
|
+
const callbackParams = {
|
|
59
|
+
row: rowData,
|
|
60
|
+
index: rowIndex,
|
|
61
|
+
rowIndex,
|
|
62
|
+
buttonRow: button,
|
|
63
|
+
text: resolveButtonText(button, rowData, rowIndex),
|
|
64
|
+
e,
|
|
65
|
+
column: {},
|
|
66
|
+
cellIndex: 0,
|
|
67
|
+
store: {},
|
|
68
|
+
expanded: false,
|
|
69
|
+
_self: {}
|
|
70
|
+
};
|
|
71
|
+
(_a = button.onClick) == null ? void 0 : _a.call(button, callbackParams);
|
|
72
|
+
onClickAction == null ? void 0 : onClickAction(callbackParams);
|
|
73
|
+
};
|
|
74
|
+
const renderButton = (button, idx) => {
|
|
75
|
+
var _a;
|
|
76
|
+
const text = resolveButtonText(button, rowData, rowIndex);
|
|
77
|
+
const btnProps = resolveButtonProps(button, rowData, rowIndex);
|
|
78
|
+
return h(ElButton, {
|
|
79
|
+
key: (_a = button.code) != null ? _a : idx,
|
|
80
|
+
link: true,
|
|
81
|
+
type: "primary",
|
|
82
|
+
size: "small",
|
|
83
|
+
...btnProps,
|
|
84
|
+
onClick: (e) => handleClick(button, e)
|
|
85
|
+
}, () => text);
|
|
86
|
+
};
|
|
87
|
+
const nodes = directButtons.map(renderButton);
|
|
88
|
+
if (moreButtons.length > 0) {
|
|
89
|
+
const dropdownNode = h(ElDropdown, {
|
|
90
|
+
trigger: "hover"
|
|
91
|
+
}, {
|
|
92
|
+
default: () => h(ElButton, {
|
|
93
|
+
link: true,
|
|
94
|
+
type: "primary",
|
|
95
|
+
size: "small"
|
|
96
|
+
}, () => "\u66F4\u591A"),
|
|
97
|
+
dropdown: () => h(ElDropdownMenu, null, () => moreButtons.map((btn, idx) => {
|
|
98
|
+
var _a;
|
|
99
|
+
const text = resolveButtonText(btn, rowData, rowIndex);
|
|
100
|
+
return h(ElDropdownItem, {
|
|
101
|
+
key: (_a = btn.code) != null ? _a : `more-${idx}`,
|
|
102
|
+
onClick: (e) => handleClick(btn, e)
|
|
103
|
+
}, () => text);
|
|
104
|
+
}))
|
|
105
|
+
});
|
|
106
|
+
nodes.push(dropdownNode);
|
|
107
|
+
}
|
|
108
|
+
return h("div", {
|
|
109
|
+
class: "plus-virtual-table-action-bar",
|
|
110
|
+
style: {
|
|
111
|
+
display: "flex",
|
|
112
|
+
alignItems: "center",
|
|
113
|
+
justifyContent: "center",
|
|
114
|
+
gap: "4px"
|
|
115
|
+
}
|
|
116
|
+
}, nodes);
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
export { createActionBarColumn };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { VirtualTableColumn } from './type';
|
|
2
|
+
import { PlusColumn } from 'yc-pro-components/es/types';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 创建单元格渲染器
|
|
6
|
+
*
|
|
7
|
+
* 将 PlusColumn 的渲染配置适配为 el-table-v2 的 cellRenderer。
|
|
8
|
+
* 参数差异对照:
|
|
9
|
+
* - PlusColumn.render(value, { row, column, index })
|
|
10
|
+
* - el-table-v2.cellRenderer({ cellData, rowData, column, rowIndex, columnIndex, columns })
|
|
11
|
+
*
|
|
12
|
+
* @param plusColumn - 原始 PlusColumn 配置
|
|
13
|
+
* @param globalEmptyText - 全局空值文本
|
|
14
|
+
* @returns el-table-v2 兼容的 cellRenderer 函数
|
|
15
|
+
*/
|
|
16
|
+
export declare function createCellRenderer(plusColumn: PlusColumn, globalEmptyText?: string): VirtualTableColumn['cellRenderer'];
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import { createVNode, unref, isVNode } from 'vue';
|
|
2
|
+
import { ElAvatar, ElProgress, ElTag, ElLink, ElImage } from 'element-plus';
|
|
3
|
+
|
|
4
|
+
function _isSlot(s) {
|
|
5
|
+
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
6
|
+
}
|
|
7
|
+
function isEmpty(value) {
|
|
8
|
+
return value === null || value === void 0 || value === "";
|
|
9
|
+
}
|
|
10
|
+
function findOptionByValue(options, value) {
|
|
11
|
+
const arr = unref(options);
|
|
12
|
+
if (!Array.isArray(arr)) return void 0;
|
|
13
|
+
return arr.find((opt) => opt.value === value);
|
|
14
|
+
}
|
|
15
|
+
function renderOptionStatus(option) {
|
|
16
|
+
const {
|
|
17
|
+
label,
|
|
18
|
+
color,
|
|
19
|
+
type: statusType
|
|
20
|
+
} = option;
|
|
21
|
+
const colorMap = {
|
|
22
|
+
success: "#67c23a",
|
|
23
|
+
warning: "#e6a23c",
|
|
24
|
+
info: "#909399",
|
|
25
|
+
primary: "#409eff",
|
|
26
|
+
danger: "#f56c6c"
|
|
27
|
+
};
|
|
28
|
+
const dotColor = color || (statusType ? colorMap[statusType] : void 0);
|
|
29
|
+
if (dotColor) {
|
|
30
|
+
return createVNode("span", {
|
|
31
|
+
"class": "plus-table-column-status"
|
|
32
|
+
}, [createVNode("span", {
|
|
33
|
+
"class": "plus-table-column-status__dot",
|
|
34
|
+
"style": {
|
|
35
|
+
backgroundColor: dotColor
|
|
36
|
+
}
|
|
37
|
+
}, null), createVNode("span", {
|
|
38
|
+
"class": "plus-table-column-status__text"
|
|
39
|
+
}, [label != null ? label : ""])]);
|
|
40
|
+
}
|
|
41
|
+
return createVNode("span", null, [label != null ? label : ""]);
|
|
42
|
+
}
|
|
43
|
+
function renderByValueType(valueType, value, column, _row) {
|
|
44
|
+
switch (valueType) {
|
|
45
|
+
case "img": {
|
|
46
|
+
const imgProps = {
|
|
47
|
+
src: value,
|
|
48
|
+
"preview-src-list": [value],
|
|
49
|
+
fit: "cover",
|
|
50
|
+
class: "plus-display-item__image",
|
|
51
|
+
style: {
|
|
52
|
+
width: "40px",
|
|
53
|
+
height: "40px"
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
return createVNode(ElImage, imgProps, null);
|
|
57
|
+
}
|
|
58
|
+
case "link": {
|
|
59
|
+
const linkProps = {
|
|
60
|
+
href: value,
|
|
61
|
+
type: "primary",
|
|
62
|
+
class: "plus-display-item__link"
|
|
63
|
+
};
|
|
64
|
+
return createVNode(ElLink, linkProps, {
|
|
65
|
+
default: () => [column.linkText || value]
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
case "tag": {
|
|
69
|
+
let _slot;
|
|
70
|
+
const tagOption = findOptionByValue(column.options, value);
|
|
71
|
+
if (tagOption) {
|
|
72
|
+
const tagProps = {
|
|
73
|
+
type: tagOption.type || ""
|
|
74
|
+
};
|
|
75
|
+
return createVNode(ElTag, tagProps, {
|
|
76
|
+
default: () => {
|
|
77
|
+
var _a;
|
|
78
|
+
return [(_a = tagOption.label) != null ? _a : value];
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
return createVNode(ElTag, null, _isSlot(_slot = String(value != null ? value : "")) ? _slot : {
|
|
83
|
+
default: () => [_slot]
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
case "money":
|
|
87
|
+
return createVNode("span", null, [formatMoney(value)]);
|
|
88
|
+
case "progress": {
|
|
89
|
+
const progressProps = {
|
|
90
|
+
percentage: Number(value) || 0
|
|
91
|
+
};
|
|
92
|
+
return createVNode(ElProgress, progressProps, null);
|
|
93
|
+
}
|
|
94
|
+
case "avatar": {
|
|
95
|
+
const avatarProps = {
|
|
96
|
+
src: value
|
|
97
|
+
};
|
|
98
|
+
return createVNode(ElAvatar, avatarProps, null);
|
|
99
|
+
}
|
|
100
|
+
case "code":
|
|
101
|
+
return createVNode("span", {
|
|
102
|
+
"class": "plus-display-item__pre"
|
|
103
|
+
}, [String(value != null ? value : "")]);
|
|
104
|
+
default:
|
|
105
|
+
return String(value != null ? value : "");
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
function formatMoney(value) {
|
|
109
|
+
if (isEmpty(value)) return "";
|
|
110
|
+
const num = Number(value);
|
|
111
|
+
if (isNaN(num)) return String(value);
|
|
112
|
+
return num.toLocaleString("zh-CN", {
|
|
113
|
+
minimumFractionDigits: 2,
|
|
114
|
+
maximumFractionDigits: 2
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
function createCellRenderer(plusColumn, globalEmptyText = "-") {
|
|
118
|
+
var _a;
|
|
119
|
+
const emptyText = (_a = plusColumn.emptyText) != null ? _a : globalEmptyText;
|
|
120
|
+
return (params) => {
|
|
121
|
+
const {
|
|
122
|
+
rowData,
|
|
123
|
+
rowIndex
|
|
124
|
+
} = params;
|
|
125
|
+
const value = rowData[plusColumn.prop];
|
|
126
|
+
if (plusColumn.render && typeof plusColumn.render === "function") {
|
|
127
|
+
return plusColumn.render(value, {
|
|
128
|
+
row: rowData,
|
|
129
|
+
column: plusColumn,
|
|
130
|
+
index: rowIndex
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
if (plusColumn.renderHTML && typeof plusColumn.renderHTML === "function") {
|
|
134
|
+
const html = plusColumn.renderHTML(value, {
|
|
135
|
+
row: rowData,
|
|
136
|
+
column: plusColumn,
|
|
137
|
+
index: rowIndex
|
|
138
|
+
});
|
|
139
|
+
return createVNode("span", {
|
|
140
|
+
"innerHTML": html
|
|
141
|
+
}, null);
|
|
142
|
+
}
|
|
143
|
+
if (plusColumn.formatter && typeof plusColumn.formatter === "function") {
|
|
144
|
+
const formatted = plusColumn.formatter(value, {
|
|
145
|
+
row: rowData,
|
|
146
|
+
column: plusColumn,
|
|
147
|
+
index: rowIndex
|
|
148
|
+
});
|
|
149
|
+
return createVNode("span", null, [isEmpty(formatted) ? emptyText : formatted]);
|
|
150
|
+
}
|
|
151
|
+
if (plusColumn.valueType) {
|
|
152
|
+
if (isEmpty(value)) return createVNode("span", null, [emptyText]);
|
|
153
|
+
return renderByValueType(plusColumn.valueType, value, plusColumn);
|
|
154
|
+
}
|
|
155
|
+
if (plusColumn.options) {
|
|
156
|
+
const option = findOptionByValue(plusColumn.options, value);
|
|
157
|
+
if (option) {
|
|
158
|
+
return renderOptionStatus(option);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
if (isEmpty(value)) {
|
|
162
|
+
return createVNode("span", {
|
|
163
|
+
"class": "plus-table-column-empty"
|
|
164
|
+
}, [emptyText]);
|
|
165
|
+
}
|
|
166
|
+
return createVNode("span", null, [String(value)]);
|
|
167
|
+
};
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
export { createCellRenderer };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { VirtualTableColumn } from './type';
|
|
2
|
+
import { PlusColumn } from 'yc-pro-components/es/types';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 创建表头渲染器
|
|
6
|
+
*
|
|
7
|
+
* @param plusColumn - 原始 PlusColumn 配置
|
|
8
|
+
* @returns el-table-v2 兼容的 headerCellRenderer 函数
|
|
9
|
+
*/
|
|
10
|
+
export declare function createHeaderRenderer(plusColumn: PlusColumn): VirtualTableColumn['headerCellRenderer'];
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { createVNode, unref } from 'vue';
|
|
2
|
+
import { ElTooltip, ElIcon } from 'element-plus';
|
|
3
|
+
import { QuestionFilled } from '@element-plus/icons-vue';
|
|
4
|
+
|
|
5
|
+
function resolveTooltip(tooltip) {
|
|
6
|
+
if (!tooltip) return null;
|
|
7
|
+
const resolved = unref(tooltip);
|
|
8
|
+
if (typeof resolved === "string") {
|
|
9
|
+
return {
|
|
10
|
+
content: resolved
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
if (typeof resolved === "object" && resolved !== null) {
|
|
14
|
+
return resolved;
|
|
15
|
+
}
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
function getLabel(label) {
|
|
19
|
+
var _a;
|
|
20
|
+
if (typeof label === "string") return label;
|
|
21
|
+
return String((_a = unref(label)) != null ? _a : "");
|
|
22
|
+
}
|
|
23
|
+
function createHeaderRenderer(plusColumn) {
|
|
24
|
+
return (_params) => {
|
|
25
|
+
const label = getLabel(plusColumn.label);
|
|
26
|
+
if (plusColumn.renderHeader && typeof plusColumn.renderHeader === "function") {
|
|
27
|
+
return plusColumn.renderHeader(label, plusColumn);
|
|
28
|
+
}
|
|
29
|
+
const tooltipConfig = resolveTooltip(plusColumn.tooltip);
|
|
30
|
+
if (tooltipConfig) {
|
|
31
|
+
const tooltipProps = {
|
|
32
|
+
placement: "top",
|
|
33
|
+
...tooltipConfig
|
|
34
|
+
};
|
|
35
|
+
const iconProps = {
|
|
36
|
+
class: "plus-table-column__header__icon",
|
|
37
|
+
size: 16
|
|
38
|
+
};
|
|
39
|
+
return createVNode("span", {
|
|
40
|
+
"class": "plus-table-column__header"
|
|
41
|
+
}, [createVNode("span", null, [label]), createVNode(ElTooltip, tooltipProps, {
|
|
42
|
+
default: () => [createVNode(ElIcon, iconProps, {
|
|
43
|
+
default: () => [createVNode(QuestionFilled, null, null)]
|
|
44
|
+
})]
|
|
45
|
+
})]);
|
|
46
|
+
}
|
|
47
|
+
return createVNode("span", null, [label]);
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export { createHeaderRenderer };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "element-plus/es/components/table-v2/style/css";
|
|
2
|
+
import "element-plus/es/components/checkbox/style/css";
|
|
3
|
+
import "element-plus/es/components/loading/style/css";
|
|
4
|
+
import "element-plus/es/components/icon/style/css";
|
|
5
|
+
import "element-plus/es/components/button/style/css";
|
|
6
|
+
import "element-plus/es/components/dropdown/style/css";
|
|
7
|
+
import "element-plus/es/components/tag/style/css";
|
|
8
|
+
import "element-plus/es/components/tooltip/style/css";
|
|
9
|
+
import "element-plus/es/components/image/style/css";
|
|
10
|
+
import "element-plus/es/components/link/style/css";
|
|
11
|
+
import "element-plus/es/components/progress/style/css";
|
|
12
|
+
import "element-plus/es/components/avatar/style/css";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -6,12 +6,12 @@ export * from './src/type';
|
|
|
6
6
|
export type YcDialogInstance = InstanceType<typeof YcDialogComponent>;
|
|
7
7
|
export declare const YcDialog: {
|
|
8
8
|
new (...args: any[]): CreateComponentPublicInstance<Readonly< ExtractPropTypes<{
|
|
9
|
-
size: {
|
|
10
|
-
type: PropType<DialogSize>;
|
|
11
|
-
};
|
|
12
9
|
width: {
|
|
13
10
|
type: PropType<string | number>;
|
|
14
11
|
};
|
|
12
|
+
size: {
|
|
13
|
+
type: PropType<DialogSize>;
|
|
14
|
+
};
|
|
15
15
|
maxHeight: {
|
|
16
16
|
type: PropType<string | number | false>;
|
|
17
17
|
default: string;
|
|
@@ -21,12 +21,12 @@ export declare const YcDialog: {
|
|
|
21
21
|
default: boolean;
|
|
22
22
|
};
|
|
23
23
|
}>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly< ExtractPropTypes<{
|
|
24
|
-
size: {
|
|
25
|
-
type: PropType<DialogSize>;
|
|
26
|
-
};
|
|
27
24
|
width: {
|
|
28
25
|
type: PropType<string | number>;
|
|
29
26
|
};
|
|
27
|
+
size: {
|
|
28
|
+
type: PropType<DialogSize>;
|
|
29
|
+
};
|
|
30
30
|
maxHeight: {
|
|
31
31
|
type: PropType<string | number | false>;
|
|
32
32
|
default: string;
|
|
@@ -46,12 +46,12 @@ export declare const YcDialog: {
|
|
|
46
46
|
M: {};
|
|
47
47
|
Defaults: {};
|
|
48
48
|
}, Readonly< ExtractPropTypes<{
|
|
49
|
-
size: {
|
|
50
|
-
type: PropType<DialogSize>;
|
|
51
|
-
};
|
|
52
49
|
width: {
|
|
53
50
|
type: PropType<string | number>;
|
|
54
51
|
};
|
|
52
|
+
size: {
|
|
53
|
+
type: PropType<DialogSize>;
|
|
54
|
+
};
|
|
55
55
|
maxHeight: {
|
|
56
56
|
type: PropType<string | number | false>;
|
|
57
57
|
default: string;
|
|
@@ -68,12 +68,12 @@ export declare const YcDialog: {
|
|
|
68
68
|
__isTeleport?: undefined;
|
|
69
69
|
__isSuspense?: undefined;
|
|
70
70
|
} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
|
|
71
|
-
size: {
|
|
72
|
-
type: PropType<DialogSize>;
|
|
73
|
-
};
|
|
74
71
|
width: {
|
|
75
72
|
type: PropType<string | number>;
|
|
76
73
|
};
|
|
74
|
+
size: {
|
|
75
|
+
type: PropType<DialogSize>;
|
|
76
|
+
};
|
|
77
77
|
maxHeight: {
|
|
78
78
|
type: PropType<string | number | false>;
|
|
79
79
|
default: string;
|
|
@@ -94,12 +94,12 @@ export declare const YcDialog: {
|
|
|
94
94
|
});
|
|
95
95
|
export declare const ReDialog: {
|
|
96
96
|
new (...args: any[]): CreateComponentPublicInstance<Readonly< ExtractPropTypes<{
|
|
97
|
-
size: {
|
|
98
|
-
type: PropType<DialogSize>;
|
|
99
|
-
};
|
|
100
97
|
width: {
|
|
101
98
|
type: PropType<string | number>;
|
|
102
99
|
};
|
|
100
|
+
size: {
|
|
101
|
+
type: PropType<DialogSize>;
|
|
102
|
+
};
|
|
103
103
|
maxHeight: {
|
|
104
104
|
type: PropType<string | number | false>;
|
|
105
105
|
default: string;
|
|
@@ -109,12 +109,12 @@ export declare const ReDialog: {
|
|
|
109
109
|
default: boolean;
|
|
110
110
|
};
|
|
111
111
|
}>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly< ExtractPropTypes<{
|
|
112
|
-
size: {
|
|
113
|
-
type: PropType<DialogSize>;
|
|
114
|
-
};
|
|
115
112
|
width: {
|
|
116
113
|
type: PropType<string | number>;
|
|
117
114
|
};
|
|
115
|
+
size: {
|
|
116
|
+
type: PropType<DialogSize>;
|
|
117
|
+
};
|
|
118
118
|
maxHeight: {
|
|
119
119
|
type: PropType<string | number | false>;
|
|
120
120
|
default: string;
|
|
@@ -134,12 +134,12 @@ export declare const ReDialog: {
|
|
|
134
134
|
M: {};
|
|
135
135
|
Defaults: {};
|
|
136
136
|
}, Readonly< ExtractPropTypes<{
|
|
137
|
-
size: {
|
|
138
|
-
type: PropType<DialogSize>;
|
|
139
|
-
};
|
|
140
137
|
width: {
|
|
141
138
|
type: PropType<string | number>;
|
|
142
139
|
};
|
|
140
|
+
size: {
|
|
141
|
+
type: PropType<DialogSize>;
|
|
142
|
+
};
|
|
143
143
|
maxHeight: {
|
|
144
144
|
type: PropType<string | number | false>;
|
|
145
145
|
default: string;
|
|
@@ -156,12 +156,12 @@ export declare const ReDialog: {
|
|
|
156
156
|
__isTeleport?: undefined;
|
|
157
157
|
__isSuspense?: undefined;
|
|
158
158
|
} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
|
|
159
|
-
size: {
|
|
160
|
-
type: PropType<DialogSize>;
|
|
161
|
-
};
|
|
162
159
|
width: {
|
|
163
160
|
type: PropType<string | number>;
|
|
164
161
|
};
|
|
162
|
+
size: {
|
|
163
|
+
type: PropType<DialogSize>;
|
|
164
|
+
};
|
|
165
165
|
maxHeight: {
|
|
166
166
|
type: PropType<string | number | false>;
|
|
167
167
|
default: string;
|