mithril-materialized 3.3.8 → 3.4.0

package/dist/index.umd.js

@@ -436,6 +436,103 @@
         },
     });
 
+    /*!
+     * Waves Effect for Mithril Materialized
+     * Based on Waves v0.6.4 by Alfiana E. Sibuea
+     * Adapted for TypeScript and Mithril integration
+     */
+    class WavesEffect {
+        static offset(elem) {
+            const rect = elem.getBoundingClientRect();
+            return {
+                top: rect.top + window.pageYOffset,
+                left: rect.left + window.pageXOffset
+            };
+        }
+        static createRipple(e, element) {
+            // Disable right click
+            if (e.button === 2) {
+                return;
+            }
+            // Create ripple element
+            const ripple = document.createElement('div');
+            ripple.className = 'waves-ripple';
+            // Get click position relative to element
+            const pos = this.offset(element);
+            const relativeY = e.pageY - pos.top;
+            const relativeX = e.pageX - pos.left;
+            // Calculate scale based on element size
+            const scale = (element.clientWidth / 100) * 10;
+            // Set initial ripple position and style
+            ripple.style.cssText = `
+      top: ${relativeY}px;
+      left: ${relativeX}px;
+      transform: scale(0);
+      opacity: 1;
+    `;
+            // Add ripple to element
+            element.appendChild(ripple);
+            // Force reflow and animate
+            ripple.offsetHeight;
+            ripple.style.transform = `scale(${scale})`;
+            ripple.style.opacity = '1';
+            // Store reference for cleanup
+            ripple.setAttribute('data-created', Date.now().toString());
+        }
+        static removeRipples(element) {
+            const ripples = element.querySelectorAll('.waves-ripple');
+            ripples.forEach((ripple) => {
+                const created = parseInt(ripple.getAttribute('data-created') || '0');
+                const age = Date.now() - created;
+                const fadeOut = () => {
+                    ripple.style.opacity = '0';
+                    setTimeout(() => {
+                        if (ripple.parentNode) {
+                            ripple.parentNode.removeChild(ripple);
+                        }
+                    }, this.duration);
+                };
+                if (age >= 350) {
+                    fadeOut();
+                }
+                else {
+                    setTimeout(fadeOut, 350 - age);
+                }
+            });
+        }
+    }
+    WavesEffect.duration = 750;
+    WavesEffect.onMouseDown = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.createRipple(e, element);
+        }
+    };
+    WavesEffect.onMouseUp = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.removeRipples(element);
+        }
+    };
+    WavesEffect.onMouseLeave = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.removeRipples(element);
+        }
+    };
+    WavesEffect.onTouchStart = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.createRipple(e, element);
+        }
+    };
+    WavesEffect.onTouchEnd = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.removeRipples(element);
+        }
+    };
+
     /**
      * A factory to create new buttons.
      *
@@ -449,13 +546,18 @@
                     iconName, iconClass, label, className, variant } = attrs, params = __rest(attrs, ["tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "variant"]);
                     // Use variant or fallback to factory type
                     const buttonType = variant || type || 'button';
-                    const cn = [tooltip ? 'tooltipped' : '', defaultClassNames, className]
-                        .filter(Boolean)
-                        .join(' ')
-                        .trim();
+                    const cn = [tooltip ? 'tooltipped' : '', defaultClassNames, className].filter(Boolean).join(' ').trim();
                     // Use tooltipPosition if available, fallback to legacy tooltipPostion
                     const position = tooltipPosition || tooltipPostion || 'top';
-                    return m(element, Object.assign(Object.assign({}, params), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
+                    // Add waves effect event handlers if waves-effect class is present
+                    const wavesHandlers = cn.includes('waves-effect') ? {
+                        onmousedown: WavesEffect.onMouseDown,
+                        onmouseup: WavesEffect.onMouseUp,
+                        onmouseleave: WavesEffect.onMouseLeave,
+                        ontouchstart: WavesEffect.onTouchStart,
+                        ontouchend: WavesEffect.onTouchEnd
+                    } : {};
+                    return m(element, Object.assign(Object.assign(Object.assign({}, params), wavesHandlers), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
                 },
             };
         };
@@ -464,6 +566,7 @@
     const LargeButton = ButtonFactory('a', 'waves-effect waves-light btn-large', 'button');
     const SmallButton = ButtonFactory('a', 'waves-effect waves-light btn-small', 'button');
     const FlatButton = ButtonFactory('a', 'waves-effect waves-teal btn-flat', 'button');
+    const IconButton = ButtonFactory('button', 'btn-flat btn-icon waves-effect waves-teal', 'button');
     const RoundIconButton = ButtonFactory('button', 'btn-floating btn-large waves-effect waves-light', 'button');
     const SubmitButton = ButtonFactory('button', 'btn waves-effect waves-light', 'submit');
 
@@ -900,7 +1003,7 @@
                 };
                 const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
                 const transform = rotation ? `rotate(${rotation}deg)` : undefined;
-                return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ transform }, style), height: '1lh', width: '24', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), iconPaths[name].map((d) => m('path', {
+                return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ transform }, style), height: '24px', width: '24px', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), iconPaths[name].map((d) => m('path', {
                     d,
                     fill: d.includes('M0 0h24v24H0z') ? 'none' : 'currentColor',
                 })));
@@ -4348,12 +4451,17 @@
                         }
                         : undefined,
                 }, [
-                    m('a.btn-floating.btn-large', {
+                    m('a.btn-floating.btn-large.waves-effect.waves-light', {
                         className,
+                        onmousedown: WavesEffect.onMouseDown,
+                        onmouseup: WavesEffect.onMouseUp,
+                        onmouseleave: WavesEffect.onMouseLeave,
+                        ontouchstart: WavesEffect.onTouchStart,
+                        ontouchend: WavesEffect.onTouchEnd,
                     }, m('i.material-icons', { className: iconClass }, iconName)),
                     buttons &&
                         buttons.length > 0 &&
-                        m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.${button.className || 'red'}`, {
+                        m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.waves-effect.waves-light.${button.className || 'red'}`, {
                             style: {
                                 opacity: state.isOpen ? '1' : '0',
                                 transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
@@ -4364,6 +4472,11 @@
                                 if (button.onclick)
                                     button.onclick(e);
                             },
+                            onmousedown: WavesEffect.onMouseDown,
+                            onmouseup: WavesEffect.onMouseUp,
+                            onmouseleave: WavesEffect.onMouseLeave,
+                            ontouchstart: WavesEffect.onTouchStart,
+                            ontouchend: WavesEffect.onTouchEnd,
                         }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
                 ]));
             },
@@ -9017,6 +9130,7 @@
     exports.FloatingActionButton = FloatingActionButton;
     exports.HelperText = HelperText;
     exports.Icon = Icon;
+    exports.IconButton = IconButton;
     exports.ImageList = ImageList;
     exports.InputCheckbox = InputCheckbox;
     exports.Label = Label;

package/dist/waves.d.ts

@@ -0,0 +1,16 @@
+/*!
+ * Waves Effect for Mithril Materialized
+ * Based on Waves v0.6.4 by Alfiana E. Sibuea
+ * Adapted for TypeScript and Mithril integration
+ */
+export declare class WavesEffect {
+    private static duration;
+    private static offset;
+    private static createRipple;
+    private static removeRipples;
+    static onMouseDown: (e: MouseEvent) => void;
+    static onMouseUp: (e: MouseEvent) => void;
+    static onMouseLeave: (e: MouseEvent) => void;
+    static onTouchStart: (e: TouchEvent) => void;
+    static onTouchEnd: (e: TouchEvent) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.3.8",
+  "version": "3.4.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/sass/components/_buttons.scss

@@ -325,3 +325,24 @@ button.btn-floating {
 .btn-block {
   display: block;
 }
+
+// Icon button - compact flat button for icons only
+.btn-flat.btn-icon {
+  min-width: auto;
+  padding: 0 8px;
+  width: auto;
+  line-height: variables.$button-height;
+  background-color: transparent !important;
+
+  i {
+    margin: 0;
+  }
+
+  // Ensure background stays transparent in all states
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    background-color: transparent !important;
+  }
+}

package/sass/components/_theme-switcher.scss

@@ -53,6 +53,12 @@
       .material-icons {
         font-size: 1rem;
       }
+
+      svg {
+        width: 1rem !important;
+        height: 1rem !important;
+        flex-shrink: 0;
+      }
       
       span {
         font-size: 0.75rem;
@@ -84,6 +90,10 @@
   .material-icons {
     font-size: 1.25rem;
   }
+
+  svg {
+    flex-shrink: 0;
+  }
 }
 
 // Navbar theme toggle specific styles