@para-ui/core 4.0.87 → 4.0.88

package/Checkbox/index.d.ts

@@ -37,6 +37,7 @@ export interface CheckboxProps {
         type?: string;
         value?: any;
         checked?: any;
+        readOnly?: boolean;
         [name: string]: any;
     };
     /** 改变时间 */

package/Checkbox/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import Label from '../Label/index.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { Tooltip } from '../Tooltip/index.js';
@@ -29,27 +29,48 @@ const Checkbox = props => {
     style
   } = props;
   const [checkedCom, setCheckedCom] = useState(false); // 复选框状态
+  const inputRef = useRef(null);
   useEffect(() => {
     if (props.defaultChecked !== undefined) setCheckedCom(props.defaultChecked);
   }, []);
   useEffect(() => {
     if (props.checked !== undefined) setCheckedCom(props.checked);
   }, [props.checked]);
-  // 点击选择
-  const clickCheck = e => {
-    e.preventDefault();
+  // 半选态只有 class,没有原生属性,需要通过 ref 同步 input.indeterminate
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  // 原生 change 事件:浏览器已经完成真实的 checked 切换,e.target.checked 是准确的新值。
+  // 之前挂在外层 label 上、靠 e.preventDefault() 拦截原生切换再手动置反的写法,
+  // 在真实浏览器里会和原生「取消激活」时序打架,导致原生 checked 与组件状态各算各的、彼此不同步;
+  // 交给 input 自己的 onChange 处理不存在这个问题。
+  const handleChange = e => {
     if (disabled) return;
     if (indeterminate) {
-      // 不可受控组件
+      // 半选态点击后固定进入全选,不看这次原生切换的结果
       if (props.checked === undefined) setCheckedCom(true);
       onChange && onChange(e, true);
       return;
     }
+    const next = e.target.checked;
     // 不可受控组件
-    if (props.checked === undefined) setCheckedCom(!checkedCom);
-    e.target.checked = !checkedCom;
-    e.target.value = !checkedCom;
-    onChange && onChange(e, !checkedCom);
+    if (props.checked === undefined) setCheckedCom(next);
+    onChange && onChange(e, next);
+  };
+  // <Label> 内部渲染的标题/提示文字本身也是一个 <label> 标签(嵌套 label,非法但既有结构不改)。
+  // 原生「点击 label 转发到关联控件」的规则里,点击目标本身若是 label 元素,只有离它最近的
+  // 祖先 label 会尝试转发,而这层内层 label 没有关联的表单控件,到此为止,不会继续冒泡去找外层
+  // label——点标题文字因此不会触发任何变化。这里手动补一次 input.click():它和用户真实点击走的
+  // 是完全相同的原生激活流程(不是 preventDefault + 手动置反),只是 isTrusted 为 false。
+  const handleLabelClick = e => {
+    var _a;
+    if (disabled) return;
+    const target = e.target;
+    if (target === inputRef.current) return; // 点在 input 本身上,原生行为已经处理
+    const nestedLabel = target.closest('label');
+    if (nestedLabel && nestedLabel !== e.currentTarget) {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }
   };
   // 处理class
   const handClass = () => {
@@ -87,15 +108,19 @@ const Checkbox = props => {
   const contentRender = () => {
     return jsxs("label", Object.assign({
       className: handClass(),
-      onClick: clickCheck,
-      style: handStyle()
+      style: handStyle(),
+      onClick: handleLabelClick
     }, {
       children: [jsxs("span", Object.assign({
         className: "checkbox-box"
       }, {
         children: [jsx("input", Object.assign({
           type: "checkbox",
-          value: checkedCom
+          ref: inputRef,
+          checked: checkedCom,
+          disabled: disabled,
+          onChange: handleChange,
+          "aria-checked": indeterminate ? 'mixed' : checkedCom
         }, props.inputProps)), jsx("span", {
           className: "checkbox-box-inner"
         })]

package/ComboSelect/index.js

@@ -6,7 +6,7 @@ import SearchIcon from '@para-ui/icons/Search';
 import Close from '@para-ui/icons/Close';
 import CloseCircleF from '@para-ui/icons/CloseCircleF';
 import Table from '../Table/index.js';
-import { T as Tree } from '../_verture/index-dfb6ceb9.js';
+import { T as Tree } from '../_verture/index-62845506.js';
 import { B as Button } from '../_verture/index-98ae8a30.js';
 import { D as Dropdown } from '../_verture/index-bde7aabe.js';
 import { Popover } from '../Popover/index.js';
@@ -24,8 +24,6 @@ import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { Search } from '../Search/index.js';
 import LoadingOutlined from '@para-ui/icons/LoadingF';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/defineProperty-f0e15205.js';
-import '../_verture/slicedToArray-61604a6c.js';
 import '../Checkbox/index.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
@@ -59,6 +57,8 @@ import '@para-ui/icons/DoubleRight';
 import '../ScrollBar/index.js';
 import '../_verture/useResizeObserver-edda059a.js';
 import '../_verture/toConsumableArray-599cd94a.js';
+import '../_verture/slicedToArray-61604a6c.js';
+import '../_verture/defineProperty-f0e15205.js';
 import '../_verture/index-8ac46bd9.js';
 import '../_verture/typeof-6ec38efd.js';
 import 'rc-tree';

package/DynamicMultiBox/index.js

@@ -53,8 +53,6 @@ import '@para-ui/icons/Up';
 import '../MultiBox/index.js';
 import '@para-ui/icons/Internet';
 import '../Table/index.js';
-import '../_verture/defineProperty-f0e15205.js';
-import '../_verture/slicedToArray-61604a6c.js';
 import '../_verture/index-98ae8a30.js';
 import '@para-ui/icons/CheckCircleF';
 import '@para-ui/icons/WarningCircle';
@@ -74,8 +72,10 @@ import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/DoubleRight';
 import '../ScrollBar/index.js';
 import '../_verture/useResizeObserver-edda059a.js';
-import '../_verture/index-dfb6ceb9.js';
+import '../_verture/index-62845506.js';
 import '../_verture/toConsumableArray-599cd94a.js';
+import '../_verture/slicedToArray-61604a6c.js';
+import '../_verture/defineProperty-f0e15205.js';
 import '../_verture/index-8ac46bd9.js';
 import '../_verture/typeof-6ec38efd.js';
 import 'rc-tree';

package/Form/index.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { DeepClone } from '@paraview/lib';
 import React__default from 'react';
-import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-0fafedf4.js';
+import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-32a8f7db.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
 import '../TextField/index.js';
@@ -56,7 +56,6 @@ import 'rc-input-number';
 import '@para-ui/icons/Up';
 import '../ComboSelect/index.js';
 import '../Table/index.js';
-import '../_verture/defineProperty-f0e15205.js';
 import '@para-ui/icons/ScreenF';
 import '@para-ui/icons/UpTriangleF';
 import '@para-ui/icons/DownTriangleF';
@@ -74,8 +73,9 @@ import '@para-ui/icons/Right';
 import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/DoubleRight';
 import '../ScrollBar/index.js';
-import '../_verture/index-dfb6ceb9.js';
+import '../_verture/index-62845506.js';
 import '../_verture/toConsumableArray-599cd94a.js';
+import '../_verture/defineProperty-f0e15205.js';
 import '../_verture/index-8ac46bd9.js';
 import '../_verture/typeof-6ec38efd.js';
 import 'rc-tree';

package/FormItem/index.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'react';
-export { F as default } from '../_verture/index-0fafedf4.js';
+export { F as default } from '../_verture/index-32a8f7db.js';
 import 'clsx';
 import '../Label/index.js';
 import '../_verture/constant-5317fc89.js';
@@ -56,7 +56,6 @@ import 'rc-input-number';
 import '@para-ui/icons/Up';
 import '../ComboSelect/index.js';
 import '../Table/index.js';
-import '../_verture/defineProperty-f0e15205.js';
 import '@para-ui/icons/ScreenF';
 import '@para-ui/icons/UpTriangleF';
 import '@para-ui/icons/DownTriangleF';
@@ -74,8 +73,9 @@ import '@para-ui/icons/Right';
 import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/DoubleRight';
 import '../ScrollBar/index.js';
-import '../_verture/index-dfb6ceb9.js';
+import '../_verture/index-62845506.js';
 import '../_verture/toConsumableArray-599cd94a.js';
+import '../_verture/defineProperty-f0e15205.js';
 import '../_verture/index-8ac46bd9.js';
 import '../_verture/typeof-6ec38efd.js';
 import 'rc-tree';

package/OperateBtn/index.js

@@ -36,8 +36,8 @@ var zh = {
 };
 
 var localeJson = {
-  zh,
-  en
+  zh: zh,
+  en: en
 };
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/4/13 10:48 AM\n* @description 表格操作按钮\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-operate-btn {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-operate-btn > .operate-btn-line {\n  display: inline-block;\n  width: 1px;\n  background-color: rgb(213, 224, 250);\n  margin: 0 10px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-small > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-small button svg {\n  font-size: 18px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-medium > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-medium button svg {\n  font-size: 18px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-large > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-large button svg {\n  font-size: 18px;\n}\n\n.paraui-v4-operate-btn-popover .operate-btn-list {\n  padding: 4px 0;\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item {\n  padding: 0 10px;\n  max-width: 120px;\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n  line-height: 30px;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item-disabled {\n  cursor: not-allowed;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item-disabled:hover {\n  background-color: white;\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item-danger {\n  color: rgb(244, 66, 66);\n}";

package/README.md

@@ -1,3 +1,10 @@
+## 🎉 para-ui/core@4.0.88 发布
+
+🔧【Bugfix】
+
+-   【复选框-Checkbox】修复点击后原生 checked 恒为 false、状态被写入 value 属性的问题:checked 现作为受控属性传给 input,新增 aria-checked 与原生 indeterminate 同步,value 交还使用方;交互改为交给 input 自身原生 onChange 处理(不再由外层 label 的 onClick + preventDefault 拦截原生切换再手动置反),避免与浏览器原生「取消激活」时序冲突导致的 checked 状态错乱;并补充点击标题/提示文字(内部为嵌套 label,原生点击转发规则不覆盖)时的兼容处理
+-   【单选框-Radio】同一问题一并修复
+
 ## 🎉 para-ui/core@4.0.86 发布
 
 🔧【Bugfix】

package/Radio/index.d.ts

@@ -35,6 +35,7 @@ export interface RadioProps {
         type?: string;
         value?: any;
         checked?: any;
+        readOnly?: boolean;
         [name: string]: any;
     };
     /** 改变事件 */

package/Radio/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import Label from '../Label/index.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { Tooltip } from '../Tooltip/index.js';
@@ -28,20 +28,38 @@ const Radio = props => {
     style
   } = props;
   const [checkedCom, setCheckedCom] = useState(false); // 复选框状态
+  const inputRef = useRef(null);
   useEffect(() => {
     if (props.defaultChecked !== undefined) setCheckedCom(props.defaultChecked);
   }, []);
   useEffect(() => {
     if (props.checked !== undefined) setCheckedCom(props.checked);
   }, [props.checked]);
-  // 点击选择
-  const clickCheck = e => {
-    e.preventDefault();
+  // 原生 change 事件:浏览器已经完成真实的 checked 切换,e.target.checked 是准确的新值。
+  // 之前挂在外层 label 上、靠 e.preventDefault() 拦截原生切换再手动置反的写法,
+  // 在真实浏览器里会和原生「取消激活」时序打架,导致原生 checked 与组件状态各算各的、彼此不同步;
+  // 交给 input 自己的 onChange 处理不存在这个问题。
+  const handleChange = e => {
     if (disabled) return;
+    const next = e.target.checked;
     // 不可受控组件
-    if (props.checked === undefined) setCheckedCom(!checkedCom);
-    e.target.checked = !checkedCom;
-    onChange && onChange(e, !checkedCom);
+    if (props.checked === undefined) setCheckedCom(next);
+    onChange && onChange(e, next);
+  };
+  // <Label> 内部渲染的标题/提示文字本身也是一个 <label> 标签(嵌套 label,非法但既有结构不改)。
+  // 原生「点击 label 转发到关联控件」的规则里,点击目标本身若是 label 元素,只有离它最近的
+  // 祖先 label 会尝试转发,而这层内层 label 没有关联的表单控件,到此为止,不会继续冒泡去找外层
+  // label——点标题文字因此不会触发任何变化。这里手动补一次 input.click():它和用户真实点击走的
+  // 是完全相同的原生激活流程(不是 preventDefault + 手动置反),只是 isTrusted 为 false。
+  const handleLabelClick = e => {
+    var _a;
+    if (disabled) return;
+    const target = e.target;
+    if (target === inputRef.current) return; // 点在 input 本身上,原生行为已经处理
+    const nestedLabel = target.closest('label');
+    if (nestedLabel && nestedLabel !== e.currentTarget) {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }
   };
   // 处理className
   const handClass = () => {
@@ -77,14 +95,18 @@ const Radio = props => {
     return jsxs("label", Object.assign({
       className: handClass(),
       style: handStyle(),
-      onClick: clickCheck
+      onClick: handleLabelClick
     }, {
       children: [jsxs("span", Object.assign({
         className: "radio-box"
       }, {
         children: [jsx("input", Object.assign({
           type: "radio",
-          value: checkedCom
+          ref: inputRef,
+          checked: checkedCom,
+          disabled: disabled,
+          onChange: handleChange,
+          "aria-checked": checkedCom
         }, props.inputProps)), jsx("span", {
           className: "radio-box-inner"
         })]