@qin-ui/antdv-next-pro 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,268 @@
1
+ # @qin-ui/antdv-next-pro
2
+
3
+ 基于 [antdv-next](https://github.com/vueComponent/pro-components) 的二次封装 ProComponent 组件库,提供高度可配置的 `ProForm`、`ProTable` 和 `ComponentProvider`。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ npm install @qin-ui/antdv-next-pro antdv-next
9
+ # 或
10
+ pnpm add @qin-ui/antdv-next-pro antdv-next
11
+ ```
12
+
13
+ ---
14
+
15
+ ## ProForm
16
+
17
+ 基于 Schema 驱动的表单组件,通过 `fields` 配置描述每个表单项,支持 Grid 布局、响应式属性、嵌套字段、自定义组件等。
18
+
19
+ ### 基础用法
20
+
21
+ ```vue
22
+ <script setup lang="ts">
23
+ import { ProForm, useForm } from '@qin-ui/antdv-next-pro';
24
+
25
+ type FormData = { name: string; age: number };
26
+
27
+ const form = useForm<FormData>({}, [
28
+ {
29
+ path: 'name',
30
+ label: '姓名',
31
+ component: 'input',
32
+ rules: [{ required: true }],
33
+ },
34
+ { path: 'age', label: '年龄', component: 'input-number' },
35
+ ]);
36
+ </script>
37
+
38
+ <template>
39
+ <ProForm :form="form" />
40
+ </template>
41
+ ```
42
+
43
+ ### `useForm(initData?, initFields?, root?)` 参数
44
+
45
+ | 参数 | 类型 | 说明 |
46
+ | ------------ | ---------------- | -------------------- |
47
+ | `initData` | `DeepPartial<D>` | 表单初始数据 |
48
+ | `initFields` | `Field<D>[]` | 表单字段初始配置 |
49
+ | `root` | `boolean` | 是否创建根 form 实例 |
50
+
51
+ ### `useForm` 返回值
52
+
53
+ | 属性 | 类型 | 说明 |
54
+ | -------------------------- | -------------------------------- | --------------------------- |
55
+ | `formRef` | `Ref<FormInstance \| undefined>` | AntdvNext FormInstance 引用 |
56
+ | `formData` | `Reactive<D>` | 响应式表单数据对象 |
57
+ | `fields` | `Ref<Field<D>[]>` | 响应式字段配置 |
58
+ | `getFormData(path?)` | `(path?) => any` | 读取表单字段值 |
59
+ | `setFormData(path, value)` | `-` | 设置表单字段值 |
60
+ | `setField(path, patch)` | `-` | 动态更新字段配置 |
61
+ | `resetFormData()` | `-` | 重置表单数据为初始值 |
62
+
63
+ ### `ProForm` Props
64
+
65
+ | 属性 | 类型 | 默认值 | 说明 |
66
+ | ------ | ---------------------- | ------- | ------------------------ |
67
+ | `form` | `Form<D>` | - | `useForm` 返回的实例 |
68
+ | `grid` | `boolean \| GridProps` | `false` | 启用 Grid 网格布局 |
69
+ | 其余 | `FormProps` | - | 透传至 antdv-next `Form` |
70
+
71
+ ### 字段配置(`Field`)
72
+
73
+ 所有字段共享 `Base` 公共属性,再加上各组件专属 Props。
74
+
75
+ #### 公共属性(`Base`)
76
+
77
+ | 属性 | 类型 | 说明 |
78
+ | -------------------- | ----------------------------------- | ------------------------------------------------- |
79
+ | `path` | `Path<D>` | 字段标识,对应 `formData` 中的 key |
80
+ | `label` | `string \| Component` | 字段标签 |
81
+ | `component` | 见下方组件表 | 使用的内置组件名或自定义组件 |
82
+ | `hidden` | `MaybeRef<boolean>` | 是否隐藏 |
83
+ | `rules` | `FormItemRule[]` | 校验规则 |
84
+ | `span` | `number` | Grid 列宽(仅 grid 模式有效) |
85
+ | `slots` | `Partial<ComponentSlots<FormItem>>` | FormItem 插槽(`label`/`extra`/`help`/`tooltip`) |
86
+ | `grid` | `boolean \| GridProps` | 嵌套字段的 Grid 配置 |
87
+ | `fields` | `Fields<D>` | 嵌套子字段配置 |
88
+ | `formItemStyle` | `CSSProperties` | FormItem 样式 |
89
+ | `formItemClass` | `string` | FormItem 类名 |
90
+ | `formItemContainer` | `Component` | FormItem 外层包裹组件 |
91
+ | `formItemDataAttrs` | `Record<string, string>` | 附加到 FormItem DOM 节点的属性 |
92
+ | `componentStyle` | `CSSProperties` | 组件样式 |
93
+ | `componentClass` | `string` | 组件类名 |
94
+ | `componentContainer` | `Component` | 组件外层包裹组件 |
95
+ | `componentDataAttrs` | `Record<string, string>` | 附加到组件 DOM 节点的属性 |
96
+ | `valueFormatter` | `ValueFormatter` | 值转换函数(支持 `get`/`set` 形式) |
97
+ | `modelProp` | `string` | v-model 绑定属性名,默认 `'value'` |
98
+
99
+ > **响应式支持**:除了 `component`、`fields`、`slots`、`modelProp`、`formItemContainer`、`componentContainer`、`valueFormatter` 之外,所有属性均支持 `Ref` 或 `ComputedRef`。
100
+
101
+ #### 内置组件(`component` 取值)
102
+
103
+ | 值 | 对应组件 |
104
+ | ------------------- | ----------------------------------------------- |
105
+ | `input` | Input 文本框 |
106
+ | `textarea` | TextArea 文本域 |
107
+ | `input-password` | InputPassword 密码框 |
108
+ | `input-otp` | InputOTP 一次性密码框 |
109
+ | `input-search` | InputSearch 搜索框 |
110
+ | `input-number` | InputNumber 数字输入框 |
111
+ | `select` | Select 下拉选择器 |
112
+ | `auto-complete` | AutoComplete 自动完成 |
113
+ | `cascader` | Cascader 级联选择器 |
114
+ | `date-picker` | DatePicker 日期选择器 |
115
+ | `range-picker` | RangePicker 日期范围选择器 |
116
+ | `time-picker` | TimePicker 时间选择器 |
117
+ | `time-range-picker` | TimeRangePicker 时间范围选择器 |
118
+ | `checkbox-group` | CheckboxGroup 复选框组 |
119
+ | `radio-group` | RadioGroup 单选框组 |
120
+ | `switch` | Switch 开关 |
121
+ | `slider` | Slider 滑块 |
122
+ | `tree-select` | TreeSelect 树形选择器 |
123
+ | `transfer` | Transfer 穿梭框 |
124
+ | `custom` | 完全自定义渲染组件(`component` 传入 Vue 组件) |
125
+
126
+ #### 自定义组件
127
+
128
+ ```ts
129
+ // 使用 custom 内联自定义
130
+ {
131
+ path: 'custom',
132
+ component: (props) => h('div', props, '自定义内容'),
133
+ }
134
+ ```
135
+
136
+ #### 注册可复用自定义组件
137
+
138
+ ```ts
139
+ import { registerComponent } from '@qin-ui/antdv-next-pro';
140
+ import MyRateComponent from './MyRate.vue';
141
+
142
+ // 注册后在 schema 中即可使用字符串引用
143
+ registerComponent('my-rate', MyRateComponent);
144
+ ```
145
+
146
+ 配合 TypeScript 模块扩充获得完整类型提示:
147
+
148
+ ```ts
149
+ declare module '@qin-ui/antdv-next-pro' {
150
+ interface CustomFieldTypeMap {
151
+ 'my-rate': typeof MyRateComponent;
152
+ }
153
+ }
154
+ ```
155
+
156
+ ---
157
+
158
+ ## ProTable
159
+
160
+ 基于 Schema 驱动的表格组件,与 `ProForm` 深度集成支持搜索联动。
161
+
162
+ ### 基础用法
163
+
164
+ ```vue
165
+ <script setup lang="ts">
166
+ import { ProTable, useTable } from '@qin-ui/antdv-next-pro';
167
+
168
+ type Row = { id: number; name: string };
169
+
170
+ const table = useTable<Row>({
171
+ columns: [
172
+ { title: 'ID', dataIndex: 'id' },
173
+ { title: '姓名', dataIndex: 'name' },
174
+ ],
175
+ });
176
+ </script>
177
+
178
+ <template>
179
+ <ProTable :table="table" :search="() => fetchData()" />
180
+ </template>
181
+ ```
182
+
183
+ ### `useTable` 参数
184
+
185
+ | 参数 | 类型 | 说明 |
186
+ | -------------- | ---------------- | ------------------------------------- |
187
+ | `columns` | `Column<D>[]` | 列配置,支持 `hidden` 属性 |
188
+ | `dataSource` | `T[]` | 静态数据源 |
189
+ | `pageParam` | `PageParam` | 分页初始参数 |
190
+ | `searchParam` | `DeepPartial<D>` | 搜索初始参数 |
191
+ | `searchFields` | `Fields<D>` | 搜索表单字段配置(同 ProForm Fields) |
192
+
193
+ ### `ProTable` Props
194
+
195
+ | 属性 | 类型 | 默认值 | 说明 |
196
+ | ------------------ | ------------------------------------------- | ------- | ------------------------------------- |
197
+ | `table` | `Table<D>` | - | `useTable` 返回的实例 |
198
+ | `search` | `() => Promise<void>` | - | 触发查询的回调 |
199
+ | `addIndexColumn` | `boolean` | `false` | 自动在首列插入序号列 |
200
+ | `immediateSearch` | `boolean` | `false` | 挂载时立即触发一次查询 |
201
+ | `control` | `boolean \| { sizeControl, columnControl }` | `true` | 是否显示表格尺寸/列配置控制条 |
202
+ | `searchFormConfig` | `SearchFormConfig` | - | 搜索表单配置(`layout`、`expand` 等) |
203
+ | `tableContainer` | `Component \| false` | - | 表格区域外层包裹容器 |
204
+
205
+ ---
206
+
207
+ ## ComponentProvider
208
+
209
+ 全局默认属性配置提供者,作为 `ProForm` / `ProTable` 的父组件使用,通过 `componentVars` 配置各组件的默认 Props。
210
+
211
+ ```vue
212
+ <template>
213
+ <ComponentProvider :component-vars="config">
214
+ <ProForm :form="form" />
215
+ <ProTable :table="table" />
216
+ </ComponentProvider>
217
+ </template>
218
+
219
+ <script setup lang="ts">
220
+ import { ComponentProvider } from '@qin-ui/antdv-next-pro';
221
+
222
+ const config = {
223
+ 'pro-form': { grid: { gutter: 24 } },
224
+ 'pro-form-item': { validateFirst: true, span: 6 },
225
+ input: { maxlength: 200, allowClear: true },
226
+ select: { allowClear: true, placeholder: '请选择' },
227
+ 'date-picker': { style: { width: '100%' } },
228
+ 'pro-table': {
229
+ addIndexColumn: true,
230
+ pagination: { showTotal: total => `共 ${total} 条` },
231
+ },
232
+ };
233
+ </script>
234
+ ```
235
+
236
+ ---
237
+
238
+ ## 全局注册
239
+
240
+ ```ts
241
+ import { createApp } from 'vue';
242
+ import AntdvNextPro from '@qin-ui/antdv-next-pro';
243
+
244
+ createApp(App).use(AntdvNextPro).mount('#app');
245
+ ```
246
+
247
+ 或单独注册组件:
248
+
249
+ ```ts
250
+ import {
251
+ ProForm,
252
+ ProTable,
253
+ ProComponentProvider,
254
+ } from '@qin-ui/antdv-next-pro';
255
+
256
+ app.use(ProForm);
257
+ app.use(ProTable);
258
+ app.use(ProComponentProvider);
259
+ ```
260
+
261
+ ---
262
+
263
+ ## Peer Dependencies
264
+
265
+ | 包 | 版本 |
266
+ | ------------ | -------- |
267
+ | `antdv-next` | `^1.1.0` |
268
+ | `vue` | `^3.5.0` |
@@ -64,6 +64,10 @@ const INJECT_CONFIG = {
64
64
  injectionKey: Symbol(""),
65
65
  default: {}
66
66
  },
67
+ "auto-complete": {
68
+ injectionKey: Symbol(""),
69
+ default: { allowClear: true, placeholder: "请选择", getPopupContainer }
70
+ },
67
71
  select: {
68
72
  injectionKey: Symbol(""),
69
73
  default: { allowClear: true, placeholder: "请选择", getPopupContainer }
@@ -1,4 +1,4 @@
1
- import { a, _ } from "./index-Cy8dTKpN.js";
1
+ import { a, _ } from "./index-DcaBbsiC.js";
2
2
  export {
3
3
  a as INJECT_CONFIG,
4
4
  _ as default
@@ -1,11 +1,10 @@
1
1
  import { defineComponent, provide, computed, inject, useSlots, watchEffect, createBlock, openBlock, unref, mergeProps, withCtx, createVNode, renderSlot, toValue, normalizeProps, guardReactiveProps, resolveComponent, createElementBlock, Fragment, renderList, createSlots, ref, useAttrs, createCommentVNode, resolveDynamicComponent, isVNode, createTextVNode, toDisplayString } from "vue";
2
- import { FormItem, Row, Table, Form, Input, TextArea, InputSearch, InputPassword, InputNumber, InputOTP, Select, Cascader, DatePicker, DateRangePicker, TimePicker, TimeRangePicker, CheckboxGroup, RadioGroup, Switch, Slider, TreeSelect, Transfer, Col } from "antdv-next";
2
+ import { FormItem, Col, Table, Form, Input, TextArea, InputSearch, InputPassword, InputNumber, InputOTP, AutoComplete, Select, Cascader, DatePicker, DateRangePicker, TimePicker, TimeRangePicker, CheckboxGroup, RadioGroup, Switch, Slider, TreeSelect, Transfer, Row } from "antdv-next";
3
3
  import { useDisabledContextProvider, useDisabledContext } from "antdv-next/dist/config-provider/DisabledContext";
4
- import "antdv-next/dist/config-provider/SizeContext";
5
- import { I as InjectionFormKey, a as INJECT_CONFIG, c as camelizeProperties, b as InjectionPathKey, g as getObject, u as useForm$1, d as useFields$1, e as useFormRef$1 } from "../component-provider/index-Cy8dTKpN.js";
4
+ import { I as InjectionFormKey, a as INJECT_CONFIG, c as camelizeProperties, b as InjectionPathKey, g as getObject, u as useForm$1, d as useFields$1, e as useFormRef$1 } from "../component-provider/index-DcaBbsiC.js";
6
5
  import { i as isPlainObject, t as toPath, o as omit, c as cloneDeep } from "../vendor/utils/lodash-es-p6jau26B.js";
7
6
  const tableProps = () => Table.props || {};
8
- const gridItemProps = () => Row.props || {};
7
+ const gridItemProps = () => Col.props || {};
9
8
  const formItemProps = () => FormItem.props || {};
10
9
  const _sfc_main$6 = /* @__PURE__ */ defineComponent({
11
10
  ...{ name: "ProForm", inheritAttrs: false },
@@ -58,6 +57,7 @@ const COMPONENT_MAP = /* @__PURE__ */ new Map([
58
57
  ["input-password", InputPassword],
59
58
  ["input-number", InputNumber],
60
59
  ["input-otp", InputOTP],
60
+ ["auto-complete", AutoComplete],
61
61
  ["select", Select],
62
62
  ["cascader", Cascader],
63
63
  ["date-picker", DatePicker],
@@ -71,6 +71,9 @@ const COMPONENT_MAP = /* @__PURE__ */ new Map([
71
71
  ["tree-select", TreeSelect],
72
72
  ["transfer", Transfer]
73
73
  ]);
74
+ const registerComponent = (name, component) => {
75
+ COMPONENT_MAP.set(name, component);
76
+ };
74
77
  const TeleportComponentNamePrefix = "TeleportComponent_";
75
78
  const _sfc_main$5 = /* @__PURE__ */ defineComponent({
76
79
  __name: "index",
@@ -105,7 +108,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
105
108
  const componentProps = { slots: {} };
106
109
  const formItemSlots = {};
107
110
  if (isPlainObject(props.field)) {
108
- const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, ...rest } = props.field;
111
+ const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, ...rest } = props.field;
109
112
  const {
110
113
  class: injectClassName,
111
114
  style: injectStyle,
@@ -124,18 +127,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
124
127
  formItemProps2 = mergeProps(
125
128
  injectRest,
126
129
  { class: injectClassName, style: injectStyle },
127
- { class: toValue(formItemClass), style: toValue(formItemStyle) }
130
+ { class: toValue(formItemClass), style: toValue(formItemStyle) },
131
+ formItemDataAttrs
128
132
  );
129
133
  formItemProps2.container = formItemContainer ?? injectFormItemContainer;
130
134
  Object.keys(rest).forEach((k) => {
131
135
  if (gridItemPropKeys.includes(k)) {
132
136
  gridItemProps2[k] = rest[k];
133
- } else if (formItemPropKeys.includes(k) || k.startsWith("data-form-item")) {
137
+ } else if (formItemPropKeys.includes(k)) {
134
138
  formItemProps2[k] = rest[k];
135
139
  } else {
136
140
  componentProps[k] = rest[k];
137
141
  }
138
142
  });
143
+ Object.assign(componentProps, componentDataAttrs);
139
144
  Object.keys(slots).forEach((k) => {
140
145
  if (FORM_ITEM_SLOT_KEYS.includes(k)) {
141
146
  formItemSlots[k] = slots[k];
@@ -281,9 +286,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
281
286
  const useForm = useForm$1;
282
287
  const getInitProps = (field) => {
283
288
  const { component } = field;
284
- const type = component === "input" ? "" : field.type;
289
+ const picker = component === "date-picker" ? "" : field.picker;
285
290
  if (COMPONENT_MAP.has(component)) {
286
- const k = [component, type].filter(Boolean).join(".");
291
+ const k = [component, picker].filter(Boolean).join(".");
287
292
  if (INJECT_CONFIG[k]) {
288
293
  const config = INJECT_CONFIG[k];
289
294
  const injectProps = inject(config.injectionKey, config.default);
@@ -442,6 +447,7 @@ export {
442
447
  useFields as e,
443
448
  useFormRef as f,
444
449
  getInitProps as g,
450
+ registerComponent as r,
445
451
  tableProps as t,
446
452
  useForm as u
447
453
  };
package/es/form/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { c, _, b, C, a, F, d, T, _ as _2, g, e, u, f } from "./index-DShboSl2.js";
2
- import { I, b as b2, f as f2 } from "../component-provider/index-Cy8dTKpN.js";
1
+ import { c, _, b, C, a, F, d, T, _ as _2, g, r, e, u, f } from "./index-idQHUPJc.js";
2
+ import { I, b as b2, f as f2 } from "../component-provider/index-DcaBbsiC.js";
3
3
  export {
4
4
  c as BaseField,
5
5
  _ as BaseForm,
@@ -13,6 +13,7 @@ export {
13
13
  T as TeleportComponentNamePrefix,
14
14
  _2 as default,
15
15
  g as getInitProps,
16
+ r as registerComponent,
16
17
  e as useFields,
17
18
  u as useForm,
18
19
  f2 as useFormData,
package/es/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { AllowedComponentProps } from 'vue';
2
2
  import { AnyObject } from 'antdv-next/dist/_util/type';
3
3
  import { App } from 'vue';
4
+ import { AutoComplete } from 'antdv-next';
4
5
  import { ButtonSize } from 'antdv-next';
5
- import { CascaderProps } from 'antdv-next';
6
- import { CascaderSlots } from 'antdv-next';
7
- import { CheckboxGroupProps } from 'antdv-next';
6
+ import { Cascader } from 'antdv-next';
7
+ import { CheckboxGroup } from 'antdv-next';
8
8
  import { ColProps } from 'antdv-next';
9
9
  import { Component } from 'vue';
10
10
  import { ComponentCustomProps } from 'vue';
@@ -13,12 +13,13 @@ import { ComponentOptionsBase } from 'vue';
13
13
  import { ComponentOptionsMixin } from 'vue';
14
14
  import { ComponentProps } from 'vue-component-type-helpers';
15
15
  import { ComponentProvideOptions } from 'vue';
16
+ import { ComponentSlots } from 'vue-component-type-helpers';
16
17
  import { ComputedRef } from 'vue';
17
18
  import { CreateComponentPublicInstanceWithMixins } from 'vue';
18
19
  import { CSSProperties } from 'vue';
19
20
  import { Data } from '@qin-ui/core';
20
- import { DatePickerProps } from 'antdv-next';
21
- import { DatePickerSlots } from 'antdv-next';
21
+ import { DatePicker } from 'antdv-next';
22
+ import { DateRangePicker } from 'antdv-next';
22
23
  import { DeepPartial } from '@qin-ui/core';
23
24
  import { DefineComponent } from 'vue';
24
25
  import { ExtendWithAny } from '@qin-ui/core';
@@ -42,52 +43,37 @@ import { HTMLAttributes } from 'vue';
42
43
  import { InjectionFormKey } from '@qin-ui/core';
43
44
  import { InjectionKey } from 'vue';
44
45
  import { InjectionPathKey } from '@qin-ui/core';
45
- import { InputNumberProps } from 'antdv-next';
46
- import { InputNumberSlots } from 'antdv-next/dist/input-number/index';
47
- import { InputOTPProps } from 'antdv-next';
48
- import { InputPasswordProps } from 'antdv-next';
49
- import { InputProps } from 'antdv-next';
50
- import { InputSearchProps } from 'antdv-next';
51
- import { InputSlots } from 'antdv-next';
46
+ import { Input } from 'antdv-next';
47
+ import { InputNumber } from 'antdv-next';
48
+ import { InputOTP } from 'antdv-next';
49
+ import { InputPassword } from 'antdv-next';
50
+ import { InputSearch } from 'antdv-next';
52
51
  import { KeyExpandString } from '@qin-ui/core';
53
52
  import { MaybeRef } from 'vue';
54
- import { MonthPickerProps } from 'antdv-next';
55
- import { OPTSlots } from 'antdv-next/dist/input/OTP/index';
56
53
  import { PageParam } from '@qin-ui/core';
57
- import { PasswordSlots } from 'antdv-next/dist/input/Password';
58
54
  import { Path } from '@qin-ui/core';
59
55
  import { Paths } from '@qin-ui/core';
60
56
  import { Plugin as Plugin_2 } from 'vue';
61
57
  import { PublicProps } from 'vue';
62
- import { RadioGroupProps } from 'antdv-next';
63
- import { RangePickerProps } from 'antdv-next';
64
- import { RangePickerSlots } from 'antdv-next/dist/date-picker/generatePicker/generateRangePicker';
58
+ import { RadioGroup } from 'antdv-next';
65
59
  import { Raw } from 'vue';
66
60
  import { RequiredMark } from 'antdv-next/dist/form/Form';
67
61
  import { RowProps } from 'antdv-next';
68
62
  import { Rule } from 'antdv-next/dist/form/types';
69
63
  import { ScrollFocusOptions } from 'antdv-next/dist/form/interface';
70
- import { SearchSlots } from 'antdv-next/dist/input/Search';
71
- import { SelectProps } from 'antdv-next';
72
- import { SelectSlots } from 'antdv-next';
64
+ import { Select } from 'antdv-next';
73
65
  import { ShallowUnwrapRef } from 'vue';
74
- import { SliderProps } from 'antdv-next';
75
- import { SliderSlots } from 'antdv-next/dist/slider/index';
66
+ import { Slider } from 'antdv-next';
76
67
  import { Slot } from 'vue';
77
- import { SwitchProps } from 'antdv-next';
78
- import { SwitchSlots } from 'antdv-next';
68
+ import { Switch } from 'antdv-next';
79
69
  import { Table as Table_2 } from '@qin-ui/core';
80
70
  import { TableColumnType } from 'antdv-next';
81
71
  import { TableProps } from 'antdv-next';
82
- import { TextAreaProps } from 'antdv-next';
83
- import { TextAreaSlots } from 'antdv-next/dist/input/TextArea';
84
- import { TimePickerProps } from 'antdv-next';
85
- import { TimePickerSlots } from 'antdv-next/dist/time-picker/index';
86
- import { TimeRangePickerProps } from 'antdv-next';
87
- import { TransferProps } from 'antdv-next';
88
- import { TransferSlots } from 'antdv-next';
89
- import { TreeSelectProps } from 'antdv-next';
90
- import { TreeSelectSlots } from 'antdv-next';
72
+ import { TextArea } from 'antdv-next';
73
+ import { TimePicker } from 'antdv-next';
74
+ import { TimeRangePicker } from 'antdv-next';
75
+ import { Transfer } from 'antdv-next';
76
+ import { TreeSelect } from 'antdv-next';
91
77
  import { useFields as useFields_2 } from '@qin-ui/core';
92
78
  import { useFormData } from '@qin-ui/core';
93
79
  import { useFormRef as useFormRef_2 } from '@qin-ui/core';
@@ -95,7 +81,6 @@ import { ValidateMessages } from 'antdv-next/dist/form/types';
95
81
  import { Variant } from 'antdv-next/dist/config-provider/context';
96
82
  import { VNode } from 'vue';
97
83
  import { VNodeProps } from 'vue';
98
- import { WeekPickerProps } from 'antdv-next';
99
84
 
100
85
  declare const __VLS_component: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
101
86
 
@@ -154,17 +139,7 @@ export declare interface Base<D extends Data = Data> {
154
139
  * }
155
140
  * ```
156
141
  */
157
- slots?: Partial<Record<(typeof FORM_ITEM_SLOT_KEYS)[number], SlotComponentType>>;
158
- /**
159
- * @description 字段formItem样式属性
160
- * @example { marginBottom: '8px', padding: '12px' }
161
- */
162
- formItemStyle?: CSSProperties;
163
- /**
164
- * @description 字段formItem样式类名
165
- * @example 'custom-form-item' | 'required-field'
166
- */
167
- formItemClass?: string;
142
+ slots?: Partial<ComponentSlots<typeof FormItem>>;
168
143
  /**
169
144
  * @description 嵌套子字段配置
170
145
  * @example [{ key: 'firstName', label: '名' }, { key: 'lastName', label: '姓' }]
@@ -175,11 +150,26 @@ export declare interface Base<D extends Data = Data> {
175
150
  * @example boolean | { gutter: 24 }
176
151
  */
177
152
  grid?: Grid;
153
+ /**
154
+ * @description 字段formItem样式属性
155
+ * @example { marginBottom: '8px', padding: '12px' }
156
+ */
157
+ formItemStyle?: CSSProperties;
158
+ /**
159
+ * @description 字段formItem样式类名
160
+ * @example 'custom-form-item' | 'required-field'
161
+ */
162
+ formItemClass?: string;
178
163
  /**
179
164
  * @description 字段formItem容器包裹组件
180
165
  * @example (props, ctx) => h('div', { class: 'custom-container' }, ctx.slots.default?.())
181
166
  */
182
167
  formItemContainer?: ContainerComponent;
168
+ /**
169
+ * @description 将属性附加到 FormItem 的 DOM 节点
170
+ * @example { 'data-form-item-test': 'test-value', 'aria-label': 'name' }
171
+ */
172
+ formItemDataAttrs?: Record<string, string>;
183
173
  /**
184
174
  * @description 字段component样式属性
185
175
  * @example { width: '100%', borderColor: '#d9d9d9' }
@@ -195,6 +185,11 @@ export declare interface Base<D extends Data = Data> {
195
185
  * @example (props, ctx) => h('div', { class: 'input-wrapper' }, ctx.slots.default?.())
196
186
  */
197
187
  componentContainer?: ContainerComponent;
188
+ /**
189
+ * @description 将属性附加到表单组件的 DOM 节点
190
+ * @example { 'data-test': 'input-value', 'aria-label': 'name' }
191
+ */
192
+ componentDataAttrs?: Record<string, string>;
198
193
  /**
199
194
  * @description 字段值处理函数,在onUpdateValue前执行,函数返回值将作为更新值,也可设置get和set函数,用于处理字段值
200
195
  * @example (val) => val?.trim()
@@ -204,16 +199,6 @@ export declare interface Base<D extends Data = Data> {
204
199
  * @description 组件v-model双向绑定更新属性名,默认'value'
205
200
  */
206
201
  modelProp?: string;
207
- /**
208
- * @description 以data-form-item-开始的属性名将会被渲染至formItem的dom节点
209
- * @example { 'data-form-item-test': 'test-value' }
210
- */
211
- [key: `data-form-item-${string}`]: string;
212
- /**
213
- * @description 以data-component-开始的属性名将会被渲染至component的dom节点
214
- * @example { 'data-component-test': 'test-value' }
215
- */
216
- [key: `data-component-${string}`]: string;
217
202
  }
