@aifuxi/semi-ui-vue 0.1.0-alpha.0

package/dist/auto-complete-BeahBlt9.js

@@ -0,0 +1,765 @@
+import "./src-DNBBthjO.js";
+import { _ as e, g as t, h as n, t as r, v as i } from "./foundation-Cawx37mp.js";
+import { t as a } from "./warning-naSiE8G7.js";
+import { r as o } from "./keyCode-DMNg63wX.js";
+import { t as s } from "./Tooltip-Bq7HZwnS.js";
+import { t as c } from "./config-context-CyynTtDb.js";
+import { n as l } from "./config-provider-VMfNNSF1.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as ee, defineComponent as g, getCurrentInstance as te, inject as ne, markRaw as _, mergeProps as v, nextTick as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as S, onMounted as C, openBlock as w, renderList as re, renderSlot as T, shallowReactive as E, shallowRef as D, toDisplayString as ie, unref as O, useAttrs as k, useId as ae, useSlots as oe, useTemplateRef as A, watch as j, withCtx as M, withModifiers as N } from "vue";
+import { IconClear as se } from "@aifuxi/semi-icons-vue";
+//#region bundled-foundation
+var P = class extends r {
+	constructor(e) {
+		super({ ...e }), this.isPanelOpen = !1;
+	}
+	init() {
+		this._setDropdownWidth();
+		let { defaultOpen: e, data: t, defaultValue: n, value: r } = this.getProps();
+		if (t && t.length) {
+			let e = this._generateList(t);
+			this._adapter.updateOptionList(e);
+		}
+		e && this.openDropdown();
+		let i;
+		n !== void 0 && (i = n), r !== void 0 && (i = r), i !== void 0 && this.handleValueChange(i);
+	}
+	destroy() {
+		this._adapter.unregisterClickOutsideHandler();
+	}
+	_setDropdownWidth() {
+		let { style: t, dropdownMatchSelectWidth: r } = this.getProps(), i;
+		r && (i = t && (0, n.default)(t.width) || t && (0, e.default)(t.width) && !t.width.includes("%") ? t.width : this._adapter.getTriggerWidth(), this._adapter.setOptionWrapperWidth(i));
+	}
+	handleInputClick(e) {
+		let { options: t } = this.getStates(), { disabled: n } = this.getProps();
+		n || (this.isPanelOpen ? this.closeDropdown() : this.openDropdown());
+	}
+	openDropdown() {
+		this.isPanelOpen = !0, this._adapter.toggleListVisible(!0), this._setDropdownWidth(), this._adapter.registerClickOutsideHandler((e) => this.closeDropdown(e)), this._adapter.notifyDropdownVisibleChange(!0), this._modifyFocusIndexOnPanelOpen();
+	}
+	closeDropdown(e) {
+		this.isPanelOpen = !1, this._adapter.toggleListVisible(!1), this._adapter.unregisterClickOutsideHandler(), this._adapter.notifyDropdownVisibleChange(!1);
+	}
+	_generateList(r) {
+		let { renderItem: a } = this.getProps(), o = [];
+		return r && r.length && r.forEach((r, s) => {
+			let c = String((/* @__PURE__ */ new Date()).getTime()) + s, l = {};
+			(0, e.default)(r) || (0, n.default)(r) ? l = {
+				value: r,
+				key: c,
+				label: r,
+				show: !0
+			} : (0, t.default)(r) && !(0, i.default)(r.value) && (l = {
+				show: !0,
+				...r
+			}), a && typeof a == "function" && (l._renderedLabel = a(r)), o.push(l);
+		}), o;
+	}
+	handleSearch(e) {
+		this._adapter.updateInputValue(e), this._adapter.notifySearch(e), this._adapter.notifyChange(e), this._modifyFocusIndex(e), this.isPanelOpen || this.openDropdown();
+	}
+	handleSelect(e, t) {
+		let { renderSelectedItem: n } = this.getProps(), r = "";
+		n && typeof n == "function" ? (r = n(e), a(typeof r != "string", "Warning: [Semi AutoComplete] renderSelectedItem must return string, please check your function return")) : r = e.value, this._isControlledComponent() ? (this.closeDropdown(), this.notifySelect(e)) : (this._adapter.updateInputValue(r), this.updateSelection(e), this.notifySelect(e), this.closeDropdown()), this._adapter.notifyChange(r), this._adapter.updateFocusIndex(t);
+	}
+	updateSelection(e) {
+		let t = /* @__PURE__ */ new Map();
+		e && t.set(e.label, e), this._adapter.updateSelection(t);
+	}
+	notifySelect(e) {
+		this._backwardLabelInValue() ? this._adapter.notifySelect(e) : this._adapter.notifySelect(e.value);
+	}
+	_backwardLabelInValue() {
+		let { onSelectWithObject: e } = this.getProps();
+		return e;
+	}
+	handleDataChange(e) {
+		let t = this._generateList(e);
+		this._adapter.updateOptionList(t), this._adapter.rePositionDropdown();
+		let { inputValue: n } = this.getStates();
+		this._modifyFocusIndex(n);
+	}
+	handleValueChange(e) {
+		let { data: t, defaultActiveFirstOption: n } = this.getProps(), r = "";
+		r = this._backwardLabelInValue() && Object.prototype.toString.call(e) === "[object Object]" ? e.value : e;
+		let i = this._getRenderSelectedItem(), a = this._generateList(t), o = a.length ? a.filter((e) => i(e) === r) : [], s = o.length, c = a.findIndex((e) => i(e) === r), l = "";
+		s ? (o = o[0], l = i(o)) : l = i(this._backwardLabelInValue() ? e : {
+			label: r,
+			value: r
+		}), this._adapter.updateInputValue(l), this.updateSelection(s ? o : null), c === -1 && n ? this._adapter.updateFocusIndex(0) : this._adapter.updateFocusIndex(c);
+	}
+	_modifyFocusIndex(e) {
+		let { focusIndex: t } = this.getStates(), { data: n, defaultActiveFirstOption: r } = this.getProps(), i = -1;
+		if (e) {
+			let t = this._getRenderSelectedItem();
+			i = this._generateList(n).findIndex((n) => t(n) === e);
+		}
+		i === -1 && r ? t !== 0 && this._adapter.updateFocusIndex(0) : i !== t && this._adapter.updateFocusIndex(i);
+	}
+	_modifyFocusIndexOnPanelOpen() {
+		let { inputValue: e } = this.getStates();
+		this._modifyFocusIndex(e);
+	}
+	_getRenderSelectedItem() {
+		let { renderSelectedItem: e } = this.getProps();
+		return e === void 0 && (e = (e) => e?.value), e;
+	}
+	handleClear() {
+		this._adapter.notifyClear();
+	}
+	bindKeyBoardEvent() {
+		this._keydownHandler = (e) => {
+			this._handleKeyDown(e);
+		}, this._adapter.registerKeyDown(this._keydownHandler);
+	}
+	_handleKeyDown(e) {
+		let t = e.keyCode, { visible: n } = this.getStates();
+		switch (t) {
+			case o.UP:
+				e.preventDefault(), this._handleArrowKeyDown(-1);
+				break;
+			case o.DOWN:
+				e.preventDefault(), this._handleArrowKeyDown(1);
+				break;
+			case o.ENTER:
+				e.preventDefault(), this._handleEnterKeyDown();
+				break;
+			case o.ESC:
+				this.closeDropdown();
+				break;
+			case o.TAB: this.closeDropdown();
+		}
+		this._adapter.notifyKeyDown(e);
+	}
+	_getEnableFocusIndex(e) {
+		let { focusIndex: t, options: n } = this.getStates(), r = n.filter((e) => e.show), i = r.length, a = t + e;
+		if (a < 0 && (a = i - 1), a >= i && (a = 0), e > 0) {
+			let e = -1;
+			for (let t = 0; t < r.length && (r[t].disabled || (e = t), !(e >= a)); t++);
+			a = e;
+		} else {
+			let e = r.length;
+			for (let t = i - 1; t >= 0 && (r[t].disabled || (e = t), !(e <= a)); t--);
+			a = e;
+		}
+		this._adapter.updateFocusIndex(a), this._adapter.updateScrollTop(a);
+	}
+	_handleArrowKeyDown(e) {
+		let { visible: t } = this.getStates();
+		t ? this._getEnableFocusIndex(e) : this.openDropdown();
+	}
+	_handleEnterKeyDown() {
+		let { visible: e, options: t, focusIndex: n } = this.getStates();
+		if (!e) this.openDropdown();
+		else if (n !== void 0 && n !== -1 && t.length !== 0) {
+			let e = t.filter((e) => e.show)[n];
+			e && this.handleSelect(e, n);
+		} else this.closeDropdown();
+	}
+	handleOptionMouseEnter(e) {
+		this._adapter.updateFocusIndex(e);
+	}
+	handleFocus(e) {
+		this.bindKeyBoardEvent(), this._adapter.notifyFocus(e);
+	}
+	handleBlur(e) {
+		this._persistEvent(e), this._adapter.notifyBlur(e);
+	}
+}, F = g({
+	name: "AutoCompleteNodeRenderer",
+	props: { content: {
+		type: null,
+		default: void 0
+	} },
+	setup: (e) => () => e.content
+}), I = ["aria-selected", "aria-disabled"], L = {
+	key: 0,
+	class: "semi-autocomplete-option-icon"
+}, R = /* @__PURE__ */ g({
+	name: "AutoCompleteOption",
+	inheritAttrs: !1,
+	__name: "AutoCompleteOption",
+	props: {
+		empty: { type: Boolean },
+		emptyContent: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		focused: { type: Boolean },
+		inputValue: {},
+		selected: { type: Boolean },
+		showTick: { type: Boolean },
+		value: {},
+		label: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		disabled: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: {},
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["mouseenter", "select"],
+	setup(e, { emit: t }) {
+		let n = e, r = k(), i = t, a = d(() => [
+			"semi-autocomplete-option",
+			n.class,
+			n.className,
+			n.disabled ? "semi-autocomplete-option-disabled" : void 0,
+			n.selected ? "semi-autocomplete-option-selected" : void 0,
+			n.focused ? "semi-autocomplete-option-focused" : void 0,
+			n.empty ? "semi-autocomplete-option-empty" : void 0
+		]);
+		function o(e) {
+			!n.disabled && !n.empty && i("select", e);
+		}
+		return (e, t) => (w(), m("div", v(O(r), {
+			class: a.value,
+			style: n.style,
+			role: "option",
+			"aria-selected": n.selected ? "true" : "false",
+			"aria-disabled": n.disabled ? "true" : "false",
+			onClick: o,
+			onMouseenter: t[0] ||= (e) => i("mouseenter", e)
+		}), [n.showTick ? (w(), m("div", L)) : p("", !0), T(e.$slots, "default")], 16, I));
+	}
+});
+//#endregion
+//#region src/auto-complete/use-auto-complete-foundation.ts
+function z(e) {
+	let t = { ...e };
+	for (let e of Object.keys(t)) (e.startsWith("_") || e === "show" || e === "key") && delete t[e];
+	return t;
+}
+function ce(e) {
+	let { controlled: t, emit: n, listElement: r, runtimeProps: i, triggerElement: a } = e, o = t.value ? i.value.modelValue ?? i.value.value ?? "" : i.value.defaultValue ?? "", s = E({
+		dropdownMinWidth: void 0,
+		focusIndex: i.value.defaultActiveFirstOption ? 0 : -1,
+		inputValue: o,
+		keyboardEventSet: {},
+		options: [],
+		rePosKey: 1,
+		selection: /* @__PURE__ */ new Map(),
+		visible: !1
+	}), c = /* @__PURE__ */ new Map(), l, u = !1;
+	function d() {
+		let e = { ...i.value };
+		return t.value ? e.value = i.value.modelValue ?? i.value.value : delete e.value, e;
+	}
+	let f = _(new P({
+		getContext: () => void 0,
+		getContexts: () => void 0,
+		getProp: (e) => d()[String(e)],
+		getProps: d,
+		getState: (e) => s[e],
+		getStates: () => s,
+		setState: (e, t) => {
+			Object.assign(s, e), t?.();
+		},
+		getCache: (e) => c.get(e),
+		getCaches: () => c,
+		setCache: (e, t) => c.set(e, t),
+		stopPropagation: (e) => e?.stopPropagation(),
+		persistEvent: () => void 0,
+		getTriggerWidth: () => a.value?.getBoundingClientRect().width,
+		setOptionWrapperWidth: (e) => {
+			s.dropdownMinWidth = e;
+		},
+		updateInputValue: (e) => {
+			s.inputValue = e;
+		},
+		toggleListVisible: (e) => {
+			s.visible = e;
+		},
+		updateOptionList: (e) => {
+			s.options = e;
+		},
+		updateScrollTop: (e) => {
+			y(() => {
+				let t = e === void 0 ? r.value?.querySelector(".semi-autocomplete-option-selected") : r.value?.querySelector(`.semi-autocomplete-option:nth-child(${e + 1})`);
+				!t || !r.value || (r.value.scrollTop = t.offsetTop - r.value.offsetTop - r.value.clientHeight / 2 + t.clientHeight / 2);
+			});
+		},
+		updateSelection: (e) => {
+			s.selection = e;
+		},
+		notifySearch: (e) => n("search", e),
+		notifyChange: (e) => {
+			n("change", e), n("update:modelValue", e), n("update:value", e);
+		},
+		notifySelect: (e) => {
+			n("select", typeof e == "object" && e ? z(e) : e);
+		},
+		notifyDropdownVisibleChange: (e) => n("dropdownVisibleChange", e),
+		notifyClear: () => n("clear"),
+		notifyFocus: (e) => {
+			e && n("focus", e);
+		},
+		notifyBlur: (e) => {
+			e && n("blur", e);
+		},
+		notifyKeyDown: (e) => n("keydown", e),
+		rePositionDropdown: () => {
+			s.rePosKey += 1;
+		},
+		registerKeyDown: (e) => {
+			s.keyboardEventSet = { onKeyDown: e };
+		},
+		unregisterKeyDown: () => {
+			s.keyboardEventSet = {};
+		},
+		updateFocusIndex: (e) => {
+			s.focusIndex = e;
+		},
+		registerClickOutsideHandler: (e) => {
+			typeof document > "u" || (l && document.removeEventListener("mousedown", l), l = (t) => {
+				let n = t.target;
+				n instanceof Node && (a.value?.contains(n) || r.value?.contains(n) || e(t));
+			}, document.addEventListener("mousedown", l));
+		},
+		unregisterClickOutsideHandler: () => {
+			l && typeof document < "u" && document.removeEventListener("mousedown", l), l = void 0;
+		}
+	}));
+	return C(() => {
+		u = !0, f.init();
+	}), S(() => {
+		u = !1, f.destroy();
+	}), j(() => i.value.data, (e) => {
+		u && f.handleDataChange(e);
+	}, { deep: !0 }), j(() => t.value ? i.value.modelValue ?? i.value.value : void 0, (e) => {
+		u && t.value && f.handleValueChange(e);
+	}), {
+		foundation: f,
+		state: s
+	};
+}
+//#endregion
+//#region src/auto-complete/AutoComplete.vue?vue&type=script&setup=true&lang.ts
+var le = {
+	key: 0,
+	class: "semi-autocomplete-loading-wrapper"
+}, ue = {
+	key: 1,
+	class: "semi-autocomplete-option-text"
+}, de = [
+	"id",
+	"aria-expanded",
+	"aria-disabled",
+	"aria-activedescendant"
+], fe = ["id"], pe = [
+	"value",
+	"disabled",
+	"placeholder",
+	"autofocus",
+	"aria-label",
+	"aria-labelledby",
+	"aria-invalid",
+	"aria-errormessage",
+	"aria-describedby",
+	"aria-required",
+	"aria-expanded",
+	"aria-activedescendant"
+], B = Object.assign(/* @__PURE__ */ g({
+	name: "AutoComplete",
+	inheritAttrs: !1,
+	__name: "AutoComplete",
+	props: {
+		ariaDescribedby: {},
+		ariaErrormessage: {},
+		ariaInvalid: { type: [Boolean, String] },
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaRequired: { type: Boolean },
+		autoAdjustOverflow: { type: Boolean },
+		autoFocus: { type: Boolean },
+		clearIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		data: {},
+		defaultActiveFirstOption: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		defaultValue: {},
+		disabled: { type: Boolean },
+		dropdownClassName: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		dropdownMatchSelectWidth: { type: Boolean },
+		dropdownStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		emptyContent: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		getPopupContainer: { type: Function },
+		id: {},
+		insetLabel: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		insetLabelId: {},
+		loading: { type: Boolean },
+		maxHeight: {},
+		modelValue: {},
+		motion: { type: Boolean },
+		mouseEnterDelay: {},
+		mouseLeaveDelay: {},
+		onChangeWithObject: { type: Boolean },
+		onSelectWithObject: { type: Boolean },
+		placeholder: {},
+		position: {},
+		prefix: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		renderItem: { type: Function },
+		renderSelectedItem: { type: Function },
+		showClear: { type: Boolean },
+		size: {},
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		stopPropagation: { type: [Boolean, String] },
+		suffix: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		validateStatus: {},
+		value: {},
+		zIndex: {}
+	},
+	emits: [
+		"blur",
+		"change",
+		"clear",
+		"dropdownVisibleChange",
+		"focus",
+		"keydown",
+		"search",
+		"select",
+		"update:modelValue",
+		"update:value"
+	],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = n, a = k(), o = oe(), g = te(), _ = ne(c, void 0), y = A("triggerElement"), S = A("inputElement"), C = A("listElement"), E = D(!1), j = D(!1), P = D(!1), I = `semi-autocomplete-${ae().replaceAll(":", "")}`, L = d(() => _?.value ?? {
+			direction: "ltr",
+			getPopupContainer: void 0
+		});
+		function z(e, t) {
+			let n = String(e).replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), i = g?.vnode.props;
+			if (i && (Object.prototype.hasOwnProperty.call(i, e) || Object.prototype.hasOwnProperty.call(i, n)) && r[e] !== void 0) return r[e];
+			let a = l.config.overrideDefaultProps?.AutoComplete?.[e];
+			return a === void 0 ? t : a;
+		}
+		let B = d(() => ({
+			...r,
+			autoAdjustOverflow: z("autoAdjustOverflow", !0),
+			autoFocus: z("autoFocus", !1),
+			data: z("data", []),
+			defaultActiveFirstOption: z("defaultActiveFirstOption", !1),
+			defaultOpen: z("defaultOpen", !1),
+			disabled: z("disabled", !1),
+			dropdownMatchSelectWidth: z("dropdownMatchSelectWidth", !0),
+			emptyContent: z("emptyContent", null),
+			loading: z("loading", !1),
+			maxHeight: z("maxHeight", 300),
+			motion: z("motion", !0),
+			onSelectWithObject: z("onSelectWithObject", !1),
+			position: z("position", "bottomLeft"),
+			showClear: z("showClear", !1),
+			size: z("size", "default"),
+			stopPropagation: z("stopPropagation", !0),
+			validateStatus: z("validateStatus", "default"),
+			zIndex: z("zIndex", 1030),
+			style: r.style
+		})), V = d(() => {
+			let e = g?.vnode.props;
+			return !!(e && (Object.prototype.hasOwnProperty.call(e, "value") || Object.prototype.hasOwnProperty.call(e, "modelValue") || Object.prototype.hasOwnProperty.call(e, "model-value")));
+		}), { foundation: H, state: U } = ce({
+			controlled: V,
+			emit: i,
+			listElement: C,
+			runtimeProps: B,
+			triggerElement: y
+		}), W = d(() => V.value ? B.value.modelValue ?? B.value.value ?? "" : U.inputValue), G = d(() => U.options.filter((e) => e.show !== !1)), K = d(() => B.value.getPopupContainer ?? L.value.getPopupContainer), q = d(() => U.focusIndex >= 0 ? `${I}-option-${U.focusIndex}` : void 0), J = d(() => B.value.showClear && !B.value.disabled && String(W.value).length > 0 && (E.value || j.value)), me = d(() => [
+			a.class,
+			o.trigger ? void 0 : "semi-autocomplete",
+			!o.trigger && B.value.disabled ? "semi-autocomplete-disabled" : void 0
+		]), he = d(() => [
+			"semi-input-wrapper",
+			`semi-input-wrapper-${B.value.size}`,
+			E.value ? "semi-input-wrapper-focus" : void 0,
+			B.value.disabled ? "semi-input-wrapper-disabled" : void 0,
+			B.value.validateStatus === "warning" ? "semi-input-wrapper-warning" : void 0,
+			B.value.validateStatus === "error" ? "semi-input-wrapper-error" : void 0,
+			B.value.showClear ? "semi-input-wrapper-clearable" : void 0,
+			o.prefix || B.value.prefix || o.insetLabel || B.value.insetLabel ? "semi-input-wrapper__with-prefix" : void 0,
+			o.suffix || B.value.suffix ? "semi-input-wrapper__with-suffix" : void 0
+		]), ge = d(() => [
+			"semi-input",
+			`semi-input-${B.value.size}`,
+			B.value.disabled ? "semi-input-disabled" : void 0,
+			J.value ? "semi-input-sibling-clearbtn" : void 0
+		]), _e = d(() => ({
+			maxHeight: typeof B.value.maxHeight == "number" ? `${B.value.maxHeight}px` : B.value.maxHeight,
+			minWidth: typeof U.dropdownMinWidth == "number" ? `${U.dropdownMinWidth}px` : U.dropdownMinWidth,
+			...B.value.dropdownStyle && typeof B.value.dropdownStyle == "object" && !Array.isArray(B.value.dropdownStyle) ? B.value.dropdownStyle : {}
+		})), ve = d(() => Object.fromEntries(Object.entries(a).filter(([e]) => e.startsWith("data-"))));
+		function ye(e) {
+			P.value || H.handleSearch(e.target.value);
+		}
+		function be(e) {
+			P.value = !1, H.handleSearch(e.target.value);
+		}
+		function Y(e) {
+			E.value = !0, H.handleFocus(e);
+		}
+		function xe(e) {
+			E.value = !1, H.handleBlur(e);
+		}
+		function Se(e) {
+			U.keyboardEventSet.onKeyDown?.(e);
+		}
+		function Ce(e) {
+			e.target?.closest(".semi-input-clearbtn") || H.handleInputClick(e);
+		}
+		function X(e) {
+			e.preventDefault(), e.stopPropagation(), H.handleSearch(""), H.handleClear(), S.value?.focus();
+		}
+		function Z(e, t) {
+			H.handleSelect(e, t);
+		}
+		function we(e) {
+			return B.value.data.find((t) => typeof t == "string" || typeof t == "number" ? t === e.value : t.value === e.value) ?? e;
+		}
+		function Q(e) {
+			return e._renderedLabel ?? e.label ?? e.value;
+		}
+		function Te() {
+			H.openDropdown();
+		}
+		function Ee() {
+			H.closeDropdown();
+		}
+		function De() {
+			S.value?.focus();
+		}
+		function $(e) {
+			H.handleSearch(e);
+		}
+		return t({
+			close: Ee,
+			focus: De,
+			open: Te,
+			search: $
+		}), (e, t) => (w(), f(s, v({
+			"prefix-cls": "semi-popover",
+			role: "presentation",
+			trigger: "custom",
+			visible: O(U).visible,
+			position: B.value.position,
+			"show-arrow": !1,
+			spacing: 4,
+			"z-index": B.value.zIndex,
+			motion: B.value.motion,
+			"auto-adjust-overflow": B.value.autoAdjustOverflow,
+			"mouse-enter-delay": B.value.mouseEnterDelay ?? 0,
+			"mouse-leave-delay": B.value.mouseLeaveDelay ?? 0,
+			"stop-propagation": !!B.value.stopPropagation,
+			"re-pos-key": O(U).rePosKey
+		}, K.value ? { getPopupContainer: K.value } : {}, { "onUpdate:visible": t[5] ||= (e) => {
+			!e && O(U).visible && O(H).closeDropdown();
+		} }), {
+			content: M(() => [h("div", {
+				id: I,
+				ref_key: "listElement",
+				ref: C,
+				class: b(["semi-autocomplete-option-list", B.value.dropdownClassName]),
+				style: x(_e.value),
+				role: "listbox"
+			}, [B.value.loading ? (w(), m("div", le, [...t[6] ||= [h("span", { class: "semi-spin semi-spin-middle" }, [h("span", { class: "semi-spin-wrapper" }, [h("span", { class: "semi-spin-spinIcon" })])], -1)]])) : G.value.length ? (w(!0), m(u, { key: 1 }, re(G.value, (t, n) => (w(), f(R, {
+				id: `${I}-option-${n}`,
+				key: t._key ?? `${String(t.label)}-${String(t.value)}-${n}`,
+				class: b(t.class),
+				"class-name": t.className,
+				disabled: t.disabled,
+				focused: n === O(U).focusIndex,
+				selected: !1,
+				style: x(t.style),
+				value: t.value,
+				onSelect: (e) => Z(t, n),
+				onMouseenter: (e) => O(H).handleOptionMouseEnter(n)
+			}, {
+				default: M(() => [e.$slots.option ? T(e.$slots, "option", {
+					focused: n === O(U).focusIndex,
+					inputValue: W.value,
+					item: we(t),
+					onClick: () => Z(t, n),
+					onMouseenter: () => O(H).handleOptionMouseEnter(n),
+					option: t
+				}, void 0, void 0, 0) : typeof Q(t) == "string" ? (w(), m("div", ue, ie(Q(t)), 1)) : (w(), f(O(F), {
+					key: 2,
+					content: Q(t)
+				}, null, 8, ["content"]))]),
+				_: 2
+			}, 1032, [
+				"id",
+				"class",
+				"class-name",
+				"disabled",
+				"focused",
+				"style",
+				"value",
+				"onSelect",
+				"onMouseenter"
+			]))), 128)) : e.$slots.emptyContent ? T(e.$slots, "emptyContent", {}, void 0, void 0, 2) : B.value.emptyContent === null ? p("", !0) : (w(), f(O(F), {
+				key: 3,
+				content: B.value.emptyContent
+			}, null, 8, ["content"]))], 6)]),
+			default: M(() => [h("div", v({
+				id: B.value.id,
+				ref_key: "triggerElement",
+				ref: y
+			}, ve.value, {
+				role: "combobox",
+				"aria-haspopup": "listbox",
+				"aria-controls": I,
+				"aria-expanded": O(U).visible ? "true" : "false",
+				"aria-disabled": B.value.disabled ? "true" : "false",
+				"aria-activedescendant": q.value,
+				class: me.value,
+				style: B.value.style,
+				tabindex: "-1",
+				onClick: Ce,
+				onMouseenter: t[3] ||= (e) => j.value = !0,
+				onMouseleave: t[4] ||= (e) => j.value = !1,
+				onKeydown: Se
+			}), [e.$slots.trigger ? T(e.$slots, "trigger", {
+				componentProps: B.value,
+				inputValue: W.value,
+				onClear: X,
+				onSearch: $,
+				value: Array.from(O(U).selection.values())
+			}, void 0, void 0, 0) : (w(), m("div", {
+				key: 1,
+				class: b(he.value)
+			}, [
+				e.$slots.prefix || B.value.prefix || e.$slots.insetLabel || B.value.insetLabel ? (w(), m("div", {
+					key: 0,
+					id: B.value.insetLabelId,
+					class: b(["semi-input-prefix", e.$slots.insetLabel || B.value.insetLabel ? "semi-input-inset-label" : "semi-input-prefix-icon"]),
+					"x-semi-prop": "prefix,insetLabel",
+					onMousedown: t[0] ||= N(() => {}, ["prevent"])
+				}, [e.$slots.prefix ? T(e.$slots, "prefix", {}, void 0, void 0, 0) : e.$slots.insetLabel ? T(e.$slots, "insetLabel", {}, void 0, void 0, 1) : (w(), f(O(F), {
+					key: 2,
+					content: B.value.prefix ?? B.value.insetLabel
+				}, null, 8, ["content"]))], 42, fe)) : p("", !0),
+				h("input", {
+					ref_key: "inputElement",
+					ref: S,
+					class: b(ge.value),
+					value: W.value,
+					disabled: B.value.disabled,
+					placeholder: B.value.placeholder,
+					autofocus: B.value.autoFocus,
+					"aria-label": B.value.ariaLabel,
+					"aria-labelledby": B.value.ariaLabelledby,
+					"aria-invalid": B.value.validateStatus === "error" ? "true" : B.value.ariaInvalid,
+					"aria-errormessage": B.value.ariaErrormessage,
+					"aria-describedby": B.value.ariaDescribedby,
+					"aria-required": B.value.ariaRequired,
+					"aria-controls": I,
+					"aria-expanded": O(U).visible ? "true" : "false",
+					"aria-activedescendant": q.value,
+					autocomplete: "off",
+					onInput: ye,
+					onFocus: Y,
+					onBlur: xe,
+					onCompositionstart: t[1] ||= (e) => P.value = !0,
+					onCompositionend: be
+				}, null, 42, pe),
+				J.value ? (w(), m("div", {
+					key: 1,
+					class: "semi-input-clearbtn",
+					onMousedown: X
+				}, [T(e.$slots, "clearIcon", {}, () => [B.value.clearIcon ? (w(), f(O(F), {
+					key: 0,
+					content: B.value.clearIcon
+				}, null, 8, ["content"])) : (w(), f(O(se), { key: 1 }))])], 32)) : p("", !0),
+				e.$slots.suffix || B.value.suffix ? (w(), m("div", {
+					key: 2,
+					class: "semi-input-suffix semi-input-suffix-icon",
+					"x-semi-prop": "suffix",
+					onMousedown: t[2] ||= N(() => {}, ["prevent"])
+				}, [T(e.$slots, "suffix", {}, () => [ee(O(F), { content: B.value.suffix }, null, 8, ["content"])])], 32)) : p("", !0)
+			], 2))], 16, de)]),
+			_: 3
+		}, 16, [
+			"visible",
+			"position",
+			"z-index",
+			"motion",
+			"auto-adjust-overflow",
+			"mouse-enter-delay",
+			"mouse-leave-delay",
+			"stop-propagation",
+			"re-pos-key"
+		]));
+	}
+}), { Option: R });
+//#endregion
+export { R as n, B as t };