@jetlinks-web/components 3.0.1 → 3.1.1

package/lib/VirtualTable/VirtualTable.js

@@ -0,0 +1,398 @@
+function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+        return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+        lastAccessLHS = value;
+        value = fn(value);
+    }
+    else if (op === 'call' || op === 'optionalCall') {
+        value = fn((...args) => value.call(lastAccessLHS, ...args));
+        lastAccessLHS = undefined;
+    }
+} return value; }
+/* Analyzed bindings: {
+  "dataSource": "props",
+  "columns": "props",
+  "expandedRowKeys": "props",
+  "rowSelection": "props",
+  "rowKey": "props",
+  "height": "props",
+  "findAllChildren": "setup-maybe-ref",
+  "flattenTree": "setup-maybe-ref",
+  "isNumber": "setup-maybe-ref",
+  "map": "setup-maybe-ref",
+  "omit": "setup-maybe-ref",
+  "h": "setup-const",
+  "computed": "setup-const",
+  "ref": "setup-const",
+  "watch": "setup-const",
+  "onMounted": "setup-const",
+  "nextTick": "setup-const",
+  "Table": "setup-maybe-ref",
+  "Checkbox": "setup-maybe-ref",
+  "AIcon": "setup-maybe-ref",
+  "useVirtualTableStyle": "setup-maybe-ref",
+  "useLocaleReceiver": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "emits": "setup-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
+  "contextLocale": "setup-maybe-ref",
+  "container": "setup-ref",
+  "rowHeights": "setup-ref",
+  "prefixSum": "setup-ref",
+  "start": "setup-ref",
+  "end": "setup-ref",
+  "offsetY": "setup-ref",
+  "buffer": "literal-const",
+  "selectedAll": "setup-ref",
+  "visibleNodes": "setup-ref",
+  "flattenData": "setup-ref",
+  "firstColumn": "setup-ref",
+  "totalHeight": "setup-ref",
+  "visibleRows": "setup-ref",
+  "_indeterminate": "setup-ref",
+  "viewportHeight": "setup-ref",
+  "_columns": "setup-ref",
+  "_rowSelection": "setup-ref",
+  "onSelectedAllChange": "setup-const",
+  "onScroll": "setup-const",
+  "toggleExpand": "setup-const",
+  "updatePrefixSum": "setup-const",
+  "updateVisibleNodes": "setup-const"
+} */
+import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, Fragment as _Fragment, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = { class: "virtual-table-header" };
+const _hoisted_2 = {
+    key: 0,
+    class: "virtual-table-all-selected"
+};
+const _hoisted_3 = ["onClick"];
+import { findAllChildren, flattenTree } from "./data";
+import { isNumber, map, omit } from "lodash-es";
+import { h, computed, ref, watch, onMounted, nextTick } from 'vue';
+import { Table, Checkbox } from 'ant-design-vue';
+import AIcon from '../Icon';
+import useVirtualTableStyle from './style';
+import { useLocaleReceiver } from "../LocaleReciver";
+const buffer = 5;
+const __sfc_main__ = Object.assign({
+    name: 'JVirtualTable'
+}, {
+    props: {
+        dataSource: {
+            type: Array,
+            default: () => []
+        },
+        columns: {
+            type: Array,
+            default: () => []
+        },
+        expandedRowKeys: {
+            type: Array,
+            default: () => []
+        },
+        rowSelection: {
+            type: Object
+        },
+        rowKey: {
+            type: [String, Function],
+            default: 'id',
+        },
+        height: {
+            type: Number,
+            default: 500
+        }
+    },
+    emits: ['update:expandedRowKeys'],
+    setup(__props, { emit: __emit }) {
+        const props = __props;
+        const emits = __emit;
+        const prefixCls = computed(() => 'virtual-table');
+        const [wrapSSR, hashId] = useVirtualTableStyle(prefixCls);
+        const [contextLocale] = useLocaleReceiver('ProTable');
+        const container = ref(null);
+        const rowHeights = ref([]);
+        const prefixSum = ref([]);
+        const start = ref(0);
+        const end = ref(15);
+        const offsetY = ref(0);
+        const selectedAll = ref(false);
+        // 被展开的所有数据
+        const visibleNodes = ref([]);
+        const flattenData = ref([]);
+        const firstColumn = computed(() => props.columns[0]);
+        const totalHeight = computed(() => prefixSum.value.length ? prefixSum.value[prefixSum.value.length - 1] : 0);
+        const visibleRows = computed(() => visibleNodes.value.slice(start.value, end.value));
+        const _indeterminate = computed(() => !selectedAll.value && _optionalChain([props, 'access', _2 => _2.rowSelection, 'optionalAccess', _3 => _3.selectedRowKeys, 'optionalAccess', _4 => _4.length]) > 0);
+        const viewportHeight = computed(() => props.height || 500);
+        const _columns = computed(() => {
+            const arr = [];
+            if (props.rowSelection) {
+                const _width = props.rowSelection.columnWidth || 32;
+                arr.push({
+                    key: '__selection__',
+                    title: contextLocale.value.select.all,
+                    dataIndex: '__selection__',
+                    width: isNumber(_width) ? `${_width}px` : _width,
+                    customHeaderCell: (props) => {
+                        return {
+                            class: 'ant-table-selection-column',
+                        };
+                    }
+                }); //
+            }
+            arr.push(...props.columns);
+            return arr;
+        });
+        const _rowSelection = computed(() => {
+            return props.rowSelection ? {
+                ...props.rowSelection,
+                onSelect: (record, selected, selectedRows, nativeEvent) => {
+                    const _selectedRowKeys = props.rowSelection.selectedRowKeys || [];
+                    const _set = new Set([..._selectedRowKeys]);
+                    if (props.rowSelection.type === 'radio') {
+                        _set.clear();
+                        _set.add(record[props.rowKey]);
+                    }
+                    else {
+                        const _checkStrictly = props.rowSelection.checkStrictly !== undefined ? props.rowSelection.checkStrictly : true;
+                        let __arr = [];
+                        if (_checkStrictly) { // 需要获取子
+                            __arr = [record[props.rowKey]];
+                        }
+                        else {
+                            __arr = map(findAllChildren(flattenData.value, record[props.rowKey]), props.rowKey);
+                            __arr.push(record[props.rowKey]);
+                        }
+                        if (selected) {
+                            __arr.forEach(i => _set.add(i));
+                        }
+                        else {
+                            __arr.forEach(i => _set.delete(i));
+                        }
+                    }
+                    const _selectedRows = flattenData.value.filter(i => _set.has(i[props.rowKey])).map(item => omit(item, ['expanded', 'hasChildren', 'visible']));
+                    if (props.rowSelection.onSelect) {
+                        props.rowSelection.onSelect(record, selected, _selectedRows, nativeEvent);
+                    }
+                    if (props.rowSelection.onChange) {
+                        props.rowSelection.onChange([..._set], _selectedRows);
+                    }
+                },
+                onChange: () => {
+                },
+                onSelectAll: () => {
+                },
+                onSelectNone: () => {
+                    if (props.rowSelection.onSelectNone) {
+                        props.rowSelection.onSelectNone();
+                    }
+                }
+            } : undefined;
+        });
+        const onSelectedAllChange = (e) => {
+            const selected = e.target.checked;
+            const arr = flattenData.value.map(i => omit(i, ['expanded', 'hasChildren', 'visible']));
+            const _checked = selected;
+            const _selectedRowKeys = _checked ? map(arr, props.rowKey) : [];
+            if (props.rowSelection.onSelectAll) {
+                props.rowSelection.onSelectAll(_checked, _checked ? arr : []);
+            }
+            if (props.rowSelection.onChange) {
+                props.rowSelection.onChange(_selectedRowKeys, _checked ? arr : []);
+            }
+        };
+        const onScroll = (e) => {
+            const scrollTop = e.target.scrollTop;
+            const vh = viewportHeight.value || 500;
+            // 二分查找
+            let low = 0, high = prefixSum.value.length - 1;
+            while (low < high) {
+                let mid = Math.floor((low + high) / 2);
+                if (prefixSum.value[mid] <= scrollTop)
+                    low = mid + 1;
+                else
+                    high = mid;
+            }
+            start.value = Math.max(0, low - 1);
+            // 计算 end
+            let y = prefixSum.value[start.value] || 0;
+            let i = start.value;
+            while (i < visibleNodes.value.length && y < scrollTop + vh) {
+                y += rowHeights.value[i] || 40;
+                i++;
+            }
+            end.value = Math.min(i + buffer, visibleNodes.value.length);
+            offsetY.value = prefixSum.value[start.value - 1] || 0;
+        };
+        const toggleExpand = (row) => {
+            row.expanded = !row.expanded;
+            const stack = [...flattenData.value.filter(n => n.parentId === row[props.rowKey])];
+            while (stack.length) {
+                const child = stack.pop();
+                child.visible = row.expanded;
+                if (!child.visible) {
+                    child.expanded = false;
+                }
+                if (!row.expanded && child.hasChildren) {
+                    stack.push(...flattenData.value.filter(n => n.parentId === child[props.rowKey]));
+                }
+            }
+            updateVisibleNodes();
+        };
+        const updatePrefixSum = () => {
+            rowHeights.value = visibleNodes.value.map(() => 40); // 默认行高
+            prefixSum.value = [];
+            let sum = 0;
+            for (let h of rowHeights.value) {
+                sum += h;
+                prefixSum.value.push(sum);
+            }
+        };
+        const updateVisibleNodes = () => {
+            visibleNodes.value = flattenData.value.filter(i => i.visible);
+            updatePrefixSum();
+            nextTick(() => onScroll({ target: container.value }));
+        };
+        watch(() => [JSON.stringify(props.dataSource), JSON.stringify(props.expandedRowKeys)], () => {
+            flattenData.value = flattenTree(props.dataSource, 0, null);
+            flattenData.value.forEach(i => {
+                if (props.expandedRowKeys.includes(i[props.rowKey])) {
+                    toggleExpand(i);
+                    // i.expanded = true
+                }
+            });
+            updateVisibleNodes();
+        }, {
+            immediate: true
+        });
+        // watch(() => props.expandedRowKeys, () => {
+        //   flattenData.value.forEach(i => {
+        //     if (props.expandedRowKeys.includes(i[props.rowKey])) {
+        //       toggleExpand(i)
+        //       // i.expanded = true
+        //     }
+        //   })
+        //   updateVisibleNodes()
+        // }, {
+        //   immediate: true
+        // })
+        watch(() => _optionalChain([props, 'access', _5 => _5.rowSelection, 'optionalAccess', _6 => _6.selectedRowKeys]), (val) => {
+            if (val) {
+                selectedAll.value = val.length > 0 && flattenData.value.length === val.length;
+            }
+        }, {
+            immediate: true
+        });
+        onMounted(() => {
+            updateVisibleNodes();
+        });
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['virtual-table-wrapper', _unref(hashId)])
+            }, [
+                _createElementVNode("div", _hoisted_1, [
+                    _createVNode(_unref(Table), {
+                        columns: _columns.value,
+                        pagination: false,
+                        rowKey: __props.rowKey,
+                        "data-source": [],
+                        components: {
+                            body: {
+                                wrapper: () => h('div')
+                            },
+                        }
+                    }, {
+                        headerCell: _withCtx(({ column, title }) => [
+                            (column.key === '__selection__')
+                                ? (_openBlock(), _createElementBlock("span", _hoisted_2, [
+                                    (__props.rowSelection.type !== 'radio' && !__props.rowSelection.hideSelectAll)
+                                        ? (_openBlock(), _createBlock(_unref(Checkbox), {
+                                            key: 0,
+                                            checked: selectedAll.value,
+                                            "onUpdate:checked": _cache[0] || (_cache[0] = $event => ((selectedAll).value = $event)),
+                                            onChange: onSelectedAllChange,
+                                            indeterminate: _indeterminate.value,
+                                            disabled: visibleRows.value.length === 0
+                                        }, null, 8 /* PROPS */, ["checked", "indeterminate", "disabled"]))
+                                        : _createCommentVNode("v-if", true),
+                                    _createElementVNode("span", null, _toDisplayString(_optionalChain([__props, 'access', _7 => _7.rowSelection, 'optionalAccess', _8 => _8.columnTitle])), 1 /* TEXT */)
+                                ]))
+                                : _renderSlot(_ctx.$slots, "headerCell", {
+                                    key: 1,
+                                    title: title,
+                                    column: column
+                                }, () => [
+                                    _createTextVNode(_toDisplayString(title), 1 /* TEXT */)
+                                ])
+                        ]),
+                        _: 3 /* FORWARDED */
+                    }, 8 /* PROPS */, ["columns", "rowKey", "components"])
+                ]),
+                _createElementVNode("div", {
+                    class: "virtual-table-body",
+                    ref_key: "container",
+                    ref: container,
+                    onScroll: onScroll,
+                    style: _normalizeStyle({ height: `${viewportHeight.value}px` })
+                }, [
+                    _createElementVNode("div", {
+                        class: "virtual-table-height",
+                        style: _normalizeStyle({ height: totalHeight.value + 'px' })
+                    }, null, 4 /* STYLE */),
+                    _createElementVNode("div", {
+                        class: "virtual-table-visible-box",
+                        style: _normalizeStyle({ transform: `translateY(${offsetY.value}px)`, position: 'absolute', top: 0, left: 0, right: 0 })
+                    }, [
+                        _createVNode(_unref(Table), {
+                            columns: __props.columns,
+                            rowKey: __props.rowKey,
+                            "data-source": visibleRows.value,
+                            showHeader: false,
+                            pagination: false,
+                            rowSelection: _rowSelection.value
+                        }, {
+                            bodyCell: _withCtx(({ text, record, index, column }) => [
+                                (column.dataIndex === firstColumn.value.dataIndex || column.key === firstColumn.value.key)
+                                    ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+                                        _createElementVNode("span", {
+                                            class: "ant-table-row-indent indent-level-3",
+                                            style: _normalizeStyle({ paddingLeft: `${record.level * 15}px` })
+                                        }, null, 4 /* STYLE */),
+                                        _createElementVNode("span", {
+                                            class: "virtual-table-row-expand-icon",
+                                            onClick: $event => (toggleExpand(record))
+                                        }, [
+                                            (record.hasChildren)
+                                                ? (_openBlock(), _createBlock(_unref(AIcon), {
+                                                    key: 0,
+                                                    type: !record.expanded ? 'PlusSquareOutlined' : 'MinusSquareOutlined'
+                                                }, null, 8 /* PROPS */, ["type"]))
+                                                : _createCommentVNode("v-if", true)
+                                        ], 8 /* PROPS */, _hoisted_3)
+                                    ], 64 /* STABLE_FRAGMENT */))
+                                    : _createCommentVNode("v-if", true),
+                                _renderSlot(_ctx.$slots, "bodyCell", {
+                                    text: text,
+                                    record: record,
+                                    index: index,
+                                    column: column
+                                }, () => [
+                                    _createTextVNode(_toDisplayString(text || '--'), 1 /* TEXT */)
+                                ])
+                            ]),
+                            _: 3 /* FORWARDED */
+                        }, 8 /* PROPS */, ["columns", "rowKey", "data-source", "rowSelection"])
+                    ], 4 /* STYLE */)
+                ], 36 /* STYLE, NEED_HYDRATION */)
+            ], 2 /* CLASS */));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/VirtualTable/data.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flattenTree = exports.findAllChildren = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _lodashEs = require("lodash");
+// 扁平化数据
+
+var _flattenTree = exports.flattenTree = function flattenTree(tree) {
+  var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  return tree.flatMap(function (item) {
+    var _item$children;
+    var flatNode = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _lodashEs.omit)(item, 'children')), {}, {
+      level: level,
+      parentId: parentId,
+      expanded: false,
+      hasChildren: ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0,
+      visible: level === 0
+    });
+    var children = item.children ? _flattenTree(item.children, level + 1, item.id) : [];
+    return [flatNode].concat((0, _toConsumableArray2.default)(children));
+  });
+};
+var findAllChildren = exports.findAllChildren = function findAllChildren() {
+  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var parentId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var result = [];
+  function recursive(pid) {
+    data.forEach(function (item) {
+      if (item.parentId === pid) {
+        result.push(item);
+        recursive(item.id); // 递归查找这个子节点的孩子
+      }
+    });
+  }
+  recursive(parentId);
+  return result;
+};

