@qin-ui/antd-vue-pro 1.1.25 → 2.0.0

package/README.md

@@ -1,360 +1,111 @@
-## antd-vue-pro
+# antd-vue-pro
 
-- [x] pro-component-provider
-- [x] pro-form
-- [x] pro-table
+> 二次封装 ant-design-vue 组件，提供 ProForm 和 ProTable 高级组件。
 
-#### 安装
+---
+
+## ✨ 特性
+
+- 🛡️ 基于 ant-design-vue 4+封装，支持 Vue 3.3+
+- 🔥 提供 ProForm 和 ProTable 高级组件
+- ⚙️ 支持表单字段动态生成、表格列动态配置
+
+---
+
+## 📦 安装
 
 ```javascript
 npm i @qin-ui/antd-vue-pro
 ```
 
-> 注意：从v1.0.x 升级至 v1.1.x 版本有api优化调整，主要涉及到pro-component-provider组件component-vars的参数扁平化，版本升级时需注意
+> 注意：2.0版本进行了逻辑重构，从v1.x 升级至 v2.x 版本有api调整，useForm/formData由ref调整为reactive
 
+---
 
+## 📚 组件文档
 
-#### 1. pro-component-provider
+### 1. ProComponentProvider
 
 组件接收参数名为component-vars的props，内部provide所接收的props供所有被包裹的组件inject
 
-##### API
+#### API
 
-+ Props
+- Props
 
   | 参数名         | 说明              | 类型          | 默认值 |
   | -------------- | ----------------- | ------------- | ------ |
   | component-vars | 需要provide的配置 | ComponentVars |        |
 
-  
+### 2. ProForm
 
-#### 2. pro-form
+ProForm 是基于 Ant Design Vue Form 的高级表单封装，提供了更简洁的表单数据管理和字段配置方式。
 
-ant-design-vue ui组件库form组件的二次封装
+#### 何时使用
 
-##### API
+- 需要通过配置生成表单而不是编写大量模板代码
+- 需要表单字段的动态增减
+- 需要统一表单布局和样式
 
-+ Props
+::: tip 配合 useForm 使用
+antd-vue-pro 导出了一个名为 `useForm` 的自定义 Hook，用于处理表单数据和字段配置， 配合`useForm` 可以更轻松地使用 ProForm。
+:::
 
