gnui 1.1.8 → 1.2.12

package/styleguide/assets/components.js

@@ -1,1280 +0,0 @@
-
-var components = {
-  Alert: function(){
-    Gn.create('button', {
-      target: '.new-alert',
-      onClick: function(){
-        Gn.create('alert', {
-          textSets : { alertText: 'alert이 생성됩니다.'},
-          hasClose: false,
-          hasConfirm: true,
-          hasCancel: true,
-          onConfirm: function(){
-            console.log('확인 되었습니다.');
-          },
-          onClose: function(){
-            console.log('취소 되었습니다.');
-          }
-        });
-      }
-    });
-  },
-  Button: function(){
-    Gn.create('button', {
-      target: 'button[name=new-button]',
-      size: 'medium',
-      icon: 'home',
-      onClick: function(){
-        console.log('버튼을 클릭했습니다.');
-      }
-    });
-  },
-  Calendar: function(){
-    Gn.create('calendar', {
-      target: '.new-calendar',
-      value: '2021-04-01',
-      onSelect: function (v) {
-        console.log('선택한 날짜: '+ v)
-      },
-      max: '2021-04-30',
-      min: '2021-03-01'
-    });
-    Gn.create('calendar', {
-      target: '.new-calendar1',
-      onSelect: function (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)
-      },
-      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]
-      }],      
-      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']
-      },
-      width: '45%'
-    });
-    Gn.create('chart', {
-      target: '.splineChart',
-      type: 'spline',
-      chart: {
-        events: clickEvt
-      },
-      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']
-      },
-      width: '45%'
-    });
-    Gn.create('chart', {
-      target: '.columnChart',
-      type: 'column',
-      chart: {
-        stacked: true,
-        events: clickEvt
-      },
-      series: [{
-        name: 'data1',
-        data: [30, 200, 100, 400, 150, 250],
-      },{
-        name: 'data2',
-        data: [50, 20, 10, 40, 15, 25]
-      }],
-      width: '45%'
-    });
-    Gn.create('chart', {
-      target: '.barChart',
-      type: 'bar',
-      chart: {
-        events: clickEvt
-      },
-      series: [{
-        data: [30, 200, 100, 400, 150, 250],
-      }],
-      xaxis: {
-        categories: ['data1','data2','data3','data4','data5','data6']
-      },
-      width: '45%'
-    });
-    Gn.create('chart', {
-      target: '.pieChart',
-      type: 'pie',
-      chart: {
-        events: clickEvt
-      },
-      series: [30, 200, 100, 400],
-      labels: ['data1','data2','data3','data4']
-    });
-    Gn.create('chart', {
-      target: '.donutChart',
-      type: 'donut',
-      chart: {
-        events: clickEvt
-      },
-      series: [30, 200, 100, 400, 150, 250],
-      labels: ['data1','data2','data3','data4','data5','data6']
-    });
-    Gn.create('chart', {
-      target: '.gaugeChart',
-      type: 'gauge',
-      chart: {
-        events: clickEvt
-      },
-      series: [30],
-      labels: ['data1']
-    });
-    Gn.create('chart', {
-      target: '.radialChart',
-      type: 'radial',
-      chart: {
-        events: clickEvt
-      },
-      series: [30],
-      labels: ['data1']
-    });
-    Gn.util.each(Gn.util.$$('.aigis-module > p'), function(_blank){
-      Gn.util.remove(_blank)
-    })
-  },
-  Colorpicker: function(){
-    Gn.create('colorpicker', {
-      target: '.colorPicker',
-      size: 'large'
-    });
-    Gn.create('colorpicker', {
-      target: '.colorPicker2',
-      value: '#27290e'
-    });
-  },
-  Datepicker: function(){
-    Gn.create('datepicker', {
-      target: '.new-datepicker',
-      value: '',
-      dateFormat: 'yyyy-MM-DD',
-      min: '-1M',
-      max: '1M',
-      type: 'date'
-    });
-    Gn.create('datepicker', {
-      target: '.new-datetimepicker',
-      type: 'datetime',
-      value: '2021-10-10 10:01:11',
-      hasIcon: false
-    });
-  },
-  Dropdown: function(){
-    Gn.create('dropdown', {
-      target: '.new-dropdown1',
-      className: 'is-top',
-      onChange: function(val, txt, values){
-        console.log('선택된 값은 [ ' + val + ' ]입니다.')
-      },
-      width: '150px',
-      value: 'item2,item5',
-      type: 'opened',
-      multiple: true,
-      data: [
-        { value: 'item1', text: '항목1' },
-        { value: 'item2', text: '항목2' },
-        { value: 'item3', text: '항목3' },
-        { value: 'item4', text: '항목4' },
-        { value: 'item5', text: '항목5' },
-        { value: 'item6', text: '항목6' },
-        { value: 'item7', text: '항목7' }
-      ]
-    });
-    Gn.create('dropdown', {
-      target: '.new-dropdown2',
-      onChange: function(val, txt){
-        console.log('선택된 항목은 [ ' + txt + ' ]입니다.')
-      },
-      textSets: {
-        selectText: '골라라'
-      },
-      value: 'item2',
-      hasSearch: true,
-      color: 'danger'
-    });
-    Gn.create('dropdown', {
-      target: '.new-dropdown3',
-      data: [
-        { value: 'item1', text: '항목1' },
-        { value: 'item2', text: '항목2' },
-        { value: 'item3', text: '항목3' },
-        { value: 'item4', text: '항목4' },
-        { value: 'item5', text: '항목5', html: '<p><strong>text</strong>가 있는 항목은 선택 시 <u>text</u>로 대체됩니다.</p>' },
-        { value: 'item6', html: '<p><strong>text</strong>가 없는 항목은 <u>선택</u>할 수 없습니다.</p>' }
-      ],
-      width: 150,
-      scrollHeight: 100
-    });
-    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' }
-        ]
-      ]
-    });
-  },
-  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'
-        },
-        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'
-            }]
-          }]
-        }]
-      }, {
-        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)
-      },
-      onToggle: function(type, row, n){
-        /* console.log(type, row, n)
-        // 이렇게 하면 펼쳐질때마다 해당 로우에 2개의 자식을 바인딩한다.
-        type === 'expanded' && this.addChild(n, [{
-          number: '000',
-          title: '추가된 자식1',
-          date: '2020-02-02'
-        },{
-          number: '001',
-          title: '추가된 자식2',
-          date: '2020-02-02'
-        }]) */
-      },
-      onCheckAll: function(ggg){
-        console.log('ggg',ggg)
-      },
-      onDoubleClick: function(e){
-        console.log('dbclick', e)
-      },
-      hasCheck: 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'
-        },
-        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'
-        }, {
-          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.',
-          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);
-      },
-      onSelect: function(row, index){
-        console.log('row',row, index)
-      },
-      onDoubleClick: function(e){
-        console.log('dbclick', e)
-      },
-      isEllipsis: true,
-      hasCheck: true,
-      fixHeader: true
-    })
-  },
-  Growl: function() {
-    Gn.create('button',  {
-      target: '.new-growl1',
-      onClick: function(){
-        Gn.create('growl', {
-          textSets : {message: '메세지가 생성됩니다!'},
-          duration: 3000,
-          positionX: 'right',
-          positionY: 'top',
-          color: 'danger'
-        });
-      }
-    });
-    Gn.create('button',  {
-      target: '.new-growl2',
-      onClick: function(){
-        Gn.create('growl', {
-          textSets : {message: '메세지가 생성됩니다!'},
-          duration: 3000
-        });
-      }
-    });
-  },
-  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"
-              }                
-            }
-          },
-          datas: {
-            $ref: '#/$defs/Datas'
-          }
-        },
-        $defs: {
-          Datas:  {
-            Type: "array",
-            Disp: "추가 데이터 정보",
-            Items: {
-              Type: "object",
-              Properties: {
-                field1: {
-                  Type: "string",
-                  Disp: '필드 1',
-                  RefURL: 'https://search.naver.com/search.naver?query={{parent.field2}}'
-                },
-                field2: {
-                  Type: "number"
-                },
-                datas: {
-                  Type: ["array","string"],
-                  Items: {
-                    Type: "object",
-                    Properties: {
-                      id: {
-                        Type: 'number',
-                        Disp: null
-                      },
-                      text: {
-                        Type: 'string',
-                        Disp: null
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        },
-        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'
-              }
-            ]
-          },
-          {
-            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',
-      data: '{"_id": "d3185f78-7221-103a-8002-0272452c0706","_type": "aws","test1": 1234,"test2": 1231.23,"nodes" : {"obj1":"value","obj2":123},"datas": [{"field1":"test1","field2":123,"datas":["data1","data2"]},{"field1":"test2","field2":321,"datas":["data3","data4"]}]}'
-    });
-    Gn.create('jsonview', {
-      target: '.add-jsonview',
-      schema: {
-        Type: "array",
-        Items: {
-          Type: 'object',
-          Properties: {
-            bignum: {
-              Type: "bignumber"
-            }
-          }
-        }
-      },
-      data: [{
-        bignum: {
-          CPU: 23.34,
-          RAM: {
-            value: 26,
-            data: [0, 23, 33, 0]
-          }
-        }
-      }]
-    });
-    Gn.create('jsonview', {
-      target: '.type-string',
-      schema: {
-        Type: 'string',
-        RefURL: 'http://www.genians.com',
-        Target: '_blank'
-      },
-      data: '다람쥐 헌 쳇바퀴'
-    });
-    Gn.create('jsonview', {
-      target: '.type-number',
-      schema: {
-        Type: 'number'
-      },
-      data: 10001
-    });
-    Gn.create('jsonview', {
-      target: '.type-byte',
-      schema: {
-        Type: 'byte'
-      },
-      data: 100000000
-    });
-    Gn.create('jsonview', {
-      target: '.type-datetime',
-      schema: {
-        Type: 'datetime'
-      },
-      data: 1603427314109
-    });
-    Gn.create('jsonview', {
-      target: '.type-html',
-      schema: {
-        Type: 'html'
-      },
-      data: '<img src="/styleguide/assets/image.png" alt="asset">'
-    });
-    Gn.create('jsonview', {
-      target: '.type-array1',
-      schema: {
-        Type: 'array',
-        Items: {
-          Type: ['string','number'],
-          RefURL: 'https://search.naver.com/search.naver?query={{data}}'
-        }
-      },
-      data: ['빨강','주황','노랑','초록','파랑']
-    });
-    Gn.create('jsonview', {
-      target: '.type-percent',
-      schema: {
-        Type: 'percent'
-      },
-      data: 52
-    });
-    Gn.create('jsonview', {
-      target: '.type-bignumber',
-      schema: {
-        Type: 'bignumber'
-      },
-      data: {
-        온도: 24,
-        습도: {
-          value: 60,
-          data: [0,10,21,5,18]
-        }
-      }
-    });
-    Gn.create('jsonview', {
-      target: '.type-chart',
-      schema: {
-        Type: 'chart'
-      },
-      data: {
-        type: 'donut',
-        series: [30, 200, 100],
-        labels: ['data1','data2','data3']
-      }
-    });
-    Gn.create('jsonview', {
-      target: '.type-object',
-      schema: {
-        Type: 'object',
-        Disp: '',
-        Description: '',
-        Properties: {
-          'data-string': {
-            Type: 'string',
-            Disp: '물품명',
-            Description: 'product name'
-          },
-          'data-number': {
-            Type: 'number',
-            Disp: '재고'
-          },
-          'data-reorder': {
-            Type: 'string',
-            Disp: '재주문가능'
-          }
-        },
-        Hidden: ['data-reorder']
-      },
-      data: {
-        'data-string': '부뚜막',
-        'data-number': 1489,
-        'data-reorder': 'false'
-      }
-    });
-    Gn.create('jsonview', {
-      target: '.type-array2',
-      schema: {
-        Type: 'array',
-        Items: {
-          Type: 'object',
-          Properties: {
-            '$["data-string"]': {
-              Type: 'string',
-              Disp: '물품명',
-              Description: 'product name'
-            },
-            '$["data-number"]': {
-              Type: 'number',
-              Disp: '재고'
-            }
-          }
-        }
-      },
-      data: [{
-        'data-string': '부뚜막',
-        'data-number': 1489
-      },{
-        'data-string': '솥뚜껑',
-        'data-number': 34
-      }]
-    });
-    Gn.create('jsonview', {
-      target: '.path-key',
-      schema: {
-        Type: "array",
-        Items: {
-          Type: "object",
-          Properties: {
-            '$.COLLECTOR._id': {
-              Type: "string",
-              Disp: "인스턴스ID"
-            },
-            '$.COLLECTOR._type': {
-              Type: "string",
-              Disp: "타입"
-            },
-            '$.COLLECTOR.nodes.obj2': {
-              Type: "number",
-              Disp: "No"
-            },
-            '$.COLLECTOR.datas.datas': {
-              $ref: '#/$defs/Datas'
-            }
-          }
-        },
-        $defs: {
-          Datas: {
-            Type: "array",
-            Disp: "Datas",
-            Items: {
-              Type: "object",
-              Properties: {
-                field1: {
-                  Type: "string",
-                  Disp: '필드1'
-                },
-                field2: {
-                  Type: "number",
-                  Disp: '필드2'
-                },
-                field3: {
-                  Type: "string",
-                  Disp: '필드3'
-                }
-              }
-            }
-          }
-        }
-      },
-      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'
-            }, {
-              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'
-            },{
-              field1: 'data-2',
-              field2: 1,
-              field3: 'data-2'
-            }]
-          }
-        }
-      }]
-    });
-  },
-  Message: function(){
-    Gn.create('button',  {
-      target: '.new-message',
-      onClick: function(){
-        Gn.create('message', {
-          target: '.page-message',
-          textSets : {message: '메세지가 생성됩니다!'}
-        });
-      }
-    });
-  },
-  MenuButton: function(){
-    Gn.create('menubutton', {
-      target: 'button[name=new-button]', 
-      size: 'normal',
-      textSets:{
-        buttonText: '메뉴버튼'
-      },
-      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'
-      }]]
-    });
-    Gn.create('menubutton', {
-      target: 'button[name=new-button2]', 
-      style: 'simple',
-      icon: 'list',
-      data: [{
-        text: 'menu1',
-        value: 'menu1'
-      },{
-        text: 'menu2',
-        value: 'menu2'
-      }]
-    });
-  },
-  Modal: function(){
-    Gn.create('button', {
-      target: '.new-modal',
-      onClick: function(){
-        Gn.create('modal', {
-          textSets : { title: '새로운 모달' },
-          hasConfirm: true,
-          hasCancel: true,
-          height: 600,
-          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>'
-        });
-      }
-    });
-    Gn.create('button', {
-      target: '.new-popup',
-      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>',
-          isModal: false,
-          draggable: true,
-          minimized: true,
-          resizable: true
-        });
-      }
-    });
-  },
-  MultiText: function(){
-    Gn.create('multitext', {
-      target: '.default-multitext'
-    })
-    Gn.create('multitext', {
-      target: '.new-multitext',
-      lang: ['en','ko','cn'],
-      value: {
-        en: 'hello',
-        ko: '안녕하세요',
-        cn: 'HELLO'
-      },
-      rows: 1,
-      maxlength: 300
-    })
-  },
-  Picklist: function(){
-    Gn.create('picklist', {
-      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' }
-        ],
-        target: [],
-      },
-      width: '80%',
-      height: 180,
-      onChange: function(s,t){
-        console.log(s, t)
-      },
-      orderable: 'target'
-    });
-    Gn.create('picklist', {
-      target: '.new-picklist-v',
-      data : {
-        source: [
-          { value: '항목1', text: 'item1' },
-          { value: '항목2', text: 'item2' },
-          { value: '항목3', text: 'item3' },
-          { value: '항목4', text: 'item4' },
-          { value: '항목5', text: 'item5' }
-        ],
-        target: []
-      },
-      direction: 'vertical',
-      width: '500px',
-      height: 150
-    });
-  },
-  Progressbar: function(){
-    Gn.create('progressbar', {
-      target: '.new-progress-indeterminate',
-      color: 'info',
-      size: 'medium',
-      indeterminate: true
-    });
-    var 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); }});
-  },
-  SelectButton: function(){
-    Gn.create('selectbutton', {
-      target: '.new-selectButtons', 
-      size: 'normal',
-      value: 'menu2',
-      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(){
-    Gn.create('splitter', {
-      target: '#horizontal-splitter',
-      panel: ['#frame1','#frame2'],
-      position: '30%',
-      onDrag: function(e) {
-        console.log('dragging');
-      },
-      onDragStart: function(e) {
-        console.log('drag start');
-      },
-      onDragEnd: function(e) {
-        console.log(e, 'drag End');
-      },
-      orientation: 'horizontal'
-    });
-    Gn.create('splitter', {
-      target: '#vertical-splitter',
-      panel: ['#frame3','#frame4'],
-      space: 20,
-      minPosition: 40,
-      position: '30%',
-      orientation: 'vertical'
-    });
-  },
-  Switch: function(){
-    Gn.create('switch', {
-      target: '.new-switch',
-      size: 'large',
-      color: 'info',
-      checked: true,
-      onToggle: function(e){ console.log('toggle 이벤트'); }
-    })
-  },
-  SyntaxInput: function(){
-    Gn.create('syntaxinput', {
-      target: '.syntaxInput'
-    });
-    Gn.create('syntaxinput', {
-      target: '.syntaxInput2',
-      multiple: true,
-      usetab: true
-    });
-    Gn.create('syntaxinput', {
-      target: '.syntaxInput3',
-      type: 'custom',
-      patterns: {
-        constant: {
-          pattern: /\w+:?(?=\/)/gm
-        },
-        keyword: {
-          pattern: /[^/]*$/gm
-        }
-      }
-    });
-  },
-  Tab: function(){
-    Gn.create('tab', {
-      target: '#newTab',
-      align: 'center',
-      contents: '#newContents',
-      onChange: function(idx, tab){
-        console.log(idx + '번 탭이 활성화 되었습니다.')
-      }
-    });
-  },
-  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
-      }]
-    })
-  },
-  Tooltip: function(){
-    Gn.create('tooltip', {
-      target: '.has-tooltip1',
-      contents: '.new-contents',
-      direction: 'left',
-      type: 'click'
-    });
-    Gn.create('tooltip', {
-      target: '.has-tooltip2',
-      contents: '기본값 bottom 툴팁'
-    });
-    Gn.create('tooltip', {
-      target: '.has-tooltip3',
-      contents: 'top 툴팁',
-      direction: 'top'
-    });
-    Gn.create('tooltip', {
-      target: '.has-tooltip4',
-      contents: 'right 툴팁',
-      direction: 'right'
-    });
-    Gn.create('tooltip', {
-      target: '.has-tooltip5',
-      contents: 'left top 툴팁',
-      direction: 'left-top',
-      width: '200px'
-    });
-    Gn.create('tooltip', {
-      target: '.has-tooltip6',
-      contents: 'left bottom 툴팁',
-      direction: 'left-bottom'
-    });
-    Gn.create('tooltip', {
-      target: '.has-tooltip7',
-      contents: 'right top 툴팁',
-      direction: 'right-top'
-    });
-    Gn.create('tooltip', {
-      target: '.has-tooltip8',
-      contents: 'right bottom 툴팁',
-      direction: 'right-bottom'
-    });
-  },
-  Time: function(){
-    Gn.create('time', {
-      target: '.new-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)
-      },
-      value: '6:2',
-      hasControls: false
-    });
-  },
-  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'
-      }],
-      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'
-      }],
-      color: 'success',
-      multiple: true
-    })
-    Gn.create('tree', {
-      target: '.new-tree3',
-      data: [{
-        text: 'Genians',
-        actived: true,
-        opened: true,
-        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
-    })
-  }
-}