mithril-materialized 3.5.4 → 3.5.5
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 +6 -0
- package/dist/components.css +6 -0
- package/dist/index.css +6 -0
- package/dist/index.esm.js +66 -42
- package/dist/index.js +66 -42
- package/dist/index.min.css +1 -1
- package/dist/index.umd.js +66 -42
- package/package.json +1 -1
- package/sass/components/_sidenav.scss +7 -0
package/dist/advanced.css
CHANGED
|
@@ -866,6 +866,8 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
|
|
|
866
866
|
backface-visibility: hidden;
|
|
867
867
|
transform: translateX(-105%);
|
|
868
868
|
transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
|
|
869
|
+
display: flex;
|
|
870
|
+
flex-direction: column;
|
|
869
871
|
}
|
|
870
872
|
.sidenav.sidenav-left {
|
|
871
873
|
left: 0;
|
|
@@ -1220,6 +1222,10 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
|
|
|
1220
1222
|
color: var(--mm-primary-color, #26a69a);
|
|
1221
1223
|
}
|
|
1222
1224
|
|
|
1225
|
+
.sidenav-footer-item {
|
|
1226
|
+
margin-top: auto;
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1223
1229
|
.sidenav {
|
|
1224
1230
|
transition: transform 0.3s ease, width 0.3s ease;
|
|
1225
1231
|
}
|
package/dist/components.css
CHANGED
|
@@ -1619,6 +1619,8 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
|
|
|
1619
1619
|
backface-visibility: hidden;
|
|
1620
1620
|
transform: translateX(-105%);
|
|
1621
1621
|
transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
|
|
1622
|
+
display: flex;
|
|
1623
|
+
flex-direction: column;
|
|
1622
1624
|
}
|
|
1623
1625
|
.sidenav.sidenav-left {
|
|
1624
1626
|
left: 0;
|
|
@@ -1973,6 +1975,10 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
|
|
|
1973
1975
|
color: var(--mm-primary-color, #26a69a);
|
|
1974
1976
|
}
|
|
1975
1977
|
|
|
1978
|
+
.sidenav-footer-item {
|
|
1979
|
+
margin-top: auto;
|
|
1980
|
+
}
|
|
1981
|
+
|
|
1976
1982
|
.sidenav {
|
|
1977
1983
|
transition: transform 0.3s ease, width 0.3s ease;
|
|
1978
1984
|
}
|
package/dist/index.css
CHANGED
|
@@ -7731,6 +7731,8 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
|
|
|
7731
7731
|
backface-visibility: hidden;
|
|
7732
7732
|
transform: translateX(-105%);
|
|
7733
7733
|
transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
|
|
7734
|
+
display: flex;
|
|
7735
|
+
flex-direction: column;
|
|
7734
7736
|
}
|
|
7735
7737
|
.sidenav.sidenav-left {
|
|
7736
7738
|
left: 0;
|
|
@@ -8087,6 +8089,10 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
|
|
|
8087
8089
|
color: var(--mm-primary-color, #26a69a);
|
|
8088
8090
|
}
|
|
8089
8091
|
|
|
8092
|
+
.sidenav-footer-item {
|
|
8093
|
+
margin-top: auto;
|
|
8094
|
+
}
|
|
8095
|
+
|
|
8090
8096
|
.sidenav {
|
|
8091
8097
|
transition: transform 0.3s ease, width 0.3s ease;
|
|
8092
8098
|
}
|
package/dist/index.esm.js
CHANGED
|
@@ -7812,9 +7812,19 @@ const FileUpload = () => {
|
|
|
7812
7812
|
|
|
7813
7813
|
// List of MaterialIcon SVG icons that are available
|
|
7814
7814
|
const materialIconSvgNames = [
|
|
7815
|
-
'caret',
|
|
7816
|
-
'
|
|
7817
|
-
'
|
|
7815
|
+
'caret',
|
|
7816
|
+
'close',
|
|
7817
|
+
'chevron',
|
|
7818
|
+
'chevron_left',
|
|
7819
|
+
'chevron_right',
|
|
7820
|
+
'menu',
|
|
7821
|
+
'expand',
|
|
7822
|
+
'collapse',
|
|
7823
|
+
'check',
|
|
7824
|
+
'radio_checked',
|
|
7825
|
+
'radio_unchecked',
|
|
7826
|
+
'light_mode',
|
|
7827
|
+
'dark_mode',
|
|
7818
7828
|
];
|
|
7819
7829
|
/**
|
|
7820
7830
|
* Helper function to render icons based on IconDefinition type
|
|
@@ -7844,31 +7854,42 @@ const renderIcon = (icon, style) => {
|
|
|
7844
7854
|
return null;
|
|
7845
7855
|
};
|
|
7846
7856
|
/**
|
|
7847
|
-
*
|
|
7857
|
+
* Sidenav Header/Footer Item Component
|
|
7848
7858
|
*/
|
|
7849
|
-
const
|
|
7850
|
-
|
|
7851
|
-
|
|
7852
|
-
|
|
7853
|
-
|
|
7854
|
-
|
|
7855
|
-
|
|
7856
|
-
|
|
7857
|
-
|
|
7858
|
-
|
|
7859
|
-
|
|
7860
|
-
|
|
7861
|
-
|
|
7862
|
-
|
|
7863
|
-
|
|
7864
|
-
|
|
7865
|
-
|
|
7866
|
-
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
|
|
7870
|
-
|
|
7871
|
-
|
|
7859
|
+
const SidenavHeaderFooterItem = () => {
|
|
7860
|
+
return {
|
|
7861
|
+
view: ({ attrs }) => {
|
|
7862
|
+
const { text, icon, onclick, href, className = '', _isExpanded = true, _position = 'left' } = attrs;
|
|
7863
|
+
const isRightAligned = _position === 'right';
|
|
7864
|
+
const handleClick = (e) => {
|
|
7865
|
+
if (onclick) {
|
|
7866
|
+
e.preventDefault();
|
|
7867
|
+
onclick(e);
|
|
7868
|
+
}
|
|
7869
|
+
};
|
|
7870
|
+
const content = isRightAligned
|
|
7871
|
+
? [
|
|
7872
|
+
_isExpanded &&
|
|
7873
|
+
m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text),
|
|
7874
|
+
renderIcon(icon, { 'min-width': '24px', width: '24px' }),
|
|
7875
|
+
]
|
|
7876
|
+
: [
|
|
7877
|
+
renderIcon(icon, { 'min-width': '24px', width: '24px' }),
|
|
7878
|
+
_isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text),
|
|
7879
|
+
];
|
|
7880
|
+
const linkStyle = {
|
|
7881
|
+
display: 'flex',
|
|
7882
|
+
'align-items': 'center',
|
|
7883
|
+
padding: _isExpanded ? '12px 16px' : '12px 18px',
|
|
7884
|
+
'justify-content': _isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
|
|
7885
|
+
};
|
|
7886
|
+
return m('li', { class: className }, m('a', {
|
|
7887
|
+
href: href || '#!',
|
|
7888
|
+
onclick: handleClick,
|
|
7889
|
+
style: linkStyle,
|
|
7890
|
+
}, content));
|
|
7891
|
+
},
|
|
7892
|
+
};
|
|
7872
7893
|
};
|
|
7873
7894
|
/**
|
|
7874
7895
|
* Sidenav Component
|
|
@@ -7993,7 +8014,8 @@ const Sidenav = () => {
|
|
|
7993
8014
|
style: { width: '24px', height: '24px' },
|
|
7994
8015
|
})),
|
|
7995
8016
|
// Header item (if provided, appears before expand/collapse toggle)
|
|
7996
|
-
attrs.header &&
|
|
8017
|
+
attrs.header &&
|
|
8018
|
+
m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.header), { _isExpanded: isExpanded, _position: position })),
|
|
7997
8019
|
// Expand/collapse toggle button (if expandable, right below hamburger)
|
|
7998
8020
|
expandable &&
|
|
7999
8021
|
m('li.sidenav-expand-toggle', {
|
|
@@ -8008,8 +8030,12 @@ const Sidenav = () => {
|
|
|
8008
8030
|
onclick: () => toggleExpanded(attrs),
|
|
8009
8031
|
}, m(MaterialIcon, {
|
|
8010
8032
|
name: position === 'right'
|
|
8011
|
-
?
|
|
8012
|
-
|
|
8033
|
+
? isExpanded
|
|
8034
|
+
? 'chevron_right'
|
|
8035
|
+
: 'chevron_left'
|
|
8036
|
+
: isExpanded
|
|
8037
|
+
? 'chevron_left'
|
|
8038
|
+
: 'chevron_right',
|
|
8013
8039
|
style: { width: '24px', height: '24px' },
|
|
8014
8040
|
})),
|
|
8015
8041
|
// Children (menu items) - inject internal props
|
|
@@ -8023,7 +8049,8 @@ const Sidenav = () => {
|
|
|
8023
8049
|
})
|
|
8024
8050
|
: children,
|
|
8025
8051
|
// Footer item (if provided, appears at the bottom)
|
|
8026
|
-
attrs.footer &&
|
|
8052
|
+
attrs.footer &&
|
|
8053
|
+
m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
|
|
8027
8054
|
]),
|
|
8028
8055
|
];
|
|
8029
8056
|
},
|
|
@@ -8056,7 +8083,7 @@ const NavbarSubItem = () => {
|
|
|
8056
8083
|
const submenuContent = isRightAligned
|
|
8057
8084
|
? [
|
|
8058
8085
|
// Right-aligned: text on left, icons on right
|
|
8059
|
-
isExpanded && m('span', { style: {
|
|
8086
|
+
isExpanded && m('span', { style: { flex: '1', 'text-align': 'left' } }, text),
|
|
8060
8087
|
icon && isExpanded && renderIcon(icon, { 'font-size': '18px' }),
|
|
8061
8088
|
indicatorIcon,
|
|
8062
8089
|
]
|
|
@@ -8100,12 +8127,7 @@ const SidenavItem = () => {
|
|
|
8100
8127
|
return m('li.subheader', text || children);
|
|
8101
8128
|
}
|
|
8102
8129
|
const hasSubmenu = submenu && submenu.length > 0;
|
|
8103
|
-
const itemClasses = [
|
|
8104
|
-
active ? 'active' : '',
|
|
8105
|
-
disabled ? 'disabled' : '',
|
|
8106
|
-
hasSubmenu ? 'has-submenu' : '',
|
|
8107
|
-
className,
|
|
8108
|
-
]
|
|
8130
|
+
const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', hasSubmenu ? 'has-submenu' : '', className]
|
|
8109
8131
|
.filter(Boolean)
|
|
8110
8132
|
.join(' ') || undefined;
|
|
8111
8133
|
const handleMainClick = (e) => {
|
|
@@ -8114,6 +8136,7 @@ const SidenavItem = () => {
|
|
|
8114
8136
|
isSubmenuOpen = active ? !isSubmenuOpen : true;
|
|
8115
8137
|
}
|
|
8116
8138
|
if (onclick && !disabled) {
|
|
8139
|
+
e.preventDefault();
|
|
8117
8140
|
onclick(e);
|
|
8118
8141
|
}
|
|
8119
8142
|
};
|
|
@@ -8126,13 +8149,14 @@ const SidenavItem = () => {
|
|
|
8126
8149
|
const content = isRightAligned
|
|
8127
8150
|
? [
|
|
8128
8151
|
// Right-aligned: text on left, icon on right
|
|
8129
|
-
isExpanded &&
|
|
8130
|
-
|
|
8152
|
+
isExpanded &&
|
|
8153
|
+
m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
|
|
8154
|
+
renderIcon(icon, { 'min-width': '24px', width: '24px' }),
|
|
8131
8155
|
]
|
|
8132
8156
|
: [
|
|
8133
8157
|
// Left-aligned: icon on left, text on right
|
|
8134
|
-
renderIcon(icon, { 'min-width': '24px',
|
|
8135
|
-
isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px',
|
|
8158
|
+
renderIcon(icon, { 'min-width': '24px', width: '24px' }),
|
|
8159
|
+
isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text || children),
|
|
8136
8160
|
];
|
|
8137
8161
|
const linkStyle = {
|
|
8138
8162
|
display: 'flex',
|
package/dist/index.js
CHANGED
|
@@ -7814,9 +7814,19 @@ const FileUpload = () => {
|
|
|
7814
7814
|
|
|
7815
7815
|
// List of MaterialIcon SVG icons that are available
|
|
7816
7816
|
const materialIconSvgNames = [
|
|
7817
|
-
'caret',
|
|
7818
|
-
'
|
|
7819
|
-
'
|
|
7817
|
+
'caret',
|
|
7818
|
+
'close',
|
|
7819
|
+
'chevron',
|
|
7820
|
+
'chevron_left',
|
|
7821
|
+
'chevron_right',
|
|
7822
|
+
'menu',
|
|
7823
|
+
'expand',
|
|
7824
|
+
'collapse',
|
|
7825
|
+
'check',
|
|
7826
|
+
'radio_checked',
|
|
7827
|
+
'radio_unchecked',
|
|
7828
|
+
'light_mode',
|
|
7829
|
+
'dark_mode',
|
|
7820
7830
|
];
|
|
7821
7831
|
/**
|
|
7822
7832
|
* Helper function to render icons based on IconDefinition type
|
|
@@ -7846,31 +7856,42 @@ const renderIcon = (icon, style) => {
|
|
|
7846
7856
|
return null;
|
|
7847
7857
|
};
|
|
7848
7858
|
/**
|
|
7849
|
-
*
|
|
7859
|
+
* Sidenav Header/Footer Item Component
|
|
7850
7860
|
*/
|
|
7851
|
-
const
|
|
7852
|
-
|
|
7853
|
-
|
|
7854
|
-
|
|
7855
|
-
|
|
7856
|
-
|
|
7857
|
-
|
|
7858
|
-
|
|
7859
|
-
|
|
7860
|
-
|
|
7861
|
-
|
|
7862
|
-
|
|
7863
|
-
|
|
7864
|
-
|
|
7865
|
-
|
|
7866
|
-
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
|
|
7870
|
-
|
|
7871
|
-
|
|
7872
|
-
|
|
7873
|
-
|
|
7861
|
+
const SidenavHeaderFooterItem = () => {
|
|
7862
|
+
return {
|
|
7863
|
+
view: ({ attrs }) => {
|
|
7864
|
+
const { text, icon, onclick, href, className = '', _isExpanded = true, _position = 'left' } = attrs;
|
|
7865
|
+
const isRightAligned = _position === 'right';
|
|
7866
|
+
const handleClick = (e) => {
|
|
7867
|
+
if (onclick) {
|
|
7868
|
+
e.preventDefault();
|
|
7869
|
+
onclick(e);
|
|
7870
|
+
}
|
|
7871
|
+
};
|
|
7872
|
+
const content = isRightAligned
|
|
7873
|
+
? [
|
|
7874
|
+
_isExpanded &&
|
|
7875
|
+
m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text),
|
|
7876
|
+
renderIcon(icon, { 'min-width': '24px', width: '24px' }),
|
|
7877
|
+
]
|
|
7878
|
+
: [
|
|
7879
|
+
renderIcon(icon, { 'min-width': '24px', width: '24px' }),
|
|
7880
|
+
_isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text),
|
|
7881
|
+
];
|
|
7882
|
+
const linkStyle = {
|
|
7883
|
+
display: 'flex',
|
|
7884
|
+
'align-items': 'center',
|
|
7885
|
+
padding: _isExpanded ? '12px 16px' : '12px 18px',
|
|
7886
|
+
'justify-content': _isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
|
|
7887
|
+
};
|
|
7888
|
+
return m('li', { class: className }, m('a', {
|
|
7889
|
+
href: href || '#!',
|
|
7890
|
+
onclick: handleClick,
|
|
7891
|
+
style: linkStyle,
|
|
7892
|
+
}, content));
|
|
7893
|
+
},
|
|
7894
|
+
};
|
|
7874
7895
|
};
|
|
7875
7896
|
/**
|
|
7876
7897
|
* Sidenav Component
|
|
@@ -7995,7 +8016,8 @@ const Sidenav = () => {
|
|
|
7995
8016
|
style: { width: '24px', height: '24px' },
|
|
7996
8017
|
})),
|
|
7997
8018
|
// Header item (if provided, appears before expand/collapse toggle)
|
|
7998
|
-
attrs.header &&
|
|
8019
|
+
attrs.header &&
|
|
8020
|
+
m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.header), { _isExpanded: isExpanded, _position: position })),
|
|
7999
8021
|
// Expand/collapse toggle button (if expandable, right below hamburger)
|
|
8000
8022
|
expandable &&
|
|
8001
8023
|
m('li.sidenav-expand-toggle', {
|
|
@@ -8010,8 +8032,12 @@ const Sidenav = () => {
|
|
|
8010
8032
|
onclick: () => toggleExpanded(attrs),
|
|
8011
8033
|
}, m(MaterialIcon, {
|
|
8012
8034
|
name: position === 'right'
|
|
8013
|
-
?
|
|
8014
|
-
|
|
8035
|
+
? isExpanded
|
|
8036
|
+
? 'chevron_right'
|
|
8037
|
+
: 'chevron_left'
|
|
8038
|
+
: isExpanded
|
|
8039
|
+
? 'chevron_left'
|
|
8040
|
+
: 'chevron_right',
|
|
8015
8041
|
style: { width: '24px', height: '24px' },
|
|
8016
8042
|
})),
|
|
8017
8043
|
// Children (menu items) - inject internal props
|
|
@@ -8025,7 +8051,8 @@ const Sidenav = () => {
|
|
|
8025
8051
|
})
|
|
8026
8052
|
: children,
|
|
8027
8053
|
// Footer item (if provided, appears at the bottom)
|
|
8028
|
-
attrs.footer &&
|
|
8054
|
+
attrs.footer &&
|
|
8055
|
+
m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
|
|
8029
8056
|
]),
|
|
8030
8057
|
];
|
|
8031
8058
|
},
|
|
@@ -8058,7 +8085,7 @@ const NavbarSubItem = () => {
|
|
|
8058
8085
|
const submenuContent = isRightAligned
|
|
8059
8086
|
? [
|
|
8060
8087
|
// Right-aligned: text on left, icons on right
|
|
8061
|
-
isExpanded && m('span', { style: {
|
|
8088
|
+
isExpanded && m('span', { style: { flex: '1', 'text-align': 'left' } }, text),
|
|
8062
8089
|
icon && isExpanded && renderIcon(icon, { 'font-size': '18px' }),
|
|
8063
8090
|
indicatorIcon,
|
|
8064
8091
|
]
|
|
@@ -8102,12 +8129,7 @@ const SidenavItem = () => {
|
|
|
8102
8129
|
return m('li.subheader', text || children);
|
|
8103
8130
|
}
|
|
8104
8131
|
const hasSubmenu = submenu && submenu.length > 0;
|
|
8105
|
-
const itemClasses = [
|
|
8106
|
-
active ? 'active' : '',
|
|
8107
|
-
disabled ? 'disabled' : '',
|
|
8108
|
-
hasSubmenu ? 'has-submenu' : '',
|
|
8109
|
-
className,
|
|
8110
|
-
]
|
|
8132
|
+
const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', hasSubmenu ? 'has-submenu' : '', className]
|
|
8111
8133
|
.filter(Boolean)
|
|
8112
8134
|
.join(' ') || undefined;
|
|
8113
8135
|
const handleMainClick = (e) => {
|
|
@@ -8116,6 +8138,7 @@ const SidenavItem = () => {
|
|
|
8116
8138
|
isSubmenuOpen = active ? !isSubmenuOpen : true;
|
|
8117
8139
|
}
|
|
8118
8140
|
if (onclick && !disabled) {
|
|
8141
|
+
e.preventDefault();
|
|
8119
8142
|
onclick(e);
|
|
8120
8143
|
}
|
|
8121
8144
|
};
|
|
@@ -8128,13 +8151,14 @@ const SidenavItem = () => {
|
|
|
8128
8151
|
const content = isRightAligned
|
|
8129
8152
|
? [
|
|
8130
8153
|
// Right-aligned: text on left, icon on right
|
|
8131
|
-
isExpanded &&
|
|
8132
|
-
|
|
8154
|
+
isExpanded &&
|
|
8155
|
+
m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
|
|
8156
|
+
renderIcon(icon, { 'min-width': '24px', width: '24px' }),
|
|
8133
8157
|
]
|
|
8134
8158
|
: [
|
|
8135
8159
|
// Left-aligned: icon on left, text on right
|
|
8136
|
-
renderIcon(icon, { 'min-width': '24px',
|
|
8137
|
-
isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px',
|
|
8160
|
+
renderIcon(icon, { 'min-width': '24px', width: '24px' }),
|
|
8161
|
+
isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text || children),
|
|
8138
8162
|
];
|
|
8139
8163
|
const linkStyle = {
|
|
8140
8164
|
display: 'flex',
|