@ioca/react 1.4.80 → 1.4.81

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@ioca/react",
-	"version": "1.4.80",
+	"version": "1.4.81",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc && vite build",
 		"preview": "vite preview",
 		"make": "node templates/index.js",
-		"lib": "rimraf lib && rolldown -c"
+		"lib": "rimraf lib && npx rollup -c"
 	},
 	"dependencies": {
 		"@rc-component/color-picker": "^2.0.1",
@@ -24,6 +24,10 @@
 		"xss": "^1.0.15"
 	},
 	"devDependencies": {
+		"@rollup/plugin-commonjs": "^28.0.3",
+		"@rollup/plugin-node-resolve": "^15.3.0",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@rollup/plugin-typescript": "^12.1.1",
 		"@types/mockjs": "^1.0.10",
 		"@types/node": "^22.10.1",
 		"@types/pubsub-js": "^1.8.5",
@@ -33,14 +37,14 @@
 		"fs": "^0.0.1-security",
 		"mockjs": "^1.1.0",
 		"path": "^0.12.7",
-		"postcss": "^8.5.8",
 		"react-syntax-highlighter": "^15.6.1",
 		"rimraf": "^6.0.1",
-		"rolldown": "1.0.0-rc.11",
-		"rollup-plugin-postcss": "^4.0.2",
+		"rollup": "^4.59.0",
+		"rollup-plugin-dts": "^6.1.1",
+		"rollup-plugin-peer-deps-external": "^2.2.4",
+		"rollup-plugin-scss": "^4.0.0",
 		"sass": "^1.86.0",
 		"typescript": "^5.7.2",
-		"unplugin-dts": "1.0.0-beta.6",
 		"vite": "^8.0.0",
 		"vite-plugin-dynamic-import": "^1.6.0"
 	},
