gnui 1.2.20 → 1.2.21

package/styleguide/tag/javascript/index.html

@@ -974,9 +974,13 @@
   <div class="new-grid2"></div>
 </div>
 
-<div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
+<div style="width: 100%; overflow-x: auto; margin-top: 20px;">
   <div class="new-grid3"></div>
 </div>
+
+<div style="width: 100%; margin-top: 20px;">
+  <div class="new-grid4"></div>
+</div>
 </div>
 
 <pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
@@ -985,9 +989,13 @@
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >350</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
   target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid'</span><span class="token punctuation" >,</span>
@@ -1281,8 +1289,73 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
     console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>updatedData<span class="token punctuation" >)</span>
   }
 }<span class="token punctuation" >)</span>
+Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
+  target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid4'</span><span class="token punctuation" >,</span>
+  orientation<span class="token punctuation" >:</span> <span class="token string" >'horizontal'</span><span class="token punctuation" >,</span>
+  orientationOptions<span class="token punctuation" >:</span> {
+    columns<span class="token punctuation" >:</span> <span class="token string" >'auto-fit'</span><span class="token punctuation" >,</span>
+    minWidth<span class="token punctuation" >:</span> <span class="token string" >'240px'</span>
+  }<span class="token punctuation" >,</span>
+  hasHeader<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'이름'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'name'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'부서'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'team'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'상태'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'status'</span><span class="token punctuation" >,</span>
+      template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
+        return <span class="token string" >'&lt;span class="tag is-info">'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span><span class="token comment" spellcheck="true">;</span>
+      }
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'홍길동'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'플랫폼개발'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'ACTIVE'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'김철수'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'디자인시스템'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'PENDING'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'이영희'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'QA'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'DONE'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'박민수'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'프론트엔드'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'ACTIVE'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'최지우'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'서비스기획'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'REVIEW'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  textSets<span class="token punctuation" >:</span> {
+    deleteConfirmMessage<span class="token punctuation" >:</span> <span class="token string" >'카드를 삭제하시겠습니까?'</span>
+  }
+}<span class="token punctuation" >)</span>
 
-</code></pre><table class="gn-table is-full is-border">
+</code></pre><h3 id="-">가로 모드 동작</h3>
+<ul>
+<li><code>orientation: &#39;horizontal&#39;</code>은 최상위 row만 카드형으로 렌더링한다.</li>
+<li><code>childField</code> 기반 하위 데이터는 가로 모드에서 렌더링하지 않는다.</li>
+<li><code>orientationOptions.columns: &#39;auto-fit&#39;</code>이고 <code>gap</code>이 <code>0</code>, <code>&#39;0&#39;</code>, <code>&#39;0px&#39;</code>, <code>&#39;&#39;</code> 또는 미지정이면 내부적으로 <code>5px</code> gap을 적용한다.</li>
+<li>카드 경계 연결 규칙은 <code>gap: 0</code>일 때만 적용되며, <code>gap &gt; 0</code>이면 각 카드가 독립 border를 가진다.</li>
+</ul>
+<table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
     <th>type</th>
@@ -1416,7 +1489,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td colspan="2">childField</td>
       <td>string</td>
       <td>child</td>
-      <td>자식 데이터를 가지고 있는 항목 키값</td>
+      <td>자식 데이터를 가지고 있는 항목 키값. 세로 모드에서만 트리형 하위 row 렌더링에 사용된다.</td>
     </tr>
     <tr>
       <td colspan="2">hasCheck</td>
@@ -1442,6 +1515,31 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>true</td>
       <td>헤더 생성 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">orientation</td>
+      <td>&#39;vertical&#39; | &#39;horizontal&#39;</td>
+      <td>&#39;vertical&#39;</td>
+      <td>그리드 출력 방향. <code>horizontal</code>이면 최상위 row만 카드형으로 출력하며 <code>childField</code> 기반 하위 데이터는 렌더링하지 않는다.</td>
+    </tr>
+    <tr>
+      <td rowspan="3">orientationOptions</td>
+      <td>columns</td>
+      <td>number | &#39;auto-fit&#39;</td>
+      <td>1</td>
+      <td>가로 모드 카드 열 수 또는 자동 배치 방식. <code>orientation: &#39;horizontal&#39;</code>일 때 적용된다. <code>auto-fit</code>은 실제 줄 배치를 브라우저가 결정한다.</td>
+    </tr>
+    <tr>
+      <td>gap</td>
+      <td>number | string</td>
+      <td>0</td>
+      <td>가로 모드 카드 간격. CSS grid <code>gap</code> 값으로 적용된다. <code>columns: &#39;auto-fit&#39;</code>일 때는 0 계열 값 또는 미지정이면 내부적으로 <code>5px</code>를 적용한다. <code>gap: 0</code>일 때만 카드 경계 연결 규칙을 사용한다.</td>
+    </tr>
+    <tr>
+      <td>minWidth</td>
+      <td>number | string</td>
+      <td>240</td>
+      <td><code>columns: &#39;auto-fit&#39;</code>일 때 사용할 최소 카드 폭.</td>
+    </tr>
     <tr>
       <td colspan="2">readonly</td>
       <td>boolean</td>
