@web-utils/component 2.0.13 → 2.2.0

package/vue-tags-input/index.mjs

@@ -0,0 +1,553 @@
+import { n as l } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var h = function() {
+  var e = this, s = e.$createElement, a = e._self._c || s;
+  return a("div", {
+    staticClass: "tags-input-root"
+  }, [a("div", {
+    class: `${e.wrapperClass} tags-input`
+  }, [e._l(e.tags, function(t, i) {
+    return a("span", {
+      key: i,
+      staticClass: "el-tag el-tag--medium el-tag--light"
+    }, [a("span", {
+      domProps: {
+        innerHTML: e._s(t.value)
+      }
+    }), a("i", {
+      staticClass: "tags-input-remove ov",
+      attrs: {
+        href: "#"
+      },
+      on: {
+        click: function(n) {
+          return n.preventDefault(), e.removeTag(i);
+        }
+      }
+    })]);
+  }), a("input", {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: e.input,
+      expression: "input"
+    }],
+    ref: "taginput",
+    staticStyle: {
+      height: "28px",
+      "margin-top": "5px",
+      "line-height": "28px"
+    },
+    attrs: {
+      type: "text",
+      placeholder: e.placeholder
+    },
+    domProps: {
+      value: e.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);
+      }],
+      focus: e.onFocus,
+      blur: e.onBlur,
+      value: e.tags,
+      input: function(t) {
+        t.target.composing || (e.input = t.target.value);
+      }
+    }
+  }), e.elementId ? a("input", {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: e.hiddenInput,
+      expression: "hiddenInput"
+    }],
+    attrs: {
+      id: e.elementId,
+      type: "hidden",
+      name: e.elementId
+    },
+    domProps: {
+      value: e.hiddenInput
+    },
+    on: {
+      input: function(t) {
+        t.target.composing || (e.hiddenInput = t.target.value);
+      }
+    }
+  }) : e._e()], 2), a("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: e.searchResults.length,
+      expression: "searchResults.length"
+    }]
+  }, [e.typeaheadStyle === "badges" ? a("p", {
+    class: `typeahead-${e.typeaheadStyle}`
+  }, [e.typeaheadHideDiscard ? e._e() : a("span", {
+    staticClass: "tags-input-badge typeahead-hide-btn tags-input-typeahead-item-default",
+    domProps: {
+      textContent: e._s(e.discardSearchText)
+    },
+    on: {
+      click: function(t) {
+        return t.preventDefault(), e.clearSearchResults.apply(null, arguments);
+      }
+    }
+  }), e._l(e.searchResults, function(t, i) {
+    return a("span", {
+      key: i,
+      staticClass: "tags-input-badge",
+      class: {
+        "tags-input-typeahead-item-default": i != e.searchSelection,
+        "tags-input-typeahead-item-highlighted-default": i == e.searchSelection
+      },
+      domProps: {
+        innerHTML: e._s(t.value)
+      },
+      on: {
+        mouseover: function(n) {
+          e.searchSelection = i;
+        },
+        mousedown: function(n) {
+          return n.preventDefault(), e.tagFromSearchOnClick(t);
+        }
+      }
+    });
+  })], 2) : e.typeaheadStyle === "dropdown" ? a("ul", {
+    class: `typeahead-${e.typeaheadStyle}`
+  }, [e.typeaheadHideDiscard ? e._e() : a("li", {
+    staticClass: "tags-input-typeahead-item-default typeahead-hide-btn",
+    domProps: {
+      textContent: e._s(e.discardSearchText)
+    },
+    on: {
+      mousedown: function(t) {
+        return t.preventDefault(), e.clearSearchResults.apply(null, arguments);
+      }
+    }
+  }), e._l(e.searchResults, function(t, i) {
+    return a("li", {
+      key: i,
+      class: {
+        "tags-input-typeahead-item-default": i != e.searchSelection,
+        "tags-input-typeahead-item-highlighted-default": i == e.searchSelection
+      },
+      domProps: {
+        innerHTML: e._s(t.value)
+      },
+      on: {
+        mouseover: function(n) {
+          e.searchSelection = i;
+        },
+        mousedown: function(n) {
+          return n.preventDefault(), e.tagFromSearchOnClick(t);
+        }
+      }
+    });
+  })], 2) : e._e()])]);
+}, u = [];
+const o = {
+  name: "VueTagsInput",
+  props: {
+    elementId: {
+      type: String
+    },
+    existingTags: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    typeahead: {
+      type: Boolean,
+      default: !1
+    },
+    typeaheadStyle: {
+      type: String,
+      default: "badges"
+    },
+    typeaheadActivationThreshold: {
+      type: Number,
+      default: 1
+    },
+    typeaheadMaxResults: {
+      type: Number,
+      default: 0
+    },
+    typeaheadAlwaysShow: {
+      type: Boolean,
+      default: !1
+    },
+    typeaheadHideDiscard: {
+      type: Boolean,
+      default: !1
+    },
+    placeholder: {
+      type: String,
+      default: "请输入..."
+    },
+    discardSearchText: {
+      type: String,
+      default: "取消"
+    },
+    limit: {
+      type: Number,
+      default: 0
+    },
+    onlyExistingTags: {
+      type: Boolean,
+      default: !1
+    },
+    deleteOnBackspace: {
+      type: Boolean,
+      default: !0
+    },
+    allowDuplicates: {
+      type: Boolean,
+      default: !1
+    },
+    validate: {
+      type: Function,
+      default: () => !0
+    },
+    addTagsOnComma: {
+      type: Boolean,
+      default: !1
+    },
+    addTagsOnSpace: {
+      type: Boolean,
+      default: !1
+    },
+    addTagsOnBlur: {
+      type: Boolean,
+      default: !1
+    },
+    wrapperClass: {
+      type: String,
+      default: "tags-input-wrapper-default"
+    },
+    sortSearchResults: {
+      type: Boolean,
+      default: !0
+    },
+    caseSensitiveTags: {
+      type: Boolean,
+      default: !1
+    },
+    beforeAddingTag: {
+      type: Function,
+      default: () => !0
+    },
+    beforeRemovingTag: {
+      type: Function,
+      default: () => !0
+    }
+  },
+  data() {
+    return {
+      tags: [],
+      input: "",
+      oldInput: "",
+      hiddenInput: "",
+      searchResults: [],
+      searchSelection: 0
+    };
+  },
+  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));
+    },
+    tags() {
+      this.hiddenInput = JSON.stringify(this.tags), this.$emit("input", this.tags);
+    },
+    value() {
+      this.tagsFromValue();
+    },
+    typeaheadAlwaysShow(e) {
+      e ? this.searchTag(!1) : this.clearSearchResults();
+    }
+  },
+  created() {
+    this.tagsFromValue(), this.typeaheadAlwaysShow && this.searchTag(!1), this.$emit("initialized");
+  },
+  methods: {
+    /**
+     * Remove reserved regex characters from a string so that they don't
+     * affect search results
+     *
+     * @param string
+     * @returns String
+     */
+    escapeRegExp(e) {
+      return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    },
+    /**
+     * Add a tag whether from user input or from search results (typeahead)
+     *
+     * @param ignoreSearchResults
+     * @returns void
+     */
+    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)) {
+          this.input = "";
+          let a = {
+            key: "",
+            value: s
+          };
+          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);
+              break;
+            }
+          }
+          this.addTag(a);
+        }
+      }
+    },
+    /**
+     * Add a tag from search results when a user clicks on it
+     *
+     * @param tag
+     * @returns void
+     */
+    tagFromSearchOnClick(e) {
+      this.tagFromSearch(e), this.$refs.taginput.blur();
+    },
+    /**
+     * Add the selected tag from the search results.
+     * Clear search results.
+     * Clear user input.
+     *
+     * @param tag
+     * @return void
+     */
+    tagFromSearch(e) {
+      this.clearSearchResults(), this.addTag(e), this.$nextTick(() => {
+        this.input = "", this.oldInput = "";
+      });
+    },
+    /**
+     * Add/Select a tag
+     *
+     * @param tag
+     * @returns void | Boolean
+     */
+    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");
+      }));
+    },
+    /**
+     * Remove the last tag in the tags array.
+     *
+     * @returns void
+     */
+    removeLastTag() {
+      !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(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();
+      });
+    },
+    /**
+     * Search the currently entered text in the list of existing tags
+     *
+     * @returns void | Boolean
+     */
+    searchTag() {
+      if (this.typeahead !== !0)
+        return !1;
+      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.oldInput = this.input;
+      }
+    },
+    /**
+     * Hide the typeahead if there's nothing intered into the input field.
+     *
+     * @returns void
+     */
+    hideTypeahead() {
+      this.input.length || this.$nextTick(() => {
+        this.clearSearchResults();
+      });
+    },
+    /**
+     * Select the next search result in typeahead.
+     *
+     * @returns void
+     */
+    nextSearchResult() {
+      this.searchSelection + 1 <= this.searchResults.length - 1 && this.searchSelection++;
+    },
+    /**
+     * Select the previous search result in typeahead.
+     *
+     * @returns void
+     */
+    prevSearchResult() {
+      this.searchSelection > 0 && this.searchSelection--;
+    },
+    /**
+     * Clear/Empty the search results.
+     *
+     * @reutrns void
+     */
+    clearSearchResults() {
+      this.searchResults = [], this.searchSelection = 0, 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 e = this.value;
+        if (this.tags === e)
+          return;
+        this.clearTags();
+        for (const s of e)
+          this.addTag(s);
+      } else {
+        if (this.tags.length === 0)
+          return;
+        this.clearTags();
+      }
+    },
+    /**
+     * Check if a tag is already selected.
+     *
+     * @param tag
+     * @returns Boolean
+     */
+    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;
+      }
+      return !1;
+    },
+    /**
+     * 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), this.addTagsOnBlur && this.tagFromInput(!0), this.typeaheadAlwaysShow ? this.searchTag() : this.hideTypeahead();
+    }
+  }
+}, r = {};
+var c = /* @__PURE__ */ l(
+  o,
+  h,
+  u,
+  !1,
+  p,
+  null,
+  null,
+  null
+);
+function p(e) {
+  for (let s in r)
+    this[s] = r[s];
+}
+const g = /* @__PURE__ */ function() {
+  return c.exports;
+}();
+export {
+  g as default
+};

