mithril-materialized 0.19.7 → 1.0.0-beta.1

package/dist/input-options.d.ts

@@ -1,81 +1,85 @@
-import { Attributes } from 'mithril';
-export interface IInputOptions<T = string> extends Attributes {
-    /** Optional label. */
-    label?: string;
-    /** Optional ID. */
-    id?: string;
-    /** Unique key for use of the element in an array. */
-    key?: string | number;
-    /** Initial value of the input field. */
-    initialValue?: T;
-    /**
-     * The autocomplete property sets or returns the value of the autocomplete
-     * attribute in a text field. When autocomplete is on, the browser automatically
-     * complete values based on values that the user has entered before.
-     * @default 'on'
-     */
-    autocomplete?: 'on' | 'off';
-    /**
-     * The pattern property sets or returns the value of the pattern attribute of
-     * a text field. The pattern attribute specifies a regular expression that the
-     * text field's value is checked against.
-     */
-    pattern?: RegExp;
-    /**
-     * The readOnly property sets or returns whether a text field is read-only, or not.
-     * A read-only field cannot be modified. However, a user can tab to it, highlight it,
-     * and copy the text from it.
-     */
-    readOnly?: boolean;
-    /** When true, add the autofocus attribute to the input field. */
-    autofocus?: (() => boolean) | boolean;
-    /** Key down event */
-    onkeydown?: (ev: KeyboardEvent, value?: T) => void;
-    /** Key press event */
-    onkeypress?: (ev: KeyboardEvent, value?: T) => void;
-    /** Key up event */
-    onkeyup?: (ev: KeyboardEvent, value?: T) => void;
-    /** Invoked when the value changes. */
-    onchange?: (value: T) => void;
-    /** Add a a placeholder to the input field. */
-    placeholder?: string;
-    /** Add a description underneath the input field. */
-    helperText?: string;
-    /**
-     * When returning true or an empty string, clear the custom validity (= valid).
-     * When returning false, set the custom validity message to a default string string.
-     * When returning a non-empty string, set the custom validity message to this string.
-     */
-    validate?: (v: T, target?: HTMLInputElement) => boolean | string;
-    /** Will replace the helperText, if any, when the input is invalid. */
-    dataError?: string;
-    /** Will replace the helperText, if any, when the input is valid. */
-    dataSuccess?: string;
-    /** Uses Materialize icons as a prefix or postfix. */
-    iconName?: string;
-    /** Sets the input field to disabled. */
-    disabled?: boolean;
-    /** Optional style information. */
-    style?: string;
-    /** When input type is a number, optionally specify the minimum value. */
-    min?: number;
-    /** When input type is a number, optionally specify the maximum value. */
-    max?: number;
-    /** When input type is a text or text area, optionally specify the minimum length. */
-    minLength?: number;
-    /** When input type is a text or text area, optionally specify the maximum length. */
-    maxLength?: number;
-    /** Number of rows of a textarea */
-    rows?: number;
-    /** Number of cols of a textarea */
-    cols?: number;
-    /** If true, break to a new row */
-    newRow?: boolean;
-    /**
-     * If true, add a mandatory * after the label (if any),
-     * and add the required and aria-required attributes to the input element.
-     */
-    isMandatory?: boolean;
-    /** Add the required and aria-required attributes to the input element */
-    required?: boolean;
-}
+import { Attributes } from 'mithril';
+export interface InputAttributes<T = string> extends Attributes {
+    /** Optional label. */
+    label?: string;
+    /** Optional ID. */
+    id?: string;
+    /** Unique key for use of the element in an array. */
+    key?: string | number;
+    /** Initial value of the input field. */
+    initialValue?: T;
+    /**
+     * The autocomplete property sets or returns the value of the autocomplete
+     * attribute in a text field. When autocomplete is on, the browser automatically
+     * complete values based on values that the user has entered before.
+     * @default 'on'
+     */
+    autocomplete?: 'on' | 'off';
+    /**
+     * The pattern property sets or returns the value of the pattern attribute of
+     * a text field. The pattern attribute specifies a regular expression that the
+     * text field's value is checked against.
+     */
+    pattern?: RegExp;
+    /**
+     * The readOnly property sets or returns whether a text field is read-only, or not.
+     * A read-only field cannot be modified. However, a user can tab to it, highlight it,
+     * and copy the text from it.
+     */
+    readOnly?: boolean;
+    /** When true, add the autofocus attribute to the input field. */
+    autofocus?: (() => boolean) | boolean;
+    /** Key down event */
+    onkeydown?: (ev: KeyboardEvent, value?: T) => void;
+    /** Key press event */
+    onkeypress?: (ev: KeyboardEvent, value?: T) => void;
+    /** Key up event */
+    onkeyup?: (ev: KeyboardEvent, value?: T) => void;
+    /** 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;
+    /** Add a description underneath the input field. */
+    helperText?: string;
+    /**
+     * When returning true or an empty string, clear the custom validity (= valid).
+     * When returning false, set the custom validity message to a default string string.
+     * When returning a non-empty string, set the custom validity message to this string.
+     */
+    validate?: (v: T, target?: HTMLInputElement) => boolean | string;
+    /** Will replace the helperText, if any, when the input is invalid. */
+    dataError?: string;
+    /** Will replace the helperText, if any, when the input is valid. */
+    dataSuccess?: string;
+    /** Uses Materialize icons as a prefix or postfix. */
+    iconName?: string;
+    /** Sets the input field to disabled. */
+    disabled?: boolean;
+    /** Optional style information. */
+    style?: string;
+    /** When input type is a number, optionally specify the minimum value. */
+    min?: number;
+    /** When input type is a number, optionally specify the maximum value. */
+    max?: number;
+    /** When input type is a text or text area, optionally specify the minimum length. */
+    minLength?: number;
+    /** When input type is a text or text area, optionally specify the maximum length. */
+    maxLength?: number;
+    /** Number of rows of a textarea */
+    rows?: number;
+    /** Number of cols of a textarea */
+    cols?: number;
+    /** If true, break to a new row */
+    newRow?: boolean;
+    /**
+     * If true, add a mandatory * after the label (if any),
+     * and add the required and aria-required attributes to the input element.
+     */
+    isMandatory?: boolean;
+    /** Add the required and aria-required attributes to the input element */
+    required?: boolean;
+}

