gnui 1.2.17 → 1.2.18

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 +724 -92
  2. package/dist/js/gnui.js +724 -92
  3. package/dist/js/gnui.min.js +6 -6
  4. package/dist/styles/default.css +1019 -108
  5. package/dist/styles/gpi.css +1019 -108
  6. package/dist/styles/green24.css +1230 -289
  7. package/dist/styles/insights.css +1019 -108
  8. package/dist/styles/nac.css +969 -58
  9. package/dist/styles/ztnac.css +1206 -265
  10. package/package.json +1 -1
  11. package/styleguide/assets/components.js +216 -9
  12. package/styleguide/assets/js/gnui.js +724 -92
  13. package/styleguide/assets/js/gnui.min.js +6 -6
  14. package/styleguide/assets/styles/default.css +1019 -108
  15. package/styleguide/assets/styles/gpi.css +1019 -108
  16. package/styleguide/assets/styles/green24.css +1230 -289
  17. package/styleguide/assets/styles/insights.css +1019 -108
  18. package/styleguide/assets/styles/nac.css +969 -58
  19. package/styleguide/assets/styles/ztnac.css +1206 -265
  20. package/styleguide/category/COLOR/index.html +2 -2
  21. package/styleguide/category/COMPONENT/Alert(js)/index.html +2 -2
  22. package/styleguide/category/COMPONENT/Bignumber/index.html +2 -2
  23. package/styleguide/category/COMPONENT/Breadcrumb/index.html +2 -2
  24. package/styleguide/category/COMPONENT/Calendar(js)/index.html +2 -2
  25. package/styleguide/category/COMPONENT/Card/index.html +2 -2
  26. package/styleguide/category/COMPONENT/Chart(js)/index.html +2 -2
  27. package/styleguide/category/COMPONENT/Datagrid(js)/index.html +136 -9
  28. package/styleguide/category/COMPONENT/Datalist(js)/index.html +2 -2
  29. package/styleguide/category/COMPONENT/Growl(js)/index.html +2 -2
  30. package/styleguide/category/COMPONENT/JsonView(js)/index.html +2 -2
  31. package/styleguide/category/COMPONENT/Loader(js)/index.html +21 -4
  32. package/styleguide/category/COMPONENT/MenuButton(js)/index.html +74 -6
  33. package/styleguide/category/COMPONENT/Message(js)/index.html +2 -2
  34. package/styleguide/category/COMPONENT/Modal(js)/index.html +2 -2
  35. package/styleguide/category/COMPONENT/Pagination(js)/index.html +2 -2
  36. package/styleguide/category/COMPONENT/Panel/index.html +2 -2
  37. package/styleguide/category/COMPONENT/Progressbar(js)/index.html +2 -2
  38. package/styleguide/category/COMPONENT/Tab(js)/index.html +2 -2
  39. package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +2 -2
  40. package/styleguide/category/COMPONENT/Tooltip(js)/index.html +2 -2
  41. package/styleguide/category/COMPONENT/Tree(js)/index.html +2 -2
  42. package/styleguide/category/CONTROLS/Button(js)/index.html +2 -2
  43. package/styleguide/category/CONTROLS/Checkbox/index.html +2 -2
  44. package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +2 -2
  45. package/styleguide/category/CONTROLS/Datepicker(js)/index.html +2 -2
  46. package/styleguide/category/CONTROLS/Dropdown(js)/index.html +2 -2
  47. package/styleguide/category/CONTROLS/File/index.html +2 -2
  48. package/styleguide/category/CONTROLS/Form/Control/index.html +2 -2
  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 +2 -2
  52. package/styleguide/category/CONTROLS/MultiText(js)/index.html +2 -2
  53. package/styleguide/category/CONTROLS/Picklist(js)/index.html +28 -18
  54. package/styleguide/category/CONTROLS/Radio/index.html +2 -2
  55. package/styleguide/category/CONTROLS/Select/index.html +2 -2
  56. package/styleguide/category/CONTROLS/SelectButton(js)/index.html +2 -2
  57. package/styleguide/category/CONTROLS/Slider/index.html +2 -2
  58. package/styleguide/category/CONTROLS/SortableList(js)/index.html +487 -0
  59. package/styleguide/category/CONTROLS/Switch(js)/index.html +2 -2
  60. package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +2 -2
  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 +2 -2
  64. package/styleguide/category/ELEMENTS/Icon/index.html +2 -2
  65. package/styleguide/category/ELEMENTS/Image/index.html +2 -2
  66. package/styleguide/category/ELEMENTS/List/index.html +2 -2
  67. package/styleguide/category/ELEMENTS/Table/index.html +2 -2
  68. package/styleguide/category/ELEMENTS/Tag/index.html +2 -2
  69. package/styleguide/category/ELEMENTS/Title/index.html +2 -2
  70. package/styleguide/category/LAYOUT/Container/index.html +2 -2
  71. package/styleguide/category/LAYOUT/Grid/index.html +2 -2
  72. package/styleguide/category/LAYOUT/Splitter(js)/index.html +2 -2
  73. package/styleguide/category/UTILITY/index.html +2 -2
  74. package/styleguide/category/Utils/index.html +2 -2
  75. package/styleguide/color.html +2 -2
  76. package/styleguide/index.html +2 -2
  77. package/styleguide/tag/javascript/index.html +608 -31
  78. package/styleguide/tag/v.0.1.0/index.html +608 -31
package/styleguide/tag/javascript/index.html CHANGED
@@ -56,7 +56,7 @@
56
56
  window.Gn = window.gnui;
57
57
 
