@dndbuilder.com/react
Version:
Drag and drop builder for React
479 lines (478 loc) • 18.7 kB
JavaScript
import { BlockGroup as ro, BlockType as lo } from "../../types/block.js";
import { Unit as a, SizeType as uo, BackgroundType as co } from "../../types/style.js";
import { generateResponsiveStyle as w, generateUnitValue as u, generateSpacingValue as io, generatePseudoStyle as ao, generateBorderRadius as go, generateBoxShadow as fo, generateTypographyFromBreakpoint as K, generateBgGradient as po } from "../../utils/style.js";
import { lazy as Q } from "react";
import { TfiLayoutSlider as vo } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tfi/index.js";
import { createBlockConfig as mo, createId as Z } from "../../../../../utils.js";
import { generateSize as ho } from "../button/utils/index.js";
import { SliderPresets as yo } from "./types/index.js";
const Xo = mo({
type: lo.SLIDER,
label: "Slider",
icon: vo,
component: Q(() => import("./components/slider.block.js")),
group: ro.ADVANCED,
settings: {
preset: { desktop: yo.Preset1 },
showDots: { desktop: !0 },
infinite: { desktop: !0 },
showArrows: { desktop: !0 },
pauseOnHover: { desktop: !0 },
autoPlay: { desktop: !0 },
autoplaySpeed: { desktop: 3e3 },
horizontalPosition: { desktop: "center" },
verticalPosition: { desktop: "center" },
textAlign: { desktop: "center" },
navigation: {
arrowSize: {
desktop: {
unit: a.PX,
value: 22
}
},
dotSize: {
desktop: {
unit: a.PX,
value: 16
}
},
dotColor: { desktop: { default: "rgba(0,0,0,0.2)" } },
dotActiveColor: { desktop: { default: "rgba(0,0,0,0.8)" } }
},
button: {
size: { desktop: uo.DEFAULT },
border: {
width: {
unit: a.PX,
value: 2
},
radius: {
unit: a.PX,
value: 5
},
color: {
default: "#fff",
hover: "#fff"
}
},
typography: {
fontSize: {
desktop: {
unit: a.PX,
value: 16
},
tablet: {
unit: a.PX,
value: 15
},
mobile: {
unit: a.PX,
value: 10
}
}
},
background: {
gradient: {
color1: {
default: "var(--accent-color)",
hover: "var(--accent-color)"
},
location1: {
default: {
unit: a.PERCENTAGE,
value: 0
},
hover: {
unit: a.PERCENTAGE,
value: 0
}
},
location2: {
default: {
unit: a.PERCENTAGE,
value: 100
},
hover: {
unit: a.PERCENTAGE,
value: 100
}
},
angle: {
default: {
unit: a.DEG,
value: 180
},
hover: {
unit: a.DEG,
value: 180
}
},
type: {
default: "linear",
hover: "linear"
},
position: {
default: "center center"
}
},
transitionDuration: 200
},
textColor: {
default: "#fff",
hover: "#fff"
}
},
title: {
marginBottom: {
desktop: {
unit: a.PX,
value: 20
}
},
typography: {
fontSize: {
desktop: {
unit: a.PX,
value: 40
},
tablet: {
unit: a.PX,
value: 30
},
mobile: {
unit: a.PX,
value: 20
}
}
}
},
description: {
marginBottom: {
desktop: {
unit: a.PX,
value: 30
}
},
typography: {
fontSize: {
desktop: {
unit: a.PX,
value: 18
},
tablet: {
unit: a.PX,
value: 15
},
mobile: {
unit: a.PX,
value: 10
}
}
}
},
height: {
desktop: {
unit: a.PX,
value: 400
},
tablet: {
unit: a.PX,
value: 350
},
mobile: {
unit: a.PX,
value: 300
}
},
contentWidth: {
desktop: {
unit: a.PERCENTAGE,
value: 100
}
},
slides: [
{
id: Z(),
title: { en: "Slide 1 Heading" },
description: {
en: "Lorem ipsum dolor sit, amet consectetur adipisicing elit."
},
button: { text: { en: "Click Here" } },
background: {
color: { default: "#833ca3" },
size: { desktop: { default: "cover" } }
},
contentColor: { default: "#fff" },
overlayColor: { default: "rgba(0,0,0,0.3)" }
},
{
id: Z(),
title: { en: "Slide 2 Heading" },
description: {
en: "Lorem ipsum dolor sit, amet consectetur adipisicing elit."
},
button: { text: { en: "Click Here" } },
background: {
color: { default: "#4054b2" },
size: { desktop: { default: "cover" } }
},
contentColor: { default: "#fff" },
overlayColor: { default: "rgba(0,0,0,0.3)" }
},
{
id: Z(),
title: { en: "Slide 3 Heading" },
description: {
en: "Lorem ipsum dolor sit, amet consectetur adipisicing elit."
},
button: { text: { en: "Click Here" } },
background: {
color: { default: "#1abc9c" },
size: { desktop: { default: "cover" } }
},
contentColor: { default: "#fff" },
overlayColor: { default: "rgba(0,0,0,0.3)" }
}
]
},
style: ({ settings: o, breakpoints: B }) => {
var _;
const no = (_ = o.slides) == null ? void 0 : _.reduce(
(e, t) => {
var i, d;
return {
...e,
[`& .slide-item-${t.id}`]: {
"& .overlay": {
backgroundColor: (i = t.overlayColor) == null ? void 0 : i.default,
mixBlendMode: (d = t.blendMode) == null ? void 0 : d.desktop
},
...w(B, (n) => {
var c, f, r, p, v, m, h, g, y, b, k, P, S, x, C, s, z, X, E, R, I, T, D, G, H, L, W, N, A, U, V, Y, F, M, $, O, q, J;
const l = (r = (f = (c = t.background) == null ? void 0 : c.position) == null ? void 0 : f[n]) == null ? void 0 : r.default;
return {
backgroundColor: (v = (p = t.background) == null ? void 0 : p.color) == null ? void 0 : v.default,
backgroundImage: (g = (h = (m = t.background) == null ? void 0 : m.image) == null ? void 0 : h.default) != null && g.url ? `url("${(k = (b = (y = t.background) == null ? void 0 : y.image) == null ? void 0 : b.default) == null ? void 0 : k.url}")` : null,
backgroundSize: (x = (S = (P = t.background) == null ? void 0 : P.size) == null ? void 0 : S[n]) == null ? void 0 : x.default,
backgroundPositionX: l === "custom" ? u((z = (s = (C = t.background) == null ? void 0 : C.positionX) == null ? void 0 : s[n]) == null ? void 0 : z.default) : void 0,
backgroundPositionY: l === "custom" ? u((R = (E = (X = t.background) == null ? void 0 : X.positionY) == null ? void 0 : E[n]) == null ? void 0 : R.default) : void 0,
backgroundPosition: l === "custom" ? void 0 : l,
backgroundRepeat: (D = (T = (I = t.background) == null ? void 0 : I.repeat) == null ? void 0 : T[n]) == null ? void 0 : D.default,
color: (G = t.contentColor) == null ? void 0 : G.default,
justifyContent: ((H = t.horizontalPosition) == null ? void 0 : H[n]) ?? ((L = o.horizontalPosition) == null ? void 0 : L[n]),
alignItems: ((W = t.verticalPosition) == null ? void 0 : W[n]) ?? ((N = o.verticalPosition) == null ? void 0 : N[n]),
"& .slide-content": {
textAlign: ((A = t.textAlign) == null ? void 0 : A.desktop) ?? ((U = o.textAlign) == null ? void 0 : U.desktop),
"& .title": {
color: ((F = (Y = (V = o.title) == null ? void 0 : V.color) == null ? void 0 : Y.desktop) == null ? void 0 : F.default) ?? ((M = t.contentColor) == null ? void 0 : M.default)
},
"& .description": {
color: ((q = (O = ($ = o.description) == null ? void 0 : $.color) == null ? void 0 : O.desktop) == null ? void 0 : q.default) ?? ((J = t.contentColor) == null ? void 0 : J.default)
}
}
};
})
}
};
},
{}
);
return {
width: "100%",
"& .slider-wrapper": {
position: "relative",
"& .slick-list": {
"& .slide-item": {
display: "flex !important",
width: "100%",
position: "relative",
"& .overlay": {
position: "absolute",
width: "100%",
height: "100%",
top: 0,
left: 0,
zIndex: 1
},
...w(B, (e) => {
var l, c;
const {
top: t,
right: i,
bottom: d,
left: n
} = io((l = o.sliderPadding) == null ? void 0 : l[e]);
return {
height: u((c = o.height) == null ? void 0 : c[e]),
paddingTop: t,
paddingRight: i,
paddingBottom: d,
paddingLeft: n
};
}),
"& .slide-content": {
position: "relative",
zIndex: 2,
...w(B, (e) => {
var t, i, d, n, l, c, f;
return {
maxWidth: u((t = o.contentWidth) == null ? void 0 : t[e]),
"& .title": {
marginBottom: u((d = (i = o.title) == null ? void 0 : i.marginBottom) == null ? void 0 : d[e]),
...K(e, (n = o.title) == null ? void 0 : n.typography)
},
"& .description": {
marginBottom: u(
(c = (l = o.description) == null ? void 0 : l.marginBottom) == null ? void 0 : c[e]
),
...K(
e,
(f = o.description) == null ? void 0 : f.typography
)
},
"& .btn": {
...ao((r) => {
var p, v, m, h, g, y, b, k, P, S, x, C, s, z, X, E, R, I, T, D, G, H, L, W, N, A, U, V, Y, F, M, $, O, q, J, j, oo, to, eo;
return {
...ho({
size: (v = (p = o.button) == null ? void 0 : p.size) == null ? void 0 : v[e]
}),
backgroundColor: ((h = (m = o.button) == null ? void 0 : m.background.type) == null ? void 0 : h[r]) === co.CLASSIC && ((y = (g = o.button) == null ? void 0 : g.background.color) != null && y[r]) ? (k = (b = o.button) == null ? void 0 : b.background.color) == null ? void 0 : k[r] : "transparent",
backgroundImage: po({
type: (S = (P = o.button) == null ? void 0 : P.background.type) == null ? void 0 : S[r],
color1: (s = (C = (x = o.button) == null ? void 0 : x.background.gradient) == null ? void 0 : C.color1) == null ? void 0 : s[r],
color2: (E = (X = (z = o.button) == null ? void 0 : z.background.gradient) == null ? void 0 : X.color2) == null ? void 0 : E[r],
location1: (T = (I = (R = o.button) == null ? void 0 : R.background.gradient) == null ? void 0 : I.location1) == null ? void 0 : T[r],
location2: (H = (G = (D = o.button) == null ? void 0 : D.background.gradient) == null ? void 0 : G.location2) == null ? void 0 : H[r],
angle: (N = (W = (L = o.button) == null ? void 0 : L.background.gradient) == null ? void 0 : W.angle) == null ? void 0 : N[r],
gradientType: (V = (U = (A = o.button) == null ? void 0 : A.background.gradient) == null ? void 0 : U.type) == null ? void 0 : V[r],
position: (M = (F = (Y = o.button) == null ? void 0 : Y.background.gradient) == null ? void 0 : F.position) == null ? void 0 : M[r]
}),
borderWidth: (O = ($ = o.button) == null ? void 0 : $.border.width) == null ? void 0 : O.value,
borderColor: ((J = (q = o.button) == null ? void 0 : q.border.color) == null ? void 0 : J[r]) ?? "#fff",
borderStyle: "solid",
borderRadius: u((j = o.button) == null ? void 0 : j.border.radius),
...K(e, (oo = o.button) == null ? void 0 : oo.typography),
color: (eo = (to = o.button) == null ? void 0 : to.textColor) == null ? void 0 : eo[r]
};
}),
transition: "all 200ms ease-in-out"
}
};
})
}
},
...no
},
"& .arrow": {
position: "absolute",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
transform: "translateY(-50%)",
zIndex: 2,
transition: "all 200ms ease-in-out",
...w(B, (e) => {
var d, n, l, c, f, r, p, v, m, h;
const t = (n = (d = o.navigation) == null ? void 0 : d.leftArrowPosition) == null ? void 0 : n[e], i = (c = (l = o.navigation) == null ? void 0 : l.rightArrowPosition) == null ? void 0 : c[e];
return {
width: u((r = (f = o.navigation) == null ? void 0 : f.arrowWidth) == null ? void 0 : r[e]),
height: u((v = (p = o.navigation) == null ? void 0 : p.arrowHeight) == null ? void 0 : v[e]),
fontSize: u((h = (m = o.navigation) == null ? void 0 : m.arrowSize) == null ? void 0 : h[e]) ?? "22px",
...ao((g) => {
var y, b, k, P, S, x, C, s, z, X, E;
return {
color: (k = (b = (y = o.navigation) == null ? void 0 : y.arrowColor) == null ? void 0 : b[e]) == null ? void 0 : k[g],
backgroundColor: (x = (S = (P = o.navigation) == null ? void 0 : P.arrowBackgroudColor) == null ? void 0 : S[e]) == null ? void 0 : x[g],
boxShadow: fo((s = (C = o.navigation) == null ? void 0 : C.arrowBoxShadow) == null ? void 0 : s[g]),
...go(
(E = (X = (z = o.navigation) == null ? void 0 : z.arrowRadius) == null ? void 0 : X[e]) == null ? void 0 : E[g]
)
};
}),
"&.arrow-left": {
top: (t == null ? void 0 : t.top) ?? "50%",
right: t == null ? void 0 : t.right,
bottom: t == null ? void 0 : t.bottom,
left: (t == null ? void 0 : t.left) ?? 0
},
"&.arrow-right": {
top: (i == null ? void 0 : i.top) ?? "50%",
right: (i == null ? void 0 : i.right) ?? 0,
bottom: i == null ? void 0 : i.bottom,
left: i == null ? void 0 : i.left
}
};
})
},
"& .slick-dots": {
position: "absolute",
display: "flex !important",
justifyContent: "center",
alignItems: "center",
listStyle: "none",
padding: 0,
margin: 0,
zIndex: 2,
height: "fit-content",
width: "fit-content",
...w(B, (e) => {
var i, d, n, l;
const t = io((d = (i = o.navigation) == null ? void 0 : i.dotsPosition) == null ? void 0 : d[e]);
return {
gap: u((l = (n = o.navigation) == null ? void 0 : n.dotGap) == null ? void 0 : l[e]) ?? "15px",
top: t.top,
right: t.right,
bottom: t.bottom ?? "10px",
left: t.left ? t.left : t.right ? void 0 : "50%",
transform: t.left || t.right ? void 0 : "translateX(-50%)"
};
}),
"& > li": {
...w(B, (e) => {
var t, i, d, n, l, c, f, r, p, v, m, h, g, y, b, k, P, S, x;
return {
margin: 0,
display: "flex",
justifyContent: "center",
alignItems: "center",
"& .dot": {
display: "block",
width: u((i = (t = o.navigation) == null ? void 0 : t.dotWidth) == null ? void 0 : i[e]) ?? "10px",
height: u((n = (d = o.navigation) == null ? void 0 : d.dotHeight) == null ? void 0 : n[e]) ?? "10px",
borderRadius: u((c = (l = o.navigation) == null ? void 0 : l.dotRadius) == null ? void 0 : c[e]) ?? "50%",
backgroundColor: (p = (r = (f = o.navigation) == null ? void 0 : f.dotColor) == null ? void 0 : r[e]) == null ? void 0 : p.default,
cursor: "pointer",
transition: "all 200ms ease-in-out"
},
"&:hover .dot": {
backgroundColor: (h = (m = (v = o.navigation) == null ? void 0 : v.dotActiveColor) == null ? void 0 : m[e]) == null ? void 0 : h.default
},
"&.slick-active .dot": {
backgroundColor: (b = (y = (g = o.navigation) == null ? void 0 : g.dotActiveColor) == null ? void 0 : y[e]) == null ? void 0 : b.default,
width: u((P = (k = o.navigation) == null ? void 0 : k.activeDotWidth) == null ? void 0 : P[e]) ?? "10px",
height: u((x = (S = o.navigation) == null ? void 0 : S.activeDotHeight) == null ? void 0 : x[e]) ?? "10px"
}
};
})
}
}
}
};
},
controls: [
{
label: "Content",
component: Q(() => import("./components/controls/slider-content.control.js"))
},
{
label: "Style",
component: Q(() => import("./components/controls/slider-style.control.js"))
}
]
});
export {
Xo as default
};
//# sourceMappingURL=slider.config.js.map