@ioca/react 1.3.86 → 1.3.88

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

@@ -1 +1 @@
-{"version":3,"file":"popconfirm.js","sources":["../../../../packages/components/popconfirm/popconfirm.tsx"],"sourcesContent":["import { InfoOutlined } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport { MouseEvent } from \"react\";\nimport Button from \"../button\";\nimport { IButton } from \"../button/type\";\nimport Flex from \"../flex\";\nimport Icon from \"../icon\";\nimport Popup from \"../popup\";\nimport \"./index.css\";\nimport { IPopconfirm } from \"./type\";\n\nconst defaultOk = {\n\tchildren: \"确定\",\n};\n\nconst defaultCancel = {\n\tchildren: \"取消\",\n\tsecondary: true,\n};\n\nconst Popconfirm = (props: IPopconfirm) => {\n\tconst {\n\t\ttrigger = \"click\",\n\t\tvisible,\n\t\ticon = <Icon icon={<InfoOutlined />} className='error' size='1.2em' />,\n\t\tcontent,\n\t\tokButtonProps,\n\t\tcancelButtonProps,\n\t\tchildren,\n\t\talign = \"end\",\n\t\tposition = \"top\",\n\t\toffset = 12,\n\t\textra,\n\t\tonOk,\n\t\tonClose,\n\t\t...restProps\n\t} = props;\n\n\tconst state = useReactive({\n\t\tloading: false,\n\t\tvisible,\n\t});\n\n\tconst ok: IButton = okButtonProps\n\t\t? Object.assign({}, defaultOk, okButtonProps)\n\t\t: defaultOk;\n\tconst cancel: IButton = cancelButtonProps\n\t\t? Object.assign({}, defaultCancel, cancelButtonProps)\n\t\t: defaultCancel;\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tstate.visible = v;\n\t\trestProps.onVisibleChange?.(v);\n\t};\n\n\tconst handleOk = async (e: MouseEvent<HTMLElement>) => {\n\t\tstate.loading = true;\n\t\tok.onClick?.(e);\n\n\t\tonOk?.()\n\t\t\t?.then(() => {\n\t\t\t\tstate.visible = false;\n\t\t\t})\n\t\t\t.finally(() => {\n\t\t\t\tstate.loading = false;\n\t\t\t});\n\t};\n\n\tconst handleCancel = async (e: MouseEvent<HTMLElement>) => {\n\t\tcancel.onClick?.(e);\n\t\tawait onClose?.();\n\t\tstate.visible = false;\n\t};\n\n\tconst popconfirmContent = (\n\t\t<div className='i-popconfirm'>\n\t\t\t<Flex gap='.5em'>\n\t\t\t\t{icon}\n\t\t\t\t<div className='i-popconfirm-content'>{content}</div>\n\t\t\t</Flex>\n\n\t\t\t<Flex\n\t\t\t\tgap={12}\n\t\t\t\tjustify='flex-end'\n\t\t\t\tclassName='mt-8 i-popconfirm-footer'\n\t\t\t>\n\t\t\t\t{cancelButtonProps !== null && (\n\t\t\t\t\t<Button {...cancel} onClick={handleCancel} />\n\t\t\t\t)}\n\t\t\t\t{extra}\n\t\t\t\t{okButtonProps !== null && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tloading={state.loading}\n\t\t\t\t\t\t{...ok}\n\t\t\t\t\t\tonClick={handleOk}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Flex>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<Popup\n\t\t\tcontent={popconfirmContent}\n\t\t\t{...restProps}\n\t\t\ttrigger={trigger}\n\t\t\tvisible={state.visible}\n\t\t\talign={align}\n\t\t\toffset={offset}\n\t\t\tposition={position}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t>\n\t\t\t{children}\n\t\t</Popup>\n\t);\n};\n\nexport default Popconfirm;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"popconfirm.js","sources":["../../../../packages/components/popconfirm/popconfirm.tsx"],"sourcesContent":["import { InfoOutlined } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport { MouseEvent } from \"react\";\nimport Button from \"../button\";\nimport { IButton } from \"../button/type\";\nimport Flex from \"../flex\";\nimport Icon from \"../icon\";\nimport Popup from \"../popup\";\nimport \"./index.css\";\nimport { IPopconfirm } from \"./type\";\n\nconst defaultOk = {\n\tchildren: \"确定\",\n};\n\nconst defaultCancel = {\n\tchildren: \"取消\",\n\tsecondary: true,\n};\n\nconst Popconfirm = (props: IPopconfirm) => {\n\tconst {\n\t\ttrigger = \"click\",\n\t\tvisible,\n\t\ticon = <Icon icon={<InfoOutlined />} className='error' size='1.2em' />,\n\t\tcontent,\n\t\tokButtonProps,\n\t\tcancelButtonProps,\n\t\tchildren,\n\t\talign = \"end\",\n\t\tposition = \"top\",\n\t\toffset = 12,\n\t\textra,\n\t\tonOk,\n\t\tonClose,\n\t\t...restProps\n\t} = props;\n\n\tconst state = useReactive({\n\t\tloading: false,\n\t\tvisible,\n\t});\n\n\tconst ok: IButton = okButtonProps\n\t\t? Object.assign({}, defaultOk, okButtonProps)\n\t\t: defaultOk;\n\tconst cancel: IButton = cancelButtonProps\n\t\t? Object.assign({}, defaultCancel, cancelButtonProps)\n\t\t: defaultCancel;\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tstate.visible = v;\n\t\trestProps.onVisibleChange?.(v);\n\t};\n\n\tconst handleOk = async (e: MouseEvent<HTMLElement>) => {\n\t\tstate.loading = true;\n\t\tok.onClick?.(e);\n\n\t\tonOk?.()\n\t\t\t?.then(() => {\n\t\t\t\tstate.visible = false;\n\t\t\t})\n\t\t\t.finally(() => {\n\t\t\t\tstate.loading = false;\n\t\t\t});\n\t};\n\n\tconst handleCancel = async (e: MouseEvent<HTMLElement>) => {\n\t\tcancel.onClick?.(e);\n\t\tawait onClose?.();\n\t\tstate.visible = false;\n\t};\n\n\tconst popconfirmContent = (\n\t\t<div className='i-popconfirm'>\n\t\t\t<Flex gap='.5em'>\n\t\t\t\t{icon}\n\t\t\t\t<div className='i-popconfirm-content'>{content}</div>\n\t\t\t</Flex>\n\n\t\t\t<Flex gap={12} justify='flex-end' className='i-popconfirm-footer'>\n\t\t\t\t{cancelButtonProps !== null && (\n\t\t\t\t\t<Button {...cancel} onClick={handleCancel} />\n\t\t\t\t)}\n\t\t\t\t{extra}\n\t\t\t\t{okButtonProps !== null && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tloading={state.loading}\n\t\t\t\t\t\t{...ok}\n\t\t\t\t\t\tonClick={handleOk}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Flex>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<Popup\n\t\t\tcontent={popconfirmContent}\n\t\t\t{...restProps}\n\t\t\ttrigger={trigger}\n\t\t\tvisible={state.visible}\n\t\t\talign={align}\n\t\t\toffset={offset}\n\t\t\tposition={position}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t>\n\t\t\t{children}\n\t\t</Popup>\n\t);\n};\n\nexport default Popconfirm;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/lib/es/components/progress/progress.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useReactive } from 'ahooks';
 import classNames from 'classnames';
-import { useRef, useMemo, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import { useMouseMove, useMouseUp } from '../../js/hooks.js';
 import Circle from './circle.js';
 import Line from './line.js';
@@ -18,12 +18,12 @@ const Progress = (props) => {
     const pageXY = vertical ? "pageY" : "pageX";
     const rectTL = vertical ? "top" : "left";
     const rectWH = vertical ? "height" : "width";
-    const toFixedValue = useMemo(() => {
+    const getFixedValue = () => {
         let value = +state.value.toFixed(precision);
         value = Math.min(100, value);
         value = Math.max(0, value);
         return value;
-    }, [state.value, precision]);
+    };
     const handleMouseDown = (e) => {
         if (!ref.current || !draggable)
             return;
@@ -57,7 +57,7 @@ const Progress = (props) => {
     const handleMouseUp = () => {
         if (!state.dragging || !draggable)
             return;
-        onChange?.(toFixedValue);
+        onChange?.(getFixedValue());
         state.dragging = false;
         onDraggingChange?.(false);
     };

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

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sources":["../../../../packages/components/progress/progress.tsx"],"sourcesContent":["import { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport \"../../css/input.css\";\nimport { useMouseMove, useMouseUp } from \"../../js/hooks\";\nimport Circle from \"./circle\";\nimport \"./index.css\";\nimport Line from \"./line\";\nimport { IProgress } from \"./type\";\n\nconst Progress = (props: IProgress) => {\n\tconst {\n\t\tvalue = 0,\n\t\tlineWidth = 8,\n\t\tcircleSize = 40,\n\t\tprecision = 0,\n\t\tstyle,\n\t\tdraggable = true,\n\t\ttype = \"line\",\n\t\tbarClass,\n\t\tvertical,\n\t\tlabel,\n\t\tlabelInline,\n\t\tclassName,\n\t\trenderCursor,\n\t\tonChange,\n\t\tonDraggingChange,\n\t} = props;\n\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst state = useReactive({\n\t\tvalue,\n\t\tdragging: false,\n\t\tsize: 0,\n\t\tstart: 0,\n\t});\n\n\tconst pageXY = vertical ? \"pageY\" : \"pageX\";\n\tconst rectTL = vertical ? \"top\" : \"left\";\n\tconst rectWH = vertical ? \"height\" : \"width\";\n\n\tconst toFixedValue = useMemo(() => {\n\t\tlet value = +state.value.toFixed(precision);\n\t\tvalue = Math.min(100, value);\n\t\tvalue = Math.max(0, value);\n\n\t\treturn value;\n\t}, [state.value, precision]);\n\n\tconst handleMouseDown = (e) => {\n\t\tif (!ref.current || !draggable) return;\n\n\t\tif (e.touches) {\n\t\t\te = e.touches[0];\n\t\t}\n\n\t\tconst rect = ref.current.getBoundingClientRect();\n\t\tconst value = ((e[pageXY] - rect[rectTL]) * 100) / rect[rectWH];\n\n\t\tObject.assign(state, {\n\t\t\tvalue: vertical ? 100 - value : value,\n\t\t\tsize: rect[rectWH],\n\t\t\tstart: rect[rectTL],\n\t\t\tdragging: true,\n\t\t});\n\t\tonDraggingChange?.(true);\n\t};\n\n\tconst handleMouseMove = (e) => {\n\t\tif (!state.dragging || !draggable) return;\n\t\te.preventDefault();\n\n\t\tif (e.touches) {\n\t\t\te = e.touches[0];\n\t\t}\n\n\t\tconst { start, size } = state;\n\t\tconst offset = e[pageXY] - start;\n\n\t\tif (offset < 0 || offset > size) return;\n\n\t\tconst value = ((e[pageXY] - start) * 100) / size;\n\t\tstate.value = vertical ? 100 - value : value;\n\t};\n\n\tconst handleMouseUp = () => {\n\t\tif (!state.dragging || !draggable) return;\n\n\t\tonChange?.(toFixedValue);\n\t\tstate.dragging = false;\n\t\tonDraggingChange?.(false);\n\t};\n\n\tuseMouseMove(handleMouseMove);\n\tuseMouseUp(handleMouseUp);\n\n\tuseEffect(() => {\n\t\tif (value > 100) {\n\t\t\tstate.value = 100;\n\t\t\treturn;\n\t\t}\n\n\t\tif (value < 0) {\n\t\t\tstate.value = 0;\n\t\t\treturn;\n\t\t}\n\n\t\tstate.value = value;\n\t}, [value]);\n\n\treturn (\n\t\t<div\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 && <span className='i-input-label-text'>{label}</span>}\n\n\t\t\t{type === \"line\" && (\n\t\t\t\t<Line\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvertical={vertical}\n\t\t\t\t\tlineWidth={lineWidth}\n\t\t\t\t\tbarClass={barClass}\n\t\t\t\t\tdragging={state.dragging}\n\t\t\t\t\tvalue={state.value}\n\t\t\t\t\trenderCursor={renderCursor}\n\t\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\t\tonTouchStart={handleMouseDown}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{type === \"circle\" && (\n\t\t\t\t<Circle\n\t\t\t\t\tvalue={state.value}\n\t\t\t\t\tcircleSize={circleSize}\n\t\t\t\t\tlineWidth={lineWidth}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Progress;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAUA,MAAM,QAAQ,GAAG,CAAC,KAAgB,KAAI;IACrC,MAAM,EACL,KAAK,GAAG,CAAC,EACT,SAAS,GAAG,CAAC,EACb,UAAU,GAAG,EAAE,EACf,SAAS,GAAG,CAAC,EACb,KAAK,EACL,SAAS,GAAG,IAAI,EAChB,IAAI,GAAG,MAAM,EACb,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,gBAAgB,GAChB,GAAG,KAAK;AAET,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC;IACxC,MAAM,KAAK,GAAG,WAAW,CAAC;QACzB,KAAK;AACL,QAAA,QAAQ,EAAE,KAAK;AACf,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACR,KAAA,CAAC;IAEF,MAAM,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO;IAC3C,MAAM,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM;IACxC,MAAM,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO;AAE5C,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,MAAK;QACjC,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;QAC3C,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC;QAC5B,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC;AAE1B,QAAA,OAAO,KAAK;KACZ,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;AAE5B,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,KAAI;AAC7B,QAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,SAAS;YAAE;AAEhC,QAAA,IAAI,CAAC,CAAC,OAAO,EAAE;AACd,YAAA,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;;QAGjB,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE;QAChD,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC;AAE/D,QAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;YACpB,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK;AACrC,YAAA,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC;AAClB,YAAA,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC;AACnB,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA,CAAC;AACF,QAAA,gBAAgB,GAAG,IAAI,CAAC;AACzB,KAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,KAAI;AAC7B,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,SAAS;YAAE;QACnC,CAAC,CAAC,cAAc,EAAE;AAElB,QAAA,IAAI,CAAC,CAAC,OAAO,EAAE;AACd,YAAA,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;;AAGjB,QAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK;QAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,KAAK;AAEhC,QAAA,IAAI,MAAM,GAAG,CAAC,IAAI,MAAM,GAAG,IAAI;YAAE;AAEjC,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,KAAK,IAAI,GAAG,IAAI,IAAI;AAChD,QAAA,KAAK,CAAC,KAAK,GAAG,QAAQ,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK;AAC7C,KAAC;IAED,MAAM,aAAa,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,SAAS;YAAE;AAEnC,QAAA,QAAQ,GAAG,YAAY,CAAC;AACxB,QAAA,KAAK,CAAC,QAAQ,GAAG,KAAK;AACtB,QAAA,gBAAgB,GAAG,KAAK,CAAC;AAC1B,KAAC;IAED,YAAY,CAAC,eAAe,CAAC;IAC7B,UAAU,CAAC,aAAa,CAAC;IAEzB,SAAS,CAAC,MAAK;AACd,QAAA,IAAI,KAAK,GAAG,GAAG,EAAE;AAChB,YAAA,KAAK,CAAC,KAAK,GAAG,GAAG;YACjB;;AAGD,QAAA,IAAI,KAAK,GAAG,CAAC,EAAE;AACd,YAAA,KAAK,CAAC,KAAK,GAAG,CAAC;YACf;;AAGD,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCA,cACC,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,EAAE;AACjD,YAAA,gBAAgB,EAAE,WAAW;AAC7B,SAAA,CAAC,EACF,KAAK,EAAE,KAAK,EAEX,QAAA,EAAA,CAAA,KAAK,IAAIC,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,EAAQ,CAAA,EAE5D,IAAI,KAAK,MAAM,KACfA,GAAA,CAAC,IAAI,EACJ,EAAA,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,eAAe,GAC5B,CACF,EAEA,IAAI,KAAK,QAAQ,KACjBA,GAAA,CAAC,MAAM,EACN,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,GACnB,CACF,CAAA,EAAA,CACI;AAER;;;;"}
+{"version":3,"file":"progress.js","sources":["../../../../packages/components/progress/progress.tsx"],"sourcesContent":["import { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { useEffect, useRef } from \"react\";\nimport \"../../css/input.css\";\nimport { useMouseMove, useMouseUp } from \"../../js/hooks\";\nimport Circle from \"./circle\";\nimport \"./index.css\";\nimport Line from \"./line\";\nimport { IProgress } from \"./type\";\n\nconst Progress = (props: IProgress) => {\n\tconst {\n\t\tvalue = 0,\n\t\tlineWidth = 8,\n\t\tcircleSize = 40,\n\t\tprecision = 0,\n\t\tstyle,\n\t\tdraggable = true,\n\t\ttype = \"line\",\n\t\tbarClass,\n\t\tvertical,\n\t\tlabel,\n\t\tlabelInline,\n\t\tclassName,\n\t\trenderCursor,\n\t\tonChange,\n\t\tonDraggingChange,\n\t} = props;\n\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst state = useReactive({\n\t\tvalue,\n\t\tdragging: false,\n\t\tsize: 0,\n\t\tstart: 0,\n\t});\n\n\tconst pageXY = vertical ? \"pageY\" : \"pageX\";\n\tconst rectTL = vertical ? \"top\" : \"left\";\n\tconst rectWH = vertical ? \"height\" : \"width\";\n\n\tconst getFixedValue = () => {\n\t\tlet value = +state.value.toFixed(precision);\n\t\tvalue = Math.min(100, value);\n\t\tvalue = Math.max(0, value);\n\n\t\treturn value;\n\t};\n\n\tconst handleMouseDown = (e) => {\n\t\tif (!ref.current || !draggable) return;\n\n\t\tif (e.touches) {\n\t\t\te = e.touches[0];\n\t\t}\n\n\t\tconst rect = ref.current.getBoundingClientRect();\n\t\tconst value = ((e[pageXY] - rect[rectTL]) * 100) / rect[rectWH];\n\n\t\tObject.assign(state, {\n\t\t\tvalue: vertical ? 100 - value : value,\n\t\t\tsize: rect[rectWH],\n\t\t\tstart: rect[rectTL],\n\t\t\tdragging: true,\n\t\t});\n\t\tonDraggingChange?.(true);\n\t};\n\n\tconst handleMouseMove = (e) => {\n\t\tif (!state.dragging || !draggable) return;\n\t\te.preventDefault();\n\n\t\tif (e.touches) {\n\t\t\te = e.touches[0];\n\t\t}\n\n\t\tconst { start, size } = state;\n\t\tconst offset = e[pageXY] - start;\n\n\t\tif (offset < 0 || offset > size) return;\n\n\t\tconst value = ((e[pageXY] - start) * 100) / size;\n\t\tstate.value = vertical ? 100 - value : value;\n\t};\n\n\tconst handleMouseUp = () => {\n\t\tif (!state.dragging || !draggable) return;\n\n\t\tonChange?.(getFixedValue());\n\t\tstate.dragging = false;\n\t\tonDraggingChange?.(false);\n\t};\n\n\tuseMouseMove(handleMouseMove);\n\tuseMouseUp(handleMouseUp);\n\n\tuseEffect(() => {\n\t\tif (value > 100) {\n\t\t\tstate.value = 100;\n\t\t\treturn;\n\t\t}\n\n\t\tif (value < 0) {\n\t\t\tstate.value = 0;\n\t\t\treturn;\n\t\t}\n\n\t\tstate.value = value;\n\t}, [value]);\n\n\treturn (\n\t\t<div\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 && <span className='i-input-label-text'>{label}</span>}\n\n\t\t\t{type === \"line\" && (\n\t\t\t\t<Line\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvertical={vertical}\n\t\t\t\t\tlineWidth={lineWidth}\n\t\t\t\t\tbarClass={barClass}\n\t\t\t\t\tdragging={state.dragging}\n\t\t\t\t\tvalue={state.value}\n\t\t\t\t\trenderCursor={renderCursor}\n\t\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\t\tonTouchStart={handleMouseDown}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{type === \"circle\" && (\n\t\t\t\t<Circle\n\t\t\t\t\tvalue={state.value}\n\t\t\t\t\tcircleSize={circleSize}\n\t\t\t\t\tlineWidth={lineWidth}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Progress;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/lib/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle, pick, title } from 'radash';
-import { useMemo, Children, cloneElement, useEffect, createElement, isValidElement, useState, useRef, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, createContext, useContext } from 'react';
+import { useMemo, Children, cloneElement, useEffect, createElement, isValidElement, useState, useRef, Fragment as Fragment$1, useTransition, useLayoutEffect, useImperativeHandle, createContext, useContext } from 'react';
 import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, RedoRound, UndoRound, ClearAllRound, PauseRound, PlayArrowRound, StopRound, VolumeOffRound, VolumeDownRound, FullscreenExitRound, FullscreenRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, HideImageTwotone, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
 import { useReactive, useCreation, useSize } from 'ahooks';
 import { createRoot } from 'react-dom/client';
@@ -71,6 +71,54 @@ const Loading = (props) => {
                 }, children: jsx("circle", { cx: '12', cy: '12', r: '9.5', fill: 'none', strokeWidth: '3', strokeLinecap: 'round', strokeDasharray: 40, strokeDashoffset: 0 }) })), text] }));
 };
 
