@baishuyun/ui-base 6.20.0 → 6.21.0

package/dist/Tabs/Tabs-DnoZ8BO0.js

@@ -1,413 +0,0 @@
-import { t as e } from "../Icon/Icon-DrdQOEJE.js";
-import { a as t, i as n } from "../Overlay/OverlayContext-CVSFoyqN.js";
-import { t as r } from "../vendors/useLocale-Be4e7Xfn.js";
-import { r as i } from "../vendors/animations-ISccYUE3.js";
-import { t as a } from "../vendors/useFloatingPortal-DJ1iKmW-.js";
-import { isString as o } from "lodash-es";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { createContext as l, useCallback as u, useContext as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import g from "clsx";
-import { useControllableValue as _, useEventListener as v, useMutationObserver as y, useToggle as b } from "ahooks";
-import { AnimatePresence as x, motion as S } from "motion/react";
-import { FloatingPortal as C } from "@floating-ui/react";
-import "tinycolor2";
-//#region src/components/Tabs/constants.ts
-var w = {
-	LINE: "line",
-	CARD: "card",
-	FILLED_CARD: "filled-card",
-	BADGE_CARD: "badge-card"
-}, T = l({
-	color: "#0269ff",
-	type: w.LINE
-}), E = "_active_1oc43_18", D = "_disabled_1oc43_26", O = "_line_1oc43_44", k = "_card_1oc43_53", A = {
-	"bsy-tab": "_bsy-tab_1oc43_1",
-	"badge-card": "_badge-card_1oc43_9",
-	active: E,
-	disabled: D,
-	line: O,
-	card: k,
-	"filled-card": "_filled-card_1oc43_78"
-};
-//#endregion
-//#region src/utils/color.ts
-function j(e, t) {
-	if (t < 0 || t > 1) return console.error("Alpha value must be between 0 and 1."), null;
-	e = e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (e, t, n, r) => t + t + n + n + r + r);
-	let n = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
-	return n ? `rgba(${parseInt(n[1], 16)}, ${parseInt(n[2], 16)}, ${parseInt(n[3], 16)}, ${t})` : (console.error("Invalid HEX color format."), null);
-}
-//#endregion
-//#region src/components/Tabs/Tab/Tab.tsx
-var M = (e, t = 24) => e.length <= t ? e : e.slice(0, t) + "...", N = (e) => typeof e == "string" ? M(e) : e, P = ({ label: e, active: t = !1, onClick: n, tabKey: r }) => {
-	let { type: i = w.LINE, disabled: a, color: c } = d(T), l = o(e) ? e : "", u = () => {
-		a || n?.(r);
-	}, f = {
-		"data-tab-item": !0,
-		"data-tab-key": r,
-		role: "tab",
-		"aria-selected": t,
-		"aria-controls": `panel-${r}`,
-		onClick: u
-	};
-	return i === w.LINE ? /* @__PURE__ */ s("div", {
-		...f,
-		className: g(A["bsy-tab"], A.line, {
-			[A.disabled]: a,
-			[A.active]: t
-		}),
-		title: l,
-		children: N(e)
-	}) : i === w.CARD ? /* @__PURE__ */ s("div", {
-		...f,
-		className: g(A["bsy-tab"], A.card, {
-			[A.active]: t,
-			[A.disabled]: a
-		}),
-		title: l,
-		style: { "--theme-bg-color": j(c, .1) },
-		children: /* @__PURE__ */ s("span", { children: N(e) })
-	}) : i === w.FILLED_CARD ? /* @__PURE__ */ s("div", {
-		...f,
-		className: g(A["bsy-tab"], A["filled-card"], {
-			[A.active]: t,
-			[A.disabled]: a
-		}),
-		title: l,
-		children: N(e)
-	}) : i === w.BADGE_CARD ? /* @__PURE__ */ s("div", {
-		...f,
-		className: g(A["bsy-tab"], A["badge-card"], {
-			[A.active]: t,
-			[A.disabled]: a
-		}),
-		title: l,
-		children: /* @__PURE__ */ s("span", { children: N(e) })
-	}) : null;
-};
-P.displayName = "BsyTab";
-//#endregion
-//#region src/components/Tabs/TabList/useTabScroll.ts
-var F = ({ disabled: e, children: t }) => {
-	let n = m(null), r = m(null), [i, a] = h(!1), [o, s] = h(!1), [c, l] = h(!1), [d, p] = h(0), g = u(() => {
-		let e = n.current, t = r.current;
-		if (!e || !t) return;
-		let i = e.clientWidth, o = t.scrollWidth, c = o > i;
-		a(c), c ? (s(d < 0), l(d > -(o - i))) : (s(!1), l(!1), p(0));
-	}, [d]);
-	return v("resize", () => g()), f(() => {
-		g();
-	}, [
-		d,
-		t,
-		g
-	]), {
-		listRef: n,
-		wrapperRef: r,
-		showControls: i,
-		canScrollLeft: o,
-		canScrollRight: c,
-		translateX: d,
-		scrollLeft: () => {
-			if (!o || e) return;
-			let t = n.current;
-			if (!t) return;
-			let r = t.clientWidth * .6;
-			p(Math.min(0, d + r));
-		},
-		scrollRight: () => {
-			if (!c || e) return;
-			let t = n.current, i = r.current;
-			if (!t || !i) return;
-			let a = t.clientWidth * .6, o = t.clientWidth, s = -(i.scrollWidth - o);
-			p(Math.max(s, d - a));
-		}
-	};
-}, I = ({ activeKey: e, type: t, showIndicator: n, wrapperRef: r, items: i }) => {
-	let [a, o] = h({
-		width: 0,
-		left: 0,
-		ready: !1
-	}), s = u((e) => {
-		if (!n || !r.current) return;
-		let t = r.current.getBoundingClientRect(), i = e.getBoundingClientRect(), a = i.left - t.left, s = i.width;
-		o({
-			width: s,
-			left: a,
-			ready: !0
-		});
-	}, [n, r]);
-	return f(() => {
-		if (!e || !r.current) return;
-		let t = r.current.querySelector(`[data-tab-key="${e}"]`);
-		t && n && s(t);
-	}, [
-		e,
-		n,
-		r,
-		s,
-		t,
-		i
-	]), y(() => {
-		if (!n) return;
-		let e = r.current?.querySelector("[aria-selected=\"true\"]");
-		e && s(e);
-	}, r, {
-		subtree: !0,
-		characterData: !0
-	}), {
-		indicatorStyle: a,
-		handleTabClick: (e) => {
-			s(e);
-		}
-	};
-}, L = ({ children: e, activeKey: t, className: n, style: i, items: a }) => {
-	let { t: o } = r(), { type: l = w.LINE, color: u, disabled: f } = d(T), p = [w.LINE, w.CARD].includes(l), { listRef: m, wrapperRef: h, showControls: _, canScrollLeft: v, canScrollRight: y, translateX: b, scrollLeft: x, scrollRight: S } = F({
-		disabled: f,
-		children: e
-	}), { indicatorStyle: C, handleTabClick: E } = I({
-		activeKey: t,
-		type: l,
-		showIndicator: p,
-		wrapperRef: h,
-		items: a
-	}), D = C.ready, O = (e) => {
-		if (f) return;
-		let t = e.target.closest("[data-tab-item]");
-		t && E(t);
-	};
-	return /* @__PURE__ */ c("div", {
-		className: g("relative max-h-[36px]", n),
-		style: i,
-		children: [
-			_ && /* @__PURE__ */ s("button", {
-				className: g("absolute left-0 top-0 bottom-0 z-10 w-8 flex items-center justify-center", {
-					"text-gray-400 cursor-not-allowed": !v || f,
-					"text-gray-600": v && !f
-				}),
-				onClick: x,
-				disabled: !v || f,
-				"aria-label": o("tabs.scrollPrev"),
-				children: /* @__PURE__ */ s("svg", {
-					className: "w-4 h-4",
-					fill: "none",
-					stroke: "currentColor",
-					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ s("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: 2,
-						d: "M15 19l-7-7 7-7"
-					})
-				})
-			}),
-			/* @__PURE__ */ s("div", {
-				className: g({
-					"pl-8": _,
-					"pr-8": _
-				}),
-				children: /* @__PURE__ */ s("div", {
-					ref: m,
-					className: g("overflow-hidden", {
-						"border-b border-[#e0e0e0]": l === w.LINE,
-						"border-b-2": l === w.FILLED_CARD || l === w.BADGE_CARD,
-						"pb-[2px]": l === w.BADGE_CARD
-					}),
-					style: { borderColor: l === w.LINE ? void 0 : u },
-					children: /* @__PURE__ */ c("div", {
-						ref: h,
-						role: "tablist",
-						className: g("relative text-sm flex flex-nowrap", {
-							"gap-x-[26px]": l === w.LINE,
-							"gap-x-[10px]": l === w.FILLED_CARD || l === w.BADGE_CARD,
-							"bg-[#f0f0f0]": l === w.CARD
-						}),
-						onClick: O,
-						style: {
-							"--theme-color": u,
-							transform: `translateX(${b}px)`,
-							transition: "transform 0.3s ease-in-out"
-						},
-						children: [e, p && C.ready && /* @__PURE__ */ s("div", {
-							className: g("absolute h-0.5", {
-								"bottom-0": l === w.LINE,
-								"top-0": l === w.CARD,
-								"transition-all duration-300 ease-in-out": D
-							}),
-							style: {
-								backgroundColor: u,
-								width: `${C.width}px`,
-								left: `${C.left}px`
-							}
-						})]
-					})
-				})
-			}),
-			_ && /* @__PURE__ */ s("button", {
-				className: g("absolute right-0 top-0 bottom-0 z-10 w-8 flex items-center justify-center", {
-					"text-gray-400 cursor-not-allowed": !y || f,
-					"text-gray-600": y && !f
-				}),
-				onClick: S,
-				disabled: !y || f,
-				"aria-label": o("tabs.scrollNext"),
-				children: /* @__PURE__ */ s("svg", {
-					className: "w-4 h-4",
-					fill: "none",
-					stroke: "currentColor",
-					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ s("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: 2,
-						d: "M9 5l7 7-7 7"
-					})
-				})
-			})
-		]
-	});
-};
-L.displayName = "BsyTabList";
-//#endregion
-//#region src/components/Tabs/TabPanel/TabPanel.tsx
-var R = ({ items: e, activeKey: t, className: n }) => {
-	let r = e.find((e) => e.key === t);
-	return !r || !r.children ? null : /* @__PURE__ */ s("div", {
-		className: n,
-		role: "tabpanel",
-		"aria-labelledby": `tab-${t}`,
-		children: r.children
-	});
-};
-R.displayName = "BsyTabPanel";
-//#endregion
-//#region src/components/Tabs/Tabs.tsx
-var z = (e) => {
-	let [t, n] = _(e, {
-		defaultValuePropName: "defaultActiveKey",
-		valuePropName: "activeKey",
-		trigger: "onChange"
-	}), r = e.items?.some((e) => e.children), i = e.color || "#0265ff";
-	return /* @__PURE__ */ s(T.Provider, {
-		value: {
-			color: i,
-			type: e.type,
-			disabled: e.disabled
-		},
-		children: /* @__PURE__ */ c("div", {
-			className: "bsy-tabs",
-			children: [/* @__PURE__ */ s(L, {
-				items: e.items,
-				activeKey: t,
-				children: e.items?.map((e) => /* @__PURE__ */ s(P, {
-					tabKey: e.key,
-					label: e.label,
-					active: t === e.key,
-					onClick: (e) => n(e)
-				}, e.key))
-			}), r && e.items && /* @__PURE__ */ s(R, {
-				items: e.items,
-				activeKey: t,
-				className: "bsy-tabs__content"
-			})]
-		})
-	});
-};
-z.displayName = "BsyTabs";
-//#endregion
-//#region src/components/Tabs/TabSelect/tabSelect.module.scss
-var B = "_active_5a1wn_11", V = "_icon_5a1wn_45", H = {
-	"bsy-tabs-select__trigger": "_bsy-tabs-select__trigger_5a1wn_1",
-	active: B,
-	"bsy-tabs-select__trigger-icon": "_bsy-tabs-select__trigger-icon_5a1wn_14",
-	"bsy-tabs-select__trigger-input": "_bsy-tabs-select__trigger-input_5a1wn_17",
-	"bsy-tabs-select__panel": "_bsy-tabs-select__panel_5a1wn_21",
-	"bsy-tabs-select__panel-item": "_bsy-tabs-select__panel-item_5a1wn_32",
-	icon: V
-}, U = (o) => {
-	let { color: l = "#0269ff" } = o, { t: u } = r(), d = t(), [f, { toggle: m, setLeft: h }] = b(!1), { refs: v, floatingStyles: y, getFloatingProps: T, getReferenceProps: E, referenceStyle: D } = a({
-		isOpen: f,
-		close: h,
-		offset: {
-			x: 0,
-			y: 4
-		},
-		zIndex: d
-	}), [O, k] = _(o, {
-		trigger: "onChange",
-		defaultValuePropName: "defaultValue",
-		valuePropName: "value",
-		defaultValue: w.LINE
-	}), A = Object.values(w).map((e) => ({
-		label: e,
-		value: e
-	})), j = p(() => [
-		{
-			label: u("tabs.previewTab1"),
-			key: "1"
-		},
-		{
-			label: u("tabs.previewTab2"),
-			key: "2"
-		},
-		{
-			label: u("tabs.previewTab3"),
-			key: "3"
-		}
-	], [u]);
-	return /* @__PURE__ */ c("div", {
-		className: H["bsy-tabs-select"],
-		children: [/* @__PURE__ */ c("div", {
-			className: g(H["bsy-tabs-select__trigger"], { [H.active]: f }),
-			ref: v.setReference,
-			...E(),
-			style: D,
-			onClick: () => m(),
-			children: [/* @__PURE__ */ s("div", {
-				className: g(H["bsy-tabs-select__trigger-input"], { [H.active]: O }),
-				children: O && /* @__PURE__ */ s(z, {
-					activeKey: "1",
-					type: O,
-					color: l,
-					disabled: !0,
-					items: j
-				}, O)
-			}), /* @__PURE__ */ s("div", {
-				className: H["bsy-tabs-select__trigger-icon"],
-				children: /* @__PURE__ */ s(e, {
-					name: "arrow-down",
-					className: g(H.icon, { active: f })
-				})
-			})]
-		}), /* @__PURE__ */ s(C, { children: /* @__PURE__ */ s(n, {
-			zIndex: d,
-			children: /* @__PURE__ */ s(x, { children: f && /* @__PURE__ */ s("div", {
-				ref: v.setFloating,
-				style: y,
-				...T(),
-				children: /* @__PURE__ */ s(S.div, {
-					...i,
-					children: /* @__PURE__ */ s("div", {
-						className: H["bsy-tabs-select__panel"],
-						children: A.map((e) => /* @__PURE__ */ s("div", {
-							className: g(H["bsy-tabs-select__panel-item"], { [H.active]: O === e.value }),
-							onClick: () => {
-								k(e.value), h();
-							},
-							children: /* @__PURE__ */ s(z, {
-								activeKey: "1",
-								type: e.value,
-								disabled: !0,
-								color: l,
-								items: j
-							}, e.value)
-						}, e.value))
-					})
-				})
-			}) })
-		}) })]
-	});
-};
-U.displayName = "BsyTabSelect";
-//#endregion
-export { w as i, z as n, R as r, U as t };