gnui 1.2.16 → 1.2.18

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.2.16",
+  "version": "1.2.18",
   "type": "module",
   "main": "dist/js/gnui.js",
   "types": "@types/gnui.d.ts",
@@ -82,7 +82,7 @@
     "@fortawesome/free-brands-svg-icons": "6.5.2",
     "@fortawesome/free-solid-svg-icons": "6.5.2",
     "apexcharts": "3.45.0",
-    "gnutils": "^1.0.0",
+    "gnutils": "^1.0.2",
     "jsonpath": "1.1.1",
     "prismjs": "1.29.0"
   },

package/styleguide/assets/components.js

@@ -425,6 +425,103 @@ const components = {
     });
     Gn.create('datagrid', {
       target: '.new-grid2',
+      headers: [
+        {
+          label: 'no',
+          key: 'number',
+          onSelect: function () {
+            // eslint-disable-next-line prefer-rest-params
+            console.log(arguments);
+          },
+          template: function (k, d) {
+            return '<span>' + d[k] + '</span>';
+          },
+          draggable: true,
+          sortable: true,
+          sort: 'asc'
+        },
+        {
+          label: '제목',
+          key: 'title',
+          style: {
+            width: '250px'
+          },
+          className: 'has-text-right',
+          draggable: true,
+          bodyClass: 'has-text-left',
+          sortable: true
+        },
+        {
+          label: '날짜',
+          key: 'date',
+          style: {
+            width: '150px'
+          },
+          className: 'has-text-center',
+          bodyClass: 'has-text-left'
+        }
+      ],
+      data: [
+        {
+          number: '1',
+          title: '하나',
+          date: '2020-09-19',
+          desc: 'hello, world',
+          child: [
+            {
+              number: '1-1',
+              title: '1-하나',
+              date: '2020-09-19'
+            },
+            {
+              number: '1-2',
+              title: '1-둘',
+              date: '2020-09-19',
+              desc: 'hello, world',
+              child: [
+                {
+                  number: '1-2-1',
+                  title: '1-둘-1',
+                  date: '2020-09-19',
+                  desc: 'hello, world',
+                  child: [
+                    {
+                      number: '1-2-1-1',
+                      title: '1-둘-1-1',
+                      desc: 'hello, world',
+                      date: '2020-09-19'
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          color: 'is-danger-light'
+        },
+        {
+          number: '2',
+          title: '둘',
+          date: '2020-09-19',
+          desc: 'hello, world'
+        }
+      ],
+      hasHeader: false,
+      hasCheck: true,
+      hasDelete: true,
+      textSets: {
+        deleteConfirmMessage: '파일을 삭제하시겠습니까?'
+      },
+      // onDelete 핸들러에서 false 를 반환하면 해당 행 삭제를 취소할 수 있다.
+      onDelete: (data, index) => {
+        console.log(data, index);
+        // 예: 첫 번째 행 삭제는 막고 싶은 경우
+        // if (index === 0) {
+        //   return false;
+        // }
+      }
+    });
+    Gn.create('datagrid', {
+      target: '.new-grid3',
       headers: [
         {
           label: 'row data numbers',
@@ -1237,6 +1334,69 @@ const components = {
         }
       ]
     });
+    // 서브메뉴 테스트
+    Gn.create('menubutton', {
+      target: 'button[name=new-button-submenu]',
+      size: 'normal',
+      textSets: {
+        buttonText: '편집 메뉴'
+      },
+      onSelect: function (value, text, menu, e) {
+        console.log('선택된 메뉴:', { value: value, text: text, menu: menu });
+      },
+      data: [
+        {
+          text: '파일',
+          value: 'file',
+          child: [
+            { text: '새 파일', value: 'file-new' },
+            { text: '열기', value: 'file-open' },
+            {
+              text: '최근 파일',
+              value: 'file-recent',
+              child: [
+                { text: 'document.txt', value: 'file-recent-1' },
+                { text: 'image.png', value: 'file-recent-2' },
+                { text: 'project.json', value: 'file-recent-3' }
+              ]
+            },
+            { text: '저장', value: 'file-save' },
+            { text: '다른 이름으로 저장', value: 'file-saveas' }
+          ]
+        },
+        {
+          text: '편집',
+          value: 'edit',
+          child: [
+            { text: '실행 취소', value: 'edit-undo' },
+            { text: '다시 실행', value: 'edit-redo', actived: true },
+            { text: '복사', value: 'edit-copy' },
+            { text: '붙여넣기', value: 'edit-paste' }
+          ]
+        },
+        {
+          text: '보기',
+          value: 'view',
+          child: [
+            {
+              text: '확대/축소',
+              value: 'view-zoom',
+              disabled: true,
+              child: [
+                { text: '확대', value: 'view-zoom-in' },
+                { text: '축소', value: 'view-zoom-out' },
+                { text: '원본 크기', value: 'view-zoom-reset' }
+              ]
+            },
+            { text: '전체 화면', value: 'view-fullscreen' }
+          ]
+        },
+        {
+          text: '도움말',
+          value: 'help'
+        }
+      ]
+    });
   },
   Modal: function () {
     Gn.create('button', {
@@ -1299,16 +1459,14 @@ const components = {
       target: '.new-picklist',
       data: {
         source: [
-          { value: 'item1', text: '항목1' },
-          { value: 'item2', text: '항목2' },
-          { value: 'item5', text: '항목3' },
-          { value: 'item4', text: '항목4' },
-          { value: 'item5', text: '항목5' },
-          { value: 'item6', text: '항목6' },
-          { value: 'item7', text: '항목7' },
-          { value: 'item8', text: '항목8' }
+          { value: '항목1', text: 'item1', html: '<span class="gn-tag is-primary">항목1</span> item1' },
+          { value: '항목2', text: 'item2', html: '<span class="gn-tag is-danger">항목2</span> item2' },
+          { value: '항목3', text: 'item3', html: '<span class="gn-tag is-warning">항목3</span> item3' }
         ],
-        target: []
+        target: [
+          { value: '항목4', text: 'item4', html: '<span class="gn-tag is-help">항목4</span> item4' },
+          { value: '항목5', text: 'item5', html: '<span class="gn-tag is-success">항목5</span> item5' }
+        ]
       },
       hasSourceSearch: true,
       hasTargetSearch: true,
@@ -1340,6 +1498,55 @@ const components = {
       }
     });
   },
+  SortableList: function () {
+    Gn.create('sortablelist', {
+      target: '.new-sortablelist',
+      data: [
+        { value: '1', text: '항목 1' },
+        { value: '2', text: '항목 2' },
+        { value: '3', text: '항목 3' },
+        { value: '4', text: '항목 4' },
+        { value: '5', text: '항목 5' },
+        { value: '6', text: '항목 6' },
+        { value: '7', text: '항목 7' },
+        { value: '8', text: '항목 8' },
+        { value: '9', text: '항목 9' },
+        { value: '10', text: '항목 10' }
+      ]
+    });
+    Gn.create('sortablelist', {
+      target: '.new-sortablelist-drag',
+      data: [
+        { value: 'a', text: '항목 A' },
+        { value: 'b', text: '항목 B' },
+        { value: 'c', text: '항목 C' },
+        { value: 'd', text: '항목 D' },
+        { value: 'e', text: '항목 E' },
+        { value: 'f', text: '항목 F' },
+        { value: 'g', text: '항목 G' },
+        { value: 'h', text: '항목 H' },
+        { value: 'i', text: '항목 I' },
+        { value: 'j', text: '항목 J' }
+      ],
+      draggable: true
+    });
+    Gn.create('sortablelist', {
+      target: '.new-sortablelist-cols',
+      buttonPosition: 'right',
+      data: [
+        { value: 'x1', cols: ['항목1', '카테고리A', '1000'] },
+        { value: 'x2', cols: ['항목2', '카테고리B', '2000'] },
+        { value: 'x3', cols: ['항목3', '카테고리C', '3000'] },
+        { value: 'x4', cols: ['항목4', '카테고리D', '4000'] },
+        { value: 'x5', cols: ['항목5', '카테고리E', '5000'] },
+        { value: 'x6', cols: ['항목6', '카테고리F', '6000'] },
+        { value: 'x7', cols: ['항목7', '카테고리G', '7000'] },
+        { value: 'x8', cols: ['항목8', '카테고리H', '8000'] },
+        { value: 'x9', cols: ['항목9', '카테고리I', '9000'] },
+        { value: 'x10', cols: ['항목10', '카테고리J', '10000'] }
+      ]
+    });
+  },
   Progressbar: function () {
     Gn.create('progressbar', {
       target: '.new-progress-indeterminate',