@jetlinks-web/components 3.1.15 → 3.2.1

package/es/VirtualTable/useTreeData.js

@@ -0,0 +1,243 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { computed, ref, watch, shallowRef } from 'vue';
+/**
+ * 树形数据处理 Hook
+ * 用于将树形数据扁平化为虚拟滚动可用的列表
+ */
+export function useTreeData(options) {
+  var data = options.data,
+    _options$childrenColu = options.childrenColumnName,
+    childrenColumnName = _options$childrenColu === void 0 ? 'children' : _options$childrenColu,
+    _options$rowKey = options.rowKey,
+    rowKey = _options$rowKey === void 0 ? 'key' : _options$rowKey,
+    _options$defaultExpan = options.defaultExpandedRowKeys,
+    defaultExpandedRowKeys = _options$defaultExpan === void 0 ? [] : _options$defaultExpan,
+    expandedRowKeys = options.expandedRowKeys,
+    _options$defaultExpan2 = options.defaultExpandAllRows,
+    defaultExpandAllRows = _options$defaultExpan2 === void 0 ? false : _options$defaultExpan2,
+    onExpandedRowsChange = options.onExpandedRowsChange;
+  // 内部展开状态
+  var internalExpandedKeys = ref(new Set(defaultExpandedRowKeys));
+  // 实际使用的展开状态 (支持受控和非受控模式)
+  var expandedKeys = computed({
+    get: function get() {
+      if (expandedRowKeys !== null && expandedRowKeys !== void 0 && expandedRowKeys.value) {
+        return new Set(expandedRowKeys.value);
+      }
+      return internalExpandedKeys.value;
+    },
+    set: function set(val) {
+      internalExpandedKeys.value = val;
+      onExpandedRowsChange === null || onExpandedRowsChange === void 0 ? void 0 : onExpandedRowsChange(Array.from(val));
+    }
+  });
+  /**
+   * 获取行的 key
+   */
+  var getRowKey = function getRowKey(record, index) {
+    if (typeof rowKey === 'function') {
+      return rowKey(record);
+    }
+    var key = record[rowKey];
+    if (key !== undefined && key !== null) {
+      return key;
+    }
+    // 如果没有 key，使用索引作为后备
+    return index !== undefined ? index : String(record);
+  };
+  /**
+   * 收集所有节点的 key (用于展开全部)
+   */
+  var collectAllKeys = function collectAllKeys(items) {
+    var keys = [];
+    var _traverse = function traverse(list) {
+      var _iterator = _createForOfIteratorHelper(list),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var item = _step.value;
+          var key = getRowKey(item);
+          var children = item[childrenColumnName];
+          if (children && children.length > 0) {
+            keys.push(key);
+            _traverse(children);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    };
+    _traverse(items);
+    return keys;
+  };
+  // 初始化：如果设置了 defaultExpandAllRows，则展开所有
+  if (defaultExpandAllRows && data.value.length > 0) {
+    var allKeys = collectAllKeys(data.value);
+    internalExpandedKeys.value = new Set(allKeys);
+  }
+  /**
+   * 构建父子关系映射 (用于 getAncestorKeys)
+   */
+  var parentMap = shallowRef(new Map());
+  /**
+   * 扁平化树形数据
+   * 只包含当前可见的节点（已展开的节点的子节点）
+   */
+  var flattenedData = computed(function () {
+    var result = [];
+    var newParentMap = new Map();
+    var flatIndex = 0;
+    var _traverse2 = function traverse(items, level, parentKey) {
+      for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+        var key = getRowKey(item, flatIndex);
+        var children = item[childrenColumnName];
+        var hasChildren = !!(children && children.length > 0);
+        var expanded = hasChildren && expandedKeys.value.has(key);
+        // 记录父子关系
+        newParentMap.set(key, parentKey);
+        result.push({
+          record: item,
+          key: key,
+          level: level,
+          hasChildren: hasChildren,
+          expanded: expanded,
+          childrenCount: (children === null || children === void 0 ? void 0 : children.length) || 0,
+          parentKey: parentKey,
+          flatIndex: flatIndex
+        });
+        flatIndex++;
+        // 如果展开了，递归处理子节点
+        if (expanded && children) {
+          _traverse2(children, level + 1, key);
+        }
+      }
+    };
+    _traverse2(data.value, 0);
+    parentMap.value = newParentMap;
+    return result;
+  });
+  /**
+   * 所有节点的 Map
+   */
+  var nodeMap = computed(function () {
+    var map = new Map();
+    var _iterator2 = _createForOfIteratorHelper(flattenedData.value),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var node = _step2.value;
+        map.set(node.key, node);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return map;
+  });
+  /**
+   * 展开节点
+   */
+  var expand = function expand(key) {
+    var newSet = new Set(expandedKeys.value);
+    newSet.add(key);
+    expandedKeys.value = newSet;
+  };
+  /**
+   * 折叠节点
+   */
+  var collapse = function collapse(key) {
+    var newSet = new Set(expandedKeys.value);
+    newSet.delete(key);
+    expandedKeys.value = newSet;
+  };
+  /**
+   * 切换展开状态
+   */
+  var toggle = function toggle(key) {
+    if (expandedKeys.value.has(key)) {
+      collapse(key);
+    } else {
+      expand(key);
+    }
+  };
+  /**
+   * 展开所有
+   */
+  var expandAll = function expandAll() {
+    var allKeys = collectAllKeys(data.value);
+    expandedKeys.value = new Set(allKeys);
+  };
+  /**
+   * 折叠所有
+   */
+  var collapseAll = function collapseAll() {
+    expandedKeys.value = new Set();
+  };
+  /**
+   * 判断是否展开
+   */
+  var isExpanded = function isExpanded(key) {
+    return expandedKeys.value.has(key);
+  };
+  /**
+   * 获取节点的所有祖先 keys
+   */
+  var getAncestorKeys = function getAncestorKeys(key) {
+    var ancestors = [];
+    var currentKey = key;
+    while (currentKey !== undefined) {
+      var parentKey = parentMap.value.get(currentKey);
+      if (parentKey !== undefined) {
+        ancestors.unshift(parentKey);
+      }
+      currentKey = parentKey;
+    }
+    return ancestors;
+  };
+  /**
+   * 展开到指定节点 (展开其所有祖先)
+   */
+  var expandTo = function expandTo(key) {
+    var ancestors = getAncestorKeys(key);
+    if (ancestors.length > 0) {
+      var newSet = new Set(expandedKeys.value);
+      var _iterator3 = _createForOfIteratorHelper(ancestors),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var ancestorKey = _step3.value;
+          newSet.add(ancestorKey);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      expandedKeys.value = newSet;
+    }
+  };
+  // 监听外部传入的 expandedRowKeys 变化
+  if (expandedRowKeys) {
+    watch(expandedRowKeys, function (newKeys) {
+      internalExpandedKeys.value = new Set(newKeys);
+    });
+  }
+  return {
+    flattenedData: flattenedData,
+    nodeMap: nodeMap,
+    expandedKeys: internalExpandedKeys,
+    expand: expand,
+    collapse: collapse,
+    toggle: toggle,
+    expandAll: expandAll,
+    collapseAll: collapseAll,
+    getRowKey: getRowKey,
+    isExpanded: isExpanded,
+    getAncestorKeys: getAncestorKeys,
+    expandTo: expandTo
+  };
+}

