Skip to content

Form schema component for Naive UI framework. Generate form from json like formkit schema component

License

Notifications You must be signed in to change notification settings

francyfox/fn-forms

Repository files navigation

Not actual

P.S. alternative @form-create/naive-ui

FN-Scheme TS

Form schema component for Naive UI framework. Generate form from json like formkit schema component

  • Package type: ts files

TREE

How to Use

Install command

pnpm i @francfox/fn-forms

Import 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>
  1. Json start with form wrapper ($type: 'form')
  2. In children create our form elements
JSON API
  • $type equal component name (like )
  • $prop equal component props
  • $children equal 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

Supported alias
  • $data equal v-model:data (only in value, checked props)
  • ...
Json test scheme
[
    {
        $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
  },
});

image

Available components:

  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'

CHANGELOG

0.1.0 - 0.1.3
  • change deepmerge to deepmerge-ts
  • disable compile version. Only TS
v0.1.0
  • fix import error
v0.0.2
  • Remove from npm compiled js dist and assert ts folder

TODO:~~

About

Form schema component for Naive UI framework. Generate form from json like formkit schema component

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published