foucui 2.3.9 → 2.3.10

package/dist/foucui.js

@@ -35,81 +35,88 @@ var ye = Object.create, be = Object.defineProperty, xe = Object.getOwnPropertyDe
 	},
 	emits: ["change", "scroll"],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, o = I(null), s = I(null), d = I(!1), f = I(0), p = a(() => !!r.target), m = () => r.target && document.querySelector(r.target) || window, h = () => {
-			if (p.value) return;
-			let e = o.value, t = s.value;
+		let r = e, i = n, a = I(null), o = I(null), s = I(!1), d = I(0), f = I(0), p = I(), m = /* @__PURE__ */ new WeakSet(), h = () => {
+			if (!r.target) return window;
+			let e = a.value;
+			if (e) {
+				let t = e.closest(r.target);
+				if (t instanceof HTMLElement) return t;
+			}
+			let t = document.querySelector(r.target);
+			return t instanceof HTMLElement ? t : window;
+		}, g = (e) => {
+			m.has(e) || (getComputedStyle(e).position === "static" && (e.style.position = "relative", e.dataset.fouAffixRel = "1"), m.add(e));
+		}, _ = () => {
+			let e = a.value, t = o.value;
 			if (!e || !t) return;
-			let n = m(), a = e.getBoundingClientRect();
-			f.value = t.offsetHeight;
-			let c = !1;
+			let n = h();
+			d.value = t.offsetHeight, f.value = t.offsetWidth;
+			let c = ((s.value ? e.querySelector(".fou-affix__placeholder") : null) ?? e).getBoundingClientRect(), l = !1;
 			if (r.position === "top") {
-				if (n === window) c = a.top <= r.offset;
+				if (n === window) l = c.top <= r.offset;
 				else {
 					let e = n.getBoundingClientRect().top;
-					c = a.top <= e + r.offset;
+					l = c.top <= e + r.offset;
 				}
-			} else if (n === window) c = a.bottom >= window.innerHeight - r.offset;
+			} else if (n === window) l = c.bottom >= window.innerHeight - r.offset;
 			else {
 				let e = n.getBoundingClientRect().bottom;
-				c = a.bottom >= e - r.offset;
+				l = c.bottom >= e - r.offset;
 			}
-			c !== d.value && (d.value = c, i("change", c));
-			let l = n === window ? window.scrollY || document.documentElement.scrollTop : n.scrollTop;
+			if (l !== s.value && (s.value = l, i("change", l)), l) {
+				let e = {
+					zIndex: String(r.zIndex),
+					width: `${f.value}px`
+				};
+				if (n === window) e.position = "fixed", e.left = `${c.left}px`, r.position === "top" ? e.top = `${r.offset}px` : e.bottom = `${r.offset}px`;
+				else {
+					let t = n;
+					g(t);
+					let i = t.getBoundingClientRect();
+					e.position = "absolute", e.left = `${c.left - i.left + t.scrollLeft}px`, e.top = r.position === "top" ? `${t.scrollTop + r.offset}px` : `${t.scrollTop + t.clientHeight - d.value - r.offset}px`;
+				}
+				p.value = e;
+			} else p.value = void 0;
+			let u = n === window ? window.scrollY || document.documentElement.scrollTop : n.scrollTop;
 			i("scroll", {
-				scrollTop: l,
-				fixed: d.value
+				scrollTop: u,
+				fixed: s.value
 			});
-		}, g = a(() => {
-			if (p.value) return {
-				position: "sticky",
-				zIndex: String(r.zIndex),
-				...r.position === "top" ? { top: `${r.offset}px` } : { bottom: `${r.offset}px` }
-			};
-			if (!d.value) return;
-			let e = m(), t = {
-				position: "fixed",
-				zIndex: String(r.zIndex),
-				width: `${o.value?.offsetWidth ?? 0}px`
-			};
-			if (r.position === "top" ? t.top = `${e === window ? r.offset : e.getBoundingClientRect().top + r.offset}px` : t.bottom = `${e === window ? r.offset : window.innerHeight - e.getBoundingClientRect().bottom + r.offset}px`, e !== window) {
-				let n = e.getBoundingClientRect();
-				t.left = `${n.left}px`, t.width = `${n.width}px`;
-			} else o.value && (t.left = `${o.value.getBoundingClientRect().left}px`);
-			return t;
-		}), _ = window, v = () => h(), y = () => h(), b = () => {
-			_.removeEventListener("scroll", v), window.removeEventListener("resize", y), !p.value && (_ = m(), _.addEventListener("scroll", v, { passive: !0 }), window.addEventListener("resize", y, { passive: !0 }), h());
+		}, v = window, y = () => _(), b = () => _(), x = () => {
+			v !== window && v.removeEventListener("scroll", y), window.removeEventListener("scroll", y), window.removeEventListener("resize", b);
+		}, S = () => {
+			x(), v = h(), v !== window && v.addEventListener("scroll", y, { passive: !0 }), window.addEventListener("scroll", y, { passive: !0 }), window.addEventListener("resize", b, { passive: !0 }), _();
 		};
 		return A(() => {
-			C(b);
-		}), k(() => {
-			_.removeEventListener("scroll", v), window.removeEventListener("resize", y);
-		}), W(() => [
+			C(S);
+		}), k(x), W(() => [
 			r.target,
 			r.offset,
-			r.position
-		], () => C(b)), t({ update: h }), (e, t) => (N(), l("div", {
+			r.position,
+			r.zIndex
+		], () => C(S)), t({ update: _ }), (e, t) => (N(), l("div", {
 			ref_key: "rootRef",
-			ref: o,
+			ref: a,
 			class: "fou-affix"
-		}, [U(d) && !U(p) ? (N(), l("div", {
+		}, [U(s) ? (N(), l("div", {
 			key: 0,
 			class: "fou-affix__placeholder",
-			style: E({ height: `${U(f)}px` })
+			style: E({
+				width: `${U(f)}px`,
+				height: `${U(d)}px`
+			})
 		}, null, 4)) : c("", !0), u("div", {
 			ref_key: "affixRef",
-			ref: s,
-			class: w(["fou-affix__content", {
-				"is-fixed": U(d) && !U(p),
-				"is-sticky": U(p)
-			}]),
-			style: E(U(g))
+			ref: o,
+			class: w(["fou-affix__content", { "is-fixed": U(s) }]),
+			style: E(U(p))
 		}, [R(e.$slots, "default", {}, void 0, !0)], 6)], 512));
 	}
 }), Z = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, ke = /* @__PURE__ */ X({ default: () => Ae }), Ae = /*#__PURE__*/ Z(Oe, [["__scopeId", "data-v-5e1b1c7a"]]), je = ["viewBox"], Me = ["href", "xlink:href"], Ne = /*@__PURE__*/ h({
+}, ke = /* @__PURE__ */ X({ default: () => Ae }), Ae = /*#__PURE__*/ Z(Oe, [["__scopeId", "data-v-a9405949"]]), je = ["viewBox"], Me = ["href", "xlink:href"], Ne = /*@__PURE__*/ h({
 	name: "FouIcon",
 	__name: "index",
 	props: {
@@ -17298,16 +17305,18 @@ var hm = { class: "badge-editor-header page-header" }, gm = { class: "badge-edit
 	},
 	emits: ["update:modelValue", "change"],
 	setup(e, { expose: n, emit: r }) {
-		let i = e, o = r, d = I([]), f = I(/* @__PURE__ */ new Map()), p = null, g = a(() => d.value.length), _ = a({
-			get() {
-				return g.value ? ((i.modelValue ?? 0) % g.value + g.value) % g.value : 0;
-			},
-			set(e) {
-				o("update:modelValue", e), o("change", e);
-			}
-		}), v = a(() => {
+		let i = e, o = r, d = I([]), f = I(/* @__PURE__ */ new Map()), p = I(i.modelValue ?? 0), g = null, _ = a(() => d.value.length), v = (e) => _.value ? (e % _.value + _.value) % _.value : 0, y = a(() => v(p.value)), b = (e) => {
+			let t = v(e);
+			p.value !== t && (p.value = t, o("update:modelValue", t), o("change", t));
+		};
+		W(() => i.modelValue, (e) => {
+			if (e == null) return;
+			let t = v(e);
+			p.value !== t && (p.value = t);
+		});
+		let x = a(() => {
 			if (i.height !== "" && i.height != null) return { height: typeof i.height == "number" ? `${i.height}px` : i.height };
-		}), y = a(() => ({ transform: `translateX(-${_.value * 100}%)` })), b = (e) => {
+		}), S = a(() => ({ transform: `translateX(-${y.value * 100}%)` })), C = (e) => {
 			let t = f.value.get(e);
 			return t ? h({
 				name: "FouCarouselSlideHost",
@@ -17318,8 +17327,8 @@ var hm = { class: "badge-editor-header page-header" }, gm = { class: "badge-edit
 			}) : null;
 		};
 		P(vv, {
-			activeIndex: _,
-			itemCount: g,
+			activeIndex: y,
+			itemCount: _,
 			registerItem: (e) => {
 				let t = d.value.findIndex((t) => t.uid === e.uid);
 				return t >= 0 ? d.value[t] = e : d.value.push(e), d.value.findIndex((t) => t.uid === e.uid);
@@ -17331,72 +17340,72 @@ var hm = { class: "badge-editor-header page-header" }, gm = { class: "badge-edit
 		}), P("fouCarouselRegisterRender", (e, t) => {
 			f.value.set(e, t);
 		});
-		let x = (e) => {
-			g.value && (_.value = (e % g.value + g.value) % g.value);
-		}, S = () => {
-			g.value && (_.value >= g.value - 1 ? _.value = i.loop ? 0 : g.value - 1 : _.value += 1);
-		}, C = () => {
-			g.value && (_.value <= 0 ? _.value = i.loop ? g.value - 1 : 0 : --_.value);
-		}, T = () => {
-			D(), !(!i.autoplay || g.value <= 1) && (p = setInterval(() => S(), i.interval));
+		let T = (e) => {
+			_.value && b(e);
 		}, D = () => {
-			p &&= (clearInterval(p), null);
-		}, O = () => D(), A = () => T();
+			_.value && (y.value >= _.value - 1 ? b(i.loop ? 0 : _.value - 1) : b(y.value + 1));
+		}, O = () => {
+			_.value && (y.value <= 0 ? b(i.loop ? _.value - 1 : 0) : b(y.value - 1));
+		}, A = () => {
+			j(), !(!i.autoplay || _.value <= 1) && (g = setInterval(() => D(), i.interval));
+		}, j = () => {
+			g &&= (clearInterval(g), null);
+		}, M = () => j(), F = () => A();
 		return W(() => [
 			i.autoplay,
 			i.interval,
-			g.value
-		], () => T(), { immediate: !0 }), k(D), n({
-			next: S,
-			prev: C,
-			goTo: x
+			_.value
+		], () => A(), { immediate: !0 }), k(j), n({
+			next: D,
+			prev: O,
+			goTo: T
 		}), (n, r) => {
 			let i = Fe;
 			return N(), l("div", {
 				class: w(["fou-carousel", [`fou-carousel--arrow-${e.arrow}`]]),
-				style: E(U(v)),
-				onMouseenter: O,
-				onMouseleave: A
+				style: E(U(x)),
+				onMouseenter: M,
+				onMouseleave: F
 			}, [
 				u("div", yv, [
 					u("div", {
 						class: "fou-carousel__track",
-						style: E(U(y))
+						style: E(U(S))
 					}, [(N(!0), l(t, null, L(U(d), (e, t) => (N(), l("div", {
 						key: e.uid,
-						class: w(["fou-carousel__slide", { "is-active": t === U(_) }]),
-						"aria-hidden": t !== U(_)
-					}, [b(e.uid) ? (N(), s(V(b(e.uid)), { key: 0 })) : c("", !0)], 10, bv))), 128))], 4),
-					e.arrow !== "never" && U(g) > 1 ? (N(), l("button", {
+						class: w(["fou-carousel__slide", { "is-active": t === U(y) }]),
+						"aria-hidden": t !== U(y)
+					}, [C(e.uid) ? (N(), s(V(C(e.uid)), { key: 0 })) : c("", !0)], 10, bv))), 128))], 4),
+					e.arrow !== "never" && U(_) > 1 ? (N(), l("button", {
 						key: 0,
 						type: "button",
 						class: "fou-carousel__arrow fou-carousel__arrow--left",
 						"aria-label": "previous",
-						onClick: q(C, ["stop"])
+						onClick: q(O, ["stop"])
 					}, [m(i, { icon: "arrow-left-s-line" })])) : c("", !0),
-					e.arrow !== "never" && U(g) > 1 ? (N(), l("button", {
+					e.arrow !== "never" && U(_) > 1 ? (N(), l("button", {
 						key: 1,
 						type: "button",
 						class: "fou-carousel__arrow fou-carousel__arrow--right",
 						"aria-label": "next",
-						onClick: q(S, ["stop"])
+						onClick: q(D, ["stop"])
 					}, [m(i, { icon: "arrow-right-s-line" })])) : c("", !0)
 				]),
-				e.indicatorPosition !== "none" && U(g) > 1 ? (N(), l("div", {
+				e.indicatorPosition !== "none" && U(_) > 1 ? (N(), l("div", {
 					key: 0,
 					class: w(["fou-carousel__indicators", `fou-carousel__indicators--${e.indicatorPosition}`])
-				}, [(N(!0), l(t, null, L(U(g), (e, t) => (N(), l("button", {
+				}, [(N(!0), l(t, null, L(U(_), (e, t) => (N(), l("button", {
 					key: t,
 					type: "button",
-					class: w(["fou-carousel__indicator", { "is-active": t === U(_) }]),
+					class: w(["fou-carousel__indicator", { "is-active": t === U(y) }]),
 					"aria-label": `slide ${t + 1}`,
-					onClick: q((e) => x(t), ["stop"])
+					onClick: q((e) => T(t), ["stop"])
 				}, null, 10, xv))), 128))], 2)) : c("", !0),
 				u("div", Sv, [R(n.$slots, "default", {}, void 0, !0)])
 			], 38);
 		};
 	}
-}), wv = /* @__PURE__ */ X({ default: () => Tv }), Tv = /*#__PURE__*/ Z(Cv, [["__scopeId", "data-v-5b42731e"]]), Ev = ["data-uid"], Dv = /*@__PURE__*/ h({
+}), wv = /* @__PURE__ */ X({ default: () => Tv }), Tv = /*#__PURE__*/ Z(Cv, [["__scopeId", "data-v-6d39c1aa"]]), Ev = ["data-uid"], Dv = /*@__PURE__*/ h({
 	name: "FouCarouselItem",
 	__name: "index",
 	props: { name: {} },