funuicss 3.7.3 → 3.7.5
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 +528 -553
- package/package.json +1 -1
- package/ui/appbar/AppBar.d.ts +32 -2
- package/ui/appbar/AppBar.js +225 -23
- package/ui/button/Button.d.ts +1 -1
- package/ui/button/Button.js +81 -37
- package/ui/chart/Bar.js +37 -33
- package/ui/chart/Line.js +32 -28
- package/ui/chart/Pie.js +5 -1
- package/ui/input/Input.js +263 -93
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.7.
|
|
2
|
+
"version": "3.7.5",
|
|
3
3
|
"name": "funuicss",
|
|
4
4
|
"description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
|
|
5
5
|
"main": "index.js",
|
package/ui/appbar/AppBar.d.ts
CHANGED
|
@@ -1,20 +1,50 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
interface NavLink {
|
|
3
|
+
label: string;
|
|
4
|
+
href: string;
|
|
5
|
+
icon?: string;
|
|
6
|
+
iconPosition?: 'prefix' | 'suffix';
|
|
7
|
+
children?: NavLink[];
|
|
8
|
+
active?: boolean;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
2
11
|
interface NavbarProps {
|
|
3
12
|
fixedTop?: boolean;
|
|
4
13
|
funcss?: string;
|
|
5
14
|
padding?: string;
|
|
6
15
|
fixedBottom?: boolean;
|
|
7
16
|
justify?: string;
|
|
17
|
+
transparent?: boolean;
|
|
8
18
|
children?: React.ReactNode;
|
|
9
19
|
left?: React.ReactNode;
|
|
10
20
|
center?: React.ReactNode;
|
|
11
21
|
right?: React.ReactNode;
|
|
12
22
|
sidebarTrigger?: React.ReactNode;
|
|
13
|
-
transparent?: boolean;
|
|
14
23
|
sideBar?: number;
|
|
15
24
|
hasSidebar?: boolean;
|
|
16
25
|
sidebarOpen?: boolean;
|
|
17
26
|
openSidebar?: () => void;
|
|
27
|
+
variant?: string;
|
|
28
|
+
leftLinks?: NavLink[] | string;
|
|
29
|
+
centerLinks?: NavLink[] | string;
|
|
30
|
+
rightLinks?: NavLink[] | string;
|
|
31
|
+
renderLink?: (link: NavLink, index: number) => React.ReactNode;
|
|
32
|
+
mobileMenuBreakpoint?: number;
|
|
33
|
+
logoType?: 'text' | 'image' | 'both' | 'none';
|
|
34
|
+
logoText?: string;
|
|
35
|
+
logoTextSize?: string;
|
|
36
|
+
logoTextColor?: string;
|
|
37
|
+
logoTextWeight?: string;
|
|
38
|
+
logoUrl?: string;
|
|
39
|
+
logoAlt?: string;
|
|
40
|
+
logoWidth?: string;
|
|
41
|
+
logoHeight?: string;
|
|
42
|
+
logoHref?: string;
|
|
43
|
+
onLogoClick?: () => void;
|
|
44
|
+
linkGap?: string;
|
|
45
|
+
linkPadding?: string;
|
|
46
|
+
activeLinkColor?: string;
|
|
47
|
+
dropdownArrow?: boolean;
|
|
18
48
|
}
|
|
19
|
-
export default function AppBar(
|
|
49
|
+
export default function AppBar(localProps: NavbarProps): React.JSX.Element;
|
|
20
50
|
export {};
|
package/ui/appbar/AppBar.js
CHANGED
|
@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
return result;
|
|
34
34
|
};
|
|
35
35
|
})();
|
|
36
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
37
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
38
|
+
if (ar || !(i in from)) {
|
|
39
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
40
|
+
ar[i] = from[i];
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
44
|
+
};
|
|
36
45
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
46
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
47
|
};
|
|
@@ -40,18 +49,174 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
40
49
|
exports.default = AppBar;
|
|
41
50
|
var React = __importStar(require("react"));
|
|
42
51
|
var react_1 = require("react");
|
|
43
|
-
var navigation_1 = require("next/navigation");
|
|
52
|
+
var navigation_1 = require("next/navigation");
|
|
44
53
|
var Hamburger_1 = __importDefault(require("./Hamburger"));
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
54
|
+
var componentUtils_1 = require("../../utils/componentUtils");
|
|
55
|
+
var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
|
|
56
|
+
// Parse string to object utility
|
|
57
|
+
var parseIfString = function (value, fallback) {
|
|
58
|
+
if (typeof value === 'string') {
|
|
59
|
+
try {
|
|
60
|
+
var parsed = JSON.parse(value);
|
|
61
|
+
if (Array.isArray(fallback) && !Array.isArray(parsed)) {
|
|
62
|
+
console.warn('Parsed value is not an array, using fallback');
|
|
63
|
+
return fallback;
|
|
64
|
+
}
|
|
65
|
+
return parsed;
|
|
66
|
+
}
|
|
67
|
+
catch (error) {
|
|
68
|
+
console.error('Failed to parse JSON string:', error);
|
|
69
|
+
return fallback;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
if (value == null) {
|
|
73
|
+
return fallback;
|
|
74
|
+
}
|
|
75
|
+
return value;
|
|
76
|
+
};
|
|
77
|
+
// Dropdown Arrow Icon Component
|
|
78
|
+
var DropdownArrow = function (_a) {
|
|
79
|
+
var isOpen = _a.isOpen;
|
|
80
|
+
return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", style: {
|
|
81
|
+
transition: 'transform 0.3s ease',
|
|
82
|
+
transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
|
|
83
|
+
} },
|
|
84
|
+
React.createElement("path", { d: "M4 6 L8 10 L12 6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));
|
|
85
|
+
};
|
|
86
|
+
// Link Item Component with Dropdown Support
|
|
87
|
+
var LinkItem = function (_a) {
|
|
88
|
+
var link = _a.link, renderLink = _a.renderLink, _b = _a.linkPadding, linkPadding = _b === void 0 ? '0.5rem 1rem' : _b, _c = _a.activeLinkColor, activeLinkColor = _c === void 0 ? 'primary' : _c, _d = _a.dropdownArrow, dropdownArrow = _d === void 0 ? true : _d, _e = _a.isMobile, isMobile = _e === void 0 ? false : _e;
|
|
89
|
+
var _f = (0, react_1.useState)(false), isOpen = _f[0], setIsOpen = _f[1];
|
|
90
|
+
var _g = (0, react_1.useState)(null), iconNode = _g[0], setIconNode = _g[1];
|
|
91
|
+
var timeoutRef = (0, react_1.useRef)();
|
|
92
|
+
var dropdownRef = (0, react_1.useRef)(null);
|
|
93
|
+
// Handle dynamic icon loading
|
|
94
|
+
(0, react_1.useEffect)(function () {
|
|
95
|
+
if (link.icon) {
|
|
96
|
+
(0, getDynamicIcon_1.getDynamicIcon)(link.icon).then(setIconNode);
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
setIconNode(null);
|
|
100
|
+
}
|
|
101
|
+
}, [link.icon]);
|
|
102
|
+
// Close dropdown when clicking outside
|
|
103
|
+
(0, react_1.useEffect)(function () {
|
|
104
|
+
var handleClickOutside = function (event) {
|
|
105
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
106
|
+
setIsOpen(false);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
if (isOpen) {
|
|
110
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
111
|
+
}
|
|
112
|
+
return function () {
|
|
113
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
114
|
+
};
|
|
115
|
+
}, [isOpen]);
|
|
116
|
+
var hasChildren = link.children && link.children.length > 0;
|
|
117
|
+
var handleMouseEnter = function () {
|
|
118
|
+
if (timeoutRef.current)
|
|
119
|
+
clearTimeout(timeoutRef.current);
|
|
120
|
+
if (!isMobile && hasChildren) {
|
|
121
|
+
setIsOpen(true);
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
var handleMouseLeave = function () {
|
|
125
|
+
if (!isMobile) {
|
|
126
|
+
timeoutRef.current = setTimeout(function () { return setIsOpen(false); }, 150);
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
var handleClick = function (e) {
|
|
130
|
+
if (hasChildren && isMobile) {
|
|
131
|
+
e.preventDefault();
|
|
132
|
+
setIsOpen(!isOpen);
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
var linkContent = (React.createElement("span", { className: "nav_link-content ".concat(link.active ? 'active' : '', " ").concat(link.className || ''), style: {
|
|
136
|
+
display: 'flex',
|
|
137
|
+
alignItems: 'center',
|
|
138
|
+
gap: '0.5rem',
|
|
139
|
+
padding: linkPadding,
|
|
140
|
+
color: 'inherit',
|
|
141
|
+
textDecoration: 'none'
|
|
142
|
+
} },
|
|
143
|
+
iconNode && link.iconPosition !== 'suffix' && (React.createElement("span", { className: "nav_link-icon prefix", style: { display: 'flex', alignItems: 'center' } }, iconNode)),
|
|
144
|
+
React.createElement("span", { className: "nav_link-text" }, link.label),
|
|
145
|
+
iconNode && link.iconPosition === 'suffix' && (React.createElement("span", { className: "nav_link-icon suffix", style: { display: 'flex', alignItems: 'center' } }, iconNode)),
|
|
146
|
+
hasChildren && dropdownArrow && (React.createElement("span", { className: "nav_link-arrow", style: { display: 'flex', alignItems: 'center' } },
|
|
147
|
+
React.createElement(DropdownArrow, { isOpen: isOpen })))));
|
|
148
|
+
// If custom renderer is provided, use it
|
|
149
|
+
if (renderLink) {
|
|
150
|
+
return renderLink(link, 0);
|
|
151
|
+
}
|
|
152
|
+
return (React.createElement("div", { ref: dropdownRef, className: "nav_item ".concat(hasChildren ? 'has-dropdown' : '', " ").concat(isOpen ? 'dropdown-open' : ''), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { position: 'relative' } },
|
|
153
|
+
React.createElement("a", { href: link.href, className: "nav_link ".concat(link.active ? 'active' : ''), onClick: handleClick, style: {
|
|
154
|
+
textDecoration: 'none',
|
|
155
|
+
color: 'inherit',
|
|
156
|
+
display: 'flex',
|
|
157
|
+
alignItems: 'center'
|
|
158
|
+
} }, linkContent),
|
|
159
|
+
hasChildren && isOpen && (React.createElement("div", { className: "nav_dropdown-menu ".concat(isMobile ? 'nav_dropdown-mobile' : '') }, link.children.map(function (child, index) { return (React.createElement(LinkItem, { key: index, link: child, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile })); })))));
|
|
160
|
+
};
|
|
161
|
+
// Links component to render navigation links
|
|
162
|
+
var NavLinks = function (_a) {
|
|
163
|
+
var links = _a.links, renderLink = _a.renderLink, _b = _a.linkGap, linkGap = _b === void 0 ? '1rem' : _b, _c = _a.linkPadding, linkPadding = _c === void 0 ? '0.5rem 1rem' : _c, _d = _a.activeLinkColor, activeLinkColor = _d === void 0 ? 'primary' : _d, _e = _a.dropdownArrow, dropdownArrow = _e === void 0 ? true : _e, _f = _a.isMobile, isMobile = _f === void 0 ? false : _f;
|
|
164
|
+
if (!links || !Array.isArray(links) || links.length === 0) {
|
|
165
|
+
return null;
|
|
166
|
+
}
|
|
167
|
+
return (React.createElement("div", { className: "nav_links", style: {
|
|
168
|
+
display: 'flex',
|
|
169
|
+
alignItems: 'center',
|
|
170
|
+
gap: linkGap,
|
|
171
|
+
flexDirection: isMobile ? 'column' : 'row'
|
|
172
|
+
} }, links.map(function (link, index) { return (React.createElement(LinkItem, { key: index, link: link, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile })); })));
|
|
173
|
+
};
|
|
174
|
+
// Logo component with multiple display options
|
|
175
|
+
var Logo = function (_a) {
|
|
176
|
+
var _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.text, text = _c === void 0 ? 'MyApp' : _c, _d = _a.textSize, textSize = _d === void 0 ? 'xl' : _d, _e = _a.textColor, textColor = _e === void 0 ? 'primary' : _e, _f = _a.textWeight, textWeight = _f === void 0 ? 'bold' : _f, _g = _a.url, url = _g === void 0 ? '' : _g, _h = _a.alt, alt = _h === void 0 ? 'Logo' : _h, _j = _a.width, width = _j === void 0 ? '40px' : _j, _k = _a.height, height = _k === void 0 ? 'auto' : _k, _l = _a.href, href = _l === void 0 ? '/' : _l, onClick = _a.onClick;
|
|
177
|
+
if (type === 'none')
|
|
178
|
+
return null;
|
|
179
|
+
var logoContent = (React.createElement("div", { className: "logo-content", style: { display: 'flex', alignItems: 'center', gap: '0.75rem' } },
|
|
180
|
+
(type === 'image' || type === 'both') && url && (React.createElement("img", { src: url, alt: alt, style: {
|
|
181
|
+
width: width,
|
|
182
|
+
height: height,
|
|
183
|
+
objectFit: 'contain',
|
|
184
|
+
display: 'block'
|
|
185
|
+
}, className: "logo-image" })),
|
|
186
|
+
(type === 'text' || type === 'both') && text && (React.createElement("span", { className: "logo-text text-".concat(textSize, " text-").concat(textColor, " font-").concat(textWeight), style: {
|
|
187
|
+
lineHeight: 1,
|
|
188
|
+
whiteSpace: 'nowrap'
|
|
189
|
+
} }, text))));
|
|
190
|
+
// Wrap in link if href provided
|
|
191
|
+
if (href) {
|
|
192
|
+
return (React.createElement("a", { href: href, onClick: onClick, style: {
|
|
193
|
+
textDecoration: 'none',
|
|
194
|
+
color: 'inherit',
|
|
195
|
+
display: 'flex',
|
|
196
|
+
alignItems: 'center'
|
|
197
|
+
}, className: "logo-link" }, logoContent));
|
|
198
|
+
}
|
|
199
|
+
return (React.createElement("div", { onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' }, className: "logo-container" }, logoContent));
|
|
200
|
+
};
|
|
201
|
+
function AppBar(localProps) {
|
|
202
|
+
// Use component configuration with variant support
|
|
203
|
+
var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('AppBar', localProps.variant).mergeWithLocal;
|
|
204
|
+
// Merge with config - LOCAL PROPS OVERRIDE CONFIG
|
|
205
|
+
var mergedProps = mergeWithLocal(localProps).props;
|
|
206
|
+
// Parse link props if they're strings
|
|
207
|
+
var parsedLeftLinks = parseIfString(mergedProps.leftLinks, []);
|
|
208
|
+
var parsedCenterLinks = parseIfString(mergedProps.centerLinks, []);
|
|
209
|
+
var parsedRightLinks = parseIfString(mergedProps.rightLinks, []);
|
|
210
|
+
// Use mergedProps directly
|
|
211
|
+
var final = mergedProps;
|
|
212
|
+
var _a = (0, react_1.useState)(false), isMobileMenuOpen = _a[0], setIsMobileMenuOpen = _a[1];
|
|
213
|
+
var _b = (0, react_1.useState)(false), isMobileScreen = _b[0], setIsMobileScreen = _b[1];
|
|
214
|
+
var pathname = (0, navigation_1.usePathname)();
|
|
50
215
|
var toggleMenu = function () { return setIsMobileMenuOpen(function (prev) { return !prev; }); };
|
|
51
216
|
var closeMenu = function () { return setIsMobileMenuOpen(false); };
|
|
52
217
|
(0, react_1.useEffect)(function () {
|
|
53
218
|
var handleResize = function () {
|
|
54
|
-
var isMobile = window.innerWidth < 992;
|
|
219
|
+
var isMobile = window.innerWidth < (final.mobileMenuBreakpoint || 992);
|
|
55
220
|
setIsMobileScreen(isMobile);
|
|
56
221
|
if (!isMobile) {
|
|
57
222
|
closeMenu(); // close on larger screens
|
|
@@ -60,7 +225,7 @@ function AppBar(_a) {
|
|
|
60
225
|
handleResize(); // initial check
|
|
61
226
|
window.addEventListener('resize', handleResize);
|
|
62
227
|
return function () { return window.removeEventListener('resize', handleResize); };
|
|
63
|
-
}, []);
|
|
228
|
+
}, [final.mobileMenuBreakpoint]);
|
|
64
229
|
// Automatically close menu on route (pathname) change
|
|
65
230
|
(0, react_1.useEffect)(function () {
|
|
66
231
|
closeMenu();
|
|
@@ -69,19 +234,56 @@ function AppBar(_a) {
|
|
|
69
234
|
var isOpen = _a.isOpen;
|
|
70
235
|
return React.createElement(Hamburger_1.default, { isOpen: isOpen });
|
|
71
236
|
};
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
237
|
+
// Enhanced left section with logo customization
|
|
238
|
+
var renderLeftSection = function () {
|
|
239
|
+
// If custom left content is provided, use it (overrides everything)
|
|
240
|
+
if (final.left)
|
|
241
|
+
return final.left;
|
|
242
|
+
// Render logo based on configuration
|
|
243
|
+
var shouldRenderLogo = final.logoType && final.logoType !== 'none';
|
|
244
|
+
var hasLeftLinks = parsedLeftLinks.length > 0;
|
|
245
|
+
return (React.createElement("div", { className: "left-section", style: { display: 'flex', alignItems: 'center', gap: '2rem' } },
|
|
246
|
+
shouldRenderLogo && (React.createElement(Logo, { type: final.logoType, text: final.logoText, textSize: final.logoTextSize, textColor: final.logoTextColor, textWeight: final.logoTextWeight, url: final.logoUrl, alt: final.logoAlt, width: final.logoWidth, height: final.logoHeight, href: final.logoHref, onClick: final.onLogoClick })),
|
|
247
|
+
hasLeftLinks && !isMobileScreen && (React.createElement(NavLinks, { links: parsedLeftLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }))));
|
|
248
|
+
};
|
|
249
|
+
var renderCenterSection = function () {
|
|
250
|
+
if (final.center)
|
|
251
|
+
return final.center;
|
|
252
|
+
if (parsedCenterLinks.length > 0 && !isMobileScreen) {
|
|
253
|
+
return (React.createElement(NavLinks, { links: parsedCenterLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }));
|
|
254
|
+
}
|
|
255
|
+
return null;
|
|
256
|
+
};
|
|
257
|
+
var renderRightSection = function () {
|
|
258
|
+
if (final.right)
|
|
259
|
+
return final.right;
|
|
260
|
+
if (parsedRightLinks.length > 0 && !isMobileScreen) {
|
|
261
|
+
return (React.createElement(NavLinks, { links: parsedRightLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }));
|
|
262
|
+
}
|
|
263
|
+
return null;
|
|
264
|
+
};
|
|
265
|
+
// Mobile menu content
|
|
266
|
+
var renderMobileMenu = function () {
|
|
267
|
+
if (!isMobileScreen || !isMobileMenuOpen)
|
|
268
|
+
return null;
|
|
269
|
+
var allLinks = __spreadArray(__spreadArray(__spreadArray([], parsedLeftLinks, true), parsedCenterLinks, true), parsedRightLinks, true);
|
|
270
|
+
return (React.createElement("div", { className: "nav_mobile-menu" },
|
|
271
|
+
React.createElement(NavLinks, { links: allLinks, renderLink: final.renderLink, linkGap: "0.5rem", linkPadding: "1rem", activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow, isMobile: true })));
|
|
272
|
+
};
|
|
273
|
+
return (React.createElement(React.Fragment, null,
|
|
274
|
+
React.createElement("nav", { id: 'appBar', className: "navigation-bar\n ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n ").concat(final.funcss || '', "\n ").concat(final.fixedTop ? 'fixed_top_navbar' : '', "\n ").concat(final.sideBar ? 'there_is_sidebar' : '', "\n ").concat(final.transparent ? 'transparent' : '', "\n ").concat(final.fixedBottom ? 'fixedBottom' : '', "\n "), style: {
|
|
275
|
+
padding: "".concat(final.padding || ''),
|
|
276
|
+
justifyContent: "".concat(final.justify || ''),
|
|
277
|
+
} },
|
|
278
|
+
React.createElement("div", { className: "logoWrapper" },
|
|
279
|
+
renderLeftSection(),
|
|
280
|
+
isMobileScreen && isMobileMenuOpen && (React.createElement("div", { className: "hover-text-error pointer _closeNav", onClick: closeMenu },
|
|
281
|
+
React.createElement(Trigger, { isOpen: isMobileMenuOpen })))),
|
|
282
|
+
React.createElement("div", { className: "linkWrapper" }, renderCenterSection()),
|
|
283
|
+
React.createElement("div", { className: "linkWrapper" }, renderRightSection()),
|
|
284
|
+
isMobileScreen && !isMobileMenuOpen && (React.createElement(React.Fragment, null, final.hasSidebar ?
|
|
285
|
+
React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: final.openSidebar }, final.sidebarTrigger || React.createElement(Trigger, { isOpen: final.sidebarOpen }))
|
|
286
|
+
:
|
|
287
|
+
React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, final.sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen }))))),
|
|
288
|
+
renderMobileMenu()));
|
|
87
289
|
}
|
package/ui/button/Button.d.ts
CHANGED
|
@@ -37,7 +37,7 @@ interface ButtonProps {
|
|
|
37
37
|
isLoading?: boolean;
|
|
38
38
|
variant?: string;
|
|
39
39
|
url?: string;
|
|
40
|
-
status?: 'success' | 'warning' | 'info' | '
|
|
40
|
+
status?: 'success' | 'warning' | 'info' | 'error';
|
|
41
41
|
children?: React.ReactNode;
|
|
42
42
|
style?: React.CSSProperties;
|
|
43
43
|
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
package/ui/button/Button.js
CHANGED
|
@@ -66,13 +66,11 @@ function Button(_a) {
|
|
|
66
66
|
var _d = _a.variant, variant = _d === void 0 ? '' : _d, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, prefix = _a.prefix, suffix = _a.suffix, iconSize = _a.iconSize, _e = _a.iconLineHeight, iconLineHeight = _e === void 0 ? 0 : _e, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, bold = _a.bold, children = _a.children, style = _a.style, url = _a.url, onClick = _a.onClick, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "stringPrefix", "stringSuffix", "prefix", "suffix", "iconSize", "iconLineHeight", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "bold", "children", "style", "url", "onClick"]);
|
|
67
67
|
var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Button', variant).mergeWithLocal;
|
|
68
68
|
// Create local props object - these will override config props
|
|
69
|
-
var localProps = __assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, outlineSize: outlineSize, isLoading: isLoading, status: status, bold: bold, stringPrefix: stringPrefix,
|
|
70
|
-
stringSuffix: stringSuffix }, rest);
|
|
69
|
+
var localProps = __assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, outlineSize: outlineSize, isLoading: isLoading, status: status, bold: bold, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, rest);
|
|
71
70
|
// Merge with config - LOCAL PROPS OVERRIDE CONFIG
|
|
72
71
|
var mergedProps = mergeWithLocal(localProps).props;
|
|
73
72
|
// Extract final values - local props take precedence
|
|
74
73
|
var final = {
|
|
75
|
-
// Use local props first, fallback to merged props
|
|
76
74
|
isLoading: isLoading !== null && isLoading !== void 0 ? isLoading : mergedProps.isLoading,
|
|
77
75
|
status: status !== null && status !== void 0 ? status : mergedProps.status,
|
|
78
76
|
text: text !== null && text !== void 0 ? text : mergedProps.text,
|
|
@@ -97,34 +95,78 @@ function Button(_a) {
|
|
|
97
95
|
fillTextColor: fillTextColor !== null && fillTextColor !== void 0 ? fillTextColor : mergedProps.fillTextColor,
|
|
98
96
|
funcss: funcss !== null && funcss !== void 0 ? funcss : mergedProps.funcss,
|
|
99
97
|
fullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : mergedProps.fullWidth,
|
|
100
|
-
stringPrefix: stringPrefix !== null && stringPrefix !== void 0 ? stringPrefix : mergedProps.stringPrefix,
|
|
101
|
-
stringSuffix: stringSuffix !== null && stringSuffix !== void 0 ? stringSuffix : mergedProps.stringSuffix,
|
|
98
|
+
stringPrefix: stringPrefix !== null && stringPrefix !== void 0 ? stringPrefix : mergedProps.stringPrefix,
|
|
99
|
+
stringSuffix: stringSuffix !== null && stringSuffix !== void 0 ? stringSuffix : mergedProps.stringSuffix,
|
|
102
100
|
};
|
|
103
101
|
var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
|
|
104
102
|
var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
|
|
103
|
+
var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
|
|
104
|
+
var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
|
|
105
105
|
function isReactElement(node) {
|
|
106
106
|
return react_1.default.isValidElement(node);
|
|
107
107
|
}
|
|
108
|
-
// Handle
|
|
108
|
+
// Handle stringPrefix - only load if we have a valid string
|
|
109
109
|
(0, react_1.useEffect)(function () {
|
|
110
110
|
var effectiveStringPrefix = final.stringPrefix;
|
|
111
|
-
if (effectiveStringPrefix) {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
setPrefixNode(null); // Clear when empty
|
|
111
|
+
if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
|
|
112
|
+
setPrefixNode(null);
|
|
113
|
+
setHasValidStringPrefix(false);
|
|
114
|
+
return;
|
|
116
115
|
}
|
|
116
|
+
(0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
|
|
117
|
+
if (node) {
|
|
118
|
+
setPrefixNode(node);
|
|
119
|
+
setHasValidStringPrefix(true);
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
setPrefixNode(null);
|
|
123
|
+
setHasValidStringPrefix(false);
|
|
124
|
+
}
|
|
125
|
+
});
|
|
117
126
|
}, [final.stringPrefix]);
|
|
118
|
-
// Handle
|
|
127
|
+
// Handle stringSuffix - only load if we have a valid string
|
|
119
128
|
(0, react_1.useEffect)(function () {
|
|
120
129
|
var effectiveStringSuffix = final.stringSuffix;
|
|
121
|
-
if (effectiveStringSuffix) {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
setSuffixNode(null); // Clear when empty
|
|
130
|
+
if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
|
|
131
|
+
setSuffixNode(null);
|
|
132
|
+
setHasValidStringSuffix(false);
|
|
133
|
+
return;
|
|
126
134
|
}
|
|
135
|
+
(0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
|
|
136
|
+
if (node) {
|
|
137
|
+
setSuffixNode(node);
|
|
138
|
+
setHasValidStringSuffix(true);
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
setSuffixNode(null);
|
|
142
|
+
setHasValidStringSuffix(false);
|
|
143
|
+
}
|
|
144
|
+
});
|
|
127
145
|
}, [final.stringSuffix]);
|
|
146
|
+
// Determine which prefix to show with proper priority
|
|
147
|
+
var showPrefix = react_1.default.useMemo(function () {
|
|
148
|
+
// Priority order: status > startIcon (local) > prefix (local) > stringPrefix (dynamic)
|
|
149
|
+
if (final.status)
|
|
150
|
+
return true;
|
|
151
|
+
if (startIcon)
|
|
152
|
+
return true;
|
|
153
|
+
if (prefix)
|
|
154
|
+
return true;
|
|
155
|
+
if (hasValidStringPrefix && prefixNode)
|
|
156
|
+
return true;
|
|
157
|
+
return false;
|
|
158
|
+
}, [final.status, startIcon, prefix, hasValidStringPrefix, prefixNode]);
|
|
159
|
+
// Determine which suffix to show with proper priority
|
|
160
|
+
var showSuffix = react_1.default.useMemo(function () {
|
|
161
|
+
// Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
|
|
162
|
+
if (endIcon)
|
|
163
|
+
return true;
|
|
164
|
+
if (suffix)
|
|
165
|
+
return true;
|
|
166
|
+
if (hasValidStringSuffix && suffixNode)
|
|
167
|
+
return true;
|
|
168
|
+
return false;
|
|
169
|
+
}, [endIcon, suffix, hasValidStringSuffix, suffixNode]);
|
|
128
170
|
var textColorClass = final.bg
|
|
129
171
|
? final.color
|
|
130
172
|
? final.color
|
|
@@ -155,7 +197,7 @@ function Button(_a) {
|
|
|
155
197
|
final.outlined
|
|
156
198
|
? "outlined outline-".concat(effectiveBg || '', " text-").concat(final.color ? final.color : effectiveBg === null || effectiveBg === void 0 ? void 0 : effectiveBg.replace(/[0-9]/g, ''))
|
|
157
199
|
: effectiveBg || '',
|
|
158
|
-
"".concat(final.fillAnimation ? "".concat(final.fillTextColor ? "hover-text-".concat(final.fillTextColor) :
|
|
200
|
+
"".concat(final.fillAnimation ? "".concat(final.fillTextColor ? "hover-text-".concat(final.fillTextColor) : "hover-text-white", " button-fill fill-").concat(final.fillDirection || 'left') : ''),
|
|
159
201
|
].join(' ');
|
|
160
202
|
var iconWrapperStyle = {
|
|
161
203
|
lineHeight: iconLineHeight,
|
|
@@ -163,27 +205,29 @@ function Button(_a) {
|
|
|
163
205
|
alignItems: 'center',
|
|
164
206
|
justifyContent: 'center',
|
|
165
207
|
};
|
|
166
|
-
//
|
|
167
|
-
var
|
|
168
|
-
|
|
169
|
-
|
|
208
|
+
// Helper function to render icon with proper size
|
|
209
|
+
var renderIcon = function (icon, className) {
|
|
210
|
+
if (className === void 0) { className = ''; }
|
|
211
|
+
if (!icon)
|
|
212
|
+
return null;
|
|
213
|
+
return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, isReactElement(icon) ? react_1.default.cloneElement(icon, { size: iconSize }) : icon));
|
|
214
|
+
};
|
|
170
215
|
return (react_1.default.createElement("span", null,
|
|
171
216
|
react_1.default.createElement("button", __assign({ className: "".concat(classNames, " ").concat((showPrefix || showSuffix || final.isLoading) ? 'iconic' : ''), style: __assign({ height: (_b = height !== null && height !== void 0 ? height : mergedProps.height) !== null && _b !== void 0 ? _b : '', width: final.fullWidth ? '100%' : (_c = width !== null && width !== void 0 ? width : mergedProps.width) !== null && _c !== void 0 ? _c : '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
|
|
172
|
-
final.isLoading ? (react_1.default.createElement(
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
: prefix || startIcon || prefixNode))))),
|
|
217
|
+
final.isLoading ? (renderIcon(react_1.default.createElement(pi_1.PiSpinner, { className: "rotate" }), 'btn_left_icon')) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
218
|
+
final.status && (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle },
|
|
219
|
+
final.status === 'success' && react_1.default.createElement(pi_1.PiCheck, { size: iconSize }),
|
|
220
|
+
final.status === 'info' && react_1.default.createElement(pi_1.PiInfo, { size: iconSize }),
|
|
221
|
+
final.status === 'warning' && react_1.default.createElement(pi_1.PiWarning, { size: iconSize }),
|
|
222
|
+
final.status === 'error' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))),
|
|
223
|
+
!final.status && showPrefix && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
224
|
+
startIcon && renderIcon(startIcon, 'btn_left_icon'),
|
|
225
|
+
!startIcon && prefix && renderIcon(prefix, 'btn_left_icon'),
|
|
226
|
+
!startIcon && !prefix && hasValidStringPrefix && renderIcon(prefixNode, 'btn_left_icon'))))),
|
|
183
227
|
final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(effectiveBg) }),
|
|
184
228
|
children ? children : final.text ? final.text : "",
|
|
185
|
-
showSuffix && (react_1.default.createElement(
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
229
|
+
showSuffix && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
230
|
+
endIcon && renderIcon(endIcon, 'btn_right_icon'),
|
|
231
|
+
!endIcon && suffix && renderIcon(suffix, 'btn_right_icon'),
|
|
232
|
+
!endIcon && !suffix && hasValidStringSuffix && renderIcon(suffixNode, 'btn_right_icon'))))));
|
|
189
233
|
}
|
package/ui/chart/Bar.js
CHANGED
|
@@ -229,38 +229,42 @@ var Bars = function (localProps) {
|
|
|
229
229
|
react_1.default.createElement("div", { className: "text-lg mb-2" }, "\uD83D\uDCCA"),
|
|
230
230
|
react_1.default.createElement("div", null, "No chart data available"))));
|
|
231
231
|
}
|
|
232
|
-
return (react_1.default.createElement(
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
232
|
+
return (react_1.default.createElement("div", { style: {
|
|
233
|
+
height: final.height || "400px",
|
|
234
|
+
width: final.width || "100%"
|
|
235
|
+
} },
|
|
236
|
+
react_1.default.createElement(recharts_1.ResponsiveContainer, { aspect: final.aspect, className: final.funcss, style: containerStyle },
|
|
237
|
+
react_1.default.createElement(recharts_1.BarChart, { data: parsedData, layout: final.layout, margin: smartMargin, barGap: final.barGap, barCategoryGap: final.barCategoryGap, stackOffset: final.stackOffset, syncId: final.syncId },
|
|
238
|
+
final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0', horizontal: final.horizontalLines !== false, vertical: final.verticalLines !== false })),
|
|
239
|
+
final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: isVertical ? 'number' : 'category', dataKey: isVertical ? undefined : 'label', interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize, strokeWidth: 0.2, angle: final.rotateLabel || (isVertical ? 0 : -35), dy: (_a = final.dy) !== null && _a !== void 0 ? _a : (isVertical ? 0 : 10), tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? {
|
|
240
|
+
value: final.xAxisLabel,
|
|
241
|
+
position: isVertical ? 'insideBottom' : 'insideBottom',
|
|
242
|
+
offset: isVertical ? -10 : -30
|
|
243
|
+
} : undefined }, final.xAxisProps))),
|
|
244
|
+
final.showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ type: isVertical ? 'category' : 'number', dataKey: isVertical ? 'label' : undefined, interval: final.yInterval, strokeWidth: 0.2, fontSize: final.yLabelSize, tickLine: final.tickLine, axisLine: final.axisLine, label: final.yAxisLabel ? {
|
|
245
|
+
value: final.yAxisLabel,
|
|
246
|
+
angle: isVertical ? 0 : -90,
|
|
247
|
+
position: isVertical ? 'insideLeft' : 'insideLeft'
|
|
248
|
+
} : undefined }, final.yAxisProps))),
|
|
249
|
+
final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
|
|
250
|
+
final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
|
|
251
|
+
parsedSeries.map(function (s, index) {
|
|
252
|
+
if (!s || !s.dataKey) {
|
|
253
|
+
console.warn('Invalid series configuration at index:', index);
|
|
254
|
+
return null;
|
|
255
|
+
}
|
|
256
|
+
try {
|
|
257
|
+
return (react_1.default.createElement(recharts_1.Bar, { key: s.dataKey || "series-".concat(index), dataKey: s.dataKey, name: s.label || s.dataKey, fill: resolveColor(s.color), stroke: s.stroke ? resolveColor(s.stroke) : undefined, strokeWidth: s.strokeWidth || 0, fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.8, barSize: s.barSize || final.barSize, maxBarSize: s.maxBarSize || final.maxBarSize, stackId: s.stackId, background: s.background || false, minPointSize: s.minPointSize, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration, onClick: final.onBarClick, onMouseEnter: final.onBarMouseEnter, onMouseLeave: final.onBarMouseLeave, activeBar: s.activeBar !== false ? (typeof s.activeBar === 'object' ? s.activeBar : {
|
|
258
|
+
fill: resolveColor(s.color),
|
|
259
|
+
stroke: resolveColor(s.stroke),
|
|
260
|
+
strokeWidth: 2,
|
|
261
|
+
fillOpacity: 1
|
|
262
|
+
}) : false }));
|
|
263
|
+
}
|
|
264
|
+
catch (error) {
|
|
265
|
+
console.error('Error rendering bar series:', error);
|
|
266
|
+
return null;
|
|
267
|
+
}
|
|
268
|
+
})))));
|
|
265
269
|
};
|
|
266
270
|
exports.default = Bars;
|