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/category/COLOR/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));
@@ -148,7 +148,7 @@
148
148
  </div>
149
149
 
150
150
 
151
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
151
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
152
152
  </div>
153
153
  </div>
154
154
  </div>
package/styleguide/category/COMPONENT/Alert(js)/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));
@@ -410,7 +410,7 @@
410
410
  </div>
411
411
 
412
412
 
413
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
413
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
414
414
  </div>
415
415
  </div>
416
416
  </div>
package/styleguide/category/COMPONENT/Bignumber/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));
@@ -261,7 +261,7 @@
261
261
  </div>
262
262
 
263
263
 
264
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
264
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
265
265
  </div>
266
266
  </div>
267
267
  </div>
package/styleguide/category/COMPONENT/Breadcrumb/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));
@@ -316,7 +316,7 @@
316
316
  </div>
317
317
 
318
318
 
319
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
319
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
320
320
  </div>
321
321
  </div>
322
322
  </div>
package/styleguide/category/COMPONENT/Calendar(js)/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));
@@ -234,7 +234,7 @@
234
234
  </div>
235
235
 
236
236
 
237
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
237
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
238
238
  </div>
239
239
  </div>
240
240
  </div>
package/styleguide/category/COMPONENT/Card/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));
@@ -176,7 +176,7 @@
176
176
  </div>
177
177
 
178
178
 
179
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
179
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
180
180
  </div>
181
181
  </div>
182
182
  </div>
package/styleguide/category/COMPONENT/Chart(js)/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));
@@ -547,7 +547,7 @@
547
547
  </div>
548
548
 
549
549
 
550
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
550
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
551
551
  </div>
552
552
  </div>
553
553
  </div>
package/styleguide/category/COMPONENT/Datagrid(js)/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));
@@ -148,16 +148,24 @@
148
148
 
149
149
  <div class="new-grid"></div>
150
150
 
151
- <div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
151
+ <div style="width: 100%; height: 100px; overflow-x: auto; margin-top: 20px;">
152
152
  <div class="new-grid2"></div>
153
153
  </div>
154
+
155
+ <div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
156
+ <div class="new-grid3"></div>
157
+ </div>
154
158
  </div>
155
159
 
156
160
  <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>
157
161
 
158
- <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>
162
+ <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>
159
163
  <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>
160
164
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
165
+
166
+ <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>
167
+ <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>
168
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
161
169
  </code></pre>
162
170
  <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> {
163
171
  target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid'</span><span class="token punctuation" >,</span>
@@ -269,19 +277,122 @@
269
277
  }<span class="token punctuation" >)</span>
