@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/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 H } from "./inputs-9udyzkHR.js";
5
- import { I as w, V as A, a as G } from "./image-BB__4s0g.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 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, w as z, K, y as Q, z as _, E as X, G as Y, D as Z, m as $, n as aa, Q as ea, O as sa, v as oa, c as ta, a as ra, b as na, R as la, l as ia, g as pa, i as ma, h as da, j as ua, e as ga, k as Ca, F as ca, d as Ta, f as ba, I as Ia, L as Da, x as Sa, M as Fa, o as Ba, N as Pa, P as ka, s as Ma, t as xa, S as fa, q as va, r as Na, T as ya, H as ha, J as Ua, p as La, u as Wa } from "./empty-state-BQmqxn9k.js";
8
- import { A as Ra, b as wa, C as Aa, D as Ga, a as Oa, F as Ea, M as Va, P as ja, R as qa, c as Ja, g as za, p as Ka } from "./range-calendar-6CLMTieN.js";
9
- import { B as _a, p as Xa, C as Ya, j as Za, D as $a, m as ae, k as ee, H as se, I as oe, N as te, O as re, P as ne, S as le, n as ie, o as pe, x as me, s as de, q as ue, r as ge, T as Ce, t as ce, w as Te, u as be, v as Ie, l as De, U as Se, W as Fe, f as Be, h as Pe, i as ke, c as Me, d as xe, b as fe, e as ve, a as Ne, g as ye } from "./signature-panel-JSfsTsVc.js";
10
- import { B as Ue, I as Le, M as We, d as He, e as Re, g as we, N as Ae, b as Ge, a as Oe, f as Ee, P as Ve, c as je, S as qe, T as Je } from "./mobile-nav-wrapper-Dm9DinRD.js";
11
- import { B as Ke, a as Qe, C as _e, F as Xe, b as Ye, c as Ze, M as $e, P as as, S as es } from "./sidebar-menu-page-D4WMgz5U.js";
12
- import { A as os, F as ts, M as rs, a as ns, T as ls } from "./aside-template-sUm-F2f0.js";
13
- import { B as ps } from "./bside-template-do_hXebn.js";
14
- import { F as ds, c as us } from "./format-BmrNQptv.js";
15
- import { I as Cs } from "./image-scaler-1G-JzJVG.js";
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
- os as AsideTemplate,
18
+ ts as AsideTemplate,
19
19
  Ra as Avatar,
20
- _a as BackButton,
21
- Ue as Backdrop,
20
+ Xa as BackButton,
21
+ Le as Backdrop,
22
22
  s as Badge,
23
- Ke as BasicPage,
24
- Qe as BlankPage,
23
+ Qe as BasicPage,
24
+ _e as BlankPage,
25
25
  q as Breadcrumb,
26
- ps as BsideTemplate,
26
+ ms as BsideTemplate,
27
27
  u as Button,
28
- Xa as ButtonTab,
29
- wa as Calendar,
30
- Aa as CalendarCells,
28
+ Ya as ButtonTab,
29
+ Aa as Calendar,
30
+ Ga as CalendarCells,
31
31
  T as Card,
32
- _e as CenterPage,
32
+ Xe as CenterPage,
33
33
  D as Checkbox,
34
- Ya as CheckboxCol,
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
- Za as DataTable,
43
- $a as DataTableBody,
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
- Ga as DayCell,
49
- Oa as DayHeader,
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
- ae as DockableOverlay,
55
+ ee as DockableOverlay,
56
56
  oa as DotsIndicator,
57
- ta as Dropdown,
58
- ra as DropdownItem,
59
- na as DropdownMenu,
60
- ee as DynamicDataTable,
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
- la as EmptyState,
63
+ ia as EmptyState,
63
64
  t as Fieldset,
64
65
  k as FileInput,
65
- ia as Form,
66
- pa as FormCard,
67
- ma as FormCardContent,
68
- da as FormCardGroup,
69
- ua as FormControl,
70
- ga as FormDescription,
71
- Ca as FormField,
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
- ca as FormItem,
74
- Ta as FormLabel,
75
- ba as FormMessage,
76
- ds as Format,
77
- Ea as FormatDate,
78
- Xe as FullContainPage,
79
- Ye as FullPage,
80
- ts as FullTemplate,
81
- Ze as FullscreenPage,
82
- se as HeaderCol,
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
- w as Image,
87
- Cs as ImageScaler,
88
- Ia as ImageUploader,
89
- Le as InlineNavigation,
90
- oe as InlineOverlay,
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
- Da as LogoUploader,
95
- rs as MainColumn,
96
- We as MainLink,
97
- $e as MainSection,
98
- Sa as MinusButton,
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
- Fa as Modal,
102
- Va as MonthCalendar,
102
+ Ba as Modal,
103
+ ja as MonthCalendar,
103
104
  f as MonthInput,
104
- we as NavButton,
105
- Ae as NavButtonLink,
106
- Ge as Navigation,
107
- Oe as NavigationGroup,
108
- te as NavigationMenu,
109
- Ee as NavigationPopover,
110
- Ba as Notification,
111
- Pa as NotificationContainer,
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
- re as Overlay,
114
- as as Page,
115
- ne as Panel,
114
+ ne as Overlay,
115
+ es as Page,
116
+ le as Panel,
116
117
  N as PasswordInput,
