No More Dependencies

Small web components with minimal or no aditional dependencies.

Here are some quick demonstrations.

nmd-flash

Web component for displaying styled and animated messages.

<script src="https://unpkg.com/nmd-flash">

<nmd-flash-container>
	<nmd-flash type="success">
		Everything is awesome.
	</nmd-flash>
	<nmd-flash type="fail">
		Something is wong.
	</nmd-flash>
	<nmd-flash type="warning">
		Mind the gap.
	</nmd-flash>
	<nmd-flash type="info">
		Roses are red.
	</nmd-flash>
	<nmd-flash><!-- defaults to info -->
		Violets are blue.
	</nmd-flash>
	<nmd-flash auto-dismiss="1000">
		I will be gone in 1 second. Oh no!
	</nmd-flash>
</nmd-flash-container>

Run

NmdFlash.add("Hi!");

Run

NmdFlash.add(
	"This was a triumph.", // message
	"success", // type
	1000, // autodismiss
	true // message contains HTML tags
);

Run

let msg = document.querySelector("nmd-flash");
msg.type = "warning";
msg.messageText = "Nevermind, I'm a warning now.";
msg.dismiss();

Run

nmd-modal

Web component for modal dialog windows.

<script src="https://unpkg.com/nmd-modal">

Put this somewhere:

<nmd-modal-container hidden></nmd-modal-container>

Localize your buttons:

<nmd-modal-container hidden label-ok="Budiž" label-cancel="Storno"></nmd-modal-container>

These return Promise:

NmdModal.alert("Hello there!");

Run

NmdModal.alert("#$@&%*!", "fail");

Run

let response = await NmdModal.prompt("Who's there?", "light");
if(response)
	NmdModal.alert(`${response} who?`, "dark");

Run

nmd-select

Searchable select web compoment with vanilla look and feel.

<script src="https://unpkg.com/nmd-select">

<nmd-select>
	<optgroup label="Local COOP">
		<option value="408410">X-Morph: Defense</option>
		<option value="448510">Overcooked</option>
	</optgroup>
	<optgroup label="Network COOP">
		<option value="548430">Deep Rock Galactic</option>
		<option value="218620">PAYDAY 2</option>
		<option value="574090">MOTHERGUNSHIP</option>
	</optgroup>
</nmd-select>

<nmd-select input-class="form-select" select-class="form-select" no-chevron>
	<option value="php">PHP</option>
	<option value="i">INTERCAL</option>
	<option value="js">JavaScript</option>
	<option value="ws">Whitespace</option>
	<option value="py">Python</option>
	<option value="cbl">COBOL</option>
	<option value="pptx">PowerPoint</option>
</nmd-select>

nmd-collapse

Hide and reveal your content easily and with style with this simple web component.

<script src="https://unpkg.com/nmd-collapse">

<nmd-collapse>
	<div class="card card-body bg-info">
		mole 1<br>
		with default animation and duration (0.5s)
	</div>
</nmd-collapse>
<button type="button" class="btn btn-info mt-1" onclick="this.previousElementSibling.toggle()">Whack-A-Mole 1</button>

<nmd-collapse animation="simple" duration="1.5s">
	<div class="card card-body bg-success text-white">
		mole 2<br>
		with custom duration and same animation as before just set explicitly
	</div>
</nmd-collapse>
<button type="button" class="btn btn-success mt-2" onclick="this.previousElementSibling.toggle()">Whack-A-Mole 2</button>

<nmd-collapse animation="squish">
	<div class="card card-body bg-warning">
		mole 3<br>
		poor mole...
	</div>
</nmd-collapse>
<button type="button" class="btn btn-warning mt-2" onclick="this.previousElementSibling.toggle()">Whack-A-Mole 3</button>

<nmd-collapse animation="flip" hidden>
	<div class="card card-body bg-danger text-white d-block">
		mole 4 begins hidden<br>
		yeet him away<br>
		<button type="button" class="btn btn-dark my-2" onclick="this.parentElement.parentElement.collapse()">Whack-A-Mole 4</button>
		<nmd-collapse animation="shrink">
			<div class="card card-body bg-light text-dark">
				nested mole
			</div>
		</nmd-collapse>
		<button type="button" class="btn btn-light mt-2" onclick="this.previousElementSibling.toggle()">Whack-A-Nested-Mole</button>
	</div>
</nmd-collapse>
<button type="button" class="btn btn-danger mt-2" onclick="this.previousElementSibling.expand()">Unwhack-A-Mole 4</button>