svelte-infinite-loading - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

package.json

		{
		"name": "svelte-infinite-loading",
		"version": "1.3.1",
		"version": "1.3.2",
		"description": "An infinite scroll component for Svelte apps",
		@@ -5,0 +5,0 @@ "svelte": "src/index.js",

types/index.d.ts

		/// <reference types="svelte" />

		import type { SvelteComponent } from 'svelte';
		import { SvelteComponentDev } from 'svelte/internal';


		export type SpinnerType = 'default' \| 'bubbles' \| 'circles' \| 'spiral' \| 'waveDots';
		export type DirectionType = 'top' \| 'bottom';


		/**
		@@ -12,21 +14,27 @@ * InfiniteLoading props
		export interface InfiniteLoadingProps {
		/*
		/**
		* The infinite event will be fired if the scroll distance is less than this value. If direction is set to top, it will calculate the
		* distance between the scroll bar and the top, if direction is set to bottom, it will calculate the distance between the scroll bar
		* and the bottom.
		* and the bottom.
		*
		* @default 100
		*/
		distance?: number;

		/*
		/**
		* This property is used to set the loading animation, you can choose one of the built-in spinners that you like. You can also use
		* your own with the spinner slot.
		*
		* @default 'default'
		*/
		spinner?: SpinnerType;

		/*
		/**
		* This property is used to set the load direction.
		*
		* @default 'bottom'
		*/
		direction?: DirectionType;

		/*
		/**
		* By default, the component will search for the closest parent element which has overflow-y: auto \| scroll CSS style as the
		@@ -40,8 +48,12 @@ * scroll container, this property is used to force to specify the scroll container, usually used when the case has complex layout or
		* as the scroll container.
		*
		* @default false
		*/
		forceUseInfiniteWrapper?: boolean \| string;

		/*
		/**
		* The component will be reset if this property has changed, just like recreating a new component, usually used when the list has
		* filters or tabs.
		*
		* @default +new Date()
		*/
		@@ -51,2 +63,3 @@ identifier?: any;


		/**
		@@ -56,3 +69,3 @@ * InfiniteLoading slots
		export interface InfiniteLoadingSlots {
		/*
		/**
		* This message will be displayed when there is no data, which means that we have called the InfiniteEvent.details.complete
		@@ -63,3 +76,3 @@ * method, before ever calling the InfiniteEvent.details.loaded method.

		/*
		/**
		* This message will be displayed when there is no more data, which means we have called the InfiniteEvent.details.loaded
		@@ -70,3 +83,3 @@ * method at least once before calling the InfiniteEvent.details.complete method.

		/*
		/**
		* This message will be displayed when loading has failed, which means that we have called the InfiniteEvent.details.error method.
		@@ -76,3 +89,3 @@ */

		/*
		/**
		* This slot will be displayed when loading data, you can also use your own spinner here.
		@@ -83,2 +96,3 @@ */


		/**
		@@ -88,3 +102,3 @@ * StateChanger object
		export interface StateChanger {
		/*
		/**
		* Inform the component that this loading has been successful. The infinite event will be fired again if the first screen was not be
		@@ -95,3 +109,3 @@ * filled up, otherwise, the component will hide the loading animation and continue to listen to scroll events.

		/*
		/**
		* Inform the component that all the data has been loaded successfully. If the InfiniteEvent.details.loaded method has not
		@@ -103,3 +117,3 @@ * been called before this, the content of the noResults slot will be

		/*
		/**
		* Inform the component that loading the data has failed. The content of the error slot will be displayed.
		@@ -109,3 +123,3 @@ */

		/*
		/**
		* Reset the component. Same as changing the identifier property.
		@@ -119,18 +133,59 @@ */
		*/
		export interface InfiniteEvent<T> {
		readonly detail: T;
		export interface InfiniteEvent extends CustomEvent<StateChanger> {
		}


		/**
		* InfiniteLoading events
		*/
		export interface InfiniteLoadingEvents {
		infinite: InfiniteEvent;
		}

		/**
		* InfiniteLoading component
		*/
		export default class InfiniteLoading {
		// Props
		export default class InfiniteLoading extends SvelteComponentDev {
		/**
		* Props
		*
		* @internal This is for type checking capabilities only
		* and does not exist at runtime. Don't use this property.
		*/
		$$prop_def: InfiniteLoadingProps;

		// Slots
		/**
		* Slots
		*
		* @internal This is for type checking capabilities only
		* and does not exist at runtime. Don't use this property.
		*/
		$$events_def: InfiniteLoadingEvents;

		/**
		* Events
		*
		* @internal This is for type checking capabilities only
		* and does not exist at runtime. Don't use this property.
		*/
		$$slot_def: InfiniteLoadingSlots;

		// Events
		$on (event: 'infinite', callback: (event: InfiniteEvent<StateChanger>) => void): () => void;


		constructor (options: {
		// Only allow predefined props:
		props?: InfiniteLoadingProps;

		// Other options...
		target: Element;
		anchor?: Element;
		hydrate?: boolean;
		intro?: boolean;
		$$inline?: boolean;
		});

		$set (props?: InfiniteLoadingProps): void;

		$on<K extends keyof InfiniteLoadingEvents> (event: K, callback: (event: InfiniteLoadingEvents[K]) => void): () => void;
		$on<T = any>(event: string, callback: (event: CustomEvent<T>) => void): () => void;
		}

svelte-infinite-loading - npm Package Compare versions

Improved metrics