@web-utils/component 2.7.36 → 2.7.37

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

@@ -1,673 +0,0 @@
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    staticClass: "tags-input-root"
-  }, [_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"
-    }, [_c("span", {
-      domProps: {
-        "innerHTML": _vm._s(tag.value)
-      }
-    }), _c("i", {
-      staticClass: "tags-input-remove ov",
-      attrs: {
-        "href": "#"
-      },
-      on: {
-        "click": function($event) {
-          $event.preventDefault();
-          return _vm.removeTag(index);
-        }
-      }
-    })]);
-  }), _c("input", {
-    directives: [{
-      name: "model",
-      rawName: "v-model",
-      value: _vm.input,
-      expression: "input"
-    }],
-    ref: "taginput",
-    staticStyle: {
-      "height": "28px",
-      "margin-top": "5px",
-      "line-height": "28px"
-    },
-    attrs: {
-      "type": "text",
-      "placeholder": _vm.placeholder
-    },
-    domProps: {
-      "value": _vm.input
-    },
-    on: {
-      "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": _vm.onFocus,
-      "blur": _vm.onBlur,
-      "value": _vm.tags,
-      "input": function($event) {
-        if ($event.target.composing)
-          return;
-        _vm.input = $event.target.value;
-      }
-    }
-  }), _vm.elementId ? _c("input", {
-    directives: [{
-      name: "model",
-      rawName: "v-model",
-      value: _vm.hiddenInput,
-      expression: "hiddenInput"
-    }],
-    attrs: {
-      "id": _vm.elementId,
-      "type": "hidden",
-      "name": _vm.elementId
-    },
-    domProps: {
-      "value": _vm.hiddenInput
-    },
-    on: {
-      "input": function($event) {
-        if ($event.target.composing)
-          return;
-        _vm.hiddenInput = $event.target.value;
-      }
-    }
-  }) : _vm._e()], 2), _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.searchResults.length,
-      expression: "searchResults.length"
-    }]
-  }, [_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": _vm._s(_vm.discardSearchText)
-    },
-    on: {
-      "click": function($event) {
-        $event.preventDefault();
-        return _vm.clearSearchResults.apply(null, arguments);
-      }
-    }
-  }) : _vm._e(), _vm._l(_vm.searchResults, function(tag, index) {
-    return _c("span", {
-      key: index,
-      staticClass: "tags-input-badge",
-      class: {
-        "tags-input-typeahead-item-default": index != _vm.searchSelection,
-        "tags-input-typeahead-item-highlighted-default": index == _vm.searchSelection
-      },
-      domProps: {
-        "innerHTML": _vm._s(tag.value)
-      },
-      on: {
-        "mouseover": function($event) {
-          _vm.searchSelection = index;
-        },
-        "mousedown": function($event) {
-          $event.preventDefault();
-          return _vm.tagFromSearchOnClick(tag);
-        }
-      }
-    });
-  })], 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": _vm._s(_vm.discardSearchText)
-    },
-    on: {
-      "mousedown": function($event) {
-        $event.preventDefault();
-        return _vm.clearSearchResults.apply(null, arguments);
-      }
-    }
-  }) : _vm._e(), _vm._l(_vm.searchResults, function(tag, index) {
-    return _c("li", {
-      key: index,
-      class: {
-        "tags-input-typeahead-item-default": index != _vm.searchSelection,
-        "tags-input-typeahead-item-highlighted-default": index == _vm.searchSelection
-      },
-      domProps: {
-        "innerHTML": _vm._s(tag.value)
-      },
-      on: {
-        "mouseover": function($event) {
-          _vm.searchSelection = index;
-        },
-        "mousedown": function($event) {
-          $event.preventDefault();
-          return _vm.tagFromSearchOnClick(tag);
-        }
-      }
-    });
-  })], 2) : _vm._e()])]);
-};
-var staticRenderFns = [];
-const VueTagsInput_vue_vue_type_style_index_0_lang = "";
-const __vue2_script = {
-  name: "VueTagsInput",
-  props: {
-    elementId: {
-      type: String
-    },
-    existingTags: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    value: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    typeahead: {
-      type: Boolean,
-      default: false
-    },
-    typeaheadStyle: {
-      type: String,
-      default: "badges"
-    },
-    typeaheadActivationThreshold: {
-      type: Number,
-      default: 1
-    },
-    typeaheadMaxResults: {
-      type: Number,
-      default: 0
-    },
-    typeaheadAlwaysShow: {
-      type: Boolean,
-      default: false
-    },
-    typeaheadHideDiscard: {
-      type: Boolean,
-      default: false
-    },
-    placeholder: {
-      type: String,
-      default: "请输入..."
-    },
-    discardSearchText: {
-      type: String,
-      default: "取消"
-    },
-    limit: {
-      type: Number,
-      default: 0
-    },
-    onlyExistingTags: {
-      type: Boolean,
-      default: false
-    },
-    deleteOnBackspace: {
-      type: Boolean,
-      default: true
-    },
-    allowDuplicates: {
-      type: Boolean,
-      default: false
-    },
-    validate: {
-      type: Function,
-      default: () => true
-    },
-    addTagsOnComma: {
-      type: Boolean,
-      default: false
-    },
-    addTagsOnSpace: {
-      type: Boolean,
-      default: false
-    },
-    addTagsOnBlur: {
-      type: Boolean,
-      default: false
-    },
-    wrapperClass: {
-      type: String,
-      default: "tags-input-wrapper-default"
-    },
-    sortSearchResults: {
-      type: Boolean,
-      default: true
-    },
-    caseSensitiveTags: {
-      type: Boolean,
-      default: false
-    },
-    beforeAddingTag: {
-      type: Function,
-      default: () => true
-    },
-    beforeRemovingTag: {
-      type: Function,
-      default: () => true
-    }
-  },
-  data() {
-    return {
-      tags: [],
-      input: "",
-      oldInput: "",
-      hiddenInput: "",
-      searchResults: [],
-      searchSelection: 0
-    };
-  },
-  watch: {
-    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);
-    },
-    value() {
-      this.tagsFromValue();
-    },
-    typeaheadAlwaysShow(newValue) {
-      if (newValue) {
-        this.searchTag(false);
-      } else {
-        this.clearSearchResults();
-      }
-    }
-  },
-  created() {
-    this.tagsFromValue();
-    if (this.typeaheadAlwaysShow) {
-      this.searchTag(false);
-    }
-    this.$emit("initialized");
-  },
-  methods: {
-    /**
-     * Remove reserved regex characters from a string so that they don't
-     * affect search results
-     *
-     * @param string
-     * @returns String
-     */
-    escapeRegExp(string) {
-      return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    },
-    /**
-     * Add a tag whether from user input or from search results (typeahead)
-     *
-     * @param ignoreSearchResults
-     * @returns void
-     */
-    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 newTag = {
-            key: "",
-            value: text
-          };
-          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(newTag);
-        }
-      }
-    },
-    /**
-     * Add a tag from search results when a user clicks on it
-     *
-     * @param tag
-     * @returns void
-     */
-    tagFromSearchOnClick(tag) {
-      this.tagFromSearch(tag);
-      this.$refs.taginput.blur();
-    },
-    /**
-     * Add the selected tag from the search results.
-     * Clear search results.
-     * Clear user input.
-     *
-     * @param tag
-     * @return void
-     */
-    tagFromSearch(tag) {
-      this.clearSearchResults();
-      this.addTag(tag);
-      this.$nextTick(() => {
-        this.input = "";
-        this.oldInput = "";
-      });
-    },
-    /**
-     * Add/Select a tag
-     *
-     * @param tag
-     * @returns void | Boolean
-     */
-    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");
-        });
-      }
-    },
-    /**
-     * Remove the last tag in the tags array.
-     *
-     * @returns void
-     */
-    removeLastTag() {
-      if (!this.input.length && this.deleteOnBackspace && this.tags.length) {
-        this.removeTag(this.tags.length - 1);
-      }
-    },
-    /**
-     * Remove the selected tag at the specified index.
-     *
-     * @param index
-     * @returns void
-     */
-    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();
-        }
-      });
-    },
-    /**
-     * Search the currently entered text in the list of existing tags
-     *
-     * @returns void | Boolean
-     */
-    searchTag() {
-      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 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;
-      }
-    },
-    /**
-     * Hide the typeahead if there's nothing intered into the input field.
-     *
-     * @returns void
-     */
-    hideTypeahead() {
-      if (!this.input.length) {
-        this.$nextTick(() => {
-          this.clearSearchResults();
-        });
-      }
-    },
-    /**
-     * Select the next search result in typeahead.
-     *
-     * @returns void
-     */
-    nextSearchResult() {
-      if (this.searchSelection + 1 <= this.searchResults.length - 1) {
-        this.searchSelection++;
-      }
-    },
-    /**
-     * Select the previous search result in typeahead.
-     *
-     * @returns void
-     */
-    prevSearchResult() {
-      if (this.searchSelection > 0) {
-        this.searchSelection--;
-      }
-    },
-    /**
-     * Clear/Empty the search results.
-     *
-     * @reutrns void
-     */
-    clearSearchResults() {
-      this.searchResults = [];
-      this.searchSelection = 0;
-      if (this.typeaheadAlwaysShow) {
-        this.$nextTick(() => {
-          this.searchTag();
-        });
-      }
-    },
-    /**
-     * Clear the list of selected tags.
-     *
-     * @returns void
-     */
-    clearTags() {
-      this.tags.splice(0, this.tags.length);
-    },
-    /**
-     * Replace the currently selected tags with the tags from the value.
-     *
-     * @returns void
-     */
-    tagsFromValue() {
-      if (this.value && this.value.length) {
-        if (!Array.isArray(this.value)) {
-          console.error("Voerro Tags Input: the v-model value must be an array!");
-          return;
-        }
-        const tags = this.value;
-        if (this.tags === tags) {
-          return;
-        }
-        this.clearTags();
-        for (const tag of tags) {
-          this.addTag(tag);
-        }
-      } else {
-        if (this.tags.length === 0) {
-          return;
-        }
-        this.clearTags();
-      }
-    },
-    /**
-     * Check if a tag is already selected.
-     *
-     * @param tag
-     * @returns Boolean
-     */
-    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 false;
-    },
-    /**
-     * Clear the input.
-     *
-     * @returns void
-     */
-    clearInput() {
-      this.input = "";
-    },
-    /**
-     * Process all the keyup events.
-     *
-     * @param e
-     * @returns void
-     */
-    onKeyUp(e) {
-      this.$emit("keyup", e);
-    },
-    /**
-     * Process all the keydown events.
-     *
-     * @param e
-     * @returns void
-     */
-    onKeyDown(e) {
-      this.$emit("keydown", e);
-    },
-    /**
-     * Process the onfocus event.
-     *
-     * @param e
-     * @returns void
-     */
-    onFocus(e) {
-      this.$emit("focus", e);
-      this.searchTag();
-    },
-    /**
-     * Process the onblur event.
-     *
-     * @param e
-     * @returns void
-     */
-    onBlur(e) {
-      this.$emit("blur", e);
-      if (this.addTagsOnBlur) {
-        this.tagFromInput(true);
-      }
-      if (!this.typeaheadAlwaysShow) {
-        this.hideTypeahead();
-      } else {
-        this.searchTag();
-      }
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const VueTagsInput = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  VueTagsInput as default
-};