gnui 1.1.7 → 1.2.0

package/styleguide/assets/theme.css

@@ -31,7 +31,6 @@ category: body
 
 */
 
-
 /*
 ---
 name: Header
@@ -49,21 +48,23 @@ tag:
 */
 .aigis-header {
   position: fixed;
-  top:0;
-  padding:10px 30px;
-  width:100%; 
-  height:50px;
+  top: 0;
+  padding: 10px 30px;
+  width: 100%;
+  height: 50px;
   background-color: #486491;
-  z-index:10000; }
+  z-index: 10000;
+}
 .aigis-header span a {
   color: #fff;
   font-size: 2.6em;
-  font-family:  "Noto Sans KR", "Nanum Gothic",;
+  font-family: 'Noto Sans KR', 'Nanum Gothic';
   text-decoration: none;
   line-height: 110%;
 }
 .aigis-header div {
-  float: right;}
+  float: right;
+}
 
 /*
 ---
@@ -85,7 +86,8 @@ tag: latest
   /* color: #7a7a7a; */
   border-top: 1px solid #eee;
   text-align: center;
-  font-size: 16px; }
+  font-size: 16px;
+}
 
 /*
 ---
@@ -102,7 +104,8 @@ tag: latest
 ```
 
 */
-.aigis-codeblock, .aigis-preview {
+.aigis-codeblock,
+.aigis-preview {
   position: relative;
   margin: 0;
   overflow: visible;
@@ -111,8 +114,8 @@ tag: latest
 .aigis-preview::before {
   content: 'preview';
   position: absolute;
-  right:0;
-  top:0;
+  right: 0;
+  top: 0;
   font-size: 10px;
   padding: 2px 4px 2px 5px;
   border-bottom-left-radius: 3px;
@@ -129,18 +132,19 @@ tag: latest
   -webkit-appearance: none;
   display: inline-block;
   border: none;
-  background-color: #3DB680;
+  background-color: #3db680;
   color: #fff;
   padding: 10px 20px;
   text-align: center;
   line-height: 40px;
   min-width: 200px;
   font-size: 20px;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
 .ex-ag-btn--primary {
   color: black;
-  background-color: #FFEA3A; }
-
+  background-color: #ffea3a;
+}
 
 /*
 ---
@@ -155,7 +159,7 @@ tag: latest
 ```
 
 */
-.aigis-module pre:not([aria-hidden="true"]) {
+.aigis-module pre:not([aria-hidden='true']) {
   background-color: #272822;
   color: #f8f8f2;
   font-size: 14px;
@@ -163,31 +167,36 @@ tag: latest
   padding: 0.5em;
   border-radius: 3px;
   margin: 0 auto 3em;
-  border: 1px solid #A0A0A0; 
+  border: 1px solid #a0a0a0;
   max-height: 300px;
-  overflow: auto }
-.aigis-module pre + pre{
-    margin-top: -3em;
-    margin-bottom: 3em; }
+  overflow: auto;
+}
+.aigis-module pre + pre {
+  margin-top: -3em;
+  margin-bottom: 3em;
+}
 .aigis-module > ul:not([class]) {
   list-style: disc;
-  margin: 10px 30px; }
+  margin: 10px 30px;
+}
 
 .aigis-preview {
-  border: 1px solid #A0A0A0;
+  border: 1px solid #a0a0a0;
   border-radius: 3px;
   border-radius: 3px 3px 0 0;
   padding: 20px 10px;
   padding: 16px;
   margin: 0;
-  margin-top: 10px; }
+  margin-top: 10px;
+}
 .aigis-preview p + p {
-  margin-top: 10px; }
+  margin-top: 10px;
+}
 .aigis-preview + pre {
   position: relative;
   border-radius: 0 0 3px 3px;
   border-top: none;
-  margin-top: 0; 
+  margin-top: 0;
   height: auto;
   overflow-x: auto;
 }
@@ -197,14 +206,14 @@ tag: latest
 .aigis-module.Chart .aigis-preview > div,
 .aigis-module.Chart table,
 .aigis-module.Chart table + pre,
