FaModal 和 FaDrawer 分别增加命令式调用API

Author: hooray

src/ui/components/FaDrawer/index.ts

@@ -0,0 +1,110 @@
+import type { Component, HTMLAttributes } from 'vue'
+import { isVNode } from 'vue'
+import Drawer from './index.vue'
+
+export interface DrawerProps {
+  id?: string
+  modelValue?: boolean
+  side?: 'top' | 'bottom' | 'left' | 'right'
+  title?: string
+  description?: string
+  loading?: boolean
+  closable?: boolean
+  centered?: boolean
+  bordered?: boolean
+  overlay?: boolean
+  overlayBlur?: boolean
+  showConfirmButton?: boolean
+  showCancelButton?: boolean
+  confirmButtonText?: string
+  cancelButtonText?: string
+  confirmButtonDisabled?: boolean
+  confirmButtonLoading?: boolean
+  beforeClose?: (
+    action: 'confirm' | 'cancel' | 'close',
+    done: () => void
+  ) => void
+  header?: boolean
+  footer?: boolean
+  closeOnClickOverlay?: boolean
+  closeOnPressEscape?: boolean
+  destroyOnClose?: boolean
+  contentClass?: HTMLAttributes['class']
+  headerClass?: HTMLAttributes['class']
+  footerClass?: HTMLAttributes['class']
+}
+
+export interface DrawerEmits {
+  'update:modelValue': [value: boolean]
+  'open': []
+  'opened': []
+  'close': []
+  'closed': []
+  'confirm': []
+  'cancel': []
+}
+
+type BaseOptions = Omit<DrawerProps, 'modelValue'> & {
+  content?: Component | VNode | string
+  onOpen?: () => void
+  onOpened?: () => void
+  onClose?: () => void
+  onClosed?: () => void
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+
+export function useFaDrawer() {
+  function create(initialOptions: BaseOptions) {
+    const container = document.createElement('div')
+    const visible = ref(false)
+    const options = reactive({ ...initialOptions })
+    const app = createApp({
+      render() {
+        return h(Drawer, Object.assign({
+          'id': useId(),
+          'modelValue': visible.value,
+          'onUpdate:modelValue': (val: boolean) => {
+            visible.value = val
+          },
+        }, options), {
+          default: () => {
+            if (typeof options.content === 'string') {
+              return options.content
+            }
+            else if (isVNode(options.content)) {
+              return options.content
+            }
+            else if (options.content) {
+              return h(options.content)
+            }
+            return null
+          },
+        })
+      },
+    })
+    // 继承主应用的上下文
+    const instance = getCurrentInstance()
+    if (instance && instance.appContext) {
+      Object.assign(app._context, instance.appContext)
+    }
+    app.mount(container)
+    const open = () => {
+      visible.value = true
+    }
+    const close = () => {
+      visible.value = false
+    }
+    const update = (newOptions: BaseOptions) => {
+      Object.assign(options, newOptions)
+    }
+    return {
+      open,
+      close,
+      update,
+    }
+  }
+  return {
+    create,
+  }
+}

src/ui/components/FaDrawer/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import type { DrawerEmits, DrawerProps } from '.'
 import { cn } from '@/utils'
 import {
   Sheet,
@@ -15,33 +15,9 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    side?: 'top' | 'bottom' | 'left' | 'right'
-    title: string
-    description?: string
-    loading?: boolean
-    closable?: boolean
-    centered?: boolean
-    bordered?: boolean
-    overlay?: boolean
-    overlayBlur?: boolean
-    showConfirmButton?: boolean
-    showCancelButton?: boolean
-    confirmButtonText?: string
-    cancelButtonText?: string
-    confirmButtonDisabled?: boolean
-    confirmButtonLoading?: boolean
-    header?: boolean
-    footer?: boolean
-    closeOnClickOverlay?: boolean
-    closeOnPressEscape?: boolean
-    destroyOnClose?: boolean
-    contentClass?: HTMLAttributes['class']
-    headerClass?: HTMLAttributes['class']
-    footerClass?: HTMLAttributes['class']
-  }>(),
+  defineProps<DrawerProps>(),
   {
+    id: useId(),
     modelValue: false,
     side: 'right',
     loading: false,
@@ -64,18 +40,7 @@ const props = withDefaults(
   },
 )
 
-const emits = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'open': []
-  'opened': []
-  'close': []
-  'closed': []
-  'confirm': []
-  'cancel': []
-}>()
-
-const id = useId()
-provide('DrawerId', id)
+const emits = defineEmits<DrawerEmits>()
 
 const isOpen = ref(props.modelValue)
 
