v2.1.0

use-bootstrap · Sep 6, 2023 · 847fce4 · 847fce4
1 parent 46a2ece
commit 847fce4
Show file tree

Hide file tree

Showing 17 changed files with 130 additions and 94 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+v2.1.0
+  - Added max option.
+
 v2.0.1
   - Some rendering improvements.
 

diff --git a/README.md b/README.md
@@ -3,12 +3,14 @@
 
 Tag input for Bootstrap 5
 
+Demo and documentation: [https://use-bootstrap-tag.js.org](https://use-bootstrap-tag.js.org)
 
 ## Features
 
 - **Custom separator**: Set a specific delimiter character between tag elements.
 - **Enable/disable duplicates**: Toggle the allowance of duplicate tags.
 - **Custom transformation**: Define personalized modifications to input tag entries.
+- **Max limit**: Set a maximum limit of tags that can be added.
 - **Sizing**: Adjustable sizing to match user preferences or layouts.
 - **Validation**: Reflects validation states visually to align with Bootstrap's form validation feedback.
 ## Installation
@@ -57,25 +59,35 @@ const example = UseBootstrapTag(document.getElementById('example'))
 
 ## Options
 
-All options are embedded in attributes:
+All options can be embedded in attributes:
 
 ```html
 data-ub-tag-separator
 data-ub-tag-duplicate
 data-ub-tag-transform
 data-ub-tag-variant
 data-ub-tag-x-position
+data-ub-tag-max
 ```
 
 ```html
-<input class="form-control" data-ub-tag-separator=" " data-ub-tag-duplicate data-ub-tag-transform="input => input.toUpperCase()" data-ub-tag-variant="primary" data-ub-tag-x-position="left">
+<!-- example -->
+<input
+  class="form-control"
+  data-ub-tag-separator=" "
+  data-ub-tag-duplicate
+  data-ub-tag-transform="input => input.toUpperCase()"
+  data-ub-tag-variant="primary"
+  data-ub-tag-x-position="left"
+  data-ub-tag-max="5"
+>
 ```
 ## Methods
 
 | Name    | Params          | Returns         | Example                           |
 |---------|-----------------|-----------------|-----------------------------------|
-| addValue  | string \| array | void    | `example.addValue('cyan')`<br/>`example.addValue(['light', 'dark'])`    |
-| removeValue  | string \| array | void    | `example.removeValue('cyan')`<br/>`example.removeValue(['light', 'dark'])`    |
+| addValue  | string \| array | void    | `example.addValue('react')`<br/>`example.addValue('vue,svelte')`<br/>`example.addValue(['solid', 'qwik'])`    |
+| removeValue  | string \| array | void    | `example.removeValue('react')`<br/>`example.removeValue('vue,svelte')`<br/>`example.removeValue(['solid', 'qwik'])`    |
 | getValue  | null            | string  | `example.getValue()`  |
 | getValues | null            | array   | `example.getValues()` |
 

diff --git a/docs/api/index.html b/docs/api/index.html
@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-11849950.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-bd245e14.js"></script>
   <link rel="stylesheet" href="/assets/index-6904ed1c.css">
 </head>
 

diff --git a/docs/assets/index-11849950.js → docs/assets/index-bd245e14.js b/docs/assets/index-11849950.js → docs/assets/index-bd245e14.js
diff --git a/docs/customize/index.html b/docs/customize/index.html
@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-11849950.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-bd245e14.js"></script>
   <link rel="stylesheet" href="/assets/index-6904ed1c.css">
 </head>
 

diff --git a/docs/demo/index.html b/docs/demo/index.html
diff --git a/docs/index.html b/docs/index.html
@@ -5,12 +5,12 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-11849950.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-bd245e14.js"></script>
   <link rel="stylesheet" href="/assets/index-6904ed1c.css">
 </head>
 
 <body>
-  <div id="app"><nav class="navbar navbar-expand bg-body-tertiary sticky-top" data-bs-theme="dark"><div class="container justify-content-start"><a class="navbar-brand d-flex align-items-center gap-2" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"><path d="M3 2v4.586l7 7L14.586 9l-7-7H3zM2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2z"></path><path d="M5.5 5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-1v5.086z"></path></svg>use-bootstrap-tag</a><div class="ms-auto navbar-nav align-items-center gap-3"><a class="fs-5 nav-link p-0" target="_blank" aria-label="GitHub Project" href="https://github.com/use-bootstrap/use-bootstrap-tag"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a><label class="btn nav-link p-0 border-0 fs-5" for="bs-theme" title="Toggle color schema"><svg viewBox="0 0 24 24" width="1em" height="1em" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></label><input type="checkbox" class="btn-check" id="bs-theme" autocomplete="off"></div></div></nav><div class="bg-body-tertiary" style="border-bottom:var(--bs-border-width) solid var(--bs-border-color)"><div class="container pt-3"><nav class="overflow-x-auto" id="main-nav" style="margin-bottom:-1px"><ul class="nav nav-tabs flex-nowrap"><li class="nav-item"><a href="/" class="nav-link active">Home</a></li><li class="nav-item"><a href="/install" class="nav-link ">Install</a></li><li class="nav-item"><a href="/demo" class="nav-link ">Demo</a></li><li class="nav-item"><a href="/api" class="nav-link ">API</a></li><li class="nav-item"><a href="/customize" class="nav-link ">Customize</a></li></ul></nav></div></div><div class="container py-3"><div class="pt-4" role="main"><div><h3 class="fw-bold">use-bootstrap-tag</h3><p>Tag input for Bootstrap 5</p><div class="d-flex flex-wrap gap-2"><img src="https://img.shields.io/npm/v/use-bootstrap-tag" alt="version"><img src="https://img.shields.io/bundlephobia/minzip/use-bootstrap-tag/2.0.1" alt="minified + gzip"><img src="https://img.shields.io/npm/dm/use-bootstrap-tag" alt="downloads per month"><img src="https://img.shields.io/npm/types/use-bootstrap-tag" alt="types"></div><hr><h4 class="fw-bold">Features</h4><ul class="text-body-secondary"><li><b>Custom separator</b>: Set a specific delimiter character between tag elements.</li><li><b>Enable/disable duplicates</b>: Toggle the allowance of duplicate tags.</li><li><b>Custom transformation</b>: Define personalized modifications to input tag entries.</li><li><b>Sizing</b>: Adjustable sizing to match user preferences or layouts.</li><li><b>Validation</b>: Reflects validation states visually to align with Bootstrap's form validationfeedback.</li></ul><hr><h4 class="fw-bold">Repository</h4><a class="link-body-emphasis" target="_blank" href="https://github.com/use-bootstrap/use-bootstrap-tag">https://github.com/use-bootstrap/use-bootstrap-tag</a><hr><h4 class="fw-bold">License</h4>MIT<div class="d-flex justify-content-between gap-3"><span></span><a href="/install" class="btn btn-link link-body-emphasis text-decoration-none border d-inline-flex flex-column align-items-end w-50"><span class="text-body-secondary small">Next page</span>Install</a></div></div></div></div></div>
+  <div id="app"><nav class="navbar navbar-expand bg-body-tertiary sticky-top" data-bs-theme="dark"><div class="container justify-content-start"><a class="navbar-brand d-flex align-items-center gap-2" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"><path d="M3 2v4.586l7 7L14.586 9l-7-7H3zM2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2z"></path><path d="M5.5 5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-1v5.086z"></path></svg>use-bootstrap-tag</a><div class="ms-auto navbar-nav align-items-center gap-3"><a class="fs-5 nav-link p-0" target="_blank" aria-label="GitHub Project" href="https://github.com/use-bootstrap/use-bootstrap-tag"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a><label class="btn nav-link p-0 border-0 fs-5" for="bs-theme" title="Toggle color schema"><svg viewBox="0 0 24 24" width="1em" height="1em" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></label><input type="checkbox" class="btn-check" id="bs-theme" autocomplete="off"></div></div></nav><div class="bg-body-tertiary" style="border-bottom:var(--bs-border-width) solid var(--bs-border-color)"><div class="container pt-3"><nav class="overflow-x-auto" id="main-nav" style="margin-bottom:-1px"><ul class="nav nav-tabs flex-nowrap"><li class="nav-item"><a href="/" class="nav-link active">Home</a></li><li class="nav-item"><a href="/install" class="nav-link ">Install</a></li><li class="nav-item"><a href="/demo" class="nav-link ">Demo</a></li><li class="nav-item"><a href="/api" class="nav-link ">API</a></li><li class="nav-item"><a href="/customize" class="nav-link ">Customize</a></li></ul></nav></div></div><div class="container py-3"><div class="pt-4" role="main"><div><h3 class="fw-bold">use-bootstrap-tag</h3><p>Tag input for Bootstrap 5</p><div class="d-flex flex-wrap gap-2"><img src="https://img.shields.io/npm/v/use-bootstrap-tag" alt="version"><img src="https://img.shields.io/bundlephobia/minzip/use-bootstrap-tag/2.1.0" alt="minified + gzip"><img src="https://img.shields.io/npm/dm/use-bootstrap-tag" alt="downloads per month"><img src="https://img.shields.io/npm/types/use-bootstrap-tag" alt="types"></div><hr><h4 class="fw-bold">Features</h4><ul class="text-body-secondary"><li><b>Custom separator</b>: Set a specific delimiter character between tag elements.</li><li><b>Enable/disable duplicates</b>: Toggle the allowance of duplicate tags.</li><li><b>Custom transformation</b>: Define personalized modifications to input tag entries.</li><li><b>Max limit</b>: Set a maximum limit of tags that can be added.</li><li><b>Sizing</b>: Adjustable sizing to match user preferences or layouts.</li><li><b>Validation</b>: Reflects validation states visually to align with Bootstrap's form validationfeedback.</li></ul><hr><h4 class="fw-bold">Repository</h4><a class="link-body-emphasis" target="_blank" href="https://github.com/use-bootstrap/use-bootstrap-tag">https://github.com/use-bootstrap/use-bootstrap-tag</a><hr><h4 class="fw-bold">License</h4>MIT<div class="d-flex justify-content-between gap-3"><span></span><a href="/install" class="btn btn-link link-body-emphasis text-decoration-none border d-inline-flex flex-column align-items-end w-50"><span class="text-body-secondary small">Next page</span>Install</a></div></div></div></div></div>
 
 
 

diff --git a/docs/install/index.html b/docs/install/index.html
@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-11849950.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-bd245e14.js"></script>
   <link rel="stylesheet" href="/assets/index-6904ed1c.css">
 </head>
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "use-bootstrap-tag",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Tag input for Bootstrap 5",
   "license": "MIT",
   "homepage": "https://use-bootstrap-tag.js.org",

diff --git a/src/docs/code/basic.html.txt b/src/docs/code/basic.html.txt
@@ -1,5 +1,8 @@
-<input type="text" class="form-control" value="html,css,js" id="example-basic">
+<input type="text" class="form-control example" value="html,css,js">
+<input type="text" class="form-control example" placeholder="Add a tag then press comma or Enter" />
 
 <script>
-  UseBootstrapTag(document.getElementById('example-basic'))
+  document.querySelectorAll('.example').forEach((input) => {
+    UseBootstrapTag(input)
+  })
 </script>
diff --git a/src/docs/code/max.html.txt b/src/docs/code/max.html.txt
@@ -0,0 +1,6 @@
+<!-- Using data-ub-tag-max attribute: -->
+<input type="text" class="form-control" placeholder="Enter tags (max 3)" data-ub-tag-max="3" id="example-max" />
+
+<script>
+  UseBootstrapTag(document.getElementById('example-max'))
+</script>
diff --git a/src/docs/code/placeholder.html.txt b/src/docs/code/placeholder.html.txt
diff --git a/src/docs/code/sizing.html.txt b/src/docs/code/sizing.html.txt
@@ -3,7 +3,7 @@
 <input type="text" class="form-control example-sizing form-control-lg" value="html,css,js">
 
 <script>
-  for (const input of document.querySelectorAll('.example-sizing')) {
+  document.querySelectorAll('.example-sizing').forEach((input) => {
     UseBootstrapTag(input)
-  }
+  })
 </script>
diff --git a/src/docs/code/validation.html.txt b/src/docs/code/validation.html.txt
@@ -20,9 +20,9 @@
 </div>
 
 <script>
-  for (const input of document.querySelectorAll('.example-validation')) {
+  document.querySelectorAll('.example-validation').forEach((input) => {
     UseBootstrapTag(input)
-  }
+  })
 
   // Example starter JavaScript for disabling form submissions if there are invalid fields
   void (function () {

diff --git a/src/docs/pages/Demo.tsx b/src/docs/pages/Demo.tsx
@@ -2,7 +2,7 @@
 import { onMount } from 'solid-js'
 import prism from 'prismjs'
 import codeBasic from '../code/basic.html.txt?raw'
-import codePlaceholder from '../code/placeholder.html.txt?raw'
+import codeMax from '../code/max.html.txt?raw'
 import codeSeparator from '../code/separator.html.txt?raw'
 import codeDuplicate from '../code/duplicate.html.txt?raw'
 import codeTransform from '../code/transform.html.txt?raw'
@@ -78,7 +78,10 @@ export default function Demo() {
               <h5 class="card-title">Basic</h5>
               <div class="tab-content">
                 <div class="tab-pane show active" id="basic-preview-tab-pane" role="tabpanel" aria-labelledby="basic-preview-tab">
-                  <input type="text" class="form-control" value="html,css,js" />
+                  <div class="vstack gap-3">
+                    <input type="text" class="form-control" value="html,css,js" />
+                    <input type="text" class="form-control" placeholder="Add a tag then press comma or Enter" />
+                  </div>
                 </div>
                 <div class="tab-pane" id="basic-code-tab-pane" role="tabpanel" aria-labelledby="basic-code-tab">
                   <pre><code class="language-html">{codeBasic}</code></pre>
@@ -91,18 +94,18 @@ export default function Demo() {
           <div class="card h-100">
             <div class="card-header">
               <ul class="nav nav-tabs card-header-tabs">
-                <li class="nav-item" role="presentation"><button class="nav-link active" id="placeholder-preview-tab" data-bs-toggle="tab" data-bs-target="#placeholder-preview-tab-pane" type="button" role="tab" aria-controls="placeholder-preview-tab-pane" aria-selected="true">Preview</button></li>
-                <li class="nav-item" role="presentation"><button class="nav-link" id="placeholder-code-tab" data-bs-toggle="tab" data-bs-target="#placeholder-code-tab-pane" type="button" role="tab" aria-controls="placeholder-code-tab-pane" aria-selected="false">Code</button></li>
+                <li class="nav-item" role="presentation"><button class="nav-link active" id="max-preview-tab" data-bs-toggle="tab" data-bs-target="#max-preview-tab-pane" type="button" role="tab" aria-controls="max-preview-tab-pane" aria-selected="true">Preview</button></li>
+                <li class="nav-item" role="presentation"><button class="nav-link" id="max-code-tab" data-bs-toggle="tab" data-bs-target="#max-code-tab-pane" type="button" role="tab" aria-controls="max-code-tab-pane" aria-selected="false">Code</button></li>
               </ul>
             </div>
             <div class="card-body">
-              <h5 class="card-title">Placeholder</h5>
+              <h5 class="card-title">Max limit</h5>
               <div class="tab-content">
-                <div class="tab-pane show active" id="placeholder-preview-tab-pane" role="tabpanel" aria-labelledby="placeholder-preview-tab">
-                  <input type="text" class="form-control" placeholder="Add a tag then press comma or Enter" />
+                <div class="tab-pane show active" id="max-preview-tab-pane" role="tabpanel" aria-labelledby="max-preview-tab">
+                  <input type="text" class="form-control" placeholder="Enter tags (max 3)" data-ub-tag-max="3" />
                 </div>
-                <div class="tab-pane" id="placeholder-code-tab-pane" role="tabpanel" aria-labelledby="placeholder-code-tab">
-                  <pre><code class="language-html">{codePlaceholder}</code></pre>
+                <div class="tab-pane" id="max-code-tab-pane" role="tabpanel" aria-labelledby="max-code-tab">
+                  <pre><code class="language-html">{codeMax}</code></pre>
                 </div>
               </div>
             </div>

diff --git a/src/docs/pages/Home.tsx b/src/docs/pages/Home.tsx
@@ -36,6 +36,7 @@ export default function Home() {
         <li><b>Custom separator</b>: Set a specific delimiter character between tag elements.</li>
         <li><b>Enable/disable duplicates</b>: Toggle the allowance of duplicate tags.</li>
         <li><b>Custom transformation</b>: Define personalized modifications to input tag entries.</li>
+        <li><b>Max limit</b>: Set a maximum limit of tags that can be added.</li>
         <li><b>Sizing</b>: Adjustable sizing to match user preferences or layouts.</li>
         <li><b>Validation</b>: Reflects validation states visually to align with Bootstrap's form validationfeedback.</li>
       </ul>