@ioca/react 1.4.79 → 1.4.81

package/lib/types/components/form/useForm.js

@@ -1,119 +0,0 @@
-import { uid } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs";
-import { useRef } from "react";
-import PubSub from "/Users/iann/codes/ioca-react/node_modules/.pnpm/pubsub-js@1.9.5/node_modules/pubsub-js/src/pubsub.js";
-//#region packages/components/form/useForm.ts
-var IFormInstance = class {
-	id;
-	data = {};
-	cacheData = {};
-	rules = {};
-	constructor() {
-		this.id = uid(8);
-		this.data = {};
-	}
-	get(field) {
-		return field ? this.data[field] : this.data;
-	}
-	set(field, value) {
-		const id = this.id;
-		if (!this.data) return;
-		if (typeof field === "string") {
-			this.data[field] = value;
-			this.cacheData[field] = value;
-			PubSub.publish(`${id}:set:${field}`, value);
-			return;
-		}
-		Object.keys(field).map((name) => {
-			this.data[name] = field[name];
-			this.cacheData[name] = field[name];
-			PubSub.publish(`${id}:set:${name}`, field[name]);
-		});
-	}
-	delete(field) {
-		delete this.data[field];
-	}
-	clear() {
-		if (!this.data) return;
-		this.cacheData = {};
-		Object.keys(this.data).map((name) => {
-			PubSub.publish(`${this.id}:set:${name}`, void 0);
-			this.data[name] = void 0;
-		});
-	}
-	async validate(field) {
-		const { id, rules, data } = this;
-		if (!rules) return data;
-		if (field) {
-			const o = rules[field];
-			const rule = {
-				validator: (v) => Array.isArray(v) ? v.length > 0 : ![
-					void 0,
-					null,
-					""
-				].includes(v),
-				message: void 0
-			};
-			if (typeof o === "function") rule.validator = o;
-			else if (o === true) {
-				rule.validator = (v) => ![
-					void 0,
-					null,
-					""
-				].includes(v);
-				rule.message = "required";
-			} else Object.assign(rule, o);
-			const isValid = rule.validator?.(data[field], this);
-			if (typeof isValid === "string") rule.message = isValid;
-			if (isValid !== true) {
-				PubSub.publish(`${id}:invalid:${field}`, {
-					message: rule.message,
-					status: "error"
-				});
-				return false;
-			}
-			PubSub.publish(`${id}:invalid:${name}`, {
-				message: null,
-				status: "normal"
-			});
-			return true;
-		}
-		let isAllValid = true;
-		Object.keys(data).map((name) => {
-			const o = rules[name];
-			if (o === void 0) return;
-			const rule = {
-				validator: (v) => Array.isArray(v) ? v.length > 0 : !!v,
-				message: void 0
-			};
-			if (typeof o === "function") rule.validator = o;
-			else if (o === true) {
-				rule.validator = (v) => ![
-					void 0,
-					null,
-					""
-				].includes(v);
-				rule.message = "required";
-			} else Object.assign(rule, o);
-			const isValid = rule.validator?.(data[name], this);
-			if (typeof isValid === "string") rule.message = isValid;
-			if (isValid !== true) {
-				PubSub.publish(`${id}:invalid:${name}`, {
-					message: rule.message,
-					status: "error"
-				});
-				isAllValid = false;
-			} else PubSub.publish(`${id}:invalid:${name}`, {
-				message: null,
-				status: "normal"
-			});
-		});
-		return isAllValid ? Promise.resolve(data) : false;
-	}
-};
-function useForm(form) {
-	const formRef = useRef(null);
-	if (!formRef.current) formRef.current = form ?? new IFormInstance();
-	return formRef.current;
-}
-//#endregion
-export { useForm as default };

package/lib/types/components/icon/icon.js

@@ -1,20 +0,0 @@
-import classNames from "classnames";
-import { cloneElement, isValidElement } from "react";
-//#region packages/components/icon/icon.tsx
-const Icon = (props) => {
-	const { ref, icon, size = "1.425em", rotate, style, className, ...restProps } = props;
-	if (!isValidElement(icon)) return icon;
-	return cloneElement(icon, {
-		ref,
-		style: {
-			transform: rotate ? `rotate(${rotate}deg)` : void 0,
-			...style,
-			width: size,
-			height: size
-		},
-		className: classNames("i-icon", className),
-		...restProps
-	});
-};
-//#endregion
-export { Icon as default };

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

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

