@moubing/bing-ui 0.11.1 → 0.12.0

package/dist/components/BingAutocomplete/BingAutocomplete.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,560 @@
+import { useConfigZIndex as e } from "../../utils/config.js";
+import { useReducedMotion as t } from "../../motion/reducedMotion.js";
+import { createSelectPanelEnter as n, createSelectPanelLeave as r } from "../../motion/selectPanelMotion.js";
+import { getOptionDetailSnapshot as i, moveOptionDetailPanel as a } from "../../motion/optionDetailMotion.js";
+import { enterLiquidHover as o, leaveLiquidHover as s, setLiquidHoverOrigin as c } from "../../motion/liquidHover.js";
+import { isolateFormControls as l, useFormControl as u } from "../BingForm/useFormControl.js";
+import { useControlAttrs as ee } from "../../utils/controlAttrs.js";
+import te from "../BingInput/BingInput.js";
+import ne from "../BingScrollbar/BingScrollbar.js";
+import { useOverlay as re } from "../../utils/overlay.js";
+import { useClientReady as ie } from "../../utils/useClientReady.js";
+import { Fragment as ae, Teleport as oe, Transition as se, computed as d, createBlock as ce, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as le, createTextVNode as ue, createVNode as de, defineComponent as h, mergeProps as fe, nextTick as g, normalizeClass as pe, normalizeStyle as me, onBeforeUnmount as he, onMounted as ge, openBlock as _, ref as v, renderList as _e, renderSlot as y, shallowRef as ve, toDisplayString as b, unref as x, useId as ye, useSlots as be, watch as S, withCtx as C, withModifiers as w } from "vue";
+import { gsap as T } from "gsap";
+//#region src/components/BingAutocomplete/BingAutocomplete.vue?vue&type=script&setup=true&lang.ts
+var xe = {
+	key: 0,
+	class: "bing-autocomplete__header"
+}, Se = ["aria-label", "aria-busy"], Ce = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"aria-label",
+	"data-autocomplete-index",
+	"onMouseenter",
+	"onMousemove",
+	"onClick"
+], we = { class: "bing-autocomplete__option-main" }, Te = {
+	key: 1,
+	class: "bing-autocomplete__state",
+	role: "status"
+}, Ee = {
+	key: 2,
+	class: "bing-autocomplete__state",
+	role: "alert"
+}, De = {
+	key: 3,
+	class: "bing-autocomplete__state",
+	role: "status"
+}, Oe = {
+	key: 4,
+	class: "bing-autocomplete__footer"
+}, ke = { key: 0 }, Ae = { key: 1 }, je = { key: 0 }, Me = { key: 1 }, Ne = /* @__PURE__ */ h({
+	inheritAttrs: !1,
+	__name: "BingAutocomplete",
+	props: {
+		id: {},
+		modelValue: { default: "" },
+		options: { default: () => [] },
+		filter: {
+			type: Boolean,
+			default: !0
+		},
+		openOnEmpty: {
+			type: Boolean,
+			default: !0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		error: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		placeholder: {},
+		emptyText: { default: "没有匹配的候选" },
+		ariaLabel: {},
+		ariaDescribedby: {},
+		size: {},
+		status: {},
+		icon: {},
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		panelWidth: {},
+		panelMaxHeight: { default: 360 },
+		completeOnSelect: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"select",
+		"open",
+		"close",
+		"clear"
+	],
+	setup(h, { expose: Ne, emit: Pe }) {
+		let Fe = t(), E = h, D = Pe, Ie = be(), { rootAttrs: Le, controlAttrs: Re } = ee(), { formItem: ze, resolvedId: Be, resolvedSize: Ve, resolvedDisabled: He, resolvedStatus: Ue, resolvedAriaDescribedby: We } = u(E);
+		l();
+		let Ge = ie(), O = `bing-autocomplete-${ye()}`, k = v(null), A = v(null), j = v(null), M = v(null), N = ve(), Ke = v("right"), P = v(null), qe = v(null), Je = v(null), F = v(!1), Ye = v(!1), I = v(-1), L = v({
+			left: 0,
+			top: 0,
+			width: 320,
+			height: 360,
+			detailHeight: 360,
+			inline: !0,
+			placement: "bottom"
+		}), Xe = 0, Ze = 0, R = 0, z = 0, Qe = !1, $e, B, V = !1, H, et = !1, U, W, tt, G, nt = !1, K = d(() => {
+			if (!E.filter) return E.options;
+			let e = E.modelValue.trim().toLocaleLowerCase();
+			return E.options.filter((t) => t.label.toLocaleLowerCase().includes(e));
+		}), q = d(() => !E.loading && !E.error), J = d(() => q.value ? K.value[I.value] : void 0), rt = d(() => Object.entries(N.value?.meta ?? {}).filter(([, e]) => e != null && e !== "")), it = d(() => L.value.inline && N.value ? Math.min(184, L.value.height / 2) : 0), at = e("popover"), ot = re({
+			open: () => F.value,
+			elements: () => [
+				k.value,
+				A.value,
+				j.value
+			],
+			zIndex: () => at.value,
+			closeOnEscape: () => !Ye.value,
+			onEscape: () => {
+				$(), nt = !0, P.value?.input?.focus({ preventScroll: !0 }), nt = !1;
+			}
+		}), st = d(() => ({
+			position: "fixed",
+			left: `${L.value.left}px`,
+			top: `${L.value.top}px`,
+			width: `${L.value.width}px`,
+			zIndex: ot.zIndex.value
+		})), ct = d(() => L.value.inline ? {} : { zIndex: ot.zIndex.value + 1 });
+		function Y(e) {
+			tt ? tt.add(e) : e();
+		}
+		function lt(e = I.value) {
+			return document.getElementById(`${O}-${e}`);
+		}
+		function X() {
+			clearTimeout($e), $e = void 0;
+		}
+		function ut() {
+			let e = lt(), t = j.value;
+			if (!F.value || !e || !t || L.value.inline) return null;
+			let n = e.getBoundingClientRect(), r = window.visualViewport, i = (r?.offsetLeft ?? 0) + 12, a = (r?.offsetTop ?? 0) + 12, o = i + (r?.width ?? innerWidth) - 24, s = a + (r?.height ?? innerHeight) - 24, c = t.offsetWidth, l = t.offsetHeight, u = L.value.left + L.value.width + 12, ee = L.value.left - c - 12, te = u + c <= o ? "right" : "left";
+			return {
+				x: Math.max(i, Math.min(te === "right" ? u : ee, o - c)),
+				y: Math.max(a, Math.min(n.top + n.height / 2 - l / 2, s - l)),
+				placement: te
+			};
+		}
+		function dt(e = !1, t) {
+			cancelAnimationFrame(R), !(!F.value || !N.value) && (R = requestAnimationFrame(() => {
+				R = 0, !(et || !F.value || !j.value || L.value.inline) && Y(() => {
+					let n = a({
+						panel: j.value,
+						content: M.value,
+						getTarget: ut,
+						animateContent: e,
+						previousSnapshot: t,
+						reducedMotion: Fe(),
+						onComplete: () => Je.value?.update()
+					});
+					n && (Ke.value = n.placement);
+				});
+			}));
+		}
+		function ft() {
+			Qe = !1, X(), clearTimeout(B);
+			let e = J.value;
+			if (!F.value || !e || e.disabled || !(Ie["option-detail"] || e.detail?.trim() || e.description?.trim() || Object.values(e.meta ?? {}).some((e) => e != null && e !== ""))) {
+				Z(!0);
+				return;
+			}
+			let t = N.value !== e, n = t ? i(j.value) : void 0;
+			j.value && T.killTweensOf(j.value), N.value = e;
+			let r = ++z;
+			g(() => {
+				et || r !== z || !F.value || dt(t, n);
+			});
+		}
+		function Z(e = !1) {
+			Qe = !0, X(), cancelAnimationFrame(R), R = 0;
+			let t = ++z, n = j.value;
+			T.killTweensOf([n, M.value].filter(Boolean));
+			let r = () => {
+				t === z && (N.value = void 0, Qe = !1);
+			};
+			if (!n || e || L.value.inline || Fe()) {
+				r();
+				return;
+			}
+			Y(() => {
+				T.to(n, {
+					autoAlpha: 0,
+					scale: .96,
+					x: `+=${Ke.value === "right" ? -6 : 6}`,
+					duration: .14,
+					ease: "power2.out",
+					overwrite: !0,
+					onComplete: r
+				});
+			});
+		}
+		function pt() {
+			X(), $e = setTimeout(() => Z(), 120);
+		}
+		function mt(e, t) {
+			let n = !H || e.clientX !== H.x || e.clientY !== H.y;
+			if (H = {
+				x: e.clientX,
+				y: e.clientY
+			}, V && (e.type !== "mousemove" || !n)) return;
+			if (V = !1, X(), K.value[t]?.disabled) {
+				Z(!0);
+				return;
+			}
+			let r = I.value !== t;
+			I.value = t, (r || !N.value || Qe) && ft();
+			let i = e.currentTarget, a = i.querySelector(".bing-autocomplete__option-liquid");
+			!a || Fe() || (c(i, a, e), i.classList.contains("is-liquid-active") || (i.classList.add("is-liquid-active"), Y(() => {
+				o(a);
+			})));
+		}
+		function ht(e) {
+			let t = e.currentTarget;
+			t.classList.remove("is-liquid-active");
+			let n = t.querySelector(".bing-autocomplete__option-liquid");
+			n && !Fe() && Y(() => {
+				s(n);
+			});
+		}
+		function gt() {
+			if (V) {
+				dt();
+				return;
+			}
+			Z(!0), clearTimeout(B), B = setTimeout(() => {
+				if (!F.value || V || !H) return;
+				let e = document.elementFromPoint(H.x, H.y)?.closest("[data-autocomplete-index]");
+				!e || !A.value?.contains(e) || (I.value = Number(e.dataset.autocompleteIndex), ft());
+			}, 150);
+		}
+		function _t(e, t, i) {
+			if (et) {
+				t();
+				return;
+			}
+			U?.kill(), W = i ? void 0 : t;
+			let a = e, o = Array.from(a.querySelectorAll(".bing-autocomplete__option")), s = a.querySelectorAll(".bing-autocomplete__option-liquid");
+			if (T.killTweensOf([
+				a,
+				...o,
+				...s
+			]), a.inert = !i, i ? (yt(), G?.observe(a)) : G?.unobserve(a), Fe()) {
+				T.set([a, ...o], {
+					autoAlpha: +!!i,
+					clearProps: "transform"
+				}), W = void 0, t();
+				return;
+			}
+			Y(() => {
+				let e = i ? n : r, s = a.getBoundingClientRect(), c = o.filter((e) => {
+					let t = e.getBoundingClientRect();
+					return t.top < s.bottom && t.bottom > s.top;
+				});
+				c.forEach((e) => {
+					e.style.willChange = "transform, opacity";
+				}), U = e({
+					panel: a,
+					items: c,
+					actionRail: null,
+					actionButtons: [],
+					placement: L.value.placement,
+					align: "start",
+					onComplete: () => {
+						U = void 0, W = void 0, t(), i && dt();
+					}
+				});
+			});
+		}
+		function vt() {
+			U?.kill(), U = void 0;
+		}
+		function yt() {
+			if (Xe = 0, !F.value || !k.value) return;
+			let e = k.value.getBoundingClientRect(), t = window.visualViewport, n = (t?.offsetLeft ?? 0) + 8, r = (t?.offsetTop ?? 0) + 8, i = n + (t?.width ?? window.innerWidth) - 16, a = r + (t?.height ?? window.innerHeight) - 16, o = Math.min(Math.max(e.width, E.panelWidth ?? 320), i - n), s = Math.max(n, Math.min(e.left, i - o)), c = a - e.bottom - 10, l = e.top - r - 10, u = c >= Math.min(E.panelMaxHeight, 200) || c >= l, ee = Math.max(0, Math.min(E.panelMaxHeight, (u ? c : l) - 10)), te = Math.min(A.value?.offsetHeight ?? ee + 10, ee + 10), ne = u ? Math.min(a, e.bottom + 10) : Math.max(r, e.top - 10 - te), re = i - s - o < 260 && s - n < 260;
+			L.value.inline !== re && T.killTweensOf([j.value, M.value].filter(Boolean));
+			let ie = {
+				left: s,
+				top: ne,
+				width: o,
+				height: ee,
+				inline: re,
+				detailHeight: Math.max(0, a - r - 32),
+				placement: u ? "bottom" : "top"
+			};
+			Object.keys(ie).some((e) => ie[e] !== L.value[e]) && (L.value = ie, g(() => dt()));
+		}
+		function Q() {
+			F.value && !Xe && (Xe = requestAnimationFrame(yt));
+		}
+		function bt(e = E.modelValue) {
+			return E.openOnEmpty || !!e.trim();
+		}
+		function xt(e = E.modelValue) {
+			He.value || F.value || nt || !bt(e) || (F.value = !0, V = !1, I.value = K.value.findIndex((e) => !e.disabled), yt(), D("open"), g(() => {
+				F.value && yt();
+			}));
+		}
+		function $() {
+			F.value && (F.value = !1, V = !1, clearTimeout(B), Z(), A.value && G?.unobserve(A.value), D("close"));
+		}
+		function St() {
+			P.value?.focus(), xt();
+		}
+		function Ct(e) {
+			D("update:modelValue", String(e)), ze?.handleControlChange(), bt(String(e)) ? xt(String(e)) : $();
+		}
+		function wt(e) {
+			!q.value || e.disabled || He.value || Ye.value || (E.completeOnSelect && Ct(e.label), D("select", e), E.closeOnSelect && $());
+		}
+		function Tt() {
+			g(() => {
+				let e = qe.value?.viewport, t = document.getElementById(`${O}-${I.value}`);
+				if (!F.value || !e || !t) return;
+				qe.value?.stop();
+				let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+				r.top < n.top ? e.scrollTop += r.top - n.top : r.bottom > n.bottom && (e.scrollTop += r.bottom - n.bottom), ft();
+			});
+		}
+		function Et(e) {
+			if (!(e.isComposing || Ye.value || e.keyCode === 229 || He.value)) if (e.key === "Escape" && F.value) e.preventDefault(), e.stopPropagation(), $();
+			else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				if (e.preventDefault(), !F.value) {
+					xt(), V = !0, Tt();
+					return;
+				}
+				if (!q.value) return;
+				V = !0;
+				let t = e.key === "ArrowDown" ? 1 : -1;
+				for (let e = 1; e <= K.value.length; e++) {
+					let n = (I.value + t * e + K.value.length) % K.value.length;
+					if (!K.value[n]?.disabled) {
+						I.value = n, Tt();
+						break;
+					}
+				}
+			} else e.key === "Enter" && F.value && J.value && (e.preventDefault(), wt(J.value));
+		}
+		function Dt(e) {
+			return !!(e && ([
+				k.value,
+				A.value,
+				j.value
+			].some((t) => t?.contains(e)) || ot.contains(e)));
+		}
+		function Ot(e) {
+			F.value && e.target instanceof Node && !Dt(e.target) && $();
+		}
+		function kt(e) {
+			let t = e.relatedTarget instanceof Node && Dt(e.relatedTarget);
+			cancelAnimationFrame(Ze), Ze = requestAnimationFrame(() => {
+				Ze = 0;
+				let n = !e.relatedTarget && e.target instanceof Node && !e.target.isConnected || t && e.relatedTarget instanceof Node && !e.relatedTarget.isConnected;
+				if (F.value && n && document.activeElement === document.body) {
+					P.value?.input?.focus({ preventScroll: !0 });
+					return;
+				}
+				Dt(document.activeElement) || ($(), ze?.handleControlBlur());
+			});
+		}
+		return S([K, q], () => {
+			let e = typeof document > "u" ? null : document.activeElement, t = Dt(e);
+			I.value = K.value.findIndex((e) => !e.disabled), F.value && (Q(), V && J.value ? Tt() : Z(!0)), g(() => {
+				F.value && t && e && !e.isConnected && document.activeElement === document.body && P.value?.input?.focus({ preventScroll: !0 });
+			});
+		}), S(He, (e) => {
+			e && $();
+		}), S([() => E.modelValue, () => E.openOnEmpty], () => {
+			bt() || $();
+		}), S([() => E.panelWidth, () => E.panelMaxHeight], Q), S(it, () => {
+			V && Tt();
+		}), S(M, (e, t) => {
+			t && G?.unobserve(t), e && G?.observe(e);
+		}), ge(() => {
+			tt = T.context(() => {}, k.value), G = new ResizeObserver((e) => {
+				e.some((e) => e.target !== M.value) && Q(), e.some((e) => e.target === M.value) && !R && j.value && !T.isTweening(j.value) && dt();
+			}), k.value && G.observe(k.value), window.addEventListener("resize", Q), window.addEventListener("scroll", Q, !0), window.visualViewport?.addEventListener("resize", Q), window.visualViewport?.addEventListener("scroll", Q), document.addEventListener("pointerdown", Ot, !0), document.addEventListener("focusin", Ot);
+		}), he(() => {
+			et = !0, z++, X(), clearTimeout(B), cancelAnimationFrame(R), vt(), W?.(), W = void 0, tt?.revert(), cancelAnimationFrame(Xe), cancelAnimationFrame(Ze), G?.disconnect(), window.removeEventListener("resize", Q), window.removeEventListener("scroll", Q, !0), window.visualViewport?.removeEventListener("resize", Q), window.visualViewport?.removeEventListener("scroll", Q), document.removeEventListener("pointerdown", Ot, !0), document.removeEventListener("focusin", Ot);
+		}), Ne({
+			focus: St,
+			close: $,
+			get input() {
+				return P.value?.input ?? null;
+			}
+		}), (e, t) => (_(), p("div", fe(x(Le)(), {
+			ref_key: "root",
+			ref: k,
+			class: ["bing-autocomplete", { "is-block": h.block }],
+			onFocusout: kt
+		}), [de(te, fe(x(Re)(), {
+			id: x(Be),
+			ref_key: "input",
+			ref: P,
+			"model-value": h.modelValue,
+			disabled: x(He),
+			size: x(Ve),
+			status: x(Ue),
+			placeholder: h.placeholder,
+			clearable: h.clearable,
+			icon: h.icon,
+			block: "",
+			"aria-label": h.ariaLabel,
+			"aria-describedby": x(We),
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": F.value,
+			"aria-controls": F.value ? O : void 0,
+			"aria-activedescendant": F.value && J.value ? `${O}-${I.value}` : void 0,
+			spellcheck: !1,
+			"onUpdate:modelValue": Ct,
+			onFocus: t[0] ||= (e) => xt(),
+			onClick: t[1] ||= (e) => xt(),
+			onKeydown: Et,
+			onCompositionstart: t[2] ||= (e) => Ye.value = !0,
+			onCompositionend: t[3] ||= (e) => Ye.value = !1,
+			onClear: t[4] ||= (e) => D("clear")
+		}), le({ _: 2 }, [Ie.icon ? {
+			name: "icon",
+			fn: C(() => [y(e.$slots, "icon", {}, void 0, !0)]),
+			key: "0"
+		} : void 0]), 1040, [
+			"id",
+			"model-value",
+			"disabled",
+			"size",
+			"status",
+			"placeholder",
+			"clearable",
+			"icon",
+			"aria-label",
+			"aria-describedby",
+			"aria-expanded",
+			"aria-controls",
+			"aria-activedescendant"
+		]), x(Ge) ? (_(), ce(oe, {
+			key: 0,
+			to: "body"
+		}, [de(se, {
+			css: !1,
+			onEnter: t[7] ||= (e, t) => _t(e, t, !0),
+			onLeave: t[8] ||= (e, t) => _t(e, t, !1),
+			onEnterCancelled: vt,
+			onLeaveCancelled: vt
+		}, {
+			default: C(() => [F.value ? (_(), p("div", {
+				key: 0,
+				ref_key: "panel",
+				ref: A,
+				class: "bing-autocomplete__panel",
+				style: me(st.value),
+				onFocusout: kt
+			}, [de(ne, {
+				ref_key: "scrollbar",
+				ref: qe,
+				"max-height": L.value.height - it.value,
+				focusable: !1,
+				onScroll: gt
+			}, {
+				default: C(() => [
+					Ie.header ? (_(), p("div", xe, [y(e.$slots, "header", {}, void 0, !0)])) : f("", !0),
+					m("div", {
+						id: O,
+						role: "listbox",
+						"aria-label": h.ariaLabel || "搜索候选",
+						"aria-busy": h.loading,
+						onMouseenter: X,
+						onMouseleave: pt
+					}, [q.value ? (_(!0), p(ae, { key: 0 }, _e(K.value, (n, r) => (_(), p("div", {
+						id: `${O}-${r}`,
+						key: n.value,
+						role: "option",
+						class: pe(["bing-autocomplete__option", {
+							"is-active": I.value === r,
+							"is-disabled": n.disabled
+						}]),
+						"aria-selected": I.value === r,
+						"aria-disabled": n.disabled || void 0,
+						"aria-label": n.label,
+						"data-autocomplete-index": r,
+						onMousedown: t[5] ||= w(() => {}, ["prevent"]),
+						onMouseenter: (e) => mt(e, r),
+						onMousemove: (e) => mt(e, r),
+						onMouseleave: ht,
+						onClick: (e) => wt(n)
+					}, [t[12] ||= m("span", {
+						class: "bing-autocomplete__option-liquid",
+						"aria-hidden": "true"
+					}, null, -1), m("span", we, [y(e.$slots, "option", {
+						option: n,
+						active: I.value === r
+					}, () => [m("span", null, b(n.label), 1)], !0)])], 42, Ce))), 128)) : f("", !0)], 40, Se),
+					h.loading ? (_(), p("div", Te, [y(e.$slots, "loading", {}, () => [t[13] ||= ue("正在加载…", -1)], !0)])) : h.error ? (_(), p("div", Ee, [y(e.$slots, "error", { error: h.error }, () => [ue(b(h.error), 1)], !0)])) : K.value.length ? f("", !0) : (_(), p("div", De, [y(e.$slots, "empty", {}, () => [ue(b(h.emptyText), 1)], !0)])),
+					Ie.footer ? (_(), p("div", Oe, [y(e.$slots, "footer", {}, void 0, !0)])) : f("", !0)
+				]),
+				_: 3
+			}, 8, ["max-height"]), L.value.inline && N.value ? (_(), p("div", {
+				key: 0,
+				class: "bing-autocomplete__detail is-inline",
+				"aria-hidden": "true",
+				onMouseenter: X,
+				onMouseleave: pt,
+				onMousedown: t[6] ||= w(() => {}, ["prevent"])
+			}, [de(ne, {
+				"max-height": Math.max(0, it.value - 28),
+				focusable: !1
+			}, {
+				default: C(() => [y(e.$slots, "option-detail", { option: N.value }, () => [
+					m("strong", null, b(N.value.label), 1),
+					N.value.detail || N.value.description ? (_(), p("p", ke, b(N.value.detail || N.value.description), 1)) : f("", !0),
+					rt.value.length ? (_(), p("dl", Ae, [(_(!0), p(ae, null, _e(rt.value, ([e, t]) => (_(), p("div", { key: e }, [m("dt", null, b(e), 1), m("dd", null, b(t), 1)]))), 128))])) : f("", !0)
+				], !0)]),
+				_: 3
+			}, 8, ["max-height"])], 32)) : f("", !0)], 36)) : f("", !0)]),
+			_: 3
+		}), !L.value.inline && N.value ? (_(), p("div", {
+			key: 0,
+			ref_key: "detail",
+			ref: j,
+			class: "bing-autocomplete__detail",
+			style: me(ct.value),
+			"aria-hidden": "true",
+			onMouseenter: X,
+			onMouseleave: pt,
+			onMousedown: t[9] ||= w(() => {}, ["prevent"]),
+			onPointerdown: t[10] ||= w(() => {}, ["stop"]),
+			onClick: t[11] ||= w(() => {}, ["stop"])
+		}, [de(ne, {
+			ref_key: "detailScrollbar",
+			ref: Je,
+			"max-height": L.value.detailHeight,
+			focusable: !1
+		}, {
+			default: C(() => [m("div", {
+				ref_key: "detailContent",
+				ref: M,
+				class: "bing-autocomplete__detail-content"
+			}, [y(e.$slots, "option-detail", { option: N.value }, () => [
+				m("strong", null, b(N.value.label), 1),
+				N.value.detail || N.value.description ? (_(), p("p", je, b(N.value.detail || N.value.description), 1)) : f("", !0),
+				rt.value.length ? (_(), p("dl", Me, [(_(!0), p(ae, null, _e(rt.value, ([e, t]) => (_(), p("div", { key: e }, [m("dt", null, b(e), 1), m("dd", null, b(t), 1)]))), 128))])) : f("", !0)
+			], !0)], 512)]),
+			_: 3
+		}, 8, ["max-height"])], 36)) : f("", !0)])) : f("", !0)], 16));
+	}
+});
+//#endregion
+export { Ne as default };

package/dist/components/BingButton/BingButton.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./BingButton.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                           */
+//#region src/components/BingButton/BingButton.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-b82728f7"]]);
+//#endregion
+export { n as default };

package/dist/components/BingButton/BingButton.vue.d.ts

@@ -9,13 +9,13 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<BingButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     blur: (event: FocusEvent) => any;
-    click: (event: MouseEvent) => any;
     focus: (event: FocusEvent) => any;
+    click: (event: MouseEvent) => any;
     throttled: (payload: import('./BingButton.types').BingButtonThrottledPayload) => any;
 }, string, import('vue').PublicProps, Readonly<BingButtonProps> & Readonly<{
     onBlur?: ((event: FocusEvent) => any) | undefined;
-    onClick?: ((event: MouseEvent) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
     onThrottled?: ((payload: import('./BingButton.types').BingButtonThrottledPayload) => any) | undefined;
 }>, {
     disabled: boolean;