ninegrid2 6.936.0 → 6.938.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 +24 -24
  2. package/dist/bundle.esm.js +24 -24
  3. package/dist/nx/nxTitle.js +23 -11
  4. package/package.json +1 -1
  5. package/src/nx/nxTitle.js +23 -11
package/dist/bundle.cjs.js CHANGED
@@ -121719,24 +121719,29 @@ class nxTitle extends HTMLElement {
121719
121719
 
121720
121720
  // Breadcrumb 경로를 구성하는 비공개 메서드
121721
121721
  #generateBreadcrumb = (activeMenuItem) => {
121722
- const path = ["Home"]; // 기본 경로 시작은 Home
121722
+ this.#breadcrumbPath = [{
121723
+ path: "/",
121724
+ caption: "Home",
121725
+ }];
121723
121726
 
121724
121727
  // 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
121725
- const currentPageCaption = this.getAttribute("caption") || "Current Page";
121728
+ this.getAttribute("caption") || "Current Page";
121726
121729
 
121727
121730
  // 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
121728
121731
  //const activeMenuItem = ninegrid.querySelector('nx-side-menu-item.active');
121729
121732
  //console.log(activeMenuItem);
121730
121733
 
121731
121734
  if (activeMenuItem) {
121732
- const tempPath = []; // 임시 경로를 저장하여 역순으로 처리
121733
121735
 
121734
121736
  // 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
121735
121737
  const currentActiveCaption = activeMenuItem.caption;//activeMenuItem.caption;
121736
121738
  console.log("nxTitle", activeMenuItem.caption);
121737
121739
 
121738
121740
  if (currentActiveCaption) {
121739
- tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
121741
+ this.#breadcrumbPath.unshift({
121742
+ path: activeMenuItem.getAttribute("href"),
121743
+ caption: currentActiveCaption,
121744
+ });
121740
121745
  }
121741
121746
 
121742
121747
  // 2. 현재 activeMenuItem의 이전 형제들을 탐색하여 'group'이 아닌 상위 메뉴(예: '심의자료')를 찾고,
@@ -121760,7 +121765,10 @@ console.log(currentElement);
121760
121765
  // 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
121761
121766
  if (currentElement.getAttribute('type') === "group") {
121762
121767
  if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
121763
- tempPath.unshift(caption);
121768
+ this.#breadcrumbPath.unshift({
121769
+ path: currentElement.getAttribute("href"),
121770
+ caption: caption,
121771
+ });
121764
121772
  foundGroupParent = true;
121765
121773
  }
121766
121774
  // 그룹을 찾으면 탐색 중단 (가장 가까운 상위 그룹만 필요)
@@ -121768,17 +121776,9 @@ console.log(currentElement);
121768
121776
  }
121769
121777
  }
121770
121778
  }
121771
-
121772
- // tempPath의 내용을 Home 다음으로 삽입
121773
- // activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
121774
- // tempPath: ['자료관리', '심의자료']
121775
- path.push(...tempPath);
121776
121779
  }
121777
-
121778
- // 마지막으로 현재 페이지의 구체적인 제목 추가
121779
- path.push(currentPageCaption);
121780
- console.log(path);
121781
- this.#breadcrumbPath = path;
121780
+ console.log(this.#breadcrumbPath);
121781
+ //this.#breadcrumbPath = path;
121782
121782
  //this.#renderer();
121783
121783
  };
121784
121784
 
@@ -121796,24 +121796,24 @@ console.log(path);
121796
121796
 
121797
121797
  const htmlTmpl = document.createElement("template");
