mithril-materialized 3.5.3 → 3.5.5

package/dist/index.js

@@ -7812,6 +7812,87 @@ const FileUpload = () => {
     };
 };
 
+// List of MaterialIcon SVG icons that are available
+const materialIconSvgNames = [
+    'caret',
+    'close',
+    'chevron',
+    'chevron_left',
+    'chevron_right',
+    'menu',
+    'expand',
+    'collapse',
+    'check',
+    'radio_checked',
+    'radio_unchecked',
+    'light_mode',
+    'dark_mode',
+];
+/**
+ * Helper function to render icons based on IconDefinition type
+ */
+const renderIcon = (icon, style) => {
+    if (!icon)
+        return null;
+    if (typeof icon === 'string') {
+        // Check if this is a MaterialIcon SVG name
+        if (materialIconSvgNames.includes(icon)) {
+            return m(MaterialIcon, { name: icon, style });
+        }
+        // Fall back to Material Icons font for other icon names
+        return m('i.material-icons', { style }, icon);
+    }
+    if (icon.type === 'svg') {
+        // Inline SVG
+        return m.trust(icon.content);
+    }
+    if (icon.type === 'image') {
+        // Image URL
+        return m('img', {
+            src: icon.content,
+            style: Object.assign(Object.assign({}, style), { width: '24px', height: '24px', objectFit: 'contain' }),
+        });
+    }
+    return null;
+};
+/**
+ * Sidenav Header/Footer Item Component
+ */
+const SidenavHeaderFooterItem = () => {
+    return {
+        view: ({ attrs }) => {
+            const { text, icon, onclick, href, className = '', _isExpanded = true, _position = 'left' } = attrs;
+            const isRightAligned = _position === 'right';
+            const handleClick = (e) => {
+                if (onclick) {
+                    e.preventDefault();
+                    onclick(e);
+                }
+            };
+            const content = isRightAligned
+                ? [
+                    _isExpanded &&
+                        m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text),
+                    renderIcon(icon, { 'min-width': '24px', width: '24px' }),
+                ]
+                : [
+                    renderIcon(icon, { 'min-width': '24px', width: '24px' }),
+                    _isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text),
+                ];
+            const linkStyle = {
+                display: 'flex',
+                'align-items': 'center',
+                padding: _isExpanded ? '12px 16px' : '12px 18px',
+                'justify-content': _isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
+            };
+            return m('li', { class: className }, m('a', {
+                href: href || '#!',
+                onclick: handleClick,
+                style: linkStyle,
+            }, content));
+        },
+    };
+};
 /**
  * Sidenav Component
  * A responsive navigation drawer that slides in from the side
@@ -7934,6 +8015,9 @@ const Sidenav = () => {
                             name: 'menu',
                             style: { width: '24px', height: '24px' },
                         })),
+                    // Header item (if provided, appears before expand/collapse toggle)
+                    attrs.header &&
+                        m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.header), { _isExpanded: isExpanded, _position: position })),
                     // Expand/collapse toggle button (if expandable, right below hamburger)
                     expandable &&
                         m('li.sidenav-expand-toggle', {
@@ -7948,8 +8032,12 @@ const Sidenav = () => {
                             onclick: () => toggleExpanded(attrs),
                         }, m(MaterialIcon, {
                             name: position === 'right'
-                                ? (isExpanded ? 'chevron_right' : 'chevron_left')
-                                : (isExpanded ? 'chevron_left' : 'chevron_right'),
+                                ? isExpanded
+                                    ? 'chevron_right'
+                                    : 'chevron_left'
+                                : isExpanded
+                                    ? 'chevron_left'
+                                    : 'chevron_right',
                             style: { width: '24px', height: '24px' },
                         })),
                     // Children (menu items) - inject internal props
@@ -7962,6 +8050,9 @@ const Sidenav = () => {
                             return child;
                         })
                         : children,
+                    // Footer item (if provided, appears at the bottom)
+                    attrs.footer &&
+                        m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
                 ]),
             ];
         },
@@ -7980,43 +8071,42 @@ const NavbarSubItem = () => {
                 }
             };
             const isRightAligned = position === 'right';
+            // Render indicator icon for checkbox/radio modes
+            const indicatorIcon = mode !== 'none'
+                ? m(MaterialIcon, {
+                    name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
+                    style: {
+                        width: '18px',
+                        height: '18px',
+                        opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
+                    },
+                })
+                : null;
             const submenuContent = isRightAligned
                 ? [
                     // Right-aligned: text on left, icons on right
-                    isExpanded && m('span', { style: { 'flex': '1', 'text-align': 'left' } }, text),
-                    icon && isExpanded && m('i.material-icons', { style: { 'font-size': '18px' } }, icon),
-                    m(MaterialIcon, {
-                        name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
-                        style: {
-                            width: '18px',
-                            height: '18px',
-                            opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
-                        },
-                    }),
+                    isExpanded && m('span', { style: { flex: '1', 'text-align': 'left' } }, text),
+                    icon && isExpanded && renderIcon(icon, { 'font-size': '18px' }),
+                    indicatorIcon,
                 ]
                 : [
                     // Left-aligned: indicator on left, text and icon on right
-                    m(MaterialIcon, {
-                        name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
-                        style: {
-                            width: '18px',
-                            height: '18px',
-                            opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
-                        },
-                    }),
-                    icon && isExpanded && m('i.material-icons', { style: { 'font-size': '18px', 'margin-left': '8px' } }, icon),
-                    isExpanded && m('span', { style: { 'margin-left': icon ? '8px' : '8px' } }, text),
+                    indicatorIcon,
+                    icon && isExpanded && renderIcon(icon, { 'font-size': '18px', 'margin-left': indicatorIcon ? '8px' : '0' }),
+                    isExpanded && m('span', { style: { 'margin-left': icon || indicatorIcon ? '8px' : '0' } }, text),
                 ];
             return m('li.sidenav-subitem', {
                 class: selected ? 'selected' : '',
                 style: {
-                    padding: isExpanded ? '8px 16px 8px 48px' : '8px 16px',
+                    padding: isExpanded ? '0 16px 0 48px' : '0 16px',
                     cursor: 'pointer',
                     display: 'flex',
                     'align-items': 'center',
                     gap: '8px',
                     'font-size': '0.9em',
                     'justify-content': isRightAligned ? 'space-between' : 'flex-start',
+                    height: '48px',
+                    'min-height': '48px',
                 },
                 onclick: handleClick,
             }, submenuContent);
@@ -8039,20 +8129,16 @@ const SidenavItem = () => {
                 return m('li.subheader', text || children);
             }
             const hasSubmenu = submenu && submenu.length > 0;
-            const itemClasses = [
-                active ? 'active' : '',
-                disabled ? 'disabled' : '',
-                hasSubmenu ? 'has-submenu' : '',
-                className,
-            ]
+            const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', hasSubmenu ? 'has-submenu' : '', className]
                 .filter(Boolean)
                 .join(' ') || undefined;
             const handleMainClick = (e) => {
-                e.preventDefault();
                 if (hasSubmenu) {
+                    e.preventDefault();
                     isSubmenuOpen = active ? !isSubmenuOpen : true;
                 }
                 if (onclick && !disabled) {
+                    e.preventDefault();
                     onclick(e);
                 }
             };
@@ -8065,13 +8151,14 @@ const SidenavItem = () => {
             const content = isRightAligned
                 ? [
                     // Right-aligned: text on left, icon on right
-                    isExpanded && m('span.sidenav-item-text', { style: { 'flex': '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
-                    m('i.material-icons', { style: { 'min-width': '24px', 'width': '24px' } }, icon || ''),
+                    isExpanded &&
+                        m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
+                    renderIcon(icon, { 'min-width': '24px', width: '24px' }),
                 ]
                 : [
                     // Left-aligned: icon on left, text on right
-                    m('i.material-icons', { style: { 'min-width': '24px', 'width': '24px' } }, icon || ''),
-                    isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text || children),
+                    renderIcon(icon, { 'min-width': '24px', width: '24px' }),
+                    isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text || children),
                 ];
             const linkStyle = {
                 display: 'flex',