Sortable 전체 API 레퍼런스

npm 패키지의 공개 진입점에서 접근할 수 있는 모든 export와 선언 멤버를 수록했습니다. 이름과 시그니처를 검색하여 정확한 import 경로와 타입 계약을 확인할 수 있습니다.

comins-sortable@0.1.666 / 63 / 70 / 186 / 13

export 엔트리 / 고유 export / 도달 계약 / 멤버 / CSS 변수

이 페이지에서 찾기

공개 export 63도달 계약 70CSS 변수 13

AfterDragReason

type

comins-sortable/core

export type AfterDragReason = 'drop' | 'outside' | 'pointer-cancel' | 'escape' | 'blur' | 'disabled' | 'not-accepted' | 'nested-cycle' | 'unmounted' | 'state-not-committed' | 'destroyed' | 'error';

dist/core/model.d.ts:91

AfterDragResult

type

comins-sortable/core

export interface AfterDragResult {
    status: 'dropped' | 'cancelled' | 'rejected';
    reason: AfterDragReason;
    change?: SortableChange;
}

dist/core/model.d.ts:92

buildCopyChange

value

comins-sortable/core

export declare function buildCopyChange(sourceItemIds: readonly SortableId[], destinationItemIds: readonly SortableId[], source: SortableLocation, destination: SortableLocation, itemId: SortableId): SortableChange;

dist/core/operations.d.ts:9

CopyItem

type

comins-sortable/core

export type CopyItem<T> = (item: T, context: CopyItemContext) => T;

dist/core/model.d.ts:80

CopyItemContext

type

comins-sortable/core

export interface CopyItemContext extends DragContext {
    destination: SortableLocation;
}

dist/core/model.d.ts:77

createSortable

value

comins-sortable

export declare function createSortable(element: Element | string, options: VanillaSortableOptions): Sortable;

dist/vanilla/create-sortable.d.ts:2

createSortableScope

value

comins-sortable/corecomins-sortable/svelte

export declare function createSortableScope(options?: SortableScopeOptions): SortableScope;

export declare function createSortableScope<T>(options?: SvelteSortableScopeOptions<T>): SvelteSortableScope<T>;

dist/core/scope.d.ts:3 · dist/svelte/scope.d.ts:20

createSortableTree

value

comins-sortable/core

export declare function createSortableTree<T>(options: SortableTreeOptions<T>): SortableTree<T>;

dist/core/tree.d.ts:23

DragContext

type

comins-sortable/core

export interface DragContext {
    itemId: SortableId;
    source: SortableLocation;
    destination: SortableLocation | null;
    pointer: PointerSnapshot;
}

dist/core/model.d.ts:71

FrameworkSortableChange

type

comins-sortable/core

export type FrameworkSortableChange<T> = SortableChange & {
    updates: readonly SortableAreaUpdate<T>[];
};

dist/core/model.d.ts:57

InsertDragAreaEvent

type

comins-sortable/core

export interface InsertDragAreaEvent extends DragContext {
    previousDestination: SortableLocation | null;
    destination: SortableLocation;
}

dist/core/model.d.ts:87

ItemKey

type

comins-sortable/core

export type ItemKey<T> = keyof T | ((item: T) => SortableId);

dist/core/model.d.ts:2

PointerSnapshot

type

comins-sortable/core

export interface PointerSnapshot {
    type: 'mouse' | 'touch' | 'pen';
    clientX: number;
    clientY: number;
    deltaX: number;
    deltaY: number;
    altKey: boolean;
    ctrlKey: boolean;
    metaKey: boolean;
    shiftKey: boolean;
}

dist/core/model.d.ts:60

reorder

value

comins-sortable/core

export declare function reorder<T>(items: readonly T[], fromIndex: number, toIndex: number): readonly T[];

dist/core/operations.d.ts:2

sortable

value

comins-sortable/svelte

export declare function sortable<T>(node: HTMLElement, initialOptions: SvelteSortableOptions<T>): SvelteActionReturn<T>;

dist/svelte/sortable.d.ts:41

Sortable

type

comins-sortable

export interface Sortable {
    registerArea(element: Element | string, options: VanillaSortableAreaOptions): () => void;
    updateArea(areaId: string, patch: VanillaSortableAreaPatch): void;
    refreshArea(areaId: string): void;
    cancel(): void;
    destroy(): void;
}

dist/vanilla/types.d.ts:9

SortableAnimation

type

comins-sortable/core

export type SortableAnimation = false | number | SortableAnimationOptions;

dist/core/model.d.ts:17

SortableAnimationOptions

type

comins-sortable/core

export interface SortableAnimationOptions {
    duration: number;
    easing?: string;
}

dist/core/model.d.ts:13

SortableArea

value

comins-sortable/reactcomins-sortable/vue

export declare function SortableArea<T>(props: SortableAreaProps<T>): ReactElement;