218
203
 
219
204
  /**
@@ -269,7 +254,7 @@ export declare type Column<D extends Data = Data> = Omit<TableColumnType, 'dataI
269
254
 
270
255
  export declare type Columns<D extends Data = Data> = Array<Column<D>>;
271
256
 
272
- export declare const COMPONENT_MAP: Map<BaseComponentStringName, Component>;
257
+ export declare const COMPONENT_MAP: Map<string, Component>;
273
258
 
274
259
  export declare type ComponentVars = Partial<RequiredComponentVars>;
275
260
 
@@ -280,6 +265,20 @@ export declare type ContainerComponent = Component<PathProps>;
280
265
 
281
266
  export declare const ContainerFragment: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
282
267
 
268
+ /**
269
+ * @description 暴露给外部扩充自定义组件类型的接口
270
+ * @example
271
+ * ```ts
272
+ * declare module 'antdv-next-pro' {
273
+ * interface CustomFieldTypeMap {
274
+ * 'my-custom-input': typeof MyCustomInput;
275
+ * }
276
+ * }
277
+ * ```
278
+ */
279
+ export declare interface CustomFieldTypeMap<D extends Data = Data> {
280
+ }
281
+
283
282
  declare const _default: {
284
283
  install(app: App): void;
285
284
  };