270
278
  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> {
271
279
  target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid2'</span><span class="token punctuation" >,</span>
280
+ headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
281
+ {
282
+ label<span class="token punctuation" >:</span> <span class="token string" >'no'</span><span class="token punctuation" >,</span>
283
+ key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
284
+ onSelect<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
285
+ <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
286
+ 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>
287
+ }<span class="token punctuation" >,</span>
288
+ template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
289
+ 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>
290
+ }<span class="token punctuation" >,</span>
291
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
292
+ sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
293
+ sort<span class="token punctuation" >:</span> <span class="token string" >'asc'</span>
294
+ }<span class="token punctuation" >,</span>
295
+ {
296
+ label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
297
+ key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
298
+ style<span class="token punctuation" >:</span> {
299
+ width<span class="token punctuation" >:</span> <span class="token string" >'250px'</span>
300
+ }<span class="token punctuation" >,</span>
301
+ className<span class="token punctuation" >:</span> <span class="token string" >'has-text-right'</span><span class="token punctuation" >,</span>
302
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
303
+ bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
304
+ sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
305
+ }<span class="token punctuation" >,</span>
306
+ {
307
+ label<span class="token punctuation" >:</span> <span class="token string" >'날짜'</span><span class="token punctuation" >,</span>
308
+ key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
309
+ style<span class="token punctuation" >:</span> {
310
+ width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span>
311
+ }<span class="token punctuation" >,</span>
312
+ className<span class="token punctuation" >:</span> <span class="token string" >'has-text-center'</span><span class="token punctuation" >,</span>
313
+ bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span>
314
+ }
315
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
316
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
317
+ {
318
+ number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
319
+ title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
320
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
321
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
322
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
323
+ {
324
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-1'</span><span class="token punctuation" >,</span>
325
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-하나'</span><span class="token punctuation" >,</span>
326
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
327
+ }<span class="token punctuation" >,</span>
328
+ {
329
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-2'</span><span class="token punctuation" >,</span>
330
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-둘'</span><span class="token punctuation" >,</span>
331
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
332
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
333
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
334
+ {
335
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1'</span><span class="token punctuation" >,</span>
336
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1'</span><span class="token punctuation" >,</span>
337
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
338
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
339
+ child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
340
+ {
341
+ number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1-1'</span><span class="token punctuation" >,</span>
342
+ title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1-1'</span><span class="token punctuation" >,</span>
343
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
344
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
345
+ }
346
+ <span class="token punctuation" >]</span>
347
+ }
348
+ <span class="token punctuation" >]</span>
349
+ }
350
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
351
+ color<span class="token punctuation" >:</span> <span class="token string" >'is-danger-light'</span>
352
+ }<span class="token punctuation" >,</span>
353
+ {
354
+ number<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
355
+ title<span class="token punctuation" >:</span> <span class="token string" >'둘'</span><span class="token punctuation" >,</span>
356
+ date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
357
+ desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span>
358
+ }
359
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
360
+ hasHeader<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
361
+ hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
362
+ hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
363
+ textSets<span class="token punctuation" >:</span> {
364
+ deleteConfirmMessage<span class="token punctuation" >:</span> <span class="token string" >'파일을 삭제하시겠습니까?'</span>
365
+ }<span class="token punctuation" >,</span>
366
+ <span class="token operator" >/</span><span class="token operator" >/</span> onDelete 에서 <span class="token boolean" >false</span> 를 반환하면 해당 행 삭제를 취소할 수 있다<span class="token punctuation" >.</span>
367
+ 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> {
368
+ 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>
369
+ <span class="token operator" >/</span><span class="token operator" >/</span> 예<span class="token punctuation" >)</span> 특정 조건에 따라 삭제 취소
370
+ <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> {
371
+ <span class="token operator" >/</span><span class="token operator" >/</span> return <span class="token boolean" >false</span><span class="token comment" spellcheck="true">;</span>
372
+ <span class="token operator" >/</span><span class="token operator" >/</span> }
373
+ }
374
+ }<span class="token punctuation" >)</span>
375
+ 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> {
376
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid3'</span><span class="token punctuation" >,</span>
272
377
  headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
273
378
  {
274
379
  label<span class="token punctuation" >:</span> <span class="token string" >'row data numbers'</span><span class="token punctuation" >,</span>
275
380
  key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
276
381
  style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span> }<span class="token punctuation" >,</span>
277
382
  sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
278
- draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
383
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
384
+ template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
385
+ 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>
386
+ }
279
387
  }<span class="token punctuation" >,</span>
280
388
  {
281
389
  label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
282
390
  key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
283
391
  sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
284
- draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
392
+ draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
393
+ template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
394
+ 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>
395
+ }
285
396
  }<span class="token punctuation" >,</span>
286
397
  {
287
398
  label<span class="token punctuation" >:</span> <span class="token string" >'날짜를 표시하는 컬럼입니다'</span><span class="token punctuation" >,</span>
@@ -344,8 +455,6 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
344
455
  paginator<span class="token punctuation" >:</span> {
345
456
  rows<span class="token punctuation" >:</span> <span class="token number" >30</span>
346
457
  }<span class="token punctuation" >,</span>
347
- hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
348
- fixHeader<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
349
458
  onChange<span class="token punctuation" >:</span> updatedData <span class="token operator" >=</span><span class="token operator" >></span> {
350
459
  console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>updatedData<span class="token punctuation" >)</span>
351
460
  }
@@ -457,7 +566,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
457
566
  <b>color:is-warning-light</b> =&gt; 행의 색 변경</td>
458
567
  </tr>
459
568
  <tr>
460
- <td rowspan="3">textSets</td>
569
+ <td rowspan="4">textSets</td>
461
570
  <td>noData</td>
462
571
  <td>string</td>
463
572
  <td>No records available.</td>
@@ -475,6 +584,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
475
584
  <td></td>
476
585
  <td>삭제버튼 헤더표시문구</td>
477
586
  </tr>
587
+ <tr>
588
+ <td>deleteConfirmMessage</td>
589
+ <td>string</td>
590
+ <td></td>
591
+ <td>삭제 확인 창 표시문구 - 삭제 버튼 클릭시 확인 창 출력</td>
592
+ </tr>
478
593
  <tr>
