funuicss 3.6.18 → 3.6.20
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 +510 -317
- package/package.json +1 -2
- package/ui/button/Button.js +56 -39
- package/ui/carousel/Carousel.d.ts +2 -0
- package/ui/carousel/Carousel.js +11 -11
- package/ui/input/Input.js +283 -157
- package/ui/theme/theme.d.ts +16 -6
- package/ui/theme/theme.js +96 -82
- package/utils/componentUtils.d.ts +9 -6
- package/utils/componentUtils.js +42 -170
- package/js/firebase/Auth.d.ts +0 -191
- package/js/firebase/Auth.js +0 -746
- package/js/firebase/FireStore.d.ts +0 -54
- package/js/firebase/FireStore.js +0 -285
- package/utils/FireStore.d.ts +0 -10
- package/utils/FireStore.js +0 -273
- package/utils/Firebase.d.ts +0 -2
- package/utils/Firebase.js +0 -16
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.6.
|
|
2
|
+
"version": "3.6.20",
|
|
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",
|
|
@@ -44,7 +44,6 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"aos": "^2.3.4",
|
|
46
46
|
"dayjs": "^1.11.13",
|
|
47
|
-
"firebase": "^12.3.0",
|
|
48
47
|
"framer-motion": "^12.23.6",
|
|
49
48
|
"hls.js": "^1.6.5",
|
|
50
49
|
"next": "^13.4.4",
|
package/ui/button/Button.js
CHANGED
|
@@ -62,56 +62,69 @@ var pi_1 = require("react-icons/pi");
|
|
|
62
62
|
var componentUtils_1 = require("../../utils/componentUtils");
|
|
63
63
|
var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
|
|
64
64
|
function Button(_a) {
|
|
65
|
-
var _b
|
|
65
|
+
var _b, _c;
|
|
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"]);
|
|
66
67
|
var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Button', variant).mergeWithLocal;
|
|
67
|
-
|
|
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, // Include stringPrefix in local props
|
|
70
|
+
stringSuffix: stringSuffix }, rest);
|
|
71
|
+
// Merge with config - LOCAL PROPS OVERRIDE CONFIG
|
|
72
|
+
var mergedProps = mergeWithLocal(localProps).props;
|
|
73
|
+
// Extract final values - local props take precedence
|
|
68
74
|
var final = {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
75
|
+
// Use local props first, fallback to merged props
|
|
76
|
+
isLoading: isLoading !== null && isLoading !== void 0 ? isLoading : mergedProps.isLoading,
|
|
77
|
+
status: status !== null && status !== void 0 ? status : mergedProps.status,
|
|
78
|
+
text: text !== null && text !== void 0 ? text : mergedProps.text,
|
|
79
|
+
outlined: outlined !== null && outlined !== void 0 ? outlined : mergedProps.outlined,
|
|
80
|
+
bg: bg !== null && bg !== void 0 ? bg : mergedProps.bg,
|
|
81
|
+
color: color !== null && color !== void 0 ? color : mergedProps.color,
|
|
82
|
+
rounded: rounded !== null && rounded !== void 0 ? rounded : mergedProps.rounded,
|
|
83
|
+
hoverless: hoverless !== null && hoverless !== void 0 ? hoverless : mergedProps.hoverless,
|
|
84
|
+
bold: bold !== null && bold !== void 0 ? bold : mergedProps.bold,
|
|
85
|
+
float: float !== null && float !== void 0 ? float : mergedProps.float,
|
|
86
|
+
raised: raised !== null && raised !== void 0 ? raised : mergedProps.raised,
|
|
87
|
+
hoverUp: hoverUp !== null && hoverUp !== void 0 ? hoverUp : mergedProps.hoverUp,
|
|
88
|
+
flat: flat !== null && flat !== void 0 ? flat : mergedProps.flat,
|
|
89
|
+
hoverNone: hoverNone !== null && hoverNone !== void 0 ? hoverNone : mergedProps.hoverNone,
|
|
90
|
+
small: small !== null && small !== void 0 ? small : mergedProps.small,
|
|
91
|
+
smaller: smaller !== null && smaller !== void 0 ? smaller : mergedProps.smaller,
|
|
92
|
+
big: big !== null && big !== void 0 ? big : mergedProps.big,
|
|
93
|
+
bigger: bigger !== null && bigger !== void 0 ? bigger : mergedProps.bigger,
|
|
94
|
+
jumbo: jumbo !== null && jumbo !== void 0 ? jumbo : mergedProps.jumbo,
|
|
95
|
+
fillAnimation: fillAnimation !== null && fillAnimation !== void 0 ? fillAnimation : mergedProps.fillAnimation,
|
|
96
|
+
fillDirection: fillDirection !== null && fillDirection !== void 0 ? fillDirection : mergedProps.fillDirection,
|
|
97
|
+
fillTextColor: fillTextColor !== null && fillTextColor !== void 0 ? fillTextColor : mergedProps.fillTextColor,
|
|
98
|
+
funcss: funcss !== null && funcss !== void 0 ? funcss : mergedProps.funcss,
|
|
99
|
+
fullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : mergedProps.fullWidth,
|
|
100
|
+
stringPrefix: stringPrefix !== null && stringPrefix !== void 0 ? stringPrefix : mergedProps.stringPrefix, // Handle both local and config
|
|
101
|
+
stringSuffix: stringSuffix !== null && stringSuffix !== void 0 ? stringSuffix : mergedProps.stringSuffix, // Handle both local and config
|
|
92
102
|
};
|
|
93
|
-
var
|
|
94
|
-
var
|
|
103
|
+
var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
|
|
104
|
+
var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
|
|
95
105
|
function isReactElement(node) {
|
|
96
106
|
return react_1.default.isValidElement(node);
|
|
97
107
|
}
|
|
98
|
-
//
|
|
108
|
+
// Handle both local and config stringPrefix
|
|
99
109
|
(0, react_1.useEffect)(function () {
|
|
100
|
-
|
|
101
|
-
|
|
110
|
+
var effectiveStringPrefix = final.stringPrefix;
|
|
111
|
+
if (effectiveStringPrefix) {
|
|
112
|
+
(0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) { return setPrefixNode(node); });
|
|
102
113
|
}
|
|
103
114
|
else {
|
|
104
115
|
setPrefixNode(null); // Clear when empty
|
|
105
116
|
}
|
|
106
|
-
}, [stringPrefix]);
|
|
117
|
+
}, [final.stringPrefix]);
|
|
118
|
+
// Handle both local and config stringSuffix
|
|
107
119
|
(0, react_1.useEffect)(function () {
|
|
108
|
-
|
|
109
|
-
|
|
120
|
+
var effectiveStringSuffix = final.stringSuffix;
|
|
121
|
+
if (effectiveStringSuffix) {
|
|
122
|
+
(0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) { return setSuffixNode(node); });
|
|
110
123
|
}
|
|
111
124
|
else {
|
|
112
125
|
setSuffixNode(null); // Clear when empty
|
|
113
126
|
}
|
|
114
|
-
}, [stringSuffix]);
|
|
127
|
+
}, [final.stringSuffix]);
|
|
115
128
|
var textColorClass = final.bg
|
|
116
129
|
? final.color
|
|
117
130
|
? final.color
|
|
@@ -150,22 +163,26 @@ function Button(_a) {
|
|
|
150
163
|
alignItems: 'center',
|
|
151
164
|
justifyContent: 'center',
|
|
152
165
|
};
|
|
166
|
+
// Determine which prefix to show (priority: status > local startIcon > config stringPrefix > local stringPrefix)
|
|
167
|
+
var showPrefix = final.status || prefix || startIcon || prefixNode;
|
|
168
|
+
// Determine which suffix to show
|
|
169
|
+
var showSuffix = suffix || endIcon || suffixNode;
|
|
153
170
|
return (react_1.default.createElement("span", null,
|
|
154
|
-
react_1.default.createElement("button", __assign({ className: "".concat(classNames, " ").concat((
|
|
171
|
+
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),
|
|
155
172
|
final.isLoading ? (react_1.default.createElement("span", { className: "btn_left_icon rotate", style: iconWrapperStyle },
|
|
156
173
|
react_1.default.createElement(pi_1.PiSpinner, { size: iconSize }))) : (react_1.default.createElement(react_1.default.Fragment, null, final.status ? (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle },
|
|
157
174
|
final.status === 'success' && react_1.default.createElement(pi_1.PiCheck, { size: iconSize }),
|
|
158
175
|
final.status === 'info' && react_1.default.createElement(pi_1.PiInfo, { size: iconSize }),
|
|
159
176
|
final.status === 'warning' && react_1.default.createElement(pi_1.PiWarning, { size: iconSize }),
|
|
160
177
|
final.status === 'danger' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))) : (
|
|
161
|
-
/* Otherwise show regular start icons */
|
|
162
|
-
|
|
178
|
+
/* Otherwise show regular start icons (priority: local startIcon > config stringPrefix) */
|
|
179
|
+
showPrefix && (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle }, isReactElement(startIcon) ? react_1.default.cloneElement(startIcon, { size: iconSize })
|
|
163
180
|
: isReactElement(prefix) ? react_1.default.cloneElement(prefix, { size: iconSize })
|
|
164
181
|
: isReactElement(prefixNode) ? react_1.default.cloneElement(prefixNode, { size: iconSize })
|
|
165
182
|
: prefix || startIcon || prefixNode))))),
|
|
166
183
|
final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(effectiveBg) }),
|
|
167
|
-
final.text ? final.text :
|
|
168
|
-
|
|
184
|
+
children ? children : final.text ? final.text : "",
|
|
185
|
+
showSuffix && (react_1.default.createElement("span", { className: "btn_right_icon", style: iconWrapperStyle }, isReactElement(endIcon) ? react_1.default.cloneElement(endIcon, { size: iconSize })
|
|
169
186
|
: isReactElement(suffix) ? react_1.default.cloneElement(suffix, { size: iconSize })
|
|
170
187
|
: isReactElement(suffixNode) ? react_1.default.cloneElement(suffixNode, { size: iconSize })
|
|
171
188
|
: suffix || endIcon || suffixNode)))));
|
|
@@ -7,6 +7,8 @@ interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
7
7
|
showDashes?: boolean;
|
|
8
8
|
allowVerticalOverflow?: boolean;
|
|
9
9
|
itemPadding?: string;
|
|
10
|
+
controlerSize?: number;
|
|
11
|
+
controlerIconSize?: number;
|
|
10
12
|
}
|
|
11
13
|
declare const Carousel: React.FC<CarouselProps>;
|
|
12
14
|
export default Carousel;
|
package/ui/carousel/Carousel.js
CHANGED
|
@@ -65,11 +65,11 @@ var Circle_1 = __importDefault(require("../specials/Circle"));
|
|
|
65
65
|
var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
|
|
66
66
|
var Functions_1 = require("../../utils/Functions");
|
|
67
67
|
var Carousel = function (_a) {
|
|
68
|
-
var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '0rem' : _g, children = _a.children, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children"]);
|
|
68
|
+
var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '0rem' : _g, children = _a.children, _h = _a.controlerSize, controlerSize = _h === void 0 ? 2.5 : _h, _j = _a.controlerIconSize, controlerIconSize = _j === void 0 ? 20 : _j, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children", "controlerSize", "controlerIconSize"]);
|
|
69
69
|
var scrollRef = (0, react_1.useRef)(null);
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var
|
|
70
|
+
var _k = (0, react_1.useState)('start'), scrollPosition = _k[0], setScrollPosition = _k[1];
|
|
71
|
+
var _l = (0, react_1.useState)(false), isPhone = _l[0], setIsPhone = _l[1];
|
|
72
|
+
var _m = (0, react_1.useState)(false), isScrollable = _m[0], setIsScrollable = _m[1];
|
|
73
73
|
var checkScrollable = function () {
|
|
74
74
|
var container = scrollRef.current;
|
|
75
75
|
if (container) {
|
|
@@ -123,10 +123,10 @@ var Carousel = function (_a) {
|
|
|
123
123
|
}
|
|
124
124
|
}, []);
|
|
125
125
|
return (react_1.default.createElement("div", __assign({ className: "carousel-wrapper ".concat(funcss) }, rest),
|
|
126
|
-
react_1.default.createElement(
|
|
127
|
-
!isPhone && isScrollable && (react_1.default.createElement("div",
|
|
128
|
-
react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('left'); } },
|
|
129
|
-
react_1.default.createElement(pi_1.PiCaretLeft, { size:
|
|
126
|
+
react_1.default.createElement(react_1.default.Fragment, null,
|
|
127
|
+
!isPhone && isScrollable && (react_1.default.createElement("div", { className: 'carouselLeft' },
|
|
128
|
+
react_1.default.createElement(Circle_1.default, { bordered: true, size: controlerSize, onClick: function () { return scroll('left'); } },
|
|
129
|
+
react_1.default.createElement(pi_1.PiCaretLeft, { className: 'text-primary', size: controlerIconSize })))),
|
|
130
130
|
react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full", style: {
|
|
131
131
|
width: '100%',
|
|
132
132
|
gap: gap + 'rem',
|
|
@@ -139,9 +139,9 @@ var Carousel = function (_a) {
|
|
|
139
139
|
padding: itemPadding || "0.5rem"
|
|
140
140
|
} }, react_1.default.Children.map(children, function (child) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 } },
|
|
141
141
|
react_1.default.createElement("div", { className: "carousel-card" }, child))); })),
|
|
142
|
-
!isPhone && isScrollable && (react_1.default.createElement("div",
|
|
143
|
-
react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('right'); } },
|
|
144
|
-
react_1.default.createElement(pi_1.PiCaretRight, { size:
|
|
142
|
+
!isPhone && isScrollable && (react_1.default.createElement("div", { className: 'carouselRight' },
|
|
143
|
+
react_1.default.createElement(Circle_1.default, { bordered: true, size: controlerSize, onClick: function () { return scroll('right'); } },
|
|
144
|
+
react_1.default.createElement(pi_1.PiCaretRight, { className: 'text-primary', size: controlerIconSize }))))),
|
|
145
145
|
(showDashes && isScrollable) && (react_1.default.createElement("div", { className: "center padding-top-10" },
|
|
146
146
|
react_1.default.createElement(RowFlex_1.default, { gap: 0.5, justify: "center" }, ['start', 'middle', 'end'].map(function (pos) { return (react_1.default.createElement("div", { className: 'pointer ', key: pos, onClick: function () {
|
|
147
147
|
var _a, _b;
|