grid-layout-plus/dist/helpers/common.d.ts

<p align="center"> <a href="https://grid-layout-plus.netlify.app/" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/grid-layout-plus.svg" width="180" style="width: 120px;" /> </a> </p>

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;
};