funuicss 3.7.12 → 3.7.14

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/ui/vista/Vista.d.ts +16 -17
  3. package/ui/vista/Vista.js +64 -61
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.7.12",
2
+ "version": "3.7.14",
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/vista/Vista.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
2
  type VistaProps = {
3
- layout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
3
+ layout?: 'centered' | 'mediaLeft' | 'mediaRight' | 'stacked';
4
4
  pattern?: 'grid' | 'dots' | 'diagonal' | 'checkerboard' | 'horizontal' | 'vertical';
5
5
  patternOpacity?: number;
6
6
  reverse?: boolean;
7
7
  bg?: string;
8
8
  padding?: string;
9
9
  textAlign?: 'left' | 'center' | 'right';
10
- imgPosition?: 'top' | 'bottom';
10
+ mediaPosition?: 'top' | 'bottom';
11
11
  funcss?: string;
12
12
  blurry?: number;
13
13
  opacity?: number;
@@ -26,27 +26,29 @@ type VistaProps = {
26
26
  contentWeight?: number;
27
27
  contentColor?: string;
28
28
  contentClass?: string;
29
- image?: React.ReactNode;
30
- imageUrl?: string;
31
- imageAlt?: string;
32
- imageClass?: string;
33
- imageSize?: string;
29
+ media?: React.ReactNode;
30
+ mediaUrl?: string;
31
+ mediaAlt?: string;
32
+ mediaClass?: string;
33
+ mediaSize?: string;
34
34
  cta?: React.ReactNode;
35
35
  ctaClass?: string;
36
36
  sectionClass?: string;
37
37
  containerClass?: string;
38
38
  gap?: string;
39
39
  textWrapperClass?: string;
40
- imageWrapperClass?: string;
40
+ mediaWrapperClass?: string;
41
41
  children?: React.ReactNode;
42
42
  showGradient?: boolean;
43
43
  gradientPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
44
44
  gradientSize?: string;
45
45
  gradientColors?: string;
46
46
  fade?: boolean;
47
+ fadeColor?: string;
47
48
  fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
48
49
  fadeRadial?: boolean;
49
50
  variant?: string;
51
+ mediaCss?: string;
50
52
  showPrimaryCTA?: boolean;
51
53
  showSecondaryCTA?: boolean;
52
54
  showAccentCTA?: boolean;
@@ -92,18 +94,15 @@ type VistaProps = {
92
94
  iframeUrl?: string;
93
95
  iframeSize?: string;
94
96
  customMedia?: React.ReactNode;
95
- imageOverlay?: boolean;
96
- imageOverlayColor?: string;
97
- imageOverlayOpacity?: number;
98
- imageFilter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none';
99
- imageFilterValue?: number;
100
- imageBlendMode?: 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten';
97
+ mediaOverlay?: boolean;
98
+ mediaOverlayColor?: string;
99
+ mediaOverlayOpacity?: number;
100
+ mediaFilter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none';
101
+ mediaFilterValue?: number;
102
+ mediaBlendMode?: 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten';
101
103
  hoverEffect?: 'lift' | 'scale' | 'tilt' | 'glow' | 'none';
102
104
  parallax?: boolean;
103
105
  parallaxSpeed?: number;
104
- mobileLayout?: 'centered' | 'stacked';
105
- tabletLayout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
106
- desktopLayout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
107
106
  };
108
107
  declare const Vista: React.FC<VistaProps>;
109
108
  export default Vista;
package/ui/vista/Vista.js CHANGED
@@ -75,29 +75,23 @@ var Vista = function (localProps) {
75
75
  window.addEventListener('scroll', handleScroll);
76
76
  return function () { return window.removeEventListener('scroll', handleScroll); };
77
77
  }, [final.parallax, final.parallaxSpeed]);
78
- // Get responsive layout
79
- var getResponsiveLayout = function () {
80
- if (typeof window === 'undefined')
81
- return final.layout || 'centered';
82
- var width = window.innerWidth;
83
- if (width < 768 && final.mobileLayout)
84
- return final.mobileLayout;
85
- if (width >= 768 && width < 1024 && final.tabletLayout)
86
- return final.tabletLayout;
87
- if (width >= 1024 && final.desktopLayout)
88
- return final.desktopLayout;
89
- return final.layout || 'centered';
78
+ // Get media size - updated logic for all media types
79
+ var getMediaSize = function () {
80
+ // Priority order for mediaSize:
81
+ // 1. If mediaSize is passed, it affects all media types
82
+ // 2. For backward compatibility, also check iframeSize for iframes
83
+ // 3. Fallback to undefined
84
+ if (final.mediaSize) {
85
+ return final.mediaSize;
86
+ }
87
+ // For backward compatibility with iframeSize
88
+ if (final.mediaType === 'iframe' && final.iframeSize) {
89
+ return final.iframeSize;
90
+ }
91
+ return undefined;
90
92
  };
91
- var _b = (0, react_1.useState)(getResponsiveLayout()), currentLayout = _b[0], setCurrentLayout = _b[1];
92
- (0, react_1.useEffect)(function () {
93
- var handleResize = function () {
94
- setCurrentLayout(getResponsiveLayout());
95
- };
96
- window.addEventListener('resize', handleResize);
97
- return function () { return window.removeEventListener('resize', handleResize); };
98
- }, [final.layout, final.mobileLayout, final.tabletLayout, final.desktopLayout]);
99
93
  var layoutClass = [
100
- currentLayout,
94
+ final.layout || 'centered',
101
95
  final.reverse ? 'reverse' : '',
102
96
  "text-".concat(final.textAlign || 'left'),
103
97
  ]
@@ -109,7 +103,7 @@ var Vista = function (localProps) {
109
103
  return '';
110
104
  return "vista-hover-".concat(final.hoverEffect);
111
105
  };
112
- // Filter styles helper
106
+ // Filter styles helper - used for all media types
113
107
  var getFilterStyle = function (filter, filterValue) {
114
108
  if (!filter || filter === 'none')
115
109
  return '';
@@ -140,23 +134,16 @@ var Vista = function (localProps) {
140
134
  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, funcss: final.accentButtonFuncss, small: final.accentButtonSmall }, final.ctaAccentText))));
