gnui 1.1.8 → 1.2.0

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 (107) hide show
  1. package/@types/gnui.d.ts +195 -154
  2. package/README.md +9 -3
  3. package/assets/NotoSansKR-Black.otf +0 -0
  4. package/assets/NotoSansKR-Black.woff +0 -0
  5. package/assets/NotoSansKR-Black.woff2 +0 -0
  6. package/assets/NotoSansKR-Bold.otf +0 -0
  7. package/assets/NotoSansKR-Bold.woff +0 -0
  8. package/assets/NotoSansKR-Bold.woff2 +0 -0
  9. package/assets/NotoSansKR-DemiLight.otf +0 -0
  10. package/assets/NotoSansKR-DemiLight.woff +0 -0
  11. package/assets/NotoSansKR-DemiLight.woff2 +0 -0
  12. package/assets/NotoSansKR-Light.otf +0 -0
  13. package/assets/NotoSansKR-Light.woff +0 -0
  14. package/assets/NotoSansKR-Light.woff2 +0 -0
  15. package/assets/NotoSansKR-Medium.otf +0 -0
  16. package/assets/NotoSansKR-Medium.woff +0 -0
  17. package/assets/NotoSansKR-Medium.woff2 +0 -0
  18. package/assets/NotoSansKR-Regular.otf +0 -0
  19. package/assets/NotoSansKR-Regular.woff +0 -0
  20. package/assets/NotoSansKR-Regular.woff2 +0 -0
  21. package/assets/NotoSansKR-Thin.otf +0 -0
  22. package/assets/NotoSansKR-Thin.woff +0 -0
  23. package/assets/NotoSansKR-Thin.woff2 +0 -0
  24. package/assets/{LICENSE_OFL.txt → OFL.txt} +93 -92
  25. package/assets/images/flags.png +0 -0
  26. package/dist/js/gnui.esm.js +19752 -17631
  27. package/dist/js/gnui.js +19757 -17927
  28. package/dist/js/gnui.min.js +23 -1
  29. package/dist/styles/default.css +1 -3
  30. package/dist/styles/gpi.css +1 -3
  31. package/dist/styles/green24.css +1 -0
  32. package/dist/styles/insights.css +1 -3
  33. package/dist/styles/nac.css +1 -3
  34. package/dist/styles/ztnac.css +1 -0
  35. package/package.json +39 -30
  36. package/styleguide/assets/components.js +1031 -579
  37. package/styleguide/assets/guide.js +28 -26
  38. package/styleguide/assets/okadia.css +115 -117
  39. package/styleguide/assets/theme.css +140 -82
  40. package/styleguide/category/COLOR/index.html +75 -77
  41. package/styleguide/category/COMPONENT/Alert(js)/index.html +89 -92
  42. package/styleguide/category/COMPONENT/Bignumber/index.html +78 -82
  43. package/styleguide/category/COMPONENT/Breadcrumb/index.html +78 -82
  44. package/styleguide/category/COMPONENT/Calendar(js)/index.html +89 -92
  45. package/styleguide/category/COMPONENT/Card/index.html +78 -82
  46. package/styleguide/category/COMPONENT/Chart(js)/index.html +89 -92
  47. package/styleguide/category/COMPONENT/Datagrid(js)/index.html +354 -206
  48. package/styleguide/category/COMPONENT/Datalist(js)/index.html +471 -0
  49. package/styleguide/category/COMPONENT/Growl(js)/index.html +89 -92
  50. package/styleguide/category/COMPONENT/JsonView(js)/index.html +544 -246
  51. package/styleguide/category/{CONTROLS → COMPONENT}/MenuButton(js)/index.html +116 -92
  52. package/styleguide/category/COMPONENT/Message(js)/index.html +219 -95
  53. package/styleguide/category/COMPONENT/Modal(js)/index.html +128 -94
  54. package/styleguide/category/COMPONENT/Pagination/index.html +78 -82
  55. package/styleguide/category/COMPONENT/Panel/index.html +78 -82
  56. package/styleguide/category/COMPONENT/Progressbar(js)/index.html +89 -92
  57. package/styleguide/category/COMPONENT/Tab(js)/index.html +122 -93
  58. package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +88 -89
  59. package/styleguide/category/COMPONENT/Tooltip(js)/index.html +175 -92
  60. package/styleguide/category/COMPONENT/Tree(js)/index.html +95 -92
  61. package/styleguide/category/CONTROLS/Button(js)/index.html +110 -95
  62. package/styleguide/category/CONTROLS/Checkbox/index.html +82 -86
  63. package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +147 -93
  64. package/styleguide/category/CONTROLS/Datepicker(js)/index.html +124 -92
  65. package/styleguide/category/CONTROLS/Dropdown(js)/index.html +161 -132
  66. package/styleguide/category/CONTROLS/File/index.html +78 -82
  67. package/styleguide/category/CONTROLS/Form/Control/index.html +78 -82
  68. package/styleguide/category/CONTROLS/Form/Field/index.html +78 -82
  69. package/styleguide/category/CONTROLS/Form/Plain/index.html +78 -82
  70. package/styleguide/category/CONTROLS/Input/index.html +80 -84
  71. package/styleguide/category/CONTROLS/MultiText(js)/index.html +105 -92
  72. package/styleguide/category/CONTROLS/Picklist(js)/index.html +165 -141
  73. package/styleguide/category/CONTROLS/Radio/index.html +78 -82
  74. package/styleguide/category/CONTROLS/Select/index.html +80 -84
  75. package/styleguide/category/CONTROLS/SelectButton(js)/index.html +147 -92
  76. package/styleguide/category/CONTROLS/Slider/index.html +78 -82
  77. package/styleguide/category/CONTROLS/Switch(js)/index.html +105 -93
  78. package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +89 -92
  79. package/styleguide/category/CONTROLS/Textarea/index.html +78 -82
  80. package/styleguide/category/{COMPONENT → CONTROLS}/Time(js)/index.html +111 -92
  81. package/styleguide/category/ELEMENTS/Box/index.html +78 -82
  82. package/styleguide/category/ELEMENTS/Icon/index.html +122 -82
  83. package/styleguide/category/ELEMENTS/Image/index.html +78 -82
  84. package/styleguide/category/ELEMENTS/List/index.html +78 -82
  85. package/styleguide/category/ELEMENTS/Table/index.html +78 -82
  86. package/styleguide/category/ELEMENTS/Tag/index.html +78 -82
  87. package/styleguide/category/ELEMENTS/Title/index.html +78 -82
  88. package/styleguide/category/LAYOUT/Container/index.html +78 -82
  89. package/styleguide/category/LAYOUT/Grid/index.html +78 -82
  90. package/styleguide/category/LAYOUT/Splitter(js)/index.html +89 -92
  91. package/styleguide/category/UTILITY/index.html +80 -82
  92. package/styleguide/category/Utils/index.html +97 -71
  93. package/styleguide/color.html +66 -65
  94. package/styleguide/index.html +66 -65
  95. package/styleguide/tag/javascript/index.html +1984 -1011
  96. package/styleguide/tag/v.0.1.0/index.html +2730 -1568
  97. package/assets/NotoSansCJKkr-Black.otf +0 -0
  98. package/assets/NotoSansCJKkr-Bold.otf +0 -0
  99. package/assets/NotoSansCJKkr-DemiLight.otf +0 -0
  100. package/assets/NotoSansCJKkr-Light.otf +0 -0
  101. package/assets/NotoSansCJKkr-Medium.otf +0 -0
  102. package/assets/NotoSansCJKkr-Regular.otf +0 -0
  103. package/assets/NotoSansCJKkr-Thin.otf +0 -0
  104. package/assets/NotoSansMonoCJKkr-Bold.otf +0 -0
  105. package/assets/NotoSansMonoCJKkr-Regular.otf +0 -0
  106. package/assets/README +0 -11
  107. package/dist/styles/zt-nac.css +0 -3
