feat(virtual-list): 虚拟列表组件

packages/devui-vue/devui/virtual-list/__tests__/index.spec.ts

@@ -0,0 +1,8 @@
+import { mount } from '@vue/test-utils';
+import { VirtualList } from '../index';
+
+describe('VirtualList test', () => {
+  it('VirtualList init render', async () => {
+    // todo
+  });
+});

packages/devui-vue/devui/virtual-list/index.ts

@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+import VirtualList from './src/virtual-list';
+
+export { VirtualList };
+
+export default {
+  title: 'VirtualList 虚拟列表',
+  category: '通用',
+  status: '10%',
+  install(app: App): void {
+    app.use(VirtualList as any);
+    app.component(VirtualList.name, VirtualList);
+  }
+};

packages/devui-vue/devui/virtual-list/src/components/filler.tsx

@@ -0,0 +1,45 @@
+import type { CSSProperties, SetupContext } from 'vue';
+import { defineComponent, ref, watch, toRefs } from 'vue';
+import { virtualListFllterProps } from '../virtual-list-types';
+import ResizeObserver from './resize-observer';
+
+const INIT_INNER_STYLE: CSSProperties = { display: 'flex', flexDirection: 'column' };
+
+export default defineComponent({
+  name: 'DVirtualListFiller',
+  props: virtualListFllterProps,
+  setup(props, ctx: SetupContext) {
+    const { height, offset } = toRefs(props);
+    const outerStyle = ref<CSSProperties>({});
+    const innerStyle = ref<CSSProperties>(INIT_INNER_STYLE);
+    watch([() => height.value, () => offset.value], () => {
+      if (props.offset !== undefined) {
+        outerStyle.value = { height: `${height.value}px`, position: 'relative', overflow: 'hidden' };
+        innerStyle.value = {
+          ...innerStyle.value,
+          transform: `translateY(${offset.value}px)`,
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: 0,
+        };
+      }
+    });
+
+    return () => (
+      <div style={outerStyle.value}>
+        <ResizeObserver
+          onResize={({ offsetHeight }) => {
+            if (offsetHeight && props.onInnerResize) {
+              props.onInnerResize();
+            }
+          }}
+        >
+          <div style={innerStyle.value}>
+            {ctx.slots.default?.()}
+          </div>
+        </ResizeObserver>
+      </div>
+    );
+  }
+});

packages/devui-vue/devui/virtual-list/src/components/item.tsx

@@ -0,0 +1,45 @@
+import type { FunctionalComponent, PropType, VNodeProps, Slots, VNode } from 'vue';
+import { cloneVNode } from 'vue';
+import { flattenChildren } from '../utils';
+import { RenderFunc, SharedConfig } from '../virtual-list-types';
+
+
+export interface ItemProps {
+  setRef: (element: HTMLElement & { $el: never }) => void;
+}
+
+const Item: FunctionalComponent<ItemProps> = ({ setRef }, { slots }) => {
+  const children = flattenChildren((slots as Slots).default?.());
+
+  return children && children.length
+    ? cloneVNode(children[0], { ref: setRef as VNodeProps['ref'], })
+    : children;
+};
+Item.props = {
+  setRef: {
+    type: Function as PropType<(element: HTMLElement) => void>,
+  },
+};
+
+export function renderChildren<T>(
+  list: T[],
+  startIndex: number,
+  endIndex: number,
+  setNodeRef: (item: T, element: HTMLElement & { $el: never }) => void,
+  { getKey }: SharedConfig<T>,
+  renderFunc: RenderFunc<T>,
+): string | VNode[] {
+  if (renderFunc === undefined) { return ''; }
+  return list.slice(startIndex, endIndex + 1).map((item, index) => {
+    const eleIndex = startIndex + index;
+    const node = renderFunc(item, eleIndex, {});
+    const key = getKey(item);
+    return (
+      <Item key={key} setRef={(ele: HTMLElement & { $el: never }) => setNodeRef(item, ele)}>
+        {node}
+      </Item>
+    );
+  });
+}
+
+export default Item;

packages/devui-vue/devui/virtual-list/src/components/resize-observer.tsx

@@ -0,0 +1,103 @@
+import type { ComponentInternalInstance, VNode } from 'vue';
+import { defineComponent, reactive, ref, getCurrentInstance, onMounted, onUpdated, onUnmounted } from 'vue';
+import { findDOMNode } from '../utils';
+import { resizeObserverProps } from '../virtual-list-types';
+
+interface ResizeObserverState {
+  height: number;
+  width: number;
+  offsetHeight: number;
+  offsetWidth: number;
+}
+
+
+export default defineComponent({
+  name: 'ResizeObserver',
+  props: resizeObserverProps,
+  emits: ['resize'],
+  setup(props, { slots }) {
+
+    const state = reactive<ResizeObserverState>({
+      width: 0,
+      height: 0,
+      offsetHeight: 0,
+      offsetWidth: 0,
+    });
+    const currentElement = ref<Element | null>(null);
+    const resizeObserver = ref<ResizeObserver | null>(null);
+    const destroyObserver = () => {
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
+        resizeObserver.value = null;
+      }
+    };
+
+    const onTriggerResize: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
+      const { onResize } = props;
+
+      const target = entries[0].target as HTMLElement;
+
+      const { width, height } = target.getBoundingClientRect();
+      const { offsetWidth, offsetHeight } = target;
+
+      const fixedWidth = Math.floor(width);
+      const fixedHeight = Math.floor(height);
+
+      if (
+        state.width !== fixedWidth ||
+        state.height !== fixedHeight ||
+        state.offsetWidth !== offsetWidth ||
+        state.offsetHeight !== offsetHeight
+      ) {
+        const size = { width: fixedWidth, height: fixedHeight, offsetWidth, offsetHeight };
+
+        Object.assign(state, size);
+        if (onResize) {
+          Promise.resolve().then(() => {
+            onResize(
+              {
+                ...size,
+                offsetWidth,
+                offsetHeight,
+              },
+              target,
+            );
+          });
+        }
+      }
+    };
+    const instance = getCurrentInstance();
+    const registerObserver = () => {
+      const { disabled } = props;
+      if (disabled) {
+        destroyObserver();
+        return;
+      }
+      if (instance) {
+        const element = findDOMNode(instance as ComponentInternalInstance & { $el: VNode['el'] }) as Element;
+        const elementChanged = element !== currentElement.value;
+        if (elementChanged) {
+          destroyObserver();
+          currentElement.value = element;
+        }
+
+        if (!resizeObserver.value && element) {
+          resizeObserver.value = new ResizeObserver(onTriggerResize);
+          resizeObserver.value.observe(element);
+        }
+      }
+    };
+    onMounted(() => {
+      registerObserver();
+    });
+    onUpdated(() => {
+      registerObserver();
+    });
+    onUnmounted(() => {
+      destroyObserver();
+    });
+    return () => {
+      return slots.default?.()[0];
+    };
+  }
+});