mtrl 0.5.2 → 0.5.4
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/dist/components/checkbox/api.d.ts +1 -1
- package/dist/components/checkbox/types.d.ts +17 -6
- package/dist/components/chips/api.d.ts +5 -2
- package/dist/components/chips/chip/api.d.ts +1 -1
- package/dist/components/chips/config.d.ts +5 -1
- package/dist/components/chips/types.d.ts +14 -3
- package/dist/components/index.d.ts +1 -0
- package/dist/components/select/types.d.ts +21 -3
- package/dist/components/switch/types.d.ts +8 -4
- package/dist/index.cjs +14 -14
- package/dist/index.cjs.map +13 -13
- package/dist/index.js +14 -14
- package/dist/index.js.map +13 -13
- package/dist/package.json +1 -1
- package/dist/styles.css +2 -2
- package/package.json +4 -2
- package/src/styles/abstract/_base.scss +2 -0
- package/src/styles/abstract/_config.scss +28 -0
- package/src/styles/abstract/_functions.scss +124 -0
- package/src/styles/abstract/_mixins.scss +401 -0
- package/src/styles/abstract/_theme.scss +269 -0
- package/src/styles/abstract/_variables.scss +338 -0
- package/src/styles/base/_reset.scss +86 -0
- package/src/styles/base/_typography.scss +155 -0
- package/src/styles/components/_badge.scss +183 -0
- package/src/styles/components/_bottom-app-bar.scss +103 -0
- package/src/styles/components/_button.scss +756 -0
- package/src/styles/components/_card.scss +401 -0
- package/src/styles/components/_carousel.scss +645 -0
- package/src/styles/components/_checkbox.scss +231 -0
- package/src/styles/components/_chips.scss +643 -0
- package/src/styles/components/_datepicker.scss +358 -0
- package/src/styles/components/_dialog.scss +259 -0
- package/src/styles/components/_divider.scss +57 -0
- package/src/styles/components/_extended-fab.scss +309 -0
- package/src/styles/components/_fab.scss +244 -0
- package/src/styles/components/_list.scss +774 -0
- package/src/styles/components/_menu.scss +245 -0
- package/src/styles/components/_navigation-mobile.scss +244 -0
- package/src/styles/components/_navigation-system.scss +151 -0
- package/src/styles/components/_navigation.scss +407 -0
- package/src/styles/components/_progress.scss +101 -0
- package/src/styles/components/_radios.scss +187 -0
- package/src/styles/components/_search.scss +306 -0
- package/src/styles/components/_segmented-button.scss +227 -0
- package/src/styles/components/_select.scss +274 -0
- package/src/styles/components/_sheet.scss +236 -0
- package/src/styles/components/_slider.scss +264 -0
- package/src/styles/components/_snackbar.scss +211 -0
- package/src/styles/components/_switch.scss +305 -0
- package/src/styles/components/_tabs.scss +421 -0
- package/src/styles/components/_textfield.scss +1035 -0
- package/src/styles/components/_timepicker.scss +451 -0
- package/src/styles/components/_tooltip.scss +241 -0
- package/src/styles/components/_top-app-bar.scss +225 -0
- package/src/styles/main.scss +129 -0
- package/src/styles/themes/_autumn.scss +105 -0
- package/src/styles/themes/_base-theme.scss +85 -0
- package/src/styles/themes/_baseline.scss +173 -0
- package/src/styles/themes/_bluekhaki.scss +125 -0
- package/src/styles/themes/_brownbeige.scss +125 -0
- package/src/styles/themes/_browngreen.scss +125 -0
- package/src/styles/themes/_forest.scss +77 -0
- package/src/styles/themes/_greenbeige.scss +125 -0
- package/src/styles/themes/_index.scss +19 -0
- package/src/styles/themes/_material.scss +125 -0
- package/src/styles/themes/_ocean.scss +77 -0
- package/src/styles/themes/_sageivory.scss +125 -0
- package/src/styles/themes/_spring.scss +77 -0
- package/src/styles/themes/_summer.scss +87 -0
- package/src/styles/themes/_sunset.scss +60 -0
- package/src/styles/themes/_tealcaramel.scss +125 -0
- package/src/styles/themes/_winter.scss +77 -0
- package/src/styles/utilities/_colors.scss +154 -0
- package/src/styles/utilities/_flexbox.scss +194 -0
- package/src/styles/utilities/_layout.scss +665 -0
- package/src/styles/utilities/_ripple.scss +79 -0
- package/src/styles/utilities/_spacing.scss +139 -0
- package/src/styles/utilities/_typography.scss +178 -0
- package/src/styles/utilities/_visibility.scss +142 -0
|
@@ -106,16 +106,27 @@ export interface CheckboxComponent {
|
|
|
106
106
|
*/
|
|
107
107
|
input: HTMLInputElement;
|
|
108
108
|
/**
|
|
109
|
-
* Gets the checkbox's
|
|
110
|
-
* @returns
|
|
109
|
+
* Gets the checkbox's checked state (boolean) for form compatibility
|
|
110
|
+
* @returns Whether the checkbox is checked
|
|
111
111
|
*/
|
|
112
|
-
getValue: () =>
|
|
112
|
+
getValue: () => boolean;
|
|
113
113
|
/**
|
|
114
|
-
* Sets the checkbox's
|
|
115
|
-
* @param value -
|
|
114
|
+
* Sets the checkbox's checked state
|
|
115
|
+
* @param value - Boolean or string ("true"/"false"/"1"/"0") value
|
|
116
116
|
* @returns Checkbox component for method chaining
|
|
117
117
|
*/
|
|
118
|
-
setValue: (value: string) => CheckboxComponent;
|
|
118
|
+
setValue: (value: boolean | string) => CheckboxComponent;
|
|
119
|
+
/**
|
|
120
|
+
* Gets the HTML value attribute (rarely needed)
|
|
121
|
+
* @returns The input's value attribute
|
|
122
|
+
*/
|
|
123
|
+
getValueAttribute: () => string;
|
|
124
|
+
/**
|
|
125
|
+
* Sets the HTML value attribute (rarely needed)
|
|
126
|
+
* @param value - New value attribute to set
|
|
127
|
+
* @returns Checkbox component for method chaining
|
|
128
|
+
*/
|
|
129
|
+
setValueAttribute: (value: string) => CheckboxComponent;
|
|
119
130
|
/**
|
|
120
131
|
* Checks the checkbox (sets checked=true)
|
|
121
132
|
* @returns Checkbox component for method chaining
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { ChipsComponent, ChipComponent } from
|
|
1
|
+
import { ChipsComponent, ChipComponent } from "./types";
|
|
2
2
|
/**
|
|
3
3
|
* API options interface - structured by feature area
|
|
4
4
|
*/
|
|
5
5
|
interface ApiOptions {
|
|
6
|
+
config: {
|
|
7
|
+
multiSelect: boolean;
|
|
8
|
+
};
|
|
6
9
|
chips: {
|
|
7
10
|
addChip: (chipConfig: any) => ChipComponent;
|
|
8
11
|
removeChip: (chipOrIndex: ChipComponent | number) => void;
|
|
@@ -22,7 +25,7 @@ interface ApiOptions {
|
|
|
22
25
|
label: {
|
|
23
26
|
setText: (text: string) => any;
|
|
24
27
|
getText: () => string;
|
|
25
|
-
setPosition: (position:
|
|
28
|
+
setPosition: (position: "start" | "end") => any;
|
|
26
29
|
getPosition: () => string;
|
|
27
30
|
};
|
|
28
31
|
keyboard: {
|
|
@@ -28,9 +28,13 @@ export declare const getElementConfig: (config: ChipsConfig) => {
|
|
|
28
28
|
/**
|
|
29
29
|
* Creates API configuration for the Chips component
|
|
30
30
|
* @param {Object} comp - Component with chips features
|
|
31
|
+
* @param {ChipsConfig} config - Chips configuration
|
|
31
32
|
* @returns {Object} API configuration object
|
|
32
33
|
*/
|
|
33
|
-
export declare const getApiConfig: (comp: any) => {
|
|
34
|
+
export declare const getApiConfig: (comp: any, config?: ChipsConfig) => {
|
|
35
|
+
config: {
|
|
36
|
+
multiSelect: boolean;
|
|
37
|
+
};
|
|
34
38
|
chips: {
|
|
35
39
|
addChip: (chipConfig: any) => any;
|
|
36
40
|
removeChip: (chipOrIndex: any) => any;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Chip variant types
|
|
3
3
|
* @category Components
|
|
4
4
|
*/
|
|
5
|
-
export type ChipVariant =
|
|
5
|
+
export type ChipVariant = "filled" | "outlined" | "elevated" | "assist" | "filter" | "input" | "suggestion";
|
|
6
6
|
/**
|
|
7
7
|
* Available chip event types
|
|
8
8
|
*/
|
|
@@ -164,7 +164,7 @@ export interface ChipsConfig {
|
|
|
164
164
|
* Position of the label (start or end)
|
|
165
165
|
* @default 'start'
|
|
166
166
|
*/
|
|
167
|
-
labelPosition?:
|
|
167
|
+
labelPosition?: "start" | "end";
|
|
168
168
|
/**
|
|
169
169
|
* Schema definition for the component structure
|
|
170
170
|
* @internal
|
|
@@ -261,6 +261,17 @@ export interface ChipComponent {
|
|
|
261
261
|
* @returns The chip component for chaining
|
|
262
262
|
*/
|
|
263
263
|
toggleSelected: () => ChipComponent;
|
|
264
|
+
/**
|
|
265
|
+
* Gets the chip's current variant
|
|
266
|
+
* @returns Current variant or null if none set
|
|
267
|
+
*/
|
|
268
|
+
getVariant: () => ChipVariant | null;
|
|
269
|
+
/**
|
|
270
|
+
* Sets the chip's variant
|
|
271
|
+
* @param variant - The variant to apply
|
|
272
|
+
* @returns The chip component for chaining
|
|
273
|
+
*/
|
|
274
|
+
setVariant: (variant: ChipVariant) => ChipComponent;
|
|
264
275
|
/**
|
|
265
276
|
* Destroys the chip component and cleans up resources
|
|
266
277
|
*/
|
|
@@ -360,7 +371,7 @@ export interface ChipsComponent {
|
|
|
360
371
|
* @param position - Label position ('start' or 'end')
|
|
361
372
|
* @returns The chips instance for chaining
|
|
362
373
|
*/
|
|
363
|
-
setLabelPosition: (position:
|
|
374
|
+
setLabelPosition: (position: "start" | "end") => ChipsComponent;
|
|
364
375
|
/**
|
|
365
376
|
* Gets the label position
|
|
366
377
|
* @returns Label position
|
|
@@ -51,6 +51,7 @@ export { default as createButton } from "./button";
|
|
|
51
51
|
export { default as createCard } from "./card";
|
|
52
52
|
export { default as createCarousel } from "./carousel";
|
|
53
53
|
export { default as createCheckbox } from "./checkbox";
|
|
54
|
+
export { createChip, createChips } from "./chips";
|
|
54
55
|
export { default as createDatePicker } from "./datepicker";
|
|
55
56
|
export { default as createDialog } from "./dialog";
|
|
56
57
|
export { default as createFab } from "./fab";
|
|
@@ -143,10 +143,15 @@ export interface SelectComponent {
|
|
|
143
143
|
getValue: () => string | null;
|
|
144
144
|
/**
|
|
145
145
|
* Sets the select's value (by option id)
|
|
146
|
-
* @param value - Option id to select
|
|
146
|
+
* @param value - Option id to select, or null/undefined to clear
|
|
147
147
|
* @returns Select component for chaining
|
|
148
148
|
*/
|
|
149
|
-
setValue: (value: string) => SelectComponent;
|
|
149
|
+
setValue: (value: string | null | undefined) => SelectComponent;
|
|
150
|
+
/**
|
|
151
|
+
* Clears the current selection
|
|
152
|
+
* @returns Select component for chaining
|
|
153
|
+
*/
|
|
154
|
+
clear: () => SelectComponent;
|
|
150
155
|
/**
|
|
151
156
|
* Gets the select's current displayed text
|
|
152
157
|
*/
|
|
@@ -215,6 +220,18 @@ export interface SelectComponent {
|
|
|
215
220
|
* @returns Select component for chaining
|
|
216
221
|
*/
|
|
217
222
|
disable: () => SelectComponent;
|
|
223
|
+
/**
|
|
224
|
+
* Sets the error state on the select
|
|
225
|
+
* @param error - Whether to show error state
|
|
226
|
+
* @param message - Optional error message to display
|
|
227
|
+
* @returns Select component for chaining
|
|
228
|
+
*/
|
|
229
|
+
setError: (error: boolean, message?: string) => SelectComponent;
|
|
230
|
+
/**
|
|
231
|
+
* Clears the error state on the select
|
|
232
|
+
* @returns Select component for chaining
|
|
233
|
+
*/
|
|
234
|
+
clearError: () => SelectComponent;
|
|
218
235
|
/**
|
|
219
236
|
* Destroys the select component
|
|
220
237
|
*/
|
|
@@ -274,7 +291,8 @@ export interface SelectEvents {
|
|
|
274
291
|
export interface ApiOptions {
|
|
275
292
|
select: {
|
|
276
293
|
getValue: () => string | null;
|
|
277
|
-
setValue: (value: string) => any;
|
|
294
|
+
setValue: (value: string | null | undefined) => any;
|
|
295
|
+
clear: () => any;
|
|
278
296
|
getText: () => string;
|
|
279
297
|
getSelectedOption: () => SelectOption | null;
|
|
280
298
|
getOptions: () => SelectOption[];
|
|
@@ -51,10 +51,14 @@ export interface SwitchComponent {
|
|
|
51
51
|
element: HTMLElement;
|
|
52
52
|
/** The input element */
|
|
53
53
|
input: HTMLInputElement;
|
|
54
|
-
/** Gets the switch's
|
|
55
|
-
getValue: () =>
|
|
56
|
-
/** Sets the switch's
|
|
57
|
-
setValue: (value: string) => SwitchComponent;
|
|
54
|
+
/** Gets the switch's checked state (boolean) for form compatibility */
|
|
55
|
+
getValue: () => boolean;
|
|
56
|
+
/** Sets the switch's checked state */
|
|
57
|
+
setValue: (value: boolean | string) => SwitchComponent;
|
|
58
|
+
/** Gets the HTML value attribute (rarely needed) */
|
|
59
|
+
getValueAttribute: () => string;
|
|
60
|
+
/** Sets the HTML value attribute (rarely needed) */
|
|
61
|
+
setValueAttribute: (value: string) => SwitchComponent;
|
|
58
62
|
/** Checks/activates the switch */
|
|
59
63
|
check: () => SwitchComponent;
|
|
60
64
|
/** Unchecks/deactivates the switch */
|