Vinicius Reif Biavatti
GitHub
commit
120b5d8ce1
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
||||
node_modules
|
||||
.idea
|
||||
|
||||
42
CHANGELOG.md
Normal file
42
CHANGELOG.md
Normal file
@ -0,0 +1,42 @@
|
||||
# TuiCss ChangeLog
|
||||
### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version
|
||||
|
||||
#### 2.0.0
|
||||
- Jquery removed (Now use vanilla Javascript)
|
||||
- Chart example page
|
||||
- Readme update
|
||||
- Changelog markdown
|
||||
- Chart component
|
||||
- NPM Package
|
||||
|
||||
#### 1.0.0
|
||||
- Utilities
|
||||
- Examples
|
||||
- DOS font
|
||||
- Wiki documentation
|
||||
- Button component
|
||||
- Checkbox component
|
||||
- Divider component
|
||||
- Dropdown component
|
||||
- Fieldset component
|
||||
- Input component
|
||||
- Navbar component
|
||||
- Panel component
|
||||
- Progressbar component
|
||||
- Radio component
|
||||
- Scrollbar component
|
||||
- Sidenav component
|
||||
- Statusbar component
|
||||
- Table component
|
||||
- Tablegrid component
|
||||
- Tabs component
|
||||
- Textarea component
|
||||
- Window component
|
||||
- Screen component
|
||||
- Datetime component
|
||||
- Shortcut component
|
||||
- Shadow component
|
||||
- Background component
|
||||
- Border component
|
||||
- Grid component
|
||||
- Modal component
|
||||
1
CONTRIBUTING.md
Normal file
1
CONTRIBUTING.md
Normal file
@ -0,0 +1 @@
|
||||
Click [here](https://github.com/vinibiavatti1/TuiCss/wiki/Contributing) to access the contributing page on the wiki!
|
||||
36
README.md
36
README.md
@ -1,9 +1,35 @@
|
||||
# TuiCss
|
||||
### Text-based user interface CSS library
|
||||
<p align="center">
|
||||
<a href="https://github.com/vinibiavatti1/TuiCss">
|
||||
<img src="https://raw.githubusercontent.com/vinibiavatti1/TuiCss/develop/resources/TUICSS%20Logo%20160x160%20transparent.png" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
TuiCss is a library focused to create web applications using an interface based in ASCII table, like MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used and the less effects of the elements. The main framework thats is following to develop TuiCss is <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision Framework</a> with some techniques with [box-drawing characters](https://en.wikipedia.org/wiki/Box-drawing_character), but some others frameworks were checked too, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to see some creations!
|
||||
<h3 align="center">TuiCss</h3>
|
||||
|
||||
<img src="https://i.ibb.co/zhJMy1h/Tui-Css-home.png" width="600">
|
||||
<p align="center">
|
||||
Text-based user interface CSS library
|
||||
<br>
|
||||
<a href="https://github.com/vinibiavatti1/TuiCss/wiki"><strong>-- Documentation --</strong></a>
|
||||
<br><br>
|
||||
<a href="https://badge.fury.io/js/tuicss">
|
||||
<img src="https://badge.fury.io/js/tuicss.svg" alt="npm version badge">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### About
|
||||
|
||||
TuiCss is a library focused to create web applications using an interface based on ASCII table, like the old MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used and because the reduced effects used on the components in the view. The base of this project is <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision Framework</a>, but some other frameworks were checked also to introduce some features to TuiCss, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to stay on top of some creations, or check the getting started page to start use this library!
|
||||
|
||||
<img src="https://raw.githubusercontent.com/vinibiavatti1/TuiCss/develop/resources/TUICSS%20Demo.png" width="676">
|
||||
|
||||
### Getting Started
|
||||
To start to use the TuiCss in your project, you can just download the repository content and import the files that are in the dist folder with the html directives. On the other hand, you can install the package with NPM using the following command:
|
||||
|
||||
```bash
|
||||
$ npm install tuicss
|
||||
```
|
||||
|
||||
For more details, visit the [Getting Started Page](https://github.com/vinibiavatti1/TuiCss/wiki/Getting-Started) in the respoitory wiki.
|
||||
|
||||
### Documentation
|
||||
Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, getting started, components index, examples, styles, or to know how to contribute for this project.
|
||||
Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, components index, examples, styles, or to know how to contribute for this project.
|
||||
|
||||
111
dist/tuicss.css
vendored
111
dist/tuicss.css
vendored
@ -745,7 +745,12 @@ input[type=button] {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
padding: 2px; }
|
||||
padding: 2px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none; }
|
||||
.tui-fieldset-button.left {
|
||||
right: initial;
|
||||
left: 16px !important; }
|
||||
@ -1201,7 +1206,8 @@ input[type=button] {
|
||||
.tui-screen-640-480,
|
||||
.tui-screen-800-600,
|
||||
.tui-screen-1024-768 {
|
||||
position: relative; }
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
.tui-screen-640-480.bordered,
|
||||
.tui-screen-800-600.bordered,
|
||||
.tui-screen-1024-768.bordered {
|
||||
@ -1925,3 +1931,104 @@ input[type=button] {
|
||||
display: none; }
|
||||
.tui-overlap.active {
|
||||
display: block !important; }
|
||||
|
||||
/* Chart container */
|
||||
.tui-chart-vertical {
|
||||
position: relative;
|
||||
background-color: black; }
|
||||
|
||||
.tui-chart-horizontal {
|
||||
position: relative;
|
||||
background-color: black; }
|
||||
|
||||
/* Chart display */
|
||||
.tui-chart-vertical .tui-chart-display {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 30px;
|
||||
align-items: flex-end;
|
||||
border-bottom: 2px solid white;
|
||||
border-left: 2px solid white; }
|
||||
.tui-chart-vertical .tui-chart-display.no-x-axis {
|
||||
bottom: 0px; }
|
||||
.tui-chart-vertical .tui-chart-display.no-y-axis {
|
||||
left: 0px; }
|
||||
|
||||
.tui-chart-horizontal .tui-chart-display {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 30px;
|
||||
align-items: stretch;
|
||||
border-bottom: 2px solid white;
|
||||
border-left: 2px solid white; }
|
||||
.tui-chart-horizontal .tui-chart-display.no-x-axis {
|
||||
bottom: 0px; }
|
||||
.tui-chart-horizontal .tui-chart-display.no-y-axis {
|
||||
left: 0px; }
|
||||
|
||||
/* Chart X axis */
|
||||
.tui-chart-x-axis {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
line-height: 30px; }
|
||||
|
||||
/* Chart Y axis */
|
||||
.tui-chart-y-axis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 30px;
|
||||
width: 50px; }
|
||||
|
||||
/* Chart legends */
|
||||
.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
|
||||
flex: 0 1 100%;
|
||||
text-align: center; }
|
||||
|
||||
.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end; }
|
||||
|
||||
.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
|
||||
flex: 0 1 100%;
|
||||
text-align: right; }
|
||||
|
||||
.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end; }
|
||||
|
||||
/* Chart value */
|
||||
.tui-chart-vertical .tui-chart-display .tui-chart-value {
|
||||
flex: 0 1 100%;
|
||||
text-align: center;
|
||||
overflow: hidden; }
|
||||
|
||||
.tui-chart-horizontal .tui-chart-display .tui-chart-value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden; }
|
||||
|
||||
259
dist/tuicss.js
vendored
259
dist/tuicss.js
vendored
@ -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() {
|
||||
tabsController();
|
||||
datetimeController();
|
||||
sidenavController();
|
||||
modalController();
|
||||
});
|
||||
function domReady(fn) {
|
||||
// If we're early to the party
|
||||
document.addEventListener('DOMContentLoaded', fn);
|
||||
|
||||
// If late; I mean on time.
|
||||
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
fn();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TuiTabs controller
|
||||
*/
|
||||
function tabsController() {
|
||||
$(".tui-tab").click(function(event) {
|
||||
$(".tui-tab-content").hide();
|
||||
let tabContentid = $(this).attr('data-tab-content');
|
||||
$(`#${tabContentid}`).show();
|
||||
$(".tui-tab").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
// Get all the tab elements (typically li tags).
|
||||
const tabs = document.getElementsByClassName('tui-tab');
|
||||
|
||||
if (!tabs.length) {
|
||||
// No tabs found, return early and save a couple CPU cycles.
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
|
||||
});
|
||||
$('.tui-tab.active').click();
|
||||
}
|
||||
|
||||
// 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() {
|
||||
let clock = $(this);
|
||||
// Get the format we want to display in the element.
|
||||
let format = clock.getAttribute('data-format');
|
||||
|
||||
let format = clock.attr("data-format");
|
||||
// parse out the date and time into constants.
|
||||
const today = new Date();
|
||||
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
|
||||
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
|
||||
const year = today.getFullYear() + '';
|
||||
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
|
||||
const hour12 = (parseInt(hour) + 24) % '12' || '12';
|
||||
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
|
||||
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
|
||||
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
|
||||
|
||||
let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
|
||||
let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
|
||||
let year = today.getFullYear();
|
||||
let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
|
||||
let hour12 = (parseInt(hour) + 24) % 12 || 12;
|
||||
let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
|
||||
let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
|
||||
let ampm = parseInt(hour) >= 12 ? "PM" : "AM";
|
||||
// Replace based on the format.
|
||||
format = format.replace('M', month);
|
||||
format = format.replace('d', day);
|
||||
format = format.replace('y', year);
|
||||
format = format.replace('H', hour);
|
||||
format = format.replace('h', hour12);
|
||||
format = format.replace('m', minute);
|
||||
format = format.replace('s', second);
|
||||
format = format.replace('a', ampm);
|
||||
|
||||
format = format.replace("M", month);
|
||||
format = format.replace("d", day);
|
||||
format = format.replace("y", year);
|
||||
format = format.replace("H", hour);
|
||||
format = format.replace("h", hour12);
|
||||
format = format.replace("m", minute);
|
||||
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() {
|
||||
let sidenav = $(".tui-sidenav");
|
||||
if(sidenav.hasClass("active")) {
|
||||
$(".tui-sidenav").removeClass("active");
|
||||
// Get the side navigation button (there should be only one, but if not, we are getting the first one).
|
||||
const sideNavButton = document.querySelector('.tui-sidenav-button');
|
||||
|
||||
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 {
|
||||
$(".tui-sidenav").addClass("active");
|
||||
sideNav.classList.add('active');
|
||||
}
|
||||
} else {
|
||||
throw 'No sidenav element found.'
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -81,14 +170,80 @@ function sidenavController() {
|
||||
* Modal controller
|
||||
*/
|
||||
function modalController() {
|
||||
$(".tui-modal-button").click(function() {
|
||||
$(".tui-overlap").addClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).addClass("active");
|
||||
});
|
||||
$(".tui-modal-close-button").click(function() {
|
||||
$(".tui-overlap").removeClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).removeClass("active");
|
||||
// Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
|
||||
const tuiOverlap = document.querySelector('.tui-overlap');
|
||||
|
||||
if (!tuiOverlap) {
|
||||
// No overlap found element, return early and save a couple CPU cycles.
|
||||
return;
|
||||
}
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
2
dist/tuicss.min.css
vendored
2
dist/tuicss.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/tuicss.min.js
vendored
2
dist/tuicss.min.js
vendored
@ -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()});
|
||||
@ -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>
|
||||
@ -25,22 +24,22 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2" width="60%" class="blue-168-text">
|
||||
<br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 135px" />
|
||||
<br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 135px" />
|
||||
<br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 150px" />
|
||||
<br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 150px" />
|
||||
<br>
|
||||
<br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 135px" />]
|
||||
<br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 135px" />
|
||||
<br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 150px" />
|
||||
<br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 150px" />
|
||||
<br>
|
||||
<br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
|
||||
<br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
|
||||
<br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 135px" />
|
||||
<br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
|
||||
<br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
|
||||
<br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
|
||||
<br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 150px" />
|
||||
<br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
|
||||
<br>
|
||||
<br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 135px" />
|
||||
<br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 150px" />
|
||||
<br>
|
||||
<br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 135px" />
|
||||
<br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 135px" />
|
||||
<br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 135px" />
|
||||
<br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 150px" />
|
||||
<br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 150px" />
|
||||
<br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 150px" />
|
||||
</td>
|
||||
<td width="40%" class="center">Item Specified Help</td>
|
||||
</tr>
|
||||
@ -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>
|
||||
|
||||
91
examples/chart.html
Normal file
91
examples/chart.html
Normal file
@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Chart Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body class="center">
|
||||
<div style="margin-top: 50px"></div>
|
||||
|
||||
<div class="tui-window black-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="">Chart</legend>
|
||||
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
|
||||
<div class="tui-chart-display">
|
||||
<div class="tui-chart-value red-168 animated" style="height: 80%;">80%</div>
|
||||
<div class="tui-chart-value green-168" style="height: 30%;">30%</div>
|
||||
<div class="tui-chart-value blue-168" style="height: 50%;">50%</div>
|
||||
<div class="tui-chart-value yellow-168" style="height: 90%;">90%</div>
|
||||
<div class="tui-chart-value purple-168" style="height: 60%;">60%</div>
|
||||
<div class="tui-chart-value orange-168" style="height: 100%;">100%</div>
|
||||
<div class="tui-chart-value cyan-168" style="height: 10%;">10%</div>
|
||||
<div class="tui-chart-value red-168" style="height: 75%;">75%</div>
|
||||
</div>
|
||||
<div class="tui-chart-y-axis">
|
||||
<div class="tui-chart-legend">100%</div>
|
||||
<div class="tui-chart-legend">80%</div>
|
||||
<div class="tui-chart-legend">60%</div>
|
||||
<div class="tui-chart-legend">40%</div>
|
||||
<div class="tui-chart-legend">20%</div>
|
||||
</div>
|
||||
<div class="tui-chart-x-axis">
|
||||
<div class="tui-chart-legend">s1</div>
|
||||
<div class="tui-chart-legend">s2</div>
|
||||
<div class="tui-chart-legend">s3</div>
|
||||
<div class="tui-chart-legend">s4</div>
|
||||
<div class="tui-chart-legend">s5</div>
|
||||
<div class="tui-chart-legend">s6</div>
|
||||
<div class="tui-chart-legend">s7</div>
|
||||
<div class="tui-chart-legend">s8</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</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>
|
||||
<br><br>
|
||||
|
||||
<div class="tui-window black-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="">Chart (no axis legend)</legend>
|
||||
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
|
||||
<div class="tui-chart-display no-x-axis no-y-axis">
|
||||
<div class="tui-chart-value red-168 animated" style="height: 50%;">50%</div>
|
||||
<div class="tui-chart-value green-168" style="height: 70%;">70%</div>
|
||||
<div class="tui-chart-value blue-168" style="height: 30%;">30%</div>
|
||||
<div class="tui-chart-value yellow-168" style="height: 100%;">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -3,8 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Inputs Example</title>
|
||||
<script src="plugins/jquery-3.4.1.min.js"></script>
|
||||
<title>Input Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
@ -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>
|
||||
|
||||
@ -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() {
|
||||
setTimeout(function() { $("#session-1").show(); }, 300);
|
||||
setTimeout(function() { $("#session-2").show(); }, 400);
|
||||
setTimeout(function() { $("#session-3").show(); }, 450);
|
||||
setTimeout(function() { $("#session-4").show(); }, 870);
|
||||
});
|
||||
window.onload = function() {
|
||||
setTimeout(function() { showSession("session-1"); }, 300);
|
||||
setTimeout(function() { showSession("session-2"); }, 400);
|
||||
setTimeout(function() { showSession("session-3"); }, 450);
|
||||
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>
|
||||
2
examples/plugins/jquery-3.4.1.min.js
vendored
2
examples/plugins/jquery-3.4.1.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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,11 +42,11 @@
|
||||
</div>
|
||||
<script>
|
||||
function digit(digit) {
|
||||
let val = $("#display").val();
|
||||
$("#display").val(digit + "" + val);
|
||||
let val = document.getElementById("display").value;
|
||||
document.getElementById("display").value = digit + "" + val;
|
||||
}
|
||||
function clearDisplay() {
|
||||
$("#display").val("");
|
||||
document.getElementById("display").value = "";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -157,8 +156,7 @@ int main()
|
||||
About
|
||||
</div>
|
||||
<div class="tui-panel-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.
|
||||
TuiCss v2.0.0 Made with ♥
|
||||
<br><br>
|
||||
<div class="center">
|
||||
<button class="tui-button white-255" style="width: 80px">OK</button>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
const { series, src, dest } = require('gulp');
|
||||
const sass = require('gulp-sass');
|
||||
const gulpClean = require('gulp-clean');
|
||||
@ -13,13 +12,14 @@ function clean() {
|
||||
.pipe(gulpClean());
|
||||
}
|
||||
|
||||
// Compile scss
|
||||
// Compile scss and copy to dist folder (.css)
|
||||
function sassCompile() {
|
||||
return src('src/tuicss.scss')
|
||||
.pipe(sass())
|
||||
.pipe(dest(distPath));
|
||||
}
|
||||
|
||||
// Minify css and copy to dist folder (.min.css)
|
||||
function minifyCss() {
|
||||
return src(distPath + '/tuicss.css')
|
||||
.pipe(cleanCss())
|
||||
@ -29,11 +29,13 @@ function minifyCss() {
|
||||
.pipe(dest(distPath));
|
||||
}
|
||||
|
||||
// Copy js script to dist folder (.js)
|
||||
function copyScript() {
|
||||
return src('src/js/tuicss.js')
|
||||
.pipe(dest(distPath));
|
||||
}
|
||||
|
||||
// Minify js script and copy to dist folder (.min.js)
|
||||
function minifyJs() {
|
||||
return src(distPath + '/tuicss.js')
|
||||
.pipe(gulpMinify({
|
||||
@ -44,16 +46,19 @@ function minifyJs() {
|
||||
.pipe(dest(distPath));
|
||||
}
|
||||
|
||||
// Copy images to dist folder (/images)
|
||||
function copyImages() {
|
||||
return src('src/images/*')
|
||||
.pipe(dest(distPath + "/images"));
|
||||
}
|
||||
|
||||
// Copy fonts to dist folder (/fonts)
|
||||
function copyFonts() {
|
||||
return src('src/fonts/*')
|
||||
.pipe(dest(distPath + "/fonts"));
|
||||
}
|
||||
|
||||
// Export
|
||||
exports.default = series(clean, sassCompile, minifyCss, copyScript, minifyJs, copyImages, copyFonts);
|
||||
|
||||
|
||||
|
||||
494
package-lock.json
generated
494
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tuicss",
|
||||
"version": "1.0.0",
|
||||
"version": "2.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -11,12 +11,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"ajv": {
|
||||
"version": "6.10.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
|
||||
"integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
|
||||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
|
||||
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
|
||||
"version": "1.11.0",
|
||||
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
|
||||
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
|
||||
"dev": true
|
||||
},
|
||||
"bach": {
|
||||
@ -581,9 +581,9 @@
|
||||
}
|
||||
},
|
||||
"clean-css": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
|
||||
"integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
|
||||
"integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"source-map": "~0.6.0"
|
||||
@ -1172,15 +1172,15 @@
|
||||
}
|
||||
},
|
||||
"fast-deep-equal": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
|
||||
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"dev": true
|
||||
},
|
||||
"fast-json-stable-stringify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
|
||||
"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
|
||||
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
|
||||
"dev": true
|
||||
},
|
||||
"fill-range": {
|
||||
@ -2018,9 +2018,9 @@
|
||||
}
|
||||
},
|
||||
"globule": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
|
||||
"integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.2.0.tgz",
|
||||
"integrity": "sha512-r4zQsSOAK2UYUL/ipkAVCTRg/2CLZ2A+oPVORopBximRksJ6qy3EX1KGrIWT4ZrHxz3Hlobb1yyJtqiut7DNjA==",
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.3.0.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.0.2.tgz",
|
||||
"integrity": "sha512-q8psj4+aDrblJMMtRxihNBdovfzGrXJp1l4JU0Sz4b/Mhsi2DPrKFYCGDwjIWRENs04ELVHxdOJQ7Vs98OFohg==",
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
|
||||
"integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
|
||||
"integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
|
||||
"integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
|
||||
"dev": true
|
||||
},
|
||||
"indent-string": {
|
||||
@ -2601,13 +2601,10 @@
|
||||
"dev": true
|
||||
},
|
||||
"is-finite": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
|
||||
"integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
|
||||
"integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
|
||||
"dev": true
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
@ -2729,9 +2726,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"js-base64": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
|
||||
"integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
|
||||
"version": "2.6.4",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
|
||||
"integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
|
||||
"dev": true
|
||||
},
|
||||
"jsbn": {
|
||||
@ -2783,9 +2780,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"kind-of": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
|
||||
"integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
||||
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
|
||||
"dev": true
|
||||
},
|
||||
"last-run": {
|
||||
@ -2873,15 +2870,9 @@
|
||||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.19",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
|
||||
"integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.clonedeep": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
|
||||
"version": "4.17.20",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
|
||||
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
|
||||
"dev": true
|
||||
},
|
||||
"loud-rejection": {
|
||||
@ -3009,18 +3000,18 @@
|
||||
}
|
||||
},
|
||||
"mime-db": {
|
||||
"version": "1.40.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
|
||||
"integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
|
||||
"version": "1.44.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
|
||||
"integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
|
||||
"dev": true
|
||||
},
|
||||
"mime-types": {
|
||||
"version": "2.1.24",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
|
||||
"integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
|
||||
"version": "2.1.27",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
|
||||
"integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mime-db": "1.40.0"
|
||||
"mime-db": "1.44.0"
|
||||
}
|
||||
},
|
||||
"minimatch": {
|
||||
@ -3033,9 +3024,9 @@
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
|
||||
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
|
||||
"dev": true
|
||||
},
|
||||
"mixin-deep": {
|
||||
@ -3060,20 +3051,12 @@
|
||||
}
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
|
||||
"integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
|
||||
"dev": true
|
||||
}
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
@ -3172,24 +3155,12 @@
|
||||
"true-case-path": "^1.0.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
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
|
||||
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
|
||||
"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
|
||||
},
|
||||
"chalk": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
|
||||
@ -3203,165 +3174,11 @@
|
||||
"supports-color": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"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
|
||||
},
|
||||
"sass-graph": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
|
||||
"integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.0.0",
|
||||
"lodash": "^4.0.0",
|
||||
"scss-tokenizer": "^0.2.3",
|
||||
"yargs": "^13.3.2"
|
||||
}
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
||||
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
|
||||
"dev": true
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"y18n": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
|
||||
"integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -3761,9 +3578,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"psl": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.3.1.tgz",
|
||||
"integrity": "sha512-2KLd5fKOdAfShtY2d/8XDWVRnmp3zp40Qt6ge2zBPFARLXOGUf2fHD5eg+TV/5oxBtQKVhjUaKFsAaE4HnwfSA==",
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
|
||||
"integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"pump": {
|
||||
@ -3941,9 +3758,9 @@
|
||||
}
|
||||
},
|
||||
"request": {
|
||||
"version": "2.88.0",
|
||||
"resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
|
||||
"integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
|
||||
"version": "2.88.2",
|
||||
"resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
|
||||
"integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"aws-sign2": "~0.7.0",
|
||||
@ -3953,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",
|
||||
@ -3963,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"
|
||||
}
|
||||
@ -4050,6 +3867,141 @@
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true
|
||||
},
|
||||
"sass-graph": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
|
||||
"integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.0.0",
|
||||
"lodash": "^4.0.0",
|
||||
"scss-tokenizer": "^0.2.3",
|
||||
"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": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
|
||||
@ -4116,9 +4068,9 @@
|
||||
}
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
|
||||
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
|
||||
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
|
||||
"dev": true
|
||||
},
|
||||
"snapdragon": {
|
||||
@ -4567,21 +4519,13 @@
|
||||
}
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "2.4.3",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
|
||||
"integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
|
||||
"integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"psl": "^1.1.24",
|
||||
"punycode": "^1.4.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"punycode": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
|
||||
"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
|
||||
"dev": true
|
||||
}
|
||||
"psl": "^1.1.28",
|
||||
"punycode": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"trim-newlines": {
|
||||
@ -4724,9 +4668,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"uri-js": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
|
||||
"integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz",
|
||||
"integrity": "sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"punycode": "^2.1.0"
|
||||
@ -4751,9 +4695,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"uuid": {
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
|
||||
"integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
|
||||
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
|
||||
"dev": true
|
||||
},
|
||||
"v8flags": {
|
||||
|
||||
24
package.json
24
package.json
@ -1,12 +1,18 @@
|
||||
{
|
||||
"name": "tuicss",
|
||||
"version": "1.0.0",
|
||||
"description": "TuiCss is a framework made to develop text-based user interface applications (TUI)",
|
||||
"version": "2.0.1",
|
||||
"description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style",
|
||||
"keywords": [
|
||||
"TUI",
|
||||
"Text based user interface",
|
||||
"Turbo vision",
|
||||
"TuiCss"
|
||||
"tui",
|
||||
"text based user interface",
|
||||
"frontend",
|
||||
"css",
|
||||
"frameword",
|
||||
"turbo vision",
|
||||
"tuicss",
|
||||
"ncurses",
|
||||
"msdos",
|
||||
"ascii"
|
||||
],
|
||||
"main": "dist/tuicss.min.css",
|
||||
"scripts": {
|
||||
@ -25,10 +31,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-rename": "^2.0.0",
|
||||
"gulp-sass": "^4.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
resources/TUICSS Demo.png
Normal file
BIN
resources/TUICSS Demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
resources/TUICSS Logo 160x160 transparent.png
Normal file
BIN
resources/TUICSS Logo 160x160 transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 827 B |
BIN
resources/TUICSS Logo 160x160.png
Normal file
BIN
resources/TUICSS Logo 160x160.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
resources/TUICSS Logo Transparent.png
Normal file
BIN
resources/TUICSS Logo Transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 585 B |
BIN
resources/TUICSS Logo.png
Normal file
BIN
resources/TUICSS Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 B |
112
src/components/chart.scss
Normal file
112
src/components/chart.scss
Normal file
@ -0,0 +1,112 @@
|
||||
/* 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;
|
||||
|
||||
&.no-x-axis {
|
||||
bottom: 0px;
|
||||
}
|
||||
&.no-y-axis {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-display {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 30px;
|
||||
align-items: stretch;
|
||||
border-bottom: 2px solid white;
|
||||
border-left: 2px solid white;
|
||||
|
||||
&.no-x-axis {
|
||||
bottom: 0px;
|
||||
}
|
||||
&.no-y-axis {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Chart X axis */
|
||||
.tui-chart-x-axis {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/* Chart Y axis */
|
||||
.tui-chart-y-axis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 30px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Chart legends */
|
||||
.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
|
||||
flex: 0 1 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
|
||||
flex: 0 1 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Chart value */
|
||||
.tui-chart-vertical .tui-chart-display .tui-chart-value {
|
||||
flex: 0 1 100%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-display .tui-chart-value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
.tui-screen-800-600,
|
||||
.tui-screen-1024-768 {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&.bordered{
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
259
src/js/tuicss.js
259
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() {
|
||||
tabsController();
|
||||
datetimeController();
|
||||
sidenavController();
|
||||
modalController();
|
||||
});
|
||||
function domReady(fn) {
|
||||
// If we're early to the party
|
||||
document.addEventListener('DOMContentLoaded', fn);
|
||||
|
||||
// If late; I mean on time.
|
||||
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
fn();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TuiTabs controller
|
||||
*/
|
||||
function tabsController() {
|
||||
$(".tui-tab").click(function(event) {
|
||||
$(".tui-tab-content").hide();
|
||||
let tabContentid = $(this).attr('data-tab-content');
|
||||
$(`#${tabContentid}`).show();
|
||||
$(".tui-tab").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
// Get all the tab elements (typically li tags).
|
||||
const tabs = document.getElementsByClassName('tui-tab');
|
||||
|
||||
if (!tabs.length) {
|
||||
// No tabs found, return early and save a couple CPU cycles.
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
|
||||
});
|
||||
$('.tui-tab.active').click();
|
||||
}
|
||||
|
||||
// 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() {
|
||||
let clock = $(this);
|
||||
// Get the format we want to display in the element.
|
||||
let format = clock.getAttribute('data-format');
|
||||
|
||||
let format = clock.attr("data-format");
|
||||
// parse out the date and time into constants.
|
||||
const today = new Date();
|
||||
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
|
||||
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
|
||||
const year = today.getFullYear() + '';
|
||||
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
|
||||
const hour12 = (parseInt(hour) + 24) % '12' || '12';
|
||||
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
|
||||
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
|
||||
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
|
||||
|
||||
let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
|
||||
let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
|
||||
let year = today.getFullYear();
|
||||
let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
|
||||
let hour12 = (parseInt(hour) + 24) % 12 || 12;
|
||||
let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
|
||||
let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
|
||||
let ampm = parseInt(hour) >= 12 ? "PM" : "AM";
|
||||
// Replace based on the format.
|
||||
format = format.replace('M', month);
|
||||
format = format.replace('d', day);
|
||||
format = format.replace('y', year);
|
||||
format = format.replace('H', hour);
|
||||
format = format.replace('h', hour12);
|
||||
format = format.replace('m', minute);
|
||||
format = format.replace('s', second);
|
||||
format = format.replace('a', ampm);
|
||||
|
||||
format = format.replace("M", month);
|
||||
format = format.replace("d", day);
|
||||
format = format.replace("y", year);
|
||||
format = format.replace("H", hour);
|
||||
format = format.replace("h", hour12);
|
||||
format = format.replace("m", minute);
|
||||
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() {
|
||||
let sidenav = $(".tui-sidenav");
|
||||
if(sidenav.hasClass("active")) {
|
||||
$(".tui-sidenav").removeClass("active");
|
||||
// Get the side navigation button (there should be only one, but if not, we are getting the first one).
|
||||
const sideNavButton = document.querySelector('.tui-sidenav-button');
|
||||
|
||||
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 {
|
||||
$(".tui-sidenav").addClass("active");
|
||||
sideNav.classList.add('active');
|
||||
}
|
||||
} else {
|
||||
throw 'No sidenav element found.'
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -81,14 +170,80 @@ function sidenavController() {
|
||||
* Modal controller
|
||||
*/
|
||||
function modalController() {
|
||||
$(".tui-modal-button").click(function() {
|
||||
$(".tui-overlap").addClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).addClass("active");
|
||||
});
|
||||
$(".tui-modal-close-button").click(function() {
|
||||
$(".tui-overlap").removeClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).removeClass("active");
|
||||
// Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
|
||||
const tuiOverlap = document.querySelector('.tui-overlap');
|
||||
|
||||
if (!tuiOverlap) {
|
||||
// No overlap found element, return early and save a couple CPU cycles.
|
||||
return;
|
||||
}
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
@ -30,3 +30,4 @@
|
||||
@import './components/border.scss';
|
||||
@import './components/grid.scss';
|
||||
@import './components/modal.scss';
|
||||
@import './components/chart.scss';
|
||||
Loading…
x
Reference in New Issue
Block a user