Skip to content

Commit

Permalink
standalone usage
Browse files Browse the repository at this point in the history
  • Loading branch information
@lekoala
lekoala committed Dec 28, 2021
1 parent 528665e commit f4266bd
Show file tree
Hide file tree
Showing 13 changed files with 1,368 additions and 2 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
180 changes: 180 additions & 0 deletions demo-standalone.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
<title>Bootstrap 5 tags demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
<link href="tags-standalone.min.css" rel="stylesheet" />
<script type="module">
import Tags from "./tags-standalone.min.js";
Tags.init("select[multiple]:not(#regular)");
// Multiple inits should not matter
Tags.init("select[multiple]:not(#regular)");

// Reset does not fire a change input
document.getElementById("regular").addEventListener("change", function (ev) {
console.log(this.selectedOptions);
});
</script>
<style>
body {
font-family: sans-serif;
}

.mb-3 {
margin-bottom: 1em;
}

.container {
padding: 2em
}
</style>
</head>

<body>
<div class="container">
<h1>Demo</h1>
<form class="needs-validation" novalidate method="get" action="https://vercel-dumper.vercel.app/">
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="validationTags" class="form-label">Tags</label>
<select class="form-select" id="validationTags" name="tags[]" multiple>
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="validationTagsClear" class="form-label">Tags (allow clear)</label>
<select class="form-select" id="validationTagsClear" name="tagsClear[]" multiple data-allow-clear="true">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="validationTagsThreshold" class="form-label">Tags (allow clear + 0 threshold)</label>
<select class="form-select" id="validationTagsThreshold" name="tagsClearThreshold[]" multiple data-allow-clear="true" data-suggestions-threshold="0">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="validationTagsShow" class="form-label">Tags (show all + custom colors)</label>
<select class="form-select" id="validationTagsShow" name="tags_show[]" multiple data-show-all-suggestions="true">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2" data-badge-style="success" selected="selected">Banana</option>
<option value="3" data-badge-style="warning" data-badge-class="text-dark">Orange</option>
<option value="4" data-badge-style="secondary">Blueberry</option>
<option value="5">Strawberry</option>
<option value="6">Cranberry</option>
<option value="7">Huckleberry</option>
<option value="8">Chokeberry</option>
<option value="9">Elderberry</option>
<option value="10">Gooseberry</option>
<option value="11">Blackberry</option>
<option value="12">Raspberry</option>
<option value="13">Goji berry</option>
<option value="14">Salmon berry</option>
<option value="15">Sumac berry</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="validationTagsNew" class="form-label">Tags (allow new)</label>
<select class="form-select" id="validationTagsNew" name="tags_new[]" multiple data-allow-new="true">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="regexTags" class="form-label">Tags (allow new only if it matches regex)</label>
<select class="form-select" id="regexTags" name="tags_regex[]" multiple data-allow-new="true" data-regex=".*@mycompany\.com$">
<option disabled hidden value="">Add mail address</option>
<option value="1" selected="selected">[email protected]</option>
<option value="2">[email protected]</option>
<option value="3">[email protected]</option>
</select>
<div class="invalid-feedback">Please select only @mycompany.com addresses.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="separatorTags" class="form-label">Tags (with space and comma separator)</label>
<select class="form-select" id="separatorTags" name="tags_separator[]" multiple data-allow-new="true" data-separator=" |,| ">
<option value="">Type a tag...</option><!-- you need at least one option with the placeholder -->
</select>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="maxTags" class="form-label">Tags (max 2 tags + clear)</label>
<select class="form-select" id="maxTags" name="tags_max[]" multiple data-allow-new="true" data-max="2" data-allow-clear="1">
<option value="">Type a tag...</option><!-- you need at least one option with the placeholder -->
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="validationTagsJson" class="form-label">Tags (server side)</label>
<select class="form-select" id="validationTagsJson" name="tags_json[]" multiple data-allow-new="true" data-server="demo.json" data-live-server="1">
<option disabled hidden value="">Choose a tag...</option>
</select>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="disabledTags" class="form-label">Tags (disabled)</label>
<select class="form-select" id="disabledTags" name="tags_disabled[]" multiple disabled data-allow-new="true">
<option disabled hidden value="">Choose a tag...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
</div>
</div>
<input type="reset" value="Reset" class="btn btn-outline-dark""/>
<button class=" btn btn-primary" type="submit">Submit form</button>

<hr>
<p>A regular select below to test reset</p>
<select class="form-select" id="regular" name="regular[]" multiple>
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>

<hr>
<p>A disabled input for reference</p>
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<hr>
</form>
</div>
</body>

</html>
91 changes: 91 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 9 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@
"build": "esbuild --bundle --minify --format=esm --sourcemap tags.js --outfile=tags.min.js",
"start": "npm run build -- --servedir=.",
"watch": "npm run build -- --watch",
"bump": "npm run build && git add -A && git commit -m \"build min file\" && npm version patch"
"build-standalone": "esbuild --bundle --minify --format=esm --sourcemap tags-standalone.js --outfile=tags-standalone.min.js",
"start-standalone": "npm run build-standalone -- --servedir=.",
"watch-standalone": "npm run build-standalone -- --watch",
"bump": "npm run build && npm run build-standalone && git add -A && git commit -m \"build min file\" && npm version patch"
},
"repository": {
"type": "git",
Expand All @@ -24,5 +27,9 @@
"es6"
],
"author": "LeKoala",
"license": "MIT"
"license": "MIT",
"dependencies": {
"bootstrap": "^5.1.3",
"bootstrap.native": "^4.0.7"
}
}
10 changes: 10 additions & 0 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,16 @@ requires minimal changes.

Check out demo-bs4.html

## Standalone usage

Obviously, this package works great with the full bootstrap library, but you can also use it without Bootstrap or with a trimmed down version of it

In my version, I'm using bootstrap.native to keep the bundle size under a reasonable size (18kb vs 12kb for the original version).

You can check out the .scss file to see how to reduce bootstrap 5 css to a smaller size.

Check out demo-standalone.html

## Demo

https://codepen.io/lekoalabe/pen/ExWYEqx
Expand Down
Loading

0 comments on commit f4266bd

Please sign in to comment.