mithril-materialized 0.19.6 → 1.0.0-beta.1

package/dist/parallax.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent, Attributes } from 'mithril';
-export interface IParallax extends Partial<M.ParallaxOptions>, Attributes {
-    /** Image source */
-    src: 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
- */
-export declare const Parallax: FactoryComponent<IParallax>;
+import { FactoryComponent, Attributes } from 'mithril';
+export interface ParallaxAttributes extends Attributes {
+    /** Enable responsive parallax (disable on mobile for performance) */
+    responsiveThreshold?: number;
+    /** Image source */
+    src: string;
+    /** Alt text for the image */
+    alt?: string;
+}
+/**
+ * MaterializeCSS Parallax component with dynamic positioning
+ * Port of the original MaterializeCSS parallax logic
+ */
+export declare const Parallax: FactoryComponent<ParallaxAttributes>;

package/dist/pickers.d.ts

@@ -1,8 +1,130 @@
-/// <reference types="materialize-css" />
-/// <reference types="materialize-css" />
-import { FactoryComponent } from 'mithril';
-import { IInputOptions } from './input-options';
-/** Component to pick a date */
-export declare const DatePicker: FactoryComponent<IInputOptions<Date> & Partial<M.DatepickerOptions>>;
-/** Component to pick a time */
-export declare const TimePicker: FactoryComponent<IInputOptions & Partial<M.TimepickerOptions>>;
+import { FactoryComponent } from 'mithril';
+import { InputAttributes } from './input-options';
+export interface DatePickerI18n {
+    cancel?: string;
+    clear?: string;
+    done?: string;
+    previousMonth?: string;
+    nextMonth?: string;
+    months?: string[];
+    monthsShort?: string[];
+    weekdays?: string[];
+    weekdaysShort?: string[];
+    weekdaysAbbrev?: string[];
+}
+export interface DatePickerOptions {
+    /** Close when date is selected */
+    autoClose?: boolean;
+    /** The default output format for the input field value */
+    format?: string;
+    /** Custom parse function */
+    parse?: (dateString: string, format: string) => Date | null;
+    /** The initial date to view when first opened */
+    defaultDate?: Date;
+    /** Make the defaultDate the initial selected value */
+    setDefaultDate?: boolean;
+    /** Disable weekends */
+    disableWeekends?: boolean;
+    /** Custom function to disable specific days */
+    disableDayFn?: (date: Date) => boolean;
+    /** First day of week (0: Sunday, 1: Monday etc) */
+    firstDay?: number;
+    /** The earliest date that can be selected */
+    minDate?: Date;
+    /** The latest date that can be selected */
+    maxDate?: Date;
+    /** Number of years either side, or array of upper/lower range */
+    yearRange?: number | number[];
+    /** Show clear button */
+    showClearBtn?: boolean;
+    /** Internationalization */
+    i18n?: DatePickerI18n;
+    /** Callback when date is selected */
+    onSelect?: (date: Date) => void;
+    /** Callback when picker is opened */
+    onOpen?: () => void;
+    /** Callback when picker is closed */
+    onClose?: () => void;
+}
+export interface DatePickerAttributes extends InputAttributes<string>, DatePickerOptions {
+    /** Date format attribute (alternative to format property) */
+    format?: string;
+    /** Year range attribute (alternative to yearRange property) */
+    yearrange?: string;
+    /** Legacy: Date label (use label instead) */
+    dateLabel?: string;
+    /** Legacy: Display format (use format instead) */
+    displayFormat?: string;
+}
+/**
+ * Enhanced DatePicker component based on Materialize CSS datepicker
+ */
+export declare const DatePicker: FactoryComponent<DatePickerAttributes>;
+export interface TimePickerI18n {
+    /** Label for time field */
+    timeLabel?: string;
+    /** Helper text showing format */
+    helperText?: string;
+    /** Now button text */
+    nowLabel?: string;
+    /** Clear button text */
+    clearLabel?: string;
+    /** Close button text */
+    closeLabel?: string;
+    /** Icon for time input */
+    iconName?: string;
+    /** AM label for 12-hour format */
+    amLabel?: string;
+    /** PM label for 12-hour format */
+    pmLabel?: string;
+    /** Toggle 12h/24h button text */
+    toggleFormatLabel?: string;
+}
+export interface TimePickerFormat {
+    /** Use 12-hour format */
+    twelveHour?: boolean;
+    /** Allow user to toggle between 12h/24h format */
+    allowFormatToggle?: boolean;
+}
+export interface TimePickerOptions extends TimePickerI18n, TimePickerFormat {
+    /** Show clear button */
+    showClearBtn?: boolean;
+    /** Show now button */
+    showNowBtn?: boolean;
+    /** Use modal for time selection (default: true) */
+    useModal?: boolean;
+    /** Disabled state - prevents all interaction */
+    disabled?: boolean;
+    /** Readonly state - shows value but prevents editing */
+    readonly?: boolean;
+    /**
+     * Default time to revert to when field is cleared (optional).
+     * Note: Use initialValue (from InputOptions) to set the current/initial value of the field.
+     * defaultTime is only used as a fallback when the user clears the field and you want to provide a default.
+     */
+    defaultTime?: string;
+    /** Auto close picker after selection */
+    autoClose?: boolean;
+    /** Callback when time is selected */
+    onSelect?: (hours: number, minutes: number) => void;
+    /** Callback when picker is opened */
+    onOpen?: () => void;
+    /** Callback when picker is closed */
+    onClose?: () => void;
+    /** Input handler - fires on every change */
+    oninput?: (value: string) => void;
+    /** Change handler for the time value (24h format) - fires on blur/focus loss */
+    onchange?: (value: string) => void;
+}
+export interface TimePickerAttributes extends InputAttributes<string>, TimePickerOptions {
+}
+/**
+ * Enhanced TimePicker component with i18n support and improved functionality.
+ *
+ * Usage:
+ * - Use `initialValue` to set the current/initial time value (24h format: "HH:MM")
+ * - Use `defaultTime` only if you need a fallback when the field is cleared
+ * - The component accepts and outputs 24-hour format strings ("HH:MM")
+ * - Display format (12h/24h) is controlled by the `twelveHour` property
+ */
+export declare const TimePicker: FactoryComponent<TimePickerAttributes>;

package/dist/radio.d.ts

@@ -1,37 +1,41 @@
-import { FactoryComponent, Attributes } from 'mithril';
-import { IInputOption } from './option';
-export interface IRadioButtons 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: (id: string | number) => void;
-    /** Selected id (in oninit lifecycle) */
-    initialValue?: string | number;
-    /** Selected id (in oninit and onupdate lifecycle) */
-    checkedId?: string | number;
-    /** Optional description */
-    description?: string;
-    /** If true, start on a new row */
-    newRow?: boolean;
-    /** If true, add a mandatory '*' after the label */
-    isMandatory?: boolean;
-    /** Optional CSS that is added to the input checkbox, e.g. if you add col s4, the items will be put inline */
-    checkboxClass?: string;
-    /** Disable the button */
-    disabled?: boolean;
-}
-/** Component to show a list of radio buttons, from which you can choose one. */
-export declare const RadioButtons: FactoryComponent<IRadioButtons>;
-export interface IRadioButton extends Attributes {
-    id: string | number;
-    checked?: boolean;
-    onchange: (id: string | number) => void;
-    label: string;
-    groupId: string;
-    disabled?: boolean;
-}
-export declare const RadioButton: FactoryComponent<IRadioButton>;
+import { Attributes, Component } from 'mithril';
+import { InputOption } from './option';
+export interface RadioButtonsAttributes<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: (id: T) => void;
+    /** Selected id (in oninit lifecycle) */
+    initialValue?: T;
+    /** Selected id (in oninit and onupdate lifecycle) */
+    checkedId?: T;
+    /** Optional description */
+    description?: string;
+    /** If true, start on a new row */
+    newRow?: boolean;
+    /** If true, add a mandatory '*' after the label */
+    isMandatory?: boolean;
+    /** Optional CSS that is added to the input checkbox, e.g. if you add col s4, the items will be put inline */
+    checkboxClass?: string;
+    /** Disable the button */
+    disabled?: boolean;
+    /** Layout for the options: 'vertical' (default) or 'horizontal' */
+    layout?: 'vertical' | 'horizontal';
+}
+export interface RadioButtonAttributes<T extends string | number> extends Attributes {
+    id: T;
+    checked?: boolean;
+    onchange: (id: T) => void;
+    label: string;
+    groupId: string;
+    disabled?: boolean;
+    /** Optional input id for the radio button */
+    inputId?: string;
+}
+export declare const RadioButton: <T extends string | number>() => Component<RadioButtonAttributes<T>>;
+/** Component to show a list of radio buttons, from which you can choose one. */
+export declare const RadioButtons: <T extends string | number>() => Component<RadioButtonsAttributes<T>>;

