ninegrid2 6.770.0 → 6.772.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 +12 -3
  2. package/dist/bundle.esm.js +12 -3
  3. package/dist/nx/nxCollapse.js +12 -3
  4. package/package.json +1 -1
  5. package/src/nx/nxCollapse.js +12 -3
package/dist/bundle.cjs.js CHANGED
@@ -120847,6 +120847,7 @@ customElements.define("nx-div", nxDiv);
120847
120847
 
120848
120848
  class nxCollapse extends HTMLElement {
120849
120849
  #target;
120850
+ #targetPrevDisplay;
120850
120851
 
120851
120852
  constructor() {
120852
120853
  super();
@@ -120878,8 +120879,7 @@ class nxCollapse extends HTMLElement {
120878
120879
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
120879
120880
 
120880
120881
  if (this.#target && this.#target) {
120881
- const collapseBtn = document.createElement("button");
120882
- collapseBtn.textContent = "📥 접기";
120882
+ const collapseBtn = document.createElement("span");
120883
120883
  collapseBtn.className = "collapse-toggle";
120884
120884
  Object.assign(collapseBtn.style, {
120885
120885
  position: "absolute",
@@ -120898,8 +120898,17 @@ class nxCollapse extends HTMLElement {
120898
120898
  const shadowRoot = this.#target.shadowRoot;
120899
120899
  (shadowRoot || this.#target).appendChild(collapseBtn);
120900
120900
 
120901
+ const style = document.createElement("style");
120902
+ style.textContent = `
120903
+ .collapse-toggle:hover {
120904
+ border: 1px solid red;
120905
+ }
120906
+ `;
120907
+ if (shadowRoot) shadowRoot.appendChild(style);
120908
+
120901
120909
  // collapse 시 target 숨기고 복원 버튼 등장
120902
120910
  collapseBtn.addEventListener("click", () => {
120911
+ this.#targetPrevDisplay = this.#target.style.display;
120903
120912
  this.#target.style.display = "none";
120904
120913
  this.style.display = "inline-block";
120905
120914
  });
@@ -120907,7 +120916,7 @@ class nxCollapse extends HTMLElement {
120907
120916
 
120908
120917
  // 복원 시 target 보이고 복원 버튼 사라짐
120909
120918
  this.addEventListener("click", () => {
120910
- this.#target.style.display = "";
120919
+ this.#target.style.display = this.#targetPrevDisplay;
120911
120920
  this.style.display = "none";
120912
120921
  });
120913
120922
  }
package/dist/bundle.esm.js CHANGED
@@ -120843,6 +120843,7 @@ customElements.define("nx-div", nxDiv);
120843
120843
 
120844
120844
  class nxCollapse extends HTMLElement {
120845
120845
  #target;
120846
+ #targetPrevDisplay;
120846
120847
 
120847
120848
  constructor() {
120848
120849
  super();
@@ -120874,8 +120875,7 @@ class nxCollapse extends HTMLElement {
120874
120875
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
120875
120876
 
120876
120877
  if (this.#target && this.#target) {
120877
- const collapseBtn = document.createElement("button");
120878
- collapseBtn.textContent = "📥 접기";
120878
+ const collapseBtn = document.createElement("span");
120879
120879
  collapseBtn.className = "collapse-toggle";
120880
120880
  Object.assign(collapseBtn.style, {
120881
120881
  position: "absolute",
@@ -120894,8 +120894,17 @@ class nxCollapse extends HTMLElement {
120894
120894
  const shadowRoot = this.#target.shadowRoot;
120895
120895
  (shadowRoot || this.#target).appendChild(collapseBtn);
120896
120896
 
120897
+ const style = document.createElement("style");
120898
+ style.textContent = `
120899
+ .collapse-toggle:hover {
120900
+ border: 1px solid red;
120901
+ }
120902
+ `;
120903
+ if (shadowRoot) shadowRoot.appendChild(style);
120904
+
120897
120905
  // collapse 시 target 숨기고 복원 버튼 등장
120898
120906
  collapseBtn.addEventListener("click", () => {
120907
+ this.#targetPrevDisplay = this.#target.style.display;
120899
120908
  this.#target.style.display = "none";
120900
120909
  this.style.display = "inline-block";
120901
120910
  });
@@ -120903,7 +120912,7 @@ class nxCollapse extends HTMLElement {
120903
120912
 
120904
120913
  // 복원 시 target 보이고 복원 버튼 사라짐
120905
120914
  this.addEventListener("click", () => {
120906
- this.#target.style.display = "";
120915
+ this.#target.style.display = this.#targetPrevDisplay;
120907
120916
  this.style.display = "none";
120908
120917
  });
120909
120918
  }
package/dist/nx/nxCollapse.js CHANGED
@@ -2,6 +2,7 @@ import ninegrid from "../index.js";
2
2
 
3
3
  class nxCollapse extends HTMLElement {
4
4
  #target;
5
+ #targetPrevDisplay;
5
6
 
6
7
  constructor() {
7
8
  super();
@@ -33,8 +34,7 @@ class nxCollapse extends HTMLElement {
33
34
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
34
35
 
35
36
  if (this.#target && this.#target) {
36
- const collapseBtn = document.createElement("button");
37
- collapseBtn.textContent = "📥 접기";
37
+ const collapseBtn = document.createElement("span");
38
38
  collapseBtn.className = "collapse-toggle";
39
39
  Object.assign(collapseBtn.style, {
40
40
  position: "absolute",
@@ -53,8 +53,17 @@ class nxCollapse extends HTMLElement {
53
53
  const shadowRoot = this.#target.shadowRoot;
54
54
  (shadowRoot || this.#target).appendChild(collapseBtn);
55
55
 
56
+ const style = document.createElement("style");
57
+ style.textContent = `
58
+ .collapse-toggle:hover {
59
+ border: 1px solid red;
60
+ }
61
+ `;
62
+ if (shadowRoot) shadowRoot.appendChild(style);
63
+
56
64
  // collapse 시 target 숨기고 복원 버튼 등장
57
65
  collapseBtn.addEventListener("click", () => {
66
+ this.#targetPrevDisplay = this.#target.style.display;
58
67
  this.#target.style.display = "none";
59
68
  this.style.display = "inline-block";
60
69
  });
@@ -62,7 +71,7 @@ class nxCollapse extends HTMLElement {
62
71
 
63
72
  // 복원 시 target 보이고 복원 버튼 사라짐
64
73
  this.addEventListener("click", () => {
65
- this.#target.style.display = "";
74
+ this.#target.style.display = this.#targetPrevDisplay;
66
75
  this.style.display = "none";
67
76
  });
68
77
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.770.0",
4
+ "version": "6.772.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxCollapse.js CHANGED
@@ -2,6 +2,7 @@ import ninegrid from "../index.js";
2
2
 
3
3
  class nxCollapse extends HTMLElement {
4
4
  #target;
5
+ #targetPrevDisplay;
5
6
 
6
7
  constructor() {
7
8
  super();
@@ -33,8 +34,7 @@ class nxCollapse extends HTMLElement {
33
34
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
34
35
 
35
36
  if (this.#target && this.#target) {
36
- const collapseBtn = document.createElement("button");
37
- collapseBtn.textContent = "📥 접기";
37
+ const collapseBtn = document.createElement("span");
38
38
  collapseBtn.className = "collapse-toggle";
39
39
  Object.assign(collapseBtn.style, {
40
40
  position: "absolute",
@@ -53,8 +53,17 @@ class nxCollapse extends HTMLElement {
53
53
  const shadowRoot = this.#target.shadowRoot;
54
54
  (shadowRoot || this.#target).appendChild(collapseBtn);
55
55
 
56
+ const style = document.createElement("style");
57
+ style.textContent = `
58
+ .collapse-toggle:hover {
59
+ border: 1px solid red;
60
+ }
61
+ `;
62
+ if (shadowRoot) shadowRoot.appendChild(style);
63
+
56
64
  // collapse 시 target 숨기고 복원 버튼 등장
57
65
  collapseBtn.addEventListener("click", () => {
66
+ this.#targetPrevDisplay = this.#target.style.display;
58
67
  this.#target.style.display = "none";
59
68
  this.style.display = "inline-block";
60
69
  });
@@ -62,7 +71,7 @@ class nxCollapse extends HTMLElement {
62
71
 
63
72
  // 복원 시 target 보이고 복원 버튼 사라짐
64
73
  this.addEventListener("click", () => {
65
- this.#target.style.display = "";
74
+ this.#target.style.display = this.#targetPrevDisplay;
66
75
  this.style.display = "none";
67
76
  });
68
77
  }