@modulab/dialog/index.ts

对话框

import { inject } from 'vue';
import { useDynamic } from '@modulab/hooks';
import { provideKey } from './config';
import DefaultDialogTemplate from './dialog-template.vue';

/**
 * 初始对话框默认属性
 * @returns {Object}
 */
function initializeDialogProps() {
    return {
        title: 'Tips',
        width: '500',
    };
}

/**
 * 对话框
 * @param {Object} initialProps - 对话框参数，用于覆盖默认属性。
 * @returns {Object} 对话框实例，包含加载和销毁所有对话框的方法
 */
export function useDialog(initialProps = {}) {
    const props = {
        ...initializeDialogProps(),
        ...initialProps,
        provideKey,
    };

    const dynamic = useDynamic(DefaultDialogTemplate, props, {
        isTeleporting: true,
    });

    return {
        /**
         * 加载对话框
         *
         * @param {Function|Object} slot - 对话框内容，可以是渲染函数或VNode对象
         * @param {Object} [slotProps={}] - 传递给内容的参数
         * @param {Object} [replenishProps={}] - 补充对话框属性
         * @returns {Object} 对话框实例，包含销毁方法
         */
        load(slot, slotProps = {}, replenishProps = {}) {
            // @ts-ignore
            const { onClosed, ...args } = replenishProps;

            let instance;

            /**
             * 对话框关闭时的处理函数
             */
            function handleClosed() {
                instance && instance.destroy();
                onClosed && onClosed();
            }

            instance = dynamic.load(
                { default: slot },
                { default: slotProps },
                {
                    ...args,
                    onClosed: handleClosed,
                },
            );
            return instance;
        },
        destroyAll: dynamic.destroyAll,
    };
}

/**
 * 获取对话框的依赖注入实例
 * @returns {Object} 通过 provide/inject 共享对话框实例
 */
export function useDialogInject() {
    return inject(provideKey);
}