@ioca/react 1.4.79 → 1.4.81

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

@@ -1,48 +1,43 @@
-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
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import usePreview from '../../js/usePreview/index.js';
+import { getSuffixByUrl, getFileType } from '../../js/utils.js';
+import Flex from '../flex/flex.js';
+import Image from './image.js';
+
 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);
-		})
-	});
+    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 (jsx(Flex, { className: 'i-image-list', gap: gap, columns: columns, wrap: wrap, direction: direction, children: files.map((img, i) => {
+            return (jsx(Image, { src: img.src, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
+        }) }));
 }
-//#endregion
-export { List as default };
 
-//# sourceMappingURL=list.js.map
+export { List as default };
+//# sourceMappingURL=list.js.map

package/lib/es/components/image/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":["Flex"],"sources":["../../../../packages/components/image/list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport usePreview from \"../../js/usePreview\";\nimport { TPreviewItem } from \"../../js/usePreview/type\";\nimport { getFileType, getSuffixByUrl } from \"../../js/utils\";\nimport Flex from \"../flex\";\nimport Image from \"./image\";\nimport { IImageList } from \"./type\";\n\nexport default function List(props: IImageList) {\n\tconst {\n\t\titems = [],\n\t\tgap = 8,\n\t\tcolumns,\n\t\twrap,\n\t\tdirection,\n\t\tusePreview: previewable,\n\t\tonClick,\n\t\t...restProps\n\t} = props;\n\tconst preview = usePreview();\n\n\tconst files = useMemo(() => {\n\t\treturn items.map((item) => {\n\t\t\tconst o: TPreviewItem = {\n\t\t\t\tsrc: \"\",\n\t\t\t};\n\t\t\tif (typeof item === \"string\") {\n\t\t\t\to.src = item;\n\t\t\t} else {\n\t\t\t\tObject.assign(o, item);\n\t\t\t}\n\n\t\t\to.suffix = getSuffixByUrl(o.src) || \"\";\n\t\t\to.type = getFileType(o.suffix, item[\"type\"]);\n\n\t\t\treturn o;\n\t\t});\n\t}, [items]);\n\n\tconst handleClick = (e, i) => {\n\t\tonClick?.(e);\n\n\t\tpreviewable &&\n\t\t\tpreview({\n\t\t\t\titems: files,\n\t\t\t\tinitial: i,\n\t\t\t});\n\t};\n\n\tif (!files.length) return \"\";\n\n\treturn (\n\t\t<Flex\n\t\t\tclassName='i-image-list'\n\t\t\tgap={gap}\n\t\t\tcolumns={columns}\n\t\t\twrap={wrap}\n\t\t\tdirection={direction}\n\t\t>\n\t\t\t{files.map((img, i) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Image\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tsrc={img.src}\n\t\t\t\t\t\tusePreview={false}\n\t\t\t\t\t\tonClick={(e) => handleClick(e, i)}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Flex>\n\t);\n}\n"],"mappings":";;;;;;;AAQA,SAAwB,KAAK,OAAmB;CAC/C,MAAM,EACL,QAAQ,EAAE,EACV,MAAM,GACN,SACA,MACA,WACA,YAAY,aACZ,SACA,GAAG,cACA;CACJ,MAAM,UAAU,YAAY;CAE5B,MAAM,QAAQ,cAAc;AAC3B,SAAO,MAAM,KAAK,SAAS;GAC1B,MAAM,IAAkB,EACvB,KAAK,IACL;AACD,OAAI,OAAO,SAAS,SACnB,GAAE,MAAM;OAER,QAAO,OAAO,GAAG,KAAK;AAGvB,KAAE,SAAS,eAAe,EAAE,IAAI,IAAI;AACpC,KAAE,OAAO,YAAY,EAAE,QAAQ,KAAK,QAAQ;AAE5C,UAAO;IACN;IACA,CAAC,MAAM,CAAC;CAEX,MAAM,eAAe,GAAG,MAAM;AAC7B,YAAU,EAAE;AAEZ,iBACC,QAAQ;GACP,OAAO;GACP,SAAS;GACT,CAAC;;AAGJ,KAAI,CAAC,MAAM,OAAQ,QAAO;AAE1B,QACC,oBAACA,cAAD;EACC,WAAU;EACL;EACI;EACH;EACK;YAEV,MAAM,KAAK,KAAK,MAAM;AACtB,UACC,oBAAC,OAAD;IAEC,KAAK,IAAI;IACT,YAAY;IACZ,UAAU,MAAM,YAAY,GAAG,EAAE;IACjC,GAAI;IACH,EALI,EAKJ;IAEF;EACI,CAAA"}
+{"version":3,"file":"list.js","sources":["../../../../packages/components/image/list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport usePreview from \"../../js/usePreview\";\nimport { TPreviewItem } from \"../../js/usePreview/type\";\nimport { getFileType, getSuffixByUrl } from \"../../js/utils\";\nimport Flex from \"../flex\";\nimport Image from \"./image\";\nimport { IImageList } from \"./type\";\n\nexport default function List(props: IImageList) {\n\tconst {\n\t\titems = [],\n\t\tgap = 8,\n\t\tcolumns,\n\t\twrap,\n\t\tdirection,\n\t\tusePreview: previewable,\n\t\tonClick,\n\t\t...restProps\n\t} = props;\n\tconst preview = usePreview();\n\n\tconst files = useMemo(() => {\n\t\treturn items.map((item) => {\n\t\t\tconst o: TPreviewItem = {\n\t\t\t\tsrc: \"\",\n\t\t\t};\n\t\t\tif (typeof item === \"string\") {\n\t\t\t\to.src = item;\n\t\t\t} else {\n\t\t\t\tObject.assign(o, item);\n\t\t\t}\n\n\t\t\to.suffix = getSuffixByUrl(o.src) || \"\";\n\t\t\to.type = getFileType(o.suffix, item[\"type\"]);\n\n\t\t\treturn o;\n\t\t});\n\t}, [items]);\n\n\tconst handleClick = (e, i) => {\n\t\tonClick?.(e);\n\n\t\tpreviewable &&\n\t\t\tpreview({\n\t\t\t\titems: files,\n\t\t\t\tinitial: i,\n\t\t\t});\n\t};\n\n\tif (!files.length) return \"\";\n\n\treturn (\n\t\t<Flex\n\t\t\tclassName='i-image-list'\n\t\t\tgap={gap}\n\t\t\tcolumns={columns}\n\t\t\twrap={wrap}\n\t\t\tdirection={direction}\n\t\t>\n\t\t\t{files.map((img, i) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Image\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tsrc={img.src}\n\t\t\t\t\t\tusePreview={false}\n\t\t\t\t\t\tonClick={(e) => handleClick(e, i)}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Flex>\n\t);\n}\n"],"names":["_jsx"],"mappings":";;;;;;;AAQc,SAAU,IAAI,CAAC,KAAiB,EAAA;IAC7C,MAAM,EACL,KAAK,GAAG,EAAE,EACV,GAAG,GAAG,CAAC,EACP,OAAO,EACP,IAAI,EACJ,SAAS,EACT,UAAU,EAAE,WAAW,EACvB,OAAO,EACP,GAAG,SAAS,EACZ,GAAG,KAAK;AACT,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAE5B,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAK;AAC1B,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;AACzB,YAAA,MAAM,CAAC,GAAiB;AACvB,gBAAA,GAAG,EAAE,EAAE;aACP;AACD,YAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC7B,gBAAA,CAAC,CAAC,GAAG,GAAG,IAAI;YACb;iBAAO;AACN,gBAAA,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC;YACvB;YAEA,CAAC,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE;AACtC,YAAA,CAAC,CAAC,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AAE5C,YAAA,OAAO,CAAC;AACT,QAAA,CAAC,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,CAAC,KAAI;AAC5B,QAAA,OAAO,GAAG,CAAC,CAAC;QAEZ,WAAW;AACV,YAAA,OAAO,CAAC;AACP,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,OAAO,EAAE,CAAC;AACV,aAAA,CAAC;AACJ,IAAA,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,MAAM;AAAE,QAAA,OAAO,EAAE;AAE5B,IAAA,QACCA,GAAA,CAAC,IAAI,EAAA,EACJ,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EAAA,QAAA,EAEnB,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;AACrB,YAAA,QACCA,GAAA,CAAC,KAAK,EAAA,EAEL,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,KAC7B,SAAS,EAAA,EAJR,CAAC,CAKL;QAEJ,CAAC,CAAC,EAAA,CACI;AAET;;;;"}

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

