2.1.2

Fix DateTime day

dist/tuicss.js

@@ -115,19 +115,21 @@ function datetimeController() {
             let format = clock.getAttribute('data-format');
 
             // parse out the date and time into constants.
-            const today  = new Date();
+            const today     = new Date();
-            const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
+            const month     = (today.getMonth() + 1).toString().padStart(2, '0');
-            const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
+            const day       = today.getDate().toString().padStart(2, '0');
-            const year   = today.getFullYear() + '';
+            const dayOfWeek = (today.getDay() + 1).toString().padStart(2, '0');
-            const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
+            const year      = today.getFullYear().toString();
-            const hour12 = (parseInt(hour) + 24) % '12' || '12';
+            const hour      = today.getHours().toString().padStart(2, '0');
-            const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
+            const hour12    = (parseInt(hour) + 24) % '12' || '12';
-            const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
+            const minute    = today.getMinutes().toString().padStart(2, '0');
-            const ampm   = parseInt(hour) >= 12 ? 'PM' : 'AM';
+            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": "^5.1.0"
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.62.1"
   }
 }

src/js/tuicss.js

@@ -115,19 +115,21 @@ function datetimeController() {
             let format = clock.getAttribute('data-format');
 
             // parse out the date and time into constants.
-            const today  = new Date();
+            const today     = new Date();
-            const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
+            const month     = (today.getMonth() + 1).toString().padStart(2, '0');
-            const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
+            const day       = today.getDate().toString().padStart(2, '0');
-            const year   = today.getFullYear() + '';
+            const dayOfWeek = (today.getDay() + 1).toString().padStart(2, '0');
-            const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
+            const year      = today.getFullYear().toString();
-            const hour12 = (parseInt(hour) + 24) % '12' || '12';
+            const hour      = today.getHours().toString().padStart(2, '0');
-            const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
+            const hour12    = (parseInt(hour) + 24) % '12' || '12';
-            const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
+            const minute    = today.getMinutes().toString().padStart(2, '0');
-            const ampm   = parseInt(hour) >= 12 ? 'PM' : 'AM';
+            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);