@@ -86,9 +51,16 @@ watch(() => props.modelValue, (newValue) => {
 const hasOpened = ref(false)
 const isClosed = ref(true)
 
-watch(() => isOpen.value, (value) => {
+watch(isOpen, (val) => {
+  emits('update:modelValue', val)
+  if (val) {
+    emits('open')
+  }
+  else {
+    emits('close')
+  }
   isClosed.value = false
-  if (value && !hasOpened.value) {
+  if (val && !hasOpened.value) {
     hasOpened.value = true
   }
 }, {
@@ -97,25 +69,62 @@ watch(() => isOpen.value, (value) => {
 
 const forceMount = computed(() => !props.destroyOnClose && hasOpened.value)
 
-function updateOpen(value: boolean) {
-  isOpen.value = value
-  emits('update:modelValue', value)
+async function updateOpen(value: boolean) {
   if (value) {
+    isOpen.value = value
     emits('open')
   }
   else {
-    emits('close')
+    if (props.beforeClose) {
+      await props.beforeClose(
+        'close',
+        () => {
+          isOpen.value = value
+          emits('close')
+        },
+      )
+    }
+    else {
+      isOpen.value = value
+      emits('close')
+    }
   }
 }
 
-function onConfirm() {
-  updateOpen(false)
-  emits('confirm')
+const isConfirmButtonLoading = ref(false)
+
+async function onConfirm() {
+  if (props.beforeClose) {
+    isConfirmButtonLoading.value = true
+    await props.beforeClose(
+      'confirm',
+      () => {
+        isOpen.value = false
+        emits('confirm')
+      },
+    )
+    isConfirmButtonLoading.value = false
+  }
+  else {
+    isOpen.value = false
+    emits('confirm')
+  }
 }
 
-function onCancel() {
-  updateOpen(false)
-  emits('cancel')
+async function onCancel() {
+  if (props.beforeClose) {
+    await props.beforeClose(
+      'cancel',
+      () => {
+        isOpen.value = false
+        emits('cancel')
+      },
+    )
+  }
+  else {
+    isOpen.value = false
+    emits('cancel')
+  }
 }
 
 function handleFocusOutside(e: Event) {
@@ -124,7 +133,7 @@ function handleFocusOutside(e: Event) {
 }
 
 function handleClickOutside(e: Event) {
-  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.drawerId !== id) {
+  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.drawerId !== props.id) {
     e.preventDefault()
     e.stopPropagation()
   }
@@ -151,8 +160,9 @@ function handleAnimationEnd() {
 <template>
   <Sheet :modal="false" :open="isOpen" @update:open="updateOpen">
     <SheetContent
-      :closable="props.closable"
+      :drawer-id="props.id"
       :open="isOpen"
+      :closable="props.closable"
       :overlay="props.overlay"
       :overlay-blur="props.overlayBlur"
       :class="cn('w-full flex flex-col gap-0 p-0', props.contentClass, {
@@ -187,10 +197,10 @@ function handleAnimationEnd() {
           <div class="p-4">
             <slot />
           </div>
+          <div v-show="props.loading" class="absolute inset-0 z-1000 size-full flex-center bg-popover/75">
+            <FaIcon name="i-line-md:loading-twotone-loop" class="size-10" />
+          </div>
         </FaScrollArea>
-        <div v-show="props.loading" class="absolute inset-0 z-1000 size-full flex-center bg-popover/75">
-          <FaIcon name="i-line-md:loading-twotone-loop" class="size-10" />
-        </div>
       </div>
       <SheetFooter
         v-if="footer" :class="cn('p-2 gap-y-2', props.footerClass, {

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

@@ -15,6 +15,7 @@ import { cn } from '@/utils'
 import { sheetVariants } from '.'
 
 interface SheetContentProps extends DialogContentProps {
+  drawerId: string
   class?: HTMLAttributes['class']
   open?: boolean
   side?: SheetVariants['side']
@@ -51,8 +52,6 @@ watch(showOverlay, (val) => {
     isLocked.value = false
   }
 })
-
-const id = inject('DrawerId')
 </script>
 
 <template>
@@ -70,7 +69,7 @@ const id = inject('DrawerId')
     >
       <div
         v-if="showOverlay"
-        :data-drawer-id="id"
+        :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', {
           'backdrop-blur-sm': props.overlayBlur,
         })"