479
594
  <td colspan="2">childField</td>
480
595
  <td>string</td>
@@ -499,6 +614,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
499
614
  <td>false</td>
500
615
  <td>삭제버튼 생성 여부</td>
501
616
  </tr>
617
+ <tr>
618
+ <td colspan="2">hasHeader</td>
619
+ <td>boolean</td>
620
+ <td>true</td>
621
+ <td>헤더 생성 여부</td>
622
+ </tr>
502
623
  <tr>
503
624
  <td colspan="2">readonly</td>
504
625
  <td>boolean</td>
@@ -596,6 +717,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
596
717
  <td></td>
597
718
  <td>이동, 삭제 등의 데이터 변경이 있는 경우, 변경된 데이터를 가져오기 위한 이벤트핸들러</td>
598
719
  </tr>
720
+ <tr>
721
+ <td colspan="2">onDelete</td>
722
+ <td>function(deletedData, index)</td>
723
+ <td>deletedData, index 를 인자로 받으며, false 를 반환하면 해당 행 삭제를 취소한다.</td>
724
+ <td>삭제 버튼 클릭 시 삭제 대상 데이터와 인덱스를 받을 수 있는 이벤트핸들러<br>onChange 보다 먼저 동작하며, onDelete 에서 false 를 반환하면 실제 삭제 및 onChange 호출이 수행되지 않는다.</td>
725
+ </tr>
599
726
  </tbody>
600
727
  </table>
601
728
 
@@ -676,7 +803,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
676
803
  </div>
677
804
 
678
805
 
679
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
806
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
680
807
  </div>
681
808
  </div>
682
809
  </div>
package/styleguide/category/COMPONENT/Datalist(js)/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));
@@ -463,7 +463,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
463
463
  </div>
464
464
 
465
465
 
466
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
466
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
467
467
  </div>
468
468
  </div>
469
469
  </div>
package/styleguide/category/COMPONENT/Growl(js)/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));
@@ -343,7 +343,7 @@
343
343
  </div>
344
344
 
345
345
 
346
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
346
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
347
347
  </div>
348
348
  </div>
349
349
  </div>
package/styleguide/category/COMPONENT/JsonView(js)/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));
@@ -1126,7 +1126,7 @@
1126
1126
  </div>
1127
1127
 
1128
1128
 
1129
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
1129
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
1130
1130
  </div>
1131
1131
  </div>
1132
1132
  </div>
package/styleguide/category/COMPONENT/Loader(js)/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));
@@ -170,13 +170,30 @@
170
170
  <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>
171
171
  <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>
172
172
  </code></pre>
173
+ <div class="aigis-preview">
174
+ <div class="gn-loader is-inline"></div>
175
+ <div class="gn-loader is-inline is-success"></div>
176
+ <div class="gn-loader is-inline is-warning"></div>
177
+ <div class="gn-loader is-inline is-danger"></div>
178
+ <div class="gn-loader is-inline is-info"></div>
179
+ <div class="gn-loader is-inline is-primary"></div></div>
180
+
181
+ <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>
182
+ <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>
183
+ <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>
184
+ <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>
185
+ <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>
186
+ <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>
187
+ </code></pre>
173
188
  <h3 id="-">타입</h3>
174
189
  <div class="aigis-preview">
175
190
  <div class="gn-loader is-bounce"></div><br>
176
- <div class="gn-loader is-move"></div></div>
191
+ <div class="gn-loader is-move"></div>
192
+ <div class="gn-loader is-inline"></div><br></div>
177
193
 
178
194
  <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>
179
195
  <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>
196
+ <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>
180
197
  </code></pre>
181
198
  <h3 id="-">생성 옵션</h3>
182
199
  <div class="aigis-preview">
@@ -238,7 +255,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
238
255
  <td colspan="2">type</td>
239
256
  <td>string</td>
240
257
  <td></td>
241
- <td>&#39;bounce&#39;,&#39;move&#39;,&#39;circle&#39;</td>
258
+ <td>&#39;inline&#39;,&#39;bounce&#39;,&#39;move&#39;,&#39;</td>
242
259
  </tr>
243
260
  <tr>
244
261
  <td colspan="2">positionX</td>
@@ -287,7 +304,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
287
304
  </div>
288
305
 
289
306
 
290
- <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
307
+ <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
291
308
  </div>
292
309
  </div>
293
310
  </div>