@hsu-react/ui 0.0.25 → 2.0.0

package/lib/components/Search/SearchAdvanced/index.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import { DrawerFormProps } from "../../Form/DrawerForm";
 import { SearchPropsWithFilter } from "../_types";
 export interface SearchAdvancedProps extends SearchPropsWithFilter {
     advancedFiltersProps?: DrawerFormProps;
-    beforeButtonGroup?: ChakraButtonProps[];
-    affterButtonGroup?: ChakraButtonProps[];
+    beforeButtonGroup?: HsuButtonProps[];
+    affterButtonGroup?: HsuButtonProps[];
 }
 /**
  * Search component in advanced filters mode

package/lib/components/Search/SearchCard/index.module.scss

@@ -13,8 +13,8 @@
   .searchBox {
     width: 100%;
     padding: 20px;
-    background: var(--cf-surface);
-    border-radius: 8px 8px 0 0;
+    background: var(--vita-surface);
+    border-radius: var(--vita-radius) var(--vita-radius) 0 0;
 
     .searchInputContainer {
       max-width: 600px;
@@ -54,9 +54,9 @@
     width: 100%;
     padding: 20px 20px 12px;
 
-    border-radius: 8px;
+    border-radius: var(--vita-radius);
 
-    background: var(--cf-surface);
+    background: var(--vita-surface);
 
     transition: all 0.3s, border-top 0s;
   }
@@ -153,7 +153,7 @@
         row-gap: 4px;
 
         &.itemsCollapse {
-          height: 32px;
+          height: var(--vita-control-height);
         }
 
         > div {
@@ -169,7 +169,7 @@
           font-family: PingFangSC-Regular, PingFang SC;
           line-height: 26px;
 
-          border-radius: 2px;
+          border-radius: var(--vita-radius-sm);
 
           cursor: pointer;
 
@@ -177,9 +177,9 @@
 
           &.active,
           &:hover {
-            color: var(--primary-color);
+            color: var(--vita-primary);
 
-            background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+            background: color-mix(in srgb, var(--vita-primary) 12%, transparent);
           }
         }
 
@@ -195,7 +195,7 @@
         .help {
           margin-left: 2px;
 
-          color: var(--cf-text-2);
+          color: var(--vita-muted-foreground);
           font-size: 16px;
         }
       }
@@ -207,7 +207,7 @@
         height: max-content;
         padding: 3px 0px;
 
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
         font-weight: 400;
         font-size: 16px;
         font-family: PingFangSC-Regular, PingFang SC;
@@ -220,7 +220,7 @@
         transition: color 0.3s;
 
         &:hover {
-          color: var(--primary-color);
+          color: var(--vita-primary);
         }
       }
     }
@@ -238,13 +238,13 @@
       > span {
         padding: 3px var(--searchCard-padding-left-right);
 
-        color: var(--cf-text);
+        color: var(--vita-foreground);
         font-weight: 400;
         font-size: 16px;
         font-family: PingFangSC-Regular, PingFang SC;
         line-height: 22px;
 
-        border-radius: 2px;
+        border-radius: var(--vita-radius-sm);
 
         cursor: pointer;
 
@@ -252,8 +252,8 @@
 
         &.active,
         &:hover {
-          color: var(--primary-color);
-          background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+          color: var(--vita-primary);
+          background: color-mix(in srgb, var(--vita-primary) 12%, transparent);
         }
       }
     }

package/lib/components/Search/SearchCollapsible/index.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import { SearchPropsWithFilter } from "../_types";
 export interface SearchCollapsibleProps extends SearchPropsWithFilter {
     onCollapseToggle?: (collapse: boolean) => void;
-    beforeButtonGroup?: ChakraButtonProps[];
-    affterButtonGroup?: ChakraButtonProps[];
+    beforeButtonGroup?: HsuButtonProps[];
+    affterButtonGroup?: HsuButtonProps[];
 }
 /**
  * Search component in collapsible mode

package/lib/components/Search/SearchWithFilter/index.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import { SearchPropsWithFilter } from "../_types";
 export interface SearchWithFilterProps extends SearchPropsWithFilter {
-    beforeButtonGroup?: ChakraButtonProps[];
-    affterButtonGroup?: ChakraButtonProps[];
+    beforeButtonGroup?: HsuButtonProps[];
+    affterButtonGroup?: HsuButtonProps[];
 }
 /**
  * Search component with filter settings

package/lib/components/Search/SearchWithMore/index.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { FormItemProps } from "../../FormItem";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import { SearchPropsWithFilter } from "../_types";
 export interface SearchWithMoreProps extends Omit<SearchPropsWithFilter, "moreSearchItems"> {
     moreSearchItems: FormItemProps[];
-    beforeButtonGroup?: ChakraButtonProps[];
-    affterButtonGroup?: ChakraButtonProps[];
+    beforeButtonGroup?: HsuButtonProps[];
+    affterButtonGroup?: HsuButtonProps[];
 }
 /**
  * Search component with a "more items" section

package/lib/components/Search/_components/ButtonGroup/index.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
-import { ChakraButtonProps as BasicButtonProps } from "../../../Button";
+import { ButtonProps as HsuButtonProps } from "../../../Button";
 import { ReactNode } from "react";
-interface ChakraButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+interface GroupButtonProps extends Omit<HsuButtonProps, "children" | "title"> {
     title?: ReactNode;
 }
 interface ButtonGroupProps {
-    beforeButtonGroup?: ChakraButtonProps[];
-    affterButtonGroup?: ChakraButtonProps[];
+    beforeButtonGroup?: GroupButtonProps[];
+    affterButtonGroup?: GroupButtonProps[];
     expandButton?: ReactNode;
     children?: ReactNode;
     permitted?: boolean;

package/lib/components/Search/_components/ButtonGroup/index.js

@@ -28,7 +28,7 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react.default.forwardRef
         title,
         ...buttonProps
       } = button;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default.Chakra, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         variant: "surface",
         ...buttonProps,
         children: title
@@ -38,7 +38,7 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react.default.forwardRef
         title,
         ...buttonProps
       } = button;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default.Chakra, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         variant: "surface",
         ...buttonProps,
         children: title

package/lib/components/Search/_components/FilterDropdown/index.js

@@ -32,7 +32,9 @@ const FilterDropdown = ({
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
     open: open,
-    overlayClassName: _indexModule.default.filterDropdown,
+    classNames: {
+      root: _indexModule.default.filterDropdown
+    },
     trigger: ["click"],
     placement: "bottomRight",
     menu: {

package/lib/components/Search/_hooks/useSearchCommon.d.ts

@@ -2,15 +2,15 @@ import { FormInstance } from "antd";
 import { RefObject } from "react";
 import { FormItemProps } from "../../FormItem";
 import useLabelWidth from "../../../hooks/useLabelWidth";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 export interface UseSearchCommonParams {
     form: FormInstance;
     searchItems: FormItemProps[];
     moreSearchItems?: FormItemProps[];
     searchData?: Record<string, unknown>;
     hasPermi?: string[];
-    beforeButtonGroup?: ChakraButtonProps[];
-    affterButtonGroup?: ChakraButtonProps[];
+    beforeButtonGroup?: HsuButtonProps[];
+    affterButtonGroup?: HsuButtonProps[];
     columnNum: number;
     autoAdaptWidth: boolean;
     defaultExpanded: boolean;

package/lib/components/Search/_types/index.d.ts

@@ -1,7 +1,7 @@
 import { FormInstance } from "antd";
 import { ReactNode } from "react";
 import { FormItemProps } from "../../FormItem";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 /**
  * Base props interface for the Search component
  */
