mithril-materialized 3.14.5 → 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 +34 -5
- package/dist/index.js +34 -5
- package/dist/index.min.css +1 -1
- package/dist/index.umd.js +34 -5
- package/dist/sidenav.d.ts +5 -1
- package/package.json +16 -13
- 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
|
]),
|
|
@@ -4584,6 +4586,7 @@ const DataTable = () => {
|
|
|
4584
4586
|
style: {
|
|
4585
4587
|
maxHeight: height ? `${height}px` : undefined,
|
|
4586
4588
|
overflowY: height ? 'auto' : undefined,
|
|
4589
|
+
overflowX: responsive ? 'auto' : undefined,
|
|
4587
4590
|
},
|
|
4588
4591
|
}, processedData.length === 0
|
|
4589
4592
|
? m('.datatable-empty', emptyMessage || (i18n === null || i18n === void 0 ? void 0 : i18n.noDataAvailable) || 'No data available')
|
|
@@ -9370,9 +9373,9 @@ const Sidenav = () => {
|
|
|
9370
9373
|
m.redraw();
|
|
9371
9374
|
}
|
|
9372
9375
|
};
|
|
9373
|
-
const setBodyOverflow = (isOpen, mode) => {
|
|
9376
|
+
const setBodyOverflow = (isOpen, mode, fixed) => {
|
|
9374
9377
|
if (typeof document !== 'undefined') {
|
|
9375
|
-
document.body.style.overflow = isOpen && mode === 'overlay' ? 'hidden' : '';
|
|
9378
|
+
document.body.style.overflow = isOpen && mode === 'overlay' && !fixed ? 'hidden' : '';
|
|
9376
9379
|
}
|
|
9377
9380
|
};
|
|
9378
9381
|
const toggleExpanded = (attrs) => {
|
|
@@ -9408,7 +9411,7 @@ const Sidenav = () => {
|
|
|
9408
9411
|
if (wasOpen !== isOpen) {
|
|
9409
9412
|
state.isOpen = isOpen;
|
|
9410
9413
|
state.isAnimating = true;
|
|
9411
|
-
setBodyOverflow(isOpen, attrs.mode || 'overlay');
|
|
9414
|
+
setBodyOverflow(isOpen, attrs.mode || 'overlay', attrs.fixed || false);
|
|
9412
9415
|
// Clear animation state after animation completes
|
|
9413
9416
|
setTimeout(() => {
|
|
9414
9417
|
state.isAnimating = false;
|
|
@@ -9418,7 +9421,7 @@ const Sidenav = () => {
|
|
|
9418
9421
|
},
|
|
9419
9422
|
onremove: ({ attrs }) => {
|
|
9420
9423
|
// Clean up
|
|
9421
|
-
setBodyOverflow(false, attrs.mode || 'overlay');
|
|
9424
|
+
setBodyOverflow(false, attrs.mode || 'overlay', attrs.fixed || false);
|
|
9422
9425
|
if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
|
|
9423
9426
|
document.removeEventListener('keydown', (e) => handleEscapeKey(e, attrs));
|
|
9424
9427
|
}
|
|
@@ -9447,6 +9450,7 @@ const Sidenav = () => {
|
|
|
9447
9450
|
class: [
|
|
9448
9451
|
position === 'right' ? 'right-aligned' : '',
|
|
9449
9452
|
fixed ? 'sidenav-fixed' : '',
|
|
9453
|
+
mode === 'push' ? 'sidenav-push' : '',
|
|
9450
9454
|
expandable && !isExpanded ? 'sidenav-collapsed' : '',
|
|
9451
9455
|
className,
|
|
9452
9456
|
]
|
|
@@ -9457,8 +9461,21 @@ const Sidenav = () => {
|
|
|
9457
9461
|
transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
|
|
9458
9462
|
'transition-duration': `${animationDuration}ms`,
|
|
9459
9463
|
'transition-property': 'transform, width',
|
|
9464
|
+
display: 'flex',
|
|
9465
|
+
'flex-direction': 'column',
|
|
9460
9466
|
},
|
|
9461
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),
|
|
9462
9479
|
// Hamburger toggle button (inside sidenav, at the top)
|
|
9463
9480
|
showHamburger &&
|
|
9464
9481
|
m('li.sidenav-hamburger-item', {
|
|
@@ -9512,7 +9529,19 @@ const Sidenav = () => {
|
|
|
9512
9529
|
: children,
|
|
9513
9530
|
// Footer item (if provided, appears at the bottom)
|
|
9514
9531
|
attrs.footer &&
|
|
9515
|
-
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),
|
|
9516
9545
|
]),
|
|
9517
9546
|
];
|
|
9518
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
|
]),
|
|
@@ -4586,6 +4588,7 @@ const DataTable = () => {
|
|
|
4586
4588
|
style: {
|
|
4587
4589
|
maxHeight: height ? `${height}px` : undefined,
|
|
4588
4590
|
overflowY: height ? 'auto' : undefined,
|
|
4591
|
+
overflowX: responsive ? 'auto' : undefined,
|
|
4589
4592
|
},
|
|
4590
4593
|
}, processedData.length === 0
|
|
4591
4594
|
? m('.datatable-empty', emptyMessage || (i18n === null || i18n === void 0 ? void 0 : i18n.noDataAvailable) || 'No data available')
|
|
@@ -9372,9 +9375,9 @@ const Sidenav = () => {
|
|
|
9372
9375
|
m.redraw();
|
|
9373
9376
|
}
|
|
9374
9377
|
};
|
|
9375
|
-
const setBodyOverflow = (isOpen, mode) => {
|
|
9378
|
+
const setBodyOverflow = (isOpen, mode, fixed) => {
|
|
9376
9379
|
if (typeof document !== 'undefined') {
|
|
9377
|
-
document.body.style.overflow = isOpen && mode === 'overlay' ? 'hidden' : '';
|
|
9380
|
+
document.body.style.overflow = isOpen && mode === 'overlay' && !fixed ? 'hidden' : '';
|
|
9378
9381
|
}
|
|
9379
9382
|
};
|
|
9380
9383
|
const toggleExpanded = (attrs) => {
|
|
@@ -9410,7 +9413,7 @@ const Sidenav = () => {
|
|
|
9410
9413
|
if (wasOpen !== isOpen) {
|
|
9411
9414
|
state.isOpen = isOpen;
|
|
9412
9415
|
state.isAnimating = true;
|
|
9413
|
-
setBodyOverflow(isOpen, attrs.mode || 'overlay');
|
|
9416
|
+
setBodyOverflow(isOpen, attrs.mode || 'overlay', attrs.fixed || false);
|
|
9414
9417
|
// Clear animation state after animation completes
|
|
9415
9418
|
setTimeout(() => {
|
|
9416
9419
|
state.isAnimating = false;
|
|
@@ -9420,7 +9423,7 @@ const Sidenav = () => {
|
|
|
9420
9423
|
},
|
|
9421
9424
|
onremove: ({ attrs }) => {
|
|
9422
9425
|
// Clean up
|
|
9423
|
-
setBodyOverflow(false, attrs.mode || 'overlay');
|
|
9426
|
+
setBodyOverflow(false, attrs.mode || 'overlay', attrs.fixed || false);
|
|
9424
9427
|
if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
|
|
9425
9428
|
document.removeEventListener('keydown', (e) => handleEscapeKey(e, attrs));
|
|
9426
9429
|
}
|
|
@@ -9449,6 +9452,7 @@ const Sidenav = () => {
|
|
|
9449
9452
|
class: [
|
|
9450
9453
|
position === 'right' ? 'right-aligned' : '',
|
|
9451
9454
|
fixed ? 'sidenav-fixed' : '',
|
|
9455
|
+
mode === 'push' ? 'sidenav-push' : '',
|
|
9452
9456
|
expandable && !isExpanded ? 'sidenav-collapsed' : '',
|
|
9453
9457
|
className,
|
|
9454
9458
|
]
|
|
@@ -9459,8 +9463,21 @@ const Sidenav = () => {
|
|
|
9459
9463
|
transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
|
|
9460
9464
|
'transition-duration': `${animationDuration}ms`,
|
|
9461
9465
|
'transition-property': 'transform, width',
|
|
9466
|
+
display: 'flex',
|
|
9467
|
+
'flex-direction': 'column',
|
|
9462
9468
|
},
|
|
9463
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),
|
|
9464
9481
|
// Hamburger toggle button (inside sidenav, at the top)
|
|
9465
9482
|
showHamburger &&
|
|
9466
9483
|
m('li.sidenav-hamburger-item', {
|
|
@@ -9514,7 +9531,19 @@ const Sidenav = () => {
|
|
|
9514
9531
|
: children,
|
|
9515
9532
|
// Footer item (if provided, appears at the bottom)
|
|
9516
9533
|
attrs.footer &&
|
|
9517
|
-
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),
|
|
9518
9547
|
]),
|
|
9519
9548
|
];
|
|
9520
9549
|
},
|