58
58
  Gn.ready(function () {
59
- var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Datalist(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Loader(js),COMPONENT/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination(js),COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,CONTROLS/Time(js),ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
59
+ var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Datalist(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Loader(js),COMPONENT/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination(js),COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/SortableList(js),CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,CONTROLS/Time(js),ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
60
60
  var jsComps = ''.split(',');
61
61
  delete leftMenu.Utils;
62
62
  Gn.util.append('.left-menu', renderTree(leftMenu));
@@ -1102,16 +1102,24 @@
1102
1102
 
1103
1103
  <div class="new-grid"></div>
1104
1104
 
1105
- <div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
1105
+ <div style="width: 100%; height: 100px; overflow-x: auto; margin-top: 20px;">
1106
1106
  <div class="new-grid2"></div>
1107
1107
  </div>
1108
+
1109
+ <div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
1110
+ <div class="new-grid3"></div>
1111
+ </div>
1108
1112
  </div>
1109
1113
 
1110
1114
  <pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
1111
1115
 
1112
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >350</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
1116
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >100</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
1113
1117
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
1114
1118
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
1119
+
1120
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >350</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
1121
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
1122
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
1115
1123
  </code></pre>
1116
1124
  <pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
1117
1125
  target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid'</span><span class="token punctuation" >,</span>
@@ -1223,19 +1231,122 @@
1223
1231
  }<span class="token punctuation" >)</span>
1224
1232
  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
1225
1233
  target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid2'</span><span class="token punctuation" >,</span>
1234
+ headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
1235
+ {
1236
+ label<span class="token punctuation" >:</span> <span class="token string" >'no'</span><span class="token punctuation" >,</span>
1237
+ key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
1238
+ onSelect<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
1239
+ <span class="token operator" >/</span><span class="token operator" >/</span> eslint<span class="token operator" >-</span>disable<span class="token operator" >-</span><span class="token keyword" >next</span><span class="token operator" >-</span>line prefer<span class="token operator" >-</span>rest<span class="token operator" >-</span>params
1240
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>arguments<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
1241
+ }<span class="token punctuation" >,</span>
1242
+ template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
1243
+ return <span class="token string" >'&lt;span>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span><span class="token comment" spellcheck="true">;</span>
1244
+ }<span class="token punctuation" >,</span>
1245
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1246
+ sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1247
+ sort<span class="token punctuation" >:</span> <span class="token string" >'asc'</span>
1248
+ }<span class="token punctuation" >,</span>
1249
+ {
1250
+ label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
1251
+ key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
1252
+ style<span class="token punctuation" >:</span> {
1253
+ width<span class="token punctuation" >:</span> <span class="token string" >'250px'</span>
1254
+ }<span class="token punctuation" >,</span>
1255
+ className<span class="token punctuation" >:</span> <span class="token string" >'has-text-right'</span><span class="token punctuation" >,</span>
1256
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1257
+ bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
1258
+ sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
1259
+ }<span class="token punctuation" >,</span>
1260
+ {
1261
+ label<span class="token punctuation" >:</span> <span class="token string" >'날짜'</span><span class="token punctuation" >,</span>
1262
+ key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
1263
+ style<span class="token punctuation" >:</span> {
1264
+ width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span>
1265
+ }<span class="token punctuation" >,</span>
1266
+ className<span class="token punctuation" >:</span> <span class="token string" >'has-text-center'</span><span class="token punctuation" >,</span>
1267
+ bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span>
1268
+ }
1269
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
1270
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
1271
+ {
1272
+ number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
1273
+ title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
1274
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
1275
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
1276
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
1277
+ {
1278
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-1'</span><span class="token punctuation" >,</span>
1279
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-하나'</span><span class="token punctuation" >,</span>
1280
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
1281
+ }<span class="token punctuation" >,</span>
1282
+ {
1283
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-2'</span><span class="token punctuation" >,</span>
1284
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-둘'</span><span class="token punctuation" >,</span>
1285
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
1286
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
1287
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
1288
+ {
1289
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1'</span><span class="token punctuation" >,</span>
1290
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1'</span><span class="token punctuation" >,</span>
1291
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
1292
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
1293
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
1294
+ {
1295
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1-1'</span><span class="token punctuation" >,</span>
1296
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1-1'</span><span class="token punctuation" >,</span>
1297
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
1298
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
1299
+ }
1300
+ <span class="token punctuation" >]</span>
1301
+ }
1302
+ <span class="token punctuation" >]</span>
1303
+ }
1304
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
1305
+ color<span class="token punctuation" >:</span> <span class="token string" >'is-danger-light'</span>
1306
+ }<span class="token punctuation" >,</span>
1307
+ {
1308
+ number<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
1309
+ title<span class="token punctuation" >:</span> <span class="token string" >'둘'</span><span class="token punctuation" >,</span>
1310
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
1311
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span>
1312
+ }
1313
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
1314
+ hasHeader<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
1315
+ hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1316
+ hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1317
+ textSets<span class="token punctuation" >:</span> {
1318
+ deleteConfirmMessage<span class="token punctuation" >:</span> <span class="token string" >'파일을 삭제하시겠습니까?'</span>
1319
+ }<span class="token punctuation" >,</span>
1320
+ <span class="token operator" >/</span><span class="token operator" >/</span> onDelete 에서 <span class="token boolean" >false</span> 를 반환하면 해당 행 삭제를 취소할 수 있다<span class="token punctuation" >.</span>
1321
+ onDelete<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>data<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> {
1322
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>data<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
1323
+ <span class="token operator" >/</span><span class="token operator" >/</span> 예<span class="token punctuation" >)</span> 특정 조건에 따라 삭제 취소
1324
+ <span class="token operator" >/</span><span class="token operator" >/</span> <span class="token keyword" >if</span> <span class="token punctuation" >(</span>index <span class="token operator" >==</span><span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >)</span> {
1325
+ <span class="token operator" >/</span><span class="token operator" >/</span> return <span class="token boolean" >false</span><span class="token comment" spellcheck="true">;</span>
1326
+ <span class="token operator" >/</span><span class="token operator" >/</span> }
1327
+ }
1328
+ }<span class="token punctuation" >)</span>
1329
+ Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
1330
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid3'</span><span class="token punctuation" >,</span>
1226
1331
  headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
