@gfazioli/mantine-window 0.6.4 → 0.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CODE_OF_CONDUCT.md +1 -1
- package/README.md +30 -15
- package/package.json +1 -1
package/CODE_OF_CONDUCT.md
CHANGED
|
@@ -60,7 +60,7 @@ representative at an online or offline event.
|
|
|
60
60
|
|
|
61
61
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
|
62
62
|
reported to the community leaders responsible for enforcement at
|
|
63
|
-
|
|
63
|
+
giovambattista.fazioli@gmail.com.
|
|
64
64
|
All complaints will be reviewed and investigated promptly and fairly.
|
|
65
65
|
|
|
66
66
|
All community leaders are obligated to respect the privacy and security of the
|
package/README.md
CHANGED
|
@@ -9,28 +9,25 @@
|
|
|
9
9
|
[](https://www.npmjs.com/package/@gfazioli/mantine-window)
|
|
10
10
|
|
|
11
11
|
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
[<kbd> <br/> ❤️ If this component has been useful to you or your team, please consider becoming a sponsor <br/> </kbd>](https://github.com/sponsors/gfazioli?o=esc)
|
|
15
|
+
|
|
12
16
|
</div>
|
|
13
17
|
|
|
14
18
|
## Overview
|
|
15
19
|
|
|
16
20
|
This component is created on top of the [Mantine](https://mantine.dev/) library.
|
|
17
21
|
|
|
18
|
-
[
|
|
19
|
-
)](https://mantine.dev/)
|
|
20
|
-
|
|
21
|
-
A fully-featured floating window component for Mantine applications. Provides draggable windows with customizable drag modes (header-only, full-window, or both), 8-directional resizing (top, right, bottom, left, and corners), collapsible content with smooth animations, and persistent state management via localStorage.
|
|
22
|
-
|
|
23
|
-
Configure initial position, size constraints (min/max width/height), drag boundaries, and control interaction modes (none, vertical, horizontal, or both for resizing). Includes z-index management for multi-window scenarios, close/collapse buttons, and event callbacks for position and size changes. Perfect for building desktop-like interfaces, modals, tool panels, and floating widgets.
|
|
22
|
+
[Mantine Window](https://gfazioli.github.io/mantine-window/) is a versatile UI container that brings a familiar desktop‑like window experience to React applications built with Mantine.
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
)](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4)
|
|
27
|
-
[](https://gfazioli.github.io/mantine-window/)
|
|
29
|
-
[](https://mantine-extensions.vercel.app/)
|
|
24
|
+
You can render windows in a portal for fixed, scroll‑independent overlays, or constrain them to a specific parent by setting withinPortal to false and using a relative container. The component supports both uncontrolled defaults (position and size) and controlled visibility via opened/onClose, plus optional drag boundaries to keep windows within prescribed X/Y ranges.
|
|
31
25
|
|
|
26
|
+
For state continuity, it can persist position and size to localStorage, and it exposes onPositionChange and onSizeChange callbacks for reacting to user interactions. The window’s behavior and chrome are configurable—draggable and resizable modes, collapse/close buttons, non‑collapsible headers, and centered, immovable presets—while appearance is tailored through Mantine’s Styles API with fine‑grained classNames for internal elements. Together, these features make it a robust foundation for modals, tools, and embedded UI panels in complex interfaces.
|
|
32
27
|
|
|
33
|
-
|
|
28
|
+
> [!note]
|
|
29
|
+
>
|
|
30
|
+
> → [Demo and Documentation](https://gfazioli.github.io/mantine-window/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)
|
|
34
31
|
|
|
35
32
|
## Installation
|
|
36
33
|
|
|
@@ -65,12 +62,30 @@ function Demo() {
|
|
|
65
62
|
);
|
|
66
63
|
}
|
|
67
64
|
```
|
|
65
|
+
## Sponsor
|
|
68
66
|
|
|
69
67
|
<div align="center">
|
|
70
|
-
|
|
71
|
-
[
|
|
68
|
+
|
|
69
|
+
[<kbd> <br/> ❤️ If this component has been useful to you or your team, please consider becoming a sponsor <br/> </kbd>](https://github.com/sponsors/gfazioli?o=esc)
|
|
72
70
|
|
|
73
71
|
</div>
|
|
74
72
|
|
|
73
|
+
Your support helps me:
|
|
74
|
+
|
|
75
|
+
- Keep the project actively maintained with timely bug fixes and security updates
|
|
76
|
+
- Add new features, improve performance, and refine the developer experience
|
|
77
|
+
- Expand test coverage and documentation for smoother adoption
|
|
78
|
+
- Ensure long‑term sustainability without relying on ad hoc free time
|
|
79
|
+
- Prioritize community requests and roadmap items that matter most
|
|
80
|
+
|
|
81
|
+
Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.
|
|
82
|
+
|
|
83
|
+
Your help truly matters.
|
|
84
|
+
|
|
85
|
+
💚 [Become a sponsor](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.
|
|
86
|
+
|
|
87
|
+
---
|
|
75
88
|
https://github.com/user-attachments/assets/7f80b2c0-90b1-442f-82c8-fddb75cca14e
|
|
76
89
|
|
|
90
|
+
---
|
|
91
|
+
[](https://www.star-history.com/#gfazioli/mantine-window&Timeline)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gfazioli/mantine-window",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.6",
|
|
4
4
|
"description": "A Mantine extension component that renders draggable, resizable floating windows with persistent state, customizable boundaries, collapsible content, and flexible control over position, size, and interaction modes.",
|
|
5
5
|
"homepage": "https://gfazioli.github.io/mantine-window/",
|
|
6
6
|
"packageManager": "yarn@4.0.1",
|