+const defaultOk$1 = {
+    children: "确定",
+    className: "bg-error",
+};
+const defaultCancel$1 = {
+    children: "取消",
+    secondary: true,
+};
+function Confirm(props) {
+    const { ref, okButtonProps, cancelButtonProps, onOk, onCancel, onClick, ...restProps } = props;
+    const state = useReactive({
+        active: false,
+        loading: false,
+    });
+    const ok = okButtonProps
+        ? Object.assign({}, defaultOk$1, okButtonProps)
+        : defaultOk$1;
+    const cancel = cancelButtonProps
+        ? Object.assign({}, defaultCancel$1, cancelButtonProps)
+        : defaultCancel$1;
+    const handleClick = (e) => {
+        onClick?.(e);
+        state.active = true;
+    };
+    const hanldeOk = async () => {
+        if (state.loading)
+            return;
+        state.loading = true;
+        try {
+            const res = await onOk?.();
+            if (res !== false) {
+                state.active = false;
+            }
+        }
+        finally {
+            state.loading = false;
+        }
+    };
+    const handleCancel = () => {
+        onCancel?.();
+        state.active = false;
+    };
+    if (!state.active) {
+        return jsx(Button, { ref: ref, ...restProps, onClick: handleClick });
+    }
+    return (jsxs(Button.Group, { children: [jsx(Button, { ...ok, loading: state.loading, onClick: hanldeOk }), jsx(Button, { ...cancel, disabled: state.loading, onClick: handleCancel })] }));
+}
+
 function Group(props) {
     const { children, vertical, buttonProps, className, style } = props;
     const nodes = useMemo(() => {
@@ -173,6 +221,7 @@ const Button = (props) => {
     }, childNodes);
 };
 Button.Toggle = Toggle;
+Button.Confirm = Confirm;
 Button.Group = Group;
 
 const Icon = (props) => {
@@ -1048,38 +1097,42 @@ function Drawer(props) {
     const state = useReactive({
         show: visible,
         active: visible,
-        init: false,
     });
-    useEffect(() => {
-        visible ? handleShow() : handleHide();
-    }, [visible]);
-    const handleShow = () => {
-        if (!toggable.current)
+    const [isPending, startTransition] = useTransition();
+    const handleHide = () => {
+        if (!toggable.current || isPending)
             return;
-        state.show = true;
-        onVisibleChange?.(true);
         toggable.current = false;
-        setTimeout(() => {
-            state.active = true;
-            toggable.current = true;
-            state.init = true;
-        }, 24);
+        startTransition(() => {
+            state.active = false;
+            setTimeout(() => {
+                if (!keepDOM) {
+                    state.show = false;
+                }
+                onVisibleChange?.(false);
+                toggable.current = true;
+                onClose?.();
+            }, 240);
+        });
     };
-    const handleHide = () => {
-        if (!toggable.current)
+    const handleShow = () => {
+        if (!toggable.current || isPending)
             return;
+        state.show = true;
+        onVisibleChange?.(true);
         toggable.current = false;
-        state.active = false;
-        setTimeout(() => {
-            if (!keepDOM) {
-                state.show = false;
-            }
-            onVisibleChange?.(false);
-            toggable.current = true;
-            onClose?.();
-        }, 240);
+        startTransition(() => {
+            // 确保 DOM 已经挂载
+            requestAnimationFrame(() => {
+                state.active = true;
+                toggable.current = true;
+            });
+        });
     };
-    const handleBackdropClick = function () {
+    useEffect(() => {
+        visible ? handleShow() : handleHide();
+    }, [visible]);
+    const handleBackdropClick = () => {
         backdropClosable && handleHide();
     };
     useKeydown((e) => {
@@ -1089,9 +1142,11 @@ function Drawer(props) {
     }, {
         disabled: disabledEsc,
     });
-    return createPortal(state.show && (jsx("div", { className: classNames("i-backdrop-drawer", className, {
+    if (!state.show)
+        return null;
+    return createPortal(jsx("div", { className: classNames("i-backdrop-drawer", className, {
             "i-active": state.active,
-        }), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [jsxs("header", { className: 'i-drawer-header', children: [header, jsx(Helpericon, { active: !hideCloseButton, className: 'i-drawer-close', onClick: handleHide })] }), jsx("div", { className: 'i-drawer-content', children: children }), jsx("div", { className: 'i-drawer-footer', children: footer })] }) })), document?.body ?? null);
+        }), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [header && (jsxs("header", { className: 'i-drawer-header', children: [header, !hideCloseButton && (jsx(Helpericon, { className: 'i-drawer-close', onClick: handleHide }))] })), jsx("div", { className: 'i-drawer-content', children: children }), footer && jsx("div", { className: 'i-drawer-footer', children: footer })] }) }), document.body);
 }
 
 const Item$4 = (props) => {
@@ -1382,8 +1437,11 @@ const Item$3 = (props) => {
 };
 
 const Dropdown = (props) => {
-    const { width, content, children, ...restProps } = props;
-    return (jsx(Popup, { trigger: 'click', position: 'bottom', touchable: true, content: jsx(List$1, { className: 'i-dropdown-content', style: { minWidth: width }, children: content }), ...restProps, children: children }));
+    const { visible, width, content, children, ...restProps } = props;
+    const [active, setActive] = useState(visible);
+    return (jsx(Popup, { trigger: 'click', position: 'bottom', content: jsx(List$1, { className: 'i-dropdown-content', style: { minWidth: width }, children: typeof content === "function"
+                ? content(() => setActive(false))
+                : content }), ...restProps, touchable: true, visible: active, onVisibleChange: setActive, children: children }));
 };
 Dropdown.Item = Item$3;
 
@@ -1688,7 +1746,10 @@ class IFormInstance {
                 Object.assign(rule, o);
             }
             const isValid = rule.validator?.(data[field], this);
-            if (!isValid) {
+            if (typeof isValid === "string") {
+                rule.message = isValid;
+            }
+            if (isValid !== true) {
                 PubSub.publish(`${id}:invalid:${field}`, {
                     message: rule.message,
                     status: "error",
@@ -1721,7 +1782,10 @@ class IFormInstance {
                 Object.assign(rule, o);
             }
             const isValid = rule.validator?.(data[name], this);
-            if (!isValid) {
+            if (typeof isValid === "string") {
+                rule.message = isValid;
+            }
+            if (isValid !== true) {
                 PubSub.publish(`${id}:invalid:${name}`, {
                     message: rule.message,
                     status: "error",
@@ -1874,17 +1938,19 @@ function Modal(props) {
     const [show, setShow] = useState(visible);
     const [active, setActive] = useState(false);
     const [bounced, setBounced] = useState(false);
+    const [client, setClient] = useState(false);
     const toggable = useRef(true);
     const handleShow = async () => {
         if (!toggable.current)
             return;
         (!keepDOM || !show) && setShow(true);
         toggable.current = false;
-        setTimeout(() => {
+        const timer = setTimeout(() => {
             setActive(true);
             onVisibleChange?.(true);
             toggable.current = true;
         }, 24);
+        return () => clearTimeout(timer);
     };
     const handleHide = () => {
         if (!toggable.current)
@@ -1892,21 +1958,22 @@ function Modal(props) {
         toggable.current = false;
         if (!closable) {
             setBounced(true);
-            setTimeout(() => {
+            const timer = setTimeout(() => {
                 setBounced(false);
                 toggable.current = true;
             }, 400);
-            return;
+            return () => clearTimeout(timer);
         }
         setActive(false);
-        setTimeout(() => {
+        const timer = setTimeout(() => {
             !keepDOM && setShow(false);
             toggable.current = true;
             onVisibleChange?.(false);
             onClose?.();
         }, 240);
+        return () => clearTimeout(timer);
     };
-    const handleBackdropClick = function () {
+    const handleBackdropClick = () => {
         backdropClosable && handleHide();
     };
     useKeydown((e) => {
@@ -1917,19 +1984,22 @@ function Modal(props) {
     useEffect(() => {
         visible ? handleShow() : handleHide();
     }, [visible]);
+    useEffect(() => {
+        setClient(true);
+    }, []);
     const handleClick = () => {
         if (typeof document === "undefined")
             return;
         document.documentElement.click();
     };
-    if (!show)
+    if (!show || !client)
         return null;
     return createPortal(jsx("div", { className: classNames("i-modal-container", {
             "i-modal-backdrop": !hideBackdrop,
             "i-modal-customized": customized,
             "i-modal-active": active,
             fixed,
-        }, className), style: style, onClick: handleBackdropClick, children: jsxs("div", { className: classNames("i-modal", {
+        }, className), style: style, onClick: handleBackdropClick, "aria-modal": 'true', "aria-hidden": !active, children: jsxs("div", { className: classNames("i-modal", {
                 bounced,
                 shadow: !hideShadow,
             }), style: {
@@ -1939,7 +2009,7 @@ function Modal(props) {
                 e.stopPropagation();
                 handleClick();
                 onClick?.(e);
-            }, ...restProps, children: [customized && children, !customized && (jsx(Content$1, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }), document?.body ?? null);
+            }, role: 'dialog', "aria-labelledby": title ? "modal-title" : undefined, ...restProps, children: [customized && children, !customized && (jsx(Content$1, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }), document?.body ?? null);
 }
 Modal.useModal = useModal;
 
@@ -1984,7 +2054,7 @@ function HighLight(props) {
     return jsx(Text, { ...restProps, children: content });
 }
 
-function Number$2(props) {
+function Number$3(props) {
     const { count, to, decimal, thousand = ",", duration = 2400, easing, ...restProps } = props;
     const [n, setN] = useState(count);
     const number = useMemo(() => {
@@ -2004,7 +2074,7 @@ function Number$2(props) {
     return jsx(Text, { ...restProps, children: number });
 }
 
-function Number$1(props) {
+function Number$2(props) {
     const { seconds, zero, units, ...restProps } = props;
     const text = useMemo(() => {
         if (seconds === undefined)
@@ -2038,8 +2108,8 @@ const Text = (props) => {
             "i-text-gradient-wave": wave,
         }), children: children }));
 };
-Text.Number = Number$2;
-Text.Time = Number$1;
+Text.Number = Number$3;
+Text.Time = Number$2;
 Text.HighLight = HighLight;
 
 function Circle(props) {
@@ -2070,12 +2140,12 @@ const Progress = (props) => {
     const pageXY = vertical ? "pageY" : "pageX";
     const rectTL = vertical ? "top" : "left";
     const rectWH = vertical ? "height" : "width";
-    const toFixedValue = useMemo(() => {
+    const getFixedValue = () => {
         let value = +state.value.toFixed(precision);
         value = Math.min(100, value);
         value = Math.max(0, value);
         return value;
-    }, [state.value, precision]);
+    };
     const handleMouseDown = (e) => {
         if (!ref.current || !draggable)
             return;
@@ -2109,7 +2179,7 @@ const Progress = (props) => {
     const handleMouseUp = () => {
         if (!state.dragging || !draggable)
             return;
-        onChange?.(toFixedValue);
+        onChange?.(getFixedValue());
         state.dragging = false;
         onDraggingChange?.(false);
     };
@@ -2562,8 +2632,8 @@ function InputContainer(props) {
                 }), children: tip }))] }));
 }
 
-const Number = (props) => {
-    const { ref, label, name, value = props.initValue ?? "", initValue, labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border, prepend, disabled, message, tip, hideControl, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
+const Number$1 = (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, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
     const state = useReactive({
         value,
     });
@@ -2607,7 +2677,7 @@ const Number = (props) => {
 };
 
 const Range = (props) => {
-    const { label, name, value = props.initValue ?? "", initValue, 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 { 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 state = useReactive({
         value,
     });
@@ -2642,9 +2712,7 @@ const Range = (props) => {
         e?.preventDefault();
         e?.stopPropagation();
         const range = state.value ? state.value : [];
-        const v = range[0];
-        range[0] = range[1];
-        range[1] = v;
+        [range[0], range[1]] = [range[1], range[0]];
         state.value = range;
         onChange?.(range);
     };
@@ -2657,14 +2725,15 @@ const Range = (props) => {
         ...restProps,
     };
     const handleBlur = () => {
+        if (!autoSwitch)
+            return;
         const range = Array.isArray(state.value) ? state.value : [];
         if (range.length < 2)
             return;
-        const l = +range[0];
-        const r = +range[1];
-        if (l <= r)
-            return;
-        handleSwitch();
+        const [left, right] = range.map(Number);
+        if (left > right) {
+            handleSwitch();
+        }
     };
     return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
@@ -2673,7 +2742,7 @@ const Range = (props) => {
 };
 
 const Textarea = (props) => {
-    const { ref, label, name, value = props.initValue, initValue, labelInline, className, status = "normal", message, tip, autoSize, border, width, style, onChange, onEnter, ...restProps } = props;
+    const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, onChange, onEnter, ...restProps } = props;
     const state = useReactive({
         value,
     });
@@ -2712,7 +2781,7 @@ const Textarea = (props) => {
 };
 
 const Input = ((props) => {
-    const { ref, type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border, required, maxLength, onChange, onEnter, style, ...restProps } = 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, style, ...restProps } = props;
     const state = useReactive({
         value,
         type,
@@ -2762,10 +2831,11 @@ const Input = ((props) => {
     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 && state.value?.length > 0 && (jsxs("span", { className: 'color-8 pr-4 font-sm', children: [state.value.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.Number = Number$1;
 Input.Range = Range;
 
 const AlignMap = {
@@ -3512,7 +3582,7 @@ const Popconfirm = (props) => {
         await onClose?.();
         state.visible = false;
     };
-    const popconfirmContent = (jsxs("div", { className: 'i-popconfirm', children: [jsxs(Flex, { gap: '.5em', children: [icon, jsx("div", { className: 'i-popconfirm-content', children: content })] }), jsxs(Flex, { gap: 12, justify: 'flex-end', className: 'mt-8 i-popconfirm-footer', children: [cancelButtonProps !== null && (jsx(Button, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsx(Button, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
+    const popconfirmContent = (jsxs("div", { className: 'i-popconfirm', children: [jsxs(Flex, { gap: '.5em', children: [icon, jsx("div", { className: 'i-popconfirm-content', children: content })] }), jsxs(Flex, { gap: 12, justify: 'flex-end', className: 'i-popconfirm-footer', children: [cancelButtonProps !== null && (jsx(Button, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsx(Button, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
     return (jsx(Popup, { content: popconfirmContent, ...restProps, trigger: trigger, visible: state.visible, align: align, offset: offset, position: position, onVisibleChange: handleVisibleChange, children: children }));
 };
 

package/lib/types/components/button/confirm.d.ts

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

package/lib/types/components/button/type.d.ts

@@ -1,5 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode, CSSProperties, RefObject } from 'react';
 import { LinkProps } from 'react-router';
+import Confirm from './confirm.js';
 import Group from './group.js';
 import Toggle from './toggle.js';
 
@@ -29,6 +30,12 @@ interface IButtonToggle extends IButton {
     toggable?: () => boolean | Promise<boolean>;
     onToggle?: (active: boolean) => void;
 }
+interface IButtonConfirm extends IButton {
+    okButtonProps?: IButton;
+    cancelButtonProps?: IButton;
+    onOk?: () => void | boolean | Promise<void | boolean>;
+    onCancel?: () => void;
+}
 interface IButtonGroup {
     children?: ReactNode;
     vertical?: boolean;
@@ -39,6 +46,7 @@ interface IButtonGroup {
 interface CompositionButton extends ForwardRefExoticComponent<IButton & RefAttributes<HTMLElement>> {
     Toggle: typeof Toggle;
     Group: typeof Group;
+    Confirm: typeof Confirm;
 }
 
-export type { CompositionButton, IButton, IButtonGroup, IButtonToggle };
+export type { CompositionButton, IButton, IButtonConfirm, IButtonGroup, IButtonToggle };

package/lib/types/components/dropdown/type.d.ts

@@ -2,8 +2,9 @@ import { ReactNode } from 'react';
 import { IListItem } from '../list/type.js';
 import { IPopup } from '../popup/type.js';
 
-interface IDropdown extends IPopup {
+interface IDropdown extends Omit<IPopup, "content"> {
     width?: string | number;
+    content?: ReactNode | ((close: () => void) => ReactNode);
 }
 interface IDropItem extends IListItem {
     more?: ReactNode;

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

@@ -1,7 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { IFormInstance } from './useForm.js';
 
-type TValidator = (value: any, form: IFormInstance) => boolean;
+type TValidator = (value: any, form: IFormInstance) => boolean | string;
 type TRule = {
     validator: TValidator;
     message?: string;

package/lib/types/type/index.d.ts

@@ -15,10 +15,10 @@ interface BaseInput extends TValidate {
     label?: ReactNode;
     ref?: RefObject<HTMLInputElement | null>;
     value?: any;
-    initValue?: any;
     labelInline?: boolean;
     clear?: boolean;
     border?: boolean;
+    underline?: boolean;
     tip?: ReactNode;
     onChange?: (value: any, e?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onEnter?: (e: KeyboardEvent) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ioca/react",
-	"version": "1.3.86",
+	"version": "1.3.88",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",