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
|
@@ -329,7 +329,7 @@ GN<span class="token punctuation" >.</span>util<span class="token punctuation" >
|
|
|
329
329
|
</div>
|
|
330
330
|
|
|
331
331
|
|
|
332
|
-
<footer class="aigis-footer">Last update at 2026/
|
|
332
|
+
<footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
|
|
333
333
|
</div>
|
|
334
334
|
</div>
|
|
335
335
|
</div>
|
package/styleguide/color.html
CHANGED
package/styleguide/index.html
CHANGED
|
@@ -6134,6 +6134,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
|
|
|
6134
6134
|
<select class="new-dropdown5" name="dropdown5">
|
|
6135
6135
|
</select>
|
|
6136
6136
|
|
|
6137
|
+
<select class="new-dropdown6" name="dropdown6">
|
|
6138
|
+
</select>
|
|
6139
|
+
|
|
6140
|
+
<select class="new-dropdown7" name="dropdown7">
|
|
6141
|
+
</select>
|
|
6142
|
+
|
|
6137
6143
|
|
|
6138
6144
|
</div>
|
|
6139
6145
|
|
|
@@ -6160,6 +6166,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
|
|
|
6160
6166
|
<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>
|
|
6161
6167
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>select</span><span class="token punctuation" >></span></span>
|
|
6162
6168
|
|
|
6169
|
+
<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>
|
|
6170
|
+
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>select</span><span class="token punctuation" >></span></span>
|
|
6171
|
+
|
|
6172
|
+
<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>
|
|
6173
|
+
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>select</span><span class="token punctuation" >></span></span>
|
|
6174
|
+
|
|
6163
6175
|
|
|
6164
6176
|
</code></pre>
|
|
6165
6177
|
<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> {
|
|
@@ -6247,6 +6259,70 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
|
|
|
6247
6259
|
{ 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> }
|
|
6248
6260
|
<span class="token punctuation" >]</span>
|
|
6249
6261
|
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
6262
|
+
<span class="token operator" >/</span><span class="token operator" >/</span> optionTooltip — 정적 콘텐츠
|
|
6263
|
+
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> {
|
|
6264
|
+
target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown6'</span><span class="token punctuation" >,</span>
|
|
6265
|
+
width<span class="token punctuation" >:</span> <span class="token string" >'200px'</span><span class="token punctuation" >,</span>
|
|
6266
|
+
data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
|
|
6267
|
+
{ 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>
|
|
6268
|
+
{ 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>
|
|
6269
|
+
{ 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>
|
|
6270
|
+
{ 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>
|
|
6271
|
+
{ 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> }
|
|
6272
|
+
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
|
|
6273
|
+
optionTooltip<span class="token punctuation" >:</span> {
|
|
6274
|
+
direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
|
|
6275
|
+
content<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
|
|
6276
|
+
var descriptions <span class="token operator" >=</span> {
|
|
6277
|
+
win<span class="token punctuation" >:</span> <span class="token string" >'마이크로소프트의 데스크톱 운영체제'</span><span class="token punctuation" >,</span>
|
|
6278
|
+
mac<span class="token punctuation" >:</span> <span class="token string" >'애플의 데스크톱 운영체제'</span><span class="token punctuation" >,</span>
|
|
6279
|
+
linux<span class="token punctuation" >:</span> <span class="token string" >'오픈소스 기반 운영체제'</span><span class="token punctuation" >,</span>
|
|
6280
|
+
android<span class="token punctuation" >:</span> <span class="token string" >'구글의 모바일 운영체제'</span><span class="token punctuation" >,</span>
|
|
6281
|
+
ios<span class="token punctuation" >:</span> <span class="token string" >'애플의 모바일 운영체제'</span>
|
|
6282
|
+
}<span class="token comment" spellcheck="true">;</span>
|
|
6283
|
+
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>
|
|
6284
|
+
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>
|
|
6285
|
+
}
|
|
6286
|
+
}
|
|
6287
|
+
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
6288
|
+
<span class="token operator" >/</span><span class="token operator" >/</span> optionTooltip — 비동기 fetch
|
|
6289
|
+
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> {
|
|
6290
|
+
target<span class="token punctuation" >:</span> <span class="token string" >'.new-dropdown7'</span><span class="token punctuation" >,</span>
|
|
6291
|
+
width<span class="token punctuation" >:</span> <span class="token string" >'200px'</span><span class="token punctuation" >,</span>
|
|
6292
|
+
data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
|
|
6293
|
+
{ 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>
|
|
6294
|
+
{ 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>
|
|
6295
|
+
{ 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>
|
|
6296
|
+
{ 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> }
|
|
6297
|
+
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
|
|
6298
|
+
optionTooltip<span class="token punctuation" >:</span> {
|
|
6299
|
+
direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
|
|
6300
|
+
fetch<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
|
|
6301
|
+
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> {
|
|
6302
|
+
<span class="token function" >setTimeout</span><span class="token punctuation" >(</span>function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
|
|
6303
|
+
var mockData <span class="token operator" >=</span> {
|
|
6304
|
+
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>
|
|
6305
|
+
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>
|
|
6306
|
+
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>
|
|
6307
|
+
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> }
|
|
6308
|
+
}<span class="token comment" spellcheck="true">;</span>
|
|
6309
|
+
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>
|
|
6310
|
+
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>
|
|
6311
|
+
<span class="token function" >resolve</span><span class="token punctuation" >(</span>
|
|
6312
|
+
<span class="token string" >'<div style="min-width:180px">'</span> <span class="token operator" >+</span>
|
|
6313
|
+
<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>
|
|
6314
|
+
'<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>
|
|
6315
|
+
<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>
|
|
6316
|
+
<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>
|
|
6317
|
+
<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>
|
|
6318
|
+
<span class="token string" >'</ul>'</span> <span class="token operator" >+</span>
|
|
6319
|
+
<span class="token string" >'</div>'</span>
|
|
6320
|
+
<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
6321
|
+
}<span class="token punctuation" >,</span> <span class="token number" >500</span><span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
6322
|
+
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
6323
|
+
}
|
|
6324
|
+
}
|
|
6325
|
+
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
6250
6326
|
</code></pre><h3 id="-dropdownitem-">데이터 모델 (DropdownItem)</h3>
|
|
6251
6327
|
<table class="gn-table is-full is-border">
|
|
6252
6328
|
<thead>
|
|
@@ -6370,6 +6446,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
|
|
|
6370
6446
|
<td></td>
|
|
6371
6447
|
<td>'opened' 상태에서 해당옵션만 지정 시 옵션영역의 최대 높이(스크롤 생성)</td>
|
|
6372
6448
|
</tr>
|
|
6449
|
+
<tr>
|
|
6450
|
+
<td colspan="2">optionTooltip</td>
|
|
6451
|
+
<td>object</td>
|
|
6452
|
+
<td></td>
|
|
6453
|
+
<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>
|
|
6454
|
+
</tr>
|
|
6373
6455
|
<tr>
|
|
6374
6456
|
<td colspan="2">hasSearch</td>
|
|
6375
6457
|
<td>boolean</td>
|
|
@@ -7014,11 +7096,13 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
|
|
|
7014
7096
|
<div class="new-picklist"></div>
|
|
7015
7097
|
<div class="new-picklist-v"></div>
|
|
7016
7098
|
<div class="new-picklist-cols"></div>
|
|
7099
|
+
<div class="new-picklist-tooltip"></div>
|
|
7017
7100
|
</div>
|
|
7018
7101
|
|
|
7019
7102
|
<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>
|
|
7020
7103
|
<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>
|
|
7021
7104
|
<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>
|
|
7105
|
+
<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>
|
|
7022
7106
|
</code></pre>
|
|
7023
7107
|
<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> {
|
|
7024
7108
|
target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist'</span><span class="token punctuation" >,</span>
|
|
@@ -7074,6 +7158,26 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
|
|
|
7074
7158
|
width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
|
|
7075
7159
|
height<span class="token punctuation" >:</span> <span class="token number" >150</span>
|
|
7076
7160
|
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
7161
|
+
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> {
|
|
7162
|
+
target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist-tooltip'</span><span class="token punctuation" >,</span>
|
|
7163
|
+
data<span class="token punctuation" >:</span> {
|
|
7164
|
+
source<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
|
|
7165
|
+
{ 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>
|
|
7166
|
+
{ 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>
|
|
7167
|
+
{ 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> }
|
|
7168
|
+
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
|
|
7169
|
+
target<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span>
|
|
7170
|
+
}<span class="token punctuation" >,</span>
|
|
7171
|
+
optionTooltip<span class="token punctuation" >:</span> {
|
|
7172
|
+
direction<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
|
|
7173
|
+
content<span class="token punctuation" >:</span> <span class="token function" >function</span><span class="token punctuation" >(</span>option<span class="token punctuation" >)</span> {
|
|
7174
|
+
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>
|
|
7175
|
+
}
|
|
7176
|
+
}<span class="token punctuation" >,</span>
|
|
7177
|
+
direction<span class="token punctuation" >:</span> <span class="token string" >'horizontal'</span><span class="token punctuation" >,</span>
|
|
7178
|
+
width<span class="token punctuation" >:</span> <span class="token string" >'500px'</span><span class="token punctuation" >,</span>
|
|
7179
|
+
height<span class="token punctuation" >:</span> <span class="token number" >150</span>
|
|
7180
|
+
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
7077
7181
|
</code></pre><h3 id="-picklistitem-">데이터 모델 (PicklistItem)</h3>
|
|
7078
7182
|
<table class="gn-table is-full is-border">
|
|
7079
7183
|
<thead>
|
|
@@ -7180,6 +7284,18 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
|
|
|
7180
7284
|
<td>150</td>
|
|
7181
7285
|
<td>선택항목 영역의 높이</td>
|
|
7182
7286
|
</tr>
|
|
7287
|
+
<tr>
|
|
7288
|
+
<td colspan="2">direction</td>
|
|
7289
|
+
<td>string</td>
|
|
7290
|
+
<td>'horizontal'</td>
|
|
7291
|
+
<td>컴포넌트 방향 ('horizontal', 'vertical')</td>
|
|
7292
|
+
</tr>
|
|
7293
|
+
<tr>
|
|
7294
|
+
<td colspan="2">optionTooltip</td>
|
|
7295
|
+
<td>object</td>
|
|
7296
|
+
<td></td>
|
|
7297
|
+
<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>
|
|
7298
|
+
</tr>
|
|
7183
7299
|
<tr>
|
|
7184
7300
|
<td colspan="2">hasSourceSearch</td>
|
|
7185
7301
|
<td>boolean</td>
|
|
@@ -8636,7 +8752,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
|
|
|
8636
8752
|
</div>
|
|
8637
8753
|
|
|
8638
8754
|
|
|
8639
|
-
<footer class="aigis-footer">Last update at 2026/
|
|
8755
|
+
<footer class="aigis-footer">Last update at 2026/07/06 00:03</footer>
|
|
8640
8756
|
</div>
|
|
8641
8757
|
</div>
|
|
8642
8758
|
</div>
|