gnui 1.2.19 → 1.2.20

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 (78) hide show
  1. package/dist/js/gnui.esm.js +339 -134
  2. package/dist/js/gnui.js +339 -134
  3. package/dist/js/gnui.min.js +6 -6
  4. package/dist/styles/default.css +10600 -20758
  5. package/dist/styles/gpi.css +10630 -20788
  6. package/dist/styles/green24.css +11263 -21435
  7. package/dist/styles/insights.css +10616 -20775
  8. package/dist/styles/nac.css +10628 -20795
  9. package/dist/styles/ztnac.css +11263 -21436
  10. package/package.json +3 -2
  11. package/styleguide/assets/components.js +58 -3
  12. package/styleguide/assets/js/gnui.js +339 -134
  13. package/styleguide/assets/js/gnui.min.js +6 -6
  14. package/styleguide/assets/styles/default.css +10600 -20758
  15. package/styleguide/assets/styles/gpi.css +10630 -20788
  16. package/styleguide/assets/styles/green24.css +11263 -21435
  17. package/styleguide/assets/styles/insights.css +10616 -20775
  18. package/styleguide/assets/styles/nac.css +10628 -20795
  19. package/styleguide/assets/styles/ztnac.css +11263 -21436
  20. package/styleguide/category/COLOR/index.html +1 -1
  21. package/styleguide/category/COMPONENT/Alert(js)/index.html +1 -1
  22. package/styleguide/category/COMPONENT/Bignumber/index.html +1 -1
  23. package/styleguide/category/COMPONENT/Breadcrumb/index.html +1 -1
  24. package/styleguide/category/COMPONENT/Calendar(js)/index.html +1 -1
  25. package/styleguide/category/COMPONENT/Card/index.html +1 -1
  26. package/styleguide/category/COMPONENT/Chart(js)/index.html +1 -1
  27. package/styleguide/category/COMPONENT/Datagrid(js)/index.html +1 -1
  28. package/styleguide/category/COMPONENT/Datalist(js)/index.html +1 -1
  29. package/styleguide/category/COMPONENT/Growl(js)/index.html +1 -1
  30. package/styleguide/category/COMPONENT/JsonView(js)/index.html +1 -1
  31. package/styleguide/category/COMPONENT/Loader(js)/index.html +1 -1
  32. package/styleguide/category/COMPONENT/MenuButton(js)/index.html +169 -21
  33. package/styleguide/category/COMPONENT/Message(js)/index.html +1 -1
  34. package/styleguide/category/COMPONENT/Modal(js)/index.html +1 -1
  35. package/styleguide/category/COMPONENT/Pagination(js)/index.html +1 -1
  36. package/styleguide/category/COMPONENT/Panel/index.html +1 -1
  37. package/styleguide/category/COMPONENT/Progressbar(js)/index.html +1 -1
  38. package/styleguide/category/COMPONENT/Tab(js)/index.html +1 -1
  39. package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +1 -1
  40. package/styleguide/category/COMPONENT/Tooltip(js)/index.html +1 -1
  41. package/styleguide/category/COMPONENT/Tree(js)/index.html +16 -1
  42. package/styleguide/category/CONTROLS/Button(js)/index.html +1 -1
  43. package/styleguide/category/CONTROLS/Checkbox/index.html +1 -1
  44. package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +1 -1
  45. package/styleguide/category/CONTROLS/Datepicker(js)/index.html +1 -1
  46. package/styleguide/category/CONTROLS/Dropdown(js)/index.html +67 -10
  47. package/styleguide/category/CONTROLS/File/index.html +1 -1
  48. package/styleguide/category/CONTROLS/Form/Control/index.html +1 -1
  49. package/styleguide/category/CONTROLS/Form/Field/index.html +2 -2
  50. package/styleguide/category/CONTROLS/Form/Plain/index.html +2 -2
  51. package/styleguide/category/CONTROLS/Input/index.html +1 -1
  52. package/styleguide/category/CONTROLS/MultiText(js)/index.html +1 -1
  53. package/styleguide/category/CONTROLS/Picklist(js)/index.html +67 -13
  54. package/styleguide/category/CONTROLS/Radio/index.html +1 -1
  55. package/styleguide/category/CONTROLS/Select/index.html +1 -1
  56. package/styleguide/category/CONTROLS/SelectButton(js)/index.html +2 -2
  57. package/styleguide/category/CONTROLS/Slider/index.html +1 -1
  58. package/styleguide/category/CONTROLS/SortableList(js)/index.html +2 -2
  59. package/styleguide/category/CONTROLS/Switch(js)/index.html +1 -1
  60. package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +1 -1
  61. package/styleguide/category/CONTROLS/Textarea/index.html +2 -2
  62. package/styleguide/category/CONTROLS/Time(js)/index.html +2 -2
  63. package/styleguide/category/ELEMENTS/Box/index.html +1 -1
  64. package/styleguide/category/ELEMENTS/Icon/index.html +1 -1
  65. package/styleguide/category/ELEMENTS/Image/index.html +1 -1
  66. package/styleguide/category/ELEMENTS/List/index.html +1 -1
  67. package/styleguide/category/ELEMENTS/Table/index.html +1 -1
  68. package/styleguide/category/ELEMENTS/Tag/index.html +1 -1
  69. package/styleguide/category/ELEMENTS/Title/index.html +1 -1
  70. package/styleguide/category/LAYOUT/Container/index.html +1 -1
  71. package/styleguide/category/LAYOUT/Grid/index.html +1 -1
  72. package/styleguide/category/LAYOUT/Splitter(js)/index.html +1 -1
  73. package/styleguide/category/UTILITY/index.html +1 -1
  74. package/styleguide/category/Utils/index.html +1 -1
  75. package/styleguide/color.html +1 -1
  76. package/styleguide/index.html +1 -1
  77. package/styleguide/tag/javascript/index.html +4446 -4172
  78. package/styleguide/tag/v.0.1.0/index.html +5259 -4985
