@oceanbase/design 1.0.0-alpha.15 → 1.0.0-alpha.17

package/es/filter/index.d.ts

@@ -14,7 +14,7 @@ declare const Filter: {
     Checkbox: import("react").NamedExoticComponent<import("./components/FilterCheckbox").FilterCheckboxProps>;
     Range: import("react").FC<import("./components/FilterRange").FilterRangeProps>;
     Wrap: import("react").FC<import("./components/FilterWrap").FilterWrapProps>;
-    Cascader: import("react").FC<import("./components/FilterCascader").FilterCascaderProps>;
+    Cascader: import("react").FC<import("./components/FilterCascader/types").FilterCascaderProps>;
     Switch: import("react").FC<import("./components/FilterSwitch").FilterSwitchProps>;
     Input: import("react").FC<import("./components/FilterInput").FilterInputProps>;
     ResponsiveGroup: import("react").FC<import("./components/ResponsiveFilterGroup").ResponsiveFilterGroupProps>;

package/es/filter/index.js

@@ -1,5 +1,5 @@
 "use client";
-import Cascader from "./components/FilterCascader";
+import Cascader from "./components/FilterCascader/index";
 import Checkbox from "./components/FilterCheckbox";
 import Range from "./components/FilterRange";
 import Input from "./components/FilterInput";
@@ -8,14 +8,18 @@ import Switch from "./components/FilterSwitch";
 import Wrap from "./components/FilterWrap";
 import ResponsiveGroup from "./components/ResponsiveFilterGroup";
 export { FilterProvider, useFilterContext } from "./FilterContext";
+function markAsFilterComponent(component) {
+  component.__isFilterComponent = true;
+  return component;
+}
 var Filter = {
-  Select: Select,
-  Checkbox: Checkbox,
-  Range: Range,
+  Select: markAsFilterComponent(Select),
+  Checkbox: markAsFilterComponent(Checkbox),
+  Range: markAsFilterComponent(Range),
   Wrap: Wrap,
-  Cascader: Cascader,
-  Switch: Switch,
-  Input: Input,
+  Cascader: markAsFilterComponent(Cascader),
+  Switch: markAsFilterComponent(Switch),
+  Input: markAsFilterComponent(Input),
   ResponsiveGroup: ResponsiveGroup
 };
 export default Filter;

package/es/filter/style/index.js

@@ -10,11 +10,12 @@ import themeConfig from "../../theme";
 import ConfigProvider from "../../config-provider";
 var genSelectOptionStyle = function genSelectOptionStyle(token) {
   var componentCls = token.componentCls;
-  return _defineProperty({}, "".concat(componentCls, "-select-option"), _defineProperty({
+  return _defineProperty({}, "".concat(componentCls, "-select-option"), _defineProperty(_defineProperty({
     paddingBlock: token.paddingXXS,
     paddingInline: token.paddingXS,
     cursor: 'pointer',
     borderRadius: token.borderRadius,
+    transition: "background-color ".concat(token.motionDurationMid, " ease-in-out"),
     '&:hover': _defineProperty(_defineProperty({
       backgroundColor: token.colorBgTextHover
     }, "".concat(componentCls, "-arrow-icon"), {
@@ -26,6 +27,11 @@ var genSelectOptionStyle = function genSelectOptionStyle(token) {
     })
   }, "&".concat(componentCls, "-has-selected"), {
     backgroundColor: token.colorBgTextHover
+  }), "&".concat(componentCls, "-flat-active"), {
+    backgroundColor: token.colorBgTextHover,
+    '&:hover': {
+      backgroundColor: token.colorBgTextHover
+    }
   }));
 };
 var genCheckboxOptionStyle = function genCheckboxOptionStyle(token) {
@@ -96,7 +102,8 @@ var genIconStyle = function genIconStyle(token) {
     marginRight: token.paddingXXS,
     color: token.colorIcon
   }), "".concat(componentCls, "-icon-wrapper"), _objectSpread({}, baseIconWrapperStyle)), "".concat(componentCls, "-count"), _objectSpread(_objectSpread({}, baseCountStyle), {}, {
-    backgroundColor: 'var(--ob-color-border-container)'
+    backgroundColor: 'var(--ob-color-border-container)',
+    padding: '0px 2px'
   })), "".concat(componentCls, "-arrow-icon"), {
     opacity: 1,
     fontSize: token.fontSizeSM,

package/es/filter/type.d.ts

@@ -31,4 +31,9 @@ export interface InternalFilterProps {
      * 是否为 Wrap 组件透传，默认 false
      */
     _isInWrapComponent?: boolean;
+    /**
+     * @internal
+     * 是否为扁平化模式，默认 false
+     */
+    _isFlat?: boolean;
 }

package/es/table/index.d.ts

@@ -38,8 +38,8 @@ declare const _default: (<RecordType extends AnyObject = AnyObject>(props: Table
     SELECTION_ALL: "SELECT_ALL";
     SELECTION_INVERT: "SELECT_INVERT";
     SELECTION_NONE: "SELECT_NONE";
-    Column: <RecordType extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType>) => null;
-    ColumnGroup: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_1>) => null;
+    Column: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType_1>) => null;
+    ColumnGroup: <RecordType_2 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_2>) => null;
     Summary: typeof Summary;
     useStyle: (prefixCls: string, rootCls?: string) => readonly [(node: ReactElement<any, string | React.JSXElementConstructor<any>>) => ReactElement<any, string | React.JSXElementConstructor<any>>, string, string];
     useDefaultPagination: (pagination?: false | import("antd").TablePaginationConfig) => false | import("antd").TablePaginationConfig;

package/lib/alert/index.d.ts

@@ -6,7 +6,7 @@ export interface AlertProps extends AntAlertProps {
     mini?: boolean;
 }
 declare const Alert: {
-    ({ type: typeProp, showIcon, closable, ghost, mini, banner, action, prefixCls: customizePrefixCls, className, ...restProps }: AlertProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ({ type: typeProp, showIcon, closable, closeIcon, ghost, mini, banner, action, prefixCls: customizePrefixCls, className, ...restProps }: AlertProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     ErrorBoundary: typeof import("antd/es/alert/ErrorBoundary").default;
     displayName: string;
 };

package/lib/alert/index.js

@@ -37,6 +37,7 @@ const Alert = ({
   type: typeProp,
   showIcon = true,
   closable,
+  closeIcon,
   ghost,
   mini,
   banner,
@@ -53,7 +54,7 @@ const Alert = ({
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
   const [wrapCSSVar] = (0, _style.default)(prefixCls);
   const alertCls = (0, _classnames.default)({
-    [`${prefixCls}-closable`]: closable,
+    [`${prefixCls}-closable`]: closable || closeIcon,
     [`${prefixCls}-ghost`]: ghost,
     [`${prefixCls}-mini`]: mini,
     [`${prefixCls}-with-action`]: !!action
@@ -62,6 +63,7 @@ const Alert = ({
     type: type,
     showIcon: showIcon,
     closable: closable,
+    closeIcon: closeIcon,
     banner: banner,
     icon: iconMapOutlined[type],
     action: action,

package/lib/filter/components/CountNumber.js

@@ -21,7 +21,8 @@ const CountNumber = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)(className || (0, _style.getFilterCls)(prefixCls, 'count')),
     style: total ? {
-      width: '26px'
+      width: 'fit-content',
+      padding: '0px 4px'
     } : undefined,
     children: total ? `${count}/${total}` : count
   });

package/lib/filter/components/FilterButton.d.ts

@@ -26,6 +26,8 @@ interface FilterButtonProps extends BaseFilterProps, InternalFilterProps {
     showLabelDivider?: boolean;
     /** 是否显示后缀图标区域（包括下拉箭头和清除图标），默认 true */
     showSuffixIcon?: boolean;
+    /** 是否为 flat 模式（内部使用） */
+    _isFlat?: boolean;
     style?: React.CSSProperties;
 }
 declare const FilterButton: React.ForwardRefExoticComponent<FilterButtonProps & React.RefAttributes<FilterButtonRef>>;

package/lib/filter/components/FilterButton.js

@@ -35,6 +35,7 @@ const FilterButton = /*#__PURE__*/(0, _react.forwardRef)(({
   showLabelDivider = false,
   showSuffixIcon = true,
   _isInWrapComponent = false,
+  _isFlat = false,
   style,
   ...restProps
 }, ref) => {
@@ -83,7 +84,7 @@ const FilterButton = /*#__PURE__*/(0, _react.forwardRef)(({
 
   // 使用 useMemo 缓存 content，避免每次都重新创建
   const popoverContent = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(!isCollapsed || _isInWrapComponent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
+    children: [!_isFlat && (!isCollapsed || _isInWrapComponent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
       justify: "space-between",
       align: "center",
       className: (0, _classnames.default)((0, _style.getFilterCls)(prefixCls, 'button-label-wrapper'), showLabelDivider ? '' : (0, _style.getFilterCls)(prefixCls, 'button-label-wrapper-no-border')),
@@ -102,7 +103,7 @@ const FilterButton = /*#__PURE__*/(0, _react.forwardRef)(({
       },
       children: footer
     })]
-  }), [content, footer, label, extra, isCollapsed, prefixCls, showLabelDivider, token]);
+  }), [content, footer, label, extra, isCollapsed, prefixCls, showLabelDivider, token, _isFlat, _isInWrapComponent]);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
     arrow: false,
     placement: placement,
@@ -110,6 +111,7 @@ const FilterButton = /*#__PURE__*/(0, _react.forwardRef)(({
     content: popoverContent,
     open: open && !disabled,
     onOpenChange: handleOpenChange,
+    forceRender: _isInWrapComponent,
     styles: {
       body: {
         padding: 0,

package/lib/filter/components/FilterCascader/components/CascaderOption/OptionCheckbox.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { CascaderOption } from '../../types';
+interface OptionCheckboxProps {
+    option: CascaderOption;
+    currentPath: string[];
+    currentValue: string[][];
+    hasChildren: boolean;
+    allChildrenCount: number;
+    selectedChildrenCount: number;
+    allChildrenSelected: boolean;
+    prefixCls: string;
+    onValueChange: (value: string[][]) => void;
+    onClick?: (e: React.MouseEvent) => void;
+    onAfterChange?: () => void;
+}
+/**
+ * 级联选择器的复选框选项组件（支持父节点和叶子节点）
+ */
+export declare const OptionCheckbox: React.FC<OptionCheckboxProps>;
+export {};

package/lib/filter/components/FilterCascader/components/CascaderOption/OptionCheckbox.js

@@ -0,0 +1,91 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionCheckbox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _checkbox = _interopRequireDefault(require("../../../../../checkbox"));
+var _countUtils = require("../../utils/countUtils");
+var _style = require("../../../../style");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 级联选择器的复选框选项组件（支持父节点和叶子节点）
+ */
+const OptionCheckbox = ({
+  option,
+  currentPath,
+  currentValue,
+  hasChildren,
+  allChildrenSelected,
+  selectedChildrenCount,
+  prefixCls,
+  onValueChange,
+  onClick,
+  onAfterChange
+}) => {
+  const isExactMatch = currentValue.some(selectedPath => selectedPath.length === currentPath.length && selectedPath.every((val, idx) => val === currentPath[idx]));
+
+  // 父节点（有子节点）
+  if (hasChildren) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
+      checked: allChildrenSelected,
+      indeterminate: selectedChildrenCount > 0 && !allChildrenSelected,
+      disabled: option.disabled,
+      onClick: e => {
+        e.stopPropagation();
+        onClick?.(e);
+      },
+      onChange: () => {
+        if (!option.disabled) {
+          if (allChildrenSelected) {
+            // 取消选中该路径下的所有项
+            onValueChange(currentValue.filter(selectedPath => {
+              if (selectedPath.length <= currentPath.length) return true;
+              return !currentPath.every((val, idx) => selectedPath[idx] === val);
+            }));
+          } else {
+            // 选中该路径下的所有叶子节点
+            const leafPaths = (0, _countUtils.collectLeafPaths)(option.children, currentPath);
+            const otherValues = currentValue.filter(selectedPath => {
+              if (selectedPath.length <= currentPath.length) return true;
+              return !currentPath.every((val, idx) => selectedPath[idx] === val);
+            });
+            onValueChange([...otherValues, ...leafPaths]);
+          }
+        }
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+        children: option.label
+      })
+    });
+  }
+
+  // 叶子节点（无子节点）
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
+    checked: isExactMatch,
+    disabled: option.disabled,
+    onClick: e => {
+      e.stopPropagation();
+      onClick?.(e);
+    },
+    onChange: () => {
+      if (!option.disabled) {
+        if (isExactMatch) {
+          onValueChange(currentValue.filter(item => !(item.length === currentPath.length && item.every((val, idx) => val === currentPath[idx]))));
+        } else {
+          onValueChange([...currentValue, currentPath]);
+        }
+        // 叶子节点勾选后，触发回调（用于关闭右侧面板）
+        onAfterChange?.();
+      }
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+      children: option.label
+    })
+  });
+};
+exports.OptionCheckbox = OptionCheckbox;

package/lib/filter/components/FilterCascader/components/CascaderOption/OptionItem.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface OptionItemProps {
+    label: React.ReactNode;
+    hasChildren: boolean;
+    isSelected: boolean;
+    isMultiple: boolean;
+    prefixCls: string;
+}
+/**
+ * 级联选择器的选项文本显示组件（单选模式）
+ */
+export declare const OptionItem: React.FC<OptionItemProps>;
+export {};

package/lib/filter/components/FilterCascader/components/CascaderOption/OptionItem.js

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _theme = _interopRequireDefault(require("../../../../../theme"));
+var _icons = require("@oceanbase/icons");
+var _style = require("../../../../style");
+var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 级联选择器的选项文本显示组件（单选模式）
+ */
+const OptionItem = ({
+  label,
+  hasChildren,
+  isSelected,
+  isMultiple,
+  prefixCls
+}) => {
+  const {
+    token
+  } = _theme.default.useToken();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _style.getFilterCls)(prefixCls, 'text-ellipsis'),
+      style: {
+        flex: 1
+      },
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
+      align: "center",
+      gap: _constants.GAP_SIZE_SMALL,
+      children: [!isMultiple && !hasChildren && isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {
+        style: {
+          color: token.colorPrimary
+        }
+      }), hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
+        style: {
+          fontSize: _constants.ICON_SIZE,
+          color: token.colorTextSecondary
+        }
+      })]
+    })]
+  });
+};
+exports.OptionItem = OptionItem;

