funuicss 3.7.13 → 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 +14 -15
  3. package/ui/vista/Vista.js +35 -39
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.7.13",
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,18 +26,18 @@ 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';
@@ -48,7 +48,6 @@ type VistaProps = {
48
48
  fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
49
49
  fadeRadial?: boolean;
50
50
  variant?: string;
51
- mediaSize?: string;
52
51
  mediaCss?: string;
53
52
  showPrimaryCTA?: boolean;
54
53
  showSecondaryCTA?: boolean;
@@ -95,12 +94,12 @@ type VistaProps = {
95
94
  iframeUrl?: string;
96
95
  iframeSize?: string;
97
96
  customMedia?: React.ReactNode;
98
- imageOverlay?: boolean;
99
- imageOverlayColor?: string;
100
- imageOverlayOpacity?: number;
101
- imageFilter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none';
102
- imageFilterValue?: number;
103
- 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';
104
103
  hoverEffect?: 'lift' | 'scale' | 'tilt' | 'glow' | 'none';
105
104
  parallax?: boolean;
106
105
  parallaxSpeed?: number;
package/ui/vista/Vista.js CHANGED
@@ -75,22 +75,19 @@ 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 media size - updated logic
78
+ // Get media size - updated logic for all media types
79
79
  var getMediaSize = function () {
80
- // Priority order:
81
- // 1. If imageSize is passed for images, use it
82
- // 2. If iframeSize is passed for iframes, use it
83
- // 3. Otherwise use mediaSize
84
- // 4. Fallback to undefined
85
- if (final.mediaType === 'image' && final.imageSize) {
86
- return final.imageSize;
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;
87
86
  }
87
+ // For backward compatibility with iframeSize
88
88
  if (final.mediaType === 'iframe' && final.iframeSize) {
89
89
  return final.iframeSize;
90
90
  }
91
- if (final.mediaSize) {
92
- return final.mediaSize;
93
- }
94
91
  return undefined;
95
92
  };
96
93
  var layoutClass = [
@@ -106,7 +103,7 @@ var Vista = function (localProps) {
106
103
  return '';
107
104
  return "vista-hover-".concat(final.hoverEffect);
108
105
  };
109
- // Filter styles helper
106
+ // Filter styles helper - used for all media types
110
107
  var getFilterStyle = function (filter, filterValue) {
111
108
  if (!filter || filter === 'none')
112
109
  return '';
@@ -146,7 +143,7 @@ var Vista = function (localProps) {
146
143
  var MediaContent = function () {
147
144
  var _a;
148
145
  var mediaType = final.mediaType || 'image';
149
- 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;
150
147
  if (!hasMedia)
151
148
  return null;
152
149
  var mediaSize = getMediaSize();
@@ -163,28 +160,28 @@ var Vista = function (localProps) {
163
160
  maxWidth: mediaSize,
164
161
  width: '100%',
165
162
  borderRadius: 'inherit',
166
- filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
167
- mixBlendMode: final.imageBlendMode,
163
+ filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
164
+ mixBlendMode: final.mediaBlendMode,
168
165
  };
169
- var overlayStyle = final.imageOverlay ? {
166
+ var overlayStyle = final.mediaOverlay ? {
170
167
  position: 'absolute',
171
168
  inset: 0,
172
- backgroundColor: final.imageOverlayColor || 'rgba(0, 0, 0, 0.3)',
173
- 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,
174
171
  pointerEvents: 'none',
175
172
  borderRadius: 'inherit',
176
173
  zIndex: 1,
177
174
  } : {};
178
- return (react_1.default.createElement("div", { className: "vista-media ".concat(final.mediaCss || '', " ").concat(final.imageWrapperClass || ''), style: mediaWrapperStyle },
175
+ return (react_1.default.createElement("div", { className: "vista-media ".concat(final.mediaCss || '', " ").concat(final.mediaWrapperClass || ''), style: mediaWrapperStyle },
179
176
  mediaType === 'custom' && final.customMedia && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
180
177
  final.customMedia,
181
- final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
178
+ final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
182
179
  mediaType === 'video' && final.videoUrl && (react_1.default.createElement("div", { style: { position: 'relative', maxWidth: mediaSize, width: '100%', aspectRatio: '16/9', margin: '0 auto' } },
183
- 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: {
184
- filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
185
- 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,
186
183
  } }),
187
- final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
184
+ final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
188
185
  mediaType === 'iframe' && final.iframeUrl && (react_1.default.createElement("div", { className: "vista-iframe-wrapper", style: {
189
186
  position: 'relative',
190
187
  width: '100%',
@@ -196,25 +193,24 @@ var Vista = function (localProps) {
196
193
  position: 'relative',
197
194
  width: '100%',
198
195
  height: '100%',
199
- filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
200
- mixBlendMode: final.imageBlendMode,
196
+ filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
197
+ mixBlendMode: final.mediaBlendMode,
201
198
  } },
202
- 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: {
203
200
  width: '100%',
204
201
  height: '100%',
205
202
  border: 'none',
206
- borderRadius: 'inherit',
207
203
  display: 'block',
208
- }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista iframe content" }),
209
- final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle })))),
210
- mediaType === 'image' && (final.image || final.imageUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
211
- 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" })),
212
- 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 })))));
213
209
  };
214
210
  var isCentered = final.layout === 'centered';
215
211
  var isStacked = final.layout === 'stacked';
216
- var isImageLeft = final.layout === 'imageLeft';
217
- var isImageRight = final.layout === 'imageRight';
212
+ var isMediaLeft = final.layout === 'mediaLeft';
213
+ var isMediaRight = final.layout === 'mediaRight';
218
214
  var positionStyles = {
219
215
  'top-left': { top: '-100px', left: '-100px' },
220
216
  'top-right': { top: '-100px', right: '-100px' },
@@ -293,16 +289,16 @@ var Vista = function (localProps) {
293
289
  margin: '0 auto',
294
290
  padding: '2rem',
295
291
  } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
296
- (final.imgPosition === 'top') && react_1.default.createElement(MediaContent, null),
292
+ (final.mediaPosition === 'top') && react_1.default.createElement(MediaContent, null),
297
293
  TextContent,
298
- (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,
299
295
  react_1.default.createElement("div", { style: { flex: 1 } },
300
296
  react_1.default.createElement(MediaContent, null)),
301
297
  react_1.default.createElement("div", { style: { flex: 1 } }, TextContent))) : (react_1.default.createElement(react_1.default.Fragment, null,
302
- isImageLeft && (react_1.default.createElement("div", { style: { flex: 1 } },
298
+ isMediaLeft && (react_1.default.createElement("div", { style: { flex: 1 } },
303
299
  react_1.default.createElement(MediaContent, null))),
304
300
  react_1.default.createElement("div", { style: { flex: 1 } }, TextContent),
305
- isImageRight && (react_1.default.createElement("div", { style: { flex: 1 } },
301
+ isMediaRight && (react_1.default.createElement("div", { style: { flex: 1 } },
306
302
  react_1.default.createElement(MediaContent, null))))))));
307
303
  };
308
304
  exports.default = Vista;