open-index/open-npm huggingface dataset:
npm package: @lljj/vjsf-utils
Description: vue json schema form 使用的基础utils工具类
Author: Liu.Jun
Latest version: 1.19.0

# @lljj/vjsf-utils
表单基础通用工具类，具体的参数可参见源码

## @lljj/vjsf-utils/i18n
 管理当前多语言


## @lljj/vjsf-utils/schema/getDefaultFormState
根据 jsonSchema 和 formData，计算当前schema value

## @lljj/vjsf-utils/schema/validate

```js
import {
    ajvValidateFormData,
    validateFormDataAndTransformMsg,
    isValid
} from '@lljj/vjsf-utils/schema/validate';

// 直接调用 ajv 验证schema，返回格式化后的结果
ajvValidateFormData(...args);

// 校验数据并处理多语言(只处理当前节点)
validateFormDataAndTransformMsg(...args);

// 返回数据是否校验成功
isValid(...args);

// 返回数据是否校验成功
isValid(...args);
```

## @lljj/vjsf-utils/arrayUtils
数组相关的工具类

## @lljj/vjsf-utils/formUtils
表单相关的工具类

## @lljj/vjsf-utils/vueUtils
Vue相关的工具类
npm package: @lljj/vue-json-schema-form
Description: 基于 Vue 、ElementUi、JsonSchema快速构建一个带完整校验的form表单
Author: Liu.Jun
Latest version: 1.19.0

# @lljj/vue-json-schema-form

