Skip to content

Commit 68ae34d

Browse files
francyfoxfrancyfox
committed
update readme
1 parent 1cfb31b commit 68ae34d

File tree

2 files changed

+191
-5
lines changed

2 files changed

+191
-5
lines changed

‎2023-05-23_13-51.png

31.3 KB
Loading

‎README.md

+191-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
# FN-Scheme
22
#### Form schema component for Naive UI framework. Generate form from json like formkit schema component
3-
## Documentation [link](#)
43

5-
Package type: `Module`
4+
- Package type: `Module`
5+
- Original size: `???`
6+
- Bzip + minify: `???`
67

78

89
#### TREE
910
- [How to use](#how-to-use)
10-
11-
11+
- [Available components](#available-components)
1212

1313

1414
### How to Use
@@ -28,7 +28,7 @@ import { FnSchema } from '@francyfox/fn-forms'
2828
import { NaiveUISchema } from "@francyfox/fn-forms/module/schema";
2929
3030
const json = {
31-
$type: 'form',
31+
$type: 'n-form',
3232
children: []
3333
} as NaiveUISchema
3434
</script>
@@ -38,6 +38,192 @@ const json = {
3838
</template>
3939
```
4040

41+
1. Json start with form wrapper (`$type: 'form'`)
42+
2. In children create our form elements
43+
44+
##### JSON API
45+
46+
- `$type` equal component name (like <n-form>)
47+
- `$prop` equal component props
48+
- `$children` equal component slot. U can use string for default slot, array for children (h - render functions)
49+
json elements or object with slot functions `{ default: () => 'button text'}`
50+
51+
##### Json test scheme
52+
```json
53+
[
54+
{
55+
$type: 'n-form',
56+
$children: [
57+
{
58+
$type: 'n-space',
59+
$children: [
60+
{
61+
$type: 'n-form-item',
62+
$props: {
63+
label: 'Name',
64+
path: 'user.name',
65+
},
66+
$children: [
67+
{
68+
$type: 'n-input',
69+
$props: {
70+
placeholder: 'Input Name',
71+
value: '$data.user.name',
72+
},
73+
},
74+
],
75+
},
76+
{
77+
$type: 'n-form-item',
78+
$props: {
79+
label: 'Email',
80+
path: 'user.email',
81+
},
82+
$children: [
83+
{
84+
$type: 'n-input',
85+
$props: {
86+
type: 'email',
87+
placeholder: 'Input Email',
88+
value: '$data.user.email',
89+
},
90+
},
91+
],
92+
},
93+
],
94+
},
95+
{
96+
$type: 'n-form-item',
97+
$props: {
98+
label: 'Age',
99+
path: 'user.age',
100+
},
101+
$children: [
102+
{
103+
$type: 'n-input-number',
104+
$props: {
105+
placeholder: 'Input age',
106+
clearable: true,
107+
value: '$data.user.age',
108+
},
109+
},
110+
],
111+
},
112+
{
113+
$type: 'n-form-item',
114+
$props: {
115+
label: 'Age',
116+
path: 'user.agree',
117+
},
118+
$children: [
119+
{
120+
$type: 'n-checkbox',
121+
$children: 'I agree',
122+
$props: {
123+
placeholder: 'Agree?',
124+
value: '$data.user.agree',
125+
},
126+
},
127+
],
128+
},
129+
{
130+
$type: 'n-form-item',
131+
$props: {
132+
label: 'Gender',
133+
path: 'user.gender',
134+
},
135+
$children: [
136+
{
137+
$type: 'n-select',
138+
$children: 'I agree',
139+
$props: {
140+
multiple: true,
141+
value: '$data.user.gender',
142+
options: [
143+
{
144+
label: 'Nowhere Man',
145+
value: 'song4',
146+
},
147+
{
148+
label: 'Think For Yourself',
149+
value: 'song5',
150+
},
151+
],
152+
},
153+
},
154+
],
155+
},
156+
{
157+
$type: 'n-radio-group',
158+
$props: {
159+
value: '$data.user.live',
160+
name: 'state'
161+
},
162+
$children: [
163+
{
164+
$type: 'n-radio',
165+
$children: 'Live!',
166+
$props: {
167+
value: 'live',
168+
},
169+
},
170+
{
171+
$type: 'n-radio',
172+
$children: 'Dead!',
173+
$props: {
174+
label: 'Dead!',
175+
value: 'dead',
176+
},
177+
},
178+
],
179+
},
180+
{
181+
$type: 'n-form-item',
182+
$children: [
183+
{
184+
$type: 'n-switch',
185+
$children: {
186+
checked: () => 'TEst',
187+
unchecked: () => 'NonTest'
188+
},
189+
$props: {
190+
value: '$data.user.test',
191+
railStyle: () => 'background: red'
192+
}
193+
}
194+
]
195+
},
196+
{
197+
$type: 'n-form-item',
198+
$children: [
199+
{
200+
$type: 'n-button',
201+
$children: 'Send Form',
202+
},
203+
],
204+
},
205+
206+
],
207+
},
208+
]
209+
```
210+
211+
```ts
212+
const formData = ref({
213+
user: {
214+
name: 'francyfox',
215+
email: 'test@mail.ru',
216+
age: 16,
217+
agree: true,
218+
gender: ['song4'],
219+
live: 'live',
220+
test: false
221+
},
222+
});
223+
```
224+
![image](2023-05-23_13-51.png)
225+
226+
41227
#### Available components:
42228
- Form
43229
- Input

0 commit comments

Comments
 (0)