141
135
  };
142
136
  // Enhanced Text Content
143
- var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(currentLayout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass || '') },
137
+ var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass || '') },
144
138
  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)),
145
139
  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)),
146
140
  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 }, localProps.children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
147
141
  final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass || '') }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
148
- // Get size for media
149
- var getMediaSize = function () {
150
- if (final.mediaType === 'iframe' && final.iframeSize) {
151
- return final.iframeSize;
152
- }
153
- return final.imageSize;
154
- };
155
142
  // Enhanced Media Content
156
143
  var MediaContent = function () {
157
144
  var _a;
158
145
  var mediaType = final.mediaType || 'image';
159
- var hasMedia = final.image || final.imageUrl || final.videoUrl || final.iframeUrl || final.customMedia;
146
+ var hasMedia = final.media || final.mediaUrl || final.videoUrl || final.iframeUrl || final.customMedia;
160
147
  if (!hasMedia)
161
148
  return null;
162
149
  var mediaSize = getMediaSize();
@@ -173,28 +160,28 @@ var Vista = function (localProps) {
173
160
  maxWidth: mediaSize,
174
161
  width: '100%',
175
162
  borderRadius: 'inherit',
176
- filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
177
- mixBlendMode: final.imageBlendMode,
163
+ filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
164
+ mixBlendMode: final.mediaBlendMode,
178
165
  };
179
- var overlayStyle = final.imageOverlay ? {
166
+ var overlayStyle = final.mediaOverlay ? {
180
167
  position: 'absolute',
181
168
  inset: 0,
182
- backgroundColor: final.imageOverlayColor || 'rgba(0, 0, 0, 0.3)',
183
- opacity: (_a = final.imageOverlayOpacity) !== null && _a !== void 0 ? _a : 1,
169
+ backgroundColor: final.mediaOverlayColor || 'rgba(0, 0, 0, 0.3)',
170
+ opacity: (_a = final.mediaOverlayOpacity) !== null && _a !== void 0 ? _a : 1,
184
171
  pointerEvents: 'none',
185
172
  borderRadius: 'inherit',
186
173
  zIndex: 1,
187
174
  } : {};
188
- return (react_1.default.createElement("div", { className: "vista-media ".concat(final.imageWrapperClass || ''), style: mediaWrapperStyle },
175
+ return (react_1.default.createElement("div", { className: "vista-media ".concat(final.mediaCss || '', " ").concat(final.mediaWrapperClass || ''), style: mediaWrapperStyle },
189
176
  mediaType === 'custom' && final.customMedia && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
190
177
  final.customMedia,
191
- final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
178
+ final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
192
179
  mediaType === 'video' && final.videoUrl && (react_1.default.createElement("div", { style: { position: 'relative', maxWidth: mediaSize, width: '100%', aspectRatio: '16/9', margin: '0 auto' } },
193
- react_1.default.createElement(Video_1.default, { src: final.videoUrl, autoPlay: final.videoAutoplay, loop: final.videoLoop, muted: final.videoMuted, poster: final.videoPoster, funcss: final.imageClass || '', style: {
194
- filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
195
- mixBlendMode: final.imageBlendMode,
180
+ react_1.default.createElement(Video_1.default, { src: final.videoUrl, autoPlay: final.videoAutoplay, loop: final.videoLoop, muted: final.videoMuted, poster: final.videoPoster, funcss: final.mediaCss || '', style: {
181
+ filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
182
+ mixBlendMode: final.mediaBlendMode,
196
183
  } }),
197
- final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
184
+ final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
198
185
  mediaType === 'iframe' && final.iframeUrl && (react_1.default.createElement("div", { className: "vista-iframe-wrapper", style: {
199
186
  position: 'relative',
200
187
  width: '100%',
@@ -206,23 +193,24 @@ var Vista = function (localProps) {
206
193
  position: 'relative',
207
194
  width: '100%',
208
195
  height: '100%',
209
- filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
210
- mixBlendMode: final.imageBlendMode,
196
+ filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
197
+ mixBlendMode: final.mediaBlendMode,
211
198
  } },
212
- react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.imageClass || ''), style: {
199
+ react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.mediaCss || ''), style: {
213
200
  width: '100%',
214
201
  height: '100%',
215
202
  border: 'none',
216
- borderRadius: 'inherit',
217
203
  display: 'block',
218
- }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista iframe content" }),
219
- final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle })))),
220
- mediaType === 'image' && (final.image || final.imageUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
221
- final.image ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.image)) : (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt || 'Vista image', className: final.imageClass || '', style: mediaStyle, loading: "lazy" })),
222
- final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle })))));
204
+ }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista media content" }),
205
+ final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle })))),
206
+ mediaType === 'image' && (final.media || final.mediaUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
207
+ final.media ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.media)) : (react_1.default.createElement("img", { src: final.mediaUrl, alt: final.mediaAlt || 'Vista media', className: final.mediaCss || '', style: mediaStyle, loading: "lazy" })),
208
+ final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle })))));
223
209
  };
