@pixelium/web-vue 0.0.2 → 0.0.3-beta

package/es/virtual-list/index.js

@@ -0,0 +1,313 @@
+import './css.js'
+import { B as y } from "../vendor.js";
+import { n as inVitest } from "../share/util/env.js";
+import { t as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { Fragment, computed, createVNode, defineComponent, getCurrentInstance, nextTick, onMounted, ref, shallowRef, watch, withScopeId } from "vue";
+var MIN_CHUNK_SIZE = 1e3;
+var virtual_list_default = /* @__PURE__ */ defineComponent({
+	name: "VirtualList",
+	__name: "index",
+	props: {
+		list: { default: () => [] },
+		fixedHeight: {
+			type: Boolean,
+			default: false
+		},
+		estimatedHeight: { default: 28 },
+		buffer: { default: 10 }
+	},
+	setup(__props) {
+		const props = __props;
+		const containerRef = shallowRef(null);
+		const scrollAreaRef = shallowRef(null);
+		const contentRef = shallowRef(null);
+		const scrollTop = ref(0);
+		const totalHeight = ref(0);
+		const chunks = ref([]);
+		const blockPrefixHeights = ref([]);
+		const itemSizes = ref([]);
+		const maxListLength = ref(props.list.length);
+		const initChunks = () => {
+			const newChunks = [];
+			const totalCount = props.list.length;
+			const chunkSize = Math.max(MIN_CHUNK_SIZE, Math.ceil(Math.sqrt(totalCount)));
+			for (let i = 0; i < totalCount; i += chunkSize) {
+				const start = i;
+				const end = Math.min(i + chunkSize - 1, totalCount - 1);
+				const localPrefix = new Float64Array(end - start + 1);
+				let sum = 0;
+				for (let j = start; j <= end; j++) {
+					sum += props.estimatedHeight;
+					localPrefix[j - start] = sum;
+				}
+				newChunks.push({
+					startIndex: start,
+					endIndex: end,
+					localPrefix,
+					totalHeight: sum
+				});
+			}
+			chunks.value = newChunks;
+			updateBlockPrefixHeights();
+		};
+		const updateChunksWhenIncrease = (currentLength) => {
+			let resLength = currentLength - maxListLength.value;
+			maxListLength.value = currentLength;
+			const chunkSize = Math.max(MIN_CHUNK_SIZE, Math.ceil(Math.sqrt(currentLength)));
+			const chunk = chunks.value[chunks.value.length - 1];
+			const currentLen = chunk.endIndex - chunk.startIndex + 1;
+			if (currentLen < chunkSize) {
+				let sum = chunk.totalHeight;
+				const nextLen = currentLen + resLength >= chunkSize ? chunkSize : currentLen + resLength;
+				chunk.endIndex = chunk.startIndex + nextLen - 1;
+				const preLocalPrefix = chunk.localPrefix;
+				chunk.localPrefix = new Float64Array(chunkSize);
+				chunk.localPrefix.set(preLocalPrefix, 0);
+				for (let i = preLocalPrefix.length; i < chunk.localPrefix.length; i++) {
+					sum += props.estimatedHeight;
+					chunk.localPrefix[i] = sum;
+				}
+				chunk.totalHeight = sum;
+				resLength = Math.max(0, resLength - chunkSize + currentLen);
+			}
+			while (resLength > 0) {
+				const start = Math.min(chunks.value[chunks.value.length - 1].endIndex + 1, currentLength - 1);
+				const end = Math.min(start + chunkSize - 1, currentLength - 1);
+				const localPrefix = new Float64Array(end - start + 1);
+				let sum = 0;
+				for (let j = start; j <= end; j++) {
+					sum += props.estimatedHeight;
+					localPrefix[j - start] = sum;
+				}
+				chunks.value.push({
+					startIndex: start,
+					endIndex: end,
+					localPrefix,
+					totalHeight: sum
+				});
+				resLength -= end - start + 1;
+			}
+		};
+		const updateChunks = (currentLength) => {
+			if (currentLength > maxListLength.value) updateChunksWhenIncrease(currentLength);
+			updateBlockPrefixHeights();
+		};
+		const updateBlockPrefixHeights = () => {
+			const prefix = [];
+			let sum = 0;
+			let elementCount = 0;
+			const maxLength = props.list.length;
+			for (const chunk of chunks.value) {
+				const chunkSize = chunk.endIndex - chunk.startIndex + 1;
+				if (maxLength > 0 && elementCount >= maxLength) break;
+				if (maxLength > 0 && elementCount + chunkSize > maxLength) {
+					const remaining = maxLength - elementCount;
+					if (chunk.localPrefix && remaining > 0 && remaining <= chunk.localPrefix.length) {
+						sum += chunk.localPrefix[remaining - 1];
+						prefix.push(sum);
+						elementCount = maxLength;
+						break;
+					} else break;
+				}
+				sum += chunk.totalHeight;
+				prefix.push(sum);
+				elementCount += chunkSize;
+			}
+			blockPrefixHeights.value = prefix;
+			totalHeight.value = prefix.at(-1) || 0;
+		};
+		const findChunkByIndex = (index) => {
+			if (chunks.value.length === 0) return null;
+			let left = 0;
+			let right = chunks.value.length - 1;
+			while (left <= right) {
+				const mid = Math.floor((left + right) / 2);
+				const chunk = chunks.value[mid];
+				if (index >= chunk.startIndex && index <= chunk.endIndex) return chunk;
+				else if (index < chunk.startIndex) right = mid - 1;
+				else left = mid + 1;
+			}
+			return null;
+		};
+		const getItemHeight = (index) => {
+			if (props.fixedHeight) return props.estimatedHeight;
+			return itemSizes.value[index] ?? props.estimatedHeight;
+		};
+		const getAccumulatedHeight = (index) => {
+			if (index < 0) return 0;
+			const chunk = findChunkByIndex(index);
+			if (!chunk) return 0;
+			const prevChunksHeight = chunk.startIndex === 0 ? 0 : blockPrefixHeights.value[chunks.value.indexOf(chunk) - 1] || 0;
+			const withinChunkIndex = index - chunk.startIndex;
+			return prevChunksHeight + chunk.localPrefix[withinChunkIndex];
+		};
+		const findNearestItemIndex = (scrollPosition) => {
+			if (props.fixedHeight) return Math.floor(scrollPosition / props.estimatedHeight);
+			if (chunks.value.length === 0) return 0;
+			let chunkIndex = blockPrefixHeights.value.length - 1;
+			let left = 0;
+			let right = blockPrefixHeights.value.length - 1;
+			while (left <= right) {
+				const mid = Math.floor((left + right) / 2);
+				if (blockPrefixHeights.value[mid] > scrollPosition) {
+					chunkIndex = mid;
+					right = mid - 1;
+				} else left = mid + 1;
+			}
+			const targetChunk = chunks.value[chunkIndex];
+			const scrollInChunk = scrollPosition - (chunkIndex === 0 ? 0 : blockPrefixHeights.value[chunkIndex - 1] || 0);
+			left = 0;
+			right = targetChunk.localPrefix.length - 1;
+			let resInChunk = 0;
+			while (left <= right) {
+				const mid = Math.floor((left + right) / 2);
+				if (targetChunk.localPrefix[mid] > scrollInChunk) {
+					resInChunk = mid;
+					right = mid - 1;
+				} else left = mid + 1;
+			}
+			return targetChunk.startIndex + resInChunk;
+		};
+		const calcVisibleRange = () => {
+			if (!containerRef.value) return {
+				start: 0,
+				end: 0
+			};
+			const containerHeight = containerRef.value.clientHeight;
+			const start = findNearestItemIndex(scrollTop.value);
+			let end = start;
+			let accumulatedHeight = 0;
+			let endPoint = props.list.length;
+			let overFlag = false;
+			while (end < endPoint) {
+				const itemHeight = getItemHeight(end);
+				accumulatedHeight += itemHeight;
+				if (accumulatedHeight > containerHeight && !overFlag) {
+					endPoint = end + props.buffer + 1;
+					overFlag = true;
+				}
+				end++;
+			}
+			end = Math.min(end, props.list.length);
+			return {
+				start: Math.max(0, start - props.buffer),
+				end
+			};
+		};
+		const visibleRange = ref(calcVisibleRange());
+		watch([
+			scrollTop,
+			() => props.buffer,
+			() => props.list.length,
+			() => props.fixedHeight,
+			blockPrefixHeights
+		], () => {
+			visibleRange.value = calcVisibleRange();
+		});
+		const contentOffset = computed(() => {
+			const { start } = visibleRange.value;
+			return getAccumulatedHeight(start - 1);
+		});
+		const updateItemSizes = () => {
+			if (!contentRef.value) return;
+			if (contentRef.value.offsetHeight === 0 && !inVitest()) return;
+			if (props.fixedHeight) return;
+			const items = contentRef.value.children;
+			const { start } = visibleRange.value;
+			let hasChange = false;
+			for (let i = 0; i < items.length; i++) {
+				const itemIndex = start + i;
+				if (itemIndex >= props.list.length) break;
+				const itemHeight = inVitest() ? 40 : items[i].offsetHeight;
+				if (itemSizes.value[itemIndex] !== itemHeight) {
+					itemSizes.value[itemIndex] = itemHeight;
+					hasChange = true;
+				}
+			}
+			if (hasChange) {
+				const { start: visibleStart, end: visibleEnd } = visibleRange.value;
+				const startChunk = findChunkByIndex(visibleStart);
+				const endChunk = findChunkByIndex(visibleEnd);
+				if (!startChunk || !endChunk) return;
+				const startChunkIdx = chunks.value.indexOf(startChunk);
+				const endChunkIdx = chunks.value.indexOf(endChunk);
+				for (let cIdx = startChunkIdx; cIdx <= endChunkIdx; cIdx++) {
+					const chunk = chunks.value[cIdx];
+					let sum = 0;
+					for (let i = chunk.startIndex; i <= chunk.endIndex; i++) {
+						sum += getItemHeight(i);
+						chunk.localPrefix[i - chunk.startIndex] = sum;
+					}
+					chunk.totalHeight = sum;
+				}
+				updateBlockPrefixHeights();
+				visibleRange.value = calcVisibleRange();
+			}
+		};
+		const handleScroll = (e) => {
+			scrollTop.value = e.target.scrollTop;
+		};
+		onMounted(() => {
+			initChunks();
+			nextTick(() => {
+				updateItemSizes();
+			});
+		});
+		const watchFn = () => {
+			updateChunks(props.list.length);
+			nextTick(() => {
+				updateItemSizes();
+			});
+		};
+		watch(() => props.list.length, watchFn);
+		watch(visibleRange, () => {
+			nextTick(() => {
+				updateItemSizes();
+			});
+		}, { deep: true });
+		useResizeObserver(containerRef, () => {
+			nextTick(() => {
+				visibleRange.value = calcVisibleRange();
+			});
+		});
+		const instance = getCurrentInstance();
+		return () => {
+			const { start, end } = visibleRange.value;
+			const visibleItems = props.list.slice(start, end + 1);
+			const scopeId = instance === null || instance === void 0 ? void 0 : instance.vnode.scopeId;
+			const placeholderHeight = totalHeight.value || props.list.length * props.estimatedHeight;
+			const render$1 = () => createVNode("div", {
+				"ref": containerRef,
+				"class": "px-virtual-list"
+			}, [createVNode("div", {
+				"ref": scrollAreaRef,
+				"class": "px-virtual-list-scroll-area",
+				"onScroll": handleScroll
+			}, [createVNode("div", {
+				"class": { "px-virtual-list-content": props.fixedHeight },
+				"style": { maxHeight: props.fixedHeight ? `${placeholderHeight}px` : void 0 }
+			}, [createVNode("div", {
+				"class": "px-virtual-list-placeholder",
+				"style": { height: `${placeholderHeight}px` }
+			}, null), createVNode("div", {
+				"ref": contentRef,
+				"class": "px-virtual-list-item",
+				"style": { transform: `translateY(${contentOffset.value}px)` }
+			}, [visibleItems.map((item, index) => {
+				const itemIndex = start + index;
+				const key = item.key ?? itemIndex;
+				const renderResult = item.render;
+				let content;
+				if (y(renderResult)) content = createVNode("div", null, [renderResult]);
+				else {
+					const renderReturn = renderResult();
+					if (y(renderReturn)) content = createVNode("div", null, [renderReturn]);
+					else content = renderReturn;
+				}
+				return createVNode(Fragment, { "key": key }, [content]);
+			})])])])]);
+			return scopeId ? withScopeId(scopeId)(render$1)() : render$1();
+		};
+	}
+});
+export { virtual_list_default as t };

package/es/virtual-list/type.d.ts

@@ -0,0 +1,26 @@
+import type { ValidContent } from '../share/type';
+export type VirtualListProps = {
+    /**
+     * @property {{ render: ValidContent; key?: string | number | symbol }[]} [list]
+     * @version 0.0.3
+     */
+    list?: {
+        render: ValidContent;
+        key?: string | number | symbol;
+    }[];
+    /**
+     * @property {boolean} [fixedHeight=false]
+     * @version 0.0.3
+     */
+    fixedHeight?: boolean;
+    /**
+     * @property {number} [estimatedHeight=28]
+     * @version 0.0.3
+     */
+    estimatedHeight?: number;
+    /**
+     * @property {number} [buffer=10]
+     * @version 0.0.3
+     */
+    buffer?: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pixelium/web-vue",
-	"version": "0.0.2",
+	"version": "0.0.3-beta",
 	"type": "module",
 	"main": "./dist/pixelium-vue.js",
 	"exports": {
@@ -42,36 +42,30 @@
 		"lint": "oxlint lib",
 		"lint:fix": "oxlint ./ --fix && prettier ./ --write",
 		"preview": "vite preview",
-		"release": "npm run build && npm publish --access public",
-		"release:dry-run": "npm run build && npm publish --dry-run"
+		"release": "npm run test && npm run build && npm publish --access public",
+		"release:dry-run": "npm run build && npm publish --dry-run",
+		"test": "vitest run --config ./script/vite.config.vue.ts --coverage",
+		"test:watch": "vitest --config ./script/vite.config.vue.ts --coverage"
 	},
 	"peerDependencies": {
 		"vue": "^3.5.17"
 	},
 	"devDependencies": {
 		"@hackernoon/pixel-icon-library": "^1.0.6",
-		"@types/node": "^24.5.2",
-		"@vitejs/plugin-vue": "^6.0.0",
+		"@vitejs/plugin-vue": "^6.0.1",
 		"@vitejs/plugin-vue-jsx": "^5.1.1",
-		"dts-bundle-generator": "^9.5.1",
-		"esbuild": "^0.25.9",
-		"execa": "^9.6.0",
 		"less": "^4.4.0",
-		"oxlint": "^1.12.0",
 		"pixelarticons": "^1.8.1",
-		"prettier": "^3.6.2",
-		"rimraf": "^6.0.1",
 		"svgo": "^4.0.0",
-		"typescript": "~5.8.3",
-		"vite": "^7.1.5",
-		"vue-macros": "3.0.0-beta.23",
-		"vue-tsc": "3.0.6"
+		"vite": "npm:rolldown-vite@latest",
+		"vue-macros": "3.0.0-beta.23"
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.4",
 		"mitt": "^3.0.1",
+		"modern-normalize": "^3.0.1",
 		"nanoid": "^5.1.5",
-		"parsnip-kit": "^0.0.5"
+		"parsnip-kit": "^0.0.6"
 	},
 	"repository": {
 		"type": "git",