mithril-materialized 2.0.0-beta.9 → 2.0.0-rc.1
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.
- package/README.md +353 -10
- package/dist/advanced.css +6 -6
- package/dist/button.d.ts +56 -11
- package/dist/components.css +1674 -6
- package/dist/core.css +13 -13
- package/dist/datatable.d.ts +291 -0
- package/dist/datepicker.d.ts +12 -2
- package/dist/forms.css +344 -13
- package/dist/icon.d.ts +2 -2
- package/dist/image-list.d.ts +70 -0
- package/dist/index.css +1940 -20
- package/dist/index.d.ts +8 -0
- package/dist/index.esm.js +2688 -630
- package/dist/index.js +2698 -629
- package/dist/index.min.css +2 -2
- package/dist/index.umd.js +2698 -629
- package/dist/input-options.d.ts +18 -4
- package/dist/input.d.ts +0 -1
- package/dist/masonry.d.ts +17 -0
- package/dist/material-icon.d.ts +3 -0
- package/dist/pickers.css +45 -0
- package/dist/range-slider.d.ts +42 -0
- package/dist/timeline.d.ts +43 -0
- package/dist/treeview.d.ts +39 -0
- package/dist/types.d.ts +226 -0
- package/dist/utilities.css +16 -9
- package/package.json +12 -9
- package/sass/components/_cards.scss +10 -3
- package/sass/components/_datatable.scss +417 -0
- package/sass/components/_datepicker.scss +57 -0
- package/sass/components/_global.scss +6 -6
- package/sass/components/_image-list.scss +421 -0
- package/sass/components/_masonry.scss +241 -0
- package/sass/components/_timeline.scss +452 -0
- package/sass/components/_treeview.scss +353 -0
- package/sass/components/forms/_forms.scss +1 -1
- package/sass/components/forms/_range-enhanced.scss +406 -0
- package/sass/components/forms/_range.scss +5 -5
- package/sass/components/forms/_select.scss +1 -1
- package/sass/materialize.scss +6 -0
package/dist/input-options.d.ts
CHANGED
|
@@ -37,10 +37,10 @@ export interface InputAttrs<T = string> extends Attributes {
|
|
|
37
37
|
onkeyup?: (ev: KeyboardEvent, value?: T) => void;
|
|
38
38
|
/** Invoked when the element looses focus */
|
|
39
39
|
onblur?: (ev: FocusEvent) => void;
|
|
40
|
-
/** Invoked when the value changes. */
|
|
41
|
-
oninput?: (value: T) => void;
|
|
42
|
-
/** Invoked when the input looses focus. */
|
|
43
|
-
onchange?: (value: T) => void;
|
|
40
|
+
/** Invoked when the value changes (immediate feedback). For range sliders with minmax, second parameter is maxValue. */
|
|
41
|
+
oninput?: (value: T, maxValue?: T) => void;
|
|
42
|
+
/** Invoked when the input looses focus. For range sliders with minmax, second parameter is maxValue. */
|
|
43
|
+
onchange?: (value: T, maxValue?: T) => void;
|
|
44
44
|
/** Add a a placeholder to the input field. */
|
|
45
45
|
placeholder?: string;
|
|
46
46
|
/** Add a description underneath the input field. */
|
|
@@ -82,4 +82,18 @@ export interface InputAttrs<T = string> extends Attributes {
|
|
|
82
82
|
isMandatory?: boolean;
|
|
83
83
|
/** Add the required and aria-required attributes to the input element */
|
|
84
84
|
required?: boolean;
|
|
85
|
+
/** For range inputs: render vertically instead of horizontally */
|
|
86
|
+
vertical?: boolean;
|
|
87
|
+
/** For range inputs: enable dual thumb (min/max) range selection */
|
|
88
|
+
minmax?: boolean;
|
|
89
|
+
/** For range inputs with minmax: initial minimum value */
|
|
90
|
+
minValue?: number;
|
|
91
|
+
/** For range inputs with minmax: initial maximum value */
|
|
92
|
+
maxValue?: number;
|
|
93
|
+
/** For range inputs: control value display behavior. 'auto' shows on drag, 'always' shows always, 'none' never shows */
|
|
94
|
+
valueDisplay?: 'auto' | 'always' | 'none';
|
|
95
|
+
/** For vertical range inputs: height of the slider */
|
|
96
|
+
height?: string;
|
|
97
|
+
/** For range inputs with valueDisplay: position of value tooltips */
|
|
98
|
+
tooltipPos?: 'top' | 'bottom' | 'left' | 'right';
|
|
85
99
|
}
|
package/dist/input.d.ts
CHANGED
|
@@ -8,7 +8,6 @@ export declare const CharacterCounter: FactoryComponent<{
|
|
|
8
8
|
}>;
|
|
9
9
|
/** Create a TextArea */
|
|
10
10
|
export declare const TextArea: FactoryComponent<InputAttrs<string>>;
|
|
11
|
-
export type InputType = 'url' | 'color' | 'text' | 'number' | 'email' | 'range' | 'password';
|
|
12
11
|
/** Component for entering some text */
|
|
13
12
|
export declare const TextInput: m.FactoryComponent<InputAttrs<string>>;
|
|
14
13
|
/** Component for entering a password */
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FactoryComponent, Attributes } from 'mithril';
|
|
2
|
+
export interface MasonryBreakpoints {
|
|
3
|
+
xs?: number;
|
|
4
|
+
sm?: number;
|
|
5
|
+
md?: number;
|
|
6
|
+
lg?: number;
|
|
7
|
+
xl?: number;
|
|
8
|
+
}
|
|
9
|
+
export interface MasonryAttrs extends Attributes {
|
|
10
|
+
columns?: number | MasonryBreakpoints;
|
|
11
|
+
spacing?: number | string;
|
|
12
|
+
className?: string;
|
|
13
|
+
onItemClick?: (index: number, event: Event) => void;
|
|
14
|
+
cssOnly?: boolean;
|
|
15
|
+
animationDelay?: number;
|
|
16
|
+
}
|
|
17
|
+
export declare const Masonry: FactoryComponent<MasonryAttrs>;
|
package/dist/material-icon.d.ts
CHANGED
|
@@ -2,6 +2,9 @@ import { FactoryComponent, Attributes } from 'mithril';
|
|
|
2
2
|
declare const iconPaths: {
|
|
3
3
|
readonly caret: readonly ["M7 10l5 5 5-5z", "M0 0h24v24H0z"];
|
|
4
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
|
+
readonly chevron: readonly ["M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z", "M0 0h24v24H0z"];
|
|
6
|
+
readonly expand: readonly ["M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", "M0 0h24v24H0z"];
|
|
7
|
+
readonly collapse: readonly ["M19 13H5v-2h14v2z", "M0 0h24v24H0z"];
|
|
5
8
|
};
|
|
6
9
|
type IconName = keyof typeof iconPaths;
|
|
7
10
|
export interface MaterialIconAttrs extends Attributes {
|
package/dist/pickers.css
CHANGED
|
@@ -118,6 +118,30 @@
|
|
|
118
118
|
line-height: 47px;
|
|
119
119
|
font-weight: 500;
|
|
120
120
|
}
|
|
121
|
+
.datepicker-date-display .date-text.placeholder {
|
|
122
|
+
font-size: 1.8rem;
|
|
123
|
+
line-height: 30px;
|
|
124
|
+
color: rgba(255, 255, 255, 0.7);
|
|
125
|
+
font-weight: 400;
|
|
126
|
+
}
|
|
127
|
+
.datepicker-date-display .date-text .range-separator {
|
|
128
|
+
color: rgba(255, 255, 255, 0.8);
|
|
129
|
+
font-size: 1.5rem;
|
|
130
|
+
font-weight: 400;
|
|
131
|
+
}
|
|
132
|
+
.datepicker-date-display .date-text .end-date.placeholder {
|
|
133
|
+
color: rgba(255, 255, 255, 0.5);
|
|
134
|
+
font-style: italic;
|
|
135
|
+
font-size: 1.2rem;
|
|
136
|
+
font-weight: 300;
|
|
137
|
+
}
|
|
138
|
+
.datepicker-date-display.range-display .date-text {
|
|
139
|
+
font-size: 1.6rem;
|
|
140
|
+
line-height: 28px;
|
|
141
|
+
}
|
|
142
|
+
.datepicker-date-display.range-display .date-text .start-date, .datepicker-date-display.range-display .date-text .end-date {
|
|
143
|
+
display: inline-block;
|
|
144
|
+
}
|
|
121
145
|
|
|
122
146
|
/* Calendar */
|
|
123
147
|
.datepicker-calendar-container {
|
|
@@ -164,6 +188,27 @@
|
|
|
164
188
|
background-color: var(--mm-primary-color, #26a69a);
|
|
165
189
|
color: var(--mm-button-text, #fff);
|
|
166
190
|
}
|
|
191
|
+
.datepicker-table td.is-range-start {
|
|
192
|
+
background-color: var(--mm-primary-color, #26a69a);
|
|
193
|
+
color: var(--mm-button-text, #fff);
|
|
194
|
+
border-top-right-radius: 0;
|
|
195
|
+
border-bottom-right-radius: 0;
|
|
196
|
+
}
|
|
197
|
+
.datepicker-table td.is-range-end {
|
|
198
|
+
background-color: var(--mm-primary-color, #26a69a);
|
|
199
|
+
color: var(--mm-button-text, #fff);
|
|
200
|
+
border-top-left-radius: 0;
|
|
201
|
+
border-bottom-left-radius: 0;
|
|
202
|
+
}
|
|
203
|
+
.datepicker-table td.is-in-range {
|
|
204
|
+
background-color: var(--mm-primary-color-alpha-20, rgba(38, 166, 154, 0.2));
|
|
205
|
+
color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
206
|
+
border-radius: 0;
|
|
207
|
+
}
|
|
208
|
+
.datepicker-table td.is-range-preview {
|
|
209
|
+
background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
|
|
210
|
+
color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
211
|
+
}
|
|
167
212
|
.datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
|
|
168
213
|
color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
|
|
169
214
|
pointer-events: none;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import m from 'mithril';
|
|
2
|
+
import { InputAttrs } from './input-options';
|
|
3
|
+
export declare const SingleRangeSlider: {
|
|
4
|
+
oninit({ state }: {
|
|
5
|
+
state: any;
|
|
6
|
+
}): void;
|
|
7
|
+
onremove({ state }: {
|
|
8
|
+
state: any;
|
|
9
|
+
}): void;
|
|
10
|
+
view({ attrs, state, }: {
|
|
11
|
+
attrs: InputAttrs<any> & {
|
|
12
|
+
cn?: string;
|
|
13
|
+
style?: any;
|
|
14
|
+
iconName?: string;
|
|
15
|
+
id: string;
|
|
16
|
+
label?: string;
|
|
17
|
+
isMandatory?: boolean;
|
|
18
|
+
helperText?: string;
|
|
19
|
+
};
|
|
20
|
+
state: any;
|
|
21
|
+
}): m.Vnode<any, any>;
|
|
22
|
+
};
|
|
23
|
+
export declare const DoubleRangeSlider: {
|
|
24
|
+
oninit({ state }: {
|
|
25
|
+
state: any;
|
|
26
|
+
}): void;
|
|
27
|
+
onremove({ state }: {
|
|
28
|
+
state: any;
|
|
29
|
+
}): void;
|
|
30
|
+
view({ attrs, state, }: {
|
|
31
|
+
attrs: InputAttrs<any> & {
|
|
32
|
+
cn?: string;
|
|
33
|
+
style?: any;
|
|
34
|
+
iconName?: string;
|
|
35
|
+
id: string;
|
|
36
|
+
label?: string;
|
|
37
|
+
isMandatory?: boolean;
|
|
38
|
+
helperText?: string;
|
|
39
|
+
};
|
|
40
|
+
state: any;
|
|
41
|
+
}): m.Vnode<any, any>;
|
|
42
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import m, { FactoryComponent, Attributes } from 'mithril';
|
|
2
|
+
export interface TimelineItemAttrs {
|
|
3
|
+
/** Unique identifier for the timeline item */
|
|
4
|
+
id?: string;
|
|
5
|
+
/** Main label/title for the timeline item */
|
|
6
|
+
label: string;
|
|
7
|
+
/** Optional description text */
|
|
8
|
+
description?: string;
|
|
9
|
+
/** Timestamp for the item (string or Date object) */
|
|
10
|
+
timestamp?: string | Date;
|
|
11
|
+
/** Custom content to render instead of label/description */
|
|
12
|
+
content?: m.Children;
|
|
13
|
+
/** Material icon name for the timeline dot */
|
|
14
|
+
icon?: string;
|
|
15
|
+
/** Color theme for the timeline item */
|
|
16
|
+
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
17
|
+
/** Click handler for the timeline item */
|
|
18
|
+
onClick?: (item: TimelineItemAttrs, event: Event) => void;
|
|
19
|
+
/** Whether the item is disabled */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** Custom CSS class for the item */
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
export interface TimelineAttrs extends Attributes {
|
|
25
|
+
/** Array of timeline items to display */
|
|
26
|
+
items: TimelineItemAttrs[];
|
|
27
|
+
/** Position of content relative to the timeline line (vertical only) */
|
|
28
|
+
position?: 'left' | 'right' | 'alternate';
|
|
29
|
+
/** Whether to show the connecting line between items */
|
|
30
|
+
showConnector?: boolean;
|
|
31
|
+
/** Custom CSS class for the timeline container */
|
|
32
|
+
className?: string;
|
|
33
|
+
/** Whether to show timestamps */
|
|
34
|
+
showTimestamps?: boolean;
|
|
35
|
+
/** Compact mode with reduced spacing */
|
|
36
|
+
compact?: boolean;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Timeline Component
|
|
40
|
+
* Displays a sequence of events in chronological order with connecting lines
|
|
41
|
+
* Supports both vertical and horizontal orientations with Material Design styling
|
|
42
|
+
*/
|
|
43
|
+
export declare const Timeline: FactoryComponent<TimelineAttrs>;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { FactoryComponent, Attributes } from 'mithril';
|
|
2
|
+
import { EventHandler, SelectionMode } from './types';
|
|
3
|
+
export interface TreeNode {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
icon?: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
expanded?: boolean;
|
|
9
|
+
children?: TreeNode[];
|
|
10
|
+
}
|
|
11
|
+
export type TreeIconType = 'caret' | 'chevron' | 'plus-minus' | 'triangle';
|
|
12
|
+
export interface TreeViewAttrs<T extends TreeNode = TreeNode> extends Attributes {
|
|
13
|
+
/** Tree data structure */
|
|
14
|
+
data: T[];
|
|
15
|
+
/** Selection mode - none, single, or multiple */
|
|
16
|
+
selectionMode?: SelectionMode;
|
|
17
|
+
/** Currently selected node IDs */
|
|
18
|
+
selectedIds?: string[];
|
|
19
|
+
/** Called when selection changes */
|
|
20
|
+
onselection?: EventHandler<string[]>;
|
|
21
|
+
/** Called when node is expanded/collapsed */
|
|
22
|
+
onexpand?: EventHandler<{
|
|
23
|
+
nodeId: string;
|
|
24
|
+
expanded: boolean;
|
|
25
|
+
}>;
|
|
26
|
+
/** Icon type for expand/collapse indicators */
|
|
27
|
+
iconType?: TreeIconType;
|
|
28
|
+
/** Show connecting lines between tree levels (VSCode-style) */
|
|
29
|
+
showConnectors?: boolean;
|
|
30
|
+
/** Allow keyboard navigation */
|
|
31
|
+
keyboardNavigation?: boolean;
|
|
32
|
+
/** Optional CSS class */
|
|
33
|
+
className?: string;
|
|
34
|
+
/** Optional inline styles */
|
|
35
|
+
style?: Record<string, any>;
|
|
36
|
+
/** Component ID */
|
|
37
|
+
id?: string;
|
|
38
|
+
}
|
|
39
|
+
export declare const TreeView: FactoryComponent<TreeViewAttrs>;
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview Core TypeScript utility types for mithril-materialized library
|
|
3
|
+
* These types improve type safety and developer experience across all components
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Component size variants used throughout the library
|
|
7
|
+
* @example
|
|
8
|
+
* ```typescript
|
|
9
|
+
* const buttonSize: ComponentSize = 'medium';
|
|
10
|
+
* const iconSize: ComponentSize = 'small';
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export type ComponentSize = 'tiny' | 'small' | 'medium' | 'large';
|
|
14
|
+
/**
|
|
15
|
+
* Material Design positioning options
|
|
16
|
+
* @example
|
|
17
|
+
* ```typescript
|
|
18
|
+
* const tooltipPosition: MaterialPosition = 'top';
|
|
19
|
+
* const dropdownPosition: MaterialPosition = 'bottom';
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export type MaterialPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
23
|
+
/**
|
|
24
|
+
* Extended positioning including corners and center
|
|
25
|
+
*/
|
|
26
|
+
export type ExtendedPosition = MaterialPosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
|
|
27
|
+
/**
|
|
28
|
+
* Validation result - either success (true/empty string) or error (false/error message)
|
|
29
|
+
* @example
|
|
30
|
+
* ```typescript
|
|
31
|
+
* const validator = (value: string): ValidationResult => {
|
|
32
|
+
* return value.length >= 3 || 'Must be at least 3 characters';
|
|
33
|
+
* };
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
export type ValidationSuccess = true | '';
|
|
37
|
+
export type ValidationError = false | string;
|
|
38
|
+
export type ValidationResult = ValidationSuccess | ValidationError;
|
|
39
|
+
/**
|
|
40
|
+
* Generic event handler type with proper typing for value and optional event
|
|
41
|
+
* @template T - The type of the value being handled
|
|
42
|
+
*/
|
|
43
|
+
export interface EventHandler<T = any> {
|
|
44
|
+
(value: T, event?: Event): void;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Keyboard event handler with proper typing
|
|
48
|
+
* @template T - The type of the associated value
|
|
49
|
+
*/
|
|
50
|
+
export interface KeyboardEventHandler<T = string> {
|
|
51
|
+
(event: KeyboardEvent, value?: T): void;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Valid ID types for components - allows strings and numbers
|
|
55
|
+
*/
|
|
56
|
+
export type ValidId = string | number;
|
|
57
|
+
/**
|
|
58
|
+
* Component ID type - string branded for type safety
|
|
59
|
+
*/
|
|
60
|
+
export type ComponentId = string & {
|
|
61
|
+
readonly __componentId: unique symbol;
|
|
62
|
+
};
|
|
63
|
+
/**
|
|
64
|
+
* Conditional type to make ID required or optional
|
|
65
|
+
* @template T - The base type
|
|
66
|
+
* @template Required - Whether ID should be required
|
|
67
|
+
*/
|
|
68
|
+
export type WithId<T, Required extends boolean = false> = Required extends true ? T & {
|
|
69
|
+
id: ComponentId;
|
|
70
|
+
} : T & {
|
|
71
|
+
id?: ComponentId;
|
|
72
|
+
};
|
|
73
|
+
/**
|
|
74
|
+
* Validation function interface
|
|
75
|
+
* @template T - The type of value being validated
|
|
76
|
+
*/
|
|
77
|
+
export interface ValidatorFunction<T> {
|
|
78
|
+
/**
|
|
79
|
+
* Validates a value
|
|
80
|
+
* @param value - The value to validate
|
|
81
|
+
* @param element - Optional HTML element for context
|
|
82
|
+
* @returns True/empty string for success, false/error message for failure
|
|
83
|
+
*/
|
|
84
|
+
(value: T, element?: HTMLInputElement): ValidationResult;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Type guard to check if validation result indicates success
|
|
88
|
+
* @param result - The validation result to check
|
|
89
|
+
* @returns True if validation passed
|
|
90
|
+
*/
|
|
91
|
+
export declare const isValidationSuccess: (result: ValidationResult) => result is ValidationSuccess;
|
|
92
|
+
/**
|
|
93
|
+
* Type guard to check if validation result indicates an error
|
|
94
|
+
* @param result - The validation result to check
|
|
95
|
+
* @returns True if validation failed
|
|
96
|
+
*/
|
|
97
|
+
export declare const isValidationError: (result: ValidationResult) => result is ValidationError;
|
|
98
|
+
/**
|
|
99
|
+
* Button variant discriminated union for type-safe button configurations
|
|
100
|
+
*/
|
|
101
|
+
export type ButtonVariant = {
|
|
102
|
+
type: 'button';
|
|
103
|
+
submit?: never;
|
|
104
|
+
modalId?: never;
|
|
105
|
+
} | {
|
|
106
|
+
type: 'submit';
|
|
107
|
+
modalId?: never;
|
|
108
|
+
} | {
|
|
109
|
+
type: 'modal';
|
|
110
|
+
modalId: string;
|
|
111
|
+
submit?: never;
|
|
112
|
+
} | {
|
|
113
|
+
type: 'reset';
|
|
114
|
+
modalId?: never;
|
|
115
|
+
submit?: never;
|
|
116
|
+
};
|
|
117
|
+
/**
|
|
118
|
+
* Input type union with proper HTML input types
|
|
119
|
+
*/
|
|
120
|
+
export type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' | 'range' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'color' | 'file' | 'hidden';
|
|
121
|
+
/**
|
|
122
|
+
* Input value type based on input type
|
|
123
|
+
* @template T - The input type
|
|
124
|
+
*/
|
|
125
|
+
export type InputValue<T extends InputType> = T extends 'number' | 'range' ? number : T extends 'date' | 'datetime-local' | 'month' | 'time' | 'week' ? Date | string : T extends 'file' ? FileList | File[] : string;
|
|
126
|
+
/**
|
|
127
|
+
* Icon class using template literal types for better IntelliSense
|
|
128
|
+
*/
|
|
129
|
+
export type IconClass = ComponentSize | MaterialPosition | `${ComponentSize} ${MaterialPosition}`;
|
|
130
|
+
/**
|
|
131
|
+
* Modal type discriminated union
|
|
132
|
+
*/
|
|
133
|
+
export type ModalType = {
|
|
134
|
+
type: 'standard';
|
|
135
|
+
fixedFooter?: never;
|
|
136
|
+
bottomSheet?: never;
|
|
137
|
+
} | {
|
|
138
|
+
type: 'fixed-footer';
|
|
139
|
+
fixedFooter: true;
|
|
140
|
+
bottomSheet?: never;
|
|
141
|
+
} | {
|
|
142
|
+
type: 'bottom-sheet';
|
|
143
|
+
bottomSheet: true;
|
|
144
|
+
fixedFooter?: never;
|
|
145
|
+
};
|
|
146
|
+
/**
|
|
147
|
+
* Selection mode for components that support item selection
|
|
148
|
+
*/
|
|
149
|
+
export type SelectionMode = 'none' | 'single' | 'multiple';
|
|
150
|
+
/**
|
|
151
|
+
* Sort direction for sortable components
|
|
152
|
+
*/
|
|
153
|
+
export type SortDirection = 'asc' | 'desc';
|
|
154
|
+
/**
|
|
155
|
+
* Theme variant for components that support theming
|
|
156
|
+
*/
|
|
157
|
+
export type ThemeVariant = 'light' | 'dark' | 'auto';
|
|
158
|
+
/**
|
|
159
|
+
* Color palette based on Material Design
|
|
160
|
+
*/
|
|
161
|
+
export type MaterialColor = 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey';
|
|
162
|
+
/**
|
|
163
|
+
* Color intensity levels
|
|
164
|
+
*/
|
|
165
|
+
export type ColorIntensity = 'lighten-5' | 'lighten-4' | 'lighten-3' | 'lighten-2' | 'lighten-1' | 'base' | 'darken-1' | 'darken-2' | 'darken-3' | 'darken-4' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4';
|
|
166
|
+
/**
|
|
167
|
+
* Full color specification with intensity
|
|
168
|
+
*/
|
|
169
|
+
export type MaterialColorSpec = MaterialColor | `${MaterialColor} ${ColorIntensity}`;
|
|
170
|
+
/**
|
|
171
|
+
* Makes specified keys required while keeping others optional
|
|
172
|
+
* @template T - The base type
|
|
173
|
+
* @template K - Keys to make required
|
|
174
|
+
*/
|
|
175
|
+
export type RequiredKeys<T, K extends keyof T> = T & Required<Pick<T, K>>;
|
|
176
|
+
/**
|
|
177
|
+
* Makes specified keys optional while keeping others as-is
|
|
178
|
+
* @template T - The base type
|
|
179
|
+
* @template K - Keys to make optional
|
|
180
|
+
*/
|
|
181
|
+
export type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
|
|
182
|
+
/**
|
|
183
|
+
* Extracts function parameter types
|
|
184
|
+
* @template T - The function type
|
|
185
|
+
*/
|
|
186
|
+
export type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
|
|
187
|
+
/**
|
|
188
|
+
* Creates a deep readonly version of a type
|
|
189
|
+
* @template T - The type to make readonly
|
|
190
|
+
*/
|
|
191
|
+
export type DeepReadonly<T> = {
|
|
192
|
+
readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
|
|
193
|
+
};
|
|
194
|
+
/**
|
|
195
|
+
* Represents a component that can be focused
|
|
196
|
+
*/
|
|
197
|
+
export interface Focusable {
|
|
198
|
+
focus(): void;
|
|
199
|
+
blur(): void;
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* Represents a component that can be validated
|
|
203
|
+
*/
|
|
204
|
+
export interface Validatable<T = any> {
|
|
205
|
+
validate(): ValidationResult;
|
|
206
|
+
readonly isValid: boolean;
|
|
207
|
+
readonly value: T;
|
|
208
|
+
}
|
|
209
|
+
/**
|
|
210
|
+
* Configuration for components with validation
|
|
211
|
+
* @template T - The type of value being validated
|
|
212
|
+
*/
|
|
213
|
+
export interface ValidationConfig<T = any> {
|
|
214
|
+
/** Whether the field is required */
|
|
215
|
+
required?: boolean;
|
|
216
|
+
/** Minimum length for string values */
|
|
217
|
+
minLength?: number;
|
|
218
|
+
/** Maximum length for string values */
|
|
219
|
+
maxLength?: number;
|
|
220
|
+
/** Pattern to match for validation */
|
|
221
|
+
pattern?: RegExp;
|
|
222
|
+
/** Custom validation function */
|
|
223
|
+
validator?: ValidatorFunction<T>;
|
|
224
|
+
/** Whether to show validation messages inline */
|
|
225
|
+
showValidationMessage?: boolean;
|
|
226
|
+
}
|
package/dist/utilities.css
CHANGED
|
@@ -2405,21 +2405,21 @@ video.responsive-video {
|
|
|
2405
2405
|
height: 30px;
|
|
2406
2406
|
}
|
|
2407
2407
|
.pagination li a {
|
|
2408
|
-
color: #444;
|
|
2408
|
+
color: var(--mm-text-primary, #444);
|
|
2409
2409
|
display: inline-block;
|
|
2410
2410
|
font-size: 1.2rem;
|
|
2411
2411
|
padding: 0 10px;
|
|
2412
2412
|
line-height: 30px;
|
|
2413
2413
|
}
|
|
2414
2414
|
.pagination li.active a {
|
|
2415
|
-
color: #fff;
|
|
2415
|
+
color: var(--mm-text-on-primary, #fff);
|
|
2416
2416
|
}
|
|
2417
2417
|
.pagination li.active {
|
|
2418
2418
|
background-color: #ee6e73;
|
|
2419
2419
|
}
|
|
2420
2420
|
.pagination li.disabled a {
|
|
2421
2421
|
cursor: default;
|
|
2422
|
-
color: #999;
|
|
2422
|
+
color: var(--mm-text-disabled, #999);
|
|
2423
2423
|
}
|
|
2424
2424
|
.pagination li i {
|
|
2425
2425
|
font-size: 2rem;
|
|
@@ -2750,8 +2750,8 @@ td, th {
|
|
|
2750
2750
|
.collection .collection-item.avatar i.circle {
|
|
2751
2751
|
font-size: 18px;
|
|
2752
2752
|
line-height: 42px;
|
|
2753
|
-
color: #fff;
|
|
2754
|
-
background-color: #999;
|
|
2753
|
+
color: var(--mm-text-on-primary, #fff);
|
|
2754
|
+
background-color: var(--mm-text-disabled, #999);
|
|
2755
2755
|
text-align: center;
|
|
2756
2756
|
}
|
|
2757
2757
|
.collection .collection-item.avatar .title {
|
|
@@ -2773,7 +2773,7 @@ td, th {
|
|
|
2773
2773
|
color: rgb(234.25, 250.25, 248.75);
|
|
2774
2774
|
}
|
|
2775
2775
|
.collection .collection-item.active .secondary-content {
|
|
2776
|
-
color: #fff;
|
|
2776
|
+
color: var(--mm-text-on-primary, #fff);
|
|
2777
2777
|
}
|
|
2778
2778
|
.collection a.collection-item {
|
|
2779
2779
|
display: block;
|
|
@@ -2948,13 +2948,15 @@ td, th {
|
|
|
2948
2948
|
padding: 24px;
|
|
2949
2949
|
margin: 0.5rem 0 1rem 0;
|
|
2950
2950
|
border-radius: 2px;
|
|
2951
|
-
background-color: #fff;
|
|
2951
|
+
background-color: var(--mm-card-background, #fff);
|
|
2952
|
+
color: var(--mm-text-primary);
|
|
2952
2953
|
}
|
|
2953
2954
|
|
|
2954
2955
|
.card {
|
|
2955
2956
|
position: relative;
|
|
2956
2957
|
margin: 0.5rem 0 1rem 0;
|
|
2957
|
-
background-color: #fff;
|
|
2958
|
+
background-color: var(--mm-card-background, #fff);
|
|
2959
|
+
color: var(--mm-text-primary);
|
|
2958
2960
|
transition: box-shadow 0.25s;
|
|
2959
2961
|
border-radius: 2px;
|
|
2960
2962
|
}
|
|
@@ -3053,6 +3055,8 @@ td, th {
|
|
|
3053
3055
|
.card .card-content {
|
|
3054
3056
|
padding: 24px;
|
|
3055
3057
|
border-radius: 0 0 2px 2px;
|
|
3058
|
+
background-color: var(--mm-card-background, #fff);
|
|
3059
|
+
color: var(--mm-text-primary);
|
|
3056
3060
|
}
|
|
3057
3061
|
.card .card-content p {
|
|
3058
3062
|
margin: 0;
|
|
@@ -3061,6 +3065,7 @@ td, th {
|
|
|
3061
3065
|
display: block;
|
|
3062
3066
|
line-height: 32px;
|
|
3063
3067
|
margin-bottom: 8px;
|
|
3068
|
+
color: var(--mm-text-primary);
|
|
3064
3069
|
}
|
|
3065
3070
|
.card .card-content .card-title i {
|
|
3066
3071
|
line-height: 32px;
|
|
@@ -3086,7 +3091,8 @@ td, th {
|
|
|
3086
3091
|
.card .card-reveal {
|
|
3087
3092
|
padding: 24px;
|
|
3088
3093
|
position: absolute;
|
|
3089
|
-
background-color: #fff;
|
|
3094
|
+
background-color: var(--mm-card-background, #fff);
|
|
3095
|
+
color: var(--mm-text-primary);
|
|
3090
3096
|
width: 100%;
|
|
3091
3097
|
overflow-y: auto;
|
|
3092
3098
|
left: 0;
|
|
@@ -3098,6 +3104,7 @@ td, th {
|
|
|
3098
3104
|
.card .card-reveal .card-title {
|
|
3099
3105
|
cursor: pointer;
|
|
3100
3106
|
display: block;
|
|
3107
|
+
color: var(--mm-text-primary);
|
|
3101
3108
|
}
|
|
3102
3109
|
|
|
3103
3110
|
#toast-container {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mithril-materialized",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-rc.1",
|
|
4
4
|
"description": "A materialize library for mithril.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
],
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "rollup -c rollup.config.mjs && npm run build:css-min",
|
|
39
|
-
"build:css-min": "sass --no-source-map --style=compressed ./src/index.scss ./dist/index.min.css && npm run build:css-modules",
|
|
39
|
+
"build:css-min": "sass --no-source-map --style=compressed --no-charset ./src/index.scss ./dist/index.min.css && npm run build:css-modules",
|
|
40
40
|
"build:css-modules": "sass --no-source-map ./src/core.scss ./dist/core.css && sass --no-source-map ./src/components.scss ./dist/components.css && sass --no-source-map ./src/forms.scss ./dist/forms.css && sass --no-source-map ./src/pickers.scss ./dist/pickers.css && sass --no-source-map ./src/advanced.scss ./dist/advanced.css && sass --no-source-map ./src/utilities.scss ./dist/utilities.css",
|
|
41
|
-
"dev": "rollup -c rollup.config.mjs -w",
|
|
41
|
+
"dev": "concurrently \"rollup -c rollup.config.mjs -w\" \"npm run css:watch\"",
|
|
42
42
|
"start": "npm run dev",
|
|
43
43
|
"clean": "rimraf dist node_modules/.cache",
|
|
44
44
|
"test": "jest",
|
|
@@ -54,6 +54,8 @@
|
|
|
54
54
|
"build:domain": "npm run clean && npm run build && typedoc --out ../../docs/typedoc src",
|
|
55
55
|
"dry-run": "npm publish --dry-run",
|
|
56
56
|
"sass:watch": "sass --watch ./sass/materialize.scss ./dist/index.css",
|
|
57
|
+
"css:watch": "sass --watch --no-source-map --style=compressed --no-charset ./src/index.scss ./dist/index.min.css",
|
|
58
|
+
"dev:full": "npm run dev & npm run css:watch",
|
|
57
59
|
"patch-release": "npm run clean && npm run build && npm version patch --force -m \"Patch release\" && npm publish && git push --follow-tags",
|
|
58
60
|
"minor-release": "npm run clean && npm run build && npm version minor --force -m \"Minor release\" && npm publish && git push --follow-tags",
|
|
59
61
|
"major-release": "npm run clean && npm run build && npm version major --force -m \"Major release\" && npm publish && git push --follow-tags"
|
|
@@ -69,29 +71,30 @@
|
|
|
69
71
|
"author": "Erik Vullings <erik.vullings@gmail.com> (http://www.tno.nl)",
|
|
70
72
|
"license": "MIT",
|
|
71
73
|
"dependencies": {
|
|
72
|
-
"mithril": "^2.3.
|
|
74
|
+
"mithril": "^2.3.5"
|
|
73
75
|
},
|
|
74
76
|
"devDependencies": {
|
|
75
|
-
"@playwright/test": "^1.
|
|
77
|
+
"@playwright/test": "^1.55.0",
|
|
76
78
|
"@rollup/plugin-typescript": "^12.1.4",
|
|
77
79
|
"@testing-library/dom": "^10.4.1",
|
|
78
|
-
"@testing-library/jest-dom": "^6.
|
|
80
|
+
"@testing-library/jest-dom": "^6.8.0",
|
|
79
81
|
"@testing-library/user-event": "^14.6.1",
|
|
80
82
|
"@types/jest": "^30.0.0",
|
|
81
83
|
"@types/mithril": "^2.2.7",
|
|
82
84
|
"autoprefixer": "^10.4.21",
|
|
85
|
+
"concurrently": "^9.2.1",
|
|
83
86
|
"express": "^5.1.0",
|
|
84
87
|
"identity-obj-proxy": "^3.0.0",
|
|
85
88
|
"jest": "^30.0.5",
|
|
86
89
|
"jest-environment-jsdom": "^30.0.5",
|
|
87
90
|
"js-yaml": "^4.1.0",
|
|
88
91
|
"rimraf": "^6.0.1",
|
|
89
|
-
"rollup": "^4.
|
|
92
|
+
"rollup": "^4.48.1",
|
|
90
93
|
"rollup-plugin-postcss": "^4.0.2",
|
|
91
|
-
"sass": "^1.
|
|
94
|
+
"sass": "^1.91.0",
|
|
92
95
|
"ts-jest": "^29.4.1",
|
|
93
96
|
"tslib": "^2.8.1",
|
|
94
|
-
"typedoc": "^0.28.
|
|
97
|
+
"typedoc": "^0.28.11",
|
|
95
98
|
"typescript": "^5.9.2"
|
|
96
99
|
}
|
|
97
100
|
}
|