@fe-free/core 2.5.3 → 2.5.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 2.5.4
+
+### Patch Changes
+
+- feat: curd
+  - @fe-free/tool@2.5.4
+
 ## 2.5.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.5.3"
+    "@fe-free/tool": "2.5.4"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/ahooks/ahooks.stories.tsx

@@ -20,7 +20,6 @@ export default meta;
 
 const handleError = (event) => {
   console.log('global error', event);
-  alert('global error');
 };
 
 window.addEventListener('error', handleError);

package/src/crud/crud_of_simple.stories.tsx

@@ -7,6 +7,15 @@ const meta: Meta<typeof CRUDOfSimple> = {
   title: '@fe-free/core/CRUDOfSimple',
   component: CRUDOfSimple,
   tags: ['autodocs'],
+  decorators: [
+    (Story) => {
+      return (
+        <div className="c-border h-[500px] w-[300px] overflow-x-auto">
+          <Story />
+        </div>
+      );
+    },
+  ],
 };
 
 export default meta;

package/src/crud_of_pure/crud_of_pure.stories.tsx

@@ -0,0 +1,90 @@
+import { ProFormText } from '@ant-design/pro-components';
+import { CRUDOfPure } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from 'antd';
+import { fakeCreate, fakeDeleteByRecord, fakeRequest } from '../crud/demo/data';
+
+const meta: Meta<typeof CRUDOfPure> = {
+  title: '@fe-free/core/CRUDOfPure',
+  component: CRUDOfPure,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+CRUDOfPure 组件。（更简洁的 CRUD 组件）
+- 隐藏 label
+- 搜索表单按钮一行
+- 移除卡片布局
+`,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CRUDOfPure>;
+
+// 基础用法
+export const Normal: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+      {
+        title: 'city',
+        dataIndex: 'city',
+      },
+      {
+        title: 'area',
+        dataIndex: 'area',
+      },
+    ];
+
+    return (
+      <CRUDOfPure
+        actions={['delete']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          pagination: false,
+          search: {
+            optionRender: (_, __, dom) => {
+              return [
+                ...dom,
+                <Button key="1" type="primary" className="ml-2">
+                  额外的按钮
+                </Button>,
+              ];
+            },
+          },
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'id',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+      />
+    );
+  },
+};

package/src/crud_of_pure/index.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import type { CRUDMethods, CRUDProps } from '../crud';
+import { CRUD } from '../crud';
+import './style.scss';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface CRUDOfPureProps<
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+> extends CRUDProps<DataSource, Key> {
+  // nothing
+}
+
+function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRUDMethods>) {
+  const newColumns = props.tableProps.columns?.map((column) => {
+    if (column.search) {
+      return {
+        ...column,
+        // 隐藏 label
+        formItemProps: {
+          label: '',
+          ...column.formItemProps,
+        },
+        // 设置 placeholder
+        fieldProps: {
+          placeholder:
+            column.valueType === 'select' ? `请选择${column.title}` : `请输入${column.title}`,
+          ...column.fieldProps,
+        },
+      };
+    }
+    return column;
+  });
+
+  return (
+    <div className={classNames('fec-crud-of-pure')}>
+      <CRUD
+        ref={ref}
+        {...props}
+        tableProps={{
+          cardBordered: false,
+          ...props.tableProps,
+          columns: newColumns,
+        }}
+      />
+    </div>
+  );
+}
+
+const CRUDOfPure = forwardRef(CRUDOfPureComponent) as <
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+>(
+  props: CRUDOfPureProps<DataSource, Key> & { ref?: React.ForwardedRef<CRUDMethods> },
+) => JSX.Element;
+
+export { CRUDOfPure };
+export type { CRUDOfPureProps };

package/src/crud_of_pure/style.scss

@@ -0,0 +1,46 @@
+.fec-crud-of-pure {
+  .ant-pro-table .ant-pro-table-search {
+    margin-block-end: 0;
+  }
+
+  .ant-pro-query-filter.ant-pro-query-filter {
+    padding: 8px 16px;
+  }
+
+  .ant-pro-card .ant-pro-card-body {
+    padding-inline: 16px;
+  }
+
+  .ant-pro-query-filter-container {
+    .ant-col.ant-col-6,
+    .ant-col.ant-col-8,
+    .ant-col.ant-col-12 {
+      flex: none !important;
+      min-width: 150px !important;
+    }
+
+    .ant-col.ant-col-offset-6,
+    .ant-col.ant-col-offset-8,
+    .ant-col.ant-col-offset-12,
+    .ant-col.ant-col-offset-16,
+    .ant-col.ant-col-offset-24 {
+      margin-inline-start: 0 !important;
+    }
+
+    .ant-pro-query-filter-actions {
+      // 可能有问题
+      .ant-form-item-label {
+        display: none;
+      }
+    }
+
+    .ant-pro-query-filter-collapse-button {
+      display: none;
+    }
+  }
+
+  .ant-pro-table-list-toolbar-container {
+    padding-block: 0;
+    padding-block-end: 8px;
+  }
+}

package/src/index.ts

@@ -8,6 +8,8 @@ export type { CopyProps } from './copy';
 export { CoreApp } from './core_app';
 export { CRUD, CRUDDetail, CRUDOfSimple, OperateDelete, useDelete } from './crud';
 export type { CRUDDetailProps, CRUDMethods, CRUDOfSimpleProps, CRUDProps } from './crud';
+export { CRUDOfPure } from './crud_of_pure';
+export type { CRUDOfPureProps } from './crud_of_pure';
 export { Editor } from './editor';
 export type { EditorProps } from './editor';
 export { EditorJSON } from './editor_json';