SortableArea: VueSortableAreaComponent

dist/react/SortableArea.d.ts:32 · dist/vue/SortableArea.d.ts:153

SortableAreaOptions

type

comins-sortable/core

export interface SortableAreaOptions {
    areaId: string;
    group?: SortableGroup;
    item: string;
    getItemId?: (element: Element) => SortableId;
    direction?: SortableDirection;
    disabled?: boolean;
    handle?: string;
    ignore?: string;
    activationDistance?: number;
    emptyInsertThreshold?: number;
    /** Fraction of a hovered item that activates insertion, from 0 through 1. */
    swapThreshold?: number;
    /** Move threshold activation from the item center toward its edges. */
    invertSwap?: boolean;
    /** Exchange the dragged and hovered items instead of insertion sorting. */
    swap?: boolean;
    /** Enable modifier selection and moving selected items as one ordered group. */
    multiDrag?: boolean;
    /** Class applied to selected items. */
    selectedClass?: string;
    autoScroll?: boolean;
    animation?: SortableAnimation;
    placeholder?: SortablePlaceholderOptions;
    parent?: SortableParentLocation;
    accept?: (context: DragContext) => boolean;
    prepareCopy?: (context: CopyItemContext) => SortableId;
}

dist/core/model.d.ts:97

SortableAreaPatch

type

comins-sortable/core

export type SortableAreaPatch = Partial<Omit<SortableAreaOptions, 'areaId'>>;

dist/core/model.d.ts:125

SortableAreaProps

type

comins-sortable/react

export interface SortableAreaProps<T> {
    areaId: string;
    group?: SortableGroup;
    items: readonly T[];
    itemKey: ItemKey<T>;
    onItemsChange(items: readonly T[]): void;
    children(item: T, index: number): ReactElement;
    direction?: SortableDirection;
    disabled?: boolean;
    handle?: string;
    ignore?: string;
    activationDistance?: number;
    emptyInsertThreshold?: number;
    swapThreshold?: number;
    invertSwap?: boolean;
    swap?: boolean;
    multiDrag?: boolean;
    selectedClass?: string;
    autoScroll?: boolean;
    accept?: (context: DragContext) => boolean;
    copyItem?: CopyItem<T>;
    animation?: SortableAnimation;
    placeholder?: SortablePlaceholderOptions;
    parent?: SortableParentLocation;
    as?: ElementType;
    areaProps?: HTMLAttributes<HTMLElement>;
    header?: ReactNode;
    footer?: ReactNode;
}

dist/react/SortableArea.d.ts:3

SortableAreaUpdate

type

comins-sortable/core

export interface SortableAreaUpdate<T> {
    areaId: string;
    items: readonly T[];
}

dist/core/model.d.ts:53

SortableChange

type

comins-sortable/core

export type SortableChange = SortableMoveChange | SortableCopyChange | SortableSwapChange;

dist/core/model.d.ts:52

SortableCopyChange

type

comins-sortable/core

export interface SortableCopyChange extends SortableChangeBase {
    operation: 'copy';
    sourceItemId: SortableId;
}

dist/core/model.d.ts:44

SortableDirection

type

comins-sortable/core

export type SortableDirection = 'vertical' | 'horizontal' | 'grid' | 'auto';

dist/core/model.d.ts:3

SortableError

value

comins-sortable/core

export declare class SortableError extends Error {
    readonly code: SortableErrorCode;
    constructor(code: SortableErrorCode);
}

dist/core/errors.d.ts:2

SortableErrorCode

type

comins-sortable/core

export type SortableErrorCode = 'INVALID_ELEMENT' | 'DUPLICATE_AREA_ID' | 'DUPLICATE_ITEM_ID' | 'MISSING_ITEM_ID' | 'INVALID_OPTION';

dist/core/errors.d.ts:1

SortableGroup

type

comins-sortable/core

export type SortableGroup = string | SortableGroupOptions;

dist/core/model.d.ts:86

SortableGroupOptions

type

comins-sortable/core

export interface SortableGroupOptions {
    name: string;
    pull?: false | SortableTransferMode | ((context: DragContext) => false | SortableTransferMode);
    put?: boolean | readonly string[] | ((context: DragContext) => boolean);
}

dist/core/model.d.ts:81

SortableId

type

comins-sortable/core

export type SortableId = string | number;

dist/core/model.d.ts:1

SortableLocation

type

comins-sortable/core

export interface SortableLocation {
    areaId: string;
    index: number;
}

dist/core/model.d.ts:5

SortableMoveChange

type

comins-sortable/core

export type SortableMoveChange = SortableReorderChange | SortableTransferChange;

dist/core/model.d.ts:43

SortableOrder

type

comins-sortable/core

export interface SortableOrder {
    areaId: string;
    itemIds: readonly SortableId[];
}

