@jetlinks-web/components 3.1.15 → 3.2.1

package/lib/VirtualTable/VirtualTable.js

@@ -1,482 +0,0 @@
-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",
-  "onUnmounted": "setup-const",
-  "Table": "setup-maybe-ref",
-  "Checkbox": "setup-maybe-ref",
-  "AIcon": "setup-maybe-ref",
-  "useVirtualTableStyle": "setup-maybe-ref",
-  "useLocaleReceiver": "setup-maybe-ref",
-  "_contentProps": "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",
-  "headerContainer": "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",
-  "horizontalScrollLeft": "setup-ref",
-  "bodyContentEl": "setup-let",
-  "headerScrollEl": "setup-let",
-  "onBodyHorizontalScroll": "setup-const",
-  "bindBodyHorizontalScroll": "setup-const",
-  "bindHeaderScrollTarget": "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, mergeProps as _mergeProps, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, Fragment as _Fragment, normalizeClass as _normalizeClass } from "vue";
-const _hoisted_1 = { class: "virtual-table-header-fixed" };
-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, onUnmounted } from 'vue';
-import { Table, Checkbox } from 'ant-design-vue';
-import AIcon from '../Icon';
-import useVirtualTableStyle from './style';
-import { useLocaleReceiver } from "../LocaleReciver";
-import { _contentProps } from "./data";
-const buffer = 5;
-const __sfc_main__ = Object.assign({
-    name: 'JVirtualTable'
-}, {
-    props: {
-        ..._contentProps,
-        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 headerContainer = 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 horizontalScrollLeft = ref(0);
-        let bodyContentEl = null;
-        let headerScrollEl = null;
-        const onBodyHorizontalScroll = (e) => {
-            const left = e.target.scrollLeft || 0;
-            horizontalScrollLeft.value = left;
-            if (headerScrollEl) {
-                if (typeof headerScrollEl.scrollTo === 'function') {
-                    headerScrollEl.scrollTo({ left });
-                }
-                else {
-                    headerScrollEl.scrollLeft = left;
-                }
-            }
-        };
-        const bindBodyHorizontalScroll = () => {
-            nextTick(() => {
-                const box = _optionalChain([container, 'access', _5 => _5.value, 'optionalAccess', _6 => _6.querySelector, 'call', _7 => _7('.virtual-table-visible-box')]);
-                const el = _optionalChain([box, 'optionalAccess', _8 => _8.querySelector, 'call', _9 => _9('.ant-table-content')]) || _optionalChain([box, 'optionalAccess', _10 => _10.querySelector, 'call', _11 => _11('.ant-table-body')]);
-                if (el && el !== bodyContentEl) {
-                    if (bodyContentEl) {
-                        bodyContentEl.removeEventListener('scroll', onBodyHorizontalScroll);
-                    }
-                    bodyContentEl = el;
-                    bodyContentEl.addEventListener('scroll', onBodyHorizontalScroll, { passive: true });
-                    horizontalScrollLeft.value = bodyContentEl.scrollLeft || 0;
-                }
-            });
-        };
-        const bindHeaderScrollTarget = () => {
-            nextTick(() => {
-                const el = _optionalChain([headerContainer, 'access', _12 => _12.value, 'optionalAccess', _13 => _13.querySelector, 'call', _14 => _14('.ant-table-header')])
-                    || _optionalChain([headerContainer, 'access', _15 => _15.value, 'optionalAccess', _16 => _16.querySelector, 'call', _17 => _17('.ant-table-content')]);
-                if (el && el !== headerScrollEl) {
-                    headerScrollEl = el;
-                    // 初始化时同步一次
-                    if (typeof headerScrollEl.scrollTo === 'function') {
-                        headerScrollEl.scrollTo({ left: horizontalScrollLeft.value || 0 });
-                    }
-                    else {
-                        headerScrollEl.scrollLeft = horizontalScrollLeft.value || 0;
-                    }
-                }
-            });
-        };
-        onUnmounted(() => {
-            if (bodyContentEl) {
-                bodyContentEl.removeEventListener('scroll', onBodyHorizontalScroll);
-                bodyContentEl = null;
-            }
-        });
-        const onScroll = (e) => {
-            const scrollTop = e.target.scrollTop;
-            const vh = viewportHeight.value || 500;
-            const total = totalHeight.value;
-            // 同步横向滚动位置给表头
-            horizontalScrollLeft.value = e.target.scrollLeft || 0;
-            // 防止 scrollTop 超出范围
-            const clampedScrollTop = Math.min(scrollTop, total - vh);
-            // 二分查找
-            let low = 0, high = prefixSum.value.length - 1;
-            while (low < high) {
-                const mid = Math.floor((low + high) / 2);
-                if (prefixSum.value[mid] <= clampedScrollTop)
-                    low = mid + 1;
-                else
-                    high = mid;
-            }
-            const newStart = Math.max(0, low - 1);
-            // 如果 start 没变化，直接跳过，避免重复计算导致闪动
-            if (newStart === start.value)
-                return;
-            start.value = newStart;
-            // 计算 end
-            let y = prefixSum.value[start.value] || 0;
-            let i = start.value;
-            while (i < visibleNodes.value.length && y < clampedScrollTop + vh) {
-                y += rowHeights.value[i] || 40;
-                i++;
-            }
-            end.value = Math.min(i + buffer, visibleNodes.value.length);
-            // 防止 offsetY 波动
-            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 });
-                bindBodyHorizontalScroll();
-                bindHeaderScrollTarget();
-            });
-        };
-        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', _18 => _18.rowSelection, 'optionalAccess', _19 => _19.selectedRowKeys]), (val) => {
-            if (val) {
-                selectedAll.value = val.length > 0 && flattenData.value.length === val.length;
-            }
-        }, {
-            immediate: true
-        });
-        onMounted(() => {
-            updateVisibleNodes();
-            bindBodyHorizontalScroll();
-            bindHeaderScrollTarget();
-        });
-        return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", {
-                class: _normalizeClass(['virtual-table-wrapper', _unref(hashId)])
-            }, [
-                _createElementVNode("div", {
-                    class: "virtual-table-header",
-                    ref_key: "headerContainer",
-                    ref: headerContainer
-                }, [
-                    _createElementVNode("div", _hoisted_1, [
-                        _createVNode(_unref(Table), _mergeProps(props, {
-                            columns: _columns.value,
-                            pagination: false,
-                            rowKey: __props.rowKey,
-                            "data-source": [],
-                            components: {
-                                body: { wrapper: () => h('div') },
-                            },
-                            "row-selection": false
-                        }), {
-                            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', _20 => _20.rowSelection, 'optionalAccess', _21 => _21.columnTitle])), 1 /* TEXT */)
-                                    ]))
-                                    : _renderSlot(_ctx.$slots, "headerCell", {
-                                        key: 1,
-                                        title: title,
-                                        column: column
-                                    }, () => [
-                                        _createTextVNode(_toDisplayString(title), 1 /* TEXT */)
-                                    ])
-                            ]),
-                            _: 3 /* FORWARDED */
-                        }, 16 /* FULL_PROPS */, ["columns", "rowKey", "components"])
-                    ])
-                ], 512 /* NEED_PATCH */),
-                _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, height: '100%' })
-                    }, [
-                        _createVNode(_unref(Table), _mergeProps(props, {
-                            columns: __props.columns,
-                            rowKey: __props.rowKey,
-                            "data-source": visibleRows.value,
-                            showHeader: false,
-                            pagination: false,
-                            rowSelection: _rowSelection.value
-                        }), {
-                            bodyCell: _withCtx(({ text, record, index, column }) => [
-                                ((firstColumn.value.dataIndex && column.dataIndex === firstColumn.value.dataIndex) || (firstColumn.value.key && 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 */
-                        }, 16 /* FULL_PROPS */, ["columns", "rowKey", "data-source", "rowSelection"])
-                    ], 4 /* STYLE */)
-                ], 36 /* STYLE, NEED_HYDRATION */)
-            ], 2 /* CLASS */));
-        };
-    }
-});
-export default __sfc_main__;