-.aigis-module.Chart pre + pre{
+.aigis-module.Chart pre + pre {
   display: inline-block;
   width: 49%;
   margin-right: 5px;
   vertical-align: middle;
 }
 .aigis-module.JsonView table:not(:last-of-type) td > pre {
-  max-width: 270px
+  max-width: 270px;
 }
 /*
 ---
@@ -236,35 +245,36 @@ tag: latest
   top: 50px;
   bottom: 0;
   left: 0;
-  padding-top:20px;
-  padding-bottom:20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
   width: 280px;
-  border-right:1px solid #d4dbe4;
+  border-right: 1px solid #d4dbe4;
   box-sizing: border-box;
   background-color: #fff;
   color: #33331a;
   -ms-overflow-style: none;
-  overflow-x: auto;}
-  .aigis-sidemenu::-webkit-scrollbar {display:none;}
+  overflow-x: auto;
+}
+.aigis-sidemenu::-webkit-scrollbar {
+  display: none;
+}
 .aigis-sidemenu__heading {
   font-size: 30px;
   margin: 12px 0;
   color: #33331a;
   font-weight: normal;
   padding-left: 10px;
-  line-height: 1em; }
+  line-height: 1em;
+}
 .aigis-sidemenu__heading a {
   color: inherit;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 .aigis-preview .aigis-sidemenu {
   position: relative;
 }
 
-
-
-
-
 /*
 ---
 name: Category list
@@ -287,12 +297,13 @@ tag: latest
 ```
 
 */
-.aigis-categoryList ul li{
+.aigis-categoryList ul li {
   padding: 3px 10px;
   font-size: 14px;
-  list-style: none; }
+  list-style: none;
+}
 
-.aigis-categoryList li a{
+.aigis-categoryList li a {
   display: block;
   position: relative;
   padding: 3px 10px 3px 10px;
@@ -301,23 +312,30 @@ tag: latest
   overflow: hidden;
   white-space: nowrap;
   border-radius: 0px;
-  outline: none;;
-  text-decoration: none; }
+  outline: none;
+  text-decoration: none;
+}
 
-.aigis-categoryList li:hover a[href]:hover{
+.aigis-categoryList li:hover a[href]:hover {
   text-decoration: underline;
-  color: #2a436b; }
+  color: #2a436b;
+}
 .aigis-categoryList li[data-path-depth] a:before {
-  content: "";
-  margin-right: 10px; }
-.aigis-categoryList li[data-path-depth="1"] a:before {
-  margin-left: 1em; }
-.aigis-categoryList li[data-path-depth="2"] a:before {
-  margin-left: 2em; }
-.aigis-categoryList li[data-path-depth="3"] a:before {
-  margin-left: 3em; }
-.aigis-categoryList li[data-path-depth="4"] a:before {
-  margin-left: 4em; }
+  content: '';
+  margin-right: 10px;
+}
+.aigis-categoryList li[data-path-depth='1'] a:before {
+  margin-left: 1em;
+}
+.aigis-categoryList li[data-path-depth='2'] a:before {
+  margin-left: 2em;
+}
+.aigis-categoryList li[data-path-depth='3'] a:before {
+  margin-left: 3em;
+}
+.aigis-categoryList li[data-path-depth='4'] a:before {
+  margin-left: 4em;
+}
 .aigis-categoryList li[data-path-depth] [data-tree-current],
 .aigis-categoryList .current > a {
   background-color: #d2d2d2;
@@ -343,7 +361,8 @@ tag: latest
 .aigis-tags {
   padding: 10px;
   padding-left: 0;
-  margin: 0; }
+  margin: 0;
+}
 /*
 ---
 name: Module list
@@ -374,30 +393,36 @@ tag: latest
 */
 .aigis-moduleList {
   line-height: 1.6;
-  font-size: 16px; }
+  font-size: 16px;
+}
 .aigis-moduleList__item a {
   color: #08f;
-  text-decoration: none; }
+  text-decoration: none;
+}
 .aigis-moduleList__item a:hover {
-  text-decoration: underline; }
+  text-decoration: underline;
+}
 
 .aigis-module__heading {
   padding-bottom: 0.3em;
   font-size: 1.75em;
   line-height: 1.225;
   border-bottom: 1px solid #eee;
-  position: relative; }
+  position: relative;
+}
 .aigis-module__heading:hover a {
-  position: relative; }
+  position: relative;
+}
 .aigis-module__heading:hover a:before {
-  content: "\00a7";
+  content: '\00a7';
   position: absolute;
   right: 100%;
   bottom: 5px;
   font-size: 20px;
   color: #000;
   padding-right: 5px;
-  padding-left: 5px; }
+  padding-left: 5px;
+}
 
 /*
 ---
@@ -417,7 +442,8 @@ category: body
   display: block;
   text-align: right;
   font-size: 12px;
-  color: #ADADAD; }
+  color: #adadad;
+}
 
 /*
 ---
@@ -444,63 +470,95 @@ tag: special
 
 */
 .aigis-colorPalette {
-  margin-top: 5px; }
+  margin-top: 5px;
+}
 .aigis-colorPalette__color {
   display: inline-block;
   vertical-align: middle;
   height: 40px;
   width: 50%;
-  margin-right: 5px; }
+  margin-right: 5px;
+}
 .aigis-colorPalette__label {
   display: inline-block;
   vertical-align: middle;
-  line-height: 40px; }
+  line-height: 40px;
+}
 
 body {
   margin: 0;
   padding: 0;
-  font-size: 1rem; 
-  font-family: BlinkMacSystemFont, -apple-system, Dhurjati "Nanum Gothic" "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-
+  font-size: 1rem;
+  font-family:
+    BlinkMacSystemFont,
+    -apple-system,
+    Dhurjati 'Nanum Gothic' 'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    'Helvetica',
+    'Arial',
+    sans-serif;
 }
 
