From 7c13492cc5895dc6a6de898170a6e6d40240c54e Mon Sep 17 00:00:00 2001
From: CHUZHI <1207800711@qq.com>
Date: Sat, 12 Oct 2024 13:11:30 +0800
Subject: [PATCH 1/2] feat: add form slot for action area

---
 .../form-ui/src/components/form-actions.vue   | 18 +++-
 .../ui-kit/form-ui/src/vben-use-form.vue      | 27 +++---
 .../plugins/src/vxe-table/use-vxe-grid.vue    | 90 +++++++------------
 3 files changed, 61 insertions(+), 74 deletions(-)

diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
index 0ac5b24ec25..719f59dd9a0 100644
--- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -73,16 +73,17 @@ watch(
     if (props.collapseTriggerResize) {
       triggerWindowResize();
     }
-  },
+  }
 );
 </script>
 <template>
   <div
-    :class="
-      cn('col-span-full w-full pb-6 text-right', rootProps.actionWrapperClass)
-    "
+    :class="cn('col-span-full w-full pb-6 text-right', rootProps.actionWrapperClass)"
     :style="queryFormStyle"
   >
+    <!-- 重置按钮前 -->
+    <slot name="reset-before"></slot>
+
     <component
       :is="COMPONENT_MAP.DefaultResetActionButton"
       v-if="resetButtonOptions.show"