package/es/VirtualTable/useVirtualScroll.js

@@ -0,0 +1,159 @@
+import { computed, ref, watch, isRef } from 'vue';
+/**
+ * 虚拟滚动 Hook
+ */
+export function useVirtualScroll(options) {
+  var itemCount = options.itemCount,
+    containerHeightOption = options.containerHeight,
+    _options$itemHeight = options.itemHeight,
+    itemHeight = _options$itemHeight === void 0 ? 54 : _options$itemHeight,
+    _options$overscan = options.overscan,
+    overscan = _options$overscan === void 0 ? 5 : _options$overscan,
+    _options$threshold = options.threshold,
+    threshold = _options$threshold === void 0 ? 100 : _options$threshold;
+  // 容器高度（支持响应式）
+  var containerHeight = computed(function () {
+    if (isRef(containerHeightOption)) {
+      return containerHeightOption.value;
+    }
+    return containerHeightOption;
+  });
+  // 滚动位置
+  var scrollTop = ref(0);
+  // 动态行高缓存
+  var itemHeights = ref(new Map());
+  /**
+   * 获取指定索引的行高
+   */
+  var getItemHeight = function getItemHeight(index) {
+    // 优先使用缓存的高度
+    if (itemHeights.value.has(index)) {
+      return itemHeights.value.get(index);
+    }
+    // 使用配置的高度
+    if (typeof itemHeight === 'function') {
+      return itemHeight(index);
+    }
+    return itemHeight;
+  };
+  /**
+   * 设置行高（用于动态测量）
+   */
+  var setItemHeight = function setItemHeight(index, height) {
+    if (height > 0 && itemHeights.value.get(index) !== height) {
+      itemHeights.value.set(index, height);
+    }
+  };
+  /**
+   * 计算总高度
+   */
+  var totalHeight = computed(function () {
+    var total = 0;
+    for (var i = 0; i < itemCount.value; i++) {
+      total += getItemHeight(i);
+    }
+    return total;
+  });
+  /**
+   * 计算可视范围的起始索引
+   */
+  var startIndex = computed(function () {
+    if (itemCount.value < threshold) {
+      return 0;
+    }
+    var accumulated = 0;
+    for (var i = 0; i < itemCount.value; i++) {
+      var height = getItemHeight(i);
+      if (accumulated + height > scrollTop.value) {
+        return Math.max(0, i - overscan);
+      }
+      accumulated += height;
+    }
+    return 0;
+  });
+  /**
+   * 计算可视范围的结束索引
+   */
+  var endIndex = computed(function () {
+    if (itemCount.value < threshold) {
+      return itemCount.value;
+    }
+    var start = startIndex.value;
+    var accumulated = 0;
+    // 从起始索引开始累加
+    for (var i = 0; i < start; i++) {
+      accumulated += getItemHeight(i);
+    }
+    for (var _i = start; _i < itemCount.value; _i++) {
+      accumulated += getItemHeight(_i);
+      if (accumulated > scrollTop.value + containerHeight.value) {
+        return Math.min(itemCount.value, _i + 1 + overscan);
+      }
+    }
+    return itemCount.value;
+  });
+  /**
+   * 顶部偏移量
+   */
+  var offsetY = computed(function () {
+    var offset = 0;
+    for (var i = 0; i < startIndex.value; i++) {
+      offset += getItemHeight(i);
+    }
+    return offset;
+  });
+  /**
+   * 可见行数
+   */
+  var visibleCount = computed(function () {
+    return endIndex.value - startIndex.value;
+  });
+  /**
+   * 处理滚动事件
+   */
+  var handleScroll = function handleScroll(e) {
+    var target = e.target;
+    if (target) {
+      scrollTop.value = target.scrollTop;
+    }
+  };
+  /**
+   * 滚动到指定位置
+   */
+  var scrollTo = function scrollTo(offset) {
+    scrollTop.value = Math.max(0, Math.min(offset, totalHeight.value - containerHeight.value));
+  };
+  /**
+   * 滚动到指定索引
+   */
+  var scrollToIndex = function scrollToIndex(index) {
+    if (index < 0 || index >= itemCount.value) {
+      return;
+    }
+    var offset = 0;
+    for (var i = 0; i < index; i++) {
+      offset += getItemHeight(i);
+    }
+    scrollTo(offset);
+  };
+  // 数据变化时重置滚动位置
+  watch(itemCount, function () {
+    var maxScroll = Math.max(0, totalHeight.value - containerHeight.value);
+    if (scrollTop.value > maxScroll) {
+      scrollTop.value = maxScroll;
+    }
+  });
+  return {
+    startIndex: startIndex,
+    endIndex: endIndex,
+    offsetY: offsetY,
+    totalHeight: totalHeight,
+    visibleCount: visibleCount,
+    scrollTop: scrollTop,
+    scrollTo: scrollTo,
+    scrollToIndex: scrollToIndex,
+    handleScroll: handleScroll,
+    getItemHeight: getItemHeight,
+    setItemHeight: setItemHeight
+  };
+}

