ninegrid2 6.1110.0 → 6.1112.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 +8 -3
  2. package/dist/bundle.esm.js +8 -3
  3. package/dist/nx/nxLayout2.js +8 -3
  4. package/package.json +1 -1
  5. package/src/nx/nxLayout2.js +8 -3
package/dist/bundle.cjs.js CHANGED
@@ -121988,11 +121988,13 @@ class NxLayout2 extends HTMLElement {
121988
121988
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
121989
121989
  const numRows = columnsLayout.length;
121990
121990
 
121991
- // 메인 컨테이너는 행을 세로로 배치
121991
+ // 메인 컨테이너를 Flexbox로 설정
121992
121992
  this.style.display = 'flex';
121993
121993
  this.style.flexDirection = 'column';
121994
121994
  this.style.width = '100%';
121995
+ this.style.height = '100%'; // ⭐ 주석 해제
121995
121996
  this.style.gap = "4px";
121997
+ this.style.minHeight = '0'; // ⭐ 추가
121996
121998
 
121997
121999
  let childIndex = 0;
121998
122000
 
@@ -122006,14 +122008,17 @@ class NxLayout2 extends HTMLElement {
122006
122008
  rowWrapper.style.flex = "1 1 0";
122007
122009
  rowWrapper.style.width = '100%';
122008
122010
  rowWrapper.style.gap = "4px";
122009
- // ⭐⭐ rowWrapper에 flex-wrap: wrap 적용 ⭐⭐
122010
122011
  rowWrapper.style.flexWrap = "wrap";
122011
122012
  rowWrapper.style.textAlign = "left";
122013
+ rowWrapper.style.minWidth = '0';
122014
+ rowWrapper.style.minHeight = '0';
122012
122015
 
122013
122016
  for (let col = 0; col < numColumns; col++) {
122014
122017
  if (children[childIndex]) {
122015
122018
  const panel = children[childIndex];
122016
- // ⭐⭐ 패널의 flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
122019
+ // ⭐⭐ flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
122020
+ // 여기서는 numColumns가 2일 때 50%가 되어 한 줄에 2개가 배치됨.
122021
+ // 만약 2줄로 나누고 싶다면, numColumns를 2배로 설정하면 됨.
122017
122022
  const panelFlexBasis = 100 / numColumns;
122018
122023
  panel.style.flex = `1 1 ${panelFlexBasis}%`;
122019
122024
  panel.style.minWidth = '0';
package/dist/bundle.esm.js CHANGED
@@ -121984,11 +121984,13 @@ class NxLayout2 extends HTMLElement {
121984
121984
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
121985
121985
  const numRows = columnsLayout.length;
121986
121986
 
121987
- // 메인 컨테이너는 행을 세로로 배치
121987
+ // 메인 컨테이너를 Flexbox로 설정
121988
121988
  this.style.display = 'flex';
121989
121989
  this.style.flexDirection = 'column';
121990
121990
  this.style.width = '100%';
121991
+ this.style.height = '100%'; // ⭐ 주석 해제
121991
121992
  this.style.gap = "4px";
121993
+ this.style.minHeight = '0'; // ⭐ 추가
121992
121994
 
121993
121995
  let childIndex = 0;
121994
121996
 
@@ -122002,14 +122004,17 @@ class NxLayout2 extends HTMLElement {
122002
122004
  rowWrapper.style.flex = "1 1 0";
122003
122005
  rowWrapper.style.width = '100%';
122004
122006
  rowWrapper.style.gap = "4px";
122005
- // ⭐⭐ rowWrapper에 flex-wrap: wrap 적용 ⭐⭐
122006
122007
  rowWrapper.style.flexWrap = "wrap";
122007
122008
  rowWrapper.style.textAlign = "left";
122009
+ rowWrapper.style.minWidth = '0';
122010
+ rowWrapper.style.minHeight = '0';
122008
122011
 
122009
122012
  for (let col = 0; col < numColumns; col++) {
122010
122013
  if (children[childIndex]) {
122011
122014
  const panel = children[childIndex];
122012
- // ⭐⭐ 패널의 flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
122015
+ // ⭐⭐ flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
122016
+ // 여기서는 numColumns가 2일 때 50%가 되어 한 줄에 2개가 배치됨.
122017
+ // 만약 2줄로 나누고 싶다면, numColumns를 2배로 설정하면 됨.
122013
122018
  const panelFlexBasis = 100 / numColumns;
122014
122019
  panel.style.flex = `1 1 ${panelFlexBasis}%`;
122015
122020
  panel.style.minWidth = '0';
package/dist/nx/nxLayout2.js CHANGED
@@ -35,11 +35,13 @@ class NxLayout2 extends HTMLElement {
35
35
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
36
36
  const numRows = columnsLayout.length;
37
37
 
38
- // 메인 컨테이너는 행을 세로로 배치
38
+ // 메인 컨테이너를 Flexbox로 설정
39
39
  this.style.display = 'flex';
40
40
  this.style.flexDirection = 'column';
41
41
  this.style.width = '100%';
42
+ this.style.height = '100%'; // ⭐ 주석 해제
42
43
  this.style.gap = "4px";
44
+ this.style.minHeight = '0'; // ⭐ 추가
43
45
 
44
46
  let childIndex = 0;
45
47
  const flexBasis = 100 / numRows;
@@ -54,14 +56,17 @@ class NxLayout2 extends HTMLElement {
54
56
  rowWrapper.style.flex = "1 1 0";
55
57
  rowWrapper.style.width = '100%';
56
58
  rowWrapper.style.gap = "4px";
57
- // ⭐⭐ rowWrapper에 flex-wrap: wrap 적용 ⭐⭐
58
59
  rowWrapper.style.flexWrap = "wrap";
59
60
  rowWrapper.style.textAlign = "left";
61
+ rowWrapper.style.minWidth = '0';
62
+ rowWrapper.style.minHeight = '0';
60
63
 
61
64
  for (let col = 0; col < numColumns; col++) {
62
65
  if (children[childIndex]) {
63
66
  const panel = children[childIndex];
64
- // ⭐⭐ 패널의 flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
67
+ // ⭐⭐ flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
68
+ // 여기서는 numColumns가 2일 때 50%가 되어 한 줄에 2개가 배치됨.
69
+ // 만약 2줄로 나누고 싶다면, numColumns를 2배로 설정하면 됨.
65
70
  const panelFlexBasis = 100 / numColumns;
66
71
  panel.style.flex = `1 1 ${panelFlexBasis}%`;
67
72
  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.1110.0",
4
+ "version": "6.1112.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxLayout2.js CHANGED
@@ -35,11 +35,13 @@ class NxLayout2 extends HTMLElement {
35
35
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
36
36
  const numRows = columnsLayout.length;
37
37
 
38
- // 메인 컨테이너는 행을 세로로 배치
38
+ // 메인 컨테이너를 Flexbox로 설정
39
39
  this.style.display = 'flex';
40
40
  this.style.flexDirection = 'column';
41
41
  this.style.width = '100%';
42
+ this.style.height = '100%'; // ⭐ 주석 해제
42
43
  this.style.gap = "4px";
44
+ this.style.minHeight = '0'; // ⭐ 추가
43
45
 
44
46
  let childIndex = 0;
45
47
  const flexBasis = 100 / numRows;
@@ -54,14 +56,17 @@ class NxLayout2 extends HTMLElement {
54
56
  rowWrapper.style.flex = "1 1 0";
55
57
  rowWrapper.style.width = '100%';
56
58
  rowWrapper.style.gap = "4px";
57
- // ⭐⭐ rowWrapper에 flex-wrap: wrap 적용 ⭐⭐
58
59
  rowWrapper.style.flexWrap = "wrap";
59
60
  rowWrapper.style.textAlign = "left";
61
+ rowWrapper.style.minWidth = '0';
62
+ rowWrapper.style.minHeight = '0';
60
63
 
61
64
  for (let col = 0; col < numColumns; col++) {
62
65
  if (children[childIndex]) {
63
66
  const panel = children[childIndex];
64
- // ⭐⭐ 패널의 flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
67
+ // ⭐⭐ flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
68
+ // 여기서는 numColumns가 2일 때 50%가 되어 한 줄에 2개가 배치됨.
69
+ // 만약 2줄로 나누고 싶다면, numColumns를 2배로 설정하면 됨.
65
70
  const panelFlexBasis = 100 / numColumns;
66
71
  panel.style.flex = `1 1 ${panelFlexBasis}%`;
67
72
  panel.style.minWidth = '0';