@@ -1,28 +1,14 @@
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/input/container.tsx
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
 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
-			})
-		]
-	});
+    const { as: As = "label", label, className, labelInline, style, children, status, tip, required, } = props;
+    return (jsxs(As, { className: classNames("i-input-label", className, {
+            "i-input-inline": labelInline,
+        }), style: style, children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label] })), children, tip && (jsx("span", { className: classNames("i-input-message", {
+                    [`i-input-${status}`]: status !== "normal",
+                }), children: tip }))] }));
 }
-//#endregion
-export { InputContainer as default };
 
-//# sourceMappingURL=container.js.map
+export { InputContainer as default };
+//# sourceMappingURL=container.js.map

package/lib/es/components/input/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../../../packages/components/input/container.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { IInputContainer } from \"./type\";\n\nexport default function InputContainer(props: IInputContainer) {\n\tconst {\n\t\tas: As = \"label\",\n\t\tlabel,\n\t\tclassName,\n\t\tlabelInline,\n\t\tstyle,\n\t\tchildren,\n\t\tstatus,\n\t\ttip,\n\t\trequired,\n\t} = props;\n\n\treturn (\n\t\t<As\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<span className='i-input-label-text'>\n\t\t\t\t\t{required && <span className='error'>*</span>}\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t)}\n\n\t\t\t{children}\n\n\t\t\t{tip && (\n\t\t\t\t<span\n\t\t\t\t\tclassName={classNames(\"i-input-message\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{tip}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</As>\n\t);\n}\n"],"mappings":";;;AAGA,SAAwB,eAAe,OAAwB;CAC9D,MAAM,EACL,IAAI,KAAK,SACT,OACA,WACA,aACA,OACA,UACA,QACA,KACA,aACG;AAEJ,QACC,qBAAC,IAAD;EACC,WAAW,WAAW,iBAAiB,WAAW,EACjD,kBAAkB,aAClB,CAAC;EACK;YAJR;GAME,SACA,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,YAAY,oBAAC,QAAD;KAAM,WAAU;eAAQ;KAAQ,CAAA,EAC5C,MACK;;GAGP;GAEA,OACA,oBAAC,QAAD;IACC,WAAW,WAAW,mBAAmB,GACvC,WAAW,WAAW,WAAW,UAClC,CAAC;cAED;IACK,CAAA;GAEJ"}
+{"version":3,"file":"container.js","sources":["../../../../packages/components/input/container.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { IInputContainer } from \"./type\";\n\nexport default function InputContainer(props: IInputContainer) {\n\tconst {\n\t\tas: As = \"label\",\n\t\tlabel,\n\t\tclassName,\n\t\tlabelInline,\n\t\tstyle,\n\t\tchildren,\n\t\tstatus,\n\t\ttip,\n\t\trequired,\n\t} = props;\n\n\treturn (\n\t\t<As\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<span className='i-input-label-text'>\n\t\t\t\t\t{required && <span className='error'>*</span>}\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t)}\n\n\t\t\t{children}\n\n\t\t\t{tip && (\n\t\t\t\t<span\n\t\t\t\t\tclassName={classNames(\"i-input-message\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{tip}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</As>\n\t);\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAGc,SAAU,cAAc,CAAC,KAAsB,EAAA;IAC5D,MAAM,EACL,EAAE,EAAE,EAAE,GAAG,OAAO,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,QAAQ,GACR,GAAG,KAAK;IAET,QACCA,IAAA,CAAC,EAAE,EAAA,EACF,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,EAAE;AACjD,YAAA,gBAAgB,EAAE,WAAW;AAC7B,SAAA,CAAC,EACF,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAEX,KAAK,KACLA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAClC,QAAQ,IAAIC,cAAM,SAAS,EAAC,OAAO,EAAA,QAAA,EAAA,GAAA,EAAA,CAAS,EAC5C,KAAK,CAAA,EAAA,CACA,CACP,EAEA,QAAQ,EAER,GAAG,KACHA,cACC,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE;AACxC,oBAAA,CAAC,WAAW,MAAM,CAAA,CAAE,GAAG,MAAM,KAAK,QAAQ;AAC1C,iBAAA,CAAC,YAED,GAAG,EAAA,CACE,CACP,CAAA,EAAA,CACG;AAEP;;;;"}

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

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

package/lib/es/components/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../packages/components/input/index.tsx"],"sourcesContent":["import Input from \"./input\";\n\nexport default Input;\n"],"mappings":";;AAEA,IAAA,gBAAe"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/es/components/input/input.js