121798
121798
  htmlTmpl.innerHTML = `
121799
- <style>
121800
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
121801
- ${ninegrid.getCustomPath(this,"nxTitle.css")}
121802
- </style>
121799
+ <style>
121800
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
121801
+ ${ninegrid.getCustomPath(this,"nxTitle.css")}
121802
+ </style>
121803
121803
 
121804
121804
  <div class="wrapper">
121805
+ <div class="title-wrapper">
121806
+ <i class="title-icon"></i>
121807
+ <span class="title-text">${caption}</span>
121808
+ </div>
121805
121809
  <div class="breadcrumb-container">
121806
121810
  ${this.#breadcrumbPath.map((item, index) => `
121807
121811
  <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
121808
- ${item}
121812
+ ${item.caption}
121809
121813
  </span>
121810
121814
  ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
121811
121815
  `).join('')}
121812
121816
  </div>
121813
- <div class="title-wrapper">
121814
- <i class="title-icon"></i>
121815
- <span class="title-text">${caption}</span>
121816
- </div>
121817
121817
  </div>
121818
121818
  `;
121819
121819
 
package/dist/bundle.esm.js CHANGED
@@ -121715,24 +121715,29 @@ class nxTitle extends HTMLElement {
121715
121715
 
121716
121716
  // Breadcrumb 경로를 구성하는 비공개 메서드
121717
121717
  #generateBreadcrumb = (activeMenuItem) => {
121718
- const path = ["Home"]; // 기본 경로 시작은 Home
121718
+ this.#breadcrumbPath = [{
121719
+ path: "/",
121720
+ caption: "Home",
121721
+ }];
121719
121722
 
121720
121723
  // 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
121721
- const currentPageCaption = this.getAttribute("caption") || "Current Page";
121724
+ this.getAttribute("caption") || "Current Page";
121722
121725
 
121723
121726
  // 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
121724
121727
  //const activeMenuItem = ninegrid.querySelector('nx-side-menu-item.active');
121725
121728
  //console.log(activeMenuItem);
121726
121729
 
121727
121730
  if (activeMenuItem) {
121728
- const tempPath = []; // 임시 경로를 저장하여 역순으로 처리
121729
121731
 
121730
121732
  // 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
121731
121733
  const currentActiveCaption = activeMenuItem.caption;//activeMenuItem.caption;
121732
121734
  console.log("nxTitle", activeMenuItem.caption);
121733
121735
 
121734
121736
  if (currentActiveCaption) {
121735
- tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
121737
+ this.#breadcrumbPath.unshift({
121738
+ path: activeMenuItem.getAttribute("href"),
121739
+ caption: currentActiveCaption,
121740
+ });
121736
121741
  }
121737
121742
 
121738
121743
  // 2. 현재 activeMenuItem의 이전 형제들을 탐색하여 'group'이 아닌 상위 메뉴(예: '심의자료')를 찾고,
@@ -121756,7 +121761,10 @@ console.log(currentElement);
121756
121761
  // 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
121757
121762
  if (currentElement.getAttribute('type') === "group") {
121758
121763
  if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
121759
- tempPath.unshift(caption);
121764
+ this.#breadcrumbPath.unshift({
121765
+ path: currentElement.getAttribute("href"),
121766
+ caption: caption,
121767
+ });
121760
121768
  foundGroupParent = true;
121761
121769
  }
121762
121770
  // 그룹을 찾으면 탐색 중단 (가장 가까운 상위 그룹만 필요)
@@ -121764,17 +121772,9 @@ console.log(currentElement);
121764
121772
  }
121765
121773
  }
121766
121774
  }
121767
-
121768
- // tempPath의 내용을 Home 다음으로 삽입
121769
- // activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
121770
- // tempPath: ['자료관리', '심의자료']
121771
- path.push(...tempPath);
121772
121775
  }
121773
-
121774
- // 마지막으로 현재 페이지의 구체적인 제목 추가
121775
- path.push(currentPageCaption);
121776
- console.log(path);
121777
- this.#breadcrumbPath = path;
121776
+ console.log(this.#breadcrumbPath);
121777
+ //this.#breadcrumbPath = path;
121778
121778
  //this.#renderer();
121779
121779
  };
