Navuelidate

A lib to create form easier with naive-ui and vuelidate and vueuse

Navuelidate 是一个表单生成器库，包含表单生成器组件和对应的 composable 函数、工具类型/函数、表单校验工具函数

Usage

<template>
    <FormCreator v-model="formData" :form-list="formList" :cols="4" :scope="validateScope" />
</template>

import { useFormCreator } from 'navuelidate';
import { FormType } from 'navuelidate';
import { h } from "vue"

const validateScope = Symbol('roleQueryForm');
const { formData, resetForm, createFormListItem, renderFormListItem } = useFormCreator({
    defaultData: {
        roleName: '',
        roleKey: '',
    },
    scope: validateScope,
});

const formList = shallowRef([
    createFormListItem(
        {
            key: 'roleName',
            formType: FormType.Input,
        },
        {
            label: 'roleName',
        },
    ),
    createFormListItem(
        {
            key: 'select',
            formType: FormType.Select,
        },
        {
            label: 'roleKey',
            props: {
                options: []
            }
        },
    ),
    renderFormListItem(
        () => {
            return h("div", "custom render");
        },
        {
            formItemGiProps: {
                suffix: true,
            },
        },
    ),
]);

Component

Component FormCreator

组件用于生成 naive-ui 表单, 需配合 useFormCreator 使用

| Props | Type | Default | Description | | --------- | ----------------------------------------- | --------- | -------------------- | | cols | ?number | 4 | 表单每行有几个表单项 | | scope | Symbol | undefined | 必传，表单域名标记 | | rules | ?ValidationArgs<Record<string, unknown>> | undefined | 表单验证规则 | | modelalue | Record<strinng,unkown> | undefined | 必填，表单数据对象 | | formList | Array<FormListItemRender | FormListItem> | [] | 表单项列表 |

此外，可以接收 NGrid 组件的所有 props

Type FormListItem

| Property | Type | Default | Description | | --------------- | ---------------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | label | string | "" | 表单项的 label | | modelValue | keyof Data | [keyof Data, keyof Data] | undefined | 必填，表单项的双向绑定变量，T 泛型为传入的数据 Model 的类型 （默认是 defaultData的类型） | | span | number | undefined | 表单项占这一行的份额，最大 24 最小 1 | | formType | FormType | FormType.Input | 必填，表单项类型 | | props | InstanceType<typeof formType>['$props'] | undefined | 对应表单类型的组件的 props | | slots | 所使用的 naive-ui 表单项的slots | undefined | 表单项的slots | | formItemGiProps | NFormItemGi 的 props | undefined | 包裹表单控件的 NFormItemGi 的 props | | formItemGiSlots | {label?:()=>VNodeChild,feedback?:()=>VNodeChild,prefix?:()=>VNodeChild,suffix?:()=>VNodeChild} | undefine | 包裹表单控件的 NFormItemGi 的 slots, 除默认的 label 和 'feedback' 以外，额外添加了 prefix 和 suffix 以在表单组件前后添加别的内容 |

Type FormListItemRender

| Property | Type | Default | Description | | --------------- | -------------------- | --------- | ------------------------------------ | | span | number | undefined | 表单项占这一行的份额，最大 24 最小 1 | | render | () => VNode | undefined | 自定义渲染函数 | | formItemGiProps | NFormItemGi 的 props | undefined | 包裹表单控件的 NFormItemGi 的 props |

目前支持的 formType 组件: [Input,Select,TreeSelect,InputNumber, RadioGroup,CheckBoxGroup,DatePicker,NCascader]

对应的组件 props 可参考 naive-ui 文档

Composable

Function useFormCreator

表单生成器组件辅助 composable 函数，需配合 FormCreator 组件使用

Params

| Property | Type | Default | Description | | --------------------- | -------------------------------------------------------------------- | --------- | ------------------------------------------ | | defaultData | Record<string, unknown> | undefined | 必填，表单默认值 | | scope | Symbol | undefined | 必填，表单域名标记，Vuelidate 的 scope | | rules | Ref<Vargs extends ValidationArgs> | Vargs | 表单验证规则 | | globalFormItemGiProps | FormItemGiProps | (() => FormItemGiProps) | Ref<FormItemGiProps> | undefined | 全局给表单项的 FormItemGi 传递的 props |

表单验证规则参考 Vuelidate 文档

ReturnType

| Property | Type | Description | | ------------------ | ------------------------------- | -------------------------------------------------------------------- | | v$ | Ref<Validation<Vargs, unknown>> | Vuelidate 的 v$ 对象 | | formData | Ref<Record<string, unknown>> | 表单数据对象 Ref | | resetForm | () => void | 重置表单函数，运行后 formData.value 会被重置为参数的 defaultData | | createFormListItem | CreateFormListItem | 表单项注册辅助工具函数 |

Function createFormListItem

表单项生成辅助函数

Params

| Property | Type | Description | | ----------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | { key, formType } | { key: string | [string,string], formType: FormType } | 一个对象，包含 key ,formType, key 为表单数据对象 formData.value 的键名之一， 会由 ts 自动推导，formType 为目前支持的表单类型之一 | | config | FormListItem | FormListItem 配置项，会根据第一个参数的 formType 自动收窄类型 |

ReturnType

FormListItem

Function renderFormListItem

表单项生成辅助函数（自定义渲染）

Params

| Property | Type | Description | | -------- | ---------------------------------------------- | --------------------------- | | render | () => VNode | 自定义表单项渲染函数 | | config | FormListItemRender | FormListItemRender 配置项 |

ReturnType

FormListItemRender

全局默认设置

createDefaultSettings

• 参数:
  • formItemGiProps 传递给 formItemGi 的 props
  • formItemProps 传递给每个表单项的 props，函数，参数为 FormType