package/vue-tags-input/style.css

@@ -0,0 +1 @@
+.tags-input{flex-wrap:wrap;align-items:center;display:flex}.tags-input input{background:0 0;border:none;flex:auto}.tags-input input:focus{outline:none}.tags-input input[type=text]{color:#495057}.tags-input-wrapper-default{background:#fff;border:1px solid #dbdbdb;border-radius:.25rem;padding:.5rem .25rem}.tags-input span{margin-right:.3rem}.tags-input-remove{cursor:pointer;width:.5rem;height:.5rem;display:inline-block;position:relative}.tags-input-remove:before,.tags-input-remove:after{content:"";background:#ea0000;width:100%;height:2px;margin-top:-1px;position:absolute;top:50%;left:0}.tags-input-remove:before{transform:rotate(45deg)}.tags-input-remove:after{transform:rotate(-45deg)}.tags-input-badge{white-space:nowrap;text-align:center;vertical-align:baseline;border-radius:.25rem;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;display:inline-block}.tags-input-badge-pill{border-radius:10rem;padding-left:.6em;padding-right:.6em}.tags-input-badge-selected-default{color:#212529;background-color:#f0f1f2}.typeahead-hide-btn{color:#999!important}.typeahead-badges>span{cursor:pointer;margin-right:.3rem}.typeahead-dropdown{z-index:1000;border-radius:4px;width:100%;max-height:150px;margin:0;padding:0;list-style-type:none;position:absolute;top:50px;right:0;overflow:auto;box-shadow:0 0 5px #d7d7d7}.typeahead-dropdown li{cursor:pointer;padding:.25rem 1rem}.tags-input-typeahead-item-default{color:gray;background-color:#fff}.tags-input-typeahead-item-highlighted-default{background-color:#f5f7fa}