perf: reset form when close editing modal

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/modules/interface/menus/components/MenuEditingModal.vue

@@ -8,6 +8,7 @@ import { apiClient } from "@halo-dev/admin-shared";
 import { submitForm } from "@formkit/core";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
+import { reset } from "@formkit/core";
 
 const props = defineProps({
   visible: {
@@ -87,6 +88,7 @@ watch(props, (newVal) => {
   }
   formState.value = cloneDeep(initialFormState);
   formState.value.metadata.name = uuid();
+  reset("menu-form");
 });
 </script>
 <template>

src/modules/interface/menus/components/MenuItemEditingModal.vue

@@ -8,6 +8,7 @@ import { apiClient } from "@halo-dev/admin-shared";
 import { submitForm } from "@formkit/core";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
+import { reset } from "@formkit/core";
 
 const props = defineProps({
   visible: {
@@ -88,6 +89,7 @@ watch(props, (newVal) => {
   }
   formState.value = cloneDeep(initialFormState);
   formState.value.metadata.name = uuid();
+  reset("menuitem-form");
 });
 
 watchEffect(() => {

src/modules/system/roles/components/RoleEditingModal.vue

@@ -11,6 +11,7 @@ import {
 import cloneDeep from "lodash.clonedeep";
 import { submitForm } from "@formkit/core";
 import { useMagicKeys } from "@vueuse/core";
+import { reset } from "@formkit/core";
 
 const props = defineProps({
   visible: {
@@ -70,6 +71,7 @@ watch(props, (newVal) => {
   }
   formState.value = cloneDeep(initialFormState);
   selectedRoleTemplates.value.clear();
+  reset("role-form");
 });
 
 const tabActiveId = ref("general");
@@ -96,9 +98,9 @@ const handleVisibleChange = (visible: boolean) => {
 </script>
 <template>
   <VModal
+    :title="editingModalTitle"
     :visible="visible"
     :width="700"
-    :title="editingModalTitle"
     @update:visible="handleVisibleChange"
   >
     <VTabs v-model:active-id="tabActiveId" type="outline">

src/modules/system/users/components/UserEditingModal.vue

@@ -17,7 +17,7 @@ import { rbacAnnotations } from "@/constants/annotations";
 import YAML from "yaml";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
-import { submitForm } from "@formkit/core";
+import { reset, submitForm } from "@formkit/core";
 
 const props = defineProps({
   visible: {
@@ -103,6 +103,7 @@ watch(props, (newVal) => {
     return;
   }
   formState.value = cloneDeep(initialFormState);
+  reset("user-form");
 });
 
 const handleFetchRoles = async () => {