@sdata/web-vue 1.9.0 → 1.11.0

package/es/_components/transition/expand-transition.vue.d.ts

@@ -1,10 +1,10 @@
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{}, {
-    onBeforeEnter(el: HTMLDivElement): void;
-    onEnter(el: HTMLDivElement): void;
-    onAfterEnter(el: HTMLDivElement): void;
-    onBeforeLeave(el: HTMLDivElement): void;
-    onLeave(el: HTMLDivElement): void;
-    onAfterLeave(el: HTMLElement): void;
+    onBeforeEnter(el: Element): void;
+    onEnter(el: Element): void;
+    onAfterEnter(el: Element): void;
+    onBeforeLeave(el: Element): void;
+    onLeave(el: Element): void;
+    onAfterLeave(el: Element): void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/_components/transition/expand-transition.vue_vue_type_script_lang.js

@@ -1,26 +1,33 @@
 import { defineComponent } from "vue";
 //#region components/_components/transition/expand-transition.vue?vue&type=script&lang.ts
+var toHTMLElement = (element) => element;
 var expand_transition_vue_vue_type_script_lang_default = defineComponent({
 	name: "ExpandTransition",
 	setup() {
 		return {
 			onBeforeEnter(el) {
-				el.style.height = "0";
+				const element = toHTMLElement(el);
+				element.style.height = "0";
 			},
 			onEnter(el) {
-				el.style.height = `${el.scrollHeight}px`;
+				const element = toHTMLElement(el);
+				element.style.height = `${element.scrollHeight}px`;
 			},
 			onAfterEnter(el) {
-				el.style.height = "";
+				const element = toHTMLElement(el);
+				element.style.height = "";
 			},
 			onBeforeLeave(el) {
-				el.style.height = `${el.scrollHeight}px`;
+				const element = toHTMLElement(el);
+				element.style.height = `${element.scrollHeight}px`;
 			},
 			onLeave(el) {
-				el.style.height = `0`;
+				const element = toHTMLElement(el);
+				element.style.height = `0`;
 			},
 			onAfterLeave(el) {
-				el.style.height = ``;
+				const element = toHTMLElement(el);
+				element.style.height = ``;
 			}
 		};
 	}

package/es/_components/virtual-list/index.js

@@ -0,0 +1,5 @@
+import virtual_list_default$1 from "./virtual-list.js";
+//#region components/_components/virtual-list/index.ts
+var virtual_list_default = virtual_list_default$1;
+//#endregion
+export { virtual_list_default as default };

package/es/_components/virtual-list/interface.d.ts

@@ -1,4 +1,6 @@
-import { VNode } from 'vue';
+import type { CacheSnapshot, ClassValue, ItemSizeValue, KeyFieldValue, ScrollAlign, ScrollDirection, ScrollToOptions } from 'vue-virtual-scroller';
+import type { CSSProperties, VNode } from 'vue';
+import type { ScrollbarProps } from '../../scrollbar';
 export type VirtualItemKey = string | number;
 export interface InternalDataItem {
     key: VirtualItemKey;
@@ -12,22 +14,71 @@ export type ItemSlot = (props: {
 export interface ScrollIntoViewOptions {
     index?: number;
     key?: VirtualItemKey;
-    align: 'auto' | 'top' | 'bottom';
+    align?: 'auto' | 'top' | 'bottom' | ScrollAlign;
 }
-export interface VirtualListProps {
-    height: number | string;
-    threshold?: number | null;
-    isStaticItemHeight?: boolean;
-    estimatedItemHeight?: number;
-    data?: unknown[];
-    itemKey?: string;
-    component?: keyof HTMLElementTagNameMap;
+interface VirtualListCommonProps<TItem = unknown> {
+    items?: TItem[];
+    height?: number | string;
+    itemSize?: ItemSizeValue<TItem>;
+    minItemSize?: number | string | null;
+    keyField?: KeyFieldValue<any>;
+    direction?: ScrollDirection;
+    pageMode?: boolean;
+    listTag?: string;
+    itemTag?: string;
+    shift?: boolean;
+    cache?: CacheSnapshot;
+    disableTransform?: boolean;
+    flowMode?: boolean;
+    hiddenPosition?: number;
+    enabled?: boolean;
+    scrollbar?: boolean | ScrollbarProps;
+    threshold?: number;
+    fixedSize?: boolean;
+    estimatedSize?: number;
+    component?: keyof HTMLElementTagNameMap | Record<string, unknown>;
+    listAttrs?: Record<string, unknown>;
+    contentWrapperAttrs?: Record<string, unknown>;
+    contentAttrs?: Record<string, unknown>;
+    listStyle?: CSSProperties;
+    paddingPosition?: 'content' | 'list';
 }
+export interface VirtualListRecycleProps<TItem = unknown> extends VirtualListCommonProps<TItem> {
+    gridItems?: number;
+    itemSecondarySize?: number;
+    sizeField?: string;
+    typeField?: string;
+    buffer?: number;
+    prerender?: number;
+    emitUpdate?: boolean;
+    updateInterval?: number;
+    skipHover?: boolean;
+    listClass?: ClassValue;
+    itemClass?: ClassValue;
+}
+export interface VirtualListDynamicProps<TItem = unknown> extends VirtualListCommonProps<TItem> {
+    minItemSize: number | string;
+}
+export type VirtualListProps<TItem = unknown> = VirtualListRecycleProps<TItem> | VirtualListDynamicProps<TItem>;
 export type ScrollOptions = number | {
     index?: number;
     key?: VirtualItemKey;
-    align?: 'auto' | 'top' | 'bottom';
+    align?: 'auto' | 'top' | 'bottom' | ScrollAlign;
+    smooth?: boolean;
+    offset?: number;
 };
 export interface VirtualListRef {
+    scrollToItem: (index: number, options?: ScrollToOptions) => void;
+    scrollToPosition: (position: number, options?: ScrollToOptions) => void;
+    findItemIndex: (offset: number) => number;
+    getItemOffset: (index: number) => number;
+    getItemSize: (index: number) => number;
+    cacheSnapshot: () => CacheSnapshot | undefined;
+    restoreCache: (snapshot: CacheSnapshot | null | undefined) => boolean;
+    updateVisibleItems?: (itemsChanged: boolean, checkPositionDiff?: boolean) => void;
+    scrollToBottom?: () => void;
+    forceUpdate?: (clear?: boolean) => void;
+    getDynamicItemSize?: (item: unknown, index?: number) => number;
     scrollTo: (options: ScrollOptions) => void;
 }
+export {};

package/es/_components/virtual-list/style/index.scss

@@ -0,0 +1 @@
+@import url('vue-virtual-scroller/dist/vue-virtual-scroller.css');

package/es/_components/{virtual-list-v2/hooks/use-size.d.ts → virtual-list/use-virtual-size.d.ts}

@@ -1,10 +1,10 @@
-import { Ref } from 'vue';
-export declare const useSize: ({ dataKeys, contentRef: _contentRef, fixedSize, estimatedSize, buffer, }: {
+import { type Ref } from 'vue';
+export declare const useVirtualSize: ({ dataKeys, fixedSize, estimatedSize, overscan, visibleCount, }: {
     dataKeys: Ref<(string | number)[]>;
-    contentRef: Ref<HTMLElement | undefined>;
     fixedSize: Ref<boolean>;
     estimatedSize: Ref<number | undefined>;
-    buffer: Ref<number>;
+    overscan: Ref<number>;
+    visibleCount: Ref<number>;
 }) => {
     frontPadding: import("vue").ComputedRef<number>;
     behindPadding: import("vue").ComputedRef<number>;
@@ -15,4 +15,5 @@ export declare const useSize: ({ dataKeys, contentRef: _contentRef, fixedSize, e
     hasItemSize: (key: string | number) => boolean;
     setStart: (index: number) => void;
     getScrollOffset: (index: number) => number;
+    getItemSize: (index: number) => number;
 };

package/es/_components/virtual-list/use-virtual-size.js

@@ -0,0 +1,94 @@
+import { computed, onMounted, ref } from "vue";
+//#region components/_components/virtual-list/use-virtual-size.ts
+var useVirtualSize = ({ dataKeys, fixedSize, estimatedSize, overscan, visibleCount }) => {
+	const firstRangeAverageSize = ref(0);
+	const sizeMap = /* @__PURE__ */ new Map();
+	const fallbackEstimatedSize = computed(() => {
+		var _estimatedSize$value;
+		return (_estimatedSize$value = estimatedSize.value) !== null && _estimatedSize$value !== void 0 ? _estimatedSize$value : 30;
+	});
+	const total = computed(() => dataKeys.value.length);
+	const start = ref(0);
+	const range = computed(() => {
+		return Math.max(visibleCount.value + overscan.value * 2, 1);
+	});
+	const end = computed(() => {
+		const nextEnd = start.value + range.value;
+		if (nextEnd > total.value) return total.value;
+		return nextEnd;
+	});
+	const maxStart = computed(() => {
+		const max = total.value - range.value;
+		if (max < 0) return 0;
+		return max;
+	});
+	const setStart = (index) => {
+		if (index < 0) start.value = 0;
+		else if (index > maxStart.value) start.value = maxStart.value;
+		else start.value = index;
+	};
+	const isFixed = ref(fixedSize.value);
+	const resolvedEstimatedSize = computed(() => {
+		if (fallbackEstimatedSize.value !== 30) return fallbackEstimatedSize.value;
+		return firstRangeAverageSize.value || fallbackEstimatedSize.value;
+	});
+	const setItemSize = (key, size) => {
+		sizeMap.set(key, size);
+	};
+	const getItemSize = (index) => {
+		var _sizeMap$get;
+		if (isFixed.value) return resolvedEstimatedSize.value;
+		const key = dataKeys.value[index];
+		if (key === void 0) return resolvedEstimatedSize.value;
+		return (_sizeMap$get = sizeMap.get(key)) !== null && _sizeMap$get !== void 0 ? _sizeMap$get : resolvedEstimatedSize.value;
+	};
+	const hasItemSize = (key) => {
+		return sizeMap.has(key);
+	};
+	onMounted(() => {
+		const firstRangeTotalSize = Array.from(sizeMap.values()).reduce((sum, value) => sum + value, 0);
+		if (firstRangeTotalSize > 0) firstRangeAverageSize.value = firstRangeTotalSize / sizeMap.size;
+	});
+	const getOffset = (startIndex, endIndex) => {
+		let offset = 0;
+		for (let index = startIndex; index < endIndex; index++) offset += getItemSize(index);
+		return offset;
+	};
+	const getScrollOffset = (index) => {
+		if (isFixed.value) return resolvedEstimatedSize.value * index;
+		return getOffset(0, index);
+	};
+	const frontPadding = computed(() => {
+		if (isFixed.value) return resolvedEstimatedSize.value * start.value;
+		return getOffset(0, start.value);
+	});
+	const getStartByScroll = (scrollOffset) => {
+		let offset = scrollOffset;
+		let anchorIndex = 0;
+		while (offset > 0 && anchorIndex < total.value) {
+			offset -= getItemSize(anchorIndex);
+			anchorIndex += 1;
+		}
+		const nextStart = anchorIndex - overscan.value;
+		if (nextStart < 0) return 0;
+		if (nextStart > maxStart.value) return maxStart.value;
+		return nextStart;
+	};
+	return {
+		frontPadding,
+		behindPadding: computed(() => {
+			if (isFixed.value) return resolvedEstimatedSize.value * (total.value - end.value);
+			return getOffset(end.value, total.value);
+		}),
+		start,
+		end,
+		getStartByScroll,
+		setItemSize,
+		hasItemSize,
+		setStart,
+		getScrollOffset,
+		getItemSize
+	};
+};
+//#endregion
+export { useVirtualSize };

package/es/_components/virtual-list/virtual-list.js

@@ -0,0 +1,122 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import virtual_list_vue_vue_type_script_lang_default from "./virtual-list.vue_vue_type_script_lang.js";
+/* empty css                                             */
+import { Fragment, createBlock, createElementBlock, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toHandlers, withCtx } from "vue";
+//#region components/_components/virtual-list/virtual-list.vue
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	const _component_DynamicScrollerItem = resolveComponent("DynamicScrollerItem");
+	return openBlock(), createElementBlock("div", {
+		ref: "scrollbarHostRef",
+		class: normalizeClass(_ctx.hostClassNames),
+		style: normalizeStyle(_ctx.containerOuterStyle)
+	}, [_ctx.isCompatMode ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.container), {
+		key: 0,
+		ref: "viewportRef",
+		class: normalizeClass(`${_ctx.prefixCls}-scroller`),
+		style: normalizeStyle(_ctx.compatViewportStyle),
+		onScroll: _ctx.onCompatScroll
+	}, {
+		default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.list), mergeProps(_ctx.props.listAttrs, { style: _ctx.compatListStyle }), {
+			default: withCtx(() => [
+				renderSlot(_ctx.$slots, "before"),
+				_ctx.hasCompatContentWrapper ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.content), mergeProps({ key: 0 }, _ctx.props.contentWrapperAttrs, { style: _ctx.compatContentWrapperStyle }), {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.compatCurrentList, (item, index) => {
+						return openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.item), mergeProps({ key: _ctx.getCompatItemKey(item, _ctx.compatStart + index) }, { ref_for: true }, _ctx.props.contentAttrs, {
+							ref_for: true,
+							ref: (element) => _ctx.setCompatItemRef(_ctx.getCompatItemKey(item, _ctx.compatStart + index), element),
+							style: _ctx.getCompatContentStyle(index)
+						}), {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+								item,
+								index: _ctx.compatStart + index,
+								active: true,
+								itemWithSize: void 0
+							}, () => [renderSlot(_ctx.$slots, "default", {
+								item,
+								index: _ctx.compatStart + index,
+								active: true,
+								itemWithSize: void 0
+							})])]),
+							_: 2
+						}, 1040, ["style"]);
+					}), 128))]),
+					_: 3
+				}, 16, ["style"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.compatCurrentList, (item, index) => {
+					return openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.content), mergeProps({ key: _ctx.getCompatItemKey(item, _ctx.compatStart + index) }, { ref_for: true }, _ctx.props.contentAttrs, {
+						ref_for: true,
+						ref: (element) => _ctx.setCompatItemRef(_ctx.getCompatItemKey(item, _ctx.compatStart + index), element),
+						style: _ctx.getCompatContentStyle(index)
+					}), {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+							item,
+							index: _ctx.compatStart + index,
+							active: true,
+							itemWithSize: void 0
+						}, () => [renderSlot(_ctx.$slots, "default", {
+							item,
+							index: _ctx.compatStart + index,
+							active: true,
+							itemWithSize: void 0
+						})])]),
+						_: 2
+					}, 1040, ["style"]);
+				}), 128)),
+				renderSlot(_ctx.$slots, "after")
+			]),
+			_: 3
+		}, 16, ["style"]))]),
+		_: 3
+	}, 40, [
+		"class",
+		"style",
+		"onScroll"
+	])) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.currentScroller), mergeProps({
+		key: 1,
+		ref: "scrollerRef",
+		class: `${_ctx.prefixCls}-scroller`,
+		style: _ctx.scrollerStyle
+	}, _ctx.scrollerProps, toHandlers(_ctx.scrollerListeners)), {
+		before: withCtx(() => [renderSlot(_ctx.$slots, "before")]),
+		default: withCtx((slotProps) => [_ctx.isDynamicScroller ? (openBlock(), createBlock(_component_DynamicScrollerItem, {
+			key: 0,
+			item: slotProps.item,
+			active: slotProps.active,
+			index: slotProps.index,
+			"size-dependencies": null
+		}, {
+			default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+				item: slotProps.item,
+				index: slotProps.index,
+				active: slotProps.active,
+				itemWithSize: _ctx.getSlotItemWithSize(slotProps)
+			}, () => [renderSlot(_ctx.$slots, "default", {
+				item: slotProps.item,
+				index: slotProps.index,
+				active: slotProps.active,
+				itemWithSize: _ctx.getSlotItemWithSize(slotProps)
+			})])]),
+			_: 2
+		}, 1032, [
+			"item",
+			"active",
+			"index"
+		])) : renderSlot(_ctx.$slots, "item", {
+			key: 1,
+			item: slotProps.item,
+			index: slotProps.index,
+			active: slotProps.active,
+			itemWithSize: _ctx.getSlotItemWithSize(slotProps)
+		}, () => [renderSlot(_ctx.$slots, "default", {
+			item: slotProps.item,
+			index: slotProps.index,
+			active: slotProps.active,
+			itemWithSize: _ctx.getSlotItemWithSize(slotProps)
+		})])]),
+		empty: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+		after: withCtx(() => [renderSlot(_ctx.$slots, "after")]),
+		_: 3
+	}, 16, ["class", "style"]))], 6);
+}
+var virtual_list_default = /* @__PURE__ */ _plugin_vue_export_helper_default(virtual_list_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+//#endregion
+export { virtual_list_default as default };