@@ -15,8 +15,8 @@ export interface BaseSearchProps {
     hasPermi?: string[];
     /** Search item column count (excluding the button group; total column count is columnNum + 1) */
     columnNum?: number;
-    beforeButtonGroup?: ChakraButtonProps[];
-    affterButtonGroup?: ChakraButtonProps[];
+    beforeButtonGroup?: HsuButtonProps[];
+    affterButtonGroup?: HsuButtonProps[];
     searchData?: Record<string, unknown>;
     minLabelWidth?: boolean | number;
     /** Whether expanded by default */

package/lib/components/Search/index.d.ts

@@ -5,10 +5,10 @@ import SearchCollapsible from "./SearchCollapsible";
 import SearchWithFilter from "./SearchWithFilter";
 import SearchWithMore from "./SearchWithMore";
 import { BaseSearchProps } from "./_types";
-import { ChakraButtonProps } from "../Button";
+import { ButtonProps as HsuButtonProps } from "../Button";
 export interface SearchProps extends BaseSearchProps {
-    beforeButtonGroup?: ChakraButtonProps[];
-    affterButtonGroup?: ChakraButtonProps[];
+    beforeButtonGroup?: HsuButtonProps[];
+    affterButtonGroup?: HsuButtonProps[];
 }
 interface SearchFC extends React.FC<SearchProps> {
     Card: React.FC<SearchCardProps>;

package/lib/components/Search/index.module.scss

@@ -1,5 +1,12 @@
+@use "../../styles/responsive" as r;
+
 .Search {
   --column-number: 4;
+
+  // 小屏一行放不下 4 列搜索项，收成单列
+  @include r.down(md) {
+    --column-number: 1;
+  }
   --column-offset-width: 0px;
   --column-compensate-width: 0px;
 
@@ -9,10 +16,10 @@
   padding: 14px 16px;
 
   // CF style: outlined white card (follows appearance switching), no shadow
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
-  border-radius: 8px;
-  border: 1px solid var(--cf-border);
+  border-radius: var(--vita-radius);
+  border: 1px solid var(--vita-border);
   box-shadow: none;
 
   .searchOption {
@@ -41,8 +48,23 @@
       align-items: center;
       justify-content: flex-end;
 
+      // min-width: max-content 让按钮组永不收缩，桌面上是为了别把按钮文字压断；
+      // 但在窄屏里它会把整行顶出视口（实测 390px 视口下溢出 131px）。
+      // 小屏改为允许换行收缩。
       min-width: max-content;
-      height: 32px;
+      height: var(--vita-control-height);
+
+      // 小屏：按钮组独占一行。父级 .option 本来就是 flex-wrap: wrap，给个 100% 的 basis
+      // 就会被挤到下一行；只写 min-width: 0 的话它会被兄弟项挤成 0 宽，按钮反而溢出到右边。
+      @include r.down(md) {
+        flex: 0 0 100%;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+
+        min-width: 0;
+        height: auto;
+        row-gap: 5px;
+      }
 
       &.flexStart {
         justify-content: flex-start;
@@ -58,7 +80,7 @@
         align-items: center;
 
         width: max-content;
-        height: 32px;
+        height: var(--vita-control-height);
 
         cursor: pointer;
 
@@ -86,6 +108,12 @@
     .searchOption {
       .option {
         flex-wrap: nowrap;
+
+        // 高级筛选态刻意不换行（桌面上要保持单行紧凑），但窄屏放不下，
+        // 不换行就只能溢出。小屏放开。
+        @include r.down(md) {
+          flex-wrap: wrap;
+        }
       }
     }
   }

package/lib/components/SecondConf/index.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _semantic = require("../../utils/semantic");
+var _tokens = require("../../styles/tokens");
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _Icon = _interopRequireDefault(require("../Icon"));
@@ -45,19 +47,25 @@ const SecondConf = props => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [trigger, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
-      width: 800,
+      width: _tokens.modalWidth.md,
       ...modalConfig,
       open: visible,
       onOk: handleOk,
       onCancel: handleCancel,
       centered: true,
       className: _indexModule.default.SecondConf,
-      classNames: {
-        body: `${_indexModule.default.body} ${classNames?.body || ""}`,
-        ...classNames
+      classNames: (0, _semantic.mergeSemantic)(classNames, outer => ({
+        ...outer,
+        // `...classNames` used to be spread *after* this line, so a caller-supplied `body`
+        // silently dropped `styles.body`. Merge the two instead.
+        body: `${_indexModule.default.body} ${outer.body || ""}`
+      }))
+      // v6 folded `maskClosable` into the `mask` config object
+      ,
+      mask: {
+        enabled: false,
+        closable: false
       },
-      maskClosable: false,
-      mask: false,
       title: " ",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         icon: "mingcute:question-line",

package/lib/components/SecondConf/index.module.scss

@@ -13,7 +13,7 @@
 
     .icon {
       font-size: 50px;
-      color: var(--cf-warning);
+      color: var(--vita-warning);
     }
 
     .content {
@@ -24,12 +24,12 @@
       .title {
         font-size: 20px;
         font-weight: bold;
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
       }
 
       .text {
         font-size: 16px;
-        color: var(--cf-text-3);
+        color: var(--vita-subtle-foreground);
       }
     }
   }

package/lib/components/Select/AutoCompleteSelect/index.js

@@ -203,19 +203,29 @@ const AutoCompleteSelect = props => {
       onChange,
       onSearch: handleSearch,
       open: mergedOpen,
-      onDropdownVisibleChange: visible => {
+      // v6 renamed `onDropdownVisibleChange` to `onOpenChange`; this component's own prop
+      // keeps the old name for consumers.
+      onOpenChange: visible => {
         setOpen(visible);
         onDropdownVisibleChange?.(visible);
       },
       className: (0, _classnames.default)(_indexModule.default.antdAutoComplete, selectClassName, {
         [_indexModule.default.legacyHasArrowOrClear]: legacyHasSelector && legacyHasArrowOrClear
       }),
-      popupClassName: `${cls} ${popupClassName ?? ""}`,
+      classNames: {
+        popup: {
+          root: `${cls} ${popupClassName ?? ""}`
+        }
+      },
       getPopupContainer: () => autoCompleteRef.current ?? document.body,
       popupMatchSelectWidth: popupMatchSelectWidth ?? (calculatedPopupWidth || undefined),
-      dropdownStyle: {
-        left: autoCompleteRef.current ? (0, _utils.getElementLeft)(autoCompleteRef.current) : undefined,
-        right: "auto"
+      styles: {
+        popup: {
+          root: {
+            left: autoCompleteRef.current ? (0, _utils.getElementLeft)(autoCompleteRef.current) : undefined,
+            right: "auto"
+          }
+        }
       },
       placement,
       disabled,