mithril-materialized 0.19.7 → 1.0.0-beta.1

package/README.md

@@ -1,6 +1,6 @@
 # mithril-materialized
 
-A [materialize-css](https://materializecss.com) library for the Mithril framework (tested with v2.0.0-rc4 and higher, but presumably, it should work with v1.1.6 too), making it easier to use a Materialize theme in your application. The main focus of this library is on creating Mithril components for the more complicated Materialize components.
+A [materialize-css](https://materializecss.com) library for the Mithril framework (tested with v2.0 and higher, but presumably, it should work with v1.1.6 too), making it easier to use a Materialize theme in your application. The main focus of this library is on creating Mithril components for the more complicated Materialize components.
 
 Supported components:
 
@@ -45,12 +45,16 @@ Supported components:
   - HelperText
 - Not from Materialize-CSS
   - CodeBlock
-  - [Kanban](https://erikvullings.github.io/mithril-materialized/#!/kanban)
+  - SearchSelect, a searchable select dropdown
   - [Timeline](https://erikvullings.github.io/mithril-materialized/#!/timeline)
   - [MapEditor](https://erikvullings.github.io/mithril-materialized/#!/map_editor)
 
 ## Version history
 
+v1.2.0: Added Search select, a searchable select dropdown
+
+v1.1.7: Added option to add style to InputCheckbox and Options
+
 v0.17.1: bug fix
 
 - `Select` component also reacts when the `checkedId` property becomes undefined (previously, it would ignore it).

package/dist/autocomplete.d.ts

@@ -1,7 +1,14 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent } from 'mithril';
-import { IInputOptions } from './input-options';
-export interface IAutoCompleteOptions extends Partial<M.AutocompleteOptions>, IInputOptions<string> {
-}
-/** Component to auto complete your text input */
-export declare const Autocomplete: FactoryComponent<IAutoCompleteOptions>;
+import { FactoryComponent } from 'mithril';
+import { InputAttributes } from './input-options';
+export interface AutoCompleteAttributes extends InputAttributes<string> {
+    /** The data object defining the autocomplete options */
+    data?: Record<string, string | null>;
+    /** Limit of how many options are shown. Default: Infinity */
+    limit?: number;
+    /** Minimum length of input before autocomplete shows. Default: 1 */
+    minLength?: number;
+    /** Function called when an option is selected */
+    onAutocomplete?: (value: string) => void;
+}
+/** Component to auto complete your text input - Pure Mithril implementation */
+export declare const Autocomplete: FactoryComponent<AutoCompleteAttributes>;

package/dist/button.d.ts

@@ -1,40 +1,40 @@
-import m, { FactoryComponent, Attributes } from 'mithril';
-export interface IHtmlAttributes {
-    id?: string;
-    for?: string;
-    placeholder?: string;
-    autofocus?: boolean;
-    disabled?: boolean;
-    type?: 'submit' | 'button' | 'text' | 'textarea' | 'number';
-}
-export interface IMaterialButton extends Attributes {
-    /** Optional (e.g. in case you only want to use an icon) button label */
-    label?: string;
-    /** Optional icon material-icons name, @see https://materializecss.com/icons.html */
-    iconName?: string;
-    /** Optional icon class, e.g. tiny (1em), small (2em), medium (4em), large (6em), or 'tiny right' */
-    iconClass?: string;
-    /**
-     * If the button is intended to open a modal, specify its modal id so we can trigger it,
-     * @see https://materializecss.com/modals.html
-     */
-    modalId?: string;
-    /** Some additional HTML attributes that can be attached to the button */
-    attr?: IHtmlAttributes;
-    /** Optional text-based tooltip, @see https://materializecss.com/tooltips.html */
-    tooltip?: string;
-    /** Optional location for the tooltip */
-    tooltipPostion?: 'top' | 'bottom' | 'left' | 'right';
-}
-/**
- * A factory to create new buttons.
- *
- * @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
- */
-export declare const ButtonFactory: (defaultClassNames: string, attributes?: string) => FactoryComponent<IMaterialButton>;
-export declare const Button: m.FactoryComponent<IMaterialButton>;
-export declare const LargeButton: m.FactoryComponent<IMaterialButton>;
-export declare const SmallButton: m.FactoryComponent<IMaterialButton>;
-export declare const FlatButton: m.FactoryComponent<IMaterialButton>;
-export declare const RoundIconButton: m.FactoryComponent<IMaterialButton>;
-export declare const SubmitButton: m.FactoryComponent<IMaterialButton>;
+import m, { FactoryComponent, Attributes } from 'mithril';
+export interface HtmlAttributes {
+    id?: string;
+    for?: string;
+    placeholder?: string;
+    autofocus?: boolean;
+    disabled?: boolean;
+    type?: 'submit' | 'button' | 'text' | 'textarea' | 'number';
+}
+export interface ButtonAttributes extends Attributes {
+    /** Optional (e.g. in case you only want to use an icon) button label */
+    label?: string;
+    /** Optional icon material-icons name, @see https://materializecss.com/icons.html */
+    iconName?: string;
+    /** Optional icon class, e.g. tiny (1em), small (2em), medium (4em), large (6em), or 'tiny right' */
+    iconClass?: string;
+    /**
+     * If the button is intended to open a modal, specify its modal id so we can trigger it,
+     * @see https://materializecss.com/modals.html
+     */
+    modalId?: string;
+    /** Some additional HTML attributes that can be attached to the button */
+    attr?: HtmlAttributes;
+    /** Optional text-based tooltip, @see https://materializecss.com/tooltips.html */
+    tooltip?: string;
+    /** Optional location for the tooltip */
+    tooltipPostion?: 'top' | 'bottom' | 'left' | 'right';
+}
+/**
+ * A factory to create new buttons.
+ *
+ * @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
+ */
+export declare const ButtonFactory: (element: string, defaultClassNames: string, type?: string) => FactoryComponent<ButtonAttributes>;
+export declare const Button: m.FactoryComponent<ButtonAttributes>;
+export declare const LargeButton: m.FactoryComponent<ButtonAttributes>;
+export declare const SmallButton: m.FactoryComponent<ButtonAttributes>;
+export declare const FlatButton: m.FactoryComponent<ButtonAttributes>;
+export declare const RoundIconButton: m.FactoryComponent<ButtonAttributes>;
+export declare const SubmitButton: m.FactoryComponent<ButtonAttributes>;

package/dist/carousel.d.ts

@@ -1,18 +1,38 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent, Attributes } from 'mithril';
-export interface ICarouselItem extends Attributes {
-    /** Relative page link, e.g. '#one' */
-    href: string;
-    /** Image source */
-    src: string;
-}
-export interface ICarousel extends Partial<M.CarouselOptions>, Attributes {
-    /** The list of images */
-    items: ICarouselItem[];
-}
-export declare const CarouselItem: FactoryComponent<ICarouselItem>;
-/**
- * Creates a collabsible or accordion (via the accordion option, default true) component.
- * @see https://materializecss.com/carousel.html
- */
-export declare const Carousel: FactoryComponent<ICarousel>;
+import { FactoryComponent, Attributes } from 'mithril';
+export interface CarouselItem extends Attributes {
+    /** Relative page link, e.g. '#one' */
+    href: string;
+    /** Image source */
+    src: string;
+    /** Alternative name */
+    alt?: string;
+}
+export interface CarouselOptions {
+    /** Duration of carousel item change animation in ms */
+    duration?: number;
+    /** Zoom scale (perspective distance) */
+    dist?: number;
+    /** Spacing for center image */
+    shift?: number;
+    /** Padding between non-center items */
+    padding?: number;
+    /** Number of visible items in carousel */
+    numVisible?: number;
+    /** Change to full width styles */
+    fullWidth?: boolean;
+    /** Toggle indicators */
+    indicators?: boolean;
+    /** Don't wrap around and cycle through items */
+    noWrap?: boolean;
+}
+export interface CarouselAttributes extends CarouselOptions, Attributes {
+    /** The list of images */
+    items: CarouselItem[];
+    /** Called when carousel item changes */
+    onCycleTo?: (item: CarouselItem, index: number, dragged: boolean) => void;
+}
+/**
+ * Materialize CSS Carousel component with dynamic positioning
+ * Port of the original MaterializeCSS carousel logic
+ */
+export declare const Carousel: FactoryComponent<CarouselAttributes>;

package/dist/chip.d.ts

@@ -1,11 +1,31 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent, Attributes } from 'mithril';
-export interface IChipsOptions extends Partial<M.ChipsOptions>, Attributes {
-    onchange?: (chips: M.ChipData[]) => void;
-    /** Optional label above the input */
-    label?: string;
-    /** Optional help text below the input */
-    helperText?: string;
-}
-/** Chips and tags */
-export declare const Chips: FactoryComponent<IChipsOptions>;
+import m from 'mithril';
+export interface ChipData {
+    tag: string;
+    image?: string;
+    alt?: string;
+}
+export interface AutocompleteOption extends ChipData {
+    value?: string;
+}
+export interface ChipsAttributes {
+    id?: string;
+    data?: ChipData[];
+    placeholder?: string;
+    secondaryPlaceholder?: string;
+    autocompleteOptions?: {
+        data: Record<string, string | null> | AutocompleteOption[];
+        limit?: number;
+        minLength?: number;
+    };
+    limit?: number;
+    required?: boolean;
+    isMandatory?: boolean;
+    className?: string;
+    label?: string;
+    helperText?: string;
+    onchange?: (data: ChipData[]) => void;
+    onChipAdd?: (chip: ChipData) => void;
+    onChipDelete?: (chip: ChipData) => void;
+    onChipSelect?: (chip: ChipData) => void;
+}
+export declare const Chips: m.FactoryComponent<ChipsAttributes>;

package/dist/code-block.d.ts

@@ -1,9 +1,8 @@
-import './styles/codeblock.css';
-import { FactoryComponent, Attributes } from 'mithril';
-export interface ICodeBlock extends Attributes {
-    language?: string;
-    code: string | string[];
-    newRow?: boolean;
-}
-/** A simple code block without syntax high-lighting */
-export declare const CodeBlock: FactoryComponent<ICodeBlock>;
+import { FactoryComponent, Attributes } from 'mithril';
+export interface CodeBlockAttributes extends Attributes {
+    language?: string;
+    code: string | string[];
+    newRow?: boolean;
+}
+/** A simple code block without syntax high-lighting */
+export declare const CodeBlock: FactoryComponent<CodeBlockAttributes>;

package/dist/collapsible.d.ts

@@ -1,22 +1,26 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent, Attributes, Vnode } from 'mithril';
-export interface ICollapsibleItem extends Attributes {
-    /** Header of the collabsible item, may contain HTML or may be a Vnode */
-    header?: string | Vnode<any, any>;
-    /** Body of the collabsible item, may contain HTML or may be a Vnode */
-    body?: string | Vnode<any, any>;
-    /** If active, preselect the collabsible item. */
-    active?: boolean;
-    /** Add an material icon in front of the header. */
-    iconName?: string;
-}
-export interface ICollapsible extends Partial<M.CollapsibleOptions>, Attributes {
-    /** The list of accordeon/collabsible items */
-    items: ICollapsibleItem[];
-}
-export declare const CollapsibleItem: FactoryComponent<ICollapsibleItem>;
-/**
- * Creates a collabsible or accordion (via the accordion option, default true) component.
- * @see https://materializecss.com/collapsible.html
- */
-export declare const Collapsible: FactoryComponent<ICollapsible>;
+import { FactoryComponent, Attributes, Vnode } from 'mithril';
+export interface CollapsibleItem extends Attributes {
+    /** Header of the collabsible item, may contain HTML or may be a Vnode */
+    header?: string | Vnode<any, any>;
+    /** Body of the collabsible item, may contain HTML or may be a Vnode */
+    body?: string | Vnode<any, any>;
+    /** If active, preselect the collabsible item. */
+    active?: boolean;
+    /** Add an material icon in front of the header. */
+    iconName?: string;
+}
+export interface CollapsibleAttributes extends Attributes {
+    /** The list of accordeon/collabsible items */
+    items: CollapsibleItem[];
+    /** If true, only one item can be expanded at a time (accordion mode) */
+    accordion?: boolean;
+}
+export declare const CollapsibleItem: FactoryComponent<CollapsibleItem & {
+    isActive: boolean;
+    onToggle: () => void;
+}>;
+/**
+ * Creates a collabsible or accordion component with pure CSS/Mithril implementation.
+ * No MaterializeCSS JavaScript dependencies.
+ */
+export declare const Collapsible: FactoryComponent<CollapsibleAttributes>;

package/dist/collection.d.ts

@@ -1,49 +1,49 @@
-import { FactoryComponent, Attributes, Vnode } from 'mithril';
-export declare enum CollectionMode {
-    BASIC = 0,
-    LINKS = 1,
-    AVATAR = 2
-}
-export interface ICollectionItem {
-    /** If available, will be used as the key, so all items need an id. */
-    id?: string | number;
-    /** Title of the collection item */
-    title: string | Vnode<any, any>;
-    /** For links, may contain a URL reference */
-    href?: string;
-    /** For Avatar mode, may contain a URL reference to an image or a material icons class name */
-    avatar?: string;
-    /** Add a class to the avatar image or icon, e.g. a color 'red'. */
-    className?: string;
-    /** For Avatar mode, may contain a two-line trusted HTML content */
-    content?: string;
-    /** If active, preselect the collection item. */
-    active?: boolean;
-    /** Add a material icon as secondary content. */
-    iconName?: string;
-    /** Onclick event handler */
-    onclick?: (item: ICollectionItem) => void;
-    /** Any other virtual element properties, including attributes and event handlers. */
-    [property: string]: any;
-}
-export interface ICollection extends Attributes {
-    /** Optional header */
-    header?: string;
-    /** The list of items */
-    items: ICollectionItem[];
-    /** Mode of operation */
-    mode?: CollectionMode;
-}
-export declare const SecondaryContent: FactoryComponent<ICollectionItem>;
-export declare const ListItem: FactoryComponent<{
-    item: ICollectionItem;
-    mode: CollectionMode;
-}>;
-export declare const AnchorItem: FactoryComponent<{
-    item: ICollectionItem;
-}>;
-/**
- * Creates a Collection of items, optionally containing links, headers, secondary content or avatars.
- * @see https://materializecss.com/collections.html
- */
-export declare const Collection: FactoryComponent<ICollection>;
+import { FactoryComponent, Attributes, Vnode } from 'mithril';
+export declare enum CollectionMode {
+    BASIC = 0,
+    LINKS = 1,
+    AVATAR = 2
+}
+export interface CollectionItem {
+    /** If available, will be used as the key, so all items need an id. */
+    id?: string | number;
+    /** Title of the collection item */
+    title: string | Vnode<any, any>;
+    /** For links, may contain a URL reference */
+    href?: string;
+    /** For Avatar mode, may contain a URL reference to an image or a material icons class name */
+    avatar?: string;
+    /** Add a class to the avatar image or icon, e.g. a color 'red'. */
+    className?: string;
+    /** For Avatar mode, may contain a two-line trusted HTML content */
+    content?: string;
+    /** If active, preselect the collection item. */
+    active?: boolean;
+    /** Add a material icon as secondary content. */
+    iconName?: string;
+    /** Onclick event handler */
+    onclick?: (item: CollectionItem) => void;
+    /** Any other virtual element properties, including attributes and event handlers. */
+    [property: string]: any;
+}
+export interface CollectionAttributes extends Attributes {
+    /** Optional header */
+    header?: string;
+    /** The list of items */
+    items: CollectionItem[];
+    /** Mode of operation */
+    mode?: CollectionMode;
+}
+export declare const SecondaryContent: FactoryComponent<CollectionItem>;
+export declare const ListItem: FactoryComponent<{
+    item: CollectionItem;
+    mode: CollectionMode;
+}>;
+export declare const AnchorItem: FactoryComponent<{
+    item: CollectionItem;
+}>;
+/**
+ * Creates a Collection of items, optionally containing links, headers, secondary content or avatars.
+ * @see https://materializecss.com/collections.html
+ */
+export declare const Collection: FactoryComponent<CollectionAttributes>;

package/dist/dropdown.d.ts

@@ -1,46 +1,45 @@
-/// <reference types="materialize-css" />
-import { Component, Attributes } from 'mithril';
-export interface IDropdownOption {
-    /** ID property of the selected item */
-    id?: string | number;
-    /** Label to show in the dropdown */
-    label: string;
-    /** Can we select the item */
-    disabled?: boolean;
-    /** Display a Materials Icon in front of the label */
-    iconName?: string;
-    /** Add a divider */
-    divider?: boolean;
-}
-export interface IDropdownOptions extends Partial<M.DropdownOptions>, Attributes {
-    /**
-     * Optional id of the dropdown element
-     * @default 'dropdown'
-     */
-    id?: string;
-    /**
-     * Optional label when no item is selected
-     * @default 'Select'
-     */
-    label?: string;
-    key?: string | number;
-    /** If true, disable the selection */
-    disabled?: boolean;
-    /** Item array to show in the dropdown. If the value is not supplied, uses he name. */
-    items: IDropdownOption[];
-    /**
-     * Selected value or name
-     * @deprecated Use initialValue instead
-     */
-    checkedId?: string | number;
-    /** Selected value or name */
-    initialValue?: string | number;
-    /** When a value or name is selected */
-    onchange?: (value: string | number) => void;
-    /** Uses Materialize icons as a prefix or postfix. */
-    iconName?: string;
-    /** Add a description underneath the input field. */
-    helperText?: string;
-}
-/** Dropdown component */
-export declare const Dropdown: () => Component<IDropdownOptions>;
+import { Component, Attributes } from 'mithril';
+export interface DropdownItem<T extends string | number> {
+    /** ID property of the selected item */
+    id?: T;
+    /** Label to show in the dropdown */
+    label: string;
+    /** Can we select the item */
+    disabled?: boolean;
+    /** Display a Materials Icon in front of the label */
+    iconName?: string;
+    /** Add a divider */
+    divider?: boolean;
+}
+export interface DropdownAttributes<T extends string | number> extends Attributes {
+    /**
+     * Optional id of the dropdown element
+     * @default 'dropdown'
+     */
+    id?: T;
+    /**
+     * Optional label when no item is selected
+     * @default 'Select'
+     */
+    label?: string;
+    key?: string | number;
+    /** If true, disable the selection */
+    disabled?: boolean;
+    /** Item array to show in the dropdown. If the value is not supplied, uses he name. */
+    items: DropdownItem<T>[];
+    /**
+     * Selected value or name
+     * @deprecated Use initialValue instead
+     */
+    checkedId?: T;
+    /** Selected value or name */
+    initialValue?: T;
+    /** When a value or name is selected */
+    onchange?: (value: T) => void;
+    /** Uses Materialize icons as a prefix or postfix. */
+    iconName?: string;
+    /** Add a description underneath the input field. */
+    helperText?: string;
+}
+/** Pure TypeScript Dropdown component - no Materialize dependencies */
+export declare const Dropdown: <T extends string | number>() => Component<DropdownAttributes<T>>;

package/dist/floating-action-button.d.ts

@@ -1,34 +1,37 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent } from 'mithril';
-export interface IFloatingActionButton extends Partial<M.FloatingActionButtonOptions> {
-    /** Optional classes to add to the top element */
-    className?: string;
-    /** Optional style to add to the top element, e.g. for positioning it inline */
-    style?: string;
-    /** Material-icons name for the main FAB, @see https://materializecss.com/icons.html */
-    iconName: string;
-    /** Helper option to place the FAB inline instead of the bottom right of the display */
-    position?: 'left' | 'right' | 'inline-left' | 'inline-right';
-    /**
-     * Optional icon class, e.g. tiny (1em), small (2em), medium (4em), large (6em), or 'tiny right'.
-     * @default large
-     */
-    iconClass?: string;
-    /** The buttons you want to show */
-    buttons?: Array<{
-        /** Optional classes you want to add to the main element */
-        className?: string;
-        /** Name of the icon */
-        iconName: string;
-        /** Classes of the icon */
-        iconClass?: string;
-        /** On click function */
-        onClick?: (e: UIEvent) => void;
-    }>;
-}
-/**
- * A Floating Action Button.
- *
- * @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
- */
-export declare const FloatingActionButton: FactoryComponent<IFloatingActionButton>;
+import { FactoryComponent } from 'mithril';
+export interface FloatingActionButtonAttributes {
+    /** Optional classes to add to the top element */
+    className?: string;
+    /** Optional style to add to the top element, e.g. for positioning it inline */
+    style?: string;
+    /** Material-icons name for the main FAB, @see https://materializecss.com/icons.html */
+    iconName: string;
+    /** Helper option to place the FAB inline instead of the bottom right of the display */
+    position?: 'left' | 'right' | 'inline-left' | 'inline-right';
+    /**
+     * Optional icon class, e.g. tiny (1em), small (2em), medium (4em), large (6em), or 'tiny right'.
+     * @default large
+     */
+    iconClass?: string;
+    /** The buttons you want to show */
+    buttons?: Array<{
+        /** Optional classes you want to add to the main element */
+        className?: string;
+        /** Name of the icon */
+        iconName: string;
+        /** Classes of the icon */
+        iconClass?: string;
+        /** On click function */
+        onClick?: (e: UIEvent) => void;
+    }>;
+    /** Direction to open the buttons */
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    /** Whether to show the toolbar */
+    toolbarEnabled?: boolean;
+    /** Hover behavior */
+    hoverEnabled?: boolean;
+}
+/**
+ * Floating Action Button
+ */
+export declare const FloatingActionButton: FactoryComponent<FloatingActionButtonAttributes>;

package/dist/icon.d.ts

@@ -1,11 +1,11 @@
-import { FactoryComponent, Attributes } from 'mithril';
-export interface IMaterialIcon extends Attributes {
-    iconName: string;
-}
-/**
- * A simple material icon, defined by its icon name.
- *
- * @example m(Icon, { className: 'small' }, 'create') renders a small 'create' icon
- * @example m(Icon, { className: 'prefix' }, iconName) renders the icon as a prefix
- */
-export declare const Icon: FactoryComponent<IMaterialIcon>;
+import { FactoryComponent, Attributes } from 'mithril';
+export interface MaterialIcon extends Attributes {
+    iconName: string;
+}
+/**
+ * A simple material icon, defined by its icon name.
+ *
+ * @example m(Icon, { className: 'small' }, 'create') renders a small 'create' icon
+ * @example m(Icon, { className: 'prefix' }, iconName) renders the icon as a prefix
+ */
+export declare const Icon: FactoryComponent<MaterialIcon>;