@para-ui/core 5.0.0-beta.4 → 5.0.0-beta.6

package/README.md

@@ -1,3 +1,34 @@
+## 🎉 para-ui/core@5.0.0-beta.6 发布
+
+🎁【Feature】
+
+-   【下拉框-Select】泛型按 `multiple` 判别：`SelectProps` 拆分为 `SelectSingleProps | SelectMultipleProps`，单选 `value` / `onChange` 推导为 `T`，多选推导为 `T[]`，使用方无需再处理 `T | T[]` 联合
+
+⚠️【Breaking Change】
+
+-   【下拉框-Select】单选清空时 `onChange` 入参由 `''` 调整为 `undefined`。原有 `if (val === '')` 写法需改为 `if (val === undefined)`；受控模式下旧代码传 `value=""` 仍能被识别为清空（向后兼容保留）
+
+🔧【Bugfix】
+
+-   【下拉框-Select】修复受控模式下 `value` 被置为 `undefined` 时 UI 未同步清空的问题
+
+## 🎉 para-ui/core@5.0.0-beta.5 发布
+
+🎁【Feature】
+
+-   【单选框组-RadioGroup】支持泛型，`value`/`onChange` 可指定精确类型，替代原 `unknown`
+-   【切换按钮-ToggleButton / ToggleButtonGroup】支持泛型，值类型由调用方指定
+-   【复选框组-CheckboxGroup】支持泛型，`value` 可窄化到 `'a' | 'b'` 等枚举
+-   【下拉框-Select】支持泛型，`value`/`onChange` 可窄化；`SelectProps` 严格化（移除索引签名，禁止未声明字段透传）；新增共享类型 `SelectOptionValue`
+
+🔧【Bugfix】
+
+-   【下拉框-Select】修复 `fetchSuggestions` 未走全局 `componentsProps.Select` 默认值合并
+-   【下拉框-Select】`handleInitValue` 内 `multiple` 判断与其它位置保持一致
+-   【下拉框-Select】`closest` 内部辅助函数去除 `any`，复用 `VendorPrefixedElement` 类型
+-   【动态多值框-FormSelect】过滤自定义 `change` 回调，不再泄漏到 Select DOM
+-   【切换按钮组-ToggleButtonGroup】`icon` 字段不再透传给 Button 造成无效属性
+
 ## 🎉 para-ui/core@5.0.0-beta.4 发布
 
 🔧【Bugfix】

package/es/CheckboxGroup/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FunctionComponent, ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 import { CheckboxProps } from '../Checkbox';
 import { LabelTooltipProps } from '../Label';
 import { HelperTextDetailProps } from '../HelperText';
@@ -6,7 +6,7 @@ export interface CheckboxListProps extends CheckboxProps {
     /** 唯一标识值 */
     name?: string | number;
 }
