gnui 1.2.17 → 1.2.18

package/styleguide/tag/v.0.1.0/index.html

@@ -56,7 +56,7 @@
   window.Gn = window.gnui;
 
   Gn.ready(function () {
-    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Datalist(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Loader(js),COMPONENT/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination(js),COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,CONTROLS/Time(js),ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
+    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Datalist(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Loader(js),COMPONENT/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination(js),COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/SortableList(js),CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,CONTROLS/Time(js),ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
     var jsComps = ''.split(',');
     delete leftMenu.Utils;
     Gn.util.append('.left-menu', renderTree(leftMenu));
@@ -1486,16 +1486,24 @@
 
 <div class="new-grid"></div>
 
-<div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
+<div style="width: 100%; height: 100px; overflow-x: auto; margin-top: 20px;">
   <div class="new-grid2"></div>
 </div>
+
+<div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
+  <div class="new-grid3"></div>
+</div>
 </div>
 
 <pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >350</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >100</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >350</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
   target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid'</span><span class="token punctuation" >,</span>
@@ -1607,19 +1615,122 @@
 }<span class="token punctuation" >)</span>
 Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
   target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid2'</span><span class="token punctuation" >,</span>
+  headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'no'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
+      onSelect<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
+        <span class="token operator" >/</span><span class="token operator" >/</span> eslint<span class="token operator" >-</span>disable<span class="token operator" >-</span><span class="token keyword" >next</span><span class="token operator" >-</span>line prefer<span class="token operator" >-</span>rest<span class="token operator" >-</span>params
+        console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>arguments<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+      }<span class="token punctuation" >,</span>
+      template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
+        return <span class="token string" >'&lt;span>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span><span class="token comment" spellcheck="true">;</span>
+      }<span class="token punctuation" >,</span>
+      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      sort<span class="token punctuation" >:</span> <span class="token string" >'asc'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
+      style<span class="token punctuation" >:</span> {
+        width<span class="token punctuation" >:</span> <span class="token string" >'250px'</span>
+      }<span class="token punctuation" >,</span>
+      className<span class="token punctuation" >:</span> <span class="token string" >'has-text-right'</span><span class="token punctuation" >,</span>
+      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span><span class="token punctuation" >,</span>
+      sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'날짜'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'date'</span><span class="token punctuation" >,</span>
+      style<span class="token punctuation" >:</span> {
+        width<span class="token punctuation" >:</span> <span class="token string" >'150px'</span>
+      }<span class="token punctuation" >,</span>
+      className<span class="token punctuation" >:</span> <span class="token string" >'has-text-center'</span><span class="token punctuation" >,</span>
+      bodyClass<span class="token punctuation" >:</span> <span class="token string" >'has-text-left'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'하나'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
+      child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+        {
+          number<span class="token punctuation" >:</span> <span class="token string" >'1-1'</span><span class="token punctuation" >,</span>
+          title<span class="token punctuation" >:</span> <span class="token string" >'1-하나'</span><span class="token punctuation" >,</span>
+          date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
+        }<span class="token punctuation" >,</span>
+        {
+          number<span class="token punctuation" >:</span> <span class="token string" >'1-2'</span><span class="token punctuation" >,</span>
+          title<span class="token punctuation" >:</span> <span class="token string" >'1-둘'</span><span class="token punctuation" >,</span>
+          date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+          desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
+          child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+            {
+              number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1'</span><span class="token punctuation" >,</span>
+              title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1'</span><span class="token punctuation" >,</span>
+              date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+              desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
+              child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+                {
+                  number<span class="token punctuation" >:</span> <span class="token string" >'1-2-1-1'</span><span class="token punctuation" >,</span>
+                  title<span class="token punctuation" >:</span> <span class="token string" >'1-둘-1-1'</span><span class="token punctuation" >,</span>
+                  desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span><span class="token punctuation" >,</span>
+                  date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span>
+                }
+              <span class="token punctuation" >]</span>
+            }
+          <span class="token punctuation" >]</span>
+        }
+      <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+      color<span class="token punctuation" >:</span> <span class="token string" >'is-danger-light'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      number<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
+      title<span class="token punctuation" >:</span> <span class="token string" >'둘'</span><span class="token punctuation" >,</span>
+      date<span class="token punctuation" >:</span> <span class="token string" >'2020-09-19'</span><span class="token punctuation" >,</span>
+      desc<span class="token punctuation" >:</span> <span class="token string" >'hello, world'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  hasHeader<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
+  hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  textSets<span class="token punctuation" >:</span> {
+    deleteConfirmMessage<span class="token punctuation" >:</span> <span class="token string" >'파일을 삭제하시겠습니까?'</span>
+  }<span class="token punctuation" >,</span>
+  <span class="token operator" >/</span><span class="token operator" >/</span> onDelete 에서 <span class="token boolean" >false</span> 를 반환하면 해당 행 삭제를 취소할 수 있다<span class="token punctuation" >.</span>
+  onDelete<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>data<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> {
+    console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>data<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    <span class="token operator" >/</span><span class="token operator" >/</span> 예<span class="token punctuation" >)</span> 특정 조건에 따라 삭제 취소
+    <span class="token operator" >/</span><span class="token operator" >/</span> <span class="token keyword" >if</span> <span class="token punctuation" >(</span>index <span class="token operator" >==</span><span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >)</span> {
+    <span class="token operator" >/</span><span class="token operator" >/</span>   return <span class="token boolean" >false</span><span class="token comment" spellcheck="true">;</span>
+    <span class="token operator" >/</span><span class="token operator" >/</span> }
+  }
+}<span class="token punctuation" >)</span>
+Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
+  target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid3'</span><span class="token punctuation" >,</span>
   headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
     {
       label<span class="token punctuation" >:</span> <span class="token string" >'row data numbers'</span><span class="token punctuation" >,</span>
       key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
       style<span class="token punctuation" >:</span> { width<span class="token punctuation" >:</span> <span class="token string" >'50px'</span> }<span class="token punctuation" >,</span>
       sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
-      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
+        return <span class="token string" >'&lt;span>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span><span class="token comment" spellcheck="true">;</span>
+      }
     }<span class="token punctuation" >,</span>
     {
       label<span class="token punctuation" >:</span> <span class="token string" >'제목'</span><span class="token punctuation" >,</span>
       key<span class="token punctuation" >:</span> <span class="token string" >'title'</span><span class="token punctuation" >,</span>
       sortable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
-      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+      draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
+        return <span class="token string" >'&lt;span>'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span><span class="token comment" spellcheck="true">;</span>
+      }
     }<span class="token punctuation" >,</span>
     {
       label<span class="token punctuation" >:</span> <span class="token string" >'날짜를 표시하는 컬럼입니다'</span><span class="token punctuation" >,</span>
@@ -1682,8 +1793,6 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
   paginator<span class="token punctuation" >:</span> {
     rows<span class="token punctuation" >:</span> <span class="token number" >30</span>
   }<span class="token punctuation" >,</span>
-  hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
-  fixHeader<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
   onChange<span class="token punctuation" >:</span> updatedData <span class="token operator" >=</span><span class="token operator" >></span> {
     console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>updatedData<span class="token punctuation" >)</span>
   }
