JS

JS

Toasts

<button class="btn" id="snow-toast">Snow Toast</button>

<script type="module">
    import {createToast} from "../js/main.min.js"

    document.getElementById("snow-toast").addEventListener("click", () => {
        createToast({
            position: "top-right",
            text: "Hello",
            autoClose: 2000,
        })
    })
</script>

Arguments

Argument	Type	Required?	Default Value	Options	Description
position	String	N	top-left	top-left, top-center, top-right, bottom-left, bottom-center or bottom-right	A position of the toast
text	String	Y	—	—	Toast text content
autoClose	Number or false	N	1000	—	Time in ms before close toast, false - to not auto close
canClose	Boolean	N	true	true or false	Can the user close this toast with a click?
showProgress	Boolean	N	true	true or false	Show progress until toast is closed?
pauseOnHover	Boolean	N	false	true or false	Pause when hovering over a toast
pauseOnFocusLoss	Boolean	N	false	true or false	Pause when focus loss
onClose	Function	N	() => {}	—	A function to be run after the toast is closed

Modal

<button class="btn" id="snow-modal">Snow modal</button>

<script type="module">
    import {Button, createModal} from "../js/main.min.js";
    document.getElementById("snow-modal").addEventListener("click", () => {
        createModal({
            title: "Hello world!",
            content: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam pariatur animi, modi similique facilis culpa hic voluptatibus necessitatibus exercitationem placeat quo vitae odio corporis, nihil magni rem libero ducimus asperiores maiores autem! Minus porro voluptatem at ea, unde saepe ullam. Consectetur eos placeat ratione sunt aut molestias ipsa recusandae modi tenetur repudiandae officiis ex eum totam voluptas, reprehenderit, cum porro quo soluta? Corporis id ut, optio vitae illum at nostrum esse aut laudantium rem alias facilis voluptatem quisquam amet provident explicabo. Nisi unde, corporis blanditiis reprehenderit obcaecati sequi voluptatum quae omnis esse vel? Nihil commodi saepe incidunt quae itaque facere.",
            buttons: [
                new Button({text: "Close", id: "close"}),
                new Button({type: "main", text: "OK", id: "ok"})
            ]
        })
    })
</script>

Arguments

Button

Argument	Type	Required?	Default Value	Options	Description
type	String	N	default	default, danger, success or main	Type of the button
text	String	Y	—	—	Text of the button
id	String	Y	—	—	ID of the button

Modal

Argument	Type	Required?	Default Value	Options	Description
title	String	Y	""	—	A title of the modal
content	HTML or String	Y	""	—	A content of the modal
buttons	Array	N	[]	—	A buttons of the modal
animation	String	N	top-center	top-center, bottom-center, left-center, right-center or opacity	A animation of the modal

Multistage form

[] - Optional argument

<form class="multistage" id="form">
    <h1 class="multistage-title [with-line]">Multistage Form Title</h1>
    <div class="multistage-form" [data-title="Form 1"]>
        <h1>Form 1 Title</h1>
        <input type="text" name="input" class="input" placeholder="Input" [required]>
        <!-- ...inputs -->
    </div>
    <div class="multistage-form" [data-title="Form 2"]>
        <h1>Form 2 Title</h1>
        <input type="text" name="input" class="input" placeholder="Input" [required]>
        <!-- ...inputs -->
    </div>
    <div class="multistage-form" [data-title="Form 3"]>
        <h1>Form 3 Title</h1>
        <input type="text" name="input" class="input" placeholder="Input" [required]>
        <!-- ...inputs -->
    </div>
</form>

<script type="module">
    import {initMultiStageForm} from "../js/main.min.js"
    initMultiStageForm("#form")
</script>

Arguments

Argument	Type	Required?	Default Value	Options	Description
selector	String	Y	—	—	Form selector
submit	Object	N	{id: "submit", text: "Submit"}	—	Config of submit btn
errorMsg	HTML	N	Fill in <span><name></span>	—	Form error msg(If any field is not filled, placeholders: <placeholder>, <name>, <nameTitle>)
buttons	Array	N	['Previous', 'Next']	—	Control buttons texts

Advanced tables

<table id="table">
</table>

<script type="module">
    import {createTable} from "../js/main.min.js"
    createTable("#table", {
        title: "Test table",
        columns: [
            {label: "#", id: "num", sort: (values) => {return values.sort((a, b) => {return a[1]-b[1]})}},
            {label: "User", id: "user"}
        ],
        rows: [
            {num: 1, user: "User 1"},
            {num: 2, user: "User 2"},
            {num: 3, user: "User 3"},
            {num: 4, user: "User 4"},
            {num: 5, user: "User 5"}
        ],
        rowsPerPage: 4
    })
</script>

Arguments

Table

Table

Argument	Type	Required?	Default Value	Options	Description
selector	String	Y	—	—	Table selector
config	Object	Y	—	—	Table config

Config

Argument	Type	Required?	Default Value	Options	Description
type	String	N	table	table or tableWithRowHeaders	Table type
title	String	N	—	—	Table title
rowsPerPage	Number	N	5	—	Table rows per page
width	String	N	adaptive	—	Table width(Not recommended to change)
columns	Array	Y	—	—	Table columns
rows	Array	Y	—	—	Table rows

Column

Argument	Type	Required?	Default Value	Options	Description
label	String	Y	—	—	Column label
id	String	Y	—	—	Column id
type	String	N	string	string, number, timestamp or html	Column type(html requires render and sort arguments)
render	Function	Y(if used html type)	—	—	Column render function(should return html string)
sort	Function	N	—	—	Column sort function(should return a sorted list)