@pisell/materials 1.0.1034 → 1.0.1035

package/lib/components/pisellFilter/docs/PisellFilter.md

@@ -28,23 +28,23 @@ PisellFilter 是一个强大的筛选组件，基于 Ant Design Form 封装，
 ## 基础用法
 
 ```tsx
-import { useState } from 'react';
-import { PisellFilter } from '@pisell/materials';
+import {useState} from 'react';
+import {PisellFilter} from '@pisell/materials';
 
 const Demo = () => {
-  const [filterValue, setFilterValue] = useState({
-    quickFilter: [],
-    otherFilter: [],
-  });
-
-  return (
-    <PisellFilter
-      value={filterValue}
-      onChange={setFilterValue}
-      quickFilterMaxLength={5}
-      formFiltersPrefix="filter_"
-    />
-  );
+    const [filterValue, setFilterValue] = useState({
+        quickFilter: [],
+        otherFilter: [],
+    });
+
+    return (
+        <PisellFilter
+            value={filterValue}
+            onChange={setFilterValue}
+            quickFilterMaxLength={5}
+            formFiltersPrefix="filter_"
+        />
+    );
 };
 
 export default Demo;
@@ -54,22 +54,24 @@ export default Demo;
 
 ### PisellFilter Props
 
-| 参数                  | 说明                   | 类型                 | 默认值  | 版本 |
-| --------------------- | ---------------------- | -------------------- | ------- | ---- |
-| value                 | 筛选值                 | `FilterValueType`    | -       | -    |
-| onChange              | 筛选值变化回调         | `(value: FilterValueType) => void` | -       | -    |
-| hiddenQuickFilter     | 隐藏快速筛选           | `boolean`            | `true`  | -    |
-| hiddenOtherFilter     | 隐藏高级筛选           | `boolean`            | `false` | -    |
-| quickFilterMaxLength  | 快速筛选最大显示数量   | `number`             | `100`   | -    |
-| formFiltersPrefix     | 表单字段前缀           | `string`             | `''`    | -    |
-| renderItem            | 自定义渲染筛选项       | `(item: any, otherProps?: any) => ReactNode` | -       | -    |
+| 参数                   | 说明         | 类型                                           | 默认值       | 版本 |
+|----------------------|------------|----------------------------------------------|-----------|----|
+| value                | 筛选值        | `FilterValueType`                            | -         | -  |
+| onChange             | 筛选值变化回调    | `(value: FilterValueType) => void`           | -         | -  |
+| hiddenQuickFilter    | 隐藏快速筛选     | `boolean`                                    | `true`    | -  |
+| hiddenOtherFilter    | 隐藏高级筛选     | `boolean`                                    | `false`   | -  |
+| quickFilterMaxLength | 快速筛选最大显示数量 | `number`                                     | `100`     | -  |
+| formFiltersPrefix    | 表单字段前缀     | `string`                                     | `''`      | -  |
+| renderItem           | 自定义渲染筛选项   | `(item: any, otherProps?: any) => ReactNode` | -         | -  |
+| size                 | 筛选按钮尺寸     | `'small' \| 'middle' \| 'large'`             | `'large'` | -  |
+| placement            | 弹出层定位      | `Popover` 的 placement                        | -         | -  |
 
 ### FilterValueType
 
 ```typescript
 interface FilterValueType {
-  quickFilter: FilterItemProps[];  // 快速筛选项数组
-  otherFilter: FilterItemProps[];  // 高级筛选项数组
+    quickFilter: FilterItemProps[];  // 快速筛选项数组
+    otherFilter: FilterItemProps[];  // 高级筛选项数组
 }
 ```
 
@@ -77,17 +79,17 @@ interface FilterValueType {
 
 ```typescript
 interface FilterItemProps {
-  type: 'single' | 'input' | 'datePicker' | 'rangePicker' | 'search';  // 筛选类型
-  name?: string | string[];        // 字段名称
-  key: string;                     // 唯一标识
-  props: object;                   // 传递给筛选组件的属性
-  label?: string;                  // 显示标签
-  sort?: boolean;                  // 是否可排序
-  localFilter?: boolean;           // 是否本地筛选
-  other: Record<string, any>;      // 其他配置
-  isCustom?: boolean;              // 是否自定义
-  columnKey?: string;              // 列键值
-  isHidden?: boolean;              // 是否隐藏
+    type: 'single' | 'input' | 'datePicker' | 'rangePicker' | 'search';  // 筛选类型
+    name?: string | string[];        // 字段名称
+    key: string;                     // 唯一标识
+    props: object;                   // 传递给筛选组件的属性
+    label?: string;                  // 显示标签
+    sort?: boolean;                  // 是否可排序
+    localFilter?: boolean;           // 是否本地筛选
+    other: Record<string, any>;      // 其他配置
+    isCustom?: boolean;              // 是否自定义
+    columnKey?: string;              // 列键值
+    isHidden?: boolean;              // 是否隐藏
 }
 ```
 
@@ -96,38 +98,38 @@ interface FilterItemProps {
 ### 快速筛选模式
 
 ```tsx
