mithril-materialized 3.9.0 → 3.10.0

package/dist/index.js

@@ -507,6 +507,106 @@ const Autocomplete = () => {
     };
 };
 
+/**
+ * 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.
  *
@@ -11033,6 +11133,7 @@ const isValidationError = (result) => !isValidationSuccess(result);
 exports.AnalogClock = AnalogClock;
 exports.AnchorItem = AnchorItem;
 exports.Autocomplete = Autocomplete;
+exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbManager = BreadcrumbManager;
 exports.Button = Button;