package/lib/VirtualTable/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _VirtualTable = _interopRequireDefault(require("./VirtualTable.js"));
+_VirtualTable.default.install = function (app) {
+  app.component(_VirtualTable.default.name, _VirtualTable.default);
+};
+var _default = exports.default = _VirtualTable.default;

package/lib/VirtualTable/style/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var genVirtualTableStyle = function genVirtualTableStyle() {
+  return {
+    '.virtual-table-wrapper': {
+      display: 'flex',
+      'flex-direction': 'column',
+      '.virtual-table-header': {
+        '.ant-table': {
+          '.ant-table-container': {
+            '.ant-table-content': {
+              '.ant-table-tbody': {
+                display: 'none'
+              }
+            }
+          }
+        }
+      },
+      '.virtual-table-body': {
+        'overflow-y': 'auto',
+        position: 'relative',
+        'min-height': '100px'
+      },
+      '.virtual-table-row-expand-icon': {
+        'margin-right': '8px',
+        'font-size': 'relative',
+        width: '16px',
+        display: 'inline-block'
+      }
+    }
+  };
+};
+var _default = exports.default = (0, _styleRegister.default)([genVirtualTableStyle]);

package/lib/components.js

@@ -137,6 +137,12 @@ Object.defineProperty(exports, "ValueItem", {
     return _ValueItem.default;
   }
 });
