@web-utils/form-ui 1.0.0-beta57 → 1.0.0-beta59

package/vue-tags-input/index.d.ts

@@ -0,0 +1,373 @@
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    elementId: {
+        type: StringConstructor;
+    };
+    existingTags: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    modelValue: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    typeahead: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    typeaheadStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    typeaheadActivationThreshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    typeaheadMaxResults: {
+        type: NumberConstructor;
+        default: number;
+    };
+    typeaheadAlwaysShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    typeaheadHideDiscard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    discardSearchText: {
+        type: StringConstructor;
+        default: string;
+    };
+    limit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    onlyExistingTags: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    deleteOnBackspace: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDuplicates: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validate: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+    addTagsOnComma: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    addTagsOnSpace: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    addTagsOnBlur: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortSearchResults: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    caseSensitiveTags: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    beforeAddingTag: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+    beforeRemovingTag: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+}>, {}, {
+    tags: never[];
+    input: string;
+    oldInput: string;
+    hiddenInput: string;
+    searchResults: never[];
+    searchSelection: number;
+}, {}, {
+    /**
+     * Remove reserved regex characters from a string so that they don't
+     * affect search results
+     *
+     * @param string
+     * @returns String
+     */
+    escapeRegExp(string: any): any;
+    /**
+     * Add a tag whether from user input or from search results (typeahead)
+     *
+     * @param ignoreSearchResults
+     * @returns void
+     */
+    tagFromInput(ignoreSearchResults?: boolean): void;
+    /**
+     * Add a tag from search results when a user clicks on it
+     *
+     * @param tag
+     * @returns void
+     */
+    tagFromSearchOnClick(tag: any): void;
+    /**
+     * Add the selected tag from the search results.
+     * Clear search results.
+     * Clear user input.
+     *
+     * @param tag
+     * @return void
+     */
+    tagFromSearch(tag: any): void;
+    /**
+     * Add/Select a tag
+     *
+     * @param tag
+     * @returns void | Boolean
+     */
+    addTag(tag: any): false | undefined;
+    /**
+     * Remove the last tag in the tags array.
+     *
+     * @returns void
+     */
+    removeLastTag(): void;
+    /**
+     * Remove the selected tag at the specified index.
+     *
+     * @param index
+     * @returns void
+     */
+    removeTag(index: any): false | undefined;
+    /**
+     * Search the currently entered text in the list of existing tags
+     *
+     * @returns void | Boolean
+     */
+    searchTag(): false | undefined;
+    /**
+     * Hide the typeahead if there's nothing intered into the input field.
+     *
+     * @returns void
+     */
+    hideTypeahead(): void;
+    /**
+     * Select the next search result in typeahead.
+     *
+     * @returns void
+     */
+    nextSearchResult(): void;
+    /**
+     * Select the previous search result in typeahead.
+     *
+     * @returns void
+     */
+    prevSearchResult(): void;
+    /**
+     * Clear/Empty the search results.
+     *
+     * @reutrns void
+     */
+    clearSearchResults(): void;
+    /**
+     * Clear the list of selected tags.
+     *
+     * @returns void
+     */
+    clearTags(): void;
+    /**
+     * Replace the currently selected tags with the tags from the modelValue.
+     *
+     * @returns void
+     */
+    tagsFromValue(): void;
+    /**
+     * Check if a tag is already selected.
+     *
+     * @param tag
+     * @returns Boolean
+     */
+    tagSelected(tag: any): boolean;
+    /**
+     * Clear the input.
+     *
+     * @returns void
+     */
+    clearInput(): void;
+    /**
+     * Process all the keyup events.
+     *
+     * @param e
+     * @returns void
+     */
+    onKeyUp(e: any): void;
+    /**
+     * Process all the keydown events.
+     *
+     * @param e
+     * @returns void
+     */
+    onKeyDown(e: any): void;
+    /**
+     * Process the onfocus event.
+     *
+     * @param e
+     * @returns void
+     */
+    onFocus(e: any): void;
+    /**
+     * Process the onblur event.
+     *
+     * @param e
+     * @returns void
+     */
+    onBlur(e: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "blur" | "change" | "focus" | "keydown" | "keyup" | "initialized" | "input-changed" | "tag-removed" | "tags-updated" | "limit-reached" | "tag-added")[], "update:modelValue" | "blur" | "change" | "focus" | "keydown" | "keyup" | "initialized" | "input-changed" | "tag-removed" | "tags-updated" | "limit-reached" | "tag-added", import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    elementId: {
+        type: StringConstructor;
+    };
+    existingTags: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    modelValue: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    typeahead: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    typeaheadStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    typeaheadActivationThreshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    typeaheadMaxResults: {
+        type: NumberConstructor;
+        default: number;
+    };
+    typeaheadAlwaysShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    typeaheadHideDiscard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    discardSearchText: {
+        type: StringConstructor;
+        default: string;
+    };
+    limit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    onlyExistingTags: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    deleteOnBackspace: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDuplicates: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validate: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+    addTagsOnComma: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    addTagsOnSpace: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    addTagsOnBlur: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortSearchResults: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    caseSensitiveTags: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    beforeAddingTag: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+    beforeRemovingTag: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    onKeyup?: ((...args: any[]) => any) | undefined;
+    onInitialized?: ((...args: any[]) => any) | undefined;
+    "onInput-changed"?: ((...args: any[]) => any) | undefined;
+    "onTag-removed"?: ((...args: any[]) => any) | undefined;
+    "onTags-updated"?: ((...args: any[]) => any) | undefined;
+    "onLimit-reached"?: ((...args: any[]) => any) | undefined;
+    "onTag-added"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: unknown[];
+    placeholder: string;
+    limit: number;
+    wrapperClass: string;
+    existingTags: unknown[];
+    typeahead: boolean;
+    typeaheadStyle: string;
+    typeaheadActivationThreshold: number;
+    typeaheadMaxResults: number;
+    typeaheadAlwaysShow: boolean;
+    typeaheadHideDiscard: boolean;
+    discardSearchText: string;
+    onlyExistingTags: boolean;
+    deleteOnBackspace: boolean;
+    allowDuplicates: boolean;
+    validate: Function;
+    addTagsOnComma: boolean;
+    addTagsOnSpace: boolean;
+    addTagsOnBlur: boolean;
+    sortSearchResults: boolean;
+    caseSensitiveTags: boolean;
+    beforeAddingTag: Function;
+    beforeRemovingTag: Function;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/vue-tags-input/index.mjs

@@ -0,0 +1,350 @@
+import { t as e } from "../chunks/BwYEpK-u.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 };