@@ -423,76 +422,50 @@ export declare type Fields<D extends Data = Data> = Array<Field<D>>;
423
422
  */
424
423
  export declare type FieldTypeMap<D extends Data = Data> = {
425
424
  /** 文本框 */
426
- 'input': WithCommon<{
427
- slots?: InputSlots;
428
- } & InputProps, D>;
425
+ 'input': WithComponent<typeof Input, D>;
429
426
  /** 文本域 */
430
- 'textarea': WithCommon<{
431
- slots?: TextAreaSlots;
432
- } & TextAreaProps, D>;
427
+ 'textarea': WithComponent<typeof TextArea, D>;
433
428
  /** 文本框-密码 */
434
- 'input-password': WithCommon<{
435
- slots?: PasswordSlots;
436
- } & InputPasswordProps, D>;
437
- 'input-otp': WithCommon<{
438
- slots?: OPTSlots;
439
- } & InputOTPProps, D>;
429
+ 'input-password': WithComponent<typeof InputPassword, D>;
430
+ 'input-otp': WithComponent<typeof InputOTP, D>;
440
431
  /** 文本框-搜索 */
441
- 'input-search': WithCommon<{
442
- slots?: SearchSlots;
443
- } & InputSearchProps, D>;
432
+ 'input-search': WithComponent<typeof InputSearch, D>;
444
433
  /** 数字文本框 */
445
- 'input-number': WithCommon<{
446
- slots?: InputNumberSlots;
447
- } & InputNumberProps, D>;
434
+ 'input-number': WithComponent<typeof InputNumber, D>;
448
435
  /** 下拉选择器 */
449
- 'select': WithCommon<{
450
- slots?: SelectSlots;
451
- } & SelectProps, D>;
436
+ 'select': WithComponent<typeof Select, D>;
437
+ /** 自动完成 */
438
+ 'auto-complete': WithComponent<typeof AutoComplete, D>;
452
439
  /** 级联选择器 */
453
- 'cascader': WithCommon<{
454
- slots?: CascaderSlots;
455
- } & CascaderProps, D>;
440
+ 'cascader': WithComponent<typeof Cascader, D>;
456
441
  /** 日期选择器 */
457
- 'date-picker': WithCommon<{
458
- slots?: DatePickerSlots;
459
- } & DatePickerProps, D>;
442
+ 'date-picker': WithComponent<typeof DatePicker, D>;
460
443
  /** 日期选择器-范围 */
461
- 'range-picker': WithCommon<{
462
- slots?: RangePickerSlots;
463
- } & RangePickerProps, D>;
464
- /** 时间选择器 */
465
- 'time-picker': WithCommon<{
466
- slots?: TimePickerSlots;
467
- } & TimePickerProps, D>;
444
+ 'range-picker': WithComponent<typeof DateRangePicker, D>;
468
445
  /** 时间选择器 */
469
- 'time-range-picker': WithCommon<TimeRangePickerProps, D>;
446
+ 'time-picker': WithComponent<typeof TimePicker, D>;
447
+ /** 时间范围选择器 */
448
+ 'time-range-picker': WithComponent<typeof TimeRangePicker, D>;
470
449
  /** 复选框组 */
471
- 'checkbox-group': WithCommon<CheckboxGroupProps, D>;
450
+ 'checkbox-group': WithComponent<typeof CheckboxGroup, D>;
472
451
  /** 单选框组 */
473
- 'radio-group': WithCommon<RadioGroupProps, D>;
452
+ 'radio-group': WithComponent<typeof RadioGroup, D>;
474
453
  /** 开关 */
475
- 'switch': WithCommon<{
476
- slots?: SwitchSlots;
477
- } & SwitchProps, D>;
454
+ 'switch': WithComponent<typeof Switch, D>;
478
455
  /** 滑块 */
479
- 'slider': WithCommon<{
480
- slots?: SliderSlots;
481
- } & SliderProps, D>;
456
+ 'slider': WithComponent<typeof Slider, D>;
482
457
  /** 树形选择器 */
483
- 'tree-select': WithCommon<{
484
- slots?: TreeSelectSlots;
485
- } & TreeSelectProps, D>;
458
+ 'tree-select': WithComponent<typeof TreeSelect, D>;
486
459
  /** 穿梭框 */
487
- 'transfer': WithCommon<{
488
- slots?: TransferSlots;
489
- } & TransferProps, D>;
460
+ 'transfer': WithComponent<typeof Transfer, D>;
490
461
  /** 自定义组件 */
491
462
  'custom': {
492
463
  component?: RenderComponentType | Raw<RenderComponentType>;
493
464
  } & WithCommon<{
494
465
  slots?: Slots;
495
466
  } & Record<string, any>, D>;
467
+ } & {
468
+ [K in keyof CustomFieldTypeMap<D>]: WithComponent<CustomFieldTypeMap[K], D>;
496
469
  };
