Merge pull request #14 from vinibiavatti1/develop

Develop

CHANGELOG.md

@@ -0,0 +1,42 @@
+# TuiCss ChangeLog
+### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version
+
+#### 2.0.0
+- Jquery removed (Now use vanilla Javascript)
+- Chart example page
+- Readme update
+- Changelog markdown
+- Chart component
+- NPM Package
+
+#### 1.0.0
+- Utilities
+- Examples
+- DOS font
+- Wiki documentation
+- Button component
+- Checkbox component
+- Divider component
+- Dropdown component
+- Fieldset component
+- Input component
+- Navbar component
+- Panel component
+- Progressbar component
+- Radio component
+- Scrollbar component
+- Sidenav component
+- Statusbar component
+- Table component
+- Tablegrid component
+- Tabs component
+- Textarea component
+- Window component
+- Screen component
+- Datetime component
+- Shortcut component
+- Shadow component
+- Background component
+- Border component
+- Grid component
+- Modal component

CONTRIBUTING.md

@@ -0,0 +1 @@
+Click [here](https://github.com/vinibiavatti1/TuiCss/wiki/Contributing) to access the contributing page on the wiki!

README.md

@@ -1,9 +1,35 @@
-# TuiCss
-### Text-based user interface CSS library
+<p align="center">
+  <a href="https://github.com/vinibiavatti1/TuiCss">
+    <img src="https://raw.githubusercontent.com/vinibiavatti1/TuiCss/develop/resources/TUICSS%20Logo%20160x160%20transparent.png" />
+  </a>
+</p>
 
-TuiCss is a library focused to create web applications using an interface based in ASCII table, like MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used and the less effects of the elements. The main framework thats is following to develop TuiCss is <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision Framework</a> with some techniques with [box-drawing characters](https://en.wikipedia.org/wiki/Box-drawing_character), but some others frameworks were checked too, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to see some creations!
+<h3 align="center">TuiCss</h3>
 
-<img src="https://i.ibb.co/zhJMy1h/Tui-Css-home.png" width="600">
+<p align="center">
+  Text-based user interface CSS library
+  <br>
+  <a href="https://github.com/vinibiavatti1/TuiCss/wiki"><strong>-- Documentation --</strong></a>
+  <br><br>
+  <a href="https://badge.fury.io/js/tuicss">
+    <img src="https://badge.fury.io/js/tuicss.svg" alt="npm version badge"> 
+  </a>
+</p>
+
+### About
+
+TuiCss is a library focused to create web applications using an interface based on ASCII table, like the old MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used and because the reduced effects used on the components in the view. The base of this project is  <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision Framework</a>, but some other frameworks were checked also to introduce some features to TuiCss, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to stay on top of some creations, or check the getting started page to start use this library!
+
+<img src="https://raw.githubusercontent.com/vinibiavatti1/TuiCss/develop/resources/TUICSS%20Demo.png" width="676">
+
+### Getting Started
+To start to use the TuiCss in your project, you can just download the repository content and import the files that are in the dist folder with the html directives. On the other hand, you can install the package with NPM using the following command:
+
+```bash
+$ npm install tuicss
+```
+
+For more details, visit the [Getting Started Page](https://github.com/vinibiavatti1/TuiCss/wiki/Getting-Started) in the respoitory wiki.
 
 ### Documentation
-Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, getting started, components index, examples, styles, or to know how to contribute for this project.
+Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, components index, examples, styles, or to know how to contribute for this project.

dist/tuicss.css

@@ -745,7 +745,12 @@ input[type=button] {
   border: none;
   cursor: pointer;
   outline: 0;
-  padding: 2px; }
+  padding: 2px;
+  user-select: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none; }
   .tui-fieldset-button.left {
     right: initial;
     left: 16px !important; }
@@ -1201,7 +1206,8 @@ input[type=button] {
 .tui-screen-640-480,
 .tui-screen-800-600,
 .tui-screen-1024-768 {
-  position: relative; }
+  position: relative;
+  overflow: hidden; }
   .tui-screen-640-480.bordered,
   .tui-screen-800-600.bordered,
   .tui-screen-1024-768.bordered {
@@ -1925,3 +1931,104 @@ input[type=button] {
   display: none; }
   .tui-overlap.active {
     display: block !important; }
+
+/* Chart container */
+.tui-chart-vertical {
+  position: relative;
+  background-color: black; }
+
+.tui-chart-horizontal {
+  position: relative;
+  background-color: black; }
+
+/* Chart display */
+.tui-chart-vertical .tui-chart-display {
+  display: flex;
+  position: absolute;
+  top: 0px;
+  left: 50px;
+  right: 0px;
+  bottom: 30px;
+  align-items: flex-end;
+  border-bottom: 2px solid white;
+  border-left: 2px solid white; }
+  .tui-chart-vertical .tui-chart-display.no-x-axis {
+    bottom: 0px; }
+  .tui-chart-vertical .tui-chart-display.no-y-axis {
+    left: 0px; }
+
+.tui-chart-horizontal .tui-chart-display {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  top: 0px;
+  left: 50px;
+  right: 0px;
+  bottom: 30px;
+  align-items: stretch;
+  border-bottom: 2px solid white;
+  border-left: 2px solid white; }
+  .tui-chart-horizontal .tui-chart-display.no-x-axis {
+    bottom: 0px; }
+  .tui-chart-horizontal .tui-chart-display.no-y-axis {
+    left: 0px; }
+
+/* Chart X axis */
+.tui-chart-x-axis {
+  display: flex;
+  position: absolute;
+  height: 30px;
+  left: 50px;
+  right: 0px;
+  bottom: 0px;
+  line-height: 30px; }
+
+/* Chart Y axis */
+.tui-chart-y-axis {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  bottom: 30px;
+  width: 50px; }
+
+/* Chart legends */
+.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
+  flex: 0 1 100%;
+  text-align: center; }
+
+.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
+  flex: 1;
+  text-align: right;
+  padding-right: 2px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end; }
+
+.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
+  flex: 0 1 100%;
+  text-align: right; }
+
+.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
+  flex: 1;
+  text-align: right;
+  padding-right: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end; }
+
+/* Chart value */
+.tui-chart-vertical .tui-chart-display .tui-chart-value {
+  flex: 0 1 100%;
+  text-align: center;
+  overflow: hidden; }
+
+.tui-chart-horizontal .tui-chart-display .tui-chart-value {
+  flex: 1;
+  text-align: right;
+  display: flex;
+  align-items: center;
+  align-content: flex-start;
+  justify-content: flex-end;
+  overflow: hidden; }

