funuicss 3.8.14 → 3.8.15
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/css/fun.css +10 -3
- package/package.json +1 -1
- package/ui/accordion/Accordion.js +589 -18
- package/ui/form/Form.js +25 -7
- package/ui/sidebar/SideBar.js +354 -14
- package/ui/vista/Vista.d.ts +8 -10
- package/ui/vista/Vista.js +57 -120
package/ui/form/Form.js
CHANGED
|
@@ -384,7 +384,7 @@ var Form = function (props) {
|
|
|
384
384
|
}, [parsedDefaultValues]);
|
|
385
385
|
// Validate a single field
|
|
386
386
|
var validateField = (0, react_1.useCallback)(function (field, value) {
|
|
387
|
-
var _a, _b, _c, _d, _e;
|
|
387
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
388
388
|
// Required validation
|
|
389
389
|
if (field.required) {
|
|
390
390
|
if (value === undefined || value === null || value === '') {
|
|
@@ -431,16 +431,34 @@ var Form = function (props) {
|
|
|
431
431
|
}
|
|
432
432
|
}
|
|
433
433
|
// Phone validation (basic) - only for strings
|
|
434
|
+
// Phone validation (basic) - only for strings
|
|
434
435
|
if (field.type === 'tel' && typeof value === 'string') {
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
436
|
+
// Remove all non-digit characters except + at the beginning
|
|
437
|
+
var cleanedValue = value.replace(/[^\d+]/g, '');
|
|
438
|
+
// Check if the value contains any letters (shouldn't happen after cleaning, but just in case)
|
|
439
|
+
if (/[a-zA-Z]/.test(value)) {
|
|
440
|
+
return 'Phone number cannot contain letters';
|
|
441
|
+
}
|
|
442
|
+
// Allow numbers starting with 0 or with country code (+)
|
|
443
|
+
var phoneRegex = /^[\+]?[0-9]{0,18}$/;
|
|
444
|
+
if (value && !phoneRegex.test(cleanedValue)) {
|
|
445
|
+
return 'Please enter a valid phone number (digits only, can start with 0 or +)';
|
|
446
|
+
}
|
|
447
|
+
// Optional: Add minimum length check
|
|
448
|
+
var minLength = ((_c = field.inputProps) === null || _c === void 0 ? void 0 : _c.minLength) || 10; // Default 10 digits
|
|
449
|
+
if (cleanedValue.length > 0 && cleanedValue.length < minLength) {
|
|
450
|
+
return "Phone number must be at least ".concat(minLength, " digits");
|
|
451
|
+
}
|
|
452
|
+
// Optional: Add maximum length check
|
|
453
|
+
var maxLength = ((_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.maxLength) || 15; // Default 15 digits
|
|
454
|
+
if (cleanedValue.length > maxLength) {
|
|
455
|
+
return "Phone number cannot exceed ".concat(maxLength, " digits");
|
|
438
456
|
}
|
|
439
457
|
}
|
|
440
458
|
// Length validation for strings
|
|
441
459
|
if (typeof value === 'string') {
|
|
442
|
-
var minLength = (
|
|
443
|
-
var maxLength = (
|
|
460
|
+
var minLength = (_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.minLength;
|
|
461
|
+
var maxLength = (_f = field.inputProps) === null || _f === void 0 ? void 0 : _f.maxLength;
|
|
444
462
|
if (minLength && value.length < minLength) {
|
|
445
463
|
return "Minimum ".concat(minLength, " characters required");
|
|
446
464
|
}
|
|
@@ -449,7 +467,7 @@ var Form = function (props) {
|
|
|
449
467
|
}
|
|
450
468
|
}
|
|
451
469
|
// Pattern validation if provided - only for strings
|
|
452
|
-
if (((
|
|
470
|
+
if (((_g = field.inputProps) === null || _g === void 0 ? void 0 : _g.pattern) && typeof value === 'string') {
|
|
453
471
|
try {
|
|
454
472
|
var regex = new RegExp(field.inputProps.pattern);
|
|
455
473
|
if (!regex.test(value)) {
|
package/ui/sidebar/SideBar.js
CHANGED
|
@@ -1,5 +1,294 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
// 'use client';
|
|
3
|
+
// import React, {
|
|
4
|
+
// useEffect,
|
|
5
|
+
// useRef,
|
|
6
|
+
// useState,
|
|
7
|
+
// ReactNode,
|
|
8
|
+
// useCallback,
|
|
9
|
+
// } from 'react';
|
|
10
|
+
// import RowFlex from '../specials/RowFlex';
|
|
11
|
+
// import Text from '../text/Text';
|
|
12
|
+
// import { usePathname } from 'next/navigation';
|
|
13
|
+
// import { useVariant } from '../theme/theme';
|
|
14
|
+
// import Button from '../button/Button';
|
|
15
|
+
// import Accordion from '../accordion/Accordion';
|
|
16
|
+
// interface SideBarLink {
|
|
17
|
+
// uri: string;
|
|
18
|
+
// icon?: React.ReactNode;
|
|
19
|
+
// text: string;
|
|
20
|
+
// section: string;
|
|
21
|
+
// onClick?: () => void;
|
|
22
|
+
// }
|
|
23
|
+
// interface SideBarProps {
|
|
24
|
+
// funcss?: string;
|
|
25
|
+
// position?: 'left' | 'right';
|
|
26
|
+
// open?: boolean;
|
|
27
|
+
// header?: ReactNode;
|
|
28
|
+
// content?: ReactNode;
|
|
29
|
+
// footer?: ReactNode;
|
|
30
|
+
// top?: number;
|
|
31
|
+
// sidebarWidth?: number;
|
|
32
|
+
// sidebarCss?: string;
|
|
33
|
+
// activeCss?: string;
|
|
34
|
+
// iconCSS?: string;
|
|
35
|
+
// accordionItemCss?: string;
|
|
36
|
+
// bodyCss?: string;
|
|
37
|
+
// popIcon?: boolean;
|
|
38
|
+
// dividers?: boolean;
|
|
39
|
+
// links?: SideBarLink[];
|
|
40
|
+
// children?: ReactNode;
|
|
41
|
+
// onClose?: () => void;
|
|
42
|
+
// isAccordion?: boolean;
|
|
43
|
+
// }
|
|
44
|
+
// export default function SideBar({
|
|
45
|
+
// funcss = '',
|
|
46
|
+
// position = 'left',
|
|
47
|
+
// open = false,
|
|
48
|
+
// header,
|
|
49
|
+
// content,
|
|
50
|
+
// footer,
|
|
51
|
+
// top = 0,
|
|
52
|
+
// sidebarWidth = 250,
|
|
53
|
+
// iconCSS = '',
|
|
54
|
+
// sidebarCss = '',
|
|
55
|
+
// activeCss,
|
|
56
|
+
// bodyCss = '',
|
|
57
|
+
// popIcon = false,
|
|
58
|
+
// dividers = false,
|
|
59
|
+
// accordionItemCss,
|
|
60
|
+
// links = [],
|
|
61
|
+
// children,
|
|
62
|
+
// onClose,
|
|
63
|
+
// isAccordion = false,
|
|
64
|
+
// }: SideBarProps) {
|
|
65
|
+
// const [isMobile, setIsMobile] = useState(false);
|
|
66
|
+
// const [internalOpen, setInternalOpen] = useState(open);
|
|
67
|
+
// const [appBarHeight, setAppBarHeight] = useState('0px');
|
|
68
|
+
// const pathname = usePathname();
|
|
69
|
+
// const sidebarRef = useRef<HTMLDivElement>(null);
|
|
70
|
+
// const { variant } = useVariant();
|
|
71
|
+
// const [selectedOption, setselectedOption] = useState('');
|
|
72
|
+
// const updateIsMobile = useCallback(() => {
|
|
73
|
+
// setIsMobile(window.innerWidth <= 992);
|
|
74
|
+
// }, []);
|
|
75
|
+
// useEffect(() => {
|
|
76
|
+
// updateIsMobile();
|
|
77
|
+
// window.addEventListener('resize', updateIsMobile);
|
|
78
|
+
// return () => window.removeEventListener('resize', updateIsMobile);
|
|
79
|
+
// }, [updateIsMobile]);
|
|
80
|
+
// // Sync internal state with prop changes
|
|
81
|
+
// useEffect(() => {
|
|
82
|
+
// setInternalOpen(open);
|
|
83
|
+
// }, [open]);
|
|
84
|
+
// useEffect(() => {
|
|
85
|
+
// const appBar = document.querySelector('#appBar') as HTMLElement;
|
|
86
|
+
// if (appBar) {
|
|
87
|
+
// setAppBarHeight(`${appBar.offsetHeight}px`);
|
|
88
|
+
// }
|
|
89
|
+
// }, []);
|
|
90
|
+
// useEffect(() => {
|
|
91
|
+
// if (!isMobile || !internalOpen) return;
|
|
92
|
+
// const handleOutsideClick = (e: MouseEvent | TouchEvent) => {
|
|
93
|
+
// if (sidebarRef.current && !sidebarRef.current.contains(e.target as Node)) {
|
|
94
|
+
// handleClose();
|
|
95
|
+
// }
|
|
96
|
+
// };
|
|
97
|
+
// document.addEventListener('mousedown', handleOutsideClick);
|
|
98
|
+
// document.addEventListener('touchstart', handleOutsideClick);
|
|
99
|
+
// return () => {
|
|
100
|
+
// document.removeEventListener('mousedown', handleOutsideClick);
|
|
101
|
+
// document.removeEventListener('touchstart', handleOutsideClick);
|
|
102
|
+
// };
|
|
103
|
+
// }, [isMobile, internalOpen]);
|
|
104
|
+
// const handleClose = () => {
|
|
105
|
+
// setInternalOpen(false);
|
|
106
|
+
// onClose?.();
|
|
107
|
+
// };
|
|
108
|
+
// const groupedLinks = links.reduce<Record<string, SideBarLink[]>>((acc, link) => {
|
|
109
|
+
// acc[link.section] = acc[link.section] || [];
|
|
110
|
+
// acc[link.section].push(link);
|
|
111
|
+
// return acc;
|
|
112
|
+
// }, {});
|
|
113
|
+
// const isOverlay = isMobile;
|
|
114
|
+
// // Prepare accordion items when isAccordion is true
|
|
115
|
+
// const accordionItems = isAccordion
|
|
116
|
+
// ? Object.entries(groupedLinks).map(([section, sectionLinks]) => ({
|
|
117
|
+
// icon: sectionLinks[0]?.icon,
|
|
118
|
+
// title: section,
|
|
119
|
+
// content: (
|
|
120
|
+
// <div className="sidebar-accordion-links">
|
|
121
|
+
// {sectionLinks.map((link, index) => {
|
|
122
|
+
// const isActive = link.onClick
|
|
123
|
+
// ? selectedOption === `${section}-${index}`
|
|
124
|
+
// : pathname === link.uri;
|
|
125
|
+
// return (
|
|
126
|
+
// <div
|
|
127
|
+
// onClick={() => {
|
|
128
|
+
// if (isMobile) {
|
|
129
|
+
// handleClose();
|
|
130
|
+
// }
|
|
131
|
+
// if (link?.onClick) {
|
|
132
|
+
// link.onClick();
|
|
133
|
+
// setselectedOption(`${section}-${index}`);
|
|
134
|
+
// } else {
|
|
135
|
+
// window.location.href = link.uri;
|
|
136
|
+
// }
|
|
137
|
+
// }}
|
|
138
|
+
// key={link.uri}
|
|
139
|
+
// >
|
|
140
|
+
// <Button
|
|
141
|
+
// fullWidth
|
|
142
|
+
// small
|
|
143
|
+
// funcss={`sidebar-link ${isActive ? "" : "p-0"} text-left ${
|
|
144
|
+
// isActive ? `primary ${activeCss || ''}` : 'hoverable'
|
|
145
|
+
// }`}
|
|
146
|
+
// startIcon={
|
|
147
|
+
// <span
|
|
148
|
+
// className={`${iconCSS || ''} ${
|
|
149
|
+
// variant === 'standard' || popIcon
|
|
150
|
+
// ? `p-1 ${isActive ? 'primary' : 'lighter text-primary border'} central`
|
|
151
|
+
// : variant === 'minimal' && !isActive
|
|
152
|
+
// ? 'p-1 central lighter text-primary'
|
|
153
|
+
// : ''
|
|
154
|
+
// }`}
|
|
155
|
+
// style={{ lineHeight: 0, borderRadius: '0.4rem' }}
|
|
156
|
+
// >
|
|
157
|
+
// {link.icon}
|
|
158
|
+
// </span>
|
|
159
|
+
// }
|
|
160
|
+
// >
|
|
161
|
+
// <Text text={link.text} size="sm" weight={400} />
|
|
162
|
+
// </Button>
|
|
163
|
+
// </div>
|
|
164
|
+
// );
|
|
165
|
+
// })}
|
|
166
|
+
// </div>
|
|
167
|
+
// ),
|
|
168
|
+
// }))
|
|
169
|
+
// : [];
|
|
170
|
+
// return (
|
|
171
|
+
// <div className={`sidebar-container ${isOverlay ? '' : 'with-content'}`}>
|
|
172
|
+
// {internalOpen && (
|
|
173
|
+
// <aside
|
|
174
|
+
// role="complementary"
|
|
175
|
+
// ref={sidebarRef}
|
|
176
|
+
// className={`sidebar ${funcss} ${sidebarCss} ${isOverlay ? 'nav_overlay' : ''}`}
|
|
177
|
+
// style={{
|
|
178
|
+
// width: isOverlay ? '100%' : `${sidebarWidth}px`,
|
|
179
|
+
// height: `calc(100vh - ${appBarHeight || top || '0px'})`,
|
|
180
|
+
// position: 'fixed',
|
|
181
|
+
// top: appBarHeight || top,
|
|
182
|
+
// [position]: 0,
|
|
183
|
+
// padding: '1rem',
|
|
184
|
+
// }}
|
|
185
|
+
// >
|
|
186
|
+
// {header && <div>{header}</div>}
|
|
187
|
+
// <section className="sidebar-body mt-3">
|
|
188
|
+
// {links.length > 0 && (
|
|
189
|
+
// <nav className="sidebar-links">
|
|
190
|
+
// {isAccordion ? (
|
|
191
|
+
// <Accordion
|
|
192
|
+
// itemClass={accordionItemCss}
|
|
193
|
+
// items={accordionItems}
|
|
194
|
+
// allowMultiple={false}
|
|
195
|
+
// contentClass=""
|
|
196
|
+
// titleClass='text-sm'
|
|
197
|
+
// activeClass=""
|
|
198
|
+
// />
|
|
199
|
+
// ) : (
|
|
200
|
+
// Object.entries(groupedLinks).map(([section, sectionLinks]) => (
|
|
201
|
+
// <div key={section} className={`sidebar-section ${dividers ? 'bt' : ''} pt-2 pb-2`}>
|
|
202
|
+
// <Text size="sm" >
|
|
203
|
+
// {section}
|
|
204
|
+
// </Text>
|
|
205
|
+
// {sectionLinks.map((link, index) => {
|
|
206
|
+
// const isActive = link.onClick
|
|
207
|
+
// ? selectedOption === `${section}-${index}`
|
|
208
|
+
// : pathname === link.uri;
|
|
209
|
+
// return (
|
|
210
|
+
// <div
|
|
211
|
+
// onClick={() => {
|
|
212
|
+
// if (isMobile) {
|
|
213
|
+
// handleClose();
|
|
214
|
+
// }
|
|
215
|
+
// if (link?.onClick) {
|
|
216
|
+
// link.onClick();
|
|
217
|
+
// setselectedOption(`${section}-${index}`);
|
|
218
|
+
// } else {
|
|
219
|
+
// window.location.href = link.uri;
|
|
220
|
+
// }
|
|
221
|
+
// }}
|
|
222
|
+
// key={link.uri}
|
|
223
|
+
// >
|
|
224
|
+
// <Button
|
|
225
|
+
// fullWidth
|
|
226
|
+
// small
|
|
227
|
+
// funcss={`sidebar-link text-left ${
|
|
228
|
+
// isActive ? `primary ${activeCss || ''}` : 'hoverable'
|
|
229
|
+
// }`}
|
|
230
|
+
// startIcon={
|
|
231
|
+
// <span
|
|
232
|
+
// className={`${iconCSS || ''} ${
|
|
233
|
+
// variant === 'standard' || popIcon
|
|
234
|
+
// ? `p-1 ${isActive ? 'primary' : 'lighter text-primary border'} central`
|
|
235
|
+
// : variant === 'minimal' && !isActive
|
|
236
|
+
// ? 'p-1 central lighter text-primary'
|
|
237
|
+
// : ''
|
|
238
|
+
// }`}
|
|
239
|
+
// style={{ lineHeight: 0, borderRadius: '0.4rem' }}
|
|
240
|
+
// >
|
|
241
|
+
// {link.icon}
|
|
242
|
+
// </span>
|
|
243
|
+
// }
|
|
244
|
+
// >
|
|
245
|
+
// <Text text={link.text} size="sm" weight={400} />
|
|
246
|
+
// </Button>
|
|
247
|
+
// </div>
|
|
248
|
+
// );
|
|
249
|
+
// })}
|
|
250
|
+
// </div>
|
|
251
|
+
// ))
|
|
252
|
+
// )}
|
|
253
|
+
// </nav>
|
|
254
|
+
// )}
|
|
255
|
+
// {content}
|
|
256
|
+
// </section>
|
|
257
|
+
// {footer && <footer className="sidebar-footer mt-2">{footer}</footer>}
|
|
258
|
+
// </aside>
|
|
259
|
+
// )}
|
|
260
|
+
// <main
|
|
261
|
+
// className={`main-content ${bodyCss}`}
|
|
262
|
+
// style={{
|
|
263
|
+
// flex: 1,
|
|
264
|
+
// marginLeft: position === 'left' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
|
|
265
|
+
// marginRight: position === 'right' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
|
|
266
|
+
// overflowY: 'auto',
|
|
267
|
+
// height: '100vh',
|
|
268
|
+
// paddingTop: appBarHeight || top,
|
|
269
|
+
// transition: 'margin 0.3s ease',
|
|
270
|
+
// }}
|
|
271
|
+
// >
|
|
272
|
+
// {children}
|
|
273
|
+
// </main>
|
|
274
|
+
// </div>
|
|
275
|
+
// );
|
|
276
|
+
// }
|
|
2
277
|
'use client';
|
|
278
|
+
// 'use client';
|
|
279
|
+
// import React, {
|
|
280
|
+
// useEffect,
|
|
281
|
+
// useRef,
|
|
282
|
+
// useState,
|
|
283
|
+
// ReactNode,
|
|
284
|
+
// useCallback,
|
|
285
|
+
// } from 'react';
|
|
286
|
+
// import RowFlex from '../specials/RowFlex';
|
|
287
|
+
// import Text from '../text/Text';
|
|
288
|
+
// import { usePathname } from 'next/navigation';
|
|
289
|
+
// import { useVariant } from '../theme/theme';
|
|
290
|
+
// import Button from '../button/Button';
|
|
291
|
+
// import Accordion from '../accordion/Accordion';
|
|
3
292
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
293
|
if (k2 === undefined) k2 = k;
|
|
5
294
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -44,16 +333,19 @@ var navigation_1 = require("next/navigation");
|
|
|
44
333
|
var theme_1 = require("../theme/theme");
|
|
45
334
|
var Button_1 = __importDefault(require("../button/Button"));
|
|
46
335
|
var Accordion_1 = __importDefault(require("../accordion/Accordion"));
|
|
336
|
+
var bs_1 = require("react-icons/bs");
|
|
337
|
+
var Flex_1 = __importDefault(require("../flex/Flex"));
|
|
47
338
|
function SideBar(_a) {
|
|
48
|
-
var _b;
|
|
49
|
-
var
|
|
50
|
-
var
|
|
51
|
-
var
|
|
52
|
-
var
|
|
339
|
+
var _b, _c;
|
|
340
|
+
var _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.position, position = _e === void 0 ? 'left' : _e, _f = _a.open, open = _f === void 0 ? false : _f, header = _a.header, content = _a.content, footer = _a.footer, _g = _a.top, top = _g === void 0 ? 0 : _g, _h = _a.sidebarWidth, sidebarWidth = _h === void 0 ? 250 : _h, _j = _a.iconCSS, iconCSS = _j === void 0 ? '' : _j, _k = _a.sidebarCss, sidebarCss = _k === void 0 ? '' : _k, activeCss = _a.activeCss, _l = _a.bodyCss, bodyCss = _l === void 0 ? '' : _l, _m = _a.popIcon, popIcon = _m === void 0 ? false : _m, _o = _a.dividers, dividers = _o === void 0 ? false : _o, accordionItemCss = _a.accordionItemCss, _p = _a.links, links = _p === void 0 ? [] : _p, children = _a.children, onClose = _a.onClose, _q = _a.isAccordion, isAccordion = _q === void 0 ? false : _q;
|
|
341
|
+
var _r = (0, react_1.useState)(false), isMobile = _r[0], setIsMobile = _r[1];
|
|
342
|
+
var _s = (0, react_1.useState)(open), internalOpen = _s[0], setInternalOpen = _s[1];
|
|
343
|
+
var _t = (0, react_1.useState)('0px'), appBarHeight = _t[0], setAppBarHeight = _t[1];
|
|
344
|
+
var _u = (0, react_1.useState)(false), collapsed = _u[0], setCollapsed = _u[1];
|
|
53
345
|
var pathname = (0, navigation_1.usePathname)();
|
|
54
346
|
var sidebarRef = (0, react_1.useRef)(null);
|
|
55
347
|
var variant = (0, theme_1.useVariant)().variant;
|
|
56
|
-
var
|
|
348
|
+
var _v = (0, react_1.useState)(''), selectedOption = _v[0], setselectedOption = _v[1];
|
|
57
349
|
var updateIsMobile = (0, react_1.useCallback)(function () {
|
|
58
350
|
setIsMobile(window.innerWidth <= 992);
|
|
59
351
|
}, []);
|
|
@@ -91,6 +383,9 @@ function SideBar(_a) {
|
|
|
91
383
|
setInternalOpen(false);
|
|
92
384
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
93
385
|
};
|
|
386
|
+
var toggleCollapse = function () {
|
|
387
|
+
setCollapsed(!collapsed);
|
|
388
|
+
};
|
|
94
389
|
var groupedLinks = links.reduce(function (acc, link) {
|
|
95
390
|
acc[link.section] = acc[link.section] || [];
|
|
96
391
|
acc[link.section].push(link);
|
|
@@ -125,23 +420,68 @@ function SideBar(_a) {
|
|
|
125
420
|
? "p-1 ".concat(isActive ? 'primary' : 'lighter text-primary border', " central")
|
|
126
421
|
: variant === 'minimal' && !isActive
|
|
127
422
|
? 'p-1 central lighter text-primary'
|
|
128
|
-
: ''), style: { lineHeight: 0, borderRadius: '0.4rem' } }, link.icon) },
|
|
129
|
-
react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
|
|
423
|
+
: ''), style: { lineHeight: 0, borderRadius: '0.4rem' } }, link.icon) }, !collapsed && react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
|
|
130
424
|
}))),
|
|
131
425
|
});
|
|
132
426
|
})
|
|
133
427
|
: [];
|
|
428
|
+
// Get current sidebar width based on collapsed state
|
|
429
|
+
var currentSidebarWidth = collapsed ? 70 : sidebarWidth;
|
|
430
|
+
var collapseIconSize = '18px';
|
|
134
431
|
return (react_1.default.createElement("div", { className: "sidebar-container ".concat(isOverlay ? '' : 'with-content') },
|
|
135
|
-
internalOpen && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_b = {
|
|
136
|
-
width: isOverlay ? '100%' : "".concat(
|
|
432
|
+
internalOpen && collapsed && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar collapsed ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_b = {
|
|
433
|
+
width: isOverlay ? '100%' : "".concat(currentSidebarWidth, "px"),
|
|
137
434
|
height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
|
|
138
435
|
position: 'fixed',
|
|
139
436
|
top: appBarHeight || top
|
|
140
437
|
},
|
|
141
438
|
_b[position] = 0,
|
|
142
|
-
_b.padding = '
|
|
439
|
+
_b.padding = '0.5rem',
|
|
440
|
+
// overflow: 'auto',
|
|
441
|
+
_b.overflow = "visible",
|
|
143
442
|
_b) },
|
|
144
|
-
|
|
443
|
+
react_1.default.createElement("div", { className: 'pointer hover-text-primary text-center p-1', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
|
|
444
|
+
react_1.default.createElement(bs_1.BsLayoutSidebarInsetReverse, null)),
|
|
445
|
+
react_1.default.createElement("section", { className: "" }, links.length > 0 && (react_1.default.createElement(Flex_1.default, { direction: 'column', gap: 0.6, alignItems: 'center', width: '100%' }, Object.entries(groupedLinks).map(function (_a, sectionIndex) {
|
|
446
|
+
var section = _a[0], sectionLinks = _a[1];
|
|
447
|
+
return (react_1.default.createElement(Flex_1.default, { direction: 'column', gap: 0.5, alignItems: 'center', width: '100%' },
|
|
448
|
+
sectionLinks.map(function (link, index) {
|
|
449
|
+
var isActive = link.onClick
|
|
450
|
+
? selectedOption === "".concat(section, "-").concat(index)
|
|
451
|
+
: pathname === link.uri;
|
|
452
|
+
return (react_1.default.createElement("div", { onClick: function () {
|
|
453
|
+
if (isMobile) {
|
|
454
|
+
handleClose();
|
|
455
|
+
}
|
|
456
|
+
if (link === null || link === void 0 ? void 0 : link.onClick) {
|
|
457
|
+
link.onClick();
|
|
458
|
+
setselectedOption("".concat(section, "-").concat(index));
|
|
459
|
+
}
|
|
460
|
+
else {
|
|
461
|
+
window.location.href = link.uri;
|
|
462
|
+
}
|
|
463
|
+
}, key: link.uri },
|
|
464
|
+
react_1.default.createElement("span", { className: " pointer ".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
|
|
465
|
+
? "p-1 ".concat(isActive ? 'primary' : 'bg text-primary border', " central")
|
|
466
|
+
: variant === 'minimal' && !isActive
|
|
467
|
+
? 'p-1 central bg text-primary'
|
|
468
|
+
: ''), style: { lineHeight: 0, borderRadius: '0.4rem', fontSize: collapseIconSize } }, link.icon)));
|
|
469
|
+
}),
|
|
470
|
+
sectionIndex < Object.keys(groupedLinks).length - 1 && (react_1.default.createElement("div", { className: "mt-1 mb-1 bt col" }))));
|
|
471
|
+
})))))),
|
|
472
|
+
internalOpen && !collapsed && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_c = {
|
|
473
|
+
width: isOverlay ? '100%' : "".concat(currentSidebarWidth, "px"),
|
|
474
|
+
height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
|
|
475
|
+
position: 'fixed',
|
|
476
|
+
top: appBarHeight || top
|
|
477
|
+
},
|
|
478
|
+
_c[position] = 0,
|
|
479
|
+
_c.padding = '1rem',
|
|
480
|
+
_c) },
|
|
481
|
+
react_1.default.createElement("div", { className: "sidebar-header" },
|
|
482
|
+
react_1.default.createElement("div", { className: 'pointer hover-text-primary text-right', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
|
|
483
|
+
react_1.default.createElement(bs_1.BsLayoutSidebarInset, null)),
|
|
484
|
+
header && react_1.default.createElement("div", null, header)),
|
|
145
485
|
react_1.default.createElement("section", { className: "sidebar-body mt-3" },
|
|
146
486
|
links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, isAccordion ? (react_1.default.createElement(Accordion_1.default, { itemClass: accordionItemCss, items: accordionItems, allowMultiple: false, contentClass: "", titleClass: 'text-sm', activeClass: "" })) : (Object.entries(groupedLinks).map(function (_a) {
|
|
147
487
|
var section = _a[0], sectionLinks = _a[1];
|
|
@@ -175,8 +515,8 @@ function SideBar(_a) {
|
|
|
175
515
|
footer && react_1.default.createElement("footer", { className: "sidebar-footer mt-2" }, footer))),
|
|
176
516
|
react_1.default.createElement("main", { className: "main-content ".concat(bodyCss), style: {
|
|
177
517
|
flex: 1,
|
|
178
|
-
marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(
|
|
179
|
-
marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(
|
|
518
|
+
marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
|
|
519
|
+
marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
|
|
180
520
|
overflowY: 'auto',
|
|
181
521
|
height: '100vh',
|
|
182
522
|
paddingTop: appBarHeight || top,
|
package/ui/vista/Vista.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
type VistaProps = {
|
|
3
|
+
id?: string;
|
|
3
4
|
backgroundMode?: 'plain' | 'background';
|
|
4
5
|
gradientOverlay?: boolean;
|
|
5
6
|
gradientColor?: string;
|
|
@@ -24,6 +25,9 @@ type VistaProps = {
|
|
|
24
25
|
bg?: string;
|
|
25
26
|
padding?: string;
|
|
26
27
|
textAlign?: 'left' | 'center' | 'right';
|
|
28
|
+
contentWrapperMaxWidth?: string;
|
|
29
|
+
contentJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
30
|
+
contentAlign?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
|
|
27
31
|
mediaPosition?: 'top' | 'bottom';
|
|
28
32
|
funcss?: string;
|
|
29
33
|
blurry?: number;
|
|
@@ -53,7 +57,7 @@ type VistaProps = {
|
|
|
53
57
|
sectionClass?: string;
|
|
54
58
|
containerClass?: string;
|
|
55
59
|
gap?: string;
|
|
56
|
-
|
|
60
|
+
contentWrapperClass?: string;
|
|
57
61
|
mediaWrapperClass?: string;
|
|
58
62
|
children?: React.ReactNode;
|
|
59
63
|
showGradient?: boolean;
|
|
@@ -85,6 +89,7 @@ type VistaProps = {
|
|
|
85
89
|
primaryIconSize?: number;
|
|
86
90
|
primaryButtonFuncss?: string;
|
|
87
91
|
primaryButtonSmall?: boolean;
|
|
92
|
+
primaryButtonBig?: boolean;
|
|
88
93
|
ctaSecondaryRounded?: boolean;
|
|
89
94
|
ctaSecondaryFlat?: boolean;
|
|
90
95
|
ctaSecondaryPrefix?: string;
|
|
@@ -92,6 +97,7 @@ type VistaProps = {
|
|
|
92
97
|
secondaryIconSize?: number;
|
|
93
98
|
secondaryButtonFuncss?: string;
|
|
94
99
|
secondaryButtonSmall?: boolean;
|
|
100
|
+
secondaryButtonBig?: boolean;
|
|
95
101
|
ctaAccentRounded?: boolean;
|
|
96
102
|
ctaAccentFlat?: boolean;
|
|
97
103
|
ctaAccentPrefix?: string;
|
|
@@ -99,6 +105,7 @@ type VistaProps = {
|
|
|
99
105
|
accentIconSize?: number;
|
|
100
106
|
accentButtonFuncss?: string;
|
|
101
107
|
accentButtonSmall?: boolean;
|
|
108
|
+
accentButtonBig?: boolean;
|
|
102
109
|
ctaGap?: number;
|
|
103
110
|
ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
|
|
104
111
|
mediaType?: 'image' | 'video' | 'iframe' | 'custom';
|
|
@@ -106,17 +113,8 @@ type VistaProps = {
|
|
|
106
113
|
iframeUrl?: string;
|
|
107
114
|
iframeSize?: string;
|
|
108
115
|
customMedia?: React.ReactNode;
|
|
109
|
-
mediaOverlay?: boolean;
|
|
110
|
-
mediaOverlayColor?: string;
|
|
111
|
-
mediaOverlayOpacity?: number;
|
|
112
116
|
mediaFilter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none';
|
|
113
117
|
mediaFilterValue?: number;
|
|
114
|
-
mediaBlendMode?: 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten';
|
|
115
|
-
hoverEffect?: 'lift' | 'scale' | 'tilt' | 'glow' | 'none';
|
|
116
|
-
parallax?: boolean;
|
|
117
|
-
parallaxSpeed?: number;
|
|
118
|
-
backgroundParallax?: boolean;
|
|
119
|
-
backgroundParallaxSpeed?: number;
|
|
120
118
|
};
|
|
121
119
|
declare const Vista: React.FC<VistaProps>;
|
|
122
120
|
export default Vista;
|