gnui 1.1.7 → 1.2.0

package/styleguide/assets/components.js

@@ -1,40 +1,42 @@
-
-var components = {
-  Alert: function(){
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const components = {
+  Alert: function () {
     Gn.create('button', {
       target: '.new-alert',
-      onClick: function(){
+      onClick: function () {
         Gn.create('alert', {
-          textSets : { alertText: 'alert이 생성됩니다.'},
+          textSets: { alertText: 'alert이 생성됩니다.' },
           hasClose: false,
           hasConfirm: true,
           hasCancel: true,
-          onConfirm: function(){
+          onConfirm: function () {
             console.log('확인 되었습니다.');
           },
-          onClose: function(){
+          onClose: function () {
             console.log('취소 되었습니다.');
           }
         });
       }
     });
   },
-  Button: function(){
+  Button: function () {
     Gn.create('button', {
       target: 'button[name=new-button]',
       size: 'medium',
       icon: 'home',
-      onClick: function(){
+      onClick: function () {
         console.log('버튼을 클릭했습니다.');
       }
     });
   },
-  Calendar: function(){
+  Calendar: function () {
     Gn.create('calendar', {
       target: '.new-calendar',
       value: '2021-04-01',
       onSelect: function (v) {
-        console.log('선택한 날짜: '+ v)
+        console.log('선택한 날짜: ' + v);
       },
       max: '2021-04-30',
       min: '2021-03-01'
@@ -42,37 +44,40 @@ var components = {
     Gn.create('calendar', {
       target: '.new-calendar1',
       onSelect: function (v) {
-        console.log('선택한 날짜: '+ v)
+        console.log('선택한 날짜: ' + v);
       },
       dateType: 'datetime',
       max: '1M',
       min: '-1M'
     });
   },
-  Chart: function(){
-    let clickEvt = {
-      dataPointSelection: function(event, chartContext, {seriesIndex, dataPointIndex, w}) {
-        console.log(w.config.series)
-        event && console.log('data', seriesIndex, dataPointIndex)
+  Chart: function () {
+    const clickEvt = {
+      dataPointSelection: function (event, chartContext, { seriesIndex, dataPointIndex, w }) {
+        console.log(w.config.series);
+        event && console.log('data', seriesIndex, dataPointIndex);
       },
-      markerClick: function(event, chartContext, {seriesIndex, dataPointIndex, w}) {
-        console.log(w.config.series[seriesIndex])
-        console.log('marker', seriesIndex, dataPointIndex)
+      markerClick: function (event, chartContext, { seriesIndex, dataPointIndex, w }) {
+        console.log(w.config.series[seriesIndex]);
+        console.log('marker', seriesIndex, dataPointIndex);
       }
-    }
+    };
     Gn.create('chart', {
       target: '.lineChart',
       type: 'line',
       chart: {
         events: clickEvt
       },
-      series: [{
-        name: 'data1',
-        data: [30, 200, 100, 400, 150, 250],
-      },{
-        name: 'data2',
-        data: [50, 20, 10, 40, 15, 25]
-      }],      
+      series: [
+        {
+          name: 'data1',
+          data: [30, 200, 100, 400, 150, 250]
+        },
+        {
+          name: 'data2',
+          data: [50, 20, 10, 40, 15, 25]
+        }
+      ],
       xaxis: {
         type: 'datetime',
         categories: ['2018-09-19T00:00:00.000Z', '2018-09-19T01:30:00.000Z', '2018-09-19T02:30:00.000Z', '2018-09-19T03:30:00.000Z', '2018-09-19T04:30:00.000Z', '2018-09-19T05:30:00.000Z']
@@ -85,10 +90,12 @@ var components = {
       chart: {
         events: clickEvt
       },
-      series: [{
-        name: 'data1',
-        data: [30, 200, 100, 400, 150, 250],
-      }],
+      series: [
+        {
+          name: 'data1',
+          data: [30, 200, 100, 400, 150, 250]
+        }
+      ],
       xaxis: {
         type: 'datetime',
         categories: ['2018-09-19T00:00:00.000Z', '2018-09-19T01:30:00.000Z', '2018-09-19T02:30:00.000Z', '2018-09-19T03:30:00.000Z', '2018-09-19T04:30:00.000Z', '2018-09-19T05:30:00.000Z']
@@ -102,13 +109,16 @@ var components = {
         stacked: true,
         events: clickEvt
       },
-      series: [{
-        name: 'data1',
-        data: [30, 200, 100, 400, 150, 250],
-      },{
-        name: 'data2',
-        data: [50, 20, 10, 40, 15, 25]
-      }],
+      series: [
+        {
+          name: 'data1',
+          data: [30, 200, 100, 400, 150, 250]
+        },
+        {
+          name: 'data2',
+          data: [50, 20, 10, 40, 15, 25]
+        }
+      ],
       width: '45%'
     });
     Gn.create('chart', {
@@ -117,11 +127,13 @@ var components = {
       chart: {
         events: clickEvt
       },
-      series: [{
-        data: [30, 200, 100, 400, 150, 250],
-      }],
+      series: [
+        {
+          data: [30, 200, 100, 400, 150, 250]
+        }
+      ],
       xaxis: {
-        categories: ['data1','data2','data3','data4','data5','data6']
+        categories: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6']
       },
       width: '45%'
     });
@@ -132,7 +144,7 @@ var components = {
         events: clickEvt
       },
       series: [30, 200, 100, 400],
-      labels: ['data1','data2','data3','data4']
+      labels: ['data1', 'data2', 'data3', 'data4']
     });
     Gn.create('chart', {
       target: '.donutChart',
@@ -141,7 +153,7 @@ var components = {
         events: clickEvt
       },
       series: [30, 200, 100, 400, 150, 250],
-      labels: ['data1','data2','data3','data4','data5','data6']
+      labels: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6']
     });
     Gn.create('chart', {
       target: '.gaugeChart',
@@ -161,21 +173,39 @@ var components = {
       series: [30],
       labels: ['data1']
     });
-    Gn.util.each(Gn.util.$$('.aigis-module > p'), function(_blank){
-      Gn.util.remove(_blank)
-    })
+    Gn.util.each(Gn.util.$$('.aigis-module > p'), function (_blank) {
+      Gn.util.remove(_blank);
+    });
   },
-  Colorpicker: function(){
+  Colorpicker: function () {
     Gn.create('colorpicker', {
       target: '.colorPicker',
-      size: 'large'
+      size: 'large',
+      editable: true,
+      onChange: color => {
+        console.log('color', color);
+      }
     });
     Gn.create('colorpicker', {
       target: '.colorPicker2',
-      value: '#27290e'
+      value: '#27005d',
+      size: 'medium'
+    });
+    Gn.create('colorpicker', {
+      target: '.colorPicker3',
+      readonly: false,
+      value: '#aed2ff',
+      onChange: color => {
+        console.log('color', color);
+      }
+    });
+    Gn.create('colorpicker', {
+      target: '.colorPicker4',
+      value: '#e4f1ff',
+      size: 'small'
     });
   },
-  Datepicker: function(){
+  Datepicker: function () {
     Gn.create('datepicker', {
       target: '.new-datepicker',
       value: '',
@@ -191,16 +221,28 @@ var components = {
       hasIcon: false
     });
   },
-  Dropdown: function(){
+  Dropdown: function () {
+    Gn.create('dropdown', {
+      target: '.new-dropdown0',
+      onChange: function (val, txt, values) {
+        console.log('선택된 값은 [ ' + val + ' ]입니다.');
+      },
+      width: '150px',
+      data: [
+        { value: '1', text: '옵션 1' },
+        { value: '2', text: '옵션 2' },
+        { value: '3', text: '옵션 3' },
+        { value: '4', text: '옵션 4' },
+        { value: '5', text: '옵션 5' }
+      ]
+    });
     Gn.create('dropdown', {
       target: '.new-dropdown1',
-      className: 'is-top',
-      onChange: function(val, txt, values){
-        console.log('선택된 값은 [ ' + val + ' ]입니다.')
+      onChange: function (val, txt, values) {
+        console.log('선택된 값은 [ ' + val + ' ]입니다.');
       },
       width: '150px',
       value: 'item2,item5',
-      type: 'opened',
       multiple: true,
       data: [
         { value: 'item1', text: '항목1' },
@@ -214,24 +256,27 @@ var components = {
     });
     Gn.create('dropdown', {
       target: '.new-dropdown2',
-      onChange: function(val, txt){
-        console.log('선택된 항목은 [ ' + txt + ' ]입니다.')
-      },
-      textSets: {
-        selectText: '골라라'
-      },
-      value: 'item2',
-      hasSearch: true,
-      color: 'danger'
+      data: [
+        [
+          { value: 'item1', text: 'Group1-항목1' },
+          { value: 'item2', text: 'Group1-항목2' },
+          { value: 'item3', text: 'Group1-항목3' }
+        ],
+        [
+          { value: 'item4', text: 'Group2-항목4' },
+          { value: 'item5', text: 'Group2-항목5' }
+        ]
+      ]
     });
     Gn.create('dropdown', {
       target: '.new-dropdown3',
       data: [
-        { value: 'item1', text: '항목1' },
-        { value: 'item2', text: '항목2' },
-        { value: 'item3', text: '항목3' },
+        { value: '', text: '<선택안함>' },
+        { value: 'item1', icon: 'home', text: '항목1' },
+        { value: 'item2', icon: 'star', text: '항목2' },
+        { value: 'item3', icon: 'heart', text: '항목3' },
         { value: 'item4', text: '항목4' },
-        { value: 'item5', text: '항목5', html: '<p><strong>text</strong>가 있는 항목은 선택 시 <u>text</u>로 대체됩니다.</p>' },
+        { value: 'item5', text: '&lt;항목5&gt;', html: '<p><strong>text</strong>가 있는 항목은 선택 시 <u>text</u>로 대체됩니다.</p>' },
         { value: 'item6', html: '<p><strong>text</strong>가 없는 항목은 <u>선택</u>할 수 없습니다.</p>' }
       ],
       width: 150,
@@ -239,92 +284,107 @@ var components = {
     });
     Gn.create('dropdown', {
       target: '.new-dropdown4',
-      data: [
-        [
-          { value: 'item1', text: 'Group1-항목1' },
-          { value: 'item2', text: 'Group1-항목2' },
-          { value: 'item3', text: 'Group1-항목3' }
-        ],[
-          { value: 'item4', text: 'Group2-항목4' },
-          { value: 'item5', text: 'Group2-항목5' }
-        ]
-      ]
+      onChange: function (val, txt) {
+        console.log('선택된 항목은 [ ' + txt + ' ]입니다.');
+      },
+      textSets: {
+        selectText: '골라라'
+      },
+      value: 'item2',
+      hasSearch: true,
+      color: 'danger'
     });
   },
-  Datagrid: function(){
+  Datagrid: function () {
     Gn.create('datagrid', {
       target: '.new-grid',
-      headers: [{
-        label: 'no',
-        key: 'number',
-        onSelect: function(){
-          console.log(arguments)
-        },
-        template: function(k, d) {
-          return '<span>'+d[k]+'</span>'
-        },
-        draggable: true,
-        sortable: true,
-        sort: 'asc'
-      }, {
-        label: '제목',
-        key: 'title',
-        style: {
-          width: '250px'
+      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'
         },
-        className: 'has-text-right',
-        draggable: true,
-        bodyClass: 'has-text-left',
-        sortable: true
-      }, {
-        label: '날짜',
-        key: 'date',
-        style: {
-          width: '150px'
+        {
+          label: '제목',
+          key: 'title',
+          style: {
+            width: '250px'
+          },
+          className: 'has-text-right',
+          draggable: true,
+          bodyClass: 'has-text-left',
+          sortable: true
         },
-        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-둘',
+        {
+          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-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',
+          child: [
+            {
+              number: '1-1',
+              title: '1-하나',
               date: '2020-09-19'
-            }]
-          }]
-        }]
-      }, {
-        number: '2',
-        title: '둘',
-        date: '2020-09-19',
-        desc: 'hello, world'
-      }],
-      onSort: function(column){
-        console.log('column',column);
+            },
+            {
+              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'
+        }
+      ],
+      onSort: function (column) {
+        console.log('column', column);
       },
-      onDragEnd: function(col, position){
-        console.log(col, position)
+      onDragEnd: function (col, position) {
+        console.log(col, position);
       },
-      onToggle: function(type, row, n){
+      onToggle: function (type, row, n) {
         /* console.log(type, row, n)
         // 이렇게 하면 펼쳐질때마다 해당 로우에 2개의 자식을 바인딩한다.
         type === 'expanded' && this.addChild(n, [{
@@ -337,107 +397,240 @@ var components = {
           date: '2020-02-02'
         }]) */
       },
-      onCheckAll: function(ggg){
-        console.log('ggg',ggg)
+      onCheckAll: function (ggg) {
+        console.log('ggg', ggg);
       },
-      onDoubleClick: function(e){
-        console.log('dbclick', e)
+      onDoubleClick: function (e) {
+        console.log('dbclick', e);
       },
-      hasCheck: true
+      hasCheck: true,
+      hasDelete: true
     });
     Gn.create('datagrid', {
       target: '.new-grid2',
-      headers: [{
-        label: 'row data numbers',
-        key: 'number',
-        style: { width: '50px'},
-        sortable: true,
-        draggable: true
-      }, {
-        label: '제목',
-        key: 'title',
-        sortable: true,
-        draggable: true
-      }, {
-        label: '날짜를 표시하는 컬럼입니다',
-        key: 'date',
-        style: {
-          width: '100px'
+      headers: [
+        {
+          label: 'row data numbers',
+          key: 'number',
+          style: { width: '50px' },
+          sortable: true,
+          draggable: true,
+          template: function (k, d) {
+            return '<span>' + d[k] + '</span>';
+          }
         },
-        tipField: 'desc'
-      }, {
-        label: '헤더명도길어집니다',
-        key: 'desc',
-        style: { width: '50px' }
-      }],
-      data:[
+        {
+          label: '제목',
+          key: 'title',
+          sortable: true,
+          draggable: true,
+          template: function (k, d) {
+            return '<span>' + d[k] + '</span>';
+          }
+        },
+        {
+          label: '날짜를 표시하는 컬럼입니다',
+          key: 'date',
+          style: {
+            width: '100px'
+          },
+          tipField: 'desc'
+        },
+        {
+          label: '헤더명도길어집니다',
+          key: 'desc',
+          style: { width: '50px' }
+        }
+      ],
+      data: [
         {
           number: '1',
           title: '하나',
           date: '2020-09-19'
-        }, {
+        },
+        {
           number: '232342333',
           title: 'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.',
           date: '2020-09-19',
           desc: 'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'
-        },{
+        },
+        {
           number: '1',
           title: '하나',
-          date: '2020-09-19'
-        }, {
+          date: '2020-09-19',
+          color: 'is-warning-light'
+        },
+        {
           number: '232342333',
           title: 'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.',
           date: '2020-09-19',
           desc: 'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'
-        },{
+        },
+        {
           number: '1',
           title: '하나',
           date: '2020-09-19'
-        }, {
+        },
+        {
           number: '232342333',
-          title: 'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.',
+          title:
+            'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.',
           date: '2020-09-19',
           desc: 'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'
-        },{
+        },
+        {
           number: '1',
           title: '하나',
           date: '2020-09-19'
-        }, {
+        },
+        {
           number: '232342333',
           title: 'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.',
           date: '2020-09-19',
           desc: 'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'
-        },{
+        },
+        {
           number: '1',
           title: '하나',
           date: '2020-09-19'
-        }, {
+        },
+        {
           number: '232342333',
           title: 'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.',
           date: '2020-09-19',
           desc: 'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.'
         }
       ],
-      sort: function(column){
-        console.log('column',column);
+      sort: function (column) {
+        console.log('column', column);
       },
-      onSelect: function(row, index){
-        console.log('row',row, index)
+      onSelect: function (row, index) {
+        console.log('row', row, index);
+        this.showDetail(index);
       },
-      onDoubleClick: function(e){
-        console.log('dbclick', e)
+      onDoubleClick: function (e) {
+        console.log('dbclick', e);
       },
       isEllipsis: true,
       hasCheck: true,
-      fixHeader: true
-    })
+      hasOrder: true,
+      textSets: {
+        orderLabel: '이동'
+      },
+      hasDelete: true,
+      fixHeader: true,
+      onChange: updatedData => {
+        console.log(updatedData);
+      }
+    });
+  },
+  Datalist: function () {
+    Gn.create('datalist', {
+      target: '.new-list',
+      headers: [
+        {
+          label: 'no',
+          key: 'number',
+          bodyClass: 'has-text-left',
+          style: {
+            width: '50px',
+            'text-align': 'center'
+          }
+        },
+        {
+          label: '제목',
+          key: 'title',
+          className: 'main-title'
+        },
+        {
+          label: '날짜',
+          key: 'date'
+        },
+        {
+          label: '설명',
+          key: 'desc'
+        },
+        {
+          label: '기타',
+          key: 'etc'
+        }
+      ],
+      data: [
+        {
+          number: '1',
+          title: '오늘',
+          date: '2023-07-28',
+          desc: 'hellojj'
+        },
+        {
+          number: '2',
+          title: '내일',
+          date: '2023-07-29',
+          desc: 'chaaaaaa'
+        }
+      ],
+      onChange: updatedData => {
+        console.log('updatedData', updatedData);
+      }
+    });
+    Gn.create('datalist', {
+      target: '.new-list2',
+      headers: [
+        {
+          label: 'row-number',
+          key: 'number'
+        },
+        {
+          label: '제목',
+          key: 'title'
+        },
+        {
+          label: '날짜',
+          key: 'date'
+        },
+        {
+          label: '상세설명',
+          key: 'desc'
+        },
+        {
+          label: '숨김',
+          key: 'ishidden',
+          isHidden: true
+        }
+      ],
+      data: [
+        { number: 1, title: '첫 번째', date: '2023-07-28', desc: '이것은 첫 번째 요소입니다.', ishidden: 'datalist에 표시되지 않습니다.' },
+        { number: 2, title: '두 번째', date: '2023-07-29', desc: '이것은 두 번째 요소입니다.', ishidden: 'datalist에 표시되지 않습니다.' },
+        { number: 3, title: '세 번째', date: '2023-07-30', desc: '', ishidden: 'datalist에 표시되지 않습니다.' },
+        { number: 4, title: '', date: '2023-07-31', desc: '이것은 네 번째 요소입니다.', ishidden: 'datalist에 표시되지 않습니다.' },
+        { number: 5, title: '다섯 번째', date: '2023-08-01', desc: '이것은 다섯 번째 요소입니다.' },
+        { number: 6, title: '여섯 번째', date: '2023-08-02 ~ 2023-11-02', desc: '이것은 여섯 번째 요소입니다.' },
+        { number: 7, title: '일곱 번째 일곱 번째 일곱 번째', date: '2023-08-03', desc: '이것은 일곱 번째 요소입니다.' },
+        {
+          number: 8,
+          title: '여덟 번째',
+          date: '2023-08-08',
+          desc: '이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.이것은 여덟 번째 요소입니다.'
+        }
+      ],
+      hasUpdate: true,
+      hasDelete: true,
+      onUpdate: function (row, index) {
+        console.log('row', row);
+        console.log('index', index);
+      },
+      onChange: updatedData => {
+        console.log('updatedData', updatedData);
+      },
+      isHiddenEmpty: true
+    });
   },
-  Growl: function() {
-    Gn.create('button',  {
+  Growl: function () {
+    Gn.create('button', {
       target: '.new-growl1',
-      onClick: function(){
+      onClick: function () {
         Gn.create('growl', {
-          textSets : {message: '메세지가 생성됩니다!'},
+          textSets: { message: '메세지가 생성됩니다!' },
           duration: 3000,
           positionX: 'right',
           positionY: 'top',
@@ -445,82 +638,89 @@ var components = {
         });
       }
     });
-    Gn.create('button',  {
+    Gn.create('button', {
       target: '.new-growl2',
-      onClick: function(){
+      onClick: function () {
         Gn.create('growl', {
-          textSets : {message: '메세지가 생성됩니다!'},
+          textSets: { message: '메세지가 생성됩니다!' },
           duration: 3000
         });
       }
     });
   },
-  JsonView: function(){
+  JsonView: function () {
     Gn.create('jsonview', {
       target: '.new-jsonview',
       schema: {
-        Type: "object",
-        Disp: "aws sample 정보", 
-        Description: "aws sample 정보 설명",
-        Properties: {
-          _id : {
-            Type: "string",
-            Disp: "인스턴스ID",
-            Description: "인스턴스ID입니다."
-          },
-          _type: {
-            Type: "string",
-            Disp: "수집기타입"
-          },
-          test1: {
-            Type: "number",
-            Disp: "Test1 Value"
-          },
-          test2: {
-            Type: "number",
-            Disp: "Test2 Value"
-          },
-          updated: {
-            Type: "datetime",
-            Disp: '마지막 업데이트'
-          },
-          nodes: {
-            Type: "object",
-            Disp: "노드정보",
-            Properties: {
-              obj1: {
-                Type: "string",
-                Disp: "obj1"
-              },
-              obj2: {
-                Type: "integer",
-                Disp: "obj2"
-              }                
+        Type: 'array',
+        Disp: 'aws sample 정보',
+        Description: 'aws sample 정보 설명',
+        Items: {
+          Type: 'object',
+          Properties: {
+            index: {
+              Type: 'checkbox',
+              Disp: ''
+            },
+            _id: {
+              Type: 'string',
+              Disp: '인스턴스ID',
+              Description: '인스턴스ID입니다.'
+            },
+            _type: {
+              Type: 'string',
+              Disp: '수집기타입'
+            },
+            test1: {
+              Type: 'number',
+              Disp: 'Test1 Value'
+            },
+            test2: {
+              Type: 'number',
+              Disp: 'Test2 Value'
+            },
+            updated: {
+              Type: 'datetime',
+              Disp: '마지막 업데이트',
+              $ref: '#/$defs/Datas'
+            },
+            nodes: {
+              Type: 'object',
+              Disp: '노드정보',
+              Properties: {
+                obj1: {
+                  Type: 'string',
+                  Disp: 'obj1'
+                },
+                obj2: {
+                  Type: 'integer',
+                  Disp: 'obj2'
+                }
+              }
             }
           },
-          datas: {
-            $ref: '#/$defs/Datas'
-          }
+          Required: ['_type'],
+          Hidden: ['test1', 'test2'],
+          SortItems: ['_id']
         },
         $defs: {
-          Datas:  {
-            Type: "array",
-            Disp: "추가 데이터 정보",
+          Datas: {
+            Type: 'array',
+            Disp: '추가 데이터 정보',
             Items: {
-              Type: "object",
+              Type: 'object',
               Properties: {
                 field1: {
-                  Type: "string",
-                  Disp: '필드 1',
-                  RefURL: 'https://search.naver.com/search.naver?query={{parent.field2}}'
+                  Type: 'string',
+                  Disp: '필드 1'
                 },
                 field2: {
-                  Type: "number"
+                  Type: 'number'
                 },
                 datas: {
-                  Type: ["array","string"],
+                  Type: ['array', 'string'],
                   Items: {
-                    Type: "object",
+                    Type: 'object',
                     Properties: {
                       id: {
                         Type: 'number',
@@ -536,54 +736,104 @@ var components = {
               }
             }
           }
-        },
-        Required: ['_id', '_type'],
-        Hidden: ['test1', 'test2']
+        }
       },
-      data: {
-        _id: 'd3185f78-7221-103a-8002-0272452c0706',
-        _type: 'aws',
-        test1: 1234,
-        test2: 1231.23,
-        updated: 1603427314109,
-        nodes : {
-          obj1: 'value',
-          obj2: 123
-        },
-        datas: [
-          {
-            field1: 'test1',
-            field2: 123,
-            datas: [
-              {
-                id:1,
-                text: 'data1'
-              },{
-                id:2,
-                text: 'data2'
-              }
-            ]
+      data: [
+        {
+          index: 0,
+          _id: 'd3185f78-7221-103a-8002-0272452c0706',
+          _type: 'aws',
+          test1: 1234,
+          test2: 1231.23,
+          updated: 1603427314109,
+          nodes: {
+            obj1: 'value',
+            obj2: 123
           },
-          {
-            field1: 'test2',
-            field2: 321,
-            datas: [
-              {
-                id: 1,
-                text: 'data3'
-              },{
-                id: 2,
-                text: 'data4'
-              }
-            ]
+          Datas: [
+            {
+              field1: 'test1',
+              field2: 123,
+              datas: [
+                {
+                  id: 1,
+                  text: 'data1'
+                },
+                {
+                  id: 2,
+                  text: 'data2'
+                }
+              ]
+            },
+            {
+              field1: 'test2',
+              field2: 321,
+              datas: [
+                {
+                  id: 1,
+                  text: 'data3'
+                },
+                {
+                  id: 2,
+                  text: 'data4'
+                }
+              ]
+            },
+            {
+              field1: 'test2',
+              field2: 321,
+              datas: 'just text'
+            }
+          ]
+        },
+        {
+          index: 1,
+          _id: 'd3185f78-7221-103a-8002-0125213c0706',
+          _type: 'aws',
+          test1: 1234,
+          test2: 1231.23,
+          updated: 1603427314109,
+          nodes: {
+            obj1: 'value',
+            obj2: 123
           },
-          {
-            field1: 'test2',
-            field2: 321,
-            datas: "just text"
-          }
-        ]
-      }
+          Datas: [
+            {
+              field1: 'test1',
+              field2: 123,
+              datas: [
+                {
+                  id: 1,
+                  text: 'data1'
+                },
+                {
+                  id: 2,
+                  text: 'data2'
+                }
+              ]
+            },
+            {
+              field1: 'test2',
+              field2: 321,
+              datas: [
+                {
+                  id: 1,
+                  text: 'data3'
+                },
+                {
+                  id: 2,
+                  text: 'data4'
+                }
+              ]
+            },
+            {
+              field1: 'test2',
+              field2: 321,
+              datas: 'just text'
+            }
+          ]
+        }
+      ]
     });
     Gn.create('jsonview', {
       target: '.new-rawview',
@@ -592,25 +842,27 @@ var components = {
     Gn.create('jsonview', {
       target: '.add-jsonview',
       schema: {
-        Type: "array",
+        Type: 'array',
         Items: {
           Type: 'object',
           Properties: {
             bignum: {
-              Type: "bignumber"
+              Type: 'bignumber'
             }
           }
         }
       },
-      data: [{
-        bignum: {
-          CPU: 23.34,
-          RAM: {
-            value: 26,
-            data: [0, 23, 33, 0]
+      data: [
+        {
+          bignum: {
+            CPU: 23.34,
+            RAM: {
+              value: 26,
+              data: [0, 23, 33, 0]
+            }
           }
         }
-      }]
+      ]
     });
     Gn.create('jsonview', {
       target: '.type-string',
@@ -642,6 +894,23 @@ var components = {
       },
       data: 1603427314109
     });
+    Gn.create('jsonview', {
+      target: '.type-checkbox',
+      schema: {
+        Type: 'checkbox'
+      },
+      data: {
+        value: '100',
+        checked: true
+      }
+    });
+    Gn.create('jsonview', {
+      target: '.type-checkbox2',
+      schema: {
+        Type: 'checkbox'
+      },
+      data: 100
+    });
     Gn.create('jsonview', {
       target: '.type-html',
       schema: {
@@ -654,11 +923,11 @@ var components = {
       schema: {
         Type: 'array',
         Items: {
-          Type: ['string','number'],
+          Type: ['string', 'number'],
           RefURL: 'https://search.naver.com/search.naver?query={{data}}'
         }
       },
-      data: ['빨강','주황','노랑','초록','파랑']
+      data: ['빨강', '주황', '노랑', '초록', '파랑']
     });
     Gn.create('jsonview', {
       target: '.type-percent',
@@ -676,7 +945,7 @@ var components = {
         온도: 24,
         습도: {
           value: 60,
-          data: [0,10,21,5,18]
+          data: [0, 10, 21, 5, 18]
         }
       }
     });
@@ -688,7 +957,7 @@ var components = {
       data: {
         type: 'donut',
         series: [30, 200, 100],
-        labels: ['data1','data2','data3']
+        labels: ['data1', 'data2', 'data3']
       }
     });
     Gn.create('jsonview', {
@@ -739,55 +1008,56 @@ var components = {
           }
         }
       },
-      data: [{
-        'data-string': '부뚜막',
-        'data-number': 1489
-      },{
-        'data-string': '솥뚜껑',
-        'data-number': 34
-      }]
+      data: [
+        {
+          'data-string': '부뚜막',
+          'data-number': 1489
+        },
+        {
+          'data-string': '솥뚜껑',
+          'data-number': 34
+        }
+      ]
     });
     Gn.create('jsonview', {
       target: '.path-key',
       schema: {
-        Type: "array",
+        Type: 'array',
         Items: {
-          Type: "object",
+          Type: 'object',
           Properties: {
             '$.COLLECTOR._id': {
-              Type: "string",
-              Disp: "인스턴스ID"
+              Type: 'string',
+              Disp: '인스턴스ID'
             },
             '$.COLLECTOR._type': {
-              Type: "string",
-              Disp: "타입"
+              Type: 'string',
+              Disp: '타입',
+              $ref: '#/$defs/Datas'
             },
             '$.COLLECTOR.nodes.obj2': {
-              Type: "number",
-              Disp: "No"
-            },
-            '$.COLLECTOR.datas.datas': {
-              $ref: '#/$defs/Datas'
+              Type: 'number',
+              Disp: 'No'
             }
           }
         },
         $defs: {
           Datas: {
-            Type: "array",
-            Disp: "Datas",
+            Type: 'array',
+            Disp: 'Datas',
             Items: {
-              Type: "object",
+              Type: 'object',
               Properties: {
                 field1: {
-                  Type: "string",
+                  Type: 'string',
                   Disp: '필드1'
                 },
                 field2: {
-                  Type: "number",
+                  Type: 'number',
                   Disp: '필드2'
                 },
                 field3: {
-                  Type: "string",
+                  Type: 'string',
                   Disp: '필드3'
                 }
               }
@@ -795,117 +1065,175 @@ var components = {
           }
         }
       },
-      data: [{
-        COLLECTOR: {
-          _id: 'data-1-id',
-          _type: 'collector',
-          test1: 0,
-          test2: 0,
-          nodes: {
-            obj1: '',
-            obj2: 0
-          },
-          datas: {
-            field1: 'data-1',
-            field2: 0,
-            datas: [{
-              field1: 'data-1',
-              field2: 0,
-              field3: 'data-1'
-            }, {
+      data: [
+        {
+          COLLECTOR: {
+            _id: 'data-1-id',
+            _type: 'collector',
+            test1: 0,
+            test2: 0,
+            nodes: {
+              obj1: '',
+              obj2: 0
+            },
+            datas: {
               field1: 'data-1',
               field2: 0,
-              field3: 'data-1'
-            }]
+              datas: [
+                {
+                  field1: 'data-1',
+                  field2: 0,
+                  field3: 'data-1'
+                },
+                {
+                  field1: 'data-1',
+                  field2: 0,
+                  field3: 'data-1'
+                }
+              ]
+            }
           }
-        }
-      }, {
-        COLLECTOR: {
-          _id: 'data-2-id',
-          _type: 'collector',
-          test1: 1,
-          test2: 1,
-          nodes: {
-            obj1: '',
-            obj2: 1
-          },
-          datas: {
-            field1: 'data-2',
-            field2: 1,
-            datas: [{
-              field1: 'data-2',
-              field2: 1,
-              field3: 'data-2'
-            },{
+        },
+        {
+          COLLECTOR: {
+            _id: 'data-2-id',
+            _type: 'collector',
+            test1: 1,
+            test2: 1,
+            nodes: {
+              obj1: '',
+              obj2: 1
+            },
+            datas: {
               field1: 'data-2',
               field2: 1,
-              field3: 'data-2'
-            }]
+              datas: [
+                {
+                  field1: 'data-2',
+                  field2: 1,
+                  field3: 'data-2'
+                },
+                {
+                  field1: 'data-2',
+                  field2: 1,
+                  field3: 'data-2'
+                }
+              ]
+            }
           }
         }
-      }]
+      ]
+    });
+    Gn.create('jsonview', {
+      target: '.converter-view',
+      schema: {
+        Type: 'array',
+        Items: {
+          Type: 'object',
+          Properties: {
+            name: {
+              Type: 'string',
+              Disp: '스위치명'
+            },
+            status: {
+              Type: 'number',
+              Disp: '동작상태',
+              Converter: ['CodeImageConverter', 'OperStatus']
+            }
+          }
+        }
+      },
+      data: [
+        {
+          name: '부뚜막',
+          status: 1
+        },
+        {
+          name: '솥뚜껑',
+          status: 0
+        }
+      ],
+      convert: (name, type, value) => {
+        if (value === '1') {
+          return '미동작';
+        } else {
+          return '동작';
+        }
+      }
     });
   },
-  Message: function(){
-    Gn.create('button',  {
+  Message: function () {
+    Gn.create('button', {
       target: '.new-message',
-      onClick: function(){
+      onClick: function () {
         Gn.create('message', {
           target: '.page-message',
-          textSets : {message: '메세지가 생성됩니다!'}
+          textSets: { message: '메세지가 생성됩니다!<br>잠시만 기다려주세요.' }
         });
       }
     });
   },
-  MenuButton: function(){
+  MenuButton: function () {
     Gn.create('menubutton', {
-      target: 'button[name=new-button]', 
+      target: 'button[name=new-button]',
       size: 'normal',
-      textSets:{
+      textSets: {
         buttonText: '메뉴버튼'
       },
-      onSelect: function(menu){
-        console.log('선택된 메뉴는 ' + menu );
+      onSelect: function (menu) {
+        console.log('선택된 메뉴는 ' + menu);
       },
-      data: [[{
-        text: 'menu1',
-        value: 'menu1'
-      },{
-        text: 'menu2',
-        value: 'menu2'
-      }],[{
-        text: '환경설정',
-        html: '<span class="gn-icon is-small"><i class="fas fa-cogs"></i>설정</span>',
-        value: 'menu1'
-      },{
-        text: 'Exit',
-        value: 'exit'
-      }]]
+      data: [
+        [
+          {
+            text: 'menu1',
+            value: 'menu1'
+          },
+          {
+            text: 'menu2',
+            value: 'menu2'
+          }
+        ],
+        [
+          {
+            text: '환경설정',
+            html: '<span class="gn-icon is-small"><i class="fas fa-cogs"></i>설정</span>',
+            value: 'menu1'
+          },
+          {
+            text: 'Exit',
+            value: 'exit'
+          }
+        ]
+      ]
     });
     Gn.create('menubutton', {
-      target: 'button[name=new-button2]', 
+      target: 'button[name=new-button2]',
       style: 'simple',
       icon: 'list',
-      data: [{
-        text: 'menu1',
-        value: 'menu1'
-      },{
-        text: 'menu2',
-        value: 'menu2'
-      }]
+      data: [
+        {
+          text: 'menu1',
+          value: 'menu1'
+        },
+        {
+          text: 'menu2',
+          value: 'menu2'
+        }
+      ]
     });
   },
-  Modal: function(){
+  Modal: function () {
     Gn.create('button', {
       target: '.new-modal',
-      onClick: function(){
+      onClick: function () {
         Gn.create('modal', {
-          textSets : { title: '새로운 모달' },
+          textSets: { title: '새로운 모달' },
           hasConfirm: true,
           hasCancel: true,
           height: 600,
-          onConfirm: function(){
-            console.log('확인하였습니다.')
+          onConfirm: function () {
+            console.log('확인하였습니다.');
           },
           contents: '<ul class="gn-list is-medium"><li>Ad nisi excepteur nostrud in.</li><li>Commodo duis anim excepteur qui.</li><li>Centered Text</li></ul>'
         });
@@ -913,10 +1241,11 @@ var components = {
     });
     Gn.create('button', {
       target: '.new-popup',
-      onClick: function(){
+      onClick: function () {
         Gn.create('modal', {
-          textSets : { title: '새로운 팝업' },
-          contents: '<table class="gn-table is-full"><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr class="is-primary-light"><td>5</td><td>6</td><td class="is-primary">7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td>15</td><td>16</td></tr></table>',
+          textSets: { title: '새로운 팝업' },
+          contents:
+            '<table class="gn-table is-full"><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr class="is-primary-light"><td>5</td><td>6</td><td class="is-primary">7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td>15</td><td>16</td></tr></table>',
           isModal: false,
           draggable: true,
           minimized: true,
@@ -925,13 +1254,13 @@ var components = {
       }
     });
   },
-  MultiText: function(){
+  MultiText: function () {
     Gn.create('multitext', {
       target: '.default-multitext'
-    })
+    });
     Gn.create('multitext', {
       target: '.new-multitext',
-      lang: ['en','ko','cn'],
+      lang: ['en', 'ko', 'cn'],
       value: {
         en: 'hello',
         ko: '안녕하세요',
@@ -939,12 +1268,12 @@ var components = {
       },
       rows: 1,
       maxlength: 300
-    })
+    });
   },
-  Picklist: function(){
+  Picklist: function () {
     Gn.create('picklist', {
       target: '.new-picklist',
-      data : {
+      data: {
         source: [
           { value: 'item1', text: '항목1' },
           { value: 'item2', text: '항목2' },
@@ -955,18 +1284,20 @@ var components = {
           { value: 'item7', text: '항목7' },
           { value: 'item8', text: '항목8' }
         ],
-        target: [],
+        target: []
       },
+      hasSourceSearch: true,
+      hasTargetSearch: true,
       width: '80%',
       height: 180,
-      onChange: function(s,t){
-        console.log(s, t)
+      onChange: function (s, t) {
+        console.log(s, t);
       },
       orderable: 'target'
     });
     Gn.create('picklist', {
       target: '.new-picklist-v',
-      data : {
+      data: {
         source: [
           { value: '항목1', text: 'item1' },
           { value: '항목2', text: 'item2' },
@@ -978,87 +1309,156 @@ var components = {
       },
       direction: 'vertical',
       width: '500px',
-      height: 150
+      height: 150,
+      textSets: {
+        sourceCaption: '할당가능',
+        targetCaption: '할당됨'
+      }
     });
   },
-  Progressbar: function(){
+  Progressbar: function () {
     Gn.create('progressbar', {
       target: '.new-progress-indeterminate',
       color: 'info',
       size: 'medium',
       indeterminate: true
     });
-    var progress = Gn.create('progressbar', {
+    const progress = Gn.create('progressbar', {
       target: '.new-progress',
       color: 'primary',
       size: 'medium',
       value: 30,
       hasFigure: true
     });
-    Gn.create('button', { target: '.btn0', size: 'small', onClick: function(){ progress.setValue(0); }});
-    Gn.create('button', { target: '.btn20', size: 'small', onClick: function(){ progress.setValue(20); }});
-    Gn.create('button', { target: '.btn50', size: 'small', onClick: function(){ progress.setValue(50); }});
-    Gn.create('button', { target: '.btn70', size: 'small', onClick: function(){ progress.setValue(70); }});
-    Gn.create('button', { target: '.btn100', size: 'small', onClick: function(){ progress.setValue(100); }});
+    Gn.create('button', {
+      target: '.btn0',
+      size: 'small',
+      onClick: function () {
+        progress.setValue(0);
+      }
+    });
+    Gn.create('button', {
+      target: '.btn20',
+      size: 'small',
+      onClick: function () {
+        progress.setValue(20);
+      }
+    });
+    Gn.create('button', {
+      target: '.btn50',
+      size: 'small',
+      onClick: function () {
+        progress.setValue(50);
+      }
+    });
+    Gn.create('button', {
+      target: '.btn70',
+      size: 'small',
+      onClick: function () {
+        progress.setValue(70);
+      }
+    });
+    Gn.create('button', {
+      target: '.btn100',
+      size: 'small',
+      onClick: function () {
+        progress.setValue(100);
+      }
+    });
   },
-  SelectButton: function(){
+  SelectButton: function () {
     Gn.create('selectbutton', {
-      target: '.new-selectButtons', 
+      target: '.new-selectButtons',
       size: 'normal',
       value: 'menu2',
-      onChange: function(option){
-        console.log('선택된 옵션은 ' + option );
+      onChange: function (option) {
+        console.log('선택된 옵션은 ' + option);
       },
-      data: [{
-        text: 'menu1',
-        value: 'menu1'
-      },{
-        text: 'menu2',
-        value: 'menu2'
-      },{
-        text: 'menu3',
-        value: 'menu3'
-      },{
-        text: 'menu4',
-        value: 'menu4'
-      }]
+      data: [
+        {
+          text: 'menu1',
+          value: 'menu1'
+        },
+        {
+          text: 'menu2',
+          value: 'menu2'
+        },
+        {
+          text: 'menu3',
+          value: 'menu3'
+        },
+        {
+          text: 'menu4',
+          value: 'menu4'
+        }
+      ]
+    });
+    Gn.create('selectbutton', {
+      target: '.new-selectButtons-v',
+      size: 'normal',
+      value: 'menu1,menu2',
+      multiple: true,
+      align: 'vertical',
+      onChange: function (option) {
+        console.log('선택된 옵션은 ' + option);
+      },
+      data: [
+        {
+          text: 'menu1',
+          value: 'menu1'
+        },
+        {
+          text: 'menu2',
+          value: 'menu2'
+        },
+        {
+          text: 'menu3',
+          value: 'menu3'
+        },
+        {
+          text: 'menu4',
+          value: 'menu4'
+        }
+      ]
     });
   },
-  Splitter: function(){
+  Splitter: function () {
     Gn.create('splitter', {
       target: '#horizontal-splitter',
-      panel: ['#frame1','#frame2'],
+      panel: ['#frame1', '#frame2'],
       position: '30%',
-      onDrag: function(e) {
+      onDrag: function (e) {
         console.log('dragging');
       },
-      onDragStart: function(e) {
+      onDragStart: function (e) {
         console.log('drag start');
       },
-      onDragEnd: function(e) {
+      onDragEnd: function (e) {
         console.log(e, 'drag End');
       },
       orientation: 'horizontal'
     });
     Gn.create('splitter', {
       target: '#vertical-splitter',
-      panel: ['#frame3','#frame4'],
+      panel: ['#frame3', '#frame4'],
       space: 20,
       minPosition: 40,
       position: '30%',
       orientation: 'vertical'
     });
   },
-  Switch: function(){
+  Switch: function () {
     Gn.create('switch', {
       target: '.new-switch',
       size: 'large',
       color: 'info',
       checked: true,
-      onToggle: function(e){ console.log('toggle 이벤트'); }
-    })
+      onToggle: function (e) {
+        console.log('toggle 이벤트');
+      }
+    });
   },
-  SyntaxInput: function(){
+  SyntaxInput: function () {
     Gn.create('syntaxinput', {
       target: '.syntaxInput'
     });
@@ -1080,54 +1480,65 @@ var components = {
       }
     });
   },
-  Tab: function(){
+  Tab: function () {
     Gn.create('tab', {
       target: '#newTab',
       align: 'center',
       contents: '#newContents',
-      onChange: function(idx, tab){
-        console.log(idx + '번 탭이 활성화 되었습니다.')
+      onChange: function (idx, tab) {
+        console.log(idx + '번 탭이 활성화 되었습니다.');
       }
     });
   },
-  Tagcloud: function(){
+  Tagcloud: function () {
     Gn.create('tagcloud', {
       target: '.new-tagcloud',
       width: '250px',
-      data: [{
-        text: 'Genians',
-        value: 50
-      },{
-        text: 'NAC',
-        value: 33
-      },{
-        text: 'Typescript',
-        value: 12
-      },{
-        text: 'Insights',
-        value: 26
-      },{
-        text: 'Network',
-        value: 3
-      },{
-        text: 'sass',
-        value: 1,
-      },{
-        text: 'EDR',
-        value: 19
-      },{
-        text: 'Front-end',
-        value: 6
-      },{
-        text: 'GNUI',
-        value: 42
-      },{
-        text: 'Framework',
-        value: 1
-      }]
-    })
+      data: [
+        {
+          text: 'Genians',
+          value: 50
+        },
+        {
+          text: 'NAC',
+          value: 33
+        },
+        {
+          text: 'Typescript',
+          value: 12
+        },
+        {
+          text: 'Insights',
+          value: 26
+        },
+        {
+          text: 'Network',
+          value: 3
+        },
+        {
+          text: 'sass',
+          value: 1
+        },
+        {
+          text: 'EDR',
+          value: 19
+        },
+        {
+          text: 'Front-end',
+          value: 6
+        },
+        {
+          text: 'GNUI',
+          value: 42
+        },
+        {
+          text: 'Framework',
+          value: 1
+        }
+      ]
+    });
   },
-  Tooltip: function(){
+  Tooltip: function () {
     Gn.create('tooltip', {
       target: '.has-tooltip1',
       contents: '.new-contents',
@@ -1161,120 +1572,161 @@ var components = {
     });
     Gn.create('tooltip', {
       target: '.has-tooltip7',
-      contents: 'right top 툴팁',
+      contents:
+        '</b>자주 사용되는 정규식 특수문자</b><br/><br/>. 임의의 한 문자 예) .* 모든문자열<br/>^ 문자열 시작 예) ^Genians Genians으로 시작하는 문자열<br/>$ 문자열 끝 예) Genians$ Genians로 끝나는 문자열<br/>[ 문자집합 시작 표시 예) [ab] a 또는 b문자가 포함되는 문자열<br/>] 문자집합 끝 표시<br/>( 문자열 집합 시작 예) a(b)|(c)d abd 또는 acd를 의미<br/> 문자열 집합 끝<br/>| 또는(OR)<br/> 특수한 기능을 하는 다음 문자표시 예) . Period 문자표시<br/>n* 0개 이상의 n문자<br/>n+ 1개 이상의 n문자<br/>&#123;n&#125; 앞문자가 n개 예) ab&#123;2&#125;c abbc를 의미<br/>&#123;n,&#125; 앞문자가 n개 이상<br/>&#123;,m&#125; 앞문자가 m개 이하<br/>&#123;n,m&#125; 앞문자가 n개 이상 m개 이하<br/>',
       direction: 'right-top'
     });
     Gn.create('tooltip', {
       target: '.has-tooltip8',
-      contents: 'right bottom 툴팁',
+      contents: '<br/>right bottom 툴팁<br/>',
       direction: 'right-bottom'
     });
   },
-  Time: function(){
+  Time: function () {
     Gn.create('time', {
       target: '.new-time',
-      onChange: function(time){
-        console.log(time)
+      onChange: function (time) {
+        console.log(time);
       },
       value: '22:33:44'
     });
     Gn.create('time', {
       target: '.new-time2',
       timeFormat: 'hh:mm',
-      onChange: function(time){
-        console.log(time)
+      onChange: function (time) {
+        console.log(time);
       },
       value: '6:2',
       hasControls: false
     });
   },
-  Tree: function(){
+  Tree: function () {
     Gn.create('tree', {
       target: '.new-tree1',
-      data: [{
-        text: 'Genians',
-        child: [{
-          text: 'GNUI'
-        },{
-          text: 'GNUI core'
-        },{
-          text: 'GNConfEngine'
-        }]
-      },{
-        text: 'R&D Center',
-        child: [{
-          text: 'GNUI'
-        },{
-          text: 'GNUI core'
-        },{
-          text: 'GNConfEngine'
-        }]
-      },{
-        text: 'Front-end'
-      }],
+      data: [
+        {
+          text: 'Genians',
+          child: [
+            {
+              text: 'GNUI'
+            },
+            {
+              text: 'GNUI core'
+            },
+            {
+              text: 'GNConfEngine'
+            }
+          ]
+        },
+        {
+          text: 'R&D Center',
+          child: [
+            {
+              text: 'GNUI'
+            },
+            {
+              text: 'GNUI core'
+            },
+            {
+              text: 'GNConfEngine'
+            }
+          ]
+        },
+        {
+          text: 'Front-end'
+        }
+      ],
       type: 'borderless'
     });
     Gn.create('tree', {
       target: '.new-tree2',
-      data: [{
-        text: 'Genians',
-        child: [{
-          text: 'GNUI'
-        },{
-          text: 'GNUI core'
-        },{
-          text: 'GNConfEngine'
-        }]
-      },{
-        text: 'R&D Center',
-        child: [{
-          text: 'GNUI'
-        },{
-          text: 'GNUI core'
-        },{
-          text: 'GNConfEngine'
-        }]
-      },{
-        text: 'Front-end'
-      }],
+      data: [
+        {
+          text: 'Genians',
+          child: [
+            {
+              text: 'GNUI'
+            },
+            {
+              text: 'GNUI core'
+            },
+            {
+              text: 'GNConfEngine'
+            }
+          ]
+        },
+        {
+          text: 'R&D Center',
+          child: [
+            {
+              text: 'GNUI'
+            },
+            {
+              text: 'GNUI core'
+            },
+            {
+              text: 'GNConfEngine'
+            }
+          ]
+        },
+        {
+          text: 'Front-end'
+        }
+      ],
       color: 'success',
       multiple: true
-    })
+    });
     Gn.create('tree', {
       target: '.new-tree3',
-      data: [{
-        text: 'Genians',
-        actived: true,
-        opened: true,
-        child: [{
-          text: 'GNUI'
-        },{
-          text: 'GNUI core',
+      data: [
+        {
+          text: 'Genians',
+          actived: true,
           opened: true,
-          child: [{
-            text: 'GNUI'
-          },{
-            text: 'GNUI core'
-          },{
-            text: 'GNConfEngine',
-            selected: true
-          }]
-        },{
-          text: 'GNConfEngine'
-        }]
-      },{
-        text: 'R&D Center',
-        child: [{
-          text: 'GNUI'
-        },{
-          text: 'GNUI core'
-        },{
-          text: 'GNConfEngine'
-        }]
-      },{
-        text: 'Front-end'
-      }],
+          child: [
+            {
+              text: 'GNUI'
+            },
+            {
+              text: 'GNUI core',
+              opened: true,
+              child: [
+                {
+                  text: 'GNUI'
+                },
+                {
+                  text: 'GNUI core'
+                },
+                {
+                  text: 'GNConfEngine',
+                  selected: true
+                }
+              ]
+            },
+            {
+              text: 'GNConfEngine'
+            }
+          ]
+        },
+        {
+          text: 'R&D Center',
+          child: [
+            {
+              text: 'GNUI'
+            },
+            {
+              text: 'GNUI core'
+            },
+            {
+              text: 'GNConfEngine'
+            }
+          ]
+        },
+        {
+          text: 'Front-end'
+        }
+      ],
       hasCheck: true
-    })
+    });
   }
-}
+};