497
470
 
498
471
  /**
@@ -684,6 +657,13 @@ export declare type ProTableInstance = ComponentExposed<typeof _default_2>;
684
657
 
685
658
  export declare type ProTableProps = ComponentProps<typeof _default_2>;
686
659
 
660
+ /**
661
+ * 注册自定义组件
662
+ * @param name 组件名称标识
663
+ * @param component Vue组件
664
+ */
665
+ export declare const registerComponent: (name: string, component: Component) => void;
666
+
687
667
  /**
688
668
  * @description 自定义组件
689
669
  * @example (p, ctx) => h('div', ctx.attrs)
@@ -696,29 +676,30 @@ export declare type RequiredComponentVars = {
696
676
  grid: Exclude<Grid, undefined | boolean>;
697
677
  }>;
698
678
  'pro-form-item': PP<FormItemProps & Pick<ColProps, 'span' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'> & Pick<Base, 'formItemContainer'>>;
699
- 'input': FP<InputProps>;
700
- 'textarea': FP<TextAreaProps>;
701
- 'input-password': FP<InputProps>;
702
- 'input-search': FP<InputProps>;
703
- 'input-number': FP<InputNumberProps>;
704
- 'input-otp': FP<InputOTPProps>;
705
- 'select': FP<SelectProps>;
706
- 'cascader': FP<CascaderProps>;
707
- 'date-picker': FP<DatePickerProps>;
708
- 'date-picker.date': FP<DatePickerProps>;
709
- 'date-picker.week': FP<WeekPickerProps>;
710
- 'date-picker.month': FP<MonthPickerProps>;
711
- 'date-picker.year': FP<DatePickerProps>;
712
- 'date-picker.quarter': FP<DatePickerProps>;
713
- 'range-picker': FP<RangePickerProps>;
714
- 'time-picker': FP<TimePickerProps>;
715
- 'time-range-picker': FP<TimeRangePickerProps>;
716
- 'checkbox-group': FP<CheckboxGroupProps>;
717
- 'radio-group': FP<RadioGroupProps>;
718
- 'switch': FP<SwitchProps>;
719
- 'slider': FP<SliderProps>;
720
- 'tree-select': FP<TreeSelectProps>;
721
- 'transfer': FP<TransferProps>;
679
+ 'input': FP<ComponentProps<typeof Input>>;
680
+ 'textarea': FP<ComponentProps<typeof TextArea>>;
681
+ 'input-password': FP<ComponentProps<typeof InputPassword>>;
682
+ 'input-search': FP<ComponentProps<typeof InputSearch>>;
683
+ 'input-number': FP<ComponentProps<typeof InputNumber>>;
684
+ 'input-otp': FP<ComponentProps<typeof InputOTP>>;
685
+ 'auto-complete': FP<ComponentProps<typeof AutoComplete>>;
686
+ 'select': FP<ComponentProps<typeof Select>>;
687
+ 'cascader': FP<ComponentProps<typeof Cascader>>;
688
+ 'date-picker': FP<ComponentProps<typeof DatePicker>>;
689
+ 'date-picker.date': FP<ComponentProps<typeof DatePicker>>;
690
+ 'date-picker.week': FP<ComponentProps<typeof DatePicker>>;
691
+ 'date-picker.month': FP<ComponentProps<typeof DatePicker>>;
692
+ 'date-picker.year': FP<ComponentProps<typeof DatePicker>>;
693
+ 'date-picker.quarter': FP<ComponentProps<typeof DatePicker>>;
694
+ 'range-picker': FP<ComponentProps<typeof DateRangePicker>>;
695
+ 'time-picker': FP<ComponentProps<typeof TimePicker>>;
696
+ 'time-range-picker': FP<ComponentProps<typeof TimeRangePicker>>;
697
+ 'checkbox-group': FP<ComponentProps<typeof CheckboxGroup>>;
698
+ 'radio-group': FP<ComponentProps<typeof RadioGroup>>;
699
+ 'switch': FP<ComponentProps<typeof Switch>>;
700
+ 'slider': FP<ComponentProps<typeof Slider>>;
701
+ 'tree-select': FP<ComponentProps<typeof TreeSelect>>;
702
+ 'transfer': FP<ComponentProps<typeof Transfer>>;
722
703
  };
723
704
 
724
705
  declare type SearchFormProps = {
@@ -829,7 +810,16 @@ export declare type WithAdditionalMethodsGetter<T> = T & {
829
810
  }>;
830
811
  };
831
812
 
832
- declare type WithCommon<T, D extends Data = Data> = WithRef<T & Omit<FormItemProps, 'label'> & ColProps & Base<D>>;
813
+ declare type WithCommon<T, D extends Data = Data> = WithRef<T & FormItemProps & ColProps & Base<D>>;
814
+
815
+ /**
816
+ * @description 自动从 Vue 组件提取 Props 和 Slots,并加上公共表单字段属性
817
+ * @template T - Vue 组件类型
818
+ * @template D - 数据对象类型
819
+ */
820
+ declare type WithComponent<T extends abstract new (...args: any) => any, D extends Data = Data> = WithCommon<{
821
+ slots?: ComponentSlots<T>;
822
+ } & ComponentProps<T>, D>;
833
823
 
