@slidy/solid
Version:
Simple, configurable & reusable carousel component built with SolidJS
622 lines (621 loc) • 22.1 kB
TypeScript
declare module "packages/solid/src/components/Arrow/Arrow.types" {
export interface Props {
direction: number;
step: number;
loop?: boolean;
index: number;
items?: number;
vertical: boolean;
}
}
declare module "packages/solid/src/components/Arrow/Arrow" {
import '@slidy/assets/styles/arrow.module.css';
import type { Props } from "packages/solid/src/components/Arrow/Arrow.types";
import type { FlowComponent } from 'solid-js';
const Arrow: FlowComponent<Props>;
export default Arrow;
}
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 "assets/scripts/utils" {
export const randInt: (min: number, max: number) => number;
export const clamp: (min: number, value: number, max: number) => number;
export const isFunction: (fn: unknown) => fn is (..._: any[]) => any;
export const format: (pattern: string, ...replacements: (string | number)[]) => string;
export const execute: (...quenue: (undefined | ((arg: any) => void))[]) => (arg: any) => void;
export const noop: () => void;
export const not: (value: unknown) => boolean;
export const increment: (value: number) => number;
}
declare module "packages/solid/src/components/Core/Core.types" {
import type { Options as SlidyCoreOptions } from "packages/core/src/index";
import type { ValidComponent } from 'solid-js';
/**
* Custom event handler, turns `T` into `(event: CustomEvent<T>) => void` function definition
*/
type CEHandler<T> = (event: CustomEvent<T>) => void;
export interface Props extends SlidyCoreOptions {
tag: ValidComponent;
className?: string;
onResize?: CEHandler<{
ROE: ResizeObserverEntry[];
options: SlidyCoreOptions;
}>;
onMutate?: CEHandler<{
ML: MutationRecord[];
options: SlidyCoreOptions;
}>;
onMount?: CEHandler<{
options: SlidyCoreOptions;
}>;
onMove?: CEHandler<{
index: number;
position: number;
}>;
onIndex?: CEHandler<{
index: number;
}>;
onKeys?: CEHandler<string>;
onUpdate?: CEHandler<SlidyCoreOptions>;
onDestroy?: CEHandler<HTMLElement>;
}
export { SlidyCoreOptions };
}
declare module "packages/solid/src/components/Core/Core" {
import type { Props } from "packages/solid/src/components/Core/Core.types";
import type { FlowComponent } from 'solid-js';
const Core: FlowComponent<Partial<Props>>;
export default Core;
}
declare module "packages/solid/src/components/Image/Image.types" {
import type { JSX } from 'solid-js';
type ImgNativeAttrs = Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, 'loading' | 'class' | 'id'>;
export interface Props extends ImgNativeAttrs {
lazy?: boolean;
id?: string | number;
}
}
declare module "packages/solid/src/components/Image/Image" {
import '@slidy/assets/styles/image.module.css';
import type { Component } from 'solid-js';
import type { Props } from "packages/solid/src/components/Image/Image.types";
const Image: Component<Partial<Props>>;
export default Image;
}
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 "assets/scripts/navigation" {
import type { IndexGenerator } from "assets/types";
/**
* Generates an array of numbers in given range [ start, start + 1, ... );
*/
export const range: (start: number, end: number) => number[];
/**
* Generates an array of indexes for responsive pagination: [ start, end ].
*/
export const generateIndexes: IndexGenerator;
}
declare module "assets/icons/index" {
export const iconChevron: {
viewBox: string;
path: string;
};
export const iconPause: {
viewBox: string;
path: string;
};
export const iconPlay: {
viewBox: string;
path: string;
};
export const iconStop: {
viewBox: string;
path: string;
};
}
declare module "packages/solid/src/components/Navigation/Navigation.types" {
interface Options {
current: number;
start: number;
end: number;
ordinal: boolean;
vertical: boolean;
limit: number;
siblings: number;
}
type Require<T extends object, Keys extends keyof T> = Pick<T, Keys> & Partial<Omit<T, Keys>>;
export type Props = Require<Options, 'start' | 'current' | 'end'>;
}
declare module "packages/solid/src/components/Navigation/Navigation" {
import '@slidy/assets/styles/navigation.module.css';
import type { VoidComponent } from 'solid-js';
import type { Props } from "packages/solid/src/components/Navigation/Navigation.types";
const Navigation: VoidComponent<Props>;
export default Navigation;
}
declare module "packages/solid/src/components/Progress/Progress.types" {
import type { JSX } from 'solid-js';
export interface Props {
value: number;
max: number;
vertical: boolean;
onInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent>;
}
}
declare module "packages/solid/src/components/Progress/Progress" {
import '@slidy/assets/styles/progress.module.css';
import type { VoidComponent } from 'solid-js';
import type { Props } from "packages/solid/src/components/Progress/Progress.types";
const Progress: VoidComponent<Partial<Props>>;
export default Progress;
}
declare module "packages/solid/src/components/Slidy/Slidy.types" {
import type { SlidyCoreOptions } from "packages/solid/src/components/Core/Core.types";
import type { JSX, Accessor, Setter } from 'solid-js';
import type { SlidyStyles, I18NDict, Slide, GetSrc } from "assets/types";
type BaseCoreOptions = Omit<SlidyCoreOptions, 'index' | 'position'>;
export interface Props extends BaseCoreOptions {
/**
* Defines the slides flow by using `aria-orientation`
* @default false
*/
vertical?: boolean;
/**
* @default false
*/
background?: boolean;
/**
* @default true
*/
counter?: boolean;
classNames?: SlidyStyles;
i18n?: I18NDict;
easing?: SlidyCoreOptions['easing'];
getImgSrc?: GetSrc<Slide | unknown>;
getThumbSrc?: GetSrc<Slide | unknown>;
/**
* @default false
*/
navigation?: boolean;
id?: string;
/**
* @default 0
*/
groups?: number;
/**
* @default false
*/
progress?: boolean;
/**
* @default []
*/
slides?: Slide[];
/**
* Slide index
*/
index?: Accessor<number>;
/**
* Control the index from outside
*/
setIndex?: Setter<number>;
overlay?: () => JSX.Element;
thumbnail?: (() => JSX.Element) | boolean;
arrows?: (() => JSX.Element) | boolean;
arrow?: () => JSX.Element;
children?: (item: Slide) => JSX.Element;
onResize?: (event: CustomEvent<{
ROE: ResizeObserverEntry[];
options: SlidyCoreOptions;
}>) => void;
onMutate?: (event: CustomEvent<{
ML: MutationRecord[];
options: SlidyCoreOptions;
}>) => void;
onMount?: (event: CustomEvent<{
options: SlidyCoreOptions;
}>) => void;
onMove?: (event: CustomEvent<{
index: number;
position: number;
}>) => void;
onIndex?: (event: CustomEvent<{
index: number;
}>) => void;
onKeys?: (event: CustomEvent<string>) => void;
onUpdate?: (event: CustomEvent<SlidyCoreOptions>) => void;
onDestroy?: (event: CustomEvent<HTMLElement>) => void;
}
export { SlidyCoreOptions, GetSrc, Slide };
}
declare module "packages/solid/src/components/Thumbnail/thumbnail.types" {
import type { SlidyCoreOptions } from "packages/solid/src/components/Core/Core.types";
import type { Props as SlidyOptions } from "packages/solid/src/components/Slidy/Slidy.types";
export interface Props {
active: number;
animation: SlidyCoreOptions['animation'];
axis: SlidyCoreOptions['axis'];
background: boolean;
clamp: number;
duration: SlidyCoreOptions['duration'];
easing: SlidyCoreOptions['easing'];
getImgSrc: SlidyOptions['getImgSrc'];
gravity: number;
indent: number;
index: number;
loop: boolean;
sensity: number;
slides: SlidyOptions['slides'];
snap: SlidyCoreOptions['snap'];
onIndex?: (event: CustomEvent<{
index: number;
}>) => void;
onSelect?: (index: number) => void;
}
export type SlidyThumbOptions = Props;
}
declare module "packages/solid/src/components/Thumbnail/Thumbnail" {
import type { Props } from "packages/solid/src/components/Thumbnail/thumbnail.types";
import type { VoidComponent } from 'solid-js';
import '@slidy/assets/styles/thumbnail.module.css';
const Thumbnail: VoidComponent<Partial<Props>>;
export default Thumbnail;
}
declare module "packages/solid/src/components/index" {
export { default as Arrow } from "packages/solid/src/components/Arrow/Arrow";
export { default as Core } from "packages/solid/src/components/Core/Core";
export { default as Image } from "packages/solid/src/components/Image/Image";
export { default as Navigation } from "packages/solid/src/components/Navigation/Navigation";
export { default as Progress } from "packages/solid/src/components/Progress/Progress";
export { default as Thumbnail } from "packages/solid/src/components/Thumbnail/Thumbnail";
}
declare module "assets/i18n/index" {
import type { I18NDict } from "assets/types";
export const i18nDefaults: I18NDict;
}
declare module "packages/solid/src/components/Slidy/i18n" {
export { i18nDefaults } from "assets/i18n/index";
}
declare module "packages/solid/src/components/Slidy/slidy.styles" {
export const classNames: {
arrow: string;
autoplay: string;
counter: string;
img: string;
nav: string;
'nav-item': string;
overlay: string;
progress: string;
'progress-handle': string;
root: string;
slide: string;
slides: string;
thumbnail: string;
thumbnails: string;
};
}
declare module "packages/solid/src/components/Context/Context" {
const SlidyContext: import("solid-js").Context<{
i18n: import("@slidy/assets/types").I18NDict;
classNames: {
arrow: string;
autoplay: string;
counter: string;
img: string;
nav: string;
'nav-item': string;
overlay: string;
progress: string;
'progress-handle': string;
root: string;
slide: string;
slides: string;
thumbnail: string;
thumbnails: string;
};
}>;
const useSlidy: () => {
i18n: import("@slidy/assets/types").I18NDict;
classNames: {
arrow: string;
autoplay: string;
counter: string;
img: string;
nav: string;
'nav-item': string;
overlay: string;
progress: string;
'progress-handle': string;
root: string;
slide: string;
slides: string;
thumbnail: string;
thumbnails: string;
};
};
export { SlidyContext, useSlidy };
}
declare module "packages/solid/src/components/Slidy/Slidy" {
import { useSlidy } from "packages/solid/src/components/Context/Context";
import '@slidy/assets/styles/slidy.module.css';
import type { Props } from "packages/solid/src/components/Slidy/Slidy.types";
import type { Component } from 'solid-js';
const Slidy: Component<Partial<Props>>;
export { useSlidy };
export default Slidy;
}
declare module "@slidy/solid" {
export { default as Slidy } from "packages/solid/src/components/Slidy/Slidy";
export { default as Core } from "packages/solid/src/components/Core/Core";
export { classNames } from "packages/solid/src/components/Slidy/slidy.styles";
export { i18nDefaults } from "packages/solid/src/components/Slidy/i18n";
export type { Slide, Props as SlidyOptions } from "packages/solid/src/components/Slidy/Slidy.types";
export type { SlidyCoreOptions } from "packages/solid/src/components/Core/Core.types";
}