gnui 1.2.21 → 1.2.22

package/styleguide/tag/v.0.1.0/index.html

@@ -8222,6 +8222,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   <select class="new-dropdown5" name="dropdown5">
   </select>
 
+  <select class="new-dropdown6" name="dropdown6">
+  </select>
+
+  <select class="new-dropdown7" name="dropdown7">
+  </select>
+
 
 </div>
 
@@ -8248,6 +8254,12 @@ 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>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown5<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown5<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>select</span><span class="token punctuation" >></span></span>
 
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown6<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown6<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>select</span><span class="token punctuation" >></span></span>
+
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown7<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown7<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>select</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" >'dropdown'</span><span class="token punctuation" >,</span> {
@@ -8335,6 +8347,70 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       { value<span class="token punctuation" >:</span> <span class="token string" >'5'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목5'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리B'</span><span class="token punctuation" >,</span> <span class="token string" >'5000'</span><span class="token punctuation" >]</span> }
     <span class="token punctuation" >]</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  <span class="token operator" >/</span><span class="token operator" >/</span> optionTooltip — 정적 콘텐츠
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown6'</span><span class="token punctuation" >,</span>
+    width<span class="token punctuation" >:</span> <span class="token string" >'200px'</span><span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'win'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'Windows'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'mac'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'macOS'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'linux'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'Linux'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'android'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'Android'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'ios'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'iOS'</span> }
+    <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+    optionTooltip<span class="token punctuation" >:</span> {
+      direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
+      content<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
+        var descriptions <span class="token operator" >=</span> {
+          win<span class="token punctuation" >:</span> <span class="token string" >'마이크로소프트의 데스크톱 운영체제'</span><span class="token punctuation" >,</span>
+          mac<span class="token punctuation" >:</span> <span class="token string" >'애플의 데스크톱 운영체제'</span><span class="token punctuation" >,</span>
+          linux<span class="token punctuation" >:</span> <span class="token string" >'오픈소스 기반 운영체제'</span><span class="token punctuation" >,</span>
+          android<span class="token punctuation" >:</span> <span class="token string" >'구글의 모바일 운영체제'</span><span class="token punctuation" >,</span>
+          ios<span class="token punctuation" >:</span> <span class="token string" >'애플의 모바일 운영체제'</span>
+        }<span class="token comment" spellcheck="true">;</span>
+        var desc <span class="token operator" >=</span> descriptions<span class="token punctuation" >[</span>option<span class="token punctuation" >.</span>value<span class="token punctuation" >]</span> || <span class="token string" >''</span><span class="token comment" spellcheck="true">;</span>
+        return <span class="token string" >'&lt;div style="min-width:160px">&lt;strong>'</span> <span class="token operator" >+</span> option<span class="token punctuation" >.</span>text <span class="token operator" >+</span> <span class="token string" >'&lt;/strong>&lt;p style="margin:4px 0 0">'</span> <span class="token operator" >+</span> desc <span class="token operator" >+</span> <span class="token string" >'&lt;/p>&lt;/div>'</span><span class="token comment" spellcheck="true">;</span>
+      }
+    }
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  <span class="token operator" >/</span><span class="token operator" >/</span> optionTooltip — 비동기 fetch
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown7'</span><span class="token punctuation" >,</span>
+    width<span class="token punctuation" >:</span> <span class="token string" >'200px'</span><span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'host1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'192.168.0.1'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'host2'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'192.168.0.2'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'host3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'10.0.0.1'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'host4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'10.0.0.2'</span> }
+    <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+    optionTooltip<span class="token punctuation" >:</span> {
+      direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
+      fetch<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
+        return new <span class="token function" >Promise</span><span class="token punctuation" >(</span>function <span class="token punctuation" >(</span>resolve<span class="token punctuation" >)</span> {
+          <span class="token function" >setTimeout</span><span class="token punctuation" >(</span>function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
+            var mockData <span class="token operator" >=</span> {
+              host1<span class="token punctuation" >:</span> { name<span class="token punctuation" >:</span> <span class="token string" >'Server-A'</span><span class="token punctuation" >,</span> os<span class="token punctuation" >:</span> <span class="token string" >'Windows Server 2022'</span><span class="token punctuation" >,</span> status<span class="token punctuation" >:</span> <span class="token string" >'online'</span> }<span class="token punctuation" >,</span>
+              host2<span class="token punctuation" >:</span> { name<span class="token punctuation" >:</span> <span class="token string" >'Server-B'</span><span class="token punctuation" >,</span> os<span class="token punctuation" >:</span> <span class="token string" >'Ubuntu 22.04'</span><span class="token punctuation" >,</span> status<span class="token punctuation" >:</span> <span class="token string" >'online'</span> }<span class="token punctuation" >,</span>
+              host3<span class="token punctuation" >:</span> { name<span class="token punctuation" >:</span> <span class="token string" >'Router-1'</span><span class="token punctuation" >,</span> os<span class="token punctuation" >:</span> <span class="token string" >'Cisco IOS'</span><span class="token punctuation" >,</span> status<span class="token punctuation" >:</span> <span class="token string" >'online'</span> }<span class="token punctuation" >,</span>
+              host4<span class="token punctuation" >:</span> { name<span class="token punctuation" >:</span> <span class="token string" >'Switch-1'</span><span class="token punctuation" >,</span> os<span class="token punctuation" >:</span> <span class="token string" >'Cisco NX-OS'</span><span class="token punctuation" >,</span> status<span class="token punctuation" >:</span> <span class="token string" >'offline'</span> }
+            }<span class="token comment" spellcheck="true">;</span>
+            var d <span class="token operator" >=</span> mockData<span class="token punctuation" >[</span>option<span class="token punctuation" >.</span>value<span class="token punctuation" >]</span><span class="token comment" spellcheck="true">;</span>
+            var statusColor <span class="token operator" >=</span> d<span class="token punctuation" >.</span>status <span class="token operator" >==</span><span class="token operator" >=</span> <span class="token string" >'online'</span> <span class="token operator" >?</span> <span class="token string" >'success'</span> <span class="token punctuation" >:</span> <span class="token string" >'danger'</span><span class="token comment" spellcheck="true">;</span>
+            <span class="token function" >resolve</span><span class="token punctuation" >(</span>
+              <span class="token string" >'&lt;div style="min-width:180px">'</span> <span class="token operator" >+</span>
+                <span class="token string" >'&lt;strong>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >.</span>name <span class="token operator" >+</span> <span class="token string" >'&lt;/strong>'</span> <span class="token operator" >+</span>
+                '<span class="token operator" >&lt;</span>ul style<span class="token operator" >=</span>"margin<span class="token punctuation" >:</span>6px <span class="token number" >0</span> <span class="token number" >0</span><span class="token comment" spellcheck="true">;padding:0;list-style:none">' +</span>
+                  <span class="token string" >'&lt;li>IP: '</span> <span class="token operator" >+</span> option<span class="token punctuation" >.</span>text <span class="token operator" >+</span> <span class="token string" >'&lt;/li>'</span> <span class="token operator" >+</span>
+                  <span class="token string" >'&lt;li>OS: '</span> <span class="token operator" >+</span> d<span class="token punctuation" >.</span>os <span class="token operator" >+</span> <span class="token string" >'&lt;/li>'</span> <span class="token operator" >+</span>
+                  <span class="token string" >'&lt;li>상태: &lt;span class="gn-tag is-'</span> <span class="token operator" >+</span> statusColor <span class="token operator" >+</span> <span class="token string" >' is-small">'</span> <span class="token operator" >+</span> d<span class="token punctuation" >.</span>status <span class="token operator" >+</span> <span class="token string" >'&lt;/span>&lt;/li>'</span> <span class="token operator" >+</span>
+                <span class="token string" >'&lt;/ul>'</span> <span class="token operator" >+</span>
+              <span class="token string" >'&lt;/div>'</span>
+            <span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+          }<span class="token punctuation" >,</span> <span class="token number" >500</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>
+      }
+    }
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><h3 id="-dropdownitem-">데이터 모델 (DropdownItem)</h3>
 <table class="gn-table is-full is-border">
   <thead>
@@ -8458,6 +8534,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td></td>
       <td>&#39;opened&#39; 상태에서 해당옵션만 지정 시 옵션영역의 최대 높이(스크롤 생성)</td>
     </tr>
+    <tr>
+    <td colspan="2">optionTooltip</td>
+      <td>object</td>
+      <td></td>
+      <td>옵션 툴팁 설정<br/><br/><strong>direction</strong>: &#39;top&#39;,&#39;right&#39;,&#39;bottom&#39;,&#39;left&#39;<br/><strong>content</strong>: function(option){ return htmlString }<br/><strong>fetch</strong>: function(option){ return Promise that resolves htmlString }</td>
+    </tr>
     <tr>
       <td colspan="2">hasSearch</td>
       <td>boolean</td>
@@ -9753,11 +9835,13 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
   <div class="new-picklist"></div>
   <div class="new-picklist-v"></div>
   <div class="new-picklist-cols"></div>
+  <div class="new-picklist-tooltip"></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-picklist<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-picklist-v<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-picklist-cols<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-picklist-tooltip<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" >'picklist'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist'</span><span class="token punctuation" >,</span>
@@ -9813,6 +9897,26 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
     width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
     height<span class="token punctuation" >:</span> <span class="token number" >150</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" >'picklist'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist-tooltip'</span><span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> {
+      source<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+        { value<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item1'</span> }<span class="token punctuation" >,</span>
+        { value<span class="token punctuation" >:</span> <span class="token string" >'항목2'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item2'</span> }<span class="token punctuation" >,</span>
+        { value<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item3'</span> }
+      <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+      target<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span>
+    }<span class="token punctuation" >,</span>
+    optionTooltip<span class="token punctuation" >:</span> {
+      direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
+      content<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
+        return '<span class="token operator" >&lt;</span>div style<span class="token operator" >=</span>"padding<span class="token punctuation" >:</span> 10px<span class="token comment" spellcheck="true">; max-width: 200px;">' + option.text + '에 대한 추가 정보입니다.&lt;/div>';</span>
+      }
+    }<span class="token punctuation" >,</span>
+    direction<span class="token punctuation" >:</span> <span class="token string" >'horizontal'</span><span class="token punctuation" >,</span>
+    width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
+    height<span class="token punctuation" >:</span> <span class="token number" >150</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><h3 id="-picklistitem-">데이터 모델 (PicklistItem)</h3>
 <table class="gn-table is-full is-border">
   <thead>
@@ -9919,6 +10023,18 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>150</td>
       <td>선택항목 영역의 높이</td>
     </tr>
+    <tr>
+      <td colspan="2">direction</td>
+      <td>string</td>
+      <td>&#39;horizontal&#39;</td>
+      <td>컴포넌트 방향 (&#39;horizontal&#39;, &#39;vertical&#39;)</td>
+    </tr>
+    <tr>
+      <td colspan="2">optionTooltip</td>
+      <td>object</td>
+      <td></td>
+      <td>옵션 툴팁 설정<br/><br/><strong>direction</strong>: &#39;top&#39;,&#39;right&#39;,&#39;bottom&#39;,&#39;left&#39;<br/><strong>content</strong>: function(option){ return htmlString }<br/><strong>fetch</strong>: function(option){ return Promise that resolves htmlString }</td>
+    </tr>
     <tr>
       <td colspan="2">hasSourceSearch</td>
       <td>boolean</td>
@@ -13776,7 +13892,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
+          <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
         </div>
       </div>
     </div>