dist/core/model.d.ts:25

SortableParentLocation

type

comins-sortable/core

export interface SortableParentLocation {
    areaId: string;
    itemId: SortableId;
}

dist/core/model.d.ts:9

SortablePlaceholderOptions

type

comins-sortable/core

export interface SortablePlaceholderOptions {
    /** Consumer classes added alongside the stable Comins placeholder class. */
    className?: string;
    /** Optional visual preset. Skeleton is drag feedback, not a loading state. */
    preset?: SortablePlaceholderPreset;
}

dist/core/model.d.ts:19

SortablePlaceholderPreset

type

comins-sortable/core

export type SortablePlaceholderPreset = 'default' | 'skeleton';

dist/core/model.d.ts:18

SortableReorderChange

type

comins-sortable/core

export interface SortableReorderChange extends SortableChangeBase {
    operation: 'reorder';
}

dist/core/model.d.ts:37

SortableRoot

value

comins-sortable/reactcomins-sortable/vue

export declare function SortableRoot<T>(props: SortableRootProps<T>): ReactElement;

SortableRoot: VueSortableRootComponent

dist/react/SortableRoot.d.ts:7 · dist/vue/SortableRoot.d.ts:35

SortableRootProps

type

comins-sortable/react

export interface SortableRootProps<T> extends Omit<SortableScopeOptions, 'onChange'> {
    children?: ReactNode;
    onChange?: (change: FrameworkSortableChange<T>) => void;
}

dist/react/SortableRoot.d.ts:3

SortableScope

type

comins-sortable/core

export interface SortableScope {
    registerArea(element: Element, options: SortableAreaOptions): () => void;
    updateArea(areaId: string, patch: SortableAreaPatch): void;
    refreshArea?(areaId: string): void;
    cancel(): void;
    destroy(): void;
}

dist/core/model.d.ts:135

SortableScopeOptions

type

comins-sortable/core

export interface SortableScopeOptions {
    onBeforeDragStart?: (context: DragContext) => boolean | void;
    onDragStart?: (context: DragContext) => void;
    onDrag?: (context: DragContext) => void;
    onInsertDragArea?: (event: InsertDragAreaEvent) => void;
    onChange?: (change: SortableChange) => void;
    onAfterDrag?: (result: AfterDragResult) => void;
    onError?: (error: unknown) => void;
}

dist/core/model.d.ts:126

SortableSwapChange

type

comins-sortable/core

export interface SortableSwapChange extends SortableChangeBase {
    operation: 'swap';
    swapItemId: SortableId;
}

dist/core/model.d.ts:48

SortableTransferChange

type

comins-sortable/core

export interface SortableTransferChange extends SortableChangeBase {
    operation: 'transfer';
}

dist/core/model.d.ts:40

SortableTransferMode

type

comins-sortable/core

export type SortableTransferMode = 'move' | 'copy';

dist/core/model.d.ts:4

SortableTree

type

comins-sortable/core

export interface SortableTree<T> {
    getAreas(nodes: readonly T[]): readonly SortableTreeArea<T>[];
    updateArea(nodes: readonly T[], areaId: string, items: readonly T[]): readonly T[];
    applyChange(nodes: readonly T[], change: FrameworkSortableChange<T>): readonly T[];
}

dist/core/tree.d.ts:14

SortableTreeArea

type

comins-sortable/core

export interface SortableTreeArea<T> {
    areaId: string;
    items: readonly T[];
    parent?: SortableParentLocation;
}

dist/core/tree.d.ts:9

SortableTreeOptions

type

comins-sortable/core

export interface SortableTreeOptions<T> {
    rootAreaId: string;
    getNodeId(node: T): SortableId;
    getChildren(node: T): readonly T[];
    withChildren(node: T, children: readonly T[]): T;
    getChildrenAreaId(node: T): string;
}

dist/core/tree.d.ts:2

SvelteActionReturn

type

comins-sortable/svelte

export interface SvelteActionReturn<T> {
    update(options: SvelteSortableOptions<T>): void;
    destroy(): void;
}

dist/svelte/sortable.d.ts:30

SvelteSortableOptions

type

comins-sortable/svelte

export interface SvelteSortableOptions<T> {
    scope?: SvelteSortableScope<T>;
    areaId: string;
    group?: SortableGroup;
    items: readonly T[];
    itemKey: ItemKey<T>;
    onItemsChange(items: readonly T[]): void;
    direction?: SortableDirection;
    disabled?: boolean;
    handle?: string;
    ignore?: string;
    activationDistance?: number;
    emptyInsertThreshold?: number;
    swapThreshold?: number;
    invertSwap?: boolean;
    swap?: boolean;
    multiDrag?: boolean;
    selectedClass?: string;
    autoScroll?: boolean;
    accept?: (context: DragContext) => boolean;
    copyItem?: CopyItem<T>;
    animation?: SortableAnimation;
    placeholder?: SortablePlaceholderOptions;
    parent?: SortableParentLocation;
    item?: string;
}

