gnui 1.2.17 → 1.2.18

package/styleguide/assets/styles/nac.css

@@ -18,7 +18,7 @@
     transform: translateX(100%);
   }
 }
-.gn-container:not(:last-child), .gn-tagcloud:not(:last-child), .gn-tab:not(:last-child), .gn-progressbar:not(:last-child), .gn-picklist:not(:last-child), .gn-panel-3:not(:last-child), .gn-panel-2:not(:last-child), .gn-pagination:not(:last-child), .gn-message:not(:last-child), .gn-jsonview .jsonview-header:not(:last-child), .gn-growl:not(:last-child), .gn-gcolor:not(:last-child), .gn-card:not(:last-child), .gn-breadcrumb:not(:last-child), .gn-bignumber:not(:last-child), .gn-alert:not(:last-child), .gn-slider:not(:last-child), .gn-multitext:not(:last-child), .gn-field:not(:last-child), .gn-title:not(:last-child),
+.gn-container:not(:last-child), .gn-tagcloud:not(:last-child), .gn-tab:not(:last-child), .gn-progressbar:not(:last-child), .gn-sortablelist:not(:last-child), .gn-picklist:not(:last-child), .gn-panel-3:not(:last-child), .gn-panel-2:not(:last-child), .gn-pagination:not(:last-child), .gn-message:not(:last-child), .gn-jsonview .jsonview-header:not(:last-child), .gn-growl:not(:last-child), .gn-gcolor:not(:last-child), .gn-card:not(:last-child), .gn-breadcrumb:not(:last-child), .gn-bignumber:not(:last-child), .gn-alert:not(:last-child), .gn-slider:not(:last-child), .gn-multitext:not(:last-child), .gn-field:not(:last-child), .gn-title:not(:last-child),
 .gn-sub-title:not(:last-child), .gn-table:not(:last-child), .gn-list:not(:last-child), .gn-box-no-line:not(:last-child), .gn-box:not(:last-child) {
   margin-bottom: 1rem;
 }
@@ -2708,7 +2708,7 @@ tag:
 }
 .gn-icon-ext::before {
   content: "\f15b";
-  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free";
+  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
   font-weight: 300;
   font-size: 1.6rem;
 }
@@ -4217,10 +4217,6 @@ tag:
   display: block;
   word-break: break-word;
 }
-.gn-title:not(:last-child),
-.gn-sub-title:not(:last-child) {
-  margin-bottom: 1rem;
-}
 
 .gn-title {
   color: #535353;
@@ -5490,6 +5486,7 @@ compile: true
 ```ejs
   <button name="new-button"></button>
   <button name="new-button2"></button>
+  <button name="new-button-submenu">편집 메뉴</button>
 ```
 
 ````
@@ -5529,6 +5526,51 @@ compile: true
       value: 'menu2'
     }]
   });
+  // 서브메뉴 예시
+  Gn.create('menubutton', {
+    target: 'button[name=new-button-submenu]',
+    size: 'normal',
+    textSets: {
+      buttonText: '편집 메뉴'
+    },
+    onSelect: function (value, text, menu, e) {
+      console.log('선택된 메뉴:', { value: value, text: text, menu: menu });
+    },
+    data: [
+      {
+        text: '파일',
+        value: 'file',
+        child: [
+          { text: '새 파일', value: 'file-new' },
+          { text: '열기', value: 'file-open' },
+          {
+            text: '최근 파일',
+            value: 'file-recent',
+            child: [
+              { text: 'document.txt', value: 'file-recent-1' },
+              { text: 'image.png', value: 'file-recent-2' }
+            ]
+          },
+          { text: '저장', value: 'file-save', disabled: true },
+          { text: '다른 이름으로 저장', value: 'file-saveas' }
+        ]
+      },
+      {
+        text: '편집',
+        value: 'edit',
+        actived: true,
+        child: [
+          { text: '실행 취소', value: 'edit-undo' },
+          { text: '다시 실행', value: 'edit-redo' }
+        ]
+      },
+      {
+        text: '도움말',
+        value: 'help',
+        disabled: true
+      }
+    ]
+  });
 ````
 
 
