chore: Release 4.8.1

CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.8.1](https://github.com/naver/egjs-infinitegrid/compare/4.7.1...4.8.1) (2023-01-27)
+### :sparkles: Packages
+* `@egjs/infinitegrid` 4.8.1
+* `@egjs/react-infinitegrid` 4.8.1
+* `@egjs/svelte-infinitegrid` 4.8.1
+* `@egjs/vue-infinitegrid` 4.8.1
+* `@egjs/vue3-infinitegrid` 4.8.1
+* `@egjs/ngx-infinitegrid` 4.8.1
+
+
+### :rocket: New Features
+
+* All
+    * update `@egjs/grid` module ([081acd5](https://github.com/naver/egjs-infinitegrid/commit/081acd53fd4ccd00b16e70e8ef86f11a63bd764c))
+
+
+### :bug: Bug Fix
+
+* `@egjs/vue3-infinitegrid`, `@egjs/vue-infinitegrid`
+    * support vue 3 types (#523) ([1e09868](https://github.com/naver/egjs-infinitegrid/commit/1e0986889421ecf7a690e1f59d4adf9c0966c90f))
+* `@egjs/infinitegrid`
+    * fix changed groupKey (#526) ([6db0bff](https://github.com/naver/egjs-infinitegrid/commit/6db0bffc8a2d23568eb36caf1cfb8d1677c08192))
+* `@egjs/ngx-infinitegrid`
+    * **ngx-infinitegrid:** re-arrange peer deps and call `next` on the destroy subject (#520) ([0410c76](https://github.com/naver/egjs-infinitegrid/commit/0410c7630d443475fbc9252ea2cc5e53cb9abc21))
+    * **ngx-infinitegrid:** reduce change detection cycles and teardown event listeners once the view is removed (#518) ([ee30a5b](https://github.com/naver/egjs-infinitegrid/commit/ee30a5bb21e78653844b63ac76f21e2614d8f10c))
+
+
+### :memo: Documentation
+
+* fix README ([1fe439f](https://github.com/naver/egjs-infinitegrid/commit/1fe439f513d9bcefeca92700d592d1b394b0a0dd))
+
+
+### :mega: Other
+
+* All
+    * update packages versions ([191e57f](https://github.com/naver/egjs-infinitegrid/commit/191e57fbb4df5c2fc8f990fa44e2819bdadf5ee6))
+
+
+
 ## 4.7.1 (2022-09-08)
 ### :sparkles: Packages
 * `@egjs/infinitegrid` 4.7.1

package.json

@@ -37,10 +37,10 @@
     "SquareLayout"
   ],
   "devDependencies": {
-    "@daybrush/jsdoc": "^0.4.3",
+    "@daybrush/jsdoc": "^0.4.5",
     "@egjs/release-helper": "^0.2.8",
     "egjs-jsdoc-template": "^1.4.4",
-    "jsdoc-to-mdx": "^1.1.2",
+    "jsdoc-to-mdx": "^1.2.0",
     "lerna": "^4.0.0",
     "typescript": "^4.5.0 <4.6.0"
   },

packages/docs/docs/api/FrameInfiniteGrid.mdx

@@ -3,7 +3,7 @@ custom_edit_url: null
 ---
 
 ```ts
-class FrameInfiniteGrid extends InfiniteGrid
+class FrameInfiniteGrid
 ```
 
 <div>

packages/docs/docs/api/FrameInfiniteGridOptions.mdx

@@ -8,58 +8,58 @@ custom_edit_url: null
 
 **Type**: TSInterface
 
-|PROPERTY|TYPE|DESCRIPTION|
-|:---:|:---:|:---:|
-|horizontal|boolean|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.<br /></p>|
-|percentage|Array&lt;"position" \| "size"&gt; \| boolean|<p>Whether to set the css size and position of the item to %.<br /></p>|
-|isEqualSize|boolean|<p>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 &quot;true&quot;, the performance of layout arrangement can be improved.<br /></p>|
-|isConstantSize|boolean|<p>Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.<br /></p>|
-|gap|number|<p>Gap used to create space around items.<br /></p>|
-|attributePrefix|string|<p>The prefix to use element's data attribute.<br /></p>|
-|resizeDebounce|number|<p>Debounce time to set in the resize event. (unit: ms)<br /></p>|
-|maxResizeDebounce|number|<p>Maximum time to debounce the resize event. (0 is not set)<br /></p>|
-|autoResize|boolean|<p>Whether the resize method should be called automatically after a window resize event.<br /></p>|
-|useFit|boolean|<p>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.<br /></p>|
-|useTransform|boolean|<p>Whether to use transform property instead of using left and top css properties.<br /></p>|
-|renderOnPropertyChange|boolean|<p>Whether to automatically render through property change.<br /></p>|
-|preserveUIOnDestroy|boolean|<p>Whether to preserve the UI of the existing container or item when destroying.<br /></p>|
-|defaultDirection|"start" \| "end"|<p>The default direction value when direction is not set in the render option.<br /></p>|
-|outlineLength|number|<p>The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.<br /></p>|
-|outlineSize|number|<p>The size of the outline. If the outline size is 0, it is calculated according to the grid type.<br /></p>|
-|useRoundedSize|boolean|<p>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.<br /></p>|
-|useResizeObserver|boolean|<p>Whether to use ResizeObserver event to detect container size change when <code>autoResize</code> option is used.<br /></p>|
-|observeChildren|boolean|<p>Whether to detect size change of children if useResizeObserver option is used.<br /></p>|
-|externalItemRenderer|ItemRenderer \| null|<p>You can set the ItemRenderer directly externally.<br /></p>|
-|externalContainerManager|ContainerManager \| null|<p>You can set the ContainerManager directly externally.<br /></p>|
-|frame|number[][]|<p>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: [])<br /></p>|
-|useFrameFill|boolean|<p>Make sure that the frame can be attached after the previous frame. (default: true) </p>|
-|rectSize|number \| {inlineSize: number, contentSize: number}|<p>1x1 rect size. If it is 0, it is determined by the number of columns in the frame. (default: 0) </p>|
-|horizontal|boolean|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.<br /></p>|
-|percentage|Array&lt;"position" \| "size"&gt; \| boolean|<p>Whether to set the css size and position of the item to %.<br /></p>|
-|isEqualSize|boolean|<p>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 &quot;true&quot;, the performance of layout arrangement can be improved.<br /></p>|
-|isConstantSize|boolean|<p>Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.<br /></p>|
-|gap|number|<p>Gap used to create space around items.<br /></p>|
-|attributePrefix|string|<p>The prefix to use element's data attribute.<br /></p>|
-|resizeDebounce|number|<p>Debounce time to set in the resize event. (unit: ms)<br /></p>|
-|maxResizeDebounce|number|<p>Maximum time to debounce the resize event. (0 is not set)<br /></p>|
-|autoResize|boolean|<p>Whether the resize method should be called automatically after a window resize event.<br /></p>|
-|useFit|boolean|<p>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.<br /></p>|
-|useTransform|boolean|<p>Whether to use transform property instead of using left and top css properties.<br /></p>|
-|renderOnPropertyChange|boolean|<p>Whether to automatically render through property change.<br /></p>|
-|preserveUIOnDestroy|boolean|<p>Whether to preserve the UI of the existing container or item when destroying.<br /></p>|
-|defaultDirection|"start" \| "end"|<p>The default direction value when direction is not set in the render option.<br /></p>|
-|outlineLength|number|<p>The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.<br /></p>|
-|outlineSize|number|<p>The size of the outline. If the outline size is 0, it is calculated according to the grid type.<br /></p>|
-|useRoundedSize|boolean|<p>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.<br /></p>|
-|useResizeObserver|boolean|<p>Whether to use ResizeObserver event to detect container size change when <code>autoResize</code> option is used.<br /></p>|
-|observeChildren|boolean|<p>Whether to detect size change of children if useResizeObserver option is used.<br /></p>|
-|externalItemRenderer|ItemRenderer \| null|<p>You can set the ItemRenderer directly externally.<br /></p>|
-|externalContainerManager|ContainerManager \| null|<p>You can set the ContainerManager directly externally.<br /></p>|
-|container|boolean \| HTMLElement \| string \| Ref&lt;HTMLElement&gt;|<p>The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly.</p>|
-|containerTag|string|<p>If you create a container, you can set the container's tag.</p>|
-|threshold|number|<p>The size of the scrollable area for adding the next group of items.</p>|
-|useRecycle|boolean|<p>Whether to show only the DOM of the visible area.</p>|
-|scrollContainer|HTMLElement \| string \| Ref&lt;HTMLElement&gt; \| null|<p>You can set the scrollContainer directly. In this case, the container becomes the wrapper itself.</p>|
-|gridConstructor|GridFunction|<p>Grid class to apply Infinite function.</p>|
-|renderer|Renderer \| null|<p>class that renders the DOM.</p>|
+|PROPERTY|TYPE|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|
+|horizontal|boolean|false|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.<br /></p>|
+|percentage|Array&lt;"position" \| "size"&gt; \| boolean|false|<p>Whether to set the css size and position of the item to %.<br /></p>|
+|isEqualSize|boolean|false|<p>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 &quot;true&quot;, the performance of layout arrangement can be improved.<br /></p>|
+|isConstantSize|boolean|false|<p>Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.<br /></p>|
+|gap|number|5|<p>Gap used to create space around items.<br /></p>|
+|attributePrefix|string|"data-grid-"|<p>The prefix to use element's data attribute.<br /></p>|
+|resizeDebounce|number|100|<p>Debounce time to set in the resize event. (unit: ms)<br /></p>|
+|maxResizeDebounce|number|0|<p>Maximum time to debounce the resize event. (0 is not set)<br /></p>|
+|autoResize|boolean|true|<p>Whether the resize method should be called automatically after a window resize event.<br /></p>|
+|useFit|boolean|true|<p>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.<br /></p>|
+|useTransform|boolean|false|<p>Whether to use transform property instead of using left and top css properties.<br /></p>|
+|renderOnPropertyChange|boolean|true|<p>Whether to automatically render through property change.<br /></p>|
+|preserveUIOnDestroy|boolean|false|<p>Whether to preserve the UI of the existing container or item when destroying.<br /></p>|
+|defaultDirection|"start" \| "end"|"end"|<p>The default direction value when direction is not set in the render option.<br /></p>|
+|outlineLength|number|0|<p>The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.<br /></p>|
+|outlineSize|number|0|<p>The size of the outline. If the outline size is 0, it is calculated according to the grid type.<br /></p>|
+|useRoundedSize|boolean|true|<p>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.<br /></p>|
+|useResizeObserver|boolean|false|<p>Whether to use ResizeObserver event to detect container size change when <code>autoResize</code> option is used.<br /></p>|
+|observeChildren|boolean|false|<p>Whether to detect size change of children if useResizeObserver option is used.<br /></p>|
+|externalItemRenderer|ItemRenderer \| null||<p>You can set the ItemRenderer directly externally.<br /></p>|
+|externalContainerManager|ContainerManager \| null||<p>You can set the ContainerManager directly externally.<br /></p>|
+|frame|number[][]|[]|<p>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.<br /></p>|
+|useFrameFill|boolean|true|<p>Make sure that the frame can be attached after the previous frame.<br /></p>|
+|rectSize|number \| {inlineSize: number, contentSize: number}|0|<p>1x1 rect size. If it is 0, it is determined by the number of columns in the frame.<br /></p>|
+|horizontal|boolean|false|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.<br /></p>|
+|percentage|Array&lt;"position" \| "size"&gt; \| boolean|false|<p>Whether to set the css size and position of the item to %.<br /></p>|
+|isEqualSize|boolean|false|<p>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 &quot;true&quot;, the performance of layout arrangement can be improved.<br /></p>|
+|isConstantSize|boolean|false|<p>Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.<br /></p>|
+|gap|number|5|<p>Gap used to create space around items.<br /></p>|
+|attributePrefix|string|"data-grid-"|<p>The prefix to use element's data attribute.<br /></p>|
+|resizeDebounce|number|100|<p>Debounce time to set in the resize event. (unit: ms)<br /></p>|
+|maxResizeDebounce|number|0|<p>Maximum time to debounce the resize event. (0 is not set)<br /></p>|
+|autoResize|boolean|true|<p>Whether the resize method should be called automatically after a window resize event.<br /></p>|
+|useFit|boolean|true|<p>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.<br /></p>|
+|useTransform|boolean|false|<p>Whether to use transform property instead of using left and top css properties.<br /></p>|
+|renderOnPropertyChange|boolean|true|<p>Whether to automatically render through property change.<br /></p>|
+|preserveUIOnDestroy|boolean|false|<p>Whether to preserve the UI of the existing container or item when destroying.<br /></p>|
+|defaultDirection|"start" \| "end"|"end"|<p>The default direction value when direction is not set in the render option.<br /></p>|
+|outlineLength|number|0|<p>The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.<br /></p>|
+|outlineSize|number|0|<p>The size of the outline. If the outline size is 0, it is calculated according to the grid type.<br /></p>|
+|useRoundedSize|boolean|true|<p>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.<br /></p>|
+|useResizeObserver|boolean|false|<p>Whether to use ResizeObserver event to detect container size change when <code>autoResize</code> option is used.<br /></p>|
+|observeChildren|boolean|false|<p>Whether to detect size change of children if useResizeObserver option is used.<br /></p>|
+|externalItemRenderer|ItemRenderer \| null||<p>You can set the ItemRenderer directly externally.<br /></p>|
+|externalContainerManager|ContainerManager \| null||<p>You can set the ContainerManager directly externally.<br /></p>|
+|container|boolean \| HTMLElement \| string \| Ref&lt;HTMLElement&gt;|false|<p>The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly.</p>|
+|containerTag|string|"div"|<p>If you create a container, you can set the container's tag.</p>|
+|threshold|number|100|<p>The size of the scrollable area for adding the next group of items.</p>|
+|useRecycle|boolean|true|<p>Whether to show only the DOM of the visible area.</p>|
+|scrollContainer|HTMLElement \| string \| Ref&lt;HTMLElement&gt; \| null||<p>You can set the scrollContainer directly. In this case, the container becomes the wrapper itself.</p>|
+|gridConstructor|GridFunction||<p>Grid class to apply Infinite function.</p>|
+|renderer|Renderer \| null||<p>class that renders the DOM.</p>|