Utils

Usage

You can import functions inidivually like this:

import { startLoading } from "blue-web/dist/js/utils.js"

or like this:

<script src="https://unpkg.com/blue-web@latest/dist/js/utils.bundle.js"></script>

utils.js is provided as ESM, so you can use it as a module in the browser:

<button type="button" id="btn" class="btn blue-btn-soft-primary">Start loader</button>

<script type="module">
    import { startLoading } from "./node_modules/blue-web/dist/js/utils.js"

    document.getElementById("btn").addEventListener("click", () => {
        startLoading()
    })
</script>

Required markup

Some of the util functions to show status information require to have some HTML elements available.

<div class="blue-status-circle blue-loading blue-status-loading"><div class="spinner-bounce-circle"><div></div><div></div></div></div>
<div class="blue-status-circle blue-status-success"><svg class="bi bi-check-circle-fill" fill=currentColor height=1em viewBox="0 0 16 16" width=1em xmlns=http://www.w3.org/2000/svg><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg></div>
<div class="blue-status-circle blue-status-info"><svg class="bi bi-info-circle-fill" fill=currentColor height=1em viewBox="0 0 16 16" width=1em xmlns=http://www.w3.org/2000/svg><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"></path></svg></div>
<div class="blue-status-circle blue-status-warning"><svg class="bi bi-exclamation-circle-fill" fill=currentColor height=1em viewBox="0 0 16 16" width=1em xmlns=http://www.w3.org/2000/svg><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"></path></svg></div>
<div class="blue-status-circle blue-status-danger"><svg class="bi bi-x-circle-fill" fill=currentColor height=1em viewBox="0 0 16 16" width=1em xmlns=http://www.w3.org/2000/svg><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"></path></svg></div>
<div class="alert blue-status-alert"><button aria-label=Close class="btn-close float-end mb-1" type=button></button><div class=alert-body></div></div>

JavaScript Functions

Edit post on GitHub