@qin-ui/element-plus-pro 1.0.3 → 1.0.4

package/api.json

@@ -0,0 +1,222 @@
+{
+  "generatedAt": "2026-05-26T08:14:28.580Z",
+  "name": "@qin-ui/element-plus-pro",
+  "api": [
+    {
+      "name": "ProComponentProvider",
+      "type": "component",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "<ProComponentProvider>",
+      "description": "@qin-ui/element-plus-pro 全局配置提供者组件\n用于在组件树的顶层配置所有子组件的全局默认属性。",
+      "examples": [
+        "```vue\n<ProComponentProvider\n:componentVars=\"{ 'input': { placeholder: '请输入' } }\"\n>\n<ProForm :form=\"form\" :fields=\"fields\" />\n</ProComponentProvider>\n```"
+      ]
+    },
+    {
+      "name": "ProForm",
+      "type": "component",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "<ProForm>",
+      "description": "@qin-ui/element-plus-pro 配置驱动表单组件\n通过配置驱动的方式快速构建表单，支持：\n- 字段联动、嵌套字段、自定义组件、网格布局",
+      "typeParams": [
+        {
+          "name": "F"
+        }
+      ]
+    },
+    {
+      "name": "ContainerFragment",
+      "type": "component",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "<ContainerFragment>",
+      "description": "容器分片渲染组件。用于动态渲染表单行或表单项的外部包裹容器（例如 Grid 行、Col 列等布局容器）。"
+    },
+    {
+      "name": "SlotComponent",
+      "type": "component",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "<SlotComponent>",
+      "description": "插槽渲染辅助组件。用于在表单或表格的自定义插槽中动态渲染外部传入的 VNode、渲染函数或静态字符串。"
+    },
+    {
+      "name": "ComponentMap",
+      "type": "interface",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export interface ComponentMap {}",
+      "description": "组件映射扩展接口\n暴露给外部扩充自定义组件类型的接口。\n用户可通过 TypeScript 的声明合并（module augmentation）添加自定义组件。",
+      "examples": [
+        "```ts\ndeclare module '@qin-ui/element-plus-pro' {\ninterface ComponentMap {\n'my-custom-input': typeof MyCustomInput;\n}\n}\n```"
+      ]
+    },
+    {
+      "name": "ComponentName",
+      "type": "type",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export type ComponentName =\n  | keyof BaseComponentMap\n  | keyof ComponentMap\n  | 'custom';",
+      "description": "组件名称联合类型\n所有支持的组件名称"
+    },
+    {
+      "name": "useFormData",
+      "type": "function",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export const useFormData = <D extends Data = Data>(\n  initFormData?: ExtendWithAny<DeepPartial<D>>\n) =>",
+      "description": "表单数据处理 Hook\n提供响应式表单数据的管理能力，支持：\n- 响应式数据存储（基于 Vue reactive）\n- 深层路径读写（支持点号分隔，如 'address.city'）\n- 类型安全的路径提示（传入泛型 D 后，path 参数可获得类型推导）\n- 父子表单自动注入（非根表单会从注入中获取数据）",
+      "returns": "{Function} .setFormData(path, value) - 设置指定路径的数据",
+      "typeParams": [
+        {
+          "name": "D"
+        }
+      ],
+      "examples": [
+        "```ts\ninterface User { name: string; age: number; address: { city: string } }\n\nconst { formData, getFormData, setFormData } = useFormData<User>({\nname: '张三',\naddress: { city: '北京' }\n})\n\n// 读取\ngetFormData('name')           // '张三'\ngetFormData('address.city')   // '北京'\nformData.name                 // '张三'（响应式）\n\n// 设置\nsetFormData('name', '李四')\nsetFormData('address.city', '上海')\nsetFormData({ name: '王五', age: 30 }) // 批量覆盖\nsetFormData(prev => ({ ...prev, name: '赵六' })) // 函数式更新\n```"
+      ]
+    },
+    {
+      "name": "useFields",
+      "type": "function",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export const useFields = _useFields as",
+      "description": "类型安全的 re-export。将 core useFields 的泛型参数绑定为本地类型：\n- 字段类型 F → Field<ComponentName, D>（支持 Element Plus 组件类型推导）\n- FormItem 实例 → Element Plus 的 FormItemInstance",
+      "typeParams": [
+        {
+          "name": "D"
+        }
+      ],
+      "examples": [
+        "```ts\ninterface User { name: string; age: number }\n\nconst { fields, getField, setField } = useFields<User>([\n{ path: 'name', label: '姓名', component: 'input' },\n{ path: 'age', label: '年龄', component: 'input-number' },\n])\n```"
+      ]
+    },
+    {
+      "name": "UseFields",
+      "type": "type",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export type UseFields<D extends Data = Data> = ReturnType<typeof useFields<D>>;",
+      "description": "useFields 返回值类型，固定为本地 Fields<D>"
+    },
+    {
+      "name": "Form",
+      "type": "type",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export type Form<\n  D extends Data = Data,\n  F extends Field<ComponentName, D> = Field<ComponentName, D>,\n> = _Form<D, F, FormInstance>;",
+      "description": "在 core Form 类型的基础上：\n1. 将字段类型 F 默认绑定为本地 Field<ComponentName, D>，支持 Element Plus 所有内置组件类型\n2. 将底层表单实例 I 绑定为 Element Plus 的 FormInstance，使 formRef 获得完整的类型提示",
+      "typeParams": [
+        {
+          "name": "D"
+        },
+        {
+          "name": "F"
+        }
+      ]
+    },
+    {
+      "name": "useForm",
+      "type": "function",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export const useForm = _useForm as",
+      "description": "创建 @qin-ui/element-plus-pro 表单实例的 Hook\n类型安全的 re-export。将 core useForm 的泛型参数绑定为本地类型：\n- 字段类型 F → Field<ComponentName, D>（支持 Element Plus 组件类型推导）\n- 表单实例 → Element Plus 的 FormInstance",
+      "typeParams": [
+        {
+          "name": "D"
+        }
+      ],
+      "examples": [
+        "```ts\ninterface User { name: string; age: number }\n\nconst form = useForm<User>(\n{ name: '张三', age: 25 },\n[\n{ path: 'name', label: '姓名', component: 'input' },\n{ path: 'age', label: '年龄', component: 'input-number' },\n]\n)\n```"
+      ]
+    },
+    {
+      "name": "useFormRef",
+      "type": "function",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export const useFormRef = _useFormRef as",
+      "description": "类型安全的 re-export。将 core useFormRef 的泛型参数绑定为 Element Plus 的 FormInstance，\n使 formRef 获取到完整的 Element Plus Form 组件 API 类型提示。",
+      "returns": "{Function} .setFormRef(inst) - 设置表单组件实例",
+      "examples": [
+        "```ts\nconst { formRef, setFormRef } = useFormRef()\nawait formRef.value?.validate()\nformRef.value?.resetFields()\n```"
+      ]
+    },
+    {
+      "name": "Field",
+      "type": "type",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export type Field<\n  C extends ComponentName = ComponentName,\n  D extends Data = Data,\n> =\n  | (FieldTypeMap<D>[C] &",
+      "description": "字段配置类型，包含所有字段属性和响应式支持",
+      "typeParams": [
+        {
+          "name": "D"
+        }
+      ]
+    },
+    {
+      "name": "Fields",
+      "type": "type",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export type Fields<D extends Data = Data> = Array<Field<ComponentName, D>>;",
+      "description": "字段数组类型",
+      "typeParams": [
+        {
+          "name": "D"
+        }
+      ]
+    },
+    {
+      "name": "ColumnScope",
+      "type": "type",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export type ColumnScope<D extends Data = Data> =",
+      "description": "Element Plus 表格列作用域",
+      "typeParams": [
+        {
+          "name": "D"
+        }
+      ]
+    },
+    {
+      "name": "Column",
+      "type": "type",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export type Column<D extends Data = Data> = Partial<\n  Omit<ColumnType<any>, 'prop' | 'property' | 'children' | 'render'>\n> &",
+      "description": "基于 Element Plus 的 ColumnType 列类型，并添加：\n- prop 作为主要字段（Element Plus 使用 prop 而非 dataIndex）\n- key 作为辅助标识\n- hidden 属性\n- render 自定义渲染函数",
+      "typeParams": [
+        {
+          "name": "D"
+        }
+      ],
+      "examples": [
+        "```ts\ninterface User { name: string; age: number }\n\nconst columns: Columns<User> = [\n{ prop: 'name', label: '姓名', width: 120 },\n{ prop: 'age', label: '年龄', width: 80 },\n]\n```"
+      ]
+    },
+    {
+      "name": "Table",
+      "type": "type",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export type Table<\n  D extends Data = Data,\n  T extends Data = ExtendWithAny<D>,\n> = Omit<_Table<D, T, Column<T>>, 'dataSource'> &",
+      "description": "在 core Table 类型的基础上：\n1. 将列类型 C 绑定为本地 Column<T>\n2. 将 dataSource 重命名为 data（Element Plus 使用 data 而非 dataSource）",
+      "typeParams": [
+        {
+          "name": "D"
+        },
+        {
+          "name": "T"
+        }
+      ]
+    },
+    {
+      "name": "useTable",
+      "type": "function",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "export const useTable = <\n  D extends Data = Data,\n  T extends Data = ExtendWithAny<D>,\n>(\n  params: UseTableParams<D, T> = {}",
+      "description": "创建 @qin-ui/element-plus-pro 表格实例的 Hook\n基于 core useTable 封装，适配 Element Plus 的 API 风格：\n- 数据源使用 `data` 而非 `dataSource`",
+      "typeParams": [
+        {
+          "name": "D"
+        },
+        {
+          "name": "T"
+        }
+      ],
+      "examples": [
+        "```ts\ninterface User { name: string; age: number }\n\nconst table = useTable<User>({\ncolumns: [\n{ prop: 'name', title: '姓名', width: 120 },\n{ prop: 'age', title: '年龄', width: 80 },\n],\ndata: [],\npageParam: { current: 1, pageSize: 20, total: 0 },\n})\n```"
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,220 @@
+import { defineComponent, provide, renderSlot } from "vue";
+import { g as getObject } from "../core/index-C0Pbv44C.js";
+const INJECT_CONFIG = {
+  "pro-table": {
+    injectionKey: Symbol(""),
+    default: {
+      pagination: {
+        layout: "total, sizes, prev, pager, next, jumper",
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        background: true
+      },
+      searchFormConfig: {
+        layout: "grid",
+        expand: { minExpandRows: 2, expandStatus: false }
+      },
+      control: true,
+      addIndexColumn: true
+    }
+  },
+  "pro-form": {
+    injectionKey: Symbol(""),
+    default: { grid: { gutter: 24 } }
+  },
+  "pro-form-item": {
+    injectionKey: Symbol(""),
+    default: { span: 8 }
+  },
+  input: {
+    injectionKey: Symbol(""),
+    default: { maxlength: 100, clearable: true, placeholder: "请输入" }
+  },
+  "input.textarea": {
+    injectionKey: Symbol(""),
+    default: {
+      maxlength: 200,
+      autosize: { minRows: 3, maxRows: 6 },
+      showWordLimit: true,
+      clearable: true,
+      placeholder: "请输入"
+    }
+  },
+  "input.password": {
+    injectionKey: Symbol(""),
+    default: {
+      showPassword: true,
+      maxlength: 100,
+      clearable: true,
+      placeholder: "请输入"
+    }
+  },
+  "input-number": {
+    injectionKey: Symbol(""),
+    default: {
+      max: 10 ** 15 - 1,
+      min: -1000000000000001,
+      controls: false,
+      placeholder: "请输入",
+      style: { width: "100%" }
+    }
+  },
+  autocomplete: {
+    injectionKey: Symbol(""),
+    default: { clearable: true, placeholder: "请输入" }
+  },
+  select: {
+    injectionKey: Symbol(""),
+    default: { clearable: true, placeholder: "请选择" }
+  },
+  cascader: {
+    injectionKey: Symbol(""),
+    default: { clearable: true, placeholder: "请选择" }
+  },
+  "date-picker": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.date": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.dates": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.daterange": {
+    injectionKey: Symbol(""),
+    default: {
+      style: { width: "100%" },
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期"
+    }
+  },
+  "date-picker.week": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.month": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.monthrange": {
+    injectionKey: Symbol(""),
+    default: {
+      style: { width: "100%" },
+      startPlaceholder: "开始月份",
+      endPlaceholder: "结束月份"
+    }
+  },
+  "date-picker.months": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.yearrange": {
+    injectionKey: Symbol(""),
+    default: {
+      style: { width: "100%" },
+      startPlaceholder: "开始年份",
+      endPlaceholder: "结束年份"
+    }
+  },
+  "date-picker.year": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.years": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.datetime": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.datetimerange": {
+    injectionKey: Symbol(""),
+    default: {
+      style: { width: "100%" },
+      startPlaceholder: "开始时间",
+      endPlaceholder: "结束时间"
+    }
+  },
+  "time-picker": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "time-select": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "checkbox-group": {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  "radio-group": {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  switch: {
+    injectionKey: Symbol(""),
+    default: { modelProp: "modelValue" }
+  },
+  slider: {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  "tree-select": {
+    injectionKey: Symbol(""),
+    default: { clearable: true, placeholder: "请选择" }
+  },
+  transfer: {
+    injectionKey: Symbol(""),
+    default: {}
+  }
+};
+const INJECT_COMPONENTS = Symbol("INJECT_COMPONENTS");
+const DYNAMIC_INJECT_CONFIG = /* @__PURE__ */ Object.create(null);
+const getInjectConfig = (key) => {
+  return INJECT_CONFIG[key] || DYNAMIC_INJECT_CONFIG[key];
+};
+const ensureInjectConfig = (key) => {
+  const existing = getInjectConfig(key);
+  if (existing) return existing;
+  const created = {
+    injectionKey: Symbol(`dynamic:${key}`),
+    default: {}
+  };
+  DYNAMIC_INJECT_CONFIG[key] = created;
+  return created;
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ProComponentProvider",
+    inheritAttrs: false
+  },
+  __name: "index",
+  props: {
+    componentVars: {},
+    componentMap: {}
+  },
+  setup(__props) {
+    const props = __props;
+    if (props.componentVars) {
+      Object.entries(props.componentVars).forEach(([key, val]) => {
+        const config = ensureInjectConfig(key);
+        provide(config.injectionKey, { ...config.default, ...getObject(val) });
+      });
+    }
+    if (props.componentMap) {
+      provide(INJECT_COMPONENTS, props.componentMap);
+    }
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+export {
+  INJECT_CONFIG as I,
+  _sfc_main as _,
+  INJECT_COMPONENTS as a,
+  getInjectConfig as g
+};

package/es/component-provider/index.js

@@ -1,220 +1,4 @@
-import { defineComponent, provide, renderSlot } from "vue";
-import { g as getObject } from "../core/index-DVXUNE-L.js";
-const INJECT_CONFIG = {
-  "pro-table": {
-    injectionKey: Symbol(""),
-    default: {
-      pagination: {
-        layout: "total, sizes, prev, pager, next, jumper",
-        pageSizes: [10, 20, 30, 40, 50, 100],
-        background: true
-      },
-      searchFormConfig: {
-        layout: "grid",
-        expand: { minExpandRows: 2, expandStatus: false }
-      },
-      control: true,
-      addIndexColumn: true
-    }
-  },
-  "pro-form": {
-    injectionKey: Symbol(""),
-    default: { grid: { gutter: 24 } }
-  },
-  "pro-form-item": {
-    injectionKey: Symbol(""),
-    default: { span: 8 }
-  },
-  input: {
-    injectionKey: Symbol(""),
-    default: { maxlength: 100, clearable: true, placeholder: "请输入" }
-  },
-  "input.textarea": {
-    injectionKey: Symbol(""),
-    default: {
-      maxlength: 200,
-      autosize: { minRows: 3, maxRows: 6 },
-      showWordLimit: true,
-      clearable: true,
-      placeholder: "请输入"
-    }
-  },
-  "input.password": {
-    injectionKey: Symbol(""),
-    default: {
-      showPassword: true,
-      maxlength: 100,
-      clearable: true,
-      placeholder: "请输入"
-    }
-  },
-  "input-number": {
-    injectionKey: Symbol(""),
-    default: {
-      max: 10 ** 15 - 1,
-      min: -1000000000000001,
-      controls: false,
-      placeholder: "请输入",
-      style: { width: "100%" }
-    }
-  },
-  autocomplete: {
-    injectionKey: Symbol(""),
-    default: { clearable: true, placeholder: "请输入" }
-  },
-  select: {
-    injectionKey: Symbol(""),
-    default: { clearable: true, placeholder: "请选择" }
-  },
-  cascader: {
-    injectionKey: Symbol(""),
-    default: { clearable: true, placeholder: "请选择" }
-  },
-  "date-picker": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "date-picker.date": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "date-picker.dates": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "date-picker.daterange": {
-    injectionKey: Symbol(""),
-    default: {
-      style: { width: "100%" },
-      startPlaceholder: "开始日期",
-      endPlaceholder: "结束日期"
-    }
-  },
-  "date-picker.week": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "date-picker.month": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "date-picker.monthrange": {
-    injectionKey: Symbol(""),
-    default: {
-      style: { width: "100%" },
-      startPlaceholder: "开始月份",
-      endPlaceholder: "结束月份"
-    }
-  },
-  "date-picker.months": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "date-picker.yearrange": {
-    injectionKey: Symbol(""),
-    default: {
-      style: { width: "100%" },
-      startPlaceholder: "开始年份",
-      endPlaceholder: "结束年份"
-    }
-  },
-  "date-picker.year": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "date-picker.years": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "date-picker.datetime": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "date-picker.datetimerange": {
-    injectionKey: Symbol(""),
-    default: {
-      style: { width: "100%" },
-      startPlaceholder: "开始时间",
-      endPlaceholder: "结束时间"
-    }
-  },
-  "time-picker": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "time-select": {
-    injectionKey: Symbol(""),
-    default: { style: { width: "100%" }, placeholder: "请选择" }
-  },
-  "checkbox-group": {
-    injectionKey: Symbol(""),
-    default: {}
-  },
-  "radio-group": {
-    injectionKey: Symbol(""),
-    default: {}
-  },
-  switch: {
-    injectionKey: Symbol(""),
-    default: { modelProp: "modelValue" }
-  },
-  slider: {
-    injectionKey: Symbol(""),
-    default: {}
-  },
-  "tree-select": {
-    injectionKey: Symbol(""),
-    default: { clearable: true, placeholder: "请选择" }
-  },
-  transfer: {
-    injectionKey: Symbol(""),
-    default: {}
-  }
-};
-const INJECT_COMPONENTS = Symbol("INJECT_COMPONENTS");
-const DYNAMIC_INJECT_CONFIG = /* @__PURE__ */ Object.create(null);
-const getInjectConfig = (key) => {
-  return INJECT_CONFIG[key] || DYNAMIC_INJECT_CONFIG[key];
-};
-const ensureInjectConfig = (key) => {
-  const existing = getInjectConfig(key);
-  if (existing) return existing;
-  const created = {
-    injectionKey: Symbol(`dynamic:${key}`),
-    default: {}
-  };
-  DYNAMIC_INJECT_CONFIG[key] = created;
-  return created;
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "index",
-  props: {
-    componentVars: {},
-    componentMap: {}
-  },
-  setup(__props) {
-    const props = __props;
-    if (props.componentVars) {
-      Object.entries(props.componentVars).forEach(([key, val]) => {
-        const config = ensureInjectConfig(key);
-        provide(config.injectionKey, { ...config.default, ...getObject(val) });
-      });
-    }
-    if (props.componentMap) {
-      provide(INJECT_COMPONENTS, props.componentMap);
-    }
-    return (_ctx, _cache) => {
-      return renderSlot(_ctx.$slots, "default");
-    };
-  }
-});
+import { _ } from "./index-Bmx9Q9Q-.js";
 export {
-  INJECT_COMPONENTS,
-  INJECT_CONFIG,
-  _sfc_main as default,
-  ensureInjectConfig,
-  getInjectConfig
+  _ as default
 };