# hyb-naive

这是一个对 NaiveUI 表单组件（Form），进行JSON配置化处理，简化其复杂的实现过程，主要包含两种模式：FORM（表单录入），FILTER（筛选器）两种模式；
目前主要包含以下三个组件，针对不同的场景的表单使用：
- HForm 动态表单组件
- HFormModal表单弹框组件
- HFormDrawer 表单抽屉组件


## 安装
    npm install hyb-form
    or
    yarn add hyb-form
    or
    pnpm add hyb-form

## 实现一个简单的筛选器

```ts
<template>
  <HForm type="FILTER" :rules="filterRules" card @search="search"/> 
</template>

<script lang="ts" setup>
import { FormRule, FormApi, HForm } from 'hyb-naive'
import { reactive } from 'vue'

const filterRules:FormRule[]=[
  {
    field: 'category',
    compType: 'Select',
    label: '项目类别',
    options:[
      { label: '项目1', value: '1', },
      { label: '项目2', value: '2', },
    ],
  },
  {
    field: 'projectName',
    compType: 'Input',
    label: '项目名称',
  },
  {
    label: '操作时间',
    field: 'time',
    compType: 'DatePicker',
    fullWidth: true,
    props: {
      type: 'datetimerange',
    } 
  },
]

//搜索
function search(searchParams: Record<string,any>) {
   console.log('searchParams', searchParams)
}
</script>

```

## 实现一个简单的表单录入
```ts
<template>
  <HForm type="FORM" :rules="formRules" card @confirm="submit"/> 
</template>

<script lang="ts" setup>
import { FormRule, FormApi, HForm } from 'hyb-naive'
import { reactive } from 'vue'

const formRules:FormRule[] = [
  {
    field: 'name',
    compType: 'Input',
    label: '姓名',
    required: true,
  },
  {
    field: 'sex',
    compType: 'Select',
    label: '性别',
    required: true,
    options:[
      { label: '项目1', value: '1', },
      { label: '项目2', value: '2', },
    ],
  },
  {
    label: '年龄',
    field: 'age',
    required: true,
    validateType: 'number',
    compType: 'InputNumber',
  },
]

//搜索
function submit(formData: Record<string,any>) {
   console.log('formData', formData)
}
</script>

```