mithril-materialized 3.7.0 → 3.8.0

package/dist/index.css

@@ -12014,4 +12014,33 @@ body.dark {
   .rating--focused:not(.rating--read-only):not(.rating--disabled) .rating__items {
     transform: none;
   }
+}
+.toggle-group {
+  display: inline-flex;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid var(--mm-border-color, #e0e0e0);
+}
+.toggle-group .toggle-button {
+  margin: 0;
+  border-radius: 0;
+  border-right: 1px solid var(--mm-border-color, #e0e0e0);
+}
+.toggle-group .toggle-button:last-child {
+  border-right: none;
+}
+.toggle-group .toggle-button.checked {
+  background-color: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #fff);
+}
+
+[data-theme=dark] .toggle-group {
+  border-color: var(--mm-border-color, #555);
+}
+[data-theme=dark] .toggle-group .toggle-button {
+  border-right-color: var(--mm-border-color, #555);
+}
+[data-theme=dark] .toggle-group .toggle-button.checked {
+  background-color: var(--mm-primary-color, #80cbc4);
+  color: var(--mm-button-text, #000);
 }

package/dist/index.d.ts

@@ -48,4 +48,5 @@ export * from './timeline';
 export * from './masonry';
 export * from './image-list';
 export * from './rating';
+export * from './toggle-group';
 export * from './types';

package/dist/index.esm.js

@@ -10711,6 +10711,126 @@ const Rating = () => {
     };
 };
 
+/**
+ * ToggleButton component.
+ *
+ * A button that can be toggled on/off. Typically used within a ToggleGroup
+ * to create grouped button controls where one or more buttons can be selected.
+ *
+ * @example
+ * ```typescript
+ * m(ToggleButton, {
+ *   value: 'bold',
+ *   iconName: 'format_bold',
+ *   checked: true,
+ *   tooltip: 'Bold',
+ *   onchange: () => console.log('Toggled')
+ * })
+ * ```
+ */
+const ToggleButton = () => {
+    return {
+        view: ({ attrs }) => {
+            const { checked, iconName, icon, label, onchange, className, tooltip } = attrs, rest = __rest(attrs, ["checked", "iconName", "icon", "label", "onchange", "className", "tooltip"]);
+            const classes = [className, checked ? 'checked' : ''].filter(Boolean).join(' ');
+            return m('button.btn-flat.waves-effect.toggle-button', Object.assign(Object.assign({}, rest), { className: classes, title: tooltip, onclick: () => {
+                    if (onchange) {
+                        onchange();
+                    }
+                }, onmousedown: WavesEffect.onMouseDown, onmouseup: WavesEffect.onMouseUp, onmouseleave: WavesEffect.onMouseLeave, ontouchstart: WavesEffect.onTouchStart, ontouchend: WavesEffect.onTouchEnd }), [icon, iconName && m(Icon, { iconName, className: attrs.iconClass }), label]);
+        },
+    };
+};
+
+/**
+ * ToggleGroup component.
+ *
+ * A group of toggle buttons that can operate in single-select or multi-select mode.
+ * The component supports both controlled and uncontrolled modes.
+ *
+ * **Controlled mode**: Manage the state externally using the `value` prop.
+ * **Uncontrolled mode**: Let the component manage its own state using `defaultValue`.
+ *
+ * @example
+ * ```typescript
+ * // Single-select, controlled mode
+ * let selected = 'left';
+ * m(ToggleGroup, {
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'left', iconName: 'format_align_left', tooltip: 'Align Left' },
+ *     { value: 'center', iconName: 'format_align_center', tooltip: 'Align Center' },
+ *     { value: 'right', iconName: 'format_align_right', tooltip: 'Align Right' }
+ *   ]
+ * });
+ *
+ * // Multi-select, controlled mode
+ * let selected = ['bold', 'italic'];
+ * m(ToggleGroup, {
+ *   multiple: true,
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'bold', iconName: 'format_bold', tooltip: 'Bold' },
+ *     { value: 'italic', iconName: 'format_italic', tooltip: 'Italic' },
+ *     { value: 'underline', iconName: 'format_underlined', tooltip: 'Underline' }
+ *   ]
+ * });
+ *
+ * // Uncontrolled mode
+ * m(ToggleGroup, {
+ *   defaultValue: 'left',
+ *   onchange: (v) => console.log('Changed to:', v),
+ *   items: [...]
+ * });
+ * ```
+ */
+const ToggleGroup = () => {
+    let internalValue;
+    const handleSelect = (attrs, item, currentValue) => {
+        if (attrs.disabled || item.disabled) {
+            return;
+        }
+        const { value, multiple, onchange } = attrs;
+        const isControlled = value !== undefined;
+        if (multiple) {
+            const currentValues = (Array.isArray(currentValue) ? currentValue : currentValue !== undefined ? [currentValue] : []);
+            const newValues = currentValues.includes(item.value)
+                ? currentValues.filter((v) => v !== item.value)
+                : [...currentValues, item.value];
+            if (!isControlled) {
+                internalValue = newValues;
+            }
+            if (onchange) {
+                onchange(newValues);
+            }
+        }
+        else {
+            const newValue = item.value;
+            if (!isControlled) {
+                internalValue = newValue;
+            }
+            if (onchange) {
+                onchange(newValue);
+            }
+        }
+    };
+    return {
+        oninit: ({ attrs }) => {
+            internalValue = attrs.defaultValue;
+        },
+        view: ({ attrs }) => {
+            const { value, items, multiple } = attrs;
+            const isControlled = value !== undefined;
+            const currentValue = isControlled ? value : internalValue;
+            return m('.toggle-group', items.map((item) => m(ToggleButton, Object.assign(Object.assign({}, item), { checked: multiple && Array.isArray(currentValue)
+                    ? currentValue.includes(item.value)
+                    : currentValue === item.value, onchange: () => handleSelect(attrs, item, currentValue) }))));
+        },
+    };
+};
+
 /**
  * @fileoverview Core TypeScript utility types for mithril-materialized library
  * These types improve type safety and developer experience across all components
@@ -10732,4 +10852,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnalogClock, AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, TimeRangePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, padLeft, parseTime, range, releasePortalContainer, renderToPortal, scrollToValue, snapToNearestItem, sortOptions, timeToMinutes, toast, uniqueId, uuid4 };
+export { AnalogClock, AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, TimeRangePicker, Timeline, Toast, ToastComponent, ToggleGroup, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, padLeft, parseTime, range, releasePortalContainer, renderToPortal, scrollToValue, snapToNearestItem, sortOptions, timeToMinutes, toast, uniqueId, uuid4 };

package/dist/index.js

@@ -10713,6 +10713,126 @@ const Rating = () => {
     };
 };
 
+/**
+ * ToggleButton component.
+ *
+ * A button that can be toggled on/off. Typically used within a ToggleGroup
+ * to create grouped button controls where one or more buttons can be selected.
+ *
+ * @example
+ * ```typescript
+ * m(ToggleButton, {
+ *   value: 'bold',
+ *   iconName: 'format_bold',
+ *   checked: true,
+ *   tooltip: 'Bold',
+ *   onchange: () => console.log('Toggled')
+ * })
+ * ```
+ */
+const ToggleButton = () => {
+    return {
+        view: ({ attrs }) => {
+            const { checked, iconName, icon, label, onchange, className, tooltip } = attrs, rest = __rest(attrs, ["checked", "iconName", "icon", "label", "onchange", "className", "tooltip"]);
+            const classes = [className, checked ? 'checked' : ''].filter(Boolean).join(' ');
+            return m('button.btn-flat.waves-effect.toggle-button', Object.assign(Object.assign({}, rest), { className: classes, title: tooltip, onclick: () => {
+                    if (onchange) {
+                        onchange();
+                    }
+                }, onmousedown: WavesEffect.onMouseDown, onmouseup: WavesEffect.onMouseUp, onmouseleave: WavesEffect.onMouseLeave, ontouchstart: WavesEffect.onTouchStart, ontouchend: WavesEffect.onTouchEnd }), [icon, iconName && m(Icon, { iconName, className: attrs.iconClass }), label]);
+        },
+    };
+};
+
+/**
+ * ToggleGroup component.
+ *
+ * A group of toggle buttons that can operate in single-select or multi-select mode.
+ * The component supports both controlled and uncontrolled modes.
+ *
+ * **Controlled mode**: Manage the state externally using the `value` prop.
+ * **Uncontrolled mode**: Let the component manage its own state using `defaultValue`.
+ *
+ * @example
+ * ```typescript
+ * // Single-select, controlled mode
+ * let selected = 'left';
+ * m(ToggleGroup, {
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'left', iconName: 'format_align_left', tooltip: 'Align Left' },
+ *     { value: 'center', iconName: 'format_align_center', tooltip: 'Align Center' },
+ *     { value: 'right', iconName: 'format_align_right', tooltip: 'Align Right' }
+ *   ]
+ * });
+ *
+ * // Multi-select, controlled mode
+ * let selected = ['bold', 'italic'];
+ * m(ToggleGroup, {
+ *   multiple: true,
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'bold', iconName: 'format_bold', tooltip: 'Bold' },
+ *     { value: 'italic', iconName: 'format_italic', tooltip: 'Italic' },
+ *     { value: 'underline', iconName: 'format_underlined', tooltip: 'Underline' }
+ *   ]
+ * });
+ *
+ * // Uncontrolled mode
+ * m(ToggleGroup, {
+ *   defaultValue: 'left',
+ *   onchange: (v) => console.log('Changed to:', v),
+ *   items: [...]
+ * });
+ * ```
+ */
+const ToggleGroup = () => {
+    let internalValue;
+    const handleSelect = (attrs, item, currentValue) => {
+        if (attrs.disabled || item.disabled) {
+            return;
+        }
+        const { value, multiple, onchange } = attrs;
+        const isControlled = value !== undefined;
+        if (multiple) {
+            const currentValues = (Array.isArray(currentValue) ? currentValue : currentValue !== undefined ? [currentValue] : []);
+            const newValues = currentValues.includes(item.value)
+                ? currentValues.filter((v) => v !== item.value)
+                : [...currentValues, item.value];
+            if (!isControlled) {
+                internalValue = newValues;
+            }
+            if (onchange) {
+                onchange(newValues);
+            }
+        }
+        else {
+            const newValue = item.value;
+            if (!isControlled) {
+                internalValue = newValue;
+            }
+            if (onchange) {
+                onchange(newValue);
+            }
+        }
+    };
+    return {
+        oninit: ({ attrs }) => {
+            internalValue = attrs.defaultValue;
+        },
+        view: ({ attrs }) => {
+            const { value, items, multiple } = attrs;
+            const isControlled = value !== undefined;
+            const currentValue = isControlled ? value : internalValue;
+            return m('.toggle-group', items.map((item) => m(ToggleButton, Object.assign(Object.assign({}, item), { checked: multiple && Array.isArray(currentValue)
+                    ? currentValue.includes(item.value)
+                    : currentValue === item.value, onchange: () => handleSelect(attrs, item, currentValue) }))));
+        },
+    };
+};
+
 /**
  * @fileoverview Core TypeScript utility types for mithril-materialized library
  * These types improve type safety and developer experience across all components
@@ -10808,6 +10928,7 @@ exports.TimeRangePicker = TimeRangePicker;
 exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.ToastComponent = ToastComponent;
+exports.ToggleGroup = ToggleGroup;
 exports.Tooltip = Tooltip;
 exports.TooltipComponent = TooltipComponent;
 exports.TreeView = TreeView;