@silver-formily/vue 2.1.1 → 2.3.0
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.en.md +113 -118
- package/README.md +113 -118
- package/esm/components/ArrayField.mjs.map +1 -1
- package/esm/components/ExpressionScope.mjs +1 -1
- package/esm/components/ExpressionScope.mjs.map +1 -1
- package/esm/components/Field.mjs.map +1 -1
- package/esm/components/FormConsumer.mjs +1 -1
- package/esm/components/FormConsumer.mjs.map +1 -1
- package/esm/components/FormProvider.mjs.map +1 -1
- package/esm/components/ObjectField.mjs.map +1 -1
- package/esm/components/ReactiveField.mjs +37 -36
- package/esm/components/ReactiveField.mjs.map +1 -1
- package/esm/components/RecursionField.mjs +6 -6
- package/esm/components/RecursionField.mjs.map +1 -1
- package/esm/components/SchemaField.mjs +39 -37
- package/esm/components/SchemaField.mjs.map +1 -1
- package/esm/components/VoidField.mjs.map +1 -1
- package/esm/hooks/useField.mjs.map +1 -1
- package/esm/hooks/useForm.mjs.map +1 -1
- package/esm/shared/connect.mjs +1 -1
- package/esm/shared/connect.mjs.map +1 -1
- package/esm/shared/context.mjs.map +1 -1
- package/esm/utils/fieldProps.mjs +2 -0
- package/esm/utils/fieldProps.mjs.map +1 -1
- package/esm/utils/getRawComponent.mjs.map +1 -1
- package/esm/utils/reactiveFieldHelpers.mjs.map +1 -1
- package/esm/utils/recursionFieldProps.mjs.map +1 -1
- package/esm/utils/resolveSchemaProps.mjs.map +1 -1
- package/esm/utils/runtimeProps.mjs.map +1 -1
- package/esm/utils/schemaFieldProps.mjs +5 -4
- package/esm/utils/schemaFieldProps.mjs.map +1 -1
- package/esm/vue/src/components/ArrayField.d.ts +58 -0
- package/esm/{components → vue/src/components}/ExpressionScope.d.ts +1 -1
- package/esm/vue/src/components/Field.d.ts +58 -0
- package/esm/vue/src/components/FormConsumer.d.ts +4 -0
- package/esm/{components → vue/src/components}/FormProvider.d.ts +1 -1
- package/esm/{components → vue/src/components}/ObjectField.d.ts +22 -20
- package/esm/{components → vue/src/components}/ReactiveField.d.ts +1 -1
- package/esm/vue/src/components/RecursionField.d.ts +22 -0
- package/esm/{components → vue/src/components}/SchemaField.d.ts +1121 -1101
- package/esm/vue/src/components/VoidField.d.ts +42 -0
- package/esm/{hooks → vue/src/hooks}/useFieldSchema.d.ts +1 -1
- package/esm/vue/src/shared/connect.d.ts +5 -0
- package/esm/{types → vue/src/types}/index.d.ts +9 -2
- package/esm/{types → vue/src/types}/validator.d.ts +32 -0
- package/esm/{utils → vue/src/utils}/fieldProps.d.ts +18 -16
- package/esm/{utils → vue/src/utils}/getRawComponent.d.ts +2 -2
- package/esm/{utils → vue/src/utils}/recursionFieldProps.d.ts +12 -12
- package/esm/{utils → vue/src/utils}/schemaFieldProps.d.ts +75 -74
- package/package.json +73 -79
- package/esm/components/ArrayField.d.ts +0 -56
- package/esm/components/Field.d.ts +0 -56
- package/esm/components/FormConsumer.d.ts +0 -4
- package/esm/components/RecursionField.d.ts +0 -22
- package/esm/components/VoidField.d.ts +0 -40
- package/esm/shared/connect.d.ts +0 -9
- /package/esm/{components → vue/src/components}/index.d.ts +0 -0
- /package/esm/{hooks → vue/src/hooks}/index.d.ts +0 -0
- /package/esm/{hooks → vue/src/hooks}/useAttach.d.ts +0 -0
- /package/esm/{hooks → vue/src/hooks}/useField.d.ts +0 -0
- /package/esm/{hooks → vue/src/hooks}/useForm.d.ts +0 -0
- /package/esm/{hooks → vue/src/hooks}/useFormEffects.d.ts +0 -0
- /package/esm/{hooks → vue/src/hooks}/useInjectionCleaner.d.ts +0 -0
- /package/esm/{hooks → vue/src/hooks}/useParentForm.d.ts +0 -0
- /package/esm/{index.d.ts → vue/src/index.d.ts} +0 -0
- /package/esm/{shared → vue/src/shared}/context.d.ts +0 -0
- /package/esm/{shared → vue/src/shared}/index.d.ts +0 -0
- /package/esm/{utils → vue/src/utils}/reactiveFieldHelpers.d.ts +0 -0
- /package/esm/{utils → vue/src/utils}/resolveSchemaProps.d.ts +0 -0
- /package/esm/{utils → vue/src/utils}/runtimeProps.d.ts +0 -0
package/README.en.md
CHANGED
|
@@ -1,118 +1,113 @@
|
|
|
1
|
-
# Silver Formily Vue
|
|
2
|
-
|
|
3
|
-
[Documentation](https://vue.silver-formily.org/) · [
|
|
4
|
-
|
|
5
|
-
@silver-formily/vue is a Vue 3–first runtime wrapper around [Formily](https://formilyjs.org/). It keeps the orchestration power of `@formily/vue` while removing Vue 2 compatibility layers, redundant DOM wrappers, and inconsistent event contracts. The source lives in `src/`, docs in `docs/`, and build artifacts in `esm/`.
|
|
6
|
-
|
|
7
|
-
## ✨ Features
|
|
8
|
-
|
|
9
|
-
- **Pure Vue 3 runtime** – no `vue-demi`, `vue-frag`, or compatibility shims; the render tree mirrors native Vue component libraries.
|
|
10
|
-
- **Native DOM & events** – relies on `modelValue` / `onUpdate:modelValue`, so Element Plus and most Vue 3 UI kits work without extra adapters.
|
|
11
|
-
- **Richer TypeScript hints** – explicit generics and shared interfaces sit beside the runtime to keep emitted `.d.ts` files in sync.
|
|
12
|
-
- **Formily ecosystem alignment** – works with `@formily/core`, `@formily/json-schema`, and other official packages, keeping migration costs low.
|
|
13
|
-
- **
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
@formily/
|
|
32
|
-
@formily/
|
|
33
|
-
@formily/reactive
|
|
34
|
-
@formily/
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
import {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
pnpm
|
|
99
|
-
pnpm
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
-
|
|
109
|
-
-
|
|
110
|
-
|
|
111
|
-
##
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
- `docs/demos` contains Element Plus playgrounds that double as regression samples.
|
|
115
|
-
|
|
116
|
-
## 📄 License
|
|
117
|
-
|
|
118
|
-
MIT © hezhengxu
|
|
1
|
+
# Silver Formily Vue
|
|
2
|
+
|
|
3
|
+
[Documentation](https://vue.silver-formily.org/) · [中文 README](./README.md)
|
|
4
|
+
|
|
5
|
+
@silver-formily/vue is a Vue 3–first runtime wrapper around [Formily](https://formilyjs.org/). It keeps the orchestration power of `@formily/vue` while removing Vue 2 compatibility layers, redundant DOM wrappers, and inconsistent event contracts. The source lives in `src/`, docs in `docs/`, and build artifacts in `esm/`.
|
|
6
|
+
|
|
7
|
+
## ✨ Features
|
|
8
|
+
|
|
9
|
+
- **Pure Vue 3 runtime** – no `vue-demi`, `vue-frag`, or compatibility shims; the render tree mirrors native Vue component libraries.
|
|
10
|
+
- **Native DOM & events** – relies on `modelValue` / `onUpdate:modelValue`, so Element Plus and most Vue 3 UI kits work without extra adapters.
|
|
11
|
+
- **Richer TypeScript hints** – explicit generics and shared interfaces sit beside the runtime to keep emitted `.d.ts` files in sync.
|
|
12
|
+
- **Formily ecosystem alignment** – works with `@formily/core`, `@formily/json-schema`, and other official packages, keeping migration costs low.
|
|
13
|
+
- **Decorator slots** – wire `FormItem` and other wrappers to the form schema via `:decorator-content` / `x-decorator-content`, covering `default`, `label`, `extra`, or any named slot. See the [FAQ entry](../../apps/vue-docs/en/questions/index.md#how-do-i-pass-slots-to-a-decorator).
|
|
14
|
+
- **Docs & demos included** – VitePress docs describe APIs, migration notes, and Element Plus demos; run `pnpm docs:dev` to browse locally.
|
|
15
|
+
|
|
16
|
+
## 🔄 Differences vs `@formily/vue`
|
|
17
|
+
|
|
18
|
+
| Aspect | `@silver-formily/vue` 2.x | Official `@formily/vue` |
|
|
19
|
+
| -------------- | ------------------------------------------------------------------ | ---------------------------------------- |
|
|
20
|
+
| Event contract | `modelValue` / `onUpdate:modelValue` | `value` / `onChange` |
|
|
21
|
+
| DOM structure | No extra `template` / `display: contents` wrappers | Extra containers for Vue 2 compatibility |
|
|
22
|
+
| Dependencies | Vue 3–only runtime deps | Uses `vue-demi` to target Vue 2 + 3 |
|
|
23
|
+
| Schema export | Schema is **not** re-exported (import from `@formily/json-schema`) | Schema is re-exported |
|
|
24
|
+
| Compatibility | Use `@silver-formily/vue@1.x` for strict parity | Official package |
|
|
25
|
+
|
|
26
|
+
## 📦 Peer Dependencies
|
|
27
|
+
|
|
28
|
+
Install these alongside the library in your host app:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
@formily/core ^2
|
|
32
|
+
@formily/json-schema ^2
|
|
33
|
+
@formily/reactive ^2
|
|
34
|
+
@silver-formily/reactive-vue ^1
|
|
35
|
+
@formily/shared ^2
|
|
36
|
+
vue ^3.3.0+
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 🚀 Installation
|
|
40
|
+
|
|
41
|
+
Recommended pnpm command:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
pnpm add @silver-formily/vue @formily/core @formily/json-schema @formily/reactive @silver-formily/reactive-vue @formily/shared
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## ⚡️ Quick Start
|
|
48
|
+
|
|
49
|
+
The snippet below wires Element Plus inputs into Formily:
|
|
50
|
+
|
|
51
|
+
```vue
|
|
52
|
+
<script setup lang="ts">
|
|
53
|
+
import { createForm } from '@formily/core'
|
|
54
|
+
import { connect, Field, FormProvider, mapProps } from '@silver-formily/vue'
|
|
55
|
+
import { ElFormItem, ElInput } from 'element-plus'
|
|
56
|
+
|
|
57
|
+
const form = createForm({ validateFirst: true })
|
|
58
|
+
|
|
59
|
+
const FormItem = connect(
|
|
60
|
+
ElFormItem,
|
|
61
|
+
mapProps({ title: 'label', required: true }, (_, field) => ({
|
|
62
|
+
error: field.selfErrors[0] || undefined,
|
|
63
|
+
})),
|
|
64
|
+
)
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
<template>
|
|
68
|
+
<FormProvider :form="form">
|
|
69
|
+
<Field
|
|
70
|
+
name="email"
|
|
71
|
+
title="Email"
|
|
72
|
+
required
|
|
73
|
+
:decorator="[FormItem]"
|
|
74
|
+
:component="[ElInput, { placeholder: 'hello@formily.dev' }]"
|
|
75
|
+
/>
|
|
76
|
+
</FormProvider>
|
|
77
|
+
</template>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Explore more components (`SchemaField`, `RecursionField`, `ArrayField`, etc.) and composables in [`docs/api`](../../apps/vue-docs/api).
|
|
81
|
+
|
|
82
|
+
## 🧱 API Overview
|
|
83
|
+
|
|
84
|
+
- **Components**: `FormProvider`, `FormConsumer`, `Field`, `ArrayField`, `ObjectField`, `VoidField`, `SchemaField`, `RecursionField`, `ReactiveField`, `ExpressionScope`.
|
|
85
|
+
- **Composables**: `useForm`, `useField`, `useFieldSchema`, `useFormEffects`, `useParentForm`, `useAttach`, `useInjectionCleaner`.
|
|
86
|
+
- **Shared helpers**: `connect`, `mapProps`, plus factories in `src/shared` and `src/utils`.
|
|
87
|
+
|
|
88
|
+
All public symbols are re-exported from `src/index.ts`, and the published bundle (JS + declarations) lives in `esm/`.
|
|
89
|
+
|
|
90
|
+
## 🛠️ Local Development
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
pnpm install # Install dependencies
|
|
94
|
+
pnpm lint # Run Antfu ESLint rules
|
|
95
|
+
pnpm build # Build the library + types via Vite
|
|
96
|
+
pnpm docs:dev # Launch the VitePress docs site
|
|
97
|
+
pnpm docs:build # Generate static docs into docs/.vitepress/dist
|
|
98
|
+
pnpm commit # Conventional Commit helper (czg)
|
|
99
|
+
pnpm release # Changeset-driven release (requires clean tree)
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
- Build output is generated into `esm/`; do not hand-edit this directory.
|
|
103
|
+
- Automated tests are not wired yet—document manual verification (Vue + Formily versions, schema, browser) in every PR.
|
|
104
|
+
- Follow `@antfu/eslint-config` style: 2 spaces, single quotes, dangling commas where allowed, no semicolons.
|
|
105
|
+
|
|
106
|
+
## 📚 Docs & Examples
|
|
107
|
+
|
|
108
|
+
- Visit the published site: <https://vue.silver-formily.org/>.
|
|
109
|
+
- `docs/demos` contains Element Plus playgrounds that double as regression samples.
|
|
110
|
+
|
|
111
|
+
## 📄 License
|
|
112
|
+
|
|
113
|
+
MIT © hezhengxu
|
package/README.md
CHANGED
|
@@ -1,118 +1,113 @@
|
|
|
1
|
-
# Silver Formily Vue
|
|
2
|
-
|
|
3
|
-
[文档网站](https://vue.silver-formily.org/) · [本地文档首页](
|
|
4
|
-
|
|
5
|
-
@silver-formily/vue 是一个专注于 Vue 3 生态的 [Formily](https://formilyjs.org/) 运行时封装。它保留了 `@formily/vue` 的编排能力,同时去除了 Vue 2 兼容层、冗余 DOM 包裹以及不一致的事件契约。源码位于 `src/`,文档位于 `docs/`,构建产物存放在 `esm/`。
|
|
6
|
-
|
|
7
|
-
## ✨ 特性
|
|
8
|
-
|
|
9
|
-
- **纯粹的 Vue 3 代码路径**:完全抛弃 `vue-demi`、`vue-frag` 等兼容依赖,渲染树贴近原生组件库。
|
|
10
|
-
- **原生 DOM 与事件语义**:统一使用 `modelValue` / `onUpdate:modelValue`,Element Plus 等组件可直接对接。
|
|
11
|
-
- **完善的 TypeScript 类型**:在运行时附近维护显式泛型与公共接口,确保生成的 `.d.ts` 与实现同步。
|
|
12
|
-
- **Formily 生态对齐**:与 `@formily/core`、`@formily/json-schema` 等官方包保持兼容,迁移成本低。
|
|
13
|
-
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
@formily/
|
|
32
|
-
@formily/
|
|
33
|
-
@formily/reactive
|
|
34
|
-
@formily/
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
import {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
pnpm
|
|
99
|
-
pnpm
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
-
|
|
109
|
-
-
|
|
110
|
-
|
|
111
|
-
##
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
- `docs/demos` 提供 Element Plus 示例,可作为封装自定义组件的起点。
|
|
115
|
-
|
|
116
|
-
## 📄 License
|
|
117
|
-
|
|
118
|
-
MIT © hezhengxu
|
|
1
|
+
# Silver Formily Vue
|
|
2
|
+
|
|
3
|
+
[文档网站](https://vue.silver-formily.org/) · [本地文档首页](../../apps/vue-docs/index.md) · [English README](./README.en.md)
|
|
4
|
+
|
|
5
|
+
@silver-formily/vue 是一个专注于 Vue 3 生态的 [Formily](https://formilyjs.org/) 运行时封装。它保留了 `@formily/vue` 的编排能力,同时去除了 Vue 2 兼容层、冗余 DOM 包裹以及不一致的事件契约。源码位于 `src/`,文档位于 `docs/`,构建产物存放在 `esm/`。
|
|
6
|
+
|
|
7
|
+
## ✨ 特性
|
|
8
|
+
|
|
9
|
+
- **纯粹的 Vue 3 代码路径**:完全抛弃 `vue-demi`、`vue-frag` 等兼容依赖,渲染树贴近原生组件库。
|
|
10
|
+
- **原生 DOM 与事件语义**:统一使用 `modelValue` / `onUpdate:modelValue`,Element Plus 等组件可直接对接。
|
|
11
|
+
- **完善的 TypeScript 类型**:在运行时附近维护显式泛型与公共接口,确保生成的 `.d.ts` 与实现同步。
|
|
12
|
+
- **Formily 生态对齐**:与 `@formily/core`、`@formily/json-schema` 等官方包保持兼容,迁移成本低。
|
|
13
|
+
- **Decorator 插槽支持**:通过 `:decorator-content` 与 `x-decorator-content` 将 `FormItem` 等装饰器的 `default`、`label`、`extra` 插槽与 schema 数据解耦,详见[常见问题](../../apps/vue-docs/questions/index.md#如何向装饰器传递插槽)。
|
|
14
|
+
- **配套文档与示例**:内置 VitePress 文档,包含 API、迁移提示以及 Element Plus 示例,执行 `pnpm docs:dev` 即可查看。
|
|
15
|
+
|
|
16
|
+
## 🔄 与 `@formily/vue` 的差异
|
|
17
|
+
|
|
18
|
+
| 项目 | `@silver-formily/vue` 2.x | 官方 `@formily/vue` |
|
|
19
|
+
| ----------- | ----------------------------------------------------------- | -------------------------------- |
|
|
20
|
+
| 事件契约 | `modelValue` / `onUpdate:modelValue` | `value` / `onChange` |
|
|
21
|
+
| DOM 结构 | 无额外 `template` / `display: contents` 包裹 | 含 Vue 2 兼容容器 |
|
|
22
|
+
| 依赖 | 仅依赖 Vue 3 生态 | 借助 `vue-demi` 同时支持 Vue 2/3 |
|
|
23
|
+
| Schema 导出 | 不再 re-export `Schema`(请从 `@formily/json-schema` 引入) | 仍导出 |
|
|
24
|
+
| 兼容策略 | 需要与官方保持完全一致时可使用 `@silver-formily/vue@1.x` | 官方包 |
|
|
25
|
+
|
|
26
|
+
## 📦 Peer Dependencies
|
|
27
|
+
|
|
28
|
+
在宿主应用中需要同时安装:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
@formily/core ^2
|
|
32
|
+
@formily/json-schema ^2
|
|
33
|
+
@formily/reactive ^2
|
|
34
|
+
@silver-formily/reactive-vue ^1
|
|
35
|
+
@formily/shared ^2
|
|
36
|
+
vue ^3.3.0+
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 🚀 安装
|
|
40
|
+
|
|
41
|
+
推荐使用 pnpm:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
pnpm add @silver-formily/vue @formily/core @formily/json-schema @formily/reactive @silver-formily/reactive-vue @formily/shared
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## ⚡️ 快速开始
|
|
48
|
+
|
|
49
|
+
以下示例演示如何结合 Element Plus 构建最小表单:
|
|
50
|
+
|
|
51
|
+
```vue
|
|
52
|
+
<script setup lang="ts">
|
|
53
|
+
import { createForm } from '@formily/core'
|
|
54
|
+
import { connect, Field, FormProvider, mapProps } from '@silver-formily/vue'
|
|
55
|
+
import { ElFormItem, ElInput } from 'element-plus'
|
|
56
|
+
|
|
57
|
+
const form = createForm({ validateFirst: true })
|
|
58
|
+
|
|
59
|
+
const FormItem = connect(
|
|
60
|
+
ElFormItem,
|
|
61
|
+
mapProps({ title: 'label', required: true }, (_, field) => ({
|
|
62
|
+
error: field.selfErrors[0] || undefined,
|
|
63
|
+
})),
|
|
64
|
+
)
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
<template>
|
|
68
|
+
<FormProvider :form="form">
|
|
69
|
+
<Field
|
|
70
|
+
name="email"
|
|
71
|
+
title="Email"
|
|
72
|
+
required
|
|
73
|
+
:decorator="[FormItem]"
|
|
74
|
+
:component="[ElInput, { placeholder: 'hello@formily.dev' }]"
|
|
75
|
+
/>
|
|
76
|
+
</FormProvider>
|
|
77
|
+
</template>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
更多组件(`SchemaField`、`RecursionField`、`ArrayField` 等)与组合式 API 请参阅 [`docs/api`](../../apps/vue-docs/api)。
|
|
81
|
+
|
|
82
|
+
## 🧱 API 速览
|
|
83
|
+
|
|
84
|
+
- **组件**:`FormProvider`、`FormConsumer`、`Field`、`ArrayField`、`ObjectField`、`VoidField`、`SchemaField`、`RecursionField`、`ReactiveField`、`ExpressionScope`。
|
|
85
|
+
- **组合式函数**:`useForm`、`useField`、`useFieldSchema`、`useFormEffects`、`useParentForm`、`useAttach`、`useInjectionCleaner`。
|
|
86
|
+
- **共享工具**:`connect`、`mapProps` 以及位于 `src/shared`、`src/utils` 的渲染辅助。
|
|
87
|
+
|
|
88
|
+
所有公共符号均通过 `src/index.ts` 输出,构建后的 JS 与 `.d.ts` 保存在 `esm/`。
|
|
89
|
+
|
|
90
|
+
## 🛠️ 本地开发
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
pnpm install # 安装依赖
|
|
94
|
+
pnpm lint # 运行 Antfu ESLint 规则
|
|
95
|
+
pnpm build # 基于 Vite 生成库与类型
|
|
96
|
+
pnpm docs:dev # 启动 VitePress 文档站点
|
|
97
|
+
pnpm docs:build # 生成静态文档 (docs/.vitepress/dist)
|
|
98
|
+
pnpm commit # 使用 czg 编写 Conventional Commit
|
|
99
|
+
pnpm release # Changeset 发布流程(需要干净工作区)
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
- 构建输出位于 `esm/`,请勿手动修改。
|
|
103
|
+
- 目前没有自动化测试,请在 PR 中记录手动验证(Vue/Formily 版本、使用的 schema、浏览器等)。
|
|
104
|
+
- 代码风格遵循 `@antfu/eslint-config`:2 空格、单引号、允许尾随逗号、无分号。
|
|
105
|
+
|
|
106
|
+
## 📚 文档与示例
|
|
107
|
+
|
|
108
|
+
- 在线站点:<https://vue.silver-formily.org/>
|
|
109
|
+
- `docs/demos` 提供 Element Plus 示例,可作为封装自定义组件的起点。
|
|
110
|
+
|
|
111
|
+
## 📄 License
|
|
112
|
+
|
|
113
|
+
MIT © hezhengxu
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArrayField.mjs","sources":["../../src/components/ArrayField.ts"],"sourcesContent":["import type { IArrayFieldProps } from '../types'\
|
|
1
|
+
{"version":3,"file":"ArrayField.mjs","sources":["../../src/components/ArrayField.ts"],"sourcesContent":["import type { IArrayFieldProps } from '../types'\nimport { defineComponent, h } from 'vue'\nimport { fieldProps } from '../utils/fieldProps'\nimport { getRawComponent } from '../utils/getRawComponent'\nimport ReactiveField from './ReactiveField'\n\nexport default defineComponent({\n name: 'ArrayField',\n props: fieldProps,\n setup(props: IArrayFieldProps, { slots }) {\n return () => {\n const componentData = {\n fieldType: 'ArrayField',\n fieldProps: {\n ...props,\n ...getRawComponent(props),\n },\n }\n return h(ReactiveField, componentData, slots)\n }\n },\n})\n"],"names":["ArrayField","defineComponent","fieldProps","props","slots","componentData","getRawComponent","h","ReactiveField"],"mappings":";;;;AAMA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,MAAMC,GAAyB,EAAE,OAAAC,KAAS;AACxC,WAAO,MAAM;AACX,YAAMC,IAAgB;AAAA,QACpB,WAAW;AAAA,QACX,YAAY;AAAA,UACV,GAAGF;AAAA,UACH,GAAGG,EAAgBH,CAAK;AAAA,QAAA;AAAA,MAC1B;AAEF,aAAOI,EAAEC,GAAeH,GAAeD,CAAK;AAAA,IAC9C;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { lazyMerge as s } from "@formily/shared";
|
|
2
2
|
import { defineComponent as c, inject as i, computed as m, provide as a } from "vue";
|
|
3
3
|
import "@formily/core";
|
|
4
|
-
import "@formily/reactive-vue";
|
|
4
|
+
import "@silver-formily/reactive-vue";
|
|
5
5
|
import { SchemaExpressionScopeSymbol as e } from "../shared/context.mjs";
|
|
6
6
|
const x = c({
|
|
7
7
|
name: "ExpressionScope",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressionScope.mjs","sources":["../../src/components/ExpressionScope.ts"],"sourcesContent":["import type { PropType, Ref } from 'vue'\
|
|
1
|
+
{"version":3,"file":"ExpressionScope.mjs","sources":["../../src/components/ExpressionScope.ts"],"sourcesContent":["import type { PropType, Ref } from 'vue'\nimport type { IExpressionScopeProps, SchemaExpressionScope } from '../types'\nimport { lazyMerge } from '@formily/shared'\nimport { computed, defineComponent, inject, provide } from 'vue'\nimport { SchemaExpressionScopeSymbol } from '../shared'\n\nexport default defineComponent({\n name: 'ExpressionScope',\n props: {\n value: {\n type: Object as PropType<IExpressionScopeProps['value']>,\n required: true,\n },\n },\n setup(props, { slots }) {\n const parentScopeRef = inject<Ref<SchemaExpressionScope>>(SchemaExpressionScopeSymbol)\n const expressionScopeRef = computed<SchemaExpressionScope>(() => {\n const parentScope = parentScopeRef?.value ?? {}\n return lazyMerge(parentScope, props.value)\n })\n\n provide(SchemaExpressionScopeSymbol, expressionScopeRef)\n\n return () => slots.default?.()\n },\n})\n"],"names":["ExpressionScope","defineComponent","props","slots","parentScopeRef","inject","SchemaExpressionScopeSymbol","expressionScopeRef","computed","parentScope","lazyMerge","provide"],"mappings":";;;;;AAMA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,MAAMC,GAAO,EAAE,OAAAC,KAAS;AACtB,UAAMC,IAAiBC,EAAmCC,CAA2B,GAC/EC,IAAqBC,EAAgC,MAAM;AAC/D,YAAMC,IAAcL,GAAgB,SAAS,CAAA;AAC7C,aAAOM,EAAUD,GAAaP,EAAM,KAAK;AAAA,IAC3C,CAAC;AAED,WAAAS,EAAQL,GAA6BC,CAAkB,GAEhD,MAAMJ,EAAM,UAAA;AAAA,EACrB;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.mjs","sources":["../../src/components/Field.ts"],"sourcesContent":["import type { IFieldProps, IReactiveFieldProps } from '../types'\
|
|
1
|
+
{"version":3,"file":"Field.mjs","sources":["../../src/components/Field.ts"],"sourcesContent":["import type { IFieldProps, IReactiveFieldProps } from '../types'\nimport { defineComponent, h } from 'vue'\nimport { fieldProps } from '../utils/fieldProps'\nimport { getRawComponent } from '../utils/getRawComponent'\nimport ReactiveField from './ReactiveField'\n\nexport default defineComponent({\n name: 'Field',\n props: fieldProps,\n setup(props: IFieldProps, context) {\n return () => {\n const componentData: IReactiveFieldProps = {\n fieldType: 'Field',\n fieldProps: {\n ...props,\n ...getRawComponent(props),\n },\n }\n return h(ReactiveField, componentData, context.slots)\n }\n },\n})\n"],"names":["Field","defineComponent","fieldProps","props","context","componentData","getRawComponent","h","ReactiveField"],"mappings":";;;;AAMA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,MAAMC,GAAoBC,GAAS;AACjC,WAAO,MAAM;AACX,YAAMC,IAAqC;AAAA,QACzC,WAAW;AAAA,QACX,YAAY;AAAA,UACV,GAAGF;AAAA,UACH,GAAGG,EAAgBH,CAAK;AAAA,QAAA;AAAA,MAC1B;AAEF,aAAOI,EAAEC,GAAeH,GAAeD,EAAQ,KAAK;AAAA,IACtD;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormConsumer.mjs","sources":["../../src/components/FormConsumer.ts"],"sourcesContent":["import { useObserver } from '@formily/reactive-vue'\
|
|
1
|
+
{"version":3,"file":"FormConsumer.mjs","sources":["../../src/components/FormConsumer.ts"],"sourcesContent":["import { useObserver } from '@silver-formily/reactive-vue'\nimport { defineComponent } from 'vue'\nimport { useForm } from '../hooks'\n\nexport default defineComponent({\n name: 'FormConsumer',\n inheritAttrs: false,\n setup(_, { slots }) {\n useObserver({\n scheduler: update => Promise.resolve().then(update),\n })\n\n const form = useForm()\n\n return () => slots.default?.({ form: form.value }) ?? null\n },\n})\n"],"names":["FormConsumer","defineComponent","_","slots","useObserver","update","form","useForm"],"mappings":";;;;AAIA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EACd,MAAMC,GAAG,EAAE,OAAAC,KAAS;AAClB,IAAAC,EAAY;AAAA,MACV,WAAW,CAAAC,MAAU,QAAQ,QAAA,EAAU,KAAKA,CAAM;AAAA,IAAA,CACnD;AAED,UAAMC,IAAOC,EAAA;AAEb,WAAO,MAAMJ,EAAM,UAAU,EAAE,MAAMG,EAAK,MAAA,CAAO,KAAK;AAAA,EACxD;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormProvider.mjs","sources":["../../src/components/FormProvider.ts"],"sourcesContent":["import type { PropType } from 'vue'\
|
|
1
|
+
{"version":3,"file":"FormProvider.mjs","sources":["../../src/components/FormProvider.ts"],"sourcesContent":["import type { PropType } from 'vue'\nimport type { IProviderProps } from '../types'\nimport { defineComponent, provide, toRef } from 'vue'\nimport { useAttach } from '../hooks/useAttach'\nimport { useInjectionCleaner } from '../hooks/useInjectionCleaner'\nimport {\n FieldSymbol,\n FormSymbol,\n SchemaExpressionScopeSymbol,\n SchemaMarkupSymbol,\n SchemaOptionsSymbol,\n SchemaSymbol,\n} from '../shared/context'\n\nexport default defineComponent({\n name: 'FormProvider',\n props: {\n form: {\n type: Object as PropType<IProviderProps['form']>,\n required: true,\n },\n },\n setup(props, { slots }) {\n const formRef = useAttach(toRef(props, 'form'))\n provide(FormSymbol, formRef)\n useInjectionCleaner([\n FieldSymbol,\n SchemaMarkupSymbol,\n SchemaSymbol,\n SchemaExpressionScopeSymbol,\n SchemaOptionsSymbol,\n ])\n\n return () => slots.default?.()\n },\n})\n"],"names":["FormProvider","defineComponent","props","slots","formRef","useAttach","toRef","provide","FormSymbol","useInjectionCleaner","FieldSymbol","SchemaMarkupSymbol","SchemaSymbol","SchemaExpressionScopeSymbol","SchemaOptionsSymbol"],"mappings":";;;;AAcA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,MAAMC,GAAO,EAAE,OAAAC,KAAS;AACtB,UAAMC,IAAUC,EAAUC,EAAMJ,GAAO,MAAM,CAAC;AAC9C,WAAAK,EAAQC,GAAYJ,CAAO,GAC3BK,EAAoB;AAAA,MAClBC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA,CACD,GAEM,MAAMX,EAAM,UAAA;AAAA,EACrB;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectField.mjs","sources":["../../src/components/ObjectField.ts"],"sourcesContent":["import { defineComponent, h } from 'vue'\
|
|
1
|
+
{"version":3,"file":"ObjectField.mjs","sources":["../../src/components/ObjectField.ts"],"sourcesContent":["import { defineComponent, h } from 'vue'\nimport { fieldProps } from '../utils/fieldProps'\nimport { getRawComponent } from '../utils/getRawComponent'\nimport ReactiveField from './ReactiveField'\n\nexport default defineComponent({\n name: 'ObjectField',\n props: fieldProps,\n setup(props, { slots }) {\n return () => {\n const componentData = {\n fieldType: 'ObjectField',\n fieldProps: {\n ...props,\n ...getRawComponent(props),\n },\n }\n return h(ReactiveField, componentData, slots)\n }\n },\n})\n"],"names":["ObjectField","defineComponent","fieldProps","props","slots","componentData","getRawComponent","h","ReactiveField"],"mappings":";;;;AAKA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,MAAMC,GAAO,EAAE,OAAAC,KAAS;AACtB,WAAO,MAAM;AACX,YAAMC,IAAgB;AAAA,QACpB,WAAW;AAAA,QACX,YAAY;AAAA,UACV,GAAGF;AAAA,UACH,GAAGG,EAAgBH,CAAK;AAAA,QAAA;AAAA,MAC1B;AAEF,aAAOI,EAAEC,GAAeH,GAAeD,CAAK;AAAA,IAC9C;AAAA,EACF;AACF,CAAC;"}
|