1227
1332
  {
1228
1333
  label<span class="token punctuation" >:</span> <span class="token string" >'row data numbers'</span><span class="token punctuation" >,</span>
1229
1334
  key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
1230
1335
  style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span> }<span class="token punctuation" >,</span>
1231
1336
  sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1232
- draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
1337
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1338
+ template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
1339
+ return <span class="token string" >'&lt;span>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span><span class="token comment" spellcheck="true">;</span>
1340
+ }
1233
1341
  }<span class="token punctuation" >,</span>
1234
1342
  {
1235
1343
  label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
1236
1344
  key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
1237
1345
  sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1238
- draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
1346
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1347
+ template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
1348
+ return <span class="token string" >'&lt;span>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span><span class="token comment" spellcheck="true">;</span>
1349
+ }
1239
1350
  }<span class="token punctuation" >,</span>
1240
1351
  {
1241
1352
  label<span class="token punctuation" >:</span> <span class="token string" >'날짜를 표시하는 컬럼입니다'</span><span class="token punctuation" >,</span>
@@ -1298,8 +1409,6 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
1298
1409
  paginator<span class="token punctuation" >:</span> {
1299
1410
  rows<span class="token punctuation" >:</span> <span class="token number" >30</span>
1300
1411
  }<span class="token punctuation" >,</span>
1301
- hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1302
- fixHeader<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
1303
1412
  onChange<span class="token punctuation" >:</span> updatedData <span class="token operator" >=</span><span class="token operator" >></span> {
1304
1413
  console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>updatedData<span class="token punctuation" >)</span>
1305
1414
  }
@@ -1411,7 +1520,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
1411
1520
  <b>color:is-warning-light</b> =&gt; 행의 색 변경</td>
1412
1521
  </tr>
1413
1522
  <tr>
1414
- <td rowspan="3">textSets</td>
1523
+ <td rowspan="4">textSets</td>
1415
1524
  <td>noData</td>
1416
1525
  <td>string</td>
1417
1526
  <td>No records available.</td>
@@ -1429,6 +1538,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
1429
1538
  <td></td>
1430
1539
  <td>삭제버튼 헤더표시문구</td>
1431
1540
  </tr>
1541
+ <tr>
1542
+ <td>deleteConfirmMessage</td>
1543
+ <td>string</td>
1544
+ <td></td>
1545
+ <td>삭제 확인 창 표시문구 - 삭제 버튼 클릭시 확인 창 출력</td>
1546
+ </tr>
1432
1547
  <tr>
1433
1548
  <td colspan="2">childField</td>
1434
1549
  <td>string</td>
@@ -1453,6 +1568,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
1453
1568
  <td>false</td>
1454
1569
  <td>삭제버튼 생성 여부</td>
1455
1570
  </tr>
1571
+ <tr>
1572
+ <td colspan="2">hasHeader</td>
1573
+ <td>boolean</td>
1574
+ <td>true</td>
1575
+ <td>헤더 생성 여부</td>
1576
+ </tr>
1456
1577
  <tr>
1457
1578
  <td colspan="2">readonly</td>
1458
1579
  <td>boolean</td>
@@ -1550,6 +1671,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
1550
1671
  <td></td>
1551
1672
  <td>이동, 삭제 등의 데이터 변경이 있는 경우, 변경된 데이터를 가져오기 위한 이벤트핸들러</td>
1552
1673
  </tr>
1674
+ <tr>
1675
+ <td colspan="2">onDelete</td>
1676
+ <td>function(deletedData, index)</td>
1677
+ <td>deletedData, index 를 인자로 받으며, false 를 반환하면 해당 행 삭제를 취소한다.</td>
1678
+ <td>삭제 버튼 클릭 시 삭제 대상 데이터와 인덱스를 받을 수 있는 이벤트핸들러<br>onChange 보다 먼저 동작하며, onDelete 에서 false 를 반환하면 실제 삭제 및 onChange 호출이 수행되지 않는다.</td>
1679
+ </tr>
1553
1680
  </tbody>
1554
1681
  </table>
1555
1682
 
@@ -3218,13 +3345,30 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
3218
3345
  <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-loader is-danger<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>
3219
3346
  <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-loader is-info<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>
3220
3347
  </code></pre>
3348
+ <div class="aigis-preview">
3349
+ <div class="gn-loader is-inline"></div>
3350
+ <div class="gn-loader is-inline is-success"></div>
3351
+ <div class="gn-loader is-inline is-warning"></div>
3352
+ <div class="gn-loader is-inline is-danger"></div>
3353
+ <div class="gn-loader is-inline is-info"></div>
3354
+ <div class="gn-loader is-inline is-primary"></div></div>
3355
+
3356
+ <pre><code class="language-html"><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-loader is-inline<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>
3357
+ <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-loader is-inline is-success<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>
3358
+ <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-loader is-inline is-warning<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>
3359
+ <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-loader is-inline is-danger<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>
3360
+ <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-loader is-inline is-info<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>
3361
+ <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-loader is-inline is-primary<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>
3362
+ </code></pre>
3221
3363
  <h3 id="-">타입</h3>
3222
3364
  <div class="aigis-preview">
3223
3365
  <div class="gn-loader is-bounce"></div><br>
3224
- <div class="gn-loader is-move"></div></div>
3366
+ <div class="gn-loader is-move"></div>
3367
+ <div class="gn-loader is-inline"></div><br></div>
3225
3368
 