package/dist/search-select.d.ts

@@ -0,0 +1,41 @@
+import { Attributes, Component } from 'mithril';
+export interface Option<T extends string | number> {
+    id: T;
+    label?: string;
+    disabled?: boolean;
+}
+export interface SearchSelectAttributes<T extends string | number> extends Attributes {
+    /** Options to display in the select */
+    options?: Option<T>[];
+    /** Initial value */
+    initialValue?: T[];
+    /** Callback when user selects or deselects an option */
+    onchange?: (selectedOptions: T[]) => void | Promise<void>;
+    /** Callback when user creates a new option: should return new ID */
+    oncreateNewOption?: (term: string) => Option<T> | Promise<Option<T>>;
+    /** Label for the search select, no default */
+    label?: string;
+    /** Placeholder text for the search input, no default */
+    placeholder?: string;
+    /** Placeholder text for the search input, default 'Search options...' */
+    searchPlaceholder?: string;
+    /** When no options are left, displays this text, default 'No options found' */
+    noOptionsFound?: string;
+    /** Max height of the dropdown menu, default '25rem' */
+    maxHeight?: string;
+}
+interface SearchSelectState<T extends string | number> {
+    isOpen: boolean;
+    selectedOptions: Option<T>[];
+    searchTerm: string;
+    options: Option<T>[];
+    inputRef: HTMLElement | null;
+    dropdownRef: HTMLElement | null;
+    focusedIndex: number;
+    onchange: any;
+}
+/**
+ * Mithril Factory Component for Multi-Select Dropdown with search
+ */
+export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttributes<T>, SearchSelectState<T>>;
+export {};