@@ -1,111 +1,75 @@
-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
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { VisibilityRound, VisibilityOffRound } from '@ricons/material';
+import classNames from 'classnames';
+import { useState, useMemo, useEffect } from 'react';
+import Helpericon from '../utils/helpericon/helpericon.js';
+import InputContainer from './container.js';
+import Number from './number.js';
+import Range from './range.js';
+import Textarea from './textarea.js';
+
 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
-				})
-			]
-		})
-	});
+    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 ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
+        }
+        return undefined;
+    }, [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 (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
+                [`i-input-${status}`]: status !== "normal",
+                "i-input-borderless": !border,
+                "i-input-underline": underline,
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), maxLength && inputValue?.length > 0 && (jsxs("span", { className: 'color-8 pr-4 font-sm', children: [inputValue.length, " / ", maxLength] })), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 });
 Input.Textarea = Textarea;
 Input.Number = Number;
 Input.Range = Range;
-//#endregion
-export { Input as default };
 
-//# sourceMappingURL=input.js.map
+export { Input as default };
+//# sourceMappingURL=input.js.map

package/lib/es/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../../../packages/components/input/input.tsx"],"sourcesContent":["import { VisibilityOffRound, VisibilityRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport {\n\tChangeEvent,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\ttype KeyboardEvent,\n} from \"react\";\nimport \"../../css/input.css\";\nimport Helpericon from \"../utils/helpericon\";\nimport InputContainer from \"./container\";\nimport Number from \"./number\";\nimport Range from \"./range\";\nimport Textarea from \"./textarea\";\nimport type { CompositionInput, IInput } from \"./type\";\n\nconst Input = ((props: IInput) => {\n\tconst {\n\t\tref,\n\t\ttype = \"text\",\n\t\tlabel,\n\t\tname,\n\t\tvalue = \"\",\n\t\tprepend,\n\t\tappend,\n\t\tlabelInline,\n\t\tclassName,\n\t\tstatus = \"normal\",\n\t\tmessage,\n\t\ttip,\n\t\tclear,\n\t\twidth,\n\t\thideVisible,\n\t\tborder,\n\t\tunderline,\n\t\trequired,\n\t\tmaxLength,\n\t\tonChange,\n\t\tonEnter,\n\t\tonClear,\n\t\tstyle,\n\t\t...restProps\n\t} = props;\n\n\tconst [inputValue, setInputValue] = useState(value);\n\tconst [inputType, setInputType] = useState(type);\n\tconst [visible, setVisible] = useState(false);\n\n\tconst handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tconst v = e.target.value;\n\n\t\tsetInputValue(v);\n\t\tonChange?.(v, e);\n\t};\n\n\tconst handleKeydown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\te.code === \"Enter\" && onEnter?.(e);\n\t};\n\n\tconst handleHelperClick = () => {\n\t\tif (type === \"password\" && !hideVisible) {\n\t\t\tsetVisible((v) => {\n\t\t\t\tconst next = !v;\n\t\t\t\tsetInputType(next ? \"text\" : \"password\");\n\t\t\t\treturn next;\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\n\t\tconst v = \"\";\n\t\tsetInputValue(v);\n\t\tonChange?.(v);\n\t\tonClear?.();\n\t};\n\n\tconst HelperIcon = useMemo(() => {\n\t\tif (type === \"password\") {\n\t\t\treturn visible ? <VisibilityRound /> : <VisibilityOffRound />;\n\t\t}\n\n\t\treturn undefined;\n\t}, [type, visible]);\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [value]);\n\n\tconst inputProps = {\n\t\tref,\n\t\ttype: inputType,\n\t\tname,\n\t\tvalue: inputValue,\n\t\tmaxLength,\n\t\tclassName: classNames(\"i-input\", `i-input-${type}`),\n\t\tonChange: handleChange,\n\t\tonKeyDown: handleKeydown,\n\t\t...restProps,\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputType(type);\n\t\tsetVisible(false);\n\t}, [type]);\n\n\tconst clearable = clear && inputValue;\n\tconst showHelper = type === \"password\" && !!inputValue;\n\n\treturn (\n\t\t<InputContainer\n\t\t\tlabel={label}\n\t\t\tlabelInline={labelInline}\n\t\t\tclassName={className}\n\t\t\tstyle={{ width, ...style }}\n\t\t\ttip={message ?? tip}\n\t\t\tstatus={status}\n\t\t\trequired={required}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-input-item\", {\n\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t\"i-input-borderless\": !border,\n\t\t\t\t\t\"i-input-underline\": underline,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{prepend && <div className='i-input-prepend'>{prepend}</div>}\n\n\t\t\t\t<input {...inputProps} />\n\n\t\t\t\t{maxLength && inputValue?.length > 0 && (\n\t\t\t\t\t<span className='color-8 pr-4 font-sm'>\n\t\t\t\t\t\t{inputValue.length} / {maxLength}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive={!!clearable || showHelper}\n\t\t\t\t\ticon={HelperIcon}\n\t\t\t\t\tonClick={handleHelperClick}\n\t\t\t\t/>\n\n\t\t\t\t{append && <div className='i-input-append'>{append}</div>}\n\t\t\t</div>\n\t\t</InputContainer>\n\t);\n}) as CompositionInput;\n\nInput.Textarea = Textarea;\nInput.Number = Number;\nInput.Range = Range;\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;CAiBA,MAAM,EACL,KACC,OAAG,QACH,OACA,MACA,QAAI,IACJ,SACA,QACA,aACA,WACA,SAAS,UACT,SACA,KACA,OACA,OACA,aACA,QACA,WACA,UACA,WACA,UACA,SACA,SACA,OACA,GAAA,cACG;;CAGJ,MAAM,CAAC,WAAW,gBAAgB,SAAE,KAAS;CAC7C,MAAM,CAAC,SAAS,cAAc,SAAI,MAAS;;EAG3C,MAAM,IAAA,EAAA,OAAc;;AAGnB,aAAA,GAAc,EAAE;;;AAIjB,IAAA,SAAM,WAAiB,UAAG,EAAA;;;AAI1B,MAAK,SAAC,cAAsB,CAAC,aAAG;AAC/B,eAAa,MAAC;IACb,MAAA,OAAc,CAAC;AACd,iBAAa,OAAE,SAAA,WAAA;AACf,WAAA;KACA;AACD;;;AAID,gBAAY,EAAA;AACZ,aAAA,EAAa;AACb,aAAW;;;AAIZ,MAAK,SAAC,WACL,QAAQ,UAAM,oBAAA,iBAAA,EAAW,CAAA,GAAA,oBAAA,oBAAA,EAAA,CAAA;IAIzB,CAAA,MAAO,QAAS,CAAA;;AAGjB,gBAAe,MAAC;IACf,CAAA,MAAA,CAAA;;EAGD;EACC,MAAG;EACH;EACA,OAAI;EACJ;EACA,WAAS,WAAA,WAAA,WAAA,OAAA;EACT,UAAU;EACV,WAAU;EACV,GAAA;EACA;;AAGD,eAAc,KAAE;AACf,aAAA,MAAiB;IACjB,CAAA,KAAA,CAAA;;CAGD,MAAM,aAAY,SAAS,cAAU,CAAA,CAAA;QAGrC,oBAAA,gBAAA;EACE;EACY;EACD;EACX,OAAA;GAAS;GAAE,GAAA;GAAS;EACpB,KAAK,WAAW;EACX;EACG;YAET,qBAAA,OAAA;GACE,WAAA,WAAA,gBAAA;KACA,WAAW,WAAa,WAAW;IAClC,sBAAsB,CAAC;IACvB,qBAAqB;IACrB,CAAC;aALJ;IAOC,WAAA,oBAAA,OAAA;KAAA,WAAA;eAAA;KAAA,CAAA;;2CAKE,qBAAA,QAAA;KAAA,WAAa;eAAb;MACC,WAAK;MAAW;MAAO;MACtB;;;KAIF,QAAA,CAAA,CAAA,aAAA;KACA,MAAM;KACN,SAAM;KACN,CAAA;;;;;IAGA;;EACG,CAAA;;;AAKR,MAAM,SAAS;AACf,MAAM,QAAQ"}
+{"version":3,"file":"input.js","sources":["../../../../packages/components/input/input.tsx"],"sourcesContent":["import { VisibilityOffRound, VisibilityRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport {\n\tChangeEvent,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\ttype KeyboardEvent,\n} from \"react\";\nimport \"../../css/input.css\";\nimport Helpericon from \"../utils/helpericon\";\nimport InputContainer from \"./container\";\nimport Number from \"./number\";\nimport Range from \"./range\";\nimport Textarea from \"./textarea\";\nimport type { CompositionInput, IInput } from \"./type\";\n\nconst Input = ((props: IInput) => {\n\tconst {\n\t\tref,\n\t\ttype = \"text\",\n\t\tlabel,\n\t\tname,\n\t\tvalue = \"\",\n\t\tprepend,\n\t\tappend,\n\t\tlabelInline,\n\t\tclassName,\n\t\tstatus = \"normal\",\n\t\tmessage,\n\t\ttip,\n\t\tclear,\n\t\twidth,\n\t\thideVisible,\n\t\tborder,\n\t\tunderline,\n\t\trequired,\n\t\tmaxLength,\n\t\tonChange,\n\t\tonEnter,\n\t\tonClear,\n\t\tstyle,\n\t\t...restProps\n\t} = props;\n\n\tconst [inputValue, setInputValue] = useState(value);\n\tconst [inputType, setInputType] = useState(type);\n\tconst [visible, setVisible] = useState(false);\n\n\tconst handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tconst v = e.target.value;\n\n\t\tsetInputValue(v);\n\t\tonChange?.(v, e);\n\t};\n\n\tconst handleKeydown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\te.code === \"Enter\" && onEnter?.(e);\n\t};\n\n\tconst handleHelperClick = () => {\n\t\tif (type === \"password\" && !hideVisible) {\n\t\t\tsetVisible((v) => {\n\t\t\t\tconst next = !v;\n\t\t\t\tsetInputType(next ? \"text\" : \"password\");\n\t\t\t\treturn next;\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\n\t\tconst v = \"\";\n\t\tsetInputValue(v);\n\t\tonChange?.(v);\n\t\tonClear?.();\n\t};\n\n\tconst HelperIcon = useMemo(() => {\n\t\tif (type === \"password\") {\n\t\t\treturn visible ? <VisibilityRound /> : <VisibilityOffRound />;\n\t\t}\n\n\t\treturn undefined;\n\t}, [type, visible]);\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [value]);\n\n\tconst inputProps = {\n\t\tref,\n\t\ttype: inputType,\n\t\tname,\n\t\tvalue: inputValue,\n\t\tmaxLength,\n\t\tclassName: classNames(\"i-input\", `i-input-${type}`),\n\t\tonChange: handleChange,\n\t\tonKeyDown: handleKeydown,\n\t\t...restProps,\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputType(type);\n\t\tsetVisible(false);\n\t}, [type]);\n\n\tconst clearable = clear && inputValue;\n\tconst showHelper = type === \"password\" && !!inputValue;\n\n\treturn (\n\t\t<InputContainer\n\t\t\tlabel={label}\n\t\t\tlabelInline={labelInline}\n\t\t\tclassName={className}\n\t\t\tstyle={{ width, ...style }}\n\t\t\ttip={message ?? tip}\n\t\t\tstatus={status}\n\t\t\trequired={required}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-input-item\", {\n\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t\"i-input-borderless\": !border,\n\t\t\t\t\t\"i-input-underline\": underline,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{prepend && <div className='i-input-prepend'>{prepend}</div>}\n\n\t\t\t\t<input {...inputProps} />\n\n\t\t\t\t{maxLength && inputValue?.length > 0 && (\n\t\t\t\t\t<span className='color-8 pr-4 font-sm'>\n\t\t\t\t\t\t{inputValue.length} / {maxLength}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive={!!clearable || showHelper}\n\t\t\t\t\ticon={HelperIcon}\n\t\t\t\t\tonClick={handleHelperClick}\n\t\t\t\t/>\n\n\t\t\t\t{append && <div className='i-input-append'>{append}</div>}\n\t\t\t</div>\n\t\t</InputContainer>\n\t);\n}) as CompositionInput;\n\nInput.Textarea = Textarea;\nInput.Number = Number;\nInput.Range = Range;\n\nexport default Input;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}