@ioca/react 1.4.79 → 1.4.81

package/lib/types/components/swiper/swiper.js

@@ -1,258 +0,0 @@
-import { useMouseMove, useMouseUp, useReactive } from "../../js/hooks.js";
-import icon_default from "../icon/index.js";
-import { clamp } from "../../js/utils.js";
-import Item from "./item.js";
-import classNames from "classnames";
-import { Children, useEffect, useImperativeHandle, useMemo, useRef } from "react";
-import { KeyboardArrowLeftRound, KeyboardArrowRightRound } from "@ricons/material";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/swiper/swiper.tsx
-const Swiper = ((props) => {
-	const { ref, type = "normal", initial = 0, display = 1, scroll = 1, loop = true, vertical, prev = /* @__PURE__ */ jsx(icon_default, {
-		icon: /* @__PURE__ */ jsx(KeyboardArrowLeftRound, {}),
-		size: "2em"
-	}), next = /* @__PURE__ */ jsx(icon_default, {
-		icon: /* @__PURE__ */ jsx(KeyboardArrowRightRound, {}),
-		size: "2em"
-	}), duration = 600, interval = 3e3, autoplay, pauseOnHover, arrow = true, reverse, draggable, dragOffset = 40, gap = 0, itemHeight, indicator, fixedIndicator, style, className, children, renderIndicator, onBeforeSwipe, onAfterSwipe, onItemClick } = props;
-	const listRef = useRef(null);
-	const timerRef = useRef(null);
-	const transition = `all ${duration / 1e3}s`;
-	const state = useReactive({
-		current: initial,
-		swipable: true,
-		transition: type === "fade" ? "none" : transition,
-		dragStart: 0,
-		dragging: false,
-		initialized: false
-	});
-	const items = useMemo(() => {
-		return Children.map(children, (node) => {
-			if (node.type !== Item) return;
-			return node;
-		});
-	}, [children]);
-	const [displayItems, extra, size, total, listSize] = useMemo(() => {
-		const extra = type === "normal" && loop && items.length > display ? display + 1 : 0;
-		let list = [];
-		if (extra <= 0) list = [...items];
-		else {
-			const head = items.slice(0, extra);
-			list = [
-				...items.slice(-extra),
-				...items,
-				...head
-			];
-		}
-		const listSize = `${list.length / display * 100}%`;
-		return [
-			list,
-			extra,
-			items.length,
-			list.length,
-			listSize
-		];
-	}, [
-		display,
-		loop,
-		type,
-		items
-	]);
-	const offsetPercent = useMemo(() => -100 * (state.current + extra) / total, [state.current, total]);
-	const position = useMemo(() => {
-		if (size <= display || type === "fade") return;
-		return `translate3d(${vertical ? `0, ${offsetPercent}%` : `${offsetPercent}%, 0`}, 0)`;
-	}, [
-		offsetPercent,
-		vertical,
-		display,
-		size,
-		type
-	]);
-	const trackStyle = useMemo(() => {
-		if (!vertical || !itemHeight) return;
-		return { height: itemHeight * display };
-	}, [
-		vertical,
-		itemHeight,
-		display
-	]);
-	const indicatorsLoop = useMemo(() => {
-		return Array.from({ length: Math.ceil((size - display) / scroll) + 1 });
-	}, [loop, indicator]);
-	const clearTimer = () => {
-		clearTimeout(timerRef.current);
-		timerRef.current = null;
-	};
-	const swipeTo = (i) => {
-		if (!state.swipable || i === state.current) return;
-		state.swipable = false;
-		onBeforeSwipe?.(state.current);
-		let reset = false;
-		let next = i;
-		const lastDisplay = size - display;
-		if (loop) {
-			if (i > lastDisplay) {
-				reset = true;
-				i = size;
-				next = 0;
-			} else if (i < 0) {
-				reset = true;
-				i = -display;
-				next = lastDisplay;
-			}
-		} else {
-			next = clamp(next, 0, lastDisplay);
-			i = next;
-		}
-		setTimeout(() => {
-			state.swipable = true;
-		}, duration + 32);
-		if (type === "fade") {
-			state.current = next;
-			onAfterSwipe?.(next);
-			return;
-		}
-		state.current = i;
-		if (!reset) {
-			if (autoplay) timerRef.current = setTimeout(swipeNext, interval);
-			setTimeout(() => {
-				onAfterSwipe?.(next);
-			}, duration + 12);
-			return;
-		}
-		setTimeout(() => {
-			state.transition = "none";
-			state.current = next;
-			onAfterSwipe?.(next);
-			if (autoplay) timerRef.current = setTimeout(swipeNext, interval);
-			setTimeout(() => {
-				state.transition = transition;
-			}, 60);
-		}, duration + 20);
-	};
-	const swipeNext = () => {
-		swipeTo(reverse ? state.current - scroll : state.current + scroll);
-	};
-	const swipePrev = () => {
-		swipeTo(reverse ? state.current + scroll : state.current - scroll);
-	};
-	const handleMouseDown = (e) => {
-		if (!draggable || !state.swipable || type === "fade") return;
-		e.stopPropagation();
-		e.preventDefault();
-		if (e.touches) e = e.touches[0];
-		Object.assign(state, {
-			dragStart: vertical ? e.clientY : e.clientX,
-			dragging: true,
-			transition: "none"
-		});
-	};
-	const handleMouseMove = (e) => {
-		if (!state.dragging || !listRef.current) return;
-		e.preventDefault();
-		if (e.touches) e = e.touches[0];
-		const offset = ((vertical ? e.clientY : e.clientX) - state.dragStart) * 61.8 / listRef.current[vertical ? "offsetHeight" : "offsetWidth"] + offsetPercent;
-		listRef.current.style.transform = `translate3d(${vertical ? `0, ${offset}%` : `${offset}%, 0`}, 0)`;
-	};
-	const handleMouseUp = (e) => {
-		if (!state.dragging || !listRef.current) return;
-		if (e.changedTouches) e = e.changedTouches[0];
-		const dragEnd = vertical ? e.clientY : e.clientX;
-		const part = listRef.current[vertical ? "offsetHeight" : "offsetWidth"] / total;
-		const offset = (dragEnd - state.dragStart) * .618;
-		const absOffset = Math.abs(offset);
-		if (absOffset > dragOffset) {
-			const p = Math.floor(absOffset / part) + (absOffset % part - dragOffset > 0 ? 1 : 0);
-			swipeTo(state.current + (offset > 0 ? -p : p));
-		}
-		listRef.current.style.transform = position || "";
-		Object.assign(state, {
-			dragging: false,
-			transition
-		});
-	};
-	const handleMouseOver = () => {
-		if (!pauseOnHover) return;
-		clearTimer();
-	};
-	const handleMouseLeave = () => {
-		if (!pauseOnHover) return;
-		clearTimer();
-		timerRef.current = setTimeout(swipeNext, interval);
-	};
-	useMouseMove(handleMouseMove);
-	useMouseUp(handleMouseUp);
-	useImperativeHandle(ref, () => ({
-		swipeTo,
-		swipeNext,
-		swipePrev
-	}));
-	useEffect(() => {
-		if (!autoplay) return;
-		timerRef.current = setTimeout(swipeNext, interval);
-		return () => {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		};
-	}, [autoplay, interval]);
-	return /* @__PURE__ */ jsxs("div", {
-		style,
-		className: classNames("i-swiper", {
-			"i-swiper-vertical": vertical,
-			"i-swiper-initialized": state.initialized
-		}, className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "i-swiper-track",
-			style: trackStyle,
-			onMouseOver: handleMouseOver,
-			onMouseLeave: handleMouseLeave,
-			children: [/* @__PURE__ */ jsx("div", {
-				ref: listRef,
-				className: classNames("i-swiper-list", { "i-swiper-fade": type === "fade" }),
-				style: {
-					[vertical ? "height" : "width"]: listSize,
-					transform: position,
-					transition: state.transition
-				},
-				onMouseDown: handleMouseDown,
-				onTouchStart: handleMouseDown,
-				children: displayItems.map((item, i) => {
-					const { props: itemProps } = item;
-					return /* @__PURE__ */ jsx(Item, {
-						index: i,
-						itemIndex: (i - extra + size) % size,
-						active: i - extra === state.current,
-						type,
-						gap,
-						transition,
-						itemHeight,
-						vertical,
-						onItemClick,
-						...itemProps
-					}, i);
-				})
-			}), arrow && size > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [(loop || state.current !== 0) && /* @__PURE__ */ jsx("a", {
-				className: "i-swiper-arrow i-swiper-prev",
-				onClick: swipePrev,
-				children: prev
-			}), (loop || state.current < size - display) && /* @__PURE__ */ jsx("a", {
-				className: "i-swiper-arrow i-swiper-next",
-				onClick: swipeNext,
-				children: next
-			})] })]
-		}), indicator && /* @__PURE__ */ jsx("div", {
-			className: classNames("i-swiper-indicators", { "i-swiper-indicators-fixed": fixedIndicator }),
-			children: indicatorsLoop.map((_, i) => {
-				return /* @__PURE__ */ jsx("a", {
-					className: classNames("i-swiper-indicator", { "i-indicator-active": i === Math[loop ? "floor" : "ceil"]((state.current + size) % size / scroll) }),
-					onClick: () => swipeTo(i * scroll),
-					children: renderIndicator?.(i)
-				}, i);
-			})
-		})]
-	});
-});
-Swiper.Item = Item;
-//#endregion
-export { Swiper as default };