package/dist/select.d.ts

@@ -1,45 +1,46 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent, Attributes } from 'mithril';
-import { IInputOption } from './option';
-export interface ISelectOptions extends Attributes, Partial<M.FormSelectOptions> {
-    /** Options to select from */
-    options: IInputOption[];
-    /** Called when the value is changed, either contains a single or all selected (checked) ids */
-    onchange: (checkedIds: Array<string | number>) => void;
-    /**
-     * Selected id or ids (in case of multiple options). Processed in the oninit and onupdate lifecycle.
-     * When the checkedId property changes (using a shallow compare), the selections are updated accordingly.
-     */
-    checkedId?: string | number | Array<string | number>;
-    /** Selected id or ids (in case of multiple options). Only processed in the oninit lifecycle. */
-    initialValue?: string | number | Array<string | number>;
-    /** Select a single option or multiple options */
-    multiple?: boolean;
-    /** Optional label. */
-    label?: string;
-    /** Optional ID. */
-    id?: string;
-    /** Unique key for use of the element in an array. */
-    key?: string | number;
-    /** Add a a placeholder to the input field. */
-    placeholder?: string;
-    /** Add a description underneath the input field. */
-    helperText?: string;
-    /** Uses Materialize icons as a prefix or postfix. */
-    iconName?: string;
-    /** Sets the input field to disabled. */
-    disabled?: boolean;
-    /** Optional style information. */
-    style?: string;
-    /** 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;
-}
-/** Component to select from a list of values in a dropdowns */
-export declare const Select: FactoryComponent<ISelectOptions>;
+import { Attributes, Component } from 'mithril';
+import { InputOption } from './option';
+export interface SelectAttributes<T extends string | number> extends Attributes {
+    /** Options to select from */
+    options: InputOption<T>[];
+    /** Called when the value is changed, either contains a single or all selected (checked) ids */
+    onchange: (checkedIds: T[]) => void;
+    /**
+     * Selected id or ids (in case of multiple options). Processed in the oninit and onupdate lifecycle.
+     * When the checkedId property changes (using a shallow compare), the selections are updated accordingly.
+     */
+    checkedId?: T | T[];
+    /** Selected id or ids (in case of multiple options). Only processed in the oninit lifecycle. */
+    initialValue?: T | T[];
+    /** Select a single option or multiple options */
+    multiple?: boolean;
+    /** Optional label. */
+    label?: string;
+    /** Optional ID. */
+    id?: string;
+    /** Unique key for use of the element in an array. */
+    key?: string | number;
+    /** Add a a placeholder to the input field. */
+    placeholder?: string;
+    /** Add a description underneath the input field. */
+    helperText?: string;
+    /** Uses Materialize icons as a prefix or postfix. */
+    iconName?: string;
+    /** Sets the input field to disabled. */
+    disabled?: boolean;
+    /** Optional style information. */
+    style?: string;
+    /** 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;
+    /** Enable the clear icon */
+    showClearButton?: boolean;
+}
+/** Select component */
+export declare const Select: <T extends string | number>() => Component<SelectAttributes<T>>;

package/dist/switch.d.ts

@@ -1,13 +1,12 @@
-import { FactoryComponent } from 'mithril';
-import { IInputOptions } from './input-options';
-import './styles/switch.css';
-export interface ISwitchOptions extends Partial<IInputOptions<boolean>> {
-    /** Left text label */
-    left?: string;
-    /** Right text label */
-    right?: string;
-    /** If checked is true, the switch is set in the right position. */
-    checked?: boolean;
-}
-/** Component to display a switch with two values. */
-export declare const Switch: FactoryComponent<ISwitchOptions>;
+import { FactoryComponent } from 'mithril';
+import { InputAttributes } from './input-options';
+export interface SwitchOptions extends Partial<InputAttributes<boolean>> {
+    /** Left text label */
+    left?: string;
+    /** Right text label */
+    right?: string;
+    /** If checked is true, the switch is set in the right position. Only processed in oninit. */
+    checked?: boolean;
+}
+/** Component to display a switch with two values. */
+export declare const Switch: FactoryComponent<SwitchOptions>;

package/dist/tabs.d.ts

@@ -1,45 +1,57 @@
-/// <reference types="materialize-css" />
-import { Vnode, FactoryComponent, Attributes } from 'mithril';
-/**
- * Link or anchor target may take 4 values:
- * - _blank: Opens the linked document in a new window or tab
- * - _self: Opens the linked document in the same frame as it was clicked (this is default)
- * - _parent: Opens the linked document in the parent frame
- * - _top: Opens the linked document in the full body of the window
- */
-export declare type AnchorTarget = '_blank' | '_self' | '_parent' | '_top';
-export interface ITabItem {
-    /** Title of the tab */
-    title: string;
-    /** Vnode to render: may be empty in case of a using the tab as a hyperlink. */
-    vnode?: Vnode<any, any>;
-    /** ID of the tab element. Default the title in lowercase */
-    id?: string;
-    /** If the tab should be active */
-    active?: boolean;
-    /** If the tab should be disabled */
-    disabled?: boolean;
-    /** CSS class for the tab (li), default `.tab.col.s3` */
-    className?: string;
-    /** CSS class for the content (li), default `.tab.col.s3` */
-    contentClass?: string;
-    /**
-     * By default, Materialize tabs will ignore their default anchor behaviour.
-     * To force a tab to behave as a regular hyperlink, just specify the target property of that link.
-     */
-    target?: AnchorTarget;
-    /** Only used in combination with a set target to make the tab act as a regular hyperlink. */
-    href?: string;
-}
-export interface ITabs extends Partial<M.TabsOptions>, Attributes {
-    /** Selected tab id */
-    selectedTabId?: string;
-    /**
-     * Tab width, can be `auto` to use the width of the title,
-     * `fill` to use all availabe space, or `fixed` to use a column size.
-     */
-    tabWidth?: 'auto' | 'fixed' | 'fill';
-    /** List of tab items */
-    tabs: ITabItem[];
-}
-export declare const Tabs: FactoryComponent<ITabs>;
+import { Vnode, FactoryComponent, Attributes } from 'mithril';
+/**
+ * Link or anchor target may take 4 values:
+ * - _blank: Opens the linked document in a new window or tab
+ * - _self: Opens the linked document in the same frame as it was clicked (this is default)
+ * - _parent: Opens the linked document in the parent frame
+ * - _top: Opens the linked document in the full body of the window
+ */
+export type AnchorTarget = '_blank' | '_self' | '_parent' | '_top';
+export interface TabItem {
+    /** Title of the tab */
+    title: string;
+    /** Vnode to render: may be empty in case of a using the tab as a hyperlink. */
+    vnode?: Vnode<any, any>;
+    /** ID of the tab element. Default the title in lowercase */
+    id?: string;
+    /** If the tab should be active */
+    active?: boolean;
+    /** If the tab should be disabled */
+    disabled?: boolean;
+    /** CSS class for the tab (li), default `.tab.col.s3` */
+    className?: string;
+    /** CSS class for the content (li), default `.tab.col.s3` */
+    contentClass?: string;
+    /**
+     * By default, Materialize tabs will ignore their default anchor behaviour.
+     * To force a tab to behave as a regular hyperlink, just specify the target property of that link.
+     */
+    target?: AnchorTarget;
+    /** Only used in combination with a set target to make the tab act as a regular hyperlink. */
+    href?: string;
+}
+export interface TabsOptions {
+    /** Duration of tab change animation in ms */
+    duration?: number;
+    /** Called when a tab is shown */
+    onShow?: (tab: HTMLElement) => void;
+    /** The maximum width at which tabs switch to swipeable mode */
+    responsiveThreshold?: number;
+    /** Enable swiping between tabs on mobile */
+    swipeable?: boolean;
+}
+export interface TabsAttributes extends TabsOptions, Attributes {
+    /** Selected tab id, takes precedence over tab.active property */
+    selectedTabId?: string;
+    /**
+     * Tab width, can be `auto` to use the width of the title,
+     * `fill` to use all availabe space, or `fixed` to use a column size.
+     */
+    tabWidth?: 'auto' | 'fixed' | 'fill';
+    /** List of tab items */
+    tabs: TabItem[];
+    /** Callback when tab changes */
+    onTabChange?: (tabId: string) => void;
+}
+/** CSS-only Tabs component - no MaterializeCSS dependencies */
+export declare const Tabs: FactoryComponent<TabsAttributes>;

package/dist/utils.d.ts

@@ -1,70 +1,43 @@
-import { IInputOptions } from './input-options';
-/**
- * Create a unique ID
- * @see https://stackoverflow.com/a/2117523/319711
- *
- * @returns id followed by 8 hexadecimal characters.
- */
-export declare const uniqueId: () => string;
-/**
- * Create a GUID
- * @see https://stackoverflow.com/a/2117523/319711
- *
- * @returns RFC4122 version 4 compliant GUID
- */
-export declare const uuid4: () => string;
-export declare const compose: <F extends (d: any) => any, T>(...functions: F[]) => (data: T) => T;
-export declare const map: <T>(f: (...args: any[]) => any) => (x: T[]) => unknown[];
-export declare const join: <T>(seperator: string) => (list: T[]) => string;
-/**
- * Convert camel case to snake case.
- *
- * @param {string} cc: Camel case string
- */
-export declare const camelToSnake: (cc: string) => string;
-/** Convert an object to a string of HTML attributes */
-export declare const toAttributeString: <T extends {
-    [key: string]: any;
-}>(x?: T | undefined) => "" | T;
-/** Add the disabled attribute when required */
-export declare const disable: ({ disabled }: {
-    disabled?: boolean | undefined;
-}) => "" | "[disabled]";
-/** Add the required and aria-required attribute when required */
-export declare const req: ({ required, isMandatory }: {
-    required?: boolean | undefined;
-    isMandatory?: boolean | undefined;
-}) => "" | "[required][aria-required=true]";
-/** Convert input options to a set of input attributes */
-export declare const toAttrs: <T>(o: IInputOptions<T>) => string;
-/** Check if a string or number is numeric. @see https://stackoverflow.com/a/9716488/319711 */
-export declare const isNumeric: (n: string | number) => boolean;
-export declare const pipe: (...fncs: ((x: any) => any)[]) => <T>(x: T) => T;
-/**
- * Pad left, default width 2 with a '0'
- *
- * @see http://stackoverflow.com/a/10073788/319711
- * @param {(string | number)} n
- * @param {number} [width=2]
- * @param {string} [z='0']
- * @returns
- */
-export declare const padLeft: (n: string | number, width?: number, z?: string) => string;
-/**
- * Swap two elements at index i and j.
- * Mutates the original array.
- *
- * @param arr array of items
- * @param i from index
- * @param j to index
- */
-export declare const swap: <T>(arr: T[], i: number, j: number) => void;
-/**
- * Move an element at index i to index j.
- * Mutates the original array.
- *
- * @param arr array of items
- * @param i from index
- * @param j to index
- */
-export declare const move: <T>(arr: T[], i: number, j: number) => void;
+/**
+ * Create a unique ID
+ * @see https://stackoverflow.com/a/2117523/319711
+ *
+ * @returns id followed by 8 hexadecimal characters.
+ */
+export declare const uniqueId: () => string;
+/**
+ * Create a GUID
+ * @see https://stackoverflow.com/a/2117523/319711
+ *
+ * @returns RFC4122 version 4 compliant GUID
+ */
+export declare const uuid4: () => string;
+/** Check if a string or number is numeric. @see https://stackoverflow.com/a/9716488/319711 */
+export declare const isNumeric: (n: string | number) => boolean;
+/**
+ * Pad left, default width 2 with a '0'
+ *
+ * @see http://stackoverflow.com/a/10073788/319711
+ * @param {(string | number)} n
+ * @param {number} [width=2]
+ * @param {string} [z='0']
+ * @returns
+ */
+export declare const padLeft: (n: string | number, width?: number, z?: string) => string;
+export declare const getDropdownStyles: (inputRef?: HTMLElement | null, overlap?: boolean, options?: {
+    /** ID property of the selected item */
+    id?: string | number;
+    /** Label to show in the dropdown */
+    label?: string;
+    /** Optional group  */
+    group?: string;
+    /** Can we select the item */
+    disabled?: boolean;
+    /** Add a divider */
+    divider?: boolean;
+}[], isDropDown?: boolean) => any;
+/**
+ * Generate a range of numbers from a to and including b, i.e. [a, b]
+ * @example: console.log(range(5, 10)); // [5, 6, 7, 8, 9, 10]
+ */
+export declare const range: (a: number, b: number) => number[];