@@ -48,20 +52,20 @@
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
-	"main": "lib/cjs/index.cjs",
+	"main": "lib/cjs/index.js",
 	"module": "lib/es/index.js",
 	"types": "lib/types/index.d.ts",
 	"exports": {
 		".": {
 			"types": "./lib/types/index.d.ts",
 			"import": "./lib/es/index.js",
-			"require": "./lib/cjs/index.cjs"
+			"require": "./lib/cjs/index.js"
 		},
 		"./index.css": "./lib/css/index.css",
 		"./*": {
 			"types": "./lib/types/*.d.ts",
 			"import": "./lib/es/*.js",
-			"require": "./lib/cjs/*.cjs"
+			"require": "./lib/cjs/*.js"
 		}
 	},
 	"files": [

package/lib/cjs/_virtual/_rolldown/runtime.js

@@ -1,23 +0,0 @@
-//#region \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-//#endregion
-exports.__toESM = __toESM;

package/lib/types/components/affix/affix.js

@@ -1,62 +0,0 @@
-import ToTop from "./totop.js";
-import classNames from "classnames";
-import { debounce } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs";
-import { Children, cloneElement, useEffect, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/affix/affix.tsx
-const Affix = (props) => {
-	const { position = "fixed", left, top, right, bottom, offset, style, className, children, getContainer = () => {
-		if (typeof document === "undefined") return null;
-		return document.body;
-	} } = props;
-	const [hidden, setHidden] = useState(false);
-	const hijackChildren = useMemo(() => {
-		return Children.map(children, (node) => {
-			if (node.type === ToTop) {
-				const { onClick } = node.props;
-				return cloneElement(node, {
-					key: node.key,
-					...node.props,
-					onClick: (e) => {
-						const container = getContainer();
-						onClick?.(e);
-						container?.scrollTo({
-							top: 0,
-							left: 0,
-							behavior: "smooth"
-						});
-					}
-				});
-			}
-			return node;
-		});
-	}, [children, getContainer]);
-	useEffect(() => {
-		const container = getContainer();
-		if (!offset || !container) return;
-		const listener = debounce({ delay: 160 }, () => {
-			const top = container.scrollTop;
-			setHidden(top < offset);
-		});
-		listener();
-		container.addEventListener("scroll", listener);
-		return () => {
-			container.removeEventListener("scroll", listener);
-		};
-	}, [offset, getContainer]);
-	return /* @__PURE__ */ jsx("div", {
-		className: classNames("i-affix", className, { "i-affix-hidden": hidden }),
-		style: {
-			...style,
-			position,
-			left,
-			top,
-			right,
-			bottom
-		},
-		children: hijackChildren
-	});
-};
-Affix.ToTop = ToTop;
-//#endregion
-export { Affix as default };

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

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

package/lib/types/components/affix/totop.js

@@ -1,21 +0,0 @@
-import button_default from "../button/index.js";
-import icon_default from "../icon/index.js";
-import classNames from "classnames";
-import { SkipPreviousRound } from "@ricons/material";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/affix/totop.tsx
-function ToTop(props) {
-	const { style, className, onClick } = props;
-	return /* @__PURE__ */ jsx(button_default, {
-		square: true,
-		className: classNames("i-affix-totop", className),
-		style: { ...style },
-		onClick,
-		children: /* @__PURE__ */ jsx(icon_default, {
-			icon: /* @__PURE__ */ jsx(SkipPreviousRound, {}),
-			rotate: 90
-		})
-	});
-}
-//#endregion
-export { ToTop as default };

package/lib/types/components/badge/badge.js

@@ -1,20 +0,0 @@
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/badge/badge.tsx
-const Badge = (props) => {
-	const { content, contentClass, dot, dotSize, round, disabled, style, className, children } = props;
-	return /* @__PURE__ */ jsxs("div", {
-		style,
-		className: classNames("i-badge", { rounded: round }, className),
-		children: [children, /* @__PURE__ */ jsx("div", {
-			className: classNames("i-badge-content", contentClass, {
-				"i-badge-dot": dot,
-				"i-badge-hidden": disabled
-			}),
-			style: { fontSize: dotSize },
-			children: content
-		})]
-	});
-};
-//#endregion
-export { Badge as default };

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

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

package/lib/types/components/button/button.js

@@ -1,60 +0,0 @@
-import useRipple from "../../js/useRipple/index.js";
-import loading_default from "../loading/index.js";
-import Confirm from "./confirm.js";
-import Group from "./group.js";
-import Toggle from "./toggle.js";
-import classNames from "classnames";
-import { createElement, useEffect } from "react";
-import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-//#region packages/components/button/button.tsx
-const formatClass = ({ outline, flat, loading, disabled, size = "normal", block, round, square, secondary, className }) => classNames("i-btn", className, {
-	"i-btn-outline": outline,
-	"i-btn-flat": flat,
-	"i-btn-block": block,
-	"i-btn-loading": loading,
-	"i-btn-square": square,
-	"i-btn-secondary": secondary,
-	[`i-btn-${size}`]: size !== "normal",
-	round,
-	disabled
-});
-const Button = (props) => {
-	const { as: As = "a", ref, children, className, loading, flat, outline, square, secondary, size, round, href, ripple = true, onClick, ...restProps } = props;
-	const handleClick = (e) => {
-		if (loading || restProps.disabled) {
-			e.stopPropagation();
-			e.preventDefault();
-			return;
-		}
-		onClick?.(e);
-	};
-	if (!children) return /* @__PURE__ */ jsx(Fragment$1, {});
-	const childNodes = [loading && /* @__PURE__ */ jsx(loading_default, {}, "loading"), createElement("span", {
-		key: "content",
-		className: "i-btn-content"
-	}, children)];
-	const attrs = {
-		className: formatClass(props),
-		["data-ripple"]: ripple && !loading && !restProps.disabled ? "" : void 0,
-		onClick: handleClick
-	};
-	useEffect(() => {
-		ripple && useRipple();
-	}, [ripple]);
-	if (typeof As === "string") return createElement(As, {
-		ref,
-		href,
-		...attrs,
-		...restProps
-	}, childNodes);
-	return createElement(As, {
-		to: href || "",
-		...attrs,
-		...restProps
-	}, childNodes);
-};
-Button.Toggle = Toggle;
-Button.Confirm = Confirm;
-Button.Group = Group;
-//#endregion
-export { Button as default };

package/lib/types/components/button/confirm.js

@@ -1,57 +0,0 @@
-import { useReactive } from "../../js/hooks.js";
-import Button from "./button.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/button/confirm.tsx
-const defaultOk = {
-	children: "确定",
-	className: "bg-error"
-};
-const defaultCancel = {
-	children: "取消",
-	secondary: true
-};
-function Confirm(props) {
-	const { ref, size, defaultActive, okButtonProps, cancelButtonProps, onOk, onCancel, onClick, ...restProps } = props;
-	const state = useReactive({
-		active: defaultActive ?? false,
-		loading: false
-	});
-	const ok = okButtonProps ? Object.assign({}, defaultOk, okButtonProps) : defaultOk;
-	const cancel = cancelButtonProps ? Object.assign({}, defaultCancel, cancelButtonProps) : defaultCancel;
-	const handleClick = (e) => {
-		onClick?.(e);
-		state.active = true;
-	};
-	const hanldeOk = async () => {
-		if (state.loading) return;
-		state.loading = true;
-		try {
-			if (await onOk?.() !== false) state.active = false;
-		} finally {
-			state.loading = false;
-		}
-	};
-	const handleCancel = () => {
-		onCancel?.();
-		state.active = false;
-	};
-	if (!state.active) return /* @__PURE__ */ jsx(Button, {
-		ref,
-		size,
-		...restProps,
-		onClick: handleClick
-	});
-	return /* @__PURE__ */ jsxs(Button.Group, { children: [/* @__PURE__ */ jsx(Button, {
-		size,
-		...ok,
-		loading: state.loading,
-		onClick: hanldeOk
-	}), /* @__PURE__ */ jsx(Button, {
-		size,
-		...cancel,
-		disabled: state.loading,
-		onClick: handleCancel
-	})] });
-}
-//#endregion
-export { Confirm as default };

package/lib/types/components/button/group.js

@@ -1,22 +0,0 @@
-import Button from "./button.js";
-import classNames from "classnames";
-import { Children, cloneElement, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/button/group.tsx
-function Group(props) {
-	const { children, vertical, buttonProps, className, style } = props;
-	const nodes = useMemo(() => {
-		return Children.map(children, (node) => {
-			const { type } = node;
-			if (type === Button) return cloneElement(node, Object.assign({}, node.props, buttonProps));
-			return node;
-		});
-	}, [children]);
-	return /* @__PURE__ */ jsx("div", {
-		className: classNames(className, vertical ? "i-btn-group-vertical" : "i-btn-group-horizonal"),
-		style,
-		children: nodes
-	});
-}
-//#endregion
-export { Group as default };

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

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

package/lib/types/components/button/toggle.js

@@ -1,42 +0,0 @@
-import Button from "./button.js";
-import classNames from "classnames";
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/button/toggle.tsx
-function Toggle(props) {
-	const { ref, active, activeClass, after, disabled, children, className, toggable, onClick, onToggle, ...restProps } = props;
-	const [isActive, setIsActive] = useState(active);
-	const [done, setDone] = useState(true);
-	const toggle = async () => {
-		const hasAfter = !!after;
-		const nextActive = !isActive;
-		if (!(toggable ? await toggable() : true)) return;
-		setIsActive(nextActive);
-		setDone(!hasAfter);
-		onToggle?.(nextActive);
-		if (!hasAfter) return;
-		setTimeout(() => {
-			setDone(true);
-		}, 16);
-	};
-	const handleClick = (e) => {
-		onClick?.(e);
-		!disabled && toggle();
-	};
-	useEffect(() => {
-		setIsActive(active);
-		setDone(true);
-	}, [active]);
-	return /* @__PURE__ */ jsx(Button, {
-		ref,
-		className: classNames(className, { [activeClass || ""]: isActive }, "i-btn-toggle"),
-		...restProps,
-		onClick: handleClick,
-		children: /* @__PURE__ */ jsx("div", {
-			className: classNames("i-btn-toggle-content", { "i-btn-toggle-active": done }),
-			children: isActive ? after ?? children : children
-		})
-	});
-}
-//#endregion
-export { Toggle as default };

package/lib/types/components/card/card.js

@@ -1,29 +0,0 @@
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/card/card.tsx
-const Card = (props) => {
-	const { hideShadow, border, className, children, header, footer, ...restProps } = props;
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-card", className, {
-			shadow: !hideShadow,
-			"i-card-bordered": border
-		}),
-		...restProps,
-		children: [
-			header && /* @__PURE__ */ jsx("div", {
-				className: "i-card-header",
-				children: header
-			}),
-			children && /* @__PURE__ */ jsx("div", {
-				className: "i-card-content",
-				children
-			}),
-			footer && /* @__PURE__ */ jsx("div", {
-				className: "i-card-footer",
-				children: footer
-			})
-		]
-	});
-};
-//#endregion
-export { Card as default };

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

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

