@ioca/react 1.4.80 → 1.4.81

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

@@ -1,134 +0,0 @@
-import { clamp, formatNumber } from "../../js/utils.js";
-import helpericon_default from "../utils/helpericon/index.js";
-import InputContainer from "./container.js";
-import classNames from "classnames";
-import { useEffect, useState } from "react";
-import { KeyboardDoubleArrowUpRound, MinusRound, PlusRound } from "@ricons/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/input/number.tsx
-const Number = (props) => {
-	const { ref, label, name, value = "", labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border, prepend, disabled, message, tip, hideControl, showMax, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
-	const [inputValue, setInputValue] = useState(value === void 0 || value === null ? "" : String(value));
-	const formatOut = (num) => {
-		const v = clamp(num, min, max);
-		if (precision !== void 0) return formatNumber(v, {
-			precision,
-			thousand
-		});
-		const s = String(v);
-		if (!thousand) return s;
-		const negative = s.startsWith("-");
-		const [integer, decimal] = (negative ? s.slice(1) : s).split(".");
-		const withThousand = integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousand);
-		return decimal ? `${negative ? "-" : ""}${withThousand}.${decimal}` : `${negative ? "-" : ""}${withThousand}`;
-	};
-	const sanitizeNumberInput = (raw) => {
-		const hasMinus = raw.startsWith("-");
-		let v = raw.replace(/[^\d.]/g, "");
-		if (hasMinus) v = `-${v}`;
-		const parts = v.split(".");
-		if (parts.length > 1) v = `${parts.shift()}.${parts.join("")}`;
-		return v;
-	};
-	const formatInputValue = (v) => {
-		if (!v) return "";
-		if (typeof v === "number") return v.toString();
-		if (!thousand) return v;
-		return v.split(thousand).join("");
-	};
-	const handleChange = (e) => {
-		const { value } = e.target;
-		const v = sanitizeNumberInput(formatInputValue(value));
-		const isIntermediate = v === "" || v === "-" || v === "." || v === "-." || v.endsWith(".");
-		setInputValue(v);
-		if (isIntermediate) return;
-		const num = parseFloat(v);
-		if (globalThis.Number.isNaN(num)) return;
-		onChange?.(clamp(num, min, max), e);
-		if (precision !== void 0) setInputValue(formatOut(num));
-	};
-	const handleOperate = (param) => {
-		const result = (parseFloat(formatInputValue(inputValue)) || 0) + param;
-		setInputValue(formatOut(result));
-		onChange?.(clamp(result, min, max));
-	};
-	const handleMax = () => {
-		setInputValue(formatOut(max));
-		onChange?.(clamp(max, min, max));
-	};
-	const handleBlur = (e) => {
-		onBlur?.(e);
-		const v = sanitizeNumberInput(formatInputValue(inputValue));
-		if (!v || v === "-" || v === "." || v === "-.") {
-			setInputValue("");
-			return;
-		}
-		const num = parseFloat(v);
-		if (globalThis.Number.isNaN(num)) return;
-		const numValue = clamp(num, min, max);
-		setInputValue(formatOut(numValue));
-		onChange?.(numValue, e);
-	};
-	useEffect(() => {
-		setInputValue(value === void 0 || value === null ? "" : String(value));
-	}, [value]);
-	const inputProps = {
-		ref,
-		name,
-		disabled,
-		value: inputValue,
-		className: "i-input i-input-number",
-		onChange: handleChange,
-		onKeyDown: (e) => {
-			e.code === "Enter" && onEnter?.(e);
-		},
-		onInput,
-		onBlur: handleBlur,
-		...restProps
-	};
-	return /* @__PURE__ */ jsx(InputContainer, {
-		label,
-		labelInline,
-		className,
-		style: {
-			width,
-			...style
-		},
-		tip: message ?? tip,
-		status,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames("i-input-item", {
-				[`i-input-${status}`]: status !== "normal",
-				"i-input-borderless": !border
-			}),
-			children: [
-				prepend && /* @__PURE__ */ jsx("div", {
-					className: "i-input-prepend",
-					children: prepend
-				}),
-				!hideControl && !disabled && /* @__PURE__ */ jsx(helpericon_default, {
-					active: true,
-					icon: /* @__PURE__ */ jsx(MinusRound, {}),
-					onClick: () => handleOperate(-step)
-				}),
-				/* @__PURE__ */ jsx("input", { ...inputProps }),
-				!hideControl && !disabled && /* @__PURE__ */ jsx(helpericon_default, {
-					active: true,
-					icon: /* @__PURE__ */ jsx(PlusRound, {}),
-					onClick: () => handleOperate(step)
-				}),
-				showMax && max && !disabled && /* @__PURE__ */ jsx(helpericon_default, {
-					active: true,
-					icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowUpRound, {}),
-					onClick: handleMax
-				}),
-				append && /* @__PURE__ */ jsx("div", {
-					className: "i-input-append",
-					children: append
-				})
-			]
-		})
-	});
-};
-//#endregion
-export { Number as default };

