mithril-materialized 2.0.0-beta.3 → 2.0.0-beta.5

package/dist/input-options.d.ts

@@ -1,5 +1,5 @@
 import { Attributes } from 'mithril';
-export interface InputAttributes<T = string> extends Attributes {
+export interface InputAttrs<T = string> extends Attributes {
     /** Optional label. */
     label?: string;
     /** Optional ID. */

package/dist/input.d.ts

@@ -1,5 +1,5 @@
 import m, { FactoryComponent, Attributes } from 'mithril';
-import { InputAttributes } from './input-options';
+import { InputAttrs } from './input-options';
 /** Character counter component that tracks text length against maxLength */
 export declare const CharacterCounter: FactoryComponent<{
     currentLength: number;
@@ -7,22 +7,22 @@ export declare const CharacterCounter: FactoryComponent<{
     show: boolean;
 }>;
 /** Create a TextArea */
-export declare const TextArea: FactoryComponent<InputAttributes<string>>;
+export declare const TextArea: FactoryComponent<InputAttrs<string>>;
 export type InputType = 'url' | 'color' | 'text' | 'number' | 'email' | 'range' | 'password';
 /** Component for entering some text */
-export declare const TextInput: m.FactoryComponent<InputAttributes<string>>;
+export declare const TextInput: m.FactoryComponent<InputAttrs<string>>;
 /** Component for entering a password */
-export declare const PasswordInput: m.FactoryComponent<InputAttributes<string>>;
+export declare const PasswordInput: m.FactoryComponent<InputAttrs<string>>;
 /** Component for entering a number */
-export declare const NumberInput: m.FactoryComponent<InputAttributes<number>>;
+export declare const NumberInput: m.FactoryComponent<InputAttrs<number>>;
 /** Component for entering a URL */
-export declare const UrlInput: m.FactoryComponent<InputAttributes<string>>;
+export declare const UrlInput: m.FactoryComponent<InputAttrs<string>>;
 /** Component for entering a color */
-export declare const ColorInput: m.FactoryComponent<InputAttributes<string>>;
+export declare const ColorInput: m.FactoryComponent<InputAttrs<string>>;
 /** Component for entering a range */
-export declare const RangeInput: m.FactoryComponent<InputAttributes<number>>;
+export declare const RangeInput: m.FactoryComponent<InputAttrs<number>>;
 /** Component for entering an email */
-export declare const EmailInput: m.FactoryComponent<InputAttributes<string>>;
+export declare const EmailInput: m.FactoryComponent<InputAttrs<string>>;
 export interface FileInputAttrs extends Attributes {
     /** Displayed on the button, @default File */
     label?: string;

package/dist/label.d.ts

@@ -1,6 +1,6 @@
 import { FactoryComponent, Component, Attributes } from 'mithril';
 export declare const Mandatory: Component;
-export interface LabelAttributes extends Attributes {
+export interface LabelAttrs extends Attributes {
     /** Optional title/label */
     label?: string;
     /** Optional ID */
@@ -11,7 +11,7 @@ export interface LabelAttributes extends Attributes {
     isActive?: boolean | string;
 }
 /** Simple label element, used for most components. */
-export declare const Label: FactoryComponent<LabelAttributes>;
+export declare const Label: FactoryComponent<LabelAttrs>;
 export interface HelperTextOptions extends Attributes {
     helperText?: string;
     dataError?: string;

package/dist/material-box.d.ts

@@ -13,7 +13,7 @@ export interface MaterialBoxOptions {
     /** Callback when materialbox closing animation is complete */
     onCloseEnd?: () => void;
 }
-export interface MaterialBoxAttributes extends MaterialBoxOptions, Attributes {
+export interface MaterialBoxAttrs extends MaterialBoxOptions, Attributes {
     /** Source image path */
     src: string;
     /** Alt text for the image */
@@ -35,4 +35,4 @@ export interface MaterialBoxAttributes extends MaterialBoxOptions, Attributes {
  * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
  * No MaterializeCSS dependencies
  */
-export declare const MaterialBox: FactoryComponent<MaterialBoxAttributes>;
+export declare const MaterialBox: FactoryComponent<MaterialBoxAttrs>;

package/dist/modal.d.ts

@@ -3,7 +3,7 @@ export interface ModalState {
     isOpen: boolean;
     id: string;
 }
-export interface ModalAttributes extends Attributes {
+export interface ModalAttrs extends Attributes {
     id: string;
     title: string;
     description?: string | Vnode<any, any>;
@@ -38,4 +38,4 @@ export interface ModalAttributes extends Attributes {
  * CSS-only Modal Panel component - no JavaScript dependencies
  * Uses modern CSS techniques for modal functionality
  */
-export declare const ModalPanel: FactoryComponent<ModalAttributes>;
+export declare const ModalPanel: FactoryComponent<ModalAttrs>;

package/dist/option.d.ts

@@ -1,5 +1,5 @@
 import { Vnode, FactoryComponent, Attributes, Component } from 'mithril';
-export interface InputCheckboxAttributes extends Attributes {
+export interface InputCheckboxAttrs extends Attributes {
     /** Optional event handler when a checkbox is clicked */
     onchange?: (checked: boolean) => void;
     /** Label of the checkbox, can be a string or Vnode */
@@ -12,7 +12,7 @@ export interface InputCheckboxAttributes extends Attributes {
     inputId?: string;
 }
 /** Component to show a check box */
-export declare const InputCheckbox: FactoryComponent<InputCheckboxAttributes>;
+export declare const InputCheckbox: FactoryComponent<InputCheckboxAttrs>;
 export interface InputOption<T extends string | number> {
     /** Option ID */
     id: T;
@@ -31,7 +31,7 @@ export interface InputOption<T extends string | number> {
     /** Optional description */
     description?: string;
 }
-export interface OptionsAttributes<T extends string | number> extends Attributes {
+export interface OptionsAttrs<T extends string | number> extends Attributes {
     /** Element ID */
     id?: string;
     /** Optional title or label */
@@ -58,4 +58,4 @@ export interface OptionsAttributes<T extends string | number> extends Attributes
     showSelectAll?: boolean;
 }
 /** A list of checkboxes */
-export declare const Options: <T extends string | number>() => Component<OptionsAttributes<T>>;
+export declare const Options: <T extends string | number>() => Component<OptionsAttrs<T>>;

package/dist/pagination.d.ts

@@ -3,7 +3,7 @@ export interface PaginationItem extends Attributes {
     href: string;
     disabled?: boolean;
 }
-export interface PaginationAttributes extends Attributes {
+export interface PaginationAttrs extends Attributes {
     /**
      * How many items do we show
      * @default 9 or items.length, whatever is the smallest
@@ -13,4 +13,4 @@ export interface PaginationAttributes extends Attributes {
     curPage?: number;
     items: PaginationItem[];
 }
-export declare const Pagination: FactoryComponent<PaginationAttributes>;
+export declare const Pagination: FactoryComponent<PaginationAttrs>;

package/dist/parallax.d.ts

@@ -1,5 +1,5 @@
 import { FactoryComponent, Attributes } from 'mithril';
-export interface ParallaxAttributes extends Attributes {
+export interface ParallaxAttrs extends Attributes {
     /** Enable responsive parallax (disable on mobile for performance) */
     responsiveThreshold?: number;
     /** Image source */
@@ -11,4 +11,4 @@ export interface ParallaxAttributes extends Attributes {
  * MaterializeCSS Parallax component with dynamic positioning
  * Port of the original MaterializeCSS parallax logic
  */
-export declare const Parallax: FactoryComponent<ParallaxAttributes>;
+export declare const Parallax: FactoryComponent<ParallaxAttrs>;

package/dist/pushpin.d.ts

@@ -0,0 +1,32 @@
+import { FactoryComponent, Attributes } from 'mithril';
+export interface PushpinOptions {
+    /** Distance from top of page where element becomes fixed */
+    top?: number;
+    /** Distance from bottom of page where element stops being fixed */
+    bottom?: number;
+    /** Offset for calculations */
+    offset?: number;
+    /** Called when pushpin position changes */
+    onPositionChange?: (position: 'pin-top' | 'pinned' | 'pin-bottom') => void;
+}
+export declare class Pushpin {
+    el: HTMLElement;
+    options: Required<PushpinOptions>;
+    private state;
+    private static defaults;
+    private _updateElementPositionBound;
+    constructor(el: HTMLElement, options?: PushpinOptions);
+    static getInstance(el: HTMLElement): Pushpin | undefined;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _updateElementPosition(): void;
+    _removePinClasses(): void;
+    _updatePosition(): void;
+}
+export interface PushpinAttrs extends Attributes, PushpinOptions {
+    /** Element selector or reference to attach pushpin to */
+    targetSelector?: string;
+}
+export declare const PushpinComponent: FactoryComponent<PushpinAttrs>;
+export declare const initPushpins: (selector?: string, options?: PushpinOptions) => Pushpin[];

package/dist/radio.d.ts

@@ -1,6 +1,6 @@
 import { Attributes, Component } from 'mithril';
 import { InputOption } from './option';
-export interface RadioButtonsAttributes<T extends string | number> extends Attributes {
+export interface RadioButtonsAttrs<T extends string | number> extends Attributes {
     /** Element ID */
     id?: string;
     /** Optional title or label */
@@ -26,7 +26,7 @@ export interface RadioButtonsAttributes<T extends string | number> extends Attri
     /** Layout for the options: 'vertical' (default) or 'horizontal' */
     layout?: 'vertical' | 'horizontal';
 }
-export interface RadioButtonAttributes<T extends string | number> extends Attributes {
+export interface RadioButtonAttrs<T extends string | number> extends Attributes {
     id: T;
     checked?: boolean;
     onchange: (id: T) => void;
@@ -36,6 +36,6 @@ export interface RadioButtonAttributes<T extends string | number> extends Attrib
     /** Optional input id for the radio button */
     inputId?: string;
 }
-export declare const RadioButton: <T extends string | number>() => Component<RadioButtonAttributes<T>>;
+export declare const RadioButton: <T extends string | number>() => Component<RadioButtonAttrs<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>>;
+export declare const RadioButtons: <T extends string | number>() => Component<RadioButtonsAttrs<T>>;

package/dist/search-select.d.ts

@@ -4,7 +4,7 @@ export interface Option<T extends string | number> {
     label?: string;
     disabled?: boolean;
 }
-export interface SearchSelectAttributes<T extends string | number> extends Attributes {
+export interface SearchSelectAttrs<T extends string | number> extends Attributes {
     /** Options to display in the select */
     options?: Option<T>[];
     /** Initial value */
@@ -37,5 +37,5 @@ interface SearchSelectState<T extends string | number> {
 /**
  * Mithril Factory Component for Multi-Select Dropdown with search
  */
-export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttributes<T>, SearchSelectState<T>>;
+export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttrs<T>, SearchSelectState<T>>;
 export {};

package/dist/select.d.ts

@@ -1,6 +1,6 @@
 import { Attributes, Component } from 'mithril';
 import { InputOption } from './option';
-export interface SelectAttributes<T extends string | number> extends Attributes {
+export interface SelectAttrs<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 */
@@ -43,4 +43,4 @@ export interface SelectAttributes<T extends string | number> extends Attributes
     showClearButton?: boolean;
 }
 /** Select component */
-export declare const Select: <T extends string | number>() => Component<SelectAttributes<T>>;
+export declare const Select: <T extends string | number>() => Component<SelectAttrs<T>>;

package/dist/switch.d.ts

@@ -1,6 +1,6 @@
 import { FactoryComponent } from 'mithril';
-import { InputAttributes } from './input-options';
-export interface SwitchOptions extends Partial<InputAttributes<boolean>> {
+import { InputAttrs } from './input-options';
+export interface SwitchOptions extends Partial<InputAttrs<boolean>> {
     /** Left text label */
     left?: string;
     /** Right text label */

package/dist/tabs.d.ts

@@ -40,7 +40,7 @@ export interface TabsOptions {
     /** Enable swiping between tabs on mobile */
     swipeable?: boolean;
 }
-export interface TabsAttributes extends TabsOptions, Attributes {
+export interface TabsAttrs extends TabsOptions, Attributes {
     /** Selected tab id, takes precedence over tab.active property */
     selectedTabId?: string;
     /**
@@ -54,4 +54,4 @@ export interface TabsAttributes extends TabsOptions, Attributes {
     onTabChange?: (tabId: string) => void;
 }
 /** CSS-only Tabs component - no MaterializeCSS dependencies */
-export declare const Tabs: FactoryComponent<TabsAttributes>;
+export declare const Tabs: FactoryComponent<TabsAttrs>;

package/dist/timepicker.d.ts

@@ -0,0 +1,42 @@
+import { FactoryComponent } from 'mithril';
+import { InputAttrs } from './input-options';
+export interface TimepickerI18n {
+    cancel?: string;
+    clear?: string;
+    done?: string;
+}
+export interface TimepickerOptions {
+    dialRadius?: number;
+    outerRadius?: number;
+    innerRadius?: number;
+    tickRadius?: number;
+    duration?: number;
+    container?: string | null;
+    defaultTime?: string;
+    fromNow?: number;
+    showClearBtn?: boolean;
+    i18n?: TimepickerI18n;
+    autoClose?: boolean;
+    twelveHour?: boolean;
+    vibrate?: boolean;
+    onOpen?: () => void;
+    onOpenStart?: () => void;
+    onOpenEnd?: () => void;
+    onCloseStart?: () => void;
+    onCloseEnd?: () => void;
+    onSelect?: (hour: number, minute: number) => void;
+}
+export interface TimePickerAttrs extends InputAttrs<string>, TimepickerOptions {
+    /** Use inline mode (HTML5 time input) instead of modal, default true */
+    useModal?: boolean;
+    /** Allow format toggle between 12h/24h (for inline mode) */
+    allowFormatToggle?: boolean;
+    /** Clear button label */
+    clearLabel?: string;
+    /** Close button label */
+    closeLabel?: string;
+}
+/**
+ * TimePicker component based on original Materialize CSS timepicker
+ */
+export declare const TimePicker: FactoryComponent<TimePickerAttrs>;

package/dist/toast.d.ts

@@ -0,0 +1,45 @@
+import { FactoryComponent } from 'mithril';
+export interface ToastOptions {
+    /** HTML content for the toast */
+    html?: string;
+    /** Display length in milliseconds */
+    displayLength?: number;
+    /** Animation in duration in milliseconds */
+    inDuration?: number;
+    /** Animation out duration in milliseconds */
+    outDuration?: number;
+    /** Additional CSS classes */
+    classes?: string;
+    /** Callback function called when toast is dismissed */
+    completeCallback?: () => void;
+    /** Activation percentage for swipe dismissal */
+    activationPercent?: number;
+}
+export declare class Toast {
+    el: HTMLElement;
+    options: Required<ToastOptions>;
+    private state;
+    private static _toasts;
+    private static _container;
+    private static _draggedToast;
+    private static defaults;
+    constructor(options?: ToastOptions);
+    static getInstance(el: HTMLElement): Toast | undefined;
+    static _createContainer(): void;
+    static _removeContainer(): void;
+    static _onDragStart: (e: Event) => void;
+    static _onDragMove: (e: Event) => void;
+    static _onDragEnd: () => void;
+    static _xPos(e: Event): number;
+    static dismissAll(): void;
+    _createToast(): HTMLElement;
+    _animateIn(): void;
+    _setTimer(): void;
+    dismiss(): void;
+}
+export declare const toast: (options: ToastOptions) => Toast;
+export interface ToastComponentAttrs extends ToastOptions {
+    /** Whether to show the toast */
+    show?: boolean;
+}
+export declare const ToastComponent: FactoryComponent<ToastComponentAttrs>;

package/dist/tooltip.d.ts

@@ -0,0 +1,59 @@
+import { FactoryComponent, Attributes } from 'mithril';
+export interface TooltipOptions {
+    /** Delay before tooltip appears on hover */
+    enterDelay?: number;
+    /** Delay before tooltip disappears after hover ends */
+    exitDelay?: number;
+    /** HTML content for the tooltip */
+    html?: string | null;
+    /** Margin from element */
+    margin?: number;
+    /** Animation in duration */
+    inDuration?: number;
+    /** Animation out duration */
+    outDuration?: number;
+    /** Position of tooltip */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Movement during transition */
+    transitionMovement?: number;
+}
+export declare class Tooltip {
+    el: HTMLElement;
+    tooltipEl: HTMLElement;
+    options: Required<TooltipOptions>;
+    private state;
+    private static defaults;
+    private _handleMouseEnterBound;
+    private _handleMouseLeaveBound;
+    private _handleFocusBound;
+    private _handleBlurBound;
+    constructor(el: HTMLElement, options?: TooltipOptions);
+    static getInstance(el: HTMLElement): Tooltip | undefined;
+    destroy(): void;
+    _appendTooltipEl(): void;
+    _updateTooltipContent(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    open(isManual?: boolean): void;
+    close(): void;
+    _setExitDelayTimeout(): void;
+    _setEnterDelayTimeout(isManual: boolean): void;
+    _positionTooltip(): void;
+    _repositionWithinScreen(x: number, y: number, width: number, height: number): {
+        x: number;
+        y: number;
+    };
+    _animateIn(): void;
+    _animateOut(): void;
+    _handleMouseEnter(): void;
+    _handleMouseLeave(): void;
+    _handleFocus(): void;
+    _handleBlur(): void;
+    _getAttributeOptions(): Partial<TooltipOptions>;
+}
+export interface TooltipComponentAttrs extends Attributes, TooltipOptions {
+    /** Element selector or reference to attach tooltip to */
+    targetSelector?: string;
+}
+export declare const TooltipComponent: FactoryComponent<TooltipComponentAttrs>;
+export declare const initTooltips: (selector?: string, options?: TooltipOptions) => Tooltip[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -19,6 +19,7 @@
     "./esm": "./dist/index.esm.js",
     "./umd": "./dist/index.umd.js",
     "./index.css": "./dist/index.css",
+    "./index.min.css": "./dist/index.min.css",
     "./sass/*": "./sass/*"
   },
   "sideEffects": false,
@@ -27,7 +28,8 @@
     "sass"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs",
+    "build": "rollup -c rollup.config.mjs && npm run build:css-min",
+    "build:css-min": "sass --no-source-map --style=compressed ./src/index.scss ./dist/index.min.css",
     "dev": "rollup -c rollup.config.mjs -w",
     "start": "npm run dev",
     "clean": "rimraf dist node_modules/.cache",

package/sass/components/_datepicker.scss

@@ -146,6 +146,10 @@
   width: 280px;
   font-size: 1rem;
   margin: 0 auto;
+  
+  &.with-week-numbers {
+    width: 310px;
+  }
 
   thead {
     border-bottom: none;
@@ -154,6 +158,14 @@
   th {
     padding: 10px 5px;
     text-align: center;
+    
+    &.datepicker-week-header {
+      color: rgba(0, 0, 0, 0.38);
+      font-size: 0.8rem;
+      font-weight: 600;
+      width: 30px;
+      padding: 10px 2px;
+    }
   }
 
   tr {
@@ -181,15 +193,28 @@
       pointer-events: none;
     }
 
+    &.datepicker-week-number {
+      color: rgba(0, 0, 0, 0.38);
+      font-size: 0.8rem;
+      font-weight: 600;
+      text-align: center;
+      vertical-align: middle;
+      border-radius: 0;
+      width: 30px;
+      padding: 5px 2px;
+      background-color: rgba(0, 0, 0, 0.02);
+      border-right: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
     border-radius: 50%;
     padding: 0;
   }
 }
 
 .datepicker-day-button {
-  &:focus {
-    background-color: #eee;
-  }
+  // &:focus {
+  //   background-color: #eee;
+  // }
 
   background-color: transparent;
   border: none;
@@ -244,6 +269,10 @@
   .datepicker-footer {
     width: 320px;
   }
+  
+  .datepicker-table.with-week-numbers {
+    width: 350px;
+  }
 
   .datepicker-day-button {
     line-height: 44px;