-import { PisellFilter } from '@pisell/materials';
+import {PisellFilter} from '@pisell/materials';
 
 const Demo = () => {
-  const [filterValue, setFilterValue] = useState({
-    quickFilter: [
-      {
-        type: 'single',
-        key: 'status',
-        label: '状态',
-        name: 'status',
-        props: {
-          options: [
-            { label: '全部', value: 'all' },
-            { label: '启用', value: 'enabled' },
-            { label: '禁用', value: 'disabled' },
-          ],
-        },
-        other: {},
-      },
-    ],
-    otherFilter: [],
-  });
-
-  return (
-    <PisellFilter
-      value={filterValue}
-      onChange={setFilterValue}
-      hiddenQuickFilter={false}
-      hiddenOtherFilter={true}
-      quickFilterMaxLength={3}
-    />
-  );
+    const [filterValue, setFilterValue] = useState({
+        quickFilter: [
+            {
+                type: 'single',
+                key: 'status',
+                label: '状态',
+                name: 'status',
+                props: {
+                    options: [
+                        {label: '全部', value: 'all'},
+                        {label: '启用', value: 'enabled'},
+                        {label: '禁用', value: 'disabled'},
+                    ],
+                },
+                other: {},
+            },
+        ],
+        otherFilter: [],
+    });
+
+    return (
+        <PisellFilter
+            value={filterValue}
+            onChange={setFilterValue}
+            hiddenQuickFilter={false}
+            hiddenOtherFilter={true}
+            quickFilterMaxLength={3}
+        />
+    );
 };
 
 export default Demo;
@@ -136,41 +138,41 @@ export default Demo;
 ### 高级筛选模式
 
 ```tsx
-import { PisellFilter } from '@pisell/materials';
+import {PisellFilter} from '@pisell/materials';
 
 const Demo = () => {
-  const [filterValue, setFilterValue] = useState({
-    quickFilter: [],
-    otherFilter: [
-      {
-        type: 'input',
-        key: 'keyword',
-        label: '关键词',
-        name: 'keyword',
-        props: {
-          placeholder: '请输入关键词',
-        },
-        other: {},
-      },
-      {
-        type: 'datePicker',
-        key: 'created_at',
-        label: '创建时间',
-        name: 'created_at',
-        props: {},
-        other: {},
-      },
-    ],
-  });
-
-  return (
-    <PisellFilter
-      value={filterValue}
-      onChange={setFilterValue}
-      hiddenQuickFilter={true}
-      hiddenOtherFilter={false}
-    />
-  );
+    const [filterValue, setFilterValue] = useState({
+        quickFilter: [],
+        otherFilter: [
+            {
+                type: 'input',
+                key: 'keyword',
+                label: '关键词',
+                name: 'keyword',
+                props: {
+                    placeholder: '请输入关键词',
+                },
+                other: {},
+            },
+            {
+                type: 'datePicker',
+                key: 'created_at',
+                label: '创建时间',
+                name: 'created_at',
+                props: {},
+                other: {},
+            },
+        ],
+    });
+
+    return (
+        <PisellFilter
+            value={filterValue}
+            onChange={setFilterValue}
+            hiddenQuickFilter={true}
+            hiddenOtherFilter={false}
+        />
+    );
 };
 
 export default Demo;
@@ -179,48 +181,48 @@ export default Demo;
 ### 混合模式
 
 ```tsx
