@ioca/react 1.4.76 → 1.4.77

package/lib/types/components/select/type.d.ts

@@ -1,8 +1,7 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
-import { BaseInput, TOptions, TOption } from '../../type/index.js';
-import { IPopup } from '../popup/type.js';
-
-interface ISelect extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onSelect" | "onChange">, BaseInput {
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { BaseInput, TOption, TOptions } from '../../type';
+import { IPopup } from '../popup/type';
+export interface ISelect extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onSelect" | "onChange">, BaseInput {
     options: TOptions;
     multiple?: boolean;
     prepend?: ReactNode;
@@ -18,5 +17,8 @@ interface ISelect extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" |
     onSelect?: (v: any, option?: TOption) => void;
     onChange?: (v: any) => void;
 }
-
-export type { ISelect };
+export interface ISelectOptions extends Pick<ISelect, "multiple" | "empty" | "filter" | "filterPlaceholder" | "onSelect"> {
+    value: any;
+    options: TOption[];
+    onFilter?: (e: ChangeEvent<HTMLInputElement>) => void;
+}

package/lib/types/components/step/divider.d.ts

@@ -0,0 +1 @@
+export default function Divider(): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/step/divider.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/components/step/divider.tsx
+function Divider() {
+	return /* @__PURE__ */ jsx("i", { className: "i-step-divider" });
+}
+//#endregion
+export { Divider as default };

package/lib/types/components/step/index.d.ts

@@ -1,5 +1,2 @@
-import Step from './step.js';
-
-
-
-export { Step as default };
+import { default as Step } from './step';
+export default Step;

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

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

package/lib/types/components/step/item.d.ts

@@ -1,6 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IStepItem } from './type.js';
-
-declare function Item(props: IStepItem): react_jsx_runtime.JSX.Element;
-
-export { Item as default };
+import { IStepItem } from './type';
+declare function Item(props: IStepItem): import("react/jsx-runtime").JSX.Element;
+export default Item;

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

@@ -0,0 +1,56 @@
+import Divider from "./divider.js";
+import classNames from "classnames";
+import { CheckRound } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/@ricons+material@0.12.0/node_modules/@ricons/material/es/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/step/item.tsx
+const STATUS = [
+	"finished",
+	"active",
+	"pending"
+];
+function defaultRenderIcon(i, status) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "i-step-item-index",
+		children: status === "finished" ? /* @__PURE__ */ jsx(CheckRound, { style: {
+			width: "1em",
+			height: "1.5em"
+		} }) : i + 1
+	});
+}
+function Item(props) {
+	const { index = 0, active = 0, renderIcon = defaultRenderIcon, title, vertical, line = /* @__PURE__ */ jsx(Divider, {}), asList, style, className, children, onClick } = props;
+	const status = STATUS[index === active ? 1 : index < active ? 0 : 2];
+	const handleClick = () => {
+		onClick?.(index);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style,
+		className: classNames("i-step-item", { [`i-step-item-${status}`]: !asList }, className),
+		onClick: handleClick,
+		children: vertical ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "i-step-item-left",
+			children: [renderIcon?.(index, status), line]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "i-step-item-right",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "i-step-item-title",
+				children: title
+			}), children && /* @__PURE__ */ jsx("div", {
+				className: "i-step-item-content",
+				children
+			})]
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "i-step-item-title",
+			children: [
+				renderIcon?.(index, status),
+				/* @__PURE__ */ jsx("span", { children: title }),
+				line
+			]
+		}), children && /* @__PURE__ */ jsx("div", {
+			className: "i-step-item-content",
+			children
+		})] })
+	});
+}
+//#endregion
+export { Item as default };

package/lib/types/components/step/step.d.ts

@@ -1,10 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import Item from './item.js';
-import { IStep } from './type.js';
-
+import { default as Item } from './item';
+import { IStep } from './type';
 declare const Step: {
-    (props: IStep): react_jsx_runtime.JSX.Element;
+    (props: IStep): import("react/jsx-runtime").JSX.Element;
     Item: typeof Item;
 };
-
-export { Step as default };
+export default Step;

package/lib/types/components/step/step.js

@@ -0,0 +1,39 @@
+import Item from "./item.js";
+import classNames from "classnames";
+import { Children, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/components/step/step.tsx
+const Step = (props) => {
+	const { active = 0, vertical, renderIcon, line, style, asList, className, children, onClick } = props;
+	const steps = useMemo(() => {
+		const nodes = [];
+		let index = 0;
+		Children.map(children, (el) => {
+			if (!el || el.type !== Item) return;
+			const { props: elProps } = el;
+			nodes.push({
+				...el,
+				props: {
+					renderIcon,
+					line,
+					onClick,
+					...elProps,
+					vertical,
+					active,
+					asList,
+					index: index++
+				}
+			});
+		});
+		return nodes;
+	}, [active, children]);
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames("i-step", { "i-step-vertical": vertical }, className),
+		style,
+		children: steps
+	});
+};
+Step.Item = Item;
+//#endregion
+export { Step as default };

package/lib/types/components/step/type.d.ts