package/lib/types/components/tabs/index.js

@@ -1,5 +0,0 @@
-import Tabs from "./tabs.js";
-//#region packages/components/tabs/index.tsx
-var tabs_default = Tabs;
-//#endregion
-export { tabs_default as default };

package/lib/types/components/tabs/item.js

@@ -1,7 +0,0 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-//#region packages/components/tabs/item.tsx
-const Item = (props) => {
-	return /* @__PURE__ */ jsx(Fragment, {});
-};
-//#endregion
-export { Item as default };

package/lib/types/components/tabs/tabs.js

@@ -1,268 +0,0 @@
-import { useIntersectionObserver, useSize } from "../../js/hooks.js";
-import button_default from "../button/index.js";
-import icon_default from "../icon/index.js";
-import helpericon_default from "../utils/helpericon/index.js";
-import popup_default from "../popup/index.js";
-import Item from "./item.js";
-import classNames from "classnames";
-import { Children, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { MoreHorizRound } from "@ricons/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/tabs/tabs.tsx
-const Tabs = ((props) => {
-	const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", bar = true, hideMore, barClass, renderMore = () => /* @__PURE__ */ jsx(button_default, {
-		flat: true,
-		square: true,
-		size: "small",
-		children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(MoreHorizRound, {}) })
-	}), onTabChange, ...rest } = props;
-	const navRefs = useRef([]);
-	const barRef = useRef(null);
-	const navsRef = useRef(null);
-	const contentsRef = useRef(/* @__PURE__ */ new Map());
-	const [activeKey, setActiveKey] = useState(active);
-	const [prevActiveKey, setPrevActiveKey] = useState(void 0);
-	const [barStyle, setBarStyle] = useState({});
-	const [cachedTabs, setCachedTabs] = useState([]);
-	const [overflow, setOverflow] = useState(false);
-	const [moreTabs, setMoreTabs] = useState([]);
-	const [tabs, setTabs] = useState([]);
-	const { observe, unobserve } = useIntersectionObserver();
-	const size = useSize(navsRef);
-	useEffect(() => {
-		contentsRef.current.clear();
-		if (!items) {
-			if (!children) {
-				setTabs([]);
-				return;
-			}
-			setTabs(Children.map(children, (node, i) => {
-				const { key, props: nodeProps } = node;
-				const { title, children: tabChildren, content, keepDOM, closable } = nodeProps;
-				const tabKey = String(key ?? i);
-				contentsRef.current.set(tabKey, tabChildren ?? content);
-				return {
-					key: tabKey,
-					title,
-					keepDOM,
-					closable
-				};
-			}) ?? []);
-			return;
-		}
-		setTabs(items.map((item, i) => {
-			if (["string", "number"].includes(typeof item)) return {
-				key: String(item),
-				title: item
-			};
-			const key = String(item.key ?? i);
-			contentsRef.current.set(key, item.content);
-			const { content, ...rest } = item;
-			return {
-				...rest,
-				key
-			};
-		}));
-	}, [children, items]);
-	const add = (tab) => {
-		const tkey = String(tab.key ?? tabs.length);
-		const i = tabs.findIndex((t) => t.key === tkey);
-		if (i > -1) {
-			open(tabs[i].key ?? `${i}`);
-			return;
-		}
-		contentsRef.current.set(tkey, tab.content);
-		const { content, ...rest } = tab;
-		setTabs((ts) => [...ts, {
-			...rest,
-			key: tkey
-		}]);
-		open(tkey);
-	};
-	const close = (key) => {
-		const i = tabs.findIndex((t) => t.key === key);
-		if (i < 0) return;
-		contentsRef.current.delete(key);
-		const nextTabs = [...tabs];
-		nextTabs.splice(i, 1);
-		setTabs(nextTabs);
-		if (activeKey !== key) return;
-		const next = nextTabs[i] || nextTabs[i - 1];
-		open(prevActiveKey ?? next?.key ?? "");
-	};
-	const open = (key) => {
-		if (key === activeKey) {
-			if (!toggable) return;
-			onTabChange?.(void 0, key);
-			setActiveKey(void 0);
-			setBarStyle({
-				height: 0,
-				width: 0
-			});
-			return;
-		}
-		setPrevActiveKey(activeKey);
-		onTabChange?.(key, activeKey);
-		setActiveKey(key);
-	};
-	useEffect(() => {
-		if (!size || hideMore || !observe) return;
-		const { scrollHeight, scrollWidth } = navsRef.current;
-		const { width, height } = size;
-		const nextOverflow = scrollHeight > height || scrollWidth > width;
-		setOverflow(nextOverflow);
-		if (!nextOverflow) return;
-		navRefs.current.map((nav, i) => {
-			if (!nav) return;
-			observe(nav, (tar, visible) => {
-				setTabs((ts) => {
-					if (!ts[i]) return ts;
-					const nextTabs = ts.map((t, idx) => idx === i ? {
-						...t,
-						intersecting: visible
-					} : t);
-					setMoreTabs(nextTabs.filter((tab) => !tab.intersecting));
-					return nextTabs;
-				});
-			});
-		});
-	}, [
-		size,
-		hideMore,
-		tabs.length,
-		observe
-	]);
-	useEffect(() => {
-		if (!bar || type === "pane" || activeKey === void 0) return;
-		const index = tabs.findIndex((tab) => tab.key === activeKey);
-		setTimeout(() => {
-			const nav = navRefs.current[index];
-			if (!nav) return;
-			if (tabs[index]?.keepDOM && activeKey) setCachedTabs((keys) => {
-				if (keys.includes(activeKey)) return keys;
-				return [activeKey, ...keys];
-			});
-			const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
-			const isLine = type === "line";
-			setBarStyle({
-				height: !vertical && isLine ? ".25em" : offsetHeight,
-				width: vertical && isLine ? ".25em" : offsetWidth,
-				transform: `translate(${offsetLeft}px, ${offsetTop}px)`
-			});
-		}, 16);
-	}, [
-		activeKey,
-		bar,
-		size,
-		tabs,
-		type,
-		vertical
-	]);
-	useEffect(() => {
-		if (active === void 0 || activeKey === active) return;
-		open(active);
-	}, [active]);
-	useEffect(() => {
-		if (hideMore || !unobserve) return;
-		return () => {
-			navRefs.current?.map(unobserve);
-		};
-	}, [
-		tabs.length,
-		hideMore,
-		unobserve
-	]);
-	useEffect(() => {
-		if (!navsRef.current || vertical) return;
-		const handleMouseWheel = (e) => {
-			e.stopPropagation();
-			e.preventDefault();
-			if (vertical) return;
-			navsRef.current?.scrollBy({ left: e.deltaY + e.deltaX });
-		};
-		navsRef.current.addEventListener("wheel", handleMouseWheel, { passive: false });
-		return () => {
-			if (!navsRef.current) return;
-			navsRef.current.removeEventListener("wheel", handleMouseWheel);
-		};
-	}, [navsRef.current]);
-	useImperativeHandle(ref, () => ({
-		open,
-		close,
-		add,
-		navs: navsRef
-	}));
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-tabs", {
-			flex: vertical,
-			[`i-tabs-${type}`]: type !== "default"
-		}, className),
-		...rest,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: classNames("i-tab-navs-container", { "i-tab-navs-vertical": vertical }),
-			children: [
-				prepend,
-				/* @__PURE__ */ jsxs("div", {
-					ref: navsRef,
-					className: classNames("i-tab-navs", `justify-${navsJustify}`),
-					children: [tabs.map((tab, i) => {
-						const { title, key = `${i}`, closable } = tab;
-						return /* @__PURE__ */ jsxs("a", {
-							ref: (ref) => navRefs.current[i] = ref,
-							className: classNames("i-tab-nav", { "i-tab-active": activeKey === key }),
-							onClick: () => open(key),
-							children: [title, closable && /* @__PURE__ */ jsx(helpericon_default, {
-								as: "i",
-								active: true,
-								className: "i-tab-nav-close",
-								onClick: (e) => {
-									e.stopPropagation();
-									close(key);
-								}
-							})]
-						}, key);
-					}), bar && /* @__PURE__ */ jsx("span", {
-						ref: barRef,
-						className: classNames("i-tab-navs-bar", barClass),
-						style: barStyle
-					})]
-				}),
-				!hideMore && overflow && moreTabs.length > 0 && /* @__PURE__ */ jsx(popup_default, {
-					arrow: false,
-					position: vertical ? "right" : "bottom",
-					align: "end",
-					touchable: true,
-					hideDelay: 500,
-					content: /* @__PURE__ */ jsx("div", {
-						className: "i-tabs-morelist pd-4",
-						children: moreTabs.map((tab, i) => {
-							const { key = `${i}`, title } = tab;
-							const isActive = activeKey === key;
-							return /* @__PURE__ */ jsx("a", {
-								className: classNames("i-tab-nav", { "i-tab-active": isActive }),
-								onClick: () => open(key),
-								children: title
-							}, key);
-						})
-					}),
-					children: renderMore(moreTabs)
-				}),
-				append
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "i-tab-contents",
-			children: tabs.map((tab, i) => {
-				const key = tab.key ?? `${i}`;
-				const content = contentsRef.current.get(key);
-				const isActive = activeKey === key;
-				return (isActive || key !== void 0 && cachedTabs.includes(key)) && /* @__PURE__ */ jsx("div", {
-					className: classNames("i-tab-content", { "i-tab-active": isActive }),
-					children: content
-				}, key);
-			})
-		})]
-	});
-});
-Tabs.Item = Item;
-//#endregion
-export { Tabs as default };