@@ -94,6 +95,9 @@ watch(
       {{ resetButtonOptions.content }}
     </component>
 
+    <!-- 提交按钮前 -->
+    <slot name="submit-before"></slot>
+
     <component
       :is="COMPONENT_MAP.DefaultSubmitActionButton"
       v-if="submitButtonOptions.show"
@@ -104,6 +108,9 @@ watch(
       {{ submitButtonOptions.content }}
     </component>
 
+    <!-- 展开按钮前 -->
+    <slot name="advance-before"></slot>
+
     <VbenExpandableArrow
       v-if="rootProps.showCollapseButton"
       v-model:model-value="collapsed"
@@ -111,5 +118,8 @@ watch(
     >
       <span>{{ collapsed ? $t('expand') : $t('collapse') }}</span>
     </VbenExpandableArrow>
+
+    <!-- 展开按钮后 -->
+    <slot name="advance-after"></slot>
   </div>
 </template>
diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
index ffe2a0d0f94..ef05c22293d 100644
--- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -7,11 +7,7 @@ import { useForwardPriorityValues } from '@vben-core/composables';
 // import { isFunction } from '@vben-core/shared/utils';
 
 import FormActions from './components/form-actions.vue';
-import {
-  COMPONENT_BIND_EVENT_MAP,
-  COMPONENT_MAP,
-  DEFAULT_FORM_COMMON_CONFIG,
-} from './config';
+import { COMPONENT_BIND_EVENT_MAP, COMPONENT_MAP, DEFAULT_FORM_COMMON_CONFIG } from './config';
 import { Form } from './form-render';
 import { provideFormProps, useFormInitial } from './use-form-context';
 // 通过 extends 会导致热更新卡死，所以重复写了一遍
@@ -45,11 +41,7 @@ const handleUpdateCollapsed = (value: boolean) => {
     :form="form"
     :global-common-config="DEFAULT_FORM_COMMON_CONFIG"
   >
-    <template
-      v-for="slotName in delegatedSlots"
-      :key="slotName"
-      #[slotName]="slotProps"
-    >
+    <template v-for="slotName in delegatedSlots" :key="slotName" #[slotName]="slotProps">
       <slot :name="slotName" v-bind="slotProps"></slot>
     </template>
     <template #default="slotProps">
@@ -58,7 +50,20 @@ const handleUpdateCollapsed = (value: boolean) => {
           v-if="forward.showDefaultActions"
           :model-value="state.collapsed"
           @update:model-value="handleUpdateCollapsed"
-        />
+        >
+          <template #reset-before="slotProps">
+            <slot name="reset-before" v-bind="slotProps"></slot>
+          </template>
+          <template #submit-before="slotProps">
+            <slot name="submit-before" v-bind="slotProps"></slot>
+          </template>
+          <template #advance-before="slotProps">
+            <slot name="advance-before" v-bind="slotProps"></slot>
+          </template>
+          <template #advance-after="slotProps">
+            <slot name="advance-after" v-bind="slotProps"></slot>
+          </template>
+        </FormActions>
       </slot>
     </template>
   </Form>
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index 239eb7bc0c2..680d24f8c19 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -1,21 +1,10 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '@vben-core/form-ui';
-import type {
-  VxeGridInstance,
-  VxeGridProps as VxeTableGridProps,
-} from 'vxe-table';
+import type { VxeGridInstance, VxeGridProps as VxeTableGridProps } from 'vxe-table';
 
 import type { ExtendedVxeGridApi, VxeGridProps } from './types';
 
-import {
-  computed,
-  nextTick,
-  onMounted,
-  toRaw,
-  useSlots,
-  useTemplateRef,
-  watch,
-} from 'vue';
+import { computed, nextTick, onMounted, toRaw, useSlots, useTemplateRef, watch } from 'vue';
 
 import { usePriorityValues } from '@vben/hooks';
 import { EmptyIcon } from '@vben/icons';
@@ -101,12 +90,7 @@ const options = computed(() => {
     : {};
 
   const mergedOptions: VxeTableGridProps = cloneDeep(
-    mergeWithArrayOverride(
-      {},
-      forceUseToolbarOptions,
-      toRaw(gridOptions.value),
-      globalGridConfig,
-    ),
+    mergeWithArrayOverride({}, forceUseToolbarOptions, toRaw(gridOptions.value), globalGridConfig)
   );
 
   if (mergedOptions.proxyConfig) {
@@ -121,32 +105,16 @@ const options = computed(() => {
   }
 
   if (mergedOptions.pagerConfig) {
-    const mobileLayouts = [
-      'PrevJump',
-      'PrevPage',
-      'Number',
-      'NextPage',
-      'NextJump',
-    ] as any;
-    const layouts = [
-      'Total',
-      'Sizes',
-      'Home',
-      ...mobileLayouts,
-      'End',
-    ] as readonly string[];
-    mergedOptions.pagerConfig = mergeWithArrayOverride(
-      {},
-      mergedOptions.pagerConfig,
-      {
-        pageSize: 20,
-        background: true,
-        pageSizes: [10, 20, 30, 50, 100, 200],
-        className: 'mt-2 w-full',
-        layouts: isMobile.value ? mobileLayouts : layouts,
-        size: 'mini' as const,
-      },
-    );
+    const mobileLayouts = ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump'] as any;
+    const layouts = ['Total', 'Sizes', 'Home', ...mobileLayouts, 'End'] as readonly string[];
+    mergedOptions.pagerConfig = mergeWithArrayOverride({}, mergedOptions.pagerConfig, {
+      pageSize: 20,
+      background: true,
+      pageSizes: [10, 20, 30, 50, 100, 200],
+      className: 'mt-2 w-full',
+      layouts: isMobile.value ? mobileLayouts : layouts,
+      size: 'mini' as const,
+    });
   }
   if (mergedOptions.formConfig) {
     mergedOptions.formConfig.enabled = false;
@@ -188,7 +156,7 @@ async function init() {
   const defaultGridOptions: VxeTableGridProps = mergeWithArrayOverride(
     {},
     toRaw(gridOptions.value),
-    toRaw(globalGridConfig),
+    toRaw(globalGridConfig)
   );
   // 内部主动加载数据，防止form的默认值影响
   const autoLoad = defaultGridOptions.proxyConfig?.autoLoad;
@@ -201,7 +169,7 @@ async function init() {
   const formConfig = gridOptions.value?.formConfig;
   if (formConfig) {
     console.warn(
-      '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
+      '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props'
     );
   }
 
@@ -213,11 +181,7 @@ watch(
   formOptions,
   () => {
     formApi.setState((prev) => {
-      const finalFormOptions: VbenFormProps = mergeWithArrayOverride(
-        {},
-        formOptions.value,
-        prev,
-      );
+      const finalFormOptions: VbenFormProps = mergeWithArrayOverride({}, formOptions.value, prev);
       return {
         ...finalFormOptions,
         collapseTriggerResize: !!finalFormOptions.showCollapseButton,
@@ -226,7 +190,7 @@ watch(
   },
   {
     immediate: true,
-  },
+  }
 );
 
 onMounted(() => {
@@ -245,17 +209,13 @@ onMounted(() => {
           {
             'pt-0': showToolbar && !formOptions,
           },
-          gridClass,
+          gridClass
         )
       "
       v-bind="options"
       v-on="events"
     >
-      <template
-        v-for="slotName in delegatedSlots"
-        :key="slotName"
-        #[slotName]="slotProps"
-      >
+      <template v-for="slotName in delegatedSlots" :key="slotName" #[slotName]="slotProps">
         <slot :name="slotName" v-bind="slotProps"></slot>
       </template>
       <template #form>
@@ -269,6 +229,18 @@ onMounted(() => {
               >
                 <slot :name="slotName" v-bind="slotProps"></slot>
               </template>
+              <template #reset-before="slotProps">
+                <slot name="reset-before" v-bind="slotProps"></slot>
+              </template>
+              <template #submit-before="slotProps">
+                <slot name="submit-before" v-bind="slotProps"></slot>
+              </template>
+              <template #advance-before="slotProps">
+                <slot name="advance-before" v-bind="slotProps"></slot>
+              </template>
+              <template #advance-after="slotProps">
+                <slot name="advance-after" v-bind="slotProps"></slot>
+              </template>
             </Form>
           </slot>
           <div

From 7f200788715b96db3d55d309908b77b357bd157f Mon Sep 17 00:00:00 2001
From: CHUZHI <1207800711@qq.com>
Date: Mon, 14 Oct 2024 10:38:56 +0800
Subject: [PATCH 2/2] fix: fixed rename and lint

---
 .../form-ui/src/components/form-actions.vue   |  4 +--
 .../ui-kit/form-ui/src/vben-use-form.vue      | 28 ++++++++++++-------
 .../plugins/src/vxe-table/use-vxe-grid.vue    |  8 +++---
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
index 41275355379..1b1cbef9597 100644
--- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -111,7 +111,7 @@ watch(
     </component>
 
     <!-- 展开按钮前 -->
-    <slot name="advance-before"></slot>
+    <slot name="expand-before"></slot>
 
     <VbenExpandableArrow
       v-if="rootProps.showCollapseButton"
@@ -122,6 +122,6 @@ watch(
     </VbenExpandableArrow>
 
     <!-- 展开按钮后 -->
-    <slot name="advance-after"></slot>
+    <slot name="expand-after"></slot>
   </div>
 </template>
diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
index ef05c22293d..0c63eddb55f 100644
--- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -7,7 +7,11 @@ import { useForwardPriorityValues } from '@vben-core/composables';
 // import { isFunction } from '@vben-core/shared/utils';
 
 import FormActions from './components/form-actions.vue';
-import { COMPONENT_BIND_EVENT_MAP, COMPONENT_MAP, DEFAULT_FORM_COMMON_CONFIG } from './config';
+import {
+  COMPONENT_BIND_EVENT_MAP,
+  COMPONENT_MAP,
+  DEFAULT_FORM_COMMON_CONFIG,
+} from './config';
 import { Form } from './form-render';
 import { provideFormProps, useFormInitial } from './use-form-context';
 // 通过 extends 会导致热更新卡死，所以重复写了一遍
@@ -41,7 +45,11 @@ const handleUpdateCollapsed = (value: boolean) => {
     :form="form"
     :global-common-config="DEFAULT_FORM_COMMON_CONFIG"
   >
-    <template v-for="slotName in delegatedSlots" :key="slotName" #[slotName]="slotProps">
+    <template
+      v-for="slotName in delegatedSlots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
       <slot :name="slotName" v-bind="slotProps"></slot>
     </template>
     <template #default="slotProps">
@@ -51,17 +59,17 @@ const handleUpdateCollapsed = (value: boolean) => {
           :model-value="state.collapsed"
           @update:model-value="handleUpdateCollapsed"
         >
-          <template #reset-before="slotProps">
-            <slot name="reset-before" v-bind="slotProps"></slot>
+          <template #reset-before="resetSlotProps">
+            <slot name="reset-before" v-bind="resetSlotProps"></slot>
           </template>
-          <template #submit-before="slotProps">
-            <slot name="submit-before" v-bind="slotProps"></slot>
+          <template #submit-before="submitSlotProps">
+            <slot name="submit-before" v-bind="submitSlotProps"></slot>
           </template>
-          <template #advance-before="slotProps">
-            <slot name="advance-before" v-bind="slotProps"></slot>
+          <template #expand-before="expandBeforeSlotProps">
+            <slot name="expand-before" v-bind="expandBeforeSlotProps"></slot>
           </template>
-          <template #advance-after="slotProps">
-            <slot name="advance-after" v-bind="slotProps"></slot>
+          <template #expand-after="expandAfterSlotProps">
+            <slot name="expand-after" v-bind="expandAfterSlotProps"></slot>
           </template>
         </FormActions>
       </slot>
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index fe0cf6c48cf..323c483c6eb 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -278,11 +278,11 @@ onMounted(() => {
               <template #submit-before="slotProps">
                 <slot name="submit-before" v-bind="slotProps"></slot>
               </template>
-              <template #advance-before="slotProps">
-                <slot name="advance-before" v-bind="slotProps"></slot>
+              <template #expand-before="slotProps">
+                <slot name="expand-before" v-bind="slotProps"></slot>
               </template>
-              <template #advance-after="slotProps">
-                <slot name="advance-after" v-bind="slotProps"></slot>
+              <template #expand-after="slotProps">
+                <slot name="expand-after" v-bind="slotProps"></slot>
               </template>
             </Form>
           </slot>