mithril-materialized 3.7.0 → 3.8.0

package/dist/index.umd.js

@@ -10715,6 +10715,126 @@
         };
     };
 
+    /**
+     * 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
@@ -10810,6 +10930,7 @@
     exports.Timeline = Timeline;
     exports.Toast = Toast;
     exports.ToastComponent = ToastComponent;
+    exports.ToggleGroup = ToggleGroup;
     exports.Tooltip = Tooltip;
     exports.TooltipComponent = TooltipComponent;
     exports.TreeView = TreeView;

package/dist/toggle-button.d.ts

@@ -0,0 +1,46 @@
+import { FactoryComponent, Attributes, Vnode } from 'mithril';
+/**
+ * Attributes for the ToggleButton component.
+ *
+ * A toggle button is a button that can be in a checked or unchecked state.
+ * It is typically used within a ToggleGroup to create button groups where
+ * one or more buttons can be selected.
+ */
+export interface ToggleButtonAttrs extends Attributes {
+    /** The value of the button. This is returned when the button is selected. */
+    value: string | number;
+    /** The label text to display next to the icon. */
+    label?: string;
+    /** The name of the Material Design icon to display. */
+    iconName?: string;
+    /** A custom SVG icon vnode to display instead of a Material icon. */
+    icon?: Vnode<any, any>;
+    /** Additional CSS class for the icon element. */
+    iconClass?: string;
+    /** Whether the button is in a checked/selected state. */
+    checked?: boolean;
+    /** Whether the button is disabled and cannot be interacted with. */
+    disabled?: boolean;
+    /** Optional tooltip text to display on hover. */
+    tooltip?: string;
+    /** Callback function invoked when the button is clicked. */
+    onchange?: () => void;
+}
+/**
+ * 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')
+ * })
+ * ```
+ */
+export declare const ToggleButton: FactoryComponent<ToggleButtonAttrs>;

package/dist/toggle-group.d.ts

@@ -0,0 +1,84 @@
+import { FactoryComponent, Attributes } from 'mithril';
+import { ToggleButtonAttrs } from './toggle-button';
+/**
+ * Attributes for the ToggleGroup component.
+ *
+ * A toggle group is a container for multiple toggle buttons that manages their
+ * selection state. It can operate in single-select or multi-select mode.
+ */
+export interface ToggleGroupAttrs extends Attributes {
+    /**
+     * The current value(s) of the toggle group (controlled mode).
+     * - Single-select: a single value
+     * - Multi-select: an array of values
+     */
+    value?: string | number | Array<string | number>;
+    /**
+     * The default value(s) for uncontrolled mode.
+     * Use this when you want the component to manage its own state.
+     */
+    defaultValue?: string | number | Array<string | number>;
+    /** Whether all buttons in the group are disabled. */
+    disabled?: boolean;
+    /**
+     * Callback invoked when the selection changes.
+     * @param value - The new value (single value or array depending on `multiple`)
+     */
+    onchange?: (value: string | number | Array<string | number>) => void;
+    /**
+     * Array of button configurations to display in the group.
+     * Each item can have its own icon, label, tooltip, and disabled state.
+     */
+    items: Array<ToggleButtonAttrs>;
+    /**
+     * Whether to allow multiple buttons to be selected simultaneously.
+     * - false (default): only one button can be selected at a time
+     * - true: multiple buttons can be selected
+     */
+    multiple?: boolean;
+}
+/**
+ * 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: [...]
+ * });
+ * ```
+ */
+export declare const ToggleGroup: FactoryComponent<ToggleGroupAttrs>;

package/package.json

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

package/sass/components/_toggle-group.scss

@@ -0,0 +1,36 @@
+.toggle-group {
+  display: inline-flex;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid var(--mm-border-color, #e0e0e0);
+
+  .toggle-button {
+    margin: 0;
+    border-radius: 0;
+    border-right: 1px solid var(--mm-border-color, #e0e0e0);
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &.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);
+
+    .toggle-button {
+      border-right-color: var(--mm-border-color, #555);
+
+      &.checked {
+        background-color: var(--mm-primary-color, #80cbc4);
+        color: var(--mm-button-text, #000);
+      }
+    }
+  }
+}

package/sass/materialize.scss

@@ -53,3 +53,4 @@
 @use "components/masonry";
 @use "components/image-list";
 @use 'components/rating';
+@use 'components/toggle-group';