gnui 1.2.20 → 1.2.22

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 (79) hide show
  1. package/@types/gnui.d.ts +8 -0
  2. package/dist/js/gnui.esm.js +712 -153
  3. package/dist/js/gnui.js +712 -153
  4. package/dist/js/gnui.min.js +6 -6
  5. package/dist/styles/default.css +144 -0
  6. package/dist/styles/gpi.css +144 -0
  7. package/dist/styles/green24.css +145 -1
  8. package/dist/styles/insights.css +144 -0
  9. package/dist/styles/nac.css +144 -0
  10. package/dist/styles/ztnac.css +145 -1
  11. package/package.json +7 -2
  12. package/styleguide/assets/components.js +237 -9
  13. package/styleguide/assets/js/gnui.js +712 -153
  14. package/styleguide/assets/js/gnui.min.js +6 -6
  15. package/styleguide/assets/styles/default.css +144 -0
  16. package/styleguide/assets/styles/gpi.css +144 -0
  17. package/styleguide/assets/styles/green24.css +145 -1
  18. package/styleguide/assets/styles/insights.css +144 -0
  19. package/styleguide/assets/styles/nac.css +144 -0
  20. package/styleguide/assets/styles/ztnac.css +145 -1
  21. package/styleguide/category/COLOR/index.html +1 -1
  22. package/styleguide/category/COMPONENT/Alert(js)/index.html +1 -1
  23. package/styleguide/category/COMPONENT/Bignumber/index.html +1 -1
  24. package/styleguide/category/COMPONENT/Breadcrumb/index.html +1 -1
  25. package/styleguide/category/COMPONENT/Calendar(js)/index.html +1 -1
  26. package/styleguide/category/COMPONENT/Card/index.html +1 -1
  27. package/styleguide/category/COMPONENT/Chart(js)/index.html +1 -1
  28. package/styleguide/category/COMPONENT/Datagrid(js)/index.html +109 -11
  29. package/styleguide/category/COMPONENT/Datalist(js)/index.html +1 -1
  30. package/styleguide/category/COMPONENT/Growl(js)/index.html +1 -1
  31. package/styleguide/category/COMPONENT/JsonView(js)/index.html +1 -1
  32. package/styleguide/category/COMPONENT/Loader(js)/index.html +1 -1
  33. package/styleguide/category/COMPONENT/MenuButton(js)/index.html +1 -1
  34. package/styleguide/category/COMPONENT/Message(js)/index.html +1 -1
  35. package/styleguide/category/COMPONENT/Modal(js)/index.html +31 -1
  36. package/styleguide/category/COMPONENT/Pagination(js)/index.html +1 -1
  37. package/styleguide/category/COMPONENT/Panel/index.html +1 -1
  38. package/styleguide/category/COMPONENT/Progressbar(js)/index.html +1 -1
  39. package/styleguide/category/COMPONENT/Tab(js)/index.html +1 -1
  40. package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +1 -1
  41. package/styleguide/category/COMPONENT/Tooltip(js)/index.html +1 -1
  42. package/styleguide/category/COMPONENT/Tree(js)/index.html +83 -19
  43. package/styleguide/category/CONTROLS/Button(js)/index.html +1 -1
  44. package/styleguide/category/CONTROLS/Checkbox/index.html +1 -1
  45. package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +1 -1
  46. package/styleguide/category/CONTROLS/Datepicker(js)/index.html +1 -1
  47. package/styleguide/category/CONTROLS/Dropdown(js)/index.html +83 -1
  48. package/styleguide/category/CONTROLS/File/index.html +1 -1
  49. package/styleguide/category/CONTROLS/Form/Control/index.html +1 -1
  50. package/styleguide/category/CONTROLS/Form/Field/index.html +53 -1
  51. package/styleguide/category/CONTROLS/Form/Plain/index.html +1 -1
  52. package/styleguide/category/CONTROLS/Input/index.html +1 -1
  53. package/styleguide/category/CONTROLS/MultiText(js)/index.html +32 -1
  54. package/styleguide/category/CONTROLS/Picklist(js)/index.html +35 -1
  55. package/styleguide/category/CONTROLS/Radio/index.html +1 -1
  56. package/styleguide/category/CONTROLS/Select/index.html +1 -1
  57. package/styleguide/category/CONTROLS/SelectButton(js)/index.html +1 -1
  58. package/styleguide/category/CONTROLS/Slider/index.html +1 -1
  59. package/styleguide/category/CONTROLS/SortableList(js)/index.html +1 -1
  60. package/styleguide/category/CONTROLS/Switch(js)/index.html +1 -1
  61. package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +1 -1
  62. package/styleguide/category/CONTROLS/Textarea/index.html +1 -1
  63. package/styleguide/category/CONTROLS/Time(js)/index.html +1 -1
  64. package/styleguide/category/ELEMENTS/Box/index.html +1 -1
  65. package/styleguide/category/ELEMENTS/Icon/index.html +1 -1
  66. package/styleguide/category/ELEMENTS/Image/index.html +1 -1
  67. package/styleguide/category/ELEMENTS/List/index.html +1 -1
  68. package/styleguide/category/ELEMENTS/Table/index.html +1 -1
  69. package/styleguide/category/ELEMENTS/Tag/index.html +1 -1
  70. package/styleguide/category/ELEMENTS/Title/index.html +1 -1
  71. package/styleguide/category/LAYOUT/Container/index.html +1 -1
  72. package/styleguide/category/LAYOUT/Grid/index.html +1 -1
  73. package/styleguide/category/LAYOUT/Splitter(js)/index.html +1 -1
  74. package/styleguide/category/UTILITY/index.html +9 -2
  75. package/styleguide/category/Utils/index.html +1 -1
  76. package/styleguide/color.html +1 -1
  77. package/styleguide/index.html +1 -1
  78. package/styleguide/tag/javascript/index.html +368 -29
  79. package/styleguide/tag/v.0.1.0/index.html +428 -30
