@web-utils/component 2.0.9 → 2.0.11

package/dist/components/vue-tags-input/index.js

@@ -1,162 +1,186 @@
-import { n as l } from "../../chunks/5d4282fb.js";
-var h = function() {
-  var e = this, s = e.$createElement, a = e._self._c || s;
-  return a("div", {
+import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "tags-input-root"
-  }, [a("div", {
-    class: `${e.wrapperClass} tags-input`
-  }, [e._l(e.tags, function(t, i) {
-    return a("span", {
-      key: i,
+  }, [_c("div", {
+    class: `${_vm.wrapperClass} tags-input`
+  }, [_vm._l(_vm.tags, function(tag, index) {
+    return _c("span", {
+      key: index,
       staticClass: "el-tag el-tag--medium el-tag--light"
-    }, [a("span", {
+    }, [_c("span", {
       domProps: {
-        innerHTML: e._s(t.value)
+        "innerHTML": _vm._s(tag.value)
       }
-    }), a("i", {
+    }), _c("i", {
       staticClass: "tags-input-remove ov",
       attrs: {
-        href: "#"
+        "href": "#"
       },
       on: {
-        click: function(n) {
-          return n.preventDefault(), e.removeTag(i);
+        "click": function($event) {
+          $event.preventDefault();
+          return _vm.removeTag(index);
         }
       }
     })]);
-  }), a("input", {
+  }), _c("input", {
     directives: [{
       name: "model",
       rawName: "v-model",
-      value: e.input,
+      value: _vm.input,
       expression: "input"
     }],
     ref: "taginput",
     staticStyle: {
-      height: "28px",
+      "height": "28px",
       "margin-top": "5px",
       "line-height": "28px"
     },
     attrs: {
-      type: "text",
-      placeholder: e.placeholder
+      "type": "text",
+      "placeholder": _vm.placeholder
     },
     domProps: {
-      value: e.input
+      "value": _vm.input
     },
     on: {
-      keydown: [function(t) {
-        return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : (t.preventDefault(), e.tagFromInput(!1));
-      }, function(t) {
-        return !t.type.indexOf("key") && t.keyCode !== 8 ? null : e.removeLastTag.apply(null, arguments);
-      }, function(t) {
-        return !t.type.indexOf("key") && e._k(t.keyCode, "down", 40, t.key, ["Down", "ArrowDown"]) ? null : e.nextSearchResult.apply(null, arguments);
-      }, function(t) {
-        return !t.type.indexOf("key") && e._k(t.keyCode, "up", 38, t.key, ["Up", "ArrowUp"]) ? null : e.prevSearchResult.apply(null, arguments);
-      }, e.onKeyDown],
-      keyup: [e.onKeyUp, function(t) {
-        return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : e.clearSearchResults.apply(null, arguments);
+      "keydown": [function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+          return null;
+        $event.preventDefault();
+        return _vm.tagFromInput(false);
+      }, function($event) {
+        if (!$event.type.indexOf("key") && $event.keyCode !== 8)
+          return null;
+        return _vm.removeLastTag.apply(null, arguments);
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
+          return null;
+        return _vm.nextSearchResult.apply(null, arguments);
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
+          return null;
+        return _vm.prevSearchResult.apply(null, arguments);
+      }, _vm.onKeyDown],
+      "keyup": [_vm.onKeyUp, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+          return null;
+        return _vm.clearSearchResults.apply(null, arguments);
       }],
-      focus: e.onFocus,
-      blur: e.onBlur,
-      value: e.tags,
-      input: function(t) {
-        t.target.composing || (e.input = t.target.value);
+      "focus": _vm.onFocus,
+      "blur": _vm.onBlur,
+      "value": _vm.tags,
+      "input": function($event) {
+        if ($event.target.composing)
+          return;
+        _vm.input = $event.target.value;
       }
     }
-  }), e.elementId ? a("input", {
+  }), _vm.elementId ? _c("input", {
     directives: [{
       name: "model",
       rawName: "v-model",
-      value: e.hiddenInput,
+      value: _vm.hiddenInput,
       expression: "hiddenInput"
     }],
     attrs: {
-      id: e.elementId,
-      type: "hidden",
-      name: e.elementId
+      "id": _vm.elementId,
+      "type": "hidden",
+      "name": _vm.elementId
     },
     domProps: {
-      value: e.hiddenInput
+      "value": _vm.hiddenInput
     },
     on: {
-      input: function(t) {
-        t.target.composing || (e.hiddenInput = t.target.value);
+      "input": function($event) {
+        if ($event.target.composing)
+          return;
+        _vm.hiddenInput = $event.target.value;
       }
     }
-  }) : e._e()], 2), a("div", {
+  }) : _vm._e()], 2), _c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: e.searchResults.length,
+      value: _vm.searchResults.length,
       expression: "searchResults.length"
     }]
-  }, [e.typeaheadStyle === "badges" ? a("p", {
-    class: `typeahead-${e.typeaheadStyle}`
-  }, [e.typeaheadHideDiscard ? e._e() : a("span", {
+  }, [_vm.typeaheadStyle === "badges" ? _c("p", {
+    class: `typeahead-${_vm.typeaheadStyle}`
+  }, [!_vm.typeaheadHideDiscard ? _c("span", {
     staticClass: "tags-input-badge typeahead-hide-btn tags-input-typeahead-item-default",
     domProps: {
-      textContent: e._s(e.discardSearchText)
+      "textContent": _vm._s(_vm.discardSearchText)
     },
     on: {
-      click: function(t) {
-        return t.preventDefault(), e.clearSearchResults.apply(null, arguments);
+      "click": function($event) {
+        $event.preventDefault();
+        return _vm.clearSearchResults.apply(null, arguments);
       }
     }
-  }), e._l(e.searchResults, function(t, i) {
-    return a("span", {
-      key: i,
+  }) : _vm._e(), _vm._l(_vm.searchResults, function(tag, index) {
+    return _c("span", {
+      key: index,
       staticClass: "tags-input-badge",
       class: {
-        "tags-input-typeahead-item-default": i != e.searchSelection,
-        "tags-input-typeahead-item-highlighted-default": i == e.searchSelection
+        "tags-input-typeahead-item-default": index != _vm.searchSelection,
+        "tags-input-typeahead-item-highlighted-default": index == _vm.searchSelection
       },
       domProps: {
-        innerHTML: e._s(t.value)
+        "innerHTML": _vm._s(tag.value)
       },
       on: {
-        mouseover: function(n) {
-          e.searchSelection = i;
+        "mouseover": function($event) {
+          _vm.searchSelection = index;
         },
-        mousedown: function(n) {
-          return n.preventDefault(), e.tagFromSearchOnClick(t);
+        "mousedown": function($event) {
+          $event.preventDefault();
+          return _vm.tagFromSearchOnClick(tag);
         }
       }
     });
-  })], 2) : e.typeaheadStyle === "dropdown" ? a("ul", {
-    class: `typeahead-${e.typeaheadStyle}`
-  }, [e.typeaheadHideDiscard ? e._e() : a("li", {
+  })], 2) : _vm.typeaheadStyle === "dropdown" ? _c("ul", {
+    class: `typeahead-${_vm.typeaheadStyle}`
+  }, [!_vm.typeaheadHideDiscard ? _c("li", {
     staticClass: "tags-input-typeahead-item-default typeahead-hide-btn",
     domProps: {
-      textContent: e._s(e.discardSearchText)
+      "textContent": _vm._s(_vm.discardSearchText)
     },
     on: {
-      mousedown: function(t) {
-        return t.preventDefault(), e.clearSearchResults.apply(null, arguments);
+      "mousedown": function($event) {
+        $event.preventDefault();
+        return _vm.clearSearchResults.apply(null, arguments);
       }
     }
-  }), e._l(e.searchResults, function(t, i) {
-    return a("li", {
-      key: i,
+  }) : _vm._e(), _vm._l(_vm.searchResults, function(tag, index) {
+    return _c("li", {
+      key: index,
       class: {
-        "tags-input-typeahead-item-default": i != e.searchSelection,
-        "tags-input-typeahead-item-highlighted-default": i == e.searchSelection
+        "tags-input-typeahead-item-default": index != _vm.searchSelection,
+        "tags-input-typeahead-item-highlighted-default": index == _vm.searchSelection
       },
       domProps: {
-        innerHTML: e._s(t.value)
+        "innerHTML": _vm._s(tag.value)
       },
       on: {
-        mouseover: function(n) {
-          e.searchSelection = i;
+        "mouseover": function($event) {
+          _vm.searchSelection = index;
         },
-        mousedown: function(n) {
-          return n.preventDefault(), e.tagFromSearchOnClick(t);
+        "mousedown": function($event) {
+          $event.preventDefault();
+          return _vm.tagFromSearchOnClick(tag);
         }
       }
     });
-  })], 2) : e._e()])]);
-}, u = [];
-const o = {
+  })], 2) : _vm._e()])]);
+};
+var staticRenderFns = [];
+const VueTagsInput_vue_vue_type_style_index_0_lang = "";
+const __vue2_script = {
   name: "VueTagsInput",
   props: {
     elementId: {
@@ -164,15 +188,19 @@ const o = {
     },
     existingTags: {
       type: Array,
-      default: () => []
+      default: () => {
+        return [];
+      }
     },
     value: {
       type: Array,
-      default: () => []
+      default: () => {
+        return [];
+      }
     },
     typeahead: {
       type: Boolean,
-      default: !1
+      default: false
     },
     typeaheadStyle: {
       type: String,
@@ -188,11 +216,11 @@ const o = {
     },
     typeaheadAlwaysShow: {
       type: Boolean,
-      default: !1
+      default: false
     },
     typeaheadHideDiscard: {
       type: Boolean,
-      default: !1
+      default: false
     },
     placeholder: {
       type: String,
@@ -208,31 +236,31 @@ const o = {
     },
     onlyExistingTags: {
       type: Boolean,
-      default: !1
+      default: false
     },
     deleteOnBackspace: {
       type: Boolean,
-      default: !0
+      default: true
     },
     allowDuplicates: {
       type: Boolean,
-      default: !1
+      default: false
     },
     validate: {
       type: Function,
-      default: () => !0
+      default: () => true
     },
     addTagsOnComma: {
       type: Boolean,
-      default: !1
+      default: false
     },
     addTagsOnSpace: {
       type: Boolean,
-      default: !1
+      default: false
     },
     addTagsOnBlur: {
       type: Boolean,
-      default: !1
+      default: false
     },
     wrapperClass: {
       type: String,
@@ -240,19 +268,19 @@ const o = {
     },
     sortSearchResults: {
       type: Boolean,
-      default: !0
+      default: true
     },
     caseSensitiveTags: {
       type: Boolean,
-      default: !1
+      default: false
     },
     beforeAddingTag: {
       type: Function,
-      default: () => !0
+      default: () => true
     },
     beforeRemovingTag: {
       type: Function,
-      default: () => !0
+      default: () => true
     }
   },
   data() {
@@ -266,107 +294,180 @@ const o = {
     };
   },
   watch: {
-    input(e, s) {
-      this.$emit("input-changed", e), this.searchTag(!1), e.length && e !== s && (this.addTagsOnSpace && e.endsWith(" ") && (this.input = e.trim(), this.tagFromInput(!0)), this.addTagsOnComma && (e = e.trim(), e.endsWith(",") && (this.input = e.substring(0, e.length - 1), this.tagFromInput(!0))), this.$emit("change", e));
+    input(newVal, oldVal) {
+      this.$emit("input-changed", newVal);
+      this.searchTag(false);
+      if (newVal.length && newVal !== oldVal) {
+        if (this.addTagsOnSpace) {
+          if (newVal.endsWith(" ")) {
+            this.input = newVal.trim();
+            this.tagFromInput(true);
+          }
+        }
+        if (this.addTagsOnComma) {
+          newVal = newVal.trim();
+          if (newVal.endsWith(",")) {
+            this.input = newVal.substring(0, newVal.length - 1);
+            this.tagFromInput(true);
+          }
+        }
+        this.$emit("change", newVal);
+      }
     },
     tags() {
-      this.hiddenInput = JSON.stringify(this.tags), this.$emit("input", this.tags);
+      this.hiddenInput = JSON.stringify(this.tags);
+      this.$emit("input", this.tags);
     },
     value() {
       this.tagsFromValue();
     },
-    typeaheadAlwaysShow(e) {
-      e ? this.searchTag(!1) : this.clearSearchResults();
+    typeaheadAlwaysShow(newValue) {
+      if (newValue) {
+        this.searchTag(false);
+      } else {
+        this.clearSearchResults();
+      }
     }
   },
   created() {
-    this.tagsFromValue(), this.typeaheadAlwaysShow && this.searchTag(!1), this.$emit("initialized");
+    this.tagsFromValue();
+    if (this.typeaheadAlwaysShow) {
+      this.searchTag(false);
+    }
+    this.$emit("initialized");
   },
   methods: {
-    escapeRegExp(e) {
-      return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    },
-    tagFromInput(e = !1) {
-      if (this.searchResults.length && this.searchSelection >= 0 && !e)
-        this.tagFromSearch(this.searchResults[this.searchSelection]), this.input = "";
-      else {
-        const s = this.input.trim();
-        if (!this.onlyExistingTags && s.length && this.validate(s)) {
+    escapeRegExp(string) {
+      return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    },
+    tagFromInput(ignoreSearchResults = false) {
+      if (this.searchResults.length && this.searchSelection >= 0 && !ignoreSearchResults) {
+        this.tagFromSearch(this.searchResults[this.searchSelection]);
+        this.input = "";
+      } else {
+        const text = this.input.trim();
+        if (!this.onlyExistingTags && text.length && this.validate(text)) {
           this.input = "";
-          let a = {
+          let newTag = {
             key: "",
-            value: s
+            value: text
           };
-          const t = this.escapeRegExp(this.caseSensitiveTags ? a.value : a.value.toLowerCase());
-          for (const i of this.existingTags) {
-            const n = this.caseSensitiveTags ? i.value : i.value.toLowerCase();
-            if (t === n) {
-              a = Object.assign({}, i);
+          const searchQuery = this.escapeRegExp(this.caseSensitiveTags ? newTag.value : newTag.value.toLowerCase());
+          for (const tag of this.existingTags) {
+            const compareable = this.caseSensitiveTags ? tag.value : tag.value.toLowerCase();
+            if (searchQuery === compareable) {
+              newTag = Object.assign({}, tag);
               break;
             }
           }
-          this.addTag(a);
+          this.addTag(newTag);
         }
       }
     },
-    tagFromSearchOnClick(e) {
-      this.tagFromSearch(e), this.$refs.taginput.blur();
+    tagFromSearchOnClick(tag) {
+      this.tagFromSearch(tag);
+      this.$refs.taginput.blur();
     },
-    tagFromSearch(e) {
-      this.clearSearchResults(), this.addTag(e), this.$nextTick(() => {
-        this.input = "", this.oldInput = "";
+    tagFromSearch(tag) {
+      this.clearSearchResults();
+      this.addTag(tag);
+      this.$nextTick(() => {
+        this.input = "";
+        this.oldInput = "";
       });
     },
-    addTag(e) {
-      if (!this.beforeAddingTag(e))
-        return !1;
-      if (this.limit > 0 && this.tags.length >= this.limit)
-        return this.$emit("limit-reached"), !1;
-      this.tagSelected(e) || (this.tags.push(e), this.$nextTick(() => {
-        this.$emit("tag-added", e), this.$emit("tags-updated");
-      }));
+    addTag(tag) {
+      if (!this.beforeAddingTag(tag)) {
+        return false;
+      }
+      if (this.limit > 0 && this.tags.length >= this.limit) {
+        this.$emit("limit-reached");
+        return false;
+      }
+      if (!this.tagSelected(tag)) {
+        this.tags.push(tag);
+        this.$nextTick(() => {
+          this.$emit("tag-added", tag);
+          this.$emit("tags-updated");
+        });
+      }
     },
     removeLastTag() {
-      !this.input.length && this.deleteOnBackspace && this.tags.length && this.removeTag(this.tags.length - 1);
-    },
-    removeTag(e) {
-      const s = this.tags[e];
-      if (!this.beforeRemovingTag(s))
-        return !1;
-      this.tags.splice(e, 1), this.$nextTick(() => {
-        this.$emit("tag-removed", s), this.$emit("tags-updated"), this.typeaheadAlwaysShow && this.searchTag();
+      if (!this.input.length && this.deleteOnBackspace && this.tags.length) {
+        this.removeTag(this.tags.length - 1);
+      }
+    },
+    removeTag(index) {
+      const tag = this.tags[index];
+      if (!this.beforeRemovingTag(tag)) {
+        return false;
+      }
+      this.tags.splice(index, 1);
+      this.$nextTick(() => {
+        this.$emit("tag-removed", tag);
+        this.$emit("tags-updated");
+        if (this.typeaheadAlwaysShow) {
+          this.searchTag();
+        }
       });
     },
     searchTag() {
-      if (this.typeahead !== !0)
-        return !1;
+      if (this.typeahead !== true) {
+        return false;
+      }
       if (this.oldInput !== this.input || !this.searchResults.length && this.typeaheadActivationThreshold === 0 || this.typeaheadAlwaysShow) {
-        this.searchResults = [], this.searchSelection = 0;
-        const e = this.input.trim();
-        if (e.length && e.length >= this.typeaheadActivationThreshold || this.typeaheadActivationThreshold === 0 || this.typeaheadAlwaysShow) {
-          const s = this.escapeRegExp(this.caseSensitiveTags ? e : e.toLowerCase());
-          for (const a of this.existingTags)
-            (this.caseSensitiveTags ? a.value : a.value.toLowerCase()).search(s) > -1 && !this.tagSelected(a) && this.searchResults.push(a);
-          this.sortSearchResults && this.searchResults.sort((a, t) => a.value < t.value ? -1 : a.value > t.value ? 1 : 0), this.typeaheadMaxResults > 0 && (this.searchResults = this.searchResults.slice(0, this.typeaheadMaxResults));
+        this.searchResults = [];
+        this.searchSelection = 0;
+        const input = this.input.trim();
+        if (input.length && input.length >= this.typeaheadActivationThreshold || this.typeaheadActivationThreshold === 0 || this.typeaheadAlwaysShow) {
+          const searchQuery = this.escapeRegExp(this.caseSensitiveTags ? input : input.toLowerCase());
+          for (const tag of this.existingTags) {
+            const compareable = this.caseSensitiveTags ? tag.value : tag.value.toLowerCase();
+            if (compareable.search(searchQuery) > -1 && !this.tagSelected(tag)) {
+              this.searchResults.push(tag);
+            }
+          }
+          if (this.sortSearchResults) {
+            this.searchResults.sort((a, b) => {
+              if (a.value < b.value)
+                return -1;
+              if (a.value > b.value)
+                return 1;
+              return 0;
+            });
+          }
+          if (this.typeaheadMaxResults > 0) {
+            this.searchResults = this.searchResults.slice(0, this.typeaheadMaxResults);
+          }
         }
         this.oldInput = this.input;
       }
     },
     hideTypeahead() {
-      this.input.length || this.$nextTick(() => {
-        this.clearSearchResults();
-      });
+      if (!this.input.length) {
+        this.$nextTick(() => {
+          this.clearSearchResults();
+        });
+      }
     },
     nextSearchResult() {
-      this.searchSelection + 1 <= this.searchResults.length - 1 && this.searchSelection++;
+      if (this.searchSelection + 1 <= this.searchResults.length - 1) {
+        this.searchSelection++;
+      }
     },
     prevSearchResult() {
-      this.searchSelection > 0 && this.searchSelection--;
+      if (this.searchSelection > 0) {
+        this.searchSelection--;
+      }
     },
     clearSearchResults() {
-      this.searchResults = [], this.searchSelection = 0, this.typeaheadAlwaysShow && this.$nextTick(() => {
-        this.searchTag();
-      });
+      this.searchResults = [];
+      this.searchSelection = 0;
+      if (this.typeaheadAlwaysShow) {
+        this.$nextTick(() => {
+          this.searchTag();
+        });
+      }
     },
     clearTags() {
       this.tags.splice(0, this.tags.length);
@@ -377,28 +478,36 @@ const o = {
           console.error("Voerro Tags Input: the v-model value must be an array!");
           return;
         }
-        const e = this.value;
-        if (this.tags === e)
+        const tags = this.value;
+        if (this.tags === tags) {
           return;
+        }
         this.clearTags();
-        for (const s of e)
-          this.addTag(s);
+        for (const tag of tags) {
+          this.addTag(tag);
+        }
       } else {
-        if (this.tags.length === 0)
+        if (this.tags.length === 0) {
           return;
+        }
         this.clearTags();
       }
     },
-    tagSelected(e) {
-      if (this.allowDuplicates || !e)
-        return !1;
-      const s = this.escapeRegExp(this.caseSensitiveTags ? e.value : e.value.toLowerCase());
-      for (const a of this.tags) {
-        const t = this.caseSensitiveTags ? a.value : a.value.toLowerCase();
-        if (a.key === e.key && t.search(s) > -1)
-          return !0;
+    tagSelected(tag) {
+      if (this.allowDuplicates) {
+        return false;
+      }
+      if (!tag) {
+        return false;
+      }
+      const searchQuery = this.escapeRegExp(this.caseSensitiveTags ? tag.value : tag.value.toLowerCase());
+      for (const selectedTag of this.tags) {
+        const compareable = this.caseSensitiveTags ? selectedTag.value : selectedTag.value.toLowerCase();
+        if (selectedTag.key === tag.key && compareable.search(searchQuery) > -1) {
+          return true;
+        }
       }
-      return !1;
+      return false;
     },
     clearInput() {
       this.input = "";
@@ -410,30 +519,41 @@ const o = {
       this.$emit("keydown", e);
     },
     onFocus(e) {
-      this.$emit("focus", e), this.searchTag();
+      this.$emit("focus", e);
+      this.searchTag();
     },
     onBlur(e) {
-      this.$emit("blur", e), this.addTagsOnBlur && this.tagFromInput(!0), this.typeaheadAlwaysShow ? this.searchTag() : this.hideTypeahead();
+      this.$emit("blur", e);
+      if (this.addTagsOnBlur) {
+        this.tagFromInput(true);
+      }
+      if (!this.typeaheadAlwaysShow) {
+        this.hideTypeahead();
+      } else {
+        this.searchTag();
+      }
     }
   }
-}, r = {};
-var c = /* @__PURE__ */ l(
-  o,
-  h,
-  u,
-  !1,
-  p,
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
+  false,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function p(e) {
-  for (let s in r)
-    this[s] = r[s];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
 }
-const g = /* @__PURE__ */ function() {
-  return c.exports;
+const VueTagsInput = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  g as default
+  VueTagsInput as default
 };