feat: add formkit custom input of repeater (#692)

#### What type of PR is this?

/kind feature
/milestone 2.0

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

为 FormKit 添加 Repeater 输入类型，用于让用户动态操作一个对象数组。

使用方式可以查阅：https://github.com/ruibaby/halo-console/tree/feat/formkit-repeater/docs/custom-formkit-input#repeater

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

Fixes halo-dev/halo#2529

#### Screenshots:

<img width="635" alt="image" src="https://user-images.githubusercontent.com/21301288/201640327-5eb0489a-2193-445d-9dfe-7405ae75a297.png">

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console 

测试方式：

1. 按照 https://github.com/ruibaby/halo-console/tree/feat/formkit-repeater/docs/custom-formkit-input#repeater 文档，在主题或者插件中使用 FormKit Schema 的形式定义设置表单，然后对表单进行保存等设置，检查是否符合预期。
2. 或者使用 https://github.com/halo-sigs/theme-earth/tree/refactor/setting-spec 主题进行测试，这个分支已经对社交媒体和侧边栏进行了适配。可以在主题设置中测试社交媒体和侧边栏配置，检查在主题端的效果。

#### Does this PR introduce a user-facing change?

```release-note
为 FormKit 添加 Repeater 输入类型。
```

docs/custom-formkit-input/README.md

@@ -13,6 +13,7 @@
     1. language: 目前支持 `yaml`, `html`, `css`, `javascript`, `json`
     2. height: 编辑器高度，如：`100px`
 - `attachment`: 附件选择
+- `repeater`: 定义一个对象集合，可以让使用者可视化的操作集合。
 - `menuCheckbox`：选择一组菜单
 - `menuRadio`：选择一个菜单
 - `menuItemSelect`：选择菜单项
@@ -48,3 +49,68 @@ const postName = ref("")
   name: menus
   label: 底部菜单组
 ```
+
+### Repeater
+
+Repeater 是一个集合类型的输入组件，可以让使用者可视化的操作集合。
+
+在 Vue SFC 中以组件形式使用：
+
+```vue
+<script lang="ts" setup>
+const users = ref([])
+</script>
+
+<template>
+  <FormKit
+    v-model="users"
+    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 中使用：
+
+```yaml
+- $formkit: repeater
+  name: users
+  label: Users
+  items:
+    - $formkit: text
+      name: full_name
+      label: Full Name
+      validation: required
+    - $formkit: email
+      name: email
+      label: Email
+      validation: required|email
+```
+
+最终得到的数据类似于：
+
+```json
+[
+  {
+    "full_name": "Jack",
+    "email": "jack@example.com"
+  },
+  {
+    "full_name": "John",
+    "email": "john@example.com"
+  }
+]
+```

package.json

@@ -31,6 +31,7 @@
     "@formkit/inputs": "^1.0.0-beta.11",
     "@formkit/themes": "^1.0.0-beta.11",
     "@formkit/vue": "^1.0.0-beta.11",
+    "@formkit/utils": "^1.0.0-beta.11",
     "@halo-dev/api-client": "^0.0.46",
     "@halo-dev/components": "workspace:*",
     "@halo-dev/console-shared": "workspace:*",

packages/components/src/components/button/Button.vue

@@ -3,6 +3,7 @@
     :class="classes"
     :disabled="disabled"
     class="btn"
+    type="button"
     @click="handleClick"
   >
     <span v-if="$slots.icon || loading" class="btn-icon">
@@ -128,11 +129,11 @@ function handleClick() {
 }
 
 .btn-primary {
-  @apply text-white bg-primary;
+  @apply text-white bg-primary #{!important};
 }
 
 .btn-secondary {
-  @apply text-white bg-secondary;
+  @apply text-white bg-secondary #{!important};
 }
 
 .btn-danger {

packages/components/src/components/button/__tests__/__snapshots__/Button.spec.ts.snap

@@ -1,61 +1,61 @@
 // Vitest Snapshot v1
 
 exports[`Button > should render 1`] = `
-"<button class=\\"btn-md btn-default btn\\">
+"<button class=\\"btn-md btn-default btn\\" type=\\"button\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with block prop 1`] = `
-"<button class=\\"btn-md btn-default btn-block btn\\">
+"<button class=\\"btn-md btn-default btn-block btn\\" type=\\"button\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with circle prop 1`] = `
-"<button class=\\"btn-md btn-default btn-circle btn\\">
+"<button class=\\"btn-md btn-default btn-circle btn\\" type=\\"button\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with disabled prop 1`] = `
-"<button class=\\"btn-md btn-default btn\\" disabled=\\"\\">
+"<button class=\\"btn-md btn-default btn\\" type=\\"button\\" disabled=\\"\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with size prop 1`] = `
-"<button class=\\"btn-lg btn-default btn\\">
+"<button class=\\"btn-lg btn-default btn\\" type=\\"button\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with size prop 2`] = `
-"<button class=\\"btn-sm btn-default btn\\">
+"<button class=\\"btn-sm btn-default btn\\" type=\\"button\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with size prop 3`] = `
-"<button class=\\"btn-xs btn-default btn\\">
+"<button class=\\"btn-xs btn-default btn\\" type=\\"button\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with type prop 1`] = `
-"<button class=\\"btn-md btn-primary btn\\">
+"<button class=\\"btn-md btn-primary btn\\" type=\\"button\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with type prop 2`] = `
-"<button class=\\"btn-md btn-secondary btn\\">
+"<button class=\\"btn-md btn-secondary btn\\" type=\\"button\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;
 
 exports[`Button > should work with type prop 3`] = `
