ninegrid2 6.1112.0 → 6.1113.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/bundle.cjs.js +6 -9
  2. package/dist/bundle.esm.js +6 -9
  3. package/dist/nx/nxLayout2.js +6 -10
  4. package/package.json +1 -1
  5. package/src/nx/nxLayout2.js +6 -10
package/dist/bundle.cjs.js CHANGED
@@ -121980,7 +121980,6 @@ class NxLayout2 extends HTMLElement {
121980
121980
  const children = this.#originalChildren;
121981
121981
  if (!children || children.length === 0) return;
121982
121982
 
121983
- // 기존 자식 노드를 모두 제거하여 초기화
121984
121983
  while (this.firstChild) {
121985
121984
  this.removeChild(this.firstChild);
121986
121985
  }
@@ -121988,24 +121987,25 @@ class NxLayout2 extends HTMLElement {
121988
121987
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
121989
121988
  const numRows = columnsLayout.length;
121990
121989
 
121991
- // 메인 컨테이너를 Flexbox로 설정
121992
121990
  this.style.display = 'flex';
121993
121991
  this.style.flexDirection = 'column';
121994
121992
  this.style.width = '100%';
121995
- this.style.height = '100%'; // ⭐ 주석 해제
121996
121993
  this.style.gap = "4px";
121997
- this.style.minHeight = '0'; // ⭐ 추가
121994
+
121995
+ // ⭐⭐ 부모 컨테이너의 높이를 제거하여 내용물에 따라 늘어나게 함 ⭐⭐
121996
+ // this.style.height = '100%';
121998
121997
 
121999
121998
  let childIndex = 0;
122000
121999
 
122001
122000
  for (let row = 0; row < numRows; row++) {
122002
122001
  const numColumns = columnsLayout[row];
122003
122002
 
122004
- // 행 래퍼 생성
122005
122003
  const rowWrapper = document.createElement('div');
122006
122004
  rowWrapper.style.display = 'flex';
122007
122005
  rowWrapper.style.flexDirection = 'row';
122008
- rowWrapper.style.flex = "1 1 0";
122006
+
122007
+ // ⭐⭐ flex 속성을 0 0 auto로 변경하여 내용물 높이만큼만 차지하게 함 ⭐⭐
122008
+ rowWrapper.style.flex = "0 0 auto";
122009
122009
  rowWrapper.style.width = '100%';
122010
122010
  rowWrapper.style.gap = "4px";
122011
122011
  rowWrapper.style.flexWrap = "wrap";
@@ -122016,9 +122016,6 @@ class NxLayout2 extends HTMLElement {
122016
122016
  for (let col = 0; col < numColumns; col++) {
122017
122017
  if (children[childIndex]) {
122018
122018
  const panel = children[childIndex];
122019
- // ⭐⭐ flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
122020
- // 여기서는 numColumns가 2일 때 50%가 되어 한 줄에 2개가 배치됨.
122021
- // 만약 2줄로 나누고 싶다면, numColumns를 2배로 설정하면 됨.
122022
122019
  const panelFlexBasis = 100 / numColumns;
122023
122020
  panel.style.flex = `1 1 ${panelFlexBasis}%`;
122024
122021
  panel.style.minWidth = '0';
package/dist/bundle.esm.js CHANGED
@@ -121976,7 +121976,6 @@ class NxLayout2 extends HTMLElement {
121976
121976
  const children = this.#originalChildren;
121977
121977
  if (!children || children.length === 0) return;
121978
121978
 
121979
- // 기존 자식 노드를 모두 제거하여 초기화
121980
121979
  while (this.firstChild) {
121981
121980
  this.removeChild(this.firstChild);
121982
121981
  }
@@ -121984,24 +121983,25 @@ class NxLayout2 extends HTMLElement {
121984
121983
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
121985
121984
  const numRows = columnsLayout.length;
121986
121985
 
121987
- // 메인 컨테이너를 Flexbox로 설정
121988
121986
  this.style.display = 'flex';
121989
121987
  this.style.flexDirection = 'column';
121990
121988
  this.style.width = '100%';
121991
- this.style.height = '100%'; // ⭐ 주석 해제
121992
121989
  this.style.gap = "4px";
121993
- this.style.minHeight = '0'; // ⭐ 추가
121990
+
121991
+ // ⭐⭐ 부모 컨테이너의 높이를 제거하여 내용물에 따라 늘어나게 함 ⭐⭐
121992
+ // this.style.height = '100%';
121994
121993
 
121995
121994
  let childIndex = 0;
121996
121995
 
121997
121996
  for (let row = 0; row < numRows; row++) {
121998
121997
  const numColumns = columnsLayout[row];
121999
121998
 
122000
- // 행 래퍼 생성
122001
121999
  const rowWrapper = document.createElement('div');
122002
122000
  rowWrapper.style.display = 'flex';
122003
122001
  rowWrapper.style.flexDirection = 'row';
122004
- rowWrapper.style.flex = "1 1 0";
122002
+
122003
+ // ⭐⭐ flex 속성을 0 0 auto로 변경하여 내용물 높이만큼만 차지하게 함 ⭐⭐
122004
+ rowWrapper.style.flex = "0 0 auto";
122005
122005
  rowWrapper.style.width = '100%';
122006
122006
  rowWrapper.style.gap = "4px";
122007
122007
  rowWrapper.style.flexWrap = "wrap";
@@ -122012,9 +122012,6 @@ class NxLayout2 extends HTMLElement {
122012
122012
  for (let col = 0; col < numColumns; col++) {
122013
122013
  if (children[childIndex]) {
122014
122014
  const panel = children[childIndex];
122015
- // ⭐⭐ flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
122016
- // 여기서는 numColumns가 2일 때 50%가 되어 한 줄에 2개가 배치됨.
122017
- // 만약 2줄로 나누고 싶다면, numColumns를 2배로 설정하면 됨.
122018
122015
  const panelFlexBasis = 100 / numColumns;
122019
122016
  panel.style.flex = `1 1 ${panelFlexBasis}%`;
122020
122017
  panel.style.minWidth = '0';
package/dist/nx/nxLayout2.js CHANGED
@@ -27,7 +27,6 @@ class NxLayout2 extends HTMLElement {
27
27
  const children = this.#originalChildren;
28
28
  if (!children || children.length === 0) return;
29
29
 
30
- // 기존 자식 노드를 모두 제거하여 초기화
31
30
  while (this.firstChild) {
32
31
  this.removeChild(this.firstChild);
33
32
  }
@@ -35,25 +34,25 @@ class NxLayout2 extends HTMLElement {
35
34
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
36
35
  const numRows = columnsLayout.length;
37
36
 
38
- // 메인 컨테이너를 Flexbox로 설정
39
37
  this.style.display = 'flex';
40
38
  this.style.flexDirection = 'column';
41
39
  this.style.width = '100%';
42
- this.style.height = '100%'; // ⭐ 주석 해제
43
40
  this.style.gap = "4px";
44
- this.style.minHeight = '0'; // ⭐ 추가
41
+
42
+ // ⭐⭐ 부모 컨테이너의 높이를 제거하여 내용물에 따라 늘어나게 함 ⭐⭐
43
+ // this.style.height = '100%';
45
44
 
46
45
  let childIndex = 0;
47
- const flexBasis = 100 / numRows;
48
46
 
49
47
  for (let row = 0; row < numRows; row++) {
50
48
  const numColumns = columnsLayout[row];
51
49
 
52
- // 행 래퍼 생성
53
50
  const rowWrapper = document.createElement('div');
54
51
  rowWrapper.style.display = 'flex';
55
52
  rowWrapper.style.flexDirection = 'row';
56
- rowWrapper.style.flex = "1 1 0";
53
+
54
+ // ⭐⭐ flex 속성을 0 0 auto로 변경하여 내용물 높이만큼만 차지하게 함 ⭐⭐
55
+ rowWrapper.style.flex = "0 0 auto";
57
56
  rowWrapper.style.width = '100%';
58
57
  rowWrapper.style.gap = "4px";
59
58
  rowWrapper.style.flexWrap = "wrap";
@@ -64,9 +63,6 @@ class NxLayout2 extends HTMLElement {
64
63
  for (let col = 0; col < numColumns; col++) {
65
64
  if (children[childIndex]) {
66
65
  const panel = children[childIndex];
67
- // ⭐⭐ flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
68
- // 여기서는 numColumns가 2일 때 50%가 되어 한 줄에 2개가 배치됨.
69
- // 만약 2줄로 나누고 싶다면, numColumns를 2배로 설정하면 됨.
70
66
  const panelFlexBasis = 100 / numColumns;
71
67
  panel.style.flex = `1 1 ${panelFlexBasis}%`;
72
68
  panel.style.minWidth = '0';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1112.0",
4
+ "version": "6.1113.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxLayout2.js CHANGED
@@ -27,7 +27,6 @@ class NxLayout2 extends HTMLElement {
27
27
  const children = this.#originalChildren;
28
28
  if (!children || children.length === 0) return;
29
29
 
30
- // 기존 자식 노드를 모두 제거하여 초기화
31
30
  while (this.firstChild) {
32
31
  this.removeChild(this.firstChild);
33
32
  }
@@ -35,25 +34,25 @@ class NxLayout2 extends HTMLElement {
35
34
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
36
35
  const numRows = columnsLayout.length;
37
36
 
38
- // 메인 컨테이너를 Flexbox로 설정
39
37
  this.style.display = 'flex';
40
38
  this.style.flexDirection = 'column';
41
39
  this.style.width = '100%';
42
- this.style.height = '100%'; // ⭐ 주석 해제
43
40
  this.style.gap = "4px";
44
- this.style.minHeight = '0'; // ⭐ 추가
41
+
42
+ // ⭐⭐ 부모 컨테이너의 높이를 제거하여 내용물에 따라 늘어나게 함 ⭐⭐
43
+ // this.style.height = '100%';
45
44
 
46
45
  let childIndex = 0;
47
- const flexBasis = 100 / numRows;
48
46
 
49
47
  for (let row = 0; row < numRows; row++) {
50
48
  const numColumns = columnsLayout[row];
51
49
 
52
- // 행 래퍼 생성
53
50
  const rowWrapper = document.createElement('div');
54
51
  rowWrapper.style.display = 'flex';
55
52
  rowWrapper.style.flexDirection = 'row';
56
- rowWrapper.style.flex = "1 1 0";
53
+
54
+ // ⭐⭐ flex 속성을 0 0 auto로 변경하여 내용물 높이만큼만 차지하게 함 ⭐⭐
55
+ rowWrapper.style.flex = "0 0 auto";
57
56
  rowWrapper.style.width = '100%';
58
57
  rowWrapper.style.gap = "4px";
59
58
  rowWrapper.style.flexWrap = "wrap";
@@ -64,9 +63,6 @@ class NxLayout2 extends HTMLElement {
64
63
  for (let col = 0; col < numColumns; col++) {
65
64
  if (children[childIndex]) {
66
65
  const panel = children[childIndex];
67
- // ⭐⭐ flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
68
- // 여기서는 numColumns가 2일 때 50%가 되어 한 줄에 2개가 배치됨.
69
- // 만약 2줄로 나누고 싶다면, numColumns를 2배로 설정하면 됨.
70
66
  const panelFlexBasis = 100 / numColumns;
71
67
  panel.style.flex = `1 1 ${panelFlexBasis}%`;
72
68
  panel.style.minWidth = '0';