@jetlinks-web/components 3.0.1-rc → 3.1.0

package/es/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/es/VirtualTable/data.js

@@ -0,0 +1,36 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+// 扁平化数据
+import { omit } from "lodash-es";
+var _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 = _objectSpread(_objectSpread({}, 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(_toConsumableArray(children));
+  });
+};
+export { _flattenTree as flattenTree };
+export var 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/es/VirtualTable/index.js

@@ -0,0 +1,5 @@
+import VirtualTable from './VirtualTable.js';
+VirtualTable.install = function (app) {
+  app.component(VirtualTable.name, VirtualTable);
+};
+export default VirtualTable;

package/es/VirtualTable/style/index.js

@@ -0,0 +1,32 @@
+import genCompoentStyle from "../../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'
+      }
+    }
+  };
+};
+export default genCompoentStyle([genVirtualTableStyle]);

package/es/components.js

@@ -1,9 +1,7 @@
-export { default as Map } from './AMap';
 export { default as BadgeStatus } from './BadgeStatus';
 export { default as CardSelect } from './CardSelect';
 export { default as CheckButton } from './CheckButton';
 export { default as ConfigProvider } from './ConfigProvider';
-export { default as Echarts } from './Echarts';
 export { default as Ellipsis } from './Ellipsis';
 export { default as Empty } from './Empty';
 export { default as FullPage } from './FullPage';
@@ -20,5 +18,4 @@ export { default as EditTable } from './EditTable';
 export { default as Markdown } from './Markdown';
 export { default as AutoComplete } from './AutoComplete';
 export { default as Title } from './Title';
-export { default as FlameGraph } from './FlameGraph';
-export { default as Skeleton } from './Skeleton';
+export { default as VirtualTable } from './VirtualTable';

package/es/locale/en-US.js

@@ -46,11 +46,16 @@ export 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',
       selectItem: 'Select {0} items'
+    },
+    select: {
+      all: 'Select all'
     }
   },
   ProLayout: {
@@ -58,9 +63,6 @@ export default {
       back: 'Back'
     }
   },
-  AMap: {
-    description: 'Please configure the Amap key for Gaode'
-  },
   EditTable: {
     serial: 'Serial',
     columns: {
@@ -114,9 +116,5 @@ export default {
   },
   PermissionButton: {
     hasPermission: 'No permission, please contact the administrator'
-  },
-  FlameGraph: {
-    placeholder: 'Please input',
-    revert: 'Revert'
   }
 };

package/es/locale/zh-CN.js

@@ -46,11 +46,16 @@ export default {
   },
   ProTable: {
     pagination: {
-      total: "\u7B2C {0} - {1} \u6761/\u603B\u5171 {2} \u6761"
+      page: "\u7B2C {0} - {1} \u6761/\u603B\u5171",
+      total: '条',
+      lastPage: '已是最后一页'
     },
     alert: {
       cancelChoose: '取消选择',
       selectItem: '已选择 {0} 项'
+    },
+    select: {
+      all: '全选'
     }
   },
   ProLayout: {
@@ -58,9 +63,6 @@ export default {
       back: '返回'
     }
   },
-  AMap: {
-    description: '请配置高德地图key'
-  },
   EditTable: {
     serial: '序号',
     columns: {
@@ -114,9 +116,5 @@ export default {
   },
   PermissionButton: {
     hasPermission: '暂无权限，请联系管理员'
-  },
-  FlameGraph: {
-    placeholder: '请输入',
-    revert: '反转'
   }
 };

package/es/style/index.js

@@ -1,3 +0,0 @@
-import '../ProLayout/style';
-import '../ProTable/style';
-import '../ProLayout/style';

package/es/style/styleRegister.js

@@ -0,0 +1,21 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { genComponentStyleHook } from 'ant-design-vue/es/theme/internal';
+import { theme } from 'ant-design-vue';
+import variableToken from './variable';
+var genCompoentStyle = function genCompoentStyle(styleFn) {
+  return genComponentStyleHook('jetlinks-components', function (_token) {
+    var _theme$useToken = theme.useToken(),
+      token = _theme$useToken.token,
+      hashId = _theme$useToken.hashId;
+    var componentToken = {
+      token: _objectSpread(_objectSpread({}, _token), variableToken),
+      hashId: hashId.value,
+      componentCls: ".".concat(_token.prefixCls)
+    };
+    return _toConsumableArray(styleFn.map(function (item) {
+      return item(componentToken);
+    }));
+  });
+};
+export default genCompoentStyle;

package/es/style/variable.js

@@ -0,0 +1,4 @@
+export default {
+  textColorTitle: '#000',
+  textColorSubtitle: '#263237'
+};

package/es/style.js

@@ -1,13 +0,0 @@
-import './Ellipsis/style';
-import './CheckButton/style';
-import './ProLayout/style';
-import './ProTable/style';
-import './Search/style';
-import './CardSelect/style';
-import './DragModal/style';
-import './EditTable/style';
-import './Scrollbar/style';
-import './Title/style';
-import './RadioButton/style';
-import './FlameGraph/style';
-import './Skeketon/style';