+Object.defineProperty(exports, "VirtualTable", {
+  enumerable: true,
+  get: function get() {
+    return _VirtualTable.default;
+  }
+});
 var _BadgeStatus = _interopRequireDefault(require("./BadgeStatus"));
 var _CardSelect = _interopRequireDefault(require("./CardSelect"));
 var _CheckButton = _interopRequireDefault(require("./CheckButton"));
@@ -157,4 +163,5 @@ var _EditTable = _interopRequireDefault(require("./EditTable"));
 var _Markdown = _interopRequireDefault(require("./Markdown"));
 var _AutoComplete = _interopRequireDefault(require("./AutoComplete"));
 var _Title = _interopRequireDefault(require("./Title"));
+var _VirtualTable = _interopRequireDefault(require("./VirtualTable"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }

package/lib/locale/en-US.js

@@ -52,7 +52,9 @@ var _default = exports.default = {
   },
   ProTable: {
     pagination: {
-      total: 'Articles {0} - {1}/Total of {2}'
+      page: 'Articles {0} - {1}/Total of',
+      total: '',
+      lastPage: 'It is already the last page'
     },
     alert: {
       cancelChoose: 'Cancel selection',

package/lib/locale/zh-CN.js

@@ -52,7 +52,9 @@ var _default = exports.default = {
   },
   ProTable: {
     pagination: {
-      total: "\u7B2C {0} - {1} \u6761/\u603B\u5171 {2} \u6761"
+      page: "\u7B2C {0} - {1} \u6761/\u603B\u5171",
+      total: '条',
+      lastPage: '已是最后一页'
     },
     alert: {
       cancelChoose: '取消选择',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetlinks-web/components",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -155,8 +155,8 @@
     "webpack-merge": "^5.0.0",
     "webpackbar": "^5.0.2",
     "@jetlinks-web/constants": "^1.0.9",
-    "@jetlinks-web/utils": "^1.2.12",
-    "@jetlinks-web/hooks": "^1.1.1"
+    "@jetlinks-web/hooks": "^1.1.1",
+    "@jetlinks-web/utils": "^1.2.12"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",