mithril-materialized 1.4.2 → 2.0.0-beta.10

package/dist/input-options.d.ts

@@ -1,5 +1,5 @@
 import { Attributes } from 'mithril';
-export interface IInputOptions<T = string> extends Attributes {
+export interface InputAttrs<T = string> extends Attributes {
     /** Optional label. */
     label?: string;
     /** Optional ID. */
@@ -38,6 +38,8 @@ export interface IInputOptions<T = string> extends Attributes {
     /** Invoked when the element looses focus */
     onblur?: (ev: FocusEvent) => void;
     /** Invoked when the value changes. */
+    oninput?: (value: T) => void;
+    /** Invoked when the input looses focus. */
     onchange?: (value: T) => void;
     /** Add a a placeholder to the input field. */
     placeholder?: string;

package/dist/input.d.ts

@@ -1,24 +1,29 @@
 import m, { FactoryComponent, Attributes } from 'mithril';
-import { IInputOptions } from './input-options';
-import './styles/input.css';
+import { InputAttrs } from './input-options';
+/** Character counter component that tracks text length against maxLength */
+export declare const CharacterCounter: FactoryComponent<{
+    currentLength: number;
+    maxLength: number;
+    show: boolean;
+}>;
 /** Create a TextArea */
-export declare const TextArea: FactoryComponent<IInputOptions<string>>;
+export declare const TextArea: FactoryComponent<InputAttrs<string>>;
 export type InputType = 'url' | 'color' | 'text' | 'number' | 'email' | 'range' | 'password';
 /** Component for entering some text */
-export declare const TextInput: m.FactoryComponent<IInputOptions<string>>;
+export declare const TextInput: m.FactoryComponent<InputAttrs<string>>;
 /** Component for entering a password */
-export declare const PasswordInput: m.FactoryComponent<IInputOptions<string>>;
+export declare const PasswordInput: m.FactoryComponent<InputAttrs<string>>;
 /** Component for entering a number */
-export declare const NumberInput: m.FactoryComponent<IInputOptions<number>>;
+export declare const NumberInput: m.FactoryComponent<InputAttrs<number>>;
 /** Component for entering a URL */
-export declare const UrlInput: m.FactoryComponent<IInputOptions<string>>;
+export declare const UrlInput: m.FactoryComponent<InputAttrs<string>>;
 /** Component for entering a color */
-export declare const ColorInput: m.FactoryComponent<IInputOptions<string>>;
+export declare const ColorInput: m.FactoryComponent<InputAttrs<string>>;
 /** Component for entering a range */
-export declare const RangeInput: m.FactoryComponent<IInputOptions<number>>;
+export declare const RangeInput: m.FactoryComponent<InputAttrs<number>>;
 /** Component for entering an email */
-export declare const EmailInput: m.FactoryComponent<IInputOptions<string>>;
-export interface IFileInputOptions extends Attributes {
+export declare const EmailInput: m.FactoryComponent<InputAttrs<string>>;
+export interface FileInputAttrs extends Attributes {
     /** Displayed on the button, @default File */
     label?: string;
     /** Current value of the file input, write only */
@@ -39,4 +44,4 @@ export interface IFileInputOptions extends Attributes {
     accept?: string | string[];
 }
 /** Component for uploading a file */
-export declare const FileInput: FactoryComponent<IFileInputOptions>;
+export declare const FileInput: FactoryComponent<FileInputAttrs>;

package/dist/label.d.ts

@@ -1,7 +1,6 @@
 import { FactoryComponent, Component, Attributes } from 'mithril';
-import './styles/input.css';
 export declare const Mandatory: Component;
-export interface IMaterialLabel extends Attributes {
+export interface LabelAttrs extends Attributes {
     /** Optional title/label */
     label?: string;
     /** Optional ID */
@@ -10,13 +9,15 @@ export interface IMaterialLabel extends Attributes {
     isMandatory?: boolean;
     /** Add the active class to the label */
     isActive?: boolean | string;
+    /** Determines the initial value of its active state, only used during oncreate */
+    initialValue?: boolean;
 }
 /** Simple label element, used for most components. */
-export declare const Label: FactoryComponent<IMaterialLabel>;
-export interface IHelperTextOptions extends Attributes {
+export declare const Label: FactoryComponent<LabelAttrs>;
+export interface HelperTextOptions extends Attributes {
     helperText?: string;
     dataError?: string;
     dataSuccess?: string;
 }
 /** Create a helper text, often used for displaying a small help text. May be replaced by the validation message. */
-export declare const HelperText: FactoryComponent<IHelperTextOptions>;
+export declare const HelperText: FactoryComponent<HelperTextOptions>;

package/dist/material-box.d.ts

@@ -1,7 +1,23 @@
 import { FactoryComponent, Attributes } from 'mithril';
-export interface IMaterialBox extends Partial<M.MaterialboxOptions>, Attributes {
+export interface MaterialBoxOptions {
+    /** Animation duration in ms */
+    inDuration?: number;
+    /** Animation duration in ms for closing */
+    outDuration?: number;
+    /** Callback when materialbox is opened */
+    onOpenStart?: () => void;
+    /** Callback when materialbox is closed */
+    onCloseStart?: () => void;
+    /** Callback when materialbox opening animation is complete */
+    onOpenEnd?: () => void;
+    /** Callback when materialbox closing animation is complete */
+    onCloseEnd?: () => void;
+}
+export interface MaterialBoxAttrs extends MaterialBoxOptions, Attributes {
     /** Source image path */
     src: string;
+    /** Alt text for the image */
+    alt?: string;
     /**
      * Width of the image
      * @default undefined
@@ -12,9 +28,11 @@ export interface IMaterialBox extends Partial<M.MaterialboxOptions>, Attributes
      * @default undefined
      */
     height?: number;
+    /** Caption for the image overlay */
+    caption?: string;
 }
 /**
- * Create an image box, that, when clicked upon, fills the screen.
- * @see https://materializecss.com/media.html
+ * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
+ * No MaterializeCSS dependencies
  */
-export declare const MaterialBox: FactoryComponent<IMaterialBox>;
+export declare const MaterialBox: FactoryComponent<MaterialBoxAttrs>;

package/dist/material-icon.d.ts

@@ -0,0 +1,14 @@
+import { FactoryComponent, Attributes } from 'mithril';
+declare const iconPaths: {
+    readonly caret: readonly ["M7 10l5 5 5-5z", "M0 0h24v24H0z"];
+    readonly close: readonly ["M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z", "M0 0h24v24H0z"];
+};
+type IconName = keyof typeof iconPaths;
+export interface MaterialIconAttrs extends Attributes {
+    name: IconName;
+    direction?: 'up' | 'down' | 'left' | 'right';
+    style?: Record<string, string>;
+    onclick?: (e: MouseEvent) => void;
+}
+export declare const MaterialIcon: FactoryComponent<MaterialIconAttrs>;
+export {};

package/dist/modal.d.ts

@@ -1,5 +1,9 @@
 import { FactoryComponent, Vnode, Attributes } from 'mithril';
-export interface IMaterialModal extends Attributes {
+export interface ModalState {
+    isOpen: boolean;
+    id: string;
+}
+export interface ModalAttrs extends Attributes {
     id: string;
     title: string;
     description?: string | Vnode<any, any>;
@@ -9,17 +13,29 @@ export interface IMaterialModal extends Attributes {
     fixedFooter?: boolean;
     /** Display on the bottom */
     bottomSheet?: boolean;
-    /** Materialize css' modal options */
-    options?: Partial<M.ModalOptions>;
     /** Menu buttons, from left to right */
     buttons?: Array<{
         label: string;
         iconName?: string;
         disabled?: boolean;
         onclick?: (e: UIEvent) => void;
+        className?: string;
     }>;
-    /** Get the modal instance, so you can control it programmatically */
-    onCreate?: (modal: M.Modal) => void;
+    /** Control modal visibility externally */
+    isOpen?: boolean;
+    /** Called when modal should be opened/closed */
+    onToggle?: (open: boolean) => void;
+    /** Called when modal is closed */
+    onClose?: () => void;
+    /** Show close button in top right */
+    showCloseButton?: boolean;
+    /** Close modal when clicking backdrop */
+    closeOnBackdropClick?: boolean;
+    /** Close modal when pressing escape key */
+    closeOnEsc?: boolean;
 }
-/** Builds a modal panel, which can be triggered using its id */
-export declare const ModalPanel: FactoryComponent<IMaterialModal>;
+/**
+ * CSS-only Modal Panel component - no JavaScript dependencies
+ * Uses modern CSS techniques for modal functionality
+ */
+export declare const ModalPanel: FactoryComponent<ModalAttrs>;

package/dist/option.d.ts

@@ -1,5 +1,5 @@
 import { Vnode, FactoryComponent, Attributes, Component } from 'mithril';
-export interface IInputCheckbox extends Attributes {
+export interface InputCheckboxAttrs extends Attributes {
     /** Optional event handler when a checkbox is clicked */
     onchange?: (checked: boolean) => void;
     /** Label of the checkbox, can be a string or Vnode */
@@ -8,10 +8,12 @@ export interface IInputCheckbox extends Attributes {
     checked?: boolean;
     /** If true, the checkbox is disabled */
     disabled?: boolean;
+    /** Optional input id for the checkbox */
+    inputId?: string;
 }
 /** Component to show a check box */
-export declare const InputCheckbox: FactoryComponent<IInputCheckbox>;
-export interface IInputOption<T extends string | number> {
+export declare const InputCheckbox: FactoryComponent<InputCheckboxAttrs>;
+export interface InputOption<T extends string | number> {
     /** Option ID */
     id: T;
     /** Displayed label */
@@ -29,20 +31,15 @@ export interface IInputOption<T extends string | number> {
     /** Optional description */
     description?: string;
 }
-export interface IOptions<T extends string | number> extends Attributes {
+export interface OptionsAttrs<T extends string | number> extends Attributes {
     /** Element ID */
     id?: string;
     /** Optional title or label */
     label?: string;
     /** The options that you have */
-    options: IInputOption<T>[];
+    options: InputOption<T>[];
     /** Event handler that is called when an option is changed */
     onchange?: (checkedId: T[]) => void;
-    /**
-     * Selected id or ids (in case of multiple options)
-     * @deprecated Please use initialValue instead
-     */
-    checkedId?: T | T[];
     /** Selected id or ids (in case of multiple options) */
     initialValue?: T | T[];
     /** Optional description */
@@ -55,6 +52,10 @@ export interface IOptions<T extends string | number> extends Attributes {
     isMandatory?: boolean;
     /** If true, disable the options. */
     disabled?: boolean;
+    /** Layout for the options: 'vertical' (default) or 'horizontal' */
+    layout?: 'vertical' | 'horizontal';
+    /** If true, show select all/none buttons */
+    showSelectAll?: boolean;
 }
 /** A list of checkboxes */
-export declare const Options: <T extends string | number>() => Component<IOptions<T>>;
+export declare const Options: <T extends string | number>() => Component<OptionsAttrs<T>>;

package/dist/pagination.d.ts

@@ -1,13 +1,9 @@
-import { FactoryComponent, Attributes, Vnode } from 'mithril';
-export interface IInternalPaginationOption extends IPaginationOption {
-    active?: boolean;
-    title: number | Vnode<any, any>;
-}
-export interface IPaginationOption extends Attributes {
+import { FactoryComponent, Attributes } from 'mithril';
+export interface PaginationItem extends Attributes {
     href: string;
     disabled?: boolean;
 }
-export interface IPaginationOptions extends Attributes {
+export interface PaginationAttrs extends Attributes {
     /**
      * How many items do we show
      * @default 9 or items.length, whatever is the smallest
@@ -15,6 +11,6 @@ export interface IPaginationOptions extends Attributes {
     size?: number;
     /** The active page index */
     curPage?: number;
-    items: IPaginationOption[];
+    items: PaginationItem[];
 }
-export declare const Pagination: FactoryComponent<IPaginationOptions>;
+export declare const Pagination: FactoryComponent<PaginationAttrs>;

package/dist/parallax.d.ts

@@ -1,12 +1,14 @@
 import { FactoryComponent, Attributes } from 'mithril';
-export interface IParallax extends Partial<M.ParallaxOptions>, Attributes {
+export interface ParallaxAttrs extends Attributes {
+    /** Enable responsive parallax (disable on mobile for performance) */
+    responsiveThreshold?: number;
     /** Image source */
     src: string;
+    /** Alt text for the image */
+    alt?: string;
 }
 /**
- * Parallax component:
- * Parallax is an effect where the background content or image in this case,
- * is moved at a different speed than the foreground content while scrolling.
- * @see https://materializecss.com/parallax.html
+ * MaterializeCSS Parallax component with dynamic positioning
+ * Port of the original MaterializeCSS parallax logic
  */
-export declare const Parallax: FactoryComponent<IParallax>;
+export declare const Parallax: FactoryComponent<ParallaxAttrs>;