package/lib/filter/components/FilterCascader/components/FlatCascaderContent/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { CascaderOption } from '../../types';
+import type { FilterButtonRef } from '../../../FilterButton';
+interface FlatCascaderContentProps {
+    options: CascaderOption[];
+    currentValue: string[][];
+    multiple: boolean;
+    filterButtonRef: React.RefObject<FilterButtonRef>;
+    onValueChange: (value: string[][]) => void;
+}
+/**
+ * Flat 模式的级联内容容器组件
+ * 使用 antd 的 Cascader.Panel 实现多列展示
+ */
+export declare const FlatCascaderContent: React.FC<FlatCascaderContentProps>;
+export {};

package/lib/filter/components/FilterCascader/components/FlatCascaderContent/index.js

@@ -0,0 +1,70 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlatCascaderContent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 类型工具：根据 multiple 属性推断 Cascader.Panel 的 value 类型
+ * - 单选 (multiple=false): string[]
+ * - 多选 (multiple=true): string[][]
+ */
+/**
+ * Flat 模式的级联内容容器组件
+ * 使用 antd 的 Cascader.Panel 实现多列展示
+ */
+const FlatCascaderContent = ({
+  options,
+  currentValue,
+  filterButtonRef,
+  multiple = false,
+  onValueChange
+}) => {
+  // 将组件内部的值格式转换为 Cascader.Panel 需要的格式
+  // 组件内部：[[parent, child], ...] 或 [[parent, child]]
+  // Cascader.Panel：
+  //   - 单选 (multiple=false): string[]
+  //   - 多选 (multiple=true): string[][]
+
+  const cascaderValue = (0, _react.useMemo)(() => {
+    if (currentValue.length === 0) return undefined;
+    if (!multiple) {
+      // 单选：currentValue 是 [[parent, child]]，返回 [parent, child]
+      return currentValue[0];
+    } else {
+      // 多选：currentValue 是 [[parent, child], ...]
+      return currentValue;
+    }
+  }, [currentValue, multiple]);
+
+  // 处理 Cascader.Panel 的值变化
+  const handleCascaderChange = (value, _selectedOptions) => {
+    if (multiple) {
+      // 多选：value 是 string[][]，如 [['frontend', 'react'], ['backend', 'java']]
+      onValueChange(value);
+    } else {
+      // 单选：value 是 string[]，如 ['frontend', 'react']
+      onValueChange([value]);
+      filterButtonRef.current?.closePopover();
+    }
+  };
+
+  // 使用条件渲染来处理 multiple 属性的类型问题
+  return multiple ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Cascader.Panel, {
+    options: options,
+    value: cascaderValue,
+    onChange: handleCascaderChange,
+    multiple: multiple
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Cascader.Panel, {
+    options: options,
+    value: cascaderValue,
+    onChange: handleCascaderChange,
+    multiple: false
+  });
+};
+exports.FlatCascaderContent = FlatCascaderContent;

package/lib/filter/components/FilterCascader/components/NormalCascaderContent.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { CascaderOption } from '../types';
+import type { FilterButtonRef } from '../../FilterButton';
+interface NormalCascaderContentProps {
+    options: CascaderOption[];
+    currentValue: string[][];
+    multiple: boolean;
+    prefixCls: string;
+    openPopoverKey: string | null;
+    filterButtonRef: React.RefObject<FilterButtonRef>;
+    onOpenPopoverKeyChange: (key: string | null) => void;
+    onValueChange: (value: string[][]) => void;
+    onHandleChange: (parentValue: string, childValue: string) => void;
+    onClearByParent: (parentValue: string) => void;
+    onSelectAllChildren: (option: CascaderOption) => void;
+    showSearch?: boolean;
+    searchKeyword?: string;
+    onSearchChange?: (value: string) => void;
+}
+/**
+ * 非 Flat 模式的级联内容组件
+ */
+export declare const NormalCascaderContent: React.FC<NormalCascaderContentProps>;
+export {};