examples/bios.html

@@ -24,22 +24,22 @@
                 <tbody>
                     <tr>
                         <td rowspan="2" width="60%" class="blue-168-text">
-                            <br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 135px" />
-                            <br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 135px" />
+                            <br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 150px" />
+                            <br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 150px" />
                             <br>
-                            <br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 135px" />]
-                            <br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 135px" />
+                            <br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 150px" />
+                            <br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 150px" />
                             <br>
-                            <br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
-                            <br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
-                            <br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 135px" />
-                            <br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
+                            <br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
+                            <br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
+                            <br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 150px" />
+                            <br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
                             <br>
-                            <br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 135px" />
+                            <br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 150px" />
                             <br>
-                            <br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 135px" />
-                            <br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 135px" />
-                            <br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 135px" />
+                            <br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 150px" />
+                            <br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 150px" />
+                            <br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 150px" />
                         </td>
                         <td width="40%" class="center">Item Specified Help</td>
                     </tr>

examples/chart.html

@@ -4,100 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <title>Chart Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
-    <style>
-        .tui-chart-vertical {
-            position: relative;
-            background-color: black;
-        }
-        .tui-chart-horizontal {
-            position: relative;
-            background-color: black;
-        }
-        .tui-chart-vertical .tui-chart-display {
-            display: flex;
-            position: absolute;
-            top: 0px;
-            left: 50px;
-            right: 0px;
-            bottom: 30px;
-            align-items: flex-end;
-            border-bottom: 2px solid white;
-            border-left: 2px solid white;
-        }
-        .tui-chart-horizontal .tui-chart-display {
-            display: flex;
-            position: absolute;
-            flex-direction: column;
-            top: 0px;
-            left: 50px;
-            right: 0px;
-            bottom: 30px;
-            align-items: stretch;
-            border-bottom: 2px solid white;
-            border-left: 2px solid white;
-        }
-        .tui-chart-x-axis {
-            display: flex;
-            position: absolute;
-            height: 30px;
-            left: 50px;
-            right: 0px;
-            bottom: 0px;
-            line-height: 30px;
-        }
-        .tui-chart-y-axis {
-            display: flex;
-            flex-direction: column;
-            position: absolute;
-            top: 0px;
-            left: 0px;
-            bottom: 30px;
-            width: 50px;
-        }
-
-        .tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
-            flex-basis: 100%;
-            text-align: center;
-        }
-        .tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
-            flex: 1;
-            text-align: right;
-            padding-right: 2px;
-            display: flex;
-            align-items: flex-start;
-            justify-content: flex-end;
-        }
-        .tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
-            flex-basis: 100%;
-            text-align: right;
-        }
-        .tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
-            flex: 1;
-            text-align: right;
-            padding-right: 2px;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-        }
-
-        .tui-chart-vertical .tui-chart-display .tui-chart-value {
-            margin: 0px 30px;
-            flex-basis: 100%;
-            text-align: center;
-        }
-        .tui-chart-horizontal .tui-chart-display .tui-chart-value {
-            margin: 5px 0px;
-            flex: 1;
-            text-align: right;
-            display: flex;
-            align-items: center;
-            align-content: flex-start;
-            justify-content: flex-end;
-        }
-    </style>
 </head>
 
 <body class="center">
