chore: Release 4.12.0

CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.12.0](https://github.com/naver/egjs-infinitegrid/compare/4.11.1...4.12.0) (2024-07-02)
+### :sparkles: Packages
+* `@egjs/infinitegrid` 4.12.0
+* `@egjs/react-infinitegrid` 4.12.0
+* `@egjs/svelte-infinitegrid` 4.12.0
+* `@egjs/vue-infinitegrid` 4.12.0
+* `@egjs/vue3-infinitegrid` 4.12.0
+* `@egjs/ngx-infinitegrid` 4.12.0
+
+
+### :mega: Other
+
+* All
+    * update packages versions ([2e2a638](https://github.com/naver/egjs-infinitegrid/commit/2e2a63806a6d8d6b1b2b492c4b762dad689de3b6))
+
+
+
 ## [4.11.1](https://github.com/naver/egjs-infinitegrid/compare/4.10.1...4.11.1) (2024-02-07)
 ### :sparkles: Packages
 * `@egjs/infinitegrid` 4.11.1

packages/docs/docs/api/FrameInfiniteGridOptions.mdx

@@ -14,7 +14,7 @@ custom_edit_url: null
 |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>|
+|gap|number \| {horizontal?: number, vertical?: 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>|
@@ -38,7 +38,7 @@ custom_edit_url: null
 |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>|
+|gap|number \| {horizontal?: number, vertical?: 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>|

packages/docs/docs/api/InfiniteGridOptions.mdx

@@ -14,7 +14,7 @@ custom_edit_url: null
 |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>|
+|gap|number \| {horizontal?: number, vertical?: 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>|

packages/docs/docs/api/JustifiedInfiniteGridOptions.mdx

@@ -14,7 +14,7 @@ custom_edit_url: null
 |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>|
+|gap|number \| {horizontal?: number, vertical?: 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>|
@@ -34,19 +34,18 @@ custom_edit_url: null
 |columnRange|number \| number[]|[1, 8]|<p>The minimum and maximum number of items per line.<br /></p>|
 |rowRange|number \| number[]|0|<p>The minimum and maximum number of rows in a group, 0 is not set.<br /></p>|
 |sizeRange|number \| number[]|[0, Infinity]|<p>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.<br /></p>|
-|stretch|boolean|false|<p>아이템의 inlineSize를 stretch 할지 여부</p>|
-|stretchRange|Array&lt;string \| number&gt;|["-10%", "+10%"]|<p>string 값으로 <code>-</code>, <code>+</code>, <code>%</code>이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다.<br />낱개로 설정하고 싶다면 각 Element 또는 JSX로 data-grid-min-stretch=&quot;-10%&quot;, data-grid-max-stretch=&quot;+10%&quot;로 설정할 수 있다.</p>|
-|passUnstretchRow|boolean||<p>마지막 열에 stretch 범위에 벗어난 경우 다음 InfiniteGrid</p>|
 |displayedRow|number|-1|<p>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.<br /></p>|
 |isCroppedSize|boolean|false|<p>Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken.<br /></p>|
-|contentMargin|number||<p>test contentMargin</p>|
-|inlineOffset|number||<p>test inlineOffset</p>|
-|contentOffset|number||<p>test contentOffset</p>|
+|inlineOffset|number|0|<p>The ratio is maintained except for the offset value in the inline direction. If 'data-grid-inline-offset' is set in the element of each item, it will be applied first.<br /></p>|
+|contentOffset|number|0|<p>The ratio is maintained except for the offset value in the content direction. If 'data-grid-content-offset' is set in the element or JSX of each item, it will be applied first.<br /></p>|
+|stretch|boolean|false|<p>it is possible to basically break the proportion of the item and stretch the inline size to fill the container.<br />If you set the <code>sizeRange</code> range narrowly, you can stretch well.<br /></p>|
+|stretchRange|Array&lt;string \| number&gt;|["-10%", "+10%"]|<p>If <code>-</code>, <code>+</code>, or <code>%</code> are added as a string value, it is a relative value to the original size. If it is a number value, the stretch range can be set as an absolute value.<br />If <code>data-grid-min-stretch</code> and <code>data-grid-max-stretch</code> are set in the Element or JSX of each item, they will be applied first.<br /><br />@</p>|
+|passUnstretchRow|boolean||<p>Items placed in the last row are not stretched and are drawn maintaining their proportions. When using InfiniteGrid, it is calculated and re-rendered as follows:<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>|
+|gap|number \| {horizontal?: number, vertical?: 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>|

packages/docs/docs/api/MasonryInfiniteGridOptions.mdx

@@ -14,7 +14,7 @@ custom_edit_url: null
 |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>|
+|gap|number \| {horizontal?: number, vertical?: 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>|
@@ -42,7 +42,7 @@ custom_edit_url: null
 |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>|
+|gap|number \| {horizontal?: number, vertical?: 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>|

packages/docs/docs/api/PackingInfiniteGridOptions.mdx

@@ -14,7 +14,7 @@ custom_edit_url: null
 |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>|
+|gap|number \| {horizontal?: number, vertical?: 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>|
@@ -39,7 +39,7 @@ custom_edit_url: null
 |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>|
+|gap|number \| {horizontal?: number, vertical?: 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>|

packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/FrameInfiniteGridOptions.mdx

@@ -14,7 +14,7 @@ custom_edit_url: null
 |percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
 |isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
 |isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
-|gap|number|5|아이템들 사이의 공간.|
+|gap|number \| {horizontal?: number, vertical?: number}|5|아이템들 사이의 공간.|
 |attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
 |resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
 |maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
@@ -38,7 +38,7 @@ custom_edit_url: null
 |percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
 |isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
 |isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
-|gap|number|5|아이템들 사이의 공간.|
+|gap|number \| {horizontal?: number, vertical?: number}|5|아이템들 사이의 공간.|
 |attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
 |resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
 |maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|

packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/InfiniteGridOptions.mdx

@@ -14,7 +14,7 @@ custom_edit_url: null
 |percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
 |isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
 |isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
-|gap|number|5|아이템들 사이의 공간.|
+|gap|number \| {horizontal?: number, vertical?: number}|5|아이템들 사이의 공간.|
 |attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
 |resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
 |maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|