@@ -1570,22 +1668,22 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
     <tr>
       <td>addChild(index: number, data: Array<any>)</td>
       <td>void</td>
-      <td>index번째 row의 child로 data를 추가한다.</td>
+      <td>index번째 row의 child로 data를 추가한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>addRow(data: Array<any>)</td>
       <td>void</td>
-      <td>마지막 데이터 하단에 data를 추가한다.</td>
+      <td>마지막 데이터 하단에 data를 추가한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>expand(index: number)</td>
       <td>void</td>
-      <td>index번째  row의 child를 확장한다. </td>
+      <td>index번째 row의 child를 확장한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>collapse(index: number)</td>
       <td>void</td>
-      <td>index번째 row의 child 데이터를 축소한다. </td>
+      <td>index번째 row의 child 데이터를 축소한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>getChecked()</td>
@@ -1603,9 +1701,9 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>파라메터 배열에 전달된 key에 해당하는 컬럼만 보여준다</td>
     </tr>
     <tr>
-      <td>showDetail(index: number, headerKeys?: string[])</td>
+      <td>showDetail(index: number, headerKeys?: string[], rawDataKeys?: string[])</td>
       <td>void</td>
-      <td>headerKeys로 넘겨진 항목들의 상세정보를 하단에 표시한다. headerKeys가 없는 경우 전체 항목 표시한다.</td>
+      <td>headerKeys로 넘겨진 항목들의 상세정보를 하단에 표시한다. rawDataKeys를 넘기면 원본 데이터도 함께 표시한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>showAll()</td>
@@ -3199,10 +3297,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 
   <button class="gn-button new-modal">Modal 예제보기</button>
   <button class="gn-button new-popup">Popup 예제보기</button>
+  <button class="gn-button new-modal-extra">Modal(Extra) 예제보기</button>
 </div>
 
 <pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button new-modal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Modal 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button new-popup<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Popup 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button new-modal-extra<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Modal(Extra) 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'button'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.new-modal'</span><span class="token punctuation" >,</span>
@@ -3263,6 +3363,23 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
     }
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'button'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-modal-extra'</span><span class="token punctuation" >,</span>
+    onClick<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
+      Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'modal'</span><span class="token punctuation" >,</span> {
+        textSets<span class="token punctuation" >:</span> { title<span class="token punctuation" >:</span> <span class="token string" >'Extra Buttons Demo'</span> }<span class="token punctuation" >,</span>
+        hasCancel<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        height<span class="token punctuation" >:</span> <span class="token number" >400</span><span class="token punctuation" >,</span>
+        extraButtons<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+          { key<span class="token punctuation" >:</span> <span class="token string" >'edit-template'</span><span class="token punctuation" >,</span> label<span class="token punctuation" >:</span> <span class="token string" >'수정(템플릿만적용)'</span><span class="token punctuation" >,</span> className<span class="token punctuation" >:</span> <span class="token string" >'is-small is-primary'</span> }<span class="token punctuation" >,</span>
+          { key<span class="token punctuation" >:</span> <span class="token string" >'edit-bulk'</span><span class="token punctuation" >,</span> label<span class="token punctuation" >:</span> <span class="token string" >'수정(용도일괄적용)'</span><span class="token punctuation" >,</span> className<span class="token punctuation" >:</span> <span class="token string" >'is-small is-mono'</span> }
+        <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+        onExtra<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>actionKey<span class="token punctuation" >)</span> {
+          console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'extra clicked:'</span><span class="token punctuation" >,</span> actionKey<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+        }
+      }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    }
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -3350,6 +3467,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>false</td>
       <td>취소버튼 출력 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">extraButtons</td>
