mithril-materialized 3.9.0 → 3.10.0

package/dist/index.umd.js

@@ -509,6 +509,106 @@
         };
     };
 
+    /**
+     * Badge component
+     *
+     * Displays a badge anchored to a child element. Commonly used for notifications,
+     * counts, or status indicators. Supports flexible positioning, colors, and variants.
+     *
+     * @example
+     * ```typescript
+     * // Basic notification badge
+     * m(Badge, { badgeContent: 5 },
+     *   m('button.btn', 'Messages')
+     * )
+     *
+     * // Dot badge on avatar
+     * m(Badge, {
+     *   variant: 'dot',
+     *   color: 'green',
+     *   overlap: 'circular'
+     * },
+     *   m('img.circle', { src: 'avatar.jpg' })
+     * )
+     * ```
+     */
+    const Badge = () => {
+        return {
+            view: ({ attrs, children }) => {
+                const { badgeContent, max, anchorOrigin = { vertical: 'top', horizontal: 'right' }, overlap = 'rectangular', variant = 'standard', color = 'red', colorIntensity, invisible = false, showZero = false, 'aria-label': ariaLabel, badgeClassName = '', className = '' } = attrs, params = __rest(attrs, ["badgeContent", "max", "anchorOrigin", "overlap", "variant", "color", "colorIntensity", "invisible", "showZero", 'aria-label', "badgeClassName", "className"]);
+                // === VALIDATION: Single child element ===
+                const childArray = Array.isArray(children) ? children : children ? [children] : [];
+                if (childArray.length === 0) {
+                    console.warn('Badge component requires a child element');
+                    return null;
+                }
+                if (childArray.length > 1) {
+                    console.warn('Badge component should only wrap a single child element. Using first child only.');
+                }
+                const child = childArray[0];
+                // === VISIBILITY LOGIC ===
+                // Hide badge if:
+                // 1. invisible prop is true, OR
+                // 2. For standard variant: badgeContent is undefined/null OR (badgeContent is 0 AND !showZero)
+                const shouldHideBadge = invisible ||
+                    (variant === 'standard' &&
+                        (badgeContent === undefined ||
+                            badgeContent === null ||
+                            (badgeContent === 0 && !showZero)));
+                // === BADGE CONTENT FORMATTING ===
+                // Apply max capping: if badgeContent > max, show "max+"
+                const getDisplayContent = () => {
+                    if (variant === 'dot')
+                        return '';
+                    if (typeof badgeContent === 'number' && max !== undefined && badgeContent > max) {
+                        return `${max}+`;
+                    }
+                    return String(badgeContent !== null && badgeContent !== void 0 ? badgeContent : '');
+                };
+                const displayContent = getDisplayContent();
+                // === CSS CLASS ASSEMBLY ===
+                // Wrapper classes
+                const wrapperClasses = ['badge-wrapper', className].filter(Boolean).join(' ').trim() || undefined;
+                // Badge element classes - using m-badge prefix to avoid Materialize conflicts
+                const positionClass = `m-badge--${anchorOrigin.vertical}-${anchorOrigin.horizontal}`;
+                const badgeClasses = [
+                    'm-badge',
+                    `m-badge--${variant}`,
+                    positionClass,
+                    `m-badge--${overlap}`,
+                    `m-badge--${color}`,
+                    colorIntensity ? `m-badge--${colorIntensity}` : '',
+                    shouldHideBadge ? 'm-badge--invisible' : '',
+                    badgeClassName,
+                ]
+                    .filter(Boolean)
+                    .join(' ')
+                    .trim();
+                // === ARIA ATTRIBUTES ===
+                const badgeAriaLabel = ariaLabel ||
+                    (variant === 'dot'
+                        ? 'notification indicator'
+                        : displayContent
+                            ? `${displayContent} notifications`
+                            : 'notification badge');
+                // === RENDER ===
+                return m('.badge-wrapper', Object.assign(Object.assign({}, params), { className: wrapperClasses }), [
+                    // Child element
+                    child,
+                    // Badge element - only render if not hidden
+                    !shouldHideBadge
+                        ? m('span', {
+                            className: badgeClasses,
+                            'aria-label': badgeAriaLabel,
+                            role: 'status',
+                            'aria-live': 'polite',
+                        }, variant === 'standard' ? displayContent : null)
+                        : null,
+                ]);
+            },
+        };
+    };
+
     /**
      * A simple material icon, defined by its icon name.
      *
@@ -11035,6 +11135,7 @@
     exports.AnalogClock = AnalogClock;
     exports.AnchorItem = AnchorItem;
     exports.Autocomplete = Autocomplete;
+    exports.Badge = Badge;
     exports.Breadcrumb = Breadcrumb;
     exports.BreadcrumbManager = BreadcrumbManager;
     exports.Button = Button;

package/package.json

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

package/sass/components/_badge-component.scss

@@ -0,0 +1,203 @@
+@use 'sass:color';
+@use "variables";
+@use "color-variables";
+
+/* Badge Component
+   ========================================================================== */
+
+// Badge component variables
+$badge-size-standard: 20px !default;
+$badge-size-dot: 8px !default;
+$badge-font-size: 12px !default;
+$badge-font-weight: 500 !default;
+$badge-default-color: color-variables.color("red", "base") !default;
+$badge-text-color: #fff !default;
+$badge-border-radius: 10px !default;
+$badge-dot-border-radius: 50% !default;
+
+// Wrapper - relative positioning container
+.badge-wrapper {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+// Badge element - using .m-badge to avoid conflicts with Materialize's span.badge
+.m-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-family: Roboto, sans-serif;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  border-radius: $badge-border-radius;
+  background-color: $badge-default-color;
+  color: $badge-text-color;
+  z-index: 1;
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  // Standard variant (shows content)
+  &.m-badge--standard {
+    min-width: $badge-size-standard;
+    height: $badge-size-standard;
+    padding: 0 6px;
+    font-size: $badge-font-size;
+  }
+
+  // Dot variant (minimal indicator)
+  &.m-badge--dot {
+    width: $badge-size-dot;
+    height: $badge-size-dot;
+    min-width: $badge-size-dot;
+    padding: 0;
+    border-radius: $badge-dot-border-radius;
+  }
+
+  // Invisible state
+  &.m-badge--invisible {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  // === POSITIONING: Top-Right (default) ===
+  &.m-badge--top-right {
+    top: 0;
+    right: 0;
+    transform: scale(1) translate(50%, -50%);
+    transform-origin: 100% 0%;
+
+    &.m-badge--rectangular {
+      transform: scale(1) translate(50%, -50%);
+    }
+
+    &.m-badge--circular {
+      transform: scale(1) translate(30%, -30%);
+    }
+
+    &.m-badge--invisible {
+      transform: scale(0) translate(50%, -50%);
+    }
+  }
+
+  // === POSITIONING: Top-Left ===
+  &.m-badge--top-left {
+    top: 0;
+    left: 0;
+    transform: scale(1) translate(-50%, -50%);
+    transform-origin: 0% 0%;
+
+    &.m-badge--rectangular {
+      transform: scale(1) translate(-50%, -50%);
+    }
+
+    &.m-badge--circular {
+      transform: scale(1) translate(-30%, -30%);
+    }
+
+    &.m-badge--invisible {
+      transform: scale(0) translate(-50%, -50%);
+    }
+  }
+
+  // === POSITIONING: Bottom-Right ===
+  &.m-badge--bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: scale(1) translate(50%, 50%);
+    transform-origin: 100% 100%;
+
+    &.m-badge--rectangular {
+      transform: scale(1) translate(50%, 50%);
+    }
+
+    &.m-badge--circular {
+      transform: scale(1) translate(30%, 30%);
+    }
+
+    &.m-badge--invisible {
+      transform: scale(0) translate(50%, 50%);
+    }
+  }
+
+  // === POSITIONING: Bottom-Left ===
+  &.m-badge--bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: scale(1) translate(-50%, 50%);
+    transform-origin: 0% 100%;
+
+    &.m-badge--rectangular {
+      transform: scale(1) translate(-50%, 50%);
+    }
+
+    &.m-badge--circular {
+      transform: scale(1) translate(-30%, 30%);
+    }
+
+    &.m-badge--invisible {
+      transform: scale(0) translate(-50%, 50%);
+    }
+  }
+}
+
+// === COLOR VARIANTS ===
+// Generate color classes for all MaterialColor options
+.m-badge--red { background-color: color-variables.color("red", "base"); }
+.m-badge--pink { background-color: color-variables.color("pink", "base"); }
+.m-badge--purple { background-color: color-variables.color("purple", "base"); }
+.m-badge--deep-purple { background-color: color-variables.color("deep-purple", "base"); }
+.m-badge--indigo { background-color: color-variables.color("indigo", "base"); }
+.m-badge--blue { background-color: color-variables.color("blue", "base"); }
+.m-badge--light-blue { background-color: color-variables.color("light-blue", "base"); }
+.m-badge--cyan { background-color: color-variables.color("cyan", "base"); }
+.m-badge--teal { background-color: color-variables.color("teal", "base"); }
+.m-badge--green { background-color: color-variables.color("green", "base"); }
+.m-badge--light-green { background-color: color-variables.color("light-green", "base"); }
+.m-badge--lime { background-color: color-variables.color("lime", "base"); }
+.m-badge--yellow {
+  background-color: color-variables.color("yellow", "base");
+  color: #000; // Dark text for light background
+}
+.m-badge--amber { background-color: color-variables.color("amber", "base"); }
+.m-badge--orange { background-color: color-variables.color("orange", "base"); }
+.m-badge--deep-orange { background-color: color-variables.color("deep-orange", "base"); }
+.m-badge--brown { background-color: color-variables.color("brown", "base"); }
+.m-badge--grey { background-color: color-variables.color("grey", "base"); }
+.m-badge--blue-grey { background-color: color-variables.color("blue-grey", "base"); }
+
+// === COLOR INTENSITY MODIFIERS ===
+// Use CSS filters for intensity adjustments (matching CircularProgress pattern)
+.m-badge--lighten-5 { filter: brightness(1.4); }
+.m-badge--lighten-4 { filter: brightness(1.3); }
+.m-badge--lighten-3 { filter: brightness(1.2); }
+.m-badge--lighten-2 { filter: brightness(1.1); }
+.m-badge--lighten-1 { filter: brightness(1.05); }
+.m-badge--darken-1 { filter: brightness(0.95); }
+.m-badge--darken-2 { filter: brightness(0.9); }
+.m-badge--darken-3 { filter: brightness(0.8); }
+.m-badge--darken-4 { filter: brightness(0.7); }
+
+// === ACCESSIBILITY ===
+// Ensure badge is not announced multiple times by screen readers
+.m-badge[role="status"] {
+  // Screen reader will announce changes due to aria-live="polite"
+}
+
+// === REDUCED MOTION ===
+@media (prefers-reduced-motion: reduce) {
+  .m-badge {
+    transition: none;
+  }
+}
+
+// === HIGH CONTRAST MODE ===
+@media (prefers-contrast: high) {
+  .m-badge {
+    border: 2px solid currentColor;
+  }
+}

package/sass/materialize.scss

@@ -56,3 +56,5 @@
 @use 'components/toggle-group';
 @use 'components/circular-progress';
 @use 'components/linear-progress';
+@use 'components/badge-component';
+