ninegrid2 6.1010.0 → 6.1012.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 (7) hide show
  1. package/dist/bundle.cjs.js +7 -22
  2. package/dist/bundle.esm.js +7 -22
  3. package/dist/nx/nxLayout.js +7 -20
  4. package/dist/nx/nxSplitter.js +0 -2
  5. package/package.json +1 -1
  6. package/src/nx/nxLayout.js +7 -20
  7. package/src/nx/nxSplitter.js +0 -2
package/dist/bundle.cjs.js CHANGED
@@ -121387,11 +121387,9 @@ class nxSplitter extends HTMLElement {
121387
121387
  const nextRect = next?.getBoundingClientRect();
121388
121388
 
121389
121389
  if (this.classList.contains('h')) {
121390
- console.log("hhhhhhh");
121391
121390
  this.#mode = "h";
121392
121391
  }
121393
121392
  else if (this.classList.contains('v')) {
121394
- console.log("vvvvv");
121395
121393
  this.#mode = "v";
121396
121394
  }
121397
121395
  else {
@@ -121936,12 +121934,8 @@ class NxLayout extends HTMLElement {
121936
121934
 
121937
121935
  #render() {
121938
121936
  const children = this.#originalChildren;
121937
+ if (!children || children.length === 0) return;
121939
121938
 
121940
- if (children.length === 0) return;
121941
-
121942
- console.log("=============================", children);
121943
-
121944
- // 기존 자식 노드를 모두 제거하여 초기화
121945
121939
  while (this.firstChild) {
121946
121940
  this.removeChild(this.firstChild);
121947
121941
  }
@@ -121967,29 +121961,22 @@ class NxLayout extends HTMLElement {
121967
121961
  for (let row = 0; row < numRows; row++) {
121968
121962
  const numColumns = columnsLayout[row];
121969
121963
 
121964
+ // Flexbox를 사용하는 행 래퍼 생성
121970
121965
  const rowWrapper = document.createElement('div');
121971
- rowWrapper.style.display = 'grid';
121966
+ rowWrapper.style.display = 'flex';
121972
121967
  rowWrapper.style.height = '100%';
121973
-
121974
- let columnTemplate = '';
121975
- for (let i = 0; i < numColumns; i++) {
121976
- columnTemplate += '1fr ';
121977
- if (i < numColumns - 1) {
121978
- columnTemplate += '8px ';
121979
- }
121980
- }
121981
- rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
121968
+ //rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
121982
121969
 
121983
121970
  for (let col = 0; col < numColumns; col++) {
121984
121971
  if (children[childIndex]) {
121985
121972
  const panel = children[childIndex];
121973
+ panel.style.flex = '1'; // Flexbox 환경에 맞게 flex 속성 추가
121986
121974
  rowWrapper.appendChild(panel);
121987
121975
  childIndex++;
121988
121976
  }
121989
121977
  if (col < numColumns - 1) {
121990
121978
  const splitter = document.createElement('nx-splitter');
121991
- //splitter.setAttribute('direction', 'horizontal');
121992
- splitter.classList.add('h');
121979
+ splitter.setAttribute('direction', 'horizontal');
121993
121980
  rowWrapper.appendChild(splitter);
121994
121981
  }
121995
121982
  }
@@ -121998,9 +121985,7 @@ class NxLayout extends HTMLElement {
121998
121985
 
121999
121986
  if (row < numRows - 1) {
122000
121987
  const splitter = document.createElement('nx-splitter');
122001
- //splitter.setAttribute('class', 'v');
122002
- //splitter.classList.remove('h');
122003
- splitter.classList.add('v');
121988
+ splitter.setAttribute('direction', 'vertical');
122004
121989
  this.appendChild(splitter);
122005
121990
  }
122006
121991
  }
package/dist/bundle.esm.js CHANGED
@@ -121383,11 +121383,9 @@ class nxSplitter extends HTMLElement {
121383
121383
  const nextRect = next?.getBoundingClientRect();
121384
121384
 
121385
121385
  if (this.classList.contains('h')) {
121386
- console.log("hhhhhhh");
121387
121386
  this.#mode = "h";
121388
121387
  }
121389
121388
  else if (this.classList.contains('v')) {
121390
- console.log("vvvvv");
121391
121389
  this.#mode = "v";
121392
121390
  }
121393
121391
  else {
@@ -121932,12 +121930,8 @@ class NxLayout extends HTMLElement {
121932
121930
 
121933
121931
  #render() {
121934
121932
  const children = this.#originalChildren;
121933
+ if (!children || children.length === 0) return;
121935
121934
 
121936
- if (children.length === 0) return;
121937
-
121938
- console.log("=============================", children);
121939
-
121940
- // 기존 자식 노드를 모두 제거하여 초기화
121941
121935
  while (this.firstChild) {
121942
121936
  this.removeChild(this.firstChild);
121943
121937
  }
@@ -121963,29 +121957,22 @@ class NxLayout extends HTMLElement {
121963
121957
  for (let row = 0; row < numRows; row++) {
121964
121958
  const numColumns = columnsLayout[row];
121965
121959
 
121960
+ // Flexbox를 사용하는 행 래퍼 생성
121966
121961
  const rowWrapper = document.createElement('div');
121967
- rowWrapper.style.display = 'grid';
121962
+ rowWrapper.style.display = 'flex';
121968
121963
  rowWrapper.style.height = '100%';
121969
-
121970
- let columnTemplate = '';
121971
- for (let i = 0; i < numColumns; i++) {
121972
- columnTemplate += '1fr ';
121973
- if (i < numColumns - 1) {
121974
- columnTemplate += '8px ';
121975
- }
121976
- }
121977
- rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
121964
+ //rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
121978
121965
 
121979
121966
  for (let col = 0; col < numColumns; col++) {
121980
121967
  if (children[childIndex]) {
121981
121968
  const panel = children[childIndex];
121969
+ panel.style.flex = '1'; // Flexbox 환경에 맞게 flex 속성 추가
121982
121970
  rowWrapper.appendChild(panel);
121983
121971
  childIndex++;
121984
121972
  }
121985
121973
  if (col < numColumns - 1) {
121986
121974
  const splitter = document.createElement('nx-splitter');
121987
- //splitter.setAttribute('direction', 'horizontal');
121988
- splitter.classList.add('h');
121975
+ splitter.setAttribute('direction', 'horizontal');
121989
121976
  rowWrapper.appendChild(splitter);
121990
121977
  }
121991
121978
  }
@@ -121994,9 +121981,7 @@ class NxLayout extends HTMLElement {
121994
121981
 
121995
121982
  if (row < numRows - 1) {
121996
121983
  const splitter = document.createElement('nx-splitter');
121997
- //splitter.setAttribute('class', 'v');
121998
- //splitter.classList.remove('h');
121999
- splitter.classList.add('v');
121984
+ splitter.setAttribute('direction', 'vertical');
122000
121985
  this.appendChild(splitter);
122001
121986
  }
122002
121987
  }
package/dist/nx/nxLayout.js CHANGED
@@ -31,12 +31,8 @@ class NxLayout extends HTMLElement {
31
31
 
32
32
  #render() {
33
33
  const children = this.#originalChildren;
34
+ if (!children || children.length === 0) return;
34
35
 
35
- if (children.length === 0) return;
36
-
37
- console.log("=============================", children)
38
-
39
- // 기존 자식 노드를 모두 제거하여 초기화
40
36
  while (this.firstChild) {
41
37
  this.removeChild(this.firstChild);
42
38
  }
@@ -62,29 +58,22 @@ class NxLayout extends HTMLElement {
62
58
  for (let row = 0; row < numRows; row++) {
63
59
  const numColumns = columnsLayout[row];
64
60
 
61
+ // Flexbox를 사용하는 행 래퍼 생성
65
62
  const rowWrapper = document.createElement('div');
66
- rowWrapper.style.display = 'grid';
63
+ rowWrapper.style.display = 'flex';
67
64
  rowWrapper.style.height = '100%';
68
-
69
- let columnTemplate = '';
70
- for (let i = 0; i < numColumns; i++) {
71
- columnTemplate += '1fr ';
72
- if (i < numColumns - 1) {
73
- columnTemplate += '8px ';
74
- }
75
- }
76
- rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
65
+ //rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
77
66
 
78
67
  for (let col = 0; col < numColumns; col++) {
79
68
  if (children[childIndex]) {
80
69
  const panel = children[childIndex];
70
+ panel.style.flex = '1'; // Flexbox 환경에 맞게 flex 속성 추가
81
71
  rowWrapper.appendChild(panel);
82
72
  childIndex++;
83
73
  }
84
74
  if (col < numColumns - 1) {
85
75
  const splitter = document.createElement('nx-splitter');
86
- //splitter.setAttribute('direction', 'horizontal');
87
- splitter.classList.add('h');
76
+ splitter.setAttribute('direction', 'horizontal');
88
77
  rowWrapper.appendChild(splitter);
89
78
  }
90
79
  }
@@ -93,9 +82,7 @@ class NxLayout extends HTMLElement {
93
82
 
94
83
  if (row < numRows - 1) {
95
84
  const splitter = document.createElement('nx-splitter');
96
- //splitter.setAttribute('class', 'v');
97
- //splitter.classList.remove('h');
98
- splitter.classList.add('v');
85
+ splitter.setAttribute('direction', 'vertical');
99
86
  this.appendChild(splitter);
100
87
  }
101
88
  }
package/dist/nx/nxSplitter.js CHANGED
@@ -20,11 +20,9 @@ class nxSplitter extends HTMLElement {
20
20
  const nextRect = next?.getBoundingClientRect();
21
21
 
22
22
  if (this.classList.contains('h')) {
23
- console.log("hhhhhhh")
24
23
  this.#mode = "h";
25
24
  }
26
25
  else if (this.classList.contains('v')) {
27
- console.log("vvvvv")
28
26
  this.#mode = "v";
29
27
  }
30
28
  else {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1010.0",
4
+ "version": "6.1012.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxLayout.js CHANGED
@@ -31,12 +31,8 @@ class NxLayout extends HTMLElement {
31
31
 
32
32
  #render() {
33
33
  const children = this.#originalChildren;
34
+ if (!children || children.length === 0) return;
34
35
 
35
- if (children.length === 0) return;
36
-
37
- console.log("=============================", children)
38
-
39
- // 기존 자식 노드를 모두 제거하여 초기화
40
36
  while (this.firstChild) {
41
37
  this.removeChild(this.firstChild);
42
38
  }
@@ -62,29 +58,22 @@ class NxLayout extends HTMLElement {
62
58
  for (let row = 0; row < numRows; row++) {
63
59
  const numColumns = columnsLayout[row];
64
60
 
61
+ // Flexbox를 사용하는 행 래퍼 생성
65
62
  const rowWrapper = document.createElement('div');
66
- rowWrapper.style.display = 'grid';
63
+ rowWrapper.style.display = 'flex';
67
64
  rowWrapper.style.height = '100%';
68
-
69
- let columnTemplate = '';
70
- for (let i = 0; i < numColumns; i++) {
71
- columnTemplate += '1fr ';
72
- if (i < numColumns - 1) {
73
- columnTemplate += '8px ';
74
- }
75
- }
76
- rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
65
+ //rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
77
66
 
78
67
  for (let col = 0; col < numColumns; col++) {
79
68
  if (children[childIndex]) {
80
69
  const panel = children[childIndex];
70
+ panel.style.flex = '1'; // Flexbox 환경에 맞게 flex 속성 추가
81
71
  rowWrapper.appendChild(panel);
82
72
  childIndex++;
83
73
  }
84
74
  if (col < numColumns - 1) {
85
75
  const splitter = document.createElement('nx-splitter');
86
- //splitter.setAttribute('direction', 'horizontal');
87
- splitter.classList.add('h');
76
+ splitter.setAttribute('direction', 'horizontal');
88
77
  rowWrapper.appendChild(splitter);
89
78
  }
90
79
  }
@@ -93,9 +82,7 @@ class NxLayout extends HTMLElement {
93
82
 
94
83
  if (row < numRows - 1) {
95
84
  const splitter = document.createElement('nx-splitter');
96
- //splitter.setAttribute('class', 'v');
97
- //splitter.classList.remove('h');
98
- splitter.classList.add('v');
85
+ splitter.setAttribute('direction', 'vertical');
99
86
  this.appendChild(splitter);
100
87
  }
101
88
  }
package/src/nx/nxSplitter.js CHANGED
@@ -20,11 +20,9 @@ class nxSplitter extends HTMLElement {
20
20
  const nextRect = next?.getBoundingClientRect();
21
21
 
22
22
  if (this.classList.contains('h')) {
23
- console.log("hhhhhhh")
24
23
  this.#mode = "h";
25
24
  }
26
25
  else if (this.classList.contains('v')) {
27
- console.log("vvvvv")
28
26
  this.#mode = "v";
29
27
  }
30
28
  else {