@dndbuilder.com/react
Version:
Drag and drop builder for React
332 lines (331 loc) • 13.3 kB
JavaScript
"use client";
import { jsxs as s, jsx as t } from "react/jsx-runtime";
import { FlexGapControl as N } from "../../../../components/controls/flex-gap.control.js";
import { SelectControl as c } from "../../../../components/controls/select.control.js";
import { SliderUnitControl as p } from "../../../../components/controls/slider-unit.control.js";
import { ToggleGroupControl as m } from "../../../../components/controls/toggle-group.control.js";
import { Accordion as a } from "../../../../components/shared/accordion.js";
import { InfoMessage as d } from "../../../../components/shared/info-message.js";
import { Separator as R } from "../../../../components/shared/separator.js";
import { useAppSelector as f } from "../../../../hooks/use-app-selector.js";
import { useSettings as O } from "../../../../hooks/use-settings.js";
import { getCurrentBreakpoint as v } from "../../../../../../../store/selectors.js";
import { SettingsType as n } from "../../../../types/index.js";
import { Unit as r, FlexDirection as e, JustifyContent as l, AlignItem as g, FlexWrap as u } from "../../../../types/style.js";
import { classNames as i } from "../../../../../../../utils.js";
import { BsArrowBarRight as L } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { HiOutlineArrowNarrowRight as M, HiOutlineArrowNarrowDown as T, HiOutlineArrowNarrowLeft as A, HiOutlineArrowNarrowUp as S } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/hi/index.js";
import { LuAlignVerticalSpaceAround as x, LuAlignCenter as C } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
import { MdAlignHorizontalLeft as h, MdOutlineAlignHorizontalCenter as U, MdAlignHorizontalRight as V, MdFormatAlignCenter as W, MdOutlineAlignVerticalTop as w, MdVerticalAlignCenter as y, MdOutlineAlignVerticalBottom as B } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { PiArrowUUpRightLight as _ } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/pi/index.js";
const et = () => {
const E = f(v), [o] = O(
`flexDirection.${E}`,
n.BLOCK
);
return /* @__PURE__ */ s(
a,
{
defaultValue: "Container",
type: "single",
collapsible: !0,
className: "mt-0 w-full",
children: [
/* @__PURE__ */ s(a.Item, { value: "Container", children: [
/* @__PURE__ */ t(a.Trigger, { className: "p-4", children: "Container" }),
/* @__PURE__ */ s(a.Content, { className: "mt-0 px-4 py-1", children: [
/* @__PURE__ */ t(
p,
{
fieldName: "width",
label: "Width",
units: [r.PX, r.PERCENTAGE, r.EM, r.REM, r.VW],
responsive: !0,
type: n.BLOCK,
className: "mt-0"
}
),
/* @__PURE__ */ t(
p,
{
fieldName: "maxWidth",
label: "Max Width",
units: [r.PX, r.PERCENTAGE, r.EM, r.REM, r.VW],
responsive: !0,
type: n.BLOCK
}
),
/* @__PURE__ */ t(
p,
{
responsive: !0,
fieldName: "minHeight",
label: "Min Height",
units: [r.PX, r.PERCENTAGE, r.EM, r.REM, r.VH],
type: n.BLOCK
}
),
/* @__PURE__ */ t(R, { className: "my-4" }),
/* @__PURE__ */ t(
m,
{
fieldName: "flexDirection",
label: "Direction",
responsive: !0,
type: n.BLOCK,
controls: [
{
tooltipContent: "Row - horizontal",
toggleTrigger: /* @__PURE__ */ t(M, { className: "text-sm" }),
value: e.ROW
},
{
tooltipContent: "Column - vertical",
toggleTrigger: /* @__PURE__ */ t(T, { className: "text-sm" }),
value: e.COLUMN
},
{
tooltipContent: "Row Reverse",
toggleTrigger: /* @__PURE__ */ t(A, { className: "text-sm" }),
value: e.ROW_REVERSE
},
{
tooltipContent: "Column - Reversed",
toggleTrigger: /* @__PURE__ */ t(S, { className: "text-sm" }),
value: e.COLUMN_REVERSE
}
]
}
),
/* @__PURE__ */ t(
m,
{
type: n.BLOCK,
fieldName: "justifyContent",
responsive: !0,
label: "Justify Content",
direction: "col",
controls: [
{
tooltipContent: "Start",
toggleTrigger: /* @__PURE__ */ t(
h,
{
className: i("text-sm transition-transform duration-200", {
"rotate-90": o === e.COLUMN,
"rotate-180": o === e.ROW_REVERSE,
"-rotate-90": o === e.COLUMN_REVERSE
})
}
),
value: l.START
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ t(
U,
{
className: i("text-sm transition-transform duration-200", {
"rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
})
}
),
value: l.CENTER
},
{
tooltipContent: "End",
toggleTrigger: /* @__PURE__ */ t(
V,
{
className: i("text-sm transition-transform duration-200", {
"rotate-90": o === e.COLUMN,
"rotate-180": o === e.ROW_REVERSE,
"-rotate-90": o === e.COLUMN_REVERSE
})
}
),
value: l.END
},
{
tooltipContent: "Space Between",
toggleTrigger: /* @__PURE__ */ t(
x,
{
className: i("text-sm transition-transform duration-200", {
"rotate-0": o === e.COLUMN,
"rotate-90": o === e.ROW || o === e.ROW_REVERSE
})
}
),
value: l.SPACE_BETWEEN
},
{
tooltipContent: "Space Around",
toggleTrigger: /* @__PURE__ */ t(
W,
{
className: i("text-sm transition-transform duration-200", {
"rotate-0": o === e.COLUMN,
"rotate-90": o === e.ROW || o === e.ROW_REVERSE
})
}
),
value: l.SPACE_AROUND
},
{
tooltipContent: "Space Evently",
toggleTrigger: /* @__PURE__ */ t(
C,
{
className: i("text-sm transition-transform duration-200", {
"rotate-0": o === e.COLUMN,
"rotate-90": o === e.ROW || o === e.ROW_REVERSE
})
}
),
value: l.SPACE_EVENTLY
}
]
}
),
/* @__PURE__ */ t(
m,
{
fieldName: "alignItems",
label: "Align Items",
responsive: !0,
type: n.BLOCK,
controls: [
{
tooltipContent: "Start",
toggleTrigger: /* @__PURE__ */ t(
w,
{
className: i("text-sm transition-transform duration-200", {
"-rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
})
}
),
value: g.START
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ t(
y,
{
className: i("text-sm transition-transform duration-200", {
"-rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
})
}
),
value: g.CENTER
},
{
tooltipContent: "End",
toggleTrigger: /* @__PURE__ */ t(
B,
{
className: i("text-sm transition-transform duration-200", {
"-rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
})
}
),
value: g.END
},
{
tooltipContent: "Stretch",
toggleTrigger: /* @__PURE__ */ t(
C,
{
className: i("text-sm transition-transform duration-200", {
"-rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
})
}
),
value: g.STRETCH
}
]
}
),
/* @__PURE__ */ t(
N,
{
responsive: !0,
label: "Gaps",
fieldName: "gap",
type: n.BLOCK,
min: 0,
units: [r.PX, r.EM, r.REM, r.VW]
}
),
/* @__PURE__ */ t(
m,
{
fieldName: "wrap",
label: "Wrap",
responsive: !0,
type: n.BLOCK,
controls: [
{
tooltipContent: "No Wrap",
toggleTrigger: /* @__PURE__ */ t(L, { className: "text-sm" }),
value: u.NOWRAP
},
{
tooltipContent: "Wrap",
toggleTrigger: /* @__PURE__ */ t(_, { className: "rotate-180 text-sm" }),
value: u.WRAP
}
]
}
),
/* @__PURE__ */ t(d, { children: "Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap)." })
] })
] }),
/* @__PURE__ */ s(a.Item, { value: "Additional", children: [
/* @__PURE__ */ t(a.Trigger, { className: "p-4", children: "Additional Options" }),
/* @__PURE__ */ s(a.Content, { className: "px-4", children: [
/* @__PURE__ */ t(
c,
{
fieldName: "overflow.desktop",
label: "Overflow",
className: "mt-0",
options: [
{ content: "Hidden", value: "hidden" },
{ content: "Auto", value: "auto" },
{ content: "Scroll", value: "scroll" },
{ content: "Visible", value: "visible" }
],
type: n.BLOCK
}
),
/* @__PURE__ */ t(
c,
{
fieldName: "HtmlTag",
label: "HTML Tag",
type: n.BLOCK,
options: [
{ content: "div", value: "div" },
{ content: "header", value: "header" },
{ content: "footer", value: "footer" },
{ content: "main", value: "main" },
{ content: "article", value: "article" },
{ content: "section", value: "section" },
{ content: "aside", value: "aside" },
{ content: "nav", value: "nav" },
{ content: "a", value: "a" }
]
}
)
] })
] })
]
}
);
};
export {
et as default
};
//# sourceMappingURL=container-layout.control.js.map