gnui 1.2.21 → 1.2.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/js/gnui.esm.js +184 -4
- package/dist/js/gnui.js +184 -4
- package/dist/js/gnui.min.js +6 -6
- package/package.json +1 -1
- package/styleguide/assets/components.js +82 -0
- package/styleguide/assets/js/gnui.js +184 -4
- package/styleguide/assets/js/gnui.min.js +6 -6
- package/styleguide/category/COLOR/index.html +1 -1
- package/styleguide/category/COMPONENT/Alert(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Bignumber/index.html +1 -1
- package/styleguide/category/COMPONENT/Breadcrumb/index.html +1 -1
- package/styleguide/category/COMPONENT/Calendar(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Card/index.html +1 -1
- package/styleguide/category/COMPONENT/Chart(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Datagrid(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Datalist(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Growl(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/JsonView(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Loader(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/MenuButton(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Message(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Modal(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Pagination(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Panel/index.html +1 -1
- package/styleguide/category/COMPONENT/Progressbar(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Tab(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Tooltip(js)/index.html +1 -1
- package/styleguide/category/COMPONENT/Tree(js)/index.html +1 -1
- package/styleguide/category/CONTROLS/Button(js)/index.html +1 -1
- package/styleguide/category/CONTROLS/Checkbox/index.html +1 -1
- package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +1 -1
- package/styleguide/category/CONTROLS/Datepicker(js)/index.html +1 -1
- package/styleguide/category/CONTROLS/Dropdown(js)/index.html +83 -1
- package/styleguide/category/CONTROLS/File/index.html +1 -1
- package/styleguide/category/CONTROLS/Form/Control/index.html +1 -1
- package/styleguide/category/CONTROLS/Form/Field/index.html +1 -1
- package/styleguide/category/CONTROLS/Form/Plain/index.html +1 -1
- package/styleguide/category/CONTROLS/Input/index.html +1 -1
- package/styleguide/category/CONTROLS/MultiText(js)/index.html +1 -1
- package/styleguide/category/CONTROLS/Picklist(js)/index.html +35 -1
- package/styleguide/category/CONTROLS/Radio/index.html +1 -1
- package/styleguide/category/CONTROLS/Select/index.html +1 -1
- package/styleguide/category/CONTROLS/SelectButton(js)/index.html +1 -1
- package/styleguide/category/CONTROLS/Slider/index.html +1 -1
- package/styleguide/category/CONTROLS/SortableList(js)/index.html +1 -1
- package/styleguide/category/CONTROLS/Switch(js)/index.html +1 -1
- package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +1 -1
- package/styleguide/category/CONTROLS/Textarea/index.html +1 -1
- package/styleguide/category/CONTROLS/Time(js)/index.html +1 -1
- package/styleguide/category/ELEMENTS/Box/index.html +1 -1
- package/styleguide/category/ELEMENTS/Icon/index.html +1 -1
- package/styleguide/category/ELEMENTS/Image/index.html +1 -1
- package/styleguide/category/ELEMENTS/List/index.html +1 -1
- package/styleguide/category/ELEMENTS/Table/index.html +1 -1
- package/styleguide/category/ELEMENTS/Tag/index.html +1 -1
- package/styleguide/category/ELEMENTS/Title/index.html +1 -1
- package/styleguide/category/LAYOUT/Container/index.html +1 -1
- package/styleguide/category/LAYOUT/Grid/index.html +1 -1
- package/styleguide/category/LAYOUT/Splitter(js)/index.html +1 -1
- package/styleguide/category/UTILITY/index.html +1 -1
- package/styleguide/category/Utils/index.html +1 -1
- package/styleguide/color.html +1 -1
- package/styleguide/index.html +1 -1
- package/styleguide/tag/javascript/index.html +117 -1
- package/styleguide/tag/v.0.1.0/index.html +117 -1
|
@@ -901,7 +901,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
|
|
|
901
901
|
</div>
|
|
902
902
|
|
|
903
903
|
|
|
904
|
-
<footer class="aigis-footer">Last update at 2026/
|
|
904
|
+
<footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
|
|
905
905
|
</div>
|
|
906
906
|
</div>
|
|
907
907
|
</div>
|
|
@@ -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 2026/
|
|
466
|
+
<footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
|
|
467
467
|
</div>
|
|
468
468
|
</div>
|
|
469
469
|
</div>
|
|
@@ -304,7 +304,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
|
|
|
304
304
|
</div>
|
|
305
305
|
|
|
306
306
|
|
|
307
|
-
<footer class="aigis-footer">Last update at 2026/
|
|
307
|
+
<footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
|
|
308
308
|
</div>
|
|
309
309
|
</div>
|
|
310
310
|
</div>
|
|
@@ -507,7 +507,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
|
|
|
507
507
|
</div>
|
|
508
508
|
|
|
509
509
|
|
|
510
|
-
<footer class="aigis-footer">Last update at 2026/
|
|
510
|
+
<footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
|
|
511
511
|
</div>
|
|
512
512
|
</div>
|
|
513
513
|
</div>
|
|
@@ -857,6 +857,12 @@
|
|
|
857
857
|
<select class="new-dropdown5" name="dropdown5">
|
|
858
858
|
</select>
|
|
859
859
|
|
|
860
|
+
<select class="new-dropdown6" name="dropdown6">
|
|
861
|
+
</select>
|
|
862
|
+
|
|
863
|
+
<select class="new-dropdown7" name="dropdown7">
|
|
864
|
+
</select>
|
|
865
|
+
|
|
860
866
|
|
|
861
867
|
</div>
|
|
862
868
|
|
|
@@ -883,6 +889,12 @@
|
|
|
883
889
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>select</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-dropdown5<span class="token punctuation" >"</span></span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown5<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
884
890
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>select</span><span class="token punctuation" >></span></span>
|
|
885
891
|
|
|
892
|
+
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-dropdown6<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>dropdown6<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
893
|
+
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>select</span><span class="token punctuation" >></span></span>
|
|
894
|
+
|
|
895
|
+
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-dropdown7<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>dropdown7<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
896
|
+
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>select</span><span class="token punctuation" >></span></span>
|
|
897
|
+
|
|
886
898
|
|
|
887
899
|
</code></pre>
|
|
888
900
|
<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> {
|
|
@@ -970,6 +982,70 @@
|
|
|
970
982
|
{ value<span class="token punctuation" >:</span> <span class="token string" >'5'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목5'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리B'</span><span class="token punctuation" >,</span> <span class="token string" >'5000'</span><span class="token punctuation" >]</span> }
|
|
971
983
|
<span class="token punctuation" >]</span>
|
|
972
984
|
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
985
|
+
<span class="token operator" >/</span><span class="token operator" >/</span> optionTooltip — 정적 콘텐츠
|
|
986
|
+
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> {
|
|
987
|
+
target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown6'</span><span class="token punctuation" >,</span>
|
|
988
|
+
width<span class="token punctuation" >:</span> <span class="token string" >'200px'</span><span class="token punctuation" >,</span>
|
|
989
|
+
data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
|
|
990
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'win'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'Windows'</span> }<span class="token punctuation" >,</span>
|
|
991
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'mac'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'macOS'</span> }<span class="token punctuation" >,</span>
|
|
992
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'linux'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'Linux'</span> }<span class="token punctuation" >,</span>
|
|
993
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'android'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'Android'</span> }<span class="token punctuation" >,</span>
|
|
994
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'ios'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'iOS'</span> }
|
|
995
|
+
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
|
|
996
|
+
optionTooltip<span class="token punctuation" >:</span> {
|
|
997
|
+
direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
|
|
998
|
+
content<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
|
|
999
|
+
var descriptions <span class="token operator" >=</span> {
|
|
1000
|
+
win<span class="token punctuation" >:</span> <span class="token string" >'마이크로소프트의 데스크톱 운영체제'</span><span class="token punctuation" >,</span>
|
|
1001
|
+
mac<span class="token punctuation" >:</span> <span class="token string" >'애플의 데스크톱 운영체제'</span><span class="token punctuation" >,</span>
|
|
1002
|
+
linux<span class="token punctuation" >:</span> <span class="token string" >'오픈소스 기반 운영체제'</span><span class="token punctuation" >,</span>
|
|
1003
|
+
android<span class="token punctuation" >:</span> <span class="token string" >'구글의 모바일 운영체제'</span><span class="token punctuation" >,</span>
|
|
1004
|
+
ios<span class="token punctuation" >:</span> <span class="token string" >'애플의 모바일 운영체제'</span>
|
|
1005
|
+
}<span class="token comment" spellcheck="true">;</span>
|
|
1006
|
+
var desc <span class="token operator" >=</span> descriptions<span class="token punctuation" >[</span>option<span class="token punctuation" >.</span>value<span class="token punctuation" >]</span> || <span class="token string" >''</span><span class="token comment" spellcheck="true">;</span>
|
|
1007
|
+
return <span class="token string" >'<div style="min-width:160px"><strong>'</span> <span class="token operator" >+</span> option<span class="token punctuation" >.</span>text <span class="token operator" >+</span> <span class="token string" >'</strong><p style="margin:4px 0 0">'</span> <span class="token operator" >+</span> desc <span class="token operator" >+</span> <span class="token string" >'</p></div>'</span><span class="token comment" spellcheck="true">;</span>
|
|
1008
|
+
}
|
|
1009
|
+
}
|
|
1010
|
+
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
1011
|
+
<span class="token operator" >/</span><span class="token operator" >/</span> optionTooltip — 비동기 fetch
|
|
1012
|
+
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> {
|
|
1013
|
+
target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown7'</span><span class="token punctuation" >,</span>
|
|
1014
|
+
width<span class="token punctuation" >:</span> <span class="token string" >'200px'</span><span class="token punctuation" >,</span>
|
|
1015
|
+
data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
|
|
1016
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'host1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'192.168.0.1'</span> }<span class="token punctuation" >,</span>
|
|
1017
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'host2'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'192.168.0.2'</span> }<span class="token punctuation" >,</span>
|
|
1018
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'host3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'10.0.0.1'</span> }<span class="token punctuation" >,</span>
|
|
1019
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'host4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'10.0.0.2'</span> }
|
|
1020
|
+
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
|
|
1021
|
+
optionTooltip<span class="token punctuation" >:</span> {
|
|
1022
|
+
direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
|
|
1023
|
+
fetch<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
|
|
1024
|
+
return new <span class="token function" >Promise</span><span class="token punctuation" >(</span>function <span class="token punctuation" >(</span>resolve<span class="token punctuation" >)</span> {
|
|
1025
|
+
<span class="token function" >setTimeout</span><span class="token punctuation" >(</span>function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
|
|
1026
|
+
var mockData <span class="token operator" >=</span> {
|
|
1027
|
+
host1<span class="token punctuation" >:</span> { name<span class="token punctuation" >:</span> <span class="token string" >'Server-A'</span><span class="token punctuation" >,</span> os<span class="token punctuation" >:</span> <span class="token string" >'Windows Server 2022'</span><span class="token punctuation" >,</span> status<span class="token punctuation" >:</span> <span class="token string" >'online'</span> }<span class="token punctuation" >,</span>
|
|
1028
|
+
host2<span class="token punctuation" >:</span> { name<span class="token punctuation" >:</span> <span class="token string" >'Server-B'</span><span class="token punctuation" >,</span> os<span class="token punctuation" >:</span> <span class="token string" >'Ubuntu 22.04'</span><span class="token punctuation" >,</span> status<span class="token punctuation" >:</span> <span class="token string" >'online'</span> }<span class="token punctuation" >,</span>
|
|
1029
|
+
host3<span class="token punctuation" >:</span> { name<span class="token punctuation" >:</span> <span class="token string" >'Router-1'</span><span class="token punctuation" >,</span> os<span class="token punctuation" >:</span> <span class="token string" >'Cisco IOS'</span><span class="token punctuation" >,</span> status<span class="token punctuation" >:</span> <span class="token string" >'online'</span> }<span class="token punctuation" >,</span>
|
|
1030
|
+
host4<span class="token punctuation" >:</span> { name<span class="token punctuation" >:</span> <span class="token string" >'Switch-1'</span><span class="token punctuation" >,</span> os<span class="token punctuation" >:</span> <span class="token string" >'Cisco NX-OS'</span><span class="token punctuation" >,</span> status<span class="token punctuation" >:</span> <span class="token string" >'offline'</span> }
|
|
1031
|
+
}<span class="token comment" spellcheck="true">;</span>
|
|
1032
|
+
var d <span class="token operator" >=</span> mockData<span class="token punctuation" >[</span>option<span class="token punctuation" >.</span>value<span class="token punctuation" >]</span><span class="token comment" spellcheck="true">;</span>
|
|
1033
|
+
var statusColor <span class="token operator" >=</span> d<span class="token punctuation" >.</span>status <span class="token operator" >==</span><span class="token operator" >=</span> <span class="token string" >'online'</span> <span class="token operator" >?</span> <span class="token string" >'success'</span> <span class="token punctuation" >:</span> <span class="token string" >'danger'</span><span class="token comment" spellcheck="true">;</span>
|
|
1034
|
+
<span class="token function" >resolve</span><span class="token punctuation" >(</span>
|
|
1035
|
+
<span class="token string" >'<div style="min-width:180px">'</span> <span class="token operator" >+</span>
|
|
1036
|
+
<span class="token string" >'<strong>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >.</span>name <span class="token operator" >+</span> <span class="token string" >'</strong>'</span> <span class="token operator" >+</span>
|
|
1037
|
+
'<span class="token operator" ><</span>ul style<span class="token operator" >=</span>"margin<span class="token punctuation" >:</span>6px <span class="token number" >0</span> <span class="token number" >0</span><span class="token comment" spellcheck="true">;padding:0;list-style:none">' +</span>
|
|
1038
|
+
<span class="token string" >'<li>IP: '</span> <span class="token operator" >+</span> option<span class="token punctuation" >.</span>text <span class="token operator" >+</span> <span class="token string" >'</li>'</span> <span class="token operator" >+</span>
|
|
1039
|
+
<span class="token string" >'<li>OS: '</span> <span class="token operator" >+</span> d<span class="token punctuation" >.</span>os <span class="token operator" >+</span> <span class="token string" >'</li>'</span> <span class="token operator" >+</span>
|
|
1040
|
+
<span class="token string" >'<li>상태: <span class="gn-tag is-'</span> <span class="token operator" >+</span> statusColor <span class="token operator" >+</span> <span class="token string" >' is-small">'</span> <span class="token operator" >+</span> d<span class="token punctuation" >.</span>status <span class="token operator" >+</span> <span class="token string" >'</span></li>'</span> <span class="token operator" >+</span>
|
|
1041
|
+
<span class="token string" >'</ul>'</span> <span class="token operator" >+</span>
|
|
1042
|
+
<span class="token string" >'</div>'</span>
|
|
1043
|
+
<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
1044
|
+
}<span class="token punctuation" >,</span> <span class="token number" >500</span><span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
1045
|
+
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
1046
|
+
}
|
|
1047
|
+
}
|
|
1048
|
+
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
973
1049
|
</code></pre><h3 id="-dropdownitem-">데이터 모델 (DropdownItem)</h3>
|
|
974
1050
|
<table class="gn-table is-full is-border">
|
|
975
1051
|
<thead>
|
|
@@ -1093,6 +1169,12 @@
|
|
|
1093
1169
|
<td></td>
|
|
1094
1170
|
<td>'opened' 상태에서 해당옵션만 지정 시 옵션영역의 최대 높이(스크롤 생성)</td>
|
|
1095
1171
|
</tr>
|
|
1172
|
+
<tr>
|
|
1173
|
+
<td colspan="2">optionTooltip</td>
|
|
1174
|
+
<td>object</td>
|
|
1175
|
+
<td></td>
|
|
1176
|
+
<td>옵션 툴팁 설정<br/><br/><strong>direction</strong>: 'top','right','bottom','left'<br/><strong>content</strong>: function(option){ return htmlString }<br/><strong>fetch</strong>: function(option){ return Promise that resolves htmlString }</td>
|
|
1177
|
+
</tr>
|
|
1096
1178
|
<tr>
|
|
1097
1179
|
<td colspan="2">hasSearch</td>
|
|
1098
1180
|
<td>boolean</td>
|
|
@@ -1161,7 +1243,7 @@
|
|
|
1161
1243
|
</div>
|
|
1162
1244
|
|
|
1163
1245
|
|
|
1164
|
-
<footer class="aigis-footer">Last update at 2026/
|
|
1246
|
+
<footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
|
|
1165
1247
|
</div>
|
|
1166
1248
|
</div>
|
|
1167
1249
|
</div>
|
|
@@ -296,7 +296,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
|
|
|
296
296
|
</div>
|
|
297
297
|
|
|
298
298
|
|
|
299
|
-
<footer class="aigis-footer">Last update at 2026/
|
|
299
|
+
<footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
|
|
300
300
|
</div>
|
|
301
301
|
</div>
|
|
302
302
|
</div>
|
|
@@ -526,11 +526,13 @@
|
|
|
526
526
|
<div class="new-picklist"></div>
|
|
527
527
|
<div class="new-picklist-v"></div>
|
|
528
528
|
<div class="new-picklist-cols"></div>
|
|
529
|
+
<div class="new-picklist-tooltip"></div>
|
|
529
530
|
</div>
|
|
530
531
|
|
|
531
532
|
<pre><code class="language-ejs"> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-picklist<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
532
533
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-picklist-v<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
533
534
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-picklist-cols<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
535
|
+
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-picklist-tooltip<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
534
536
|
</code></pre>
|
|
535
537
|
<pre><code> Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'picklist'</span><span class="token punctuation" >,</span> {
|
|
536
538
|
target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist'</span><span class="token punctuation" >,</span>
|
|
@@ -586,6 +588,26 @@
|
|
|
586
588
|
width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
|
|
587
589
|
height<span class="token punctuation" >:</span> <span class="token number" >150</span>
|
|
588
590
|
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
591
|
+
Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'picklist'</span><span class="token punctuation" >,</span> {
|
|
592
|
+
target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist-tooltip'</span><span class="token punctuation" >,</span>
|
|
593
|
+
data<span class="token punctuation" >:</span> {
|
|
594
|
+
source<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
|
|
595
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item1'</span> }<span class="token punctuation" >,</span>
|
|
596
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'항목2'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item2'</span> }<span class="token punctuation" >,</span>
|
|
597
|
+
{ value<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item3'</span> }
|
|
598
|
+
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
|
|
599
|
+
target<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span>
|
|
600
|
+
}<span class="token punctuation" >,</span>
|
|
601
|
+
optionTooltip<span class="token punctuation" >:</span> {
|
|
602
|
+
direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
|
|
603
|
+
content<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
|
|
604
|
+
return '<span class="token operator" ><</span>div style<span class="token operator" >=</span>"padding<span class="token punctuation" >:</span> 10px<span class="token comment" spellcheck="true">; max-width: 200px;">' + option.text + '에 대한 추가 정보입니다.</div>';</span>
|
|
605
|
+
}
|
|
606
|
+
}<span class="token punctuation" >,</span>
|
|
607
|
+
direction<span class="token punctuation" >:</span> <span class="token string" >'horizontal'</span><span class="token punctuation" >,</span>
|
|
608
|
+
width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
|
|
609
|
+
height<span class="token punctuation" >:</span> <span class="token number" >150</span>
|
|
610
|
+
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
589
611
|
</code></pre><h3 id="-picklistitem-">데이터 모델 (PicklistItem)</h3>
|
|
590
612
|
<table class="gn-table is-full is-border">
|
|
591
613
|
<thead>
|
|
@@ -692,6 +714,18 @@
|
|
|
692
714
|
<td>150</td>
|
|
693
715
|
<td>선택항목 영역의 높이</td>
|
|
694
716
|
</tr>
|
|
717
|
+
<tr>
|
|
718
|
+
<td colspan="2">direction</td>
|
|
719
|
+
<td>string</td>
|
|
720
|
+
<td>'horizontal'</td>
|
|
721
|
+
<td>컴포넌트 방향 ('horizontal', 'vertical')</td>
|
|
722
|
+
</tr>
|
|
723
|
+
<tr>
|
|
724
|
+
<td colspan="2">optionTooltip</td>
|
|
725
|
+
<td>object</td>
|
|
726
|
+
<td></td>
|
|
727
|
+
<td>옵션 툴팁 설정<br/><br/><strong>direction</strong>: 'top','right','bottom','left'<br/><strong>content</strong>: function(option){ return htmlString }<br/><strong>fetch</strong>: function(option){ return Promise that resolves htmlString }</td>
|
|
728
|
+
</tr>
|
|
695
729
|
<tr>
|
|
696
730
|
<td colspan="2">hasSourceSearch</td>
|
|
697
731
|
<td>boolean</td>
|
|
@@ -794,7 +828,7 @@
|
|
|
794
828
|
</div>
|
|
795
829
|
|
|
796
830
|
|
|
797
|
-
<footer class="aigis-footer">Last update at 2026/
|
|
831
|
+
<footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
|
|
798
832
|
</div>
|
|
799
833
|
</div>
|
|
800
834
|
</div>
|