2.1.2

Fix DateTime day

.github/ISSUE_TEMPLATE/showcase-proposal.md

@@ -0,0 +1,39 @@
+---
+name: Showcase Proposal
+about: Proposal to publish a new content into wiki's Showcase page.
+title: Proposal of showcase project - PROJECT_NAME
+labels: showcase
+assignees: ''
+
+---
+
+> Showcase proposal template
+> Note: "*" fields are mandatory.
+
+> Project Name: The name of the project that will be used as title of the section of the showcase. 
+
+Project Name *: 
+
+> Project Description: The description of the project that will be used as a paragraph after the title of the showcase.
+
+Project Description *: 
+
+> Project Author: The author of the project that will be informed after the project description. (Keep if blank to don't show the author)
+
+Project Author: 
+
+> Project Links: Links to access the project showcase. These links will be shown after project description.
+
+Project Links: 
+
+> Project Images: Images of the project (can be the images with legends, or the links to it).
+
+Project Images *:
+
+> Additional Information: Other relevant information.
+
+Additional Information: 
+
+> Feedback: If you want to give a feedback to the project, or a suggestion, please, enjoy this field!
+
+Feedback:

.github/ISSUE_TEMPLATE/showcase-removal.md

@@ -0,0 +1,19 @@
+---
+name: Showcase Removal
+about: Remove a published content from wiki's Showcase page.
+title: Removal of showcase project - PROJECT_NAME
+labels: showcase
+assignees: ''
+
+---
+
+> Remove showcase project template
+> "*" fields are mandatory.
+
+> Project Name: The name of the project to be removed from showcase page. 
+
+Project Name *:
+
+> Reason: The reason for removal
+
+Reason *:

README.md

@@ -10,6 +10,8 @@
   Text-based user interface CSS library
   <br>
   <a href="https://github.com/vinibiavatti1/TuiCss/wiki"><strong>-- Documentation --</strong></a>
+  <br>
+  <a href="https://github.com/vinibiavatti1/TuiCss/wiki/Showcase"><strong>-- Showcase --</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"> 
@@ -18,18 +20,18 @@
 
 ### 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!
+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 legible 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 also checked 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 using 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:
+To start to use 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. Alternatively, 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.
+For more details, visit the [Getting Started Page](https://github.com/vinibiavatti1/TuiCss/wiki/Getting-Started) in the repository wiki.
 
 ### Documentation
-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.
+Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, components index, examples, styles, or to know how to contribute to this project.

dist/tuicss.js

@@ -116,18 +116,20 @@ function datetimeController() {
 
             // parse out the date and time into constants.
             const today     = new Date();
-            const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
-            const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
-            const year   = today.getFullYear() + '';
-            const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
+            const month     = (today.getMonth() + 1).toString().padStart(2, '0');
+            const day       = today.getDate().toString().padStart(2, '0');
+            const dayOfWeek = (today.getDay() + 1).toString().padStart(2, '0');
+            const year      = today.getFullYear().toString();
+            const hour      = today.getHours().toString().padStart(2, '0');
             const hour12    = (parseInt(hour) + 24) % '12' || '12';
-            const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
-            const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
+            const minute    = today.getMinutes().toString().padStart(2, '0');
+            const second    = today.getSeconds().toString().padStart(2, '0');
             const ampm      = parseInt(hour) >= 12 ? 'PM' : 'AM';
 
             // Replace based on the format.
             format = format.replace('M', month);
             format = format.replace('d', day);
+            format = format.replace('e', dayOfWeek);
             format = format.replace('y', year);
             format = format.replace('H', hour);
             format = format.replace('h', hour12);

dist/tuicss.min.js

@@ -1 +1 @@
-function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){if(null===e)continue;let t=e.getAttribute("data-format");const o=new Date,n=2===(o.getMonth()+"").length?o.getMonth()+1:"0"+(o.getMonth()+1),a=2===(o.getDay()+"").length?o.getDay()+1:"0"+(o.getDay()+1),s=o.getFullYear()+"",c=2===(o.getHours()+"").length?o.getHours():"0"+o.getHours(),l=(parseInt(c)+24)%"12"||"12",i=2===(o.getMinutes()+"").length?o.getMinutes():"0"+o.getMinutes(),d=2===(o.getSeconds()+"").length?o.getSeconds():"0"+o.getSeconds(),r=parseInt(c)>=12?"PM":"AM";t=(t=(t=(t=(t=(t=(t=(t=t.replace("M",n)).replace("d",a)).replace("y",s)).replace("H",c)).replace("h",l)).replace("m",i)).replace("s",d)).replace("a",r),e.innerHTML=t}}t.length&&(e(),setTimeout(()=>{setInterval(e,1e3)},1e3-(new Date).getMilliseconds()))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});
+function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){if(null===e)continue;let t=e.getAttribute("data-format");const o=new Date,n=(o.getMonth()+1).toString().padStart(2,"0"),a=o.getDate().toString().padStart(2,"0"),c=(o.getDay()+1).toString().padStart(2,"0"),s=o.getFullYear().toString(),i=o.getHours().toString().padStart(2,"0"),l=(parseInt(i)+24)%"12"||"12",r=o.getMinutes().toString().padStart(2,"0"),d=o.getSeconds().toString().padStart(2,"0"),u=parseInt(i)>=12?"PM":"AM";t=(t=(t=(t=(t=(t=(t=(t=(t=t.replace("M",n)).replace("d",a)).replace("e",c)).replace("y",s)).replace("H",i)).replace("h",l)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=t}}t.length&&(e(),setTimeout(()=>{setInterval(e,1e3)},1e3-(new Date).getMilliseconds()))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});

gulpfile.js

@@ -1,5 +1,6 @@
 const { series, src, dest } = require('gulp');
-const sass = require('gulp-sass');
+// const sass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
 const gulpClean = require('gulp-clean');
 const gulpMinify = require('gulp-minify');
 const cleanCss = require('gulp-clean-css');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuicss",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style",
   "keywords": [
     "tui",
@@ -35,6 +35,7 @@
     "gulp-copy": "^4.0.1",
     "gulp-minify": "^3.1.0",
     "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.1.0"
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.62.1"
   }
 }

src/js/tuicss.js

@@ -116,18 +116,20 @@ function datetimeController() {
 
             // parse out the date and time into constants.
             const today     = new Date();
-            const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
-            const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
-            const year   = today.getFullYear() + '';
-            const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
+            const month     = (today.getMonth() + 1).toString().padStart(2, '0');
+            const day       = today.getDate().toString().padStart(2, '0');
+            const dayOfWeek = (today.getDay() + 1).toString().padStart(2, '0');
+            const year      = today.getFullYear().toString();
+            const hour      = today.getHours().toString().padStart(2, '0');
             const hour12    = (parseInt(hour) + 24) % '12' || '12';
-            const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
-            const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
+            const minute    = today.getMinutes().toString().padStart(2, '0');
+            const second    = today.getSeconds().toString().padStart(2, '0');
             const ampm      = parseInt(hour) >= 12 ? 'PM' : 'AM';
 
             // Replace based on the format.
             format = format.replace('M', month);
             format = format.replace('d', day);
+            format = format.replace('e', dayOfWeek);
             format = format.replace('y', year);
             format = format.replace('H', hour);
             format = format.replace('h', hour12);