dist/svelte/sortable.d.ts:4

SvelteSortableScope

type

comins-sortable/svelte

export interface SvelteSortableScope<T> {
    readonly [svelteScopeBrand]: (item: T) => T;
    cancel(): void;
    destroy(): void;
}

dist/svelte/scope.d.ts:15

SvelteSortableScopeOptions

type

comins-sortable/svelte

export interface SvelteSortableScopeOptions<T> extends Omit<SortableScopeOptions, 'onChange'> {
    onChange?: (change: FrameworkSortableChange<T>) => void;
}

dist/svelte/scope.d.ts:4

transfer

value

comins-sortable/core

export declare function transfer<T>(sourceItems: readonly T[], destinationItems: readonly T[], sourceIndex: number, destinationIndex: number): {
    sourceItems: readonly T[];
    destinationItems: readonly T[];
};

dist/core/operations.d.ts:3

VanillaSortableAreaOptions

type

comins-sortable

export interface VanillaSortableAreaOptions extends Omit<SortableAreaOptions, 'getItemId' | 'prepareCopy'> {
    getItemId?: (element: Element) => SortableId;
    copyElement?: (source: Element, context: CopyItemContext) => Element;
}

dist/vanilla/types.d.ts:2

VanillaSortableAreaPatch

type

comins-sortable

export type VanillaSortableAreaPatch = Partial<Omit<VanillaSortableAreaOptions, 'areaId'>>;

dist/vanilla/types.d.ts:6

VanillaSortableOptions

type

comins-sortable

export interface VanillaSortableOptions extends VanillaSortableAreaOptions, SortableScopeOptions {
}

dist/vanilla/types.d.ts:7

VueSortableAreaComponent

type

comins-sortable/vue

export type VueSortableAreaComponent = Omit<typeof SortableAreaComponent, never> & {
    new <T>(props: VueSortableAreaProps<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps): Omit<InstanceType<typeof SortableAreaComponent>, '$props' | '$slots' | '$emit'> & {
        $props: VueSortableAreaProps<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps & {
            'onUpdate:modelValue'?: (items: T[]) => void;
        };
        $slots: VueSortableAreaSlots<T>;
        $emit(event: 'update:modelValue', items: T[]): void;
    };
};

dist/vue/SortableArea.d.ts:144

VueSortableAreaProps

type

comins-sortable/vue

export interface VueSortableAreaProps<T> {
    modelValue: readonly T[];
    areaId: string;
    group?: SortableGroup;
    itemKey: ItemKey<T>;
    direction?: SortableDirection;
    disabled?: boolean;
    handle?: string;
    ignore?: string;
    activationDistance?: number;
    emptyInsertThreshold?: number;
    swapThreshold?: number;
    invertSwap?: boolean;
    swap?: boolean;
    multiDrag?: boolean;
    selectedClass?: string;
    autoScroll?: boolean;
    accept?: (context: DragContext) => boolean;
    copyItem?: CopyItem<T>;
    animation?: SortableAnimation;
    placeholder?: SortablePlaceholderOptions;
    parent?: SortableParentLocation;
    tag?: string | Component;
    componentProps?: Readonly<Record<string, unknown>>;
}

dist/vue/SortableArea.d.ts:3

VueSortableAreaSlots

type

comins-sortable/vue

export interface VueSortableAreaSlots<T> {
    item(props: {
        item: T;
        index: number;
    }): VNodeChild;
    header?(): VNodeChild;
    footer?(): VNodeChild;
}

dist/vue/SortableArea.d.ts:28

VueSortableRootComponent

type

comins-sortable/vue

export type VueSortableRootComponent = typeof SortableRootComponent & {
    new <T>(): {
        $props: VueSortableRootProps<T>;
        $slots: VueSortableRootSlots;
        $emit(event: 'change', change: FrameworkSortableChange<T>): void;
    };
};

dist/vue/SortableRoot.d.ts:28

VueSortableRootOptions

type

comins-sortable/vue

export interface VueSortableRootOptions<T> extends Omit<SortableScopeOptions, 'onChange'> {
    onChange?: (change: FrameworkSortableChange<T>) => void;
}

dist/vue/context.d.ts:5

VueSortableRootProps

type

comins-sortable/vue

export interface VueSortableRootProps<T> extends Omit<SortableScopeOptions, 'onChange'> {
    onChange?: (change: FrameworkSortableChange<T>) => void;
}

dist/vue/SortableRoot.d.ts:3

VueSortableRootSlots

type

comins-sortable/vue

export interface VueSortableRootSlots {
    default?(): VNodeChild;
}

dist/vue/SortableRoot.d.ts:6