3226
3369
  <pre><code class="language-html"><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-loader is-bounce<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>br</span><span class="token punctuation" >></span></span>
3227
3370
  <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-loader is-move<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>
3371
+ <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-loader is-inline<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>br</span><span class="token punctuation" >></span></span>
3228
3372
  </code></pre>
3229
3373
  <h3 id="-">생성 옵션</h3>
3230
3374
  <div class="aigis-preview">
@@ -3286,7 +3430,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
3286
3430
  <td colspan="2">type</td>
3287
3431
  <td>string</td>
3288
3432
  <td></td>
3289
- <td>&#39;bounce&#39;,&#39;move&#39;,&#39;circle&#39;</td>
3433
+ <td>&#39;inline&#39;,&#39;bounce&#39;,&#39;move&#39;,&#39;</td>
3290
3434
  </tr>
3291
3435
  <tr>
3292
3436
  <td colspan="2">positionX</td>
@@ -4440,22 +4584,26 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
4440
4584
  <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>
4441
4585
  </code></pre>
4442
4586
  <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> {
4443
- target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist'</span><span class="token punctuation" >,</span>
4444
- data <span class="token punctuation" >:</span> {
4587
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist'</span><span class="token punctuation" >,</span>
4588
+ data<span class="token punctuation" >:</span> {
4445
4589
  source<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
4446
- { value<span class="token punctuation" >:</span> <span class="token string" >'item1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span> }<span class="token punctuation" >,</span>
4447
- { value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목2'</span> }<span class="token punctuation" >,</span>
4448
- { value<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span> }<span class="token punctuation" >,</span>
4449
- { value<span class="token punctuation" >:</span> <span class="token string" >'item4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목4'</span> }<span class="token punctuation" >,</span>
4450
- { value<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목5'</span> }<span class="token punctuation" >,</span>
4451
- { value<span class="token punctuation" >:</span> <span class="token string" >'item6'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목6'</span> }<span class="token punctuation" >,</span>
4452
- { value<span class="token punctuation" >:</span> <span class="token string" >'item7'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목7'</span> }<span class="token punctuation" >,</span>
4453
- { value<span class="token punctuation" >:</span> <span class="token string" >'item8'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목8'</span> }
4590
+ { 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> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-primary">항목1&lt;/span> item1'</span> }<span class="token punctuation" >,</span>
4591
+ { 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> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-danger">항목2&lt;/span> item2'</span> }<span class="token punctuation" >,</span>
4592
+ { 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> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-warning">항목3&lt;/span> item3'</span> }
4454
4593
  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
4455
- target<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
4594
+ target<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
4595
+ { value<span class="token punctuation" >:</span> <span class="token string" >'항목4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item4'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-help">항목4&lt;/span> item4'</span> }<span class="token punctuation" >,</span>
4596
+ { value<span class="token punctuation" >:</span> <span class="token string" >'항목5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-success">항목5&lt;/span> item5'</span> }
4597
+ <span class="token punctuation" >]</span>
4456
4598
  }<span class="token punctuation" >,</span>
4599
+ hasSourceSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
4600
+ hasTargetSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
4457
4601
  width<span class="token punctuation" >:</span> <span class="token string" >'80%'</span><span class="token punctuation" >,</span>
4458
- height<span class="token punctuation" >:</span> <span class="token number" >180</span>
4602
+ height<span class="token punctuation" >:</span> <span class="token number" >180</span><span class="token punctuation" >,</span>
4603
+ onChange<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>s<span class="token punctuation" >,</span> t<span class="token punctuation" >)</span> {
4604
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>s<span class="token punctuation" >,</span> t<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
4605
+ }<span class="token punctuation" >,</span>
4606
+ orderable<span class="token punctuation" >:</span> <span class="token string" >'target'</span>
4459
4607
  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
4460
4608
  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> {
4461
4609
  target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist-v'</span><span class="token punctuation" >,</span>
@@ -4490,15 +4638,21 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
4490
4638
  <tr>
4491
4639
  <td rowspan="2">data</td>
4492
4640
  <td>source</td>
4493
- <td>array[{value: string|array, text: string}]</td>
4641
+ <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
4494
4642
  <td></td>
4495
- <td>source 항목 배열</td>
4643
+ <td>source 항목 배열<br>
4644
+ html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br>
4645
+ 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
4646
+ </td>
4496
4647
  </tr>
4497
4648
  <tr>
4498
4649
  <td>target</td>
4499
- <td>array[{value: string|array, text: string}]</td>
4650
+ <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
4500
4651
  <td></td>
4501
- <td>target 항목 배열</td>
4652
+ <td>target 항목 배열<br>
4653
+ html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br>
4654
+ 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
4655
+ </td>
4502
4656
  </tr>
4503
4657
  <tr>
4504
4658
  <td rowspan="3">textSets</td>
@@ -4816,6 +4970,361 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
4816
4970
  </table>
4817
4971
 
4818
4972
 
4973
+ </div>
4974
+
4975
+ <div class="aigis-module SortableList">
4976
+ <h2 class="aigis-module__heading" id="SortableList">SortableList</h2>
4977
+ <div class="aigis-module__filepath">/scss/components/sortablelist.scss</div>
4978
+ <div class="aigis-tags">
4979
+
4980
+ <span class="gn-tag">v.0.1.0</span>
4981
+
4982
+ <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
4983
+
4984
+ </div>
4985
+ <!-- <div id="ComponentTab">
4986
+ <ul>
4987
+ <li><a href="#styleguide">Style</a></li>
4988
+ <li>
4989
+ <a href="#scriptguide"
4990
+ >Script <span class="gn-icon"><i class="fas fa-code"></i></span
4991
+ ></a>
4992
+ </li>
4993
+ </ul>
4994
+ </div> -->
4995
+ <h3 id="-">기본 사용</h3>
4996
+ <div class="aigis-preview">
4997
+ <div class="gn-sortablelist">
4998
+ <div class="sortablelist-controls gn-control is-small has-arrange is-vertical is-center">
4999
+ <button type="button" class="gn-button is-outline">
5000
+ <span class="gn-icon">
5001
+ <i class="fas fa-angle-double-up"></i>
5002
+ </span>
5003
+ </button>
5004
+ <button type="button" class="gn-button is-outline">
5005
+ <span class="gn-icon">
5006
+ <i class="fas fa-angle-up"></i>
5007
+ </span>
5008
+ </button>
5009
+ <button type="button" class="gn-button is-outline">
5010
+ <span class="gn-icon">
5011
+ <i class="fas fa-angle-down"></i>
5012
+ </span>
5013
+ </button>
5014
+ <button type="button" class="gn-button is-outline">
5015
+ <span class="gn-icon">
5016
+ <i class="fas fa-angle-double-down"></i>
5017
+ </span>
5018
+ </button>
5019
+ </div>
5020
+ <div class="gn-dropdown is-opened sortablelist-items">
5021
+ <div class="dropdown-items">
5022
+ <ul class="sortablelist-rows">
5023
+ <li class="dropdown-item">항목 1</li>
5024
+ <li class="dropdown-item">항목 2</li>
5025
+ <li class="dropdown-item">항목 3</li>
5026
+ <li class="dropdown-item">항목 4</li>
5027
+ </ul>
5028
+ </div>
5029
+ </div>
5030
+ </div></div>
5031
+
5032
+ <pre><code class="language-html"><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-sortablelist<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5033
+ <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>sortablelist-controls gn-control is-small has-arrange is-vertical is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5034
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</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-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5035
+ <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-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5036
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-up<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>i</span><span class="token punctuation" >></span></span>
5037
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
5038
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
5039
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</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-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5040
+ <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-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5041
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-up<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>i</span><span class="token punctuation" >></span></span>
5042
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
5043
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
5044
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</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-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5045
+ <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-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5046
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<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>i</span><span class="token punctuation" >></span></span>
5047
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
5048
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
5049
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</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-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5050
+ <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-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5051
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-down<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>i</span><span class="token punctuation" >></span></span>
5052
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
5053
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
5054
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
5055
+ <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-dropdown is-opened sortablelist-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5056
+ <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>dropdown-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5057
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sortablelist-rows<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5058
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
5059
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
5060
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 3<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
5061
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 4<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
5062
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
5063
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
5064
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
5065
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
5066
+ </code></pre>
5067
+ <h3 id="-">버튼 우측 배치</h3>
5068
+ <div class="aigis-preview">
5069
+ <div class="gn-sortablelist">
5070
+ <div class="gn-dropdown is-opened sortablelist-items">
5071
+ <div class="dropdown-items">
5072
+ <ul class="sortablelist-rows">
5073
+ <li class="dropdown-item">항목 1</li>
5074
+ <li class="dropdown-item">항목 2</li>
5075
+ <li class="dropdown-item">항목 3</li>
5076
+ </ul>
5077
+ </div>
5078
+ </div>
5079
+ <div class="sortablelist-controls gn-control is-small has-arrange is-vertical is-center is-right">
5080
+ <button type="button" class="gn-button is-outline">
5081
+ <span class="gn-icon">
5082
+ <i class="fas fa-angle-double-up"></i>
5083
+ </span>
5084
+ </button>
5085
+ <button type="button" class="gn-button is-outline">
5086
+ <span class="gn-icon">
5087
+ <i class="fas fa-angle-up"></i>
5088
+ </span>
5089
+ </button>
5090
+ <button type="button" class="gn-button is-outline">
5091
+ <span class="gn-icon">
5092
+ <i class="fas fa-angle-down"></i>
5093
+ </span>
5094
+ </button>
5095
+ <button type="button" class="gn-button is-outline">
5096
+ <span class="gn-icon">
5097
+ <i class="fas fa-angle-double-down"></i>
5098
+ </span>
5099
+ </button>
5100
+ </div>
5101
+ </div></div>
5102
+
5103
+ <pre><code class="language-html"><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-sortablelist<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5104
+ <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-dropdown is-opened sortablelist-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5105
+ <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>dropdown-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5106
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sortablelist-rows<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5107
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
5108
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
5109
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 3<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
5110
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
5111
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
5112
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
5113
+ <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>sortablelist-controls gn-control is-small has-arrange is-vertical is-center is-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5114
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</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-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5115
+ <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-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5116
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-up<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>i</span><span class="token punctuation" >></span></span>
5117
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
5118
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
5119
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</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-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5120
+ <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-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5121
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-up<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>i</span><span class="token punctuation" >></span></span>
5122
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
5123
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
5124
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</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-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5125
+ <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-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5126
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<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>i</span><span class="token punctuation" >></span></span>
5127
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
5128
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
5129
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</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-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5130
+ <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-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
5131
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-down<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>i</span><span class="token punctuation" >></span></span>
5132
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
5133
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
5134
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
5135
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
5136
+ </code></pre>
5137
+ <h3 id="-">생성 옵션</h3>
5138
+ <div class="aigis-preview">
5139
+
5140
+ <div class="new-sortablelist"></div>
5141
+ <div class="new-sortablelist-drag"></div>
5142
+ <div class="new-sortablelist-cols"></div>
5143
+ </div>
5144
+
5145
+ <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-sortablelist<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>
5146
+ <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-sortablelist-drag<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>
5147
+ <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-sortablelist-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>
5148
+ </code></pre>
5149
+ <pre><code> <span class="token operator" >/</span><span class="token operator" >/</span> 단일 컬럼
5150
+ Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'sortablelist'</span><span class="token punctuation" >,</span> {
5151
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-sortablelist'</span><span class="token punctuation" >,</span>
5152
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
5153
+ { 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" >'항목 1'</span> }<span class="token punctuation" >,</span>
5154
+ { 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" >'항목 2'</span> }<span class="token punctuation" >,</span>
5155
+ { 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" >'항목 3'</span> }<span class="token punctuation" >,</span>
5156
+ { value<span class="token punctuation" >:</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 4'</span> }<span class="token punctuation" >,</span>
5157
+ { value<span class="token punctuation" >:</span> <span class="token string" >'5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 5'</span> }<span class="token punctuation" >,</span>
5158
+ { value<span class="token punctuation" >:</span> <span class="token string" >'6'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 6'</span> }<span class="token punctuation" >,</span>
5159
+ { value<span class="token punctuation" >:</span> <span class="token string" >'7'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 7'</span> }<span class="token punctuation" >,</span>
5160
+ { value<span class="token punctuation" >:</span> <span class="token string" >'8'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 8'</span> }<span class="token punctuation" >,</span>
5161
+ { value<span class="token punctuation" >:</span> <span class="token string" >'9'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 9'</span> }<span class="token punctuation" >,</span>
5162
+ { value<span class="token punctuation" >:</span> <span class="token string" >'10'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 10'</span> }
5163
+ <span class="token punctuation" >]</span>
5164
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
5165
+ <span class="token operator" >/</span><span class="token operator" >/</span> 드래그 앤 드롭
5166
+ Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'sortablelist'</span><span class="token punctuation" >,</span> {
5167
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-sortablelist-drag'</span><span class="token punctuation" >,</span>
5168
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
5169
+ { value<span class="token punctuation" >:</span> <span class="token string" >'a'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 A'</span> }<span class="token punctuation" >,</span>
5170
+ { value<span class="token punctuation" >:</span> <span class="token string" >'b'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 B'</span> }<span class="token punctuation" >,</span>
5171
+ { value<span class="token punctuation" >:</span> <span class="token string" >'c'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 C'</span> }<span class="token punctuation" >,</span>
5172
+ { value<span class="token punctuation" >:</span> <span class="token string" >'d'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 D'</span> }<span class="token punctuation" >,</span>
5173
+ { value<span class="token punctuation" >:</span> <span class="token string" >'e'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 E'</span> }<span class="token punctuation" >,</span>
5174
+ { value<span class="token punctuation" >:</span> <span class="token string" >'f'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 F'</span> }<span class="token punctuation" >,</span>
5175
+ { value<span class="token punctuation" >:</span> <span class="token string" >'g'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 G'</span> }<span class="token punctuation" >,</span>
5176
+ { value<span class="token punctuation" >:</span> <span class="token string" >'h'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 H'</span> }<span class="token punctuation" >,</span>
5177
+ { value<span class="token punctuation" >:</span> <span class="token string" >'i'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 I'</span> }<span class="token punctuation" >,</span>
5178
+ { value<span class="token punctuation" >:</span> <span class="token string" >'j'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 J'</span> }
5179
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
5180
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
5181
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
5182
+ <span class="token operator" >/</span><span class="token operator" >/</span> 다중 컬럼
5183
+ Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'sortablelist'</span><span class="token punctuation" >,</span> {
5184
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-sortablelist-cols'</span><span class="token punctuation" >,</span>
5185
+ buttonPosition<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
5186
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
5187
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x1'</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>
5188
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x2'</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>
5189
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x3'</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>
5190
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x4'</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" >'카테고리D'</span><span class="token punctuation" >,</span> <span class="token string" >'4000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
5191
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x5'</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" >'카테고리E'</span><span class="token punctuation" >,</span> <span class="token string" >'5000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
5192
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x6'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목6'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리F'</span><span class="token punctuation" >,</span> <span class="token string" >'6000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
5193
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x7'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목7'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리G'</span><span class="token punctuation" >,</span> <span class="token string" >'7000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
5194
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x8'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목8'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리H'</span><span class="token punctuation" >,</span> <span class="token string" >'8000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
5195
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x9'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목9'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리I'</span><span class="token punctuation" >,</span> <span class="token string" >'9000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
5196
+ { value<span class="token punctuation" >:</span> <span class="token string" >'x10'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목10'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리J'</span><span class="token punctuation" >,</span> <span class="token string" >'10000'</span><span class="token punctuation" >]</span> }
5197
+ <span class="token punctuation" >]</span>
5198
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
5199
+ </code></pre><h3 id="-sortablelistitem-">데이터 모델 (SortableListItem)</h3>
5200
+ <table class="gn-table is-full is-border">
5201
+ <thead>
5202
+ <th>필드</th>
5203
+ <th>type</th>
5204
+ <th>필수</th>
5205
+ <th>description</th>
5206
+ </thead>
5207
+ <tbody>
5208
+ <tr>
5209
+ <td>value</td>
5210
+ <td>string</td>
5211
+ <td>Y</td>
5212
+ <td>고유 값 (빈 문자열 불가)</td>
5213
+ </tr>
5214
+ <tr>
5215
+ <td>text</td>
5216
+ <td>string</td>
5217
+ <td>N</td>
5218
+ <td>단일 컬럼 표시 텍스트</td>
5219
+ </tr>
5220
+ <tr>
5221
+ <td>cols</td>
5222
+ <td>string[]</td>
5223
+ <td>N</td>
5224
+ <td>다중 컬럼 표시 값 배열</td>
5225
+ </tr>
5226
+ </tbody>
5227
+ </table>
5228
+
5229
+ <h3 id="-">옵션</h3>
5230
+ <table class="gn-table is-full is-border">
5231
+ <thead>
5232
+ <th colspan="2">name</th>
5233
+ <th>type</th>
5234
+ <th>default</th>
5235
+ <th>description</th>
5236
+ </thead>
5237
+ <tbody>
5238
+ <tr>
5239
+ <td colspan="2">target</td>
5240
+ <td>string</td>
5241
+ <td></td>
5242
+ <td>sortablelist를 표시할 대상의 선택자(selector)</td>
5243
+ </tr>
5244
+ <tr>
5245
+ <td colspan="2">data</td>
5246
+ <td>SortableListItem[]</td>
5247
+ <td></td>
5248
+ <td>sortablelist에 표시할 데이터 배열</td>
5249
+ </tr>
5250
+ <tr>
5251
+ <td colspan="2">buttonPosition</td>
5252
+ <td>left | right</td>
5253
+ <td>left</td>
5254
+ <td>순서 변경 버튼 위치</td>
5255
+ </tr>
5256
+ <tr>
5257
+ <td colspan="2">draggable</td>
5258
+ <td>boolean</td>
5259
+ <td>false</td>
5260
+ <td>드래그 앤 드롭 순서 변경 활성화 여부</td>
5261
+ </tr>
5262
+ <tr>
5263
+ <td>textSets</td>
5264
+ <td>noData</td>
5265
+ <td>string</td>
5266
+ <td>No records available.</td>
5267
+ <td>데이터가 없을 경우 출력 메시지</td>
5268
+ </tr>
5269
+ <tr>
5270
+ <td colspan="2">disabled</td>
5271
+ <td>boolean</td>
5272
+ <td>false</td>
5273
+ <td>컴포넌트 비활성화 여부</td>
5274
+ </tr>
5275
+ <tr>
5276
+ <td colspan="2">width</td>
5277
+ <td>number, string</td>
5278
+ <td>100%</td>
5279
+ <td>컴포넌트 너비</td>
5280
+ </tr>
5281
+ <tr>
5282
+ <td colspan="2">height</td>
5283
+ <td>number, string</td>
5284
+ <td>150</td>
5285
+ <td>리스트 높이 (미지정 시 150)</td>
5286
+ </tr>
5287
+ <tr>
5288
+ <td colspan="2">onChange</td>
5289
+ <td>function(data)</td>
5290
+ <td></td>
5291
+ <td>데이터 변경 시 발생 이벤트</td>
5292
+ </tr>
5293
+ </tbody>
5294
+ </table>
5295
+
5296
+ <h3 id="-">메소드</h3>
5297
+ <table class="gn-table is-full is-border">
5298
+ <thead>
5299
+ <th>name</th>
5300
+ <th>return</th>
5301
+ <th>description</th>
5302
+ </thead>
5303
+ <tbody>
5304
+ <tr>
5305
+ <td>getData()</td>
5306
+ <td>SortableListItem[]</td>
5307
+ <td>현재 데이터 배열을 반환한다.</td>
5308
+ </tr>
5309
+ <tr>
5310
+ <td>setData(data: SortableListItem[]})</td>
5311
+ <td>void</td>
5312
+ <td>데이터 배열을 설정하고 다시 렌더링한다.</td>
5313
+ </tr>
5314
+ <tr>
5315
+ <td>disable()</td>
5316
+ <td>void</td>
5317
+ <td>컴포넌트를 비활성화한다.</td>
5318
+ </tr>
5319
+ <tr>
5320
+ <td>enable()</td>
5321
+ <td>void</td>
5322
+ <td>컴포넌트를 활성화한다.</td>
5323
+ </tr>
5324
+ </tbody>
5325
+ </table>
5326
+
5327
+
4819
5328
  </div>
4820
5329
 
4821
5330
  <div class="aigis-module Tab">
@@ -6073,10 +6582,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
6073
6582
 
6074
6583
  <button name="new-button"></button>
6075
6584
  <button name="new-button2"></button>
6585
+ <button name="new-button-submenu">편집 메뉴</button>
6076
6586
  </div>
6077
6587
 
6078
6588
  <pre><code class="language-ejs"> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button<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>button</span><span class="token punctuation" >></span></span>
6079
6589
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button2<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>button</span><span class="token punctuation" >></span></span>
6590
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button-submenu<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>button</span><span class="token punctuation" >></span></span>
6080
6591
  </code></pre>
6081
6592
  <pre><code> Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'menubutton'</span><span class="token punctuation" >,</span> {
6082
6593
  target<span class="token punctuation" >:</span> <span class="token string" >'button[name=new-button]'</span><span class="token punctuation" >,</span>
@@ -6114,6 +6625,51 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
6114
6625
  value<span class="token punctuation" >:</span> <span class="token string" >'menu2'</span>
6115
6626
  }<span class="token punctuation" >]</span>
6116
6627
  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
6628
+ <span class="token operator" >/</span><span class="token operator" >/</span> 서브메뉴 예시
6629
+ Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'menubutton'</span><span class="token punctuation" >,</span> {
6630
+ target<span class="token punctuation" >:</span> <span class="token string" >'button[name=new-button-submenu]'</span><span class="token punctuation" >,</span>
6631
+ size<span class="token punctuation" >:</span> <span class="token string" >'normal'</span><span class="token punctuation" >,</span>
6632
+ textSets<span class="token punctuation" >:</span> {
6633
+ buttonText<span class="token punctuation" >:</span> <span class="token string" >'편집 메뉴'</span>
6634
+ }<span class="token punctuation" >,</span>
6635
+ onSelect<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>value<span class="token punctuation" >,</span> text<span class="token punctuation" >,</span> menu<span class="token punctuation" >,</span> e<span class="token punctuation" >)</span> {
6636
+ 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 punctuation" >,</span> { value<span class="token punctuation" >:</span> value<span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> text<span class="token punctuation" >,</span> menu<span class="token punctuation" >:</span> menu }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
6637
+ }<span class="token punctuation" >,</span>
6638
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
6639
+ {
6640
+ text<span class="token punctuation" >:</span> <span class="token string" >'파일'</span><span class="token punctuation" >,</span>
6641
+ value<span class="token punctuation" >:</span> <span class="token string" >'file'</span><span class="token punctuation" >,</span>
6642
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
6643
+ { text<span class="token punctuation" >:</span> <span class="token string" >'새 파일'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-new'</span> }<span class="token punctuation" >,</span>
6644
+ { text<span class="token punctuation" >:</span> <span class="token string" >'열기'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-open'</span> }<span class="token punctuation" >,</span>
6645
+ {
6646
+ text<span class="token punctuation" >:</span> <span class="token string" >'최근 파일'</span><span class="token punctuation" >,</span>
6647
+ value<span class="token punctuation" >:</span> <span class="token string" >'file-recent'</span><span class="token punctuation" >,</span>
6648
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
6649
+ { text<span class="token punctuation" >:</span> <span class="token string" >'document.txt'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-recent-1'</span> }<span class="token punctuation" >,</span>
6650
+ { text<span class="token punctuation" >:</span> <span class="token string" >'image.png'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-recent-2'</span> }
6651
+ <span class="token punctuation" >]</span>
6652
+ }<span class="token punctuation" >,</span>
6653
+ { text<span class="token punctuation" >:</span> <span class="token string" >'저장'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-save'</span><span class="token punctuation" >,</span> disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span> }<span class="token punctuation" >,</span>
6654
+ { text<span class="token punctuation" >:</span> <span class="token string" >'다른 이름으로 저장'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-saveas'</span> }
6655
+ <span class="token punctuation" >]</span>
6656
+ }<span class="token punctuation" >,</span>
6657
+ {
6658
+ text<span class="token punctuation" >:</span> <span class="token string" >'편집'</span><span class="token punctuation" >,</span>
6659
+ value<span class="token punctuation" >:</span> <span class="token string" >'edit'</span><span class="token punctuation" >,</span>
6660
+ actived<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
6661
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
6662
+ { text<span class="token punctuation" >:</span> <span class="token string" >'실행 취소'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'edit-undo'</span> }<span class="token punctuation" >,</span>
6663
+ { text<span class="token punctuation" >:</span> <span class="token string" >'다시 실행'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'edit-redo'</span> }
6664
+ <span class="token punctuation" >]</span>
6665
+ }<span class="token punctuation" >,</span>
6666
+ {
6667
+ text<span class="token punctuation" >:</span> <span class="token string" >'도움말'</span><span class="token punctuation" >,</span>
6668
+ value<span class="token punctuation" >:</span> <span class="token string" >'help'</span><span class="token punctuation" >,</span>
6669
+ disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
6670
+ }
6671
+ <span class="token punctuation" >]</span>
6672
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
6117
6673
  </code></pre><table class="gn-table is-full is-border">
6118
6674
  <thead>
6119
6675
  <th colspan="2">name</th>
@@ -6167,15 +6723,21 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
6167
6723
  </tr>
6168
6724
  <tr>
6169
6725
  <td colspan="2">data</td>
6170
- <td>Array[{value, text, <em>html</em>}]</td>
6726
+ <td>Array[{value, text, html, child, disabled, actived}]</td>
6171
6727
  <td></td>
6172
- <td>메뉴 목록에 출력할 목록</td>
6728
+ <td>메뉴 목록에 출력할 목록<br/>- value: 메뉴 값<br/>- text: 메뉴 텍스트<br/>- html: HTML로 렌더링할 내용<br/>- child: 하위 메뉴 배열 (최대 2단계)<br/>- disabled: 비활성화 여부 (boolean)<br/>- actived: 활성화 상태 표시 여부</td>
6729
+ </tr>
6730
+ <tr>
6731
+ <td colspan="2">disabled</td>
6732
+ <td>boolean</td>
6733
+ <td>false</td>
6734
+ <td>버튼 비활성화 여부</td>
6173
6735
  </tr>
6174
6736
  <tr>
6175
6737
  <td colspan="2">onSelect</td>
6176
- <td>function(value, text)</td>
6738
+ <td>function(value, text, menu, e)</td>
6177
6739
  <td></td>
6178
- <td>메뉴 선택 시 수행될 이벤트</td>
6740
+ <td>메뉴 선택 시 수행될 이벤트<br/>- value: 선택된 메뉴의 값<br/>- text: 선택된 메뉴의 텍스트<br/>- menu: 선택된 메뉴 객체<br/>- e: MouseEvent 객체</td>
6179
6741
  </tr>
6180
6742
  </tbody>
6181
6743
  </table>
@@ -6193,6 +6755,21 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
6193
6755
  <td>void</td>
6194
6756
  <td>버튼명을 변경한다.</td>
6195
6757
  </tr>
6758
+ <tr>
6759
+ <td>reRender(data: Array)</td>
6760
+ <td>void</td>
6761
+ <td>메뉴 데이터를 전달받아 DOM을 다시 생성한다.</td>
6762
+ </tr>
6763
+ <tr>
6764
+ <td>disabled()</td>
6765
+ <td>void</td>
6766
+ <td>버튼을 비활성화한다.</td>
6767
+ </tr>
6768
+ <tr>
6769
+ <td>enabled()</td>
6770
+ <td>void</td>
6771
+ <td>버튼을 활성화한다.</td>
6772
+ </tr>
6196
6773
  </tbody>
6197
6774
  </table>
6198
6775
 
@@ -7562,7 +8139,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
7562
8139
  </div>
7563
8140
 
7564
8141
 
7565
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
8142
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
7566
8143
  </div>
7567
8144
  </div>
7568
8145
  </div>