@@ -105,23 +13,34 @@
 
     <div class="tui-window black-168 left-align">
         <fieldset class="tui-fieldset">
-            <legend class="">Vertical Bar Chart</legend>
+            <legend class="">Chart</legend>
             <div class="tui-chart-vertical" style="width: 500px; height: 200px;">
                 <div class="tui-chart-display">
-                    <div class="tui-chart-value red-168" style="height: 80%;">80%</div>
-                    <div class="tui-chart-value green-168" style="height: 60%;">60%</div>
-                    <div class="tui-chart-value blue-168" style="height: 100%;">100%</div>
+                    <div class="tui-chart-value red-168 animated" style="height: 80%;">80%</div>
+                    <div class="tui-chart-value green-168" style="height: 30%;">30%</div>
+                    <div class="tui-chart-value blue-168" style="height: 50%;">50%</div>
+                    <div class="tui-chart-value yellow-168" style="height: 90%;">90%</div>
+                    <div class="tui-chart-value purple-168" style="height: 60%;">60%</div>
+                    <div class="tui-chart-value orange-168" style="height: 100%;">100%</div>
+                    <div class="tui-chart-value cyan-168" style="height: 10%;">10%</div>
+                    <div class="tui-chart-value red-168" style="height: 75%;">75%</div>
                 </div>
                 <div class="tui-chart-y-axis">
                     <div class="tui-chart-legend">100%</div>
-                    <div class="tui-chart-legend">75%</div>
-                    <div class="tui-chart-legend">50%</div>
-                    <div class="tui-chart-legend">25%</div>
+                    <div class="tui-chart-legend">80%</div>
+                    <div class="tui-chart-legend">60%</div>
+                    <div class="tui-chart-legend">40%</div>
+                    <div class="tui-chart-legend">20%</div>
                 </div>
                 <div class="tui-chart-x-axis">
-                    <div class="tui-chart-legend">2018</div>
-                    <div class="tui-chart-legend">2019</div>
-                    <div class="tui-chart-legend">2020</div>
+                    <div class="tui-chart-legend">s1</div>
+                    <div class="tui-chart-legend">s2</div>
+                    <div class="tui-chart-legend">s3</div>
+                    <div class="tui-chart-legend">s4</div>
+                    <div class="tui-chart-legend">s5</div>
+                    <div class="tui-chart-legend">s6</div>
+                    <div class="tui-chart-legend">s7</div>
+                    <div class="tui-chart-legend">s8</div>
                 </div>
             </div>
         </fieldset>
@@ -151,5 +70,22 @@
             </div>
         </fieldset>
     </div>
+    <br><br>
+
+    <div class="tui-window black-168 left-align">
+        <fieldset class="tui-fieldset">
+            <legend class="">Chart (no axis legend)</legend>
+            <div class="tui-chart-vertical" style="width: 500px; height: 200px;">
+                <div class="tui-chart-display no-x-axis no-y-axis">
+                    <div class="tui-chart-value red-168 animated" style="height: 50%;">50%</div>
+                    <div class="tui-chart-value green-168" style="height: 70%;">70%</div>
+                    <div class="tui-chart-value blue-168" style="height: 30%;">30%</div>
+                    <div class="tui-chart-value yellow-168" style="height: 100%;">100%</div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+    <br><br>
+
 </body>
 </html>

examples/input.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>Inputs Example</title>
+    <title>Input Example</title>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
     <style>

examples/window-and-panels.html

@@ -156,8 +156,7 @@ int main()
                 About
             </div>
             <div class="tui-panel-content">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
-                Curabitur id vestibulum libero, id fermentum lorem.
+                TuiCss v2.0.0 Made with ♥
                 <br><br>
                 <div class="center">
                     <button class="tui-button white-255" style="width: 80px">OK</button>