package/lib/types/components/tag/index.js

@@ -1,5 +0,0 @@
-import Tag from "./tag.js";
-//#region packages/components/tag/index.tsx
-var tag_default = Tag;
-//#endregion
-export { tag_default as default };

package/lib/types/components/tag/tag.js

@@ -1,28 +0,0 @@
-import helpericon_default from "../utils/helpericon/index.js";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/tag/tag.tsx
-const Tag = (props) => {
-	const { dot, dotClass, outline, round, size = "normal", hoverShowClose, className, children, onClose, onClick, ...restProps } = props;
-	return /* @__PURE__ */ jsxs("span", {
-		className: classNames("i-tag", {
-			"i-tag-outline": outline,
-			"i-tag-clickable": onClick,
-			[`i-tag-${size}`]: size !== "normal",
-			round
-		}, className),
-		onClick,
-		...restProps,
-		children: [
-			dot && /* @__PURE__ */ jsx("span", { className: classNames("i-tag-dot", dotClass) }),
-			children,
-			onClose && /* @__PURE__ */ jsx(helpericon_default, {
-				active: true,
-				className: classNames("i-tag-close", { "i-tag-hover-close": hoverShowClose }),
-				onClick: onClose
-			})
-		]
-	});
-};
-//#endregion
-export { Tag as default };

