vueuc - npm Package Compare versions

Comparing version 0.4.41 to 0.4.42

es/shared/finweck-tree.js

@@ -47,7 +47,7 @@ function lowBit(n) {
     sum(i) {
-        if (i === 0)
+        if (i === undefined)
+            i = this.l;
+        if (i <= 0)
             return 0;
         const { ft, min, l } = this;
-        if (i === undefined)
-            i = l;
         if (i > l)
@@ -54,0 +54,0 @@ throw new Error('[FinweckTree.sum]: `i` is larger than length.');

es/virtual-list/src/VirtualList.d.ts

@@ -83,3 +83,3 @@ import { PropType, CSSProperties } from 'vue';
     viewportItems: import("vue").ComputedRef<ItemData[]>;
-    listElRef: import("vue").Ref<Element | null>;
+    listElRef: import("vue").Ref<HTMLElement | null>;
     itemsElRef: import("vue").Ref<Element | null>;
@@ -89,2 +89,3 @@ scrollTo: ScrollTo;
     handleListScroll: (e: UIEvent) => void;
+    handleListWheel: (e: WheelEvent) => void;
     handleItemResize: (key: string | number, entry: ResizeObserverEntry) => void;
@@ -91,0 +92,0 @@ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

es/virtual-list/src/VirtualList.js

 /* eslint-disable no-void */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 import { mergeProps, computed, defineComponent, ref, onMounted, h, onActivated, onDeactivated } from 'vue';
-import { depx, pxfy, beforeNextFrameOnce } from 'seemly';
+import { beforeNextFrameOnce, depx, pxfy } from 'seemly';
 import { useMemo } from 'vooks';
 import { useSsrAdapter } from '@css-render/vue3-ssr';
+import VResizeObserver from '../../resize-observer/src/VResizeObserver';
 import { c, cssrAnchorMetaName, FinweckTree } from '../../shared';
-import VResizeObserver from '../../resize-observer/src';
+import { ensureMaybeTouch, ensureWheelScale } from './config';
 const styles = c('.v-vl', {
@@ -171,2 +172,4 @@ maxHeight: 'inherit',
         };
+        let anchorIndex = undefined;
+        let anchorTimerId = 0;
         function scrollToIndex(index, behavior, debounce) {
@@ -183,2 +186,10 @@ const { value: ft } = finweckTreeRef;
             else {
+                anchorIndex = index;
+                if (anchorTimerId) {
+                    window.clearTimeout(anchorTimerId);
+                }
+                anchorTimerId = window.setTimeout(() => {
+                    anchorIndex = undefined;
+                    anchorTimerId = 0;
+                }, 16); // use 0 ms may be ealier than resize callback...
                 const { scrollTop, offsetHeight } = listElRef.value;
@@ -206,3 +217,2 @@ if (targetTop > scrollTop) {
             }
-            lastScrollAnchorIndex = index;
         }
@@ -217,3 +227,3 @@ function scrollToPosition(left, top, behavior) {
         function handleItemResize(key, entry) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             if (isDeactivated)
@@ -244,14 +254,54 @@ return;
                 return;
-            if (lastAnchorIndex !== undefined && index <= lastAnchorIndex) {
-                (_d = listElRef.value) === null || _d === void 0 ? void 0 : _d.scrollBy(0, delta);
+            ft.add(index, delta);
+            const listEl = listElRef.value;
+            if (listEl) {
+                if (anchorIndex === undefined) {
+                    const previousHeightSum = ft.sum(index);
+                    if (listEl.scrollTop > previousHeightSum) {
+                        listEl.scrollBy(0, delta);
+                    }
+                }
+                else {
+                    if (index < anchorIndex) {
+                        listEl.scrollBy(0, delta);
+                    }
+                    else if (index === anchorIndex) {
+                        const previousHeightSum = ft.sum(index);
+                        if (height + previousHeightSum >
+                            // Note, listEl shouldn't have border, nor offsetHeight won't be
+                            // correct
+                            listEl.scrollTop + listEl.offsetHeight) {
+                            listEl.scrollBy(0, delta);
+                        }
+                    }
+                }
+                syncViewport();
             }
-            ft.add(index, delta);
             finweckTreeUpdateTrigger.value++;
         }
+        const mayUseWheel = !ensureMaybeTouch();
+        let wheelCatched = false;
         function handleListScroll(e) {
-            beforeNextFrameOnce(syncViewport);
-            const { onScroll } = props;
-            if (onScroll !== undefined)
-                onScroll(e);
+            var _a;
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (!mayUseWheel || !wheelCatched) {
+                syncViewport();
+            }
         }
+        function handleListWheel(e) {
+            var _a;
+            (_a = props.onWheel) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (mayUseWheel) {
+                e.preventDefault();
+                const listEl = listElRef.value;
+                if (listEl) {
+                    listEl.scrollTop += e.deltaY / ensureWheelScale();
+                    syncViewport();
+                    wheelCatched = true;
+                    beforeNextFrameOnce(() => {
+                        wheelCatched = false;
+                    });
+                }
+            }
+        }
         function handleListResize(entry) {
@@ -271,4 +321,2 @@ if (isDeactivated)
         }
-        let lastScrollAnchorIndex;
-        let lastAnchorIndex;
         function syncViewport() {
@@ -280,6 +328,4 @@ const { value: listEl } = listElRef;
                 return;
-            lastAnchorIndex = lastScrollAnchorIndex !== null && lastScrollAnchorIndex !== void 0 ? lastScrollAnchorIndex : startIndexRef.value;
-            lastScrollAnchorIndex = undefined;
-            scrollTopRef.value = listElRef.value.scrollTop;
-            scrollLeft = listElRef.value.scrollLeft;
+            scrollTopRef.value = listEl.scrollTop;
+            scrollLeft = listEl.scrollLeft;
         }
@@ -330,2 +376,3 @@ function isHideByVShow(el) {
             handleListScroll,
+            handleListWheel,
             handleItemResize
@@ -344,3 +391,3 @@ };
                     onScroll: this.handleListScroll,
-                    onWheel: this.onWheel,
+                    onWheel: this.handleListWheel,
                     ref: 'listElRef'
@@ -347,0 +394,0 @@ }), [

lib/shared/finweck-tree.js

@@ -50,7 +50,7 @@ "use strict";
     sum(i) {
-        if (i === 0)
+        if (i === undefined)
+            i = this.l;
+        if (i <= 0)
             return 0;
         const { ft, min, l } = this;
-        if (i === undefined)
-            i = l;
         if (i > l)
@@ -57,0 +57,0 @@ throw new Error('[FinweckTree.sum]: `i` is larger than length.');

lib/virtual-list/src/VirtualList.d.ts

@@ -83,3 +83,3 @@ import { PropType, CSSProperties } from 'vue';
     viewportItems: import("vue").ComputedRef<ItemData[]>;
-    listElRef: import("vue").Ref<Element | null>;
+    listElRef: import("vue").Ref<HTMLElement | null>;
     itemsElRef: import("vue").Ref<Element | null>;
@@ -89,2 +89,3 @@ scrollTo: ScrollTo;
     handleListScroll: (e: UIEvent) => void;
+    handleListWheel: (e: WheelEvent) => void;
     handleItemResize: (key: string | number, entry: ResizeObserverEntry) => void;
@@ -91,0 +92,0 @@ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

lib/virtual-list/src/VirtualList.js

@@ -12,4 +12,5 @@ "use strict";
 const vue3_ssr_1 = require("@css-render/vue3-ssr");
+const VResizeObserver_1 = __importDefault(require("../../resize-observer/src/VResizeObserver"));
 const shared_1 = require("../../shared");
-const src_1 = __importDefault(require("../../resize-observer/src"));
+const config_1 = require("./config");
 const styles = (0, shared_1.c)('.v-vl', {
@@ -177,2 +178,4 @@ maxHeight: 'inherit',
         };
+        let anchorIndex = undefined;
+        let anchorTimerId = 0;
         function scrollToIndex(index, behavior, debounce) {
@@ -189,2 +192,10 @@ const { value: ft } = finweckTreeRef;
             else {
+                anchorIndex = index;
+                if (anchorTimerId) {
+                    window.clearTimeout(anchorTimerId);
+                }
+                anchorTimerId = window.setTimeout(() => {
+                    anchorIndex = undefined;
+                    anchorTimerId = 0;
+                }, 16); // use 0 ms may be ealier than resize callback...
                 const { scrollTop, offsetHeight } = listElRef.value;
@@ -212,3 +223,2 @@ if (targetTop > scrollTop) {
             }
-            lastScrollAnchorIndex = index;
         }
@@ -223,3 +233,3 @@ function scrollToPosition(left, top, behavior) {
         function handleItemResize(key, entry) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             if (isDeactivated)
@@ -250,14 +260,54 @@ return;
                 return;
-            if (lastAnchorIndex !== undefined && index <= lastAnchorIndex) {
-                (_d = listElRef.value) === null || _d === void 0 ? void 0 : _d.scrollBy(0, delta);
+            ft.add(index, delta);
+            const listEl = listElRef.value;
+            if (listEl) {
+                if (anchorIndex === undefined) {
+                    const previousHeightSum = ft.sum(index);
+                    if (listEl.scrollTop > previousHeightSum) {
+                        listEl.scrollBy(0, delta);
+                    }
+                }
+                else {
+                    if (index < anchorIndex) {
+                        listEl.scrollBy(0, delta);
+                    }
+                    else if (index === anchorIndex) {
+                        const previousHeightSum = ft.sum(index);
+                        if (height + previousHeightSum >
+                            // Note, listEl shouldn't have border, nor offsetHeight won't be
+                            // correct
+                            listEl.scrollTop + listEl.offsetHeight) {
+                            listEl.scrollBy(0, delta);
+                        }
+                    }
+                }
+                syncViewport();
             }
-            ft.add(index, delta);
             finweckTreeUpdateTrigger.value++;
         }
+        const mayUseWheel = !(0, config_1.ensureMaybeTouch)();
+        let wheelCatched = false;
         function handleListScroll(e) {
-            (0, seemly_1.beforeNextFrameOnce)(syncViewport);
-            const { onScroll } = props;
-            if (onScroll !== undefined)
-                onScroll(e);
+            var _a;
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (!mayUseWheel || !wheelCatched) {
+                syncViewport();
+            }
         }
+        function handleListWheel(e) {
+            var _a;
+            (_a = props.onWheel) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (mayUseWheel) {
+                e.preventDefault();
+                const listEl = listElRef.value;
+                if (listEl) {
+                    listEl.scrollTop += e.deltaY / (0, config_1.ensureWheelScale)();
+                    syncViewport();
+                    wheelCatched = true;
+                    (0, seemly_1.beforeNextFrameOnce)(() => {
+                        wheelCatched = false;
+                    });
+                }
+            }
+        }
         function handleListResize(entry) {
@@ -277,4 +327,2 @@ if (isDeactivated)
         }
-        let lastScrollAnchorIndex;
-        let lastAnchorIndex;
         function syncViewport() {
@@ -286,6 +334,4 @@ const { value: listEl } = listElRef;
                 return;
-            lastAnchorIndex = lastScrollAnchorIndex !== null && lastScrollAnchorIndex !== void 0 ? lastScrollAnchorIndex : startIndexRef.value;
-            lastScrollAnchorIndex = undefined;
-            scrollTopRef.value = listElRef.value.scrollTop;
-            scrollLeft = listElRef.value.scrollLeft;
+            scrollTopRef.value = listEl.scrollTop;
+            scrollLeft = listEl.scrollLeft;
         }
@@ -336,2 +382,3 @@ function isHideByVShow(el) {
             handleListScroll,
+            handleListWheel,
             handleItemResize
@@ -342,3 +389,3 @@ };
         const { itemResizable, keyField, keyToIndex, visibleItemsTag } = this;
-        return (0, vue_1.h)(src_1.default, {
+        return (0, vue_1.h)(VResizeObserver_1.default, {
             onResize: this.handleListResize
@@ -351,3 +398,3 @@ }, {
                     onScroll: this.handleListScroll,
-                    onWheel: this.onWheel,
+                    onWheel: this.handleListWheel,
                     ref: 'listElRef'
@@ -373,3 +420,3 @@ }), [
                                     if (itemResizable) {
-                                        return (0, vue_1.h)(src_1.default, {
+                                        return (0, vue_1.h)(VResizeObserver_1.default, {
                                             key,
@@ -376,0 +423,0 @@ onResize: (entry) => this.handleItemResize(key, entry)

package.json

 {
   "name": "vueuc",
-  "version": "0.4.41",
+  "version": "0.4.42",
   "description": "Util Components for Vue",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

223572

increased by2.29%

Number of package files

139

increased by2.96%

Lines of code

5804

increased by2.42%

No dependency changes