vue3-modal-manager/lib_dist/useModalManger.d.ts

A flexible and powerful modal manager for Vue 3

import type { App, AppContext } from 'vue';
import type { ModalRouter, modalParams } from './typing';
export declare class ModalManager {
    static modalManager: ModalManager;
    appContext: AppContext | null;
    private modalRoutes;
    private ModalList;
    private baseZIndex;
    private movingModalId;
    private initPosition;
    constructor(options: Array<ModalRouter>);
    install(app: App): void;
    /**
     * 建立modal ID
     * @param name modal元件名稱
     * @returns modal ID
     */
    private generateId;
    /**
     * 建立modal div(固定)元素
     * @param modalId modal ID
     * @returns HTMLDivElement
     */
    private createDivByFixed;
    /**
     * 建立modal div(懸浮)元素
     * @param modalId modal ID
     * @returns HTMLDivElement
     */
    private createDraggableDiv;
    /**
     * 打開固定位置的視窗
     * @param name modal 名稱
     * @param params modal 參數
     * @returns 回傳一個包含結果資訊的 Promise：
     * - `success`：是否成功開啟
     * - `msg`：訊息
     * - `modalId`：此 modal 的唯一 ID
     */
    openModal(name: string, params?: modalParams): Promise<{
        success: boolean;
        msg: string;
        modalId: string;
    }>;
    /**
     * 打開可拖動的視窗
     * @param name modal 名稱
     * @param params modal 參數
     * @returns 回傳一個包含結果資訊的 Promise：
     * - `success`：是否成功開啟
     * - `msg`：訊息
     * - `modalId`：此 modal 的唯一 ID
     */
    openPopover(name: string, params?: modalParams): Promise<{
        success: boolean;
        msg: string;
        modalId: string;
    }>;
    /**
     * 打開可拖動的視窗(多)
     * @param name modal 名稱
     * @param params modal 參數
     * @returns 回傳一個包含結果資訊的 Promise：
     * - `success`：是否成功開啟
     * - `msg`：訊息
     * - `modalId`：此 modal 的唯一 ID
     */
    openPopovers(name: string, params?: modalParams): Promise<{
        success: boolean;
        msg: string;
        modalId: string;
    }>;
    private createModal;
    /**
     * 關閉modal
     * @param modalId modal Id
     * @returns
     */
    closeModal(modalId: string): void;
    /**
     * 關閉所有modal
     */
    removeAllModal(): void;
    /**
     * 綁定拖曳功能
     * modal元件需在拖曳處加上modalDraggableArea='modalId'
     * @param modalId modal Id
     * @returns
     */
    bindDrag(modalId: string): void;
    /**
     * 解除拖曳功能
     * @param modalId modal Id
     * @returns
     */
    unbindDrag(modalId: string): void;
    /**
     * 開始拖曳
     * @param e 滑鼠事件
     * @param modalId modal Id
     * @returns
     */
    private startDrag;
    /**
     * 計算modal元件階層
     * @param modalId modal Id
     * @returns
     */
    private bringToFront;
    /**
     * 計算拖曳modal元件的位移
     * @param e 滑鼠事件
     * @returns
     */
    private calcMouseDisplacement;
    /**
     * 停止拖曳
     */
    private stopDrag;
    /**
     * 指定視窗生成位置
     * @param modalId modal Id
     * @param position 位置座標
     * @returns
     */
    private setPosition;
    /**
     * 移動視窗至指定容器
     * @param modalId
     * @param target
     * @returns
     */
    moveToLayers(modalId: string, target: string): void;
}
export declare const createModalManager: (options: Array<ModalRouter>) => ModalManager;
export declare const useModalManager: () => ModalManager;