194 lines
6.9 KiB
TypeScript
194 lines
6.9 KiB
TypeScript
import { InjectionKey } from 'vue';
|
|
import { EventEmitter } from '@vexip-ui/utils';
|
|
import { Layout, LayoutInstance, LayoutItem } from './types';
|
|
export declare const LAYOUT_KEY: InjectionKey<LayoutInstance>;
|
|
export declare const EMITTER_KEY: InjectionKey<EventEmitter>;
|
|
/**
|
|
* Return the bottom coordinate of the layout.
|
|
*
|
|
* @param layout Layout array.
|
|
* @return Bottom coordinate.
|
|
*/
|
|
export declare function bottom(layout: Layout): number;
|
|
export declare function cloneLayout(layout: Layout): Layout;
|
|
export declare function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem;
|
|
/**
|
|
* Given two layoutitems, check if they collide.
|
|
*
|
|
* @return True if colliding.
|
|
*/
|
|
export declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
|
|
/**
|
|
* Given a layout, compact it. This involves going down each y coordinate and removing gaps
|
|
* between items.
|
|
*
|
|
* @param layout Layout.
|
|
* @param verticalCompact Whether or not to compact the layout vertically.
|
|
* @param minPositions
|
|
* @return Compacted Layout.
|
|
*/
|
|
export declare function compact(layout: Layout, verticalCompact?: boolean, minPositions?: any): Layout;
|
|
/**
|
|
* Compact an item in the layout.
|
|
*/
|
|
export declare function compactItem(compareWith: Layout, l: LayoutItem, verticalCompact?: boolean, minPositions?: any): LayoutItem;
|
|
/**
|
|
* Given a layout, make sure all elements fit within its bounds.
|
|
*
|
|
* @param layout Layout array.
|
|
* @param bounds Number of columns.
|
|
*/
|
|
export declare function correctBounds(layout: Layout, bounds: {
|
|
cols: number;
|
|
}): Layout;
|
|
/**
|
|
* Get a layout item by ID. Used so we can override later on if necessary.
|
|
*
|
|
* @param layout Layout array.
|
|
* @param id ID
|
|
* @return Item at ID.
|
|
*/
|
|
export declare function getLayoutItem(layout: Layout, id: number | string): LayoutItem | undefined;
|
|
/**
|
|
* Returns the first item this layout collides with.
|
|
* It doesn't appear to matter which order we approach this from, although
|
|
* perhaps that is the wrong thing to do.
|
|
*
|
|
* @param {Object} layoutItem Layout item.
|
|
* @return {Object|undefined} A colliding layout item, or undefined.
|
|
*/
|
|
export declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
|
|
export declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): Array<LayoutItem>;
|
|
/**
|
|
* Get all static elements.
|
|
* @param layout Array of layout objects.
|
|
* @return Array of static layout items..
|
|
*/
|
|
export declare function getStatics(layout: Layout): Array<LayoutItem>;
|
|
/**
|
|
* Move an element. Responsible for doing cascading movements of other elements.
|
|
*
|
|
* @param layout Full layout to modify.
|
|
* @param layoutItem element to move.
|
|
* @param x X position in grid units.
|
|
* @param y Y position in grid units.
|
|
* @param isUserAction If true, designates that the item we're moving is
|
|
* being dragged/resized by th euser.
|
|
*/
|
|
export declare function moveElement(layout: Layout, layoutItem: LayoutItem, x?: number, y?: number, isUserAction?: boolean, preventCollision?: boolean): Layout;
|
|
/**
|
|
* This is where the magic needs to happen - given a collision, move an element away from the collision.
|
|
* We attempt to move it up if there's room, otherwise it goes below.
|
|
*
|
|
* @param layout Full layout to modify.
|
|
* @param collidesWith Layout item we're colliding with.
|
|
* @param itemToMove Layout item we're moving.
|
|
* @param isUserAction If true, designates that the item we're moving is being dragged/resized
|
|
* by the user.
|
|
*/
|
|
export declare function moveElementAwayFromCollision(layout: Layout, collidesWith: LayoutItem, itemToMove: LayoutItem, isUserAction?: boolean): Layout;
|
|
/**
|
|
* Helper to convert a number to a percentage string.
|
|
*
|
|
* @param num Any number
|
|
* @return That number as a percentage.
|
|
*/
|
|
export declare function perc(num: number): string;
|
|
export declare function setTransform(top: number, left: number, width: number, height: number): {
|
|
transform: string;
|
|
WebkitTransform: string;
|
|
MozTransform: string;
|
|
msTransform: string;
|
|
OTransform: string;
|
|
width: string;
|
|
height: string;
|
|
position: string;
|
|
};
|
|
/**
|
|
* Just like the setTransform method, but instead it will return a negative value of right.
|
|
*
|
|
* @param top
|
|
* @param right
|
|
* @param width
|
|
* @param height
|
|
* @returns {{transform: string, WebkitTransform: string, MozTransform: string, msTransform: string, OTransform: string, width: string, height: string, position: string}}
|
|
*/
|
|
export declare function setTransformRtl(top: number, right: number, width: number, height: number): {
|
|
transform: string;
|
|
WebkitTransform: string;
|
|
MozTransform: string;
|
|
msTransform: string;
|
|
OTransform: string;
|
|
width: string;
|
|
height: string;
|
|
position: string;
|
|
};
|
|
export declare function setTopLeft(top: number, left: number, width: number, height: number): {
|
|
top: string;
|
|
left: string;
|
|
width: string;
|
|
height: string;
|
|
position: string;
|
|
};
|
|
/**
|
|
* Just like the setTopLeft method, but instead, it will return a right property instead of left.
|
|
*
|
|
* @param top
|
|
* @param right
|
|
* @param width
|
|
* @param height
|
|
* @returns position style
|
|
*/
|
|
export declare function setTopRight(top: number, right: number, width: number, height: number): {
|
|
top: string;
|
|
right: string;
|
|
width: string;
|
|
height: string;
|
|
position: string;
|
|
};
|
|
/**
|
|
* Get layout items sorted from top left to right and down.
|
|
*
|
|
* @return Layout, sorted static items first.
|
|
*/
|
|
export declare function sortLayoutItemsByRowCol(layout: Layout): Layout;
|
|
/**
|
|
* Validate a layout. Throws errors.
|
|
*
|
|
* @param layout Array of layout items.
|
|
* @param contextName Context name for errors.
|
|
* @throw Validation error.
|
|
*/
|
|
export declare function validateLayout(layout: Layout, contextName?: string): void;
|
|
export declare function autoBindHandlers(el: Record<string, (...args: any[]) => any>, fns: Array<string>): void;
|
|
/**
|
|
* Convert a JS object to CSS string. Similar to React's output of CSS.
|
|
* @param obj
|
|
* @returns
|
|
*/
|
|
export declare function createMarkup(obj: Record<string, any>): string;
|
|
export declare const IS_UNITLESS: Record<string, boolean>;
|
|
/**
|
|
* Will add px to the end of style values which are Numbers.
|
|
* @param name
|
|
* @param value
|
|
* @returns {*}
|
|
*/
|
|
export declare function addPx(name: string, value: number | string): string | number;
|
|
export declare const hyphenateRE: RegExp;
|
|
/**
|
|
* Hyphenate a camelCase string.
|
|
*
|
|
* @param str
|
|
* @return
|
|
*/
|
|
export declare function hyphenate(str: string): string;
|
|
export declare function findItemInArray(array: any[], property: string, value: any): boolean;
|
|
export declare function findAndRemove(array: any[], property: string, value: any): void;
|
|
export declare function useNameHelper(block: string, namespace?: string): {
|
|
b: () => string;
|
|
be: (element: string) => string;
|
|
bm: (modifier: string | number) => string;
|
|
bem: (element: string, modifier: string | number) => string;
|
|
};
|