@base-framework/ui 1.0.2022 → 1.0.2024
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/{empty-state-BQmqxn9k.js → empty-state-CpNRoBnH.js} +733 -472
- package/dist/index.es.js +122 -121
- package/dist/molecules.es.js +36 -35
- package/dist/types/components/molecules/modals/drawer/drawer-gesture.d.ts +135 -0
- package/dist/types/components/molecules/modals/drawer/drawer.d.ts +66 -0
- package/dist/types/components/molecules/modals/drawer/index.d.ts +2 -0
- package/dist/types/components/molecules/modals/modal-container.d.ts +16 -3
- package/dist/types/components/molecules/modals/modal-header.d.ts +15 -0
- package/dist/types/components/molecules/modals/modal.d.ts +1 -1
- package/dist/types/components/molecules/molecules.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
import { B as s, C as o, F as t, L as r, P as n, R as l, S as i, a as p, T as m } from "./tooltip-Czvqmxt3.js";
|
|
2
2
|
import { B as u, I as g, L as C } from "./buttons-CHEs54Wl.js";
|
|
3
3
|
import { C as T, F as b } from "./form-group-BB7dLJir.js";
|
|
4
|
-
import { C as D, d as S, D as F, c as B, E as P, F as k, H as M, I as x, M as f, N as v, P as N, R as y, T as h, a as U, b as L, U as W, W as
|
|
5
|
-
import { I as
|
|
4
|
+
import { C as D, d as S, D as F, c as B, E as P, F as k, H as M, I as x, M as f, N as v, P as N, R as y, T as h, a as U, b as L, U as W, W as w } from "./inputs-9udyzkHR.js";
|
|
5
|
+
import { I as R, V as A, a as G } from "./image-BB__4s0g.js";
|
|
6
6
|
import { Icons as E } from "./icons.es.js";
|
|
7
|
-
import { A as j, B as q, C as J,
|
|
8
|
-
import { A as Ra, b as
|
|
9
|
-
import { B as
|
|
10
|
-
import { B as
|
|
11
|
-
import { B as
|
|
12
|
-
import { A as
|
|
13
|
-
import { B as
|
|
14
|
-
import { F as
|
|
15
|
-
import { I as
|
|
7
|
+
import { A as j, B as q, C as J, x as z, O as K, z as Q, E as _, G as X, H as Y, D as Z, m as $, n as aa, R as ea, Q as sa, w as oa, o as ta, c as ra, a as na, b as la, U as ia, l as pa, g as ma, i as da, h as ua, j as ga, e as Ca, k as ca, F as Ta, d as ba, f as Ia, I as Da, L as Sa, y as Fa, M as Ba, p as Pa, N as ka, P as Ma, t as xa, u as fa, S as va, r as Na, s as ya, T as ha, J as Ua, K as La, q as Wa, v as wa } from "./empty-state-CpNRoBnH.js";
|
|
8
|
+
import { A as Ra, b as Aa, C as Ga, D as Oa, a as Ea, F as Va, M as ja, P as qa, R as Ja, c as za, g as Ka, p as Qa } from "./range-calendar-6CLMTieN.js";
|
|
9
|
+
import { B as Xa, p as Ya, C as Za, j as $a, D as ae, m as ee, k as se, H as oe, I as te, N as re, O as ne, P as le, S as ie, n as pe, o as me, x as de, s as ue, q as ge, r as Ce, T as ce, t as Te, w as be, u as Ie, v as De, l as Se, U as Fe, W as Be, f as Pe, h as ke, i as Me, c as xe, d as fe, b as ve, e as Ne, a as ye, g as he } from "./signature-panel-JSfsTsVc.js";
|
|
10
|
+
import { B as Le, I as We, M as we, d as He, e as Re, g as Ae, N as Ge, b as Oe, a as Ee, f as Ve, P as je, c as qe, S as Je, T as ze } from "./mobile-nav-wrapper-Dm9DinRD.js";
|
|
11
|
+
import { B as Qe, a as _e, C as Xe, F as Ye, b as Ze, c as $e, M as as, P as es, S as ss } from "./sidebar-menu-page-D4WMgz5U.js";
|
|
12
|
+
import { A as ts, F as rs, M as ns, a as ls, T as is } from "./aside-template-sUm-F2f0.js";
|
|
13
|
+
import { B as ms } from "./bside-template-do_hXebn.js";
|
|
14
|
+
import { F as us, c as gs } from "./format-BmrNQptv.js";
|
|
15
|
+
import { I as cs } from "./image-scaler-1G-JzJVG.js";
|
|
16
16
|
export {
|
|
17
17
|
j as Alert,
|
|
18
|
-
|
|
18
|
+
ts as AsideTemplate,
|
|
19
19
|
Ra as Avatar,
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
Xa as BackButton,
|
|
21
|
+
Le as Backdrop,
|
|
22
22
|
s as Badge,
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
Qe as BasicPage,
|
|
24
|
+
_e as BlankPage,
|
|
25
25
|
q as Breadcrumb,
|
|
26
|
-
|
|
26
|
+
ms as BsideTemplate,
|
|
27
27
|
u as Button,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
Ya as ButtonTab,
|
|
29
|
+
Aa as Calendar,
|
|
30
|
+
Ga as CalendarCells,
|
|
31
31
|
T as Card,
|
|
32
|
-
|
|
32
|
+
Xe as CenterPage,
|
|
33
33
|
D as Checkbox,
|
|
34
|
-
|
|
34
|
+
Za as CheckboxCol,
|
|
35
35
|
o as CircleGraph,
|
|
36
36
|
S as ColorInput,
|
|
37
37
|
J as ColumnRow,
|
|
@@ -39,140 +39,141 @@ export {
|
|
|
39
39
|
K as Confirmation,
|
|
40
40
|
Q as CountDisplay,
|
|
41
41
|
_ as Counter,
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
$a as DataTable,
|
|
43
|
+
ae as DataTableBody,
|
|
44
44
|
F as DateInput,
|
|
45
45
|
X as DatePicker,
|
|
46
46
|
Y as DateRangePicker,
|
|
47
47
|
B as DateTimeInput,
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
Oa as DayCell,
|
|
49
|
+
Ea as DayHeader,
|
|
50
50
|
Z as DelayComponent,
|
|
51
51
|
$ as DetailBody,
|
|
52
52
|
aa as DetailSection,
|
|
53
53
|
ea as Dialog,
|
|
54
54
|
sa as DialogContainer,
|
|
55
|
-
|
|
55
|
+
ee as DockableOverlay,
|
|
56
56
|
oa as DotsIndicator,
|
|
57
|
-
ta as
|
|
58
|
-
ra as
|
|
59
|
-
na as
|
|
60
|
-
|
|
57
|
+
ta as Drawer,
|
|
58
|
+
ra as Dropdown,
|
|
59
|
+
na as DropdownItem,
|
|
60
|
+
la as DropdownMenu,
|
|
61
|
+
se as DynamicDataTable,
|
|
61
62
|
P as EmailInput,
|
|
62
|
-
|
|
63
|
+
ia as EmptyState,
|
|
63
64
|
t as Fieldset,
|
|
64
65
|
k as FileInput,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
66
|
+
pa as Form,
|
|
67
|
+
ma as FormCard,
|
|
68
|
+
da as FormCardContent,
|
|
69
|
+
ua as FormCardGroup,
|
|
70
|
+
ga as FormControl,
|
|
71
|
+
Ca as FormDescription,
|
|
72
|
+
ca as FormField,
|
|
72
73
|
b as FormGroup,
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
74
|
+
Ta as FormItem,
|
|
75
|
+
ba as FormLabel,
|
|
76
|
+
Ia as FormMessage,
|
|
77
|
+
us as Format,
|
|
78
|
+
Va as FormatDate,
|
|
79
|
+
Ye as FullContainPage,
|
|
80
|
+
Ze as FullPage,
|
|
81
|
+
rs as FullTemplate,
|
|
82
|
+
$e as FullscreenPage,
|
|
83
|
+
oe as HeaderCol,
|
|
83
84
|
M as HiddenInput,
|
|
84
85
|
g as Icon,
|
|
85
86
|
E as Icons,
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
R as Image,
|
|
88
|
+
cs as ImageScaler,
|
|
89
|
+
Da as ImageUploader,
|
|
90
|
+
We as InlineNavigation,
|
|
91
|
+
te as InlineOverlay,
|
|
91
92
|
x as Input,
|
|
92
93
|
r as Legend,
|
|
93
94
|
C as LoadingButton,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
95
|
+
Sa as LogoUploader,
|
|
96
|
+
ns as MainColumn,
|
|
97
|
+
we as MainLink,
|
|
98
|
+
as as MainSection,
|
|
99
|
+
Fa as MinusButton,
|
|
99
100
|
He as MobileNavButton,
|
|
100
101
|
Re as MobileNavWrapper,
|
|
101
|
-
|
|
102
|
-
|
|
102
|
+
Ba as Modal,
|
|
103
|
+
ja as MonthCalendar,
|
|
103
104
|
f as MonthInput,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
105
|
+
Ae as NavButton,
|
|
106
|
+
Ge as NavButtonLink,
|
|
107
|
+
Oe as Navigation,
|
|
108
|
+
Ee as NavigationGroup,
|
|
109
|
+
re as NavigationMenu,
|
|
110
|
+
Ve as NavigationPopover,
|
|
111
|
+
Pa as Notification,
|
|
112
|
+
ka as NotificationContainer,
|
|
112
113
|
v as NumberInput,
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
114
|
+
ne as Overlay,
|
|
115
|
+
es as Page,
|
|
116
|
+
le as Panel,
|
|
116
117
|
N as PasswordInput,
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
118
|
+
Ma as PlusButton,
|
|
119
|
+
qa as PopOver,
|
|
120
|
+
je as PopupHeader,
|
|
120
121
|
n as ProgressBar,
|
|
121
122
|
y as Radio,
|
|
122
|
-
|
|
123
|
+
Ja as RangeCalendar,
|
|
123
124
|
l as RangeSlider,
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
125
|
+
xa as STATUSES,
|
|
126
|
+
fa as STATUS_CLASS,
|
|
127
|
+
ie as ScrollableDataTable,
|
|
128
|
+
pe as SearchDropdown,
|
|
129
|
+
me as SearchInput,
|
|
129
130
|
i as Select,
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
131
|
+
qe as SidebarMenu,
|
|
132
|
+
ss as SidebarMenuPage,
|
|
133
|
+
de as SignaturePanel,
|
|
133
134
|
p as Skeleton,
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
135
|
+
va as SplitRow,
|
|
136
|
+
Na as StaticStatusIndicator,
|
|
137
|
+
ya as StatusIndicator,
|
|
138
|
+
Je as SubNavigation,
|
|
139
|
+
ue as Tab,
|
|
140
|
+
ge as TabGroup,
|
|
141
|
+
Ce as TabNavigation,
|
|
142
|
+
ce as TableHeader,
|
|
142
143
|
h as TelInput,
|
|
143
|
-
|
|
144
|
+
ls as Template,
|
|
144
145
|
U as Textarea,
|
|
145
|
-
|
|
146
|
-
|
|
146
|
+
ha as ThemeToggle,
|
|
147
|
+
Ua as TimeFrame,
|
|
147
148
|
L as TimeInput,
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
La as TimePicker,
|
|
150
|
+
ze as TitleHeader,
|
|
151
|
+
Wa as Toggle,
|
|
151
152
|
m as Tooltip,
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
153
|
+
is as TopBar,
|
|
154
|
+
Te as UnderlinedButtonTab,
|
|
155
|
+
be as UnderlinedTab,
|
|
156
|
+
Ie as UnderlinedTabGroup,
|
|
157
|
+
De as UnderlinedTabNavigation,
|
|
157
158
|
W as UrlInput,
|
|
158
|
-
|
|
159
|
-
|
|
159
|
+
Se as UserList,
|
|
160
|
+
Fe as UserListItem,
|
|
160
161
|
A as Veil,
|
|
161
162
|
G as VeilJot,
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
163
|
+
Be as WeekCalendar,
|
|
164
|
+
Pe as WeekCell,
|
|
165
|
+
ke as WeekCells,
|
|
166
|
+
Me as WeekHeader,
|
|
167
|
+
w as WeekInput,
|
|
168
|
+
za as addTime,
|
|
169
|
+
xe as calculateWeekNumber,
|
|
170
|
+
gs as createWatcherCallback,
|
|
171
|
+
fe as generateWeeks,
|
|
172
|
+
ve as getDateFromWeek,
|
|
173
|
+
Ne as getMonthDays,
|
|
174
|
+
ye as getNextMonthDays,
|
|
175
|
+
Ka as getPosition,
|
|
176
|
+
he as getPreviousMonthDays,
|
|
177
|
+
wa as getStatusClass,
|
|
178
|
+
Qa as pad
|
|
178
179
|
};
|
package/dist/molecules.es.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { A as s, B as t, C as
|
|
2
|
-
import { A as
|
|
1
|
+
import { A as s, B as t, C as r, x as e, O as i, z as n, E as m, G as l, H as d, D as C, m as p, n as D, R as S, Q as g, w as u, o as c, c as F, a as T, b as P, U as w, l as A, g as I, i as f, h as b, j as y, e as B, k as M, F as U, d as k, f as x, I as L, L as R, y as v, M as E, p as N, N as h, P as G, t as O, u as j, S as q, r as z, s as H, T as J, J as K, K as Q, q as _, v as V } from "./empty-state-CpNRoBnH.js";
|
|
2
|
+
import { A as X, P as Y, g as Z } from "./range-calendar-6CLMTieN.js";
|
|
3
3
|
export {
|
|
4
4
|
s as Alert,
|
|
5
|
-
|
|
5
|
+
X as Avatar,
|
|
6
6
|
t as Breadcrumb,
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
r as ColumnRow,
|
|
8
|
+
e as Combobox,
|
|
9
9
|
i as Confirmation,
|
|
10
10
|
n as CountDisplay,
|
|
11
11
|
m as Counter,
|
|
@@ -13,41 +13,42 @@ export {
|
|
|
13
13
|
d as DateRangePicker,
|
|
14
14
|
C as DelayComponent,
|
|
15
15
|
p as DetailBody,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
c as
|
|
21
|
-
F as
|
|
22
|
-
T as
|
|
23
|
-
P as
|
|
16
|
+
D as DetailSection,
|
|
17
|
+
S as Dialog,
|
|
18
|
+
g as DialogContainer,
|
|
19
|
+
u as DotsIndicator,
|
|
20
|
+
c as Drawer,
|
|
21
|
+
F as Dropdown,
|
|
22
|
+
T as DropdownItem,
|
|
23
|
+
P as DropdownMenu,
|
|
24
|
+
w as EmptyState,
|
|
24
25
|
A as Form,
|
|
25
26
|
I as FormCard,
|
|
26
27
|
f as FormCardContent,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
b as FormCardGroup,
|
|
29
|
+
y as FormControl,
|
|
30
|
+
B as FormDescription,
|
|
31
|
+
M as FormField,
|
|
32
|
+
U as FormItem,
|
|
32
33
|
k as FormLabel,
|
|
33
34
|
x as FormMessage,
|
|
34
35
|
L as ImageUploader,
|
|
35
36
|
R as LogoUploader,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
37
|
+
v as MinusButton,
|
|
38
|
+
E as Modal,
|
|
39
|
+
N as Notification,
|
|
40
|
+
h as NotificationContainer,
|
|
41
|
+
G as PlusButton,
|
|
42
|
+
Y as PopOver,
|
|
43
|
+
O as STATUSES,
|
|
44
|
+
j as STATUS_CLASS,
|
|
45
|
+
q as SplitRow,
|
|
46
|
+
z as StaticStatusIndicator,
|
|
47
|
+
H as StatusIndicator,
|
|
48
|
+
J as ThemeToggle,
|
|
49
|
+
K as TimeFrame,
|
|
50
|
+
Q as TimePicker,
|
|
51
|
+
_ as Toggle,
|
|
52
|
+
Z as getPosition,
|
|
53
|
+
V as getStatusClass
|
|
53
54
|
};
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DrawerGesture
|
|
3
|
+
*
|
|
4
|
+
* Manages touch gesture tracking for drawer components.
|
|
5
|
+
* Handles drag state, velocity thresholds, and swipe-to-close behavior.
|
|
6
|
+
*
|
|
7
|
+
* This class provides methods for:
|
|
8
|
+
* - Tracking touch start/move/end events
|
|
9
|
+
* - Calculating drag deltas with rubber-band damping
|
|
10
|
+
* - Determining when to close or snap back the drawer
|
|
11
|
+
* - Managing backdrop opacity during drag
|
|
12
|
+
*
|
|
13
|
+
* @export
|
|
14
|
+
* @class DrawerGesture
|
|
15
|
+
*/
|
|
16
|
+
export class DrawerGesture {
|
|
17
|
+
/**
|
|
18
|
+
* Creates an instance of DrawerGesture.
|
|
19
|
+
*
|
|
20
|
+
* @param {object} [options={}]
|
|
21
|
+
* @param {HTMLElement} [options.modal=null] - The modal element (panel) reference
|
|
22
|
+
* @param {HTMLElement} [options.modalContent=null] - The modal content element reference
|
|
23
|
+
* @param {HTMLElement} [options.modalBody=null] - The scrollable body element reference
|
|
24
|
+
* @param {number} [options.closeThreshold=150] - Pixels to drag before closing
|
|
25
|
+
* @param {number} [options.snapThreshold=50] - Pixels to drag before snapping
|
|
26
|
+
* @param {Function} [options.onClose=null] - Callback when drawer should close
|
|
27
|
+
*/
|
|
28
|
+
constructor(options?: {
|
|
29
|
+
modal?: HTMLElement;
|
|
30
|
+
modalContent?: HTMLElement;
|
|
31
|
+
modalBody?: HTMLElement;
|
|
32
|
+
closeThreshold?: number;
|
|
33
|
+
snapThreshold?: number;
|
|
34
|
+
onClose?: Function;
|
|
35
|
+
});
|
|
36
|
+
modal: HTMLElement;
|
|
37
|
+
modalContent: HTMLElement;
|
|
38
|
+
modalBody: HTMLElement;
|
|
39
|
+
closeThreshold: number;
|
|
40
|
+
snapThreshold: number;
|
|
41
|
+
onClose: Function;
|
|
42
|
+
/**
|
|
43
|
+
* Resets the drag state to initial values
|
|
44
|
+
*
|
|
45
|
+
* @returns {void}
|
|
46
|
+
*/
|
|
47
|
+
reset(): void;
|
|
48
|
+
state: {
|
|
49
|
+
isDragging: boolean;
|
|
50
|
+
startY: number;
|
|
51
|
+
currentY: number;
|
|
52
|
+
startScrollTop: number;
|
|
53
|
+
canDrag: boolean;
|
|
54
|
+
};
|
|
55
|
+
/**
|
|
56
|
+
* Checks if the viewport is mobile size
|
|
57
|
+
*
|
|
58
|
+
* @returns {boolean}
|
|
59
|
+
*/
|
|
60
|
+
isMobile(): boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Handles touch start event
|
|
63
|
+
*
|
|
64
|
+
* @param {TouchEvent} e - The touch event
|
|
65
|
+
* @returns {void}
|
|
66
|
+
*/
|
|
67
|
+
handleTouchStart(e: TouchEvent): void;
|
|
68
|
+
/**
|
|
69
|
+
* Handles touch move event
|
|
70
|
+
*
|
|
71
|
+
* @param {TouchEvent} e - The touch event
|
|
72
|
+
* @returns {void}
|
|
73
|
+
*/
|
|
74
|
+
handleTouchMove(e: TouchEvent): void;
|
|
75
|
+
/**
|
|
76
|
+
* Handles touch end event
|
|
77
|
+
*
|
|
78
|
+
* @param {TouchEvent} e - The touch event
|
|
79
|
+
* @returns {void}
|
|
80
|
+
*/
|
|
81
|
+
handleTouchEnd(e: TouchEvent): void;
|
|
82
|
+
/**
|
|
83
|
+
* Gets current drag delta Y
|
|
84
|
+
*
|
|
85
|
+
* @returns {number} The vertical drag distance in pixels
|
|
86
|
+
*/
|
|
87
|
+
getDeltaY(): number;
|
|
88
|
+
/**
|
|
89
|
+
* Calculates translateY with rubber band damping effect.
|
|
90
|
+
* The further you drag, the more resistance is applied.
|
|
91
|
+
*
|
|
92
|
+
* @param {number} deltaY - The raw drag distance
|
|
93
|
+
* @returns {number} The damped translation distance
|
|
94
|
+
*/
|
|
95
|
+
calculateTranslateY(deltaY: number): number;
|
|
96
|
+
/**
|
|
97
|
+
* Calculates backdrop opacity based on drag distance.
|
|
98
|
+
* Opacity decreases as the drawer is dragged down.
|
|
99
|
+
*
|
|
100
|
+
* @param {number} deltaY - The drag distance
|
|
101
|
+
* @returns {number} Opacity value between 0 and 1
|
|
102
|
+
*/
|
|
103
|
+
calculateBackdropOpacity(deltaY: number): number;
|
|
104
|
+
/**
|
|
105
|
+
* Updates the backdrop opacity via CSS custom property
|
|
106
|
+
*
|
|
107
|
+
* @param {number} opacity - The opacity value (0-1)
|
|
108
|
+
* @returns {void}
|
|
109
|
+
*/
|
|
110
|
+
updateBackdropOpacity(opacity: number): void;
|
|
111
|
+
/**
|
|
112
|
+
* Animates the drawer closing by translating it off-screen
|
|
113
|
+
*
|
|
114
|
+
* @returns {void}
|
|
115
|
+
*/
|
|
116
|
+
animateClose(): void;
|
|
117
|
+
/**
|
|
118
|
+
* Snaps the drawer back to its original position
|
|
119
|
+
*
|
|
120
|
+
* @returns {void}
|
|
121
|
+
*/
|
|
122
|
+
snapBack(): void;
|
|
123
|
+
/**
|
|
124
|
+
* Checks if currently dragging
|
|
125
|
+
*
|
|
126
|
+
* @returns {boolean}
|
|
127
|
+
*/
|
|
128
|
+
isDragging(): boolean;
|
|
129
|
+
/**
|
|
130
|
+
* Cleans up resources and resets state
|
|
131
|
+
*
|
|
132
|
+
* @returns {void}
|
|
133
|
+
*/
|
|
134
|
+
destroy(): void;
|
|
135
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Drawer
|
|
3
|
+
*
|
|
4
|
+
* A mobile-first drawer component that slides up from the bottom on mobile
|
|
5
|
+
* and appears as a centered modal on desktop. Supports swipe-to-close gestures.
|
|
6
|
+
*
|
|
7
|
+
* Extends the Modal component with:
|
|
8
|
+
* - Mobile-optimized slide-up animation
|
|
9
|
+
* - Touch gesture support for swipe-to-close
|
|
10
|
+
* - Rubber-band drag effect
|
|
11
|
+
* - Adaptive behavior (drawer on mobile, modal on desktop)
|
|
12
|
+
*
|
|
13
|
+
* @export
|
|
14
|
+
* @class Drawer
|
|
15
|
+
* @extends {Modal}
|
|
16
|
+
*/
|
|
17
|
+
export class Drawer extends Modal {
|
|
18
|
+
/**
|
|
19
|
+
* Enables swipe-to-close gesture on mobile
|
|
20
|
+
* @type {boolean}
|
|
21
|
+
* @default true
|
|
22
|
+
*/
|
|
23
|
+
swipeToClose: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Pixels to drag before closing (mobile only)
|
|
26
|
+
* @type {number}
|
|
27
|
+
* @default 150
|
|
28
|
+
*/
|
|
29
|
+
closeThreshold: number;
|
|
30
|
+
/**
|
|
31
|
+
* Pixels to drag before snapping behavior kicks in
|
|
32
|
+
* @type {number}
|
|
33
|
+
* @default 50
|
|
34
|
+
*/
|
|
35
|
+
snapThreshold: number;
|
|
36
|
+
/**
|
|
37
|
+
* DrawerGesture instance for handling touch events
|
|
38
|
+
* @type {DrawerGesture|null}
|
|
39
|
+
* @private
|
|
40
|
+
*/
|
|
41
|
+
private gesture;
|
|
42
|
+
/**
|
|
43
|
+
* Cached reference to modal content element (set via cache property)
|
|
44
|
+
* @type {HTMLElement|null}
|
|
45
|
+
*/
|
|
46
|
+
modalContent: HTMLElement | null;
|
|
47
|
+
/**
|
|
48
|
+
* Cached reference to modal body element (set via cache property)
|
|
49
|
+
* @type {HTMLElement|null}
|
|
50
|
+
*/
|
|
51
|
+
modalBody: HTMLElement | null;
|
|
52
|
+
/**
|
|
53
|
+
* Gets extra props to pass to ModalContainer
|
|
54
|
+
*
|
|
55
|
+
* @returns {object}
|
|
56
|
+
*/
|
|
57
|
+
getContainerProps(): object;
|
|
58
|
+
/**
|
|
59
|
+
* Gets gesture event handlers for modal content.
|
|
60
|
+
* Returns event props to be spread onto the modal-content element.
|
|
61
|
+
*
|
|
62
|
+
* @returns {object}
|
|
63
|
+
*/
|
|
64
|
+
getGestureHandlers(): object;
|
|
65
|
+
}
|
|
66
|
+
import { Modal } from '../modal.js';
|
|
@@ -1,8 +1,21 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* ModalContainer
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* Creates a container for modal/drawer components with header, body, and footer.
|
|
5
|
+
* Handles popover behavior, form submission, and backdrop clicks.
|
|
6
|
+
*
|
|
7
|
+
* @param {object} props - Component properties
|
|
8
|
+
* @param {string} [props.class] - Additional CSS classes
|
|
9
|
+
* @param {string} props.title - Modal title
|
|
10
|
+
* @param {string} [props.description] - Optional description
|
|
11
|
+
* @param {boolean} [props.back=false] - Show back button on mobile
|
|
12
|
+
* @param {string} [props.icon] - Icon to display in header
|
|
13
|
+
* @param {Array} [props.options=[]] - Header action buttons
|
|
14
|
+
* @param {Array} [props.buttons=[]] - Footer buttons
|
|
15
|
+
* @param {boolean} [props.hideFooter=false] - Hide footer section
|
|
16
|
+
* @param {Function} [props.onSubmit] - Form submission handler
|
|
17
|
+
* @param {object} [props.gestureHandlers] - Touch gesture handlers for drawer
|
|
18
|
+
* @param {Array} children - Modal body content
|
|
6
19
|
* @returns {object}
|
|
7
20
|
*/
|
|
8
21
|
export const ModalContainer: Function;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ModalHeader
|
|
3
|
+
*
|
|
4
|
+
* Renders a header for modal/drawer components with title, description,
|
|
5
|
+
* optional back button (mobile), icon, and action buttons.
|
|
6
|
+
*
|
|
7
|
+
* @param {object} props
|
|
8
|
+
* @param {string} props.title - The modal title
|
|
9
|
+
* @param {string} [props.description] - Optional description text
|
|
10
|
+
* @param {boolean} [props.back=false] - Show back button on mobile
|
|
11
|
+
* @param {string} [props.icon] - SVG icon string to display
|
|
12
|
+
* @param {Array} [props.options=[]] - Array of action buttons/elements
|
|
13
|
+
* @returns {object}
|
|
14
|
+
*/
|
|
15
|
+
export const ModalHeader: Function;
|
|
@@ -9,6 +9,7 @@ export * from "./form/form-control.js";
|
|
|
9
9
|
export * from "./form/form-field.js";
|
|
10
10
|
export * from "./form/form.js";
|
|
11
11
|
export * from "./modals/atoms.js";
|
|
12
|
+
export * from "./modals/drawer/drawer.js";
|
|
12
13
|
export * from "./modals/modal.js";
|
|
13
14
|
export * from "./notifications/notification-container.js";
|
|
14
15
|
export * from "./notifications/notification.js";
|
package/package.json
CHANGED