-.aigis-module > ul code, .aigis-module > p code, .aigis-contents__body > ul code, .aigis-contents__body > p code, .aigis-contents__body > h2 code, .aigis-contents__body > h3 code {
+.aigis-module > ul code,
+.aigis-module > p code,
+.aigis-contents__body > ul code,
+.aigis-contents__body > p code,
+.aigis-contents__body > h2 code,
+.aigis-contents__body > h3 code {
   color: #666;
   background-color: #f7f7f7;
   padding: 0 3px;
   font-size: 1.2em;
-  border-radius: 3px; }
+  border-radius: 3px;
+}
 
 .aigis-container {
   box-sizing: border-box;
   width: auto;
   min-width: 960px;
-  margin-right: auto; }
+  margin-right: auto;
+}
 .aigis-container:after {
-  content: "";
+  content: '';
   display: table;
-  clear: both; }
+  clear: both;
+}
 
 .aigis-contents {
   box-sizing: border-box;
   padding-right: 10px;
   padding-left: 280px;
-  padding-top:50px;
+  padding-top: 50px;
   margin: 0 auto;
   /* font-size: 18px; */
- }
+}
 .aigis-contents__body {
   /* color: #33331a; */
   max-width: 960px;
   min-width: 600px;
   padding: 20px 20px;
-  margin: 0 auto; }
+  margin: 0 auto;
+}
 .aigis-contents__body > p {
-  margin-bottom: 1em; }
+  margin-bottom: 1em;
+}
 
 /*
 main
-*/ 
+*/
 .aigis-main-page {
   padding: 10px;
 }
+
+/*
+components 
+*/
+.aigis-contents .type-checkbox {
+  height: 215px;
+}

package/styleguide/category/COLOR/index.html

@@ -1,65 +1,71 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <link href="../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile">
-    <link href="../../assets/okadia.css" rel="stylesheet">
-    <link href="../../assets/theme.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
-    <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link href="../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile" />
+    <link href="../../assets/okadia.css" rel="stylesheet" />
+    <link href="../../assets/theme.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
+    <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet" />
     <script src="../../assets/components.js"></script>
     <script src="../../../dist/js/gnui.js"></script>
   </head>
-<body>
-  <div class="aigis-container">
-    <header class="aigis-header gn-gcolor is-primary">
-      <span><a href="../../index.html" class="main-link" style="font-family: 'Squada One', cursive;">GNUI</a></span>
-      <span class="has-text-invert" style="font-size: 1.0em;padding-left: 10px;">Start your next web project with GNUI.</span>
-      <div class="gn-select is-medium">
-        <select id="ThemeSelector">
-          
+  <body>
+    <div class="aigis-container">
+      <header class="aigis-header gn-gcolor is-primary">
+        <span><a href="../../index.html" class="main-link" style="font-family: 'Squada One', cursive">GNUI</a></span>
+        <span class="has-text-invert" style="font-size: 1em; padding-left: 10px">Start your next web project with GNUI.</span>
+        <div class="gn-select is-medium">
+          <select id="ThemeSelector">
+            
             <option value="default">default</option>
-          
+            
             <option value="nac">nac</option>
-          
+            
             <option value="insights">insights</option>
-          
+            
             <option value="gpi">gpi</option>
-          
-            <option value="zt-nac">zt-nac</option>
-          
-        </select>
-      </div>
-      <div>
-        <a class="gn-button is-primary util-link" href="../../category/Utils/index.html">
-          <span class="gn-icon is-small">
-            <i class="fas fa-tools"></i>
-          </span>
-          Gn.util
-        </a>
-      </div>
-    </header>
-    <div class="aigis-sidemenu">
-  <nav class="gn-tree is-borderless is-large left-menu">
-  </nav>
+            
+            <option value="ztnac">ztnac</option>
+            
+            <option value="green24">green24</option>
+            
+          </select>
+        </div>
+        <div>
+          <a class="gn-button is-primary util-link" href="../../category/Utils/index.html">
+            <span class="gn-icon is-small">
+              <i class="fas fa-tools"></i>
+            </span>
+            Gn.util
+          </a>
+        </div>
+      </header>
+      <div class="aigis-sidemenu">
+  <nav class="gn-tree is-borderless is-large left-menu"></nav>
 </div>
 
 <script>
   window.Gn = window.gnui;
 