package/lib/types/components/input/range.js

@@ -1,130 +0,0 @@
-import { clamp, formatNumber } from "../../js/utils.js";
-import helpericon_default from "../utils/helpericon/index.js";
-import InputContainer from "./container.js";
-import classNames from "classnames";
-import { useEffect, useState } from "react";
-import { MinusRound, PlusRound, SyncAltRound } from "@ricons/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/input/range.tsx
-const Range = (props) => {
-	const { label, name, value, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, width, thousand, precision, hideControl, placeholder, border, autoSwitch, onChange, onBlur, style, ...restProps } = props;
-	const [rangeValue, setRangeValue] = useState(value);
-	const getRangeNumber = (v) => clamp(v, min, max);
-	const getFormatNumber = (v) => formatNumber(v, {
-		precision,
-		thousand
-	});
-	const formatInputValue = (v) => {
-		if (!v) return "";
-		if (typeof v === "number" || !thousand) return v;
-		return v.replaceAll(thousand, "");
-	};
-	const handleChange = (e, i) => {
-		const { value } = e.target;
-		const v = formatInputValue(value.replace(/[^\d\.-]/g, ""));
-		const range = Array.isArray(rangeValue) ? [...rangeValue] : [];
-		range[i] = v;
-		setRangeValue(range);
-		onChange?.(range, e);
-	};
-	const handleOperate = (e, param, i) => {
-		e.preventDefault();
-		e.stopPropagation();
-		const range = Array.isArray(rangeValue) ? [...rangeValue] : [];
-		range[i] = getFormatNumber(getRangeNumber(+(formatInputValue(range[i]) ?? 0) + param));
-		setRangeValue(range);
-		onChange?.(range, e);
-	};
-	const handleSwitch = (e) => {
-		e?.preventDefault();
-		e?.stopPropagation();
-		const range = Array.isArray(rangeValue) ? [...rangeValue] : [];
-		[range[0], range[1]] = [range[1], range[0]];
-		setRangeValue(range);
-		onChange?.(range);
-	};
-	useEffect(() => {
-		setRangeValue(value);
-	}, [value]);
-	const inputProps = {
-		name,
-		className: "i-input i-input-number",
-		...restProps
-	};
-	const handleBlur = () => {
-		if (!autoSwitch) return;
-		const range = Array.isArray(rangeValue) ? rangeValue : [];
-		if (range.length < 2) return;
-		const [left, right] = range.map(Number);
-		if (left > right) handleSwitch();
-	};
-	return /* @__PURE__ */ jsx(InputContainer, {
-		label,
-		labelInline,
-		className,
-		style: {
-			width,
-			...style
-		},
-		tip: message ?? tip,
-		status,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames("i-input-item", {
-				[`i-input-${status}`]: status !== "normal",
-				"i-input-borderless": !border
-			}),
-			children: [
-				prepend && /* @__PURE__ */ jsx("div", {
-					className: "i-input-prepend",
-					children: prepend
-				}),
-				!hideControl && /* @__PURE__ */ jsx(helpericon_default, {
-					active: true,
-					icon: /* @__PURE__ */ jsx(MinusRound, {}),
-					onClick: (e) => handleOperate(e, -step, 0)
-				}),
-				/* @__PURE__ */ jsx("input", {
-					value: rangeValue?.[0] || "",
-					placeholder: placeholder?.[0],
-					...inputProps,
-					onBlur: handleBlur,
-					onChange: (e) => handleChange(e, 0)
-				}),
-				!hideControl && /* @__PURE__ */ jsx(helpericon_default, {
-					active: true,
-					icon: /* @__PURE__ */ jsx(PlusRound, {}),
-					onClick: (e) => handleOperate(e, step, 0)
-				}),
-				/* @__PURE__ */ jsx(helpericon_default, {
-					active: true,
-					icon: /* @__PURE__ */ jsx(SyncAltRound, {}),
-					style: { margin: 0 },
-					onClick: handleSwitch
-				}),
-				!hideControl && /* @__PURE__ */ jsx(helpericon_default, {
-					active: true,
-					icon: /* @__PURE__ */ jsx(MinusRound, {}),
-					onClick: (e) => handleOperate(e, -step, 1)
-				}),
-				/* @__PURE__ */ jsx("input", {
-					value: rangeValue?.[1] || "",
-					placeholder: placeholder?.[1],
-					...inputProps,
-					onBlur: handleBlur,
-					onChange: (e) => handleChange(e, 1)
-				}),
-				!hideControl && /* @__PURE__ */ jsx(helpericon_default, {
-					active: true,
-					icon: /* @__PURE__ */ jsx(PlusRound, {}),
-					onClick: (e) => handleOperate(e, step, 1)
-				}),
-				append && /* @__PURE__ */ jsx("div", {
-					className: "i-input-append",
-					children: append
-				})
-			]
-		})
-	});
-};
-//#endregion
-export { Range as default };

