Welcome to svelte-window-system 👋

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

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

DonutLaser/svelte-window-system