-import { PisellFilter } from '@pisell/materials';
+import {PisellFilter} from '@pisell/materials';
 
 const Demo = () => {
-  const [filterValue, setFilterValue] = useState({
-    quickFilter: [
-      {
-        type: 'single',
-        key: 'category',
-        label: '分类',
-        name: 'category',
-        props: {
-          options: [
-            { label: '全部', value: 'all' },
-            { label: '类型A', value: 'a' },
-            { label: '类型B', value: 'b' },
-          ],
-        },
-        other: {},
-      },
-    ],
-    otherFilter: [
-      {
-        type: 'rangePicker',
-        key: 'date_range',
-        label: '日期范围',
-        name: ['start_date', 'end_date'],
-        props: {},
-        other: {},
-      },
-    ],
-  });
-
-  return (
-    <PisellFilter
-      value={filterValue}
-      onChange={setFilterValue}
-      hiddenQuickFilter={false}
-      hiddenOtherFilter={false}
-      quickFilterMaxLength={5}
-      formFiltersPrefix="filter_"
-    />
-  );
+    const [filterValue, setFilterValue] = useState({
+        quickFilter: [
+            {
+                type: 'single',
+                key: 'category',
+                label: '分类',
+                name: 'category',
+                props: {
+                    options: [
+                        {label: '全部', value: 'all'},
+                        {label: '类型A', value: 'a'},
+                        {label: '类型B', value: 'b'},
+                    ],
+                },
+                other: {},
+            },
+        ],
+        otherFilter: [
+            {
+                type: 'rangePicker',
+                key: 'date_range',
+                label: '日期范围',
+                name: ['start_date', 'end_date'],
+                props: {},
+                other: {},
+            },
+        ],
+    });
+
+    return (
+        <PisellFilter
+            value={filterValue}
+            onChange={setFilterValue}
+            hiddenQuickFilter={false}
+            hiddenOtherFilter={false}
+            quickFilterMaxLength={5}
+            formFiltersPrefix="filter_"
+        />
+    );
 };
 
 export default Demo;
@@ -229,31 +231,31 @@ export default Demo;
 ### 自定义渲染
 
 ```tsx
-import { PisellFilter } from '@pisell/materials';
-import { Tag } from 'antd';
+import {PisellFilter} from '@pisell/materials';
+import {Tag} from 'antd';
 
 const Demo = () => {
-  const [filterValue, setFilterValue] = useState({
-    quickFilter: [],
-    otherFilter: [],
-  });
+    const [filterValue, setFilterValue] = useState({
+        quickFilter: [],
+        otherFilter: [],
+    });
+
+    const renderItem = (item: any, otherProps: any) => {
+        return (
+            <div style={{padding: '8px'}}>
+                <Tag color="blue">{item.label}</Tag>
+                {/* 自定义渲染逻辑 */}
+            </div>
+        );
+    };
 
-  const renderItem = (item: any, otherProps: any) => {
     return (
-      <div style={{ padding: '8px' }}>
-        <Tag color="blue">{item.label}</Tag>
-        {/* 自定义渲染逻辑 */}
-      </div>
+        <PisellFilter
+            value={filterValue}
+            onChange={setFilterValue}
+            renderItem={renderItem}
+        />
     );
-  };
-
-  return (
-    <PisellFilter
-      value={filterValue}
-      onChange={setFilterValue}
-      renderItem={renderItem}
-    />
-  );
 };
 
 export default Demo;
@@ -262,36 +264,36 @@ export default Demo;
 ### 本地筛选
 
 ```tsx
