mithril-materialized 1.0.0 → 1.1.0

package/dist/pagination.d.ts

@@ -1,20 +1,20 @@
-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, 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>;

package/dist/parallax.d.ts

@@ -1,13 +1,13 @@
-/// <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>;
+/// <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>;

package/dist/pickers.d.ts

@@ -1,8 +1,8 @@
-/// <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>>;
+/// <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>>;

package/dist/radio.d.ts

@@ -1,37 +1,37 @@
-import m, { Attributes, Component } from 'mithril';
-import { IInputOption } from './option';
-export interface IRadioButtons<T extends string | number> extends Attributes {
-    /** Element ID */
-    id?: string;
-    /** Optional title or label */
-    label?: string;
-    /** The options that you have */
-    options: IInputOption<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;
-}
-export interface IRadioButton<T extends string | number> extends Attributes {
-    id: T;
-    checked?: boolean;
-    onchange: (id: T) => void;
-    label: string;
-    groupId: string;
-    disabled?: boolean;
-}
-export declare const RadioButton: <T extends string | number>() => m.Component<IRadioButton<T>, {}>;
-/** Component to show a list of radio buttons, from which you can choose one. */
-export declare const RadioButtons: <T extends string | number>() => m.Component<IRadioButtons<T>, {}>;
+import m, { Attributes, Component } from 'mithril';
+import { IInputOption } from './option';
+export interface IRadioButtons<T extends string | number> extends Attributes {
+    /** Element ID */
+    id?: string;
+    /** Optional title or label */
+    label?: string;
+    /** The options that you have */
+    options: IInputOption<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;
+}
+export interface IRadioButton<T extends string | number> extends Attributes {
+    id: T;
+    checked?: boolean;
+    onchange: (id: T) => void;
+    label: string;
+    groupId: string;
+    disabled?: boolean;
+}
+export declare const RadioButton: <T extends string | number>() => m.Component<IRadioButton<T>, {}>;
+/** Component to show a list of radio buttons, from which you can choose one. */
+export declare const RadioButtons: <T extends string | number>() => m.Component<IRadioButtons<T>, {}>;

package/dist/select.d.ts

@@ -1,45 +1,47 @@
-/// <reference types="materialize-css" />
-import m, { Attributes, Component } from 'mithril';
-import { IInputOption } from './option';
-export interface ISelectOptions<T extends string | number> extends Attributes, Partial<M.FormSelectOptions> {
-    /** Options to select from */
-    options: IInputOption<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;
-}
-/** Component to select from a list of values in a dropdowns */
-export declare const Select: <T extends string | number>() => m.Component<ISelectOptions<T>, {}>;
+/// <reference types="materialize-css" />
+import m, { Attributes, Component } from 'mithril';
+import { IInputOption } from './option';
+export interface ISelectOptions<T extends string | number> extends Attributes, Partial<M.FormSelectOptions> {
+    /** Options to select from */
+    options: IInputOption<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;
+}
+/** Component to select from a list of values in a dropdowns */
+export declare const Select: <T extends string | number>() => m.Component<ISelectOptions<T>, {}>;

package/dist/switch.d.ts

@@ -1,13 +1,13 @@
-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 { 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>;

package/dist/tabs.d.ts

@@ -1,45 +1,45 @@
-/// <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>;
+/// <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 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>;

package/dist/timeline.d.ts

@@ -1,24 +1,24 @@
-import { Vnode, FactoryComponent, Attributes } from 'mithril';
-import './styles/timeline.css';
-export interface ITimelineItem {
-    id?: string;
-    title?: Vnode<any, any> | string;
-    datetime: Date;
-    iconName?: string;
-    active?: boolean;
-    content?: Vnode<any, any> | string;
-}
-export interface ITimeline extends Attributes {
-    items: ITimelineItem[];
-    /** When an item is selected, call this function */
-    onSelect?: (ti: ITimelineItem) => void;
-    /** Formatter for the dates, @default date/month/year in UTC */
-    dateFormatter?: (d: Date) => string;
-    /** Formatter for the time @default HH:mm in UTC */
-    timeFormatter?: (d: Date) => string;
-}
-/**
- * A timeline component to generate a simple vertical timeline based on Codrops' Vertical Timeline.
- * @see https://tympanus.net/codrops/2013/05/02/vertical-timeline/
- */
-export declare const Timeline: FactoryComponent<ITimeline>;
+import { Vnode, FactoryComponent, Attributes } from 'mithril';
+import './styles/timeline.css';
+export interface ITimelineItem {
+    id?: string;
+    title?: Vnode<any, any> | string;
+    datetime: Date;
+    iconName?: string;
+    active?: boolean;
+    content?: Vnode<any, any> | string;
+}
+export interface ITimeline extends Attributes {
+    items: ITimelineItem[];
+    /** When an item is selected, call this function */
+    onSelect?: (ti: ITimelineItem) => void;
+    /** Formatter for the dates, @default date/month/year in UTC */
+    dateFormatter?: (d: Date) => string;
+    /** Formatter for the time @default HH:mm in UTC */
+    timeFormatter?: (d: Date) => string;
+}
+/**
+ * A timeline component to generate a simple vertical timeline based on Codrops' Vertical Timeline.
+ * @see https://tympanus.net/codrops/2013/05/02/vertical-timeline/
+ */
+export declare const Timeline: FactoryComponent<ITimeline>;

package/dist/utils.d.ts

@@ -1,70 +1,70 @@
-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;
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -11,7 +11,7 @@
   "unpkg": "dist/index.umd.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "microbundle ./src/index.ts",
+    "build": "microbundle build ./src/index.ts",
     "dev": "microbundle watch ./src/index.ts",
     "start": "npm run dev",
     "clean": "rimraf dist node_modules/.cache",
@@ -39,12 +39,12 @@
   },
   "devDependencies": {
     "@types/materialize-css": "^1.0.11",
-    "@types/mithril": "^2.0.11",
+    "@types/mithril": "^2.0.14",
     "js-yaml": "^4.1.0",
-    "microbundle": "^0.15.0",
-    "rimraf": "^3.0.2",
-    "tslib": "^2.4.0",
-    "typedoc": "^0.22.18",
-    "typescript": "^4.7.4"
+    "microbundle": "^0.15.1",
+    "rimraf": "^5.0.1",
+    "tslib": "^2.6.2",
+    "typedoc": "^0.25.1",
+    "typescript": "^5.2.2"
   }
 }