gnui 1.2.20 → 1.2.22

package/styleguide/assets/components.js

@@ -76,6 +76,10 @@ const components = {
         {
           name: 'data2',
           data: [50, 20, 10, 40, 15, 25]
+        },
+        {
+          name: 'data3',
+          data: [20, 100, 400, 150, 250, 30]
         }
       ],
       xaxis: {
@@ -94,7 +98,16 @@ const components = {
         {
           name: 'data1',
           data: [30, 200, 100, 400, 150, 250]
+        },
+        {
+          name: 'data2',
+          data: [50, 20, 10, 40, 15, 25]
+        },
+        {
+          name: 'data3',
+          data: [20, 100, 400, 150, 250, 30]
         }
+
       ],
       xaxis: {
         type: 'datetime',
@@ -117,6 +130,10 @@ const components = {
         {
           name: 'data2',
           data: [50, 20, 10, 40, 15, 25]
+        },
+        {
+          name: 'data3',
+          data: [20, 100, 400, 150, 250, 30]
         }
       ],
       width: '45%'
@@ -325,6 +342,68 @@ const components = {
         { value: '5', cols: ['항목5', '카테고리B', '5000'] }
       ]
     });
+    Gn.create('dropdown', {
+      target: '.new-dropdown6',
+      width: '200px',
+      data: [
+        { value: 'win', text: 'Windows' },
+        { value: 'mac', text: 'macOS' },
+        { value: 'linux', text: 'Linux' },
+        { value: 'android', text: 'Android' },
+        { value: 'ios', text: 'iOS' }
+      ],
+      optionTooltip: {
+        direction: 'right',
+        content: function (option) {
+          var descriptions = {
+            win: '마이크로소프트의 데스크톱 운영체제',
+            mac: '애플의 데스크톱 운영체제',
+            linux: '오픈소스 기반 운영체제',
+            android: '구글의 모바일 운영체제',
+            ios: '애플의 모바일 운영체제'
+          };
+          var desc = descriptions[option.value] || '';
+          return '<div style="min-width:160px"><strong>' + option.text + '</strong><p style="margin:4px 0 0">' + desc + '</p></div>';
+        }
+      }
+    });
+    Gn.create('dropdown', {
+      target: '.new-dropdown7',
+      width: '200px',
+      data: [
+        { value: 'host1', text: '192.168.0.1' },
+        { value: 'host2', text: '192.168.0.2' },
+        { value: 'host3', text: '10.0.0.1' },
+        { value: 'host4', text: '10.0.0.2' }
+      ],
+      optionTooltip: {
+        direction: 'right',
+        fetch: function (option) {
+          return new Promise(function (resolve) {
+            setTimeout(function () {
+              var mockData = {
+                host1: { name: 'Server-A', os: 'Windows Server 2022', status: 'online' },
+                host2: { name: 'Server-B', os: 'Ubuntu 22.04', status: 'online' },
+                host3: { name: 'Router-1', os: 'Cisco IOS', status: 'online' },
+                host4: { name: 'Switch-1', os: 'Cisco NX-OS', status: 'offline' }
+              };
+              var d = mockData[option.value];
+              var statusColor = d.status === 'online' ? 'success' : 'danger';
+              resolve(
+                '<div style="min-width:180px">' +
+                  '<strong>' + d.name + '</strong>' +
+                  '<ul style="margin:6px 0 0;padding:0;list-style:none">' +
+                    '<li>IP: ' + option.text + '</li>' +
+                    '<li>OS: ' + d.os + '</li>' +
+                    '<li>상태: <span class="gn-tag is-' + statusColor + ' is-small">' + d.status + '</span></li>' +
+                  '</ul>' +
+                '</div>'
+              );
+            }, 500);
+          });
+        }
+      }
+    });
   },
   Datagrid: function () {
     Gn.create('datagrid', {
@@ -626,6 +705,64 @@ const components = {
         console.log(updatedData);
       }
     });
+    Gn.create('datagrid', {
+      target: '.new-grid4',
+      orientation: 'horizontal',
+      orientationOptions: {
+        columns: 'auto-fit',
+        minWidth: '240px'
+      },
+      hasHeader: true,
+      hasCheck: true,
+      hasDelete: true,
+      headers: [
+        {
+          label: '이름',
+          key: 'name'
+        },
+        {
+          label: '부서',
+          key: 'team'
+        },
+        {
+          label: '상태',
+          key: 'status',
+          template: function (k, d) {
+            return '<span class="tag is-info">' + d[k] + '</span>';
+          }
+        }
+      ],
+      data: [
+        {
+          name: '홍길동',
+          team: '플랫폼개발',
+          status: 'ACTIVE'
+        },
+        {
+          name: '김철수',
+          team: '디자인시스템',
+          status: 'PENDING'
+        },
+        {
+          name: '이영희',
+          team: 'QA',
+          status: 'DONE'
+        },
+        {
+          name: '박민수',
+          team: '프론트엔드',
+          status: 'ACTIVE'
+        },
+        {
+          name: '최지우',
+          team: '서비스기획',
+          status: 'REVIEW'
+        }
+      ],
+      textSets: {
+        deleteConfirmMessage: '카드를 삭제하시겠습니까?'
+      }
+    });
   },
   Datalist: function () {
     Gn.create('datalist', {
@@ -1467,6 +1604,25 @@ const components = {
         });
       }
     });