package/styleguide/category/CONTROLS/Form/Control/index.html CHANGED
@@ -219,7 +219,7 @@
219
219
  </div>
220
220
 
221
221
 
222
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
222
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
223
223
  </div>
224
224
  </div>
225
225
  </div>
package/styleguide/category/CONTROLS/Form/Field/index.html CHANGED
@@ -239,6 +239,58 @@
239
239
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-plain is-full<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>gnui-guide.png<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
240
240
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
241
241
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
242
+ </code></pre>
243
+ <h3 id="label-">Label 정렬 및 너비 조절 (가로 정렬일 때)</h3>
244
+ <ul>
245
+ <li>Label에 UTILITY의 텍스트 정렬 클래스(<code>has-text-left</code>, <code>has-text-right</code>, <code>has-text-center</code>)를 적용하여 정렬 변경 가능</li>
246
+ <li>Label에 Grid의 사이즈 클래스(<code>is-1</code> ~ <code>is-12</code>)를 적용하여 너비 조절 가능</li>
247
+ </ul>
248
+ <div class="aigis-preview">
249
+ <!-- Label 왼쪽 정렬 -->
250
+ <div class="gn-field">
251
+ <div class="gn-label has-text-left">이름</div>
252
+ <div class="gn-control">
253
+ <input class="gn-input" placeholder="input name">
254
+ </div>
255
+ </div>
256
+ <!-- Label 너비 조절 (Grid 사이즈 클래스 사용) -->
257
+ <div class="gn-field">
258
+ <div class="gn-label is-3">다국어용 긴 레이블 텍스트</div>
259
+ <div class="gn-control">
260
+ <input class="gn-input" placeholder="input name">
261
+ </div>
262
+ </div>
263
+ <!-- Label 왼쪽 정렬 + 너비 조절 조합 -->
264
+ <div class="gn-field">
265
+ <div class="gn-label has-text-left is-4">다국어용 매우 긴 레이블 텍스트</div>
266
+ <div class="gn-control">
267
+ <input class="gn-input" placeholder="input name">
268
+ </div>
269
+ </div></div>
270
+
271
+ <pre><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- Label 왼쪽 정렬 --></span>
272
+ <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>gn-field<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
273
+ <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>gn-label has-text-left<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>
274
+ <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>gn-control<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
275
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input name<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
276
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
277
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
278
+
279
+ <span class="token comment" spellcheck="true">&lt;!-- Label 너비 조절 (Grid 사이즈 클래스 사용) --></span>
280
+ <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>gn-field<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
281
+ <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>gn-label is-3<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>
282
+ <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>gn-control<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
283
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input name<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
284
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
285
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
286
+
287
+ <span class="token comment" spellcheck="true">&lt;!-- Label 왼쪽 정렬 + 너비 조절 조합 --></span>
288
+ <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>gn-field<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
289
+ <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>gn-label has-text-left is-4<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>
290
+ <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>gn-control<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
291
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input name<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
292
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
293
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
242
294
  </code></pre>
243
295
 
244
296
  </div>
@@ -246,7 +298,7 @@
246
298
  </div>
247
299
 
248
300
 
249
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
301
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
250
302
  </div>
251
303
  </div>
252
304
  </div>
package/styleguide/category/CONTROLS/Form/Plain/index.html CHANGED
@@ -185,7 +185,7 @@
185
185
  </div>