@@ -1795,7 +1904,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <b>color:is-warning-light</b> =&gt; 행의 색 변경</td>
     </tr>
     <tr>
-      <td rowspan="3">textSets</td>
+      <td rowspan="4">textSets</td>
       <td>noData</td>
       <td>string</td>
       <td>No records available.</td>
@@ -1813,6 +1922,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td></td>
       <td>삭제버튼 헤더표시문구</td>
     </tr>
+    <tr>
+      <td>deleteConfirmMessage</td>
+      <td>string</td>
+      <td></td>
+      <td>삭제 확인 창 표시문구 - 삭제 버튼 클릭시 확인 창 출력</td>
+    </tr>
     <tr>
       <td colspan="2">childField</td>
       <td>string</td>
@@ -1837,6 +1952,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>false</td>
       <td>삭제버튼 생성 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">hasHeader</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>헤더 생성 여부</td>
+    </tr>
     <tr>
       <td colspan="2">readonly</td>
       <td>boolean</td>
@@ -1934,6 +2055,12 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td></td>
       <td>이동, 삭제 등의 데이터 변경이 있는 경우, 변경된 데이터를 가져오기 위한 이벤트핸들러</td>
     </tr>
+    <tr>
+      <td colspan="2">onDelete</td>
+      <td>function(deletedData, index)</td>
+      <td>deletedData, index 를 인자로 받으며, false 를 반환하면 해당 행 삭제를 취소한다.</td>
+      <td>삭제 버튼 클릭 시 삭제 대상 데이터와 인덱스를 받을 수 있는 이벤트핸들러<br>onChange 보다 먼저 동작하며, onDelete 에서 false 를 반환하면 실제 삭제 및 onChange 호출이 수행되지 않는다.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -4605,13 +4732,30 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-danger<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
+<div class="aigis-preview">
+  <div class="gn-loader is-inline"></div>
+<div class="gn-loader is-inline is-success"></div>
+<div class="gn-loader is-inline is-warning"></div>
+<div class="gn-loader is-inline is-danger"></div>
+<div class="gn-loader is-inline is-info"></div>
+<div class="gn-loader is-inline is-primary"></div></div>
+
+<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-inline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-inline is-success<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-inline is-warning<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-inline is-danger<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-inline is-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-inline is-primary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+</code></pre>
 <h3 id="-">타입</h3>
 <div class="aigis-preview">
   <div class="gn-loader is-bounce"></div><br>