package/lib/types/components/checkbox/checkbox.js

@@ -1,62 +0,0 @@
-import { formatOption } from "../../js/utils.js";
-import CheckboxItem from "./item.js";
-import classNames from "classnames";
-import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/checkbox/checkbox.tsx
-function Checkbox(props) {
-	const { label, name, options = [], value = "", type = "default", optionInline = true, labelInline, disabled, status = "normal", message, required, className, renderItem, onChange, ...restProps } = props;
-	const [selectedValues, setSelectedValues] = useState(value);
-	const formattedOptions = useMemo(() => formatOption(options), [options]);
-	const handleChange = (checked, opt, e) => {
-		const group = [...selectedValues];
-		const i = group.findIndex((item) => item === opt.value);
-		if (checked && i < 0) group.push(opt.value);
-		else if (!checked && i > -1) group.splice(i, 1);
-		setSelectedValues(group);
-		onChange?.(group, opt, e);
-	};
-	useEffect(() => {
-		setSelectedValues(value);
-	}, [value]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-checkbox i-input-label", {
-			[`i-checkbox-${status}`]: status !== "normal",
-			"i-input-inline": labelInline
-		}, className),
-		...restProps,
-		children: [label && /* @__PURE__ */ jsxs("span", {
-			className: "i-input-label-text",
-			children: [
-				required && /* @__PURE__ */ jsx("span", {
-					className: "error",
-					children: "*"
-				}),
-				label,
-				message && /* @__PURE__ */ jsx("p", {
-					className: "i-checkbox-message",
-					children: message
-				})
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: classNames("i-checkbox-options", {
-				"i-options-block": !optionInline,
-				"i-checkbox-options-button": type === "button"
-			}),
-			children: formattedOptions.map((option) => {
-				return /* @__PURE__ */ jsx(CheckboxItem, {
-					name,
-					value: selectedValues.includes(option.value),
-					optionValue: option.value,
-					type,
-					disabled: disabled || option.disabled,
-					onChange: (checked, e) => handleChange(checked, option, e),
-					children: renderItem ?? option.label
-				}, option.value);
-			})
-		})]
-	});
-}
-Checkbox.Item = CheckboxItem;
-//#endregion
-export { Checkbox as default };

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

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

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

