This commit is contained in:
dap
2024-09-02 13:46:23 +08:00
17 changed files with 93 additions and 37 deletions

View File

@@ -5,6 +5,7 @@ import type { CSSProperties } from 'vue';
import { computed } from 'vue';
import { useContentStyle } from '@vben-core/composables';
import { Slot } from '@vben-core/shadcn-ui';
interface Props {
/**
@@ -54,7 +55,9 @@ const style = computed((): CSSProperties => {
<template>
<main ref="contentElement" :style="style" class="bg-background-deep relative">
<slot :overlay-style="overlayStyle" name="overlay"></slot>
<Slot :style="overlayStyle">
<slot name="overlay"></slot>
</Slot>
<slot></slot>
</main>
</template>

View File

@@ -217,18 +217,21 @@ function handleMouseenter() {
if (!expandOnHovering.value) {
collapse.value = false;
}
isLocked.value = true;
if (props.isSidebarMixed) {
isLocked.value = true;
}
expandOnHovering.value = true;
}
function handleMouseleave() {
emit('leave');
if (props.isSidebarMixed) {
isLocked.value = false;
}
if (expandOnHover.value) {
return;
}
isLocked.value = false;
expandOnHovering.value = false;
collapse.value = true;
extraVisible.value = false;

View File

@@ -534,8 +534,8 @@ function handleHeaderToggle() {
>
<slot name="content"></slot>
<template #overlay="{ overlayStyle }">
<slot :overlay-style="overlayStyle" name="content-overlay"></slot>
<template #overlay>
<slot name="content-overlay"></slot>
</template>
</LayoutContent>

View File

@@ -36,6 +36,8 @@ export class DrawerApi {
isOpen: false,
loading: false,
modal: true,
showCancelButton: true,
showConfirmButton: true,
title: '',
};

View File

@@ -50,6 +50,16 @@ export interface DrawerProps {
* @default true
*/
modal?: boolean;
/**
* 是否显示取消按钮
* @default true
*/
showCancelButton?: boolean;
/**
* 是否显示确认按钮
* @default true
*/
showConfirmButton?: boolean;
/**
* 弹窗标题
*/

View File

@@ -54,6 +54,8 @@ const cancelText = usePriorityValue('cancelText', props, state);
const confirmText = usePriorityValue('confirmText', props, state);
const closeOnClickModal = usePriorityValue('closeOnClickModal', props, state);
const closeOnPressEscape = usePriorityValue('closeOnPressEscape', props, state);
const showCancelButton = usePriorityValue('showCancelButton', props, state);
const showConfirmButton = usePriorityValue('showConfirmButton', props, state);
watch(
() => showLoading.value,
@@ -167,12 +169,17 @@ function pointerDownOutside(e: Event) {
>
<slot name="prepend-footer"></slot>
<slot name="footer">
<VbenButton variant="ghost" @click="() => drawerApi?.onCancel()">
<VbenButton
v-if="showCancelButton"
variant="ghost"
@click="() => drawerApi?.onCancel()"
>
<slot name="cancelText">
{{ cancelText || $t('cancel') }}
</slot>
</VbenButton>
<VbenButton
v-if="showConfirmButton"
:loading="confirmLoading"
@click="() => drawerApi?.onConfirm()"
>

View File

@@ -40,6 +40,8 @@ export class ModalApi {
isOpen: false,
loading: false,
modal: true,
showCancelButton: true,
showConfirmButton: true,
title: '',
};

View File

@@ -75,6 +75,16 @@ export interface ModalProps {
* @default true
*/
modal?: boolean;
/**
* 是否显示取消按钮
* @default true
*/
showCancelButton?: boolean;
/**
* 是否显示确认按钮
* @default true
*/
showConfirmButton?: boolean;
/**
* 弹窗标题
*/

View File

@@ -69,6 +69,8 @@ const draggable = usePriorityValue('draggable', props, state);
const fullscreenButton = usePriorityValue('fullscreenButton', props, state);
const closeOnClickModal = usePriorityValue('closeOnClickModal', props, state);
const closeOnPressEscape = usePriorityValue('closeOnPressEscape', props, state);
const showCancelButton = usePriorityValue('showCancelButton', props, state);
const showConfirmButton = usePriorityValue('showConfirmButton', props, state);
const shouldFullscreen = computed(
() => (fullscreen.value && header.value) || isMobile.value,
@@ -238,12 +240,17 @@ function pointerDownOutside(e: Event) {
>
<slot name="prepend-footer"></slot>
<slot name="footer">
<VbenButton variant="ghost" @click="() => modalApi?.onCancel()">
<VbenButton
v-if="showCancelButton"
variant="ghost"
@click="() => modalApi?.onCancel()"
>
<slot name="cancelText">
{{ cancelText || $t('cancel') }}
</slot>
</VbenButton>
<VbenButton
v-if="showConfirmButton"
:loading="confirmLoading"
@click="() => modalApi?.onConfirm()"
>

View File

@@ -1,2 +1,2 @@
export * from './components';
export { VisuallyHidden } from 'radix-vue';
export { Slot, VisuallyHidden } from 'radix-vue';