package/lib/types/components/image/image.js

@@ -1,82 +0,0 @@
-import loading_default from "../loading/index.js";
-import { useIntersectionObserver, useReactive } from "../../js/hooks.js";
-import usePreview from "../../js/usePreview/index.js";
-import List from "./list.js";
-import classNames from "classnames";
-import { useEffect, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/image/image.tsx
-const Image = (props) => {
-	const { src, thumb, round, size, height, width, ratio, initSize, lazyload, fallback, fit, style, className, cover, coverClass, usePreview: previewable, onLoad, onError, onClick, ...restProps } = props;
-	const state = useReactive({ status: "loading" });
-	const ref = useRef(null);
-	const { observe, unobserve } = useIntersectionObserver();
-	const preview = usePreview();
-	const handleError = (err) => {
-		onError?.(err);
-		state.status = "error";
-	};
-	const handleLoad = (e) => {
-		onLoad?.(e);
-		state.status = void 0;
-	};
-	const handleClick = (e) => {
-		onClick?.(e);
-		if (!previewable || !src) return;
-		preview({
-			...typeof previewable === "boolean" ? {} : previewable,
-			items: [{
-				src,
-				type: "IMAGE"
-			}]
-		});
-	};
-	useEffect(() => {
-		if (!src || typeof window === "undefined") return;
-		const img = ref.current;
-		const hasSrcAttr = img?.getAttribute("src");
-		if (Boolean(img && (!lazyload || hasSrcAttr)) && img?.complete) state.status = img.naturalWidth > 0 ? void 0 : "error";
-		if (!ref.current?.complete && observe && lazyload) state.status = "loading";
-		if (!lazyload || !ref.current || !observe) return;
-		observe(ref.current, (tar, visible) => {
-			if (!visible) return;
-			tar.setAttribute("src", tar.dataset.src || "");
-			unobserve(tar);
-		});
-		return () => {
-			ref.current && unobserve(ref.current);
-		};
-	}, [src]);
-	restProps[lazyload ? "data-src" : "src"] = thumb ?? src;
-	const iSize = state.status === "loading" ? initSize : void 0;
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			width: width ?? size ?? iSize,
-			height: height ?? size ?? iSize,
-			aspectRatio: ratio,
-			...style
-		},
-		className: classNames("i-image", className, {
-			rounded: round,
-			[`i-image-${state.status}`]: state.status
-		}),
-		onClick: handleClick,
-		children: state.status === "error" ? fallback ?? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			src && /* @__PURE__ */ jsx("img", {
-				ref,
-				style: { objectFit: fit },
-				...restProps,
-				onLoad: handleLoad,
-				onError: handleError
-			}),
-			src && state.status === "loading" && /* @__PURE__ */ jsx(loading_default, { absolute: true }),
-			cover && /* @__PURE__ */ jsx("div", {
-				className: classNames("i-image-cover", coverClass),
-				children: cover
-			})
-		] })
-	});
-};
-Image.List = List;
-//#endregion
-export { Image as default };

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

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

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

@@ -1,46 +0,0 @@
-import { getFileType, getSuffixByUrl } from "../../js/utils.js";
-import flex_default from "../flex/index.js";
-import usePreview from "../../js/usePreview/index.js";
-import Image from "./image.js";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/image/list.tsx
-function List(props) {
-	const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
-	const preview = usePreview();
-	const files = useMemo(() => {
-		return items.map((item) => {
-			const o = { src: "" };
-			if (typeof item === "string") o.src = item;
-			else Object.assign(o, item);
-			o.suffix = getSuffixByUrl(o.src) || "";
-			o.type = getFileType(o.suffix, item["type"]);
-			return o;
-		});
-	}, [items]);
-	const handleClick = (e, i) => {
-		onClick?.(e);
-		previewable && preview({
-			items: files,
-			initial: i
-		});
-	};
-	if (!files.length) return "";
-	return /* @__PURE__ */ jsx(flex_default, {
-		className: "i-image-list",
-		gap,
-		columns,
-		wrap,
-		direction,
-		children: files.map((img, i) => {
-			return /* @__PURE__ */ jsx(Image, {
-				src: img.src,
-				usePreview: false,
-				onClick: (e) => handleClick(e, i),
-				...restProps
-			}, i);
-		})
-	});
-}
-//#endregion
-export { List as default };

package/lib/types/components/input/container.d.ts

