Border radius fix, forecast example, disabled classes, tabs example, buttons example

dist/tuicss.css

@@ -587,6 +587,9 @@ input, select, textarea {
 .no-padding {
   padding: 0px !important; }
 
+.no-border {
+  border: none !important; }
+
 .content {
   padding: 12px; }
 
@@ -603,6 +606,9 @@ input, select, textarea {
 .cursor-default {
   cursor: default !important; }
 
+.disabled {
+  cursor: not-allowed !important; }
+
 /* Components */
 .tui-button {
   display: inline-block;
@@ -614,11 +620,14 @@ input, select, textarea {
   cursor: pointer;
   text-align: center;
   box-shadow: 10px 10px black;
+  border-radius: 0px;
   user-select: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none; }
+  .tui-button.disabled {
+    text-decoration: line-through; }
 
 .tui-button:active {
   background-color: #00a8a8 !important;
@@ -648,13 +657,16 @@ input[type=button] {
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none; }
+  .tui-checkbox.disabled {
+    color: #a8a8a8; }
 
 .tui-checkbox input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   top: 0px;
-  left: 0px; }
+  left: 0px;
+  pointer-events: none; }
 
 .tui-checkbox span {
   position: absolute;
@@ -787,7 +799,10 @@ input[type=button] {
   color: white;
   outline: 0;
   border: none;
-  padding: 1px; }
+  border-radius: 0px; }
+  .tui-input.disabled {
+    background-color: #a8a8a8;
+    color: black; }
 
 .tui-input:focus {
   background-color: yellow !important;
@@ -888,13 +903,16 @@ input[type=button] {
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none; }
+  .tui-radio.disabled {
+    color: #a8a8a8; }
 
 .tui-radio input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   top: 0px;
-  left: 0px; }
+  left: 0px;
+  pointer-events: none; }
 
 .tui-radio span {
   position: absolute;
@@ -1172,6 +1190,8 @@ input[type=button] {
   .tui-tab.active {
     background-color: #a8a8a8;
     color: #0000a8; }
+  .tui-tab.disabled {
+    text-decoration: line-through; }
 
 .tui-tab-content {
   display: none; }
@@ -1182,6 +1202,9 @@ input[type=button] {
   padding: 0px;
   color: yellow;
   outline: none; }
+  .tui-textarea.disabled {
+    background-color: #a8a8a8;
+    color: black; }
 
 .tui-window {
   background-color: #0000a8;

dist/tuicss.js

@@ -30,6 +30,12 @@ function tabsController() {
     for (const tab of tabs) {
         // Add click listeners to them.
         tab.addEventListener('click', function (e) {
+
+            // Check if the clicked tab is disabled
+            if(e.target.classList.contains("disabled")) {
+                return;
+            }
+
             // Remove the 'active' class from any and all tabs.
             for (const otherTab of tabs) {
                 otherTab.classList.remove('active');

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){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){const t=setInterval(()=>{if(null===e)return void clearInterval(t);let o=e.getAttribute("data-format");const n=new Date,a=2===(n.getMonth()+"").length?n.getMonth()+1:"0"+(n.getMonth()+1),s=2===(n.getDay()+"").length?n.getDay()+1:"0"+(n.getDay()+1),c=n.getFullYear()+"",l=2===(n.getHours()+"").length?n.getHours():"0"+n.getHours(),i=(parseInt(l)+24)%"12"||"12",r=2===(n.getMinutes()+"").length?n.getMinutes():"0"+n.getMinutes(),d=2===(n.getSeconds()+"").length?n.getSeconds():"0"+n.getSeconds(),u=parseInt(l)>=12?"PM":"AM";o=(o=(o=(o=(o=(o=(o=(o=o.replace("M",a)).replace("d",s)).replace("y",c)).replace("H",l)).replace("h",i)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=o})}}t.length&&(e(),setInterval(e,1e3))}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){const t=setInterval(()=>{if(null===e)return void clearInterval(t);let o=e.getAttribute("data-format");const n=new Date,a=2===(n.getMonth()+"").length?n.getMonth()+1:"0"+(n.getMonth()+1),s=2===(n.getDay()+"").length?n.getDay()+1:"0"+(n.getDay()+1),c=n.getFullYear()+"",l=2===(n.getHours()+"").length?n.getHours():"0"+n.getHours(),i=(parseInt(l)+24)%"12"||"12",r=2===(n.getMinutes()+"").length?n.getMinutes():"0"+n.getMinutes(),d=2===(n.getSeconds()+"").length?n.getSeconds():"0"+n.getSeconds(),u=parseInt(l)>=12?"PM":"AM";o=(o=(o=(o=(o=(o=(o=(o=o.replace("M",a)).replace("d",s)).replace("y",c)).replace("H",l)).replace("h",i)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=o})}}t.length&&(e(),setInterval(e,1e3))}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()});