gnui 1.2.0 → 1.2.13

package/styleguide/assets/theme.css

@@ -1,564 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
-
-/*
----
-name: Paragraph
-category: body
----
-
-```html
-<p>
-The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
-</p>
-```
-
-*/
-
-/*
----
-name: Heading
-category: body
----
-
-```html
-<h1>Heading1</h1>
-<h2>Heading2</h2>
-<h3>Heading3</h3>
-<h4>Heading4</h4>
-<h5>Heading5</h5>
-<h6>Heading6</h6>
-```
-
-*/
-
-/*
----
-name: Header
-category: layout/header
-tag:
-  - deprecated
----
-
-```html
-<header class="aigis-header">
-  <a href="#">Styleguide</a>
-</header>
-```
-
-*/
-.aigis-header {
-  position: fixed;
-  top: 0;
-  padding: 10px 30px;
-  width: 100%;
-  height: 50px;
-  background-color: #486491;
-  z-index: 10000;
-}
-.aigis-header span a {
-  color: #fff;
-  font-size: 2.6em;
-  font-family: 'Noto Sans KR', 'Nanum Gothic';
-  text-decoration: none;
-  line-height: 110%;
-}
-.aigis-header div {
-  float: right;
-}
-
-/*
----
-name: Footer
-category: layout/footer
-tag: latest
----
-
-```html
-<footer class="aigis-footer">Last update at 2016/03/23 20:48</footer>
-```
-
-*/
-.aigis-footer {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  margin-top: 2rem;
-  line-height: 1.75;
-  /* color: #7a7a7a; */
-  border-top: 1px solid #eee;
-  text-align: center;
-  font-size: 16px;
-}
-
-/*
----
-name: Preview
-category: body
-tag: latest
----
-
-```html
-<div class="aigis-preview">
-  <a class="ex-ag-btn">Button</a>
-  <button class="ex-ag-btn ex-ag-btn--primary">Button</button>
-</div>
-```
-
-*/
-.aigis-codeblock,
-.aigis-preview {
-  position: relative;
-  margin: 0;
-  overflow: visible;
-  /* background: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAF0lEQVR4AWP4DwVvoWCgBGAMmMQACQAAuK72AWHjK4wAAAAASUVORK5CYII=' ); */
-}
-.aigis-preview::before {
-  content: 'preview';
-  position: absolute;
-  right: 0;
-  top: 0;
-  font-size: 10px;
-  padding: 2px 4px 2px 5px;
-  border-bottom-left-radius: 3px;
-  color: #fff;
-  background: #181818;
-}
-.aigis-preview::after {
-  content: '';
-  clear: both;
-  display: block;
-}
-
-.ex-ag-btn {
-  -webkit-appearance: none;
-  display: inline-block;
-  border: none;
-  background-color: #3db680;
-  color: #fff;
-  padding: 10px 20px;
-  text-align: center;
-  line-height: 40px;
-  min-width: 200px;
-  font-size: 20px;
-  box-sizing: border-box;
-}
-.ex-ag-btn--primary {
-  color: black;
-  background-color: #ffea3a;
-}
-
-/*
----
-name: Codeblock
-category: body
-tag: latest
----
-
-```html
-<pre><code class="lang-html"><pre class="editor editor-colors"><div class="line"><span class="text html gohtml"><span class="meta tag block any html"><span class="punctuation definition tag begin html"><span>&lt;</span></span><span class="entity name tag block any html"><span>div</span></span><span>&nbsp;</span><span class="entity other attribute-name html"><span>class</span></span><span>=</span><span class="string quoted double html"><span class="punctuation definition string begin html"><span>"</span></span><span>aigis-header</span><span class="punctuation definition string end html"><span>"</span></span></span><span class="punctuation definition tag end html"><span>&gt;</span></span></span></span></div><div class="line"><span class="text html gohtml"><span>&nbsp;&nbsp;hoge</span></span></div><div class="line"><span class="text html gohtml"><span class="meta tag block any html"><span class="punctuation definition tag begin html"><span>&lt;/</span></span><span class="entity name tag block any html"><span>div</span></span><span class="punctuation definition tag end html"><span>&gt;</span></span></span></span></div></pre>
-</code></pre>
-```
-
-*/
-.aigis-module pre:not([aria-hidden='true']) {
-  background-color: #272822;
-  color: #f8f8f2;
-  font-size: 14px;
-  position: relative;
-  padding: 0.5em;
-  border-radius: 3px;
-  margin: 0 auto 3em;
-  border: 1px solid #a0a0a0;
-  max-height: 300px;
-  overflow: auto;
-}
-.aigis-module pre + pre {
-  margin-top: -3em;
-  margin-bottom: 3em;
-}
-.aigis-module > ul:not([class]) {
-  list-style: disc;
-  margin: 10px 30px;
-}
-
-.aigis-preview {
-  border: 1px solid #a0a0a0;
-  border-radius: 3px;
-  border-radius: 3px 3px 0 0;
-  padding: 20px 10px;
-  padding: 16px;
-  margin: 0;
-  margin-top: 10px;
-}
-.aigis-preview p + p {
-  margin-top: 10px;
-}
-.aigis-preview + pre {
-  position: relative;
-  border-radius: 0 0 3px 3px;
-  border-top: none;
-  margin-top: 0;
-  height: auto;
-  overflow-x: auto;
-}
-.aigis-module.Chart .aigis-preview {
-  display: block;
-}
-.aigis-module.Chart .aigis-preview > div,
-.aigis-module.Chart table,
-.aigis-module.Chart table + 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;
-}
-/*
----
-name: Sidemenu
-category: layout/sidemenu
-tag: latest
----
-
-```html
-<div class="aigis-sidemenu">
-  <header class="aigis-header">
-    <a href="../../index.html">Styleguide</a>
-  </header>
-  <h2 class="aigis-sidemenu__heading">Category</h2>
-  <nav class="aigis-categoryList">
-
-  </nav>
-  <h2 class="aigis-sidemenu__heading">Tag</h2>
-  <nav class="aigis-tags aigis-tagList">
-
-  </nav>
-  <h2 class="aigis-sidemenu__heading"><a href="../../color.html">All Colors</a></h2>
-</div>
-```
-
-*/
-.aigis-sidemenu {
-  position: fixed;
-  top: 50px;
-  bottom: 0;
-  left: 0;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  width: 280px;
-  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;
-}
-.aigis-sidemenu__heading {
-  font-size: 30px;
-  margin: 12px 0;
-  color: #33331a;
-  font-weight: normal;
-  padding-left: 10px;
-  line-height: 1em;
-}
-.aigis-sidemenu__heading a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.aigis-preview .aigis-sidemenu {
-  position: relative;
-}
-
-/*
----
-name: Category list
-category: layout/sidemenu
-tag: latest
----
-
-```html
-<h2 class="aigis-sidemenu__heading">Category</h2>
-<nav class="aigis-categoryList">
-  <ul data-path-depth="0">
-    <li data-path-depth="0">body</li>
-    <li data-path-depth="0"><a href="#">layout</a>
-      <ul data-path-depth="1">
-        <li data-path-depth="1"><a href="#">sidemenu</a></li>
-      </ul>
-    </li>
-  </ul>
-</nav>
-```
-
-*/
-.aigis-categoryList ul li {
-  padding: 3px 10px;
-  font-size: 14px;
-  list-style: none;
-}
-
-.aigis-categoryList li a {
-  display: block;
-  position: relative;
-  padding: 3px 10px 3px 10px;
-  color: #454545;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  border-radius: 0px;
-  outline: none;
-  text-decoration: none;
-}
-
-.aigis-categoryList li:hover a[href]:hover {
-  text-decoration: underline;
-  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;
-}
-.aigis-categoryList li[data-path-depth] [data-tree-current],
-.aigis-categoryList .current > a {
-  background-color: #d2d2d2;
-  color: #004ba9 !important;
-  text-decoration: none !important;
-}
-
-/*
----
-name: Tag list
-category: layout/sidemenu
-tag: latest
----
-
-```html
-<nav class="aigis-tags aigis-tagList">
-  <a class="aigis-tags__item aigis-tags__item--deprecated" href="#">deprecated</a>
-  <a class="aigis-tags__item aigis-tags__item--latest" href="#">latest</a>
-</nav>
-```
-
-*/
-.aigis-tags {
-  padding: 10px;
-  padding-left: 0;
-  margin: 0;
-}
-/*
----
-name: Module list
-category: body
-tag: latest
----
-
-```html
-<nav>
-  <h2 class="aigis-module__heading">Modules</h2>
-  <ul class="aigis-moduleList">
-    <li class="aigis-moduleList__item">
-      <a href="#header">header</a>
-    </li>
-    <li class="aigis-moduleList__item">
-      <a href="#sidemenu">sidemenu</a>
-    </li>
-    <li class="aigis-moduleList__item">
-      <a href="#category list">category list</a>
-    </li>
-    <li class="aigis-moduleList__item">
-      <a href="#tags">tags</a>
-    </li>
-  </ul>
-</nav>
-```
-
-*/
-.aigis-moduleList {
-  line-height: 1.6;
-  font-size: 16px;
-}
-.aigis-moduleList__item a {
-  color: #08f;
-  text-decoration: none;
-}
-.aigis-moduleList__item a:hover {
-  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;
-}
-.aigis-module__heading:hover a {
-  position: relative;
-}
-.aigis-module__heading:hover a:before {
-  content: '\00a7';
-  position: absolute;
-  right: 100%;
-  bottom: 5px;
-  font-size: 20px;
-  color: #000;
-  padding-right: 5px;
-  padding-left: 5px;
-}
-
-/*
----
-name: File path
-category: body
----
-
-```html
-<div class="aigis-module__filepath">
-  /aigis_assets/css/theme.css
-</div>
-```
-
-*/
-
-.aigis-module__filepath {
-  display: block;
-  text-align: right;
-  font-size: 12px;
-  color: #adadad;
-}
-
-/*
----
-name: Color palette
-category: layout/special
-tag: special
----
-
-```html
-<div class="aigis-contents__body">
-  <h2 class="aigis-module__heading">colors</h2>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #428b1c;"></div><div class="aigis-colorPalette__label">#428b1c</div></div>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #55b5db;"></div><div class="aigis-colorPalette__label">#55b5db</div></div>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #5B594B;"></div><div class="aigis-colorPalette__label">#5B594B</div></div>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #6272a4;"></div><div class="aigis-colorPalette__label">#6272a4</div></div>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #666;"></div><div class="aigis-colorPalette__label">#666</div></div>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #66d9ef;"></div><div class="aigis-colorPalette__label">#66d9ef</div></div>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #66D9EF;"></div><div class="aigis-colorPalette__label">#66D9EF</div></div>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #6be5fd;"></div><div class="aigis-colorPalette__label">#6be5fd</div></div>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #728fcb;"></div><div class="aigis-colorPalette__label">#728fcb</div></div>
-  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #75715E;"></div><div class="aigis-colorPalette__label">#75715E</div></div>
-</div>
-```
-
-*/
-.aigis-colorPalette {
-  margin-top: 5px;
-}
-.aigis-colorPalette__color {
-  display: inline-block;
-  vertical-align: middle;
-  height: 40px;
-  width: 50%;
-  margin-right: 5px;
-}
-.aigis-colorPalette__label {
-  display: inline-block;
-  vertical-align: middle;
-  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;
-}
-
-.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;
-}
-
-.aigis-container {
-  box-sizing: border-box;
-  width: auto;
-  min-width: 960px;
-  margin-right: auto;
-}
-.aigis-container:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.aigis-contents {
-  box-sizing: border-box;
-  padding-right: 10px;
-  padding-left: 280px;
-  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;
-}
-.aigis-contents__body > p {
-  margin-bottom: 1em;
-}
-
-/*
-main
-*/
-.aigis-main-page {
-  padding: 10px;
-}
-
-/*
-components 
-*/
-.aigis-contents .type-checkbox {
-  height: 215px;
-}

