Simple customizable window system for Svelte

🏠 Homepage

Install

npm install svelte-window-system

Window features

• Multiple open windows at the same time
• Draggable
• Resizable
• Customizable

Usage

Opening a window

<!-- App.svelte -->
<script>
    import { openWindow } from 'svelte-window-system';
    import MyWindowComponent from 'MyWindowComponent.svelte';

    function openNewWindow() {
        openWindow(MyWindowComponent, { width: 200, height: 400 }, { someProp: 'my window property' });
    }
</script>

<button on:click="{openNewWindow}">Open window</button>

<!-- MyWindowComponent.svelte -->
<script>
    export let someProp = '';
</script>

<div>{someProp}</div>

To open a window, use openWindow(component: any, windowOptions?: WindowOptions, componentProps?: any) function, provide it a component to render inside the window, some options (if you want to change anything beyond the defaults) and an object of component properties that will be passed to the component, rendered inside the window.

Notes:

• A window will always be rendered as a child of the body

Window options

All of these are optional. | Option | Type | Default value | Description | |---------------------------------|--------------------------|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | width | number | 600 | Initial window width in pixels. | | minWidth | number | 300 | Minimum width of the window. | | maxWidth | number | -1 | Maximum width of the window. Set to -1 to allow the window to be of any width. | | height | number | 500 | Initial window height in pixels. | | minHeight | number | 200 | Minimum height of the window. | | maxHeight | number | -1 | Maximum height of the window. Set to -1 to allow the window to be of any height. | | resizable | boolean | true | Whether the window should be resizable. | | title | string | 'New window' | The title of the window show at the top of the window. | | position | { x: number; y: number } | { x: 0; y: 0 } | The absolute position of the viewport at which the window will be opened. The top-left corner of the window will be placed at this position. Ignored, if openInCenter is true. | | openInCenter | boolean | true | Whether to open the window in the center of the screen. | | alwaysOnTop | boolean | false | Whether to always show the window on top. When there are multiple windows open, this window will always be on top, no matter if it the active window or not. | | preventBodyOverflow | boolean | false | Whether the whole body of the page should overflow when the window is dragged outside the screen. | | animate | boolean | true | Whether the opening and closing of the window should be animated. | | customTitlebarButtons | TitlebarButton[] | [] | By default, there's only a button to close the window in the titlebar, but this property allows you to add custom buttons to the titlebar. | | customTitlebarClass | string | | A class that will style the title bar. Must be defined in global.css. Overrides the default styles completely. | | customInactiveTitlebarClass | string | | A class that will style the title bar when the window is not active. Must be defined in global.css. Overrides the default styles completely. | | customTitlebarButtonClass | string | | A class that will style the title bar buttons. Must be defined in global.css. Overrides the default styles completely. | | customWindowClass | string | | A class that will style the window. Must be defined in global.css. Overrides the default styles completely. |

Component props

You can easily provide the properties for your window component by passing in an object to openWindow function.

const componentProps = {
    propName1: 'propValue1',
    propName2: 'propValue2',
    propName3: { ... },
    propName4: 20,
};

openWindow(component, windowOptions, componentProps);

Adding custom button to the title bar

The system allows you to add custom button to the title bar next to the close button. This can be achieved by providing one or more TitlebarButton objects with windowOptions in a property customTitlebarButtons when opening a window. The style of the button will be the same as the style of close button and if a customTitlebarButtonsClass is specified, the buttons will instead be styled according to the probided class.

TitlebarButton

| Option | Type | Description | |--------------|------------------------------|-------------------------------------| | value | string | Text inside a button | | callback | a function with no arguments | A callback function for the button |

Author

👤 Vidmantas Luneckas

• Github: @DonutLaser

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 Vidmantas Luneckas. This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator