funuicss 3.8.14 → 3.8.16
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 +215 -130
- package/package.json +1 -1
- package/ui/accordion/Accordion.d.ts +2 -0
- package/ui/accordion/Accordion.js +655 -56
- package/ui/carousel/Carousel.d.ts +2 -0
- package/ui/carousel/Carousel.js +101 -91
- package/ui/form/Form.js +25 -7
- package/ui/sidebar/SideBar.d.ts +2 -1
- package/ui/sidebar/SideBar.js +356 -14
- package/ui/vista/Vista.d.ts +8 -10
- package/ui/vista/Vista.js +62 -120
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, togglePrefix = _a.togglePrefix, _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,70 @@ 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(Flex_1.default, { width: '100%', alignItems: 'center', gap: 0.5, justify: 'space-between' },
|
|
483
|
+
togglePrefix || react_1.default.createElement("div", null),
|
|
484
|
+
react_1.default.createElement("div", { className: 'pointer hover-text-primary text-right', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
|
|
485
|
+
react_1.default.createElement(bs_1.BsLayoutSidebarInset, null))),
|
|
486
|
+
header && react_1.default.createElement("div", null, header)),
|
|
145
487
|
react_1.default.createElement("section", { className: "sidebar-body mt-3" },
|
|
146
488
|
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
489
|
var section = _a[0], sectionLinks = _a[1];
|
|
@@ -175,8 +517,8 @@ function SideBar(_a) {
|
|
|
175
517
|
footer && react_1.default.createElement("footer", { className: "sidebar-footer mt-2" }, footer))),
|
|
176
518
|
react_1.default.createElement("main", { className: "main-content ".concat(bodyCss), style: {
|
|
177
519
|
flex: 1,
|
|
178
|
-
marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(
|
|
179
|
-
marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(
|
|
520
|
+
marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
|
|
521
|
+
marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
|
|
180
522
|
overflowY: 'auto',
|
|
181
523
|
height: '100vh',
|
|
182
524
|
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;
|