Installation

npm install vue-func-windows

Usage

this.$windows.show(
    // window id
    "test-window-id",
    // inner component
    {
        componentInstance: () => import(`@/components/TestInnerComponent.vue`),
        events: {
            onTestClick: () => console.log('result test-click')
        },
        props: {
            text: 'Test text'
        },
    },
    // window options
    {
        title: 'TEST TITLE 1',
        top: 'middle',
        left: 'center',
        withoutHideButton: true,
        withoutCloseButton: true,
        withoutHead: true,
        backgroundClassList: ['class2'],
        movable: false,
        withBackground: false,
        events: {
            beforeCreate: (instance) => console.log('Test root beforeCreate event handler', instance),
            created: (instance) => console.log('Test root created event handler', instance),
            beforeShow: (instance) => console.log('Test root beforeShow event handler', instance),
            showed: (instance) => console.log('Test root showed event handler', instance),
            beforeHide: (instance) => console.log('Test root beforeHide event handler', instance),
            hidden: (instance) => console.log('Test root hidden event handler', instance),
            beforeClose: (instance) => console.log('Test root beforeClose event handler', instance),
            closed: (instance) => console.log('Test root closed event handler', instance),
        }
    })

Vue 3 plugin

• main.js

import {createApp} from 'vue'
import App from './App.vue'
import plugin from "vue-func-windows";

const app = createApp(App)

app.use(plugin)
app.mount('#app')

Nuxt 3 plugin

• plugins

  | -- windows{.client}.ts

import WindowsManager from 'vue-func-windows'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(WindowsManager)
    return {
        provide: {
            windows: nuxtApp.vueApp.windows
        }
    }
})

Types

interface WindowsManagerOptionsInterface {
    appContext?: AppContext,
    id?: string | number
}
interface WindowComponentOptionsInterface {
    componentInstance: Promise<any>;
    events?: {
        [innerComponentEventName: string]: (...args: any) => any;
    };
    props?: {
        [innerComponentPropName: string]: any;
    };
}
interface WindowsManagerStateInterface {
    selectedWindowId: WindowInterface['id']
    lastSelectedWindowId: WindowInterface['id']
}
interface WindowsManagerInterface {
    readonly isShowAnyWindow: boolean;
    readonly topShift: number;
    readonly leftShift: number;
    readonly windowsCount: number;
    readonly lastZIndex: number;

    windows: {[windowId: string]: WindowInterface};

    readonly state: WindowsManagerStateInterface;

    show: (
        id: WindowInterface['id'],
        innerComponentOptions: WindowComponentOptionsInterface,
        newWindowOptions?: WindowOptionsInterface
    ) => void;

    hide: (id: WindowInterface['id']) => void
    close: (id: WindowInterface['id']) => void
    removeWindow: (id: WindowInterface['id']) => void
}

type WindowEventType = 'beforeCreate' | 'created' | 'beforeShow' | 'showed' | 'beforeHide' | 'hidden' | 'beforeClose' | 'closed';

type WindowEventsInterface = { [key in WindowEventType]?: (...args: any[]) => any; } // args: this

interface ControlButtonOptionsInterface {
    symbol?: string;
    bgColor?: string;
    symbolColor?: string;
    classList?: string | string[] | Object;
    tag?: string;
    events?: {[EventName: string]: (...args: any[]) => any};
}

interface ControlButtonInterface {
    onPress: (callback: (event: MouseEvent) => any) => any;
    readonly element: HTMLElement;
}

interface HideButtonOptionsInterface extends ControlButtonOptionsInterface  {
    startHidden?: boolean,
    hiddenSymbol?: string;
}
interface HideButtonInterface extends ControlButtonInterface {
    isHidden: boolean;
}

type ClassListType = string | string[] | Object;

// const STATIC_X = ['left', 'center', 'right'] as const;
type StaticXType = typeof STATIC_X[number];
// const STATIC_Y = ['top', 'middle', 'bottom'] as const;
type StaticYType = typeof STATIC_Y[number];
type StaticXYType = StaticXType | StaticYType;

// const POSITION_DEFINITIONS = ['top', 'bottom', 'left', 'right'] as const;
type PositionDefinitionType = typeof POSITION_DEFINITIONS[number];

interface WindowOptionsInterface {
    events?: WindowEventsInterface;
    title?: string;
    top?: StaticYType | `${number}${'px' | '%' | 'vh' | 'cm' | 'mm' | 'pt' | 'em'}`;
    left?: StaticXType | `${number}${'px' | '%' | 'vw' | 'cm' | 'mm' | 'pt' | 'ex'}`;
    withoutHideButton?: boolean;
    withoutCloseButton?: boolean;
    withoutHead?: boolean;
    withBackground?: boolean;
    hideButtonOptions?: HideButtonOptionsInterface;
    closeButtonOptions?: ControlButtonOptionsInterface;
    windowClassList?: ClassListType;
    backgroundClassList?: ClassListType;
    movable?: boolean;
}

type WindowPositionInterface = Partial<Record<PositionDefinitionType, string>>

interface WindowStateInterface {
    isHidden: boolean;
    width: number;
    height: number;
    position: WindowPositionInterface;
}

interface WindowStateWithExecuteInterface extends WindowStateInterface {
    _execute: {[prop in keyof WindowStateInterface]?: Array<(...args: any[]) => any>}
}
interface WindowInterface {
    readonly id: string | number;
    withTitle: () => WindowInterface,
    withHideButton: () => WindowInterface,
    withCloseButton: () => WindowInterface,
    withEvents: (events: WindowEventsInterface) => WindowInterface,
    withInnerComponent: (
        componentInstance: Promise<any> | any,
        {props, events, context}: { props?: {}, events?: {}, context?: {} }
    ) => WindowInterface,

    state: WindowStateInterface;

    readonly isHidden: WindowStateInterface['isHidden'];
    readonly withBackground: WindowOptionsInterface['withBackground'];
    readonly backgroundClassList: string[];
    readonly preparedTitleText: string;

    readonly element: HTMLDivElement;

    show: () => void;
    hide: () => void;
    close: () => void;
}