gulpfile.js

@@ -1,4 +1,3 @@
-
 const { series, src, dest } = require('gulp');
 const sass = require('gulp-sass');
 const gulpClean = require('gulp-clean');
@@ -13,13 +12,14 @@ function clean() {
         .pipe(gulpClean());
 }
 
-// Compile scss
+// Compile scss and copy to dist folder (.css)
 function sassCompile() {
     return src('src/tuicss.scss')
         .pipe(sass())
         .pipe(dest(distPath));
 }
 
+// Minify css and copy to dist folder (.min.css)
 function minifyCss() {
     return src(distPath + '/tuicss.css')
         .pipe(cleanCss())
@@ -29,11 +29,13 @@ function minifyCss() {
         .pipe(dest(distPath));
 }
 
+// Copy js script to dist folder (.js)
 function copyScript() {
     return src('src/js/tuicss.js')
         .pipe(dest(distPath));
 }
 
+// Minify js script and copy to dist folder (.min.js)
 function minifyJs() {
     return src(distPath + '/tuicss.js')
         .pipe(gulpMinify({
@@ -44,16 +46,19 @@ function minifyJs() {
         .pipe(dest(distPath));
 }
 
+// Copy images to dist folder (/images)
 function copyImages() {
     return src('src/images/*')
         .pipe(dest(distPath + "/images"));
 }
 
+// Copy fonts to dist folder (/fonts)
 function copyFonts() {
     return src('src/fonts/*')
         .pipe(dest(distPath + "/fonts"));
 }
 
+// Export
 exports.default = series(clean, sassCompile, minifyCss, copyScript, minifyJs, copyImages, copyFonts);
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "tuicss",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,12 +1,18 @@
 {
   "name": "tuicss",
-  "version": "1.0.0",
-  "description": "TuiCss is a framework made to develop text-based user interface applications (TUI)",
+  "version": "2.0.1",
+  "description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style",
   "keywords": [
-    "TUI",
-    "Text based user interface",
-    "Turbo vision",
-    "TuiCss"
+    "tui",
+    "text based user interface",
+    "frontend",
+    "css",
+    "frameword",
+    "turbo vision",
+    "tuicss",
+    "ncurses",
+    "msdos",
+    "ascii"
   ],
   "main": "dist/tuicss.min.css",
   "scripts": {
@@ -28,7 +34,7 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-copy": "^4.0.1",
     "gulp-minify": "^3.1.0",
-    "gulp-rename": "^1.4.0",
+    "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.1.0"
   }
 }

src/components/chart.scss

@@ -19,6 +19,13 @@
     align-items: flex-end;
     border-bottom: 2px solid white;
     border-left: 2px solid white;
+
+    &.no-x-axis {
+        bottom: 0px;
+    }
+    &.no-y-axis {
+        left: 0px;
+    }
 }
 .tui-chart-horizontal .tui-chart-display {
     display: flex;
@@ -31,6 +38,13 @@
     align-items: stretch;
     border-bottom: 2px solid white;
     border-left: 2px solid white;
+
+    &.no-x-axis {
+        bottom: 0px;
+    }
+    &.no-y-axis {
+        left: 0px;
+    }
 }
 
 /* Chart X axis */
@@ -57,7 +71,7 @@
 
 /* Chart legends */
 .tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
-    flex-basis: 100%;
+    flex: 0 1 100%;
     text-align: center;
 }
 .tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
@@ -69,7 +83,7 @@
     justify-content: flex-end;
 }
 .tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
-    flex-basis: 100%;
+    flex: 0 1 100%;
     text-align: right;
 }
 .tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
@@ -83,16 +97,16 @@
 
 /* Chart value */
 .tui-chart-vertical .tui-chart-display .tui-chart-value {
-    margin: 0px 30px;
-    flex-basis: 100%;
+    flex: 0 1 100%;
     text-align: center;
+    overflow: hidden;
 }
 .tui-chart-horizontal .tui-chart-display .tui-chart-value {
-    margin: 5px 0px;
     flex: 1;
     text-align: right;
     display: flex;
     align-items: center;
     align-content: flex-start;
     justify-content: flex-end;
+    overflow: hidden;
 }

src/components/screen.scss

@@ -15,6 +15,7 @@
 .tui-screen-800-600,
 .tui-screen-1024-768 {
     position: relative;
+    overflow: hidden;
     &.bordered{
         border: 2px solid black;
     }