@pointcloud/pcloud-components 0.1.32 → 0.1.34

package/README.md

@@ -10,15 +10,16 @@
 
 ### 表单组件
 
-| 组件名称    | 描述                                |
-| ----------- | ----------------------------------- |
-| DForm       | 基于 Ant Design Form 的增强表单组件 |
-| DInput      | 增强版输入框组件                    |
-| DSelect     | 支持异步加载的下拉选择组件          |
-| DCascader   | 支持异步加载的级联选择组件          |
-| DTreeSelect | 支持异步加载的树选择组件            |
-| DUpload     | 文件上传组件                        |
-| ColorPicker | 颜色选择器组件                      |
+| 组件名称     | 描述                                |
+| ------------ | ----------------------------------- |
+| DForm        | 基于 Ant Design Form 的增强表单组件 |
+| DInput       | 增强版输入框组件                    |
+| DSelect      | 支持异步加载的下拉选择组件          |
+| DCascader    | 支持异步加载的级联选择组件          |
+| DTreeSelect  | 支持异步加载的树选择组件            |
+| DUpload      | 文件上传组件                        |
+| DRangePicker | 日期选择组件                        |
+| ColorPicker  | 颜色选择器组件                      |
 
 ### 数据展示组件
 
@@ -33,6 +34,7 @@
 | IPAddress          | IP 地址输入组件  |
 | AnimatedScrollList | 动画滚动列表组件 |
 | OrgTree            | 组织树组件       |
+| TypewriterText     | 打字机组件       |
 
 ### 模态框组件
 
@@ -54,6 +56,7 @@
 | SignaturePad       | 签名板组件         |
 | RndDrag            | 可拖拽调整大小组件 |
 | RCropper           | 图片裁剪组件       |
+| CRUD               | CRUD 组件          |
 
 ## 🚀 安装
 
@@ -106,27 +109,32 @@ const App = () => {
   const onFinish = (values) => {
     console.log('表单值:', values);
   };
-
-  return (
-    <DForm onFinish={onFinish}>
-      <DForm.Item label="用户名" name="username">
-        <DInput placeholder="请输入用户名" />
-      </DForm.Item>
-
-      <DForm.Item label="状态" name="status">
-        <DSelect
-          options={[
-            { label: '启用', value: 1 },
-            { label: '禁用', value: 0 },
-          ]}
-        />
-      </DForm.Item>
-
-      <DForm.Item>
-        <button type="submit">提交</button>
-      </DForm.Item>
-    </DForm>
-  );
+  const items = [
+    {
+      label: '用户名',
+      name: 'username',
+      rules: [{ required: true, message: '请输入用户名' }],
+      renderType: 'input',
+    },
+    {
+      label: '状态',
+      name: 'status',
+      rules: [{ required: true, message: '请选择状态' }],
+      renderType: 'select',
+      options: [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
+      ],
+    },
+    {
+      label: '提交',
+      renderType: 'button',
+      type: 'primary',
+      htmlType: 'submit',
+    },
+  ];
+
+  return <DForm onFinish={onFinish} items={items}></DForm>;
 };
 
 export default App;
@@ -138,7 +146,7 @@ export default App;
 
 ## ⚙️ 环境支持
 
-- React >= 17.0.2
+- React < 18
 - Ant Design <= 4.24.16
 - Node >= 16.20.0
 - Modern browsers

package/dist/esm/AdvancedFilter/FormFilter.d.ts

@@ -1,4 +1,4 @@
-import { FProps } from './interface';
-import './styles/index.less';
-declare const _default: (props: FProps) => import("react/jsx-runtime").JSX.Element;
-export default _default;
+import { FProps } from './interface';
+import './styles/index.less';
+declare const _default: (props: FProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/esm/AdvancedFilter/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FilterProps } from './interface';
-import './styles/index.less';
-declare const AdvancedFilter: React.FC<FilterProps>;
-export default AdvancedFilter;
+import React from 'react';
+import { FilterProps } from './interface';
+import './styles/index.less';
+declare const AdvancedFilter: React.FC<FilterProps>;
+export default AdvancedFilter;

package/dist/esm/AdvancedFilter/interface.d.ts

