funuicss 3.7.0 → 3.7.2
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 +552 -71
- package/index.d.ts +1 -1
- package/index.js +6 -1
- package/package.json +1 -1
- package/ui/calendar/Calendar.js +1 -1
- package/ui/chart/Bar.d.ts +98 -12
- package/ui/chart/Bar.js +387 -40
- package/ui/chart/Line.js +246 -149
- package/ui/chart/Pie.d.ts +61 -7
- package/ui/chart/Pie.js +314 -38
- package/ui/drop/Dropdown.d.ts +4 -3
- package/ui/drop/Dropdown.js +24 -29
- package/ui/input/Input.js +46 -21
- package/ui/richtext/RichText.js +1 -1
- package/ui/specials/Circle.d.ts +2 -1
- package/ui/specials/Circle.js +2 -5
- package/ui/table/Table.d.ts +2 -1
- package/ui/table/Table.js +66 -63
- package/ui/text/Text.d.ts +1 -1
- package/ui/text/Text.js +50 -49
- package/ui/theme/theme.d.ts +34 -0
- package/ui/theme/theme.js +198 -18
- package/ui/vista/Vista.js +135 -49
- package/utils/componentUtils.js +27 -4
package/ui/vista/Vista.js
CHANGED
|
@@ -21,8 +21,8 @@ var getCssVariable_1 = require("../../utils/getCssVariable");
|
|
|
21
21
|
var componentUtils_1 = require("../../utils/componentUtils");
|
|
22
22
|
var Text_1 = __importDefault(require("../text/Text"));
|
|
23
23
|
var Col_1 = __importDefault(require("../grid/Col"));
|
|
24
|
-
var Button_1 = __importDefault(require("../button/Button"));
|
|
25
|
-
var Flex_1 = __importDefault(require("../flex/Flex"));
|
|
24
|
+
var Button_1 = __importDefault(require("../button/Button"));
|
|
25
|
+
var Flex_1 = __importDefault(require("../flex/Flex"));
|
|
26
26
|
var Vista = function (_a) {
|
|
27
27
|
var _b = _a.layout, layout = _b === void 0 ? 'imageRight' : _b, _c = _a.reverse, reverse = _c === void 0 ? false : _c, _d = _a.bg, bg = _d === void 0 ? '' : _d, _e = _a.padding, padding = _e === void 0 ? 'padding-lg' : _e, _f = _a.textAlign, textAlign = _f === void 0 ? 'left' : _f, _g = _a.imgPosition, imgPosition = _g === void 0 ? 'top' : _g, _h = _a.funcss, funcss = _h === void 0 ? '' : _h, _j = _a.pattern, pattern = _j === void 0 ? '' : _j, _k = _a.patternOpacity, patternOpacity = _k === void 0 ? pattern === 'grid' ? 0.15 : pattern === 'dots' ? 0.4 : pattern === 'diagonal' ? 0.2 : pattern === 'checkerboard' ? 0.2 : pattern === 'horizontal' ? 0.2 : pattern === 'vertical' ? 0.2 : 0.1 : _k,
|
|
28
28
|
// Enhanced Content
|
|
@@ -37,8 +37,8 @@ var Vista = function (_a) {
|
|
|
37
37
|
showPrimaryCTA = _19 === void 0 ? false : _19, _20 = _a.showSecondaryCTA, showSecondaryCTA = _20 === void 0 ? false : _20, _21 = _a.showAccentCTA, showAccentCTA = _21 === void 0 ? false : _21, _22 = _a.primaryButtonOutlined, primaryButtonOutlined = _22 === void 0 ? false : _22, _23 = _a.secondaryButtonOutlined, secondaryButtonOutlined = _23 === void 0 ? false : _23, _24 = _a.accentButtonOutlined, accentButtonOutlined = _24 === void 0 ? false : _24, _25 = _a.ctaPrimaryUrl, ctaPrimaryUrl = _25 === void 0 ? '' : _25, _26 = _a.ctaSecondaryUrl, ctaSecondaryUrl = _26 === void 0 ? '' : _26, _27 = _a.ctaAccentUrl, ctaAccentUrl = _27 === void 0 ? '' : _27, _28 = _a.ctaPrimaryText, ctaPrimaryText = _28 === void 0 ? 'Primary Action' : _28, _29 = _a.ctaSecondaryText, ctaSecondaryText = _29 === void 0 ? 'Secondary Action' : _29, _30 = _a.ctaAccentText, ctaAccentText = _30 === void 0 ? 'Accent Action' : _30, _31 = _a.ctaGap, ctaGap = _31 === void 0 ? 1 : _31, _32 = _a.ctaFlexJustify, ctaFlexJustify = _32 === void 0 ? 'center' : _32, _33 = _a.ctaPrimaryRounded, ctaPrimaryRounded = _33 === void 0 ? false : _33, _34 = _a.ctaPrimaryFlat, ctaPrimaryFlat = _34 === void 0 ? false : _34, _35 = _a.ctaPrimaryPrefix, ctaPrimaryPrefix = _35 === void 0 ? '' : _35, _36 = _a.ctaPrimarySuffix, ctaPrimarySuffix = _36 === void 0 ? '' : _36, _37 = _a.ctaSecondaryRounded, ctaSecondaryRounded = _37 === void 0 ? false : _37, _38 = _a.ctaSecondaryFlat, ctaSecondaryFlat = _38 === void 0 ? false : _38, _39 = _a.ctaSecondaryPrefix, ctaSecondaryPrefix = _39 === void 0 ? '' : _39, _40 = _a.ctaSecondarySuffix, ctaSecondarySuffix = _40 === void 0 ? '' : _40, _41 = _a.ctaAccentRounded, ctaAccentRounded = _41 === void 0 ? false : _41, _42 = _a.ctaAccentFlat, ctaAccentFlat = _42 === void 0 ? false : _42, _43 = _a.ctaAccentPrefix, ctaAccentPrefix = _43 === void 0 ? '' : _43, _44 = _a.ctaAccentSuffix, ctaAccentSuffix = _44 === void 0 ? '' : _44, primaryIconSize = _a.primaryIconSize, secondaryIconSize = _a.secondaryIconSize, accentIconSize = _a.accentIconSize;
|
|
38
38
|
// Use the component config hook
|
|
39
39
|
var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', variant).mergeWithLocal;
|
|
40
|
-
//
|
|
41
|
-
var
|
|
40
|
+
// Create local props object
|
|
41
|
+
var localProps = {
|
|
42
42
|
layout: layout,
|
|
43
43
|
reverse: reverse,
|
|
44
44
|
bg: bg,
|
|
@@ -117,38 +117,124 @@ var Vista = function (_a) {
|
|
|
117
117
|
primaryIconSize: primaryIconSize,
|
|
118
118
|
secondaryIconSize: secondaryIconSize,
|
|
119
119
|
accentIconSize: accentIconSize,
|
|
120
|
-
}
|
|
120
|
+
};
|
|
121
|
+
// Merge config with local props - local props override config
|
|
122
|
+
var mergedProps = mergeWithLocal(localProps).props;
|
|
123
|
+
// Extract final values - use NULLISH COALESCING to ensure local props take precedence
|
|
124
|
+
var final = {
|
|
125
|
+
// Layout & styling
|
|
126
|
+
layout: layout !== null && layout !== void 0 ? layout : mergedProps.layout,
|
|
127
|
+
reverse: reverse !== null && reverse !== void 0 ? reverse : mergedProps.reverse,
|
|
128
|
+
bg: bg !== null && bg !== void 0 ? bg : mergedProps.bg,
|
|
129
|
+
padding: padding !== null && padding !== void 0 ? padding : mergedProps.padding,
|
|
130
|
+
textAlign: textAlign !== null && textAlign !== void 0 ? textAlign : mergedProps.textAlign,
|
|
131
|
+
imgPosition: imgPosition !== null && imgPosition !== void 0 ? imgPosition : mergedProps.imgPosition,
|
|
132
|
+
funcss: funcss !== null && funcss !== void 0 ? funcss : mergedProps.funcss,
|
|
133
|
+
pattern: pattern !== null && pattern !== void 0 ? pattern : mergedProps.pattern,
|
|
134
|
+
patternOpacity: patternOpacity !== null && patternOpacity !== void 0 ? patternOpacity : mergedProps.patternOpacity,
|
|
135
|
+
// Gradient & effects
|
|
136
|
+
showGradient: showGradient !== null && showGradient !== void 0 ? showGradient : mergedProps.showGradient,
|
|
137
|
+
gradientPosition: gradientPosition !== null && gradientPosition !== void 0 ? gradientPosition : mergedProps.gradientPosition,
|
|
138
|
+
gradientSize: gradientSize !== null && gradientSize !== void 0 ? gradientSize : mergedProps.gradientSize,
|
|
139
|
+
blurry: blurry !== null && blurry !== void 0 ? blurry : mergedProps.blurry,
|
|
140
|
+
opacity: opacity !== null && opacity !== void 0 ? opacity : mergedProps.opacity,
|
|
141
|
+
gradientColors: gradientColors !== null && gradientColors !== void 0 ? gradientColors : mergedProps.gradientColors,
|
|
142
|
+
fade: fade !== null && fade !== void 0 ? fade : mergedProps.fade,
|
|
143
|
+
fadeDirection: fadeDirection !== null && fadeDirection !== void 0 ? fadeDirection : mergedProps.fadeDirection,
|
|
144
|
+
fadeRadial: fadeRadial !== null && fadeRadial !== void 0 ? fadeRadial : mergedProps.fadeRadial,
|
|
145
|
+
fadeOverlayDarken: fadeOverlayDarken !== null && fadeOverlayDarken !== void 0 ? fadeOverlayDarken : mergedProps.fadeOverlayDarken,
|
|
146
|
+
backgroundImage: backgroundImage !== null && backgroundImage !== void 0 ? backgroundImage : mergedProps.backgroundImage,
|
|
147
|
+
// Classes
|
|
148
|
+
sectionClass: sectionClass !== null && sectionClass !== void 0 ? sectionClass : mergedProps.sectionClass,
|
|
149
|
+
containerClass: containerClass !== null && containerClass !== void 0 ? containerClass : mergedProps.containerClass,
|
|
150
|
+
textWrapperClass: textWrapperClass !== null && textWrapperClass !== void 0 ? textWrapperClass : mergedProps.textWrapperClass,
|
|
151
|
+
imageWrapperClass: imageWrapperClass !== null && imageWrapperClass !== void 0 ? imageWrapperClass : mergedProps.imageWrapperClass,
|
|
152
|
+
gap: gap !== null && gap !== void 0 ? gap : mergedProps.gap,
|
|
153
|
+
// Content
|
|
154
|
+
heading: heading !== null && heading !== void 0 ? heading : mergedProps.heading,
|
|
155
|
+
headingSize: headingSize !== null && headingSize !== void 0 ? headingSize : mergedProps.headingSize,
|
|
156
|
+
headingWeight: headingWeight !== null && headingWeight !== void 0 ? headingWeight : mergedProps.headingWeight,
|
|
157
|
+
headingColor: headingColor !== null && headingColor !== void 0 ? headingColor : mergedProps.headingColor,
|
|
158
|
+
headingClass: headingClass !== null && headingClass !== void 0 ? headingClass : mergedProps.headingClass,
|
|
159
|
+
subheading: subheading !== null && subheading !== void 0 ? subheading : mergedProps.subheading,
|
|
160
|
+
subheadingSize: subheadingSize !== null && subheadingSize !== void 0 ? subheadingSize : mergedProps.subheadingSize,
|
|
161
|
+
subheadingWeight: subheadingWeight !== null && subheadingWeight !== void 0 ? subheadingWeight : mergedProps.subheadingWeight,
|
|
162
|
+
subheadingColor: subheadingColor !== null && subheadingColor !== void 0 ? subheadingColor : mergedProps.subheadingColor,
|
|
163
|
+
subheadingClass: subheadingClass !== null && subheadingClass !== void 0 ? subheadingClass : mergedProps.subheadingClass,
|
|
164
|
+
content: content !== null && content !== void 0 ? content : mergedProps.content,
|
|
165
|
+
contentSize: contentSize !== null && contentSize !== void 0 ? contentSize : mergedProps.contentSize,
|
|
166
|
+
contentWeight: contentWeight !== null && contentWeight !== void 0 ? contentWeight : mergedProps.contentWeight,
|
|
167
|
+
contentColor: contentColor !== null && contentColor !== void 0 ? contentColor : mergedProps.contentColor,
|
|
168
|
+
contentClass: contentClass !== null && contentClass !== void 0 ? contentClass : mergedProps.contentClass,
|
|
169
|
+
image: image !== null && image !== void 0 ? image : mergedProps.image,
|
|
170
|
+
imageUrl: imageUrl !== null && imageUrl !== void 0 ? imageUrl : mergedProps.imageUrl,
|
|
171
|
+
imageAlt: imageAlt !== null && imageAlt !== void 0 ? imageAlt : mergedProps.imageAlt,
|
|
172
|
+
imageClass: imageClass !== null && imageClass !== void 0 ? imageClass : mergedProps.imageClass,
|
|
173
|
+
imageSize: imageSize !== null && imageSize !== void 0 ? imageSize : mergedProps.imageSize,
|
|
174
|
+
cta: cta !== null && cta !== void 0 ? cta : mergedProps.cta,
|
|
175
|
+
ctaClass: ctaClass !== null && ctaClass !== void 0 ? ctaClass : mergedProps.ctaClass,
|
|
176
|
+
// CTA Buttons
|
|
177
|
+
showPrimaryCTA: showPrimaryCTA !== null && showPrimaryCTA !== void 0 ? showPrimaryCTA : mergedProps.showPrimaryCTA,
|
|
178
|
+
showSecondaryCTA: showSecondaryCTA !== null && showSecondaryCTA !== void 0 ? showSecondaryCTA : mergedProps.showSecondaryCTA,
|
|
179
|
+
showAccentCTA: showAccentCTA !== null && showAccentCTA !== void 0 ? showAccentCTA : mergedProps.showAccentCTA,
|
|
180
|
+
primaryButtonOutlined: primaryButtonOutlined !== null && primaryButtonOutlined !== void 0 ? primaryButtonOutlined : mergedProps.primaryButtonOutlined,
|
|
181
|
+
secondaryButtonOutlined: secondaryButtonOutlined !== null && secondaryButtonOutlined !== void 0 ? secondaryButtonOutlined : mergedProps.secondaryButtonOutlined,
|
|
182
|
+
accentButtonOutlined: accentButtonOutlined !== null && accentButtonOutlined !== void 0 ? accentButtonOutlined : mergedProps.accentButtonOutlined,
|
|
183
|
+
ctaPrimaryUrl: ctaPrimaryUrl !== null && ctaPrimaryUrl !== void 0 ? ctaPrimaryUrl : mergedProps.ctaPrimaryUrl,
|
|
184
|
+
ctaSecondaryUrl: ctaSecondaryUrl !== null && ctaSecondaryUrl !== void 0 ? ctaSecondaryUrl : mergedProps.ctaSecondaryUrl,
|
|
185
|
+
ctaAccentUrl: ctaAccentUrl !== null && ctaAccentUrl !== void 0 ? ctaAccentUrl : mergedProps.ctaAccentUrl,
|
|
186
|
+
ctaPrimaryText: ctaPrimaryText !== null && ctaPrimaryText !== void 0 ? ctaPrimaryText : mergedProps.ctaPrimaryText,
|
|
187
|
+
ctaSecondaryText: ctaSecondaryText !== null && ctaSecondaryText !== void 0 ? ctaSecondaryText : mergedProps.ctaSecondaryText,
|
|
188
|
+
ctaAccentText: ctaAccentText !== null && ctaAccentText !== void 0 ? ctaAccentText : mergedProps.ctaAccentText,
|
|
189
|
+
ctaGap: ctaGap !== null && ctaGap !== void 0 ? ctaGap : mergedProps.ctaGap,
|
|
190
|
+
ctaFlexJustify: ctaFlexJustify !== null && ctaFlexJustify !== void 0 ? ctaFlexJustify : mergedProps.ctaFlexJustify,
|
|
191
|
+
ctaPrimaryRounded: ctaPrimaryRounded !== null && ctaPrimaryRounded !== void 0 ? ctaPrimaryRounded : mergedProps.ctaPrimaryRounded,
|
|
192
|
+
ctaPrimaryFlat: ctaPrimaryFlat !== null && ctaPrimaryFlat !== void 0 ? ctaPrimaryFlat : mergedProps.ctaPrimaryFlat,
|
|
193
|
+
ctaPrimaryPrefix: ctaPrimaryPrefix !== null && ctaPrimaryPrefix !== void 0 ? ctaPrimaryPrefix : mergedProps.ctaPrimaryPrefix,
|
|
194
|
+
ctaPrimarySuffix: ctaPrimarySuffix !== null && ctaPrimarySuffix !== void 0 ? ctaPrimarySuffix : mergedProps.ctaPrimarySuffix,
|
|
195
|
+
ctaSecondaryRounded: ctaSecondaryRounded !== null && ctaSecondaryRounded !== void 0 ? ctaSecondaryRounded : mergedProps.ctaSecondaryRounded,
|
|
196
|
+
ctaSecondaryFlat: ctaSecondaryFlat !== null && ctaSecondaryFlat !== void 0 ? ctaSecondaryFlat : mergedProps.ctaSecondaryFlat,
|
|
197
|
+
ctaSecondaryPrefix: ctaSecondaryPrefix !== null && ctaSecondaryPrefix !== void 0 ? ctaSecondaryPrefix : mergedProps.ctaSecondaryPrefix,
|
|
198
|
+
ctaSecondarySuffix: ctaSecondarySuffix !== null && ctaSecondarySuffix !== void 0 ? ctaSecondarySuffix : mergedProps.ctaSecondarySuffix,
|
|
199
|
+
ctaAccentRounded: ctaAccentRounded !== null && ctaAccentRounded !== void 0 ? ctaAccentRounded : mergedProps.ctaAccentRounded,
|
|
200
|
+
ctaAccentFlat: ctaAccentFlat !== null && ctaAccentFlat !== void 0 ? ctaAccentFlat : mergedProps.ctaAccentFlat,
|
|
201
|
+
ctaAccentPrefix: ctaAccentPrefix !== null && ctaAccentPrefix !== void 0 ? ctaAccentPrefix : mergedProps.ctaAccentPrefix,
|
|
202
|
+
ctaAccentSuffix: ctaAccentSuffix !== null && ctaAccentSuffix !== void 0 ? ctaAccentSuffix : mergedProps.ctaAccentSuffix,
|
|
203
|
+
primaryIconSize: primaryIconSize !== null && primaryIconSize !== void 0 ? primaryIconSize : mergedProps.primaryIconSize,
|
|
204
|
+
secondaryIconSize: secondaryIconSize !== null && secondaryIconSize !== void 0 ? secondaryIconSize : mergedProps.secondaryIconSize,
|
|
205
|
+
accentIconSize: accentIconSize !== null && accentIconSize !== void 0 ? accentIconSize : mergedProps.accentIconSize,
|
|
206
|
+
};
|
|
121
207
|
var layoutClass = [
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
"text-".concat(
|
|
208
|
+
final.layout,
|
|
209
|
+
final.reverse ? 'reverse' : '',
|
|
210
|
+
"text-".concat(final.textAlign),
|
|
125
211
|
]
|
|
126
212
|
.filter(Boolean)
|
|
127
213
|
.join(' ');
|
|
128
214
|
// CTA Buttons Component
|
|
129
215
|
var CTAButtons = function () {
|
|
130
|
-
var hasCTAs =
|
|
216
|
+
var hasCTAs = final.showPrimaryCTA || final.showSecondaryCTA || final.showAccentCTA;
|
|
131
217
|
if (!hasCTAs)
|
|
132
218
|
return null;
|
|
133
|
-
return (react_1.default.createElement(Flex_1.default, { gap:
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
219
|
+
return (react_1.default.createElement(Flex_1.default, { gap: final.ctaGap, justify: final.ctaFlexJustify, className: "mt-6 ".concat(final.ctaClass), wrap: "wrap", width: '100%' },
|
|
220
|
+
final.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: final.primaryButtonOutlined, onClick: function () { return final.ctaPrimaryUrl && (window.location.href = final.ctaPrimaryUrl); }, rounded: final.ctaPrimaryRounded, flat: final.ctaPrimaryFlat, stringPrefix: final.ctaPrimaryPrefix, stringSuffix: final.ctaPrimarySuffix, iconSize: final.primaryIconSize }, final.ctaPrimaryText)),
|
|
221
|
+
final.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: final.secondaryButtonOutlined, onClick: function () { return final.ctaSecondaryUrl && (window.location.href = final.ctaSecondaryUrl); }, rounded: final.ctaSecondaryRounded, flat: final.ctaSecondaryFlat, stringPrefix: final.ctaSecondaryPrefix, stringSuffix: final.ctaSecondarySuffix, iconSize: final.secondaryIconSize }, final.ctaSecondaryText)),
|
|
222
|
+
final.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: final.accentButtonOutlined, onClick: function () { return final.ctaAccentUrl && (window.location.href = final.ctaAccentUrl); }, rounded: final.ctaAccentRounded, flat: final.ctaAccentFlat, stringPrefix: final.ctaAccentPrefix, stringSuffix: final.ctaAccentSuffix, iconSize: final.accentIconSize }, final.ctaAccentText))));
|
|
137
223
|
};
|
|
138
224
|
// Enhanced Text Content with flexible styling
|
|
139
|
-
var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
225
|
+
var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass) },
|
|
226
|
+
final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize, weight: final.headingWeight, color: final.headingColor, funcss: final.headingClass }, final.heading)),
|
|
227
|
+
final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, funcss: "mt-2 ".concat(final.subheadingClass) }, final.subheading)),
|
|
228
|
+
final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, funcss: "mt-4 ".concat(final.contentClass), article: true }, children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
|
|
229
|
+
final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass) }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
|
|
144
230
|
// Enhanced Image Content - uses imageUrl if no image component provided
|
|
145
|
-
var ImageContent = (
|
|
231
|
+
var ImageContent = (final.image || final.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(final.imageWrapperClass) }, final.image ? (final.image) : (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt || 'Vista image', className: "".concat(final.imageClass), style: {
|
|
146
232
|
objectFit: 'cover',
|
|
147
|
-
maxWidth:
|
|
233
|
+
maxWidth: final.imageSize,
|
|
148
234
|
borderRadius: 'inherit'
|
|
149
235
|
} }))));
|
|
150
|
-
var isCentered =
|
|
151
|
-
var isStacked =
|
|
236
|
+
var isCentered = final.layout === 'centered';
|
|
237
|
+
var isStacked = final.layout === 'stacked';
|
|
152
238
|
var positionStyles = {
|
|
153
239
|
'top-left': { top: '-100px', left: '-100px' },
|
|
154
240
|
'top-right': { top: '-100px', right: '-100px' },
|
|
@@ -158,61 +244,61 @@ var Vista = function (_a) {
|
|
|
158
244
|
};
|
|
159
245
|
var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
|
|
160
246
|
var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
|
|
161
|
-
var gradientStyle = __assign({ position: 'absolute', width:
|
|
247
|
+
var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize, height: final.gradientSize, background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity, filter: "blur(".concat(final.blurry, "px)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition]);
|
|
162
248
|
return (react_1.default.createElement(ScrollInView_1.default, null,
|
|
163
|
-
react_1.default.createElement("div", { className: "vista \n ".concat(
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
249
|
+
react_1.default.createElement("div", { className: "vista \n ".concat(final.pattern === 'grid' ? 'grid-bg' :
|
|
250
|
+
final.pattern === 'dots' ? 'bg-pattern-dots' :
|
|
251
|
+
final.pattern === 'diagonal' ? 'bg-pattern-diagonal' :
|
|
252
|
+
final.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
|
|
253
|
+
final.pattern === 'horizontal' ? 'bg-pattern-horizontal' :
|
|
254
|
+
final.pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n ").concat(final.bg, " p-").concat(final.padding, " ").concat(layoutClass, " ").concat(final.sectionClass, " ").concat(final.funcss), style: {
|
|
169
255
|
position: 'relative',
|
|
170
256
|
overflow: 'hidden',
|
|
171
257
|
minHeight: "90vh",
|
|
172
|
-
backgroundImage:
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
258
|
+
backgroundImage: final.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px),\n linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 1px, transparent 1px)") :
|
|
259
|
+
final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") :
|
|
260
|
+
final.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity, "), rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
|
|
261
|
+
final.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 75%)") :
|
|
262
|
+
final.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") :
|
|
263
|
+
final.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") : ''
|
|
178
264
|
} },
|
|
179
|
-
|
|
180
|
-
react_1.default.createElement("div", { className: "vista-container ".concat(
|
|
181
|
-
(
|
|
265
|
+
final.showGradient && react_1.default.createElement("div", { style: gradientStyle }),
|
|
266
|
+
react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass), style: { position: 'relative', zIndex: 1, gap: final.gap || "2rem" } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
267
|
+
(final.imgPosition === 'top') && ImageContent,
|
|
182
268
|
TextContent,
|
|
183
|
-
(
|
|
269
|
+
(final.imgPosition === 'bottom') && ImageContent)) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
184
270
|
ImageContent,
|
|
185
271
|
TextContent)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
186
|
-
(
|
|
272
|
+
(final.layout === 'imageLeft') && react_1.default.createElement(Col_1.default, null, ImageContent),
|
|
187
273
|
TextContent,
|
|
188
|
-
(
|
|
189
|
-
|
|
274
|
+
(final.layout === 'imageRight') && react_1.default.createElement(Col_1.default, null, ImageContent)))),
|
|
275
|
+
final.fade && (react_1.default.createElement("div", { style: {
|
|
190
276
|
position: 'absolute',
|
|
191
277
|
inset: 0,
|
|
192
278
|
width: '100%',
|
|
193
279
|
height: '100%',
|
|
194
|
-
background:
|
|
195
|
-
? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(
|
|
196
|
-
: "linear-gradient(to ".concat(
|
|
280
|
+
background: final.fadeRadial
|
|
281
|
+
? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(final.bg || 'page-bg'), " 100%)")
|
|
282
|
+
: "linear-gradient(to ".concat(final.fadeDirection || 'bottom', ", ").concat((0, getCssVariable_1.getCssVariableValue)(final.bg || 'page-bg'), " 0%, transparent 100%)"),
|
|
197
283
|
zIndex: 0,
|
|
198
284
|
pointerEvents: 'none'
|
|
199
285
|
} })),
|
|
200
|
-
|
|
286
|
+
final.backgroundImage && (react_1.default.createElement("div", { style: {
|
|
201
287
|
position: 'absolute',
|
|
202
288
|
inset: 0,
|
|
203
|
-
backgroundImage: "url(".concat(
|
|
289
|
+
backgroundImage: "url(".concat(final.backgroundImage, ")"),
|
|
204
290
|
backgroundSize: 'cover',
|
|
205
291
|
backgroundPosition: 'center',
|
|
206
292
|
zIndex: -1,
|
|
207
293
|
width: '100%',
|
|
208
294
|
height: '100%',
|
|
209
295
|
} })),
|
|
210
|
-
|
|
296
|
+
final.backgroundImage && final.fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
|
|
211
297
|
position: 'absolute',
|
|
212
298
|
width: '100%',
|
|
213
299
|
height: '100%',
|
|
214
300
|
inset: 0,
|
|
215
|
-
backgroundColor: "rgba(0, 0, 0, ".concat(
|
|
301
|
+
backgroundColor: "rgba(0, 0, 0, ".concat(final.fadeOverlayDarken, ")"),
|
|
216
302
|
zIndex: -1,
|
|
217
303
|
} })))));
|
|
218
304
|
};
|
package/utils/componentUtils.js
CHANGED
|
@@ -14,6 +14,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
14
14
|
exports.getAvailableVariants = exports.hasComponentVariant = exports.useComponentProps = exports.useComponentConfiguration = exports.mergeComponentConfig = exports.getComponentConfig = void 0;
|
|
15
15
|
var theme_1 = require("../ui/theme/theme");
|
|
16
16
|
var react_1 = require("react");
|
|
17
|
+
/**
|
|
18
|
+
* Check if a variant name is valid (not empty or whitespace only)
|
|
19
|
+
*/
|
|
20
|
+
var isValidVariantName = function (variantName) {
|
|
21
|
+
return !!variantName && variantName.trim() !== '';
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Filter out empty string and undefined values from component props
|
|
25
|
+
*/
|
|
26
|
+
var filterEmptyProps = function (props) {
|
|
27
|
+
var filtered = {};
|
|
28
|
+
for (var key in props) {
|
|
29
|
+
var value = props[key];
|
|
30
|
+
// Only include props that are not undefined and not empty strings
|
|
31
|
+
if (value !== undefined && value !== '') {
|
|
32
|
+
filtered[key] = value;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
return filtered;
|
|
36
|
+
};
|
|
17
37
|
/**
|
|
18
38
|
* Universal component config getter
|
|
19
39
|
*
|
|
@@ -61,8 +81,10 @@ var getComponentConfig = function (projectData, componentName, variantName) {
|
|
|
61
81
|
}
|
|
62
82
|
}
|
|
63
83
|
var variantData = component[targetVariant];
|
|
84
|
+
// Filter out empty string and undefined props from config
|
|
85
|
+
var filteredComponentProps = filterEmptyProps((variantData === null || variantData === void 0 ? void 0 : variantData.componentProps) || {});
|
|
64
86
|
return {
|
|
65
|
-
componentProps:
|
|
87
|
+
componentProps: filteredComponentProps,
|
|
66
88
|
variantExists: variantExists,
|
|
67
89
|
actualVariant: targetVariant,
|
|
68
90
|
availableVariants: availableVariants,
|
|
@@ -135,7 +157,8 @@ var useComponentConfiguration = function (componentName, variantName) {
|
|
|
135
157
|
var projectData = (0, theme_1.useTheme)().projectData;
|
|
136
158
|
// Memoize config computation - only recompute when dependencies change
|
|
137
159
|
var config = (0, react_1.useMemo)(function () {
|
|
138
|
-
|
|
160
|
+
// Check for valid variant name (not empty or whitespace only)
|
|
161
|
+
if (!isValidVariantName(variantName)) {
|
|
139
162
|
return {
|
|
140
163
|
componentProps: {},
|
|
141
164
|
variantExists: false,
|
|
@@ -150,8 +173,8 @@ var useComponentConfiguration = function (componentName, variantName) {
|
|
|
150
173
|
var mergeWithLocal = (0, react_1.useMemo)(function () {
|
|
151
174
|
return function (localProps) {
|
|
152
175
|
if (localProps === void 0) { localProps = {}; }
|
|
153
|
-
// If no variant name was provided, return local props as-is
|
|
154
|
-
if (!variantName) {
|
|
176
|
+
// If no valid variant name was provided, return local props as-is
|
|
177
|
+
if (!isValidVariantName(variantName)) {
|
|
155
178
|
return {
|
|
156
179
|
props: localProps,
|
|
157
180
|
variant: '',
|