834
824
  /**
835
825
  * @description 为对象属性添加响应式支持的类型
package/es/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import "./antdv-next-pro.css";
2
- import { _ as _sfc_main } from "./form/index-DShboSl2.js";
3
- import { c, b, C, a, F, d, T, g, e, u, f } from "./form/index-DShboSl2.js";
4
- import { _ as _sfc_main$1 } from "./component-provider/index-Cy8dTKpN.js";
5
- import { a as a2, I, b as b2, f as f2 } from "./component-provider/index-Cy8dTKpN.js";
2
+ import { _ as _sfc_main } from "./form/index-idQHUPJc.js";
3
+ import { c, b, C, a, F, d, T, g, r, e, u, f } from "./form/index-idQHUPJc.js";
4
+ import { _ as _sfc_main$1 } from "./component-provider/index-DcaBbsiC.js";
5
+ import { a as a2, I, b as b2, f as f2 } from "./component-provider/index-DcaBbsiC.js";
6
6
  import BaseTable from "./table/index.js";
7
7
  import { useTable } from "./table/index.js";
8
8
  const withInstall = (comp) => {
@@ -39,6 +39,7 @@ export {
39
39
  T as TeleportComponentNamePrefix,
40
40
  index as default,
41
41
  g as getInitProps,
42
+ r as registerComponent,
42
43
  e as useFields,
43
44
  u as useForm,
44
45
  f2 as useFormData,
package/es/table/index.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import { createElementBlock, openBlock, createElementVNode, defineComponent, ref, computed, watch, watchEffect, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, resolveDynamicComponent, createTextVNode, createCommentVNode, Fragment, toDisplayString, normalizeStyle, useModel, h, mergeModels, inject, useAttrs, useSlots, onMounted, normalizeClass, createSlots, renderList, normalizeProps, guardReactiveProps, nextTick } from "vue";
2
2
  import { Space, Button, theme, useConfig, Dropdown, Menu, Checkbox, Table } from "antdv-next";
3
3
  import "antdv-next/dist/config-provider/DisabledContext";
4
- import "antdv-next/dist/config-provider/SizeContext";
5
- import { _ as _sfc_main$9, t as tableProps, a as _sfc_main$a } from "../form/index-DShboSl2.js";
6
- import { a as INJECT_CONFIG, g as getObject, c as camelizeProperties, h as useTable$1 } from "../component-provider/index-Cy8dTKpN.js";
4
+ import { _ as _sfc_main$9, t as tableProps, a as _sfc_main$a } from "../form/index-idQHUPJc.js";
5
+ import { a as INJECT_CONFIG, g as getObject, c as camelizeProperties, h as useTable$1 } from "../component-provider/index-DcaBbsiC.js";
7
6
  import { p as pick } from "../vendor/utils/lodash-es-p6jau26B.js";
8
7
  const _export_sfc = (sfc, props) => {
9
8
  const target = sfc.__vccOpts || sfc;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qin-ui/antdv-next-pro",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "基于 antdv-next 的二次封装组件",
5
5
  "type": "module",
6
6
  "module": "es/index.js",
@@ -17,6 +17,11 @@
17
17
  "README.md",
18
18
  "LICENSE"
19
19
  ],
20
+ "homepage": "https://dufan3715.github.io/pro-components/",
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "git+https://github.com/dufan3715/pro-components.git"
24
+ },
20
25
  "scripts": {
21
26
  "build": "vue-tsc && vite build"
22
27
  },