117
- ka as PlusButton,
118
- ja as PopOver,
119
- Ve as PopupHeader,
118
+ Ma as PlusButton,
119
+ qa as PopOver,
120
+ je as PopupHeader,
120
121
  n as ProgressBar,
121
122
  y as Radio,
122
- qa as RangeCalendar,
123
+ Ja as RangeCalendar,
123
124
  l as RangeSlider,
124
- Ma as STATUSES,
125
- xa as STATUS_CLASS,
126
- le as ScrollableDataTable,
127
- ie as SearchDropdown,
128
- pe as SearchInput,
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
- je as SidebarMenu,
131
- es as SidebarMenuPage,
132
- me as SignaturePanel,
131
+ qe as SidebarMenu,
132
+ ss as SidebarMenuPage,
133
+ de as SignaturePanel,
133
134
  p as Skeleton,
134
- fa as SplitRow,
135
- va as StaticStatusIndicator,
136
- Na as StatusIndicator,
137
- qe as SubNavigation,
138
- de as Tab,
139
- ue as TabGroup,
140
- ge as TabNavigation,
141
- Ce as TableHeader,
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
- ns as Template,
144
+ ls as Template,
144
145
  U as Textarea,
145
- ya as ThemeToggle,
146
- ha as TimeFrame,
146
+ ha as ThemeToggle,
147
+ Ua as TimeFrame,
147
148
  L as TimeInput,
148
- Ua as TimePicker,
149
- Je as TitleHeader,
150
- La as Toggle,
149
+ La as TimePicker,
150
+ ze as TitleHeader,
151
+ Wa as Toggle,
151
152
  m as Tooltip,
152
- ls as TopBar,
153
- ce as UnderlinedButtonTab,
154
- Te as UnderlinedTab,
155
- be as UnderlinedTabGroup,
156
- Ie as UnderlinedTabNavigation,
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
- De as UserList,
159
- Se as UserListItem,
159
+ Se as UserList,
160
+ Fe as UserListItem,
160
161
  A as Veil,
161
162
  G as VeilJot,
162
- Fe as WeekCalendar,
163
- Be as WeekCell,
164
- Pe as WeekCells,
165
- ke as WeekHeader,
166
- H as WeekInput,
167
- Ja as addTime,
168
- Me as calculateWeekNumber,
169
- us as createWatcherCallback,
170
- xe as generateWeeks,
171
- fe as getDateFromWeek,
172
- ve as getMonthDays,
173
- Ne as getNextMonthDays,
174
- za as getPosition,
175
- ye as getPreviousMonthDays,
176
- Wa as getStatusClass,
177
- Ka as pad
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
  };
@@ -1,11 +1,11 @@
1
- import { A as s, B as t, C as e, w as r, K as i, y as n, z as m, E as l, G as d, D as C, m as p, n as S, Q as g, O as u, v as D, c, a as F, b as T, R as P, l as A, g as I, i as f, h as w, j as b, e as y, k as B, F as M, d as k, f as x, I as L, L as R, x as U, M as v, o as E, N, P as h, s as G, t as O, S as j, q, r as z, T as H, H as J, J as K, p as Q, u as _ } from "./empty-state-BQmqxn9k.js";
2
- import { A as W, P as X, g as Y } from "./range-calendar-6CLMTieN.js";
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
- W as Avatar,
5
+ X as Avatar,
6
6
  t as Breadcrumb,
7
- e as ColumnRow,
8
- r as Combobox,
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
- S as DetailSection,
17
- g as Dialog,
18
- u as DialogContainer,
19
- D as DotsIndicator,
20
- c as Dropdown,
21
- F as DropdownItem,
22
- T as DropdownMenu,
23
- P as EmptyState,
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
- w as FormCardGroup,
28
- b as FormControl,
29
- y as FormDescription,
30
- B as FormField,
31
- M as FormItem,
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
- U as MinusButton,
37
- v as Modal,
38
- E as Notification,
39
- N as NotificationContainer,
40
- h as PlusButton,
41
- X as PopOver,
42
- G as STATUSES,
43
- O as STATUS_CLASS,
44
- j as SplitRow,
45
- q as StaticStatusIndicator,
46
- z as StatusIndicator,
47
- H as ThemeToggle,
48
- J as TimeFrame,
49
- K as TimePicker,
50
- Q as Toggle,
51
- Y as getPosition,
52
- _ as getStatusClass
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';
@@ -0,0 +1,2 @@
1
+ export { DrawerGesture } from "./drawer-gesture.js";
2
+ export { Drawer } from "./drawer.js";
@@ -1,8 +1,21 @@
1
1
  /**
2
- * This will create a dialog component.
2
+ * ModalContainer
3
3
  *
4
- * @param {object} props
5
- * @param {array} children
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;
@@ -25,7 +25,7 @@ export class Modal extends Component {
25
25
  /**
26
26
  * @member {string|null} type
27
27
  * @default null
28
- * @values 'right', 'left'
28
+ * @values 'right', 'left', 'drawer'
29
29
  * @description This will set the type of modal.
30
30
  */
31
31
  type: any;
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@base-framework/ui",
3
- "version": "1.0.2022",
3
+ "version": "1.0.2024",
4
4
  "description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
5
5
  "main": "./dist/index.es.js",
6
6
  "scripts": {