package/lib/types/components/input/textarea.js

@@ -1,57 +0,0 @@
-import InputContainer from "./container.js";
-import classNames from "classnames";
-import { useEffect, useImperativeHandle, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/input/textarea.tsx
-const Textarea = (props) => {
-	const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, onChange, onEnter, ...restProps } = props;
-	const [textareaValue, setTextareaValue] = useState(value);
-	const refTextarea = useRef(null);
-	const handleChange = (e) => {
-		const v = e.target.value;
-		setTextareaValue(v);
-		const ta = refTextarea.current;
-		if (autoSize && ta) ta.style.height = `${ta.scrollHeight}px`;
-		onChange?.(v, e);
-	};
-	const handleKeydown = (e) => {
-		if (e.code !== "Enter") return;
-		e.stopPropagation();
-		onEnter?.(e);
-	};
-	useEffect(() => {
-		setTextareaValue(value);
-	}, [value]);
-	useImperativeHandle(ref, () => {
-		return { input: refTextarea.current };
-	});
-	const inputProps = {
-		ref: refTextarea,
-		name,
-		value: textareaValue,
-		className: "i-input i-textarea",
-		onChange: handleChange,
-		onKeyDown: handleKeydown,
-		...restProps
-	};
-	return /* @__PURE__ */ jsx(InputContainer, {
-		label,
-		labelInline,
-		className,
-		style: {
-			width,
-			...style
-		},
-		tip: message ?? tip,
-		status,
-		children: /* @__PURE__ */ jsx("div", {
-			className: classNames("i-input-item", {
-				[`i-input-${status}`]: status !== "normal",
-				"i-input-borderless": !border
-			}),
-			children: /* @__PURE__ */ jsx("textarea", { ...inputProps })
-		})
-	});
-};
-//#endregion
-export { Textarea as default };

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

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

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

@@ -1,26 +0,0 @@
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/list/item.tsx
-const Item = (props) => {
-	const { ref, active, type, align, disabled, label, style, border, className, children, ...restProps } = props;
-	return /* @__PURE__ */ jsxs("li", {
-		ref,
-		className: classNames("i-list-item", className, {
-			"i-list-item-active": active,
-			"i-list-option": type === "option",
-			"i-list-item-bordered": border,
-			disabled
-		}),
-		style: {
-			alignItems: align,
-			...style
-		},
-		...restProps,
-		children: [label !== void 0 && /* @__PURE__ */ jsx("span", {
-			className: "i-list-item-label",
-			children: label
-		}), children]
-	});
-};
-//#endregion
-export { Item as default };

package/lib/types/components/list/list.js

@@ -1,26 +0,0 @@
-import Item from "./item.js";
-import classNames from "classnames";
-import { Children, cloneElement } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/list/list.tsx
-const List = (props) => {
-	const { label, type, border, className, children, ...restProps } = props;
-	return /* @__PURE__ */ jsx("ul", {
-		className: classNames("i-list", className),
-		...restProps,
-		children: Children.map(children, (node, i) => {
-			const renderLabel = typeof label === "function" ? label(i) : label;
-			const { type, props: nodeProps } = node;
-			if (type === Item) return cloneElement(node, {
-				label: renderLabel,
-				...nodeProps,
-				type: props.type,
-				border
-			});
-			return node;
-		})
-	});
-};
-List.Item = Item;
-//#endregion
-export { List as default };

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

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