-<div class="gn-loader is-move"></div></div>
+<div class="gn-loader is-move"></div>
+<div class="gn-loader is-inline"></div><br></div>
 
 <pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-bounce<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>br</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-move<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-loader is-inline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>br</span><span class="token punctuation" >></span></span>
 </code></pre>
 <h3 id="-">생성 옵션</h3>
 <div class="aigis-preview">
@@ -4673,7 +4817,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td colspan="2">type</td>
       <td>string</td>
       <td></td>
-      <td>&#39;bounce&#39;,&#39;move&#39;,&#39;circle&#39;</td>
+      <td>&#39;inline&#39;,&#39;bounce&#39;,&#39;move&#39;,&#39;</td>
     </tr>
     <tr>
       <td colspan="2">positionX</td>
@@ -6336,22 +6480,26 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-picklist-v<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <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> {
-    target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist'</span><span class="token punctuation" >,</span> 
-    data <span class="token punctuation" >:</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist'</span><span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> {
       source<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
-        { 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>
-        { 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>
-        { value<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span> }<span class="token punctuation" >,</span>
-        { 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>
-        { 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>
-        { value<span class="token punctuation" >:</span> <span class="token string" >'item6'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목6'</span> }<span class="token punctuation" >,</span>
-        { value<span class="token punctuation" >:</span> <span class="token string" >'item7'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목7'</span> }<span class="token punctuation" >,</span>
-        { value<span class="token punctuation" >:</span> <span class="token string" >'item8'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목8'</span> }
+        { value<span class="token punctuation" >:</span> <span class="token string" >'항목1'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item1'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-primary">항목1&lt;/span> item1'</span> }<span class="token punctuation" >,</span>
+        { value<span class="token punctuation" >:</span> <span class="token string" >'항목2'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item2'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-danger">항목2&lt;/span> item2'</span> }<span class="token punctuation" >,</span>
+        { value<span class="token punctuation" >:</span> <span class="token string" >'항목3'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item3'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-warning">항목3&lt;/span> item3'</span> }
       <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
-      target<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+      target<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+        { value<span class="token punctuation" >:</span> <span class="token string" >'항목4'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item4'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-help">항목4&lt;/span> item4'</span> }<span class="token punctuation" >,</span>
+        { value<span class="token punctuation" >:</span> <span class="token string" >'항목5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'item5'</span><span class="token punctuation" >,</span> html<span class="token punctuation" >:</span> <span class="token string" >'&lt;span class="gn-tag is-success">항목5&lt;/span> item5'</span> }
+      <span class="token punctuation" >]</span>
     }<span class="token punctuation" >,</span>
+    hasSourceSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+    hasTargetSearch<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
     width<span class="token punctuation" >:</span> <span class="token string" >'80%'</span><span class="token punctuation" >,</span>
-    height<span class="token punctuation" >:</span> <span class="token number" >180</span>
+    height<span class="token punctuation" >:</span> <span class="token number" >180</span><span class="token punctuation" >,</span>
+    onChange<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>s<span class="token punctuation" >,</span> t<span class="token punctuation" >)</span> {
+      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>s<span class="token punctuation" >,</span> t<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    }<span class="token punctuation" >,</span>
+    orderable<span class="token punctuation" >:</span> <span class="token string" >'target'</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
   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> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.new-picklist-v'</span><span class="token punctuation" >,</span> 
@@ -6386,15 +6534,21 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     <tr>
       <td rowspan="2">data</td>
       <td>source</td>
-      <td>array[{value: string|array, text: string}]</td>
+      <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
       <td></td>
-      <td>source 항목 배열</td>
+      <td>source 항목 배열<br>
+        html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br>
+        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 
+      </td>
     </tr>
     <tr>
       <td>target</td>
-      <td>array[{value: string|array, text: string}]</td>
+      <td>array[{value: string|array, text: string, html?: string, icon?:string}]</td>
       <td></td>
-      <td>target 항목 배열</td>
+      <td>target 항목 배열<br>
+        html: 옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)<br>
+        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 
+      </td>
     </tr>
     <tr>
       <td rowspan="3">textSets</td>
@@ -6712,6 +6866,361 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 </table>
 
 
+  </div>
+  
+  <div class="aigis-module SortableList">
+    <h2 class="aigis-module__heading" id="SortableList">SortableList</h2>
+    <div class="aigis-module__filepath">/scss/components/sortablelist.scss</div>
+    <div class="aigis-tags">
+       
+      <span class="gn-tag">v.0.1.0</span>
+        
+      <a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
+       
+    </div>
+     <!-- <div id="ComponentTab">
+  <ul>
+    <li><a href="#styleguide">Style</a></li>
+    <li>
+      <a href="#scriptguide"
+        >Script <span class="gn-icon"><i class="fas fa-code"></i></span
+      ></a>
+    </li>
+  </ul>
+</div> -->
+  <h3 id="-">기본 사용</h3>
+<div class="aigis-preview">
+  <div class="gn-sortablelist">
+    <div class="sortablelist-controls gn-control is-small has-arrange is-vertical is-center">
+        <button type="button" class="gn-button is-outline">
+            <span class="gn-icon">
+                <i class="fas fa-angle-double-up"></i>
+            </span>
+        </button>
+        <button type="button" class="gn-button is-outline">
+            <span class="gn-icon">
+                <i class="fas fa-angle-up"></i>
+            </span>
+        </button>
+        <button type="button" class="gn-button is-outline">
+            <span class="gn-icon">
+                <i class="fas fa-angle-down"></i>
+            </span>
+        </button>
+        <button type="button" class="gn-button is-outline">
+            <span class="gn-icon">
+                <i class="fas fa-angle-double-down"></i>
+            </span>
+        </button>
+    </div>
+    <div class="gn-dropdown is-opened sortablelist-items">
+        <div class="dropdown-items">
+            <ul class="sortablelist-rows">
+                <li class="dropdown-item">항목 1</li>
+                <li class="dropdown-item">항목 2</li>
+                <li class="dropdown-item">항목 3</li>
+                <li class="dropdown-item">항목 4</li>
+            </ul>
+        </div>
+    </div>
+</div></div>
+
+<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-sortablelist<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sortablelist-controls gn-control is-small has-arrange is-vertical is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-dropdown is-opened sortablelist-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sortablelist-rows<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 3<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 4<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+</code></pre>
+<h3 id="-">버튼 우측 배치</h3>
+<div class="aigis-preview">
+  <div class="gn-sortablelist">
+    <div class="gn-dropdown is-opened sortablelist-items">
+        <div class="dropdown-items">
+            <ul class="sortablelist-rows">
+                <li class="dropdown-item">항목 1</li>
+                <li class="dropdown-item">항목 2</li>
+                <li class="dropdown-item">항목 3</li>
+            </ul>
+        </div>
+    </div>
+    <div class="sortablelist-controls gn-control is-small has-arrange is-vertical is-center is-right">
+        <button type="button" class="gn-button is-outline">
+            <span class="gn-icon">
+                <i class="fas fa-angle-double-up"></i>
+            </span>
+        </button>
+        <button type="button" class="gn-button is-outline">
+            <span class="gn-icon">
+                <i class="fas fa-angle-up"></i>
+            </span>
+        </button>
+        <button type="button" class="gn-button is-outline">
+            <span class="gn-icon">
+                <i class="fas fa-angle-down"></i>
+            </span>
+        </button>
+        <button type="button" class="gn-button is-outline">
+            <span class="gn-icon">
+                <i class="fas fa-angle-double-down"></i>
+            </span>
+        </button>
+    </div>
+</div></div>
+
+<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-sortablelist<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-dropdown is-opened sortablelist-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-items<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ul</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sortablelist-rows<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 1<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 2<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>li</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dropdown-item<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>항목 3<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>li</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ul</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sortablelist-controls gn-control is-small has-arrange is-vertical is-center is-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-up<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+        <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-double-down<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
+      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+</code></pre>
+<h3 id="-">생성 옵션</h3>
+<div class="aigis-preview">
+
+  <div class="new-sortablelist"></div>
+  <div class="new-sortablelist-drag"></div>
+  <div class="new-sortablelist-cols"></div>
+</div>
+
+<pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-sortablelist<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-sortablelist-drag<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-sortablelist-cols<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+</code></pre>
+<pre><code>  <span class="token operator" >/</span><span class="token operator" >/</span> 단일 컬럼
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'sortablelist'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-sortablelist'</span><span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+      { 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>
+      { 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>
+      { 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>
+      { 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>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'5'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 5'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'6'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 6'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'7'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 7'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'8'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 8'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'9'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 9'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'10'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 10'</span> }
+    <span class="token punctuation" >]</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  <span class="token operator" >/</span><span class="token operator" >/</span> 드래그 앤 드롭
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'sortablelist'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-sortablelist-drag'</span><span class="token punctuation" >,</span>
+      data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'a'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 A'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'b'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 B'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'c'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 C'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'d'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 D'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'e'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 E'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'f'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 F'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'g'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 G'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'h'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 H'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'i'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 I'</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'j'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> <span class="token string" >'항목 J'</span> }
+    <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+    draggable<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  <span class="token operator" >/</span><span class="token operator" >/</span> 다중 컬럼
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'sortablelist'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-sortablelist-cols'</span><span class="token punctuation" >,</span>
+    buttonPosition<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x1'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목1'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리A'</span><span class="token punctuation" >,</span> <span class="token string" >'1000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x2'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목2'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리B'</span><span class="token punctuation" >,</span> <span class="token string" >'2000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x3'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목3'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리C'</span><span class="token punctuation" >,</span> <span class="token string" >'3000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x4'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목4'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리D'</span><span class="token punctuation" >,</span> <span class="token string" >'4000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x5'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목5'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리E'</span><span class="token punctuation" >,</span> <span class="token string" >'5000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x6'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목6'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리F'</span><span class="token punctuation" >,</span> <span class="token string" >'6000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x7'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목7'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리G'</span><span class="token punctuation" >,</span> <span class="token string" >'7000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x8'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목8'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리H'</span><span class="token punctuation" >,</span> <span class="token string" >'8000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x9'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목9'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리I'</span><span class="token punctuation" >,</span> <span class="token string" >'9000'</span><span class="token punctuation" >]</span> }<span class="token punctuation" >,</span>
+      { value<span class="token punctuation" >:</span> <span class="token string" >'x10'</span><span class="token punctuation" >,</span> cols<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token string" >'항목10'</span><span class="token punctuation" >,</span> <span class="token string" >'카테고리J'</span><span class="token punctuation" >,</span> <span class="token string" >'10000'</span><span class="token punctuation" >]</span> }
+    <span class="token punctuation" >]</span>    
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+</code></pre><h3 id="-sortablelistitem-">데이터 모델 (SortableListItem)</h3>
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>필드</th>
+    <th>type</th>
+    <th>필수</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>value</td>
+      <td>string</td>
+      <td>Y</td>
+      <td>고유 값 (빈 문자열 불가)</td>
+    </tr>
+    <tr>
+      <td>text</td>
+      <td>string</td>
+      <td>N</td>
+      <td>단일 컬럼 표시 텍스트</td>
+    </tr>
+    <tr>
+      <td>cols</td>
+      <td>string[]</td>
+      <td>N</td>
+      <td>다중 컬럼 표시 값 배열</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="-">옵션</h3>
+<table class="gn-table is-full is-border">
+  <thead>
+    <th colspan="2">name</th>
+    <th>type</th>
+    <th>default</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2">target</td>
+      <td>string</td>
+      <td></td>
+      <td>sortablelist를 표시할 대상의 선택자(selector)</td>
+    </tr>
+    <tr>
+      <td colspan="2">data</td>
+      <td>SortableListItem[]</td>
+      <td></td>
+      <td>sortablelist에 표시할 데이터 배열</td>
+    </tr>
+    <tr>
+      <td colspan="2">buttonPosition</td>
+      <td>left | right</td>
+      <td>left</td>
+      <td>순서 변경 버튼 위치</td>
+    </tr>
+    <tr>
+      <td colspan="2">draggable</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>드래그 앤 드롭 순서 변경 활성화 여부</td>
+    </tr>
+    <tr>
+    <td>textSets</td>
+      <td>noData</td>
+      <td>string</td>
+      <td>No records available.</td>
+    <td>데이터가 없을 경우 출력 메시지</td>
+    </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>컴포넌트 비활성화 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">width</td>
+      <td>number, string</td>
+      <td>100%</td>
+      <td>컴포넌트 너비</td>
+    </tr>
+    <tr>
+      <td colspan="2">height</td>
+      <td>number, string</td>
+      <td>150</td>
+      <td>리스트 높이 (미지정 시 150)</td>
+    </tr>
+    <tr>
+      <td colspan="2">onChange</td>
+      <td>function(data)</td>
+      <td></td>
+      <td>데이터 변경 시 발생 이벤트</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="-">메소드</h3>
+<table class="gn-table is-full is-border">
+  <thead>
+    <th>name</th>
+    <th>return</th>
+    <th>description</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>getData()</td>
+      <td>SortableListItem[]</td>
+      <td>현재 데이터 배열을 반환한다.</td>
+    </tr>
+    <tr>
+      <td>setData(data: SortableListItem[]})</td>
+      <td>void</td>
+      <td>데이터 배열을 설정하고 다시 렌더링한다.</td>
+    </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>컴포넌트를 비활성화한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>컴포넌트를 활성화한다.</td>
+    </tr>
+  </tbody>
+</table>
+
+
   </div>
   
   <div class="aigis-module Tab">
@@ -8098,10 +8607,12 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 
   <button name="new-button"></button>
   <button name="new-button2"></button>
+  <button name="new-button-submenu">편집 메뉴</button>
 </div>
 
 <pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-button-submenu<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>편집 메뉴<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'menubutton'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'button[name=new-button]'</span><span class="token punctuation" >,</span> 
@@ -8139,6 +8650,51 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       value<span class="token punctuation" >:</span> <span class="token string" >'menu2'</span>
     }<span class="token punctuation" >]</span>
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  <span class="token operator" >/</span><span class="token operator" >/</span> 서브메뉴 예시
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'menubutton'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'button[name=new-button-submenu]'</span><span class="token punctuation" >,</span>
+    size<span class="token punctuation" >:</span> <span class="token string" >'normal'</span><span class="token punctuation" >,</span>
+    textSets<span class="token punctuation" >:</span> {
+      buttonText<span class="token punctuation" >:</span> <span class="token string" >'편집 메뉴'</span>
+    }<span class="token punctuation" >,</span>
+    onSelect<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>value<span class="token punctuation" >,</span> text<span class="token punctuation" >,</span> menu<span class="token punctuation" >,</span> e<span class="token punctuation" >)</span> {
+      console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'선택된 메뉴:'</span><span class="token punctuation" >,</span> { value<span class="token punctuation" >:</span> value<span class="token punctuation" >,</span> text<span class="token punctuation" >:</span> text<span class="token punctuation" >,</span> menu<span class="token punctuation" >:</span> menu }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    }<span class="token punctuation" >,</span>
+    data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+      {
+        text<span class="token punctuation" >:</span> <span class="token string" >'파일'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'file'</span><span class="token punctuation" >,</span>
+        child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'새 파일'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-new'</span> }<span class="token punctuation" >,</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'열기'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-open'</span> }<span class="token punctuation" >,</span>
+          {
+            text<span class="token punctuation" >:</span> <span class="token string" >'최근 파일'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'file-recent'</span><span class="token punctuation" >,</span>
+            child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+              { text<span class="token punctuation" >:</span> <span class="token string" >'document.txt'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-recent-1'</span> }<span class="token punctuation" >,</span>
+              { text<span class="token punctuation" >:</span> <span class="token string" >'image.png'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-recent-2'</span> }
+            <span class="token punctuation" >]</span>
+          }<span class="token punctuation" >,</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'저장'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-save'</span><span class="token punctuation" >,</span> disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span> }<span class="token punctuation" >,</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'다른 이름으로 저장'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'file-saveas'</span> }
+        <span class="token punctuation" >]</span>
+      }<span class="token punctuation" >,</span>
+      {
+        text<span class="token punctuation" >:</span> <span class="token string" >'편집'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'edit'</span><span class="token punctuation" >,</span>
+        actived<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'실행 취소'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'edit-undo'</span> }<span class="token punctuation" >,</span>
+          { text<span class="token punctuation" >:</span> <span class="token string" >'다시 실행'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'edit-redo'</span> }
+        <span class="token punctuation" >]</span>
+      }<span class="token punctuation" >,</span>
+      {
+        text<span class="token punctuation" >:</span> <span class="token string" >'도움말'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'help'</span><span class="token punctuation" >,</span>
+        disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+      }
+    <span class="token punctuation" >]</span>
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -8192,15 +8748,21 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
     </tr>
     <tr>
       <td colspan="2">data</td>