@@ -1,101 +1,101 @@
-import React from 'react';
-export declare type FormItemType = 'input' | 'inputNumber' | 'radio' | 'select' | 'checkbox' | 'datePicker' | 'rangePicker' | 'switch' | 'treeSelect';
-export interface FormItem {
-    /**
-     * @description 筛选项label文字
-     */
-    label?: string;
-    /**
-     * @description 筛选项字段名
-     */
-    name: string;
-    /**
-     * @description 筛选项类型
-     */
-    type: FormItemType;
-    /**
-     * @description 筛选项placeholder
-     */
-    placeholder?: string;
-    /**
-     * @description 筛选项的配置项(select|treeSelect时可用)
-     */
-    options?: any[];
-    /**
-     * @description 筛选项的格式化配置(rangePicker|datePicker时可用)
-     */
-    format?: string;
-}
-export interface FormProps {
-    /**
-     * @description 筛选项配置
-     */
-    formItemConfig: FormItem[];
-    /**
-     * @description 筛选项值变更时触发
-     */
-    onValuesChange?: (_values: any) => void;
-    /**
-     * @description 点击查询按钮时触发
-     */
-    onSearch?: (_v: any) => void;
-    /**
-     * @description 点击重置按钮时触发
-     */
-    onReset?: () => void;
-}
-export interface FProps extends FormProps {
-    /**
-     * @description 显示查询/重置按钮
-     * @default true
-     */
-    showButton?: boolean;
-    /**
-     * @description 筛选项表单的Ref
-     */
-    formRef?: any;
-}
-export interface InputProps {
-    /**
-     * @description input检索框placeholder
-     */
-    placeholder?: string;
-    /**
-     * @description input检索框字段名
-     */
-    name: string;
-    /**
-     * @description input检索框回车时或点击检索图标时触发
-     */
-    inputSearch?: (_v: any) => void;
-}
-export interface FilterProps extends FormProps {
-    /**
-     * @description 左侧渲染区
-     */
-    left?: React.ReactNode;
-    /**
-     * @description 右侧渲染区
-     */
-    right?: React.ReactNode;
-    /**
-     * @description input检索框props
-     */
-    inputProps: InputProps;
-    /**
-     * @description children
-     */
-    children?: React.ReactNode;
-    /**
-     * @description 表单引用ref值
-     */
-    fRef?: any;
-    /**
-     * @description 筛选文字按钮图标
-     */
-    icon?: React.ReactNode;
-}
-export declare type AdvancedFilterProps = FilterProps;
-export declare type FormFilterProps = FProps;
-export declare type FotmItemProps = FormItem;
-export declare type InputSearchProps = InputProps;
+import React from 'react';
+export type FormItemType = 'input' | 'inputNumber' | 'radio' | 'select' | 'checkbox' | 'datePicker' | 'rangePicker' | 'switch' | 'treeSelect';
+export interface FormItem {
+    /**
+     * @description 筛选项label文字
+     */
+    label?: string;
+    /**
+     * @description 筛选项字段名
+     */
+    name: string;
+    /**
+     * @description 筛选项类型
+     */
+    type: FormItemType;
+    /**
+     * @description 筛选项placeholder
+     */
+    placeholder?: string;
+    /**
+     * @description 筛选项的配置项(select|treeSelect时可用)
+     */
+    options?: any[];
+    /**
+     * @description 筛选项的格式化配置(rangePicker|datePicker时可用)
+     */
+    format?: string;
+}
+export interface FormProps {
+    /**
+     * @description 筛选项配置
+     */
+    formItemConfig: FormItem[];
+    /**
+     * @description 筛选项值变更时触发
+     */
+    onValuesChange?: (_values: any) => void;
+    /**
+     * @description 点击查询按钮时触发
+     */
+    onSearch?: (_v: any) => void;
+    /**
+     * @description 点击重置按钮时触发
+     */
+    onReset?: () => void;
+}
+export interface FProps extends FormProps {
+    /**
+     * @description 显示查询/重置按钮
+     * @default true
+     */
+    showButton?: boolean;
+    /**
+     * @description 筛选项表单的Ref
+     */
+    formRef?: any;
+}
+export interface InputProps {
+    /**
+     * @description input检索框placeholder
+     */
+    placeholder?: string;
+    /**
+     * @description input检索框字段名
+     */
+    name: string;
+    /**
+     * @description input检索框回车时或点击检索图标时触发
+     */
+    inputSearch?: (_v: any) => void;
+}
+export interface FilterProps extends FormProps {
+    /**
+     * @description 左侧渲染区
+     */
+    left?: React.ReactNode;
+    /**
+     * @description 右侧渲染区
+     */
+    right?: React.ReactNode;
+    /**
+     * @description input检索框props
+     */
+    inputProps: InputProps;
+    /**
+     * @description children
+     */
+    children?: React.ReactNode;
+    /**
+     * @description 表单引用ref值
+     */
+    fRef?: any;
+    /**
+     * @description 筛选文字按钮图标
+     */
+    icon?: React.ReactNode;
+}
+export type AdvancedFilterProps = FilterProps;
+export type FormFilterProps = FProps;
+export type FotmItemProps = FormItem;
+export type InputSearchProps = InputProps;

