@dndbuilder.com/react
Version:
Drag and drop builder for React
292 lines (291 loc) • 8.58 kB
JavaScript
"use client";
import { jsxs as i, jsx as t } from "react/jsx-runtime";
import { BorderControl as m } from "../../../components/controls/border.control.js";
import { ColorControl as d } from "../../../components/controls/color.control.js";
import { InputControl as s } from "../../../components/controls/input.control.js";
import { SelectControl as E } from "../../../components/controls/select.control.js";
import { SliderUnitControl as o } from "../../../components/controls/slider-unit.control.js";
import { SpacingControl as n } from "../../../components/controls/spacing.control.js";
import { ToggleGroupControl as u } from "../../../components/controls/toggle-group.control.js";
import { TypographyControl as c } from "../../../components/controls/typography.control.js";
import { Accordion as a } from "../../../components/shared/accordion.js";
import { Separator as g } from "../../../components/shared/separator.js";
import { Tabs as p } from "../../../components/shared/tabs.js";
import { SettingsType as l } from "../../../types/index.js";
import { Unit as e, PseudoClass as r } from "../../../types/style.js";
import { AiOutlineAlignLeft as C, AiOutlineAlignCenter as N, AiOutlineAlignRight as f } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
const H = () => /* @__PURE__ */ i(a, { defaultValue: "Image", type: "single", collapsible: !0, children: [
/* @__PURE__ */ i(a.Item, { value: "Image", children: [
/* @__PURE__ */ t(a.Trigger, { className: "p-4", children: "Image" }),
/* @__PURE__ */ i(a.Content, { className: "px-4", children: [
/* @__PURE__ */ t(
o,
{
responsive: !0,
type: l.BLOCK,
fieldName: "width",
label: "Width",
className: "mt-0",
units: [e.PX, e.PERCENTAGE, e.REM, e.EM, e.VW]
}
),
/* @__PURE__ */ t(
o,
{
responsive: !0,
type: l.BLOCK,
fieldName: "maxWidth",
label: "Max Width",
units: [e.PX, e.PERCENTAGE, e.REM, e.EM, e.VW]
}
),
/* @__PURE__ */ t(
o,
{
responsive: !0,
type: l.BLOCK,
fieldName: "height",
label: "Height",
units: [e.PX, e.PERCENTAGE, e.REM, e.EM, e.VH]
}
),
/* @__PURE__ */ t(
o,
{
responsive: !0,
type: l.BLOCK,
fieldName: "maxHeight",
label: "Max Height",
units: [e.PX, e.PERCENTAGE, e.REM, e.EM, e.VH]
}
),
/* @__PURE__ */ t(
E,
{
type: l.BLOCK,
fieldName: "objectFit",
label: "Object Fit",
responsive: !0,
options: [
{ content: "Fill", value: "fill" },
{ content: "Contain", value: "contain" },
{ content: "Cover", value: "cover" },
{ content: "None", value: "none" }
]
}
),
/* @__PURE__ */ t(
n,
{
type: l.BLOCK,
fieldName: "margin",
label: "Margin",
responsive: !0,
units: [e.PX, e.REM, e.EM, e.PERCENTAGE]
}
),
/* @__PURE__ */ t(
n,
{
type: l.BLOCK,
fieldName: "padding",
label: "Padding",
responsive: !0,
units: [e.PX, e.REM, e.EM, e.PERCENTAGE]
}
),
/* @__PURE__ */ t(g, { className: "my-4" }),
/* @__PURE__ */ i(p, { defaultValue: r.DEFAULT, children: [
/* @__PURE__ */ i(p.List, { className: "h-8 w-full rounded-full", children: [
/* @__PURE__ */ t(
p.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: r.DEFAULT,
children: "Normal"
}
),
/* @__PURE__ */ t(
p.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: r.HOVER,
children: "Hover"
}
)
] }),
/* @__PURE__ */ i(p.Content, { value: r.DEFAULT, children: [
/* @__PURE__ */ t(
m,
{
type: l.BLOCK,
fieldName: "border",
mode: r.DEFAULT
}
),
/* @__PURE__ */ t(
s,
{
type: l.BLOCK,
fieldName: "opacity",
label: "Opacity",
mode: r.DEFAULT,
inputProps: {
type: "number",
className: "w-14",
min: 0,
max: 1,
step: 0.1
}
}
)
] }),
/* @__PURE__ */ i(p.Content, { value: r.HOVER, children: [
/* @__PURE__ */ t(
m,
{
type: l.BLOCK,
fieldName: "border",
mode: r.HOVER
}
),
/* @__PURE__ */ t(
s,
{
type: l.BLOCK,
fieldName: "opacity",
label: "Opacity",
mode: r.HOVER,
inputProps: {
type: "number",
className: "w-14",
min: 0,
max: 1,
step: 0.1
}
}
)
] })
] })
] })
] }),
/* @__PURE__ */ i(a.Item, { value: "Caption", children: [
/* @__PURE__ */ t(a.Trigger, { className: "p-4", children: "Caption" }),
/* @__PURE__ */ i(a.Content, { className: "px-4", children: [
/* @__PURE__ */ t(
d,
{
type: l.BLOCK,
fieldName: "caption.color",
mode: r.DEFAULT,
label: "Color"
}
),
/* @__PURE__ */ t(c, { type: l.BLOCK, fieldName: "caption.typography" }),
/* @__PURE__ */ t(
u,
{
type: l.BLOCK,
fieldName: "caption.alignment",
label: "Alignment",
responsive: !0,
controls: [
{
tooltipContent: "Left",
toggleTrigger: /* @__PURE__ */ t(C, { className: "text-sm" }),
value: "left"
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ t(N, { className: "text-sm" }),
value: "center"
},
{
tooltipContent: "Right",
toggleTrigger: /* @__PURE__ */ t(f, { className: "text-sm" }),
value: "right"
}
]
}
),
/* @__PURE__ */ t(
n,
{
type: l.BLOCK,
fieldName: "caption.margin",
label: "Margin",
responsive: !0,
units: [e.PX, e.REM, e.EM, e.PERCENTAGE]
}
),
/* @__PURE__ */ t(
n,
{
type: l.BLOCK,
fieldName: "caption.padding",
label: "Padding",
responsive: !0,
units: [e.PX, e.REM, e.EM, e.PERCENTAGE]
}
)
] })
] }),
/* @__PURE__ */ i(a.Item, { value: "Wrapper", children: [
/* @__PURE__ */ t(a.Trigger, { className: "p-4", children: "Wrapper" }),
/* @__PURE__ */ i(a.Content, { className: "px-4", children: [
/* @__PURE__ */ t(
o,
{
responsive: !0,
type: l.BLOCK,
fieldName: "wrapper.width",
label: "Width",
className: "mt-0",
units: [e.PX, e.PERCENTAGE, e.REM, e.EM, e.VW]
}
),
/* @__PURE__ */ t(
o,
{
responsive: !0,
type: l.BLOCK,
fieldName: "wrapper.height",
label: "Height",
units: [e.PX, e.PERCENTAGE, e.REM, e.EM, e.VH]
}
),
/* @__PURE__ */ t(
n,
{
type: l.BLOCK,
fieldName: "wrapper.margin",
label: "Margin",
responsive: !0,
units: [e.PX, e.REM, e.EM, e.PERCENTAGE]
}
),
/* @__PURE__ */ t(
n,
{
type: l.BLOCK,
fieldName: "wrapper.padding",
label: "Padding",
responsive: !0,
units: [e.PX, e.REM, e.EM, e.PERCENTAGE]
}
),
/* @__PURE__ */ t(
m,
{
type: l.BLOCK,
fieldName: "wrapper.border",
mode: r.DEFAULT
}
)
] })
] })
] });
export {
H as default
};
//# sourceMappingURL=image-style.control.js.map