@cntrl-site/components 0.1.14-alpha.1 → 0.1.14-alpha.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/dist/index.js +16 -3
- package/dist/index.mjs +16 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2343,9 +2343,21 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
|
|
|
2343
2343
|
}
|
|
2344
2344
|
),
|
|
2345
2345
|
thumbnail.isActive && (() => {
|
|
2346
|
-
const [vertical] = thumbnail.position.split("-");
|
|
2346
|
+
const [vertical, horizontal] = thumbnail.position.split("-");
|
|
2347
2347
|
const effectivePosition = slider.direction === "horiz" ? `${vertical}-left` : thumbnail.position;
|
|
2348
2348
|
const thumbsPositionStyles = getPositionStyles(effectivePosition, thumbnail.offset, isEditor);
|
|
2349
|
+
const getJustifyContent = () => {
|
|
2350
|
+
if (slider.direction === "horiz") {
|
|
2351
|
+
if (horizontal === "left") return "flex-start";
|
|
2352
|
+
if (horizontal === "center") return "center";
|
|
2353
|
+
if (horizontal === "right") return "flex-end";
|
|
2354
|
+
} else {
|
|
2355
|
+
if (vertical === "top") return "flex-start";
|
|
2356
|
+
if (vertical === "middle") return "center";
|
|
2357
|
+
if (vertical === "bottom") return "flex-end";
|
|
2358
|
+
}
|
|
2359
|
+
return "flex-start";
|
|
2360
|
+
};
|
|
2349
2361
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2350
2362
|
"div",
|
|
2351
2363
|
{
|
|
@@ -2374,7 +2386,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
|
|
|
2374
2386
|
[classes.thumbsAlignEnd]: thumbnail.align === "end"
|
|
2375
2387
|
}),
|
|
2376
2388
|
style: {
|
|
2377
|
-
gap: scalingValue(thumbnail.grid.gap, isEditor)
|
|
2389
|
+
gap: scalingValue(thumbnail.grid.gap, isEditor),
|
|
2390
|
+
justifyContent: getJustifyContent()
|
|
2378
2391
|
},
|
|
2379
2392
|
children: content.map((item, index) => {
|
|
2380
2393
|
const isActive = index === currentIndex;
|
|
@@ -2416,7 +2429,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
|
|
|
2416
2429
|
...slider.direction === "vert" && thumbnail.fit !== "fit" ? { width: scalingValue(activeSizeValue, isEditor) } : {},
|
|
2417
2430
|
...thumbnail.fit === "cover" ? { width: scalingValue(activeSizeValue, isEditor), height: scalingValue(activeSizeValue, isEditor) } : {},
|
|
2418
2431
|
...getFitDimensions(),
|
|
2419
|
-
transition: isActive ? "all 0.
|
|
2432
|
+
transition: isActive ? "all 0.25s ease-out" : "none",
|
|
2420
2433
|
opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
|
|
2421
2434
|
["--thumb-hover"]: thumbnail.activeState.opacity / 100
|
|
2422
2435
|
},
|
package/dist/index.mjs
CHANGED
|
@@ -2341,9 +2341,21 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
|
|
|
2341
2341
|
}
|
|
2342
2342
|
),
|
|
2343
2343
|
thumbnail.isActive && (() => {
|
|
2344
|
-
const [vertical] = thumbnail.position.split("-");
|
|
2344
|
+
const [vertical, horizontal] = thumbnail.position.split("-");
|
|
2345
2345
|
const effectivePosition = slider.direction === "horiz" ? `${vertical}-left` : thumbnail.position;
|
|
2346
2346
|
const thumbsPositionStyles = getPositionStyles(effectivePosition, thumbnail.offset, isEditor);
|
|
2347
|
+
const getJustifyContent = () => {
|
|
2348
|
+
if (slider.direction === "horiz") {
|
|
2349
|
+
if (horizontal === "left") return "flex-start";
|
|
2350
|
+
if (horizontal === "center") return "center";
|
|
2351
|
+
if (horizontal === "right") return "flex-end";
|
|
2352
|
+
} else {
|
|
2353
|
+
if (vertical === "top") return "flex-start";
|
|
2354
|
+
if (vertical === "middle") return "center";
|
|
2355
|
+
if (vertical === "bottom") return "flex-end";
|
|
2356
|
+
}
|
|
2357
|
+
return "flex-start";
|
|
2358
|
+
};
|
|
2347
2359
|
return /* @__PURE__ */ jsx(
|
|
2348
2360
|
"div",
|
|
2349
2361
|
{
|
|
@@ -2372,7 +2384,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
|
|
|
2372
2384
|
[classes.thumbsAlignEnd]: thumbnail.align === "end"
|
|
2373
2385
|
}),
|
|
2374
2386
|
style: {
|
|
2375
|
-
gap: scalingValue(thumbnail.grid.gap, isEditor)
|
|
2387
|
+
gap: scalingValue(thumbnail.grid.gap, isEditor),
|
|
2388
|
+
justifyContent: getJustifyContent()
|
|
2376
2389
|
},
|
|
2377
2390
|
children: content.map((item, index) => {
|
|
2378
2391
|
const isActive = index === currentIndex;
|
|
@@ -2414,7 +2427,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
|
|
|
2414
2427
|
...slider.direction === "vert" && thumbnail.fit !== "fit" ? { width: scalingValue(activeSizeValue, isEditor) } : {},
|
|
2415
2428
|
...thumbnail.fit === "cover" ? { width: scalingValue(activeSizeValue, isEditor), height: scalingValue(activeSizeValue, isEditor) } : {},
|
|
2416
2429
|
...getFitDimensions(),
|
|
2417
|
-
transition: isActive ? "all 0.
|
|
2430
|
+
transition: isActive ? "all 0.25s ease-out" : "none",
|
|
2418
2431
|
opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
|
|
2419
2432
|
["--thumb-hover"]: thumbnail.activeState.opacity / 100
|
|
2420
2433
|
},
|