ninegrid2 6.1114.0 → 6.1115.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 +13 -18
  2. package/dist/bundle.esm.js +13 -18
  3. package/dist/nx/nxLayout2.js +14 -18
  4. package/package.json +1 -1
  5. package/src/nx/nxLayout2.js +14 -18
package/dist/bundle.cjs.js CHANGED
@@ -121962,7 +121962,7 @@ class NxLayout2 extends HTMLElement {
121962
121962
  }
121963
121963
 
121964
121964
  connectedCallback() {
121965
- this.#originalChildren = Array.from(this.children);
121965
+ this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
121966
121966
  this.#render();
121967
121967
  }
121968
121968
 
@@ -121980,6 +121980,7 @@ class NxLayout2 extends HTMLElement {
121980
121980
  const children = this.#originalChildren;
121981
121981
  if (!children || children.length === 0) return;
121982
121982
 
121983
+ // 기존 자식 노드를 모두 제거하여 초기화
121983
121984
  while (this.firstChild) {
121984
121985
  this.removeChild(this.firstChild);
121985
121986
  }
@@ -121987,42 +121988,36 @@ class NxLayout2 extends HTMLElement {
121987
121988
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
121988
121989
  const numRows = columnsLayout.length;
121989
121990
 
121991
+ // 메인 컨테이너를 Flexbox로 설정
121990
121992
  this.style.display = 'flex';
121991
- this.style.flexDirection = 'column';
121993
+ this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
121992
121994
  this.style.width = '100%';
121993
- this.style.gap = "4px";
121995
+ //this.style.height = '100%';
121996
+ //this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
121994
121997
 
121995
121998
  let childIndex = 0;
121996
121999
 
121997
122000
  for (let row = 0; row < numRows; row++) {
121998
122001
  const numColumns = columnsLayout[row];
121999
122002
 
122003
+ // 행 래퍼 생성
122000
122004
  const rowWrapper = document.createElement('div');
122001
122005
  rowWrapper.style.display = 'flex';
122002
- rowWrapper.style.flexDirection = 'row';
122003
- rowWrapper.style.flex = "0 0 auto";
122006
+ rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
122004
122007
  rowWrapper.style.width = '100%';
122005
- rowWrapper.style.gap = "4px";
122006
- rowWrapper.style.flexWrap = "wrap";
122007
- rowWrapper.style.textAlign = "left";
122008
- rowWrapper.style.minWidth = '0';
122009
- rowWrapper.style.minHeight = '0';
122008
+ //rowWrapper.style.minWidth = '0';
122009
+ //rowWrapper.style.minHeight = '0';
122010
+ //rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
122010
122011
 
122011
122012
  for (let col = 0; col < numColumns; col++) {
122012
122013
  if (children[childIndex]) {
122013
122014
  const panel = children[childIndex];
122014
-
122015
- // ⭐⭐ 핵심 수정: calc()를 사용하여 gap 크기를 flex-basis에서 제외 ⭐⭐
122016
- const totalGapWidth = (numColumns - 1) * 4;
122017
- const panelFlexBasis = `calc((100% - ${totalGapWidth}px) / ${numColumns})`;
122018
-
122019
- panel.style.flex = `1 1 ${panelFlexBasis}`;
122020
- panel.style.minWidth = '0';
122021
- panel.style.minHeight = '0';
122015
+ panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
122022
122016
  rowWrapper.appendChild(panel);
122023
122017
  childIndex++;
122024
122018
  }
122025
122019
  }
122020
+
122026
122021
  this.appendChild(rowWrapper);
122027
122022
  }
122028
122023
  }
package/dist/bundle.esm.js CHANGED
@@ -121958,7 +121958,7 @@ class NxLayout2 extends HTMLElement {
121958
121958
  }
121959
121959
 
121960
121960
  connectedCallback() {
121961
- this.#originalChildren = Array.from(this.children);
121961
+ this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
121962
121962
  this.#render();
121963
121963
  }
121964
121964
 
@@ -121976,6 +121976,7 @@ class NxLayout2 extends HTMLElement {
121976
121976
  const children = this.#originalChildren;
121977
121977
  if (!children || children.length === 0) return;
121978
121978
 
121979
+ // 기존 자식 노드를 모두 제거하여 초기화
121979
121980
  while (this.firstChild) {
121980
121981
  this.removeChild(this.firstChild);
121981
121982
  }
@@ -121983,42 +121984,36 @@ class NxLayout2 extends HTMLElement {
121983
121984
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
121984
121985
  const numRows = columnsLayout.length;
121985
121986
 
121987
+ // 메인 컨테이너를 Flexbox로 설정
121986
121988
  this.style.display = 'flex';
121987
- this.style.flexDirection = 'column';
121989
+ this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
121988
121990
  this.style.width = '100%';
121989
- this.style.gap = "4px";
121991
+ //this.style.height = '100%';
121992
+ //this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
121990
121993
 
121991
121994
  let childIndex = 0;
121992
121995
 
121993
121996
  for (let row = 0; row < numRows; row++) {
121994
121997
  const numColumns = columnsLayout[row];
121995
121998
 
121999
+ // 행 래퍼 생성
121996
122000
  const rowWrapper = document.createElement('div');
121997
122001
  rowWrapper.style.display = 'flex';
121998
- rowWrapper.style.flexDirection = 'row';
121999
- rowWrapper.style.flex = "0 0 auto";
122002
+ rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
122000
122003
  rowWrapper.style.width = '100%';
122001
- rowWrapper.style.gap = "4px";
122002
- rowWrapper.style.flexWrap = "wrap";
122003
- rowWrapper.style.textAlign = "left";
122004
- rowWrapper.style.minWidth = '0';
122005
- rowWrapper.style.minHeight = '0';
122004
+ //rowWrapper.style.minWidth = '0';
122005
+ //rowWrapper.style.minHeight = '0';
122006
+ //rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
122006
122007
 
122007
122008
  for (let col = 0; col < numColumns; col++) {
122008
122009
  if (children[childIndex]) {
122009
122010
  const panel = children[childIndex];
122010
-
122011
- // ⭐⭐ 핵심 수정: calc()를 사용하여 gap 크기를 flex-basis에서 제외 ⭐⭐
122012
- const totalGapWidth = (numColumns - 1) * 4;
122013
- const panelFlexBasis = `calc((100% - ${totalGapWidth}px) / ${numColumns})`;
122014
-
122015
- panel.style.flex = `1 1 ${panelFlexBasis}`;
122016
- panel.style.minWidth = '0';
122017
- panel.style.minHeight = '0';
122011
+ panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
122018
122012
  rowWrapper.appendChild(panel);
122019
122013
  childIndex++;
122020
122014
  }
122021
122015
  }
122016
+
122022
122017
  this.appendChild(rowWrapper);
122023
122018
  }
122024
122019
  }
package/dist/nx/nxLayout2.js CHANGED
@@ -9,7 +9,7 @@ class NxLayout2 extends HTMLElement {
9
9
  }
10
10
 
11
11
  connectedCallback() {
12
- this.#originalChildren = Array.from(this.children);
12
+ this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
13
13
  this.#render();
14
14
  }
15
15
 
@@ -27,6 +27,7 @@ class NxLayout2 extends HTMLElement {
27
27
  const children = this.#originalChildren;
28
28
  if (!children || children.length === 0) return;
29
29
 
30
+ // 기존 자식 노드를 모두 제거하여 초기화
30
31
  while (this.firstChild) {
31
32
  this.removeChild(this.firstChild);
32
33
  }
@@ -34,42 +35,37 @@ class NxLayout2 extends HTMLElement {
34
35
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
35
36
  const numRows = columnsLayout.length;
36
37
 
38
+ // 메인 컨테이너를 Flexbox로 설정
37
39
  this.style.display = 'flex';
38
- this.style.flexDirection = 'column';
40
+ this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
39
41
  this.style.width = '100%';
40
- this.style.gap = "4px";
42
+ //this.style.height = '100%';
43
+ //this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
41
44
 
42
45
  let childIndex = 0;
46
+ const flexBasis = 100 / numRows; // 각 행의 기본 높이 비율
43
47
 
44
48
  for (let row = 0; row < numRows; row++) {
45
49
  const numColumns = columnsLayout[row];
46
50
 
51
+ // 행 래퍼 생성
47
52
  const rowWrapper = document.createElement('div');
48
53
  rowWrapper.style.display = 'flex';
49
- rowWrapper.style.flexDirection = 'row';
50
- rowWrapper.style.flex = "0 0 auto";
54
+ rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
51
55
  rowWrapper.style.width = '100%';
52
- rowWrapper.style.gap = "4px";
53
- rowWrapper.style.flexWrap = "wrap";
54
- rowWrapper.style.textAlign = "left";
55
- rowWrapper.style.minWidth = '0';
56
- rowWrapper.style.minHeight = '0';
56
+ //rowWrapper.style.minWidth = '0';
57
+ //rowWrapper.style.minHeight = '0';
58
+ //rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
57
59
 
58
60
  for (let col = 0; col < numColumns; col++) {
59
61
  if (children[childIndex]) {
60
62
  const panel = children[childIndex];
61
-
62
- // ⭐⭐ 핵심 수정: calc()를 사용하여 gap 크기를 flex-basis에서 제외 ⭐⭐
63
- const totalGapWidth = (numColumns - 1) * 4;
64
- const panelFlexBasis = `calc((100% - ${totalGapWidth}px) / ${numColumns})`;
65
-
66
- panel.style.flex = `1 1 ${panelFlexBasis}`;
67
- panel.style.minWidth = '0';
68
- panel.style.minHeight = '0';
63
+ panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
69
64
  rowWrapper.appendChild(panel);
70
65
  childIndex++;
71
66
  }
72
67
  }
68
+
73
69
  this.appendChild(rowWrapper);
74
70
  }
75
71
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1114.0",
4
+ "version": "6.1115.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxLayout2.js CHANGED
@@ -9,7 +9,7 @@ class NxLayout2 extends HTMLElement {
9
9
  }
10
10
 
11
11
  connectedCallback() {
12
- this.#originalChildren = Array.from(this.children);
12
+ this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
13
13
  this.#render();
14
14
  }
15
15
 
@@ -27,6 +27,7 @@ class NxLayout2 extends HTMLElement {
27
27
  const children = this.#originalChildren;
28
28
  if (!children || children.length === 0) return;
29
29
 
30
+ // 기존 자식 노드를 모두 제거하여 초기화
30
31
  while (this.firstChild) {
31
32
  this.removeChild(this.firstChild);
32
33
  }
@@ -34,42 +35,37 @@ class NxLayout2 extends HTMLElement {
34
35
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
35
36
  const numRows = columnsLayout.length;
36
37
 
38
+ // 메인 컨테이너를 Flexbox로 설정
37
39
  this.style.display = 'flex';
38
- this.style.flexDirection = 'column';
40
+ this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
39
41
  this.style.width = '100%';
40
- this.style.gap = "4px";
42
+ //this.style.height = '100%';
43
+ //this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
41
44
 
42
45
  let childIndex = 0;
46
+ const flexBasis = 100 / numRows; // 각 행의 기본 높이 비율
43
47
 
44
48
  for (let row = 0; row < numRows; row++) {
45
49
  const numColumns = columnsLayout[row];
46
50
 
51
+ // 행 래퍼 생성
47
52
  const rowWrapper = document.createElement('div');
48
53
  rowWrapper.style.display = 'flex';
49
- rowWrapper.style.flexDirection = 'row';
50
- rowWrapper.style.flex = "0 0 auto";
54
+ rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
51
55
  rowWrapper.style.width = '100%';
52
- rowWrapper.style.gap = "4px";
53
- rowWrapper.style.flexWrap = "wrap";
54
- rowWrapper.style.textAlign = "left";
55
- rowWrapper.style.minWidth = '0';
56
- rowWrapper.style.minHeight = '0';
56
+ //rowWrapper.style.minWidth = '0';
57
+ //rowWrapper.style.minHeight = '0';
58
+ //rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
57
59
 
58
60
  for (let col = 0; col < numColumns; col++) {
59
61
  if (children[childIndex]) {
60
62
  const panel = children[childIndex];
61
-
62
- // ⭐⭐ 핵심 수정: calc()를 사용하여 gap 크기를 flex-basis에서 제외 ⭐⭐
63
- const totalGapWidth = (numColumns - 1) * 4;
64
- const panelFlexBasis = `calc((100% - ${totalGapWidth}px) / ${numColumns})`;
65
-
66
- panel.style.flex = `1 1 ${panelFlexBasis}`;
67
- panel.style.minWidth = '0';
68
- panel.style.minHeight = '0';
63
+ panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
69
64
  rowWrapper.appendChild(panel);
70
65
  childIndex++;
71
66
  }
72
67
  }
68
+
73
69
  this.appendChild(rowWrapper);
74
70
  }
75
71
  }