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