@egjs/grid - npm Package Compare versions

Comparing version 1.10.0-beta.3 to 1.10.0-beta.4

declaration/consts.d.ts

@@ -0,1 +1,6 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import { GridOptions } from "./types";
@@ -2,0 +7,0 @@ export declare const DEFAULT_GRID_OPTIONS: Required<GridOptions>;

declaration/ContainerManager.d.ts

@@ -0,4 +1,9 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import Component from "@egjs/component";
 import { DestroyOptions, SizeRect } from "./types";
-import { ResizeEvent } from "./ResizeWatcher";
+import { ResizerWatcherResizeEvent } from "./ResizeWatcher";
 export interface ContainerManagerOptions {
@@ -15,3 +20,3 @@ horizontal?: boolean;
 export interface ContainerManagerEvents {
-    resize: ResizeEvent;
+    resize: ResizerWatcherResizeEvent;
 }
@@ -18,0 +23,0 @@ export declare class ContainerManager extends Component<ContainerManagerEvents> {

declaration/Grid.d.ts

@@ -0,1 +1,6 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import Component from "@egjs/component";
@@ -6,2 +11,5 @@ import { ContainerManager } from "./ContainerManager";
 import { GridItem } from "./GridItem";
+/**
+ * @extends eg.Component
+ */
 declare abstract class Grid<Options extends GridOptions = GridOptions> extends Component<GridEvents> {
@@ -26,18 +34,110 @@ static defaultOptions: Required<GridOptions>;
     private _im;
+    /**
+    * Apply the CSS rect of items to fit the Grid and calculate the outline.
+    * @ko  Grid에 맞게 아이템들의 CSS rect를 적용하고 outline을 계산한다.
+    * @abstract
+    * @method Grid#applyGrid
+    * @param {"start" | "end"} direcion - The direction to apply the Grid. ("end": start to end, "start": end to start) <ko>Grid를 적용할 방향. ("end": 시작에서 끝 방향, "start": 끝에서 시작 방향)</ko>
+    * @param {number[]} outline - The start outline to apply the Grid. <ko>Grid를 적용할 시작 outline.</ko>
+    */
     abstract applyGrid(items: GridItem[], direction: "start" | "end", outline: number[]): GridOutlines;
+    /**
+     * @param - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
+     * @param - The option object of the Grid module <ko>Grid 모듈의 옵션 객체</ko>
+     */
     constructor(containerElement: HTMLElement | string, options?: Partial<Options>);
+    /**
+     * Return Container Element.
+     * @ko 컨테이너 엘리먼트를 반환한다.
+     */
     getContainerElement(): HTMLElement;
+    /**
+     * Return items.
+     * @ko 아이템들을 반환한다.
+     */
     getItems(): GridItem[];
+    /**
+     * Returns the children of the container element.
+     * @ko 컨테이너 엘리먼트의 children을 반환한다.
+     */
     getChildren(): HTMLElement[];
+    /**
+     * Set items.
+     * @ko 아이템들을 설정한다.
+     * @param items - The items to set. <ko>설정할 아이템들</ko>
+     */
     setItems(items: GridItem[]): this;
+    /**
+     * Gets the container's inline size. ("width" if horizontal is false, otherwise "height")
+     * @ko container의 inline 사이즈를 가져온다. (horizontal이 false면 "width", 아니면 "height")
+     */
     getContainerInlineSize(): number;
+    /**
+     * Returns the outlines of the start and end of the Grid.
+     * @ko Grid의 처음과 끝의 outline을 반환한다.
+     */
     getOutlines(): GridOutlines;
+    /**
+     * Set outlines.
+     * @ko 아웃라인을 설정한다.
+     * @param outlines - The outlines to set. <ko>설정할 아웃라인.</ko>
+     */
     setOutlines(outlines: GridOutlines): this;
+    /**
+     * When elements change, it synchronizes and renders items.
+     * @ko elements가 바뀐 경우 동기화를 하고 렌더링을 한다.
+     * @param - Options for rendering. <ko>렌더링을 하기 위한 옵션.</ko>
+     */
     syncElements(options?: RenderOptions): this;
+    /**
+     * Update the size of the items and render them.
+     * @ko 아이템들의 사이즈를 업데이트하고 렌더링을 한다.
+     * @param - Items to be updated. <ko>업데이트할 아이템들.</ko>
+     * @param - Options for rendering. <ko>렌더링을 하기 위한 옵션.</ko>
+     */
     updateItems(items?: GridItem[], options?: RenderOptions): this;
+    /**
+     * Rearrange items to fit the grid and render them. When rearrange is complete, the `renderComplete` event is fired.
+     * @ko grid에 맞게 아이템을 재배치하고 렌더링을 한다. 배치가 완료되면 `renderComplete` 이벤트가 발생한다.
+     * @param - Options for rendering. <ko>렌더링을 하기 위한 옵션.</ko>
+     * @example
+     * ```js
+     * import { MasonryGrid } from "@egjs/grid";
+     * const grid = new MasonryGrid();
+     *
+     * grid.on("renderComplete", e => {
+     *   console.log(e);
+     * });
+     * grid.renderItems();
+     * ```
+     */
     renderItems(options?: RenderOptions): this;
+    /**
+     * Returns current status such as item's position, size. The returned status can be restored with the setStatus() method.
+     * @ko 아이템의 위치, 사이즈 등 현재 상태를 반환한다. 반환한 상태는 setStatus() 메서드로 복원할 수 있다.
+     * @param - Whether to minimize the status of the item. (default: false) <ko>item의 status를 최소화할지 여부. (default: false)</ko>
+     */
     getStatus(minimize?: boolean): GridStatus;
+    /**
+     * Set status of the Grid module with the status returned through a call to the getStatus() method.
+     * @ko getStatus() 메서드에 대한 호출을 통해 반환된 상태로 Grid 모듈의 상태를 설정한다.
+     */
     setStatus(status: GridStatus): this;
+    /**
+     * Get the inline size corresponding to outline.
+     * @ko outline에 해당하는 inline 사이즈를 구한다.
+     * @param items - Items to get outline size. <ko>outline 사이즈를 구하기 위한 아이템들.</ko>
+     */
     getComputedOutlineSize(items?: GridItem[]): number;
+    /**
+     * Get the length corresponding to outline.
+     * @ko outline에 해당하는 length를 가져온다.
+     * @param items - Items to get outline length. <ko>outline length를 구하기 위한 아이템들.</ko>
+     */
     getComputedOutlineLength(items?: GridItem[]): number;
+    /**
+     * Releases the instnace and events and returns the CSS of the container and elements.
+     * @ko 인스턴스와 이벤트를 해제하고 컨테이너와 엘리먼트들의 CSS를 되돌린다.
+     * @param Options for destroy. <ko>destory()를 위한 옵션</ko>
+     */
     destroy(options?: DestroyOptions): void;
@@ -59,1 +159,105 @@ protected checkReady(options?: RenderOptions): void;
 export default Grid;
+/**
+ * Gap used to create space around items.
+ * @ko 아이템들 사이의 공간.
+ * @name Grid#gap
+ * @type {$ts:Grid.GridOptions["gap"]}
+ * @default 0
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   gap: 0,
+ * });
+ *
+ * grid.gap = 5;
+ * ```
+ */
+/**
+ * The default direction value when direction is not set in the render option.
+ * @ko render옵션에서 direction을 미설정시의 기본 방향값.
+ * @name Grid#defaultDirection
+ * @type {$ts:Grid.GridOptions["defaultDirection"]}
+ * @default "end"
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   defaultDirection: "end",
+ * });
+ *
+ * grid.defaultDirection = "start";
+ * ```
+ */
+/**
+ * Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0. (default: true)
+ * @ko 렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다. (default: true)
+ * @name Grid#useFit
+ * @type {$ts:Grid.GridOptions["useFit"]}
+ * @default true
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   useFit: true,
+ * });
+ *
+ * grid.useFit = false;
+ * ```
+ */
+/**
+ * Whether to preserve the UI of the existing container or item when destroying.
+ * @ko destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.
+ * @name Grid#preserveUIOnDestroy
+ * @type {$ts:Grid.GridOptions["preserveUIOnDestroy"]}
+ * @default false
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   preserveUIOnDestroy: false,
+ * });
+ *
+ * grid.preserveUIOnDestroy = true;
+ * ```
+ */
+/**
+ * The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
+ * @ko outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.
+ * @name Grid#outlineLength
+ * @type {$ts:Grid.GridOptions["outlineLength"]}
+ * @default 0
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   outlineLength: 0,
+ *   outlineSize: 0,
+ * });
+ *
+ * grid.outlineLength = 3;
+ * ```
+ */
+/**
+ * The size of the outline. If the outline size is 0, it is calculated according to the grid type.
+ * @ko outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다.
+ * @name Grid#outlineSize
+ * @type {$ts:Grid.GridOptions["outlineSize"]}
+ * @default 0
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   outlineLength: 0,
+ *   outlineSize: 0,
+ * });
+ *
+ * grid.outlineSize = 300;
+ * ```
+ */

declaration/GridItem.d.ts

@@ -0,3 +1,24 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import { DOMRect, GridRect } from "./types";
 import { MOUNT_STATE, UPDATE_STATE } from "./consts";
+/**
+ * @typedef
+ * @memberof Grid.GridItem
+ * @property - The item key. <ko>아이템 키.</ko>
+ * @property - The element for the item. <ko>아이템에 있는 엘리먼트.</ko>
+ * @property - State of whether the element has been added to the container. <ko>element가 container에 추가되었는지 상태.</ko>
+ * @property - The update state of the element's rect. <ko>element의 rect의 업데이트 상태.</ko>
+ * @property - Whether the element's rect was updated for the first time. <ko>처음으로 element의 rect를 업데이트 했는지 여부.</ko>
+ * @property - Attributes set as `data-grid-` of element. <ko>element의 `data-grid-`으로 설정된 속성들.</ko>
+ * @property - cssText of the first style when an element is added to the container. <ko>element가 container에 추가됐을 때 처음 style의 cssText.</ko>
+ * @property - The element's rect before first rendering. <ko>처음 렌더링 하기 전 엘리먼트의 rect.</ko>
+ * @property - The updated element's rect before rendering. <ko>렌더링 하기 전 업데이트 된 엘리먼트의 rect.</ko>
+ * @property - The CSS rect of the item to be rendered by being applied to the Grid. <ko>Grid에 적용되어 렌더링을 하기 위한 item의 CSS rect</ko>
+ * @property - Additional data of the item. <ko>item의 추가적인 데이터들.</ko>
+ * @property - Grid ready data for rendering. <ko>렌더링을 하기 위한 grid의 준비 데이터.</ko>
+ */
 export interface GridItemStatus {
@@ -17,2 +38,6 @@ key?: string | number;
 }
+/**
+ * @memberof Grid
+ * @implements Grid.GridItem.GridItemStatus
+ */
 declare class GridItem {
@@ -23,10 +48,55 @@ protected horizontal: boolean;
     transitionDuration: string;
+    /**
+     * @constructor
+     * @param horizontal - Direction of the scroll movement. (true: horizontal, false: vertical) <ko>스크롤 이동 방향. (true: 가로방향, false: 세로방향)</ko>
+     * @param itemStatus - Default status object of GridItem module. <ko>GridItem 모듈의 기본 status 객체.</ko>
+     */
     constructor(horizontal: boolean, itemStatus?: Partial<GridItemStatus>);
+    /**
+     * The size in inline direction before first rendering. "width" if horizontal is false, "height" otherwise.
+     * @ko 첫 렌더링 되기 전의 inline 방향의 사이즈. horizontal이 false면 "width", 아니면 "height".
+     * @member Grid.GridItem#orgInlineSize
+     */
     get orgInlineSize(): number;
+    /**
+     * The size in content direction before first rendering. "height" if horizontal is false, "width" otherwise.
+     * @ko 첫 렌더링 되기 전의 content 방향의 사이즈. horizontal이 false면 "height", 아니면 "width".
+     * @member Grid.GridItem#orgContentSize
+     */
     get orgContentSize(): number;
+    /**
+     * The size in inline direction. "width" if horizontal is false, "height" otherwise.
+     * @ko inline 방향의 사이즈. horizontal이 false면 "width", 아니면 "height".
+     * @member Grid.GridItem#inlineSize
+     */
     get inlineSize(): number;
+    /**
+     * The size in content direction. "height" if horizontal is false, "width" otherwise.
+     * @ko content 방향의 사이즈. horizontal이 false면 "height", 아니면 "width".
+     * @member Grid.GridItem#contentSize
+     */
     get contentSize(): number;
+    /**
+     * The CSS size in inline direction applied to the Grid. "width" if horizontal is false, "height" otherwise.
+     * @ko Grid에 적용된 inline 방향의 CSS 사이즈. horizontal이 false면 "width", 아니면 "height".
+     * @member Grid.GridItem#cssInlineSize
+     */
     get cssInlineSize(): number | undefined;
+    /**
+     * The CSS size in content direction applied to the Grid. "height" if horizontal is false, "width" otherwise.
+     * @ko Grid에 적용된 content 방향의 CSS 사이즈. horizontal이 false면 "height", 아니면 "width".
+     * @member Grid.GridItem#cssContentSize
+     */
     get cssContentSize(): number | undefined;
+    /**
+     * The CSS pos in inline direction applied to the Grid. "left" if horizontal is false, "top" otherwise.
+     * @ko Grid에 적용된 inline 방향의 CSS 포지션. horizontal이 false면 "left", 아니면 "top".
+     * @member Grid.GridItem#cssInlinePos
+     */
     get cssInlinePos(): number | undefined;
+    /**
+     * The CSS pos in content direction applied to the Grid. "top" if horizontal is false, "left" otherwise.
+     * @ko Grid에 적용된 content 방향의 CSS 포지션. horizontal이 false면 "top", 아니면 "left".
+     * @member Grid.GridItem#cssContentPos
+     */
     get cssContentPos(): number | undefined;
@@ -37,8 +107,41 @@ set cssInlinePos(inlinePos: number | undefined);
     set cssContentSize(contentSize: number | undefined);
+    /**
+     * Calculated size in the direction of the inline applied to the grid. "width" if horizontal is false, "height" otherwise.
+     * @ko Grid에 적용된 inline 방향의 계산된 사이즈. horizontal이 false면 "width", 아니면 "height".
+     * @member Grid.GridItem#computedInlineSize
+     */
     get computedInlineSize(): number;
+    /**
+     * Calculated size in the direction of the content applied to the grid. "height" if horizontal is false, "width" otherwise.
+     * @ko Grid에 적용된 content 방향의 계산된 사이즈. horizontal이 false면 "height", 아니면 "width".
+     * @member Grid.GridItem#computedContentSize
+     */
     get computedContentSize(): number;
+    /**
+     * Calculated position in the direction of the inline applied to the grid. "left" if horizontal is false, "top" otherwise.
+     * @ko Grid에 적용된 content 방향의 계산된 포지션. horizontal이 false면 "left", 아니면 "top".
+     * @member Grid.GridItem#computedInlinePos
+     */
     get computedInlinePos(): number;
+    /**
+     * Calculated position in the direction of the content applied to the grid. "top" if horizontal is false, "left" otherwise.
+     * @ko Grid에 적용된 content 방향의 계산된 포지션. horizontal이 false면 "top", 아니면 "left".
+     * @member Grid.GridItem#computedContentPos
+     */
     get computedContentPos(): number;
+    /**
+     * Set CSS Rect through GridRect.
+     * @ko GridRect을 통해 CSS Rect를 설정한다.
+     * @param - The style for setting CSS rect. <ko>CSS rect를 설정하기 위한 스타일.</ko>
+     */
     setCSSGridRect(gridRect: GridRect): void;
+    /**
+     * Returns the status of the item.
+     * @ko 아이템의 상태를 반환한다.
+     */
     getStatus(): Required<GridItemStatus>;
+    /**
+     * Returns minimized status of the item.
+     * @ko 아이템의 간소화된 상태를 반환한다.
+     */
     getMinimizedStatus(): Partial<GridItemStatus>;
@@ -45,0 +148,0 @@ private get _names();

declaration/grids/FrameGrid.d.ts

@@ -0,1 +1,6 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import Grid from "../Grid";
@@ -8,2 +13,11 @@ import { PROPERTY_TYPE } from "../consts";
 }
+/**
+ * @typedef
+ * @memberof Grid.FrameGrid
+ * @extends Grid.GridOptions
+ * @property - The shape of the grid. You can set the shape and order of items with a 2d array ([contentPos][inlinePos]). You can place items as many times as you fill the array with numbers, and zeros and spaces are empty spaces. The order of the items is arranged in ascending order of the numeric values that fill the array. (default: [])
+ * <ko>Grid의 모양. 2d 배열([contentPos][inlinePos])로 아이템의 모양과 순서를 설정할 수 있다. 숫자로 배열을 채운만큼 아이템을 배치할 수 있으며 0과 공백은 빈 공간이다. 아이템들의 순서는 배열을 채운 숫자값의 오름차순대로 배치가 된다. (default: [])</ko>
+ * @property - Make sure that the frame can be attached after the previous frame. (default: true) <ko> 다음 프레임이 전 프레임에 이어 붙일 수 있는지 있는지 확인한다.</ko>
+ * @property - 1x1 rect size. If it is 0, it is determined by the number of columns in the frame. (default: 0) <ko>1x1 직사각형 크기. 0이면 frame의 column의 개수에 의해 결정된다. (default: 0)</ko>
+ */
 export interface FrameGridOptions extends GridOptions {
@@ -17,2 +31,9 @@ frame?: number[][];
 }
+/**
+ * 'Frame' is a printing term with the meaning that 'it fits in one row wide'. FrameGrid is a grid that the item is filled up on the basis of a line given a size.
+ * @ko 'Frame'는 '1행의 너비에 맞게 꼭 들어찬'이라는 의미를 가진 인쇄 용어다. FrameGrid는 용어의 의미대로 너비가 주어진 사이즈를 기준으로 아이템이 가득 차도록 배치하는 Grid다.
+ * @memberof Grid
+ * @param {HTMLElement | string} container - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
+ * @param {Grid.FrameGrid.FrameGridOptions} options - The option object of the FrameGrid module <ko>FrameGrid 모듈의 옵션 객체</ko>
+ */
 export declare class FrameGrid extends Grid<FrameGridOptions> {
@@ -44,1 +65,64 @@ static propertyTypes: {
 }
+/**
+ * The shape of the grid. You can set the shape and order of items with a 2d array ([contentPos][inlinePos]). You can place items as many times as you fill the array with numbers, and zeros and spaces are empty spaces. The order of the items is arranged in ascending order of the numeric values that fill the array.
+ * @ko Grid의 모양. 2d 배열([contentPos][inlinePos])로 아이템의 모양과 순서를 설정할 수 있다. 숫자로 배열을 채운만큼 아이템을 배치할 수 있으며 0과 공백은 빈 공간이다. 아이템들의 순서는 배열을 채운 숫자값의 오름차순대로 배치가 된다.
+ * @name Grid.FrameGrid#frame
+ * @type {$ts:Grid.FrameGrid.FrameGridOptions["frame"]}
+ * @default []
+ * @example
+ * ```js
+ * import { FrameGrid } from "@egjs/grid";
+ *
+ * // Item 1 : 2 x 2
+ * // Item 2 : 1 x 1
+ * // Item 3 : 1 x 2
+ * // Item 4 : 1 x 1
+ * // Item 5 : 2 x 1
+ * const grid = new FrameGrid(container, {
+ *   frame: [
+ *     [1, 1, 0, 0, 2, 3],
+ *     [1, 1, 0, 4, 5, 5],
+ *   ],
+ * });
+ *
+ * // Item 1 : 2 x 2
+ * // Item 2 : 2 x 2
+ * grid.frame = [
+ *   [1, 1, 0, 0, 2, 2],
+ *   [1, 1, 0, 0, 2, 2],
+ * ];
+ * ```
+ */
+/**
+ * Make sure that the frame can be attached after the previous frame.
+ * @ko 다음 프레임이 전 프레임에 이어 붙일 수 있는지 있는지 확인한다.
+ * @name Grid.FrameGrid#useFrameFill
+ * @type {$ts:Grid.FrameGrid.FrameGridOptions["useFrameFill"]}
+ * @default true
+ * @example
+ * ```js
+ * import { FrameGrid } from "@egjs/grid";
+ *
+ * const grid = new FrameGrid(container, {
+ *   useFrameFill: true,
+ * });
+ *
+ * grid.useFrameFill = false;
+ * ```
+ */
+/**
+ * 1x1 rect size. If it is 0, it is determined by the number of columns in the frame. (default: 0)
+ * @ko 1x1 직사각형 크기. 0이면 frame의 column의 개수에 의해 결정된다. (default: 0)
+ * @name Grid.FrameGrid#rectSize
+ * @type {$ts:Grid.FrameGrid.FrameGridOptions["rectSize"]}
+ * @example
+ * ```js
+ * import { FrameGrid } from "@egjs/grid";
+ *
+ * const grid = new FrameGrid(container, {
+ *   rectSize: 0,
+ * });
+ *
+ * grid.rectSize = { inlineSize: 100, contentSize: 150 };
+ * ```
+ */

declaration/grids/JustifiedGrid.d.ts

@@ -0,1 +1,6 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import Grid from "../Grid";
@@ -5,2 +10,12 @@ import { PROPERTY_TYPE } from "../consts";
 import { GridItem } from "../GridItem";
+/**
+ * @typedef
+ * @memberof Grid.JustifiedGrid
+ * @extends Grid.GridOptions
+ * @property - The minimum and maximum number of items per line. (default: [1, 8]) <ko> 한 줄에 들어가는 아이템의 최소, 최대 개수. (default: [1, 8]) </ko>
+ * @property - The minimum and maximum number of rows in a group, 0 is not set. (default: 0) <ko> 한 그룹에 들어가는 행의 최소, 최대 개수, 0은 미설정이다. (default: 0) </ko>
+ * @property - The minimum and maximum size by which the item is adjusted. If it is not calculated, it may deviate from the minimum and maximum sizes. (default: [0, Infinity]) <ko>아이템이 조정되는 최소, 최대 사이즈. 계산이 되지 않는 경우 최소, 최대 사이즈를 벗어날 수 있다. (default: [0, Infinity])</ko>
+ * @property - Maximum number of rows to be counted for container size. You can hide it on the screen by setting overflow: hidden. -1 is not set. (default: -1)<ko>컨테이너 크기에 계산될 최대 row 개수. overflow: hidden을 설정하면 화면에 가릴 수 있다. -1은 미설정이다. (default: -1)</ko>
+ * @property - Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken. (default: false) <ko>row사이즈가 sizeRange에 벗어나면 크롭할지 여부. true로 설정하면 비율이 깨질 수 있다. (default: false)</ko>
+ */
 export interface JustifiedGridOptions extends GridOptions {
@@ -13,2 +28,13 @@ columnRange?: number | number[];
 }
+/**
+ * 'justified' is a printing term with the meaning that 'it fits in one row wide'. JustifiedGrid is a grid that the item is filled up on the basis of a line given a size.
+ * If 'data-grid-inline-offset' or 'data-grid-content-offset' are set for item element, the ratio is maintained except for the offset value.
+ * If 'data-grid-maintained-target' is set for an element whose ratio is to be maintained, the item is rendered while maintaining the ratio of the element.
+ * @ko 'justified'는 '1행의 너비에 맞게 꼭 들어찬'이라는 의미를 가진 인쇄 용어다. JustifiedGrid는 용어의 의미대로 너비가 주어진 사이즈를 기준으로 아이템가 가득 차도록 배치하는 Grid다.
+ * 아이템 엘리먼트에 'data-grid-inline-offset' 또는 'data-grid-content-offset'를 설정하면 offset 값을 제외하고 비율을 유지한다.
+ * 비율을 유지하고 싶은 엘리먼트에 'data-grid-maintained-target'을 설정한다면 해당 엘리먼트의 비율을 유지하면서 아이템이 렌더링이 된다.
+ * @memberof Grid
+ * @param {HTMLElement | string} container - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
+ * @param {Grid.JustifiedGrid.JustifiedGridOptions} options - The option object of the JustifiedGrid module <ko>JustifiedGrid 모듈의 옵션 객체</ko>
+ */
 export declare class JustifiedGrid extends Grid<JustifiedGridOptions> {
@@ -47,1 +73,87 @@ static propertyTypes: {
 }
+/**
+ * The minimum and maximum number of items per line.
+ * @ko 한 줄에 들어가는 아이템의 최소, 최대 개수.
+ * @name Grid.JustifiedGrid#columnRange
+ * @type {$ts:Grid.JustifiedGrid.JustifiedGridOptions["columnRange"]}
+ * @default [1, 8]
+ * @example
+ * ```js
+ * import { JustifiedGrid } from "@egjs/grid";
+ *
+ * const grid = new JustifiedGrid(container, {
+ *   columnRange: [1, 8],
+ * });
+ *
+ * grid.columnRange = [3, 6];
+ * ```
+ */
+/**
+ * The minimum and maximum number of rows in a group, 0 is not set.
+ * @ko 한 그룹에 들어가는 행의 최소, 최대 개수, 0은 미설정이다.
+ * @name Grid.JustifiedGrid#rowRange
+ * @type {$ts:Grid.JustifiedGrid.JustifiedGridOptions["rowRange"]}
+ * @default 0
+ * @example
+ * ```js
+ * import { JustifiedGrid } from "@egjs/grid";
+ *
+ * const grid = new JustifiedGrid(container, {
+ *   rowRange: 0,
+ * });
+ *
+ * grid.rowRange = [3, 4];
+ * ```
+ */
+/**
+ * The minimum and maximum size by which the item is adjusted. If it is not calculated, it may deviate from the minimum and maximum sizes.
+ * @ko 아이템이 조정되는 최소, 최대 사이즈. 계산이 되지 않는 경우 최소, 최대 사이즈를 벗어날 수 있다.
+ * @name Grid.JustifiedGrid#sizeRange
+ * @type {$ts:Grid.JustifiedGrid.JustifiedGridOptions["sizeRange"]}
+ * @default [0, Infinity]
+ * @example
+ * ```js
+ * import { JustifiedGrid } from "@egjs/grid";
+ *
+ * const grid = new JustifiedGrid(container, {
+ *   sizeRange: [0, Infinity],
+ * });
+ *
+ * grid.sizeRange = [200, 800];
+ * ```
+ */
+/**
+ * Maximum number of rows to be counted for container size. You can hide it on the screen by setting overflow: hidden. -1 is not set.
+ * @ko - 컨테이너 크기에 계산될 최대 row 개수. overflow: hidden을 설정하면 화면에 가릴 수 있다. -1은 미설정이다.
+ * @name Grid.JustifiedGrid#displayedRow
+ * @type {$ts:Grid.JustifiedGrid.JustifiedGridOptions["displayedRow"]}
+ * @default -1
+ * @example
+ * ```js
+ * import { JustifiedGrid } from "@egjs/grid";
+ *
+ * const grid = new JustifiedGrid(container, {
+ *   displayedRow: -1,
+ * });
+ *
+ * grid.displayedRow = 3;
+ * ```
+ */
+/**
+ * Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken.
+ * @ko - row 사이즈가 sizeRange에 벗어나면 크롭할지 여부. true로 설정하면 비율이 깨질 수 있다.
+ * @name Grid.JustifiedGrid#isCroppedSize
+ * @type {$ts:Grid.JustifiedGrid.JustifiedGridOptions["isCroppedSize"]}
+ * @default false
+ * @example
+ * ```js
+ * import { JustifiedGrid } from "@egjs/grid";
+ *
+ * const grid = new JustifiedGrid(container, {
+ *   sizeRange: [200, 250],
+ *   isCroppedSize: false,
+ * });
+ *
+ * grid.isCroppedSize = true;
+ * ```
+ */

declaration/grids/MasonryGrid.d.ts

@@ -0,1 +1,6 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import Grid from "../Grid";
@@ -5,2 +10,12 @@ import { PROPERTY_TYPE } from "../consts";
 import { GridItem } from "../GridItem";
+/**
+ * @typedef
+ * @memberof Grid.MasonryGrid
+ * @extends Grid.GridOptions
+ * @property - The number of columns. If the number of columns is 0, it is automatically calculated according to the size of the container. Can be used instead of outlineLength. (default: 0)<ko>열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.(default: 0) </ko>
+ * @property - The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize. (default: 0) <ko> 열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.(default: 0) </ko>
+ * @property - The size ratio(inlineSize / contentSize) of the columns. 0 is not set. (default: 0) <ko>열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다. </ko>
+ * @property - Align of the position of the items. If you want to use `stretch`, be sure to set `column` or `columnSize` option. ("start", "center", "end", "justify", "stretch") (default: "justify") <ko>아이템들의 위치의 정렬. `stretch`를 사용하고 싶다면 `column` 또는 `columnSize` 옵션을 설정해라.  ("start", "center", "end", "justify", "stretch") (default: "justify")</ko>
+ * @property - Difference Threshold for Counting Columns. Since offsetSize is calculated by rounding, the number of columns may not be accurate. (default: 1) <ko>칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다. (default: 1)</ko>
+ */
 export interface MasonryGridOptions extends GridOptions {
@@ -13,2 +28,9 @@ column?: number;
 }
+/**
+ * MasonryGrid is a grid that stacks items with the same width as a stack of bricks. Adjust the width of all images to the same size, find the lowest height column, and insert a new item.
+ * @ko MasonryGrid는 벽돌을 쌓아 올린 모양처럼 동일한 너비를 가진 아이템를 쌓는 레이아웃이다. 모든 이미지의 너비를 동일한 크기로 조정하고, 가장 높이가 낮은 열을 찾아 새로운 이미지를 삽입한다. 따라서 배치된 아이템 사이에 빈 공간이 생기지는 않지만 배치된 레이아웃의 아래쪽은 울퉁불퉁해진다.
+ * @memberof Grid
+ * @param {HTMLElement | string} container - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
+ * @param {Grid.MasonryGrid.MasonryGridOptions} options - The option object of the MasonryGrid module <ko>MasonryGrid 모듈의 옵션 객체</ko>
+ */
 export declare class MasonryGrid extends Grid<MasonryGridOptions> {
@@ -37,1 +59,69 @@ static propertyTypes: {
 }
+/**
+ * Align of the position of the items. If you want to use `stretch`, be sure to set `column` or `columnSize` option. ("start", "center", "end", "justify", "stretch")
+ * @ko 아이템들의 위치의 정렬. `stretch`를 사용하고 싶다면 `column` 또는 `columnSize` 옵션을 설정해라.  ("start", "center", "end", "justify", "stretch")
+ * @name Grid.MasonryGrid#align
+ * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["align"]}
+ * @default "justify"
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   align: "start",
+ * });
+ *
+ * grid.align = "justify";
+ * ```
+ */
+/**
+ * The number of columns. If the number of columns is 0, it is automatically calculated according to the size of the container.  Can be used instead of outlineLength.
+ * @ko 열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.
+ * @name Grid.MasonryGrid#column
+ * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["column"]}
+ * @default 0
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   column: 0,
+ * });
+ *
+ * grid.column = 4;
+ * ```
+ */
+/**
+ * The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize.
+ * @ko 열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.
+ * @name Grid.MasonryGrid#columnSize
+ * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["columnSize"]}
+ * @default 0
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   columnSize: 0,
+ * });
+ *
+ * grid.columnSize = 200;
+ * ```
+ */
+/**
+ * The size ratio(inlineSize / contentSize) of the columns. 0 is not set.
+ * @ko 열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다.
+ * @name Grid.MasonryGrid#columnSizeRatio
+ * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["columnSizeRatio"]}
+ * @default 0
+ * @example
+ * ```js
+ * import { MasonryGrid } from "@egjs/grid";
+ *
+ * const grid = new MasonryGrid(container, {
+ *   columnSizeRatio: 0,
+ * });
+ *
+ * grid.columnSizeRatio = 0.5;
+ * ```
+ */

declaration/grids/PackingGrid.d.ts

@@ -0,1 +1,6 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import Grid from "../Grid";
@@ -5,2 +10,13 @@ import { PROPERTY_TYPE } from "../consts";
 import { GridItem } from "../GridItem";
+/**
+ * @typedef
+ * @memberof Grid.PackingGrid
+ * @extends Grid.GridOptions
+ * @property - The aspect ratio (inlineSize / contentSize) of the container with items. (default: 1) <ko>아이템들을 가진 컨테이너의 종횡비(inlineSize / contentSize). (default: 1)</ko>
+ * @property - The size weight when placing items. (default: 1)<ko>아이템들을 배치하는데 사이즈 가중치. (default: 1)</ko>
+ * @property - The weight to keep ratio when placing items. (default: 1)<ko>아이템들을 배치하는데 비율을 유지하는 가중치. (default: 1)</ko>
+ * @property - The priority that determines the weight of the item. (default: "custom"), "size" = (sizeWieght: 100, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 100), "custom" = (set sizeWeight, ratioWeight)
+ * item's weight = item's ratio(inlineSize / contentSize) change * `ratioWeight` + size(inlineSize * contentSize) change * `sizeWeight`.
+ * <ko> 아이템의 가중치를 결정하는 우선수치. (default: "custom"), "size" = (sizeWieght: 100, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 100), "custom" = (set sizeWeight, ratioWeight). 아이템의 가중치 = ratio(inlineSize / contentSize)의 변화량 * `ratioWeight` + size(inlineSize * contentSize)의 변화량 * `sizeWeight`.</ko>
+ */
 export interface PackingGridOptions extends GridOptions {
@@ -12,2 +28,15 @@ aspectRatio?: number;
 }
+/**
+ * The PackingGrid is a grid that shows the important items bigger without sacrificing the weight of the items.
+ * Rows and columns are separated so that items are dynamically placed within the horizontal and vertical space rather than arranged in an orderly fashion.
+ * If `sizeWeight` is higher than `ratioWeight`, the size of items is preserved as much as possible.
+ * Conversely, if `ratioWeight` is higher than `sizeWeight`, the ratio of items is preserved as much as possible.
+ * @ko PackingGrid는 아이템의 본래 크기에 따른 비중을 해치지 않으면서 중요한 카드는 더 크게 보여 주는 레이아웃이다.
+ * 행과 열이 구분돼 아이템을 정돈되게 배치하는 대신 가로세로 일정 공간 내에서 동적으로 아이템을 배치한다.
+ * `sizeWeight`가 `ratioWeight`보다 높으면 아이템들의 size가 최대한 보존이 된다.
+ * 반대로 `ratioWeight`가 `sizeWeight`보다 높으면 아이템들의 비율이 최대한 보존이 된다.
+ * @memberof Grid
+ * @param {HTMLElement | string} container - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
+ * @param {Grid.PackingGrid.PackingGridOptions} options - The option object of the PackingGrid module <ko>PackingGrid 모듈의 옵션 객체</ko>
+ */
 export declare class PackingGrid extends Grid<PackingGridOptions> {
@@ -36,1 +65,74 @@ static propertyTypes: {
 }
+/**
+ * The aspect ratio (inlineSize / contentSize) of the container with items.
+ * @ko 아이템들을 가진 컨테이너의 종횡비(inlineSize / contentSize).
+ * @name Grid.PackingGrid#aspectRatio
+ * @type {$ts:Grid.PackingGrid.PackingGridOptions["aspectRatio"]}
+ * @default 1
+ * @example
+ * ```js
+ * import { PackingGrid } from "@egjs/grid";
+ *
+ * const grid = new PackingGrid(container, {
+ *   aspectRatio: 1,
+ * });
+ *
+ * grid.aspectRatio = 1.5;
+ * ```
+ */
+/**
+ * The priority that determines the weight of the item. "size" = (sizeWieght: 2, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 2), "custom" = (set sizeWeight, ratioWeight)
+ * item's weight = item's ratio(inlineSize / contentSize) change * `ratioWeight` + size(inlineSize * contentSize) change * `sizeWeight`.
+ * @ko 아이템의 가중치를 결정하는 우선수치. "size" = (sizeWieght: 2, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 2), "custom" = (set sizeWeight, ratioWeight). 아이템의 가중치 = ratio(inlineSize / contentSize)의 변화량 * `ratioWeight` + size(inlineSize * contentSize)의 변화량 * `sizeWeight`.
+ * @name Grid.PackingGrid#weightPriority
+ * @type {$ts:Grid.PackingGrid.PackingGridOptions["weightPriority"]}
+ * @default "custom"
+ * @example
+ * ```js
+ * import { PackingGrid } from "@egjs/grid";
+ *
+ * const grid = new PackingGrid(container, {
+ *   weightPriority: "custom",
+ *   sizeWeight: 1,
+ *   ratioWeight: 1,
+ * });
+ *
+ * grid.weightPriority = "size";
+ * // or
+ * grid.weightPriority = "ratio";
+ * ```
+ */
+/**
+ * The size weight when placing items.
+ * @ko 아이템들을 배치하는데 사이즈 가중치.
+ * @name Grid.PackingGrid#sizeWeight
+ * @type {$ts:Grid.PackingGrid.PackingGridOptions["sizeWeight"]}
+ * @default 1
+ * @example
+ * ```js
+ * import { PackingGrid } from "@egjs/grid";
+ *
+ * const grid = new PackingGrid(container, {
+ *   sizeWeight: 1,
+ * });
+ *
+ * grid.sizeWeight = 10;
+ * ```
+ */
+/**
+ * The weight to keep ratio when placing items.
+ * @ko 아이템들을 배치하는데 비율을 유지하는 가중치.
+ * @name Grid.PackingGrid#ratioWeight
+ * @type {$ts:Grid.PackingGrid.PackingGridOptions["ratioWeight"]}
+ * @default 1
+ * @example
+ * ```js
+ * import { PackingGrid } from "@egjs/grid";
+ *
+ * const grid = new PackingGrid(container, {
+ *   ratioWeight: 1,
+ * });
+ *
+ * grid.ratioWeight = 10;
+ * ```
+ */

declaration/index.d.ts

@@ -0,1 +1,6 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import Grid from "./Grid";
@@ -2,0 +7,0 @@ export * from "./grids/MasonryGrid";

declaration/index.umd.d.ts

@@ -0,2 +1,7 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import Grid from "./index";
 export default Grid;

declaration/ResizeWatcher.d.ts

@@ -11,3 +11,3 @@ import { SizeRect } from "./types";
 }
-export interface ResizeEvent {
+export interface ResizerWatcherResizeEvent {
     isResizeContainer: boolean;
@@ -38,3 +38,3 @@ childEntries: ResizeWatcherEntry[];
     unobserveChildren(children: Element[]): void;
-    listen(callback: (e: ResizeEvent) => void): this;
+    listen(callback: (e: ResizerWatcherResizeEvent) => void): this;
     destroy(): void;
@@ -41,0 +41,0 @@ private _init;

declaration/types.d.ts

@@ -0,1 +1,6 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import { GRID_METHODS } from "./consts";
@@ -6,25 +11,138 @@ import { ContainerManager, ContainerManagerStatus } from "./ContainerManager";
 import { ItemRenderer, ItemRendererStatus } from "./ItemRenderer";
+/**
+ * @typedef
+ * @memberof Grid
+ */
 export interface GridOptions {
+    /**
+     * Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, `inlinePos` is left, `inlineSize` is width, `contentPos` is top, and `contentSize` is height. If horizontal is true, `inlinePos` is top, `inlineSize` is height, `contentPos` is left, and `contentSize` is width.
+     * <ko>스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 `inlinePos`는 left, `inlineSize`는 width, `contentPos`는 top, `contentSize`는 height다. horizontal이 true면 `inlinePos`는 top, `inlineSize`는 height, `contentPos`는 left, `contentSize`는 width이다.</ko>
+     * @default false
+     */
     horizontal?: boolean;
+    /**
+     * Whether to set the css size and position of the item to %.
+     * <ko>item의 css size와 position를 %로 설정할지 여부.</ko>
+     * @default false
+     */
     percentage?: Array<"position" | "size"> | boolean;
+    /**
+     * Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
+     * <ko>카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.</ko>
+     * @default false
+     */
     isEqualSize?: boolean;
+    /**
+     * Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
+     * <ko>모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.</ko>
+     * @default false
+     */
     isConstantSize?: boolean;
+    /**
+     * Gap used to create space around items.
+     * <ko>아이템들 사이의 공간.</ko>
+     * @default 5
+     */
     gap?: number;
+    /**
+     * The prefix to use element's data attribute.
+     * <ko>엘리먼트의 데이타 속성에 사용할 접두사.</ko>
+     * @default "data-grid-"
+     */
     attributePrefix?: string;
+    /**
+     * Debounce time to set in the resize event. (unit: ms)
+     * <ko>리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)</ko>
+     * @default 100
+     */
     resizeDebounce?: number;
+    /**
+     * Maximum time to debounce the resize event. (0 is not set)
+     * <ko>리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)</ko>
+     * @default 0
+     */
     maxResizeDebounce?: number;
+    /**
+     * Whether the resize method should be called automatically after a window resize event.
+     * <ko>window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.</ko>
+     * @default true
+     */
     autoResize?: boolean;
+    /**
+     * Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0.
+     * <ko>렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.</ko>
+     * @default true
+     */
     useFit?: boolean;
+    /**
+     * Whether to use transform property instead of using left and top css properties.
+     * <ko>left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.</ko>
+     * @default false
+     */
     useTransform?: boolean;
+    /**
+     * Whether to automatically render through property change.
+     * <ko>property의 변화를 통해 자동으로 render를 할지 여부.</ko>
+     * @default true
+     */
     renderOnPropertyChange?: boolean;
+    /**
+     * Whether to preserve the UI of the existing container or item when destroying.
+     * <ko>destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.</ko>
+     * @default false
+     */
     preserveUIOnDestroy?: boolean;
+    /**
+     * The default direction value when direction is not set in the render option.
+     * <ko>render옵션에서 direction을 미설정시의 기본 방향값.</ko>
+     * @default "end"
+     */
     defaultDirection?: "start" | "end";
+    /**
+     * The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
+     * <ko>outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.</ko>
+     * @default 0
+     */
     outlineLength?: number;
+    /**
+     * The size of the outline. If the outline size is 0, it is calculated according to the grid type.
+     * <ko> outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. </ko>
+     * @default 0
+     */
     outlineSize?: number;
+    /**
+     * Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
+     * <ko>사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.</ko>
+     * @default true
+     */
     useRoundedSize?: boolean;
+    /**
+     * Whether to use ResizeObserver event to detect container size change when `autoResize` option is used.
+     * <ko>autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.</ko>
+     * @default false
+     */
     useResizeObserver?: boolean;
+    /**
+     * Whether to detect size change of children if useResizeObserver option is used.
+     * <ko>useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.</ko>
+     * @default false
+     */
     observeChildren?: boolean;
+    /**
+     * You can set the ItemRenderer directly externally.
+     * <ko>외부에서 직접 ItemRenderer를 설정할 수 있다.</ko>
+     * @inner
+     */
     externalItemRenderer?: ItemRenderer | null;
+    /**
+     * You can set the ContainerManager directly externally.
+     * <ko>외부에서 직접 ContainerManager를 설정할 수 있다.</ko>
+     * @inner
+     */
     externalContainerManager?: ContainerManager | null;
 }
+/**
+ * @typedef
+ * @memberof Grid
+ */
 export interface GridOutlines {
@@ -34,2 +152,10 @@ start: number[];
 }
+/**
+ * @typedef
+ * @memberof Grid
+ * @property - Array of outline points to be reference points.<ko>기준점이 되는 아웃라인 점들의 배열</ko>
+ * @property - The direction to render the grid.<ko>Grid를 렌더링할 방향.</ko>
+ * @property - Whether to resize containers and items.<ko>컨테이너와 아이템들을 리사이즈할지 여부.</ko>
+ * @property - Whether to resize items to their original size. <ko>아이템들의 원본 사이즈까지 리사이즈할지 여부.</ko>
+ */
 export interface RenderOptions {
@@ -41,2 +167,6 @@ outline?: number[];
 }
+/**
+ * @typedef
+ * @memberof Grid
+ */
 export interface GridStatus {
@@ -48,2 +178,10 @@ items: GridItemStatus[];
 }
+/**
+ * @typedef
+ * @memberof Grid
+ * @property - The direction the grid was rendered. <ko>Grid가 렌더링된 방향.</ko>
+ * @property - The items rendered for the first time. <ko>처음 렌더링한 아이템들,</ko>
+ * @property - The items updated in size. <ko>사이즈 업데이트한 아이템들.</ko>
+ * @property - Whether rendering was done using the resize event or the useResize option. <ko>resize 이벤트 또는 useResize 옵션을 사용하여 렌더링를 했는지 여부.</ko>
+ */
 export interface OnRenderComplete {
@@ -55,2 +193,10 @@ direction: "start" | "end";
 }
+/**
+ * @typedef
+ * @memberof Grid
+ * @property - The item's element.<ko>아이템의 엘리먼트.</ko>
+ * @property - The content element with error.<ko>에러난 발생한 콘텐츠 엘리먼트.</ko>
+ * @property - The item with error content.<ko>에러난 콘텐츠를 가지고 있는 아이템</ko>
+ * @property - If you have fixed the error and want to recheck it, call update(). If you remove an element, call the syncElements() method.<ko>에러를 해결했고 재검사하고 싶으면 update()를 호출해라. 만약 엘리먼트를 삭제한 경우 syncElements() 메서드를 호출해라.</ko>
+ */
 export interface OnContentError {
@@ -62,2 +208,6 @@ element: HTMLElement;
 }
+/**
+ * @typedef
+ * @memberof Grid
+ */
 export declare type GridAlign = "start" | "center" | "end" | "justify" | "stretch";
@@ -68,2 +218,6 @@ export declare type GridEvents = {
 };
+/**
+ * @typedef
+ * @memberof Grid
+ */
 export interface SizeRect {
@@ -73,2 +227,6 @@ width: number;
 }
+/**
+ * @typedef
+ * @memberof Grid
+ */
 export interface DOMRect {
@@ -80,2 +238,10 @@ width?: number;
 }
+/**
+ * @typedef
+ * @memberof Grid
+ * @property - The pos in inline direction. "left" if horizontal is false, "top" otherwise. <ko>inline 방향의 위치. horizontal이 false면 "left", 아니면 "top".</ko>
+ * @property - The pos in content direction. "top" if horizontal is false, "left" otherwise. <ko>content 방향의 위치. horizontal이 false면 "top", 아니면 "left".</ko>
+ * @property - The size in inline direction. "width" if horizontal is false, "height" otherwise. <ko>inline 방향의 사이즈. horizontal이 false면 "width", 아니면 "height".</ko>
+ * @property - The size in content direction. "heighht" if horizontal is false, "width" otherwise. <ko>content 방향의 사이즈. horizontal이 false면 "height", 아니면 "width".</ko>
+ */
 export interface GridRect {
@@ -87,2 +253,7 @@ inlinePos?: number;
 }
+/**
+ * @typedef
+ * @memberof Grid
+ * @property - Whether to preserve the current UI.<ko>현재의 UI를 보존할지 여부.</ko>
+ */
 export interface DestroyOptions {
@@ -89,0 +260,0 @@ preserveUI?: boolean;

declaration/utils.d.ts

@@ -0,1 +1,6 @@
+/**
+ * egjs-grid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import Grid from "./Grid";
@@ -21,2 +26,17 @@ import { GRID_PROPERTY_TYPES } from "./consts";
 export declare function getRangeCost(value: number, valueRange: number[]): number;
+/**
+ * Decorator that makes the method of grid available in the framework.
+ * @ko 프레임워크에서 그리드의 메소드를 사용할 수 있게 하는 데코레이터.
+ * @memberof eg.Grid
+ * @private
+ * @example
+ * ```js
+ * import { withGridMethods } from "@egjs/grid";
+ *
+ * class Grid extends React.Component<Partial<GridProps & GridOptions>> {
+ *   &#64;withGridMethods
+ *   private grid: NativeGrid;
+ * }
+ * ```
+ */
 export declare const withGridMethods: (prototype: any, memberName: string) => void;

dist/grid.min.js

@@ -7,5 +7,5 @@ /*
 repository: https://github.com/naver/egjs-grid
-version: 1.10.0-beta.2
+version: 1.10.0-beta.4
 */
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Grid=t()}(this,function(){"use strict";var i=function(e,t){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var p=function(){return(p=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};function o(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;0<=a;a--)(r=e[a])&&(s=(o<3?r(s):3<o?r(t,n,s):r(t,n))||s);return 3<o&&s&&Object.defineProperty(t,n,s),s}function g(e,t){for(var n=0,i=t.length,r=e.length;n<i;n++,r++)e[r]=t[n];return e}function h(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return{value:(e=e&&i>=e.length?void 0:e)&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function s(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(function(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,o=n.call(e),s=[];try{for(;(void 0===t||0<t--)&&!(i=o.next()).done;)s.push(i.value)}catch(e){r={error:e}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return s}(arguments[t]));return e}function l(e){return void 0===e}var a,f,m,u=function(){function e(e,t){var n,i;if(this.eventType=e,this._canceled=!1,t)try{for(var r=h(Object.keys(t)),o=r.next();!o.done;o=r.next()){var s=o.value;this[s]=t[s]}}catch(e){n={error:e}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(n)throw n.error}}}var t=e.prototype;return t.stop=function(){this._canceled=!0},t.isCanceled=function(){return this._canceled},e}(),n=function(){function e(){this._eventHandler={}}var t=e.prototype;return t.trigger=function(t){for(var n=[],e=1;e<arguments.length;e++)n[e-1]=arguments[e];var i=t instanceof u?t.eventType:t,i=s(this._eventHandler[i]||[]);return i.length<=0||(t instanceof u?(t.currentTarget=this,i.forEach(function(e){e(t)})):i.forEach(function(e){e.apply(void 0,s(n))})),this},t.once=function(n,i){var r,o=this;if("object"==typeof n&&l(i)){var e,t=n;for(e in t)this.once(e,t[e]);return this}return"string"==typeof n&&"function"==typeof i&&this.on(n,r=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];i.apply(void 0,s(e)),o.off(n,r)}),this},t.hasOn=function(e){return!!this._eventHandler[e]},t.on=function(e,t){if("object"==typeof e&&l(t)){var n,i=e;for(n in i)this.on(n,i[n]);return this}var r;return"string"==typeof e&&"function"==typeof t&&(r=this._eventHandler[e],l(r)&&(this._eventHandler[e]=[],r=this._eventHandler[e]),r.push(t)),this},t.off=function(e,t){var n,i;if(l(e))return this._eventHandler={},this;if(l(t)){if("string"==typeof e)return delete this._eventHandler[e],this;var r,o=e;for(r in o)this.off(r,o[r]);return this}var s=this._eventHandler[e];if(s){var a=0;try{for(var u=h(s),c=u.next();!c.done;c=u.next()){if(c.value===t){s.splice(a,1),s.length<=0&&delete this._eventHandler[e];break}a++}}catch(e){n={error:e}}finally{try{c&&!c.done&&(i=u.return)&&i.call(u)}finally{if(n)throw n.error}}}return this},e.VERSION="3.0.1",e}(),c=u,R={horizontal:!1,useTransform:!1,percentage:!1,isEqualSize:!1,isConstantSize:!1,gap:0,attributePrefix:"data-grid-",resizeDebounce:100,maxResizeDebounce:0,autoResize:!0,preserveUIOnDestroy:!1,defaultDirection:"end",externalContainerManager:null,externalItemRenderer:null,renderOnPropertyChange:!0,useFit:!0,outlineLength:0,outlineSize:0,useRoundedSize:!0,useResizeObserver:!1,observeChildren:!1};(Y=a=a||{})[Y.PROPERTY=1]="PROPERTY",Y[Y.RENDER_PROPERTY=2]="RENDER_PROPERTY",(W=f=f||{})[W.UNCHECKED=1]="UNCHECKED",W[W.UNMOUNTED=2]="UNMOUNTED",W[W.MOUNTED=3]="MOUNTED",(oe=m=m||{})[oe.NEED_UPDATE=1]="NEED_UPDATE",oe[oe.WAIT_LOADING=2]="WAIT_LOADING",oe[oe.UPDATED=3]="UPDATED";var v={gap:a.RENDER_PROPERTY,defaultDirection:a.PROPERTY,renderOnPropertyChange:a.PROPERTY,preserveUIOnDestroy:a.PROPERTY,useFit:a.PROPERTY,outlineSize:a.RENDER_PROPERTY,outlineLength:a.RENDER_PROPERTY},e=["syncElements","updateItems","getItems","setItems","renderItems","getContainerInlineSize","getContainerElement"],d={horizontal:{inlinePos:"top",contentPos:"left",inlineSize:"height",contentSize:"width"},vertical:{inlinePos:"left",contentPos:"top",inlineSize:"width",contentSize:"height"}},z=function(){function e(){this.keys=[],this.values=[]}var t=e.prototype;return t.get=function(e){return this.values[this.keys.indexOf(e)]},t.set=function(e,t){var n=this.keys,i=this.values,r=n.indexOf(e),r=-1===r?n.length:r;n[r]=e,i[r]=t},e}(),y=function(){function e(){this.object={}}var t=e.prototype;return t.get=function(e){return this.object[e]},t.set=function(e,t){this.object[e]=t},e}(),S="function"==typeof Map,E=function(){function e(){}var t=e.prototype;return t.connect=function(e,t){this.prev=e,this.next=t,e&&(e.next=this),t&&(t.prev=this)},t.disconnect=function(){var e=this.prev,t=this.next;e&&(e.next=t),t&&(t.prev=e)},t.getIndex=function(){for(var e=this,t=-1;e;)e=e.prev,++t;return t},e}();var _=function(){function e(e,t,n,i,r,o,s,a){this.prevList=e,this.list=t,this.added=n,this.removed=i,this.changed=r,this.maintained=o,this.changedBeforeAdded=s,this.fixed=a}var t=e.prototype;return Object.defineProperty(t,"ordered",{get:function(){return this.cacheOrdered||this.caculateOrdered(),this.cacheOrdered},enumerable:!0,configurable:!0}),Object.defineProperty(t,"pureChanged",{get:function(){return this.cachePureChanged||this.caculateOrdered(),this.cachePureChanged},enumerable:!0,configurable:!0}),t.caculateOrdered=function(){var e,n,r,o,e=(e=this.changedBeforeAdded,n=this.fixed,r=[],o=[],e.forEach(function(e){var t=e[0],n=e[1],e=new E;r[t]=e,o[n]=e}),r.forEach(function(e,t){e.connect(r[t-1])}),e.filter(function(e,t){return!n[t]}).map(function(e,t){var n=e[0],i=e[1];if(n===i)return[0,0];e=r[n],n=o[i-1],i=e.getIndex();return e.disconnect(),n?e.connect(n,n.next):e.connect(void 0,r[0]),[i,e.getIndex()]})),s=this.changed,a=[];this.cacheOrdered=e.filter(function(e,t){var n=e[0],i=e[1],e=s[t],t=e[0],e=e[1];if(n!==i)return a.push([t,e]),!0}),this.cachePureChanged=a},e}();var t,P="function"==typeof Map?void 0:(t=0,function(e){return e.__DIFF_KEY__||(e.__DIFF_KEY__=++t)});function C(e,t){return n=e,i=t,r=P,e=S?Map:r?y:z,t=r||function(e){return e},o=[],s=[],a=[],r=n.map(t),t=i.map(t),u=new e,c=new e,h=[],l=[],f={},d=[],g=p=0,r.forEach(function(e,t){u.set(e,t)}),t.forEach(function(e,t){c.set(e,t)}),r.forEach(function(e,t){e=c.get(e);void 0===e?(++g,s.push(t)):f[e]=g}),t.forEach(function(e,t){e=u.get(e);void 0===e?(o.push(t),++p):(a.push([e,t]),g=f[t]||0,h.push([e-g,t-p]),l.push(t===e),e!==t&&d.push([e,t]))}),s.reverse(),new _(n,i,o,s,d,a,h,l);var n,i,r,o,s,a,u,c,h,l,f,d,p,g}function b(n,i){var e=O(n);return C(i.map(function(e){return e.target}),e.map(function(e){return e.element})).maintained.filter(function(e){var t=e[0],e=e[1],t=i[t].size,e=n[e];return t.inlineSize!==e.computedInlineSize||t.blockSize!==e.computedContentSize}).map(function(e){e=e[1];return n[e]})}function O(e){return e.filter(function(e){return e.element})}function T(e){return O(e).map(function(e){return e.element})}function w(e){return"string"==typeof e}function x(e){return"object"==typeof e}function I(e){var t,r=e.prototype,o=e.propertyTypes;for(t in o)!function(n){var i=o[n]===a.RENDER_PROPERTY,e=Object.getOwnPropertyDescriptor(r,n)||{};Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:e.get||function(){return this.options[n]},set:e.set||function(e){var t=this.options;t[n]!==e&&(t[n]=e,i&&t.renderOnPropertyChange&&this.scheduleRender())}})}(t)}function D(t){return function(e,r){t.forEach(function(i){i in e||(e[i]=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=(n=this[r])[i].apply(n,e);return n===this[r]?this:n})})}}function M(e){for(var t=[],n=0;n<e;++n)t.push(n);return t}function k(e,t){return Math.max(e-t[1],t[0]-e,0)+1}var N=D(e),A=function(){function e(e,t){var u=this;void 0===t&&(t={}),this._resizeTimer=0,this._maxResizeDebounceTimer=0,this.rect={width:0,height:0},this._updatedEntries=[],this._onWindowResize=function(){u._scheduleResize([{target:u.container}])},this._onObserve=function(e){var t=u._options,n=u.container,i=t.rectBox,r=t.childrenRectBox;u._scheduleResize(e.map(function(e){var t="border-box"===(e.target===n?i:r)?e.borderBoxSize:e.contentBoxSize;return{size:t[0]||t,target:e.target}}))},this._scheduleResize=function(e){var t=u._options,n=t.resizeDebounce,t=t.maxResizeDebounce,i=u._updatedEntries;i.push.apply(i,e),u._updatedEntries=i.filter(function(e,t){return i.lastIndexOf(e)===t}),!u._maxResizeDebounceTimer&&n<=t&&(u._maxResizeDebounceTimer=window.setTimeout(u._onResize,t)),u._resizeTimer&&(clearTimeout(u._resizeTimer),u._resizeTimer=0),u._resizeTimer=window.setTimeout(u._onResize,n)},this._onResize=function(){clearTimeout(u._resizeTimer),clearTimeout(u._maxResizeDebounceTimer),u._maxResizeDebounceTimer=0,u._resizeTimer=0;var t,e,n,i=u._updatedEntries,r=u.container,o=i.filter(function(e){return e.target!==r||(t=e,!1)}),s=0<o.length,a=!!t;a&&(e=u._options.watchDirection,n=u.rect,(i=t.size)?u.setRect({width:i.inlineSize,height:i.blockSize}):u.resize(),i=u.rect,a=!e||("box"===e||"width"===e)&&n.width!==i.width||("box"===e||"height"===e)&&n.height!==i.height),u._updatedEntries=[],(a||s)&&u._emitter.trigger("resize",{isResizeContainer:a,childEntries:o})},this._options=p({resizeDebounce:100,maxResizeDebounce:0,useResizeObserver:!1,useWindowResize:!0,watchDirection:!1,rectBox:"content-box",childrenRectBox:"border-box"},t),this.container=w(e)?document.querySelector(e):e,this._init()}var t=e.prototype;return t.getRect=function(){return this.rect},t.setRect=function(e){this.rect=p({},e)},t.resize=function(){var e=this.container;this.setRect("border-box"===this._options.rectBox?{width:e.offsetWidth,height:e.offsetHeight}:{width:e.clientWidth,height:e.clientHeight})},t.observeChildren=function(e){var t,n=this._observer;n&&(t=this._options.childrenRectBox,e.forEach(function(e){n.observe(e,{box:t})}))},t.unobserveChildren=function(e){var t=this._observer;t&&e.forEach(function(e){t.unobserve(e)})},t.listen=function(e){return this._emitter.on("resize",e),this},t.destroy=function(){var e;null!==(e=this._observer)&&void 0!==e&&e.disconnect(),this._options.useWindowResize&&window.removeEventListener("resize",this._onWindowResize)},t._init=function(){var e=this.container,t=this._options;this._emitter=new n,t.useResizeObserver&&window.ResizeObserver&&(this._observer=new window.ResizeObserver(this._onObserve),this._observer.observe(e,{box:t.rectBox})),t.useWindowResize&&window.addEventListener("resize",this._onWindowResize),this.resize()},e}(),L=function(i){function e(e,t){var n=i.call(this)||this;return n.container=e,n._onResize=function(e){n.trigger("resize",e)},n.options=p({horizontal:R.horizontal,autoResize:R.autoResize,resizeDebounce:R.resizeDebounce,maxResizeDebounce:R.maxResizeDebounce,useResizeObserver:R.useResizeObserver},t),n._init(),n}r(e,i);var t=e.prototype;return t.resize=function(){var e=this.container;this.setRect({width:e.clientWidth,height:e.clientHeight})},t.getRect=function(){return this._watcher.getRect()},t.observeChildren=function(e){this._watcher.observeChildren(e)},t.unobserveChildren=function(e){this._watcher.unobserveChildren(e)},t.setRect=function(e){this._watcher.setRect(e)},t.getInlineSize=function(){return this.getRect()[this._names.inlineSize]},t.getContentSize=function(){return this.getRect()[this._names.contentSize]},t.getStatus=function(){return{rect:this._watcher.getRect()}},t.setStatus=function(e){this.setRect(e.rect),this.setContentSize(this.getContentSize())},t.setContentSize=function(e){var t,n=this.options.horizontal?"width":"height";this.setRect(p(p({},this.getRect()),((t={})[n]=e,t))),this.container.style[n]=e+"px"},t.destroy=function(e){void 0===e&&(e={}),this._watcher.destroy(),e.preserveUI||(this.container.style.cssText=this.orgCSSText)},t._init=function(){var e=this.container,t=window.getComputedStyle(e);this.orgCSSText=e.style.cssText,"static"===t.position&&(e.style.position="relative");t=this.options;this._watcher=new A(e,{useWindowResize:t.autoResize,useResizeObserver:t.useResizeObserver,resizeDebounce:t.resizeDebounce,maxResizeDebounce:t.maxResizeDebounce,watchDirection:!!t.useResizeObserver&&this._names.inlineSize}).listen(this._onResize)},Object.defineProperty(t,"_names",{get:function(){return d[this.options.horizontal?"horizontal":"vertical"]},enumerable:!1,configurable:!0}),e}(n),j=function(e,t){return(j=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function F(e,t){function n(){this.constructor=e}j(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var U=function(){return(U=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};var Y="undefined"!=typeof window,W=Y?window.navigator.userAgent:"",H=Y&&!!("getComputedStyle"in window),G=/MSIE|Trident|Windows Phone|Edge/.test(W),q=Y&&!!("addEventListener"in document),B="width",V="height";function K(e,t){return e.getAttribute(t)||""}function X(e){return[].slice.call(e)}function J(e,t){return void 0===t&&(t="data-"),"loading"in e&&"lazy"===e.getAttribute("loading")||!!e.getAttribute(t+"lazy")}function Q(e,t,n){q?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n}function Z(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent?e.detachEvent("on"+t,n):e["on"+t]=null}function $(e,t){var n=e["client"+t]||e["offset"+t];return parseFloat(n||(e=e,((H?window.getComputedStyle(e):e.currentStyle)||{})[t.toLowerCase()]))||0}function ee(e,t,n){var i=X(e.querySelectorAll(function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;for(var i=Array(e),r=0,t=0;t<n;t++)for(var o=arguments[t],s=0,a=o.length;s<a;s++,r++)i[r]=o[s];return i}(["["+n+"skip] ["+n+"width]"],t.map(function(e){return["["+n+"skip] "+e,e+"["+n+"skip]","["+n+"width] "+e].join(", ")})).join(", ")));return X(e.querySelectorAll("["+n+"width], "+t.join(", "))).filter(function(e){return-1===i.indexOf(e)})}var te=[];function ne(e,t){te.length||Q(window,"resize",re),e.__PREFIX__=t,te.push(e),ie(e)}function ie(e,t){void 0===t&&(t="data-");var n,i=e.__PREFIX__||t,r=parseInt(K(e,""+i+B),10)||0,t=parseInt(K(e,""+i+V),10)||0;K(e,i+"fixed")===V?(n=$(e,"Height")||t,e.style[B]=r/t*n+"px"):(n=$(e,"Width")||r,e.style[V]=t/r*n+"px")}function re(){te.forEach(function(e){ie(e)})}var oe=function(r){function e(e,t){void 0===t&&(t={});var n=r.call(this)||this;n.isReady=!1,n.isPreReady=!1,n.hasDataSize=!1,n.hasLoading=!1,n.isSkip=!1,n.onCheck=function(e){n.clear(),e&&"error"===e.type&&n.onError(n.element),n.hasLoading&&n.checkElement()||(e=!n.hasDataSize&&!n.hasLoading,n.onReady(e))},n.options=U({prefix:"data-"},t),n.element=e;var i=n.options.prefix;return n.hasDataSize=(t=i,!!e.getAttribute((t=void 0===t?"data-":t)+"width")),n.isSkip=(t=i,!!e.getAttribute((t=void 0===t?"data-":t)+"skip")),n.hasLoading=J(e,i),n}F(e,r);var t=e.prototype;return t.check=function(){return this.isSkip||!this.checkElement()?(this.onAlreadyReady(!0),!1):(this.hasDataSize&&ne(this.element,this.options.prefix),(this.hasDataSize||this.hasLoading)&&this.onAlreadyPreReady(),!0)},t.addEvents=function(){var t=this,n=this.element;this.constructor.EVENTS.forEach(function(e){Q(n,e,t.onCheck)})},t.clear=function(){var t=this,n=this.element;this.constructor.EVENTS.forEach(function(e){Z(n,e,t.onCheck)}),this.removeAutoSizer()},t.destroy=function(){this.clear(),this.off()},t.removeAutoSizer=function(){var e,t,n;this.hasDataSize&&(n=this.options.prefix,e=this.element,t=n,(n=te.indexOf(e))<0||(t=K(e,t+"fixed"),delete e.__PREFIX__,e.style[t===V?B:V]="",te.splice(n,1),te.length||Z(window,"resize",re)))},t.onError=function(e){this.trigger("error",{element:this.element,target:e})},t.onPreReady=function(){this.isPreReady||(this.isPreReady=!0,this.trigger("preReady",{element:this.element,hasLoading:this.hasLoading,isSkip:this.isSkip}))},t.onReady=function(e){this.isReady||((e=!this.isPreReady&&e)&&(this.isPreReady=!0),this.removeAutoSizer(),this.isReady=!0,this.trigger("ready",{element:this.element,withPreReady:e,hasLoading:this.hasLoading,isSkip:this.isSkip}))},t.onAlreadyError=function(e){var t=this;setTimeout(function(){t.onError(e)})},t.onAlreadyPreReady=function(){var e=this;setTimeout(function(){e.onPreReady()})},t.onAlreadyReady=function(e){var t=this;setTimeout(function(){t.onReady(e)})},e.EVENTS=[],e}(n),se=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}F(t,e);var n=t.prototype;return n.setHasLoading=function(e){this.hasLoading=e},n.check=function(){return this.isSkip?(this.onAlreadyReady(!0),!1):(this.hasDataSize?(ne(this.element,this.options.prefix),this.onAlreadyPreReady()):this.trigger("requestChildren"),!0)},n.checkElement=function(){return!0},n.destroy=function(){this.clear(),this.trigger("requestDestroy"),this.off()},n.onAlreadyPreReady=function(){e.prototype.onAlreadyPreReady.call(this),this.trigger("reqeustReadyChildren")},t.EVENTS=[],t}(oe),W=function(n){function e(e){void 0===e&&(e={});var t=n.call(this)||this;return t.readyCount=0,t.preReadyCount=0,t.totalCount=0,t.totalErrorCount=0,t.isPreReadyOver=!0,t.elementInfos=[],t.options=U({loaders:{},prefix:"data-"},e),t}F(e,n);var t=e.prototype;return t.check=function(e){var o=this,n=this.options.prefix;this.clear(),this.elementInfos=X(e).map(function(e,r){var t=o.getLoader(e,{prefix:n});return t.check(),t.on("error",function(e){o.onError(r,e.target)}).on("preReady",function(e){var t=o.elementInfos[r];t.hasLoading=e.hasLoading,t.isSkip=e.isSkip;e=o.checkPreReady(r);o.onPreReadyElement(r),e&&o.onPreReady()}).on("ready",function(e){var t=e.withPreReady,n=e.hasLoading,i=e.isSkip,e=o.elementInfos[r];e.hasLoading=n,e.isSkip=i;e=t&&o.checkPreReady(r),i=o.checkReady(r);t&&o.onPreReadyElement(r),o.onReadyElement(r),e&&o.onPreReady(),i&&o.onReady()}),{loader:t,element:e,hasLoading:!1,hasError:!1,isPreReady:!1,isReady:!1,isSkip:!1}});e=this.elementInfos.length;return(this.totalCount=e)||setTimeout(function(){o.onPreReady(),o.onReady()}),this},t.getTotalCount=function(){return this.totalCount},t.isPreReady=function(){return this.elementInfos.every(function(e){return e.isPreReady})},t.isReady=function(){return this.elementInfos.every(function(e){return e.isReady})},t.hasError=function(){return 0<this.totalErrorCount},t.clear=function(){this.isPreReadyOver=!1,this.totalCount=0,this.preReadyCount=0,this.readyCount=0,this.totalErrorCount=0,this.elementInfos.forEach(function(e){!e.isReady&&e.loader&&e.loader.destroy()}),this.elementInfos=[]},t.destroy=function(){this.clear(),this.off()},t.getLoader=function(t,e){var n=this,i=t.tagName.toLowerCase(),r=this.options.loaders,o=e.prefix,s=Object.keys(r);if(r[i])return new r[i](t,e);var a=new se(t,e),u=X(t.querySelectorAll(s.join(", ")));a.setHasLoading(u.some(function(e){return J(e,o)}));var c=!1,h=this.clone().on("error",function(e){a.onError(e.target)}).on("ready",function(){a.onReady(c)});return a.on("requestChildren",function(){var e=ee(t,s,n.options.prefix);h.check(e).on("preReady",function(e){(c=e.isReady)||a.onPreReady()})}).on("reqeustReadyChildren",function(){h.check(u)}).on("requestDestroy",function(){h.destroy()}),a},t.clone=function(){return new e(U({},this.options))},t.checkPreReady=function(e){return this.elementInfos[e].isPreReady=!0,++this.preReadyCount,!(this.preReadyCount<this.totalCount)},t.checkReady=function(e){return this.elementInfos[e].isReady=!0,++this.readyCount,!(this.readyCount<this.totalCount)},t.onError=function(e,t){var n=this.elementInfos[e];n.hasError=!0,this.trigger(new c("error",{element:n.element,index:e,target:t,errorCount:this.getErrorCount(),totalErrorCount:++this.totalErrorCount}))},t.onPreReadyElement=function(e){var t=this.elementInfos[e];this.trigger(new c("preReadyElement",{element:t.element,index:e,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:t.hasLoading,isSkip:t.isSkip}))},t.onPreReady=function(){this.isPreReadyOver=!0,this.trigger(new c("preReady",{readyCount:this.readyCount,totalCount:this.totalCount,isReady:this.isReady(),hasLoading:this.hasLoading()}))},t.onReadyElement=function(e){var t=this.elementInfos[e];this.trigger(new c("readyElement",{index:e,element:t.element,hasError:t.hasError,errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:t.hasLoading,isPreReadyOver:this.isPreReadyOver,isSkip:t.isSkip}))},t.onReady=function(){this.trigger(new c("ready",{errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,totalCount:this.totalCount}))},t.getErrorCount=function(){return this.elementInfos.filter(function(e){return e.hasError}).length},t.hasLoading=function(){return this.elementInfos.some(function(e){return e.hasLoading})},e}(n),ae=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return F(t,e),t.prototype.checkElement=function(){var e=this.element,t=e.getAttribute("src");if(e.complete){if(t)return e.naturalWidth||this.onAlreadyError(e),!1;this.onAlreadyPreReady()}return this.addEvents(),G&&e.setAttribute("src",t),!0},t.EVENTS=["load","error"],t}(oe),ue=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return F(t,e),t.prototype.checkElement=function(){var e=this.element;return!(1<=e.readyState)&&(e.error?(this.onAlreadyError(e),!1):(this.addEvents(),!0))},t.EVENTS=["loadedmetadata","error"],t}(oe),ce=function(t){function e(e){return t.call(this,U({loaders:{img:ae,video:ue}},e=void 0===e?{}:e))||this}return F(e,t),e}(W),he=function(){function e(e){this.initialRect=null,this.sizePercetage=!1,this.posPercetage=!1,this.options=p({attributePrefix:R.attributePrefix,useTransform:R.useTransform,horizontal:R.horizontal,percentage:R.percentage,isEqualSize:R.isEqualSize,isConstantSize:R.isConstantSize,useRoundedSize:R.useRoundedSize},e),this._init()}var t=e.prototype;return t.resize=function(){this.initialRect=null},t.renderItems=function(e){var t=this;e.forEach(function(e){t._renderItem(e)})},t.getInlineSize=function(){return this.containerRect[this.options.horizontal?"height":"width"]},t.setContainerRect=function(e){this.containerRect=e},t.updateItems=function(e){var t=this;e.forEach(function(e){t._updateItem(e)})},t.getStatus=function(){return{initialRect:this.initialRect}},t.setStatus=function(e){this.initialRect=e.initialRect},t._init=function(){var e=this.options.percentage,t=!1,n=!1;!0===e?n=t=!0:e&&(-1<e.indexOf("position")&&(n=!0),-1<e.indexOf("size")&&(t=!0)),this.posPercetage=n,this.sizePercetage=t},t._updateItem=function(e){var t=this.options,n=t.isEqualSize,i=t.isConstantSize,r=t.useRoundedSize,o=this.initialRect,s=e.orgRect,a=e.element,u=e.updateState===m.WAIT_LOADING,t=s&&s.width&&s.height;if(n&&o)c=o;else if(i&&t&&!u)c=s;else{if(!a)return;var c={left:a.offsetLeft,top:a.offsetTop,width:0,height:0};r?(c.width=a.offsetWidth,c.height=a.offsetHeight):(r=a.getBoundingClientRect(),c.width=r.width,c.height=r.height)}return e.isFirstUpdate&&t||(e.orgRect=p({},c)),e.rect=p({},c),e.element&&(e.mountState=f.MOUNTED),e.updateState===m.NEED_UPDATE&&(e.updateState=m.UPDATED,e.isFirstUpdate=!0),e.attributes=a?function(e,t){for(var n={},i=e.attributes,r=i.length,o=0;o<r;++o){var s=i[o],a=s.name,s=s.value;-1!==a.indexOf(t)&&(n[a.replace(t,"").replace(/[\s-_]([a-z])/g,function(e,t){return t.toUpperCase()})]=s)}return n}(a,this.options.attributePrefix):{},u||this.initialRect||(this.initialRect=p({},c)),c},t._renderItem=function(e){var n,i,t,r,o,s,a,u=e.element,c=e.cssRect;u&&c&&(a=(t=this.options).horizontal,e=t.useTransform,n=this.posPercetage,i=this.sizePercetage,t=["position: absolute;"],r=(a=d[a?"horizontal":"vertical"]).inlineSize,o=a.inlinePos,s=this.getInlineSize(),a=c,a=Object.keys(a),e&&(a=a.filter(function(e){return"top"!==e&&"left"!==e}),t.push("transform: translate("+(c.left||0)+"px, "+(c.top||0)+"px);")),t.push.apply(t,a.map(function(e){var t=c[e];return e===r&&i||e===o&&n?e+": "+t/s*100+"%;":e+": "+t+"px;"})),u.style.cssText+=t.join(""))},e}(),le=function(){function e(e,t){void 0===t&&(t={}),this.horizontal=e,this.isUpdate=!1,this.hasTransition=!1,this.transitionDuration="";var n,e=t.element,i=p({key:"",orgRect:{left:0,top:0,width:0,height:0},rect:{left:0,top:0,width:0,height:0},cssRect:{},attributes:{},data:{},isFirstUpdate:!1,mountState:f.UNCHECKED,updateState:m.NEED_UPDATE,element:e||null,orgCSSText:null!==(e=null==e?void 0:e.style.cssText)&&void 0!==e?e:"",gridData:{}},t);for(n in i)this[n]=i[n]}var t=e.prototype;return Object.defineProperty(t,"orgInlineSize",{get:function(){var e=this._names.inlineSize;return this.orgRect[e]||this.rect[e]},enumerable:!1,configurable:!0}),Object.defineProperty(t,"orgContentSize",{get:function(){var e=this._names.contentSize;return this.orgRect[e]||this.rect[e]},enumerable:!1,configurable:!0}),Object.defineProperty(t,"inlineSize",{get:function(){return this.rect[this._names.inlineSize]},enumerable:!1,configurable:!0}),Object.defineProperty(t,"contentSize",{get:function(){return this.rect[this._names.contentSize]},enumerable:!1,configurable:!0}),Object.defineProperty(t,"cssInlineSize",{get:function(){return this.cssRect[this._names.inlineSize]},set:function(e){this.cssRect[this._names.inlineSize]=e},enumerable:!1,configurable:!0}),Object.defineProperty(t,"cssContentSize",{get:function(){return this.cssRect[this._names.contentSize]},set:function(e){this.cssRect[this._names.contentSize]=e},enumerable:!1,configurable:!0}),Object.defineProperty(t,"cssInlinePos",{get:function(){return this.cssRect[this._names.inlinePos]},set:function(e){this.cssRect[this._names.inlinePos]=e},enumerable:!1,configurable:!0}),Object.defineProperty(t,"cssContentPos",{get:function(){return this.cssRect[this._names.contentPos]},set:function(e){this.cssRect[this._names.contentPos]=e},enumerable:!1,configurable:!0}),Object.defineProperty(t,"computedInlineSize",{get:function(){var e=this._names.inlineSize;return this.cssRect[e]||this.rect[e]||this.orgRect[e]},enumerable:!1,configurable:!0}),Object.defineProperty(t,"computedContentSize",{get:function(){var e=this._names.contentSize;return this.cssRect[e]||this.rect[e]||this.orgRect[e]},enumerable:!1,configurable:!0}),Object.defineProperty(t,"computedInlinePos",{get:function(){var e,t=this._names.inlinePos;return null!==(e=this.cssRect[t])&&void 0!==e?e:this.rect[t]},enumerable:!1,configurable:!0}),Object.defineProperty(t,"computedContentPos",{get:function(){var e,t=this._names.contentPos;return null!==(e=this.cssRect[t])&&void 0!==e?e:this.rect[t]},enumerable:!1,configurable:!0}),t.setCSSGridRect=function(e){var t,n=d[this.horizontal?"horizontal":"vertical"],i={};for(t in e)i[n[t]]=e[t];this.cssRect=i},t.getStatus=function(){return{mountState:this.mountState,updateState:this.updateState,attributes:this.attributes,orgCSSText:this.orgCSSText,isFirstUpdate:this.isFirstUpdate,element:null,key:this.key,orgRect:this.orgRect,rect:this.rect,cssRect:this.cssRect,gridData:this.gridData,data:this.data}},t.getMinimizedStatus=function(){var e={orgRect:this.orgRect,rect:this.rect,cssRect:this.cssRect,attributes:this.attributes,gridData:this.gridData},t=this,n=t.key,i=t.mountState,r=t.updateState,o=t.isFirstUpdate,t=t.orgCSSText;return void 0!==n&&(e.key=n),i!==f.UNCHECKED&&(e.mountState=i),r!==m.NEED_UPDATE&&(e.updateState=r),o&&(e.isFirstUpdate=!0),t&&(e.orgCSSText=t),e},Object.defineProperty(t,"_names",{get:function(){return this.horizontal?d.horizontal:d.vertical},enumerable:!1,configurable:!0}),e}(),fe=function(d){function e(e,t){void 0===t&&(t={});var n=d.call(this)||this;n.items=[],n.outlines={start:[],end:[]},n._renderTimer=0,n._onResize=function(e){e.isResizeContainer?n._renderItems({useResize:!0},!0):0<(e=b(n.items,e.childEntries)).length&&n.updateItems(e)},n.options=p(p({},n.constructor.defaultOptions),t),n.containerElement=w(e)?document.querySelector(e):e;var i=n.options,r=i.isEqualSize,o=i.isConstantSize,s=i.useTransform,a=i.horizontal,u=i.percentage,c=i.externalContainerManager,h=i.externalItemRenderer,l=i.resizeDebounce,f=i.maxResizeDebounce,t=i.autoResize,e=i.useRoundedSize,i=i.useResizeObserver;return n.containerManager=c||new L(n.containerElement,{horizontal:a,resizeDebounce:l,maxResizeDebounce:f,autoResize:t,useResizeObserver:i}).on("resize",n._onResize),n.itemRenderer=h||new he({useTransform:s,isEqualSize:r,isConstantSize:o,percentage:u,useRoundedSize:e}),n._init(),n}r(e,d);var t=e.prototype;return t.getContainerElement=function(){return this.containerElement},t.getItems=function(){return this.items},t.getChildren=function(){return[].slice.call(this.containerElement.children)},t.setItems=function(e){var t=this.options;return t.autoResize&&t.useResizeObserver&&t.observeChildren&&((t=this.containerManager).unobserveChildren(T(this.items)),t.observeChildren(T(e))),this.items=e,this},t.getContainerInlineSize=function(){return this.containerManager.getInlineSize()},t.getOutlines=function(){return this.outlines},t.setOutlines=function(e){return this.outlines=e,this},t.syncElements=function(e){void 0===e&&(e={});var n=this.items,t=this.options.horizontal,i=this.getChildren(),r=C(this.items.map(function(e){return e.element}),i),o=r.added,s=r.maintained,a=r.changed,r=r.removed,u=[];return s.forEach(function(e){var t=e[0],e=e[1];u[e]=n[t]}),o.forEach(function(e){u[e]=new le(t,{element:i[e]})}),this.setItems(u),(o.length||r.length||a.length)&&this.renderItems(e),this},t.updateItems=function(e,t){void 0===e&&(e=this.items);var n=(t=void 0===t?{}:t).useOrgResize;return e.forEach(function(e){var t;n&&((t=e.orgRect).width=0,t.height=0),e.updateState=m.NEED_UPDATE}),this.checkReady(t),this},t.renderItems=function(e){return this._renderItems(e=void 0===e?{}:e),this},t.getStatus=function(t){return{outlines:this.outlines,items:this.items.map(function(e){return t?e.getMinimizedStatus():e.getStatus()}),containerManager:this.containerManager.getStatus(),itemRenderer:this.itemRenderer.getStatus()}},t.setStatus=function(e){var t=this,n=this.options.horizontal,i=this.containerManager,r=i.getInlineSize(),o=this.getChildren();return this.itemRenderer.setStatus(e.itemRenderer),i.setStatus(e.containerManager),this.outlines=e.outlines,this.items=e.items.map(function(e,t){return new le(n,p(p({},e),{element:o[t]}))}),this.itemRenderer.renderItems(this.items),r!==i.getInlineSize()?this.renderItems({useResize:!0}):window.setTimeout(function(){t._renderComplete({direction:t.defaultDirection,mounted:t.items,updated:[],isResize:!1})}),this},t.getComputedOutlineSize=function(e){return void 0===e&&(e=this.items),this.options.outlineSize||this.getContainerInlineSize()},t.getComputedOutlineLength=function(e){return void 0===e&&(e=this.items),this.options.outlineLength||1},t.destroy=function(e){var e=(e=void 0===e?{}:e).preserveUI,e=void 0===e?this.options.preserveUIOnDestroy:e;this.containerManager.destroy({preserveUI:e}),e||this.items.forEach(function(e){var t=e.element,e=e.orgCSSText;t&&(t.style.cssText=e)}),null!==(e=this._im)&&void 0!==e&&e.destroy()},t.checkReady=function(n){var e,i=this;void 0===n&&(n={});var r=this.items,o=r.filter(function(e){var t;return(null===(t=e.element)||void 0===t?void 0:t.parentNode)&&e.updateState!==m.UPDATED}),t=r.filter(function(e){var t;return(null===(t=e.element)||void 0===t?void 0:t.parentNode)&&e.mountState!==f.MOUNTED}),s=[];t.filter(function(e){if(e.hasTransition)return!0;var t=e.element;return 0<parseFloat(getComputedStyle(t).transitionDuration)&&(e.hasTransition=!0,e.transitionDuration=t.style.transitionDuration,!0)}).forEach(function(e){e.element.style.transitionDuration="0s"}),null!==(e=this._im)&&void 0!==e&&e.destroy(),this._im=new ce({prefix:this.options.attributePrefix}).on("preReadyElement",function(e){o[e.index].updateState=m.WAIT_LOADING}).on("preReady",function(){o.forEach(function(e){var t=e.orgRect.width&&e.orgRect.height,n=e.cssRect.width||e.cssRect.height;!t&&n&&(e.element.style.cssText=e.orgCSSText)}),i.itemRenderer.updateItems(o),i.readyItems(t,o,n)}).on("readyElement",function(e){var t=o[e.index];t.updateState=m.NEED_UPDATE,e.isPreReadyOver&&(t.element.style.cssText=t.orgCSSText,i.itemRenderer.updateItems([t]),i.readyItems([],[t],n))}).on("error",function(e){var t=r[e.index];i.trigger("contentError",{element:e.element,target:e.target,item:t,update:function(){s.push(t)}})}).on("ready",function(){s.length&&i.updateItems(s)}).check(o.map(function(e){return e.element}))},t.scheduleRender=function(){var e=this;this._clearRenderTimer(),this._renderTimer=window.setTimeout(function(){e.renderItems()})},t.fitOutlines=function(e){void 0===e&&(e=this.useFit);var t=this.outlines,n=t.start,i=t.end,r=n.length?Math.min.apply(Math,n):0;!e&&0<r||(t.start=n.map(function(e){return e-r}),t.end=i.map(function(e){return e-r}),this.items.forEach(function(e){var t=e.cssContentPos;"number"==typeof t&&(e.cssContentPos=t-r)}))},t.readyItems=function(e,t,n){var i=this.outlines,r=n.direction||this.options.defaultDirection,o=n.outline||i["end"===r?"start":"end"],s=this.items,i={start:g([],o),end:g([],o)};e.forEach(function(e){e.mountState=f.MOUNTED}),t.forEach(function(e){e.isUpdate=!0}),s.length&&(i=this.applyGrid(this.items,r,o)),t.forEach(function(e){e.isUpdate=!1}),this.setOutlines(i),this.fitOutlines(),this.itemRenderer.renderItems(this.items),this._refreshContainerContentSize();i=e.filter(function(e){return e.hasTransition});i.length&&(this.containerManager.resize(),i.forEach(function(e){e.element.style.transitionDuration=e.transitionDuration})),this._renderComplete({direction:r,mounted:e,updated:t,isResize:!!n.useResize})},t._renderComplete=function(e){this.trigger("renderComplete",e)},t._clearRenderTimer=function(){clearTimeout(this._renderTimer),this._renderTimer=0},t._refreshContainerContentSize=function(){var e=this.outlines,t=e.start,n=e.end,e=this.options.gap,n=n.length?Math.max.apply(Math,n):0,t=t.length?Math.max.apply(Math,t):0,e=Math.max(t,n-e);this.containerManager.setContentSize(e)},t._resizeContainer=function(){this.containerManager.resize(),this.itemRenderer.setContainerRect(this.containerManager.getRect())},t._init=function(){this._resizeContainer()},t._renderItems=function(e,t){void 0===e&&(e={}),this._clearRenderTimer();var n=e.useResize||e.useOrgResize;n&&!t&&(this._resizeContainer(),this.itemRenderer.resize()),!this.getItems().length&&this.getChildren().length?this.syncElements(e):n?this.updateItems(this.items,e):this.checkReady(e)},e.defaultOptions=R,e.propertyTypes=v,o([I],e)}(n);function de(e,t,n,i){return Math[i].apply(Math,e.slice(t,t+n))}Y=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}r(t,e);var n=t.prototype;return n.applyGrid=function(m,e,t){for(var n,R=this.getComputedOutlineSize(m),v=this.getComputedOutlineLength(m),i=this.options,z=i.gap,r=i.align,y=i.columnSizeRatio,i=t.length,S=m.length,E=this._getAlignPoses(v,R),_="end"===e,P=_?"min":"max",C=_?"max":"min",e=[0],b=(e=i===v?t.slice():(n=i?Math[C].apply(Math,t):0,M(v).map(function(){return n}))).slice(),O=1<v?E[1]-E[0]:0,T="stretch"===r,o=function(e){for(var t,n,i,r,o=m[_?e:S-1-e],s=parseInt(o.attributes.column||"1",10),a=parseInt(o.attributes.maxColumn||"1",10),u=o.contentSize,c=Math.min(v,s||Math.max(1,Math.ceil((o.inlineSize+z)/O))),h=Math.min(v,Math.max(c,a)),l=(n=c,i=P,e=(t=b).length-n+1,r="max"===i?"min":"max",a="max"===i?"lastIndexOf":"indexOf",(e=M(e).map(function(e){return de(t,e,n,r)}))[a](Math[i].apply(Math,e))),f=de(b,l,c,C);c<h;){var d=l+c,p=l-1;if(_&&(v<=d||b[d]>f))break;if(!_&&(p<0||b[p])<f)break;_||--l,++c}l=Math.max(0,l),c=Math.min(v-l,c),(0<s&&1<c||T)&&(o.cssInlineSize=(c-1)*O+R),0<y&&(u=o.computedInlineSize/y,o.cssContentSize=u);s=E[l],f=_?f:f-z-u;o.cssInlinePos=s,o.cssContentPos=f;var g=_?f+u+z:f;M(c).forEach(function(e){b[l+e]=g})},s=0;s<S;++s)o(s);return{start:_?e:b,end:_?b:e}},n.getComputedOutlineSize=function(e){void 0===e&&(e=this.items);var t=this.options,n=t.gap,i=t.align,r=this.columnSize||this.outlineSize,o=this.column||this.outlineLength||1,t=0;if("stretch"===i)t=(this.getContainerInlineSize()+n)/(o||1)-n;else if(r)t=r;else if(e.length){for(var s=e[0],a=0,u=e;a<u.length;a++){var c=u[a],h=c.attributes;if(c.updateState===m.UPDATED&&c.inlineSize&&!h.column&&!h.maxColumnCount){s=c;break}}t=s.inlineSize||0}else t=this.getContainerInlineSize();return t||0},n.getComputedOutlineLength=function(e){void 0===e&&(e=this.items);var t=this.gap,n=this.column||this.outlineLength,i=this.columnCalculationThreshold;return n||(n=this.getComputedOutlineSize(e),Math.min(e.length,Math.max(1,Math.floor((this.getContainerInlineSize()+t)/(n-i+t)))))},n._getAlignPoses=function(e,t){var n=this.options,i=n.align,r=n.gap,o=this.getContainerInlineSize(),s=M(e),a=0,u=0;return"justify"===i||"stretch"===i?(u=(n=e-1)?Math.max((o-t)/n,t+r):0,a=Math.min(0,o/2-(n*u+t)/2)):(t=(e-1)*(u=t+r)+t,"center"===i?a=(o-t)/2:"end"===i&&(a=o-t)),s.map(function(e){return a+e*u})},t.propertyTypes=p(p({},fe.propertyTypes),{column:a.RENDER_PROPERTY,columnSize:a.RENDER_PROPERTY,columnSizeRatio:a.RENDER_PROPERTY,align:a.RENDER_PROPERTY,columnCalculationThreshold:a.RENDER_PROPERTY}),t.defaultOptions=p(p({},fe.defaultOptions),{align:"justify",column:0,columnSize:0,columnSizeRatio:0,columnCalculationThreshold:.5}),o([I],t)}(fe);function pe(e,t,n){return function(e,t){for(var n=[],i=t;i;)n.push(i),i=e[i];return n.reverse(),n}(function(e,t,n){var i={},r={};r[t]=0;var o,s,a,u,c,h,l=new ge(function(e){return e.cost});for(l.push({value:t,cost:0});l.size();)for(var f in s=(o=l.pop()).value,a=o.cost,u=e(s)||{})c=a+u[f],h=r[f],(void 0===r[f]||c<h)&&(r[f]=c,l.push({value:f,cost:c}),i[f]=s);if(void 0!==r[n])return i;throw n=["Could not find a path from ",t," to ",n,"."].join(""),new Error(n)}(e,t,n),n)}var ge=function(){function e(e){this.content=[],this.scoreFunction=e}var t=e.prototype;return t.push=function(e){this.content.push(e),this.bubbleUp(this.content.length-1)},t.pop=function(){var e=this.content[0],t=this.content.pop();return 0<this.content.length&&(this.content[0]=t,this.sinkDown(0)),e},t.size=function(){return this.content.length},t.bubbleUp=function(e){for(var t=e,n=this.content[t];0<t;){var i=Math.floor((t+1)/2)-1,r=this.content[i];if(!(this.scoreFunction(n)<this.scoreFunction(r)))break;this.content[i]=n,this.content[t]=r,t=i}},t.sinkDown=function(e){for(var t=this.content.length,n=this.content[e],i=this.scoreFunction(n);;){var r,o=2*(e+1),s=o-1,a=null;if(s<t&&(r=this.content[s],(r=this.scoreFunction(r))<i&&(a=s)),o<t&&(s=this.content[o],this.scoreFunction(s)<(null==a?i:r)&&(a=o)),null===a)break;this.content[e]=this.content[a],this.content[a]=n,e=a}},e}();function me(e,t){var n=e.orgInlineSize,i=e.orgContentSize;if(!n||!i)return t;var r=parseFloat(e.gridData.inlineOffset)||0,e=parseFloat(e.gridData.contentOffset)||0;return(i<=e?1:(n-r)/(i-e))*(t-e)+r}oe=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}r(t,e);var n=t.prototype;return n.applyGrid=function(e,t,n){var i=this.options,s=i.attributePrefix,a=i.horizontal;e.forEach(function(e){var t,n,i,r,o;e.isUpdate&&(t=e.element,r=e.attributes,n=e.gridData,i=parseFloat(r.inlineOffset)||n.inlineOffset||0,o=parseFloat(r.contentOffset)||0|n.contentOffset,!t||"inlineOffset"in r||"contentOffset"in r||e.mountState!==f.MOUNTED||(r=t.querySelector("["+s+"maintained-target]"))&&(e=t.offsetWidth-t.clientWidth+t.scrollWidth-r.clientWidth,r=t.offsetHeight-t.clientHeight+t.scrollHeight-r.clientHeight,o=a?(i=r,e):(i=e,r)),n.inlineOffset=i,n.contentOffset=o)});var r=this.options.rowRange,i=[];return e.length&&(i=r?this._getRowPath(e):this._getPath(e)),this._setStyle(e,i,n,"end"===t)},n._getRowPath=function(e){var t=this._getColumnRange(),n=this._getRowRange(),n=this._getRowLink(e,{path:[0],cost:0,length:0,currentNode:0},t,n);return null!==(n=null==n?void 0:n.path.map(function(e){return""+e}))&&void 0!==n?n:[]},n._getRowLink=function(e,t,n,i){var r=n[0],o=i[0],s=i[1],a=e.length,u=t.path,c=t.length,h=t.cost,l=t.currentNode;if(l<a&&(s<=c||a<l+r)){r=k(a-l,n)*Math.abs(this._getCost(e,l,a));return p(p({},t),{length:c+1,path:g(g([],u),[a]),currentNode:a,cost:h+r,isOver:!0})}return a<=l?p(p({},t),{currentNode:a,isOver:c<o||s<c}):this._searchRowLink(e,t,a,n,i)},n._searchRowLink=function(e,t,n,i,r){for(var o,s=i[0],a=i[1],u=t.currentNode,c=t.path,h=t.length,l=t.cost,f=Math.min(n,u+a),d=[],p=u+s;p<=f;++p)p!==u&&(o=Math.abs(this._getCost(e,u,p)),(o=this._getRowLink(e,{path:g(g([],c),[p]),length:h+1,cost:l+o,currentNode:p},i,r))&&d.push(o));return d.sort(function(e,t){var n=e.isOver;return n!==t.isOver?n?1:-1:k(e.length,r)-k(t.length,r)||e.cost-t.cost}),d[0]},n._getExpectedRowSize=function(e){var t=this.options.gap,r=this.getContainerInlineSize()-t*(e.length-1),o=0,s=0;return e.forEach(function(e){var t,n=e.orgInlineSize,i=e.orgContentSize;n&&i?(t=parseFloat(e.gridData.inlineOffset)||0,e=parseFloat(e.gridData.contentOffset)||0,o+=i=i<=e?1:(n-t)/(i-e),s+=e*i,r-=t):o+=1}),o?(r+s)/o:0},n._getExpectedInlineSize=function(e,n){var t=this.options.gap,i=e.reduce(function(e,t){return e+me(t,n)},0);return i?i+t*(e.length-1):0},n._getCost=function(e,t,n){var i=e.slice(t,n),e=this._getExpectedRowSize(i),t=this._getSizeRange(),n=t[0],t=t[1];if(this.isCroppedSize){if(n<=e&&e<=t)return 0;i=this._getExpectedInlineSize(i,e<n?n:t);return Math.pow(i-this.getContainerInlineSize(),2)}if(isFinite(t)){if(e<n)return Math.pow(e-n,2)+Math.pow(t,2);if(t<e)return Math.pow(e-t,2)+Math.pow(t,2)}else if(e<n)return Math.max(Math.pow(n,2),Math.pow(e,2))+Math.pow(t,2);return e-n},n._getPath=function(o){var s=this,a=o.length,e=this.options.columnRange,e=x(e)?e:[e,e],u=e[0],c=e[1];return pe(function(e){for(var t={},n=parseInt(e,10),i=Math.min(n+u,a);i<=a&&!(c<i-n);++i){var r=s._getCost(o,n,i);r<0&&i===a&&(r=0),t[""+i]=Math.pow(r,2)}return t},"0",""+a)},n._setStyle=function(e,t,n,i){var s=this;void 0===n&&(n=[]);var r=this.options,a=r.gap,u=r.isCroppedSize,c=r.displayedRow,h=this._getSizeRange(),n=n[0]||0,l=this.getContainerInlineSize(),t=function(e,t){for(var n=t.length,i=[],r=0;r<n-1;++r){var o=parseInt(t[r],10),s=parseInt(t[r+1],10);i.push(e.slice(o,s))}return i}(e,t),f=n,d=0;if(t.forEach(function(i,e){var t=i.length,r=s._getExpectedRowSize(i);u&&(r=Math.max(h[0],Math.min(r,h[1])));var n=s._getExpectedInlineSize(i,r),t=a*(t-1),o=(l-t)/(n-t);i.forEach(function(e,t){var n=me(e,r),t=i[t-1],t=t?t.cssInlinePos+t.cssInlineSize+a:0;u&&(n*=o),e.setCSSGridRect({inlinePos:t,contentPos:f,inlineSize:n,contentSize:r})}),f+=a+r,(c<0||e<c)&&(d=f)}),i)return{start:[n],end:[d]};var o=f-n;return e.forEach(function(e){e.cssContentPos-=o}),{start:[n-o],end:[n]}},n.getComputedOutlineLength=function(){return 1},n.getComputedOutlineSize=function(){return this.getContainerInlineSize()},n._getRowRange=function(){var e=this.rowRange;return x(e)?e:[e,e]},n._getColumnRange=function(){var e=this.columnRange;return x(e)?e:[e,e]},n._getSizeRange=function(){var e=this.sizeRange;return x(e)?e:[e,e]},t.propertyTypes=p(p({},fe.propertyTypes),{columnRange:a.RENDER_PROPERTY,rowRange:a.RENDER_PROPERTY,sizeRange:a.RENDER_PROPERTY,isCroppedSize:a.RENDER_PROPERTY,displayedRow:a.RENDER_PROPERTY}),t.defaultOptions=p(p({},fe.defaultOptions),{columnRange:[1,8],rowRange:0,sizeRange:[0,1/0],displayedRow:-1,isCroppedSize:!1}),o([I],t)}(fe);function Re(e){var t=-1/0;return e.forEach(function(e){isFinite(e)&&(t=Math.max(t,e))}),isFinite(t)?t:0}function ve(e,t,n){return Re(e)+function(e,t,n){var i=e.length;if(!i)return 0;var r=function(e){var t=1/0;return e.forEach(function(e){isFinite(e)&&(t=Math.min(t,e))}),isFinite(t)?t:0}(t),o=Re(e),s=0;if(!n)return 0;for(var a=0;a<i;++a){var u=e[a],c=t[a];isFinite(u)&&isFinite(c)&&(u=u-o,c=c-r,s=a?Math.max(s,s+u-c):u-c)}return s}(e,t,n)}function ze(e,t,n){for(var i=n.inlinePos,r=n.inlineSize,o=n.contentPos,s=n.contentSize,a=i;a<i+r;++a)e[a]=Math.min(e[a],o),t[a]=Math.max(t[a],o+s)}var W=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}r(t,e);var n=t.prototype;return n.applyGrid=function(e,t,n){var i=this._getFrame(),r=i.inlineSize,o=i.contentSize,s=i.rects,a=this.options,u=a.gap,c=a.useFrameFill,a=this.getRectSize(r),h=a.inlineSize,l=a.contentSize,f=e.length;if(!f||!r||!o)return{start:n,end:n};for(var d=s.length,p=M(r).map(function(){return 1/0}),g=M(r).map(function(){return-1/0}),m=i.outline.map(function(e){return e*(l+u)}),R=0;R<f;R+=d)for(var v=ve(g,m,c),z=0;z<d&&R+z<f;++z){var y=e[R+z],S=s[z],E=S.contentPos,_=S.inlinePos,P=S.contentSize,C=S.inlineSize,b=v+E*(l+u),S=_*(h+u),E=P*(l+u)-u,P=C*(h+u)-u;ze(p,g,{inlinePos:_,inlineSize:C,contentPos:b,contentSize:E+u}),y.setCSSGridRect({inlinePos:S,contentPos:b,inlineSize:P,contentSize:E})}var O,t="end"===t,n=n.length?n:[0];n.length!==r&&(O=(t?Math.max:Math.min).apply(Math,n),n=M(r).map(function(){return O}));var p=p.map(function(e){return isFinite(e)?e:0}),g=g.map(function(e){return isFinite(e)?e:0}),T=t?ve(n,p,c):ve(g,n,c);return e.forEach(function(e){e.cssContentPos+=T}),{start:p.map(function(e){return e+T}),end:g.map(function(e){return e+T})}},n.getComputedOutlineLength=function(){var e=this.options.frame;return e.length?e[0].length:0},n.getComputedOutlineSize=function(){var e=this.options,t=e.gap,e=e.rectSize;return"object"==typeof e?e.inlineSize:e||(this.getContainerInlineSize()+t)/this.getComputedOutlineLength()-t},n.getRectSize=function(e){var t=this.options,n=t.gap,t=t.rectSize;if("object"==typeof t)return t;n=t||(this.getContainerInlineSize()+n)/e-n;return{inlineSize:n,contentSize:n}},n._getFrame=function(){for(var e=this.options.frame,t=e.length,n=t?e[0].length:0,i=[],r={},o=M(n).map(function(){return 1/0}),s=M(n).map(function(){return-1/0}),a=0;a<t;++a)for(var u=0;u<n;++u){var c=e[a][u];c&&(r[a+","+u]||(ze(o,s,c=this._findRect(r,c,a,u,n,t)),i.push(c)))}return i.sort(function(e,t){return e.type<t.type?-1:1}),{rects:i,inlineSize:n,contentSize:t,outline:o}},n._findRect=function(e,t,n,i,r,o){for(var s=this.options.frame,a=1,u=1,c=i;c<r&&s[n][c]===t;++c)u=c-i+1;for(var h=n;h<o&&s[h][i]===t;++h)a=h-n+1;for(var l=n;l<n+a;++l)for(var f=i;f<i+u;++f)e[l+","+f]=!0;return{type:t,inlinePos:i,contentPos:n,inlineSize:u,contentSize:a}},t.propertyTypes=p(p({},fe.propertyTypes),{frame:a.RENDER_PROPERTY,useFrameFill:a.RENDER_PROPERTY,rectSize:a.RENDER_PROPERTY}),t.defaultOptions=p(p({},fe.defaultOptions),{frame:[],rectSize:0,useFrameFill:!0}),o([I],t)}(fe),ye=function(){function e(e){var t,n=p({orgInlineSize:0,orgContentSize:0,inlineSize:0,contentSize:0,inlinePos:0,contentPos:0,items:[]},e);for(t in n)this[t]=n[t]}var t=e.prototype;return t.scaleTo=function(e,t){var n=this.inlineSize?e/this.inlineSize:0,i=this.contentSize?t/this.contentSize:0;this.items.forEach(function(e){0!=n&&(e.inlinePos*=n,e.inlineSize*=n),0!=i&&(e.contentPos*=i,e.contentSize*=i)}),this.inlineSize=e,this.contentSize=t},t.push=function(e){this.items.push(e)},t.getOrgSizeWeight=function(){return this.orgInlineSize*this.orgContentSize},t.getSize=function(){return this.inlineSize*this.contentSize},t.getOrgRatio=function(){return 0===this.orgContentSize?0:this.orgInlineSize/this.orgContentSize},t.getRatio=function(){return 0===this.contentSize?0:this.inlineSize/this.contentSize},e}();function Se(e,t){t=e/t;return(t=t<1?1/t:t)-1}var Ee,_e={__proto__:null,default:fe,GetterSetter:I,withGridMethods:N,withMethods:D,getMountedElements:T,getUpdatedItems:b,MasonryGrid:Y,JustifiedGrid:oe,FrameGrid:W,PackingGrid:function(e){function t(){return null!==e&&e.apply(this,arguments)||this}r(t,e);var n=t.prototype;return n.applyGrid=function(e,t,n){var i=this,r=this.options,o=r.aspectRatio,s=r.gap,a=this.getContainerInlineSize(),u=a/o,n=n.length?n:[0],c="end"===t?Math.max.apply(Math,n):Math.min.apply(Math,n)-u-s,n=c+u+s,h=new ye({});return e.forEach(function(e){e=new ye({inlineSize:e.orgInlineSize,contentSize:e.orgContentSize,orgInlineSize:e.orgInlineSize,orgContentSize:e.orgContentSize});i._findBestFitArea(h,e),h.push(e),h.scaleTo(a+s,u+s)}),e.forEach(function(e,t){var n=h.items[t],i=n.inlineSize-s,r=n.contentSize-s,t=c+n.contentPos,n=n.inlinePos;e.setCSSGridRect({inlinePos:n,contentPos:t,inlineSize:i,contentSize:r})}),{start:[c],end:[n]}},n._findBestFitArea=function(e,p){if(0===e.getRatio())return e.orgInlineSize=p.inlineSize,e.orgContentSize=p.contentSize,e.inlineSize=p.inlineSize,void(e.contentSize=p.contentSize);var g,t,n,i,r,m=1/0,R=!1,v={inlineSize:0,contentSize:0},z={inlineSize:0,contentSize:0},y=this._getWeight("size"),S=this._getWeight("ratio");e.items.forEach(function(e){for(var t=Se(e.getOrgSizeWeight(),e.getSize())*y,n=Se(e.getOrgRatio(),e.getRatio())*S,i=e.inlineSize,r=e.contentSize,o=0;o<2;++o){var s=void 0,a=void 0,u=void 0,c=void 0;0===o?(u=s=i,c=r-(a=r*(p.contentSize/(e.orgContentSize+p.contentSize)))):(c=a=r,u=i-(s=i*(p.inlineSize/(e.orgInlineSize+p.inlineSize))));var h=s*a,l=s/a,f=u*c,d=c/c,h=Se(p.getSize(),h)*y;h+=Se(p.getRatio(),l)*S,h+=Se(e.getOrgSizeWeight(),f)*y-t,(h+=Se(e.getOrgRatio(),d)*S-n)===Math.min(h,m)&&(m=h,g=e,R=0===o,v.inlineSize=s,v.contentSize=a,z.inlineSize=u,z.contentSize=c)}}),t=g,n=v,i=z,r=R,(e=p).contentSize=n.contentSize,e.inlineSize=n.inlineSize,t.contentSize=i.contentSize,t.inlineSize=i.inlineSize,r?(e.contentPos=t.contentPos+t.contentSize,e.inlinePos=t.inlinePos):(e.inlinePos=t.inlinePos+t.inlineSize,e.contentPos=t.contentPos)},n.getComputedOutlineLength=function(){return 1},n.getComputedOutlineSize=function(){return this.getContainerInlineSize()},n._getWeight=function(e){var t=this.options,n=t.weightPriority;return n===e?100:"custom"===n?t[e+"Weight"]:1},t.propertyTypes=p(p({},fe.propertyTypes),{aspectRatio:a.RENDER_PROPERTY,sizeWeight:a.RENDER_PROPERTY,ratioWeight:a.RENDER_PROPERTY,weightPriority:a.RENDER_PROPERTY}),t.defaultOptions=p(p({},fe.defaultOptions),{aspectRatio:1,sizeWeight:1,ratioWeight:1,weightPriority:"custom"}),o([I],t)}(fe),ItemRenderer:he,GridItem:le,ContainerManager:L,ResizeWatcher:A,DEFAULT_GRID_OPTIONS:R,get PROPERTY_TYPE(){return a},get MOUNT_STATE(){return f},get UPDATE_STATE(){return m},GRID_PROPERTY_TYPES:v,GRID_METHODS:e,GRID_EVENTS:["renderComplete","contentError"],RECT_NAMES:d};for(Ee in _e)fe[Ee]=_e[Ee];return fe});
 //# sourceMappingURL=grid.min.js.map

package.json

 {
 	"name": "@egjs/grid",
-	"version": "1.10.0-beta.3",
+	"version": "1.10.0-beta.4",
 	"description": "A component that can arrange items according to the type of grids",
@@ -5,0 +5,0 @@ "main": "dist/grid.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1464543

increased by2.98%

Lines of code

16379

increased by5.96%

No dependency changes