package/lib/types/components/loading/loading.js

@@ -1,35 +0,0 @@
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/loading/loading.tsx
-const Loading = (props) => {
-	const { icon, text, size, absolute, style, className, ...restProps } = props;
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-loading-container", { absolute }, className),
-		style: {
-			...style,
-			inset: absolute ? 0 : "unset"
-		},
-		...restProps,
-		children: [icon ?? /* @__PURE__ */ jsx("svg", {
-			width: "24",
-			height: "24",
-			stroke: "#000",
-			viewBox: "0 0 24 24",
-			xmlns: "http://www.w3.org/2000/svg",
-			className: "i-loading-icon",
-			style: { fontSize: size },
-			children: /* @__PURE__ */ jsx("circle", {
-				cx: "12",
-				cy: "12",
-				r: "9.5",
-				fill: "none",
-				strokeWidth: "3",
-				strokeLinecap: "round",
-				strokeDasharray: 40,
-				strokeDashoffset: 0
-			})
-		}), text]
-	});
-};
-//#endregion
-export { Loading as default };

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

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

package/lib/types/components/message/message.js

@@ -1,193 +0,0 @@
-import { useReactive } from "../../js/hooks.js";
-import classNames from "classnames";
-import { uid } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs";
-import { isValidElement, useEffect, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createRoot } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/react-dom@19.2.4_react@19.2.4/node_modules/react-dom/client.js";
-//#region packages/components/message/message.tsx
-const AlignMap = {
-	left: "flex-start",
-	center: "center",
-	right: "flex-end"
-};
-const GlobalConfig = {
-	align: "center",
-	offset: "12px",
-	gap: 12
-};
-const ItemDefaultConfig = {
-	duration: 3e3,
-	closable: true,
-	active: false
-};
-const handler = {
-	oneInstance: null,
-	callout(item) {},
-	close() {}
-};
-const queue = {
-	left: [],
-	center: [],
-	right: []
-};
-const heights = {
-	left: [],
-	center: [],
-	right: []
-};
-const MessageItem = function({ ref, active, content, top, className, style, onClick }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: classNames("i-message", className, { "i-message-active": active }),
-		style: {
-			...style,
-			top
-		},
-		onClick,
-		children: content
-	});
-};
-function Messages() {
-	const ref = useRef(null);
-	const state = useReactive({
-		items: {
-			left: [],
-			center: [],
-			right: []
-		},
-		tops: {
-			left: [],
-			center: [],
-			right: []
-		}
-	});
-	const offsetTop = {
-		left: 0,
-		center: 0,
-		right: 0
-	};
-	useEffect(() => {
-		Object.assign(handler, {
-			callout: function(item) {
-				const { align = "center", unshift, onShow } = item;
-				const size = queue[align][unshift ? "unshift" : "push"](item);
-				state.items[align] = [...queue[align]];
-				item.close = this.close.bind(item);
-				setTimeout(() => {
-					const h = ref.current?.offsetHeight || 0;
-					queue[align][unshift ? 0 : size - 1].active = true;
-					state.items[align] = [...queue[align]];
-					heights[align][unshift ? "unshift" : "push"](h);
-					state.tops[align] = [...heights[align]];
-					onShow?.();
-				}, 12);
-				if (item.duration !== 0) item.timer = setTimeout(() => {
-					this.close.call(item);
-				}, item.duration);
-			},
-			close: function() {
-				const item = this;
-				const { align = "center", onHide } = item;
-				const index = queue[align].findIndex((i) => i.id === item.id);
-				if (index < 0) return;
-				queue[align][index].active = false;
-				state.items[align] = [...queue[align]];
-				item.timer = setTimeout(() => {
-					const index = queue[align].findIndex((i) => i.id === item.id);
-					queue[align].splice(index, 1);
-					heights[align].splice(index, 1);
-					state.tops[align] = [...heights[align]];
-					state.items[align] = [...queue[align]];
-					item.timer && clearTimeout(item.timer);
-					onHide?.();
-				}, 240);
-			}
-		});
-	}, []);
-	const renderItems = (item, i) => {
-		if (!item) return /* @__PURE__ */ jsx(Fragment$1, {});
-		const { id, active, content, align = "center", className } = item;
-		offsetTop[align] += state.tops[align][i - 1] || 0;
-		return /* @__PURE__ */ jsx(MessageItem, {
-			ref,
-			active,
-			content,
-			top: GlobalConfig.gap * i + offsetTop[align],
-			className,
-			style: { alignSelf: AlignMap[align] },
-			onClick: handler.close.bind(item)
-		}, id);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "i-messages",
-		children: [
-			state.items.left.map(renderItems),
-			state.items.center.map(renderItems),
-			state.items.right.map(renderItems)
-		]
-	});
-}
-function message(config) {
-	if (["string", "number"].includes(typeof config) || isValidElement(config)) config = { content: config };
-	config = Object.assign({ id: uid(7) }, ItemDefaultConfig, config);
-	handler.callout(config);
-	return {
-		instance: config,
-		close: handler.close.bind(config)
-	};
-}
-function createContainer() {
-	if (typeof document === "undefined") return null;
-	const container = document.createElement("div");
-	container.dataset.id = "messages";
-	document.body.append(container);
-	return container;
-}
-message.error = (content) => {
-	return message({
-		content,
-		className: "bg-error"
-	});
-};
-message.success = (content) => {
-	return message({
-		content,
-		className: "bg-success"
-	});
-};
-message.warning = (content) => {
-	return message({
-		content,
-		className: "bg-warning"
-	});
-};
-message.info = (content) => {
-	return message({
-		content,
-		className: "bg-blue"
-	});
-};
-message.one = (config) => {
-	const o = handler.oneInstance;
-	if (o) if (o.active && o.duration !== 0) {
-		clearTimeout(o.timer);
-		o.timer = setTimeout(() => {
-			o.close?.();
-		}, o.duration);
-	} else handler.callout(o);
-	else {
-		const { instance } = message(config);
-		handler.oneInstance = instance;
-	}
-};
-let container = null;
-let root = null;
-if (typeof window !== "undefined") {
-	container = createContainer();
-	if (container) {
-		root = createRoot(container);
-		root.render(/* @__PURE__ */ jsx(Messages, {}));
-	}
-}
-//#endregion
-export { message as default };

