svelte-tiny-virtual-list - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

dist/svelte-tiny-virtual-list.js

@@ -129,5 +129,5 @@ (function (global, factory) {
     }
-    function custom_event(type, detail, bubbles = false) {
+    function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
         const e = document.createEvent('CustomEvent');
-        e.initCustomEvent(type, bubbles, false, detail);
+        e.initCustomEvent(type, bubbles, cancelable, detail);
         return e;
@@ -153,3 +153,3 @@ }
         const component = get_current_component();
-        return (type, detail) => {
+        return (type, detail, { cancelable = false } = {}) => {
             const callbacks = component.$$.callbacks[type];
@@ -159,7 +159,9 @@ if (callbacks) {
                 // in a server (non-DOM) environment?
-                const event = custom_event(type, detail);
+                const event = custom_event(type, detail, { cancelable });
                 callbacks.slice().forEach(fn => {
                     fn.call(component, event);
                 });
+                return !event.defaultPrevented;
             }
+            return true;
         };
@@ -510,2 +512,7 @@ }
     const SCROLL_PROP = {
+    	[DIRECTION.VERTICAL]:   'top',
+    	[DIRECTION.HORIZONTAL]: 'left',
+    };
+
+    const SCROLL_PROP_LEGACY = {
     	[DIRECTION.VERTICAL]:   'scrollTop',
@@ -930,3 +937,3 @@ [DIRECTION.HORIZONTAL]: 'scrollLeft',
 
-    /* src/VirtualList.svelte generated by Svelte v3.46.6 */
+    /* src/VirtualList.svelte generated by Svelte v3.48.0 */
 
@@ -942,3 +949,3 @@ function add_css(target) {
     	const child_ctx = ctx.slice();
-    	child_ctx[36] = list[i];
+    	child_ctx[37] = list[i];
     	return child_ctx;
@@ -953,4 +960,4 @@ }
     const get_item_slot_context = ctx => ({
-    	style: /*item*/ ctx[36].style,
-    	index: /*item*/ ctx[36].index
+    	style: /*item*/ ctx[37].style,
+    	index: /*item*/ ctx[37].index
     });
@@ -961,8 +968,8 @@
 
-    // (322:2) {#each items as item (getKey ? getKey(item.index) : item.index)}
+    // (331:2) {#each items as item (getKey ? getKey(item.index) : item.index)}
     function create_each_block(key_1, ctx) {
     	let first;
     	let current;
-    	const item_slot_template = /*#slots*/ ctx[20].item;
-    	const item_slot = create_slot(item_slot_template, ctx, /*$$scope*/ ctx[19], get_item_slot_context);
+    	const item_slot_template = /*#slots*/ ctx[21].item;
+    	const item_slot = create_slot(item_slot_template, ctx, /*$$scope*/ ctx[20], get_item_slot_context);
 
@@ -990,3 +997,3 @@ return {
     			if (item_slot) {
-    				if (item_slot.p && (!current || dirty[0] & /*$$scope, items*/ 524292)) {
+    				if (item_slot.p && (!current || dirty[0] & /*$$scope, items*/ 1048580)) {
     					update_slot_base(
@@ -996,6 +1003,6 @@ item_slot,
     						ctx,
-    						/*$$scope*/ ctx[19],
+    						/*$$scope*/ ctx[20],
     						!current
-    						? get_all_dirty_from_scope(/*$$scope*/ ctx[19])
-    						: get_slot_changes(item_slot_template, /*$$scope*/ ctx[19], dirty, get_item_slot_changes),
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
+    						: get_slot_changes(item_slot_template, /*$$scope*/ ctx[20], dirty, get_item_slot_changes),
     						get_item_slot_context
@@ -1030,9 +1037,9 @@ );
     	let current;
-    	const header_slot_template = /*#slots*/ ctx[20].header;
-    	const header_slot = create_slot(header_slot_template, ctx, /*$$scope*/ ctx[19], get_header_slot_context);
+    	const header_slot_template = /*#slots*/ ctx[21].header;
+    	const header_slot = create_slot(header_slot_template, ctx, /*$$scope*/ ctx[20], get_header_slot_context);
     	let each_value = /*items*/ ctx[2];
 
     	const get_key = ctx => /*getKey*/ ctx[0]
-    	? /*getKey*/ ctx[0](/*item*/ ctx[36].index)
-    	: /*item*/ ctx[36].index;
+    	? /*getKey*/ ctx[0](/*item*/ ctx[37].index)
+    	: /*item*/ ctx[37].index;
 
@@ -1045,4 +1052,4 @@ for (let i = 0; i < each_value.length; i += 1) {
 
-    	const footer_slot_template = /*#slots*/ ctx[20].footer;
-    	const footer_slot = create_slot(footer_slot_template, ctx, /*$$scope*/ ctx[19], get_footer_slot_context);
+    	const footer_slot_template = /*#slots*/ ctx[21].footer;
+    	const footer_slot = create_slot(footer_slot_template, ctx, /*$$scope*/ ctx[20], get_footer_slot_context);
 
@@ -1087,3 +1094,3 @@ return {
 
-    			/*div1_binding*/ ctx[21](div1);
+    			/*div1_binding*/ ctx[22](div1);
     			current = true;
@@ -1093,3 +1100,3 @@ },
     			if (header_slot) {
-    				if (header_slot.p && (!current || dirty[0] & /*$$scope*/ 524288)) {
+    				if (header_slot.p && (!current || dirty[0] & /*$$scope*/ 1048576)) {
     					update_slot_base(
@@ -1099,6 +1106,6 @@ header_slot,
     						ctx,
-    						/*$$scope*/ ctx[19],
+    						/*$$scope*/ ctx[20],
     						!current
-    						? get_all_dirty_from_scope(/*$$scope*/ ctx[19])
-    						: get_slot_changes(header_slot_template, /*$$scope*/ ctx[19], dirty, get_header_slot_changes),
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
+    						: get_slot_changes(header_slot_template, /*$$scope*/ ctx[20], dirty, get_header_slot_changes),
     						get_header_slot_context
@@ -1109,3 +1116,3 @@ );
 
-    			if (dirty[0] & /*$$scope, items, getKey*/ 524293) {
+    			if (dirty[0] & /*$$scope, items, getKey*/ 1048581) {
     				each_value = /*items*/ ctx[2];
@@ -1122,3 +1129,3 @@ group_outros();
     			if (footer_slot) {
-    				if (footer_slot.p && (!current || dirty[0] & /*$$scope*/ 524288)) {
+    				if (footer_slot.p && (!current || dirty[0] & /*$$scope*/ 1048576)) {
     					update_slot_base(
@@ -1128,6 +1135,6 @@ footer_slot,
     						ctx,
-    						/*$$scope*/ ctx[19],
+    						/*$$scope*/ ctx[20],
     						!current
-    						? get_all_dirty_from_scope(/*$$scope*/ ctx[19])
-    						: get_slot_changes(footer_slot_template, /*$$scope*/ ctx[19], dirty, get_footer_slot_changes),
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
+    						: get_slot_changes(footer_slot_template, /*$$scope*/ ctx[20], dirty, get_footer_slot_changes),
     						get_footer_slot_context
@@ -1172,3 +1179,3 @@ );
     			if (footer_slot) footer_slot.d(detaching);
-    			/*div1_binding*/ ctx[21](null);
+    			/*div1_binding*/ ctx[22](null);
     		}
@@ -1211,2 +1218,3 @@ };
     	let { scrollToAlignment = null } = $$props;
+    	let { scrollToBehaviour = 'instant' } = $$props;
     	let { overscanCount = 3 } = $$props;
@@ -1247,3 +1255,3 @@ const dispatchEvent = createEventDispatcher();
     	onMount(() => {
-    		$$invalidate(17, mounted = true);
+    		$$invalidate(18, mounted = true);
     		wrapper.addEventListener('scroll', handleScroll, thirdEventArg);
@@ -1278,3 +1286,3 @@
     		if (prevProps.scrollOffset !== scrollOffset) {
-    			$$invalidate(18, state = {
+    			$$invalidate(19, state = {
     				offset: scrollOffset || 0,
@@ -1284,3 +1292,3 @@ scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
     		} else if (typeof scrollToIndex === 'number' && (scrollPropsHaveChanged || itemPropsHaveChanged)) {
-    			$$invalidate(18, state = {
+    			$$invalidate(19, state = {
     				offset: getOffsetForIndex(scrollToIndex, scrollToAlignment, itemCount),
@@ -1361,3 +1369,10 @@ scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
     	function scrollTo(value) {
-    		$$invalidate(1, wrapper[SCROLL_PROP[scrollDirection]] = value, wrapper);
+    		if ('scroll' in wrapper) {
+    			wrapper.scroll({
+    				[SCROLL_PROP[scrollDirection]]: value,
+    				behavior: scrollToBehaviour
+    			});
+    		} else {
+    			$$invalidate(1, wrapper[SCROLL_PROP_LEGACY[scrollDirection]] = value, wrapper);
+    		}
     	}
@@ -1388,3 +1403,3 @@
 
-    		$$invalidate(18, state = {
+    		$$invalidate(19, state = {
     			offset,
@@ -1450,4 +1465,5 @@ scrollChangeReason: SCROLL_CHANGE_REASON.OBSERVED
     		if ('scrollToAlignment' in $$props) $$invalidate(14, scrollToAlignment = $$props.scrollToAlignment);
-    		if ('overscanCount' in $$props) $$invalidate(15, overscanCount = $$props.overscanCount);
-    		if ('$$scope' in $$props) $$invalidate(19, $$scope = $$props.$$scope);
+    		if ('scrollToBehaviour' in $$props) $$invalidate(15, scrollToBehaviour = $$props.scrollToBehaviour);
+    		if ('overscanCount' in $$props) $$invalidate(16, overscanCount = $$props.overscanCount);
+    		if ('$$scope' in $$props) $$invalidate(20, $$scope = $$props.$$scope);
     	};
@@ -1463,3 +1479,3 @@
 
-    		if ($$self.$$.dirty[0] & /*state*/ 262144) {
+    		if ($$self.$$.dirty[0] & /*state*/ 524288) {
     			{
@@ -1471,3 +1487,3 @@
 
-    		if ($$self.$$.dirty[0] & /*height, width, stickyIndices, mounted*/ 132192) {
+    		if ($$self.$$.dirty[0] & /*height, width, stickyIndices, mounted*/ 263264) {
     			{
@@ -1496,2 +1512,3 @@
     		scrollToAlignment,
+    		scrollToBehaviour,
     		overscanCount,
@@ -1529,4 +1546,5 @@ recomputeSizes,
     				scrollToAlignment: 14,
-    				overscanCount: 15,
-    				recomputeSizes: 16
+    				scrollToBehaviour: 15,
+    				overscanCount: 16,
+    				recomputeSizes: 17
     			},
@@ -1539,3 +1557,3 @@ add_css,
     	get recomputeSizes() {
-    		return this.$$.ctx[16];
+    		return this.$$.ctx[17];
     	}
@@ -1542,0 +1560,0 @@ }

package.json

 {
   "name": "svelte-tiny-virtual-list",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A tiny but mighty list virtualization component for svelte, with zero dependencies 💪",
@@ -5,0 +5,0 @@ "svelte": "src/index.js",

README.md

@@ -136,2 +136,3 @@ <p align="center"><img src="https://raw.githubusercontent.com/Skayo/svelte-tiny-virtual-list/master/assets/ListLogo.svg" alt="ListLogo" width="225"></p>
 | scrollToAlignment | `string`                                          |           | Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: `'start'`, `'center'`, `'end'` or `'auto'`. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. `'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |
+| scrollToBehaviour | `string`                                          |           | Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling. One of: `'auto'` (default), `'smooth'` or `'instant'`.                                                                                                                                                                                                                                                                                   |
 | stickyIndices     | `number[]`                                        |           | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`)                                                                                                                                                                                                                                                                                                                             |
@@ -138,0 +139,0 @@ | overscanCount     | `number`                                          |           | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices.                                                                                                                                                                                                                                                                                    |

src/constants.js

@@ -19,4 +19,9 @@ export const ALIGNMENT = {
 export const SCROLL_PROP = {
+	[DIRECTION.VERTICAL]:   'top',
+	[DIRECTION.HORIZONTAL]: 'left',
+};
+
+export const SCROLL_PROP_LEGACY = {
 	[DIRECTION.VERTICAL]:   'scrollTop',
 	[DIRECTION.HORIZONTAL]: 'scrollLeft',
-};
+};

types/index.d.ts

@@ -5,2 +5,3 @@ /// <reference types="svelte" />
 export type Alignment = "auto" | "start" | "center" | "end";
+export type ScrollBehaviour = "auto" | "smooth" | "instant";
 
@@ -67,2 +68,8 @@ export type Direction = "horizontal" | "vertical";
 	/**
+	 * Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling.
+	 * One of: `'auto'` (default), `'smooth'` or `'instant'`.
+	 */
+	scrollToBehaviour?: ScrollBehaviour;
+
+	/**
 	 * An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`)
@@ -69,0 +76,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

128890

increased by1.89%

Lines of code

3229

increased by1.41%

Number of lines in readme file

251

increased by0.4%

Published versions last months

3

increased byInfinity%

No dependency changes