feat: button Add instead of input when nothing is added

.directory

@@ -0,0 +1,4 @@
+[Dolphin]
+Timestamp=2022,5,3,13,27,8
+Version=4
+ViewMode=2

package.json → package.bak.json

@@ -18,7 +18,7 @@
     "type": "git",
     "url": "https://github.com/JohMun/vue-tags-input.git"
   },
-  "main": "dist/vue-tags-input.js",
+  "main": "vue-tags-input/vue-tags-input.vue",
   "scripts": {
     "dev": "npm run docs",
     "docs": "cross-env NODE_ENV=development webpack-dev-server --hot --config ./build/docs.config.js",

vue-tags-input/vue-tags-input.js

@@ -20,6 +20,7 @@ export default {
       deletionMarkTime: null,
       selectedItem: null,
       focused: null,
+      mouseOverWorkingPlace: false,
     };
   },
   computed: {
@@ -128,8 +129,9 @@ export default {
     // Focuses the input of a tag
     focus(index) {
       this.$nextTick(() => {
-        const el = this.$refs.tagCenter[index].querySelector('input.ti-tag-input');
-        if (el) el.focus();
+        // const el = this.$refs.tagCenter[index].querySelector('input.ti-tag-input');
+        // if (el) el.focus();
+        this.$refs.newTagInput.focus();
       });
     },
     quote(regex) {
@@ -366,8 +368,42 @@ export default {
       if (this.addOnBlur && this.focused) this.performAddTags(this.newTag);
 
       // Hide autocomplete layer
+      this.close();
+    },
+
+
+    open(focus=true) {
+      if (this.preventAdd) {
+        this.$emit('prevent-add');
+        return;
+      }
+
+      console.log(1)
+
+      setTimeout(() => {
+        this.focused = true;
+        console.log(2, focus)
+        focus && setTimeout(() => {
+          console.log(3)
+          this.focus();
+        });
+      })
+
+    },
+
+
+    close() {
       this.focused = false;
     },
+
+
+    closeIfMouseOut() {
+      if (this.mouseOverWorkingPlace) {
+        return;
+      }
+      this.close();
+    },
+
   },
   watch: {
     value(newValue){

vue-tags-input/vue-tags-input.props.js

@@ -341,4 +341,23 @@ export default {
     default: true,
     type: Boolean,
   },
+  /**
+   * @description Show link <a>{{ placeholder }}</a> instead of <input :value="instead"> when input is unfocused
+   * @type {Boolean}
+   * @default false
+   */
+  linkInsteadOfUnfocusedInput: {
+    default: false,
+    type: Boolean,
+  },
+
+  /**
+   * @description Prevent adding new tags
+   * @type {Boolean}
+   * @default false
+   */
+  preventAdd: {
+    default: false,
+    type: Boolean,
+  },
 };

vue-tags-input/vue-tags-input.scss

@@ -175,3 +175,8 @@ div.vue-tags-input.disabled {
   background-color: $primary;
   color: #fff;
 }
+
+.ti-new-tab-button {
+  margin: 2px;
+  padding: 5px;
+}

vue-tags-input/vue-tags-input.vue

@@ -7,9 +7,12 @@
   <div
     class="vue-tags-input"
     :class="[{ 'ti-disabled': disabled }, { 'ti-focus': focused }]"
+    @mousedown="closeIfMouseOut"
   >
     <div class="ti-input">
       <ul v-if="tagsCopy" class="ti-tags">
+
+        <!-- Tag -->
         <li
           v-for="(tag, index) in tagsCopy"
           :key="index"
@@ -118,8 +121,20 @@
             />
           </div>
         </li>
+
+
+
+        <!-- Input -->
         <li class="ti-new-tag-input-wrapper">
+
+          <button
+            v-if="linkInsteadOfUnfocusedInput && !focused"
+            @click="open(true)"
+            class="ti-new-tab-button"
+          >{{ placeholder }}</button>
+
           <input
+            v-else
             ref="newTagInput"
             v-bind="$attrs"
             :class="[createClasses(newTag, tags, validation, isDuplicate)]"
@@ -142,15 +157,23 @@
             @blur="$emit('blur', $event)"
             @focus="focused = true; $emit('focus', $event)"
             @click="addOnlyFromAutocomplete ? false : selectedItem = null"
-          >
+            @mouseenter="mouseOverWorkingPlace = true"
+            @mouseleave="mouseOverWorkingPlace = false"
+          />
+
         </li>
       </ul>
     </div>
+
     <slot name="between-elements" />
+
+    <!-- Autocompletion -->
     <div
       v-if="autocompleteOpen"
       class="ti-autocomplete"
       @mouseout="selectedItem = null"
+      @mouseenter="mouseOverWorkingPlace = true"
+      @mouseleave="mouseOverWorkingPlace = false"
     >
       <slot name="autocomplete-header" />
       <ul>