@gfazioli/mantine-split-pane 0.2.5 → 0.2.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.
Files changed (4) hide show
  1. package/README.md +4 -0
  2. package/dist/styles.css +1 -1
  3. package/dist/styles.layer.css +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -19,6 +19,10 @@
19
19
 
20
20
  </p>
21
21
 
22
+ <p align="center">
23
+ <a href="https://www.buymeacoffee.com/johnfazioli"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=☕&slug=johnfazioli&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" /></a>
24
+ </p>
25
+
22
26
  ## Overview
23
27
 
24
28
  This component is created on top of the [Mantine](https://mantine.dev/) library.
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- .me-755975b3{--split-resizer-size-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-size-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-size-md:calc(0.5rem*var(--mantine-scale));--split-resizer-size-lg:calc(0.75rem*var(--mantine-scale));--split-resizer-size-xl:calc(1rem*var(--mantine-scale));--split-resizer-size:var(--split-resizer-size-xs);--split-resizer-knob-size-xs:20%;--split-resizer-knob-size-sm:30%;--split-resizer-knob-size-md:50%;--split-resizer-knob-size-lg:60%;--split-resizer-knob-size-xl:calc(100% - var(--split-resizer-size)/2);--split-resizer-knob-size:var(--split-resizer-knob-size-xs);--split-resizer-spacing-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-spacing-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-spacing-md:calc(0.5rem*var(--mantine-scale));--split-resizer-spacing-lg:calc(1rem*var(--mantine-scale));--split-resizer-spacing-xl:calc(1.5rem*var(--mantine-scale));--split-resizer-spacing:var(--split-resizer-spacing-xs)}:where([data-mantine-color-scheme=light]) .me-755975b3{--split-resizer-color:var(--split-resizer-color-light)}:where([data-mantine-color-scheme=dark]) .me-755975b3{--split-resizer-color:var(--split-resizer-color-dark)}:where([data-mantine-color-scheme=light]) .me-755975b3{--split-resizer-hover-color:var(--split-resizer-hover-color-light)}:where([data-mantine-color-scheme=dark]) .me-755975b3{--split-resizer-hover-color:var(--split-resizer-hover-color-dark)}.me-755975b3{background-clip:padding-box;background-color:var(--split-resizer-color);border-radius:var(--split-resizer-radius,var(--mantine-radius-xl));box-sizing:border-box;position:relative;transition:all .5s ease;z-index:2}.me-755975b3:after{background-color:var(--split-resizer-knob-color);border-radius:var(--split-resizer-knob-radius,var(--mantine-radius-default));content:"";opacity:var(--split-resizer-knob-opacity,.4);position:absolute;transition:all .5s ease;z-index:1}.me-755975b3:hover{background:var(--split-resizer-hover-color)}.me-755975b3:hover:after{background-color:var(--split-resizer-knob-hover-color);opacity:var(--split-resizer-knob-hover-opacity)}.me-755975b3[data-orientation=vertical]{bottom:0;cursor:col-resize;margin-left:var(--split-resizer-spacing);margin-right:var(--split-resizer-spacing);right:0;top:0;width:var(--split-resizer-size)}.me-755975b3[data-orientation=vertical]:after{height:var(--split-resizer-knob-size);left:calc(50% - var(--split-resizer-size)/4);top:calc(50% - var(--split-resizer-knob-size)/2);width:calc(var(--split-resizer-size)/2)}.me-755975b3[data-orientation=horizontal]{bottom:0;cursor:row-resize;height:var(--split-resizer-size);margin-bottom:var(--split-resizer-spacing);margin-top:var(--split-resizer-spacing);right:0;width:100%}.me-755975b3[data-orientation=horizontal]:after{height:calc(var(--split-resizer-size)/2);left:calc(50% - var(--split-resizer-knob-size)/2);top:calc(50% - var(--split-resizer-size)/4);width:var(--split-resizer-knob-size)}.me-ef80b24f{border:1px solid var(--split-resizer-hover-color)}.me-eedf38df,.me-ef80b24f{background-color:transparent}.me-eedf38df{border-color:transparent}.me-3e2cc004,.me-3e2cc004:after,.me-3ef2aa7d,.me-3ef2aa7d:after{background-color:transparent;border:none;border-radius:0}.me-3e2cc004:after,.me-3ef2aa7d:after{content:"";display:flex;opacity:1}.me-3e2cc004[data-orientation=vertical]:after,.me-3ef2aa7d[data-orientation=vertical]:after{border:none;border-right:4px dotted var(--split-resizer-color);left:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px);width:2px}.me-3e2cc004[data-orientation=horizontal]:after,.me-3ef2aa7d[data-orientation=horizontal]:after{border:none;border-bottom:4px dotted var(--split-resizer-color);height:2px;top:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px)}.me-3e2cc004:hover,.me-3ef2aa7d:hover{background-color:transparent}.me-3e2cc004:hover:after,.me-3ef2aa7d:hover:after{background-color:transparent;border-color:var(--split-resizer-hover-color);display:block}.me-3e2cc004[data-orientation=vertical]:after{border-right-style:dashed}.me-3e2cc004[data-orientation=horizontal]:after{border-bottom-style:dashed}.me-755975b3.me-b5b15ecd{cursor:not-allowed}.me-755975b3.me-b5b15ecd:hover{border-color:transparent}.me-31ecce4d{display:flex;flex:var(--split-pane-grow,initial);overflow:hidden;position:relative;z-index:1}.me-31ecce4d[data-orientation=vertical]{flex-direction:row}.me-31ecce4d[data-orientation=horizontal]{flex-direction:column}.me-dfcf43d5{display:var(--split-inline,"flex")}.me-dfcf43d5[data-orientation=horizontal]{flex-direction:column}
1
+ .me-755975b3{--split-resizer-size-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-size-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-size-md:calc(0.5rem*var(--mantine-scale));--split-resizer-size-lg:calc(0.75rem*var(--mantine-scale));--split-resizer-size-xl:calc(1rem*var(--mantine-scale));--split-resizer-size:var(--split-resizer-size-xs);--split-resizer-knob-size-xs:20%;--split-resizer-knob-size-sm:30%;--split-resizer-knob-size-md:50%;--split-resizer-knob-size-lg:60%;--split-resizer-knob-size-xl:calc(100% - var(--split-resizer-size)/2);--split-resizer-knob-size:var(--split-resizer-knob-size-xs);--split-resizer-spacing-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-spacing-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-spacing-md:calc(0.5rem*var(--mantine-scale));--split-resizer-spacing-lg:calc(1rem*var(--mantine-scale));--split-resizer-spacing-xl:calc(1.5rem*var(--mantine-scale));--split-resizer-spacing:var(--split-resizer-spacing-xs)}:where([data-mantine-color-scheme=light]) .me-755975b3{--split-resizer-color:var(--split-resizer-color-light)}:where([data-mantine-color-scheme=dark]) .me-755975b3{--split-resizer-color:var(--split-resizer-color-dark)}:where([data-mantine-color-scheme=light]) .me-755975b3{--split-resizer-hover-color:var(--split-resizer-hover-color-light)}:where([data-mantine-color-scheme=dark]) .me-755975b3{--split-resizer-hover-color:var(--split-resizer-hover-color-dark)}.me-755975b3{background-clip:padding-box;background-color:var(--split-resizer-color);border-radius:var(--split-resizer-radius,var(--mantine-radius-xl));box-sizing:border-box;position:relative;touch-action:none;transition:all .5s ease;z-index:2}.me-755975b3:after{background-color:var(--split-resizer-knob-color);border-radius:var(--split-resizer-knob-radius,var(--mantine-radius-default));content:"";opacity:var(--split-resizer-knob-opacity,.4);position:absolute;transition:all .5s ease;z-index:1}.me-755975b3:hover{background:var(--split-resizer-hover-color)}.me-755975b3:hover:after{background-color:var(--split-resizer-knob-hover-color);opacity:var(--split-resizer-knob-hover-opacity)}.me-755975b3[data-orientation=vertical]{bottom:0;cursor:col-resize;margin-left:var(--split-resizer-spacing);margin-right:var(--split-resizer-spacing);right:0;top:0;width:var(--split-resizer-size)}.me-755975b3[data-orientation=vertical]:after{height:var(--split-resizer-knob-size);left:calc(50% - var(--split-resizer-size)/4);top:calc(50% - var(--split-resizer-knob-size)/2);width:calc(var(--split-resizer-size)/2)}.me-755975b3[data-orientation=horizontal]{bottom:0;cursor:row-resize;height:var(--split-resizer-size);margin-bottom:var(--split-resizer-spacing);margin-top:var(--split-resizer-spacing);right:0;width:100%}.me-755975b3[data-orientation=horizontal]:after{height:calc(var(--split-resizer-size)/2);left:calc(50% - var(--split-resizer-knob-size)/2);top:calc(50% - var(--split-resizer-size)/4);width:var(--split-resizer-knob-size)}.me-ef80b24f{border:1px solid var(--split-resizer-hover-color)}.me-eedf38df,.me-ef80b24f{background-color:transparent}.me-eedf38df{border-color:transparent}.me-3e2cc004,.me-3e2cc004:after,.me-3ef2aa7d,.me-3ef2aa7d:after{background-color:transparent;border:none;border-radius:0}.me-3e2cc004:after,.me-3ef2aa7d:after{content:"";display:flex;opacity:1}.me-3e2cc004[data-orientation=vertical]:after,.me-3ef2aa7d[data-orientation=vertical]:after{border:none;border-right:4px dotted var(--split-resizer-color);left:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px);width:2px}.me-3e2cc004[data-orientation=horizontal]:after,.me-3ef2aa7d[data-orientation=horizontal]:after{border:none;border-bottom:4px dotted var(--split-resizer-color);height:2px;top:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px)}.me-3e2cc004:hover,.me-3ef2aa7d:hover{background-color:transparent}.me-3e2cc004:hover:after,.me-3ef2aa7d:hover:after{background-color:transparent;border-color:var(--split-resizer-hover-color);display:block}.me-3e2cc004[data-orientation=vertical]:after{border-right-style:dashed}.me-3e2cc004[data-orientation=horizontal]:after{border-bottom-style:dashed}.me-755975b3.me-b5b15ecd{cursor:not-allowed}.me-755975b3.me-b5b15ecd:hover{border-color:transparent}.me-31ecce4d{display:flex;flex:var(--split-pane-grow,initial);overflow:hidden;position:relative;z-index:1}.me-31ecce4d[data-orientation=vertical]{flex-direction:row}.me-31ecce4d[data-orientation=horizontal]{flex-direction:column}.me-dfcf43d5{display:var(--split-inline,"flex")}.me-dfcf43d5[data-orientation=horizontal]{flex-direction:column}
package/dist/styles.layer.css CHANGED
@@ -1 +1 @@
1
- @layer mantine-split-pane {.me-755975b3{--split-resizer-size-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-size-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-size-md:calc(0.5rem*var(--mantine-scale));--split-resizer-size-lg:calc(0.75rem*var(--mantine-scale));--split-resizer-size-xl:calc(1rem*var(--mantine-scale));--split-resizer-size:var(--split-resizer-size-xs);--split-resizer-knob-size-xs:20%;--split-resizer-knob-size-sm:30%;--split-resizer-knob-size-md:50%;--split-resizer-knob-size-lg:60%;--split-resizer-knob-size-xl:calc(100% - var(--split-resizer-size)/2);--split-resizer-knob-size:var(--split-resizer-knob-size-xs);--split-resizer-spacing-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-spacing-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-spacing-md:calc(0.5rem*var(--mantine-scale));--split-resizer-spacing-lg:calc(1rem*var(--mantine-scale));--split-resizer-spacing-xl:calc(1.5rem*var(--mantine-scale));--split-resizer-spacing:var(--split-resizer-spacing-xs)}:where([data-mantine-color-scheme=light]) .me-755975b3{--split-resizer-color:var(--split-resizer-color-light)}:where([data-mantine-color-scheme=dark]) .me-755975b3{--split-resizer-color:var(--split-resizer-color-dark)}:where([data-mantine-color-scheme=light]) .me-755975b3{--split-resizer-hover-color:var(--split-resizer-hover-color-light)}:where([data-mantine-color-scheme=dark]) .me-755975b3{--split-resizer-hover-color:var(--split-resizer-hover-color-dark)}.me-755975b3{background-clip:padding-box;background-color:var(--split-resizer-color);border-radius:var(--split-resizer-radius,var(--mantine-radius-xl));box-sizing:border-box;position:relative;transition:all .5s ease;z-index:2}.me-755975b3:after{background-color:var(--split-resizer-knob-color);border-radius:var(--split-resizer-knob-radius,var(--mantine-radius-default));content:"";opacity:var(--split-resizer-knob-opacity,.4);position:absolute;transition:all .5s ease;z-index:1}.me-755975b3:hover{background:var(--split-resizer-hover-color)}.me-755975b3:hover:after{background-color:var(--split-resizer-knob-hover-color);opacity:var(--split-resizer-knob-hover-opacity)}.me-755975b3[data-orientation=vertical]{bottom:0;cursor:col-resize;margin-left:var(--split-resizer-spacing);margin-right:var(--split-resizer-spacing);right:0;top:0;width:var(--split-resizer-size)}.me-755975b3[data-orientation=vertical]:after{height:var(--split-resizer-knob-size);left:calc(50% - var(--split-resizer-size)/4);top:calc(50% - var(--split-resizer-knob-size)/2);width:calc(var(--split-resizer-size)/2)}.me-755975b3[data-orientation=horizontal]{bottom:0;cursor:row-resize;height:var(--split-resizer-size);margin-bottom:var(--split-resizer-spacing);margin-top:var(--split-resizer-spacing);right:0;width:100%}.me-755975b3[data-orientation=horizontal]:after{height:calc(var(--split-resizer-size)/2);left:calc(50% - var(--split-resizer-knob-size)/2);top:calc(50% - var(--split-resizer-size)/4);width:var(--split-resizer-knob-size)}.me-ef80b24f{border:1px solid var(--split-resizer-hover-color)}.me-eedf38df,.me-ef80b24f{background-color:transparent}.me-eedf38df{border-color:transparent}.me-3e2cc004,.me-3e2cc004:after,.me-3ef2aa7d,.me-3ef2aa7d:after{background-color:transparent;border:none;border-radius:0}.me-3e2cc004:after,.me-3ef2aa7d:after{content:"";display:flex;opacity:1}.me-3e2cc004[data-orientation=vertical]:after,.me-3ef2aa7d[data-orientation=vertical]:after{border:none;border-right:4px dotted var(--split-resizer-color);left:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px);width:2px}.me-3e2cc004[data-orientation=horizontal]:after,.me-3ef2aa7d[data-orientation=horizontal]:after{border:none;border-bottom:4px dotted var(--split-resizer-color);height:2px;top:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px)}.me-3e2cc004:hover,.me-3ef2aa7d:hover{background-color:transparent}.me-3e2cc004:hover:after,.me-3ef2aa7d:hover:after{background-color:transparent;border-color:var(--split-resizer-hover-color);display:block}.me-3e2cc004[data-orientation=vertical]:after{border-right-style:dashed}.me-3e2cc004[data-orientation=horizontal]:after{border-bottom-style:dashed}.me-755975b3.me-b5b15ecd{cursor:not-allowed}.me-755975b3.me-b5b15ecd:hover{border-color:transparent}.me-31ecce4d{display:flex;flex:var(--split-pane-grow,initial);overflow:hidden;position:relative;z-index:1}.me-31ecce4d[data-orientation=vertical]{flex-direction:row}.me-31ecce4d[data-orientation=horizontal]{flex-direction:column}.me-dfcf43d5{display:var(--split-inline,"flex")}.me-dfcf43d5[data-orientation=horizontal]{flex-direction:column}}
1
+ @layer mantine-split-pane {.me-755975b3{--split-resizer-size-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-size-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-size-md:calc(0.5rem*var(--mantine-scale));--split-resizer-size-lg:calc(0.75rem*var(--mantine-scale));--split-resizer-size-xl:calc(1rem*var(--mantine-scale));--split-resizer-size:var(--split-resizer-size-xs);--split-resizer-knob-size-xs:20%;--split-resizer-knob-size-sm:30%;--split-resizer-knob-size-md:50%;--split-resizer-knob-size-lg:60%;--split-resizer-knob-size-xl:calc(100% - var(--split-resizer-size)/2);--split-resizer-knob-size:var(--split-resizer-knob-size-xs);--split-resizer-spacing-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-spacing-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-spacing-md:calc(0.5rem*var(--mantine-scale));--split-resizer-spacing-lg:calc(1rem*var(--mantine-scale));--split-resizer-spacing-xl:calc(1.5rem*var(--mantine-scale));--split-resizer-spacing:var(--split-resizer-spacing-xs)}:where([data-mantine-color-scheme=light]) .me-755975b3{--split-resizer-color:var(--split-resizer-color-light)}:where([data-mantine-color-scheme=dark]) .me-755975b3{--split-resizer-color:var(--split-resizer-color-dark)}:where([data-mantine-color-scheme=light]) .me-755975b3{--split-resizer-hover-color:var(--split-resizer-hover-color-light)}:where([data-mantine-color-scheme=dark]) .me-755975b3{--split-resizer-hover-color:var(--split-resizer-hover-color-dark)}.me-755975b3{background-clip:padding-box;background-color:var(--split-resizer-color);border-radius:var(--split-resizer-radius,var(--mantine-radius-xl));box-sizing:border-box;position:relative;touch-action:none;transition:all .5s ease;z-index:2}.me-755975b3:after{background-color:var(--split-resizer-knob-color);border-radius:var(--split-resizer-knob-radius,var(--mantine-radius-default));content:"";opacity:var(--split-resizer-knob-opacity,.4);position:absolute;transition:all .5s ease;z-index:1}.me-755975b3:hover{background:var(--split-resizer-hover-color)}.me-755975b3:hover:after{background-color:var(--split-resizer-knob-hover-color);opacity:var(--split-resizer-knob-hover-opacity)}.me-755975b3[data-orientation=vertical]{bottom:0;cursor:col-resize;margin-left:var(--split-resizer-spacing);margin-right:var(--split-resizer-spacing);right:0;top:0;width:var(--split-resizer-size)}.me-755975b3[data-orientation=vertical]:after{height:var(--split-resizer-knob-size);left:calc(50% - var(--split-resizer-size)/4);top:calc(50% - var(--split-resizer-knob-size)/2);width:calc(var(--split-resizer-size)/2)}.me-755975b3[data-orientation=horizontal]{bottom:0;cursor:row-resize;height:var(--split-resizer-size);margin-bottom:var(--split-resizer-spacing);margin-top:var(--split-resizer-spacing);right:0;width:100%}.me-755975b3[data-orientation=horizontal]:after{height:calc(var(--split-resizer-size)/2);left:calc(50% - var(--split-resizer-knob-size)/2);top:calc(50% - var(--split-resizer-size)/4);width:var(--split-resizer-knob-size)}.me-ef80b24f{border:1px solid var(--split-resizer-hover-color)}.me-eedf38df,.me-ef80b24f{background-color:transparent}.me-eedf38df{border-color:transparent}.me-3e2cc004,.me-3e2cc004:after,.me-3ef2aa7d,.me-3ef2aa7d:after{background-color:transparent;border:none;border-radius:0}.me-3e2cc004:after,.me-3ef2aa7d:after{content:"";display:flex;opacity:1}.me-3e2cc004[data-orientation=vertical]:after,.me-3ef2aa7d[data-orientation=vertical]:after{border:none;border-right:4px dotted var(--split-resizer-color);left:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px);width:2px}.me-3e2cc004[data-orientation=horizontal]:after,.me-3ef2aa7d[data-orientation=horizontal]:after{border:none;border-bottom:4px dotted var(--split-resizer-color);height:2px;top:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px)}.me-3e2cc004:hover,.me-3ef2aa7d:hover{background-color:transparent}.me-3e2cc004:hover:after,.me-3ef2aa7d:hover:after{background-color:transparent;border-color:var(--split-resizer-hover-color);display:block}.me-3e2cc004[data-orientation=vertical]:after{border-right-style:dashed}.me-3e2cc004[data-orientation=horizontal]:after{border-bottom-style:dashed}.me-755975b3.me-b5b15ecd{cursor:not-allowed}.me-755975b3.me-b5b15ecd:hover{border-color:transparent}.me-31ecce4d{display:flex;flex:var(--split-pane-grow,initial);overflow:hidden;position:relative;z-index:1}.me-31ecce4d[data-orientation=vertical]{flex-direction:row}.me-31ecce4d[data-orientation=horizontal]{flex-direction:column}.me-dfcf43d5{display:var(--split-inline,"flex")}.me-dfcf43d5[data-orientation=horizontal]{flex-direction:column}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gfazioli/mantine-split-pane",
3
- "version": "0.2.5",
3
+ "version": "0.2.6",
4
4
  "description": "A React component that manages split panes allows users to divide and resize content areas within a layout efficiently.",
5
5
  "homepage": "https://gfazioli.github.io/mantine-split-pane/",
6
6
  "packageManager": "yarn@4.0.1",