@king-design/vue 3.4.5 → 3.5.0

package/components/virtualList/useVirtualRows.js

@@ -0,0 +1,120 @@
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { createContext } from '../context';
+import { useState, watchState } from '../../hooks/useState';
+import { useInstance, nextTick, onMounted, onUnmounted, findDomFromVNode } from 'intact-vue-next';
+import { isNullOrUndefined } from 'intact-shared';
+export var context = createContext();
+var MIN_LENGTH = 10;
+var BUFFER_SIZE = 3;
+export function useVirtualRows() {
+  var instance = useInstance();
+  var rowsHeightMap = new _Map();
+  var startIndex = useState(0);
+  var length = useState(MIN_LENGTH);
+  var calculatedHeight = 0;
+  var rowAvgHeight = 0;
+  var rows = [];
+  function notifyRows(_rows) {
+    var oldRows = rows;
+    var oldLength = rows.length;
+    rows = _rows;
+    // diff oldRows, newRows
+    var newKeys = new _Set(_mapInstanceProperty(_rows).call(_rows, function (row) {
+      return row.key;
+    }));
+    for (var i = 0; i < oldLength; i++) {
+      var oldKey = oldRows[i].key;
+      if (!newKeys.has(oldKey)) {
+        var height = rowsHeightMap.get(oldKey);
+        if (!isNullOrUndefined(height)) {
+          calculatedHeight -= height;
+          rowsHeightMap.delete(oldKey);
+        }
+      }
+    }
+    // update rowAvgHeight
+    if (rowsHeightMap.size === 0) {
+      rowAvgHeight = calculatedHeight = 0;
+    } else {
+      rowAvgHeight = calculatedHeight / rowsHeightMap.size;
+    }
+    if (_rows.length < oldLength) {
+      var maxStartIndex = Math.max(0, _rows.length - length.value);
+      if (startIndex.value > maxStartIndex) {
+        startIndex.set(maxStartIndex);
+        // 重新计算位置
+        nextTick(function () {
+          handleScroll();
+        });
+      }
+    }
+  }
+  function calculateRowsHeight() {
+    for (var i = startIndex.value; i < startIndex.value + length.value && i < rows.length; i++) {
+      var row = rows[i];
+      var key = row.key;
+      if (!rowsHeightMap.has(key)) {
+        var rowDom = findDomFromVNode(row, true);
+        var height = rowDom.offsetHeight;
+        rowsHeightMap.set(key, height);
+        calculatedHeight += height;
+      }
+    }
+    // use the average height to estimate the row height
+    rowAvgHeight = calculatedHeight / rowsHeightMap.size;
+  }
+  watchState(startIndex, function () {
+    nextTick(calculateRowsHeight);
+  });
+  var containerDom;
+  onMounted(function () {
+    // get contains height
+    containerDom = findDomFromVNode(instance.$lastInput, true);
+    var containerHeight = containerDom.offsetHeight;
+    calculateRowsHeight();
+    // calculate the length of rows we should render
+    length.set(Math.max(Math.ceil(containerHeight / rowAvgHeight) + BUFFER_SIZE * 2, MIN_LENGTH));
+    containerDom.addEventListener('scroll', handleScroll);
+  });
+  onUnmounted(function () {
+    containerDom.removeEventListener('scroll', handleScroll);
+  });
+  function getTotalHeight() {
+    return calculatedHeight + rowAvgHeight * (rows.length - rowsHeightMap.size);
+  }
+  var translateY = useState(0);
+  function handleScroll() {
+    var _instance$get = instance.get(),
+      disabled = _instance$get.disabled;
+    if (disabled) return;
+    var scrollTop = containerDom.scrollTop;
+    var accumulatedHeight = 0;
+    var start = 0;
+    while (start < rows.length) {
+      accumulatedHeight += getRowHeightByIndex(start);
+      if (accumulatedHeight > scrollTop) {
+        break;
+      }
+      start++;
+    }
+    startIndex.set(Math.max(start - BUFFER_SIZE, 0));
+    // translateY should substract the buffer size rows height
+    for (var i = start; i >= startIndex.value; i--) {
+      accumulatedHeight -= getRowHeightByIndex(i);
+    }
+    translateY.set(accumulatedHeight);
+  }
+  function getRowHeightByIndex(index) {
+    var key = rows[index].key;
+    return rowsHeightMap.get(key) || rowAvgHeight;
+  }
+  return {
+    notifyRows: notifyRows,
+    startIndex: startIndex,
+    length: length,
+    getTotalHeight: getTotalHeight,
+    translateY: translateY
+  };
+}

