@slidy/element
Version:
Simple, configurable & reusable carousel CustomElement
255 lines (254 loc) • 9.07 kB
TypeScript
declare module "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 "core/src/lib/utils" {
import type { Options, PluginFunc } from "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 "core/src/lib/env" {
import type { Options, UniqEvent, Detail, EventMap } from "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 "core/src/lib/dom" {
import type { Dom, Options } from "core/src/types";
export function dom(node: HTMLElement, options: Partial<Options>): Dom;
}
declare module "core/src/lib/slidy" {
import type { Options, SlidyInstance } from "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 "core/src/index" {
export { slidy } from "core/src/lib/slidy";
export type { Options, SlidyInstance, EasingFunc, AnimationFunc, AnimationArgs, PluginFunc, PluginArgs, EventMap, } from "core/src/types";
}
declare module "element/src/lib/utils" {
export function prepareValue(name: string, value: string): any;
export function valued(value: unknown): any;
export function functioned(value: string): any;
}
declare module "element/src/types" {
export type { Options, SlidyInstance } from "core/src/index";
}
declare module "element/src/lib/slidy" {
import type { Options, SlidyInstance } from "element/src/types";
export default class Slidy extends HTMLElement {
_slidy?: SlidyInstance;
_options?: Partial<Options>;
static observedAttributes: string[];
constructor();
set options(value: Partial<Options> | undefined);
get options(): Partial<Options> | undefined;
setUpAccessors(attributes: string[]): void;
setUpOptions(attributes: string[]): Partial<Options>;
connectedCallback(): void;
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
init(options?: Partial<Options>): void;
to(index: number): void;
update(opts: Partial<Options>): void;
destroy(): void;
}
}
declare module "@slidy/element" {
export { default as slidy } from "element/src/lib/slidy";
export type { Options, SlidyInstance } from "element/src/types";
}