package/lib/types/components/modal/content.js

@@ -1,54 +0,0 @@
-import button_default from "../button/index.js";
-import helpericon_default from "../utils/helpericon/index.js";
-import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/modal/content.tsx
-function Content(props) {
-	const { title, footer, hideCloseButton, footerLeft, okButtonProps, cancelButtonProps, children, onOk, onClose } = props;
-	const showHeader = title || !hideCloseButton;
-	const handleOk = async () => {
-		if (await onOk?.() === false) return;
-		onClose?.();
-	};
-	const renderFooter = useMemo(() => {
-		if (footer || footer === null) return footer;
-		const propsOk = Object.assign({
-			children: "确定",
-			onClick: handleOk
-		}, okButtonProps);
-		const propsCancel = Object.assign({
-			secondary: true,
-			children: "关闭",
-			onClick: onClose
-		}, cancelButtonProps);
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			footerLeft,
-			/* @__PURE__ */ jsx(button_default, { ...propsOk }),
-			/* @__PURE__ */ jsx(button_default, { ...propsCancel })
-		] });
-	}, [
-		footer,
-		okButtonProps,
-		cancelButtonProps
-	]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		showHeader && /* @__PURE__ */ jsxs("header", {
-			className: "i-modal-header",
-			children: [title && /* @__PURE__ */ jsx("b", { children: title }), /* @__PURE__ */ jsx(helpericon_default, {
-				active: !hideCloseButton,
-				className: "i-modal-close",
-				onClick: onClose
-			})]
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "i-modal-content",
-			children
-		}),
-		/* @__PURE__ */ jsx("footer", {
-			className: "i-modal-footer",
-			children: renderFooter
-		})
-	] });
-}
-//#endregion
-export { Content as default };

package/lib/types/components/modal/context.js

@@ -1,5 +0,0 @@
-import { createContext } from "react";
-//#region packages/components/modal/context.ts
-const ModalContext = createContext(false);
-//#endregion
-export { ModalContext as default };