mithril-materialized 1.4.1 → 2.0.0-beta.1

package/dist/autocomplete.d.ts

@@ -1,6 +1,14 @@
 import { FactoryComponent } from 'mithril';
-import { IInputOptions } from './input-options';
-export interface IAutoCompleteOptions extends Partial<M.AutocompleteOptions>, IInputOptions<string> {
+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 */
-export declare const Autocomplete: FactoryComponent<IAutoCompleteOptions>;
+/** Component to auto complete your text input - Pure Mithril implementation */
+export declare const Autocomplete: FactoryComponent<AutoCompleteAttributes>;

package/dist/button.d.ts

@@ -1,5 +1,5 @@
 import m, { FactoryComponent, Attributes } from 'mithril';
-export interface IHtmlAttributes {
+export interface HtmlAttributes {
     id?: string;
     for?: string;
     placeholder?: string;
@@ -7,7 +7,7 @@ export interface IHtmlAttributes {
     disabled?: boolean;
     type?: 'submit' | 'button' | 'text' | 'textarea' | 'number';
 }
-export interface IMaterialButton extends Attributes {
+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 */
@@ -20,7 +20,7 @@ export interface IMaterialButton extends Attributes {
      */
     modalId?: string;
     /** Some additional HTML attributes that can be attached to the button */
-    attr?: IHtmlAttributes;
+    attr?: HtmlAttributes;
     /** Optional text-based tooltip, @see https://materializecss.com/tooltips.html */
     tooltip?: string;
     /** Optional location for the tooltip */
@@ -31,10 +31,10 @@ export interface IMaterialButton extends Attributes {
  *
  * @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
  */
-export declare const ButtonFactory: (element: string, defaultClassNames: string, type?: 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>;
+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,5 +1,5 @@
 import { FactoryComponent, Attributes } from 'mithril';
-export interface ICarouselItem extends Attributes {
+export interface CarouselItem extends Attributes {
     /** Relative page link, e.g. '#one' */
     href: string;
     /** Image source */
@@ -7,13 +7,32 @@ export interface ICarouselItem extends Attributes {
     /** Alternative name */
     alt?: string;
 }
-export interface ICarousel extends Partial<M.CarouselOptions>, Attributes {
+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: ICarouselItem[];
+    items: CarouselItem[];
+    /** Called when carousel item changes */
+    onCycleTo?: (item: CarouselItem, index: number, dragged: boolean) => void;
 }
-export declare const CarouselItem: FactoryComponent<ICarouselItem>;
 /**
- * Creates a collabsible or accordion (via the accordion option, default true) component.
- * @see https://materializecss.com/carousel.html
+ * Materialize CSS Carousel component with dynamic positioning
+ * Port of the original MaterializeCSS carousel logic
  */
-export declare const Carousel: FactoryComponent<ICarousel>;
+export declare const Carousel: FactoryComponent<CarouselAttributes>;

package/dist/chip.d.ts

@@ -7,7 +7,7 @@ export interface ChipData {
 export interface AutocompleteOption extends ChipData {
     value?: string;
 }
-export interface IChipsOptions {
+export interface ChipsAttributes {
     id?: string;
     data?: ChipData[];
     placeholder?: string;
@@ -28,4 +28,4 @@ export interface IChipsOptions {
     onChipDelete?: (chip: ChipData) => void;
     onChipSelect?: (chip: ChipData) => void;
 }
-export declare const Chips: m.FactoryComponent<IChipsOptions>;
+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 {
+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<ICodeBlock>;
+export declare const CodeBlock: FactoryComponent<CodeBlockAttributes>;

package/dist/collapsible.d.ts

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

package/dist/collection.d.ts

@@ -4,7 +4,7 @@ export declare enum CollectionMode {
     LINKS = 1,
     AVATAR = 2
 }
-export interface ICollectionItem {
+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 */
@@ -22,28 +22,28 @@ export interface ICollectionItem {
     /** Add a material icon as secondary content. */
     iconName?: string;
     /** Onclick event handler */
-    onclick?: (item: ICollectionItem) => void;
+    onclick?: (item: CollectionItem) => void;
     /** Any other virtual element properties, including attributes and event handlers. */
     [property: string]: any;
 }
-export interface ICollection extends Attributes {
+export interface CollectionAttributes extends Attributes {
     /** Optional header */
     header?: string;
     /** The list of items */
-    items: ICollectionItem[];
+    items: CollectionItem[];
     /** Mode of operation */
     mode?: CollectionMode;
 }
-export declare const SecondaryContent: FactoryComponent<ICollectionItem>;
+export declare const SecondaryContent: FactoryComponent<CollectionItem>;
 export declare const ListItem: FactoryComponent<{
-    item: ICollectionItem;
+    item: CollectionItem;
     mode: CollectionMode;
 }>;
 export declare const AnchorItem: FactoryComponent<{
-    item: ICollectionItem;
+    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<ICollection>;
+export declare const Collection: FactoryComponent<CollectionAttributes>;

package/dist/dropdown.d.ts

@@ -1,5 +1,5 @@
 import { Component, Attributes } from 'mithril';
-export interface IDropdownOption<T extends string | number> {
+export interface DropdownItem<T extends string | number> {
     /** ID property of the selected item */
     id?: T;
     /** Label to show in the dropdown */
@@ -11,7 +11,7 @@ export interface IDropdownOption<T extends string | number> {
     /** Add a divider */
     divider?: boolean;
 }
-export interface IDropdownOptions<T extends string | number> extends Partial<M.DropdownOptions>, Attributes {
+export interface DropdownAttributes<T extends string | number> extends Attributes {
     /**
      * Optional id of the dropdown element
      * @default 'dropdown'
@@ -26,7 +26,7 @@ export interface IDropdownOptions<T extends string | number> extends Partial<M.D
     /** 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<T>[];
+    items: DropdownItem<T>[];
     /**
      * Selected value or name
      * @deprecated Use initialValue instead
@@ -41,5 +41,5 @@ export interface IDropdownOptions<T extends string | number> extends Partial<M.D
     /** Add a description underneath the input field. */
     helperText?: string;
 }
-/** Dropdown component */
-export declare const Dropdown: <T extends string | number>() => Component<IDropdownOptions<T>>;
+/** 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,5 +1,5 @@
 import { FactoryComponent } from 'mithril';
-export interface IFloatingActionButton extends Partial<M.FloatingActionButtonOptions> {
+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 */
@@ -24,10 +24,14 @@ export interface IFloatingActionButton extends Partial<M.FloatingActionButtonOpt
         /** 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;
 }
 /**
- * A Floating Action Button.
- *
- * @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
+ * Floating Action Button
  */
-export declare const FloatingActionButton: FactoryComponent<IFloatingActionButton>;
+export declare const FloatingActionButton: FactoryComponent<FloatingActionButtonAttributes>;

package/dist/icon.d.ts

@@ -1,5 +1,5 @@
 import { FactoryComponent, Attributes } from 'mithril';
-export interface IMaterialIcon extends Attributes {
+export interface MaterialIcon extends Attributes {
     iconName: string;
 }
 /**
@@ -8,4 +8,4 @@ export interface IMaterialIcon extends Attributes {
  * @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>;
+export declare const Icon: FactoryComponent<MaterialIcon>;