@@ -5585,15 +5627,21 @@ compile: true
     </tr>
     <tr>
       <td colspan="2">data</td>
-      <td>Array[{value, text, _html_}]</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>
@@ -5612,6 +5660,21 @@ compile: true
       <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>
 */
@@ -5699,6 +5762,47 @@ compile: true
   color: #fff;
   background-color: #88b50f;
 }
+.gn-menuButton .menuButton-menu.is-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.gn-menuButton .menuButton-menu.is-actived {
+  background-color: hsl(0, 0%, 100%);
+}
+.gn-menuButton .menuButton-menu.has-submenu .menuButton-menu-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.gn-menuButton .menuButton-menu.has-submenu .menuButton-menu-arrow {
+  margin-left: 10px;
+  display: inline-flex;
+  align-items: center;
+}
+.gn-menuButton .menuButton-menu .menuButton-submenu {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 0;
+  min-width: 150px;
+  background-color: hsl(0, 0%, 100%);
+  border: 1px solid #bebebe;
+  border-radius: 2px;
+  z-index: 21;
+  padding: 0.35rem;
+}
+.gn-menuButton .menuButton-menu .menuButton-submenu .menuButton-menu {
+  color: hsl(0, 0%, 29%);
+  cursor: pointer;
+}
+.gn-menuButton .menuButton-menu .menuButton-submenu .menuButton-menu:hover {
+  color: #fff;
+  background-color: #88b50f;
+}
+.gn-menuButton .menuButton-menu:hover > .menuButton-submenu {
+  display: block;
+}
 .gn-menuButton.is-white button {
   color: hsl(0, 0%, 100%);
   border-color: hsl(0, 0%, 100%);
@@ -9484,7 +9588,7 @@ tag:
 }
 .gn-select::after {
   content: "\f107";
-  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
+  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
   font-weight: 900;
   position: absolute;
   right: 0.5rem;
@@ -12646,9 +12750,13 @@ tag:
 ```ejs
 <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>
 ```
 ````
 Gn.create('datagrid', {
@@ -12761,19 +12869,122 @@ Gn.create('datagrid', {
 })
 Gn.create('datagrid', {
   target: '.new-grid2',
+  headers: [
+    {
+      label: 'no',
+      key: 'number',
+      onSelect: function () {
+        // eslint-disable-next-line prefer-rest-params
+        console.log(arguments);
+      },
+      template: function (k, d) {
+        return '<span>' + d[k] + '</span>';
+      },
+      draggable: true,
+      sortable: true,
+      sort: 'asc'
+    },
+    {
+      label: '제목',
+      key: 'title',
+      style: {
+        width: '250px'
+      },
+      className: 'has-text-right',
+      draggable: true,
+      bodyClass: 'has-text-left',
+      sortable: true
+    },
+    {
+      label: '날짜',
+      key: 'date',
+      style: {
+        width: '150px'
+      },
+      className: 'has-text-center',
+      bodyClass: 'has-text-left'
+    }
+  ],
+  data: [
+    {
+      number: '1',
+      title: '하나',
+      date: '2020-09-19',
+      desc: 'hello, world',
+      child: [
+        {
+          number: '1-1',
+          title: '1-하나',
+          date: '2020-09-19'
+        },
+        {
+          number: '1-2',
+          title: '1-둘',
+          date: '2020-09-19',
+          desc: 'hello, world',
+          child: [
+            {
+              number: '1-2-1',
+              title: '1-둘-1',
+              date: '2020-09-19',
+              desc: 'hello, world',
+              child: [
+                {
+                  number: '1-2-1-1',
+                  title: '1-둘-1-1',
+                  desc: 'hello, world',
+                  date: '2020-09-19'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      color: 'is-danger-light'
+    },
+    {
+      number: '2',
+      title: '둘',
+      date: '2020-09-19',
+      desc: 'hello, world'
+    }
+  ],
+  hasHeader: false,
+  hasCheck: true,
+  hasDelete: true,
+  textSets: {
+    deleteConfirmMessage: '파일을 삭제하시겠습니까?'
+  },
+  // onDelete 에서 false 를 반환하면 해당 행 삭제를 취소할 수 있다.
+  onDelete: (data, index) => {
+    console.log(data, index);
+    // 예) 특정 조건에 따라 삭제 취소
+    // if (index === 0) {
+    //   return false;
+    // }
+  }
+})
+Gn.create('datagrid', {
+  target: '.new-grid3',
   headers: [
     {
       label: 'row data numbers',
       key: 'number',
       style: { width: '50px' },
       sortable: true,
-      draggable: true
+      draggable: true,
+      template: function (k, d) {
+        return '<span>' + d[k] + '</span>';
+      }
     },
     {
       label: '제목',
       key: 'title',
       sortable: true,
-      draggable: true
+      draggable: true,
+      template: function (k, d) {
+        return '<span>' + d[k] + '</span>';
+      }
     },
     {
       label: '날짜를 표시하는 컬럼입니다',
@@ -12836,8 +13047,6 @@ Gn.create('datagrid', {
   paginator: {
     rows: 30
   },
-  hasDelete: true,
-  fixHeader: true,
   onChange: updatedData => {
     console.log(updatedData)
   }
@@ -12952,7 +13161,7 @@ Gn.create('datagrid', {
       <b>color:is-warning-light</b> => 행의 색 변경</td>
     </tr>
     <tr>
-      <td rowspan="3">textSets</td>
+      <td rowspan="4">textSets</td>
       <td>noData</td>
       <td>string</td>
       <td>No records available.</td>
@@ -12970,6 +13179,12 @@ Gn.create('datagrid', {
       <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>
@@ -12994,6 +13209,12 @@ Gn.create('datagrid', {
       <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>
@@ -13091,6 +13312,12 @@ Gn.create('datagrid', {
       <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>
 
@@ -13276,11 +13503,11 @@ Gn.create('datagrid', {
 }
 .gn-datagrid .gn-datagrid-body-row .is-toggler::before {
   content: "\f0d7";
-  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
+  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
   font-weight: 700;
 }
 .gn-datagrid .gn-datagrid-body-row.has-child[data-depth="0"] .is-toggler {
-  margin-left: -3px;
+  margin-left: -6px;
 }
 .gn-datagrid .gn-datagrid-body-row.is-collapsed .is-toggler::before {
   content: "\f0da";
@@ -13480,6 +13707,9 @@ Gn.create('datagrid', {
 .gn-datagrid.has-left-padding .gn-datagrid-body-row:not(.has-child)[data-depth="0"] .gn-datagrid-body-cell:first-child {
   padding-left: 15px;
 }
+.gn-datagrid.is-headless .gn-datagrid-body-row:first-child {
+  border-top: 1px solid #bebebe;
+}
 .gn-datagrid .gn-datagrid-header-cell {
   border-right: 1px solid #bebebe;
   padding: 0.55rem;
@@ -17194,11 +17424,21 @@ tag:
 <div class="gn-loader is-info"></div>
 ```
 
+```html
+<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>
+```
+
 ### 타입
 
 ```html
 <div class="gn-loader is-bounce"></div><br>
 <div class="gn-loader is-move"></div>
+<div class="gn-loader is-inline"></div><br>
 ```
 
 ### 생성 옵션
@@ -17258,7 +17498,7 @@ Gn.create('button', {
       <td colspan="2">type</td>
       <td>string</td>
       <td></td>
-      <td>'bounce','move','circle'</td>
+      <td>'inline','bounce','move','</td>
     </tr>
     <tr>
       <td colspan="2">positionX</td>
@@ -17367,6 +17607,7 @@ Gn.create('button', {
 .gn-loader.is-small {
   width: 15px;
   height: 15px;
+  border-width: 5px;
 }
 .gn-loader.is-normal {
   width: 25px;
@@ -17452,6 +17693,82 @@ Gn.create('button', {
   border: 13px solid #88b50f;
   animation: move 1.5s ease-in-out infinite alternate;
 }
+.gn-loader.is-inline {
+  border: 0;
+  position: relative;
+  margin-left: 10px;
+  margin-right: 10px;
+  animation-delay: -0.12s;
+  background: #e1e1e1;
+}
+.gn-loader.is-inline, .gn-loader.is-inline::before, .gn-loader.is-inline::after {
+  display: inline-block !important;
+  width: 3px;
+  height: 3px;
+  animation: colorPulse 1.4s ease-in-out infinite;
+  border-radius: 50%;
+}
+.gn-loader.is-inline::before, .gn-loader.is-inline::after {
+  content: "";
+  position: absolute;
+  top: 0;
+}
+.gn-loader.is-inline::before {
+  animation-delay: -0.24s;
+  margin-left: -8px;
+}
+.gn-loader.is-inline::after {
+  animation-delay: 0s;
+  margin-left: 8px;
+}
+.gn-loader.is-inline.is-white, .gn-loader.is-inline.is-white::before, .gn-loader.is-inline.is-white::after {
+  animation-name: colorPulse-white;
+}
+.gn-loader.is-inline.is-black, .gn-loader.is-inline.is-black::before, .gn-loader.is-inline.is-black::after {
+  animation-name: colorPulse-black;
+}
+.gn-loader.is-inline.is-light, .gn-loader.is-inline.is-light::before, .gn-loader.is-inline.is-light::after {
+  animation-name: colorPulse-light;
+}
+.gn-loader.is-inline.is-dark, .gn-loader.is-inline.is-dark::before, .gn-loader.is-inline.is-dark::after {
+  animation-name: colorPulse-dark;
+}
+.gn-loader.is-inline.is-primary, .gn-loader.is-inline.is-primary::before, .gn-loader.is-inline.is-primary::after {
+  animation-name: colorPulse-primary;
+}
+.gn-loader.is-inline.is-link, .gn-loader.is-inline.is-link::before, .gn-loader.is-inline.is-link::after {
+  animation-name: colorPulse-link;
+}
+.gn-loader.is-inline.is-info, .gn-loader.is-inline.is-info::before, .gn-loader.is-inline.is-info::after {
+  animation-name: colorPulse-info;
+}
+.gn-loader.is-inline.is-cancel, .gn-loader.is-inline.is-cancel::before, .gn-loader.is-inline.is-cancel::after {
+  animation-name: colorPulse-cancel;
+}
+.gn-loader.is-inline.is-success, .gn-loader.is-inline.is-success::before, .gn-loader.is-inline.is-success::after {
+  animation-name: colorPulse-success;
+}
+.gn-loader.is-inline.is-warning, .gn-loader.is-inline.is-warning::before, .gn-loader.is-inline.is-warning::after {
+  animation-name: colorPulse-warning;
+}
+.gn-loader.is-inline.is-danger, .gn-loader.is-inline.is-danger::before, .gn-loader.is-inline.is-danger::after {
+  animation-name: colorPulse-danger;
+}
+.gn-loader.is-inline.is-trans, .gn-loader.is-inline.is-trans::before, .gn-loader.is-inline.is-trans::after {
+  animation-name: colorPulse-trans;
+}
+.gn-loader.is-inline.is-help, .gn-loader.is-inline.is-help::before, .gn-loader.is-inline.is-help::after {
+  animation-name: colorPulse-help;
+}
+.gn-loader.is-inline.is-plain, .gn-loader.is-inline.is-plain::before, .gn-loader.is-inline.is-plain::after {
+  animation-name: colorPulse-plain;
+}
+.gn-loader.is-inline.is-secondary, .gn-loader.is-inline.is-secondary::before, .gn-loader.is-inline.is-secondary::after {
+  animation-name: colorPulse-secondary;
+}
+.gn-loader.is-inline.is-mono, .gn-loader.is-inline.is-mono::before, .gn-loader.is-inline.is-mono::after {
+  animation-name: colorPulse-mono;
+}
 
 @keyframes load-spin {
   0% {
@@ -17480,6 +17797,210 @@ Gn.create('button', {
     transform: translateX(15px);
   }
 }
+@keyframes colorPulse {
+  0%, 70%, 100% {
+    background: #e1e1e1;
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #88b50f;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-white {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 71%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 100%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-black {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 86%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 4%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-light {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 93%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 96%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-dark {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 86%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 20%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-primary {
+  0%, 70%, 100% {
+    background: rgb(248.7551020408, 253.4387755102, 236.1612244898);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #88b50f;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-link {
+  0%, 70%, 100% {
+    background: hsl(217, 71%, 96%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(217, 71%, 53%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-info {
+  0%, 70%, 100% {
+    background: hsl(204, 71%, 96%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(204, 71%, 53%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-cancel {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 96%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 71%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-success {
+  0%, 70%, 100% {
+    background: hsl(141, 53%, 96%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(141, 53%, 53%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-warning {
+  0%, 70%, 100% {
+    background: hsl(38, 100%, 96%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(38, 100%, 50%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-danger {
+  0%, 70%, 100% {
+    background: hsl(348, 86%, 96%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(348, 86%, 61%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-trans {
+  0%, 70%, 100% {
+    background: hsl(0, 0%, 100%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(0, 0%, 100%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-help {
+  0%, 70%, 100% {
+    background: hsl(203, 96%, 96%);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: hsl(203, 96%, 43%);
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-plain {
+  0%, 70%, 100% {
+    background: #ffffff;
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #ece8e8;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-secondary {
+  0%, 70%, 100% {
+    background: rgb(234.6, 246.9169811321, 255);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #0080d4;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
+@keyframes colorPulse-mono {
+  0%, 70%, 100% {
+    background: rgb(244.8, 244.8, 244.8);
+    /* 비활성 색상 */
+    transform: scale(1);
+  }
+  35% {
+    background: #656565;
+    /* 활성 색상 */
+    transform: scale(1.1);
+  }
+}
 /* 
 ---
 name: Message
@@ -19048,22 +19569,26 @@ tag:
 ```
 ````
   Gn.create('picklist', {
-    target: '.new-picklist', 
-    data : {
+    target: '.new-picklist',
+    data: {
       source: [
-        { value: 'item1', text: '항목1' },
-        { value: 'item2', text: '항목2' },
-        { value: 'item5', text: '항목3' },
-        { value: 'item4', text: '항목4' },
-        { value: 'item5', text: '항목5' },
-        { value: 'item6', text: '항목6' },
-        { value: 'item7', text: '항목7' },
-        { value: 'item8', text: '항목8' }
+        { value: '항목1', text: 'item1', html: '<span class="gn-tag is-primary">항목1</span> item1' },
+        { value: '항목2', text: 'item2', html: '<span class="gn-tag is-danger">항목2</span> item2' },
+        { value: '항목3', text: 'item3', html: '<span class="gn-tag is-warning">항목3</span> item3' }
       ],
-      target: [],
+      target: [
+        { value: '항목4', text: 'item4', html: '<span class="gn-tag is-help">항목4</span> item4' },
+        { value: '항목5', text: 'item5', html: '<span class="gn-tag is-success">항목5</span> item5' }
+      ]
     },
+    hasSourceSearch: true,
+    hasTargetSearch: true,
     width: '80%',
-    height: 180
+    height: 180,
+    onChange: function (s, t) {
+      console.log(s, t);
+    },
+    orderable: 'target'
   });
   Gn.create('picklist', {
     target: '.new-picklist-v', 
@@ -19100,15 +19625,21 @@ tag:
     <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>
@@ -19262,23 +19793,17 @@ tag:
 .gn-picklist .picklist-caption + .dropdown-items {
   border-radius: 0 0 2px 2px;
 }
-.gn-picklist .picklist-source {
+.gn-picklist .gn-dropdown {
+  display: block;
+}
+.gn-picklist .picklist-source,
+.gn-picklist .picklist-target {
   display: flex;
   flex-basis: calc(50% - 16px);
   width: calc(50% - 16px);
   flex-grow: 0;
   flex-shrink: 0;
 }
-.gn-picklist .picklist-source > .gn-dropdown {
-  order: 2;
-  width: 100%;
-}
-.gn-picklist .picklist-source .picklist-controls {
-  order: 1;
-}
-.gn-picklist .gn-dropdown {
-  display: block;
-}
 .gn-picklist .picklist-source.no-controls,
 .gn-picklist .picklist-target.no-controls {
   flex-basis: calc(50% - 45px);
@@ -19289,23 +19814,22 @@ tag:
   width: 100%;
   height: 100%;
 }
-.gn-picklist.is-vertical .picklist-source,
-.gn-picklist .picklist-target {
-  display: flex;
-  flex-basis: calc(50% - 16px);
-  width: calc(50% - 16px);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.gn-picklist.is-vertical .picklist-source > .gn-dropdown,
+.gn-picklist .picklist-source > .gn-dropdown,
 .gn-picklist .picklist-target > .gn-dropdown {
   order: 1;
   width: 100%;
 }
-.gn-picklist.is-vertical .picklist-source .picklist-controls,
+.gn-picklist .picklist-source .picklist-controls,
 .gn-picklist .picklist-target .picklist-controls {
   order: 2;
 }
+.gn-picklist .picklist-source > .gn-dropdown {
+  order: 2;
+  width: 100%;
+}
+.gn-picklist .picklist-source .picklist-controls {
+  order: 1;
+}
 .gn-picklist .picklist-controls {
   margin: 0.5rem;
 }
@@ -19315,6 +19839,16 @@ tag:
 .gn-picklist.is-vertical {
   flex-direction: column;
 }
+.gn-picklist.is-vertical .picklist-source,
+.gn-picklist.is-vertical .picklist-target {
+  width: calc(100% - 32px);
+}
+.gn-picklist.is-vertical .picklist-source > .gn-dropdown {
+  order: 1;
+}
+.gn-picklist.is-vertical .picklist-source .picklist-controls {
+  order: 2;
+}
 .gn-picklist.is-vertical > .picklist-controls {
   width: 90%;
   width: calc(100% - 50px);
@@ -19325,6 +19859,382 @@ tag:
   box-shadow: 0 0 0 0.1em rgba(241.077, 70.023, 104.2338, 0.7);
 }
 
+/* 
+---
+name: SortableList
+category:
+  - CONTROLS/SortableList(js)
+tag:
+  - v.0.1.0
+  - javascript
+---
+### 기본 사용
+
+```html
+<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>
+```
+
+### 버튼 우측 배치
+
+```html
+<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>
+```
+
+### 생성 옵션
+```ejs
+  <div class="new-sortablelist"></div>
+  <div class="new-sortablelist-drag"></div>
+  <div class="new-sortablelist-cols"></div>
+```
+````
+  // 단일 컬럼
+  Gn.create('sortablelist', {
+    target: '.new-sortablelist',
+    data: [
+      { value: '1', text: '항목 1' },
+      { value: '2', text: '항목 2' },
+      { value: '3', text: '항목 3' },
+      { value: '4', text: '항목 4' },
+      { value: '5', text: '항목 5' },
+      { value: '6', text: '항목 6' },
+      { value: '7', text: '항목 7' },
+      { value: '8', text: '항목 8' },
+      { value: '9', text: '항목 9' },
+      { value: '10', text: '항목 10' }
+    ]
+  });
+  // 드래그 앤 드롭
+  Gn.create('sortablelist', {
+    target: '.new-sortablelist-drag',
+      data: [
+      { value: 'a', text: '항목 A' },
+      { value: 'b', text: '항목 B' },
+      { value: 'c', text: '항목 C' },
+      { value: 'd', text: '항목 D' },
+      { value: 'e', text: '항목 E' },
+      { value: 'f', text: '항목 F' },
+      { value: 'g', text: '항목 G' },
+      { value: 'h', text: '항목 H' },
+      { value: 'i', text: '항목 I' },
+      { value: 'j', text: '항목 J' }
+    ],
+    draggable: true
+  });
+  // 다중 컬럼
+  Gn.create('sortablelist', {
+    target: '.new-sortablelist-cols',
+    buttonPosition: 'right',
+    data: [
+      { value: 'x1', cols: ['항목1', '카테고리A', '1000'] },
+      { value: 'x2', cols: ['항목2', '카테고리B', '2000'] },
+      { value: 'x3', cols: ['항목3', '카테고리C', '3000'] },
+      { value: 'x4', cols: ['항목4', '카테고리D', '4000'] },
+      { value: 'x5', cols: ['항목5', '카테고리E', '5000'] },
+      { value: 'x6', cols: ['항목6', '카테고리F', '6000'] },
+      { value: 'x7', cols: ['항목7', '카테고리G', '7000'] },
+      { value: 'x8', cols: ['항목8', '카테고리H', '8000'] },
+      { value: 'x9', cols: ['항목9', '카테고리I', '9000'] },
+      { value: 'x10', cols: ['항목10', '카테고리J', '10000'] }
+    ]    
+  });
+````
+
+### 데이터 모델 (SortableListItem)
+
+<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>
+
+### 옵션
+<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>
+
+### 메소드
+
+<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>
+
+*/
+.gn-sortablelist {
+  display: flex;
+  align-items: stretch;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.gn-sortablelist .gn-dropdown {
+  display: block;
+}
+.gn-sortablelist .sortablelist-items {
+  flex: 1 1 auto;
+}
+.gn-sortablelist .sortablelist-controls {
+  margin: 0.5rem;
+}
+.gn-sortablelist .sortablelist-controls .gn-button {
+  padding: 0.25rem 0.75rem;
+}
+.gn-sortablelist .sortablelist-controls.is-right {
+  order: 2;
+  margin-left: 0.5rem;
+  margin-right: 0;
+  justify-content: center;
+}
+.gn-sortablelist .sortablelist-rows {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.gn-sortablelist .sortablelist-cols {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+.gn-sortablelist .sortablelist-col {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.gn-sortablelist .dropdown-item.is-empty {
+  color: hsl(0, 0%, 48%);
+}
+.gn-sortablelist .dropdown-item.is-dragging {
+  opacity: 0.6;
+}
+.gn-sortablelist .dropdown-item.is-group-dragging {
+  outline: 1px dashed hsl(0, 0%, 71%);
+}
+.gn-sortablelist .dropdown-item.is-drag-over-top,
+.gn-sortablelist .dropdown-item.is-drag-over-bottom {
+  background-color: hsl(0, 0%, 96%);
+}
+.gn-sortablelist .dropdown-item.is-drag-over-top {
+  box-shadow: inset 0 2px 0 0 #88b50f;
+}
+.gn-sortablelist .dropdown-item.is-drag-over-bottom {
+  box-shadow: inset 0 -2px 0 0 #88b50f;
+}
+
+.sortablelist-drag-preview {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background-color: hsl(0, 0%, 20%);
+  color: hsl(0, 0%, 98%);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.sortablelist-drag-preview::before {
+  content: attr(data-count);
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background-color: hsl(0, 0%, 98%);
+  color: hsl(0, 0%, 20%);
+  font-size: 11px;
+  line-height: 18px;
+  text-align: center;
+}
+
+.sortablelist-drag-preview-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sortablelist-drag-preview .dropdown-item.is-ghost {
+  padding: 4px 8px;
+  background-color: hsl(0, 0%, 18%);
+  border-radius: 4px;
+  color: hsl(0, 0%, 98%);
+}
+
 /* 
 ---
 name: Progressbar
@@ -19904,6 +20814,7 @@ tag:
 .gn-tab > ul {
   display: flex;
   border-bottom: 1px solid #bebebe;
+  padding-bottom: 0px;
 }
 .gn-tab.is-center > ul {
   justify-content: center;
@@ -21053,7 +21964,7 @@ Gn.create('tree', {
 }
 .gn-tree li .tree-item .is-toggler::before {
   content: "\f0da";
-  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
+  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
   font-weight: 900;
 }
 .gn-tree li .tree-item + ul {