@gfazioli/mantine-window 0.6.0 → 0.6.2
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/README.md +7 -8
- package/dist/styles.css +1 -1
- package/dist/styles.layer.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
# Mantine Window Component
|
|
2
2
|
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
https://github.com/user-attachments/assets/7f80b2c0-90b1-442f-82c8-fddb75cca14e
|
|
6
|
-
|
|
7
|
-
</div>
|
|
8
|
-
|
|
9
|
-
---
|
|
3
|
+
<img width="2752" height="1536" alt="Mantine Window" src="https://github.com/user-attachments/assets/398a2a91-34d2-4819-a10a-791057e5b2ef" />
|
|
10
4
|
|
|
11
5
|
<div align="center">
|
|
12
6
|
|
|
@@ -24,7 +18,9 @@ This component is created on top of the [Mantine](https://mantine.dev/) library.
|
|
|
24
18
|
[](https://mantine.dev/)
|
|
26
20
|
|
|
27
|
-
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.
|
|
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.
|
|
28
24
|
|
|
29
25
|
[](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4)
|
|
@@ -75,3 +71,6 @@ function Demo() {
|
|
|
75
71
|
[](https://www.star-history.com/#gfazioli/mantine-window&Timeline)
|
|
76
72
|
|
|
77
73
|
</div>
|
|
74
|
+
|
|
75
|
+
https://github.com/user-attachments/assets/7f80b2c0-90b1-442f-82c8-fddb75cca14e
|
|
76
|
+
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.me_52c9647f{--window-handle-size:6px;--window-handle-length:40px;--window-handle-square:14px;background:var(--window-background);border-radius:var(--window-radius);box-shadow:var(--window-shadow);display:flex;flex-direction:column;overflow:hidden;padding:4px;position:fixed}.me_52c9647f
|
|
1
|
+
.me_52c9647f{--window-handle-size:6px;--window-handle-length:40px;--window-handle-square:14px;background:var(--window-background);border-radius:var(--window-radius);box-shadow:var(--window-shadow);display:flex;flex-direction:column;overflow:hidden;padding:4px;position:fixed}.me_52c9647f:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .me_52c9647f:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-8)}.me_a0cc2304{border-radius:calc(var(--window-radius) - 4px);display:flex;flex-direction:column;height:100%}[data-mantine-color-scheme=light] .me_a0cc2304{--window-container-border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .me_a0cc2304{--window-container-border-color:var(--mantine-color-dark-5)}.me_a0cc2304{border:1px solid var(--window-container-border-color)}.me_b45e52ea{-webkit-touch-callout:none;align-items:center;color:var(--mantine-color-dark-1);display:flex;height:40px;justify-content:space-between;padding:var(--mantine-spacing-xs)}.me_b45e52ea[data-window-draggable=true]{touch-action:none;user-select:none;-webkit-user-select:none}.me_b45e52ea:active{cursor:default}.me_67cb25b{font-size:var(--mantine-font-size-sm);font-weight:600}[data-mantine-color-scheme=light] .me_67cb25b{color:var(--mantine-color-dark-5)}[data-mantine-color-scheme=dark] .me_67cb25b{color:var(--mantine-color-dark-1)}.me_7f4bd90d,.me_d29fc49c,.me_da736660{--ai-size:12px!important}.me_7f4bd90d svg,.me_d29fc49c svg,.me_da736660 svg{color:var(--mantine-color-dark-9);opacity:0;transition:opacity .35s ease}.me_7f4bd90d:hover svg,.me_d29fc49c:hover svg,.me_da736660:hover svg{opacity:1}.me_da736660 svg{transform:rotate(-45deg)}.me_e0bbcfbc{flex:1;overflow:auto;padding:var(--mantine-spacing-sm)}.me_65c46766{color:var(--mantine-color-green-4);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:11px;line-height:1.5;margin:0;white-space:pre-wrap;word-break:break-word}.me_64f83623{cursor:nwse-resize;height:var(--window-handle-square);left:0;width:var(--window-handle-square)}.me_64f83623,.me_df4c7ffc{position:absolute;top:0;touch-action:none;-webkit-user-select:none;user-select:none}.me_df4c7ffc{cursor:ns-resize;height:var(--window-handle-size);left:50%;transform:translateX(-50%);width:var(--window-handle-length)}.me_3a64ef80{cursor:nesw-resize;height:var(--window-handle-square);top:0;width:var(--window-handle-square)}.me_3a64ef80,.me_3e0d7303{position:absolute;right:0;touch-action:none;-webkit-user-select:none;user-select:none}.me_3e0d7303{cursor:ew-resize;height:var(--window-handle-length);top:50%;transform:translateY(-50%);width:var(--window-handle-size)}.me_53490258{cursor:nwse-resize;height:var(--window-handle-square);right:0;width:var(--window-handle-square)}.me_53490258,.me_68ae0624{bottom:0;position:absolute;touch-action:none;-webkit-user-select:none;user-select:none}.me_68ae0624{cursor:ns-resize;height:var(--window-handle-size);left:50%;transform:translateX(-50%);width:var(--window-handle-length)}.me_b85a684b{bottom:0;cursor:nesw-resize;height:var(--window-handle-square);width:var(--window-handle-square)}.me_a3fb640,.me_b85a684b{left:0;position:absolute;touch-action:none;-webkit-user-select:none;user-select:none}.me_a3fb640{cursor:ew-resize;height:var(--window-handle-length);top:50%;transform:translateY(-50%);width:var(--window-handle-size)}
|
package/dist/styles.layer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer mantine-window {.me_52c9647f{--window-handle-size:6px;--window-handle-length:40px;--window-handle-square:14px;background:var(--window-background);border-radius:var(--window-radius);box-shadow:var(--window-shadow);display:flex;flex-direction:column;overflow:hidden;padding:4px;position:fixed}.me_52c9647f
|
|
1
|
+
@layer mantine-window {.me_52c9647f{--window-handle-size:6px;--window-handle-length:40px;--window-handle-square:14px;background:var(--window-background);border-radius:var(--window-radius);box-shadow:var(--window-shadow);display:flex;flex-direction:column;overflow:hidden;padding:4px;position:fixed}.me_52c9647f:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .me_52c9647f:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-8)}.me_a0cc2304{border-radius:calc(var(--window-radius) - 4px);display:flex;flex-direction:column;height:100%}[data-mantine-color-scheme=light] .me_a0cc2304{--window-container-border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .me_a0cc2304{--window-container-border-color:var(--mantine-color-dark-5)}.me_a0cc2304{border:1px solid var(--window-container-border-color)}.me_b45e52ea{-webkit-touch-callout:none;align-items:center;color:var(--mantine-color-dark-1);display:flex;height:40px;justify-content:space-between;padding:var(--mantine-spacing-xs)}.me_b45e52ea[data-window-draggable=true]{touch-action:none;user-select:none;-webkit-user-select:none}.me_b45e52ea:active{cursor:default}.me_67cb25b{font-size:var(--mantine-font-size-sm);font-weight:600}[data-mantine-color-scheme=light] .me_67cb25b{color:var(--mantine-color-dark-5)}[data-mantine-color-scheme=dark] .me_67cb25b{color:var(--mantine-color-dark-1)}.me_7f4bd90d,.me_d29fc49c,.me_da736660{--ai-size:12px!important}.me_7f4bd90d svg,.me_d29fc49c svg,.me_da736660 svg{color:var(--mantine-color-dark-9);opacity:0;transition:opacity .35s ease}.me_7f4bd90d:hover svg,.me_d29fc49c:hover svg,.me_da736660:hover svg{opacity:1}.me_da736660 svg{transform:rotate(-45deg)}.me_e0bbcfbc{flex:1;overflow:auto;padding:var(--mantine-spacing-sm)}.me_65c46766{color:var(--mantine-color-green-4);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:11px;line-height:1.5;margin:0;white-space:pre-wrap;word-break:break-word}.me_64f83623{cursor:nwse-resize;height:var(--window-handle-square);left:0;width:var(--window-handle-square)}.me_64f83623,.me_df4c7ffc{position:absolute;top:0;touch-action:none;-webkit-user-select:none;user-select:none}.me_df4c7ffc{cursor:ns-resize;height:var(--window-handle-size);left:50%;transform:translateX(-50%);width:var(--window-handle-length)}.me_3a64ef80{cursor:nesw-resize;height:var(--window-handle-square);top:0;width:var(--window-handle-square)}.me_3a64ef80,.me_3e0d7303{position:absolute;right:0;touch-action:none;-webkit-user-select:none;user-select:none}.me_3e0d7303{cursor:ew-resize;height:var(--window-handle-length);top:50%;transform:translateY(-50%);width:var(--window-handle-size)}.me_53490258{cursor:nwse-resize;height:var(--window-handle-square);right:0;width:var(--window-handle-square)}.me_53490258,.me_68ae0624{bottom:0;position:absolute;touch-action:none;-webkit-user-select:none;user-select:none}.me_68ae0624{cursor:ns-resize;height:var(--window-handle-size);left:50%;transform:translateX(-50%);width:var(--window-handle-length)}.me_b85a684b{bottom:0;cursor:nesw-resize;height:var(--window-handle-square);width:var(--window-handle-square)}.me_a3fb640,.me_b85a684b{left:0;position:absolute;touch-action:none;-webkit-user-select:none;user-select:none}.me_a3fb640{cursor:ew-resize;height:var(--window-handle-length);top:50%;transform:translateY(-50%);width:var(--window-handle-size)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gfazioli/mantine-window",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.2",
|
|
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",
|