mithril-materialized 1.4.2 → 2.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/README.md +112 -351
  2. package/dist/autocomplete.d.ts +12 -4
  3. package/dist/button.d.ts +10 -10
  4. package/dist/carousel.d.ts +26 -7
  5. package/dist/chip.d.ts +2 -2
  6. package/dist/code-block.d.ts +2 -3
  7. package/dist/collapsible.d.ts +12 -7
  8. package/dist/collection.d.ts +8 -8
  9. package/dist/dropdown.d.ts +5 -5
  10. package/dist/floating-action-button.d.ts +9 -5
  11. package/dist/icon.d.ts +2 -2
  12. package/dist/index.css +7968 -2
  13. package/dist/index.d.ts +1 -2
  14. package/dist/index.esm.js +4211 -2
  15. package/dist/index.js +4265 -2
  16. package/dist/index.umd.js +4269 -2
  17. package/dist/input-options.d.ts +3 -1
  18. package/dist/input.d.ts +17 -12
  19. package/dist/label.d.ts +4 -5
  20. package/dist/material-box.d.ts +22 -4
  21. package/dist/material-icon.d.ts +14 -0
  22. package/dist/modal.d.ts +23 -7
  23. package/dist/option.d.ts +12 -11
  24. package/dist/pagination.d.ts +5 -9
  25. package/dist/parallax.d.ts +8 -6
  26. package/dist/pickers.d.ts +129 -5
  27. package/dist/radio.d.ts +10 -6
  28. package/dist/search-select.d.ts +2 -2
  29. package/dist/select.d.ts +5 -5
  30. package/dist/switch.d.ts +4 -5
  31. package/dist/tabs.d.ts +18 -5
  32. package/dist/utils.d.ts +17 -0
  33. package/package.json +35 -10
  34. package/sass/components/_badges.scss +59 -0
  35. package/sass/components/_buttons.scss +327 -0
  36. package/sass/components/_cards.scss +197 -0
  37. package/sass/components/_carousel.scss +92 -0
  38. package/sass/components/_chips.scss +92 -0
  39. package/sass/components/_collapsible.scss +94 -0
  40. package/sass/components/_color-classes.scss +34 -0
  41. package/sass/components/_color-variables.scss +371 -0
  42. package/sass/components/_datepicker.scss +251 -0
  43. package/sass/components/_dropdown.scss +90 -0
  44. package/sass/components/_global.scss +775 -0
  45. package/sass/components/_grid.scss +160 -0
  46. package/sass/components/_icons-material-design.scss +5 -0
  47. package/sass/components/_materialbox.scss +43 -0
  48. package/sass/components/_modal.scss +97 -0
  49. package/sass/components/_navbar.scss +211 -0
  50. package/sass/components/_normalize.scss +447 -0
  51. package/sass/components/_preloader.scss +336 -0
  52. package/sass/components/_pulse.scss +34 -0
  53. package/sass/components/_sidenav.scss +213 -0
  54. package/sass/components/_slider.scss +94 -0
  55. package/sass/components/_table_of_contents.scss +36 -0
  56. package/sass/components/_tabs.scss +102 -0
  57. package/sass/components/_tapTarget.scss +105 -0
  58. package/sass/components/_timepicker.scss +170 -0
  59. package/sass/components/_toast.scss +61 -0
  60. package/sass/components/_tooltip.scss +32 -0
  61. package/sass/components/_transitions.scss +13 -0
  62. package/sass/components/_typography.scss +61 -0
  63. package/sass/components/_variables.scss +352 -0
  64. package/sass/components/_waves.scss +114 -0
  65. package/sass/components/forms/_checkboxes.scss +203 -0
  66. package/sass/components/forms/_file-input.scss +50 -0
  67. package/sass/components/forms/_form-groups.scss +28 -0
  68. package/sass/components/forms/_forms.scss +24 -0
  69. package/sass/components/forms/_input-fields.scss +361 -0
  70. package/sass/components/forms/_radio-buttons.scss +118 -0
  71. package/sass/components/forms/_range.scss +164 -0
  72. package/sass/components/forms/_select.scss +193 -0
  73. package/sass/components/forms/_switches.scss +92 -0
  74. package/sass/materialize.scss +41 -0
  75. package/dist/index.css.map +0 -1
  76. package/dist/index.esm.js.map +0 -1
  77. package/dist/index.js.map +0 -1
  78. package/dist/index.modern.js +0 -2
  79. package/dist/index.modern.js.map +0 -1
  80. package/dist/index.umd.js.map +0 -1
  81. package/dist/map-editor.d.ts +0 -63
  82. package/dist/timeline.d.ts +0 -24