package/dist/input.d.ts

@@ -1,42 +1,47 @@
-import m, { FactoryComponent, Attributes } from 'mithril';
-import { IInputOptions } from './input-options';
-import './styles/input.css';
-/** Create a TextArea */
-export declare const TextArea: FactoryComponent<IInputOptions<string>>;
-export declare type InputType = 'url' | 'color' | 'text' | 'number' | 'email' | 'range' | 'password';
-/** Component for entering some text */
-export declare const TextInput: m.FactoryComponent<IInputOptions<string>>;
-/** Component for entering a password */
-export declare const PasswordInput: m.FactoryComponent<IInputOptions<string>>;
-/** Component for entering a number */
-export declare const NumberInput: m.FactoryComponent<IInputOptions<number>>;
-/** Component for entering a URL */
-export declare const UrlInput: m.FactoryComponent<IInputOptions<string>>;
-/** Component for entering a color */
-export declare const ColorInput: m.FactoryComponent<IInputOptions<string>>;
-/** Component for entering a range */
-export declare const RangeInput: m.FactoryComponent<IInputOptions<number>>;
-/** Component for entering an email */
-export declare const EmailInput: m.FactoryComponent<IInputOptions<string>>;
-export interface IFileInputOptions extends Attributes {
-    /** Displayed on the button, @default File */
-    label?: string;
-    /** Current value of the file input, write only */
-    initialValue?: string;
-    /** Adds a placeholder message */
-    placeholder?: string;
-    /** If true, upload multiple files */
-    multiple?: boolean;
-    /** Called when the file input is changed */
-    onchange?: (files: FileList) => void;
-    /** If true, disable the box */
-    disabled?: boolean;
-    /**
-     * Accepted file types, e.g. image/png, image/jpeg,
-     * any image/*, video/*. audio/*, .pdf, a valid MIME type string, with no extensions, etc.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers
-     */
-    accept?: string | string[];
-}
-/** Component for uploading a file */
-export declare const FileInput: FactoryComponent<IFileInputOptions>;
+import m, { FactoryComponent, Attributes } from 'mithril';
+import { InputAttributes } 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<InputAttributes<string>>;
+export type InputType = 'url' | 'color' | 'text' | 'number' | 'email' | 'range' | 'password';
+/** Component for entering some text */
+export declare const TextInput: m.FactoryComponent<InputAttributes<string>>;
+/** Component for entering a password */
+export declare const PasswordInput: m.FactoryComponent<InputAttributes<string>>;
+/** Component for entering a number */
+export declare const NumberInput: m.FactoryComponent<InputAttributes<number>>;
+/** Component for entering a URL */
+export declare const UrlInput: m.FactoryComponent<InputAttributes<string>>;
+/** Component for entering a color */
+export declare const ColorInput: m.FactoryComponent<InputAttributes<string>>;
+/** Component for entering a range */
+export declare const RangeInput: m.FactoryComponent<InputAttributes<number>>;
+/** Component for entering an email */
+export declare const EmailInput: m.FactoryComponent<InputAttributes<string>>;
+export interface FileInputAttrs extends Attributes {
+    /** Displayed on the button, @default File */
+    label?: string;
+    /** Current value of the file input, write only */
+    initialValue?: string;
+    /** Adds a placeholder message */
+    placeholder?: string;
+    /** If true, upload multiple files */
+    multiple?: boolean;
+    /** Called when the file input is changed */
+    onchange?: (files: FileList) => void;
+    /** If true, disable the box */
+    disabled?: boolean;
+    /**
+     * Accepted file types, e.g. image/png, image/jpeg,
+     * any image/*, video/*. audio/*, .pdf, a valid MIME type string, with no extensions, etc.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers
+     */
+    accept?: string | string[];
+}
+/** Component for uploading a file */
+export declare const FileInput: FactoryComponent<FileInputAttrs>;

