@dndbuilder.com/react
Version:
Drag and drop builder for React
223 lines (222 loc) • 10.9 kB
JavaScript
import { BlockGroup as Uo, BlockType as qo } from "../../types/block.js";
import { createBlockConfig as Eo, createId as Go } from "../../../../../utils.js";
import { generateResponsiveStyle as D, generateBoxShadow as Po, generateSpacingValue as t, generatePseudoStyle as Fo, generateTypography as Ho, generateUnitValue as V } from "../../utils/style.js";
import { lazy as G } from "react";
import { TfiLayoutTabWindow as Jo } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tfi/index.js";
import Ko from "./components/tabs-toolbar.js";
const Zo = Eo({
type: qo.TABS,
label: "Tabs",
group: Uo.BASIC,
component: G(() => import("./components/tabs.block.js")),
previewComponent: G(() => import("./components/tabs.preview.js")),
settings: {
tabs: [
{
id: Go(),
label: {
en: "Tab 1"
},
children: []
},
{
id: Go(),
label: {
en: "Tab 2"
},
children: []
}
],
list: {
orientation: {
desktop: "horizontal",
tablet: "horizontal",
mobile: "horizontal"
},
alignment: {
desktop: "flex-start",
tablet: "flex-start",
mobile: "flex-start"
}
}
},
icon: Jo,
style: ({ settings: o, breakpoints: L }) => {
var P, U, q, E, F, H, J, K, M, N, O, Q, X, Y, Z, _, $, k, s, oo, ro, to, ao, eo, bo, io, lo, no, uo, ho, co, mo, po, fo, Ro, To, yo, wo;
return {
"& .tabs": {
display: "flex",
...D(L, (r) => {
var m, p;
return {
flexDirection: (((p = (m = o.list) == null ? void 0 : m.orientation) == null ? void 0 : p[r]) ?? "horizontal") === "horizontal" ? "column" : "row"
};
}),
".tab-list": {
display: "flex",
...D(L, (r) => {
var d, a, e, b, i, l, n, u, h, c;
const f = ((a = (d = o.list) == null ? void 0 : d.orientation) == null ? void 0 : a[r]) ?? "horizontal", {
top: m,
bottom: p,
left: y,
right: w
} = t((b = (e = o.list) == null ? void 0 : e.margin) == null ? void 0 : b[r]), {
top: B,
bottom: v,
left: x,
right: R
} = t((l = (i = o.list) == null ? void 0 : i.padding) == null ? void 0 : l[r]);
return {
width: f === "horizontal" ? "100%" : "auto",
flexDirection: f === "horizontal" ? "row" : "column",
justifyContent: ((u = (n = o.list) == null ? void 0 : n.alignment) == null ? void 0 : u[r]) ?? "flex-start",
gap: V((c = (h = o.list) == null ? void 0 : h.spacing) == null ? void 0 : c[r]),
marginTop: m,
marginBottom: p,
marginLeft: y,
marginRight: w,
paddingTop: B,
paddingBottom: v,
paddingLeft: x,
paddingRight: R
};
})
},
".tab-button": {
display: "flex",
alignItems: "center",
...D(L, (r) => {
var R, d, a, e, b, i, l, n, u, h, c, T;
const {
top: f,
bottom: m,
left: p,
right: y
} = t((d = (R = o.button) == null ? void 0 : R.margin) == null ? void 0 : d[r]), {
top: w,
bottom: B,
left: v,
right: x
} = t((e = (a = o.button) == null ? void 0 : a.padding) == null ? void 0 : e[r]);
return {
width: V((i = (b = o.button) == null ? void 0 : b.width) == null ? void 0 : i[r]),
height: V((n = (l = o.button) == null ? void 0 : l.height) == null ? void 0 : n[r]),
justifyContent: ((h = (u = o.button) == null ? void 0 : u.alignment) == null ? void 0 : h[r]) ?? "flex-start",
gap: V((T = (c = o.button) == null ? void 0 : c.spacing) == null ? void 0 : T[r]),
marginTop: f,
marginBottom: m,
marginLeft: p,
marginRight: y,
paddingTop: w,
paddingBottom: B,
paddingLeft: v,
paddingRight: x
};
}),
...Ho(L, (P = o.button) == null ? void 0 : P.typography),
...Fo((r) => {
var d, a, e, b, i, l, n, u, h, c, T, S, W, z, g, C, I, j, A;
const f = (e = (a = (d = o.button) == null ? void 0 : d.border) == null ? void 0 : a.type) == null ? void 0 : e[r], {
top: m,
right: p,
bottom: y,
left: w
} = t((l = (i = (b = o.button) == null ? void 0 : b.border) == null ? void 0 : i.radius) == null ? void 0 : l[r]), {
top: B,
right: v,
bottom: x,
left: R
} = t((h = (u = (n = o.button) == null ? void 0 : n.border) == null ? void 0 : u.width) == null ? void 0 : h[r]);
return {
color: (T = (c = o.button) == null ? void 0 : c.color) == null ? void 0 : T[r],
backgroundColor: (z = (W = (S = o.button) == null ? void 0 : S.background) == null ? void 0 : W.color) == null ? void 0 : z[r],
borderTopWidth: B,
borderRightWidth: v,
borderBottomWidth: x,
borderLeftWidth: R,
borderTopLeftRadius: m,
borderTopRightRadius: p,
borderBottomRightRadius: y,
borderBottomLeftRadius: w,
borderStyle: f,
borderColor: (I = (C = (g = o.button) == null ? void 0 : g.border) == null ? void 0 : C.color) == null ? void 0 : I[r],
boxShadow: Po((A = (j = o.button) == null ? void 0 : j.boxShadow) == null ? void 0 : A[r])
};
})
},
'.tab-button[data-state="active"]': {
color: (q = (U = o.button) == null ? void 0 : U.color) == null ? void 0 : q.active,
backgroundColor: (H = (F = (E = o.button) == null ? void 0 : E.background) == null ? void 0 : F.color) == null ? void 0 : H.active,
borderTopWidth: t((M = (K = (J = o.button) == null ? void 0 : J.border) == null ? void 0 : K.width) == null ? void 0 : M.active).top,
borderRightWidth: t((Q = (O = (N = o.button) == null ? void 0 : N.border) == null ? void 0 : O.width) == null ? void 0 : Q.active).right,
borderBottomWidth: t((Z = (Y = (X = o.button) == null ? void 0 : X.border) == null ? void 0 : Y.width) == null ? void 0 : Z.active).bottom,
borderLeftWidth: t((k = ($ = (_ = o.button) == null ? void 0 : _.border) == null ? void 0 : $.width) == null ? void 0 : k.active).left,
borderTopLeftRadius: t((ro = (oo = (s = o.button) == null ? void 0 : s.border) == null ? void 0 : oo.radius) == null ? void 0 : ro.active).top,
borderTopRightRadius: t((eo = (ao = (to = o.button) == null ? void 0 : to.border) == null ? void 0 : ao.radius) == null ? void 0 : eo.active).right,
borderBottomRightRadius: t((lo = (io = (bo = o.button) == null ? void 0 : bo.border) == null ? void 0 : io.radius) == null ? void 0 : lo.active).bottom,
borderBottomLeftRadius: t((ho = (uo = (no = o.button) == null ? void 0 : no.border) == null ? void 0 : uo.radius) == null ? void 0 : ho.active).left,
borderStyle: (po = (mo = (co = o.button) == null ? void 0 : co.border) == null ? void 0 : mo.type) == null ? void 0 : po.active,
borderColor: (To = (Ro = (fo = o.button) == null ? void 0 : fo.border) == null ? void 0 : Ro.color) == null ? void 0 : To.active,
boxShadow: Po((wo = (yo = o.button) == null ? void 0 : yo.boxShadow) == null ? void 0 : wo.active)
},
".tab-content": {
width: "100%",
...D(L, (r) => {
var R, d, a, e, b, i, l, n, u, h, c, T, S, W, z, g, C, I, j, A, Bo, vo, xo, Lo, So, Wo, zo, go, Co, Io, jo, Ao, Do, Vo;
const {
top: f,
bottom: m,
left: p,
right: y
} = t((d = (R = o.content) == null ? void 0 : R.margin) == null ? void 0 : d[r]), {
top: w,
bottom: B,
left: v,
right: x
} = t((e = (a = o.content) == null ? void 0 : a.padding) == null ? void 0 : e[r]);
return {
marginTop: f,
marginBottom: m,
marginLeft: p,
marginRight: y,
paddingTop: w,
paddingBottom: B,
paddingLeft: v,
paddingRight: x,
borderTopWidth: t((l = (i = (b = o == null ? void 0 : o.content) == null ? void 0 : b.border) == null ? void 0 : i.width) == null ? void 0 : l.default).top,
borderRightWidth: t((h = (u = (n = o == null ? void 0 : o.content) == null ? void 0 : n.border) == null ? void 0 : u.width) == null ? void 0 : h.default).right,
borderBottomWidth: t((S = (T = (c = o == null ? void 0 : o.content) == null ? void 0 : c.border) == null ? void 0 : T.width) == null ? void 0 : S.default).bottom,
borderLeftWidth: t((g = (z = (W = o == null ? void 0 : o.content) == null ? void 0 : W.border) == null ? void 0 : z.width) == null ? void 0 : g.default).left,
borderTopLeftRadius: t((j = (I = (C = o == null ? void 0 : o.content) == null ? void 0 : C.border) == null ? void 0 : I.radius) == null ? void 0 : j.default).top,
borderTopRightRadius: t((vo = (Bo = (A = o == null ? void 0 : o.content) == null ? void 0 : A.border) == null ? void 0 : Bo.radius) == null ? void 0 : vo.default).right,
borderBottomRightRadius: t(
(So = (Lo = (xo = o == null ? void 0 : o.content) == null ? void 0 : xo.border) == null ? void 0 : Lo.radius) == null ? void 0 : So.default
).bottom,
borderBottomLeftRadius: t(
(go = (zo = (Wo = o == null ? void 0 : o.content) == null ? void 0 : Wo.border) == null ? void 0 : zo.radius) == null ? void 0 : go.default
).left,
borderStyle: (jo = (Io = (Co = o.content) == null ? void 0 : Co.border) == null ? void 0 : Io.type) == null ? void 0 : jo.default,
borderColor: (Vo = (Do = (Ao = o.content) == null ? void 0 : Ao.border) == null ? void 0 : Do.color) == null ? void 0 : Vo.default
};
})
}
}
};
},
controls: [
{
label: "Content",
component: G(() => import("./components/tabs-content.control.js"))
},
{
label: "Style",
component: G(() => import("./components/tabs-style.control.js"))
}
],
toolbar: Ko
});
export {
Zo as default
};
//# sourceMappingURL=tabs.config.js.map