+      <td>array</td>
+      <td>[]</td>
+      <td>푸터에 커스텀 버튼을 추가한다. 예) [&#123; key:&#39;apply&#39;, label:&#39;적용&#39;, className:&#39;is-small is-primary&#39; &#125;]</td>
+    </tr>
     <tr>
       <td colspan="2">contents</td>
       <td>string|HTMLElement</td>
@@ -3420,6 +3543,11 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>void</td>
       <td>modal 창을 포커스한다.</td>
     </tr>
+    <tr>
+      <td>onExtra()</td>
+      <td>void</td>
+      <td>커스텀 버튼 클릭 시 수행될 이벤트. 매개변수로 actionKey를 전달한다.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -4258,6 +4386,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   <div class="new-tree1"></div>
   <div class="new-tree2"></div>
   <div class="new-tree3"></div>
+  <div class="new-tree4"></div>
 </div>
 </div>
 
@@ -4265,6 +4394,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-tree1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-tree2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-tree3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-tree4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tree'</span><span class="token punctuation" >,</span> {
@@ -4276,7 +4406,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'R&amp;D Center'</span><span class="token punctuation" >,</span>
@@ -4285,7 +4415,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span>
@@ -4301,7 +4431,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'R&amp;D Center'</span><span class="token punctuation" >,</span>
@@ -4310,43 +4440,83 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span>
       }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
       color<span class="token punctuation" >:</span> <span class="token string" >'success'</span><span class="token punctuation" >,</span>
-      multiple<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+      hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >false</span>
     }<span class="token punctuation" >)</span>
     Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tree'</span><span class="token punctuation" >,</span> {
       target<span class="token punctuation" >:</span> <span class="token string" >'.new-tree3'</span><span class="token punctuation" >,</span>
       data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'Genians'</span><span class="token punctuation" >,</span>
-        selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'genians'</span><span class="token punctuation" >,</span>
         actived<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
         opened<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
         child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'gnui'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'gnui-core'</span><span class="token punctuation" >,</span>
+          opened<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+          child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
+            text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'gnui-nested'</span>
+          }<span class="token punctuation" >,</span>{
+            text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'gnui-core-nested'</span>
+          }<span class="token punctuation" >,</span>{
+            text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'gnconfengine-nested'</span><span class="token punctuation" >,</span>
+            selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+          }<span class="token punctuation" >]</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span><span class="token punctuation" >,</span>
-          selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'gnconfengine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'R&amp;D Center'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'rnd-center'</span><span class="token punctuation" >,</span>
         child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'rnd-gnui'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'rnd-gnui-core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'rnd-gnconfengine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
-        text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span>
+        text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'frontend'</span>
       }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
       hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
     }<span class="token punctuation" >)</span>
+    Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tree'</span><span class="token punctuation" >,</span> {
+      target<span class="token punctuation" >:</span> <span class="token string" >'.new-tree4'</span><span class="token punctuation" >,</span>
+      data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
+        text<span class="token punctuation" >:</span> <span class="token string" >'Disabled Root'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'disabled-root'</span><span class="token punctuation" >,</span>
+        opened<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
+          text<span class="token punctuation" >:</span> <span class="token string" >'Locked Node'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'locked-node'</span><span class="token punctuation" >,</span>
+          selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+        }<span class="token punctuation" >,</span>{
+          text<span class="token punctuation" >:</span> <span class="token string" >'Review Only'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'review-only'</span>
+        }<span class="token punctuation" >]</span>
+      }<span class="token punctuation" >,</span>{
+        text<span class="token punctuation" >:</span> <span class="token string" >'Disabled Leaf'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'disabled-leaf'</span>
+      }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+      hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+    }<span class="token punctuation" >)</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -4367,10 +4537,11 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>{key: value}로 이루어진 데이터
       <br><b>text</b>: 메뉴명
+      <br><b>value</b>: 노드 식별 값
       <br><b>selected</b>: true 인 경우 체크박스 체크된 상태로 표시
       <br><b>opened</b>: true 인 경우 하위항목이 열린상태로 표시
       <br><b>actived</b>: true 인 경우 선택된 상태로 표시
-      <br><b>disabled</b>: true 인 경우 선택할 수 없는 항목으로 표시
+      <br><b>disabled</b>: true 인 경우 해당 노드 선택·체크 불가
       <br><b>icon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) HTMLElement String 을 통해 사용자 정의 아이콘으로 변경
       <br><b>hideIcon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) 아이콘 숨김 처리</td></td>
     </tr>
