@web-utils/component 2.8.0 → 2.8.1

package/x-input-tag/index.mjs

@@ -0,0 +1,182 @@
+var f = Object.defineProperty, _ = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
+var p = Object.getOwnPropertySymbols;
+var y = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var h = (t, a, e) => a in t ? f(t, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[a] = e, m = (t, a) => {
+  for (var e in a || (a = {}))
+    y.call(a, e) && h(t, e, a[e]);
+  if (p)
+    for (var e of p(a))
+      b.call(a, e) && h(t, e, a[e]);
+  return t;
+}, d = (t, a) => _(t, v(a));
+var u = (t, a, e) => new Promise((s, n) => {
+  var o = (i) => {
+    try {
+      l(e.next(i));
+    } catch (r) {
+      n(r);
+    }
+  }, c = (i) => {
+    try {
+      l(e.throw(i));
+    } catch (r) {
+      n(r);
+    }
+  }, l = (i) => i.done ? s(i.value) : Promise.resolve(i.value).then(o, c);
+  l((e = e.apply(t, a)).next());
+});
+import { n as V } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var w = function() {
+  var t = this, a = t.$createElement, e = t._self._c || a;
+  return e("div", {
+    staticClass: "fy-input-tag"
+  }, [t._l(t.tags, function(s, n) {
+    return e("ElTag", {
+      key: s.id,
+      attrs: {
+        closable: !t.inputDisabled,
+        "disable-transitions": !t.arrayMode
+      },
+      on: {
+        close: function(o) {
+          return t.handleClose(s, n);
+        }
+      }
+    }, [t._v(" " + t._s(s.tagName) + " ")]);
+  }), !t.inputDisabled && t.inputVisible ? e("ElInput", {
+    ref: "saveTagInput",
+    staticClass: "input-new-tag",
+    attrs: {
+      size: "small"
+    },
+    on: {
+      blur: t.handleInputConfirm
+    },
+    nativeOn: {
+      keyup: function(s) {
+        return !s.type.indexOf("key") && t._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : t.handleInputConfirm.apply(null, arguments);
+      }
+    },
+    model: {
+      value: t.inputValue,
+      callback: function(s) {
+        t.inputValue = s;
+      },
+      expression: "inputValue"
+    }
+  }) : t._e(), !t.inputDisabled && !t.inputVisible ? e("ElButton", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: t.tags.length < t.maxTag,
+      expression: "tags.length < maxTag"
+    }],
+    staticClass: "button-new-tag",
+    attrs: {
+      size: "small"
+    },
+    on: {
+      click: t.showInput
+    }
+  }, [t._v(" + 添加 ")]) : t._e()], 2);
+}, x = [];
+const I = {
+  name: "XInputTag",
+  inject: {
+    elForm: {
+      default: ""
+    },
+    elFormItem: {
+      default: ""
+    }
+  },
+  props: {
+    value: {
+      type: [Array, String],
+      default: () => []
+    },
+    disabled: Boolean,
+    separator: {
+      type: String,
+      default: ","
+    },
+    arrayMode: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      inputVisible: !1,
+      inputValue: "",
+      maxTag: 20
+    };
+  },
+  computed: {
+    inputDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
+    tags: {
+      get() {
+        var t, a;
+        if (this.arrayMode)
+          return (t = this.value) != null && t.length ? this.value.map((e) => e.id > 0 ? e : d(m({}, e), { id: Math.random() })) : [];
+        {
+          const e = ((a = this.value) == null ? void 0 : a.split(this.separator)) || [];
+          return e.length && e[0] ? e.map((s) => ({ tagName: s, id: Math.random() })) : [];
+        }
+      }
+    }
+  },
+  methods: {
+    showInput() {
+      return u(this, null, function* () {
+        this.inputVisible = !0, yield this.$nextTick(), this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+    handleClose(t) {
+      const a = this.tags.filter((e) => e !== t);
+      this.$emit("input", this.arrayMode ? a : a.map((e) => e.tagName).join(this.separator));
+    },
+    handleInputConfirm() {
+      return u(this, null, function* () {
+        var a;
+        if (this.tags.length >= this.maxTag) {
+          this.$message.warning({ message: "标签已达上限,请删除一些标签再添加！", showClose: !0 }), this.inputVisible = !1, this.inputValue = "";
+          return;
+        }
+        const t = this.inputValue;
+        if (t) {
+          if (this.tags.some((s) => s.tagName === t)) {
+            this.inputVisible = !1, this.inputValue = "", this.$message.warning({ message: "标签已存在！", showClose: !0 });
+            return;
+          }
+          const e = [...this.tags];
+          e.push({ id: Date.now(), tagName: this.inputValue }), this.$emit("input", this.arrayMode ? e : e.map((s) => s.tagName).join(this.separator)), yield this.$nextTick(), (a = this.elFormItem) == null || a.clearValidate();
+        }
+        this.inputVisible = !1, this.inputValue = "";
+      });
+    }
+  }
+}, g = {};
+var C = /* @__PURE__ */ V(
+  I,
+  w,
+  x,
+  !1,
+  T,
+  null,
+  null,
+  null
+);
+function T(t) {
+  for (let a in g)
+    this[a] = g[a];
+}
+const $ = /* @__PURE__ */ function() {
+  return C.exports;
+}();
+export {
+  $ as default
+};

package/x-input-tag/style.css

@@ -0,0 +1 @@
+.el-form-item.is-error .fy-input-tag{border-color:#f56c6c}.fy-input-tag{height:120px;padding:0 10px 10px;overflow:auto;border:1px solid var(--border-color);border-radius:4px}.fy-input-tag .el-tag{margin-top:10px;margin-right:10px}.fy-input-tag .el-tag+.el-tag{margin-right:10px}.fy-input-tag .button-new-tag{height:28px;margin-top:10px;padding-top:0;padding-bottom:0;line-height:26px}.fy-input-tag .el-input.input-new-tag{width:170px;height:28px;margin-top:10px;line-height:26px;vertical-align:bottom}