@@ -1,2 +0,0 @@
-import { IInputContainer } from './type';
-export default function InputContainer(props: IInputContainer): import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +0,0 @@
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/input/container.tsx
-function InputContainer(props) {
-	const { as: As = "label", label, className, labelInline, style, children, status, tip, required } = props;
-	return /* @__PURE__ */ jsxs(As, {
-		className: classNames("i-input-label", className, { "i-input-inline": labelInline }),
-		style,
-		children: [
-			label && /* @__PURE__ */ jsxs("span", {
-				className: "i-input-label-text",
-				children: [required && /* @__PURE__ */ jsx("span", {
-					className: "error",
-					children: "*"
-				}), label]
-			}),
-			children,
-			tip && /* @__PURE__ */ jsx("span", {
-				className: classNames("i-input-message", { [`i-input-${status}`]: status !== "normal" }),
-				children: tip
-			})
-		]
-	});
-}
-//#endregion
-export { InputContainer as default };

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

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

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

@@ -1,109 +0,0 @@
-import helpericon_default from "../utils/helpericon/index.js";
-import InputContainer from "./container.js";
-import Number from "./number.js";
-import Range from "./range.js";
-import Textarea from "./textarea.js";
-import classNames from "classnames";
-import { useEffect, useMemo, useState } from "react";
-import { VisibilityOffRound, VisibilityRound } from "@ricons/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/input/input.tsx
-const Input = ((props) => {
-	const { ref, type = "text", label, name, value = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border, underline, required, maxLength, onChange, onEnter, onClear, style, ...restProps } = props;
-	const [inputValue, setInputValue] = useState(value);
-	const [inputType, setInputType] = useState(type);
-	const [visible, setVisible] = useState(false);
-	const handleChange = (e) => {
-		const v = e.target.value;
-		setInputValue(v);
-		onChange?.(v, e);
-	};
-	const handleKeydown = (e) => {
-		e.code === "Enter" && onEnter?.(e);
-	};
-	const handleHelperClick = () => {
-		if (type === "password" && !hideVisible) {
-			setVisible((v) => {
-				const next = !v;
-				setInputType(next ? "text" : "password");
-				return next;
-			});
-			return;
-		}
-		const v = "";
-		setInputValue(v);
-		onChange?.(v);
-		onClear?.();
-	};
-	const HelperIcon = useMemo(() => {
-		if (type === "password") return visible ? /* @__PURE__ */ jsx(VisibilityRound, {}) : /* @__PURE__ */ jsx(VisibilityOffRound, {});
-	}, [type, visible]);
-	useEffect(() => {
-		setInputValue(value);
-	}, [value]);
-	const inputProps = {
-		ref,
-		type: inputType,
-		name,
-		value: inputValue,
-		maxLength,
-		className: classNames("i-input", `i-input-${type}`),
-		onChange: handleChange,
-		onKeyDown: handleKeydown,
-		...restProps
-	};
-	useEffect(() => {
-		setInputType(type);
-		setVisible(false);
-	}, [type]);
-	const clearable = clear && inputValue;
-	const showHelper = type === "password" && !!inputValue;
-	return /* @__PURE__ */ jsx(InputContainer, {
-		label,
-		labelInline,
-		className,
-		style: {
-			width,
-			...style
-		},
-		tip: message ?? tip,
-		status,
-		required,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames("i-input-item", {
-				[`i-input-${status}`]: status !== "normal",
-				"i-input-borderless": !border,
-				"i-input-underline": underline
-			}),
-			children: [
-				prepend && /* @__PURE__ */ jsx("div", {
-					className: "i-input-prepend",
-					children: prepend
-				}),
-				/* @__PURE__ */ jsx("input", { ...inputProps }),
-				maxLength && inputValue?.length > 0 && /* @__PURE__ */ jsxs("span", {
-					className: "color-8 pr-4 font-sm",
-					children: [
-						inputValue.length,
-						" / ",
-						maxLength
-					]
-				}),
-				/* @__PURE__ */ jsx(helpericon_default, {
-					active: !!clearable || showHelper,
-					icon: HelperIcon,
-					onClick: handleHelperClick
-				}),
-				append && /* @__PURE__ */ jsx("div", {
-					className: "i-input-append",
-					children: append
-				})
-			]
-		})
-	});
-});
-Input.Textarea = Textarea;
-Input.Number = Number;
-Input.Range = Range;
-//#endregion
-export { Input as default };

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 };