From 06458467c5c79fc073d8a4aa27261ce5dcb00c43 Mon Sep 17 00:00:00 2001 From: Hooray <304327508@qq.com> Date: Wed, 30 Jul 2025 21:43:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20`FaModal`=20=E5=92=8C=20`FaDrawer`=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=20zIndex=20=E5=B1=9E?= =?UTF-8?q?=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/components/FaDrawer/index.ts | 1 + src/ui/components/FaDrawer/index.vue | 2 ++ src/ui/components/FaDrawer/sheet/SheetContent.vue | 11 +++++++++-- src/ui/components/FaDrawer/sheet/index.ts | 2 +- src/ui/components/FaModal/dialog/DialogContent.vue | 13 ++++++++++--- src/ui/components/FaModal/dialog/DialogTitle.vue | 2 +- src/ui/components/FaModal/index.ts | 1 + src/ui/components/FaModal/index.vue | 2 ++ 8 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/ui/components/FaDrawer/index.ts b/src/ui/components/FaDrawer/index.ts index 433ebf64..25f4281a 100644 --- a/src/ui/components/FaDrawer/index.ts +++ b/src/ui/components/FaDrawer/index.ts @@ -5,6 +5,7 @@ import Drawer from './index.vue' export interface DrawerProps { id?: string modelValue?: boolean + zIndex?: number side?: 'top' | 'bottom' | 'left' | 'right' title?: string description?: string diff --git a/src/ui/components/FaDrawer/index.vue b/src/ui/components/FaDrawer/index.vue index e54adbe6..ec469a4a 100644 --- a/src/ui/components/FaDrawer/index.vue +++ b/src/ui/components/FaDrawer/index.vue @@ -18,6 +18,7 @@ const props = withDefaults( defineProps(), { modelValue: false, + zIndex: 2000, side: 'right', loading: false, closable: true, @@ -162,6 +163,7 @@ function handleAnimationEnd() { {
diff --git a/src/ui/components/FaDrawer/sheet/index.ts b/src/ui/components/FaDrawer/sheet/index.ts index 71e66d0e..448ccd83 100644 --- a/src/ui/components/FaDrawer/sheet/index.ts +++ b/src/ui/components/FaDrawer/sheet/index.ts @@ -11,7 +11,7 @@ export { default as SheetTitle } from './SheetTitle.vue' export { default as SheetTrigger } from './SheetTrigger.vue' export const sheetVariants = cva( - 'fixed z-2000 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500', + 'fixed gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500', { variants: { side: { diff --git a/src/ui/components/FaModal/dialog/DialogContent.vue b/src/ui/components/FaModal/dialog/DialogContent.vue index 488874f5..3f3d0108 100644 --- a/src/ui/components/FaModal/dialog/DialogContent.vue +++ b/src/ui/components/FaModal/dialog/DialogContent.vue @@ -13,13 +13,14 @@ import { cn } from '@/utils' const props = defineProps() const emits = defineEmits {
{ v-bind="forwarded" :class=" cn( - 'fixed left-1/2 top-1/2 z-2000 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-0 data-[state=closed]:slide-out-to-top-1/5 data-[state=open]:slide-in-from-left-0 data-[state=open]:slide-in-from-top-1/5 sm:rounded-lg', + 'fixed left-1/2 top-1/2 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-0 data-[state=closed]:slide-out-to-top-1/5 data-[state=open]:slide-in-from-left-0 data-[state=open]:slide-in-from-top-1/5 sm:rounded-lg', props.class, )" + :style="{ + zIndex: props.zIndex, + }" @animationend="emits('animationEnd')" > diff --git a/src/ui/components/FaModal/dialog/DialogTitle.vue b/src/ui/components/FaModal/dialog/DialogTitle.vue index fbf2e9ec..5eae356a 100644 --- a/src/ui/components/FaModal/dialog/DialogTitle.vue +++ b/src/ui/components/FaModal/dialog/DialogTitle.vue @@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps) v-bind="forwardedProps" :class=" cn( - 'text-lg font-semibold tracking-tight', + 'text-lg font-semibold leading-none tracking-tight', props.class, ) " diff --git a/src/ui/components/FaModal/index.ts b/src/ui/components/FaModal/index.ts index a662cf87..d418a560 100644 --- a/src/ui/components/FaModal/index.ts +++ b/src/ui/components/FaModal/index.ts @@ -5,6 +5,7 @@ import Modal from './index.vue' export interface ModalProps { id?: string modelValue?: boolean + zIndex?: number title?: string description?: string icon?: 'info' | 'success' | 'warning' | 'error' diff --git a/src/ui/components/FaModal/index.vue b/src/ui/components/FaModal/index.vue index c9be2b22..21e7e875 100644 --- a/src/ui/components/FaModal/index.vue +++ b/src/ui/components/FaModal/index.vue @@ -20,6 +20,7 @@ const props = withDefaults( defineProps(), { modelValue: false, + zIndex: 2000, loading: false, closable: true, maximize: false, @@ -214,6 +215,7 @@ function handleAnimationEnd() { ref="dialogContentRef" :modal-id="modalId" :open="isOpen" + :z-index="props.zIndex" :closable="props.closable" :overlay="props.overlay" :overlay-blur="props.overlayBlur"