基于 [Element Ui](https://element.eleme.io/) 、Vue2、 [JSON Schema](https://json-schema.org/understanding-json-schema/index.html) 生成表单

> 通过 [@lljj/vue2-form-core](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/lib/vue2/vue2-core) 适配 ElementUi 库

## 安装

```ssh
## npm
npm install --save @lljj/vue-json-schema-form

## yarn
yarn add @lljj/vue-json-schema-form
```

## 使用
```html
<VueForm
    v-model="formData"
    :schema="schema"
>
</VueForm>
```

```js
//  使用
import VueForm from '@lljj/vue-json-schema-form';

export default {
    name: 'Demo',
    components: {
        VueForm
    },
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName',
                    'age',
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名',
                        default: 'Liu.Jun',
                    },
                    age: {
                        type: 'number',
                        title: '年龄'
                    },
                    bio: {
                        type: 'string',
                        title: '签名',
                        minLength: 10,
                        default: '知道的越多、就知道的越少',
                        'ui:options': {
                            placeholder: '请输入你的签名',
                            type: 'textarea',
                            rows: 1
                        }
                    }
                }
            }
        };
    }
};
```

## License
Apache-2.0
npm package: @lljj/vue2-form-core
Description: 基于 Vue 、JsonSchema快速构建一个带完整校验的form表单，vue2版本基础框架
Author: Liu.Jun
Latest version: 1.19.0

# @lljj/vue2-form-core
vue2 版本核心，可以基于此适配不同的 vue2 ui库。

适配的核心就是对应类型为自己的组件库，且处理默认 `props` 与自己组件库 props 之间的转换

> 适配方案可参见 [@lljj/vue-json-schema-form](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/lib/vue2/vue2-form-element) 、[@lljj/vue2-form-iview3](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/lib/vue2/vue2-form-iview3)


## 兼容性
npm 包直接为 es6+ 源码，需要在构建 lib 时通过babe转义

如配置 rollup babel plugin：

```js
babel({
    exclude: /node_modules\/(?!(@lljj)\/).*/, // 忽略跳过 @lljj
    extensions: ['.js', '.vue'],
})
```

## 安装

```ssh
## npm
npm install --save @lljj/vue2-form-core

## yarn
yarn add @lljj/vue2-form-core
```

## 使用方法

按如下格式，配置对应组件在当前组件库中的映射关系，可以直接配置全局组件名或者组件构造函数，`默认组件 props 为elementUi格式，如果props格式不同需要中间组件来做转换`；

```js
import createVue2Core from '@lljj/vue2-form-core';

const globalOptions = {
    // widget组件和现有组件库映射关系
    WIDGET_MAP: {
        // 默认按schema type 映射默认widget组件
        types: {
            // type  boolean
            boolean: 'el-switch',

            // type  string
            string: 'el-input',

            // type number
            number: 'el-input-number',

            // type integer
            integer: 'el-input-number',
        },

        // 按 schema format 映射默认widget组件，优先级高于 types
        formats: {
            // format: color
            color: 'el-color-picker',

            // format: time
            time: TimePickerWidget, // 格式 20:20:39+00:00

            // format: date
            date: DatePickerWidget, // 格式 2018-11-13

            // format: date-time
            'date-time': DateTimePickerWidget, // 格式 2018-11-13T20:20:39+00:00
        },

        // 一些公共常用类型
        common: {
            // select option
            select: SelectWidget,

            // radio
            radioGroup: RadioWidget,

            // checkout
            checkboxGroup: CheckboxesWidget,
        },

        // 这里配置一些 为当前ui库适配过的组件，会在运行时自动注册为全局组件，不注册为全局也可不配置
        // Vue2 会在调用 createVue2Core 时注册。
        widgetComponents: {
            CheckboxesWidget,
            RadioWidget,
            SelectWidget,
            TimePickerWidget,
            DatePickerWidget,
            DateTimePickerWidget
        }
    },

    // 其它表单相关组件映射关系
    COMPONENT_MAP: {
        // form组件
        form: 'el-form',

        // formItem 组件
        formItem: 'el-form-item',

        // button 组件
        button: 'el-button',

        // popover，用在formLable 左右布局时鼠标移入显示description
        popover: 'el-popover'
    },
    HELPERS: {
        // 是否mini显示 description
        isMiniDes(formProps) {
            return formProps && ['left', 'right'].includes(formProps.labselPosition);
        }
    }
};

// 为了性能也可 object.freeze globalOptions 配置数据
const mySchemaForm = createVue2Core(globalOptions);

```

适配一个新的ui框架只需要适配如上的组件即可

## License
Apache-2.0
npm package: @lljj/vue2-form-iview3
Description: 基于 Vue 、iView3、JsonSchema快速构建一个带完整校验的form表单
Author: Liu.Jun
Latest version: 1.19.0

# @lljj/vue2-form-iview3

基于 [iview3](http://iview.talkingdata.com) 、Vue2、 [JSON Schema](https://json-schema.org/understanding-json-schema/index.html) 生成表单

> 通过 [@lljj/vue2-form-core](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/lib/vue2/vue2-core) 适配 iview3 库

## 安装

```ssh
## npm
npm install --save @lljj/vue2-form-iview3

## yarn
yarn add @lljj/vue2-form-iview3
```

## 使用
```html
<VueForm
    v-model="formData"
    :schema="schema"
>
</VueForm>
```

```js
//  使用
import VueForm from '@lljj/vue2-form-iview3';

export default {
    name: 'Demo',
    components: {
        VueForm
    },
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName',
                    'age',
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名',
                        default: 'Liu.Jun',
                    },
                    age: {
                        type: 'number',
                        title: '年龄'
                    },
                    bio: {
                        type: 'string',
                        title: '签名',
                        minLength: 10,
                        default: '知道的越多、就知道的越少',
                        'ui:options': {
                            placeholder: '请输入你的签名',
                            type: 'textarea',
                            rows: 1
                        }
                    }
                }
            }
        };
    }
};
```

## License
Apache-2.0
npm package: @lljj/vue3-form-ant
Description: 基于 Vue3 、Antdv、JsonSchema快速构建一个带完整校验的form表单
Author: Liu.Jun
Latest version: 1.19.0

# @lljj/vue3-form-ant

基于 [Antd Vue](https://2x.antdv.com/components/overview-cn/) 、Vue3、 [JSON Schema](https://json-schema.org/understanding-json-schema/index.html) 生成表单

> 通过 [@lljj/vue3-form-core](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/lib/vue3/vue3-core) 适配 Ant Design Vue3 库

## 安装

```ssh
## npm
npm install --save @lljj/vue3-form-ant

## yarn
yarn add @lljj/vue3-form-ant
```

## 使用
```html
<VueForm
    v-model="formData"
    :schema="schema"
>
</VueForm>
```

```js
//  使用
import VueForm from '@lljj/vue3-form-ant';

export default {
    name: 'Demo',
    components: {
        VueForm
    },
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName',
                    'age',
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名',
                        default: 'Liu.Jun',
                    },
                    age: {
                        type: 'number',
                        title: '年龄'
                    },
                    bio: {
                        type: 'string',
                        title: '签名',
                        minLength: 10,
                        default: '知道的越多、就知道的越少',
                        'ui:options': {
                            placeholder: '请输入你的签名',
                            type: 'textarea',
                            rows: 1
                        }
                    }
                }
            }
        };
    }
};
```

## License
Apache-2.0
npm package: @lljj/vue3-form-core
Description: 基于 Vue3 、JsonSchema快速构建一个带完整校验的form表单，vue3版本基础框架
Author: Liu.Jun
Latest version: 1.19.0

# @lljj/vue3-form-core
vue3 版本核心，可以基于此适配不同的 vue3 ui库。

适配的核心就是对应类型为自己的组件库，且处理默认 `props` 与自己组件库 props 之间的转换

> 适配方案可参见 [@lljj/vue3-form-element](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/lib/vue3/vue3-form-element) 、[@lljj/vue3-form-ant](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/lib/vue3/vue3-form-ant)


## 兼容性
npm 包直接为 es6+ 源码，需要在构建 lib 时通过babe转义

如配置 rollup babel plugin：

```js
babel({
    exclude: /node_modules\/(?!(@lljj)\/).*/, // 忽略跳过 @lljj
    extensions: ['.js', '.vue'],
})
```

## 安装

```ssh
## npm
npm install --save @lljj/vue3-form-core

## yarn
yarn add @lljj/vue3-form-core
```

## 使用方法

按如下格式，配置对应组件在当前组件库中的映射关系，可以直接配置全局组件名或者组件构造函数，`默认组件 props 为elementUi格式，如果props格式不同需要中间组件来做转换`；

```js
import createVue2Core from '@lljj/vue3-form-core';

const globalOptions = {
    // widget组件和现有组件库映射关系
    WIDGET_MAP: {
        // 默认按schema type 映射默认widget组件
        types: {
            // type  boolean
            boolean: 'el-switch',

            // type  string
            string: 'el-input',

            // type number
            number: 'el-input-number',

            // type integer
            integer: 'el-input-number',
        },

        // 按 schema format 映射默认widget组件，优先级高于 types
        formats: {
            // format: color
            color: 'el-color-picker',

            // format: time
            time: TimePickerWidget, // 格式 20:20:39+00:00

            // format: date
            date: DatePickerWidget, // 格式 2018-11-13

            // format: date-time
            'date-time': DateTimePickerWidget, // 格式 2018-11-13T20:20:39+00:00
        },

        // 一些公共常用类型
        common: {
            // select option
            select: SelectWidget,

            // radio
            radioGroup: RadioWidget,

            // checkout
            checkboxGroup: CheckboxesWidget,
        },

        // 这里配置一些 为当前ui库适配过的组件，会在运行时自动注册为全局组件，不注册为全局也可不配置
        // Vue3 只有在组件内才能获取到当前的app，所以注册时机是在 form组件setup中，且只会注册一次。
        widgetComponents: {
            CheckboxesWidget,
            RadioWidget,
            SelectWidget,
            TimePickerWidget,
            DatePickerWidget,
            DateTimePickerWidget
        }
    },

    // 其它表单相关组件映射关系
    COMPONENT_MAP: {
        // form组件
        form: 'el-form',

        // formItem 组件
        formItem: 'el-form-item',

        // button 组件
        button: 'el-button',

        // popover，用在formLable 左右布局时鼠标移入显示description
        popover: 'el-popover'
    },
    HELPERS: {
        // 是否mini显示 description
        isMiniDes(formProps) {
            return formProps && ['left', 'right'].includes(formProps.labselPosition);
        }
    }
};

const mySchemaForm = createVue2Core(globalOptions);

```

适配一个新的ui框架只需要适配如上的组件即可

## License
Apache-2.0
npm package: @lljj/vue3-form-element
Description: 基于 Vue3 、ElementPlus、JsonSchema快速构建一个带完整校验的form表单
Author: Liu.Jun
Latest version: 1.19.0

# @lljj/vue3-form-element

基于 [Element Plus](https://element-plus.org/) 、Vue3、 [JSON Schema](https://json-schema.org/understanding-json-schema/index.html) 生成表单

> 通过 [@lljj/vue3-form-core](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/lib/vue3/vue3-core) 适配 ElementPlus 库

## 安装

```ssh
## npm
npm install --save @lljj/vue3-form-element

## yarn
yarn add @lljj/vue3-form-element
```

## 使用
```html
<VueForm
    v-model="formData"
    :schema="schema"
>
</VueForm>
```

```js
//  使用
import VueForm from '@lljj/vue3-form-element';

export default {
    name: 'Demo',
    components: {
        VueForm
    },
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName',
                    'age',
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名',
                        default: 'Liu.Jun',
                    },
                    age: {
                        type: 'number',
                        title: '年龄'
                    },
                    bio: {
                        type: 'string',
                        title: '签名',
                        minLength: 10,
                        default: '知道的越多、就知道的越少',
                        'ui:options': {
                            placeholder: '请输入你的签名',
                            type: 'textarea',
                            rows: 1
                        }
                    }
                }
            }
        };
    }
};
```

## License
Apache-2.0
npm package: @lljj/vue3-form-naive
Description: 基于 Vue3 、Naive、JsonSchema快速构建一个带完整校验的form表单
Author: Liu.Jun
Latest version: 1.19.1

# @lljj/vue3-form-naive

基于 [NaiveUi](https://www.naiveui.com/zh-CN/os-theme) 、Vue3、 [JSON Schema](https://json-schema.org/understanding-json-schema/index.html) 生成表单

> 通过 [@lljj/vue3-form-core](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/lib/vue3/vue3-core) 适配 NaiveUi 库

## 安装

```ssh
## npm
npm install --save @lljj/vue3-form-naive

## yarn
yarn add @lljj/vue3-form-naive
```

## 使用
```html
<VueForm
    v-model="formData"
    :schema="schema"
>
</VueForm>
```

```js
//  使用
import VueForm from '@lljj/vue3-form-naive';

export default {
    name: 'Demo',
    components: {
        VueForm
    },
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName',
                    'age',
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名',
                        default: 'Liu.Jun',
                    },
                    age: {
                        type: 'number',
                        title: '年龄'
                    },
                    bio: {
                        type: 'string',
                        title: '签名',
                        minLength: 10,
                        default: '知道的越多、就知道的越少',
                        'ui:options': {
                            placeholder: '请输入你的签名',
                            type: 'textarea',
                            rows: 1
                        }
                    }
                }
            }
        };
    }
};
```

## License
Apache-2.0