@ioca/react 1.4.80 → 1.4.81

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

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

package/lib/types/components/flex/flex.js

@@ -1,27 +0,0 @@
-import classNames from "classnames";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/flex/flex.tsx
-const Flex = (props) => {
-	const { as: Component = "div", align, justify, direction, wrap, gap, columns, className, style, ...restProps } = props;
-	const gridColumns = useMemo(() => {
-		if (!columns) return;
-		if (typeof columns === "number") return `repeat(${columns}, 1fr)`;
-		return columns;
-	}, [columns]);
-	return /* @__PURE__ */ jsx(Component, {
-		...restProps,
-		style: {
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			flexDirection: direction,
-			flexWrap: wrap === true ? "wrap" : wrap,
-			gridTemplateColumns: gridColumns,
-			...style
-		},
-		className: classNames(className, { [columns ? "grid" : "flex"]: true })
-	});
-};
-//#endregion
-export { Flex as default };

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

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

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

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

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

@@ -1,67 +0,0 @@
-import Context from "./context.js";
-import { Children, cloneElement, isValidElement, useContext, useEffect, useMemo, useState } 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/field.tsx
-function Field(props) {
-	const { name, required, children } = props;
-	const [fieldValue, setFieldValue] = useState(void 0);
-	const [fieldStatus, setFieldStatus] = useState("normal");
-	const [fieldMessage, setFieldMessage] = useState(void 0);
-	const form = useContext(Context);
-	const { id } = form;
-	const handleChange = (v) => {
-		if (!name) return;
-		form.set(name, v);
-		PubSub.publish(`${id}:change`, {
-			name,
-			value: v
-		});
-	};
-	const hijackChildren = useMemo(() => {
-		return Children.map(children, (node) => {
-			if (!isValidElement(node)) return null;
-			const { onChange } = node.props;
-			return cloneElement(node, {
-				value: fieldValue,
-				status: fieldStatus,
-				message: fieldMessage,
-				required,
-				onChange: (...args) => {
-					handleChange(args[0]);
-					onChange?.(...args);
-					setFieldStatus("normal");
-					setFieldMessage(void 0);
-				}
-			});
-		});
-	}, [
-		children,
-		fieldValue,
-		fieldStatus,
-		fieldMessage,
-		required
-	]);
-	useEffect(() => {
-		if (!name) return;
-		PubSub.subscribe(`${id}:set:${name}`, (evt, v) => {
-			setFieldValue(v);
-		});
-		PubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {
-			if (v?.value !== void 0) setFieldValue(v.value);
-			if (v?.status) setFieldStatus(v.status);
-			if ("message" in (v ?? {})) setFieldMessage(v.message);
-		});
-		Promise.resolve().then(() => {
-			form.set(name, form.cacheData[name] ?? void 0);
-		});
-		return () => {
-			PubSub.unsubscribe(`${id}:set:${name}`);
-			PubSub.unsubscribe(`${id}:invalid:${name}`);
-			form.delete(name);
-		};
-	}, [name, children]);
-	if (!name) return children;
-	return hijackChildren;
-}
-//#endregion
-export { Field as default };

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

@@ -1,59 +0,0 @@
-import Context from "./context.js";
-import Field from "./field.js";
-import useForm from "./useForm.js";
-import useConfig from "./useConfig.js";
-import classNames from "classnames";
-import { useEffect, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-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/form.tsx
-const Form = (props) => {
-	const { form = {}, rules, initialValues, style, className, width, columns, itemMaxWidth, gap = "1em", labelInline, labelWidth, labelRight, children, onKeyDown, onEnter, onChange, ...restProps } = props;
-	const handleKeyDown = (e) => {
-		onKeyDown?.(e);
-		if (e.keyCode !== 13) return;
-		onEnter?.(e, form.data, form);
-	};
-	const gridColumns = useMemo(() => {
-		if (!columns && !itemMaxWidth) return;
-		if (itemMaxWidth) return `repeat(auto-fill, minmax(${itemMaxWidth}, 1fr))`;
-		if (typeof columns === "number") return `minmax(0, 1fr) `.repeat(columns);
-		return columns;
-	}, [columns]);
-	useEffect(() => {
-		Object.assign(form, {
-			data: { ...initialValues },
-			rules
-		});
-	}, [form]);
-	useEffect(() => {
-		PubSub.subscribe(`${form.id}:change`, (evt, v) => {
-			onChange?.(v.name, v.value);
-		});
-		return () => {
-			PubSub.unsubscribe(`${form.id}:change`);
-		};
-	}, []);
-	return /* @__PURE__ */ jsx(Context, {
-		value: form,
-		children: /* @__PURE__ */ jsx("form", {
-			style: {
-				...style,
-				width,
-				gap,
-				gridTemplateColumns: gridColumns,
-				"--label-width": labelWidth,
-				"--label-align": labelRight ? "right" : void 0
-			},
-			className: classNames("i-form", className, { "i-form-inline": labelInline }),
-			onKeyDown: handleKeyDown,
-			...restProps,
-			children
-		})
-	});
-};
-Form.useForm = useForm;
-Form.Field = Field;
-Form.useConfig = useConfig;
-//#endregion
-export { Form as default };

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

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

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

@@ -1,42 +0,0 @@
-import Field from "./field.js";
-import useForm from "./useForm.js";
-import Form from "./form.js";
-import { Fragment, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/form/useConfig.tsx
-function useConfig(configs, formProps) {
-	const form = useForm();
-	const { onChange } = formProps ?? {};
-	const [values, setValues] = useState({});
-	const handleChange = (name, value) => {
-		setValues(() => ({ ...form.get() }));
-		onChange?.(name, value);
-	};
-	return {
-		form,
-		node: useMemo(() => {
-			return /* @__PURE__ */ jsx(Form, {
-				...formProps,
-				onChange: handleChange,
-				form,
-				children: configs.map((config) => {
-					const { name, label, required, component: El, componentProps = {}, colspan = 1, render, shouldUpdate, shouldRender } = config;
-					const { className, style } = componentProps;
-					if (shouldRender && !shouldRender(values, form)) return /* @__PURE__ */ jsx(Fragment, {}, name);
-					return /* @__PURE__ */ jsx(Field, {
-						name,
-						required,
-						children: render?.(config, values) ?? /* @__PURE__ */ jsx(El, {
-							label,
-							required,
-							...componentProps,
-							className: `${className ?? ""} ${colspan !== 1 ? `colspan-${colspan}` : ""}`
-						})
-					}, name);
-				})
-			});
-		}, [configs, values])
-	};
-}
-//#endregion
-export { useConfig as default };

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