package/components/virtualList/virtual.d.ts

@@ -0,0 +1,8 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export interface VirtualListProps {
+    disabled?: boolean;
+}
+export declare class VirtualList extends Component<VirtualListProps> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<VirtualListProps>>;
+}

package/components/virtualList/virtual.js

@@ -0,0 +1,15 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-vue-next';
+import template from './virtual.vdt';
+var typeDefs = {
+  disabled: Boolean
+};
+export var VirtualList = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(VirtualList, _Component);
+  function VirtualList() {
+    return _Component.apply(this, arguments) || this;
+  }
+  return VirtualList;
+}(Component);
+VirtualList.template = template;
+VirtualList.typeDefs = typeDefs;

package/components/virtualList/virtual.vdt.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { getRestProps } from '../utils';
+import { VirtualListContainer } from './container';
+import { VirtualListWrapper } from './wrapper';
+import { VirtualListRows } from './rows';
+import { VirtualListPhantom } from './phantom';
+export default function ($props, $blocks, $__proto__) {
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    children = _this$get.children,
+    disabled = _this$get.disabled;
+  if (disabled) {
+    return children;
+  }
+  return _$cc(VirtualListContainer, _extends({}, getRestProps(this), {
+    'children': [_$cc(VirtualListPhantom), _$cc(VirtualListWrapper, {
+      'children': _$cc(VirtualListRows, {
+        'children': children
+      })
+    })]
+  }));
+}
+;

package/components/virtualList/wrapper.d.ts

@@ -0,0 +1,9 @@
+import { Component, TypeDefs, ComponentConstructor } from 'intact-vue-next';
+export interface VirtualListWrapperProps {
+    tagName?: string | ComponentConstructor;
+}
+export declare class VirtualListWrapper extends Component<VirtualListWrapperProps> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<VirtualListWrapperProps>>;
+    private config;
+}

package/components/virtualList/wrapper.js

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './wrapper.vdt';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  tagName: String
+};
+export var VirtualListWrapper = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(VirtualListWrapper, _Component);
+  function VirtualListWrapper() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
+  }
+  return VirtualListWrapper;
+}(Component);
+VirtualListWrapper.template = template;
+VirtualListWrapper.typeDefs = typeDefs;

package/components/virtualList/wrapper.vdt.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { addStyle, getRestProps } from '../utils';
+import { context as VirtualRowsContext } from './useVirtualRows';
+import { createVNode } from 'intact-vue-next';
+import { cx } from '@emotion/css';
+export default function ($props, $blocks, $__proto__) {
+  var _this = this;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    _children = _this$get.children,
+    className = _this$get.className,
+    tagName = _this$get.tagName,
+    style = _this$get.style;
+  var k = this.config.k;
+  return _$cc(VirtualRowsContext.Consumer, {
+    'children': function children(_ref) {
+      var _classNameObj;
+      var translateY = _ref.translateY,
+        disabled = _ref.disabled;
+      var classNameObj = (_classNameObj = {}, _classNameObj[k + "-virtual-wrapper"] = !disabled, _classNameObj[className] = className, _classNameObj);
+      var _style = !disabled ? {
+        transform: "translateY(" + translateY + "px)"
+      } : {};
+      return createVNode(tagName || 'div', _extends({}, getRestProps(_this), {
+        className: cx(classNameObj),
+        style: addStyle(style, _style)
+      }), _children);
+    }
+  });
+}
+;

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.4.5
+ * @king-design v3.5.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -63,8 +63,9 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
+export * from './components/virtualList';
 export * from './components/wave';
-export declare const version = "3.4.5";
+export declare const version = "3.5.0";
 
 
 export {normalize} from 'intact-vue-next';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.4.5
+ * @king-design v3.5.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -64,8 +64,9 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
+export * from './components/virtualList';
 export * from './components/wave';
-export var version = '3.4.5';
+export var version = '3.5.0';
 /* generate end */
 
 export {normalize} from 'intact-vue-next';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/vue",
-  "version": "3.4.5",
+  "version": "3.5.0",
   "description": "King-Design UI components for Vue3.0.",
   "keywords": [
     "component",