-  | 参数名                                | 说明                                                         | 类型                                                         | 默认值 |
-  | ------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------ |
-  | form                                  | proform useForm返回对象，传递此参数后formData和fields参数将失效（推荐使用配套hook） | Form                                                         |        |
-  | grid                                  | 是否启用栅格布局                                             | boolean \| GridProps同[antdv Grid的RowProps](https://antdv.com/components/grid-cn/#api) |        |
-  | 继承ant-design-vue form组件的所有参数 | [查看文档](https://antdv.com/components/form-cn#api)         | ...                                                          |        |
+#### API
 
-- Emits
+- Props
 
-  | 事件参数名                            | 说明                                                 | 类型                  | 默认值 |
-  | ------------------------------------- | ---------------------------------------------------- | --------------------- | ------ |
-  | 继承ant-design-vue form组件的所有事件 | [查看文档](https://antdv.com/components/form-cn#api) | ...                   |        |
+| 参数名 | 说明                                    | 类型                                                              | 默认值 |
+| ------ | --------------------------------------- | ----------------------------------------------------------------- | ------ |
+| form   | useForm 返回对象                        | Form                                                              | -      |
+| grid   | 是否启用栅格布局                        | boolean \| [GridProps](https://antdv.com/components/grid-cn/#api) | -      |
+| ...    | 继承 Ant Design Vue Form 组件的所有参数 | [FormProps](https://antdv.com/components/form-cn/#form)           | -      |
 
-+ Expose
+- Events
 
-  | 参数名                                | 说明                                                    | 类型 | 默认值 |
-  | ------------------------------------- | ------------------------------------------------------- | ---- | ------ |
-  | 继承ant-design-vue form组件的所有方法 | [查看文档](https://antdv.com/components/form-cn#api)    | ...  |        |
+| 事件名 | 说明                                    | 类型                                                                   |
+| ------ | --------------------------------------- | ---------------------------------------------------------------------- |
+| ...    | 继承 Ant Design Vue Form 组件的所有事件 | [FormEvents](https://antdv.com/components/form-cn/#%E4%BA%8B%E4%BB%B6) |
 
+- Methods
 
+| 方法名 | 说明                                    | 类型                                                                    |
+| ------ | --------------------------------------- | ----------------------------------------------------------------------- |
+| ...    | 继承 Ant Design Vue Form 组件的所有方法 | [FormMethods](https://antdv.com/components/form-cn/#%E6%96%B9%E6%B3%95) |
 
-##### Types
+### 3. ProTable
 
-+ Field
+ProTable 是基于 Ant Design Vue Table 的高级表格封装，提供了搜索、分页等常用功能的集成。
 
-  表单字段类型 由某一个输入项（如Input、Select组件）参数类型+表单项（FormItem组件）参数类型+Grid布局组件Col的参数类型+公共拓展类型Common
+#### 何时使用
 
-  ```typescript
-  type Field = FieldType[keyof FieldType] & FormItemProps & GridItemProps & Common
-  ```
+- 需要通过配置生成表格而不是编写大量模板代码
+- 需要集成搜索表单和工具栏
+- 需要统一表格布局和样式
 
-  + 输入项参数类型FieldType
+::: tip 配合 useTable 使用
+antd-vue-pro 导出了一个名为 `useTable` 的自定义 Hook，用于处理表格数据和表格列配置， 配合`useTable` 可以更轻松地使用 ProTable。
+:::
 
-    ```typescript
-    export type FieldType = {
-      /** 文本框 */
-      'input': { component: 'input', slots?: InputSlots } & InputProps;
-      /** 文本域 */
-      'textarea': { component: 'textarea', slots?: InputSlots } & TextAreaProps;
-      /** 文本框-密码 */
-      'input-password': { component: 'input-password', slots?: InputSlots } & InputProps;
-      /** 文本框-搜索 */
-      'input-search': { component: 'input-search', slots?: InputSlots } & InputProps;
-      /** 数字文本框 */
-      'input-number': { component: 'input-number', slots?: InputNumberSlots } & InputNumberProps;
-      /** 下拉选择器 */
-      'select': { component: 'select', slots?: SelectSlots } & SelectProps;
-      /** 级联选择器 */
-      'cascader': { component: 'cascader', slots?: CascaderSlots } & CascaderProps;
-      /** 日期选择器 */
-      'date-picker': { component: 'date-picker', slots?: DatePickerSlots } & DatePickerProps;
-      /** 日期选择器-范围 */
-      'range-picker': { component: 'range-picker', slots?: DatePickerSlots } & DatePickerProps;
-      /** 时间选择器 */
-      'time-picker': { component: 'time-picker', slots?: TimePickerSlots } & TimePickerProps;
-      /** 复选框组 */
-      'checkbox-group': { component: 'checkbox-group' } & CheckboxGroupProps;
-      /** 单选框组 */
-      'radio-group': { component: 'radio-group' } & RadioGroupProps;
-      /** 开关 */
-      'switch': { component: 'switch', slots?: SwitchSlots } & SwitchProps;
-      /** 滑块 */
-      'slider': { component: 'slider', slots?: SliderSlots } & SliderProps;
-      /** 树形选择器 */
-      'tree-select': { component: 'tree-select', slots?: TreeSelectSlots } & TreeSelectProps;
-      /** 穿梭框 */
-      'transfer': { component: 'transfer' } & TransferProps;
-      /** 自定义组件 */
-      'custom': { component?: RenderComponentType } & Record<string, any>;
-    };
-    ```
-
-    [InputProps](https://antdv.com/components/input-cn/#input)
-
-    [TextAreaProps](https://antdv.com/components/input-cn/#textarea)
-
-    [InputNumberProps](https://antdv.com/components/input-number-cn#api)
-
-    [SelectProps](https://antdv.com/components/select-cn#select-props)
-
-    [CascaderProps](https://antdv.com/components/cascader-cn#api)
-
-    [DatePickerProps](https://antdv.com/components/date-picker-cn#%E5%85%B1%E5%90%8C%E7%9A%84-api)
-
-    [TimePickerProps](https://antdv.com/components/time-picker-cn#api)
-
-    [CheckboxGroupProps](https://antdv.com/components/checkbox-cn#checkbox-group)
-
-    [RadioGroupProps](https://antdv.com/components/radio-cn#radiogroup)
-
-    [SwitchProps](https://antdv.com/components/switch-cn#api)
-
-    [SliderProps](https://antdv.com/components/switch-cn#api)
-
-    [TreeSelectProps](https://antdv.com/components/tree-select-cn#tree-props)
-
-    [TransferProps](https://antdv.com/components/transfer-cn#api)
-
-  + 表单项参数类型FormItemProps
-
-    同ant-design-vue FormItemProps, [查看文档](https://antdv.com/components/form-cn#form-item)
-
-  + 栅格布局参数类型GridItemProps
-
-    同ant-design-vue ColProps, [查看文档](https://antdv.com/components/grid-cn/#col)
-
-  + 公共拓展参数类型Common
-
-    ```typescript
-    interface Common {
-      /** 标识key */
-      key?: string;
-      /** 中文名称 */
-      label?: SlotComponentType;
-      /** 插槽，可包含formItem插槽和component插槽 */
-      slots?: Partial<
-        Record<(typeof FORM_ITEM_SLOT_KEYS)[number], SlotComponentType>
-      >;
-      /** 网格布局属性 */
-      grid?: Grid;
-      /** 子字段 */
-      fields?: Array<Field>;
-      /** 是否隐藏 */
-      hidden?: boolean;
-      /** formItem样式属性 */
-      style?: CSSProperties;
-      /** formItem样式类名 */
-      className?: string;
-      /** formItem容器包裹组件 */
-      container?: ContainerComponent;
-      /** component样式属性 */
-      componentStyle?: CSSProperties;
-      /** component样式类名 */
-      componentClassName?: string;
-      /** component容器包裹组件 */
-      componentContainer?: ContainerComponent;
-      /**
-       * 值处理函数，onUpdateValue前执行，函数返回值将作为更新值
-       * @example (val) => val?.trim()
-       */
-      valueFormatter?: (val: any) => any;
-      /** 是否隐藏校验错误信息（需要浏览器支持has选择器） */
-      hideFeedback?: boolean;
-      /** 以data-form-item-开头的属性将会被渲染至formItem的dom节点 */
-      [key: `data-form-item-${string}`]: string;
-      /** 以data-component-开头的属性将会被渲染至component的dom节点 */
-      [key: `data-component-${string}`]: string;
-    }
-    ```
-
-+ UseForm
-
-  自定义hook，由数个hook（useFormData、useFields、useFormRef）内聚产生。接收两个参数（initFormData, initFields）返回一个对象
-
-  ```typescript
-  type Form = ReturnType<UseFields> & ReturnType<UseFormData> & ReturnType<UseFormRef>;
-  
-  type UseForm = <T extends FormData>(
-    initFormData?: T,
-    initFields?: Fields
-  ) => Form;
-  ```
-
-  ```typescript
-  /**
-   * @description useFields hook
-   * @param {Fields} initFields - 初始化表单字段
-   * @returns {Object} form
-   */
-  type UseFields = (initFields: Fields) => {
-    /** 表单字段Ref */
-    fields: Ref<Fields>;
-    /** 获取指定字段数据路径的字段配置 */
-    getField: GetField;
-    /** 设置指定字段数据路径的字段配置 */
-    setField: SetField;
-    /** 删除指定字段数据路径的字段配置 */
-    deleteField: DeleteField;
-    /** 根据字段数据路径获取字段配置路径 */
-    getFieldPath: GetFieldPath;
-    /** 在指定字段数据路径的字段配置后添加新的字段配置 */
-    appendField: AppendField;
-    /** 在指定字段数据路径的字段配置前插入新的字段配置 */
-    prependField: PrependField;
-    /** 获取指定字段数据路径的字段所在字段分组 */
-    getParentFields: GetParentFields;
-  };
-  
-  /**
-   * @description useFormData hook
-   * @param {array} initFormData - 初始化表单数据
-   * @returns {Object}
-   */
-  type UseFormData = (initFormData: FormData) => {
-    /** 表单数据Ref */
-    formData: Ref<D | FormData>;
-    /** 获取指定字段数据路径的值 */
-    getFormData: GetFormData;
-    /** 设置指定字段数据路径的值 */
-    setFormData: SetFormData;
-    /** 当前正在编辑的字段path */
-    activePath: Ref<string | undefined>;
-    /** 设置当前正在编辑的字段path */
-    setActivePath: SetActivePath;
-  };
-
-  /**
-   * @description useFormRef hook
-   * @returns {Object}
-   */
-  type UseFormRef = () => {
-    /** 表单组件实例引用Ref */
-    formRef: Ref<ProFormInstance | undefined>;
-  };
-  ```
-
-  
-
-##### Demo
-
-```vue
-<script lang="ts" setup>
-import {
-  ProForm,
-  useForm,
-  ProComponentProvider,
-  type ComponentVars,
-  type Field,
-  type Fields,
-} from '@qin-ui/antd-vue-pro/src';
-import { h, ref } from 'vue';
-
-const CodeContainer: Field['componentContainer'] = (p, ctx) => {
-  return h(
-    'div',
-    {
-      style: { display: 'flex', alignItems: 'center' },
-    },
-    [
-      ctx.slots.default?.(),
-      h(
-        'a',
-        {
-          style: { marginLeft: '10px', whiteSpace: 'nowrap' },
-          onClick: () => {
-            proFormRef.value?.validateFields('username');
-          },
-        },
-        '发送验证码'
-      ),
-    ]
-  );
-};
-
-const initFields: Fields = [
-  {
-    label: '登记所在地（省/市/县、区）',
-    key: '登记所在地（省/市/县、区）',
-    component: 'cascader',
-    slots: {},
-    options: [],
-  },
-  {
-    label: '用户名',
-    key: 'username',
-    component: 'input',
-    rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-  },
-  {
-    label: '密码',
-    key: 'password',
-    component: 'input',
-    type: 'password',
-    rules: [
-      { required: true, message: '请输入密码' },
-      { min: 4, message: '密码最小长度为5个字符' },
-      { max: 18, message: '密码最大长度为18个字符' },
-    ],
-    valueFormatter: val => val?.trim()
-  },
-  {
-    label: '验证码',
-    key: 'code',
-    component: 'input-number',
-    rules: [{ required: true, message: '请输入密码' }],
-    componentContainer: CodeContainer,
-  },
-];
-
-const form = useForm({}, initFields);
-const { formRef: proFormRef } = form
-
-const componentVars: ComponentVars = {
-  input: { maxlength: 50, valueFormatter: val => val?.trim() },
-  textarea: { maxlength: 1000, valueFormatter: val => val?.trim() },
-  'input-number': { max: 10 ** 12 - 1 },
-};
-
-const submit = () => {
-  proFormRef.value?.validate().then(() => {
-    console.log(form.formData.value);
-  });
-};
-</script>
-
-<template>
-  <div style="max-width: 500px; margin: 0 auto">
-    <h1>hello world</h1>
-
-    <ProComponentProvider :component-vars="componentVars">
-      <ProForm ref="proFormRef" :form="form" />
-    </ProComponentProvider>
-
-    <button @click="submit">提交</button>
-
-    <pre>{{ form.formData }}</pre>
-  </div>
-</template>
-
-<style scoped lang="less"></style>
+#### API
 
-```
+- Props
+
+| 参数名           | 说明                                                      | 类型                                                     | 默认值 |
+| ---------------- | --------------------------------------------------------- | -------------------------------------------------------- | ------ |
+| table            | useTable返回对象                                          | Object                                                   | -      |
+| search           | 表格数据查询获取方法                                      | Function                                                 | -      |
+| addIndexColumn   | 是否添加索引列                                            | boolean                                                  | -      |
+| immediateSearch  | onMounted 时立即触发一次search事件                        | boolean                                                  | -      |
+| control          | 是否展示表格 size 和 column 控制按钮                      | boolean                                                  | -      |
+| searchFormConfig | 索栏查询字段表单配置                                      | Object                                                   | -      |
+| tableContainer   | 表格容器包裹组件，会渲染在Table的外层，需要有default slot | Component                                                | -      |
+| ...              | 继承 Ant Design Vue Table 组件的所有参数                  | [TableProps](https://antdv.com/components/table-cn/#api) | -      |
+
+- Slots
 
+| 插槽名      | 说明           |
+| ----------- | -------------- |
+| search-form | 自定义搜索表单 |
+| button-bar  | 自定义按钮组   |
+| toolbar     | 自定义工具栏   |
+| table       | 自定义表格     |

package/es/antd-vue-pro.css

@@ -0,0 +1,52 @@
+.search-form[data-v-107a0198] .ant-form-item {
+  margin: 0;
+}
+.expand-toggle-button[data-v-107a0198] {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  padding-left: 4px;
+}
+.transition[data-v-107a0198] {
+  transition: all 0.25s;
+}
+.search-form-container[data-v-5904d9f4] {
+  margin-bottom: 24px;
+  padding: 24px;
+  background-color: #fff;
+}
+.table-container[data-v-f089d734] {
+  flex: 1;
+  padding: 24px 24px 0;
+  background-color: #fff;
+}
+.control-icon[data-v-d8e78b5b] {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.control-icon[data-v-d8e78b5b] :hover {
+  color: #1677ff;
+}
+.control-icon[data-v-88c80679] {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.control-icon[data-v-88c80679] :hover {
+  color: #1677ff;
+}
+.pro-table .pro-table-header[data-v-6701f35a] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.pro-table .pro-table-header[data-v-6701f35a]:empty {
+  display: none;
+}
+.pro-table .pro-table-header + .pro-table-content[data-v-6701f35a] {
+  margin-top: 16px;
+}
+.pro-table[data-v-6701f35a] .ant-pagination .ant-pagination-total-text {
+  flex: 1;
+}

package/es/component-provider/index-DtsWFG3s.js

@@ -0,0 +1,154 @@
+import { defineComponent, provide, renderSlot } from "vue";
+import { i as isPlainObject } from "../vendor/utils/lodash-es-Bu1KKNMo.js";
+const getPopupContainer = (triggerNode) => triggerNode.closest(".ant-form");
+const INJECT_CONFIG = {
+  "pro-table": {
+    injectionKey: Symbol(""),
+    default: {
+      pagination: {
+        showTotal: (total) => `共 ${total} 条`,
+        showSizeChanger: true,
+        pageSizeOptions: ["10", "20", "30", "40", "50", "100"],
+        showQuickJumper: true
+      },
+      searchFormConfig: {
+        layout: "grid",
+        expand: { minExpandRows: 2, expandStatus: false }
+      },
+      control: true,
+      addIndexColumn: true
+    }
+  },
+  "pro-form": {
+    injectionKey: Symbol(""),
+    default: { grid: { gutter: { xs: 8, sm: 16, md: 16, lg: 24 } } }
+  },
+  "pro-form-item": {
+    injectionKey: Symbol(""),
+    default: { validateFirst: true, span: 8 }
+  },
+  // field
+  input: {
+    injectionKey: Symbol(""),
+    default: { maxlength: 100, allowClear: true, placeholder: "请输入" }
+  },
+  textarea: {
+    injectionKey: Symbol(""),
+    default: {
+      maxlength: 200,
+      autoSize: { minRows: 3, maxRows: 6 },
+      showCount: true,
+      allowClear: true,
+      placeholder: "请输入"
+    }
+  },
+  "input-password": {
+    injectionKey: Symbol(""),
+    default: { maxlength: 100, allowClear: true, placeholder: "请输入" }
+  },
+  "input-search": {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  "input-number": {
+    injectionKey: Symbol(""),
+    default: {
+      max: 10 ** 15 - 1,
+      min: -1000000000000001,
+      controls: false,
+      placeholder: "请输入",
+      style: { width: "100%" }
+    }
+  },
+  select: {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, placeholder: "请选择", getPopupContainer }
+  },
+  cascader: {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, placeholder: "请选择", getPopupContainer }
+  },
+  "date-picker": {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
+  },
+  "date-picker.date": {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
+  },
+  "date-picker.week": {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
+  },
+  "date-picker.month": {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
+  },
+  "date-picker.year": {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
+  },
+  "date-picker.quarter": {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
+  },
+  "range-picker": {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
+  },
+  "time-picker": {
+    injectionKey: Symbol(""),
+    default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
+  },
+  "checkbox-group": {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  "radio-group": {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  switch: {
+    injectionKey: Symbol(""),
+    default: { modelName: "checked" }
+  },
+  slider: {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  "tree-select": {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  transfer: {
+    injectionKey: Symbol(""),
+    default: {}
+  }
+};
+function getObject(val) {
+  return isPlainObject(val) ? val : {};
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    componentVars: {}
+  },
+  setup(__props) {
+    const props = __props;
+    if (props.componentVars) {
+      Object.entries(props.componentVars).forEach(([key, val]) => {
+        const config = INJECT_CONFIG[key];
+        if (!config) return;
+        provide(config.injectionKey, { ...config.default, ...getObject(val) });
+      });
+    }
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+export {
+  INJECT_CONFIG as I,
+  _sfc_main as _,
+  getObject as g
+};