Added a "disabled" state/prop (#92)

voerro · Sep 28, 2020 · df7f61a · df7f61a
1 parent 4e62677
commit df7f61a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -136,6 +136,7 @@ new Vue({
 Prop | Type | Default | Description
 --- | --- | --- | ---
 elementId | String | - | id & name for the hidden input.
+disabled | Boolean | false | Disable the element. You won't be able to add new tags and remove the existing ones.
 existing-tags | Array | [] | An array with existing tags in the following format: `[{ key: 'id-or-slug-of-the-tag', value: 'Tag\'s text representation' }, {...}, ...]`
 typeahead | Boolean | false | Whether the typeahead (autocomplete) functionality should be enabled.
 typeahead-style | String | 'badges' | The autocomplete prompt style. Possible values: `badges`, `dropdown`.
@@ -273,7 +274,8 @@ You can also customize selected tags' badges using the `selected-tag` slot, for
     <template v-slot:selected-tag="{ tag, index, removeTag }">
         <span v-html="tag.value"></span>
 
-        <a href="#"
+        <a v-show="!disabled"
+            href="#"
             class="tags-input-remove"
             @click.prevent="removeTag(index)"></a>
     </template>

diff --git a/dist/style.css b/dist/style.css
@@ -93,6 +93,9 @@
     padding-left: 0.6em;
     border-radius: 10em;
 }
+.tags-input-badge-pill.disabled {
+    padding-right: 0.6em;
+}
 
 .tags-input-badge-selected-default {
     color: #212529;

diff --git a/src/VoerroTagsInput.vue b/src/VoerroTagsInput.vue
@@ -3,10 +3,12 @@
         <div :class="{
             [wrapperClass + ' tags-input']: true,
             'active': isActive,
+            'disabled': disabled,
         }">
             <span v-for="(tag, index) in tags"
                 :key="index"
                 class="tags-input-badge tags-input-badge-pill tags-input-badge-selected-default"
+                :class="{ 'disabled': disabled }"
             >
                 <slot name="selected-tag"
                     :tag="tag"
@@ -15,7 +17,8 @@
                 >
                     <span v-html="tag.value"></span>
 
-                    <a href="#"
+                    <a v-show="!disabled"
+                        href="#"
                         class="tags-input-remove"
                         @click.prevent="removeTag(index)"></a>
                 </slot>
@@ -107,6 +110,11 @@ export default {
             }
         },
 
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+
         typeahead: {
             type: Boolean,
             default: false
@@ -269,7 +277,7 @@ export default {
 
     computed: {
         hideInputField() {
-            return (this.hideInputOnLimit && this.limit > 0 && this.tags.length >= this.limit);
+            return (this.hideInputOnLimit && this.limit > 0 && this.tags.length >= this.limit) || this.disabled;
         }
     },
 
@@ -431,9 +439,14 @@ export default {
          * Add/Select a tag
          * 
          * @param tag
+         * @param force
          * @returns void | Boolean
          */
-        addTag(tag) {
+        addTag(tag, force = false) {
+            if (this.disabled && !force) {
+                return;
+            }
+
             if (!this.beforeAddingTag(tag)) {
                 return false;
             }
@@ -475,6 +488,10 @@ export default {
          * @returns void
          */
         removeTag(index) {
+            if (this.disabled) {
+                return;
+            }
+
             let tag = this.tags[index];
 
             if (!this.beforeRemovingTag(tag)) {
@@ -665,7 +682,7 @@ export default {
                 this.clearTags();
 
                 for (let tag of tags) {
-                    this.addTag(tag);
+                    this.addTag(tag, true);
                 }
             } else {
                 if (this.tags.length == 0) {