@@ -1,5 +1,5 @@
1
1
  import { Attributes } from 'mithril';
2
- export interface IInputOptions<T = string> extends Attributes {
2
+ export interface InputAttributes<T = string> extends Attributes {
3
3
  /** Optional label. */
4
4
  label?: string;
5
5
  /** Optional ID. */
@@ -38,6 +38,8 @@ export interface IInputOptions<T = string> extends Attributes {
38
38
  /** Invoked when the element looses focus */
39
39
  onblur?: (ev: FocusEvent) => void;
40
40
  /** Invoked when the value changes. */
41
+ oninput?: (value: T) => void;
42
+ /** Invoked when the input looses focus. */
41
43
  onchange?: (value: T) => void;
42
44
  /** Add a a placeholder to the input field. */
43
45
  placeholder?: string;
package/dist/input.d.ts CHANGED
@@ -1,24 +1,29 @@
1
1
  import m, { FactoryComponent, Attributes } from 'mithril';
2
- import { IInputOptions } from './input-options';
3
- import './styles/input.css';
2
+ import { InputAttributes } from './input-options';
3
+ /** Character counter component that tracks text length against maxLength */
4
+ export declare const CharacterCounter: FactoryComponent<{
5
+ currentLength: number;
6
+ maxLength: number;
7
+ show: boolean;
8
+ }>;
4
9
  /** Create a TextArea */
5
- export declare const TextArea: FactoryComponent<IInputOptions<string>>;
10
+ export declare const TextArea: FactoryComponent<InputAttributes<string>>;
6
11
  export type InputType = 'url' | 'color' | 'text' | 'number' | 'email' | 'range' | 'password';
7
12
  /** Component for entering some text */
8
- export declare const TextInput: m.FactoryComponent<IInputOptions<string>>;
13
+ export declare const TextInput: m.FactoryComponent<InputAttributes<string>>;
9
14
  /** Component for entering a password */
10
- export declare const PasswordInput: m.FactoryComponent<IInputOptions<string>>;
15
+ export declare const PasswordInput: m.FactoryComponent<InputAttributes<string>>;
11
16
  /** Component for entering a number */
12
- export declare const NumberInput: m.FactoryComponent<IInputOptions<number>>;
17
+ export declare const NumberInput: m.FactoryComponent<InputAttributes<number>>;
13
18
  /** Component for entering a URL */
14
- export declare const UrlInput: m.FactoryComponent<IInputOptions<string>>;
19
+ export declare const UrlInput: m.FactoryComponent<InputAttributes<string>>;
15
20
  /** Component for entering a color */
16
- export declare const ColorInput: m.FactoryComponent<IInputOptions<string>>;
21
+ export declare const ColorInput: m.FactoryComponent<InputAttributes<string>>;
17
22
  /** Component for entering a range */
18
- export declare const RangeInput: m.FactoryComponent<IInputOptions<number>>;
23
+ export declare const RangeInput: m.FactoryComponent<InputAttributes<number>>;
19
24
  /** Component for entering an email */
20
- export declare const EmailInput: m.FactoryComponent<IInputOptions<string>>;
21
- export interface IFileInputOptions extends Attributes {
25
+ export declare const EmailInput: m.FactoryComponent<InputAttributes<string>>;
26
+ export interface FileInputAttrs extends Attributes {
22
27
  /** Displayed on the button, @default File */
23
28
  label?: string;
24
29
  /** Current value of the file input, write only */
@@ -39,4 +44,4 @@ export interface IFileInputOptions extends Attributes {
39
44
  accept?: string | string[];
40
45
  }
41
46
  /** Component for uploading a file */
42
- export declare const FileInput: FactoryComponent<IFileInputOptions>;
47
+ export declare const FileInput: FactoryComponent<FileInputAttrs>;
package/dist/label.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { FactoryComponent, Component, Attributes } from 'mithril';
2
- import './styles/input.css';
3
2
  export declare const Mandatory: Component;
4
- export interface IMaterialLabel extends Attributes {
3
+ export interface LabelAttributes extends Attributes {
5
4
  /** Optional title/label */
6
5
  label?: string;
7
6
  /** Optional ID */
@@ -12,11 +11,11 @@ export interface IMaterialLabel extends Attributes {
12
11
  isActive?: boolean | string;
13
12
  }
14
13
  /** Simple label element, used for most components. */
15
- export declare const Label: FactoryComponent<IMaterialLabel>;
16
- export interface IHelperTextOptions extends Attributes {
14
+ export declare const Label: FactoryComponent<LabelAttributes>;
15
+ export interface HelperTextOptions extends Attributes {
17
16
  helperText?: string;
18
17
  dataError?: string;
19
18
  dataSuccess?: string;
20
19
  }
21
20
  /** Create a helper text, often used for displaying a small help text. May be replaced by the validation message. */
22
- export declare const HelperText: FactoryComponent<IHelperTextOptions>;
21
+ export declare const HelperText: FactoryComponent<HelperTextOptions>;
@@ -1,7 +1,23 @@
1
1
  import { FactoryComponent, Attributes } from 'mithril';
2
- export interface IMaterialBox extends Partial<M.MaterialboxOptions>, Attributes {
2
+ export interface MaterialBoxOptions {
3
+ /** Animation duration in ms */
4
+ inDuration?: number;
5
+ /** Animation duration in ms for closing */
6
+ outDuration?: number;
7
+ /** Callback when materialbox is opened */
8
+ onOpenStart?: () => void;
9
+ /** Callback when materialbox is closed */
10
+ onCloseStart?: () => void;
11
+ /** Callback when materialbox opening animation is complete */
12
+ onOpenEnd?: () => void;
13
+ /** Callback when materialbox closing animation is complete */
14
+ onCloseEnd?: () => void;
15
+ }
16
+ export interface MaterialBoxAttributes extends MaterialBoxOptions, Attributes {
3
17
  /** Source image path */
4
18
  src: string;
19
+ /** Alt text for the image */
20
+ alt?: string;
5
21
  /**
6
22
  * Width of the image
7
23
  * @default undefined
@@ -12,9 +28,11 @@ export interface IMaterialBox extends Partial<M.MaterialboxOptions>, Attributes
12
28
  * @default undefined
13
29
  */
14
30
  height?: number;
31
+ /** Caption for the image overlay */
32
+ caption?: string;
15
33
  }
16
34
  /**
17
- * Create an image box, that, when clicked upon, fills the screen.
18
- * @see https://materializecss.com/media.html
35
+ * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
36
+ * No MaterializeCSS dependencies
19
37
  */
20
- export declare const MaterialBox: FactoryComponent<IMaterialBox>;
38
+ export declare const MaterialBox: FactoryComponent<MaterialBoxAttributes>;
@@ -0,0 +1,14 @@
1
+ import { FactoryComponent, Attributes } from 'mithril';
2
+ declare const iconPaths: {
3
+ readonly caret: readonly ["M7 10l5 5 5-5z", "M0 0h24v24H0z"];
4
+ readonly close: readonly ["M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z", "M0 0h24v24H0z"];
5
+ };
6
+ type IconName = keyof typeof iconPaths;
7
+ export interface MaterialIconAttrs extends Attributes {
8
+ name: IconName;
9
+ direction?: 'up' | 'down' | 'left' | 'right';
10
+ style?: Record<string, string>;
11
+ onclick?: (e: MouseEvent) => void;
12
+ }
13
+ export declare const MaterialIcon: FactoryComponent<MaterialIconAttrs>;
14
+ export {};
package/dist/modal.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  import { FactoryComponent, Vnode, Attributes } from 'mithril';
2
- export interface IMaterialModal extends Attributes {
2
+ export interface ModalState {
3
+ isOpen: boolean;
4
+ id: string;
5
+ }
6
+ export interface ModalAttributes extends Attributes {
3
7
  id: string;
4
8
  title: string;
5
9
  description?: string | Vnode<any, any>;
@@ -9,17 +13,29 @@ export interface IMaterialModal extends Attributes {
9
13
  fixedFooter?: boolean;
10
14
  /** Display on the bottom */
11
15
  bottomSheet?: boolean;
12
- /** Materialize css' modal options */
13
- options?: Partial<M.ModalOptions>;
14
16
  /** Menu buttons, from left to right */
15
17
  buttons?: Array<{
16
18
  label: string;
17
19
  iconName?: string;
18
20
  disabled?: boolean;
19
21
  onclick?: (e: UIEvent) => void;
22
+ className?: string;
20
23
  }>;
21
- /** Get the modal instance, so you can control it programmatically */
22
- onCreate?: (modal: M.Modal) => void;
24
+ /** Control modal visibility externally */
25
+ isOpen?: boolean;
26
+ /** Called when modal should be opened/closed */
27
+ onToggle?: (open: boolean) => void;
28
+ /** Called when modal is closed */
29
+ onClose?: () => void;
30
+ /** Show close button in top right */
31
+ showCloseButton?: boolean;
32
+ /** Close modal when clicking backdrop */
33
+ closeOnBackdropClick?: boolean;
34
+ /** Close modal when pressing escape key */
35
+ closeOnEsc?: boolean;
23
36
  }
24
- /** Builds a modal panel, which can be triggered using its id */
25
- export declare const ModalPanel: FactoryComponent<IMaterialModal>;
37
+ /**
38
+ * CSS-only Modal Panel component - no JavaScript dependencies
39
+ * Uses modern CSS techniques for modal functionality
40
+ */
41
+ export declare const ModalPanel: FactoryComponent<ModalAttributes>;
package/dist/option.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Vnode, FactoryComponent, Attributes, Component } from 'mithril';
2
- export interface IInputCheckbox extends Attributes {
2
+ export interface InputCheckboxAttributes extends Attributes {
3
3
  /** Optional event handler when a checkbox is clicked */
4
4
  onchange?: (checked: boolean) => void;
5
5
  /** Label of the checkbox, can be a string or Vnode */
@@ -8,10 +8,12 @@ export interface IInputCheckbox extends Attributes {
8
8
  checked?: boolean;
9
9
  /** If true, the checkbox is disabled */
10
10
  disabled?: boolean;
11
+ /** Optional input id for the checkbox */
12
+ inputId?: string;
11
13
  }
12
14
  /** Component to show a check box */
13
- export declare const InputCheckbox: FactoryComponent<IInputCheckbox>;
14
- export interface IInputOption<T extends string | number> {
15
+ export declare const InputCheckbox: FactoryComponent<InputCheckboxAttributes>;
16
+ export interface InputOption<T extends string | number> {
15
17
  /** Option ID */
16
18
  id: T;
17
19
  /** Displayed label */
@@ -29,20 +31,15 @@ export interface IInputOption<T extends string | number> {
29
31
  /** Optional description */
30
32
  description?: string;
31
33
  }
32
- export interface IOptions<T extends string | number> extends Attributes {
34
+ export interface OptionsAttributes<T extends string | number> extends Attributes {
33
35
  /** Element ID */
34
36
  id?: string;
35
37
  /** Optional title or label */
36
38
  label?: string;
37
39
  /** The options that you have */
38
- options: IInputOption<T>[];
40
+ options: InputOption<T>[];
39
41
  /** Event handler that is called when an option is changed */
40
42
  onchange?: (checkedId: T[]) => void;
41
- /**
42
- * Selected id or ids (in case of multiple options)
43
- * @deprecated Please use initialValue instead
44
- */
45
- checkedId?: T | T[];
46
43
  /** Selected id or ids (in case of multiple options) */
47
44
  initialValue?: T | T[];
48
45
  /** Optional description */
@@ -55,6 +52,10 @@ export interface IOptions<T extends string | number> extends Attributes {
55
52
  isMandatory?: boolean;
56
53
  /** If true, disable the options. */
57
54
  disabled?: boolean;
55
+ /** Layout for the options: 'vertical' (default) or 'horizontal' */
56
+ layout?: 'vertical' | 'horizontal';
57
+ /** If true, show select all/none buttons */
58
+ showSelectAll?: boolean;
58
59
  }
59
60
  /** A list of checkboxes */
60
- export declare const Options: <T extends string | number>() => Component<IOptions<T>>;
61
+ export declare const Options: <T extends string | number>() => Component<OptionsAttributes<T>>;
@@ -1,13 +1,9 @@
1
- import { FactoryComponent, Attributes, Vnode } from 'mithril';
2
- export interface IInternalPaginationOption extends IPaginationOption {
3
- active?: boolean;
4
- title: number | Vnode<any, any>;
5
- }
6
- export interface IPaginationOption extends Attributes {
1
+ import { FactoryComponent, Attributes } from 'mithril';
2
+ export interface PaginationItem extends Attributes {
7
3
  href: string;
8
4
  disabled?: boolean;
9
5
  }
10
- export interface IPaginationOptions extends Attributes {
6
+ export interface PaginationAttributes extends Attributes {
11
7
  /**
12
8
  * How many items do we show
13
9
  * @default 9 or items.length, whatever is the smallest
@@ -15,6 +11,6 @@ export interface IPaginationOptions extends Attributes {
15
11
  size?: number;
16
12
  /** The active page index */
17
13
  curPage?: number;
18
- items: IPaginationOption[];
14
+ items: PaginationItem[];
19
15
  }
20
- export declare const Pagination: FactoryComponent<IPaginationOptions>;
16
+ export declare const Pagination: FactoryComponent<PaginationAttributes>;
@@ -1,12 +1,14 @@
1
1
  import { FactoryComponent, Attributes } from 'mithril';
2
- export interface IParallax extends Partial<M.ParallaxOptions>, Attributes {
2
+ export interface ParallaxAttributes extends Attributes {
3
+ /** Enable responsive parallax (disable on mobile for performance) */
4
+ responsiveThreshold?: number;
3
5
  /** Image source */
4
6
  src: string;
7
+ /** Alt text for the image */
8
+ alt?: string;
5
9
  }
6
10
  /**
7
- * Parallax component:
8
- * Parallax is an effect where the background content or image in this case,
9
- * is moved at a different speed than the foreground content while scrolling.
10
- * @see https://materializecss.com/parallax.html
11
+ * MaterializeCSS Parallax component with dynamic positioning
12
+ * Port of the original MaterializeCSS parallax logic
11
13
  */
12
- export declare const Parallax: FactoryComponent<IParallax>;
14
+ export declare const Parallax: FactoryComponent<ParallaxAttributes>;
package/dist/pickers.d.ts CHANGED
@@ -1,6 +1,130 @@
1
1
  import { FactoryComponent } from 'mithril';
2
- import { IInputOptions } from './input-options';
3
- /** Component to pick a date */
4
- export declare const DatePicker: FactoryComponent<IInputOptions<Date> & Partial<M.DatepickerOptions>>;
5
- /** Component to pick a time */
6
- export declare const TimePicker: FactoryComponent<IInputOptions & Partial<M.TimepickerOptions>>;
2
+ import { InputAttributes } from './input-options';
3
+ export interface DatePickerI18n {
4
+ cancel?: string;
5
+ clear?: string;
6
+ done?: string;
7
+ previousMonth?: string;
8
+ nextMonth?: string;
9
+ months?: string[];
10
+ monthsShort?: string[];
11
+ weekdays?: string[];
12
+ weekdaysShort?: string[];
13
+ weekdaysAbbrev?: string[];
14
+ }
15
+ export interface DatePickerOptions {
16
+ /** Close when date is selected */
17
+ autoClose?: boolean;
18
+ /** The default output format for the input field value */
19
+ format?: string;
20
+ /** Custom parse function */
21
+ parse?: (dateString: string, format: string) => Date | null;
22
+ /** The initial date to view when first opened */
23
+ defaultDate?: Date;
24
+ /** Make the defaultDate the initial selected value */
25
+ setDefaultDate?: boolean;
26
+ /** Disable weekends */
27
+ disableWeekends?: boolean;
28
+ /** Custom function to disable specific days */
29
+ disableDayFn?: (date: Date) => boolean;
30
+ /** First day of week (0: Sunday, 1: Monday etc) */
31
+ firstDay?: number;
32
+ /** The earliest date that can be selected */
33
+ minDate?: Date;
34
+ /** The latest date that can be selected */
35
+ maxDate?: Date;
36
+ /** Number of years either side, or array of upper/lower range */
37
+ yearRange?: number | number[];
38
+ /** Show clear button */
39
+ showClearBtn?: boolean;
40
+ /** Internationalization */
41
+ i18n?: DatePickerI18n;
42
+ /** Callback when date is selected */
43
+ onSelect?: (date: Date) => void;
44
+ /** Callback when picker is opened */
45
+ onOpen?: () => void;
46
+ /** Callback when picker is closed */
47
+ onClose?: () => void;
48
+ }
49
+ export interface DatePickerAttributes extends InputAttributes<string>, DatePickerOptions {
50
+ /** Date format attribute (alternative to format property) */
51
+ format?: string;
52
+ /** Year range attribute (alternative to yearRange property) */
53
+ yearrange?: string;
54
+ /** Legacy: Date label (use label instead) */
55
+ dateLabel?: string;
56
+ /** Legacy: Display format (use format instead) */
57
+ displayFormat?: string;
58
+ }
59
+ /**
60
+ * Enhanced DatePicker component based on Materialize CSS datepicker
61
+ */
62
+ export declare const DatePicker: FactoryComponent<DatePickerAttributes>;
63
+ export interface TimePickerI18n {
64
+ /** Label for time field */
65
+ timeLabel?: string;
66
+ /** Helper text showing format */
67
+ helperText?: string;
68
+ /** Now button text */
69
+ nowLabel?: string;
70
+ /** Clear button text */
71
+ clearLabel?: string;
72
+ /** Close button text */
73
+ closeLabel?: string;
74
+ /** Icon for time input */
75
+ iconName?: string;
76
+ /** AM label for 12-hour format */
77
+ amLabel?: string;
78
+ /** PM label for 12-hour format */
79
+ pmLabel?: string;
80
+ /** Toggle 12h/24h button text */
81
+ toggleFormatLabel?: string;
82
+ }
83
+ export interface TimePickerFormat {
84
+ /** Use 12-hour format */
85
+ twelveHour?: boolean;
86
+ /** Allow user to toggle between 12h/24h format */
87
+ allowFormatToggle?: boolean;
88
+ }
89
+ export interface TimePickerOptions extends TimePickerI18n, TimePickerFormat {
90
+ /** Show clear button */
91
+ showClearBtn?: boolean;
92
+ /** Show now button */
93
+ showNowBtn?: boolean;
94
+ /** Use modal for time selection (default: true) */
95
+ useModal?: boolean;
96
+ /** Disabled state - prevents all interaction */
97
+ disabled?: boolean;
98
+ /** Readonly state - shows value but prevents editing */
99
+ readonly?: boolean;
100
+ /**
101
+ * Default time to revert to when field is cleared (optional).
102
+ * Note: Use initialValue (from InputOptions) to set the current/initial value of the field.
103
+ * defaultTime is only used as a fallback when the user clears the field and you want to provide a default.
104
+ */
105
+ defaultTime?: string;
106
+ /** Auto close picker after selection */
107
+ autoClose?: boolean;
108
+ /** Callback when time is selected */
109
+ onSelect?: (hours: number, minutes: number) => void;
110
+ /** Callback when picker is opened */
111
+ onOpen?: () => void;
112
+ /** Callback when picker is closed */
113
+ onClose?: () => void;
114
+ /** Input handler - fires on every change */
115
+ oninput?: (value: string) => void;
116
+ /** Change handler for the time value (24h format) - fires on blur/focus loss */
117
+ onchange?: (value: string) => void;
118
+ }
119
+ export interface TimePickerAttributes extends InputAttributes<string>, TimePickerOptions {
120
+ }
121
+ /**
122
+ * Enhanced TimePicker component with i18n support and improved functionality.
123
+ *
124
+ * Usage:
125
+ * - Use `initialValue` to set the current/initial time value (24h format: "HH:MM")
126
+ * - Use `defaultTime` only if you need a fallback when the field is cleared
127
+ * - The component accepts and outputs 24-hour format strings ("HH:MM")
128
+ * - Display format (12h/24h) is controlled by the `twelveHour` property
129
+ */
130
+ export declare const TimePicker: FactoryComponent<TimePickerAttributes>;
package/dist/radio.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { Attributes, Component } from 'mithril';
2
- import { IInputOption } from './option';
3
- export interface IRadioButtons<T extends string | number> extends Attributes {
2
+ import { InputOption } from './option';
3
+ export interface RadioButtonsAttributes<T extends string | number> extends Attributes {
4
4
  /** Element ID */
5
5
  id?: string;
6
6
  /** Optional title or label */
7
7
  label?: string;
8
8
  /** The options that you have */
9
- options: IInputOption<T>[];
9
+ options: InputOption<T>[];
10
10
  /** Event handler that is called when an option is changed */
11
11
  onchange: (id: T) => void;
12
12
  /** Selected id (in oninit lifecycle) */
@@ -23,15 +23,19 @@ export interface IRadioButtons<T extends string | number> extends Attributes {
23
23
  checkboxClass?: string;
24
24
  /** Disable the button */
25
25
  disabled?: boolean;
26
+ /** Layout for the options: 'vertical' (default) or 'horizontal' */
27
+ layout?: 'vertical' | 'horizontal';
26
28
  }
27
- export interface IRadioButton<T extends string | number> extends Attributes {
29
+ export interface RadioButtonAttributes<T extends string | number> extends Attributes {
28
30
  id: T;
29
31
  checked?: boolean;
30
32
  onchange: (id: T) => void;
31
33
  label: string;
32
34
  groupId: string;
33
35
  disabled?: boolean;
36
+ /** Optional input id for the radio button */
37
+ inputId?: string;
34
38
  }
35
- export declare const RadioButton: <T extends string | number>() => Component<IRadioButton<T>>;
39
+ export declare const RadioButton: <T extends string | number>() => Component<RadioButtonAttributes<T>>;
36
40
  /** Component to show a list of radio buttons, from which you can choose one. */
37
- export declare const RadioButtons: <T extends string | number>() => Component<IRadioButtons<T>>;
41
+ export declare const RadioButtons: <T extends string | number>() => Component<RadioButtonsAttributes<T>>;
@@ -4,7 +4,7 @@ export interface Option<T extends string | number> {
4
4
  label?: string;
5
5
  disabled?: boolean;
6
6
  }
7
- export interface SearchSelectAttrs<T extends string | number> extends Attributes {
7
+ export interface SearchSelectAttributes<T extends string | number> extends Attributes {
8
8
  /** Options to display in the select */
9
9
  options?: Option<T>[];
10
10
  /** Initial value */
@@ -37,5 +37,5 @@ interface SearchSelectState<T extends string | number> {
37
37
  /**
38
38
  * Mithril Factory Component for Multi-Select Dropdown with search
39
39
  */
40
- export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttrs<T>, SearchSelectState<T>>;
40
+ export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttributes<T>, SearchSelectState<T>>;
41
41
  export {};
package/dist/select.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { Attributes, Component } from 'mithril';
2
- import { IInputOption } from './option';
3
- export interface ISelectOptions<T extends string | number> extends Attributes, Partial<M.FormSelectOptions> {
2
+ import { InputOption } from './option';
3
+ export interface SelectAttributes<T extends string | number> extends Attributes {
4
4
  /** Options to select from */
5
- options: IInputOption<T>[];
5
+ options: InputOption<T>[];
6
6
  /** Called when the value is changed, either contains a single or all selected (checked) ids */
7
7
  onchange: (checkedIds: T[]) => void;
8
8
  /**
@@ -42,5 +42,5 @@ export interface ISelectOptions<T extends string | number> extends Attributes, P
42
42
  /** Enable the clear icon */
43
43
  showClearButton?: boolean;
44
44
  }
45
- /** Component to select from a list of values in a dropdowns */
46
- export declare const Select: <T extends string | number>() => Component<ISelectOptions<T>>;
45
+ /** Select component */
46
+ export declare const Select: <T extends string | number>() => Component<SelectAttributes<T>>;
package/dist/switch.d.ts CHANGED
@@ -1,13 +1,12 @@
1
1
  import { FactoryComponent } from 'mithril';
2
- import { IInputOptions } from './input-options';
3
- import './styles/switch.css';
4
- export interface ISwitchOptions extends Partial<IInputOptions<boolean>> {
2
+ import { InputAttributes } from './input-options';
3
+ export interface SwitchOptions extends Partial<InputAttributes<boolean>> {
5
4
  /** Left text label */
6
5
  left?: string;
7
6
  /** Right text label */
8
7
  right?: string;
9
- /** If checked is true, the switch is set in the right position. */
8
+ /** If checked is true, the switch is set in the right position. Only processed in oninit. */
10
9
  checked?: boolean;
11
10
  }
12
11
  /** Component to display a switch with two values. */
13
- export declare const Switch: FactoryComponent<ISwitchOptions>;
12
+ export declare const Switch: FactoryComponent<SwitchOptions>;
package/dist/tabs.d.ts CHANGED
@@ -7,7 +7,7 @@ import { Vnode, FactoryComponent, Attributes } from 'mithril';
7
7
  * - _top: Opens the linked document in the full body of the window
8
8
  */
9
9
  export type AnchorTarget = '_blank' | '_self' | '_parent' | '_top';
10
- export interface ITabItem {
10
+ export interface TabItem {
11
11
  /** Title of the tab */
12
12
  title: string;
13
13
  /** Vnode to render: may be empty in case of a using the tab as a hyperlink. */
@@ -30,8 +30,18 @@ export interface ITabItem {
30
30
  /** Only used in combination with a set target to make the tab act as a regular hyperlink. */
31
31
  href?: string;
32
32
  }
33
- export interface ITabs extends Partial<M.TabsOptions>, Attributes {
34
- /** Selected tab id */
33
+ export interface TabsOptions {
34
+ /** Duration of tab change animation in ms */
35
+ duration?: number;
36
+ /** Called when a tab is shown */
37
+ onShow?: (tab: HTMLElement) => void;
38
+ /** The maximum width at which tabs switch to swipeable mode */
39
+ responsiveThreshold?: number;
40
+ /** Enable swiping between tabs on mobile */
41
+ swipeable?: boolean;
42
+ }
43
+ export interface TabsAttributes extends TabsOptions, Attributes {
44
+ /** Selected tab id, takes precedence over tab.active property */
35
45
  selectedTabId?: string;
36
46
  /**
37
47
  * Tab width, can be `auto` to use the width of the title,
@@ -39,6 +49,9 @@ export interface ITabs extends Partial<M.TabsOptions>, Attributes {
39
49
  */
40
50
  tabWidth?: 'auto' | 'fixed' | 'fill';
41
51
  /** List of tab items */
42
- tabs: ITabItem[];
52
+ tabs: TabItem[];
53
+ /** Callback when tab changes */
54
+ onTabChange?: (tabId: string) => void;
43
55
  }
44
- export declare const Tabs: FactoryComponent<ITabs>;
56
+ /** CSS-only Tabs component - no MaterializeCSS dependencies */
57
+ export declare const Tabs: FactoryComponent<TabsAttributes>;
package/dist/utils.d.ts CHANGED
@@ -24,3 +24,20 @@ export declare const isNumeric: (n: string | number) => boolean;
24
24
  * @returns
25
25
  */
26
26
  export declare const padLeft: (n: string | number, width?: number, z?: string) => string;
27
+ export declare const getDropdownStyles: (inputRef?: HTMLElement | null, overlap?: boolean, options?: {
28
+ /** ID property of the selected item */
29
+ id?: string | number;
30
+ /** Label to show in the dropdown */
31
+ label?: string;
32
+ /** Optional group */
33
+ group?: string;
34
+ /** Can we select the item */
35
+ disabled?: boolean;
36
+ /** Add a divider */
37
+ divider?: boolean;
38
+ }[], isDropDown?: boolean) => any;
39
+ /**
40
+ * Generate a range of numbers from a to and including b, i.e. [a, b]
41
+ * @example: console.log(range(5, 10)); // [5, 6, 7, 8, 9, 10]
42
+ */
43
+ export declare const range: (a: number, b: number) => number[];