@web-utils/component 2.7.36 → 2.8.0

package/vue-tags-input/index.mjs

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

package/watermark/index.mjs

@@ -0,0 +1,95 @@
+var d = Object.defineProperty, g = Object.defineProperties;
+var y = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var x = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
+var u = (n, t, e) => t in n ? d(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e, o = (n, t) => {
+  for (var e in t || (t = {}))
+    x.call(t, e) && u(n, e, t[e]);
+  if (s)
+    for (var e of s(t))
+      v.call(t, e) && u(n, e, t[e]);
+  return n;
+}, c = (n, t) => g(n, y(t));
+import { g as b } from "../chunks/index.57f871af.mjs";
+import { n as S } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+const k = {
+  name: "Watermark",
+  functional: !0,
+  props: {
+    /**
+     * 水印文案
+     */
+    text: {
+      type: String,
+      default: ""
+    },
+    /**
+     * 宽度
+     */
+    width: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * 高度
+     */
+    height: {
+      type: Number,
+      default: 150
+    },
+    /**
+     * 旋转角度 0 到 360
+     */
+    rotate: {
+      type: Number,
+      default: -30
+    },
+    /**
+     * 文字颜色
+     */
+    color: {
+      type: String,
+      default: "rgba(0,0,0,0.15)"
+    },
+    /**
+     * 背景颜色
+     */
+    backgroundColor: {
+      type: String,
+      default: "rgba(0,0,0,0)"
+    }
+  },
+  render(n, { props: { width: t, height: e, text: _, backgroundColor: p, rotate: f, color: m }, data: l }) {
+    const a = document.createElement("canvas");
+    a.width = t, a.height = e;
+    const r = a.getContext("2d");
+    return r.font = "15px Verdana", r.fillStyle = p, r.fillRect(0, 0, t, e), r.translate(t / 2, e / 2), r.rotate(f * Math.PI / 180), r.fillStyle = m, r.textAlign = "center", r.textBaseline = "middle", r.fillText(_, 0, 0), n("div", {
+      class: b(l.class, `watermark ${l.staticClass || ""}`),
+      style: c(o(o({}, l.style || {}), l.staticStyle || {}), {
+        background: `url(${a.toDataURL("image/png")}) left top repeat`
+      })
+    });
+  }
+};
+let C, N;
+const i = {};
+var R = /* @__PURE__ */ S(
+  k,
+  C,
+  N,
+  !1,
+  W,
+  null,
+  null,
+  null
+);
+function W(n) {
+  for (let t in i)
+    this[t] = i[t];
+}
+const $ = /* @__PURE__ */ function() {
+  return R.exports;
+}();
+export {
+  $ as default
+};

package/watermark/style.css

@@ -0,0 +1 @@
+.watermark{position:absolute;inset:0;z-index:100;height:100%;pointer-events:none}

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@web-utils/component",
-  "version": "2.7.36",
+  "version": "2.8.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -20307,4 +20307,4 @@
       ]
     }
   }
-}
+}

package/README.md

@@ -1,27 +0,0 @@
-# web-component
-
-## usage
-
-```js
-import { defineConfig } from 'vite'
-import styleImport from "vite-plugin-style-import";
-
-export default defineConfig({
-  plugins: [
-    styleImport({
-      libs: [{
-        libraryName: '@web-utils/component',
-        base: '@web-utils/component/dist/base.css',
-        ensureStyleFile: true,
-        libraryNameChangeCase: 'pascalCase',
-        resolveStyle: name => {
-          return `@web-utils/component/dist/${name}.css`
-        },
-        resolveComponent: name => {
-          return `@web-utils/component/dist/${name}.js`
-        }
-      }]
-    })
-  ]
-}
-```