Removed Jquery from example pages

#7  Convert to vanilla JS (ES6+). No more jQuery.

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.idea

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Vinicius Reif Biavatti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,7 +1,7 @@
 # TuiCss
-### Text-based user interface CSS framework
+### Text-based user interface CSS library
 
-TuiCss is a framework 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!
+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!
 
 <img src="https://i.ibb.co/zhJMy1h/Tui-Css-home.png" width="600">
 

dist/tuicss.js

@@ -1,78 +1,167 @@
 /**
- * Init
+ * Replacement for jQuery's $(document).ready() function.
+ * This is handy in making sure stuff fires after the DOM is ready to be touched.
+ * Stolen from:https://stackoverflow.com/a/53601942/344028
+ *
+ * @param fn Callback.
  */
-$(document).ready(function() {
+function domReady(fn) {
-    tabsController();
+    // If we're early to the party
-    datetimeController();
+    document.addEventListener('DOMContentLoaded', fn);
-    sidenavController();
+
-    modalController();
+    // If late; I mean on time.
-});
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        fn();
+    }
+}
 
 /**
  * TuiTabs controller
  */
 function tabsController() {
-    $(".tui-tab").click(function(event) {
+    // Get all the tab elements (typically li tags).
-        $(".tui-tab-content").hide();
+    const tabs = document.getElementsByClassName('tui-tab');
-        let tabContentid = $(this).attr('data-tab-content');
+
-        $(`#${tabContentid}`).show();
+    if (!tabs.length) {
-        $(".tui-tab").removeClass("active");
+        // No tabs found, return early and save a couple CPU cycles.
-        $(this).addClass("active");
+        return;
-    });
+    }
-    $('.tui-tab.active').click();
+
+    for (const tab of tabs) {
+        // Add click listeners to them.
+        tab.addEventListener('click', function (e) {
+            // Remove the 'active' class from any and all tabs.
+            for (const otherTab of tabs) {
+                otherTab.classList.remove('active');
+            }
+
+            // Get the content element.
+            const tabContents = document.getElementsByClassName('tui-tab-content');
+
+            if (tabContents) {
+                for (const tabContent of tabContents) {
+                    // Hide all tab contents.
+                    tabContent.style.display = 'none';
+                }
+            } else {
+                throw 'No tab content elements found.'
+            }
+
+            // Get the id of the tab contents we want to show.
+            const tabContentId = e.target.getAttribute('data-tab-content');
+
+            if (tabContentId) {
+                const tabContent = document.getElementById(tabContentId);
+                if (tabContent) {
+                    // Show the tab contents.
+                    tabContent.style.display = 'block';
+                } else {
+                    throw 'No tab content element with id "' + tabContentId + '" found.';
+                }
+            }
+            // We are not going to throw an error here, since we could make the tab do something else that a tab
+            // normally wouldn't do.
+
+            // Set the clicked tab to have the 'active' class so we can use it in the next part.
+            e.target.classList.add('active');
+
+        });
+    }
+
+    // Grab the first tab with the active class.
+    const activeTab = document.querySelector('.tui-tab.active');
+    if (activeTab) {
+        // Now click it 'click' it.
+        activeTab.click();
+    } else {
+        // Nothing found, just click the first tab foud.
+        tabs[0].click()
+    }
 }
 
 /**
- * Date field controller
+ * Date/time field controller
  */
 function datetimeController() {
+    // Get date/time elements.
+    const clocks = document.getElementsByClassName('tui-datetime');
 
-    if(!$(".tui-datetime").length) return;
+    if (!clocks.length) {
+        // No date time elements found, return early and save a couple CPU cycles.
+        return;
+    }
 
+    // Kick off our clock interval stuff.
     datetimeInterval();
     setInterval(datetimeInterval, 1000);
 
     function datetimeInterval() {
-        let today = new Date();
+        for (const clock of clocks) {
+            // Set the interval.
+            const interval = setInterval(() => {
+                // Technically we should have already returned earlier in the code, but to be on the safe side.
+                if (clock === null) {
+                    clearInterval(interval);
+                    return;
+                }
 
-        $(".tui-datetime").each(function() {
+                // Get the format we want to display in the element.
-            let clock = $(this);
+                let format = clock.getAttribute('data-format');
-            
-            let format = clock.attr("data-format");
 
-            let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
+                // parse out the date and time into constants.
-            let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
+                const today  = new Date();
-            let year = today.getFullYear();
+                const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
-            let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
+                const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
-            let hour12 = (parseInt(hour) + 24) % 12 || 12;
+                const year   = today.getFullYear() + '';
-            let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
+                const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
-            let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
+                const hour12 = (parseInt(hour) + 24) % '12' || '12';
-            let ampm = parseInt(hour) >= 12 ? "PM" : "AM"; 
+                const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
+                const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
+                const ampm   = parseInt(hour) >= 12 ? 'PM' : 'AM';
 
-            format = format.replace("M", month);
+                // Replace based on the format.
-            format = format.replace("d", day);
+                format = format.replace('M', month);
-            format = format.replace("y", year);
+                format = format.replace('d', day);
-            format = format.replace("H", hour);
+                format = format.replace('y', year);
-            format = format.replace("h", hour12);
+                format = format.replace('H', hour);
-            format = format.replace("m", minute);
+                format = format.replace('h', hour12);
-            format = format.replace("s", second);
+                format = format.replace('m', minute);
-            format = format.replace("a", ampm);
+                format = format.replace('s', second);
+                format = format.replace('a', ampm);
 
-            clock.html(format);
+                // Show it in the element.
-        });
+                clock.innerHTML = format;
+            });
+        }
     }
 }
 
 /**
  * Sidenav Controller
+ * There should only side navigation element at the moment.
  */
 function sidenavController() {
-    $(".tui-sidenav-button").click(function() {
+    // Get the side navigation button (there should be only one, but if not, we are getting the first one).
-        let sidenav = $(".tui-sidenav");
+    const sideNavButton = document.querySelector('.tui-sidenav-button');
-        if(sidenav.hasClass("active")) {
+
-            $(".tui-sidenav").removeClass("active");
+    if (!sideNavButton) {
+        // No side navigation button found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Add the click event listener to the buttons.
+    sideNavButton.addEventListener('click', () => {
+        // Get the side navigation element (there should be only one, but if not, we are getting the first one).
+        const sideNav = document.querySelector('.tui-sidenav');
+
+        if (sideNav) {
+            if (sideNav.classList.contains('active')) {
+                sideNav.classList.remove('active');
+            } else {
+                sideNav.classList.add('active');
+            }
         } else {
-            $(".tui-sidenav").addClass("active");
+            throw 'No sidenav element found.'
         }
     });
 }
@@ -81,14 +170,80 @@ function sidenavController() {
  * Modal controller
  */
 function modalController() {
-    $(".tui-modal-button").click(function() {
+    // Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
-        $(".tui-overlap").addClass("active");
+    const tuiOverlap = document.querySelector('.tui-overlap');
-        let modalId = $(this).attr("data-modal");
+
-        $(`#${modalId}`).addClass("active");
+    if (!tuiOverlap) {
-    });
+        // No overlap found element, return early and save a couple CPU cycles.
-    $(".tui-modal-close-button").click(function() {
+        return;
-        $(".tui-overlap").removeClass("active");
+    }
-        let modalId = $(this).attr("data-modal");
+
-        $(`#${modalId}`).removeClass("active");
+    // Find modal buttons.
-    });
+    const modalButtons = document.getElementsByClassName('tui-modal-button');
-}
+    for (const modalButton of modalButtons) {
+        // Add the click event listener to the buttons.
+        modalButton.addEventListener('click', (e) => {
+            // Show the overlap.
+            tuiOverlap.classList.add('active');
+
+            // Get the display element for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Show it.
+                    modal.classList.add('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+
+    // Find the close modal buttons.
+    const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button');
+
+    if (modalButtons.length > 0 && !modalCloseButtons.length) {
+        // A modal without a close button, is a bad modal.
+        throw 'No modal close buttons found.'
+    }
+
+    for (const modalCloseButton of modalCloseButtons) {
+        // Add the click event listener to the buttons.
+        modalCloseButton.addEventListener('click', (e) => {
+            // Hide the the overlap.
+            tuiOverlap.classList.remove('active');
+
+            // Get the display element id for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                // Get the modal element.
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Hide it.
+                    modal.classList.remove('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+}
+
+/**
+ * Init: This is at the bottom to make sure it is fired correctly.
+ */
+domReady(function () {
+    tabsController();
+    datetimeController();
+    sidenavController();
+    modalController();
+});

dist/tuicss.min.js

@@ -1 +1 @@
-function tabsController(){$(".tui-tab").click(function(t){$(".tui-tab-content").hide();let e=$(this).attr("data-tab-content");$(`#${e}`).show(),$(".tui-tab").removeClass("active"),$(this).addClass("active")}),$(".tui-tab.active").click()}function datetimeController(){function t(){let t=new Date;$(".tui-datetime").each(function(){let e=$(this),a=e.attr("data-format"),n=2==(t.getMonth()+"").length?t.getMonth()+1:"0"+(t.getMonth()+1),l=2==(t.getDay()+"").length?t.getDay()+1:"0"+(t.getDay()+1),i=t.getFullYear(),o=2==(t.getHours()+"").length?t.getHours():"0"+t.getHours(),c=(parseInt(o)+24)%12||12,s=2==(t.getMinutes()+"").length?t.getMinutes():"0"+t.getMinutes(),r=2==(t.getSeconds()+"").length?t.getSeconds():"0"+t.getSeconds(),u=parseInt(o)>=12?"PM":"AM";a=(a=(a=(a=(a=(a=(a=(a=a.replace("M",n)).replace("d",l)).replace("y",i)).replace("H",o)).replace("h",c)).replace("m",s)).replace("s",r)).replace("a",u),e.html(a)})}$(".tui-datetime").length&&(t(),setInterval(t,1e3))}function sidenavController(){$(".tui-sidenav-button").click(function(){$(".tui-sidenav").hasClass("active")?$(".tui-sidenav").removeClass("active"):$(".tui-sidenav").addClass("active")})}function modalController(){$(".tui-modal-button").click(function(){$(".tui-overlap").addClass("active");let t=$(this).attr("data-modal");$(`#${t}`).addClass("active")}),$(".tui-modal-close-button").click(function(){$(".tui-overlap").removeClass("active");let t=$(this).attr("data-modal");$(`#${t}`).removeClass("active")})}$(document).ready(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){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()});

examples/bios.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>BIOS 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">
 </head>
@@ -52,6 +51,8 @@
                 </tbody>
             </table>
         </div>
+        <div class="tui-tab-content tui-content" id="tab-2-content">
+        </div>
         <div class="tui-statusbar absolute cyan-168">
             <ul>
                 <li><a href="#!"><span class="white-255-text">F1</span> Help</a></li>
@@ -67,4 +68,4 @@
         </div>
     </div>
 </body>
-</html>
+</html>

examples/chart.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black">
+
+<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">
+    <div style="margin-top: 50px"></div>
+
+    <div class="tui-window black-168 left-align">
+        <fieldset class="tui-fieldset">
+            <legend class="">Vertical Bar 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>
+                <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>
+                <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>
+            </div>
+        </fieldset>
+    </div>
+    <br><br>
+
+    <div class="tui-window black-168 left-align">
+        <fieldset class="tui-fieldset">
+            <legend class="">Horizontal Bar Chart</legend>
+            <div class="tui-chart-horizontal" style="width: 500px; height: 200px;">
+                <div class="tui-chart-display">
+                    <div class="tui-chart-value red-168" style="width: 80%;">80%</div>
+                    <div class="tui-chart-value green-168" style="width: 60%;">60%</div>
+                    <div class="tui-chart-value blue-168" style="width: 100%;">100%</div>
+                </div>
+                <div class="tui-chart-y-axis">
+                    <div class="tui-chart-legend">2018</div>
+                    <div class="tui-chart-legend">2019</div>
+                    <div class="tui-chart-legend">2020</div>
+                </div>
+                <div class="tui-chart-x-axis">
+                    <div class="tui-chart-legend">25%</div>
+                    <div class="tui-chart-legend">50%</div>
+                    <div class="tui-chart-legend">75%</div>
+                    <div class="tui-chart-legend">100%</div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+</body>
+</html>

examples/inputs.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Inputs 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>
@@ -77,4 +76,4 @@
     </div>
 </body>
 
-</html>
+</html>

examples/modal.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Modal 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">
 </head>
@@ -32,4 +31,4 @@
         </div>
     </div>
 </body>
-</html>
+</html>

examples/pc-startup.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>PC Startup 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">
 </head>
@@ -34,6 +33,9 @@
             Detecting Secondary Master ...: Skip<br>
             Detecting Secondaty Slave ....: None
         </div>
+        <div id="session-5" style="display: none">
+            <br>Found virus! The PC cannot be started. I'm Sorry :(
+        </div>
         <div class="tui-statusbar absolute black white-text">
             <ul>
                 <li style="margin-left: 0px">Press <b>DEL</b> to enter SETUP, <b>Alt+F2</b> to enter EZ flash utility
@@ -46,11 +48,16 @@
     </div>
 </body>
 <script>
-    $(document).ready(function() {
+    window.onload = function() {
-        setTimeout(function() { $("#session-1").show(); }, 300);
+        setTimeout(function() { showSession("session-1"); }, 300);
-        setTimeout(function() { $("#session-2").show(); }, 400);
+        setTimeout(function() { showSession("session-2"); }, 400);
-        setTimeout(function() { $("#session-3").show(); }, 450);
+        setTimeout(function() { showSession("session-3"); }, 450);
-        setTimeout(function() { $("#session-4").show(); }, 870);
+        setTimeout(function() { showSession("session-4"); }, 870);
-    });
+        setTimeout(function() { showSession("session-5"); }, 1500);
+    };
+    function showSession(id) {
+        const session = document.getElementById(id);
+        session.style.display = "block";
+    }
 </script>
-</html>
+</html>

examples/pocket-calculator.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Pocket Calculator 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">
 </head>
@@ -43,13 +42,13 @@
     </div>
     <script>
         function digit(digit) {
-            let val = $("#display").val();
+            let val = document.getElementById("display").value;
-            $("#display").val(digit + "" + val);
+            document.getElementById("display").value = digit + "" + val;
         }
         function clearDisplay() {
-            $("#display").val("");
+            document.getElementById("display").value = "";
         }
     </script>
 </body>
 
-</html>
+</html>

examples/progress-bar.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Progress 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">
 </head>
@@ -15,40 +14,40 @@
         <div class="tui-window" style="text-align: left;">
             <fieldset class="tui-fieldset">
                 <legend class="center">Progress</legend>
-                0% ............: 
+                0% ............:
                 <div class="tui-progress-bar inline-block valign-middle">
                     <span class="tui-progress" style="width: 0%"></span>
                 </div><br><br>
-                25% ...........: 
+                25% ...........:
                 <div class="tui-progress-bar inline-block valign-middle">
                     <span class="tui-progress" style="width: 25%"></span>
                 </div><br><br>
-                50% ...........: 
+                50% ...........:
                 <div class="tui-progress-bar inline-block valign-middle">
                     <span class="tui-progress" style="width: 50%"></span>
                 </div><br><br>
-                75% ...........: 
+                75% ...........:
                 <div class="tui-progress-bar inline-block valign-middle">
                     <span class="tui-progress" style="width: 75%"></span>
                 </div><br><br>
-                100% ..........: 
+                100% ..........:
                 <div class="tui-progress-bar inline-block valign-middle">
                     <span class="tui-progress" style="width: 100%"></span>
                 </div><br><br>
-                Texture bg ....: 
+                Texture bg ....:
                 <div class="tui-progress-bar inline-block valign-middle tui-bg-blue-black">
                     <span class="tui-progress" style="width: 50%"></span>
                 </div><br><br>
-                Indeterminate .: 
+                Indeterminate .:
                 <div class="tui-progress-bar inline-block valign-middle">
                     <span class="tui-indeterminate"></span>
                 </div><br><br>
-                Labeled .......: 
+                Labeled .......:
                 <div class="tui-progress-bar inline-block valign-middle">
                     <span class="tui-progress-label black-text">75%</span>
                     <span class="tui-progress" style="width: 75%"></span>
                 </div><br><br>
-                Custom ........: 
+                Custom ........:
                 <div class="tui-progress-bar inline-block valign-middle red-255">
                     <span class="tui-progress green-255" style="width: 50%"></span>
                 </div>
@@ -57,4 +56,4 @@
         </div>
     </body>
 
-</html>
+</html>

examples/register.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Register 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>
@@ -18,7 +17,7 @@
 
 <body>
     <div class="tui-screen-800-600 bordered white-168 tui-bg-blue-black center">
-        
+
         <div class="tui-window full-width tui-no-shadow left-align">
             <fieldset class="tui-fieldset no-legend">
                 <ul>
@@ -123,4 +122,4 @@
 
     </div>
 </body>
-</html>
+</html>

examples/scandisk.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Scandisk 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>
@@ -49,4 +48,4 @@
         </div>
     </div>
 </body>
-</html>
+</html>

examples/table.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Table 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>
@@ -253,4 +252,4 @@
     </div>
 </body>
 
-</html>
+</html>

examples/turbo-vision.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Turbo Vision 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">
 </head>
@@ -162,7 +161,7 @@
                 <textarea class="tui-textarea full-width" style="height: 493px; overflow: scroll;">#include &#60;iostream&#62;
 using namespace std;
 
-int main() 
+int main()
 {
     cout &#60;&#60; "Hello, World!";
     return 0;
@@ -185,4 +184,4 @@ int main()
     </div>
 </body>
 
-</html>
+</html>

examples/window-and-panels.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Window and Panels 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>
@@ -132,7 +131,7 @@
                 <textarea class="tui-textarea" style="width: 400px; height: 200px;">#include &#60;iostream&#62;
 using namespace std;
 
-int main() 
+int main()
 {
     cout &#60;&#60; "Hello, World!";
     return 0;
@@ -168,4 +167,4 @@ int main()
     </div>
 </body>
 
-</html>
+</html>

package-lock.json

@@ -11,12 +11,12 @@
       "dev": true
     },
     "ajv": {
-      "version": "6.10.2",
+      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "requires": {
-        "fast-deep-equal": "^2.0.1",
+        "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
         "json-schema-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
@@ -313,9 +313,9 @@
       "dev": true
     },
     "aws4": {
-      "version": "1.8.0",
+      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
-      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
     "bach": {
@@ -581,9 +581,9 @@
       }
     },
     "clean-css": {
-      "version": "4.2.1",
+      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
-      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
+      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
       "dev": true,
       "requires": {
         "source-map": "~0.6.0"
@@ -943,6 +943,12 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -1166,15 +1172,15 @@
       }
     },
     "fast-deep-equal": {
-      "version": "2.0.1",
+      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
     "fast-json-stable-stringify": {
-      "version": "2.0.0",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
     "fill-range": {
@@ -1505,12 +1511,6 @@
           "dev": true,
           "optional": true
         },
-        "ini": {
-          "version": "1.3.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
@@ -2018,9 +2018,9 @@
       }
     },
     "globule": {
-      "version": "1.2.1",
+      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
-      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+      "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
       "dev": true,
       "requires": {
         "glob": "~7.1.1",
@@ -2149,12 +2149,12 @@
       }
     },
     "gulp-clean-css": {
-      "version": "4.2.0",
+      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.3.0.tgz",
-      "integrity": "sha512-r4zQsSOAK2UYUL/ipkAVCTRg/2CLZ2A+oPVORopBximRksJ6qy3EX1KGrIWT4ZrHxz3Hlobb1yyJtqiut7DNjA==",
+      "integrity": "sha512-mGyeT3qqFXTy61j0zOIciS4MkYziF2U594t2Vs9rUnpkEHqfu6aDITMp8xOvZcvdX61Uz3y1mVERRYmjzQF5fg==",
       "dev": true,
       "requires": {
-        "clean-css": "4.2.1",
+        "clean-css": "4.2.3",
         "plugin-error": "1.0.1",
         "through2": "3.0.1",
         "vinyl-sourcemaps-apply": "0.2.1"
@@ -2307,13 +2307,13 @@
       "dev": true
     },
     "gulp-sass": {
-      "version": "4.0.2",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz",
-      "integrity": "sha512-q8psj4+aDrblJMMtRxihNBdovfzGrXJp1l4JU0Sz4b/Mhsi2DPrKFYCGDwjIWRENs04ELVHxdOJQ7Vs98OFohg==",
+      "integrity": "sha512-xIiwp9nkBLcJDpmYHbEHdoWZv+j+WtYaKD6Zil/67F3nrAaZtWYN5mDwerdo7EvcdBenSAj7Xb2hx2DqURLGdA==",
       "dev": true,
       "requires": {
         "chalk": "^2.3.0",
-        "lodash.clonedeep": "^4.3.2",
+        "lodash": "^4.17.11",
         "node-sass": "^4.8.3",
         "plugin-error": "^1.0.1",
         "replace-ext": "^1.0.0",
@@ -2355,12 +2355,12 @@
       "dev": true
     },
     "har-validator": {
-      "version": "5.1.3",
+      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
       "dev": true,
       "requires": {
-        "ajv": "^6.5.5",
+        "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
       }
     },
@@ -2450,9 +2450,9 @@
       }
     },
     "in-publish": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
       "dev": true
     },
     "indent-string": {
@@ -2481,9 +2481,9 @@
       "dev": true
     },
     "ini": {
-      "version": "1.3.5",
+      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==",
       "dev": true
     },
     "interpret": {
@@ -2601,13 +2601,10 @@
       "dev": true
     },
     "is-finite": {
-      "version": "1.0.2",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
-      "dev": true,
+      "dev": true
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
     },
     "is-fullwidth-code-point": {
       "version": "1.0.0",
@@ -2729,9 +2726,9 @@
       "dev": true
     },
     "js-base64": {
-      "version": "2.5.1",
+      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
     "jsbn": {
@@ -2783,9 +2780,9 @@
       "dev": true
     },
     "kind-of": {
-      "version": "6.0.2",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
     "last-run": {
@@ -2854,16 +2851,28 @@
         "strip-bom": "^2.0.0"
       }
     },
-    "lodash": {
+    "locate-path": {
-      "version": "4.17.15",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "dev": true
+      "dev": true,
+      "requires": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "dependencies": {
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        }
+      }
     },
-    "lodash.clonedeep": {
+    "lodash": {
-      "version": "4.5.0",
+      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
       "dev": true
     },
     "loud-rejection": {
@@ -2991,18 +3000,18 @@
       }
     },
     "mime-db": {
-      "version": "1.40.0",
+      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
-      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.24",
+      "version": "2.1.27",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
-      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
+      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
       "dev": true,
       "requires": {
-        "mime-db": "1.40.0"
+        "mime-db": "1.44.0"
       }
     },
     "minimatch": {
@@ -3015,9 +3024,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.0",
+      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
     "mixin-deep": {
@@ -3042,20 +3051,12 @@
       }
     },
     "mkdirp": {
-      "version": "0.5.1",
+      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
       "dev": true,
       "requires": {
-        "minimist": "0.0.8"
+        "minimist": "^1.2.5"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        }
       }
     },
     "ms": {
@@ -3130,9 +3131,9 @@
       }
     },
     "node-sass": {
-      "version": "4.12.0",
+      "version": "4.14.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
-      "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
       "dev": true,
       "requires": {
         "async-foreach": "^0.1.3",
@@ -3142,14 +3143,14 @@
         "get-stdin": "^4.0.1",
         "glob": "^7.0.3",
         "in-publish": "^2.0.0",
-        "lodash": "^4.17.11",
+        "lodash": "^4.17.15",
         "meow": "^3.7.0",
         "mkdirp": "^0.5.1",
         "nan": "^2.13.2",
         "node-gyp": "^3.8.0",
         "npmlog": "^4.0.0",
         "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
+        "sass-graph": "2.2.5",
         "stdout-stream": "^1.4.0",
         "true-case-path": "^1.0.2"
       },
@@ -3398,6 +3399,30 @@
         "os-tmpdir": "^1.0.0"
       }
     },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
     "parse-filepath": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
@@ -3553,9 +3578,9 @@
       "dev": true
     },
     "psl": {
-      "version": "1.3.1",
+      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-      "integrity": "sha512-2KLd5fKOdAfShtY2d/8XDWVRnmp3zp40Qt6ge2zBPFARLXOGUf2fHD5eg+TV/5oxBtQKVhjUaKFsAaE4HnwfSA==",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
       "dev": true
     },
     "pump": {
@@ -3733,9 +3758,9 @@
       }
     },
     "request": {
-      "version": "2.88.0",
+      "version": "2.88.2",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
@@ -3745,7 +3770,7 @@
         "extend": "~3.0.2",
         "forever-agent": "~0.6.1",
         "form-data": "~2.3.2",
-        "har-validator": "~5.1.0",
+        "har-validator": "~5.1.3",
         "http-signature": "~1.2.0",
         "is-typedarray": "~1.0.0",
         "isstream": "~0.1.2",
@@ -3755,7 +3780,7 @@
         "performance-now": "^2.1.0",
         "qs": "~6.5.2",
         "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.4.3",
+        "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
       }
@@ -3843,15 +3868,138 @@
       "dev": true
     },
     "sass-graph": {
-      "version": "2.2.4",
+      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
       "dev": true,
       "requires": {
         "glob": "^7.0.0",
         "lodash": "^4.0.0",
         "scss-tokenizer": "^0.2.3",
-        "yargs": "^7.0.0"
+        "yargs": "^13.3.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "which-module": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+          "dev": true
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+          "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
       }
     },
     "scss-tokenizer": {
@@ -3920,9 +4068,9 @@
       }
     },
     "signal-exit": {
-      "version": "3.0.2",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
       "dev": true
     },
     "snapdragon": {
@@ -4371,21 +4519,13 @@
       }
     },
     "tough-cookie": {
-      "version": "2.4.3",
+      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-      "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
       "dev": true,
       "requires": {
-        "psl": "^1.1.24",
+        "psl": "^1.1.28",
-        "punycode": "^1.4.1"
+        "punycode": "^2.1.1"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true
-        }
       }
     },
     "trim-newlines": {
@@ -4528,9 +4668,9 @@
       "dev": true
     },
     "uri-js": {
-      "version": "4.2.2",
+      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz",
-      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "integrity": "sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==",
       "dev": true,
       "requires": {
         "punycode": "^2.1.0"
@@ -4555,9 +4695,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "3.3.3",
+      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
     "v8flags": {

package.json

@@ -25,10 +25,10 @@
   "devDependencies": {
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
-    "gulp-clean-css": "^4.2.0",
+    "gulp-clean-css": "^4.3.0",
     "gulp-copy": "^4.0.1",
     "gulp-minify": "^3.1.0",
     "gulp-rename": "^1.4.0",
-    "gulp-sass": "^4.0.2"
+    "gulp-sass": "^4.1.0"
   }
 }

src/components/chart.scss

@@ -0,0 +1,98 @@
+/* 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-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;
+}
+
+/* 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-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;
+}
+
+/* Chart value */
+.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;
+}

src/components/fieldset.scss

@@ -1,3 +1,5 @@
+@import '../mixins.scss';
+
 .tui-fieldset {
     border: 6px white double;
     padding: 12px;
@@ -36,6 +38,7 @@
     cursor: pointer;
     outline:0;
     padding: 2px;
+    @include disable-select;
     
     &.left {
         right: initial;

src/js/tuicss.js

@@ -1,78 +1,167 @@
 /**
- * Init
+ * Replacement for jQuery's $(document).ready() function.
+ * This is handy in making sure stuff fires after the DOM is ready to be touched.
+ * Stolen from:https://stackoverflow.com/a/53601942/344028
+ *
+ * @param fn Callback.
  */
-$(document).ready(function() {
+function domReady(fn) {
-    tabsController();
+    // If we're early to the party
-    datetimeController();
+    document.addEventListener('DOMContentLoaded', fn);
-    sidenavController();
+
-    modalController();
+    // If late; I mean on time.
-});
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        fn();
+    }
+}
 
 /**
  * TuiTabs controller
  */
 function tabsController() {
-    $(".tui-tab").click(function(event) {
+    // Get all the tab elements (typically li tags).
-        $(".tui-tab-content").hide();
+    const tabs = document.getElementsByClassName('tui-tab');
-        let tabContentid = $(this).attr('data-tab-content');
+
-        $(`#${tabContentid}`).show();
+    if (!tabs.length) {
-        $(".tui-tab").removeClass("active");
+        // No tabs found, return early and save a couple CPU cycles.
-        $(this).addClass("active");
+        return;
-    });
+    }
-    $('.tui-tab.active').click();
+
+    for (const tab of tabs) {
+        // Add click listeners to them.
+        tab.addEventListener('click', function (e) {
+            // Remove the 'active' class from any and all tabs.
+            for (const otherTab of tabs) {
+                otherTab.classList.remove('active');
+            }
+
+            // Get the content element.
+            const tabContents = document.getElementsByClassName('tui-tab-content');
+
+            if (tabContents) {
+                for (const tabContent of tabContents) {
+                    // Hide all tab contents.
+                    tabContent.style.display = 'none';
+                }
+            } else {
+                throw 'No tab content elements found.'
+            }
+
+            // Get the id of the tab contents we want to show.
+            const tabContentId = e.target.getAttribute('data-tab-content');
+
+            if (tabContentId) {
+                const tabContent = document.getElementById(tabContentId);
+                if (tabContent) {
+                    // Show the tab contents.
+                    tabContent.style.display = 'block';
+                } else {
+                    throw 'No tab content element with id "' + tabContentId + '" found.';
+                }
+            }
+            // We are not going to throw an error here, since we could make the tab do something else that a tab
+            // normally wouldn't do.
+
+            // Set the clicked tab to have the 'active' class so we can use it in the next part.
+            e.target.classList.add('active');
+
+        });
+    }
+
+    // Grab the first tab with the active class.
+    const activeTab = document.querySelector('.tui-tab.active');
+    if (activeTab) {
+        // Now click it 'click' it.
+        activeTab.click();
+    } else {
+        // Nothing found, just click the first tab foud.
+        tabs[0].click()
+    }
 }
 
 /**
- * Date field controller
+ * Date/time field controller
  */
 function datetimeController() {
+    // Get date/time elements.
+    const clocks = document.getElementsByClassName('tui-datetime');
 
-    if(!$(".tui-datetime").length) return;
+    if (!clocks.length) {
+        // No date time elements found, return early and save a couple CPU cycles.
+        return;
+    }
 
+    // Kick off our clock interval stuff.
     datetimeInterval();
     setInterval(datetimeInterval, 1000);
 
     function datetimeInterval() {
-        let today = new Date();
+        for (const clock of clocks) {
+            // Set the interval.
+            const interval = setInterval(() => {
+                // Technically we should have already returned earlier in the code, but to be on the safe side.
+                if (clock === null) {
+                    clearInterval(interval);
+                    return;
+                }
 
-        $(".tui-datetime").each(function() {
+                // Get the format we want to display in the element.
-            let clock = $(this);
+                let format = clock.getAttribute('data-format');
-            
-            let format = clock.attr("data-format");
 
-            let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
+                // parse out the date and time into constants.
-            let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
+                const today  = new Date();
-            let year = today.getFullYear();
+                const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
-            let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
+                const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
-            let hour12 = (parseInt(hour) + 24) % 12 || 12;
+                const year   = today.getFullYear() + '';
-            let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
+                const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
-            let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
+                const hour12 = (parseInt(hour) + 24) % '12' || '12';
-            let ampm = parseInt(hour) >= 12 ? "PM" : "AM"; 
+                const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
+                const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
+                const ampm   = parseInt(hour) >= 12 ? 'PM' : 'AM';
 
-            format = format.replace("M", month);
+                // Replace based on the format.
-            format = format.replace("d", day);
+                format = format.replace('M', month);
-            format = format.replace("y", year);
+                format = format.replace('d', day);
-            format = format.replace("H", hour);
+                format = format.replace('y', year);
-            format = format.replace("h", hour12);
+                format = format.replace('H', hour);
-            format = format.replace("m", minute);
+                format = format.replace('h', hour12);
-            format = format.replace("s", second);
+                format = format.replace('m', minute);
-            format = format.replace("a", ampm);
+                format = format.replace('s', second);
+                format = format.replace('a', ampm);
 
-            clock.html(format);
+                // Show it in the element.
-        });
+                clock.innerHTML = format;
+            });
+        }
     }
 }
 
 /**
  * Sidenav Controller
+ * There should only side navigation element at the moment.
  */
 function sidenavController() {
-    $(".tui-sidenav-button").click(function() {
+    // Get the side navigation button (there should be only one, but if not, we are getting the first one).
-        let sidenav = $(".tui-sidenav");
+    const sideNavButton = document.querySelector('.tui-sidenav-button');
-        if(sidenav.hasClass("active")) {
+
-            $(".tui-sidenav").removeClass("active");
+    if (!sideNavButton) {
+        // No side navigation button found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Add the click event listener to the buttons.
+    sideNavButton.addEventListener('click', () => {
+        // Get the side navigation element (there should be only one, but if not, we are getting the first one).
+        const sideNav = document.querySelector('.tui-sidenav');
+
+        if (sideNav) {
+            if (sideNav.classList.contains('active')) {
+                sideNav.classList.remove('active');
+            } else {
+                sideNav.classList.add('active');
+            }
         } else {
-            $(".tui-sidenav").addClass("active");
+            throw 'No sidenav element found.'
         }
     });
 }
@@ -81,14 +170,80 @@ function sidenavController() {
  * Modal controller
  */
 function modalController() {
-    $(".tui-modal-button").click(function() {
+    // Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
-        $(".tui-overlap").addClass("active");
+    const tuiOverlap = document.querySelector('.tui-overlap');
-        let modalId = $(this).attr("data-modal");
+
-        $(`#${modalId}`).addClass("active");
+    if (!tuiOverlap) {
-    });
+        // No overlap found element, return early and save a couple CPU cycles.
-    $(".tui-modal-close-button").click(function() {
+        return;
-        $(".tui-overlap").removeClass("active");
+    }
-        let modalId = $(this).attr("data-modal");
+
-        $(`#${modalId}`).removeClass("active");
+    // Find modal buttons.
-    });
+    const modalButtons = document.getElementsByClassName('tui-modal-button');
-}
+    for (const modalButton of modalButtons) {
+        // Add the click event listener to the buttons.
+        modalButton.addEventListener('click', (e) => {
+            // Show the overlap.
+            tuiOverlap.classList.add('active');
+
+            // Get the display element for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Show it.
+                    modal.classList.add('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+
+    // Find the close modal buttons.
+    const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button');
+
+    if (modalButtons.length > 0 && !modalCloseButtons.length) {
+        // A modal without a close button, is a bad modal.
+        throw 'No modal close buttons found.'
+    }
+
+    for (const modalCloseButton of modalCloseButtons) {
+        // Add the click event listener to the buttons.
+        modalCloseButton.addEventListener('click', (e) => {
+            // Hide the the overlap.
+            tuiOverlap.classList.remove('active');
+
+            // Get the display element id for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                // Get the modal element.
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Hide it.
+                    modal.classList.remove('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+}
+
+/**
+ * Init: This is at the bottom to make sure it is fired correctly.
+ */
+domReady(function () {
+    tabsController();
+    datetimeController();
+    sidenavController();
+    modalController();
+});

src/tuicss.scss

@@ -29,4 +29,5 @@
 @import './components/background.scss';
 @import './components/border.scss';
 @import './components/grid.scss';
-@import './components/modal.scss';
+@import './components/modal.scss';
+@import './components/chart.scss';