@@ -4411,10 +4582,10 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>하위 항목 선택 시 상위항목 자동선택 여부</td>
     </tr>
     <tr>
-      <td colspan="2">multiple</td>
+      <td colspan="2">checkChild</td>
       <td>boolean</td>
-      <td>false</td>
-      <td>다중선택 가능여부</td>
+      <td>true</td>
+      <td>부모 항목 선택 시 하위항목 자동선택 여부</td>
     </tr>
     <tr>
       <td colspan="2">showIcon</td>
@@ -4422,6 +4593,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>false</td>
       <td>메뉴명 앞 아이콘 표시 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>true 인 경우 초기 렌더 시 전체 트리가 비활성화되며(is-disabled), 선택/체크 상호작용은 불가하지만 토글러를 통한 확장/축소는 가능</td>
+    </tr>
     <tr>
       <td colspan="2">onSelect</td>
       <td>function</td>
@@ -4493,6 +4670,11 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>void</td>
       <td>모든 노드의 체크를 해제한다. <b>hasCheck: true</b>일 때만 유효하며, 그 외에는 no-op이다.</td>
     </tr>
+    <tr>
+      <td>setChecked(targets: string | string[], checked: boolean)</td>
+      <td>void</td>
+      <td>전달한 단일 또는 복수 노드를 체크/해제한다. 노드 식별은 <b>value</b>로만 수행하며, 대상 노드에는 고유한 <b>value</b>가 필요하다. <b>hasCheck: true</b>일 때만 유효하다.</td>
+    </tr>
     <tr>
       <td>getChecked(withStatus: Boolean = false)</td>
       <td>array</td>
@@ -4514,6 +4696,16 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>any</td>
       <td>keyword를 포함한 아이템만 표시한다</td>
     </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>트리 컴포넌트 전체를 비활성화한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>트리 컴포넌트 전체를 활성화한다.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -6270,12 +6462,16 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 </div>
 <div class="new-multitext">
 </div>
+<div class="message-multitext">
+</div>
 </div>
 
 <pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>default-multitext<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-multitext<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>message-multitext<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'multitext'</span><span class="token punctuation" >,</span> {
   target<span class="token punctuation" >:</span> <span class="token string" >'.default-multitext'</span>
@@ -6291,6 +6487,20 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
   }<span class="token punctuation" >,</span>
   maxlength<span class="token punctuation" >:</span> <span class="token number" >300</span>
 }<span class="token punctuation" >)</span>
+
+Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'multitext'</span><span class="token punctuation" >,</span> {
+  target<span class="token punctuation" >:</span> <span class="token string" >'.message-multitext'</span><span class="token punctuation" >,</span>
+  lang<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'ko'</span><span class="token punctuation" >,</span> <span class="token string" >'en'</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  value<span class="token punctuation" >:</span> {
+    ko<span class="token punctuation" >:</span> <span class="token string" >'옵션 문구 예시'</span><span class="token punctuation" >,</span>
+    en<span class="token punctuation" >:</span> <span class="token string" >'message example'</span>
+  }<span class="token punctuation" >,</span>
+  maxlength<span class="token punctuation" >:</span> <span class="token number" >120</span><span class="token punctuation" >,</span>
+  useMaxLengthMessage<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  textSets<span class="token punctuation" >:</span> {
+    maxLengthMessage<span class="token punctuation" >:</span> <span class="token string" >'{{maxlength}}자 입력 가능합니다.'</span>
+  }
+}<span class="token punctuation" >)</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -6341,6 +6551,19 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>524288</td>
       <td>최대 입력 글자길이</td>
     </tr>
+    <tr>
+      <td>textSets</td>
+      <td>maxLengthMessage</td>
+      <td>string</td>
+      <td>&#39;{{maxlength}}자 입력 가능합니다.&#39;</td>
+      <td><code>maxlength</code> 및 <code>useMaxLengthMessage=true</code>일 때 적용되는 남은 입력 가능 글자 안내 문구</td>
+    </tr>
+    <tr>
+      <td colspan="2">useMaxLengthMessage</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>true인 경우에만 <code>textSets.maxLengthMessage</code> 안내 문구 모드 활성화 (기본 카운터는 유지)</td>
+    </tr>
     <tr>
       <td colspan="2">onChange(value)</td>
       <td>function</td>
@@ -8413,7 +8636,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>