P.S. alternative @form-create/naive-ui
- Package type:
ts files
Install command
pnpm i @francfox/fn-formsImport component
<script setup type="ts">
import { FnSchema, NaiveUISchema } from "@francyfox/fn-forms/src/lib"
const formData = ref()
const json = {
$type: 'n-form',
children: []
} as NaiveUISchema
</script>
<template>
<fn-schema v-model:data="formData" :schema="TestSchema"/>
</template>- Json start with form wrapper (
$type: 'form') - In children create our form elements
$typeequal component name (like )$propequal component props$childrenequal component slot. U can use string for default slot, array for children (h - render functions) json elements or object with slot functions{ default: () => 'button text'}
If you want set data in props (value, checked) use string $data. Simply $data.user.name converted to ->
formData.user.name, formData gets from v-model:data
$dataequal v-model:data (only in value, checked props)- ...
[
{
$type: 'n-form',
$children: [
{
$type: 'n-space',
$children: [
{
$type: 'n-form-item',
$props: {
label: 'Name',
path: 'user.name',
},
$children: [
{
$type: 'n-input',
$props: {
placeholder: 'Input Name',
value: '$data.user.name',
},
},
],
},
{
$type: 'n-form-item',
$props: {
label: 'Email',
path: 'user.email',
},
$children: [
{
$type: 'n-input',
$props: {
type: 'email',
placeholder: 'Input Email',
value: '$data.user.email',
},
},
],
},
],
},
{
$type: 'n-form-item',
$props: {
label: 'Age',
path: 'user.age',
},
$children: [
{
$type: 'n-input-number',
$props: {
placeholder: 'Input age',
clearable: true,
value: '$data.user.age',
},
},
],
},
{
$type: 'n-form-item',
$props: {
label: 'Age',
path: 'user.agree',
},
$children: [
{
$type: 'n-checkbox',
$children: 'I agree',
$props: {
placeholder: 'Agree?',
value: '$data.user.agree',
},
},
],
},
{
$type: 'n-form-item',
$props: {
label: 'Gender',
path: 'user.gender',
},
$children: [
{
$type: 'n-select',
$children: 'I agree',
$props: {
multiple: true,
value: '$data.user.gender',
options: [
{
label: 'Nowhere Man',
value: 'song4',
},
{
label: 'Think For Yourself',
value: 'song5',
},
],
},
},
],
},
{
$type: 'n-radio-group',
$props: {
value: '$data.user.live',
name: 'state'
},
$children: [
{
$type: 'n-radio',
$children: 'Live!',
$props: {
value: 'live',
},
},
{
$type: 'n-radio',
$children: 'Dead!',
$props: {
label: 'Dead!',
value: 'dead',
},
},
],
},
{
$type: 'n-form-item',
$children: [
{
$type: 'n-switch',
$children: {
checked: () => 'TEst',
unchecked: () => 'NonTest'
},
$props: {
value: '$data.user.test',
railStyle: () => 'background: red'
}
}
]
},
{
$type: 'n-form-item',
$children: [
{
$type: 'n-button',
$children: 'Send Form',
},
],
},
],
},
]const formData = ref({
user: {
name: 'francyfox',
email: 'test@mail.ru',
age: 16,
agree: true,
gender: ['song4'],
live: 'live',
test: false
},
});
Form = 'n-form',
Input = 'n-input',
InputNumber = 'n-input-number',
FormItem = 'n-form-item',
Button = 'n-button',
Space = 'n-space',
Select = 'n-select',
Checkbox = 'n-checkbox',
Radio = 'n-radio',
RadioGroup = 'n-radio-group',
Switch = 'n-switch',
DynamicTags = 'n-dynamic-tags',
Upload = 'n-upload',
UploadDnd = 'fn-upload-dnd'- change deepmerge to deepmerge-ts
- disable compile version. Only TS
- fix import error
- Remove from npm compiled js dist and assert ts folder