Skip to content

Commit

Permalink
feat: add form slot for action area
Browse files Browse the repository at this point in the history
  • Loading branch information
@CHUZHI-L
CHUZHI-L committed Oct 12, 2024
1 parent 304b1b2 commit 7c13492
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 74 deletions.
18 changes: 14 additions & 4 deletions packages/@core/ui-kit/form-ui/src/components/form-actions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -94,6 +95,9 @@ watch(
{{ resetButtonOptions.content }}
</component>

<!-- 提交按钮前 -->
<slot name="submit-before"></slot>

<component
:is="COMPONENT_MAP.DefaultSubmitActionButton"
v-if="submitButtonOptions.show"
Expand All @@ -104,12 +108,18 @@ watch(
{{ submitButtonOptions.content }}
</component>

<!-- 展开按钮前 -->
<slot name="advance-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="advance-after"></slot>
</div>
</template>
27 changes: 16 additions & 11 deletions packages/@core/ui-kit/form-ui/src/vben-use-form.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 会导致热更新卡死，所以重复写了一遍
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down
90 changes: 31 additions & 59 deletions packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
Expand Down Expand Up @@ -188,7 +156,7 @@ async function init() {
const defaultGridOptions: VxeTableGridProps = mergeWithArrayOverride(
{},
toRaw(gridOptions.value),
toRaw(globalGridConfig),
toRaw(globalGridConfig)
);
// 内部主动加载数据，防止form的默认值影响
const autoLoad = defaultGridOptions.proxyConfig?.autoLoad;
Expand All @@ -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'
);
}
Expand All @@ -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,
Expand All @@ -226,7 +190,7 @@ watch(
},
{
immediate: true,
},
}
);
onMounted(() => {
Expand All @@ -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>
Expand All @@ -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
Expand Down

0 comments on commit 7c13492

Please sign in to comment.