@web-utils/form-ui 1.0.0-beta8 → 1.0.0-beta80

package/vue-tags-input/index.mjs

@@ -0,0 +1,350 @@
+import { t as e } from "../chunks/B1MSrc6f.mjs";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, normalizeClass as a, openBlock as o, renderList as s, toDisplayString as c, vModelText as l, vShow as u, withDirectives as d, withKeys as f, withModifiers as p } from "vue";
+//#region src/components/VueTagsInput.vue
+var m = {
+	name: "VueTagsInput",
+	props: {
+		elementId: { type: String },
+		existingTags: {
+			type: Array,
+			default: () => []
+		},
+		modelValue: {
+			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
+		}
+	},
+	emits: [
+		"input-changed",
+		"change",
+		"update:modelValue",
+		"initialized",
+		"tag-removed",
+		"tags-updated",
+		"keyup",
+		"keydown",
+		"focus",
+		"blur",
+		"limit-reached",
+		"tag-added"
+	],
+	data() {
+		return {
+			tags: [],
+			input: "",
+			oldInput: "",
+			hiddenInput: "",
+			searchResults: [],
+			searchSelection: 0
+		};
+	},
+	watch: {
+		input(e, t) {
+			this.$emit("input-changed", e), this.searchTag(!1), e.length && e !== t && (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("update:modelValue", this.tags);
+		},
+		modelValue() {
+			this.tagsFromValue();
+		},
+		typeaheadAlwaysShow(e) {
+			e ? this.searchTag(!1) : this.clearSearchResults();
+		}
+	},
+	created() {
+		this.tagsFromValue(), this.typeaheadAlwaysShow && this.searchTag(!1), 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 {
+				let e = this.input.trim();
+				if (!this.onlyExistingTags && e.length && this.validate(e)) {
+					this.input = "";
+					let t = {
+						key: "",
+						value: e
+					}, n = this.escapeRegExp(this.caseSensitiveTags ? t.value : t.value.toLowerCase());
+					for (let e of this.existingTags) if (n === (this.caseSensitiveTags ? e.value : e.value.toLowerCase())) {
+						t = { ...e };
+						break;
+					}
+					this.addTag(t);
+				}
+			}
+		},
+		tagFromSearchOnClick(e) {
+			this.tagFromSearch(e), this.$refs.taginput.blur();
+		},
+		tagFromSearch(e) {
+			this.clearSearchResults(), this.addTag(e), 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");
+			}));
+		},
+		removeLastTag() {
+			!this.input.length && this.deleteOnBackspace && this.tags.length && this.removeTag(this.tags.length - 1);
+		},
+		removeTag(e) {
+			let t = this.tags[e];
+			if (!this.beforeRemovingTag(t)) return !1;
+			this.tags.splice(e, 1), this.$nextTick(() => {
+				this.$emit("tag-removed", t), this.$emit("tags-updated"), this.typeaheadAlwaysShow && this.searchTag();
+			});
+		},
+		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;
+				let e = this.input.trim();
+				if (e.length && e.length >= this.typeaheadActivationThreshold || this.typeaheadActivationThreshold === 0 || this.typeaheadAlwaysShow) {
+					let t = this.escapeRegExp(this.caseSensitiveTags ? e : e.toLowerCase());
+					for (let e of this.existingTags) (this.caseSensitiveTags ? e.value : e.value.toLowerCase()).search(t) > -1 && !this.tagSelected(e) && this.searchResults.push(e);
+					this.sortSearchResults && this.searchResults.sort((e, t) => e.value < t.value ? -1 : +(e.value > t.value)), this.typeaheadMaxResults > 0 && (this.searchResults = this.searchResults.slice(0, this.typeaheadMaxResults));
+				}
+				this.oldInput = this.input;
+			}
+		},
+		hideTypeahead() {
+			this.input.length || this.$nextTick(() => {
+				this.clearSearchResults();
+			});
+		},
+		nextSearchResult() {
+			this.searchSelection + 1 <= this.searchResults.length - 1 && this.searchSelection++;
+		},
+		prevSearchResult() {
+			this.searchSelection > 0 && this.searchSelection--;
+		},
+		clearSearchResults() {
+			this.searchResults = [], this.searchSelection = 0, this.typeaheadAlwaysShow && this.$nextTick(() => {
+				this.searchTag();
+			});
+		},
+		clearTags() {
+			this.tags.splice(0, this.tags.length);
+		},
+		tagsFromValue() {
+			if (this.modelValue && this.modelValue.length) {
+				if (!Array.isArray(this.modelValue)) {
+					console.error("Voerro Tags Input: the v-model modelValue must be an array!");
+					return;
+				}
+				let e = this.modelValue;
+				if (this.tags === e) return;
+				this.clearTags();
+				for (let t of e) this.addTag(t);
+			} else {
+				if (this.tags.length === 0) return;
+				this.clearTags();
+			}
+		},
+		tagSelected(e) {
+			if (this.allowDuplicates || !e) return !1;
+			let t = this.escapeRegExp(this.caseSensitiveTags ? e.value : e.value.toLowerCase());
+			for (let n of this.tags) {
+				let r = this.caseSensitiveTags ? n.value : n.value.toLowerCase();
+				if (n.key === e.key && r.search(t) > -1) return !0;
+			}
+			return !1;
+		},
+		clearInput() {
+			this.input = "";
+		},
+		onKeyUp(e) {
+			this.$emit("keyup", e);
+		},
+		onKeyDown(e) {
+			this.$emit("keydown", e);
+		},
+		onFocus(e) {
+			this.$emit("focus", e), this.searchTag();
+		},
+		onBlur(e) {
+			this.$emit("blur", e), this.addTagsOnBlur && this.tagFromInput(!0), this.typeaheadAlwaysShow ? this.searchTag() : this.hideTypeahead();
+		}
+	}
+}, h = { class: "tags-input-root" }, g = ["innerHTML"], _ = ["onClick"], v = ["placeholder"], y = ["id", "name"], b = ["textContent"], x = [
+	"onMouseover",
+	"onMousedown",
+	"innerHTML"
+], S = ["textContent"], C = [
+	"onMouseover",
+	"onMousedown",
+	"innerHTML"
+];
+function w(e, m, w, T, E, D) {
+	return o(), r("div", h, [
+		i("div", { class: a(`${w.wrapperClass} tags-input`) }, [
+			n("标签"),
+			(o(!0), r(t, null, s(E.tags, (e, t) => (o(), r("span", {
+				key: t,
+				class: "el-tag el-tag--medium el-tag--light"
+			}, [i("span", { innerHTML: e.value }, null, 8, g), i("i", {
+				href: "#",
+				class: "tags-input-remove ov",
+				onClick: p((e) => D.removeTag(t), ["prevent"])
+			}, null, 8, _)]))), 128)),
+			n("输入框"),
+			d(i("input", {
+				ref: "taginput",
+				"onUpdate:modelValue": m[0] || (m[0] = (e) => E.input = e),
+				type: "text",
+				placeholder: w.placeholder,
+				style: {
+					height: "28px",
+					"margin-top": "5px",
+					"line-height": "28px"
+				},
+				onKeydown: [
+					m[1] || (m[1] = f(p((e) => D.tagFromInput(!1), ["prevent"]), ["enter"])),
+					m[2] || (m[2] = f((...e) => D.removeLastTag && D.removeLastTag(...e), ["8"])),
+					m[3] || (m[3] = f((...e) => D.nextSearchResult && D.nextSearchResult(...e), ["down"])),
+					m[4] || (m[4] = f((...e) => D.prevSearchResult && D.prevSearchResult(...e), ["up"])),
+					m[5] || (m[5] = (...e) => D.onKeyDown && D.onKeyDown(...e))
+				],
+				onKeyup: [m[6] || (m[6] = (...e) => D.onKeyUp && D.onKeyUp(...e)), m[7] || (m[7] = f((...e) => D.clearSearchResults && D.clearSearchResults(...e), ["esc"]))],
+				onFocus: m[8] || (m[8] = (...e) => D.onFocus && D.onFocus(...e)),
+				onBlur: m[9] || (m[9] = (...e) => D.onBlur && D.onBlur(...e)),
+				onValue: m[10] || (m[10] = (...e) => E.tags && E.tags(...e))
+			}, null, 40, v), [[l, E.input]]),
+			w.elementId ? d((o(), r("input", {
+				key: 0,
+				id: w.elementId,
+				"onUpdate:modelValue": m[11] || (m[11] = (e) => E.hiddenInput = e),
+				type: "hidden",
+				name: w.elementId
+			}, null, 8, y)), [[l, E.hiddenInput]]) : n("v-if", !0)
+		], 2),
+		n(" 建议列表 "),
+		d(i("div", null, [n(" 标签风格一 "), w.typeaheadStyle === "badges" ? (o(), r("p", {
+			key: 0,
+			class: a(`typeahead-${w.typeaheadStyle}`)
+		}, [w.typeaheadHideDiscard ? n("v-if", !0) : (o(), r("span", {
+			key: 0,
+			class: "tags-input-badge typeahead-hide-btn tags-input-typeahead-item-default",
+			onClick: m[12] || (m[12] = p((...e) => D.clearSearchResults && D.clearSearchResults(...e), ["prevent"])),
+			textContent: c(w.discardSearchText)
+		}, null, 8, b)), (o(!0), r(t, null, s(E.searchResults, (e, t) => (o(), r("span", {
+			key: t,
+			class: a(["tags-input-badge", {
+				"tags-input-typeahead-item-default": t != E.searchSelection,
+				"tags-input-typeahead-item-highlighted-default": t == E.searchSelection
+			}]),
+			onMouseover: (e) => E.searchSelection = t,
+			onMousedown: p((t) => D.tagFromSearchOnClick(e), ["prevent"]),
+			innerHTML: e.value
+		}, null, 42, x))), 128))], 2)) : w.typeaheadStyle === "dropdown" ? (o(), r(t, { key: 1 }, [n(" 下拉风格二 "), i("ul", { class: a(`typeahead-${w.typeaheadStyle}`) }, [w.typeaheadHideDiscard ? n("v-if", !0) : (o(), r("li", {
+			key: 0,
+			class: "tags-input-typeahead-item-default typeahead-hide-btn",
+			onMousedown: m[13] || (m[13] = p((...e) => D.clearSearchResults && D.clearSearchResults(...e), ["prevent"])),
+			textContent: c(w.discardSearchText)
+		}, null, 40, S)), (o(!0), r(t, null, s(E.searchResults, (e, t) => (o(), r("li", {
+			key: t,
+			class: a({
+				"tags-input-typeahead-item-default": t != E.searchSelection,
+				"tags-input-typeahead-item-highlighted-default": t == E.searchSelection
+			}),
+			onMouseover: (e) => E.searchSelection = t,
+			onMousedown: p((t) => D.tagFromSearchOnClick(e), ["prevent"]),
+			innerHTML: e.value
+		}, null, 42, C))), 128))], 2)], 2112)) : n("v-if", !0)], 512), [[u, E.searchResults.length]])
+	]);
+}
+var T = /* @__PURE__ */ e(m, [["render", w]]);
+//#endregion
+export { T 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}