package/lib/EditTable/CellRender.js

@@ -1,11 +1,77 @@
+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: {} */
-import { defineComponent } from 'vue';
+import { defineComponent, h, shallowRef, } from 'vue';
+/**
+ * CellRender - 优化的单元格渲染组件
+ * 使用 shallowRef 和手动更新检查来避免不必要的重渲染
+ */
 const __sfc_main__ = defineComponent({
     name: "CellRender",
-    props: ['renderFn', 'value', 'record', 'index'],
+    props: {
+        renderFn: {
+            type: Function,
+            required: true
+        },
+        value: null,
+        record: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            required: true
+        }
+    },
     setup(props) {
+        // 使用 shallowRef 避免深度响应式
+        const cachedResult = shallowRef(null);
+        const lastValue = shallowRef(undefined);
+        const lastRecordId = shallowRef(undefined);
+        // 手动检查是否需要重新渲染
+        const shouldUpdate = () => {
+            // 检查 value 是否变化
+            if (props.value !== lastValue.value) {
+                return true;
+            }
+            // 检查 record 的关键属性是否变化（假设有 id 或 key）
+            const currentRecordId = _optionalChain([(props.record), 'optionalAccess', _ => _.id]) || _optionalChain([(props.record), 'optionalAccess', _2 => _2.key]);
+            if (currentRecordId !== lastRecordId.value) {
+                return true;
+            }
+            return false;
+        };
+        // 执行渲染函数
+        const render = () => {
+            if (shouldUpdate() || cachedResult.value === null) {
+                lastValue.value = props.value;
+                lastRecordId.value = _optionalChain([(props.record), 'optionalAccess', _3 => _3.id]) || _optionalChain([(props.record), 'optionalAccess', _4 => _4.key]);
+                try {
+                    cachedResult.value = props.renderFn(props.value, props.record, props.index);
+                }
+                catch (error) {
+                    console.error('[CellRender] Render error:', error);
+                    cachedResult.value = null;
+                }
+            }
+            return cachedResult.value;
+        };
         return () => {
-            return props.renderFn(props.value, props.record, props.index);
+            return h('div', { class: 'cell-render-wrapper' }, [render()]);
         };
     }
 });