-      <td>Array[{value, text, <em>html</em>}]</td>
+      <td>Array[{value, text, html, child, disabled, actived}]</td>
       <td></td>
-      <td>메뉴 목록에 출력할 목록</td>
+      <td>메뉴 목록에 출력할 목록<br/>- value: 메뉴 값<br/>- text: 메뉴 텍스트<br/>- html: HTML로 렌더링할 내용<br/>- child: 하위 메뉴 배열 (최대 2단계)<br/>- disabled: 비활성화 여부 (boolean)<br/>- actived: 활성화 상태 표시 여부</td>
+    </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>버튼 비활성화 여부</td>
     </tr>
     <tr>
       <td colspan="2">onSelect</td>
-      <td>function(value, text)</td>
+      <td>function(value, text, menu, e)</td>
       <td></td>
-      <td>메뉴 선택 시 수행될 이벤트</td>
+      <td>메뉴 선택 시 수행될 이벤트<br/>- value: 선택된 메뉴의 값<br/>- text: 선택된 메뉴의 텍스트<br/>- menu: 선택된 메뉴 객체<br/>- e: MouseEvent 객체</td>
     </tr>
   </tbody>
 </table>
@@ -8218,6 +8780,21 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
       <td>void</td>
       <td>버튼명을 변경한다.</td>
     </tr>
+    <tr>
+      <td>reRender(data: Array)</td>
+      <td>void</td>
+      <td>메뉴 데이터를 전달받아 DOM을 다시 생성한다.</td>
+    </tr>
+    <tr>
+      <td>disabled()</td>
+      <td>void</td>
+      <td>버튼을 비활성화한다.</td>
+    </tr>
+    <tr>
+      <td>enabled()</td>
+      <td>void</td>
+      <td>버튼을 활성화한다.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -12643,7 +13220,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2025/10/28 23:12</footer>
+          <footer class="aigis-footer">Last update at 2026/01/22 05:57</footer>
         </div>
       </div>
     </div>