@ioca/react 1.4.76 → 1.4.77

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

@@ -0,0 +1,28 @@
+import classNames from "classnames";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./index.css";
+//#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.d.ts

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

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

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

@@ -1,6 +1,5 @@
 import { HTMLAttributes, JSX } from 'react';
-
-interface IFlex extends HTMLAttributes<HTMLElement> {
+export interface IFlex extends HTMLAttributes<HTMLElement> {
     as?: keyof JSX.IntrinsicElements;
     align?: string;
     justify?: string;
@@ -9,5 +8,3 @@ interface IFlex extends HTMLAttributes<HTMLElement> {
     wrap?: any;
     columns?: string | number;
 }
-
-export type { IFlex };

package/lib/types/components/form/context.d.ts

@@ -0,0 +1,3 @@
+import { IFormInstance } from './useForm';
+declare const Context: import('react').Context<IFormInstance>;
+export default Context;

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

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

package/lib/types/components/form/field.d.ts

@@ -1,6 +1,3 @@
-import * as react from 'react';
-import { IField } from './type.js';
-
-declare function Field(props: IField): react.ReactNode;
-
-export { Field as default };
+import { IField } from './type';
+declare function Field(props: IField): import('react').ReactNode;
+export default Field;

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

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

@@ -1,14 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import Field from './field.js';
-import { IForm } from './type.js';
-import useConfig from './useConfig.js';
-import useForm from './useForm.js';
-
+import { default as Field } from './field';
+import { IForm } from './type';
+import { default as useConfig } from './useConfig';
+import { default as useForm } from './useForm';
 declare const Form: {
-    (props: IForm): react_jsx_runtime.JSX.Element;
+    (props: IForm): import("react/jsx-runtime").JSX.Element;
     useForm: typeof useForm;
     Field: typeof Field;
     useConfig: typeof useConfig;
 };
-
-export { Form as default };
+export default Form;

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

@@ -0,0 +1,60 @@
+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";
+import "./index.css";
+//#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.d.ts

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

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

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

@@ -1,12 +1,11 @@
 import { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
-import { IFormInstance } from './useForm.js';
-
-type TValidator = (value: any, form: IFormInstance) => boolean | string;
-type TRule = {
+import { IFormInstance } from './useForm';
+export type TValidator = (value: any, form: IFormInstance) => boolean | string;
+export type TRule = {
     validator: TValidator;
     message?: string;
 };
-interface IForm extends Omit<HTMLAttributes<HTMLFormElement>, "onChange"> {
+export interface IForm extends Omit<HTMLAttributes<HTMLFormElement>, "onChange"> {
     form?: IFormInstance;
     rules?: {
         [key: string]: boolean | TValidator | TRule;
@@ -22,12 +21,12 @@ interface IForm extends Omit<HTMLAttributes<HTMLFormElement>, "onChange"> {
     onEnter?: (e: KeyboardEvent, values: Record<string, any>, form: IFormInstance) => void;
     onChange?: (name: any, value: any) => void;
 }
-interface IField {
+export interface IField {
     name?: string;
     children?: ReactNode;
     required?: boolean;
 }
-interface IFormItem {
+export interface IFormItem {
     name: string;
     label?: ReactNode;
     required?: boolean;
@@ -39,5 +38,3 @@ interface IFormItem {
     shouldRender?: (values: Record<string, any>, form: IFormInstance) => boolean;
     shouldUpdate?: (values: Record<string, any>, form: IFormInstance) => boolean;
 }
-
-export type { IField, IForm, IFormItem, TRule, TValidator };

package/lib/types/components/form/useConfig.d.ts

@@ -1,10 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IFormInstance } from './useForm.js';
-import { IFormItem, IForm } from './type.js';
-
-declare function useConfig(configs: IFormItem[], formProps?: IForm): {
-    form: IFormInstance;
-    node: react_jsx_runtime.JSX.Element;
+import { IForm, IFormItem } from './type';
+export default function useConfig(configs: IFormItem[], formProps?: IForm): {
+    form: import('./useForm').IFormInstance;
+    node: import("react/jsx-runtime").JSX.Element;
 };
-
-export { useConfig as default };

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

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

@@ -1,6 +1,5 @@
-import { IForm } from './type.js';
-
-declare class IFormInstance {
+import { IForm } from './type';
+export declare class IFormInstance {
     readonly id?: string;
     data: Record<string, any>;
     cacheData: Record<string, any>;
@@ -12,6 +11,4 @@ declare class IFormInstance {
     clear(): void;
     validate(field?: string): Promise<boolean | Record<string, any>>;
 }
-declare function useForm(form?: IFormInstance): IFormInstance;
-
-export { IFormInstance, useForm as default };
+export default function useForm(form?: IFormInstance): IFormInstance;

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

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

@@ -1,6 +1,3 @@
-import * as react from 'react';
-import { IIcon } from './type.js';
-
-declare const Icon: (props: IIcon) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode>> | react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
-
-export { Icon as default };
+import { IIcon } from './type';
+declare const Icon: (props: IIcon) => string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode>> | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export default Icon;

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

@@ -0,0 +1,21 @@
+import classNames from "classnames";
+import { cloneElement, isValidElement } from "react";
+import "./index.css";
+//#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.d.ts

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

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

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

@@ -1,6 +1,5 @@
-import { HTMLAttributes, ReactNode, RefObject, CSSProperties } from 'react';
-
-interface IIcon extends HTMLAttributes<HTMLElement> {
+import { CSSProperties, HTMLAttributes, ReactNode, RefObject } from 'react';
+export interface IIcon extends HTMLAttributes<HTMLElement> {
     icon: ReactNode;
     ref?: RefObject<HTMLOrSVGElement | null>;
     size?: string;
@@ -8,5 +7,3 @@ interface IIcon extends HTMLAttributes<HTMLElement> {
     style?: CSSProperties;
     className?: string;
 }
-
-export type { IIcon };

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

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

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

@@ -0,0 +1,83 @@
+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";
+import "./index.css";
+//#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.d.ts

@@ -1,5 +1,2 @@
-import _default from './image.js';
-
-
-
-export { _default as default };
+import { default as Image } from './image';
+export default Image;

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

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

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