v2.0.1

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

Hide file tree

Showing 10 changed files with 40 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+v2.0.1
+  - Some rendering improvements.
+
 v2.0.0
   - Rewrite project back to vanilla-js to improve performance and reduce size.
   - Pressing Enter is now the default action for adding a tag. Previously, users had to include an attribute option.

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-0d5f5a05.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-11849950.js"></script>
   <link rel="stylesheet" href="/assets/index-6904ed1c.css">
 </head>
 

diff --git a/docs/assets/index-0d5f5a05.js → docs/assets/index-11849950.js b/docs/assets/index-0d5f5a05.js → docs/assets/index-11849950.js
diff --git a/docs/assets/index-6904ed1c.css b/docs/assets/index-6904ed1c.css
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-0d5f5a05.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-11849950.js"></script>
   <link rel="stylesheet" href="/assets/index-6904ed1c.css">
 </head>
 

diff --git a/docs/demo/index.html b/docs/demo/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-0d5f5a05.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-11849950.js"></script>
   <link rel="stylesheet" href="/assets/index-6904ed1c.css">
 </head>
 

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-0d5f5a05.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-11849950.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.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>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.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>
 
 
 

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-0d5f5a05.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-11849950.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.0",
+  "version": "2.0.1",
   "description": "Tag input for Bootstrap 5",
   "license": "MIT",
   "homepage": "https://use-bootstrap-tag.js.org",

diff --git a/src/lib/use-bootstrap-tag.ts b/src/lib/use-bootstrap-tag.ts
@@ -120,19 +120,25 @@ export default function UseBootstrapTag(target: HTMLInputElement) {
   }
 
   // Tags
+  const tagElement = createElement('button', {
+    type: 'button',
+    className: `align-items-center gap-1 d-inline-flex py-0 border-0 btn btn-${config.variant}`,
+    disabled,
+  })
+  classList.contains('form-control-sm') && tagElement.classList.add('btn-sm')
+  classList.contains('form-control-lg') && tagElement.classList.add('btn-lg')
+  config.xPosition === 'left' && tagElement.classList.add('flex-row-reverse')
+  const closeTagElement = createElement('span', {
+    className: 'd-inline-flex',
+    role: 'button',
+    tabIndex: -1,
+    innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>',
+  })
   const renderTags = (items: string[]) => {
-    tags().forEach(button => button.remove())
-    const element = createElement('button', {
-      type: 'button',
-      className: `align-items-center gap-1 d-inline-flex py-0 border-0 btn btn-${config.variant}`,
-      disabled,
-    })
-    classList.contains('form-control-sm') && element.classList.add('btn-sm')
-    classList.contains('form-control-lg') && element.classList.add('btn-lg')
-    config.xPosition === 'left' && element.classList.add('flex-row-reverse')
+    tags().forEach(tag => tag.remove())
     items.reverse().forEach((value, i) => {
       const index = items.length - 1 - i
-      const tag = element.cloneNode() as typeof element
+      const tag = tagElement.cloneNode() as typeof tagElement
       tag.innerHTML = value
       tag.onfocus = () => {
         tag.classList.add('active')
@@ -155,12 +161,7 @@ export default function UseBootstrapTag(target: HTMLInputElement) {
         }
       }
       if (!disabled) {
-        const span = createElement('span', {
-          className: 'd-inline-flex',
-          role: 'button',
-          tabIndex: -1,
-          innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>',
-        })
+        const span = closeTagElement.cloneNode(true) as typeof closeTagElement
         span.onclick = () => {
           removeByIndex(index)
           textFocus()