feat: add form slot for action area (#4621)

* feat: add form slot for action area * fix: fixed rename and lint
vbenjs · Oct 14, 2024 · 45987fc · 45987fc
1 parent ea962e7
commit 45987fc
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
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
@@ -83,6 +83,9 @@ watch(
     "
     :style="queryFormStyle"
   >
+    <!-- 重置按钮前 -->
+    <slot name="reset-before"></slot>
+
     <component
       :is="COMPONENT_MAP.DefaultButton"
       v-if="resetButtonOptions.show"
@@ -94,6 +97,9 @@ watch(
       {{ resetButtonOptions.content }}
     </component>
 
+    <!-- 提交按钮前 -->
+    <slot name="submit-before"></slot>
+
     <component
       :is="COMPONENT_MAP.PrimaryButton"
       v-if="submitButtonOptions.show"
@@ -104,12 +110,18 @@ watch(
       {{ submitButtonOptions.content }}
     </component>
 
+    <!-- 展开按钮前 -->
+    <slot name="expand-before"></slot>
+
     <VbenExpandableArrow
       v-if="rootProps.showCollapseButton"
       v-model:model-value="collapsed"
       class="ml-2"
     >
       <span>{{ collapsed ? $t('expand') : $t('collapse') }}</span>
     </VbenExpandableArrow>
+
+    <!-- 展开按钮后 -->
+    <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
@@ -58,7 +58,20 @@ const handleUpdateCollapsed = (value: boolean) => {
           v-if="forward.showDefaultActions"
           :model-value="state.collapsed"
           @update:model-value="handleUpdateCollapsed"
-        />
+        >
+          <template #reset-before="resetSlotProps">
+            <slot name="reset-before" v-bind="resetSlotProps"></slot>
+          </template>
+          <template #submit-before="submitSlotProps">
+            <slot name="submit-before" v-bind="submitSlotProps"></slot>
+          </template>
+          <template #expand-before="expandBeforeSlotProps">
+            <slot name="expand-before" v-bind="expandBeforeSlotProps"></slot>
+          </template>
+          <template #expand-after="expandAfterSlotProps">
+            <slot name="expand-after" v-bind="expandAfterSlotProps"></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
@@ -272,6 +272,18 @@ onMounted(() => {
                   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 #expand-before="slotProps">
+                <slot name="expand-before" v-bind="slotProps"></slot>
+              </template>
+              <template #expand-after="slotProps">
+                <slot name="expand-after" v-bind="slotProps"></slot>
+              </template>
             </Form>
           </slot>
           <div