-"<button class=\\"btn-md btn-danger btn\\">
+"<button class=\\"btn-md btn-danger btn\\" type=\\"button\\">
   <!--v-if--><span class=\\"btn-content\\"></span>
 </button>"
 `;

packages/components/src/components/empty/__tests__/__snapshots__/Empty.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`Empty > should match snapshot 1`] = `
   <div class=\\"empty-image h-32 w-32\\"><img src=\\"/src/components/empty/Empty.svg\\" alt=\\"Empty\\"></div>
   <div class=\\"empty-title\\">Not found</div>
   <div class=\\"empty-message\\">No posts found</div>
-  <div class=\\"empty-actions\\"><button class=\\"btn-md btn-primary btn\\">
+  <div class=\\"empty-actions\\"><button class=\\"btn-md btn-primary btn\\" type=\\"button\\">
       <!--v-if--><span class=\\"btn-content\\">New Post</span>
     </button></div>
 </div>"

packages/components/src/icons/icons.ts

@@ -54,6 +54,8 @@ import IconRefreshLine from "~icons/ri/refresh-line";
 import IconWindowLine from "~icons/ri/window-line";
 import IconSendPlaneFill from "~icons/ri/send-plane-fill";
 import IconRocketLine from "~icons/ri/rocket-line";
+import IconArrowUpCircleLine from "~icons/ri/arrow-up-circle-line";
+import IconArrowDownCircleLine from "~icons/ri/arrow-down-circle-line";
 
 export {
   IconDashboard,
@@ -112,4 +114,6 @@ export {
   IconWindowLine,
   IconSendPlaneFill,
   IconRocketLine,
+  IconArrowUpCircleLine,
+  IconArrowDownCircleLine,
 };

src/formkit/formkit.config.ts

@@ -5,6 +5,7 @@ import type { DefaultConfigOptions } from "@formkit/vue";
 import { form } from "./inputs/form";
 import { attachment } from "./inputs/attachment";
 import { code } from "./inputs/code";
+import { repeater } from "./inputs/repeater";
 import { menuCheckbox } from "./inputs/menu-checkbox";
 import { menuRadio } from "./inputs/menu-radio";
 import { menuItemSelect } from "./inputs/menu-item-select";
@@ -15,14 +16,18 @@ import { tagSelect } from "./inputs/tag-select";
 import { categoryCheckbox } from "./inputs/category-checkbox";
 import { tagCheckbox } from "./inputs/tag-checkbox";
 
+import radioAlt from "./plugins/radio-alt";
+
 const config: DefaultConfigOptions = {
   config: {
     classes: generateClasses(theme),
   },
+  plugins: [radioAlt],
   inputs: {
     form,
     attachment,
     code,
+    repeater,
     menuCheckbox,
     menuRadio,
     menuItemSelect,