package/styleguide/category/COLOR/index.html

@@ -1,156 +0,0 @@
-<!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" />
-    <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: 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="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/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) {
-      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));
-        } else {
-          var $_depth = renderMenu(menu, '');
-          Gn.util.append($_depth, renderTree(child));
-          Gn.util.append($depths, $_depth);
-        }
-      });
-      return $depths;
-    }
-
-    function renderMenu(name, link, isActive) {
-      var $_menu;
-      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>');
-      }
-      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) {
-      var menus = {};
-
-      categorys.forEach(function (category) {
-        parseTree(menus, category.split('/'), category);
-      });
-      return menus;
-    }
-
-    function parseTree(parents, child, catgry) {
-      var _depth = child.shift();
-      if (parents[_depth] === undefined) {
-        parents[_depth] = {};
-      }
-      if (child.length === 1) {
-        parents[_depth][child] = catgry;
-      } else if (child.length > 1) {
-        parseTree(parents[_depth], child, catgry);
-      } else {
-        parents[_depth] = catgry;
-      }
-    }
-  });
-</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>
-     <h3 id="-">색 시스템</h3>
-<ul>
-<li>주색 (Primary Color), 보조색 (Secondary Color), 단색 (Mono) 사용</li>
-<li>강조할 때(Accent)와 구분할 때 (Visual Hierarchy) 사용 - 이외의 색은 임의로 사용하지 않는다. 쫌</li>
-</ul>
-<div class="gn-box">
-  <div class="gn-gcolor is-primary">
-    주색 (is-primary)
-  </div>
-  <div class="gn-gcolor is-secondary">
-    보조색 (is-secondary)
-  </div>
-  <div class="gn-gcolor is-mono">
-    단색 (is-mono)
-  </div>
-</div>
-
-  </div>
-  
-</div>
-
- 
-          <footer class="aigis-footer">Last update at 2024/04/15 13:52</footer>
-        </div>
-      </div>
-    </div>
-    <script src="../../assets/guide.js"></script>
-  </body>
-</html>