mithril-materialized 3.15.0 → 3.16.0
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/dist/advanced.css +17 -3
- package/dist/components.css +17 -3
- package/dist/index.css +17 -3
- package/dist/index.esm.js +33 -5
- package/dist/index.js +33 -5
- package/dist/index.min.css +1 -1
- package/dist/index.umd.js +33 -5
- package/dist/sidenav.d.ts +5 -1
- package/package.json +11 -8
- package/sass/components/_sidenav.scss +21 -3
package/dist/advanced.css
CHANGED
|
@@ -861,18 +861,32 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
|
|
|
861
861
|
margin: 0;
|
|
862
862
|
transform: translateX(-100%);
|
|
863
863
|
height: 100%;
|
|
864
|
-
|
|
865
|
-
height: -moz-calc(100%);
|
|
866
|
-
padding-bottom: 60px;
|
|
864
|
+
padding-bottom: 0;
|
|
867
865
|
background-color: var(--mm-surface-color, #fff);
|
|
868
866
|
z-index: 999;
|
|
869
867
|
overflow-y: auto;
|
|
868
|
+
overflow-x: hidden;
|
|
870
869
|
will-change: transform;
|
|
871
870
|
backface-visibility: hidden;
|
|
872
871
|
transform: translateX(-105%);
|
|
873
872
|
transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
|
|
874
873
|
display: flex;
|
|
875
874
|
flex-direction: column;
|
|
875
|
+
scrollbar-width: thin;
|
|
876
|
+
scrollbar-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3)) transparent;
|
|
877
|
+
}
|
|
878
|
+
.sidenav::-webkit-scrollbar {
|
|
879
|
+
width: 4px;
|
|
880
|
+
}
|
|
881
|
+
.sidenav::-webkit-scrollbar-track {
|
|
882
|
+
background: transparent;
|
|
883
|
+
}
|
|
884
|
+
.sidenav::-webkit-scrollbar-thumb {
|
|
885
|
+
background: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3));
|
|
886
|
+
border-radius: 2px;
|
|
887
|
+
}
|
|
888
|
+
.sidenav::-webkit-scrollbar-thumb:hover {
|
|
889
|
+
background: var(--mm-scrollbar-thumb-hover-color, rgba(128, 128, 128, 0.5));
|
|
876
890
|
}
|
|
877
891
|
.sidenav.sidenav-left {
|
|
878
892
|
left: 0;
|
package/dist/components.css
CHANGED
|
@@ -1659,18 +1659,32 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
|
|
|
1659
1659
|
margin: 0;
|
|
1660
1660
|
transform: translateX(-100%);
|
|
1661
1661
|
height: 100%;
|
|
1662
|
-
|
|
1663
|
-
height: -moz-calc(100%);
|
|
1664
|
-
padding-bottom: 60px;
|
|
1662
|
+
padding-bottom: 0;
|
|
1665
1663
|
background-color: var(--mm-surface-color, #fff);
|
|
1666
1664
|
z-index: 999;
|
|
1667
1665
|
overflow-y: auto;
|
|
1666
|
+
overflow-x: hidden;
|
|
1668
1667
|
will-change: transform;
|
|
1669
1668
|
backface-visibility: hidden;
|
|
1670
1669
|
transform: translateX(-105%);
|
|
1671
1670
|
transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
|
|
1672
1671
|
display: flex;
|
|
1673
1672
|
flex-direction: column;
|
|
1673
|
+
scrollbar-width: thin;
|
|
1674
|
+
scrollbar-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3)) transparent;
|
|
1675
|
+
}
|
|
1676
|
+
.sidenav::-webkit-scrollbar {
|
|
1677
|
+
width: 4px;
|
|
1678
|
+
}
|
|
1679
|
+
.sidenav::-webkit-scrollbar-track {
|
|
1680
|
+
background: transparent;
|
|
1681
|
+
}
|
|
1682
|
+
.sidenav::-webkit-scrollbar-thumb {
|
|
1683
|
+
background: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3));
|
|
1684
|
+
border-radius: 2px;
|
|
1685
|
+
}
|
|
1686
|
+
.sidenav::-webkit-scrollbar-thumb:hover {
|
|
1687
|
+
background: var(--mm-scrollbar-thumb-hover-color, rgba(128, 128, 128, 0.5));
|
|
1674
1688
|
}
|
|
1675
1689
|
.sidenav.sidenav-left {
|
|
1676
1690
|
left: 0;
|
package/dist/index.css
CHANGED
|
@@ -7786,18 +7786,32 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
|
|
|
7786
7786
|
margin: 0;
|
|
7787
7787
|
transform: translateX(-100%);
|
|
7788
7788
|
height: 100%;
|
|
7789
|
-
|
|
7790
|
-
height: -moz-calc(100%);
|
|
7791
|
-
padding-bottom: 60px;
|
|
7789
|
+
padding-bottom: 0;
|
|
7792
7790
|
background-color: var(--mm-surface-color, #fff);
|
|
7793
7791
|
z-index: 999;
|
|
7794
7792
|
overflow-y: auto;
|
|
7793
|
+
overflow-x: hidden;
|
|
7795
7794
|
will-change: transform;
|
|
7796
7795
|
backface-visibility: hidden;
|
|
7797
7796
|
transform: translateX(-105%);
|
|
7798
7797
|
transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
|
|
7799
7798
|
display: flex;
|
|
7800
7799
|
flex-direction: column;
|
|
7800
|
+
scrollbar-width: thin;
|
|
7801
|
+
scrollbar-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3)) transparent;
|
|
7802
|
+
}
|
|
7803
|
+
.sidenav::-webkit-scrollbar {
|
|
7804
|
+
width: 4px;
|
|
7805
|
+
}
|
|
7806
|
+
.sidenav::-webkit-scrollbar-track {
|
|
7807
|
+
background: transparent;
|
|
7808
|
+
}
|
|
7809
|
+
.sidenav::-webkit-scrollbar-thumb {
|
|
7810
|
+
background: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3));
|
|
7811
|
+
border-radius: 2px;
|
|
7812
|
+
}
|
|
7813
|
+
.sidenav::-webkit-scrollbar-thumb:hover {
|
|
7814
|
+
background: var(--mm-scrollbar-thumb-hover-color, rgba(128, 128, 128, 0.5));
|
|
7801
7815
|
}
|
|
7802
7816
|
.sidenav.sidenav-left {
|
|
7803
7817
|
left: 0;
|
package/dist/index.esm.js
CHANGED
|
@@ -2375,6 +2375,7 @@ const DatePicker = () => {
|
|
|
2375
2375
|
e.stopPropagation();
|
|
2376
2376
|
gotoMonth(index);
|
|
2377
2377
|
state.monthDropdownOpen = false;
|
|
2378
|
+
m.redraw();
|
|
2378
2379
|
},
|
|
2379
2380
|
}, monthName))),
|
|
2380
2381
|
]),
|
|
@@ -2399,6 +2400,7 @@ const DatePicker = () => {
|
|
|
2399
2400
|
e.stopPropagation();
|
|
2400
2401
|
gotoYear(i);
|
|
2401
2402
|
state.yearDropdownOpen = false;
|
|
2403
|
+
m.redraw();
|
|
2402
2404
|
},
|
|
2403
2405
|
}, i))),
|
|
2404
2406
|
]),
|
|
@@ -9371,9 +9373,9 @@ const Sidenav = () => {
|
|
|
9371
9373
|
m.redraw();
|
|
9372
9374
|
}
|
|
9373
9375
|
};
|
|
9374
|
-
const setBodyOverflow = (isOpen, mode) => {
|
|
9376
|
+
const setBodyOverflow = (isOpen, mode, fixed) => {
|
|
9375
9377
|
if (typeof document !== 'undefined') {
|
|
9376
|
-
document.body.style.overflow = isOpen && mode === 'overlay' ? 'hidden' : '';
|
|
9378
|
+
document.body.style.overflow = isOpen && mode === 'overlay' && !fixed ? 'hidden' : '';
|
|
9377
9379
|
}
|
|
9378
9380
|
};
|
|
9379
9381
|
const toggleExpanded = (attrs) => {
|
|
@@ -9409,7 +9411,7 @@ const Sidenav = () => {
|
|
|
9409
9411
|
if (wasOpen !== isOpen) {
|
|
9410
9412
|
state.isOpen = isOpen;
|
|
9411
9413
|
state.isAnimating = true;
|
|
9412
|
-
setBodyOverflow(isOpen, attrs.mode || 'overlay');
|
|
9414
|
+
setBodyOverflow(isOpen, attrs.mode || 'overlay', attrs.fixed || false);
|
|
9413
9415
|
// Clear animation state after animation completes
|
|
9414
9416
|
setTimeout(() => {
|
|
9415
9417
|
state.isAnimating = false;
|
|
@@ -9419,7 +9421,7 @@ const Sidenav = () => {
|
|
|
9419
9421
|
},
|
|
9420
9422
|
onremove: ({ attrs }) => {
|
|
9421
9423
|
// Clean up
|
|
9422
|
-
setBodyOverflow(false, attrs.mode || 'overlay');
|
|
9424
|
+
setBodyOverflow(false, attrs.mode || 'overlay', attrs.fixed || false);
|
|
9423
9425
|
if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
|
|
9424
9426
|
document.removeEventListener('keydown', (e) => handleEscapeKey(e, attrs));
|
|
9425
9427
|
}
|
|
@@ -9448,6 +9450,7 @@ const Sidenav = () => {
|
|
|
9448
9450
|
class: [
|
|
9449
9451
|
position === 'right' ? 'right-aligned' : '',
|
|
9450
9452
|
fixed ? 'sidenav-fixed' : '',
|
|
9453
|
+
mode === 'push' ? 'sidenav-push' : '',
|
|
9451
9454
|
expandable && !isExpanded ? 'sidenav-collapsed' : '',
|
|
9452
9455
|
className,
|
|
9453
9456
|
]
|
|
@@ -9458,8 +9461,21 @@ const Sidenav = () => {
|
|
|
9458
9461
|
transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
|
|
9459
9462
|
'transition-duration': `${animationDuration}ms`,
|
|
9460
9463
|
'transition-property': 'transform, width',
|
|
9464
|
+
display: 'flex',
|
|
9465
|
+
'flex-direction': 'column',
|
|
9461
9466
|
},
|
|
9462
9467
|
}, [
|
|
9468
|
+
// Header content slot (rendered first, before hamburger)
|
|
9469
|
+
attrs.headerContent &&
|
|
9470
|
+
m('li.sidenav-header-slot', {
|
|
9471
|
+
style: {
|
|
9472
|
+
'flex-shrink': 0,
|
|
9473
|
+
'list-style': 'none',
|
|
9474
|
+
height: 'auto',
|
|
9475
|
+
'line-height': 'normal',
|
|
9476
|
+
padding: 0,
|
|
9477
|
+
},
|
|
9478
|
+
}, attrs.headerContent),
|
|
9463
9479
|
// Hamburger toggle button (inside sidenav, at the top)
|
|
9464
9480
|
showHamburger &&
|
|
9465
9481
|
m('li.sidenav-hamburger-item', {
|
|
@@ -9513,7 +9529,19 @@ const Sidenav = () => {
|
|
|
9513
9529
|
: children,
|
|
9514
9530
|
// Footer item (if provided, appears at the bottom)
|
|
9515
9531
|
attrs.footer &&
|
|
9516
|
-
m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
|
|
9532
|
+
m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: ['sidenav-footer-item', attrs.footer.className].filter(Boolean).join(' ') })),
|
|
9533
|
+
// Footer content slot (rendered last, pushed to bottom via margin-top: auto)
|
|
9534
|
+
attrs.footerContent &&
|
|
9535
|
+
m('li.sidenav-footer-slot', {
|
|
9536
|
+
style: {
|
|
9537
|
+
'margin-top': 'auto',
|
|
9538
|
+
'flex-shrink': 0,
|
|
9539
|
+
'list-style': 'none',
|
|
9540
|
+
height: 'auto',
|
|
9541
|
+
'line-height': 'normal',
|
|
9542
|
+
padding: 0,
|
|
9543
|
+
},
|
|
9544
|
+
}, attrs.footerContent),
|
|
9517
9545
|
]),
|
|
9518
9546
|
];
|
|
9519
9547
|
},
|
package/dist/index.js
CHANGED
|
@@ -2377,6 +2377,7 @@ const DatePicker = () => {
|
|
|
2377
2377
|
e.stopPropagation();
|
|
2378
2378
|
gotoMonth(index);
|
|
2379
2379
|
state.monthDropdownOpen = false;
|
|
2380
|
+
m.redraw();
|
|
2380
2381
|
},
|
|
2381
2382
|
}, monthName))),
|
|
2382
2383
|
]),
|
|
@@ -2401,6 +2402,7 @@ const DatePicker = () => {
|
|
|
2401
2402
|
e.stopPropagation();
|
|
2402
2403
|
gotoYear(i);
|
|
2403
2404
|
state.yearDropdownOpen = false;
|
|
2405
|
+
m.redraw();
|
|
2404
2406
|
},
|
|
2405
2407
|
}, i))),
|
|
2406
2408
|
]),
|
|
@@ -9373,9 +9375,9 @@ const Sidenav = () => {
|
|
|
9373
9375
|
m.redraw();
|
|
9374
9376
|
}
|
|
9375
9377
|
};
|
|
9376
|
-
const setBodyOverflow = (isOpen, mode) => {
|
|
9378
|
+
const setBodyOverflow = (isOpen, mode, fixed) => {
|
|
9377
9379
|
if (typeof document !== 'undefined') {
|
|
9378
|
-
document.body.style.overflow = isOpen && mode === 'overlay' ? 'hidden' : '';
|
|
9380
|
+
document.body.style.overflow = isOpen && mode === 'overlay' && !fixed ? 'hidden' : '';
|
|
9379
9381
|
}
|
|
9380
9382
|
};
|
|
9381
9383
|
const toggleExpanded = (attrs) => {
|
|
@@ -9411,7 +9413,7 @@ const Sidenav = () => {
|
|
|
9411
9413
|
if (wasOpen !== isOpen) {
|
|
9412
9414
|
state.isOpen = isOpen;
|
|
9413
9415
|
state.isAnimating = true;
|
|
9414
|
-
setBodyOverflow(isOpen, attrs.mode || 'overlay');
|
|
9416
|
+
setBodyOverflow(isOpen, attrs.mode || 'overlay', attrs.fixed || false);
|
|
9415
9417
|
// Clear animation state after animation completes
|
|
9416
9418
|
setTimeout(() => {
|
|
9417
9419
|
state.isAnimating = false;
|
|
@@ -9421,7 +9423,7 @@ const Sidenav = () => {
|
|
|
9421
9423
|
},
|
|
9422
9424
|
onremove: ({ attrs }) => {
|
|
9423
9425
|
// Clean up
|
|
9424
|
-
setBodyOverflow(false, attrs.mode || 'overlay');
|
|
9426
|
+
setBodyOverflow(false, attrs.mode || 'overlay', attrs.fixed || false);
|
|
9425
9427
|
if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
|
|
9426
9428
|
document.removeEventListener('keydown', (e) => handleEscapeKey(e, attrs));
|
|
9427
9429
|
}
|
|
@@ -9450,6 +9452,7 @@ const Sidenav = () => {
|
|
|
9450
9452
|
class: [
|
|
9451
9453
|
position === 'right' ? 'right-aligned' : '',
|
|
9452
9454
|
fixed ? 'sidenav-fixed' : '',
|
|
9455
|
+
mode === 'push' ? 'sidenav-push' : '',
|
|
9453
9456
|
expandable && !isExpanded ? 'sidenav-collapsed' : '',
|
|
9454
9457
|
className,
|
|
9455
9458
|
]
|
|
@@ -9460,8 +9463,21 @@ const Sidenav = () => {
|
|
|
9460
9463
|
transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
|
|
9461
9464
|
'transition-duration': `${animationDuration}ms`,
|
|
9462
9465
|
'transition-property': 'transform, width',
|
|
9466
|
+
display: 'flex',
|
|
9467
|
+
'flex-direction': 'column',
|
|
9463
9468
|
},
|
|
9464
9469
|
}, [
|
|
9470
|
+
// Header content slot (rendered first, before hamburger)
|
|
9471
|
+
attrs.headerContent &&
|
|
9472
|
+
m('li.sidenav-header-slot', {
|
|
9473
|
+
style: {
|
|
9474
|
+
'flex-shrink': 0,
|
|
9475
|
+
'list-style': 'none',
|
|
9476
|
+
height: 'auto',
|
|
9477
|
+
'line-height': 'normal',
|
|
9478
|
+
padding: 0,
|
|
9479
|
+
},
|
|
9480
|
+
}, attrs.headerContent),
|
|
9465
9481
|
// Hamburger toggle button (inside sidenav, at the top)
|
|
9466
9482
|
showHamburger &&
|
|
9467
9483
|
m('li.sidenav-hamburger-item', {
|
|
@@ -9515,7 +9531,19 @@ const Sidenav = () => {
|
|
|
9515
9531
|
: children,
|
|
9516
9532
|
// Footer item (if provided, appears at the bottom)
|
|
9517
9533
|
attrs.footer &&
|
|
9518
|
-
m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
|
|
9534
|
+
m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: ['sidenav-footer-item', attrs.footer.className].filter(Boolean).join(' ') })),
|
|
9535
|
+
// Footer content slot (rendered last, pushed to bottom via margin-top: auto)
|
|
9536
|
+
attrs.footerContent &&
|
|
9537
|
+
m('li.sidenav-footer-slot', {
|
|
9538
|
+
style: {
|
|
9539
|
+
'margin-top': 'auto',
|
|
9540
|
+
'flex-shrink': 0,
|
|
9541
|
+
'list-style': 'none',
|
|
9542
|
+
height: 'auto',
|
|
9543
|
+
'line-height': 'normal',
|
|
9544
|
+
padding: 0,
|
|
9545
|
+
},
|
|
9546
|
+
}, attrs.footerContent),
|
|
9519
9547
|
]),
|
|
9520
9548
|
];
|
|
9521
9549
|
},
|