ninegrid2 6.887.0 → 6.889.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 +25 -15
  2. package/dist/bundle.esm.js +25 -15
  3. package/dist/nx/nxTab.js +25 -15
  4. package/package.json +1 -1
  5. package/src/nx/nxTab.js +25 -15
package/dist/bundle.cjs.js CHANGED
@@ -121075,7 +121075,26 @@ class nxTab extends HTMLElement {
121075
121075
  }
121076
121076
 
121077
121077
  initialize = () => {
121078
+ this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
121079
+ el.classList.remove("active");
121080
+ });
121081
+
121082
+ const activeButton = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
121083
+
121084
+ if (activeButton) {
121085
+ activeButton.click(); // 자동으로 탭 전환
121086
+ }
121087
+
121088
+ /**
121089
+ const activeTab = this.shadowRoot.querySelector('.tab-button.active');
121078
121090
 
121091
+ // 현재 탭이 숨겨졌다면 첫 번째 visible 탭으로 이동
121092
+ if (activeTab && activeTab.style.display === 'none') {
121093
+ const nextVisibleTab = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
121094
+ if (nextVisibleTab) {
121095
+ nextVisibleTab.click(); // 자동으로 탭 전환
121096
+ }
121097
+ }*/
121079
121098
  }
121080
121099
 
121081
121100
  #renderTabs() {