package/styleguide/category/CONTROLS/Dropdown(js)/index.html CHANGED
@@ -1,65 +1,71 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
3
  <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width">
6
- <link href="../../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile">
7
- <link href="../../../assets/okadia.css" rel="stylesheet">
8
- <link href="../../../assets/theme.css" rel="stylesheet">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
10
- <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <link href="../../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile" />
7
+ <link href="../../../assets/okadia.css" rel="stylesheet" />
8
+ <link href="../../../assets/theme.css" rel="stylesheet" />
9
+ <link
10
+ rel="stylesheet"
11
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12
+ integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13
+ crossorigin="anonymous"
14
+ />
15
+ <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet" />
11
16
  <script src="../../../assets/components.js"></script>
12
17
  <script src="../../../../dist/js/gnui.js"></script>
13
18
  </head>
14
- <body>
15
- <div class="aigis-container">
16
- <header class="aigis-header gn-gcolor is-primary">
17
- <span><a href="../../../index.html" class="main-link" style="font-family: 'Squada One', cursive;">GNUI</a></span>
18
- <span class="has-text-invert" style="font-size: 1.0em;padding-left: 10px;">Start your next web project with GNUI.</span>
19
- <div class="gn-select is-medium">
20
- <select id="ThemeSelector">
21
-
19
+ <body>
20
+ <div class="aigis-container">
21
+ <header class="aigis-header gn-gcolor is-primary">
22
+ <span><a href="../../../index.html" class="main-link" style="font-family: 'Squada One', cursive">GNUI</a></span>
23
+ <span class="has-text-invert" style="font-size: 1em; padding-left: 10px">Start your next web project with GNUI.</span>
24
+ <div class="gn-select is-medium">
25
+ <select id="ThemeSelector">
26
+
22
27
  <option value="default">default</option>
