🚀 Big News:Socket Has Acquired Secure Annex.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

svelte-infinite-loading

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-infinite-loading - npm Package Compare versions

Comparing version
1.3.1
 to
1.3.2
+1
-1
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",

+77
-22
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;
}