halo/console/docs/custom-formkit-input
Takagi 9e33a81e2d
refactor: refactor the repeater component using the schema approach (#4702)
#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

对 Formkit Repeater 组件使用 schema 的方式进行重构,重构后的 Repeater 组件将支持条件判断,按照下述方式定义即可。

```
const formSchema = [
  {
    $formkit: "repeater",
    name: "testing",
    min: 1,
    max: 2,
    addLabel: "添加",
    children: [
      {
        $formkit: "select",
        name: "things",
        id: "things",
        label: "Things",
        placeholder: "Select",
        options: ["Something", "Else"],
      },
      {
        $formkit: "number",
        if: "$value.things === Something",
        name: "show_1",
        id: "show_something_1",
        label: "Show something",
      },
      {
        $formkit: "number",
        if: "$value.things === Something",
        name: "show_2",
        id: "show_something_2",
        label: "Also show something",
      },
    ],
  },
];
```

同时额外增加了对 `addLabel`、`addButton`、`upControl`、`downControl`、`insertControl`、`removeControl`  属性的支持。

#### How to test it?

- 测试原有使用 `Repeater` 组件可否正常使用。
- 对 `Repeater` 条件判断功能进行测试。
- 查看保存的数据格式是否正确

#### Which issue(s) this PR fixes:

Fixes #4603 

#### Does this PR introduce a user-facing change?
```release-note
重构 Repeater 组件,使其支持条件判断
```
2023-10-12 08:08:33 +00:00
..
README.md refactor: refactor the repeater component using the schema approach (#4702) 2023-10-12 08:08:33 +00:00

README.md

自定义 FormKit 输入组件

原由

目前在 Console 端的所有表单都使用了 FormKit但 FormKit 内置的 Input 组件并不满足所有的需求,因此需要自定义一些 Input 组件。此外,为了插件和主题能够更加方便的使用系统内的一些数据,所以同样需要自定义一些带数据的选择组件。

使用方式

目前已提供以下类型:

  • code: 代码编辑器
    • 参数
      1. language: 目前支持 yaml, html, css, javascript, json
      2. height: 编辑器高度,如:100px
  • attachment: 附件选择
    • 参数
      1. accepts允许上传的文件类型image/*
  • repeater: 定义一个对象集合,可以让使用者可视化的操作集合。
    • 参数
      1. min: 最小数量,默认为 0
      2. max: 最大数量,默认为 Infinity,即无限制。
      3. addLabel: 添加按钮的文本,默认为 添加
      4. addButton: 是否显示添加按钮,默认为 true
      5. upControl: 是否显示上移按钮,默认为 true
      6. downControl: 是否显示下移按钮,默认为 true
      7. insertControl: 是否显示插入按钮,默认为 true
      8. removeControl: 是否显示删除按钮,默认为 true
  • menuCheckbox:选择一组菜单
  • menuRadio:选择一个菜单
  • menuItemSelect:选择菜单项
  • postSelect:选择文章
  • singlePageSelect:选择自定义页面
  • categorySelect:选择分类
    • 参数
      1. multiple: 是否多选,默认为 false
  • categoryCheckbox:选择多个分类
  • tagSelect:选择标签
    • 参数
      1. multiple: 是否多选,默认为 false
  • tagCheckbox:选择多个标签

在 Vue 单组件中使用:

<script lang="ts" setup>
const postName = ref("");
</script>

<template>
  <FormKit
    v-model="postName"
    placeholder="请选择文章"
    label="文章"
    type="postSelect"
    validation="required"
  />
</template>

在 FormKit Schema 中使用(插件 / 主题设置表单定义):

- $formkit: menuRadio
  name: menus
  label: 底部菜单组

Repeater

Repeater 是一个集合类型的输入组件,可以让使用者可视化的操作集合。

在 Vue SFC 中以组件形式使用:

<script lang="ts" setup>
const users = ref([]);
</script>

<template>
  <FormKit
    v-model="users"
    :min="1"
    :max="3"
    addLabel="Add User"
    type="repeater"
    label="Users"
  >
    <FormKit
      type="text"
      label="Full Name"
      name="full_name"
      validation="required"
    />
    <FormKit
      type="email"
      label="Email"
      name="email"
      validation="required|email"
    />
  </FormKit>
</template>

在 FormKit Schema 中使用:

- $formkit: repeater
  name: users
  label: Users
  addLabel: Add User
  min: 1
  max: 3
  items:
    - $formkit: text
      name: full_name
      label: Full Name
      validation: required
    - $formkit: email
      name: email
      label: Email
      validation: required|email

最终得到的数据类似于:

[
  {
    "full_name": "Jack",
    "email": "jack@example.com"
  },
  {
    "full_name": "John",
    "email": "john@example.com"
  }
]