186
186
 
187
187
 
188
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
188
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
189
189
  </div>
190
190
  </div>
191
191
  </div>
package/styleguide/category/CONTROLS/Input/index.html CHANGED
@@ -322,7 +322,7 @@
322
322
  </div>
323
323
 
324
324
 
325
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
325
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
326
326
  </div>
327
327
  </div>
328
328
  </div>
package/styleguide/category/CONTROLS/MultiText(js)/index.html CHANGED
@@ -147,12 +147,16 @@
147
147
  </div>
148
148
  <div class="new-multitext">
149
149
  </div>
150
+ <div class="message-multitext">
151
+ </div>
150
152
  </div>
151
153
 
152
154
  <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>
153
155
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
154
156
  <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>
155
157
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
158
+ <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>
159
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
156
160
  </code></pre>
157
161
  <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> {
158
162
  target<span class="token punctuation" >:</span> <span class="token string" >'.default-multitext'</span>
@@ -168,6 +172,20 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
168
172
  }<span class="token punctuation" >,</span>
169
173
  maxlength<span class="token punctuation" >:</span> <span class="token number" >300</span>
170
174
  }<span class="token punctuation" >)</span>
175
+
176
+ 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> {
177
+ target<span class="token punctuation" >:</span> <span class="token string" >'.message-multitext'</span><span class="token punctuation" >,</span>
178
+ 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>
179
+ value<span class="token punctuation" >:</span> {
180
+ ko<span class="token punctuation" >:</span> <span class="token string" >'옵션 문구 예시'</span><span class="token punctuation" >,</span>
181
+ en<span class="token punctuation" >:</span> <span class="token string" >'message example'</span>
182
+ }<span class="token punctuation" >,</span>
183
+ maxlength<span class="token punctuation" >:</span> <span class="token number" >120</span><span class="token punctuation" >,</span>
184
+ useMaxLengthMessage<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
185
+ textSets<span class="token punctuation" >:</span> {
186
+ maxLengthMessage<span class="token punctuation" >:</span> <span class="token string" >'{{maxlength}}자 입력 가능합니다.'</span>
187
+ }
188
+ }<span class="token punctuation" >)</span>
171
189
  </code></pre><table class="gn-table is-full is-border">
172
190
  <thead>
173
191
  <th colspan="2">name</th>
@@ -218,6 +236,19 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
218
236
  <td>524288</td>
219
237
  <td>최대 입력 글자길이</td>
220
238
  </tr>
239
+ <tr>
240
+ <td>textSets</td>
241
+ <td>maxLengthMessage</td>
242
+ <td>string</td>
243
+ <td>&#39;{{maxlength}}자 입력 가능합니다.&#39;</td>
244
+ <td><code>maxlength</code> 및 <code>useMaxLengthMessage=true</code>일 때 적용되는 남은 입력 가능 글자 안내 문구</td>
245
+ </tr>
246
+ <tr>
247
+ <td colspan="2">useMaxLengthMessage</td>
248
+ <td>boolean</td>
249
+ <td>false</td>
250
+ <td>true인 경우에만 <code>textSets.maxLengthMessage</code> 안내 문구 모드 활성화 (기본 카운터는 유지)</td>
251
+ </tr>
221
252
  <tr>
222
253
  <td colspan="2">onChange(value)</td>
223
254
  <td>function</td>
@@ -265,7 +296,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
265
296
  </div>
266
297
 
267
298
 
268
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
299
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
269
300
  </div>
270
301
  </div>
271
302
  </div>
package/styleguide/category/CONTROLS/Picklist(js)/index.html CHANGED
@@ -526,11 +526,13 @@
526
526
  <div class="new-picklist"></div>
527
527
  <div class="new-picklist-v"></div>
528
528
  <div class="new-picklist-cols"></div>
529
+ <div class="new-picklist-tooltip"></div>
529
530
  </div>
530
531
 
531
532
  <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>
532
533
  <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>
533
534
  <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>
535
+ <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>
534
536
  </code></pre>
