@expressivecss/expressive 0.4.0 → 0.6.0
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/CHANGELOG.md +127 -0
- package/README.md +4 -9
- package/dist/css/expressive.css +2617 -951
- package/dist/css/expressive.css.map +1 -1
- package/dist/css/expressive.min.css +1 -1
- package/dist/css/expressive.min.css.map +1 -1
- package/dist/js/expressive.cjs +643 -804
- package/dist/js/expressive.cjs.map +4 -4
- package/dist/js/expressive.js +643 -804
- package/dist/js/expressive.js.map +4 -4
- package/dist/js/expressive.min.js +11 -11
- package/dist/js/expressive.min.js.map +4 -4
- package/dist/js/expressive.mjs +643 -804
- package/dist/js/expressive.mjs.map +4 -4
- package/dist/types/behaviors/bottomSheets.d.ts +18 -0
- package/dist/types/behaviors/sideSheets.d.ts +18 -0
- package/dist/types/components/autocomplete.d.ts +11 -11
- package/dist/types/components/index.d.ts +3 -5
- package/dist/types/components/{dropdown.d.ts → menu.d.ts} +38 -37
- package/dist/types/components/navigationRail.d.ts +53 -0
- package/dist/types/components/range.d.ts +3 -0
- package/dist/types/components/registry.d.ts +7 -15
- package/dist/types/components/select.d.ts +12 -12
- package/dist/types/components/{toasts.d.ts → snackbar.d.ts} +28 -25
- package/dist/types/index.d.ts +3 -1
- package/package.json +3 -2
- package/src/sass/README.md +13 -11
- package/src/sass/abstracts/_breakpoints.scss +14 -3
- package/src/sass/abstracts/_mixins.scss +3 -3
- package/src/sass/abstracts/_variables.scss +27 -2
- package/src/sass/base/_global.scss +1 -1
- package/src/sass/base/_grid.scss +66 -116
- package/src/sass/base/_index.scss +1 -1
- package/src/sass/components/_badges.scss +80 -60
- package/src/sass/components/_bottom-sheet.scss +137 -0
- package/src/sass/components/_cards.scss +4 -4
- package/src/sass/components/_chips.scss +6 -5
- package/src/sass/components/_dialog.scss +268 -0
- package/src/sass/components/_index.scss +9 -7
- package/src/sass/components/_list.scss +253 -0
- package/src/sass/components/_menu.scss +341 -0
- package/src/sass/components/_navbar.scss +65 -117
- package/src/sass/components/_navigation-bar.scss +165 -0
- package/src/sass/components/_navigation-rail.scss +308 -0
- package/src/sass/components/_page-footer.scss +7 -3
- package/src/sass/components/_panes.scss +294 -0
- package/src/sass/components/_side-sheet.scss +193 -0
- package/src/sass/components/_sidenav.scss +78 -49
- package/src/sass/components/{_toast.scss → _snackbar.scss} +35 -34
- package/src/sass/components/_tabs.scss +1 -27
- package/src/sass/components/_toolbar.scss +91 -25
- package/src/sass/components/_tooltip.scss +1 -1
- package/src/sass/components/forms/_fieldset.scss +1 -1
- package/src/sass/components/forms/_input-fields.scss +3 -3
- package/src/sass/components/forms/_range.scss +423 -98
- package/src/sass/components/forms/_select.scss +19 -17
- package/src/sass/tokens/_reference.scss +37 -13
- package/src/sass/tokens/_theme.scss +5 -13
- package/src/sass/utilities/_colors.scss +16 -74
- package/src/sass/utilities/_visibility.scss +8 -0
- package/dist/types/components/collapsible.d.ts +0 -79
- package/dist/types/components/pushpin.d.ts +0 -51
- package/dist/types/components/tapTarget.d.ts +0 -57
- package/src/sass/components/_collapsible.scss +0 -179
- package/src/sass/components/_collection.scss +0 -180
- package/src/sass/components/_dropdown.scss +0 -225
- package/src/sass/components/_modal.scss +0 -190
- package/src/sass/components/_pushpin.scss +0 -11
- package/src/sass/components/_tapTarget.scss +0 -187
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Drag-to-dismiss for `dialog.bottom-sheet` / `dialog.bottom`.
|
|
3
|
+
*
|
|
4
|
+
* The handle is the top 48dp of the sheet (or an explicit `.handle`).
|
|
5
|
+
* A downward drag past 96dp, or a flick, closes. Anything else snaps back.
|
|
6
|
+
* Content below the handle scrolls normally. Light-dismiss on the scrim
|
|
7
|
+
* stays with {@link Dialogs}.
|
|
8
|
+
*/
|
|
9
|
+
export declare class BottomSheets {
|
|
10
|
+
private static _drag;
|
|
11
|
+
static Init(): void;
|
|
12
|
+
static _onDown(event: PointerEvent): void;
|
|
13
|
+
static _onMove(event: PointerEvent): void;
|
|
14
|
+
static _onUp(event: PointerEvent): void;
|
|
15
|
+
static _onCancel(): void;
|
|
16
|
+
private static _sheet;
|
|
17
|
+
private static _inHandle;
|
|
18
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Drag-to-dismiss for side sheets (`dialog.side-sheet` / `.right` / `.left`).
|
|
3
|
+
*
|
|
4
|
+
* Grab the header or the inner 24dp edge and drag toward the docked side.
|
|
5
|
+
* Past 96dp, or a flick, closes. Light-dismiss on the scrim stays with
|
|
6
|
+
* {@link Dialogs}.
|
|
7
|
+
*/
|
|
8
|
+
export declare class SideSheets {
|
|
9
|
+
private static _drag;
|
|
10
|
+
static Init(): void;
|
|
11
|
+
static _onDown(event: PointerEvent): void;
|
|
12
|
+
static _onMove(event: PointerEvent): void;
|
|
13
|
+
static _onUp(event: PointerEvent): void;
|
|
14
|
+
static _onCancel(): void;
|
|
15
|
+
private static _sheet;
|
|
16
|
+
private static _startDocked;
|
|
17
|
+
private static _inHandle;
|
|
18
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Menu, MenuOptions } from './menu';
|
|
2
2
|
import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
|
|
3
3
|
export interface AutocompleteData {
|
|
4
4
|
/**
|
|
@@ -44,7 +44,7 @@ export interface AutocompleteOptions extends BaseOptions {
|
|
|
44
44
|
* The height of the Menu which can be set via css-property.
|
|
45
45
|
* @default '300px'
|
|
46
46
|
*/
|
|
47
|
-
|
|
47
|
+
maxMenuHeight: string;
|
|
48
48
|
/**
|
|
49
49
|
* Function is called when the input text is altered and data can also be loaded asynchronously.
|
|
50
50
|
* If the results are collected the items in the list can be updated via the function setMenuItems(collectedItems).
|
|
@@ -59,10 +59,10 @@ export interface AutocompleteOptions extends BaseOptions {
|
|
|
59
59
|
*/
|
|
60
60
|
allowUnsafeHTML: boolean;
|
|
61
61
|
/**
|
|
62
|
-
* Pass options object to select
|
|
62
|
+
* Pass options object to select menu initialization.
|
|
63
63
|
* @default {}
|
|
64
64
|
*/
|
|
65
|
-
|
|
65
|
+
menuOptions: Partial<MenuOptions>;
|
|
66
66
|
/**
|
|
67
67
|
* Predefined selected values
|
|
68
68
|
*/
|
|
@@ -80,8 +80,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
|
|
|
80
80
|
private $active;
|
|
81
81
|
private _mousedown;
|
|
82
82
|
container: HTMLElement;
|
|
83
|
-
/** Instance of the
|
|
84
|
-
|
|
83
|
+
/** Instance of the menu plugin for this autocomplete. */
|
|
84
|
+
menu: Menu;
|
|
85
85
|
static _keydown: boolean;
|
|
86
86
|
selectedValues: AutocompleteData[];
|
|
87
87
|
menuItems: AutocompleteData[];
|
|
@@ -112,8 +112,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
|
|
|
112
112
|
destroy(): void;
|
|
113
113
|
_setupEventHandlers(): void;
|
|
114
114
|
_removeEventHandlers(): void;
|
|
115
|
-
|
|
116
|
-
|
|
115
|
+
_setupMenu(): void;
|
|
116
|
+
_removeMenu(): void;
|
|
117
117
|
_handleInputBlur: () => void;
|
|
118
118
|
_handleInputKeyup: (e: KeyboardEvent) => void;
|
|
119
119
|
_handleInputFocus: () => void;
|
|
@@ -125,8 +125,8 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
|
|
|
125
125
|
_resetCurrentElementPosition(): void;
|
|
126
126
|
_resetAutocomplete(): void;
|
|
127
127
|
_highlightPartialText(input: string, label: string): string[];
|
|
128
|
-
|
|
129
|
-
|
|
128
|
+
_createMenuItem(entry: AutocompleteData): HTMLLIElement;
|
|
129
|
+
_renderMenu(): void;
|
|
130
130
|
_setStatusLoading(): void;
|
|
131
131
|
_updateSelectedInfo(): void;
|
|
132
132
|
_refreshInputText(): void;
|
|
@@ -143,7 +143,7 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
|
|
|
143
143
|
* Updates the visible or selectable items shown in the menu.
|
|
144
144
|
* @param menuItems Items to be available.
|
|
145
145
|
* @param selected Selected item ids
|
|
146
|
-
* @param open Option to conditionally open
|
|
146
|
+
* @param open Option to conditionally open menu
|
|
147
147
|
*/
|
|
148
148
|
setMenuItems(menuItems: AutocompleteData[], selected?: number[] | string[], open?: boolean): void;
|
|
149
149
|
/**
|
|
@@ -4,19 +4,17 @@ export { Cards } from './cards';
|
|
|
4
4
|
export { Carousel } from './carousel';
|
|
5
5
|
export { CharacterCounter } from './characterCounter';
|
|
6
6
|
export { Chips } from './chips';
|
|
7
|
-
export { Collapsible } from './collapsible';
|
|
8
7
|
export { Datepicker } from './datepicker';
|
|
9
|
-
export {
|
|
8
|
+
export { Menu } from './menu';
|
|
10
9
|
export { Lightbox } from './lightbox';
|
|
11
10
|
export { Parallax } from './parallax';
|
|
12
|
-
export { Pushpin } from './pushpin';
|
|
13
11
|
export { Range } from './range';
|
|
14
12
|
export { ScrollSpy } from './scrollspy';
|
|
15
13
|
export { FormSelect } from './select';
|
|
16
14
|
export { Sidenav } from './sidenav';
|
|
15
|
+
export { NavigationRail } from './navigationRail';
|
|
17
16
|
export { Slider } from './slider';
|
|
18
17
|
export { Tabs } from './tabs';
|
|
19
|
-
export { TapTarget } from './tapTarget';
|
|
20
18
|
export { Timepicker } from './timepicker';
|
|
21
|
-
export {
|
|
19
|
+
export { Snackbar } from './snackbar';
|
|
22
20
|
export { Tooltip } from './tooltip';
|
|
@@ -1,37 +1,38 @@
|
|
|
1
1
|
import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
|
|
2
|
-
export interface
|
|
2
|
+
export interface MenuOptions extends BaseOptions {
|
|
3
3
|
/**
|
|
4
4
|
* Defines the edge the menu is aligned to.
|
|
5
5
|
* @default 'left'
|
|
6
6
|
*/
|
|
7
7
|
alignment: 'left' | 'right';
|
|
8
8
|
/**
|
|
9
|
-
* If true, automatically focus
|
|
9
|
+
* If true, automatically focus menu el for keyboard.
|
|
10
10
|
* @default true
|
|
11
11
|
*/
|
|
12
12
|
autoFocus: boolean;
|
|
13
13
|
/**
|
|
14
|
-
* If true, constrainWidth to the size of the
|
|
14
|
+
* If true, constrainWidth to the size of the menu activator.
|
|
15
15
|
* @default true
|
|
16
16
|
*/
|
|
17
17
|
constrainWidth: boolean;
|
|
18
18
|
/**
|
|
19
|
-
* Provide an element that will be the bounding container of the
|
|
19
|
+
* Provide an element that will be the bounding container of the menu.
|
|
20
20
|
* @default null
|
|
21
21
|
*/
|
|
22
22
|
container: Element;
|
|
23
23
|
/**
|
|
24
|
-
* If false, the
|
|
25
|
-
*
|
|
24
|
+
* If false, the menu will show below the trigger.
|
|
25
|
+
* That is the M3 placement. Pass `true` to cover the trigger.
|
|
26
|
+
* @default false
|
|
26
27
|
*/
|
|
27
28
|
coverTrigger: boolean;
|
|
28
29
|
/**
|
|
29
|
-
* If true, close
|
|
30
|
+
* If true, close menu on item click.
|
|
30
31
|
* @default true
|
|
31
32
|
*/
|
|
32
33
|
closeOnClick: boolean;
|
|
33
34
|
/**
|
|
34
|
-
* If true, the
|
|
35
|
+
* If true, the menu will open on hover.
|
|
35
36
|
* @default false
|
|
36
37
|
*/
|
|
37
38
|
hover: boolean;
|
|
@@ -46,22 +47,22 @@ export interface DropdownOptions extends BaseOptions {
|
|
|
46
47
|
*/
|
|
47
48
|
outDuration: number;
|
|
48
49
|
/**
|
|
49
|
-
* Function called when
|
|
50
|
+
* Function called when menu starts entering.
|
|
50
51
|
* @default null
|
|
51
52
|
*/
|
|
52
53
|
onOpenStart: (el: HTMLElement) => void;
|
|
53
54
|
/**
|
|
54
|
-
* Function called when
|
|
55
|
+
* Function called when menu finishes entering.
|
|
55
56
|
* @default null
|
|
56
57
|
*/
|
|
57
58
|
onOpenEnd: (el: HTMLElement) => void;
|
|
58
59
|
/**
|
|
59
|
-
* Function called when
|
|
60
|
+
* Function called when menu starts exiting.
|
|
60
61
|
* @default null
|
|
61
62
|
*/
|
|
62
63
|
onCloseStart: (el: HTMLElement) => void;
|
|
63
64
|
/**
|
|
64
|
-
* Function called when
|
|
65
|
+
* Function called when menu finishes exiting.
|
|
65
66
|
* @default null
|
|
66
67
|
*/
|
|
67
68
|
onCloseEnd: (el: HTMLElement) => void;
|
|
@@ -71,36 +72,36 @@ export interface DropdownOptions extends BaseOptions {
|
|
|
71
72
|
*/
|
|
72
73
|
onItemClick: (el: HTMLLIElement) => void;
|
|
73
74
|
}
|
|
74
|
-
export declare class
|
|
75
|
-
static
|
|
76
|
-
/** ID of the
|
|
75
|
+
export declare class Menu extends Component<MenuOptions> implements Openable {
|
|
76
|
+
static _menus: Menu[];
|
|
77
|
+
/** ID of the menu element. */
|
|
77
78
|
id: string;
|
|
78
|
-
/** The DOM element of the
|
|
79
|
-
|
|
80
|
-
/** If the
|
|
79
|
+
/** The DOM element of the menu. */
|
|
80
|
+
menuEl: HTMLElement;
|
|
81
|
+
/** If the menu is open. */
|
|
81
82
|
isOpen: boolean;
|
|
82
|
-
/** If the
|
|
83
|
+
/** If the menu content is scrollable. */
|
|
83
84
|
isScrollable: boolean;
|
|
84
85
|
isTouchMoving: boolean;
|
|
85
86
|
/** The index of the item focused. */
|
|
86
87
|
focusedIndex: number;
|
|
87
88
|
filterQuery: string[];
|
|
88
89
|
filterTimeout: ReturnType<typeof setTimeout>;
|
|
89
|
-
constructor(el: HTMLElement, options: Partial<
|
|
90
|
-
static get defaults():
|
|
90
|
+
constructor(el: HTMLElement, options: Partial<MenuOptions>);
|
|
91
|
+
static get defaults(): MenuOptions;
|
|
91
92
|
/**
|
|
92
|
-
* Initializes instance of
|
|
93
|
+
* Initializes instance of Menu.
|
|
93
94
|
* @param el HTML element.
|
|
94
95
|
* @param options Component options.
|
|
95
96
|
*/
|
|
96
|
-
static init(el: HTMLElement, options?: Partial<
|
|
97
|
+
static init(el: HTMLElement, options?: Partial<MenuOptions>): Menu;
|
|
97
98
|
/**
|
|
98
|
-
* Initializes instances of
|
|
99
|
+
* Initializes instances of Menu.
|
|
99
100
|
* @param els HTML elements.
|
|
100
101
|
* @param options Component options.
|
|
101
102
|
*/
|
|
102
|
-
static init(els: InitElements<InitElement>, options?: Partial<
|
|
103
|
-
static getInstance(el: HTMLElement):
|
|
103
|
+
static init(els: InitElements<InitElement>, options?: Partial<MenuOptions>): Menu[];
|
|
104
|
+
static getInstance(el: HTMLElement): Menu;
|
|
104
105
|
destroy(): void;
|
|
105
106
|
_setupEventHandlers(): void;
|
|
106
107
|
_removeEventHandlers(): void;
|
|
@@ -112,7 +113,7 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
|
|
|
112
113
|
_handleDocumentClick: (e: MouseEvent) => void;
|
|
113
114
|
_handleTriggerKeydown: (e: KeyboardEvent) => void;
|
|
114
115
|
_handleDocumentTouchmove: (e: TouchEvent) => void;
|
|
115
|
-
|
|
116
|
+
_handleMenuClick: (e: MouseEvent) => void;
|
|
116
117
|
private _isSubmenuTriggerClick;
|
|
117
118
|
private _setupSubmenus;
|
|
118
119
|
private _toggleSubmenu;
|
|
@@ -122,15 +123,15 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
|
|
|
122
123
|
private _closeSubmenus;
|
|
123
124
|
private _containingSubmenu;
|
|
124
125
|
private _focusedRow;
|
|
125
|
-
|
|
126
|
+
_handleMenuKeydown: (e: KeyboardEvent) => void;
|
|
126
127
|
_handleWindowResize: () => void;
|
|
127
128
|
_resetFilterQuery: () => void;
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
129
|
+
_resetMenuStyles(): void;
|
|
130
|
+
_resetMenuPositioningStyles(): void;
|
|
131
|
+
_moveMenuToElement(containerEl?: HTMLElement): void;
|
|
132
|
+
_makeMenuFocusable(): void;
|
|
132
133
|
_focusFocusedItem(): void;
|
|
133
|
-
|
|
134
|
+
_getMenuPosition(closestOverflowParent: HTMLElement): {
|
|
134
135
|
x: number;
|
|
135
136
|
y: number;
|
|
136
137
|
verticalAlignment: string;
|
|
@@ -141,17 +142,17 @@ export declare class Dropdown extends Component<DropdownOptions> implements Open
|
|
|
141
142
|
_animateIn(): void;
|
|
142
143
|
_animateOut(): void;
|
|
143
144
|
private _getClosestAncestor;
|
|
144
|
-
|
|
145
|
+
_placeMenu(): void;
|
|
145
146
|
/**
|
|
146
|
-
* Open
|
|
147
|
+
* Open menu.
|
|
147
148
|
*/
|
|
148
149
|
open: () => void;
|
|
149
150
|
/**
|
|
150
|
-
* Close
|
|
151
|
+
* Close menu.
|
|
151
152
|
*/
|
|
152
153
|
close: () => void;
|
|
153
154
|
/**
|
|
154
|
-
* While
|
|
155
|
+
* While menu is open, you can recalculate its dimensions if its contents have changed.
|
|
155
156
|
*/
|
|
156
157
|
recalculateDimensions: () => void;
|
|
157
158
|
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
|
|
2
|
+
export interface NavigationRailOptions extends BaseOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Called before the rail expands.
|
|
5
|
+
*/
|
|
6
|
+
onOpenStart: (el: HTMLElement) => void;
|
|
7
|
+
/**
|
|
8
|
+
* Called after the rail expands.
|
|
9
|
+
*/
|
|
10
|
+
onOpenEnd: (el: HTMLElement) => void;
|
|
11
|
+
/**
|
|
12
|
+
* Called before the rail collapses.
|
|
13
|
+
*/
|
|
14
|
+
onCloseStart: (el: HTMLElement) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Called after the rail collapses.
|
|
17
|
+
*/
|
|
18
|
+
onCloseEnd: (el: HTMLElement) => void;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Navigation rail. Layout is CSS (collapsed / .expanded). This class
|
|
22
|
+
* toggles that class from the menu button, closes a compact overlay on
|
|
23
|
+
* Escape or a scrim tap, and keeps aria-expanded in sync.
|
|
24
|
+
*/
|
|
25
|
+
export declare class NavigationRail extends Component<NavigationRailOptions> {
|
|
26
|
+
isExpanded: boolean;
|
|
27
|
+
private _toggle;
|
|
28
|
+
private _mql;
|
|
29
|
+
constructor(el: HTMLElement, options: Partial<NavigationRailOptions>);
|
|
30
|
+
static get defaults(): NavigationRailOptions;
|
|
31
|
+
static init(el: HTMLElement, options?: Partial<NavigationRailOptions>): NavigationRail;
|
|
32
|
+
static init(els: InitElements<InitElement>, options?: Partial<NavigationRailOptions>): NavigationRail[];
|
|
33
|
+
static getInstance(el: HTMLElement): NavigationRail;
|
|
34
|
+
destroy(): void;
|
|
35
|
+
/**
|
|
36
|
+
* Expands the rail. On compact windows the overlay (scrim) is CSS.
|
|
37
|
+
*/
|
|
38
|
+
expand: () => void;
|
|
39
|
+
/**
|
|
40
|
+
* Collapses the rail.
|
|
41
|
+
*/
|
|
42
|
+
collapse: () => void;
|
|
43
|
+
/**
|
|
44
|
+
* Toggles expanded / collapsed.
|
|
45
|
+
*/
|
|
46
|
+
toggle: () => void;
|
|
47
|
+
private _findToggle;
|
|
48
|
+
private _isCompact;
|
|
49
|
+
private _isModal;
|
|
50
|
+
private _sync;
|
|
51
|
+
private _onClick;
|
|
52
|
+
private _onKeyDown;
|
|
53
|
+
}
|
|
@@ -32,6 +32,9 @@ export declare class Range extends Component<RangeOptions> {
|
|
|
32
32
|
_setupThumb(): void;
|
|
33
33
|
_removeThumb(): void;
|
|
34
34
|
_isVertical(): boolean;
|
|
35
|
+
_host(): HTMLElement | null;
|
|
36
|
+
_clampDual(): void;
|
|
37
|
+
_fraction(el: HTMLInputElement): number;
|
|
35
38
|
_sync(): void;
|
|
36
39
|
/**
|
|
37
40
|
* Initializes every range input in the current document.
|
|
@@ -9,7 +9,7 @@ import * as Components from './index';
|
|
|
9
9
|
* ./index.ts) - not four hand-synchronized edits that fail silently when one
|
|
10
10
|
* is forgotten.
|
|
11
11
|
*
|
|
12
|
-
* A component that should only ever be constructed explicitly (
|
|
12
|
+
* A component that should only ever be constructed explicitly (Snackbar,
|
|
13
13
|
* CharacterCounter, Range, ...) simply stays out of this table.
|
|
14
14
|
*/
|
|
15
15
|
export declare const AUTO_INIT_COMPONENTS: {
|
|
@@ -29,16 +29,12 @@ export declare const AUTO_INIT_COMPONENTS: {
|
|
|
29
29
|
component: typeof Components.Chips;
|
|
30
30
|
selector: string;
|
|
31
31
|
};
|
|
32
|
-
Collapsible: {
|
|
33
|
-
component: typeof Components.Collapsible;
|
|
34
|
-
selector: string;
|
|
35
|
-
};
|
|
36
32
|
Datepicker: {
|
|
37
33
|
component: typeof Components.Datepicker;
|
|
38
34
|
selector: string;
|
|
39
35
|
};
|
|
40
|
-
|
|
41
|
-
component: typeof Components.
|
|
36
|
+
Menu: {
|
|
37
|
+
component: typeof Components.Menu;
|
|
42
38
|
selector: string;
|
|
43
39
|
};
|
|
44
40
|
Lightbox: {
|
|
@@ -49,10 +45,6 @@ export declare const AUTO_INIT_COMPONENTS: {
|
|
|
49
45
|
component: typeof Components.Parallax;
|
|
50
46
|
selector: string;
|
|
51
47
|
};
|
|
52
|
-
Pushpin: {
|
|
53
|
-
component: typeof Components.Pushpin;
|
|
54
|
-
selector: string;
|
|
55
|
-
};
|
|
56
48
|
ScrollSpy: {
|
|
57
49
|
component: typeof Components.ScrollSpy;
|
|
58
50
|
selector: string;
|
|
@@ -65,12 +57,12 @@ export declare const AUTO_INIT_COMPONENTS: {
|
|
|
65
57
|
component: typeof Components.Sidenav;
|
|
66
58
|
selector: string;
|
|
67
59
|
};
|
|
68
|
-
|
|
69
|
-
component: typeof Components.
|
|
60
|
+
NavigationRail: {
|
|
61
|
+
component: typeof Components.NavigationRail;
|
|
70
62
|
selector: string;
|
|
71
63
|
};
|
|
72
|
-
|
|
73
|
-
component: typeof Components.
|
|
64
|
+
Tabs: {
|
|
65
|
+
component: typeof Components.Tabs;
|
|
74
66
|
selector: string;
|
|
75
67
|
};
|
|
76
68
|
Timepicker: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Menu, MenuOptions } from './menu';
|
|
2
2
|
import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
|
|
3
3
|
export interface FormSelectOptions extends BaseOptions {
|
|
4
4
|
/**
|
|
@@ -7,10 +7,10 @@ export interface FormSelectOptions extends BaseOptions {
|
|
|
7
7
|
*/
|
|
8
8
|
classes: string;
|
|
9
9
|
/**
|
|
10
|
-
* Pass options object to select
|
|
10
|
+
* Pass options object to select menu initialization.
|
|
11
11
|
* @default {}
|
|
12
12
|
*/
|
|
13
|
-
|
|
13
|
+
menuOptions: Partial<MenuOptions>;
|
|
14
14
|
}
|
|
15
15
|
type ValueStruct = {
|
|
16
16
|
el: HTMLOptionElement;
|
|
@@ -25,12 +25,12 @@ export declare class FormSelect extends Component<FormSelectOptions> {
|
|
|
25
25
|
* Is "null", if not detected.
|
|
26
26
|
*/
|
|
27
27
|
labelEl: HTMLLabelElement;
|
|
28
|
-
/**
|
|
29
|
-
|
|
28
|
+
/** The generated menu element. */
|
|
29
|
+
menuEl: HTMLElement;
|
|
30
30
|
/** Text input that shows current selected option. */
|
|
31
31
|
input: HTMLInputElement;
|
|
32
|
-
/** Instance of the
|
|
33
|
-
|
|
32
|
+
/** Instance of the menu plugin for this select. */
|
|
33
|
+
menu: Menu;
|
|
34
34
|
/** The field wrapper around the native select. */
|
|
35
35
|
wrapper: HTMLDivElement;
|
|
36
36
|
selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[];
|
|
@@ -55,12 +55,12 @@ export declare class FormSelect extends Component<FormSelectOptions> {
|
|
|
55
55
|
static getInstance(el: HTMLElement): FormSelect;
|
|
56
56
|
destroy(): void;
|
|
57
57
|
/**
|
|
58
|
-
* Re-read the native `<select>` and update the generated
|
|
58
|
+
* Re-read the native `<select>` and update the generated menu to match.
|
|
59
59
|
*
|
|
60
60
|
* Assigning `select.value` from script fires no `change` event, so nothing
|
|
61
61
|
* else syncs the visible input text or the `.selected` state on the virtual
|
|
62
62
|
* options. Adding or removing `<option>`s also requires this — the menu is
|
|
63
|
-
* rebuilt from the native list, the field and
|
|
63
|
+
* rebuilt from the native list, the field and Menu instance stay put.
|
|
64
64
|
*/
|
|
65
65
|
refresh(): void;
|
|
66
66
|
_setupEventHandlers(): void;
|
|
@@ -74,17 +74,17 @@ export declare class FormSelect extends Component<FormSelectOptions> {
|
|
|
74
74
|
_arraysEqual<T, E>(a: T[], b: (E | T)[]): boolean;
|
|
75
75
|
_selectOptionElement(virtualOption: HTMLElement): void;
|
|
76
76
|
_handleInputClick: () => void;
|
|
77
|
-
|
|
77
|
+
_setupMenu(): void;
|
|
78
78
|
private _setupWrapper;
|
|
79
79
|
private _hideNativeSelect;
|
|
80
80
|
private _buildInput;
|
|
81
81
|
private _buildCaret;
|
|
82
|
-
private
|
|
82
|
+
private _initMenu;
|
|
83
83
|
private _nativeOptions;
|
|
84
84
|
private _buildOptions;
|
|
85
85
|
private _rebuildOptions;
|
|
86
86
|
_addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement): void;
|
|
87
|
-
|
|
87
|
+
_removeMenu(): void;
|
|
88
88
|
_createAndAppendOptionWithIcon(realOption: HTMLOptionElement | HTMLOptGroupElement, type: string): HTMLLIElement;
|
|
89
89
|
_selectValue(value: ValueStruct): void;
|
|
90
90
|
_deselectValue(value: ValueStruct): void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BaseOptions } from '../core/component';
|
|
2
|
-
export interface
|
|
2
|
+
export interface SnackbarOptions extends BaseOptions {
|
|
3
3
|
/**
|
|
4
|
-
* The content of the
|
|
4
|
+
* The content of the Snackbar.
|
|
5
5
|
* @default ""
|
|
6
6
|
*/
|
|
7
7
|
text: string;
|
|
@@ -11,7 +11,7 @@ export interface ToastOptions extends BaseOptions {
|
|
|
11
11
|
*/
|
|
12
12
|
action: string;
|
|
13
13
|
/**
|
|
14
|
-
* Called when the action button is pressed. The
|
|
14
|
+
* Called when the action button is pressed. The snackbar still dismisses.
|
|
15
15
|
* @default null
|
|
16
16
|
*/
|
|
17
17
|
onAction: () => void;
|
|
@@ -21,12 +21,14 @@ export interface ToastOptions extends BaseOptions {
|
|
|
21
21
|
*/
|
|
22
22
|
dismissible: boolean;
|
|
23
23
|
/**
|
|
24
|
-
* Element
|
|
24
|
+
* Element id of a `<template>` (or another element) used as the snackbar body.
|
|
25
25
|
* @default ""
|
|
26
26
|
*/
|
|
27
|
-
|
|
27
|
+
snackbarId?: string;
|
|
28
28
|
/**
|
|
29
|
-
* Length in ms the
|
|
29
|
+
* Length in ms the Snackbar stays before dismissal.
|
|
30
|
+
* `Infinity` keeps it on screen until the user acts.
|
|
31
|
+
* When `action` is set and this is omitted, the default is 10000.
|
|
30
32
|
* @default 4000
|
|
31
33
|
*/
|
|
32
34
|
displayLength: number;
|
|
@@ -41,38 +43,38 @@ export interface ToastOptions extends BaseOptions {
|
|
|
41
43
|
*/
|
|
42
44
|
outDuration: number;
|
|
43
45
|
/**
|
|
44
|
-
* Classes to be added to the
|
|
46
|
+
* Classes to be added to the snackbar element.
|
|
45
47
|
* @default ""
|
|
46
48
|
*/
|
|
47
49
|
classes: string;
|
|
48
50
|
/**
|
|
49
|
-
* Callback function called when
|
|
51
|
+
* Callback function called when the snackbar is dismissed.
|
|
50
52
|
* @default null
|
|
51
53
|
*/
|
|
52
54
|
completeCallback: () => void;
|
|
53
55
|
/**
|
|
54
|
-
* The percentage of the
|
|
55
|
-
* to dismiss a
|
|
56
|
+
* The percentage of the snackbar's width it takes for a drag
|
|
57
|
+
* to dismiss a Snackbar.
|
|
56
58
|
* @default 0.8
|
|
57
59
|
*/
|
|
58
60
|
activationPercent: number;
|
|
59
61
|
}
|
|
60
|
-
export declare class
|
|
61
|
-
/** The
|
|
62
|
+
export declare class Snackbar {
|
|
63
|
+
/** The snackbar element. */
|
|
62
64
|
el: HTMLElement;
|
|
63
65
|
/**
|
|
64
|
-
* The remaining amount of time in ms that the
|
|
66
|
+
* The remaining amount of time in ms that the snackbar
|
|
65
67
|
* will stay before dismissal.
|
|
66
68
|
*/
|
|
67
69
|
timeRemaining: number;
|
|
68
70
|
/**
|
|
69
|
-
* Describes the current pan state of the
|
|
71
|
+
* Describes the current pan state of the Snackbar.
|
|
70
72
|
*/
|
|
71
73
|
panning: boolean;
|
|
72
|
-
options:
|
|
74
|
+
options: SnackbarOptions;
|
|
73
75
|
message: string;
|
|
74
76
|
counterTimeout: ReturnType<typeof setTimeout>;
|
|
75
|
-
/** Wall-clock time the
|
|
77
|
+
/** Wall-clock time the snackbar is due to dismiss, for pause/resume. */
|
|
76
78
|
private _deadline;
|
|
77
79
|
wasSwiped: boolean;
|
|
78
80
|
startingXPos: number;
|
|
@@ -80,12 +82,13 @@ export declare class Toast {
|
|
|
80
82
|
time: number;
|
|
81
83
|
deltaX: number;
|
|
82
84
|
velocityX: number;
|
|
83
|
-
|
|
85
|
+
private _dismissed;
|
|
86
|
+
static _snackbars: Snackbar[];
|
|
84
87
|
static _container: HTMLElement;
|
|
85
|
-
static
|
|
86
|
-
constructor(options
|
|
87
|
-
static get defaults():
|
|
88
|
-
static getInstance(el: HTMLElement):
|
|
88
|
+
static _draggedSnackbar: Snackbar;
|
|
89
|
+
constructor(options?: Partial<SnackbarOptions>);
|
|
90
|
+
static get defaults(): SnackbarOptions;
|
|
91
|
+
static getInstance(el: HTMLElement): Snackbar;
|
|
89
92
|
static _createContainer(): void;
|
|
90
93
|
static _removeContainer(): void;
|
|
91
94
|
static _onDragStart(e: TouchEvent | MouseEvent): void;
|
|
@@ -93,16 +96,16 @@ export declare class Toast {
|
|
|
93
96
|
static _onDragEnd(): void;
|
|
94
97
|
static _xPos(e: TouchEvent | MouseEvent): number;
|
|
95
98
|
/**
|
|
96
|
-
* dismiss all
|
|
99
|
+
* dismiss all snackbars.
|
|
97
100
|
*/
|
|
98
101
|
static dismissAll(): void;
|
|
99
|
-
|
|
102
|
+
_createSnackbar(): HTMLElement;
|
|
100
103
|
_animateIn(): void;
|
|
101
104
|
/**
|
|
102
105
|
* Arm the dismissal timer.
|
|
103
106
|
*
|
|
104
107
|
* One timeout, not a 20ms interval ticking a counter down: the old form woke
|
|
105
|
-
* the page up 50 times a second per
|
|
108
|
+
* the page up 50 times a second per snackbar purely to subtract 20 from a
|
|
106
109
|
* number. Dragging pauses the countdown via _pauseTimer/_resumeTimer instead.
|
|
107
110
|
*/
|
|
108
111
|
_setTimer(): void;
|
|
@@ -111,7 +114,7 @@ export declare class Toast {
|
|
|
111
114
|
/** Restart a countdown stopped by {@link _pauseTimer}. */
|
|
112
115
|
_resumeTimer(): void;
|
|
113
116
|
/**
|
|
114
|
-
* Dismiss
|
|
117
|
+
* Dismiss snackbar with animation.
|
|
115
118
|
*/
|
|
116
119
|
dismiss(): void;
|
|
117
120
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
export * from './components';
|
|
2
2
|
export { Dialogs } from './behaviors/dialogs';
|
|
3
|
+
export { BottomSheets } from './behaviors/bottomSheets';
|
|
4
|
+
export { SideSheets } from './behaviors/sideSheets';
|
|
3
5
|
export { Forms } from './behaviors/forms';
|
|
4
6
|
export { Waves } from './behaviors/waves';
|
|
5
7
|
export { AutoInit } from './components/registry';
|
|
6
8
|
export type { AutoInitOptions } from './components/registry';
|
|
7
|
-
export declare const version = "0.
|
|
9
|
+
export declare const version = "0.6.0";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@expressivecss/expressive",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "ExpressiveCSS - a Material Design 3 front-end framework.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "BaezFJ <baezdevs@gmail.com>",
|
|
@@ -50,7 +50,8 @@
|
|
|
50
50
|
},
|
|
51
51
|
"files": [
|
|
52
52
|
"dist",
|
|
53
|
-
"src/sass"
|
|
53
|
+
"src/sass",
|
|
54
|
+
"CHANGELOG.md"
|
|
54
55
|
],
|
|
55
56
|
"publishConfig": {
|
|
56
57
|
"access": "public"
|