@@ -1,55 +0,0 @@
-import classNames from "classnames";
-import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/checkbox/item.tsx
-function CheckboxItem(props) {
-	const { type = "default", label, name, value = false, className, status = "normal", message, disabled, partof, optionValue, children, onChange, ...restProps } = props;
-	const [checked, setChecked] = useState(value);
-	const [itemStatus, setItemStatus] = useState(status);
-	const [itemMessage, setItemMessage] = useState(message);
-	const isChildrenFn = typeof children === "function";
-	const handleChange = (e) => {
-		const next = e.target.checked;
-		setChecked(next);
-		setItemStatus(status);
-		setItemMessage(message);
-		onChange?.(next, e);
-	};
-	useEffect(() => {
-		setChecked(value);
-	}, [value]);
-	useEffect(() => {
-		setItemStatus(status);
-		setItemMessage(message);
-	}, [status, message]);
-	return /* @__PURE__ */ jsxs("label", {
-		className: classNames("i-checkbox-item", {
-			[`i-checkbox-${itemStatus}`]: itemStatus !== "normal",
-			disabled
-		}, className),
-		...restProps,
-		children: [
-			/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
-				name,
-				className: classNames("i-checkbox-input", {
-					[`i-checkbox-${type}`]: !partof,
-					"i-checkbox-partof": partof
-				}),
-				checked,
-				disabled,
-				onChange: handleChange
-			}),
-			isChildrenFn ? children(checked, optionValue) : /* @__PURE__ */ jsx("span", {
-				className: "i-checkbox-text",
-				children: children || label
-			}),
-			itemMessage && /* @__PURE__ */ jsxs("span", {
-				className: "i-checkbox-message",
-				children: ["*", itemMessage]
-			})
-		]
-	});
-}
-//#endregion
-export { CheckboxItem as default };

