mithril-materialized 0.19.4 → 1.0.0

package/dist/option.d.ts

@@ -1,4 +1,4 @@
-import { Vnode, FactoryComponent, Attributes } from 'mithril';
+import m, { Vnode, FactoryComponent, Attributes, Component } from 'mithril';
 export interface IInputCheckbox extends Attributes {
     /** Optional event handler when a checkbox is clicked */
     onchange?: (checked: boolean) => void;
@@ -11,30 +11,32 @@ export interface IInputCheckbox extends Attributes {
 }
 /** Component to show a check box */
 export declare const InputCheckbox: FactoryComponent<IInputCheckbox>;
-export interface IInputOption {
+export interface IInputOption<T extends string | number> {
     /** Option ID */
-    id: string | number;
-    /** Title or label */
+    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;
 }
-export interface IOptions extends Attributes {
+export interface IOptions<T extends string | number> extends Attributes {
     /** Element ID */
     id?: string;
     /** Optional title or label */
     label?: string;
     /** The options that you have */
-    options: IInputOption[];
+    options: IInputOption<T>[];
     /** Event handler that is called when an option is changed */
-    onchange?: (checkedId: Array<string | number>) => void;
+    onchange?: (checkedId: T[]) => void;
     /**
      * Selected id or ids (in case of multiple options)
      * @deprecated Please use initialValue instead
      */
-    checkedId?: string | number | Array<string | number>;
+    checkedId?: T | T[];
     /** Selected id or ids (in case of multiple options) */
-    initialValue?: string | number | Array<string | number>;
+    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 */
@@ -47,4 +49,4 @@ export interface IOptions extends Attributes {
     disabled?: boolean;
 }
 /** A list of checkboxes */
-export declare const Options: FactoryComponent<IOptions>;
+export declare const Options: <T extends string | number>() => m.Component<IOptions<T>, {}>;

package/dist/pickers.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="materialize-css" />
+/// <reference types="materialize-css" />
 import { FactoryComponent } from 'mithril';
 import { IInputOptions } from './input-options';
 /** Component to pick a date */

package/dist/radio.d.ts

@@ -1,18 +1,18 @@
-import { FactoryComponent, Attributes } from 'mithril';
+import m, { Attributes, Component } from 'mithril';
 import { IInputOption } from './option';
-export interface IRadioButtons extends Attributes {
+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[];
+    options: IInputOption<T>[];
     /** Event handler that is called when an option is changed */
-    onchange: (id: string | number) => void;
+    onchange: (id: T) => void;
     /** Selected id (in oninit lifecycle) */
-    initialValue?: string | number;
+    initialValue?: T;
     /** Selected id (in oninit and onupdate lifecycle) */
-    checkedId?: string | number;
+    checkedId?: T;
     /** Optional description */
     description?: string;
     /** If true, start on a new row */
@@ -24,14 +24,14 @@ export interface IRadioButtons extends Attributes {
     /** 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;
+export interface IRadioButton<T extends string | number> extends Attributes {
+    id: T;
     checked?: boolean;
-    onchange: (id: string | number) => void;
+    onchange: (id: T) => void;
     label: string;
     groupId: string;
     disabled?: boolean;
 }
-export declare const RadioButton: FactoryComponent<IRadioButton>;
+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,18 +1,18 @@
 /// <reference types="materialize-css" />
-import { FactoryComponent, Attributes } from 'mithril';
+import m, { Attributes, Component } from 'mithril';
 import { IInputOption } from './option';
-export interface ISelectOptions extends Attributes, Partial<M.FormSelectOptions> {
+export interface ISelectOptions<T extends string | number> extends Attributes, Partial<M.FormSelectOptions> {
     /** Options to select from */
-    options: IInputOption[];
+    options: IInputOption<T>[];
     /** Called when the value is changed, either contains a single or all selected (checked) ids */
-    onchange: (checkedIds: Array<string | number>) => void;
+    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?: string | number | Array<string | number>;
+    checkedId?: T | T[];
     /** Selected id or ids (in case of multiple options). Only processed in the oninit lifecycle. */
-    initialValue?: string | number | Array<string | number>;
+    initialValue?: T | T[];
     /** Select a single option or multiple options */
     multiple?: boolean;
     /** Optional label. */
@@ -42,4 +42,4 @@ export interface ISelectOptions extends Attributes, Partial<M.FormSelectOptions>
     required?: boolean;
 }
 /** Component to select from a list of values in a dropdowns */
-export declare const Select: FactoryComponent<ISelectOptions>;
+export declare const Select: <T extends string | number>() => m.Component<ISelectOptions<T>, {}>;

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "mithril-materialized",
-  "version": "0.19.4",
-  "description": "A materialize library for mithril.",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "exports": {
-    ".": "./dist/index.modern.js",
-    "./index.css": "./dist/index.css"
-  },
-  "unpkg": "dist/index.umd.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "microbundle ./src/index.ts",
-    "dev": "microbundle watch ./src/index.ts",
-    "start": "npm run dev",
-    "clean": "rimraf dist node_modules/.cache",
-    "link:old": "pnpm link",
-    "typedoc": "typedoc --out ../../docs/typedoc src",
-    "build:domain": "npm run clean && npm run build && typedoc --out ../../docs/typedoc src",
-    "dry-run": "npm publish --dry-run",
-    "patch-release": "npm run clean && npm run build && npm version patch --force -m \"Patch release\" && npm publish && git push --follow-tags",
-    "minor-release": "npm run clean && npm run build && npm version minor --force -m \"Minor release\" && npm publish && git push --follow-tags",
-    "major-release": "npm run clean && npm run build && npm version major --force -m \"Major release\" && npm publish && git push --follow-tags"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/erikvullings/mithril-materialized.git"
-  },
-  "keywords": [
-    "mithril",
-    "materialize-css"
-  ],
-  "author": "Erik Vullings <erik.vullings@gmail.com> (http://www.tno.nl)",
-  "license": "MIT",
-  "devDependencies": {
-    "@types/materialize-css": "^1.0.11",
-    "@types/mithril": "^2.0.8",
-    "js-yaml": "^4.1.0",
-    "microbundle": "^0.14.1",
-    "rimraf": "^3.0.2",
-    "tslib": "^2.3.1",
-    "typedoc": "^0.22.6",
-    "typescript": "^4.4.4"
-  },
-  "dependencies": {
-    "materialize-css": "^1.0.0",
-    "mithril": "^2.0.4"
-  }
-}
+{
+  "name": "mithril-materialized",
+  "version": "1.0.0",
+  "description": "A materialize library for mithril.",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "exports": {
+    ".": "./dist/index.modern.js",
+    "./index.css": "./dist/index.css"
+  },
+  "unpkg": "dist/index.umd.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "microbundle ./src/index.ts",
+    "dev": "microbundle watch ./src/index.ts",
+    "start": "npm run dev",
+    "clean": "rimraf dist node_modules/.cache",
+    "link:old": "pnpm link",
+    "typedoc": "typedoc --out ../../docs/typedoc src",
+    "build:domain": "npm run clean && npm run build && typedoc --out ../../docs/typedoc src",
+    "dry-run": "npm publish --dry-run",
+    "patch-release": "npm run clean && npm run build && npm version patch --force -m \"Patch release\" && npm publish && git push --follow-tags",
+    "minor-release": "npm run clean && npm run build && npm version minor --force -m \"Minor release\" && npm publish && git push --follow-tags",
+    "major-release": "npm run clean && npm run build && npm version major --force -m \"Major release\" && npm publish && git push --follow-tags"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/erikvullings/mithril-materialized.git"
+  },
+  "keywords": [
+    "mithril",
+    "materialize-css"
+  ],
+  "author": "Erik Vullings <erik.vullings@gmail.com> (http://www.tno.nl)",
+  "license": "MIT",
+  "dependencies": {
+    "mithril": "^2.2.2",
+    "materialize-css": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/materialize-css": "^1.0.11",
+    "@types/mithril": "^2.0.11",
+    "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"
+  }
+}

package/dist/kanban.d.ts

@@ -1,47 +0,0 @@
-import m, { Component, Attributes } from 'mithril';
-import { IModelField, IConvertibleType } from './layout-form-generator';
-import './styles/kanban.css';
-export interface IKanbanI18n {
-    newItem: string;
-    modalDeleteItem: string;
-    modalCreateNewItem: string;
-    modalEditNewItem: string;
-}
-export interface IKanban<T> extends Attributes {
-    /**
-     * Label for creating a new item
-     * @deprecated Use i18n instead
-     */
-    label?: string;
-    /** Label for creating a new item */
-    i18n?: IKanbanI18n;
-    /** The model representing the item's fields */
-    model: IModelField[];
-    /** The items that we want to show */
-    items?: T[];
-    /** Notify of changes */
-    onchange?: (items: T[]) => void;
-    /** If true, use a modal for editing with a fixed footer */
-    fixedFooter?: boolean;
-    /** Can we create and edit new items: default true */
-    canEdit?: boolean;
-    /** Can we sort items: default true */
-    canSort?: boolean;
-    /** Can we drag items - in this case, sorting is disabled: default false */
-    canDrag?: boolean;
-    /**
-     * Can we move items between lists (based on the same model): default false.
-     * Must be enabled on both lists in order to work.
-     */
-    moveBetweenList?: boolean;
-    /** Sort direction */
-    sortDirection?: 'asc' | 'desc';
-    /** Properties to sort */
-    sortProperties?: string[];
-    /** Property IDs which can always be edited, e.g. also in the list view */
-    editableIds?: string[];
-    /** If true, disable the item */
-    disabled?: boolean;
-}
-/** A flexible list of items, supporting drag-n-drop */
-export declare const Kanban: <T extends IConvertibleType>() => m.Component<Partial<IKanban<T>>, {}>;

package/dist/layout-form-generator.d.ts

@@ -1,74 +0,0 @@
-/// <reference types="materialize-css" />
-import 'tslib';
-import m, { Component } from 'mithril';
-import { IInputOption } from './option';
-/** List of components that can be used for generating a form */
-export declare type ComponentType = 'text' | 'number' | 'url' | 'email' | 'date' | 'time' | 'checkbox' | 'select' | 'options' | 'radios';
-/** Generic description of a form field, based on a union of the individual component options */
-export interface IModelField {
-    /** Name of the property in the generated object */
-    id: string;
-    /** Type of component to use for rendering the field. If empty, field will not be rendered. */
-    component?: ComponentType;
-    /** Label to display */
-    label?: string;
-    /** Optional class to append to the field */
-    className?: string;
-    /** Optional icon to display on the element, based on the materializecss.com/icons */
-    iconName?: string;
-    /** Optional class for the icon, e.g. to make it smaller or bigger */
-    iconClass?: string;
-    /** For text, may it have multiple lines */
-    multiline?: boolean;
-    /** If true, the item is required */
-    required?: boolean;
-    /** If true, the item is disabled */
-    disabled?: boolean;
-    /** Optional placeholder */
-    placeholder?: string;
-    /** Optional helper text */
-    helperText?: string;
-    /** Start a new row after this field */
-    newRow?: boolean;
-    /** Options for radios, options (checkboxes), and selections */
-    options?: IInputOption[];
-    /** If true, draw the radio buttons inline */
-    inline?: boolean;
-    /**
-     * If specified, generate a value automatically, e.g. to set an ID, or to use a GUID.
-     * Possible options are `guid` to generate a GUID, or 'id' to generate an `idXXXX`.
-     */
-    autogenerate?: 'guid' | 'id';
-}
-/** A data object that can be created */
-export interface IConvertibleType {
-    id: string | number;
-    [key: string]: undefined | string | number | boolean | Date | Array<string | number>;
-}
-/**
- * Convert a model field to a component.
- *
- * @param model Model properties
- * @param value Initial value of the property item
- * @param options Component options
- */
-export declare const fieldToComponent: ({ component, required: isMandatory, options: selectOptions, autogenerate, ...props }: IModelField, value?: string | number | boolean | Date | (string | number)[] | undefined, options?: {
-    onchange?: ((v: string | number | boolean | Date | Array<string | number>, overwrite?: boolean | undefined) => void) | undefined;
-    containerId?: string | undefined;
-    autofocus?: boolean | undefined;
-    disabled?: boolean | undefined;
-    multiline?: boolean | undefined;
-    key?: string | number | undefined;
-}) => m.Vnode<import("./input-options").IInputOptions<string>, unknown> | m.Vnode<import("./input-options").IInputOptions<number>, unknown> | m.Vnode<import("./option").IInputCheckbox, unknown> | m.Vnode<import("./select").ISelectOptions, unknown> | m.Vnode<import("./option").IOptions, unknown> | m.Vnode<import("./radio").IRadioButtons, unknown> | m.Vnode<import("./input-options").IInputOptions<Date> & Partial<M.DatepickerOptions>, unknown> | m.Vnode<import("./input-options").IInputOptions<string> & Partial<M.TimepickerOptions>, unknown> | undefined;
-/**
- * Generate a new group or form based on an object's model description, where a model consists of multiple fields.
- */
-export declare const LayoutForm: <T extends IConvertibleType>() => m.Component<{
-    el?: string | undefined;
-    model: IModelField[];
-    item: T;
-    containerId?: string | undefined;
-    disabled?: boolean | undefined;
-    editableIds?: (keyof T)[] | undefined;
-    onchange?: ((valid: boolean) => void) | undefined;
-}, {}>;