package/dist/label.d.ts

@@ -1,22 +1,21 @@
-import { FactoryComponent, Component, Attributes } from 'mithril';
-import './styles/input.css';
-export declare const Mandatory: Component;
-export interface IMaterialLabel extends Attributes {
-    /** Optional title/label */
-    label?: string;
-    /** Optional ID */
-    id?: string;
-    /** If true, add a mandatory '*' after the label */
-    isMandatory?: boolean;
-    /** Add the active class to the label */
-    isActive?: boolean | string;
-}
-/** Simple label element, used for most components. */
-export declare const Label: FactoryComponent<IMaterialLabel>;
-export interface IHelperTextOptions 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>;
+import { FactoryComponent, Component, Attributes } from 'mithril';
+export declare const Mandatory: Component;
+export interface LabelAttributes extends Attributes {
+    /** Optional title/label */
+    label?: string;
+    /** Optional ID */
+    id?: string;
+    /** If true, add a mandatory '*' after the label */
+    isMandatory?: boolean;
+    /** Add the active class to the label */
+    isActive?: boolean | string;
+}
+/** Simple label element, used for most components. */
+export declare const Label: FactoryComponent<LabelAttributes>;
+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<HelperTextOptions>;

package/dist/material-box.d.ts

@@ -1,21 +1,38 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent, Attributes } from 'mithril';
-export interface IMaterialBox extends Partial<M.MaterialboxOptions>, Attributes {
-    /** Source image path */
-    src: string;
-    /**
-     * Width of the image
-     * @default undefined
-     */
-    width?: number;
-    /**
-     * Height of the image
-     * @default undefined
-     */
-    height?: number;
-}
-/**
- * Create an image box, that, when clicked upon, fills the screen.
- * @see https://materializecss.com/media.html
- */
-export declare const MaterialBox: FactoryComponent<IMaterialBox>;
+import { FactoryComponent, Attributes } from 'mithril';
+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 MaterialBoxAttributes extends MaterialBoxOptions, Attributes {
+    /** Source image path */
+    src: string;
+    /** Alt text for the image */
+    alt?: string;
+    /**
+     * Width of the image
+     * @default undefined
+     */
+    width?: number;
+    /**
+     * Height of the image
+     * @default undefined
+     */
+    height?: number;
+    /** Caption for the image overlay */
+    caption?: string;
+}
+/**
+ * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
+ * No MaterializeCSS dependencies
+ */
+export declare const MaterialBox: FactoryComponent<MaterialBoxAttributes>;

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,26 +1,41 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent, Vnode, Attributes } from 'mithril';
-export interface IMaterialModal extends Attributes {
-    id: string;
-    title: string;
-    description?: string | Vnode<any, any>;
-    /** Set to true when the description contains HTML */
-    richContent?: boolean;
-    /** Fixate the footer, so you can show more content. */
-    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;
-    }>;
-    /** Get the modal instance, so you can control it programmatically */
-    onCreate?: (modal: M.Modal) => void;
-}
-/** Builds a modal panel, which can be triggered using its id */
-export declare const ModalPanel: FactoryComponent<IMaterialModal>;
+import { FactoryComponent, Vnode, Attributes } from 'mithril';
+export interface ModalState {
+    isOpen: boolean;
+    id: string;
+}
+export interface ModalAttributes extends Attributes {
+    id: string;
+    title: string;
+    description?: string | Vnode<any, any>;
+    /** Set to true when the description contains HTML */
+    richContent?: boolean;
+    /** Fixate the footer, so you can show more content. */
+    fixedFooter?: boolean;
+    /** Display on the bottom */
+    bottomSheet?: boolean;
+    /** Menu buttons, from left to right */
+    buttons?: Array<{
+        label: string;
+        iconName?: string;
+        disabled?: boolean;
+        onclick?: (e: UIEvent) => void;
+        className?: string;
+    }>;
+    /** 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;
+}
+/**
+ * CSS-only Modal Panel component - no JavaScript dependencies
+ * Uses modern CSS techniques for modal functionality
+ */
+export declare const ModalPanel: FactoryComponent<ModalAttributes>;

package/dist/option.d.ts

@@ -1,52 +1,61 @@
-import { Vnode, FactoryComponent, Attributes } from 'mithril';
-export interface IInputCheckbox extends Attributes {
-    /** Optional event handler when a checkbox is clicked */
-    onchange?: (checked: boolean) => void;
-    /** Label of the checkbox, can be a string or Vnode */
-    label?: string | Vnode<any, any>;
-    /** If true, the checkbox is checked */
-    checked?: boolean;
-    /** If true, the checkbox is disabled */
-    disabled?: boolean;
-}
-/** Component to show a check box */
-export declare const InputCheckbox: FactoryComponent<IInputCheckbox>;
-export interface IInputOption {
-    /** Option ID */
-    id: string | number;
-    /** Displayed label */
-    label: string;
-    /** Optional title, often used to display a tooltip - will only work when choosing browser-defaults */
-    title?: string;
-    /** Is the option disabled? */
-    disabled?: boolean;
-}
-export interface IOptions extends Attributes {
-    /** Element ID */
-    id?: string;
-    /** Optional title or label */
-    label?: string;
-    /** The options that you have */
-    options: IInputOption[];
-    /** Event handler that is called when an option is changed */
-    onchange?: (checkedId: Array<string | number>) => void;
-    /**
-     * Selected id or ids (in case of multiple options)
-     * @deprecated Please use initialValue instead
-     */
-    checkedId?: string | number | Array<string | number>;
-    /** Selected id or ids (in case of multiple options) */
-    initialValue?: string | number | Array<string | number>;
-    /** Optional description */
-    description?: string;
-    /** Optional CSS that is added to the input checkbox, e.g. if you add col s4, the items will be put inline */
-    checkboxClass?: string;
-    /** If true, start on a new row */
-    newRow?: boolean;
-    /** If true, add a mandatory '*' after the label */
-    isMandatory?: boolean;
-    /** If true, disable the options. */
-    disabled?: boolean;
-}
-/** A list of checkboxes */
-export declare const Options: FactoryComponent<IOptions>;
+import { Vnode, FactoryComponent, Attributes, Component } from 'mithril';
+export interface InputCheckboxAttributes extends Attributes {
+    /** Optional event handler when a checkbox is clicked */
+    onchange?: (checked: boolean) => void;
+    /** Label of the checkbox, can be a string or Vnode */
+    label?: string | Vnode<any, any>;
+    /** If true, the checkbox is checked */
+    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<InputCheckboxAttributes>;
+export interface InputOption<T extends string | number> {
+    /** Option ID */
+    id: T;
+    /** Displayed label */
+    label: string;
+    /** Optional title, often used to display a tooltip - will only work when choosing browser-defaults */
+    title?: string;
+    /** Is the option disabled? */
+    disabled?: boolean;
+    /** Select image */
+    img?: string;
+    /** Select group label */
+    group?: string;
+    /** Optional class name */
+    className?: string;
+    /** Optional description */
+    description?: string;
+}
+export interface OptionsAttributes<T extends string | number> extends Attributes {
+    /** Element ID */
+    id?: string;
+    /** Optional title or label */
+    label?: string;
+    /** The options that you have */
+    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) */
+    initialValue?: T | T[];
+    /** Optional description */
+    description?: string;
+    /** Optional CSS that is added to the input checkbox, e.g. if you add col s4, the items will be put inline */
+    checkboxClass?: string;
+    /** If true, start on a new row */
+    newRow?: boolean;
+    /** If true, add a mandatory '*' after the label */
+    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<OptionsAttributes<T>>;

package/dist/pagination.d.ts

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