224
- var isCentered = currentLayout === 'centered';
225
- var isStacked = currentLayout === 'stacked';
210
+ var isCentered = final.layout === 'centered';
211
+ var isStacked = final.layout === 'stacked';
212
+ var isMediaLeft = final.layout === 'mediaLeft';
213
+ var isMediaRight = final.layout === 'mediaRight';
226
214
  var positionStyles = {
227
215
  'top-left': { top: '-100px', left: '-100px' },
228
216
  'top-right': { top: '-100px', right: '-100px' },
@@ -233,14 +221,29 @@ var Vista = function (localProps) {
233
221
  var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
234
222
  var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
235
223
  var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity || 0.7, filter: "blur(".concat(final.blurry || 4, "rem)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition || 'center']);
224
+ // Get fade color - accepts color variable name or color string
225
+ var getFadeColor = function () {
226
+ if (!final.fade)
227
+ return '';
228
+ if (final.fadeColor) {
229
+ // Try to get CSS variable value
230
+ var colorValue = (0, getCssVariable_1.getCssVariableValue)(final.fadeColor);
231
+ if (colorValue)
232
+ return colorValue;
233
+ // If not a variable, assume it's a color string
234
+ return final.fadeColor;
235
+ }
236
+ // Default to page background
237
+ return (0, getCssVariable_1.getCssVariableValue)('page-bg') || '#ffffff';
238
+ };
236
239
  // Get fade style
237
240
  var getFadeStyle = function () {
238
- if (!final.fade)
241
+ var fadeColor = getFadeColor();
242
+ if (!fadeColor)
239
243
  return {};
240
- var bgColor = (0, getCssVariable_1.getCssVariableValue)('page-bg') || '#ffffff';
241
244
  if (final.fadeRadial) {
242
245
  return {
243
- background: "radial-gradient(circle, transparent 0%, ".concat(bgColor, " 100%)"),
246
+ background: "radial-gradient(circle, transparent 0%, ".concat(fadeColor, " 100%)"),
244
247
  };
245
248
  }
246
249
  var direction = final.fadeDirection || 'bottom';
@@ -251,7 +254,7 @@ var Vista = function (localProps) {
251
254
  right: 'to right'
252
255
  };
253
256
  return {
254
- background: "linear-gradient(".concat(toDirectionMap[direction], ", transparent 0%, ").concat(bgColor, " 100%)"),
257
+ background: "linear-gradient(".concat(toDirectionMap[direction], ", transparent 0%, ").concat(fadeColor, " 100%)"),
255
258
  };
256
259
  };
257
260
  return (react_1.default.createElement("div", { ref: sectionRef, className: "vista \n ".concat(final.pattern === 'grid' ? 'grid-bg' :
@@ -286,16 +289,16 @@ var Vista = function (localProps) {
286
289
  margin: '0 auto',
287
290
  padding: '2rem',
288
291
  } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
289
- (final.imgPosition === 'top') && react_1.default.createElement(MediaContent, null),
292
+ (final.mediaPosition === 'top') && react_1.default.createElement(MediaContent, null),
290
293
  TextContent,
291
- (final.imgPosition === 'bottom' || !final.imgPosition) && react_1.default.createElement(MediaContent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
294
+ (final.mediaPosition === 'bottom' || !final.mediaPosition) && react_1.default.createElement(MediaContent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
292
295
  react_1.default.createElement("div", { style: { flex: 1 } },
293
296
  react_1.default.createElement(MediaContent, null)),
294
297
  react_1.default.createElement("div", { style: { flex: 1 } }, TextContent))) : (react_1.default.createElement(react_1.default.Fragment, null,
295
- (currentLayout === 'imageLeft') && (react_1.default.createElement("div", { style: { flex: 1 } },
298
+ isMediaLeft && (react_1.default.createElement("div", { style: { flex: 1 } },
296
299
  react_1.default.createElement(MediaContent, null))),
297
300
  react_1.default.createElement("div", { style: { flex: 1 } }, TextContent),
298
- (currentLayout === 'imageRight') && (react_1.default.createElement("div", { style: { flex: 1 } },
301
+ isMediaRight && (react_1.default.createElement("div", { style: { flex: 1 } },
299
302
  react_1.default.createElement(MediaContent, null))))))));
300
303
  };
301
304
  exports.default = Vista;