@@ -121083,21 +121102,6 @@ class nxTab extends HTMLElement {
121083
121102
  const contents = this.shadowRoot.querySelector('.tab-pages');
121084
121103
  const tabItems = this.querySelectorAll('nx-tab-page');
121085
121104
 
121086
- /**
121087
- tabItems.forEach((item, index) => {
121088
- const tab = document.createElement('div');
121089
- tab.classList.add('tab-button');
121090
- tab.textContent = item.getAttribute('caption');
121091
- tab.setAttribute('data-target', `content${index}`);
121092
- tabs.appendChild(tab);
121093
-
121094
- const content = document.createElement('div');
121095
- content.id = `content${index}`;
121096
- content.classList.add('tab-page');
121097
- content.innerHTML = item.innerHTML;
121098
- contents.appendChild(content);
121099
- }); */
121100
-
121101
121105
  tabItems.forEach((item, index) => {
121102
121106
  const tab = document.createElement('div');
121103
121107
  tab.classList.add('tab-button');
@@ -121119,6 +121123,9 @@ class nxTab extends HTMLElement {
121119
121123
 
121120
121124
  #switchTab(event) {
121121
121125
  const target = event.target;
121126
+
121127
+ console.log(event);
121128
+
121122
121129
  if (!target.classList.contains('tab-button')) return;
121123
121130
 
121124
121131
  const targetId = target.getAttribute('data-target');
@@ -121126,7 +121133,10 @@ class nxTab extends HTMLElement {
121126
121133
  const activeContent = this.shadowRoot.querySelector('.tab-page.active');
121127
121134
  const newContent = this.shadowRoot.getElementById(targetId);
121128
121135
 
121136
+ console.log(targetId, activeTab, activeContent, newContent);
121137
+
121129
121138
  if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
121139
+ console.log("*******");
121130
121140
 
121131
121141
  if (activeTab && activeContent) {
121132
121142
  activeTab.classList.remove('active');
package/dist/bundle.esm.js CHANGED
@@ -121071,7 +121071,26 @@ class nxTab extends HTMLElement {
121071
121071
  }
121072
121072
 
121073
121073
  initialize = () => {
121074
+ this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
121075
+ el.classList.remove("active");
121076
+ });
121077
+
121078
+ const activeButton = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
121079
+
121080
+ if (activeButton) {
121081
+ activeButton.click(); // 자동으로 탭 전환
121082
+ }
121083
+
121084
+ /**
121085
+ const activeTab = this.shadowRoot.querySelector('.tab-button.active');
121074
121086
 
121087
+ // 현재 탭이 숨겨졌다면 첫 번째 visible 탭으로 이동
121088
+ if (activeTab && activeTab.style.display === 'none') {
121089
+ const nextVisibleTab = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
121090
+ if (nextVisibleTab) {
121091
+ nextVisibleTab.click(); // 자동으로 탭 전환
121092
+ }
121093
+ }*/
121075
121094
  }
121076
121095
 
121077
121096
  #renderTabs() {
@@ -121079,21 +121098,6 @@ class nxTab extends HTMLElement {
121079
121098
  const contents = this.shadowRoot.querySelector('.tab-pages');
121080
121099
  const tabItems = this.querySelectorAll('nx-tab-page');
121081
121100
 
121082
- /**
121083
- tabItems.forEach((item, index) => {
121084
- const tab = document.createElement('div');
121085
- tab.classList.add('tab-button');
121086
- tab.textContent = item.getAttribute('caption');
121087
- tab.setAttribute('data-target', `content${index}`);
121088
- tabs.appendChild(tab);
121089
-
121090
- const content = document.createElement('div');
121091
- content.id = `content${index}`;
121092
- content.classList.add('tab-page');
121093
- content.innerHTML = item.innerHTML;
121094
- contents.appendChild(content);
121095
- }); */
121096
-
121097
121101
  tabItems.forEach((item, index) => {
121098
121102
  const tab = document.createElement('div');
121099
121103
  tab.classList.add('tab-button');
@@ -121115,6 +121119,9 @@ class nxTab extends HTMLElement {
121115
121119
 
121116
121120
  #switchTab(event) {
121117
121121
  const target = event.target;
121122
+
121123
+ console.log(event);
121124
+
121118
121125
  if (!target.classList.contains('tab-button')) return;
121119
121126
 
121120
121127
  const targetId = target.getAttribute('data-target');
@@ -121122,7 +121129,10 @@ class nxTab extends HTMLElement {
121122
121129
  const activeContent = this.shadowRoot.querySelector('.tab-page.active');
121123
121130
  const newContent = this.shadowRoot.getElementById(targetId);
121124
121131
 
121132
+ console.log(targetId, activeTab, activeContent, newContent);
121133
+
121125
121134
  if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
121135
+ console.log("*******");
121126
121136
 
121127
121137
  if (activeTab && activeContent) {
121128
121138
  activeTab.classList.remove('active');
package/dist/nx/nxTab.js CHANGED
@@ -52,7 +52,26 @@ class nxTab extends HTMLElement {
52
52
  }
53
53
 
54
54
  initialize = () => {
55
+ this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
56
+ el.classList.remove("active");
57
+ });
58
+
59
+ const activeButton = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
60
+
61
+ if (activeButton) {
62
+ activeButton.click(); // 자동으로 탭 전환
63
+ }
64
+
65
+ /**
66
+ const activeTab = this.shadowRoot.querySelector('.tab-button.active');
55
67
 
68
+ // 현재 탭이 숨겨졌다면 첫 번째 visible 탭으로 이동
69
+ if (activeTab && activeTab.style.display === 'none') {
70
+ const nextVisibleTab = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
71
+ if (nextVisibleTab) {
72
+ nextVisibleTab.click(); // 자동으로 탭 전환
73
+ }
74
+ }*/
56
75
  }
57
76
 
58
77
  #renderTabs() {
@@ -60,21 +79,6 @@ class nxTab extends HTMLElement {
60
79
  const contents = this.shadowRoot.querySelector('.tab-pages');
61
80
  const tabItems = this.querySelectorAll('nx-tab-page');
62
81
 
63
- /**
64
- tabItems.forEach((item, index) => {
65
- const tab = document.createElement('div');
66
- tab.classList.add('tab-button');
67
- tab.textContent = item.getAttribute('caption');
68
- tab.setAttribute('data-target', `content${index}`);
69
- tabs.appendChild(tab);
70
-
71
- const content = document.createElement('div');
72
- content.id = `content${index}`;
73
- content.classList.add('tab-page');
74
- content.innerHTML = item.innerHTML;
75
- contents.appendChild(content);
76
- }); */
77
-
78
82
  tabItems.forEach((item, index) => {
79
83
  const tab = document.createElement('div');
80
84
  tab.classList.add('tab-button');
@@ -96,6 +100,9 @@ class nxTab extends HTMLElement {
96
100
 
97
101
  #switchTab(event) {
98
102
  const target = event.target;
103
+
104
+ console.log(event);
105
+
99
106
  if (!target.classList.contains('tab-button')) return;
100
107
 
101
108
  const targetId = target.getAttribute('data-target');
@@ -103,7 +110,10 @@ class nxTab extends HTMLElement {
103
110
  const activeContent = this.shadowRoot.querySelector('.tab-page.active');
104
111
  const newContent = this.shadowRoot.getElementById(targetId);
105
112
 
113
+ console.log(targetId, activeTab, activeContent, newContent);
114
+
106
115
  if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
116
+ console.log("*******");
107
117
 
108
118
  if (activeTab && activeContent) {
109
119
  activeTab.classList.remove('active');
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.887.0",
4
+ "version": "6.889.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxTab.js CHANGED
@@ -52,7 +52,26 @@ class nxTab extends HTMLElement {
52
52
  }
53
53
 
54
54
  initialize = () => {
55
+ this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
56
+ el.classList.remove("active");
57
+ });
58
+
59
+ const activeButton = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
60
+
61
+ if (activeButton) {
62
+ activeButton.click(); // 자동으로 탭 전환
63
+ }
64
+
65
+ /**
66
+ const activeTab = this.shadowRoot.querySelector('.tab-button.active');
55
67
 
68
+ // 현재 탭이 숨겨졌다면 첫 번째 visible 탭으로 이동
69
+ if (activeTab && activeTab.style.display === 'none') {
70
+ const nextVisibleTab = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
71
+ if (nextVisibleTab) {
72
+ nextVisibleTab.click(); // 자동으로 탭 전환
73
+ }
74
+ }*/
56
75
  }
57
76
 
58
77
  #renderTabs() {
@@ -60,21 +79,6 @@ class nxTab extends HTMLElement {
60
79
  const contents = this.shadowRoot.querySelector('.tab-pages');
61
80
  const tabItems = this.querySelectorAll('nx-tab-page');
62
81
 
63
- /**
64
- tabItems.forEach((item, index) => {
65
- const tab = document.createElement('div');
66
- tab.classList.add('tab-button');
67
- tab.textContent = item.getAttribute('caption');
68
- tab.setAttribute('data-target', `content${index}`);
69
- tabs.appendChild(tab);
70
-
71
- const content = document.createElement('div');
72
- content.id = `content${index}`;
73
- content.classList.add('tab-page');
74
- content.innerHTML = item.innerHTML;
75
- contents.appendChild(content);
76
- }); */
77
-
78
82
  tabItems.forEach((item, index) => {
79
83
  const tab = document.createElement('div');
80
84
  tab.classList.add('tab-button');
@@ -96,6 +100,9 @@ class nxTab extends HTMLElement {
96
100
 
97
101
  #switchTab(event) {
98
102
  const target = event.target;
103
+
104
+ console.log(event);
105
+
99
106
  if (!target.classList.contains('tab-button')) return;
100
107
 
101
108
  const targetId = target.getAttribute('data-target');
@@ -103,7 +110,10 @@ class nxTab extends HTMLElement {
103
110
  const activeContent = this.shadowRoot.querySelector('.tab-page.active');
104
111
  const newContent = this.shadowRoot.getElementById(targetId);
105
112
 
113
+ console.log(targetId, activeTab, activeContent, newContent);
114
+
106
115
  if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
116
+ console.log("*******");
107
117
 
108
118
  if (activeTab && activeContent) {
109
119
  activeTab.classList.remove('active');