package/dist/esm/AnimatedScrollList/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { IAnimatedScrollListProps } from './interface';
-import './styles/index.less';
-declare function AnimatedScrollList(props: IAnimatedScrollListProps): JSX.Element;
-export type { AnimatedScrollListProps } from './interface';
-declare const _default: React.MemoExoticComponent<typeof AnimatedScrollList>;
-export default _default;
+import React from 'react';
+import { IAnimatedScrollListProps } from './interface';
+import './styles/index.less';
+declare function AnimatedScrollList(props: IAnimatedScrollListProps): import("react/jsx-runtime").JSX.Element;
+export type { AnimatedScrollListProps } from './interface';
+declare const _default: React.MemoExoticComponent<typeof AnimatedScrollList>;
+export default _default;

package/dist/esm/AnimatedScrollList/interface.d.ts

@@ -1,71 +1,71 @@
-import React from 'react';
-export declare type ScrollDirection = 'up' | 'down' | 'left' | 'right';
-export interface IAnimatedScrollListProps {
-    /**
-     * @description 滚动方向
-     * @default 'up'
-     */
-    direction?: ScrollDirection;
-    /**
-     * @description 滚动速度，单位 px/s
-     * @default 50
-     */
-    speed?: number;
-    /**
-     * @description 是否在鼠标悬停时暂停滚动
-     * @default true
-     */
-    hoverStop?: boolean;
-    /**
-     * @description 是否自动开始滚动
-     * @default true
-     */
-    autoStart?: boolean;
-    /**
-     * @description 容器高度（垂直滚动时）或宽度（水平滚动时）
-     */
-    containerHeight?: number | string;
-    /**
-     * @description 容器宽度（水平滚动时）或高度（垂直滚动时）
-     */
-    containerWidth?: number | string;
-    /**
-     * @description 列表数据
-     */
-    data: any[];
-    /**
-     * @description 渲染列表项的方法
-     * @param item 列表项数据
-     * @param index 索引
-     * @returns React.ReactNode
-     */
-    renderItem: (_item: any, _index: number) => React.ReactNode;
-    /**
-     * @description 列表项的唯一标识字段，用于 key
-     * @default 'id'
-     */
-    itemKey?: string | ((_item: any, _index: number) => string | number);
-    /**
-     * @description 自定义类名
-     */
-    className?: string;
-    /**
-     * @description 自定义样式
-     */
-    style?: React.CSSProperties;
-    /**
-     * @description 是否显示滚动条
-     * @default false
-     */
-    showScrollbar?: boolean;
-    /**
-     * @description 当列表项数量不足一屏时是否仍然滚动
-     * @default false
-     */
-    scrollWhenInsufficient?: boolean;
-    /**
-     * @description 表头内容，传入后表头固定，内容区域自动滚动
-     */
-    header?: React.ReactNode;
-}
-export declare type AnimatedScrollListProps = IAnimatedScrollListProps;
+import React from 'react';
+export type ScrollDirection = 'up' | 'down' | 'left' | 'right';
+export interface IAnimatedScrollListProps {
+    /**
+     * @description 滚动方向
+     * @default 'up'
+     */
+    direction?: ScrollDirection;
+    /**
+     * @description 滚动速度，单位 px/s
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * @description 是否在鼠标悬停时暂停滚动
+     * @default true
+     */
+    hoverStop?: boolean;
+    /**
+     * @description 是否自动开始滚动
+     * @default true
+     */
+    autoStart?: boolean;
+    /**
+     * @description 容器高度（垂直滚动时）或宽度（水平滚动时）
+     */
+    containerHeight?: number | string;
+    /**
+     * @description 容器宽度（水平滚动时）或高度（垂直滚动时）
+     */
+    containerWidth?: number | string;
+    /**
+     * @description 列表数据
+     */
+    data: any[];
+    /**
+     * @description 渲染列表项的方法
+     * @param item 列表项数据
+     * @param index 索引
+     * @returns React.ReactNode
+     */
+    renderItem: (_item: any, _index: number) => React.ReactNode;
+    /**
+     * @description 列表项的唯一标识字段，用于 key
+     * @default 'id'
+     */
+    itemKey?: string | ((_item: any, _index: number) => string | number);
+    /**
+     * @description 自定义类名
+     */
+    className?: string;
+    /**
+     * @description 自定义样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description 是否显示滚动条
+     * @default false
+     */
+    showScrollbar?: boolean;
+    /**
+     * @description 当列表项数量不足一屏时是否仍然滚动
+     * @default false
+     */
+    scrollWhenInsufficient?: boolean;
+    /**
+     * @description 表头内容，传入后表头固定，内容区域自动滚动
+     */
+    header?: React.ReactNode;
+}
+export type AnimatedScrollListProps = IAnimatedScrollListProps;

