ninegrid2 6.982.0 → 6.983.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 -24
  2. package/dist/bundle.esm.js +6 -24
  3. package/dist/nx/nxLayout.js +6 -24
  4. package/package.json +1 -1
  5. package/src/nx/nxLayout.js +6 -24
package/dist/bundle.cjs.js CHANGED
@@ -121915,24 +121915,20 @@ class NxLayout extends HTMLElement {
121915
121915
  const children = Array.from(this.children);
121916
121916
  if (children.length === 0) return;
121917
121917
 
121918
+ // 기존 자식 노드를 안전하게 제거
121918
121919
  while (this.firstChild) {
121919
121920
  this.removeChild(this.firstChild);
121920
121921
  }
121921
121922
 
121922
- console.log("11111");
121923
+ console.log("22222");
121923
121924
 
121924
121925
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
121925
121926
  const numRows = columnsLayout.length;
121926
121927
 
121927
- let gridTemplate = '';
121928
- for (const numCols of columnsLayout) {
121929
- gridTemplate += `1fr `; // 행의 높이
121930
- }
121931
-
121932
121928
  this.style.display = 'grid';
121933
121929
  this.style.width = '100%';
121934
121930
  this.style.height = '100%';
121935
- this.style.gridTemplateRows = gridTemplate.trim();
121931
+ this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
121936
121932
 
121937
121933
  let childIndex = 0;
121938
121934
 
@@ -121940,29 +121936,16 @@ class NxLayout extends HTMLElement {
121940
121936
  const numColumns = columnsLayout[row];
121941
121937
  const rowWrapper = document.createElement('div');
121942
121938
  rowWrapper.style.display = 'grid';
121943
-
121944
- let columnTemplate = '';
121945
- for (let i = 0; i < numColumns; i++) {
121946
- columnTemplate += '1fr ';
121947
- if (i < numColumns - 1) {
121948
- columnTemplate += '8px ';
121949
- }
121950
- }
121951
- rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
121939
+ rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
121940
+ rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
121952
121941
  rowWrapper.style.height = '100%';
121953
121942
 
121954
121943
  for (let col = 0; col < numColumns; col++) {
121955
121944
  if (children[childIndex]) {
121956
- // 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
121945
+ // 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
121957
121946
  rowWrapper.appendChild(children[childIndex]);
121958
121947
  childIndex++;
121959
121948
  }
121960
-
121961
- if (col < numColumns - 1) {
121962
- const splitter = document.createElement('nx-splitter');
121963
- splitter.setAttribute('direction', 'horizontal');
121964
- rowWrapper.appendChild(splitter);
121965
- }
121966
121949
  }
121967
121950
 
121968
121951
  this.appendChild(rowWrapper);
@@ -121970,7 +121953,6 @@ class NxLayout extends HTMLElement {
121970
121953
  if (row < numRows - 1) {
121971
121954
  const splitter = document.createElement('nx-splitter');
121972
121955
  splitter.setAttribute('direction', 'vertical');
121973
- splitter.style.gridColumn = `1 / -1`;
121974
121956
  this.appendChild(splitter);
121975
121957
  }
121976
121958
  }
package/dist/bundle.esm.js CHANGED
@@ -121911,24 +121911,20 @@ class NxLayout extends HTMLElement {
121911
121911
  const children = Array.from(this.children);
121912
121912
  if (children.length === 0) return;
121913
121913
 
121914
+ // 기존 자식 노드를 안전하게 제거
121914
121915
  while (this.firstChild) {
121915
121916
  this.removeChild(this.firstChild);
121916
121917
  }
121917
121918
 
121918
- console.log("11111");
121919
+ console.log("22222");
121919
121920
 
121920
121921
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
121921
121922
  const numRows = columnsLayout.length;
121922
121923
 
121923
- let gridTemplate = '';
121924
- for (const numCols of columnsLayout) {
121925
- gridTemplate += `1fr `; // 행의 높이
121926
- }
121927
-
121928
121924
  this.style.display = 'grid';
121929
121925
  this.style.width = '100%';
121930
121926
  this.style.height = '100%';
121931
- this.style.gridTemplateRows = gridTemplate.trim();
121927
+ this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
121932
121928
 
121933
121929
  let childIndex = 0;
121934
121930
 
@@ -121936,29 +121932,16 @@ class NxLayout extends HTMLElement {
121936
121932
  const numColumns = columnsLayout[row];
121937
121933
  const rowWrapper = document.createElement('div');
121938
121934
  rowWrapper.style.display = 'grid';
121939
-
121940
- let columnTemplate = '';
121941
- for (let i = 0; i < numColumns; i++) {
121942
- columnTemplate += '1fr ';
121943
- if (i < numColumns - 1) {
121944
- columnTemplate += '8px ';
121945
- }
121946
- }
121947
- rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
121935
+ rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
121936
+ rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
121948
121937
  rowWrapper.style.height = '100%';
121949
121938
 
121950
121939
  for (let col = 0; col < numColumns; col++) {
121951
121940
  if (children[childIndex]) {
121952
- // 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
121941
+ // 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
121953
121942
  rowWrapper.appendChild(children[childIndex]);
121954
121943
  childIndex++;
121955
121944
  }
121956
-
121957
- if (col < numColumns - 1) {
121958
- const splitter = document.createElement('nx-splitter');
121959
- splitter.setAttribute('direction', 'horizontal');
121960
- rowWrapper.appendChild(splitter);
121961
- }
121962
121945
  }
121963
121946
 
121964
121947
  this.appendChild(rowWrapper);
@@ -121966,7 +121949,6 @@ class NxLayout extends HTMLElement {
121966
121949
  if (row < numRows - 1) {
121967
121950
  const splitter = document.createElement('nx-splitter');
121968
121951
  splitter.setAttribute('direction', 'vertical');
121969
- splitter.style.gridColumn = `1 / -1`;
121970
121952
  this.appendChild(splitter);
121971
121953
  }
121972
121954
  }
package/dist/nx/nxLayout.js CHANGED
@@ -20,24 +20,20 @@ class NxLayout extends HTMLElement {
20
20
  const children = Array.from(this.children);
21
21
  if (children.length === 0) return;
22
22
 
23
+ // 기존 자식 노드를 안전하게 제거
23
24
  while (this.firstChild) {
24
25
  this.removeChild(this.firstChild);
25
26
  }
26
27
 
27
- console.log("11111")
28
+ console.log("22222")
28
29
 
29
30
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
30
31
  const numRows = columnsLayout.length;
31
32
 
32
- let gridTemplate = '';
33
- for (const numCols of columnsLayout) {
34
- gridTemplate += `1fr `; // 행의 높이
35
- }
36
-
37
33
  this.style.display = 'grid';
38
34
  this.style.width = '100%';
39
35
  this.style.height = '100%';
40
- this.style.gridTemplateRows = gridTemplate.trim();
36
+ this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
41
37
 
42
38
  let childIndex = 0;
43
39
 
@@ -45,29 +41,16 @@ class NxLayout extends HTMLElement {
45
41
  const numColumns = columnsLayout[row];
46
42
  const rowWrapper = document.createElement('div');
47
43
  rowWrapper.style.display = 'grid';
48
-
49
- let columnTemplate = '';
50
- for (let i = 0; i < numColumns; i++) {
51
- columnTemplate += '1fr ';
52
- if (i < numColumns - 1) {
53
- columnTemplate += '8px ';
54
- }
55
- }
56
- rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
44
+ rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
45
+ rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
57
46
  rowWrapper.style.height = '100%';
58
47
 
59
48
  for (let col = 0; col < numColumns; col++) {
60
49
  if (children[childIndex]) {
61
- // 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
50
+ // 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
62
51
  rowWrapper.appendChild(children[childIndex]);
63
52
  childIndex++;
64
53
  }
65
-
66
- if (col < numColumns - 1) {
67
- const splitter = document.createElement('nx-splitter');
68
- splitter.setAttribute('direction', 'horizontal');
69
- rowWrapper.appendChild(splitter);
70
- }
71
54
  }
72
55
 
73
56
  this.appendChild(rowWrapper);
@@ -75,7 +58,6 @@ class NxLayout extends HTMLElement {
75
58
  if (row < numRows - 1) {
76
59
  const splitter = document.createElement('nx-splitter');
77
60
  splitter.setAttribute('direction', 'vertical');
78
- splitter.style.gridColumn = `1 / -1`;
79
61
  this.appendChild(splitter);
80
62
  }
81
63
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.982.0",
4
+ "version": "6.983.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxLayout.js CHANGED
@@ -20,24 +20,20 @@ class NxLayout extends HTMLElement {
20
20
  const children = Array.from(this.children);
21
21
  if (children.length === 0) return;
22
22
 
23
+ // 기존 자식 노드를 안전하게 제거
23
24
  while (this.firstChild) {
24
25
  this.removeChild(this.firstChild);
25
26
  }
26
27
 
27
- console.log("11111")
28
+ console.log("22222")
28
29
 
29
30
  const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
30
31
  const numRows = columnsLayout.length;
31
32
 
32
- let gridTemplate = '';
33
- for (const numCols of columnsLayout) {
34
- gridTemplate += `1fr `; // 행의 높이
35
- }
36
-
37
33
  this.style.display = 'grid';
38
34
  this.style.width = '100%';
39
35
  this.style.height = '100%';
40
- this.style.gridTemplateRows = gridTemplate.trim();
36
+ this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
41
37
 
42
38
  let childIndex = 0;
43
39
 
@@ -45,29 +41,16 @@ class NxLayout extends HTMLElement {
45
41
  const numColumns = columnsLayout[row];
46
42
  const rowWrapper = document.createElement('div');
47
43
  rowWrapper.style.display = 'grid';
48
-
49
- let columnTemplate = '';
50
- for (let i = 0; i < numColumns; i++) {
51
- columnTemplate += '1fr ';
52
- if (i < numColumns - 1) {
53
- columnTemplate += '8px ';
54
- }
55
- }
56
- rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
44
+ rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
45
+ rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
57
46
  rowWrapper.style.height = '100%';
58
47
 
59
48
  for (let col = 0; col < numColumns; col++) {
60
49
  if (children[childIndex]) {
61
- // 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
50
+ // 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
62
51
  rowWrapper.appendChild(children[childIndex]);
63
52
  childIndex++;
64
53
  }
65
-
66
- if (col < numColumns - 1) {
67
- const splitter = document.createElement('nx-splitter');
68
- splitter.setAttribute('direction', 'horizontal');
69
- rowWrapper.appendChild(splitter);
70
- }
71
54
  }
72
55
 
73
56
  this.appendChild(rowWrapper);
@@ -75,7 +58,6 @@ class NxLayout extends HTMLElement {
75
58
  if (row < numRows - 1) {
76
59
  const splitter = document.createElement('nx-splitter');
77
60
  splitter.setAttribute('direction', 'vertical');
78
- splitter.style.gridColumn = `1 / -1`;
79
61
  this.appendChild(splitter);
80
62
  }
81
63
  }