@@ -1,6 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-
-interface IStep {
+export interface IStep {
     active?: number;
     vertical?: boolean;
     style?: CSSProperties;
@@ -11,9 +10,7 @@ interface IStep {
     renderIcon?: (i: number, status: string) => ReactNode;
     onClick?: (i: number) => void;
 }
-interface IStepItem extends IStep {
+export interface IStepItem extends IStep {
     index?: number;
     title?: ReactNode;
 }
-
-export type { IStep, IStepItem };

package/lib/types/components/swiper/index.d.ts

@@ -1,5 +1,2 @@
-import Swiper from './swiper.js';
-
-
-
-export { Swiper as default };
+import { default as Swiper } from './swiper';
+export default Swiper;

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

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

package/lib/types/components/swiper/item.d.ts

@@ -1,6 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ISwiperItem } from './type.js';
-
-declare function Item(props: ISwiperItem): react_jsx_runtime.JSX.Element;
-
-export { Item as default };
+import { ISwiperItem } from './type';
+declare function Item(props: ISwiperItem): import("react/jsx-runtime").JSX.Element;
+export default Item;

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

@@ -0,0 +1,35 @@
+import classNames from "classnames";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/swiper/item.tsx
+function Item(props) {
+	const { index = 0, itemIndex = 0, active, type, transition, gap = 0, itemHeight, vertical, style, className, children, onItemClick } = props;
+	const selfStyle = useMemo(() => {
+		if (type === "normal") return {
+			[vertical ? "paddingBlock" : "paddingInline"]: gap / 2,
+			height: itemHeight
+		};
+		return {
+			transform: `translate(-${index * 100}%, 0)`,
+			transition
+		};
+	}, [
+		index,
+		gap,
+		itemHeight,
+		vertical,
+		type
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			...style,
+			...selfStyle
+		},
+		className: classNames("i-swiper-item", className, { "i-swiper-active": active }),
+		"data-index": itemIndex,
+		onClick: (e) => onItemClick?.(itemIndex, e),
+		children
+	});
+}
+//#endregion
+export { Item as default };

package/lib/types/components/swiper/swiper.d.ts

@@ -1,5 +1,3 @@
-import { CompositionSwiper } from './type.js';
-
+import { CompositionSwiper } from './type';
 declare const Swiper: CompositionSwiper;
-
-export { Swiper as default };
+export default Swiper;

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

@@ -0,0 +1,259 @@
+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 "/Users/iann/codes/ioca-react/node_modules/.pnpm/@ricons+material@0.12.0/node_modules/@ricons/material/es/index.js";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+//#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/swiper/type.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, RefObject, ReactNode, CSSProperties, MouseEvent } from 'react';
-import Item from './item.js';
-
-interface ISwiper {
+import { CSSProperties, ForwardRefExoticComponent, MouseEvent, ReactNode, RefObject } from 'react';
+import { default as Item } from './item';
+export interface ISwiper {
     ref?: RefObject<RefSwiper | null>;
     initial?: number;
     type?: "normal" | "fade" | "flow";
@@ -31,7 +30,7 @@ interface ISwiper {
     onAfterSwipe?: (after: number) => void;
     onItemClick?: (index: number, e: MouseEvent) => void;
 }
-interface ISwiperItem extends Pick<ISwiper, "gap" | "itemHeight" | "vertical" | "type" | "onItemClick"> {
+export interface ISwiperItem extends Pick<ISwiper, "gap" | "itemHeight" | "vertical" | "type" | "onItemClick"> {
     active?: boolean;
     index?: number;
     itemIndex?: number;
@@ -40,13 +39,11 @@ interface ISwiperItem extends Pick<ISwiper, "gap" | "itemHeight" | "vertical" |
     className?: string;
     children?: ReactNode;
 }
-interface RefSwiper {
+export interface RefSwiper {
     swipeTo: (index: number) => void;
     swipeNext: () => void;
     swipePrev: () => void;
 }
-interface CompositionSwiper extends ForwardRefExoticComponent<ISwiper> {
+export interface CompositionSwiper extends ForwardRefExoticComponent<ISwiper> {
     Item: typeof Item;
 }
-
-export type { CompositionSwiper, ISwiper, ISwiperItem, RefSwiper };

package/lib/types/components/tabs/index.d.ts

@@ -1,5 +1,2 @@
-import Tabs from './tabs.js';
-
-
-
-export { Tabs as default };
+import { default as Tabs } from './tabs';
+export default Tabs;

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

@@ -0,0 +1,5 @@
+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.d.ts

@@ -1,6 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ITabItem } from './type.js';
-
-declare const Item: (props: ITabItem) => react_jsx_runtime.JSX.Element;
-
-export { Item as default };
+import { ITabItem } from './type';
+declare const Item: (props: ITabItem) => import("react/jsx-runtime").JSX.Element;
+export default Item;

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

@@ -0,0 +1,7 @@
+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.d.ts

@@ -1,5 +1,3 @@
-import { CompositionTabs } from './type.js';
-
+import { CompositionTabs } from './type';
 declare const Tabs: CompositionTabs;
-
-export { Tabs as default };
+export default Tabs;