+    // Modal(Extra) 예제 버튼 바인딩
+    Gn.create('button', {
+      target: '.new-modal-extra',
+      onClick: function () {
+        console.log('[Guide][Modal] .new-modal-extra clicked');
+        Gn.create('modal', {
+          textSets: { title: 'Extra Buttons Demo' },
+          hasCancel: true,
+          height: 400,
+          extraButtons: [
+            { key: 'edit-template', label: '수정(템플릿만적용)', className: 'is-small is-primary' },
+            { key: 'edit-bulk', label: '수정(용도일괄적용)', className: 'is-small is-mono' }
+          ],
+          onExtra: function (actionKey) {
+            console.log('extra clicked:', actionKey);
+          }
+        });
+      }
+    });
   },
   Pagination: function () {
     Gn.create('pagination', {
@@ -1492,6 +1648,19 @@ const components = {
       rows: 1,
       maxlength: 300
     });
+    Gn.create('multitext', {
+      target: '.message-multitext',
+      lang: ['ko', 'en'],
+      value: {
+        ko: '옵션 문구 예시',
+        en: 'message example'
+      },
+      maxlength: 120,
+      useMaxLengthMessage: true,
+      textSets: {
+        maxLengthMessage: '{{maxlength}}자 입력 가능합니다.'
+      }
+    });
   },
   Picklist: function () {
     Gn.create('picklist', {
@@ -1552,6 +1721,26 @@ const components = {
       width: '500px',
       height: 150
     });
+    Gn.create('picklist', {
+    target: '.new-picklist-tooltip',
+    data: {
+      source: [
+        { value: '항목1', text: 'item1' },
+        { value: '항목2', text: 'item2' },
+        { value: '항목3', text: 'item3' }
+      ],
+      target: []
+    },
+    optionTooltip: {
+      direction: 'right',
+      content: function(option) {
+        return '<div style="padding: 10px; max-width: 200px;">' + option.text + '에 대한 추가 정보입니다.</div>';
+      }
+    },
+    direction: 'horizontal',
+    width: '500px',
+    height: 150
+  });
   },
   SortableList: function () {
     Gn.create('sortablelist', {
@@ -1961,59 +2150,98 @@ const components = {
         }
       ],
       color: 'success',
-      multiple: true
+      hasCheck: false
     });
     Gn.create('tree', {
       target: '.new-tree3',
       data: [
         {
           text: 'Genians',
+          value: 'genians',
           actived: true,
           opened: true,
           child: [
             {
-              text: 'GNUI'
+              text: 'GNUI',
+              value: 'gnui'
             },
             {
               text: 'GNUI core',
+              value: 'gnui-core',
               opened: true,
               child: [
                 {
-                  text: 'GNUI'
+                  text: 'GNUI',
+                  value: 'gnui-nested'
                 },
                 {
-                  text: 'GNUI core'
+                  text: 'GNUI core',
+                  value: 'gnui-core-nested'
                 },
                 {
                   text: 'GNConfEngine',
+                  value: 'gnconfengine-nested',
                   selected: true
                 }
               ]
             },
             {
-              text: 'GNConfEngine'
+              text: 'GNConfEngine',
+              value: 'gnconfengine'
             }
           ]
         },
         {
           text: 'R&D Center',
+          value: 'rnd-center',
           child: [
             {
-              text: 'GNUI'
+              text: 'GNUI',
+              value: 'rnd-gnui'
             },
             {
-              text: 'GNUI core'
+              text: 'GNUI core',
+              value: 'rnd-gnui-core'
             },
             {
-              text: 'GNConfEngine'
+              text: 'GNConfEngine',
+              value: 'rnd-gnconfengine'
             }
           ]
         },
         {
-          text: 'Front-end'
+          text: 'Front-end',
+          value: 'frontend'
         }
       ],
       hasCheck: true
     });
+    Gn.create('tree', {
+      target: '.new-tree4',
+      data: [
+        {
+          text: 'Disabled Root',
+          value: 'disabled-root',
+          opened: true,
+          child: [
+            {
+              text: 'Locked Node',
+              value: 'locked-node',
+              selected: true
+            },
+            {
+              text: 'Review Only',
+              value: 'review-only'
+            }
+          ]
+        },
+        {
+          text: 'Disabled Leaf',
+          value: 'disabled-leaf'
+        }
+      ],
+      hasCheck: true,
+      disabled: true
+    });
   }
 };