-import { PisellFilter } from '@pisell/materials';
+import {PisellFilter} from '@pisell/materials';
 
 const Demo = () => {
-  const [filterValue, setFilterValue] = useState({
-    quickFilter: [
-      {
-        type: 'single',
-        key: 'status',
-        label: '状态',
-        name: 'status',
-        props: {
-          options: [
-            { label: '全部', value: 'all' },
-            { label: '启用', value: 'enabled' },
-          ],
-        },
-        localFilter: true,  // 启用本地筛选
-        other: {},
-      },
-    ],
-    otherFilter: [],
-  });
-
-  return (
-    <PisellFilter
-      value={filterValue}
-      onChange={setFilterValue}
-      hiddenQuickFilter={false}
-    />
-  );
+    const [filterValue, setFilterValue] = useState({
+        quickFilter: [
+            {
+                type: 'single',
+                key: 'status',
+                label: '状态',
+                name: 'status',
+                props: {
+                    options: [
+                        {label: '全部', value: 'all'},
+                        {label: '启用', value: 'enabled'},
+                    ],
+                },
+                localFilter: true,  // 启用本地筛选
+                other: {},
+            },
+        ],
+        otherFilter: [],
+    });
+
+    return (
+        <PisellFilter
+            value={filterValue}
+            onChange={setFilterValue}
+            hiddenQuickFilter={false}
+        />
+    );
 };
 
 export default Demo;
@@ -305,18 +307,29 @@ export default Demo;
 
 ```typescript
 {
-  type: 'single',
-  key: 'status',
-  label: '状态',
-  name: 'status',
-  props: {
-    options: [
-      { label: '全部', value: 'all' },
-      { label: '启用', value: 'enabled' },
-      { label: '禁用', value: 'disabled' },
-    ],
-  },
-  other: {},
+    type: 'single',
+        key
+:
+    'status',
+        label
+:
+    '状态',
+        name
+:
+    'status',
+        props
+:
+    {
+        options: [
+            {label: '全部', value: 'all'},
+            {label: '启用', value: 'enabled'},
+            {label: '禁用', value: 'disabled'},
+        ],
+    }
+,
+    other: {
+    }
+,
 }
 ```
 
@@ -326,14 +339,25 @@ export default Demo;
 
 ```typescript
 {
-  type: 'input',
-  key: 'keyword',
-  label: '关键词',
-  name: 'keyword',
-  props: {
-    placeholder: '请输入关键词',
-  },
-  other: {},
+    type: 'input',
+        key
+:
+    'keyword',
+        label
+:
+    '关键词',
+        name
+:
+    'keyword',
+        props
+:
+    {
+        placeholder: '请输入关键词',
+    }
+,
+    other: {
+    }
+,
 }
 ```
 
@@ -343,14 +367,25 @@ export default Demo;
 
 ```typescript
 {
-  type: 'datePicker',
-  key: 'created_at',
-  label: '创建时间',
-  name: 'created_at',
-  props: {
-    format: 'YYYY-MM-DD',
-  },
-  other: {},
+    type: 'datePicker',
+        key
+:
+    'created_at',
+        label
+:
+    '创建时间',
+        name
+:
+    'created_at',
+        props
+:
+    {
+        format: 'YYYY-MM-DD',
+    }
+,
+    other: {
+    }
+,
 }
 ```
 
@@ -360,14 +395,25 @@ export default Demo;
 
 ```typescript
 {
-  type: 'rangePicker',
-  key: 'date_range',
-  label: '日期范围',
-  name: ['start_date', 'end_date'],
-  props: {
-    format: 'YYYY-MM-DD',
-  },
-  other: {},
+    type: 'rangePicker',
+        key
+:
+    'date_range',
+        label
+:
+    '日期范围',
+        name
+:
+    ['start_date', 'end_date'],
+        props
+:
+    {
+        format: 'YYYY-MM-DD',
+    }
+,
+    other: {
+    }
+,
 }
 ```
 
@@ -377,14 +423,25 @@ export default Demo;
 
 ```typescript
 {
-  type: 'search',
-  key: 'search',
-  label: '搜索',
-  name: 'search',
-  props: {
-    placeholder: '请输入搜索内容',
-  },
-  other: {},
+    type: 'search',
+        key
+:
+    'search',
+        label
+:
+    '搜索',
+        name
+:
+    'search',
+        props
+:
+    {
+        placeholder: '请输入搜索内容',
+    }
+,
+    other: {
+    }
+,
 }
 ```