refactor(adapter): separate form and component adapters so that components adapt to components other than the form (#4628)

* refactor: global components can be customized

* refactor: remove use Toast and reconstruct the form adapter
This commit is contained in:
Vben
2024-10-13 18:33:43 +08:00
committed by GitHub
parent 8b961a9d7f
commit 24d14c2841
63 changed files with 1798 additions and 2136 deletions

View File

@@ -23,6 +23,7 @@ import {
VbenLoading,
VisuallyHidden,
} from '@vben-core/shadcn-ui';
import { globalShareState } from '@vben-core/shared/global-state';
import { cn } from '@vben-core/shared/utils';
interface Props extends DrawerProps {
@@ -33,6 +34,8 @@ const props = withDefaults(defineProps<Props>(), {
drawerApi: undefined,
});
const components = globalShareState.getComponents();
const id = useId();
provide('DISMISSABLE_DRAWER_ID', id);
@@ -187,7 +190,8 @@ function handleFocusOutside(e: Event) {
>
<slot name="prepend-footer"></slot>
<slot name="footer">
<VbenButton
<component
:is="components.DefaultButton || VbenButton"
v-if="showCancelButton"
variant="ghost"
@click="() => drawerApi?.onCancel()"
@@ -195,8 +199,10 @@ function handleFocusOutside(e: Event) {
<slot name="cancelText">
{{ cancelText || $t('cancel') }}
</slot>
</VbenButton>
<VbenButton
</component>
<component
:is="components.PrimaryButton || VbenButton"
v-if="showConfirmButton"
:loading="confirmLoading"
@click="() => drawerApi?.onConfirm()"
@@ -204,7 +210,7 @@ function handleFocusOutside(e: Event) {
<slot name="confirmText">
{{ confirmText || $t('confirm') }}
</slot>
</VbenButton>
</component>
</slot>
<slot name="append-footer"></slot>
</SheetFooter>

View File

@@ -22,6 +22,7 @@ import {
VbenLoading,
VisuallyHidden,
} from '@vben-core/shadcn-ui';
import { globalShareState } from '@vben-core/shared/global-state';
import { cn } from '@vben-core/shared/utils';
import { useModalDraggable } from './use-modal-draggable';
@@ -34,6 +35,8 @@ const props = withDefaults(defineProps<Props>(), {
modalApi: undefined,
});
const components = globalShareState.getComponents();
const contentRef = ref();
const wrapperRef = ref<HTMLElement>();
const dialogRef = ref();
@@ -256,7 +259,8 @@ function handleFocusOutside(e: Event) {
>
<slot name="prepend-footer"></slot>
<slot name="footer">
<VbenButton
<component
:is="components.DefaultButton || VbenButton"
v-if="showCancelButton"
variant="ghost"
@click="() => modalApi?.onCancel()"
@@ -264,8 +268,10 @@ function handleFocusOutside(e: Event) {
<slot name="cancelText">
{{ cancelText || $t('cancel') }}
</slot>
</VbenButton>
<VbenButton
</component>
<component
:is="components.PrimaryButton || VbenButton"
v-if="showConfirmButton"
:loading="confirmLoading"
@click="() => modalApi?.onConfirm()"
@@ -273,7 +279,7 @@ function handleFocusOutside(e: Event) {
<slot name="confirmText">
{{ confirmText || $t('confirm') }}
</slot>
</VbenButton>
</component>
</slot>
<slot name="append-footer"></slot>
</DialogFooter>