FaModal 和 FaDrawer 组件添加 zIndex 属性

Author: hooray

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

src/ui/components/FaDrawer/index.vue

@@ -18,6 +18,7 @@ const props = withDefaults(
   defineProps<DrawerProps>(),
   {
     modelValue: false,
+    zIndex: 2000,
     side: 'right',
     loading: false,
     closable: true,
@@ -162,6 +163,7 @@ function handleAnimationEnd() {
     <SheetContent
       :drawer-id="drawerId"
       :open="isOpen"
+      :z-index="props.zIndex"
       :closable="props.closable"
       :overlay="props.overlay"
       :overlay-blur="props.overlayBlur"

src/ui/components/FaDrawer/sheet/SheetContent.vue

@@ -15,12 +15,13 @@ import { sheetVariants } from '.'
 
 interface SheetContentProps extends DialogContentProps {
   drawerId: string
-  class?: HTMLAttributes['class']
   open?: boolean
+  zIndex?: number
   side?: SheetVariants['side']
   closable?: boolean
   overlay?: boolean
   overlayBlur?: boolean
+  class?: HTMLAttributes['class']
 }
 
 defineOptions({
@@ -65,13 +66,19 @@ watch(showOverlay, (val) => {
       <div
         v-if="showOverlay"
         :data-drawer-id="props.drawerId"
-        :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
+        :class="cn('fixed inset-0 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,
         })"
+        :style="{
+          zIndex: props.zIndex,
+        }"
       />
     </Transition>
     <DialogContent
       :class="cn(sheetVariants({ side }), props.class)"
+      :style="{
+        zIndex: props.zIndex,
+      }"
       v-bind="{ ...forwarded, ...$attrs }"
       @animationend="emits('animationEnd')"
     >

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: {

src/ui/components/FaModal/dialog/DialogContent.vue

@@ -13,13 +13,14 @@ import { cn } from '@/utils'
 
 const props = defineProps<DialogContentProps & {
   modalId: string
-  class?: HTMLAttributes['class']
   open?: boolean
+  zIndex?: number
   maximize?: boolean
   maximizable?: boolean
   closable?: boolean
   overlay?: boolean
   overlayBlur?: boolean
+  class?: HTMLAttributes['class']
 }>()
 const emits = defineEmits<DialogContentEmits & {
   toggleMaximize: [val: boolean]
@@ -68,19 +69,25 @@ watch(showOverlay, (val) => {
       <div
         v-if="showOverlay"
         :data-modal-id="props.modalId"
-        :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
+        :class="cn('fixed inset-0 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,
         })"
+        :style="{
+          zIndex: props.zIndex,
+        }"
       />
     </Transition>
     <DialogContent
       ref="dialogContentRef"
       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')"
     >
       <slot />

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,
       )
     "

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'

src/ui/components/FaModal/index.vue

@@ -20,6 +20,7 @@ const props = withDefaults(
   defineProps<ModalProps>(),
   {
     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"