@slidy/svelte
Version:
Simple, configurable & reusable carousel component built with SvelteJS
398 lines (397 loc) • 11.7 kB
TypeScript
declare module "assets/types" {
export interface Size {
width: number;
height: number;
}
/**
* `https://www.picsum.photos` API response schema
*/
export interface ImageSchema {
id: number;
alt: string;
src: string;
width: number;
height: number;
}
/**
* Defines the `GetPhoto` params.
*/
export interface SlideParams {
limit?: number;
page?: number;
width?: number;
height?: number;
}
/**
* Common Image interface.
*/
export interface Slide {
id?: string | number;
src?: string;
alt?: string;
width?: string | number;
height?: string | number;
}
export type GetPhotos<T> = (params: SlideParams) => Promise<T[]>;
export interface IndexGeneratorParams {
current: number;
start: number;
end: number;
limit: number;
siblings: number;
}
export type IndexGenerator = (params: IndexGeneratorParams) => number[];
type i18nKey = "carousel" | "counter" | "first" | "last" | "next" | "play" | "prev" | "slide" | "slideN" | "stop";
export type I18NDict = Record<i18nKey, string>;
export type SlidyNodes =
| "arrow"
| "autoplay"
| "counter"
| "img"
| "nav"
| "nav-item"
| "overlay"
| "progress"
| "progress-handle"
| "root"
| "slide"
| "slides"
| "thumbnail"
| "thumbnails";
export type SlidyStyles = Record<SlidyNodes, string>;
export type GetSrc<T> = (item: T) => string;
}
declare module "packages/svelte/src/components/Slidy/slidy.styles" {
import type { SlidyStyles } from "assets/types";
export const classNames: SlidyStyles;
}
declare module "packages/core/src/types" {
/**
* Slidy options object
* @see https://github.com/Valexr/slidy/tree/master/packages/core#options
*/
export interface Options {
/**
* Sliding index
*/
index?: number;
/**
* Sliding position. Setter working only in `snap: undefined` mode;
*/
position?: number;
/**
* Clamping sliding by index: `clamp - index + clamp`
*/
clamp?: number;
/**
* Part of gap padding both start/end edges of slide `gap * indent`
*/
indent?: number;
/**
* How many pixels to drag in the RAF `~16ms` to start move, `0` when sliding
*/
sensity?: number;
/**
* Sliding gravity: `0(space) ~ 1(eath) ~ 2(underground)`
*/
gravity?: number;
/**
* Sliding duration in ms
*/
duration?: number;
/**
* Custom slide animation.
* @see https://github.com/Valexr/Slidy/tree/master/packages/animation
*/
animation?: AnimationFunc;
/**
* Inertion scroll easing behaviour.
* @see https://github.com/Valexr/Slidy/tree/master/packages/easing
*/
easing?: EasingFunc;
/**
* Slidy plugins.
* @see https://github.com/Valexr/Slidy/tree/master/packages/plugins
*/
plugins?: ReturnType<PluginFunc>[];
/**
* Control coordinate axis: `'x'`, `'y'`.
*/
axis?: Axis;
/**
* Snapping side: `'start', 'center', 'end', 'deck', undefined`. Default clamp sliding by edges.
*/
snap?: Snap;
/**
* Makes the slideshow continious.
*/
loop?: boolean;
/**
* Children move direction
* @readonly
*/
direction?: number;
/**
* Children vertical flow
* @readonly
*/
vertical?: boolean;
/**
* Children reverse flow: `-1` or `1`
* @readonly
*/
reverse?: number;
/**
* Children full width size gaps > target node size
* @readonly
*/
scrollable?: boolean;
/**
* Scroll position on one of the edges
* @readonly
*/
edged?: boolean;
}
type Axis = "x" | "y" | "both";
type Snap = "start" | "center" | "end" | "deck";
export interface UniqEvent extends PointerEvent {
touches: TouchList;
deltaX: number;
deltaY: number;
}
export type EventMap = [string, EventListener, AddEventListenerOptions?];
export type Detail = Record<string, any> | HTMLCollectionOf<Child> | HTMLElement | Options | string;
/** Easing function.
* @param t value from 0 to 1
* @returns value from 0 to 1
* @default linear
* @see https://easings.net
*/
export type EasingFunc = (t: number) => number;
export interface Child extends HTMLElement {
i: number;
index: number;
active: number;
size: number;
dist: number;
track: number;
turn: number;
exp: number;
}
export type AnimationArgs = {
node: HTMLElement;
child: Child;
options: Partial<Options>;
translate: string;
};
/**
* Animation function
* @see https://github.com/Valexr/Slidy/tree/master/packages/animation
* ```ts
* AnimationArgs = {
* node: HTMLElement;
* child: Child;
* options: Partial<Options>;
* translate: string;
* }
* ```
*/
export type AnimationFunc = (args: AnimationArgs) => Partial<CSSStyleDeclaration>;
export type PluginArgs = {
node: HTMLElement;
options: Options;
instance: SlidyInstance;
};
/**
* Plugin function
* @see https://github.com/Valexr/Slidy/tree/master/packages/plugin
*
* ```ts
* PluginArgs = {
* node: HTMLElement,
* options: Options,
* instance: SlidyInstance
* }
* ```
*/
export type PluginFunc = (params?: unknown) => (args: PluginArgs) => void;
export interface Dom {
edges: (index?: number) => boolean;
distance: (index: number, snap?: Options["snap"]) => number;
index(target: number): number;
position(replace?: boolean): number;
swap(dir: number): number;
sense(e: UniqEvent, pos: number, sensity?: number): boolean;
animate(): void;
}
export interface SlidyInstance {
/**
* Init slidy() instance
*/
init: (node: HTMLElement) => void;
/**
* Update any property in options
*/
update: (options: Partial<Options>) => void;
/**
* Scroll to `index` or `position`
*/
to: (index: number, position?: number) => void;
/**
* Remove event listners, observers & defaulted props on `slidy()` instance
*/
destroy: () => Promise<void>;
}
}
declare module "packages/core/src/lib/utils" {
import type { Options, PluginFunc } from "packages/core/src/types";
const assign: {
<T extends {}, U>(target: T, source: U): T & U;
<T extends {}, U, V>(target: T, source1: U, source2: V): T & U & V;
<T extends {}, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W;
(target: object, ...sources: any[]): any;
},
entries: {
<T>(
o:
| {
[s: string]: T;
}
| ArrayLike<T>,
): [string, T][];
(o: {}): [string, any][];
};
const abs: (x: number) => number,
exp: (x: number) => number,
floor: (x: number) => number,
max: (...values: number[]) => number,
round: (x: number) => number,
sign: (x: number) => number;
function clamp(mn: number, val: number, mx: number): number;
function throttle(fn: (args: any) => void, ms?: number, th?: boolean | number): (args: any) => void;
function loop(
array: string | any[] | HTMLCollection | Array<Partial<Options>> | PluginFunc[],
cb: (item: (typeof array)[number], i: number, array: any) => void,
): string | any[] | HTMLCollection | Partial<Options>[] | PluginFunc[];
export { assign, abs, exp, floor, max, round, sign, clamp, entries, loop, throttle };
}
declare module "packages/core/src/lib/env" {
import type { Options, UniqEvent, Detail, EventMap } from "packages/core/src/types";
const X: (e: UniqEvent | WheelEvent, options: Partial<Options>) => boolean;
function mount(node: HTMLElement, count?: number): Promise<unknown>;
function indexing(node: HTMLElement, options: Partial<Options>, index: number): number;
function coordinate(e: UniqEvent, options: Partial<Options>): number;
function dispatch(node: HTMLElement, name: string, detail?: Detail): void;
function listen(node: Window | HTMLElement, events: EventMap[], on?: boolean): void;
export { mount, listen, dispatch, indexing, coordinate, X };
}
declare module "packages/core/src/lib/dom" {
import type { Dom, Options } from "packages/core/src/types";
export function dom(node: HTMLElement, options: Partial<Options>): Dom;
}
declare module "packages/core/src/lib/slidy" {
import type { Options, SlidyInstance } from "packages/core/src/types";
/**
* Simple, configurable, nested & reusable sliding action script
* @see https://github.com/Valexr/slidy/tree/master/packages/core
*/
export function slidy(node: HTMLElement, opts: Partial<Options>): SlidyInstance;
}
declare module "packages/core/src/index" {
export { slidy } from "packages/core/src/lib/slidy";
export type { Options, SlidyInstance, EasingFunc, AnimationFunc, AnimationArgs, PluginFunc, PluginArgs, EventMap } from "packages/core/src/types";
}
declare module "packages/svelte/src/components/Core/Core.types" {
import type { Options } from "packages/core/src/index";
import type { UIEventHandler } from "svelte/elements";
export interface SlidyCoreOptions extends Options, Events {
className?: string;
tag?: string;
}
export interface Events {
onmount?: (
event: CustomEvent<{
options: SlidyCoreOptions;
}>,
) => void;
onmove?: (
event: CustomEvent<{
index: number;
position: number;
}>,
) => void;
onkeys?: (event: CustomEvent<string>) => void;
onindex?: (
event: CustomEvent<{
index: number;
}>,
) => void;
onupdate?: (event: CustomEvent<SlidyCoreOptions>) => void;
onresize?: UIEventHandler<any> &
((
event: CustomEvent<{
ROE: ResizeObserverEntry[];
options: SlidyCoreOptions;
}>,
) => void);
onmutate?: (
event: CustomEvent<{
ML: MutationRecord[];
options: SlidyCoreOptions;
}>,
) => void;
ondestroy?: (event: CustomEvent<HTMLElement>) => void;
}
}
declare module "packages/svelte/src/components/Slidy/Slidy.types" {
import type { SlidyCoreOptions } from "packages/svelte/src/components/Core/Core.types";
import type { SlidyStyles, I18NDict, Slide, GetSrc } from "assets/types";
export type { Slide } from "assets/types";
export interface SlidyOptions<K> extends SlidyCoreOptions {
arrows: boolean;
background: boolean;
classNames: SlidyStyles;
getImgSrc: GetSrc<Slide>;
getThumbSrc: GetSrc<Slide>;
groups: number;
i18n: I18NDict;
navigation: boolean;
progress: boolean;
slides: K[];
thumbnail: boolean;
counter: boolean;
indexThumb: number;
}
}
declare module "@slidy/svelte" {
export { default as Slidy } from "./components/Slidy/Slidy.svelte";
export { default as Core } from "./components/Core/Core.svelte";
export { classNames } from "packages/svelte/src/components/Slidy/slidy.styles";
export type { Slide, SlidyOptions } from "packages/svelte/src/components/Slidy/Slidy.types";
export type { SlidyCoreOptions } from "packages/svelte/src/components/Core/Core.types";
}
declare module "packages/svelte/src/components/index" {
export { default as Arrow } from "./Arrow/Arrow.svelte";
export { default as Core } from "./Core/Core.svelte";
export { default as Image } from "./Image/Image.svelte";
export { default as Navigation } from "./Navigation/Navigation.svelte";
export { default as Progress } from "./Progress/Progress.svelte";
export { default as Thumbnail } from "./Thumbnail/Thumbnail.svelte";
}
declare module "assets/i18n/index" {
import type { I18NDict } from "assets/types";
export const i18nDefaults: I18NDict;
}
declare module "packages/svelte/src/components/Slidy/i18n" {
export { i18nDefaults } from "assets/i18n/index";
}
declare module "packages/svelte/src/components/Thumbnail/thumbnail.types" {
import type { SlidyCoreOptions } from "packages/svelte/src/components/Core/Core.types";
import type { Slide, SlidyOptions } from "packages/svelte/src/components/Slidy/Slidy.types";
export interface SlidyThumbOptions extends Omit<SlidyCoreOptions, "axis" | "className" | "position" | "position" | "className"> {
active: number;
background: SlidyOptions<Slide>["background"];
getImgSrc: SlidyOptions<Slide>["getImgSrc"];
slides: SlidyOptions<Slide>["slides"];
}
}