@dndbuilder.com/react
Version:
Drag and drop builder for React
208 lines (207 loc) • 10.3 kB
JavaScript
import { BlockGroup as Dr, BlockType as Nr } from "../../types/block.js";
import { Unit as e, FlexDirection as Cr, BackgroundType as fr } from "../../types/style.js";
import { createBlockConfig as zr } from "../../../../../utils.js";
import { generatePseudoStyle as hr, generateResponsiveStyle as pr, generateBoxShadow as $r, generateSpacingValue as n, generateBgImageWithGradient as kr, generateUnitValue as c } from "../../utils/style.js";
import { lazy as t } from "react";
import { LuContainer as Ur } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
const Xr = zr({
type: Nr.CONTAINER,
label: "Container",
icon: Ur,
// previewImage: containerPreview.src,
component: t(() => import("./components/container.block.js")),
previewComponent: t(() => import("./components/container.preview.js")),
group: Dr.BASIC,
settings: {
contentWidth: { desktop: "boxed", tablet: "boxed", mobile: "boxed" },
flexDirection: {
desktop: Cr.COLUMN
},
background: {
gradient: {
color1: {
default: "var(--accent-color)",
hover: "var(--accent-color)"
},
location1: {
default: {
unit: e.PERCENTAGE,
value: 0
},
hover: {
unit: e.PERCENTAGE,
value: 0
}
},
location2: {
default: {
unit: e.PERCENTAGE,
value: 100
},
hover: {
unit: e.PERCENTAGE,
value: 100
}
},
angle: {
default: {
unit: e.DEG,
value: 180
},
hover: {
unit: e.DEG,
value: 180
}
},
type: {
default: "linear",
hover: "linear"
},
position: {
default: "center center",
hover: "center center"
}
},
transitionDuration: 200
}
},
advancedSettings: {
padding: {
desktop: {
top: 8,
right: 8,
bottom: 8,
left: 8,
linked: !0,
unit: e.PX
}
}
},
style: ({ settings: o, breakpoints: l }) => {
var u;
return {
width: "100%",
overflow: (u = o.overflow) == null ? void 0 : u.desktop,
...pr(l, (r) => {
var d;
return {
width: c((d = o.width) == null ? void 0 : d[r])
};
}),
"& > .content": {
...pr(l, (r) => {
var i, g, m, b, f, h, p, k, y, v, R, x, S, E, T, B, w, A, G, L, I, W, P, D, N, C, z, $, U, j, H, O, V, F, M, X, q, J, K, Q, Y, Z, _, s, oo, ro, ao, eo, no, to, co, lo, uo, io, go, mo, bo, fo, ho, po, ko;
const {
top: d,
right: yr,
bottom: vr,
left: Rr
} = n((i = o.padding) == null ? void 0 : i[r]), {
top: xr,
right: Sr,
bottom: Er,
left: Tr
} = n((g = o.margin) == null ? void 0 : g[r]);
return {
height: "100%",
marginTop: xr,
marginRight: Sr,
marginBottom: Er,
marginLeft: Tr,
paddingTop: d,
paddingRight: yr,
paddingBottom: vr,
paddingLeft: Rr,
flexDirection: (m = o.flexDirection) == null ? void 0 : m[r],
maxWidth: c((b = o.maxWidth) == null ? void 0 : b[r]),
minHeight: c((f = o.minHeight) == null ? void 0 : f[r]),
justifyContent: (h = o.justifyContent) == null ? void 0 : h[r],
alignItems: (p = o.alignItems) == null ? void 0 : p[r],
flexWrap: (k = o.wrap) == null ? void 0 : k[r],
rowGap: ((v = (y = o.gap) == null ? void 0 : y[r]) == null ? void 0 : v.y) !== void 0 ? `${(x = (R = o.gap) == null ? void 0 : R[r]) == null ? void 0 : x.y}${(E = (S = o.gap) == null ? void 0 : S[r]) == null ? void 0 : E.unit}` : void 0,
columnGap: ((B = (T = o.gap) == null ? void 0 : T[r]) == null ? void 0 : B.x) !== void 0 ? `${(A = (w = o.gap) == null ? void 0 : w[r]) == null ? void 0 : A.x}${(L = (G = o.gap) == null ? void 0 : G[r]) == null ? void 0 : L.unit}` : void 0,
backgroundImage: kr({
type: (W = (I = o.background) == null ? void 0 : I.type) == null ? void 0 : W.default,
image: (N = (D = (P = o.background) == null ? void 0 : P.image) == null ? void 0 : D.default) == null ? void 0 : N.url,
angle: ($ = (z = (C = o.background) == null ? void 0 : C.gradient) == null ? void 0 : z.angle) == null ? void 0 : $.default,
color1: (H = (j = (U = o.background) == null ? void 0 : U.gradient) == null ? void 0 : j.color1) == null ? void 0 : H.default,
color2: (F = (V = (O = o.background) == null ? void 0 : O.gradient) == null ? void 0 : V.color2) == null ? void 0 : F.default,
location1: (q = (X = (M = o.background) == null ? void 0 : M.gradient) == null ? void 0 : X.location1) == null ? void 0 : q.default,
location2: (Q = (K = (J = o.background) == null ? void 0 : J.gradient) == null ? void 0 : K.location2) == null ? void 0 : Q.default,
position: (_ = (Z = (Y = o.background) == null ? void 0 : Y.gradient) == null ? void 0 : Z.position) == null ? void 0 : _.default,
gradientType: (ro = (oo = (s = o.background) == null ? void 0 : s.gradient) == null ? void 0 : oo.type) == null ? void 0 : ro.default
}),
backgroundPosition: (no = (eo = (ao = o.background) == null ? void 0 : ao.position) == null ? void 0 : eo[r]) == null ? void 0 : no.default,
backgroundRepeat: (lo = (co = (to = o.background) == null ? void 0 : to.repeat) == null ? void 0 : co[r]) == null ? void 0 : lo.default,
backgroundSize: (go = (io = (uo = o.background) == null ? void 0 : uo.size) == null ? void 0 : io[r]) == null ? void 0 : go.default,
backgroundColor: ((bo = (mo = o.background) == null ? void 0 : mo.type) == null ? void 0 : bo.default) === fr.CLASSIC ? (fo = o.background.color) == null ? void 0 : fo.default : null,
backgroundAttachment: (po = (ho = o.background) == null ? void 0 : ho.attachment) == null ? void 0 : po.default,
alignContent: (ko = o.alignContent) == null ? void 0 : ko[r],
...hr((a) => {
var vo, Ro, xo, So, Eo, To, Bo, wo, Ao, Go, Lo, Io, Wo, Po, Do, No, Co, zo, $o, Uo, jo, Ho, Oo, Vo, Fo, Mo, Xo, qo, Jo, Ko, Qo, Yo, Zo, _o, so, or, rr, ar, dr, er, nr, tr, cr, lr, ur, ir, gr, mr, br;
const {
top: Br,
right: wr,
bottom: Ar,
left: Gr
} = n((Ro = (vo = o.border) == null ? void 0 : vo.radius) == null ? void 0 : Ro[a]), {
top: Lr,
right: Ir,
bottom: Wr,
left: Pr
} = n((Eo = (So = (xo = o.border) == null ? void 0 : xo.width) == null ? void 0 : So[r]) == null ? void 0 : Eo[a]), yo = (Bo = (To = o.border) == null ? void 0 : To.type) == null ? void 0 : Bo[a];
return {
borderTopLeftRadius: Br,
borderTopRightRadius: wr,
borderBottomRightRadius: Ar,
borderBottomLeftRadius: Gr,
borderTopWidth: Lr,
borderRightWidth: Ir,
borderBottomWidth: Wr,
borderLeftWidth: Pr,
borderStyle: yo || void 0,
borderColor: (Ao = (wo = o.border) == null ? void 0 : wo.color) == null ? void 0 : Ao[a],
backgroundColor: ((Lo = (Go = o.background) == null ? void 0 : Go.type) == null ? void 0 : Lo[a]) === fr.CLASSIC ? (Io = o.background.color) == null ? void 0 : Io[a] : null,
backgroundImage: kr({
type: (Po = (Wo = o.background) == null ? void 0 : Wo.type) == null ? void 0 : Po[a],
image: (Co = (No = (Do = o.background) == null ? void 0 : Do.image) == null ? void 0 : No[a]) == null ? void 0 : Co.url,
angle: (Uo = ($o = (zo = o.background) == null ? void 0 : zo.gradient) == null ? void 0 : $o.angle) == null ? void 0 : Uo[a],
color1: (Oo = (Ho = (jo = o.background) == null ? void 0 : jo.gradient) == null ? void 0 : Ho.color1) == null ? void 0 : Oo[a],
color2: (Mo = (Fo = (Vo = o.background) == null ? void 0 : Vo.gradient) == null ? void 0 : Fo.color2) == null ? void 0 : Mo[a],
location1: (Jo = (qo = (Xo = o.background) == null ? void 0 : Xo.gradient) == null ? void 0 : qo.location1) == null ? void 0 : Jo[a],
location2: (Yo = (Qo = (Ko = o.background) == null ? void 0 : Ko.gradient) == null ? void 0 : Qo.location2) == null ? void 0 : Yo[a],
position: (so = (_o = (Zo = o.background) == null ? void 0 : Zo.gradient) == null ? void 0 : _o.position) == null ? void 0 : so[a],
gradientType: (ar = (rr = (or = o.background) == null ? void 0 : or.gradient) == null ? void 0 : rr.type) == null ? void 0 : ar[a]
}),
backgroundPosition: (nr = (er = (dr = o.background) == null ? void 0 : dr.position) == null ? void 0 : er[r]) == null ? void 0 : nr[a],
backgroundAttachment: (cr = (tr = o.background) == null ? void 0 : tr.attachment) == null ? void 0 : cr[a],
backgroundRepeat: (ir = (ur = (lr = o.background) == null ? void 0 : lr.repeat) == null ? void 0 : ur[r]) == null ? void 0 : ir[a],
backgroundSize: (br = (mr = (gr = o.background) == null ? void 0 : gr.size) == null ? void 0 : mr[r]) == null ? void 0 : br[a]
};
})
};
}),
...hr((r) => {
var d;
return {
boxShadow: $r((d = o.boxShadow) == null ? void 0 : d[r])
};
})
}
};
},
controls: [
{
label: "Layout",
component: t(() => import("./components/controls/container-layout.control.js"))
},
{
label: "Style",
component: t(() => import("./components/controls/container-style.control.js"))
}
]
});
export {
Xr as default
};
//# sourceMappingURL=container.config.js.map