535
537
  <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> {
536
538
  target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist'</span><span class="token punctuation" >,</span>
@@ -586,6 +588,26 @@
586
588
  width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
587
589
  height<span class="token punctuation" >:</span> <span class="token number" >150</span>
588
590
  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
591
+ 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> {
592
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist-tooltip'</span><span class="token punctuation" >,</span>
593
+ data<span class="token punctuation" >:</span> {
594
+ source<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
595
+ { 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>
596
+ { 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>
597
+ { 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> }
598
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
599
+ target<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span>
600
+ }<span class="token punctuation" >,</span>
601
+ optionTooltip<span class="token punctuation" >:</span> {
602
+ direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
603
+ content<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
604
+ 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>
605
+ }
606
+ }<span class="token punctuation" >,</span>
607
+ direction<span class="token punctuation" >:</span> <span class="token string" >'horizontal'</span><span class="token punctuation" >,</span>
608
+ width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
609
+ height<span class="token punctuation" >:</span> <span class="token number" >150</span>
610
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
589
611
  </code></pre><h3 id="-picklistitem-">데이터 모델 (PicklistItem)</h3>
590
612
  <table class="gn-table is-full is-border">
591
613
  <thead>
@@ -692,6 +714,18 @@
692
714
  <td>150</td>
693
715
  <td>선택항목 영역의 높이</td>
694
716
  </tr>
717
+ <tr>
718
+ <td colspan="2">direction</td>
719
+ <td>string</td>
720
+ <td>&#39;horizontal&#39;</td>
721
+ <td>컴포넌트 방향 (&#39;horizontal&#39;, &#39;vertical&#39;)</td>
722
+ </tr>
723
+ <tr>
724
+ <td colspan="2">optionTooltip</td>
725
+ <td>object</td>
726
+ <td></td>
727
+ <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>
728
+ </tr>
695
729
  <tr>
696
730
  <td colspan="2">hasSourceSearch</td>
697
731
  <td>boolean</td>
@@ -794,7 +828,7 @@
794
828
  </div>
795
829
 
796
830
 
797
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
831
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
798
832
  </div>
799
833
  </div>
800
834
  </div>
package/styleguide/category/CONTROLS/Radio/index.html CHANGED
@@ -189,7 +189,7 @@
189
189
  </div>
190
190
 
191
191
 
192
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
192
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
193
193
  </div>
194
194
  </div>
195
195
  </div>
package/styleguide/category/CONTROLS/Select/index.html CHANGED
@@ -448,7 +448,7 @@
448
448
  </div>
449
449
 
450
450
 
451
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
451
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
452
452
  </div>
453
453
  </div>
454
454
  </div>
package/styleguide/category/CONTROLS/SelectButton(js)/index.html CHANGED
@@ -283,7 +283,7 @@
283
283
  </div>
284
284
 
285
285
 
286
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
286
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
287
287
  </div>
288
288
  </div>
289
289
  </div>
package/styleguide/category/CONTROLS/Slider/index.html CHANGED
@@ -181,7 +181,7 @@
181
181
  </div>
182
182
 
183
183
 
184
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
184
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
185
185
  </div>
186
186
  </div>
187
187
  </div>
package/styleguide/category/CONTROLS/SortableList(js)/index.html CHANGED
@@ -478,7 +478,7 @@
478
478
  </div>
479
479
 
480
480
 
481
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
481
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
482
482
  </div>
483
483
  </div>
484
484
  </div>
package/styleguide/category/CONTROLS/Switch(js)/index.html CHANGED
@@ -337,7 +337,7 @@
337
337
  </div>
338
338
 
339
339
 
340
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
340
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
341
341
  </div>
342
342
  </div>
343
343
  </div>
package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html CHANGED
@@ -472,7 +472,7 @@
472
472
  </div>
473
473
 
474
474
 
475
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
475
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
476
476
  </div>
477
477
  </div>
478
478
  </div>
package/styleguide/category/CONTROLS/Textarea/index.html CHANGED
@@ -177,7 +177,7 @@
177
177
  </div>
178
178
 
179
179
 
180
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
180
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
181
181
  </div>
182
182
  </div>
183
183
  </div>
package/styleguide/category/CONTROLS/Time(js)/index.html CHANGED
@@ -255,7 +255,7 @@
255
255
  </div>
256
256
 
257
257
 
258
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
258
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
259
259
  </div>
260
260
  </div>
261
261
  </div>
package/styleguide/category/ELEMENTS/Box/index.html CHANGED
@@ -162,7 +162,7 @@
162
162
  </div>
163
163
 
164
164
 
165
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
165
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
166
166
  </div>
167
167
  </div>
168
168
  </div>
package/styleguide/category/ELEMENTS/Icon/index.html CHANGED
@@ -350,7 +350,7 @@
350
350
  </div>
351
351
 
352
352
 
353
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
353
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
354
354
  </div>
355
355
  </div>
356
356
  </div>
package/styleguide/category/ELEMENTS/Image/index.html CHANGED
@@ -201,7 +201,7 @@
201
201
  </div>
202
202
 
203
203
 
204
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
204
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
205
205
  </div>
206
206
  </div>
207
207
  </div>
package/styleguide/category/ELEMENTS/List/index.html CHANGED
@@ -384,7 +384,7 @@
384
384
  </div>
385
385
 
386
386
 
387
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
387
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
388
388
  </div>
389
389
  </div>
390
390
  </div>
package/styleguide/category/ELEMENTS/Table/index.html CHANGED
@@ -471,7 +471,7 @@
471
471
  </div>
472
472
 
473
473
 
474
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
474
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
475
475
  </div>
476
476
  </div>
477
477
  </div>
package/styleguide/category/ELEMENTS/Tag/index.html CHANGED
@@ -243,7 +243,7 @@
243
243
  </div>
244
244
 
245
245
 
246
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
246
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
247
247
  </div>
248
248
  </div>
249
249
  </div>
package/styleguide/category/ELEMENTS/Title/index.html CHANGED
@@ -174,7 +174,7 @@
174
174
  </div>
175
175
 
176
176
 
177
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
177
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
178
178
  </div>
179
179
  </div>
180
180
  </div>
package/styleguide/category/LAYOUT/Container/index.html CHANGED
@@ -223,7 +223,7 @@
223
223
  </div>
224
224
 
225
225
 
226
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
226
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
227
227
  </div>
228
228
  </div>
229
229
  </div>
package/styleguide/category/LAYOUT/Grid/index.html CHANGED
@@ -388,7 +388,7 @@
388
388
  </div>
389
389
 
390
390
 
391
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
391
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
392
392
  </div>
393
393
  </div>
394
394
  </div>
package/styleguide/category/LAYOUT/Splitter(js)/index.html CHANGED
@@ -267,7 +267,7 @@
267
267
  </div>
268
268
 
269
269
 
270
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
270
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
271
271
  </div>
272
272
  </div>
273
273
  </div>
package/styleguide/category/UTILITY/index.html CHANGED
@@ -243,7 +243,7 @@
243
243
  </code></pre>
244
244
  <h2 id="text-">Text 변환</h2>
245
245
  <ul>
246
- <li>is-capitalize, is-lowercase, is-uppercase, is-italic, is-underline, is-strike</li>
246
+ <li>is-capitalize, is-lowercase, is-uppercase, is-italic, is-underline, is-strike, is-text-link</li>
247
247
  <li>한글 description 사용 시 size6 이하 사용하지 않는다.</li>
248
248
  </ul>
249
249
  <div class="aigis-preview">
@@ -265,6 +265,9 @@
265
265
  <div class="gn-box is-strike">
266
266
  <h4 class="gn-title is-size4">strike</h4> Ad non deserunt veniam consectetur enim.
267
267
  </div>
268
+ <div class="gn-box is-text-link">
269
+ <h4 class="gn-title is-size4">text link</h4> Link style text (hover: underline + pointer)
270
+ </div>
268
271
  <div class="gn-box">
269
272
  <h4 class="gn-title is-size4">Text Sizes</h4>
270
273
  <p class="has-text-size1">size1 : Fugiat cillum reprehenderit ullamco esse non cillum.</p>
@@ -302,6 +305,10 @@
302
305
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>strike<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>h4</span><span class="token punctuation" >></span></span>
303
306
  Ad non deserunt veniam consectetur enim.
304
307
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
308
+ <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>gn-box is-text-link<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
309
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>text link<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>h4</span><span class="token punctuation" >></span></span>
310
+ Link style text (hover: underline + pointer)
311
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
305
312
  <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>gn-box<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
306
313
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>h4</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-title is-size4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Text Sizes<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>h4</span><span class="token punctuation" >></span></span>
307
314
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>has-text-size1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>size1 : Fugiat cillum reprehenderit ullamco esse non cillum.<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
@@ -463,7 +470,7 @@
463
470
  </div>
464
471
 
465
472
 
466
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
473
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
467
474
  </div>
468
475
  </div>
469
476
  </div>
package/styleguide/category/Utils/index.html CHANGED
@@ -329,7 +329,7 @@ GN<span class="token punctuation" >.</span>util<span class="token punctuation" >
329
329
  </div>
330
330
 
331
331
 
332
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
332
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
333
333
  </div>
334
334
  </div>
335
335
  </div>
package/styleguide/color.html CHANGED
@@ -161,7 +161,7 @@
161
161
  </div>
162
162
  </div>
163
163
 
164
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
164
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
165
165
  </div>
166
166
  </div>
167
167
  </div>
package/styleguide/index.html CHANGED
@@ -161,7 +161,7 @@
161
161
  </div>
162
162
  </div>
163
163
 
164
- <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
164
+ <footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
165
165
  </div>
166
166
  </div>
167
167
  </div>