package/lib/types/components/collapse/collapse.js

@@ -1,80 +0,0 @@
-import helpericon_default from "../utils/helpericon/index.js";
-import Item from "./item.js";
-import classNames from "classnames";
-import { Children, useMemo, useState } from "react";
-import { MinusRound, PlusRound } from "@ricons/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/collapse/collapse.tsx
-const Collapse = (props) => {
-	const { active, items, multiple, border, headerClickable, className, children, renderToggle = (active) => active ? /* @__PURE__ */ jsx(MinusRound, {}) : /* @__PURE__ */ jsx(PlusRound, {}), onCollapse, ...restProps } = props;
-	const [activeKey, setActiveKey] = useState(active);
-	const collapses = useMemo(() => {
-		if (!items) {
-			if (!children) return [];
-			return Children.map(children, (node, i) => {
-				const { key, props: nodeProps } = node;
-				const { title, children, content, disabled, ...restProps } = nodeProps;
-				return {
-					...restProps,
-					key: key || i,
-					title,
-					content: children || content,
-					disabled
-				};
-			}) || [];
-		}
-		return items;
-	}, [children]);
-	const handleHeaderClick = (item) => {
-		if (!headerClickable) return;
-		handleToggle(item);
-	};
-	const handleToggle = (item, e) => {
-		const { key, disabled } = item;
-		e?.stopPropagation();
-		if (disabled) return;
-		if (!multiple) {
-			const nextActive = activeKey === key ? void 0 : key;
-			setActiveKey(nextActive);
-			onCollapse?.(key, nextActive !== void 0);
-			return;
-		}
-		const group = Array.isArray(activeKey) ? [...activeKey] : [];
-		const i = group.findIndex((k) => k === key);
-		if (i > -1) group.splice(i, 1);
-		else key !== void 0 && group.push(key);
-		setActiveKey(group);
-		onCollapse?.(key, i < 0);
-	};
-	return /* @__PURE__ */ jsx("div", {
-		className: classNames("i-collapse", { "i-collapse-bordered": border }, className),
-		...restProps,
-		children: collapses.map((item) => {
-			const { key, title, content, disabled, className, ...restProps } = item;
-			const isActive = multiple ? (activeKey || []).includes(key) : activeKey === key;
-			return /* @__PURE__ */ jsxs("div", {
-				className: classNames("i-collapse-item", className, {
-					"i-collapse-active": isActive,
-					"i-collapse-disabled": disabled
-				}),
-				...restProps,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "i-collapse-header",
-					onClick: () => handleHeaderClick(item),
-					children: [title, /* @__PURE__ */ jsx(helpericon_default, {
-						active: true,
-						className: "i-collapse-toggle",
-						icon: renderToggle(isActive),
-						onClick: (e) => handleToggle(item, e)
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "i-collapse-content",
-					children: content
-				})]
-			}, key);
-		})
-	});
-};
-Collapse.Item = Item;
-//#endregion
-export { Collapse as default };

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

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

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

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