package/lib/types/components/text/highlight.js

@@ -1,32 +0,0 @@
-import Text from "./text.js";
-import { Fragment, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { findAll } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/highlight-words-core@1.2.3/node_modules/highlight-words-core/dist/index.js";
-//#region packages/components/text/highlight.tsx
-function HighLight(props) {
-	const { keyword, text, escape, caseSensitive, renderWord = (word) => /* @__PURE__ */ jsx("mark", { children: word }), ...restProps } = props;
-	const content = useMemo(() => {
-		const source = text;
-		return findAll({
-			searchWords: typeof keyword === "string" ? [keyword] : keyword,
-			textToHighlight: text,
-			caseSensitive,
-			autoEscape: escape
-		}).map((chunk, i) => {
-			const { end, highlight, start } = chunk;
-			const word = source.slice(start, end);
-			return highlight ? /* @__PURE__ */ jsx(Fragment, { children: renderWord(word) }, i) : word;
-		});
-	}, [
-		keyword,
-		text,
-		escape,
-		caseSensitive
-	]);
-	return /* @__PURE__ */ jsx(Text, {
-		...restProps,
-		children: content
-	});
-}
-//#endregion
-export { HighLight as default };

package/lib/types/components/text/index.js

@@ -1,5 +0,0 @@
-import Text from "./text.js";
-//#region packages/components/text/index.tsx
-var text_default = Text;
-//#endregion
-export { text_default as default };

package/lib/types/components/text/number.js

@@ -1,29 +0,0 @@
-import { animate, formatNumber } from "../../js/utils.js";
-import Text from "./text.js";
-import { useEffect, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/text/number.tsx
-function Number(props) {
-	const { count, to, decimal, thousand = ",", duration = 2400, easing, ...restProps } = props;
-	const [n, setN] = useState(count);
-	const number = useMemo(() => {
-		if (n === void 0) return;
-		const z = n.toFixed(decimal);
-		if (!thousand) return z;
-		return formatNumber(n, {
-			precision: decimal,
-			thousand
-		});
-	}, [n, thousand]);
-	useEffect(() => {
-		if (count === void 0 || to === void 0) return;
-		animate(count, to, duration, (v) => setN(count + v), easing);
-	}, [to]);
-	useEffect(() => setN(count), [count]);
-	return /* @__PURE__ */ jsx(Text, {
-		...restProps,
-		children: number
-	});
-}
-//#endregion
-export { Number as default };

package/lib/types/components/text/text.js

@@ -1,35 +0,0 @@
-import HighLight from "./highlight.js";
-import Number from "./number.js";
-import Number$1 from "./time.js";
-import classNames from "classnames";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/text/text.tsx
-const Text = (props) => {
-	const { as: Tag = "span", size, weight, decoration, gradient, wave, style, className, children } = props;
-	return /* @__PURE__ */ jsx(Tag, {
-		style: {
-			fontSize: size,
-			fontWeight: weight,
-			textDecoration: decoration,
-			...useMemo(() => {
-				if (!gradient || !Array.isArray(gradient)) return {};
-				return {
-					backgroundImage: `-webkit-linear-gradient(${gradient.join(",")})`,
-					backgroundClip: "text"
-				};
-			}, [gradient]),
-			...style
-		},
-		className: classNames(className, {
-			"i-text-gradient": gradient,
-			"i-text-gradient-wave": wave
-		}),
-		children
-	});
-};
-Text.Number = Number;
-Text.Time = Number$1;
-Text.HighLight = HighLight;
-//#endregion
-export { Text as default };