package/styleguide/category/CONTROLS/Dropdown(js)/index.html CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  <div class="aigis-module Dropdown">
124
124
  <h2 class="aigis-module__heading" id="Dropdown">Dropdown</h2>
125
- <div class="aigis-module__filepath">/scss/components/dropdown.scss</div>
125
+ <div class="aigis-module__filepath">/scss/controls/dropdown.scss</div>
126
126
  <div class="aigis-tags">
127
127
 
128
128
  <span class="gn-tag">v.0.1.0</span>
@@ -854,6 +854,9 @@
854
854
  <option value="item5" data-desc="항목5 설명">항목5</option>
855
855
  </select>
856
856
 
857
+ <select class="new-dropdown5" name="dropdown5">
858
+ </select>
859
+
857
860
 
858
861
  </div>
859
862
 
@@ -877,6 +880,9 @@
877
880
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item5<span class="token punctuation" >"</span></span> <span class="token attr-name" >data-desc</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>항목5 설명<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목5<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
878
881
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
879
882
 
883
+ <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>
884
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
885
+
880
886
 
881
887
  </code></pre>
882
888
  <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> {
@@ -950,7 +956,63 @@
950
956
  hasSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
951
957
  color<span class="token punctuation" >:</span> <span class="token string" >'danger'</span>
952
958
  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
953
- </code></pre><table class="gn-table is-full is-border">
959
+ 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> {
960
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown5'</span><span class="token punctuation" >,</span>
961
+ onChange<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >,</span> values<span class="token punctuation" >)</span> {
962
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 값은 [ '</span> <span class="token operator" >+</span> val <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
963
+ }<span class="token punctuation" >,</span>
964
+ width<span class="token punctuation" >:</span> <span class="token string" >'300px'</span><span class="token punctuation" >,</span>
965
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
966
+ { value<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목1'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리A'</span><span class="token punctuation" >,</span> <span class="token string" >'1000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
967
+ { value<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목2'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리B'</span><span class="token punctuation" >,</span> <span class="token string" >'2000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
968
+ { value<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목3'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리C'</span><span class="token punctuation" >,</span> <span class="token string" >'3000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
969
+ { value<span class="token punctuation" >:</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목4'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리A'</span><span class="token punctuation" >,</span> <span class="token string" >'4000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
970
+ { 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> }
971
+ <span class="token punctuation" >]</span>
972
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
973
+ </code></pre><h3 id="-dropdownitem-">데이터 모델 (DropdownItem)</h3>
974
+ <table class="gn-table is-full is-border">
975
+ <thead>
976
+ <th>필드</th>
977
+ <th>type</th>
978
+ <th>필수</th>
979
+ <th>description</th>
980
+ </thead>
981
+ <tbody>
982
+ <tr>
983
+ <td>value</td>
984
+ <td>string</td>
985
+ <td>Y</td>
986
+ <td>항목 값</td>
987
+ </tr>
988
+ <tr>
989
+ <td>text</td>
990
+ <td>string</td>
991
+ <td>N</td>
992
+ <td>옵션 텍스트</td>
993
+ </tr>
994
+ <tr>
995
+ <td>cols</td>
996
+ <td>string[]</td>
997
+ <td>N</td>
998
+ <td>다중 컬럼 표시 값 배열</td>
999
+ </tr>
1000
+ <tr>
1001
+ <td>html</td>
1002
+ <td>string</td>
1003
+ <td>N</td>
1004
+ <td>옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)</td>
1005
+ </tr>
1006
+ <tr>
1007
+ <td>icon</td>
1008
+ <td>string</td>
1009
+ <td>N</td>
1010
+ <td><a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name</td>
1011
+ </tr>
1012
+ </tbody>
1013
+ </table>
1014
+
1015
+ <table class="gn-table is-full is-border">
954
1016
  <thead>
955
1017
  <th colspan="2">name</th>
956
1018
  <th>type</th>
@@ -985,14 +1047,9 @@
985
1047
  </tr>
986
1048
  <tr>
987
1049
  <td colspan="2">data</td>
988
- <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
1050
+ <td>DropdownItem[]</td>
989
1051
  <td></td>
990
- <td>
991
- value: 항목 값<br/>
992
- text: 옵션 텍스트<br/>
993
- html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br/>
994
- icon : <a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name
995
- </td>
1052
+ <td>dropdown에 표시할 데이터 배열<br/>- DropdownItem 참조<br/><br/><strong>참고:</strong> 표시 우선순위는 html &gt; cols &gt; text 입니다. html 항목은 text가 있는 경우만 선택 가능하며, html이 있으면 cols는 무시됩니다.</td>
996
1053
  </tr>
997
1054
  <tr>
998
1055
  <td colspan="2">value</td>
@@ -1104,7 +1161,7 @@
1104
1161
  </div>
1105
1162
 
1106
1163
 
1107
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
1164
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
1108
1165
  </div>
1109
1166
  </div>
1110
1167
  </div>
package/styleguide/category/CONTROLS/File/index.html CHANGED
@@ -304,7 +304,7 @@
304
304
  </div>
305
305
 
306
306
 
307
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
307
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
308
308
  </div>
309
309
  </div>
310
310
  </div>
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/01/25 22:45</footer>
222
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
223
223
  </div>
224
224
  </div>
225
225
  </div>
package/styleguide/category/CONTROLS/Form/Field/index.html CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  <div class="aigis-module Field">
124
124
  <h2 class="aigis-module__heading" id="Field">Field</h2>
125
- <div class="aigis-module__filepath">/scss/controls/form.scss</div>
125
+ <div class="aigis-module__filepath">/scss/controls/field.scss</div>
126
126
  <div class="aigis-tags">
127
127
 
128
128
  <span class="gn-tag">v.0.1.0</span>
@@ -246,7 +246,7 @@
246
246
  </div>
247
247
 
248
248
 
249
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
249
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
250
250
  </div>
251
251
  </div>
252
252
  </div>
package/styleguide/category/CONTROLS/Form/Plain/index.html CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  <div class="aigis-module Plain">
124
124
  <h2 class="aigis-module__heading" id="Plain">Plain</h2>
125
- <div class="aigis-module__filepath">/scss/controls/form.scss</div>
125
+ <div class="aigis-module__filepath">/scss/controls/plain.scss</div>
126
126
  <div class="aigis-tags">
127
127
 
128
128
  <span class="gn-tag">v.0.1.0</span>
@@ -185,7 +185,7 @@
185
185
  </div>
186
186
 
187
187
 
188
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
188
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
325
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
326
326
  </div>
327
327
  </div>
328
328
  </div>
package/styleguide/category/CONTROLS/MultiText(js)/index.html CHANGED
@@ -265,7 +265,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
265
265
  </div>
266
266
 
267
267
 
268
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
268
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
269
269
  </div>
270
270
  </div>
271
271
  </div>
package/styleguide/category/CONTROLS/Picklist(js)/index.html CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  <div class="aigis-module Picklist">
124
124
  <h2 class="aigis-module__heading" id="Picklist">Picklist</h2>
125
- <div class="aigis-module__filepath">/scss/components/picklist.scss</div>
125
+ <div class="aigis-module__filepath">/scss/controls/picklist.scss</div>
126
126
  <div class="aigis-tags">
127
127
 
128
128
  <span class="gn-tag">v.0.1.0</span>
@@ -525,10 +525,12 @@
525
525
 
526
526
  <div class="new-picklist"></div>
527
527
  <div class="new-picklist-v"></div>
528
+ <div class="new-picklist-cols"></div>
528
529
  </div>
529
530
 
530
531
  <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>
531
532
  <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
+ <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>
532
534
  </code></pre>
533
535
  <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> {
534
536
  target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist'</span><span class="token punctuation" >,</span>
@@ -568,7 +570,65 @@
568
570
  width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
569
571
  height<span class="token punctuation" >:</span> <span class="token number" >150</span>
570
572
  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
571
- </code></pre><table class="gn-table is-full is-border">
573
+ 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> {
574
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist-cols'</span><span class="token punctuation" >,</span>
575
+ data<span class="token punctuation" >:</span> {
576
+ source<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
577
+ { value<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'item1'</span><span class="token punctuation" >,</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span> <span class="token string" >'상세정보1'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
578
+ { value<span class="token punctuation" >:</span> <span class="token string" >'항목2'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'item2'</span><span class="token punctuation" >,</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span> <span class="token string" >'상세정보2'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
579
+ { value<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'item3'</span><span class="token punctuation" >,</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span> <span class="token string" >'상세정보3'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
580
+ { value<span class="token punctuation" >:</span> <span class="token string" >'항목4'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'item4'</span><span class="token punctuation" >,</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span> <span class="token string" >'상세정보4'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
581
+ { 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" >'item5'</span><span class="token punctuation" >,</span> <span class="token string" >'5'</span><span class="token punctuation" >,</span> <span class="token string" >'상세정보5'</span><span class="token punctuation" >]</span> }
582
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
583
+ target<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span>
584
+ }<span class="token punctuation" >,</span>
585
+ direction<span class="token punctuation" >:</span> <span class="token string" >'vertical'</span><span class="token punctuation" >,</span>
586
+ width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
587
+ height<span class="token punctuation" >:</span> <span class="token number" >150</span>
588
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
589
+ </code></pre><h3 id="-picklistitem-">데이터 모델 (PicklistItem)</h3>
590
+ <table class="gn-table is-full is-border">
591
+ <thead>
592
+ <th>필드</th>
593
+ <th>type</th>
594
+ <th>필수</th>
595
+ <th>description</th>
596
+ </thead>
597
+ <tbody>
598
+ <tr>
599
+ <td>value</td>
600
+ <td>string</td>
601
+ <td>Y</td>
602
+ <td>항목 값</td>
603
+ </tr>
604
+ <tr>
605
+ <td>text</td>
606
+ <td>string</td>
607
+ <td>N</td>
608
+ <td>단일 컬럼 표시 텍스트</td>
609
+ </tr>
610
+ <tr>
611
+ <td>cols</td>
612
+ <td>string[]</td>
613
+ <td>N</td>
614
+ <td>다중 컬럼 표시 값 배열</td>
615
+ </tr>
616
+ <tr>
617
+ <td>html</td>
618
+ <td>string</td>
619
+ <td>N</td>
620
+ <td>옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)</td>
621
+ </tr>
622
+ <tr>
623
+ <td>icon</td>
624
+ <td>string</td>
625
+ <td>N</td>
626
+ <td><a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name</td>
627
+ </tr>
628
+ </tbody>
629
+ </table>
630
+
631
+ <table class="gn-table is-full is-border">
572
632
  <thead>
573
633
  <th colspan="2">name</th>
574
634
  <th>type</th>
@@ -585,21 +645,15 @@
585
645
  <tr>
586
646
  <td rowspan="2">data</td>
587
647
  <td>source</td>
588
- <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
648
+ <td>PicklistItem[]</td>
589
649
  <td></td>
590
- <td>source 항목 배열<br>
591
- html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br>
592
- icon : <a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name
593
- </td>
650
+ <td>source 항목 배열<br>- PicklistItem 참조<br><br><strong>참고:</strong> 표시 우선순위는 html &gt; cols &gt; text 입니다. html 항목은 text가 있는 경우만 선택 가능하며, html이 있으면 cols는 무시됩니다.</td>
594
651
  </tr>
595
652
  <tr>
596
653
  <td>target</td>
597
- <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
654
+ <td>PicklistItem[]</td>
598
655
  <td></td>
599
- <td>target 항목 배열<br>
600
- html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br>
601
- icon : <a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name
602
- </td>
656
+ <td>target 항목 배열<br>- PicklistItem 참조<br><br><strong>참고:</strong> 표시 우선순위는 html &gt; cols &gt; text 입니다. html 항목은 text가 있는 경우만 선택 가능하며, html이 있으면 cols는 무시됩니다.</td>
603
657
  </tr>
604
658
  <tr>
605
659
  <td rowspan="3">textSets</td>
@@ -740,7 +794,7 @@
740
794
  </div>
741
795
 
742
796
 
743
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
797
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
744
798
  </div>
745
799
  </div>
746
800
  </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/01/25 22:45</footer>
192
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
451
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
452
452
  </div>
453
453
  </div>
454
454
  </div>
package/styleguide/category/CONTROLS/SelectButton(js)/index.html CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  <div class="aigis-module SelectButton">
124
124
  <h2 class="aigis-module__heading" id="SelectButton">SelectButton</h2>
125
- <div class="aigis-module__filepath">/scss/controls/button.scss</div>
125
+ <div class="aigis-module__filepath">/scss/controls/selectbutton.scss</div>
126
126
  <div class="aigis-tags">
127
127
 
128
128
  <span class="gn-tag">v.0.1.0</span>
@@ -283,7 +283,7 @@
283
283
  </div>
284
284
 
285
285
 
286
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
286
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
184
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
185
185
  </div>
186
186
  </div>
187
187
  </div>
package/styleguide/category/CONTROLS/SortableList(js)/index.html CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  <div class="aigis-module SortableList">
124
124
  <h2 class="aigis-module__heading" id="SortableList">SortableList</h2>
125
- <div class="aigis-module__filepath">/scss/components/sortablelist.scss</div>
125
+ <div class="aigis-module__filepath">/scss/controls/sortablelist.scss</div>
126
126
  <div class="aigis-tags">
127
127
 
128
128
  <span class="gn-tag">v.0.1.0</span>
@@ -478,7 +478,7 @@
478
478
  </div>
479
479
 
480
480
 
481
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
481
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
340
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
475
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
476
476
  </div>
477
477
  </div>
478
478
  </div>
package/styleguide/category/CONTROLS/Textarea/index.html CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  <div class="aigis-module Textarea">
124
124
  <h2 class="aigis-module__heading" id="Textarea">Textarea</h2>
125
- <div class="aigis-module__filepath">/scss/controls/input.scss</div>
125
+ <div class="aigis-module__filepath">/scss/controls/textarea.scss</div>
126
126
  <div class="aigis-tags">
127
127
 
128
128
  <span class="gn-tag">v.0.1.0</span>
@@ -177,7 +177,7 @@
177
177
  </div>
178
178
 
179
179
 
180
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
180
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
181
181
  </div>
182
182
  </div>
183
183
  </div>
package/styleguide/category/CONTROLS/Time(js)/index.html CHANGED
@@ -122,7 +122,7 @@
122
122
 
123
123
  <div class="aigis-module Time">
124
124
  <h2 class="aigis-module__heading" id="Time">Time</h2>
125
- <div class="aigis-module__filepath">/scss/components/calendar.scss</div>
125
+ <div class="aigis-module__filepath">/scss/controls/time.scss</div>
126
126
  <div class="aigis-tags">
127
127
 
128
128
  <span class="gn-tag">v.0.1.0</span>
@@ -255,7 +255,7 @@
255
255
  </div>
256
256
 
257
257
 
258
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
258
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
165
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
353
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
204
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
387
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
474
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
246
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
177
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
226
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
391
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
270
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
271
271
  </div>
272
272
  </div>
273
273
  </div>
package/styleguide/category/UTILITY/index.html CHANGED
@@ -463,7 +463,7 @@
463
463
  </div>
464
464
 
465
465
 
466
- <footer class="aigis-footer">Last update at 2026/01/25 22:45</footer>
466
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
467
467
  </div>
468
468
  </div>
469
469
  </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/01/25 22:45</footer>
332
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
164
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</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/01/25 22:45</footer>
164
+ <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
165
165
  </div>
166
166
  </div>
167
167
  </div>