-  Gn.ready(function(){
-    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Time(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MenuButton(js),CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
+  Gn.ready(function () {
+    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Datalist(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,CONTROLS/Time(js),ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
     var jsComps = ''.split(',');
     delete leftMenu.Utils;
     Gn.util.append('.left-menu', renderTree(leftMenu));
     Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
 
-    function renderTree(menus){
+    function renderTree(menus) {
       var $depths = Gn.util.$('<ul></ul>');
-      Gn.util.each(menus, function (child, menu){
-        if(Gn.util.isString(child)){
-          Gn.util.append($depths, renderMenu(menu, '../../category/'+child+'/index.html', location.href.indexOf(child+'/') > -1));
+      Gn.util.each(menus, function (child, menu) {
+        if (Gn.util.isString(child)) {
+          Gn.util.append($depths, renderMenu(menu, '../../category/' + child + '/index.html', location.href.indexOf(child + '/') > -1));
         } else {
           var $_depth = renderMenu(menu, '');
           Gn.util.append($_depth, renderTree(child));
@@ -69,35 +75,35 @@
       return $depths;
     }
 
-    function renderMenu(name, link, isActive){
+    function renderMenu(name, link, isActive) {
       var $_menu;
-      if (link === ''){
+      if (link === '') {
         $_menu = Gn.util.$('<li>' + name + '</li>');
       } else {
-        var menuClass = isActive ? ' is-active' :''
-        $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item'+menuClass+'">' + name.split('(js)').join('') + '</a></div></li>');
+        var menuClass = isActive ? ' is-active' : '';
+        $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item' + menuClass + '">' + name.split('(js)').join('') + '</a></div></li>');
       }
-      if(name.indexOf('(js)') > 0){
+      if (name.indexOf('(js)') > 0) {
         Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
       }
       return $_menu;
     }
 
-    function setTree(categorys){
+    function setTree(categorys) {
       var menus = {};
 
-      categorys.forEach(function(category){
+      categorys.forEach(function (category) {
         parseTree(menus, category.split('/'), category);
       });
       return menus;
     }
 
-    function parseTree(parents, child, catgry){
+    function parseTree(parents, child, catgry) {
       var _depth = child.shift();
       if (parents[_depth] === undefined) {
-        parents[_depth] = {}
+        parents[_depth] = {};
       }
-      if(child.length === 1){
+      if (child.length === 1) {
         parents[_depth][child] = catgry;
       } else if (child.length > 1) {
         parseTree(parents[_depth], child, catgry);
@@ -108,23 +114,18 @@
   });
 </script>
 
-    <div class="aigis-contents">
-      <div class="aigis-contents__body">
-        
-          
-  <div>
-    <div class="aigis-module COLOR">
-      <h2 class="aigis-module__heading" id="COLOR">
-        COLOR
-      </h2>
-      <div class="aigis-module__filepath">
-        /scss/components/color.scss
-      </div>
-      <div class="aigis-tags">
-        
-      </div>
+      <div class="aigis-contents">
+        <div class="aigis-contents__body">
+           
+<div>
+  
+  <div class="aigis-module COLOR">
+    <h2 class="aigis-module__heading" id="COLOR">COLOR</h2>
+    <div class="aigis-module__filepath">/scss/components/color.scss</div>
+    <div class="aigis-tags">
       
-      <h3 id="-">색 시스템</h3>
+    </div>
+     <h3 id="-">색 시스템</h3>
 <ul>
 <li>주색 (Primary Color), 보조색 (Secondary Color), 단색 (Mono) 사용</li>
 <li>강조할 때(Accent)와 구분할 때 (Visual Hierarchy) 사용 - 이외의 색은 임의로 사용하지 않는다. 쫌</li>
@@ -141,18 +142,15 @@
   </div>
 </div>
 
-    </div>
   </div>
   
-  
-        
-        <footer class="aigis-footer">Last update at 2023/01/03 13:07</footer>
+</div>
+
+ 
+          <footer class="aigis-footer">Last update at 2024/04/15 13:52</footer>
+        </div>
       </div>
     </div>
-  </div>
-  <script src="../../assets/guide.js"></script>
-</body>
+    <script src="../../assets/guide.js"></script>
+  </body>
 </html>
-
-
-