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);
     }
   }

pnpm-workspace.yaml

@@ -22,8 +22,8 @@ catalog:
   '@commitlint/config-conventional': ^19.5.0
   '@ctrl/tinycolor': ^4.1.0
   '@eslint/js': ^9.14.0
-  '@faker-js/faker': ^9.1.0
-  '@iconify/json': ^2.2.266
+  '@faker-js/faker': ^9.2.0
+  '@iconify/json': ^2.2.267
   '@iconify/tailwind': ^1.1.3
   '@iconify/vue': ^4.1.2
   '@intlify/core-base': ^10.0.4
@@ -36,14 +36,15 @@ catalog:
   '@stylistic/stylelint-plugin': ^3.1.1
   '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
   '@tailwindcss/typography': ^0.5.15
-  '@tanstack/vue-query': ^5.59.16
+  '@tanstack/vue-query': ^5.59.17
   '@tanstack/vue-store': ^0.5.6
   '@types/archiver': ^6.0.3
   '@types/eslint': ^9.6.1
   '@types/html-minifier-terser': ^7.0.2
   '@types/jsonwebtoken': ^9.0.7
   '@types/lodash.clonedeep': ^4.5.9
-  '@types/node': ^22.8.6
+  '@types/lodash.get': ^4.4.9
+  '@types/node': ^22.8.7
   '@types/nprogress': ^0.2.3
   '@types/postcss-import': ^14.0.3
   '@types/qrcode': ^1.5.5
@@ -73,7 +74,7 @@ catalog:
   commitlint-plugin-function-rules: ^4.0.0
   consola: ^3.2.3
   cross-env: ^7.0.3
-  cspell: ^8.15.5
+  cspell: ^8.15.7
   cssnano: ^7.0.6
   cz-git: ^1.10.1
   czg: ^1.10.1
@@ -102,9 +103,9 @@ catalog:
   execa: ^9.5.1
   find-up: ^7.0.0
   get-port: ^7.1.0
-  globals: ^15.11.0
+  globals: ^15.12.0
   h3: ^1.13.0
-  happy-dom: ^15.8.0
+  happy-dom: ^15.8.3
   html-minifier-terser: ^7.2.0
   husky: ^9.1.6
   is-ci: ^3.0.1
@@ -112,10 +113,11 @@ catalog:
   jsonwebtoken: ^9.0.2
   lint-staged: ^15.2.10
   lodash.clonedeep: ^4.5.0
+  lodash.get: ^4.4.2
   lucide-vue-next: ^0.454.0
   medium-zoom: ^1.1.0
   naive-ui: ^2.40.1
-  nitropack: ^2.10.0
+  nitropack: ^2.10.2
   nprogress: ^0.2.0
   ora: ^8.1.1
   pinia: 2.2.2
@@ -135,7 +137,7 @@ catalog:
   radix-vue: ^1.9.8
   resolve.exports: ^2.0.2
   rimraf: ^6.0.1
-  rollup: ^4.24.3
+  rollup: ^4.24.4
   rollup-plugin-visualizer: ^5.12.0
   sass: 1.79.5
   sortablejs: ^1.15.3
@@ -164,7 +166,7 @@ catalog:
   vite-plugin-lazy-import: ^1.0.7
   vite-plugin-pwa: ^0.20.5
   vite-plugin-vue-devtools: ^7.6.2
-  vitepress: ^1.4.3
+  vitepress: ^1.4.5
   vitepress-plugin-group-icons: ^1.3.0
   vitest: ^2.1.4
   vue: ^3.5.12
@@ -172,8 +174,8 @@ catalog:
   vue-i18n: ^10.0.4
   vue-router: ^4.4.5
   vue-tsc: ^2.1.10
-  vxe-pc-ui: ^4.2.37
-  vxe-table: ^4.7.97
+  vxe-pc-ui: ^4.2.40
+  vxe-table: ^4.8.0
   watermark-js-plus: ^1.5.7
   zod: ^3.23.8
   zod-defaults: ^0.1.3