package/dist/esm/AspectRatio/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-export interface AspectRatioProps {
-    ratio?: number;
-    className?: string;
-    children: React.ReactNode;
-    style?: React.CSSProperties;
-}
-declare function AspectRatio({ ratio, className, children, style }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
-export default AspectRatio;
+import React from 'react';
+export interface AspectRatioProps {
+    ratio?: number;
+    className?: string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}
+declare function AspectRatio({ ratio, className, children, style }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
+export default AspectRatio;

package/dist/esm/AuthComponent/index.d.ts

@@ -1,3 +1,3 @@
-import { IAuthComponentProps } from './interface';
-declare const AuthComponent: ({ value, noAuthContent, children, authList, fieldName }: IAuthComponentProps) => import("react/jsx-runtime").JSX.Element;
-export default AuthComponent;
+import { IAuthComponentProps } from './interface';
+declare const AuthComponent: ({ value, noAuthContent, children, authList, fieldName }: IAuthComponentProps) => import("react/jsx-runtime").JSX.Element;
+export default AuthComponent;

package/dist/esm/AuthComponent/interface.d.ts

@@ -1,24 +1,24 @@
-import React from 'react';
-export interface IAuthComponentProps {
-    /**
-     * @description 权限值
-     */
-    value: string | number | boolean;
-    /**
-     * @description 权限列表中的字段名称
-     */
-    fieldName?: string;
-    /**
-     * @description 权限列表数据
-     */
-    authList: any[];
-    /**
-     * @description 无权限时显示的内容
-     */
-    noAuthContent?: React.ReactNode;
-    /**
-     * @description 有权限时显示的内容
-     */
-    children?: React.ReactNode;
-}
-export declare type AuthComponentProps = IAuthComponentProps;
+import React from 'react';
+export interface IAuthComponentProps {
+    /**
+     * @description 权限值
+     */
+    value: string | number | boolean;
+    /**
+     * @description 权限列表中的字段名称
+     */
+    fieldName?: string;
+    /**
+     * @description 权限列表数据
+     */
+    authList: any[];
+    /**
+     * @description 无权限时显示的内容
+     */
+    noAuthContent?: React.ReactNode;
+    /**
+     * @description 有权限时显示的内容
+     */
+    children?: React.ReactNode;
+}
+export type AuthComponentProps = IAuthComponentProps;

package/dist/esm/CRUD/config.d.ts

@@ -0,0 +1,2 @@
+import type { DFormProps } from '../DForm';
+export declare const SearchButtons: DFormProps['items'];

package/dist/esm/CRUD/config.js

@@ -0,0 +1,21 @@
+import { RedoOutlined, SearchOutlined } from '@ant-design/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SearchButtons = [{
+  label: '搜索',
+  renderType: 'button',
+  icon: /*#__PURE__*/_jsx(SearchOutlined, {}),
+  type: 'primary',
+  htmlType: 'submit',
+  style: {
+    marginBottom: 24,
+    marginRight: 16
+  }
+}, {
+  label: '重置',
+  renderType: 'button',
+  icon: /*#__PURE__*/_jsx(RedoOutlined, {}),
+  htmlType: 'reset',
+  style: {
+    marginBottom: 24
+  }
+}];