121780
121780
 
@@ -121792,24 +121792,24 @@ console.log(path);
121792
121792
 
121793
121793
  const htmlTmpl = document.createElement("template");
121794
121794
  htmlTmpl.innerHTML = `
121795
- <style>
121796
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
121797
- ${ninegrid.getCustomPath(this,"nxTitle.css")}
121798
- </style>
121795
+ <style>
121796
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
121797
+ ${ninegrid.getCustomPath(this,"nxTitle.css")}
121798
+ </style>
121799
121799
 
121800
121800
  <div class="wrapper">
121801
+ <div class="title-wrapper">
121802
+ <i class="title-icon"></i>
121803
+ <span class="title-text">${caption}</span>
121804
+ </div>
121801
121805
  <div class="breadcrumb-container">
121802
121806
  ${this.#breadcrumbPath.map((item, index) => `
121803
121807
  <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
121804
- ${item}
121808
+ ${item.caption}
121805
121809
  </span>
121806
121810
  ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
121807
121811
  `).join('')}
121808
121812
  </div>
121809
- <div class="title-wrapper">
121810
- <i class="title-icon"></i>
121811
- <span class="title-text">${caption}</span>
121812
- </div>
121813
121813
  </div>
121814
121814
  `;
121815
121815
 
package/dist/nx/nxTitle.js CHANGED
@@ -39,6 +39,10 @@ class nxTitle extends HTMLElement {
39
39
  // Breadcrumb 경로를 구성하는 비공개 메서드
40
40
  #generateBreadcrumb = (activeMenuItem) => {
41
41
  const path = ["Home"]; // 기본 경로 시작은 Home
42
+ this.#breadcrumbPath = [{
43
+ path: "/",
44
+ caption: "Home",
45
+ }];
42
46
 
43
47
  // 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
44
48
  const currentPageCaption = this.getAttribute("caption") || "Current Page";
@@ -56,6 +60,10 @@ class nxTitle extends HTMLElement {
56
60
 
57
61
  if (currentActiveCaption) {
58
62
  tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
63
+ this.#breadcrumbPath.unshift({
64
+ path: activeMenuItem.getAttribute("href"),
65
+ caption: currentActiveCaption,
66
+ });
59
67
  }
60
68
 
61
69
  // 2. 현재 activeMenuItem의 이전 형제들을 탐색하여 'group'이 아닌 상위 메뉴(예: '심의자료')를 찾고,
@@ -81,6 +89,10 @@ console.log(currentElement);
81
89
  if (currentElement.getAttribute('type') === "group") {
82
90
  if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
83
91
  tempPath.unshift(caption);
92
+ this.#breadcrumbPath.unshift({
93
+ path: currentElement.getAttribute("href"),
94
+ caption: caption,
95
+ });
84
96
  foundGroupParent = true;
85
97
  }
86
98
  // 그룹을 찾으면 탐색 중단 (가장 가까운 상위 그룹만 필요)
@@ -112,8 +124,8 @@ console.log(currentElement);
112
124
 
113
125
  // 마지막으로 현재 페이지의 구체적인 제목 추가
114
126
  path.push(currentPageCaption);
115
- console.log(path);
116
- this.#breadcrumbPath = path;
127
+ console.log(this.#breadcrumbPath);
128
+ //this.#breadcrumbPath = path;
117
129
  //this.#renderer();
118
130
  };
119
131
 
@@ -131,24 +143,24 @@ console.log(path);
131
143
 
132
144
  const htmlTmpl = document.createElement("template");
133
145
  htmlTmpl.innerHTML = `
134
- <style>
135
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
136
- ${ninegrid.getCustomPath(this,"nxTitle.css")}
137
- </style>
146
+ <style>
147
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
148
+ ${ninegrid.getCustomPath(this,"nxTitle.css")}
149
+ </style>
138
150
 
139
151
  <div class="wrapper">
152
+ <div class="title-wrapper">
153
+ <i class="title-icon"></i>
154
+ <span class="title-text">${caption}</span>
155
+ </div>
140
156
  <div class="breadcrumb-container">
141
157
  ${this.#breadcrumbPath.map((item, index) => `