23
-
28
+
24
29
  <option value="nac">nac</option>
25
-
30
+
26
31
  <option value="insights">insights</option>
27
-
32
+
28
33
  <option value="gpi">gpi</option>
29
-
30
- <option value="zt-nac">zt-nac</option>
31
-
32
- </select>
33
- </div>
34
- <div>
35
- <a class="gn-button is-primary util-link" href="../../../category/Utils/index.html">
36
- <span class="gn-icon is-small">
37
- <i class="fas fa-tools"></i>
38
- </span>
39
- Gn.util
40
- </a>
41
- </div>
42
- </header>
43
- <div class="aigis-sidemenu">
44
- <nav class="gn-tree is-borderless is-large left-menu">
45
- </nav>
34
+
35
+ <option value="ztnac">ztnac</option>
36
+
37
+ <option value="green24">green24</option>
38
+
39
+ </select>
40
+ </div>
41
+ <div>
42
+ <a class="gn-button is-primary util-link" href="../../../category/Utils/index.html">
43
+ <span class="gn-icon is-small">
44
+ <i class="fas fa-tools"></i>
45
+ </span>
46
+ Gn.util
47
+ </a>
48
+ </div>
49
+ </header>
50
+ <div class="aigis-sidemenu">
51
+ <nav class="gn-tree is-borderless is-large left-menu"></nav>
46
52
  </div>
47
53
 
48
54
  <script>
49
55
  window.Gn = window.gnui;
50
56
 
