perf: expose the formApi for a login form (#4806)

packages/@core/base/shared/package.json

@@ -81,10 +81,12 @@
   "dependencies": {
     "@ctrl/tinycolor": "catalog:",
     "@tanstack/vue-store": "catalog:",
+    "@types/lodash.get": "catalog:",
     "@vue/shared": "catalog:",
     "clsx": "catalog:",
     "defu": "catalog:",
     "lodash.clonedeep": "catalog:",
+    "lodash.get": "catalog:",
     "nprogress": "catalog:",
     "tailwind-merge": "catalog:",
     "theme-colors": "catalog:"

packages/effects/common-ui/src/ui/authentication/code-login.vue

@@ -53,7 +53,7 @@ const emit = defineEmits<{
 
 const router = useRouter();
 
-const [Form, { validate, getValues }] = useVbenForm(
+const [Form, formApi] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -65,8 +65,8 @@ const [Form, { validate, getValues }] = useVbenForm(
 );
 
 async function handleSubmit() {
-  const { valid } = await validate();
-  const values = await getValues();
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
   if (valid) {
     emit('submit', {
       code: values?.code,
@@ -78,6 +78,10 @@ async function handleSubmit() {
 function goToLogin() {
   router.push(props.loginPath);
 }
+
+defineExpose({
+  getFormApi: () => formApi,
+});
 </script>
 
 <template>

packages/effects/common-ui/src/ui/authentication/forget-password.vue

@@ -50,7 +50,7 @@ const emit = defineEmits<{
   submit: [Record<string, any>];
 }>();
 
-const [Form, { validate, getValues }] = useVbenForm(
+const [Form, formApi] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -64,8 +64,8 @@ const [Form, { validate, getValues }] = useVbenForm(
 const router = useRouter();
 
 async function handleSubmit() {
-  const { valid } = await validate();
-  const values = await getValues();
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
   if (valid) {
     emit('submit', values);
   }
@@ -74,6 +74,10 @@ async function handleSubmit() {
 function goToLogin() {
   router.push(props.loginPath);
 }
+
+defineExpose({
+  getFormApi: () => formApi,
+});
 </script>
 
 <template>

packages/effects/common-ui/src/ui/authentication/login.vue

@@ -44,7 +44,7 @@ const emit = defineEmits<{
   submit: [Recordable<any>];
 }>();
 
-const [Form, { setFieldValue, validate, getValues }] = useVbenForm(
+const [Form, formApi] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -63,8 +63,8 @@ const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
 const rememberMe = ref(!!localUsername);
 
 async function handleSubmit() {
-  const { valid } = await validate();
-  const values = await getValues();
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
   if (valid) {
     localStorage.setItem(
       REMEMBER_ME_KEY,
@@ -80,9 +80,13 @@ function handleGo(path: string) {
 
 onMounted(() => {
   if (localUsername) {
-    setFieldValue('username', localUsername);
+    formApi.setFieldValue('username', localUsername);
   }
 });
+
+defineExpose({
+  getFormApi: () => formApi,
+});
 </script>
 
 <template>

packages/effects/common-ui/src/ui/authentication/register.vue

@@ -52,7 +52,7 @@ const emit = defineEmits<{
   submit: [Recordable<any>];
 }>();
 
-const [Form, { validate, getValues }] = useVbenForm(
+const [Form, formApi] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -66,8 +66,8 @@ const [Form, { validate, getValues }] = useVbenForm(
 const router = useRouter();
 
 async function handleSubmit() {
-  const { valid } = await validate();
-  const values = await getValues();
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
   if (valid) {
     emit('submit', values as { password: string; username: string });
   }
@@ -76,6 +76,10 @@ async function handleSubmit() {
 function goToLogin() {
   router.push(props.loginPath);
 }
+
+defineExpose({
+  getFormApi: () => formApi,
+});
 </script>
 
 <template>

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -41,6 +41,9 @@ const props = withDefaults(defineProps<Props>(), {});
 
 const FORM_SLOT_PREFIX = 'form-';
 
+const TOOLBAR_ACTIONS = 'toolbar-actions';
+const TOOLBAR_TOOLS = 'toolbar-tools';
+
 const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
 
 const state = props.api?.useStore?.();
@@ -87,15 +90,16 @@ const showTableTitle = computed(() => {
 
 const showToolbar = computed(() => {
   return (
-    !!slots['toolbar-actions']?.() ||
-    !!slots['toolbar-tools']?.() ||
+    !!slots[TOOLBAR_ACTIONS]?.() ||
+    !!slots[TOOLBAR_TOOLS]?.() ||
     showTableTitle.value
   );
 });
 
 const toolbarOptions = computed(() => {
-  const slotActions = slots['toolbar-actions']?.();
-  const slotTools = slots['toolbar-tools']?.();
+  const slotActions = slots[TOOLBAR_ACTIONS]?.();
+  const slotTools = slots[TOOLBAR_TOOLS]?.();
+
   if (!showToolbar.value) {
     return {};
   }
@@ -105,9 +109,9 @@ const toolbarOptions = computed(() => {
     toolbarConfig: {
       slots: {
         ...(slotActions || showTableTitle.value
-          ? { buttons: 'toolbar-actions' }
+          ? { buttons: TOOLBAR_ACTIONS }
           : {}),
-        ...(slotTools ? { tools: 'toolbar-tools' } : {}),
+        ...(slotTools ? { tools: TOOLBAR_TOOLS } : {}),
       },
     },
   };
@@ -122,11 +126,6 @@ const options = computed(() => {
       toolbarOptions.value,
       toRaw(gridOptions.value),
       globalGridConfig,
-      {
-        // toolbarConfig: {
-        //   tools: [],
-        // },
-      } as VxeTableGridProps,
     ),
   );
 
@@ -185,7 +184,7 @@ const delegatedSlots = computed(() => {
   const resultSlots: string[] = [];
 
   for (const key of Object.keys(slots)) {
-    if (!['empty', 'form', 'loading', 'toolbar-actions'].includes(key)) {
+    if (!['empty', 'form', 'loading', TOOLBAR_ACTIONS].includes(key)) {
       resultSlots.push(key);
     }
   }