Merge pull request #86 from agustinl/v5.0.0

v5.0.0
agustinl · Mar 5, 2023 · 815a243 · 815a243
2 parents e79b4f4 + 4a0447c
commit 815a243
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # svelte-tags-input changelog
 
+## 5.0.0
+
+* **Fix:** Tag a11y events warning.
+* **Add:** `autoCompleteShowKey` prop to show a different value form the object returned in auto complete list. [#85](https://github.com/agustinl/svelte-tags-input/issues/85)
+* **Fix:** Fix `onlyUnique` if is array of objects. [#80](https://github.com/agustinl/svelte-tags-input/issues/80)
+* **Fix:** Fix `minChars` type. [#82](https://github.com/agustinl/svelte-tags-input/issues/82)
+
 ## 4.0.0
 
 * **Add:** support for binding values. [#38](https://github.com/agustinl/svelte-tags-input/issues/38)

diff --git a/README.md b/README.md
@@ -50,6 +50,7 @@ import Tags from "svelte-tags-input";
 | labelShow | `Boolean` | `false` | If `true` the label will be visible |
 | readonly | `Boolean` | `false` | If `true` the input show in display mode |
 | onTagClick | `Function` | `empty` | A function to fire when a tag is clicked |
+| autoCompleteShowKey | `String` | `autoCompleteKey` | A key string to show a different value from auto complete list object returned |
 
 ##### [A complete list of key codes](https://keycode.info/)
 
@@ -118,10 +119,11 @@ const customAutocomplete = async () => {
     bind:tags={tags}
     autoComplete={customAutocomplete}
     autoCompleteKey={"name"}
+    autoCompleteShowKey={"alpha3Code"}
 />
 
 {#each tags as country, index}
-    <p>{index} - {country.name} </p>
+    <p>{index} - {country.name} - {country.alpha3Code} </p>
     <img src={country.flag} />
 {/each}
 ```
@@ -136,6 +138,6 @@ This project is open source and available under the [MIT License](LICENSE).
 
 ## Author
 
-[@agustinl](https://www.agustinl.com?ref=github-sti)
+[@agustinl](https://twitter.com/agustinlautaro)
 
-##### 202X
+##### 2023
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tags-input",
-	"version": "4.0.0",
+	"version": "5.0.0",
 	"description": "Fully customizable Svelte component to enter tags.",
 	"main": "dist/index.js",
 	"module": "dist/index.mjs",

diff --git a/src/Tags.svelte b/src/Tags.svelte
@@ -31,6 +31,7 @@ export let labelText;
 export let labelShow;
 export let readonly;
 export let onTagClick;
+export let autoCompleteShowKey;
 
 let layoutElement;
 
@@ -51,12 +52,13 @@ $: name = name || "svelte-tags-input";
 $: id = id || uniqueID();
 $: allowBlur = allowBlur || false;
 $: disable = disable || false;
-$: minChars = minChars || 1;
+$: minChars = minChars ?? 1;
 $: onlyAutocomplete = onlyAutocomplete || false;
 $: labelText = labelText || name;
 $: labelShow = labelShow || false;
 $: readonly = readonly || false;
 $: onTagClick = onTagClick || function(){};
+$: autoCompleteShowKey = autoCompleteShowKey || autoCompleteKey;
 
 $: matchsID = id + "_matchs";
 
@@ -131,6 +133,12 @@ function addTag(currentTag) {
         if (!autoCompleteKey) {
             return console.error("'autoCompleteKey' is necessary if 'autoComplete' result is an array of objects");
         }
+        
+        if (onlyUnique) {
+            let found = tags?.find(elem => elem[autoCompleteKey] === currentTag[autoCompleteKey]);
+        
+            if (found) return;
+        }
 
         var currentObjTags = currentTag;
         currentTag = currentTag[autoCompleteKey].trim();
@@ -216,8 +224,8 @@ function onBlur(e, tag) {
     autoCompleteIndex = -1
 }
 
-function onClick() {    
-    (!minChars || minChars == 0) && getMatchElements();
+function onClick() {
+    minChars == 0 && getMatchElements();
 }
 
 
@@ -277,7 +285,6 @@ async function getMatchElements(input) {
     if(autoCompleteValues.constructor.name === 'Promise') {
         autoCompleteValues = await autoCompleteValues;
     }
-    
     // Escape
     if ((minChars > 0 && value == "") || (input && input.keyCode === 27) || value.length < minChars ) {
         arrelementsmatch = [];
@@ -333,16 +340,16 @@ function uniqueID() {
 
     {#if tags.length > 0}
         {#each tags as tag, i}
-            <span class="svelte-tags-input-tag" on:click={onTagClick(tag)}>
+            <button class="svelte-tags-input-tag" on:click={onTagClick(tag)}>
                 {#if typeof tag === 'string'}
                     {tag}
                 {:else}
-                    {tag[autoCompleteKey]}
+                    {tag[autoCompleteShowKey]}
                 {/if}
                 {#if !disable && !readonly}
                     <span class="svelte-tags-input-tag-remove" on:pointerdown={() => removeTag(i)}> &#215;</span>
                 {/if}
-            </span>
+            </button>
         {/each}
     {/if}
     <input
@@ -426,6 +433,8 @@ function uniqueID() {
 /* svelte-tags-input */
 
 .svelte-tags-input {
+    /* Parent handles background */
+    background: unset;
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1; 
@@ -441,16 +450,20 @@ function uniqueID() {
 /* svelte-tags-input-tag */
 
 .svelte-tags-input-tag {
+    cursor: text;
     display:-webkit-box;
     display:-ms-flexbox;
     display:flex;
     white-space: nowrap;
+    user-select: text;
     list-style:none;
     background: #000;
+    border: none;
     color: #FFF;
     border-radius: 2px;
     margin-right: 5px;
     margin-top: 5px;
+    font-weight: 400;
 }
 
 /*.svelte-tags-input-tag:hover {
@@ -535,4 +548,4 @@ function uniqueID() {
     white-space: nowrap;
     border: 0;
 }
-</style>
+</style>