51
- Gn.ready(function(){
52
- var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Time(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/MenuButton(js),CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
57
+ Gn.ready(function () {
58
+ 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/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,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(','));
53
59
  var jsComps = ''.split(',');
54
60
  delete leftMenu.Utils;
55
61
  Gn.util.append('.left-menu', renderTree(leftMenu));
56
62
  Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
57
63
 
58
- function renderTree(menus){
64
+ function renderTree(menus) {
59
65
  var $depths = Gn.util.$('<ul></ul>');
60
- Gn.util.each(menus, function (child, menu){
61
- if(Gn.util.isString(child)){
62
- Gn.util.append($depths, renderMenu(menu, '../../../category/'+child+'/index.html', location.href.indexOf(child+'/') > -1));
66
+ Gn.util.each(menus, function (child, menu) {
67
+ if (Gn.util.isString(child)) {
68
+ Gn.util.append($depths, renderMenu(menu, '../../../category/' + child + '/index.html', location.href.indexOf(child + '/') > -1));
63
69
  } else {
64
70
  var $_depth = renderMenu(menu, '');
65
71
  Gn.util.append($_depth, renderTree(child));
@@ -69,35 +75,35 @@
69
75
  return $depths;
70
76
  }
71
77
 
72
- function renderMenu(name, link, isActive){
78
+ function renderMenu(name, link, isActive) {
73
79
  var $_menu;
74
- if (link === ''){
80
+ if (link === '') {
75
81
  $_menu = Gn.util.$('<li>' + name + '</li>');
76
82
  } else {
77
- var menuClass = isActive ? ' is-active' :''
78
- $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item'+menuClass+'">' + name.split('(js)').join('') + '</a></div></li>');
83
+ var menuClass = isActive ? ' is-active' : '';
84
+ $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item' + menuClass + '">' + name.split('(js)').join('') + '</a></div></li>');
79
85
  }
80
- if(name.indexOf('(js)') > 0){
86
+ if (name.indexOf('(js)') > 0) {
81
87
  Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
82
88
  }
83
89
  return $_menu;
84
90
  }
85
91
 
86
- function setTree(categorys){
92
+ function setTree(categorys) {
87
93
  var menus = {};
88
94
 
89
- categorys.forEach(function(category){
95
+ categorys.forEach(function (category) {
90
96
  parseTree(menus, category.split('/'), category);
91
97
  });
92
98
  return menus;
93
99
  }
94
100
 
95
- function parseTree(parents, child, catgry){
101
+ function parseTree(parents, child, catgry) {
96
102
  var _depth = child.shift();
97
103
  if (parents[_depth] === undefined) {
98
- parents[_depth] = {}
104
+ parents[_depth] = {};
99
105
  }
100
- if(child.length === 1){
106
+ if (child.length === 1) {
101
107
  parents[_depth][child] = catgry;
102
108
  } else if (child.length > 1) {
103
109
  parseTree(parents[_depth], child, catgry);
@@ -108,38 +114,32 @@
108
114
  });
109
115
  </script>
110
116
 
111
- <div class="aigis-contents">
112
- <div class="aigis-contents__body">
113
-
114
-
115
- <div>
116
- <div class="aigis-module Dropdown">
117
- <h2 class="aigis-module__heading" id="Dropdown">
118
- Dropdown
119
- </h2>
120
- <div class="aigis-module__filepath">
121
- /scss/components/dropdown.scss
122
- </div>
123
- <div class="aigis-tags">
124
-
125
-
126
- <span class="gn-tag">v.0.1.0</span>
127
-
128
-
129
-
130
- <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
131
-
117
+ <div class="aigis-contents">
118
+ <div class="aigis-contents__body">
119
+
120
+ <div>
121
+
122
+ <div class="aigis-module Dropdown">
123
+ <h2 class="aigis-module__heading" id="Dropdown">Dropdown</h2>
124
+ <div class="aigis-module__filepath">/scss/components/dropdown.scss</div>
125
+ <div class="aigis-tags">
126
+
127
+ <span class="gn-tag">v.0.1.0</span>
132
128
 
133
- </div>
134
-
135
- <!-- <div id="ComponentTab">
136
- <ul>
137
- <li><a href="#styleguide">Style</a></li>
138
- <li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
139
- </ul>
140
- </div> -->
141
-
142
- <h3 id="-">기본 사용</h3>
129
+ <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
130
+
131
+ </div>
132
+ <!-- <div id="ComponentTab">
133
+ <ul>
134
+ <li><a href="#styleguide">Style</a></li>
135
+ <li>
136
+ <a href="#scriptguide"
137
+ >Script <span class="gn-icon"><i class="fas fa-code"></i></span
138
+ ></a>
139
+ </li>
140
+ </ul>
141
+ </div> -->
142
+ <h3 id="-">기본 사용</h3>
143
143
  <ul>
144
144
  <li>드롭다운은 버튼과 생김새가 거의 동일 합니다. </li>
145
145
  <li>용도에 따라 3가지 버전으로 사용 합니다.</li>
@@ -795,16 +795,19 @@
795
795
  <h3 id="-">생성 옵션</h3>
796
796
  <div class="aigis-preview">
797
797
 
798
+ <select class="new-dropdown0" name="dropdown0">
799
+ </select>
800
+
798
801
  <select class="new-dropdown1" name="dropdown1">
799
802
  </select>
800
803
 
801
- <select class="new-dropdown3" name="dropdown3">
804
+ <select class="new-dropdown2" name="dropdown2">
802
805
  </select>
803
806
 
804
- <select class="new-dropdown4" name="dropdown4">
807
+ <select class="new-dropdown3" name="dropdown3">
805
808
  </select>
806
809
 
807
- <select class="new-dropdown2" name="dropdown2">
810
+ <select class="new-dropdown4" name="dropdown4">
808
811
  <option value="item1">항목1</option>
809
812
  <option value="item2">항목2</option>
810
813
  <option value="item3">항목3은 텍스트가 길어집니다.</option>
@@ -812,18 +815,22 @@
812
815
  <option value="item5">항목5</option>
813
816
  </select>
814
817
 
818
+
815
819
  </div>
816
820
 
817
- <pre><code class="language-ejs"> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown1<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
821
+ <pre><code class="language-ejs"> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown0<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown0<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
818
822
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
819
823
 
820
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown3<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
824
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown1<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
821
825
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
822
826
 
823
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown4<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
827
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown2<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
824
828
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
825
829
 
826
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown2<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
830
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown3<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
831
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
832
+
833
+ <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown4<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
827
834
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item1<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>option</span><span class="token punctuation" >></span></span>
828
835
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item2<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>option</span><span class="token punctuation" >></span></span>
829
836
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item3<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>option</span><span class="token punctuation" >></span></span>
@@ -831,16 +838,29 @@
831
838
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>item5<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목5<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
832
839
  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
833
840
 
841
+
834
842
  </code></pre>
835
843
  <pre><code> Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
844
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown0'</span><span class="token punctuation" >,</span>
845
+ onChange<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >,</span> values<span class="token punctuation" >)</span> {
846
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 값은 [ '</span> <span class="token operator" >+</span> val <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
847
+ }<span class="token punctuation" >,</span>
848
+ width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span><span class="token punctuation" >,</span>
849
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
850
+ { 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>
851
+ { 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>
852
+ { 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>
853
+ { 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>
854
+ { 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> }
855
+ <span class="token punctuation" >]</span>
856
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
857
+ Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
836
858
  target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown1'</span><span class="token punctuation" >,</span>
837
- className<span class="token punctuation" >:</span> <span class="token string" >'is-top'</span><span class="token punctuation" >,</span>
838
859
  onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >,</span> values<span class="token punctuation" >)</span>{
839
860
  console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 값은 [ '</span> <span class="token operator" >+</span> val <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span>
840
861
  }<span class="token punctuation" >,</span>
841
862
  width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span><span class="token punctuation" >,</span>
842
863
  value<span class="token punctuation" >:</span> <span class="token string" >'item2,item5'</span><span class="token punctuation" >,</span>
843
- type<span class="token punctuation" >:</span> <span class="token string" >'opened'</span><span class="token punctuation" >,</span>
844
864
  multiple<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
845
865
  data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
846
866
  { 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>
@@ -853,32 +873,7 @@
853
873
  <span class="token punctuation" >]</span>
854
874
  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
855
875
  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
856
- target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown2'</span><span class="token punctuation" >,</span>
857
- onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >)</span>{
858
- console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 항목은 [ '</span> <span class="token operator" >+</span> txt <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span>
859
- }<span class="token punctuation" >,</span>
860
- textSets<span class="token punctuation" >:</span> {
861
- selectText<span class="token punctuation" >:</span> <span class="token string" >'골라라'</span>
862
- }<span class="token punctuation" >,</span>
863
- value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span>
864
- hasSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
865
- color<span class="token punctuation" >:</span> <span class="token string" >'danger'</span>
866
- }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
867
- Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
868
- target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown3'</span><span class="token punctuation" >,</span>
869
- data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
870
- { 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>
871
- { 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>
872
- { value<span class="token punctuation" >:</span> <span class="token string" >'item3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span> }<span class="token punctuation" >,</span>
873
- { 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>
874
- { 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> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;p>&lt;strong>text&lt;/strong>가 있는 항목은 선택 시 &lt;u>text&lt;/u>로 대체됩니다.&lt;/p>'</span> }<span class="token punctuation" >,</span>
875
- { value<span class="token punctuation" >:</span> <span class="token string" >'item6'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;p>&lt;strong>text&lt;/strong>가 없는 항목은 &lt;u>선택&lt;/u>할 수 없습니다.&lt;/p>'</span> }
876
- <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
877
- width<span class="token punctuation" >:</span> <span class="token number" >150</span><span class="token punctuation" >,</span>
878
- scrollHeight<span class="token punctuation" >:</span> <span class="token number" >100</span>
879
- }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
880
- Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
881
- target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown4'</span><span class="token punctuation" >,</span>
876
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown2'</span><span class="token punctuation" >,</span>
882
877
  data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
883
878
  <span class="token punctuation" >[</span>
884
879
  { 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" >'Group1-항목1'</span> }<span class="token punctuation" >,</span>
@@ -890,6 +885,32 @@
890
885
  <span class="token punctuation" >]</span>
891
886
  <span class="token punctuation" >]</span>
892
887
  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
888
+ Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
889
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown3'</span><span class="token punctuation" >,</span>
890
+ data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
891
+ { value<span class="token punctuation" >:</span> <span class="token string" >''</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> '<span class="token operator" >&amp;</span>lt<span class="token comment" spellcheck="true">;선택안함&amp;gt;' },</span>
892
+ { value<span class="token punctuation" >:</span> <span class="token string" >'item1'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'home'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span> }<span class="token punctuation" >,</span>
893
+ { value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'star'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목2'</span> }<span class="token punctuation" >,</span>
894
+ { value<span class="token punctuation" >:</span> <span class="token string" >'item3'</span><span class="token punctuation" >,</span> icon<span class="token punctuation" >:</span> <span class="token string" >'heart'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span> }<span class="token punctuation" >,</span>
895
+ { 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>
896
+ { 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 operator" >&amp;</span>lt<span class="token comment" spellcheck="true">;항목5&amp;gt;', html: '&lt;p>&lt;strong>text&lt;/strong>가 있는 항목은 선택 시 &lt;u>text&lt;/u>로 대체됩니다.&lt;/p>' },</span>
897
+ { value<span class="token punctuation" >:</span> <span class="token string" >'item6'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;p>&lt;strong>text&lt;/strong>가 없는 항목은 &lt;u>선택&lt;/u>할 수 없습니다.&lt;/p>'</span> }
898
+ <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
899
+ width<span class="token punctuation" >:</span> <span class="token number" >150</span><span class="token punctuation" >,</span>
900
+ scrollHeight<span class="token punctuation" >:</span> <span class="token number" >100</span>
901
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
902
+ Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'dropdown'</span><span class="token punctuation" >,</span> {
903
+ target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown4'</span><span class="token punctuation" >,</span>
904
+ onChange<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>val<span class="token punctuation" >,</span> txt<span class="token punctuation" >)</span>{
905
+ console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 항목은 [ '</span> <span class="token operator" >+</span> txt <span class="token operator" >+</span> <span class="token string" >' ]입니다.'</span><span class="token punctuation" >)</span>
906
+ }<span class="token punctuation" >,</span>
907
+ textSets<span class="token punctuation" >:</span> {
908
+ selectText<span class="token punctuation" >:</span> <span class="token string" >'골라라'</span>
909
+ }<span class="token punctuation" >,</span>
910
+ value<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span>
911
+ hasSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
912
+ color<span class="token punctuation" >:</span> <span class="token string" >'danger'</span>
913
+ }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
893
914
  </code></pre><table class="gn-table is-full is-border">
894
915
  <thead>
895
916
  <th colspan="2">name</th>
@@ -905,17 +926,28 @@
905
926
  <td>dropdown을 생성할 대상의 선택자(selector)</td>
906
927
  </tr>
907
928
  <tr>
908
- <td>textSets</td>
929
+ <td rowspan="2">textSets</td>
909
930
  <td>selectText</td>
910
931
  <td>string</td>
932
+ <td></td>
911
933
  <td>&#39;선택하세요&#39;</td>
934
+ </tr>
935
+ <tr>
936
+ <td>searchText</td>
937
+ <td>string</td>
938
+ <td>&#39;search item&#39;</td>
912
939
  <td></td>
913
940
  </tr>
914
941
  <tr>
915
942
  <td colspan="2">data</td>
916
- <td>array[{value: string|array, text: string, html: string}]</td>
917
- <td></td>
943
+ <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
918
944
  <td></td>
945
+ <td>
946
+ value: 항목 값<br/>
947
+ text: 옵션 텍스트<br/>
948
+ html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br/>
949
+ 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
950
+ </td>
919
951
  </tr>
920
952
  <tr>
921
953
  <td colspan="2">value</td>
@@ -1004,30 +1036,27 @@
1004
1036
  <td>선택 항목을 변경한다.</td>
1005
1037
  </tr>
1006
1038
  <tr>
1007
- <td>disable</td>
1039
+ <td>disable()</td>
1008
1040
  <td>void</td>
1009
1041
  <td>Disabled 처리한다.</td>
1010
1042
  </tr>
1011
1043
  <tr>
1012
- <td>enable</td>
1044
+ <td>enable()</td>
1013
1045
  <td>void</td>
1014
1046
  <td>Enabled 처리한다.</td>
1015
1047
  </tr>
1016
1048
  </tbody>
1017
1049
  </table>
1018
1050
 
1019
- </div>
1020
1051
  </div>
1021
1052
 
1022
-
1023
-
1024
- <footer class="aigis-footer">Last update at 2023/04/04 17:59</footer>
1053
+ </div>
1054
+
1055
+
1056
+ <footer class="aigis-footer">Last update at 2024/04/15 13:52</footer>
1057
+ </div>
1025
1058
  </div>
1026
1059
  </div>
1027
- </div>
1028
- <script src="../../../assets/guide.js"></script>
1029
- </body>
1060
+ <script src="../../../assets/guide.js"></script>
1061
+ </body>
1030
1062
  </html>
1031
-
1032
-
1033
-