gnui 1.2.20 → 1.2.21

package/dist/styles/nac.css

@@ -560,6 +560,14 @@ table th{
   justify-content:space-between !important;
 }
 
+.is-text-link{
+  color:#00327b !important;
+}
+.is-text-link:hover{
+  text-decoration:underline;
+  cursor:pointer;
+}
+
 .has-text-ellipsis{
   white-space:nowrap;
   overflow:hidden;
@@ -4309,6 +4317,9 @@ span.gn-highlight{
 .gn-checks.is-no-padding{
   padding:0;
 }
+.gn-checks.is-no-padding > input[type=checkbox] + label{
+  padding:0;
+}
 .gn-checks.is-disabled{
   cursor:not-allowed;
 }
@@ -5634,6 +5645,54 @@ span.gn-highlight{
   flex-shrink:0;
   text-align:right;
 }
+.gn-field > .gn-label.is-1{
+  flex-grow:1;
+}
+.gn-field > .gn-label.is-1 + .gn-control{
+  flex-grow:7;
+}
+.gn-field > .gn-label.is-2{
+  flex-grow:2;
+}
+.gn-field > .gn-label.is-2 + .gn-control{
+  flex-grow:6;
+}
+.gn-field > .gn-label.is-3{
+  flex-grow:3;
+}
+.gn-field > .gn-label.is-3 + .gn-control{
+  flex-grow:5;
+}
+.gn-field > .gn-label.is-4{
+  flex-grow:4;
+}
+.gn-field > .gn-label.is-4 + .gn-control{
+  flex-grow:4;
+}
+.gn-field > .gn-label.is-5{
+  flex-grow:5;
+}
+.gn-field > .gn-label.is-5 + .gn-control{
+  flex-grow:3;
+}
+.gn-field > .gn-label.is-6{
+  flex-grow:6;
+}
+.gn-field > .gn-label.is-6 + .gn-control{
+  flex-grow:2;
+}
+.gn-field > .gn-label.is-7{
+  flex-grow:7;
+}
+.gn-field > .gn-label.is-7 + .gn-control{
+  flex-grow:1;
+}
+.gn-field > .gn-label.is-8{
+  flex-grow:8;
+}
+.gn-field > .gn-label.is-8 + .gn-control{
+  flex-grow:0;
+}
 .gn-field > .gn-control{
   flex:5 1 0px;
   flex-basis:0;
@@ -9474,6 +9533,91 @@ span.gn-highlight{
 .gn-datagrid.is-headless .gn-datagrid-body-row:first-child{
   border-top:0;
 }
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-body-row{
+  border-top:0;
+  border-bottom:1px solid #bebebe;
+}
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-body-row.is-horizontal-first-row{
+  border-top:1px solid #bebebe;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-row.is-horizontal{
+  grid-template-columns:1fr !important;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell.is-horizontal{
+  display:flex;
+  align-items:center;
+  justify-content:flex-start;
+  min-height:2.5rem;
+  border-right:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .gn-datagrid-cell,
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .is-sortDir,
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .is-handle{
+  display:none;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body{
+  display:grid;
+  gap:0;
+  align-items:start;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row{
+  display:block;
+  box-sizing:border-box;
+  border-top:0;
+  border-right:1px solid #bebebe;
+  border-bottom:1px solid #bebebe;
+  border-left:0;
+  overflow:hidden;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-horizontal-first-col{
+  border-left:1px solid #bebebe;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-horizontal-first-row{
+  border-top:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-card-header{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  min-height:calc(20px + 1.1rem);
+  padding:0.55rem;
+  border-bottom:1px solid rgba(190, 190, 190, 0.45);
+}
+.gn-datagrid.is-horizontal .gn-datagrid-card-header-left,
+.gn-datagrid.is-horizontal .gn-datagrid-card-header-right{
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-nodata{
+  grid-column:1/-1;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-cell{
+  display:flex;
+  flex-direction:column;
+  gap:0.25rem;
+  padding:0.55rem;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-cell-label{
+  color:#535353;
+  font-size:0.875em;
+  font-weight:600;
+}
+.gn-datagrid.is-horizontal .btn-container{
+  min-height:3rem;
+}
+.gn-datagrid.is-horizontal.has-horizontal-gap .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal.has-horizontal-gap .gn-datagrid-body-row{
+  border:1px solid #bebebe;
+}
 .gn-datagrid .gn-datagrid-header-cell{
   border-right:1px solid #bebebe;
   padding:0.55rem;

package/dist/styles/ztnac.css

@@ -586,6 +586,14 @@ table th{
   justify-content:space-between !important;
 }
 
+.is-text-link{
+  color:hsl(217, 71%, 53%) !important;
+}
+.is-text-link:hover{
+  text-decoration:underline;
+  cursor:pointer;
+}
+
 .has-text-ellipsis{
   white-space:nowrap;
   overflow:hidden;
@@ -4565,6 +4573,9 @@ span.gn-highlight{
 .gn-checks.is-no-padding{
   padding:0;
 }
+.gn-checks.is-no-padding > input[type=checkbox] + label{
+  padding:0;
+}
 .gn-checks.is-disabled{
   cursor:not-allowed;
 }
@@ -5970,6 +5981,54 @@ span.gn-highlight{
   flex-shrink:0;
   text-align:right;
 }
+.gn-field > .gn-label.is-1{
+  flex-grow:1;
+}
+.gn-field > .gn-label.is-1 + .gn-control{
+  flex-grow:7;
+}
+.gn-field > .gn-label.is-2{
+  flex-grow:2;
+}
+.gn-field > .gn-label.is-2 + .gn-control{
+  flex-grow:6;
+}
+.gn-field > .gn-label.is-3{
+  flex-grow:3;
+}
+.gn-field > .gn-label.is-3 + .gn-control{
+  flex-grow:5;
+}
+.gn-field > .gn-label.is-4{
+  flex-grow:4;
+}
+.gn-field > .gn-label.is-4 + .gn-control{
+  flex-grow:4;
+}
+.gn-field > .gn-label.is-5{
+  flex-grow:5;
+}
+.gn-field > .gn-label.is-5 + .gn-control{
+  flex-grow:3;
+}
+.gn-field > .gn-label.is-6{
+  flex-grow:6;
+}
+.gn-field > .gn-label.is-6 + .gn-control{
+  flex-grow:2;
+}
+.gn-field > .gn-label.is-7{
+  flex-grow:7;
+}
+.gn-field > .gn-label.is-7 + .gn-control{
+  flex-grow:1;
+}
+.gn-field > .gn-label.is-8{
+  flex-grow:8;
+}
+.gn-field > .gn-label.is-8 + .gn-control{
+  flex-grow:0;
+}
 .gn-field > .gn-control{
   flex:5 1 0px;
   flex-basis:0;
@@ -7229,7 +7288,7 @@ span.gn-highlight{
   box-shadow:0 0 0 0.1em rgba(241.077, 70.023, 104.2338, 0.7);
 }
 .gn-multitext .gn-tab{
-  margin-bottom:2px;
+  margin-bottom:0;
 }
 .gn-multitext .gn-tab a{
   padding:calc(0.5em - 1px) calc(0.75em - 1px);
@@ -10058,6 +10117,91 @@ span.gn-highlight{
 .gn-datagrid.is-headless .gn-datagrid-body-row:first-child{
   border-top:0;
 }
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-body-row{
+  border-top:0;
+  border-bottom:1px solid hsl(0, 0%, 86%);
+}
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-body-row.is-horizontal-first-row{
+  border-top:1px solid hsl(0, 0%, 86%);
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-row.is-horizontal{
+  grid-template-columns:1fr !important;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell.is-horizontal{
+  display:flex;
+  align-items:center;
+  justify-content:flex-start;
+  min-height:2.5rem;
+  border-right:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .gn-datagrid-cell,
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .is-sortDir,
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .is-handle{
+  display:none;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body{
+  display:grid;
+  gap:0;
+  align-items:start;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row{
+  display:block;
+  box-sizing:border-box;
+  border-top:0;
+  border-right:1px solid hsl(0, 0%, 86%);
+  border-bottom:1px solid hsl(0, 0%, 86%);
+  border-left:0;
+  overflow:hidden;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-horizontal-first-col{
+  border-left:1px solid hsl(0, 0%, 86%);
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-horizontal-first-row{
+  border-top:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-card-header{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  min-height:calc(20px + 1.1rem);
+  padding:0.55rem;
+  border-bottom:1px solid rgba(219.3, 219.3, 219.3, 0.45);
+}
+.gn-datagrid.is-horizontal .gn-datagrid-card-header-left,
+.gn-datagrid.is-horizontal .gn-datagrid-card-header-right{
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-nodata{
+  grid-column:1/-1;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-cell{
+  display:flex;
+  flex-direction:column;
+  gap:0.25rem;
+  padding:0.55rem;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-cell-label{
+  color:hsl(0, 0%, 21%);
+  font-size:0.875em;
+  font-weight:600;
+}
+.gn-datagrid.is-horizontal .btn-container{
+  min-height:3rem;
+}
+.gn-datagrid.is-horizontal.has-horizontal-gap .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal.has-horizontal-gap .gn-datagrid-body-row{
+  border:1px solid hsl(0, 0%, 86%);
+}
 .gn-datagrid .gn-datagrid-header-cell{
   border-right:1px solid hsl(0, 0%, 86%);
   padding:0.55rem;

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.2.20",
+  "version": "1.2.21",
   "type": "module",
   "main": "dist/js/gnui.js",
   "types": "@types/gnui.d.ts",
@@ -37,7 +37,11 @@
     "prettier": "npx prettier --write .",
     "eslint": "npx eslint --fix ./ts/**/*.{ts,tsx} ./template_docs/**/*.js",
     "server": "http-server ./ -a localhost --port 9002 -s -o ./styleguide --watch",
-    "dev": "npm-watch"
+    "dev": "npm-watch",
+    "test": "playwright test --project=components",
+    "test:all": "playwright test",
+    "test:ui": "playwright test --project=components --ui",
+    "test:integration": "playwright test --project=integration-chromium --project=integration-firefox"
   },
   "watch": {
     "build-sass": {
@@ -92,6 +96,7 @@
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@babel/preset-env": "^7.23.6",
+    "@playwright/test": "^1.58.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",

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%'
@@ -626,6 +643,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 +1542,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 +1586,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', {
@@ -1961,59 +2068,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
+    });
   }
 };