142
158
  <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
143
- ${item}
159
+ ${item.caption}
144
160
  </span>
145
161
  ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
146
162
  `).join('')}
147
163
  </div>
148
- <div class="title-wrapper">
149
- <i class="title-icon"></i>
150
- <span class="title-text">${caption}</span>
151
- </div>
152
164
  </div>
153
165
  `;
154
166
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.936.0",
4
+ "version": "6.938.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxTitle.js CHANGED
@@ -39,6 +39,10 @@ class nxTitle extends HTMLElement {
39
39
  // Breadcrumb 경로를 구성하는 비공개 메서드
40
40
  #generateBreadcrumb = (activeMenuItem) => {
41
41
  const path = ["Home"]; // 기본 경로 시작은 Home
42
+ this.#breadcrumbPath = [{
43
+ path: "/",
44
+ caption: "Home",
45
+ }];
42
46
 
43
47
  // 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
44
48
  const currentPageCaption = this.getAttribute("caption") || "Current Page";
@@ -56,6 +60,10 @@ class nxTitle extends HTMLElement {
56
60
 
57
61
  if (currentActiveCaption) {
58
62
  tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
63
+ this.#breadcrumbPath.unshift({
64
+ path: activeMenuItem.getAttribute("href"),
65
+ caption: currentActiveCaption,
66
+ });
59
67
  }
60
68
 
61
69
  // 2. 현재 activeMenuItem의 이전 형제들을 탐색하여 'group'이 아닌 상위 메뉴(예: '심의자료')를 찾고,
@@ -81,6 +89,10 @@ console.log(currentElement);
81
89
  if (currentElement.getAttribute('type') === "group") {
82
90
  if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
83
91
  tempPath.unshift(caption);
92
+ this.#breadcrumbPath.unshift({
93
+ path: currentElement.getAttribute("href"),
94
+ caption: caption,
95
+ });
84
96
  foundGroupParent = true;
85
97
  }
86
98
  // 그룹을 찾으면 탐색 중단 (가장 가까운 상위 그룹만 필요)
@@ -112,8 +124,8 @@ console.log(currentElement);
112
124
 
113
125
  // 마지막으로 현재 페이지의 구체적인 제목 추가
114
126
  path.push(currentPageCaption);
115
- console.log(path);
116
- this.#breadcrumbPath = path;
127
+ console.log(this.#breadcrumbPath);
128
+ //this.#breadcrumbPath = path;
117
129
  //this.#renderer();
118
130
  };
119
131
 
@@ -131,24 +143,24 @@ console.log(path);
131
143
 
132
144
  const htmlTmpl = document.createElement("template");
133
145
  htmlTmpl.innerHTML = `
134
- <style>
135
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
136
- ${ninegrid.getCustomPath(this,"nxTitle.css")}
137
- </style>
146
+ <style>
147
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
148
+ ${ninegrid.getCustomPath(this,"nxTitle.css")}
149
+ </style>
138
150
 
139
151
  <div class="wrapper">
152
+ <div class="title-wrapper">
153
+ <i class="title-icon"></i>
154
+ <span class="title-text">${caption}</span>
155
+ </div>
140
156
  <div class="breadcrumb-container">
141
157
  ${this.#breadcrumbPath.map((item, index) => `
142
158
  <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
143
- ${item}
159
+ ${item.caption}
144
160
  </span>
145
161
  ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
146
162
  `).join('')}
147
163
  </div>
148
- <div class="title-wrapper">
149
- <i class="title-icon"></i>
150
- <span class="title-text">${caption}</span>
151
- </div>
152
164
  </div>
153
165
  `;
154
166