@jetlinks-web/components 2.0.36 → 2.0.38

package/es/EditTable/Body.js

@@ -0,0 +1,365 @@
+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: {
+  "groupKey": "props",
+  "ContextMenu": "setup-maybe-ref",
+  "useRightMenuContext": "setup-maybe-ref",
+  "useTableTool": "setup-maybe-ref",
+  "randomString": "setup-maybe-ref",
+  "bodyProps": "setup-maybe-ref",
+  "defaultProps": "setup-maybe-ref",
+  "ref": "setup-const",
+  "reactive": "setup-const",
+  "computed": "setup-const",
+  "watch": "setup-const",
+  "onMounted": "setup-const",
+  "onBeforeUnmount": "setup-const",
+  "handleColumnFixed": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "emit": "setup-const",
+  "viewScrollRef": "setup-ref",
+  "virtualRang": "setup-reactive-const",
+  "containerStyle": "setup-ref",
+  "context": "setup-maybe-ref",
+  "tableTool": "setup-maybe-ref",
+  "selectedRowKeys": "setup-ref",
+  "hoverKeys": "setup-ref",
+  "scrollLock": "setup-ref",
+  "menuInstance": "setup-let",
+  "maxLen": "setup-ref",
+  "virtualData": "setup-ref",
+  "columnFixedMap": "setup-ref",
+  "onScroll": "setup-const",
+  "scrollTo": "setup-const",
+  "showContextMenu": "setup-const",
+  "rowClick": "setup-const",
+  "updateSelectedKeys": "setup-const"
+} */
+import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode } from "vue";
+const _hoisted_1 = {
+    class: "jetlinks-edit-table-body-container",
+    style: { position: 'relative' }
+};
+const _hoisted_2 = ["data-row-key", "onContextmenu", "onClick", "onMouseover"];
+const _hoisted_3 = { class: "body-cell-box" };
+const _hoisted_4 = ["data-row-key", "onContextmenu", "onClick", "onMouseover"];
+const _hoisted_5 = { class: "body-cell-box" };
+const _hoisted_6 = ["data-row-key", "onContextmenu", "onClick", "onMouseover"];
+const _hoisted_7 = { class: "body-cell-box" };
+const _hoisted_8 = { class: "jetlinks-edit-table-body-empty" };
+import ContextMenu from './components/ContextMenu';
+import { useRightMenuContext, useTableTool } from "./hooks";
+import { randomString } from "@jetlinks-web/utils";
+import { bodyProps, defaultProps } from "./props";
+import { ref, reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import { handleColumnFixed } from "./utils";
+const __sfc_main__ = Object.assign({
+    name: 'JEditTableBody'
+}, {
+    props: {
+        ...defaultProps(),
+        ...bodyProps(),
+        groupKey: {
+            type: [String, Number],
+            default: undefined
+        }
+    },
+    emits: ['update:dataSource', 'scrollDown'],
+    setup(__props, { expose: __expose, emit: __emit }) {
+        const props = __props;
+        const emit = __emit;
+        const viewScrollRef = ref();
+        const virtualRang = reactive({
+            start: 0,
+            end: 15
+        });
+        const containerStyle = ref(0);
+        const context = useRightMenuContext();
+        const tableTool = useTableTool();
+        const selectedRowKeys = ref([]);
+        const hoverKeys = ref();
+        const scrollLock = ref(false);
+        let menuInstance;
+        const maxLen = computed(() => {
+            return Math.trunc(props.height / props.cellHeight);
+        });
+        const virtualData = computed(() => props.dataSource.slice(virtualRang.start, virtualRang.end));
+        const columnFixedMap = computed(() => {
+            return handleColumnFixed(props.columns);
+        });
+        const onScroll = () => {
+            if (!viewScrollRef.value)
+                return;
+            const height = viewScrollRef.value.scrollTop;
+            const clientHeight = viewScrollRef.value.clientHeight;
+            const scrollHeight = viewScrollRef.value.scrollHeight;
+            const _index = Math.round(height / props.cellHeight) - 1;
+            const start = _index < 0 ? 0 : _index;
+            const end = start + maxLen.value + 4;
+            if (height + clientHeight >= props.dataSource.length * props.cellHeight && !scrollLock.value) { // 滚动到底
+                emit('scrollDown');
+                scrollLock.value = true;
+            }
+            virtualRang.start = start;
+            virtualRang.end = end;
+            // updateVirtualData(start, end)
+        };
+        const scrollTo = (index) => {
+            if (viewScrollRef.value) {
+                let top = index * props.cellHeight;
+                viewScrollRef.value.scrollTop = top;
+            }
+        };
+        const showContextMenu = (e, record, _index) => {
+            e.preventDefault();
+            if (!props.disableMenu) {
+                record = {
+                    ...record,
+                    __index: _index
+                };
+                menuInstance = ContextMenu(e, record, context);
+            }
+        };
+        const rowClick = (record) => {
+            if (_optionalChain([props, 'access', _ => _.rowSelection, 'optionalAccess', _2 => _2.selectedRowKeys])) {
+                const rowSet = new Set(selectedRowKeys.value);
+                const key = record[props.rowKey];
+                const selected = !rowSet.has(key);
+                if (selected) {
+                    rowSet.delete(key);
+                }
+                else {
+                    rowSet.add(key);
+                }
+                _optionalChain([props, 'access', _3 => _3.rowSelection, 'access', _4 => _4.onSelect, 'optionalCall', _5 => _5(record, selected)]);
+                selectedRowKeys.value = [...rowSet.values()];
+            }
+        };
+        const updateSelectedKeys = (keys) => {
+            selectedRowKeys.value = keys;
+        };
+        watch(() => JSON.stringify(_optionalChain([props, 'access', _6 => _6.rowSelection, 'optionalAccess', _7 => _7.selectedRowKeys])), (val) => {
+            selectedRowKeys.value = JSON.parse(val || '[]');
+        }, { immediate: true });
+        watch(() => props.dataSource, (val, oldVal) => {
+            props.dataSource.forEach((item, index) => {
+                if (!item.__key) {
+                    item.__key = randomString();
+                }
+            });
+        }, {
+            immediate: true,
+            deep: true
+        });
+        watch(() => props.dataSource.length, () => {
+            scrollLock.value = false;
+            containerStyle.value = {
+                height: props.dataSource.length * props.cellHeight + 'px'
+            };
+            if (props.dataSource.length <= maxLen.value || props.dataSource.length === 0) {
+                emit('scrollDown', maxLen.value - props.dataSource.length + 3);
+            }
+        }, { immediate: true });
+        // watch(() => props.height, () => {
+        //   updateView()
+        // })
+        onMounted(() => {
+            nextTick(() => {
+                onScroll();
+            });
+        });
+        onBeforeUnmount(() => {
+            _optionalChain([menuInstance, 'optionalAccess', _8 => _8.destroy, 'call', _9 => _9()]);
+            _optionalChain([menuInstance, 'optionalAccess', _10 => _10.cleanCopy, 'call', _11 => _11()]);
+        });
+        __expose({
+            scrollTo,
+            updateSelectedKeys
+        });
+        return (_ctx, _cache) => {
+            const _component_j_empty = _resolveComponent("j-empty");
+            return (_ctx.dataSource.length)
+                ? (_openBlock(), _createElementBlock("div", {
+                    key: 0,
+                    class: "jetlinks-edit-table-body-viewport",
+                    style: _normalizeStyle({ ..._ctx.style, height: _ctx.height + 'px' }),
+                    ref_key: "viewScrollRef",
+                    ref: viewScrollRef,
+                    onScroll: onScroll
+                }, [
+                    _createElementVNode("div", _hoisted_1, [
+                        _createElementVNode("div", {
+                            class: "jetlinks-edit-scrollbar",
+                            style: _normalizeStyle(containerStyle.value)
+                        }, null, 4 /* STYLE */),
+                        (columnFixedMap.value.left.keys.length)
+                            ? (_openBlock(), _createElementBlock("div", {
+                                key: 0,
+                                class: "jetlinks-edit-table-left",
+                                style: _normalizeStyle({
+                                    webkitTransform: `translate3d(0, ${virtualRang.start * props.cellHeight}px, 0)`,
+                                    maxWidth: columnFixedMap.value.left.width + 'px',
+                                    minWidth: columnFixedMap.value.left.width + 'px',
+                                    width: columnFixedMap.value.left.width + 'px',
+                                    boxShadow: _unref(tableTool).scrollMap.x ? '0 0 12px 0 rgba(0 ,0, 0, .2)' : ''
+                                })
+                            }, [
+                                (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(virtualData.value, (item, index) => {
+                                    return (_openBlock(), _createElementBlock("div", {
+                                        class: _normalizeClass({
+                                            'jetlinks-edit-table-row': true,
+                                            'jetlinks-edit-table-row-selected': _optionalChain([selectedRowKeys, 'access', _12 => _12.value, 'optionalAccess', _13 => _13.includes, 'call', _14 => _14(item[_ctx.rowKey] || virtualRang.start + index + 1)]),
+                                            'jetlinks-edit-table-row-hover': hoverKeys.value === (item[_ctx.rowKey] || virtualRang.start + index + 1)
+                                        }),
+                                        key: 'left' + index,
+                                        style: _normalizeStyle({ height: `${_ctx.cellHeight}px` }),
+                                        "data-row-key": item[_ctx.rowKey] || virtualRang.start + index + 1,
+                                        onContextmenu: _withModifiers((e) => showContextMenu(e, item, virtualRang.start + index), ["right"]),
+                                        onClick: _withModifiers(() => rowClick(item), ["stop"]),
+                                        onMouseover: $event => (hoverKeys.value = (item[_ctx.rowKey] || virtualRang.start + index + 1)),
+                                        onMouseleave: _cache[0] || (_cache[0] = $event => (hoverKeys.value = undefined))
+                                    }, [
+                                        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(columnFixedMap.value.left.keys, (column) => {
+                                            return (_openBlock(), _createElementBlock("div", {
+                                                class: "jetlinks-edit-table-cell",
+                                                style: _normalizeStyle({
+                                                    width: `${column._width}px`,
+                                                })
+                                            }, [
+                                                _createElementVNode("div", _hoisted_3, [
+                                                    _renderSlot(_ctx.$slots, column.dataIndex, {
+                                                        record: item,
+                                                        index: item.__dataIndex,
+                                                        column: column
+                                                    }, () => [
+                                                        _createTextVNode(_toDisplayString(column.dataIndex === '__serial' ? virtualRang.start + index + 1 : item[column.dataIndex]), 1 /* TEXT */)
+                                                    ])
+                                                ])
+                                            ], 4 /* STYLE */));
+                                        }), 256 /* UNKEYED_FRAGMENT */))
+                                    ], 46 /* CLASS, STYLE, PROPS, NEED_HYDRATION */, _hoisted_2));
+                                }), 128 /* KEYED_FRAGMENT */))
+                            ], 4 /* STYLE */))
+                            : _createCommentVNode("v-if", true),
+                        _createElementVNode("div", {
+                            class: "jetlinks-edit-table-center",
+                            style: _normalizeStyle({
+                                webkitTransform: `translate3d(-${_unref(tableTool).scrollMap.x}px, ${virtualRang.start * props.cellHeight}px, 0)`
+                            })
+                        }, [
+                            _createElementVNode("div", {
+                                style: _normalizeStyle({ width: columnFixedMap.value.center.width + 'px' })
+                            }, [
+                                (virtualData.value.length)
+                                    ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(virtualData.value, (item, index) => {
+                                        return (_openBlock(), _createElementBlock("div", {
+                                            class: _normalizeClass({
+                                                'jetlinks-edit-table-row': true,
+                                                'jetlinks-edit-table-row-selected': _optionalChain([selectedRowKeys, 'access', _15 => _15.value, 'optionalAccess', _16 => _16.includes, 'call', _17 => _17(item[_ctx.rowKey] || virtualRang.start + index + 1)]),
+                                                'jetlinks-edit-table-row-hover': hoverKeys.value === (item[_ctx.rowKey] || virtualRang.start + index + 1)
+                                            }),
+                                            key: 'center' + index,
+                                            style: _normalizeStyle({ height: `${_ctx.cellHeight}px`, }),
+                                            "data-row-key": item[_ctx.rowKey] || virtualRang.start + index + 1,
+                                            onContextmenu: _withModifiers((e) => showContextMenu(e, item, virtualRang.start + index), ["right"]),
+                                            onClick: _withModifiers(() => rowClick(item), ["stop"]),
+                                            onMouseover: $event => (hoverKeys.value = (item[_ctx.rowKey] || virtualRang.start + index + 1)),
+                                            onMouseleave: _cache[1] || (_cache[1] = $event => (hoverKeys.value = undefined))
+                                        }, [
+                                            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(columnFixedMap.value.center.keys, (column) => {
+                                                return (_openBlock(), _createElementBlock("div", {
+                                                    class: "jetlinks-edit-table-cell",
+                                                    style: _normalizeStyle({
+                                                        width: `${column._width}px`,
+                                                    })
+                                                }, [
+                                                    _createElementVNode("div", _hoisted_5, [
+                                                        _renderSlot(_ctx.$slots, column.dataIndex, {
+                                                            record: item,
+                                                            index: item.__dataIndex,
+                                                            column: column
+                                                        }, () => [
+                                                            _createTextVNode(_toDisplayString(column.dataIndex === '__serial' ? virtualRang.start + index + 1 : item[column.dataIndex]), 1 /* TEXT */)
+                                                        ])
+                                                    ])
+                                                ], 4 /* STYLE */));
+                                            }), 256 /* UNKEYED_FRAGMENT */))
+                                        ], 46 /* CLASS, STYLE, PROPS, NEED_HYDRATION */, _hoisted_4));
+                                    }), 128 /* KEYED_FRAGMENT */))
+                                    : _createCommentVNode("v-if", true)
+                            ], 4 /* STYLE */)
+                        ], 4 /* STYLE */),
+                        (columnFixedMap.value.right.keys.length)
+                            ? (_openBlock(), _createElementBlock("div", {
+                                key: 1,
+                                class: "jetlinks-edit-table-right",
+                                style: _normalizeStyle({
+                                    webkitTransform: `translate3d(0, ${virtualRang.start * props.cellHeight}px, 0)`,
+                                    maxWidth: columnFixedMap.value.right.width + 'px',
+                                    minWidth: columnFixedMap.value.right.width + 'px',
+                                    width: columnFixedMap.value.right.width + 'px',
+                                    boxShadow: _unref(tableTool).scrollMap.down !== 'right' ? '0 0 12px 0 rgba(0 ,0, 0, .2)' : ''
+                                })
+                            }, [
+                                (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(virtualData.value, (item, index) => {
+                                    return (_openBlock(), _createElementBlock("div", {
+                                        class: _normalizeClass({
+                                            'jetlinks-edit-table-row': true,
+                                            'jetlinks-edit-table-row-selected': _optionalChain([selectedRowKeys, 'access', _18 => _18.value, 'optionalAccess', _19 => _19.includes, 'call', _20 => _20(item[_ctx.rowKey] || virtualRang.start + index + 1)]),
+                                            'jetlinks-edit-table-row-hover': hoverKeys.value === (item[_ctx.rowKey] || virtualRang.start + index + 1)
+                                        }),
+                                        key: 'right' + index,
+                                        style: _normalizeStyle({ height: `${_ctx.cellHeight}px` }),
+                                        "data-row-key": item[_ctx.rowKey] || virtualRang.start + index + 1,
+                                        onContextmenu: _withModifiers((e) => showContextMenu(e, item, virtualRang.start + index), ["right"]),
+                                        onClick: _withModifiers(() => rowClick(item), ["stop"]),
+                                        onMouseover: $event => (hoverKeys.value = (item[_ctx.rowKey] || virtualRang.start + index + 1)),
+                                        onMouseleave: _cache[2] || (_cache[2] = $event => (hoverKeys.value = undefined))
+                                    }, [
+                                        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(columnFixedMap.value.right.keys, (column) => {
+                                            return (_openBlock(), _createElementBlock("div", {
+                                                class: "jetlinks-edit-table-cell",
+                                                style: _normalizeStyle({
+                                                    width: `${column._width}px`,
+                                                })
+                                            }, [
+                                                _createElementVNode("div", _hoisted_7, [
+                                                    _renderSlot(_ctx.$slots, column.dataIndex, {
+                                                        record: item,
+                                                        index: item.__dataIndex,
+                                                        column: column
+                                                    }, () => [
+                                                        _createTextVNode(_toDisplayString(column.dataIndex === '__serial' ? virtualRang.start + index + 1 : item[column.dataIndex]), 1 /* TEXT */)
+                                                    ])
+                                                ])
+                                            ], 4 /* STYLE */));
+                                        }), 256 /* UNKEYED_FRAGMENT */))
+                                    ], 46 /* CLASS, STYLE, PROPS, NEED_HYDRATION */, _hoisted_6));
+                                }), 128 /* KEYED_FRAGMENT */))
+                            ], 4 /* STYLE */))
+                            : _createCommentVNode("v-if", true)
+                    ])
+                ], 36 /* STYLE, NEED_HYDRATION */))
+                : _renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+                    _createElementVNode("div", _hoisted_8, [
+                        _createVNode(_component_j_empty)
+                    ])
+                ]);
+        };
+    }
+});
+export default __sfc_main__;