-export interface CheckboxGroupProps extends HelperTextDetailProps {
+export interface CheckboxGroupProps<T extends string | number = string | number> extends HelperTextDetailProps {
     /** 样式class */
     className?: string;
     /** style */
@@ -28,15 +28,15 @@ export interface CheckboxGroupProps extends HelperTextDetailProps {
     /** 是否禁用 */
     disabled?: boolean;
     /** 默认值 不受控 */
-    defaultValue?: (string | number)[];
+    defaultValue?: T[];
     /** 值 */
-    value?: (string | number)[];
+    value?: T[];
     /** 选中选值 */
     id?: string;
     /** 选项数据 */
     list: CheckboxListProps[] | CheckboxListProps[][];
     /** 改变值 */
-    onChange?: (val: (string | number)[]) => void;
+    onChange?: (val: T[]) => void;
 }
-export declare const CheckboxGroup: FunctionComponent<CheckboxGroupProps>;
+export declare function CheckboxGroup<T extends string | number = string | number>(props: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
 export default CheckboxGroup;

package/es/CheckboxGroup/index.js

@@ -6,7 +6,7 @@ import R from "../HelperText/index.js";
 import { DeepClone as S } from "@paraview/lib";
 import { $prefixCls as t } from "../GlobalContext/constant.js";
 import './index.css';/* empty css           */
-const M = (l) => {
+function K(l) {
   const {
     label: h = "",
     labelTooltip: n,
@@ -30,9 +30,9 @@ const M = (l) => {
   }, []), C(() => {
     l.value !== void 0 && f(l.value);
   }, [l.value]);
-  const N = (e) => (s, a) => {
+  const N = (e) => (a, s) => {
     const o = e[m], r = S(d);
-    if (a)
+    if (s)
       r.push(o);
     else {
       const B = r.indexOf(o);
@@ -42,8 +42,8 @@ const M = (l) => {
   }, V = () => {
     if (h || g) {
       const e = () => {
-        let s = "checkbox-group-label";
-        return n && n.className && (s += ` ${n.className}`), s;
+        let a = "checkbox-group-label";
+        return n && n.className && (a += ` ${n.className}`), a;
       };
       return /* @__PURE__ */ c.jsx(
         I,
@@ -55,12 +55,12 @@ const M = (l) => {
         }
       );
     }
-  }, $ = (e, s, a) => {
+  }, $ = (e, a, s) => {
     const o = {
       display: "inline-block",
       ...e.style
     };
-    return b && p && a.length !== s + 1 && (o.marginRight = b), x && (o.width = x), o;
+    return b && p && s.length !== a + 1 && (o.marginRight = b), x && (o.width = x), o;
   }, A = () => {
     let e = `${t}-checkbox-group`;
     return y && (e += ` ${y}`), i && (e += ` ${t}-checkbox-group-${i}`), k && (e += ` ${t}-checkbox-group-error`), u && (e += ` ${t}-checkbox-group-disabled`), p ? e += ` ${t}-checkbox-group-row` : e += ` ${t}-checkbox-group-column`, e;
@@ -72,7 +72,7 @@ const M = (l) => {
       style: T,
       children: [
         V(),
-        /* @__PURE__ */ c.jsx("div", { className: "checkbox-group-content", children: v.map((e, s) => {
+        /* @__PURE__ */ c.jsx("div", { className: "checkbox-group-content", children: v.map((e, a) => {
           if (Array.isArray(e))
             return /* @__PURE__ */ c.jsx(
               "div",
@@ -91,7 +91,7 @@ const M = (l) => {
                         checked: d.indexOf(o[m]) !== -1,
                         size: i,
                         disabled: !!(u || o.disabled),
-                        key: s,
+                        key: a,
                         onChange: N(o)
                       }
                     )
@@ -99,28 +99,28 @@ const M = (l) => {
                   r
                 ))
               },
-              s
+              a
             );
-          const a = e;
+          const s = e;
           return /* @__PURE__ */ c.jsx(
             "span",
             {
               className: "checkbox-item-box",
-              style: $(a, s, v),
+              style: $(s, a, v),
               children: /* @__PURE__ */ E(
                 w,
                 {
-                  ...a,
+                  ...s,
                   style: {},
-                  checked: d.indexOf(a[m]) !== -1,
+                  checked: d.indexOf(s[m]) !== -1,
                   size: i,
-                  disabled: !!(u || a.disabled),
-                  key: s,
-                  onChange: N(a)
+                  disabled: !!(u || s.disabled),
+                  key: a,
+                  onChange: N(s)
                 }
               )
             },
-            s
+            a
           );
         }) }),
         /* @__PURE__ */ c.jsx(
@@ -135,9 +135,9 @@ const M = (l) => {
       ]
     }
   );
-};
+}
 export {
-  M as CheckboxGroup,
-  M as default
+  K as CheckboxGroup,
+  K as default
 };
 //# sourceMappingURL=index.js.map

package/es/FormItem/compoments/formSelect/index.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { SelectProps } from '../../../Select';
-export interface FormSelectProps extends SelectProps {
+export type FormSelectProps = Omit<SelectProps, 'value' | 'defaultValue' | 'onChange'> & {
     /**
      * 默认值
      */
@@ -13,6 +13,6 @@ export interface FormSelectProps extends SelectProps {
      * 绑定值
      */
     value?: string;
-}
+};
 declare const FormSelect: FC<FormSelectProps>;
 export default FormSelect;

package/es/FormItem/compoments/formSelect/index.js

@@ -1,20 +1,20 @@
-import { j as n } from "../../../_virtual/jsx-runtime.js";
-import r from "react";
-import m from "../../../Select/index.js";
-const h = (t) => {
-  const { defaultValue: s = "", change: o, value: e } = t, [u, a] = r.useState(e !== void 0 ? e : s), c = (l) => {
-    a(l), o && o(l);
+import { j as m } from "../../../_virtual/jsx-runtime.js";
+import l from "react";
+import f from "../../../Select/index.js";
+const h = (r) => {
+  const { defaultValue: s = "", change: t, value: e, ...u } = r, [c, o] = l.useState(e !== void 0 ? e : s), n = (a) => {
+    o(a), t && t(a);
   };
-  return r.useEffect(() => {
-    a(e);
-  }, [e]), /* @__PURE__ */ n.jsx(
-    m,
+  return l.useEffect(() => {
+    o(e);
+  }, [e]), /* @__PURE__ */ m.jsx(
+    f,
     {
       labelMode: "inside",
-      onChange: c,
+      onChange: n,
       hideErrorDom: null,
-      ...t,
-      value: u
+      ...u,
+      value: c
     }
   );
 };

package/es/Pagination/index.js

@@ -2,8 +2,8 @@ import { j as r } from "../_virtual/jsx-runtime.js";
 import de, { useState as g, useRef as q, useEffect as u, useMemo as w } from "react";
 import xe from "../GlobalContext/index.js";
 import { $prefixCls as z, $rcPrefixCls as he } from "../GlobalContext/constant.js";
-import { TextField as Pe } from "../TextField/index.js";
-import ve from "../GlobalContext/useFormatMessage.js";
+import { TextField as ve } from "../TextField/index.js";
+import Pe from "../GlobalContext/useFormatMessage.js";
 import je from "./lang/index.js";
 import be from "../Select/index.js";
 import { Button as G } from "../Button/index.js";
@@ -31,7 +31,7 @@ const Oe = (y) => {
     changeRowsPerPage: F,
     getPopupContainer: O,
     resizeLine: W
-  } = y, p = ve("Pagination", je), { language: k, locale: f } = de.useContext(xe), [c, V] = g(L), [K, X] = g([]), [n, R] = g(S), [i, Y] = g(), [d, E] = g(), [o, U] = g(null), x = q(null), a = q({
+  } = y, p = Pe("Pagination", je), { language: k, locale: f } = de.useContext(xe), [c, V] = g(L), [K, X] = g([]), [n, R] = g(S), [i, Y] = g(), [d, E] = g(), [o, U] = g(null), x = q(null), a = q({
     layoutArr: ["jumper", "pageRow", "pager-btn", "sizes", "pager-num"]
   });
   a.current.type = l, a.current.autoType = M, u(() => () => {
@@ -87,7 +87,7 @@ const Oe = (y) => {
         U(t), t > 3 ? _(t) : x.current.classList.remove(`${z}-pagination-over`);
       } else
         x.current.classList.remove(`${z}-pagination-over`);
-  }, P = (e) => a.current.type instanceof Array && a.current.type.indexOf(e) === -1, v = (e) => {
+  }, v = (e) => a.current.type instanceof Array && a.current.type.indexOf(e) === -1, P = (e) => {
     if (o === null) return !1;
     switch (e) {
       case "jumper":
@@ -128,6 +128,7 @@ const Oe = (y) => {
     }
     s !== void 0 && R(s), N && N(s);
   }, ee = (e) => {
+    if (e === void 0) return;
     const t = Number(e);
     e !== c && (V(t), F && F(t));
   }, te = (e) => {
@@ -143,11 +144,11 @@ const Oe = (y) => {
     const t = /(?=(\B)(\d{3})+$)/g;
     return e.toString().replace(t, ",");
   }, oe = w(() => {
-    if (l === "simple" || P("sizes") || v("sizes"))
+    if (l === "simple" || v("sizes") || P("sizes"))
       return null;
     const e = ae(m);
     return /* @__PURE__ */ r.jsx("div", { className: "total-num pagination-space", children: p({ id: "total" }, { total: e }) });
-  }, [m, k, f, o]), ie = w(() => P("pageRow") || v("pageRow") ? null : /* @__PURE__ */ r.jsx("div", { className: "page-line-memo pagination-space", children: /* @__PURE__ */ r.jsx(
+  }, [m, k, f, o]), ie = w(() => v("pageRow") || P("pageRow") ? null : /* @__PURE__ */ r.jsx("div", { className: "page-line-memo pagination-space", children: /* @__PURE__ */ r.jsx(
     be,
     {
       className: "page-line-select",
@@ -165,7 +166,7 @@ const Oe = (y) => {
   ] }), le = () => /* @__PURE__ */ r.jsxs("div", { className: "jump-next-icon", children: [
     /* @__PURE__ */ r.jsx("span", { children: "..." }),
     /* @__PURE__ */ r.jsx(Ce, {})
-  ] }), ce = () => C !== "num" || l === "simple" ? !0 : l === "complex" ? v("pager-num") : P("pager"), ue = w(() => ce() ? null : /* @__PURE__ */ r.jsxs("div", { className: "pagination-content pagination-space", children: [
+  ] }), ce = () => C !== "num" || l === "simple" ? !0 : l === "complex" ? P("pager-num") : v("pager"), ue = w(() => ce() ? null : /* @__PURE__ */ r.jsxs("div", { className: "pagination-content pagination-space", children: [
     I.indexOf("prev") !== -1 && /* @__PURE__ */ r.jsx("div", { className: "left-page", children: /* @__PURE__ */ r.jsx(
       "div",
       {
@@ -195,7 +196,7 @@ const Oe = (y) => {
         children: /* @__PURE__ */ r.jsx(H, {})
       }
     ) })
-  ] }), [m, n, i, c, y.flippingArrow, C, o]), me = () => C === "btn" || l === "simple" ? !1 : l === "complex" ? v("pager-btn") : P("pager"), pe = w(() => me() ? null : /* @__PURE__ */ r.jsxs("div", { className: "pagination-btn-content pagination-space", children: [
+  ] }), [m, n, i, c, y.flippingArrow, C, o]), me = () => C === "btn" || l === "simple" ? !1 : l === "complex" ? P("pager-btn") : v("pager"), pe = w(() => me() ? null : /* @__PURE__ */ r.jsxs("div", { className: "pagination-btn-content pagination-space", children: [
     /* @__PURE__ */ r.jsx(
       G,
       {
@@ -218,10 +219,10 @@ const Oe = (y) => {
         children: p({ id: "nextPage" })
       }
     )
-  ] }), [n, i, C, f, o]), ge = w(() => P("jumper") || v("jumper") ? null : /* @__PURE__ */ r.jsxs("div", { className: "skip-page-memo pagination-space", children: [
+  ] }), [n, i, C, f, o]), ge = w(() => v("jumper") || P("jumper") ? null : /* @__PURE__ */ r.jsxs("div", { className: "skip-page-memo pagination-space", children: [
     /* @__PURE__ */ r.jsx("span", { children: p({ id: "jumpTo" }) }),
     /* @__PURE__ */ r.jsx(
-      Pe,
+      ve,
       {
         className: "skip-page-text-field",
         size: "large",

package/es/RadioGroup/index.d.ts

@@ -1,11 +1,11 @@
-import { default as React, FunctionComponent, ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 import { RadioProps } from '../Radio';
 import { LabelTooltipProps } from '../Label';
 import { HelperTextDetailProps } from '../HelperText';
 export interface RadioListProps extends RadioProps {
     [name: string]: unknown;
 }
-export interface RadioGroupProps extends HelperTextDetailProps {
+export interface RadioGroupProps<T = unknown> extends HelperTextDetailProps {
     /** 样式class */
     className?: string;
     /** style */
@@ -27,16 +27,15 @@ export interface RadioGroupProps extends HelperTextDetailProps {
     /** 是否禁用 */
     disabled?: boolean;
     /** 默认值 不受控 */
-    defaultValue?: unknown;
+    defaultValue?: T;
     /** 默认值 */
-    value?: unknown;
+    value?: T;
     /** 选中选值 */
     id?: string;
     /** 选项数据 */
     list: RadioListProps[] | RadioListProps[][];
     /** 改变值 */
-    onChange?: (val: unknown, item?: RadioListProps) => void;
-    [name: string]: unknown;
+    onChange?: (val: T, item?: RadioListProps) => void;
 }
-export declare const RadioGroup: FunctionComponent<RadioGroupProps>;
+export declare function RadioGroup<T = unknown>(props: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;

package/es/RadioGroup/index.js

@@ -5,7 +5,7 @@ import A from "../Label/index.js";
 import B from "../HelperText/index.js";
 import { $prefixCls as l } from "../GlobalContext/constant.js";
 import './index.css';/* empty css           */
-const F = (i) => {
+function F(i) {
   const {
     className: m = "",
     style: w,
@@ -122,7 +122,7 @@ const F = (i) => {
       ]
     }
   );
-};
+}
 export {
   F as RadioGroup,
   F as default

package/es/Select/index.d.ts

@@ -1,15 +1,16 @@
-import { default as React, FunctionComponent, ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 import { EmptyProps } from '../Empty';
 import { LabelTooltipProps } from '../Label';
 import { TooltipProps } from '../Tooltip';
 import { HelperTextDetailProps } from '../HelperText';
-import { SelectOptionBase } from '../Utils/type';
+import { SelectOptionBase, SelectOptionValue } from '../Utils/type';
 /** Select 下拉选项类型 */
 export interface SelectOption extends SelectOptionBase {
     /** 子选项数组 */
     children?: SelectOption[];
 }
-export interface SelectProps extends HelperTextDetailProps {
+/** Select 共享 props —— 不含随 multiple 变化的 value/defaultValue/onChange/onEnter/multiple */
+export interface SelectBaseProps<T extends SelectOptionValue = SelectOptionValue> extends HelperTextDetailProps {
     /** 样式class */
     className?: string;
     /** style */
@@ -35,13 +36,11 @@ export interface SelectProps extends HelperTextDetailProps {
     /** 搜索提示语 */
     searchPlaceholder?: string;
     /** 是否禁用，传入数组时表示禁用的选项值列表 */
-    disabled?: boolean | Array<string | number | boolean>;
+    disabled?: boolean | T[];
     /**
      * 禁用提示
      */
     disabledTooltip?: TooltipProps;
-    /** 是否多选 */
-    multiple?: boolean;
     /** 是否必填 */
     required?: boolean;
     /** 下拉选项数组 */
@@ -60,10 +59,6 @@ export interface SelectProps extends HelperTextDetailProps {
     showValue?: string;
     /** 下级字段 */
     childrenName?: string;
-    /** 默认值，多选时为数组，单选时为单值 */
-    defaultValue?: string | number | boolean | Array<string | number | boolean>;
-    /** 选中值，多选时为数组，单选时为单值（受控） */
-    value?: string | number | boolean | Array<string | number | boolean>;
     /** 超出换行 */
     overLine?: boolean;
     /** 是否有搜索 */
@@ -80,10 +75,6 @@ export interface SelectProps extends HelperTextDetailProps {
     morePopoverClassName?: string;
     /** 返回输入建议的方法 */
     fetchSuggestions?: (val: string, cb: (data: SelectOption[]) => void) => void;
-    /** 改变值回调 */
-    onChange?: (val: string | number | boolean | Array<string | number | boolean>, e: React.SyntheticEvent) => void;
-    /** 全局回车事件 */
-    onEnter?: (val: string | number | boolean | Array<string | number | boolean>) => void;
     /** 搜索框输入框回车事件 */
     onEnterInput?: (val: string) => void;
     /** 点击清空内容回调 */
@@ -92,7 +83,39 @@ export interface SelectProps extends HelperTextDetailProps {
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     /** 失去焦点改变值 */
     blurChangeValueBol?: boolean;
-    [name: string]: unknown;
 }
-declare const Select: FunctionComponent<SelectProps>;
+/** 单选模式 */
+export interface SelectSingleProps<T extends SelectOptionValue = SelectOptionValue> extends SelectBaseProps<T> {
+    /** 是否多选（未传或 false 为单选） */
+    multiple?: false;
+    /** 默认值（单选） */
+    defaultValue?: T;
+    /** 选中值（单选受控） */
+    value?: T;
+    /** 改变值回调；清空时 val 为空字符串 */
+    /** 改变值回调；清空时 val 为 undefined */
+    onChange?: (val: T | undefined, e: React.SyntheticEvent) => void;
+    /** 全局回车事件（单选） */
+    onEnter?: (val: T) => void;
+}
+/** 多选模式 */
+export interface SelectMultipleProps<T extends SelectOptionValue = SelectOptionValue> extends SelectBaseProps<T> {
+    /** 是否多选 */
+    multiple: true;
+    /** 默认值（多选） */
+    defaultValue?: T[];
+    /** 选中值（多选受控） */
+    value?: T[];
+    /** 改变值回调（多选） */
+    onChange?: (val: T[], e: React.SyntheticEvent) => void;
+    /** 全局回车事件（多选） */
+    onEnter?: (val: T[]) => void;
+}
+/**
+ * Select 的 props
+ * - `multiple` 未传或为 `false`：value / defaultValue 为 `T`，onChange/onEnter 入参为 `T`（清空时 `undefined`）
+ * - `multiple` 为 `true`：value / defaultValue 为 `T[]`，onChange/onEnter 入参为 `T[]`（清空时 `[]`）
+ */
+export type SelectProps<T extends SelectOptionValue = SelectOptionValue> = SelectSingleProps<T> | SelectMultipleProps<T>;
+declare function Select<T extends SelectOptionValue = SelectOptionValue>(outerProps: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Select;