@dndbuilder.com/react
Version:
Drag and drop builder for React
273 lines (272 loc) • 9.08 kB
JavaScript
"use client";
import { jsxs as o, jsx as e } from "react/jsx-runtime";
import { Accordion as t } from "../shared/accordion.js";
import { InfoMessage as d } from "../shared/info-message.js";
import { Label as f } from "../shared/label.js";
import { Separator as n } from "../shared/separator.js";
import { Tabs as i } from "../shared/tabs.js";
import { SettingsType as l } from "../../types/index.js";
import { Unit as a, PseudoClass as r } from "../../types/style.js";
import { MdAlignHorizontalLeft as C, MdOutlineAlignHorizontalCenter as A, MdAlignHorizontalRight as g } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { BackgroundControl as p } from "./background.control.js";
import { BorderControl as c } from "./border.control.js";
import { BoxShadowControl as N } from "./box-shadow.control.js";
import { CustomAttributeControl as D } from "./custom-attributes.control.js";
import { CustomCSSControl as h } from "./custom-css.control.js";
import { FlexOrderControl as E } from "./flex-order.control.js";
import { FlexSizeControl as x } from "./flex-size.control.js";
import { InputControl as m } from "./input.control.js";
import { PositionControl as y } from "./position-control.js";
import { SliderInputControl as b } from "./slider-input.control.js";
import { SpacingControl as u } from "./spacing.control.js";
import { SwitchControl as s } from "./switch.control.js";
import { ToggleGroupControl as V } from "./toggle-group.control.js";
import { DisplayControl as T } from "./display-control.js";
const W = () => /* @__PURE__ */ o(t, { defaultValue: "Layout", type: "single", collapsible: !0, children: [
/* @__PURE__ */ o(t.Item, { value: "Layout", children: [
/* @__PURE__ */ e(t.Trigger, { className: "p-4", children: "Layout" }),
/* @__PURE__ */ o(t.Content, { className: "px-4", children: [
/* @__PURE__ */ e(
u,
{
type: l.ADVANCED,
fieldName: "margin",
label: "Margin",
responsive: !0,
className: "mt-0",
units: [a.PX, a.REM, a.EM, a.PERCENTAGE]
}
),
/* @__PURE__ */ e(
u,
{
type: l.ADVANCED,
fieldName: "padding",
label: "Padding",
responsive: !0,
units: [a.PX, a.REM, a.EM, a.PERCENTAGE]
}
),
/* @__PURE__ */ e(n, { className: "my-3" }),
/* @__PURE__ */ e(
V,
{
type: l.ADVANCED,
fieldName: "alignSelf",
label: "Align Self",
responsive: !0,
controls: [
{
tooltipContent: "Start",
toggleTrigger: /* @__PURE__ */ e(C, { className: "text-sm" }),
value: "start"
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ e(A, { className: "rotate-90 text-sm" }),
value: "center"
},
{
tooltipContent: "End",
toggleTrigger: /* @__PURE__ */ e(g, { className: "text-sm" }),
value: "end"
}
]
}
),
/* @__PURE__ */ e(d, { children: "This control will affect contained elements only." }),
/* @__PURE__ */ e(
E,
{
type: l.ADVANCED,
fieldName: "order",
customFieldName: "orderCustom"
}
),
/* @__PURE__ */ e(
x,
{
type: l.ADVANCED,
fieldName: "size",
growFieldName: "grow",
shrinkFieldName: "shrink"
}
),
/* @__PURE__ */ e(n, { className: "my-3" }),
/* @__PURE__ */ e(T, { type: l.ADVANCED, fieldName: "display" }),
/* @__PURE__ */ e(y, { fieldName: "position", type: l.ADVANCED }),
/* @__PURE__ */ e(n, { className: "my-3" }),
/* @__PURE__ */ e(
m,
{
type: l.ADVANCED,
fieldName: "zIndex",
label: "Z-Index",
responsive: !0,
inputProps: { type: "number", className: "w-14" }
}
),
/* @__PURE__ */ e(m, { type: l.ADVANCED, fieldName: "cssId", label: "CSS ID" }),
/* @__PURE__ */ e(m, { type: l.ADVANCED, fieldName: "cssClasses", label: "CSS Classes" })
] })
] }),
/* @__PURE__ */ o(t.Item, { value: "Background", children: [
/* @__PURE__ */ e(t.Trigger, { className: "p-4", children: "Background" }),
/* @__PURE__ */ e(t.Content, { className: "px-4", children: /* @__PURE__ */ o(i, { defaultValue: r.DEFAULT, children: [
/* @__PURE__ */ o(i.List, { className: "h-8 w-full rounded-full", children: [
/* @__PURE__ */ e(
i.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: r.DEFAULT,
children: "Normal"
}
),
/* @__PURE__ */ e(
i.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: r.HOVER,
children: "Hover"
}
)
] }),
/* @__PURE__ */ e(i.Content, { value: r.DEFAULT, children: /* @__PURE__ */ e(
p,
{
fieldName: "background",
mode: r.DEFAULT,
type: l.ADVANCED
}
) }),
/* @__PURE__ */ e(i.Content, { value: r.HOVER, children: /* @__PURE__ */ e(
p,
{
fieldName: "background",
mode: r.HOVER,
type: l.ADVANCED
}
) })
] }) })
] }),
/* @__PURE__ */ o(t.Item, { value: "Border", children: [
/* @__PURE__ */ e(t.Trigger, { className: "p-4", children: "Border" }),
/* @__PURE__ */ e(t.Content, { className: "mt-0 px-4", children: /* @__PURE__ */ o(i, { defaultValue: r.DEFAULT, children: [
/* @__PURE__ */ o(i.List, { className: "h-8 w-full rounded-full", children: [
/* @__PURE__ */ e(
i.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: r.DEFAULT,
children: "Normal"
}
),
/* @__PURE__ */ e(
i.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: r.HOVER,
children: "Hover"
}
)
] }),
/* @__PURE__ */ o(i.Content, { value: r.DEFAULT, children: [
/* @__PURE__ */ e(
c,
{
fieldName: "border",
mode: r.DEFAULT,
type: l.ADVANCED
}
),
/* @__PURE__ */ e(
N,
{
fieldName: "boxShadow",
mode: r.DEFAULT,
type: l.ADVANCED
}
)
] }),
/* @__PURE__ */ o(i.Content, { value: r.HOVER, children: [
/* @__PURE__ */ e(
c,
{
fieldName: "border",
mode: r.HOVER,
type: l.ADVANCED
}
),
/* @__PURE__ */ e(
N,
{
fieldName: "boxShadow",
mode: r.HOVER,
type: l.ADVANCED
}
),
/* @__PURE__ */ e(
b,
{
label: "Transition Duration",
type: l.ADVANCED,
fieldName: "border.transitionDuration",
min: 0,
max: 1e4
}
)
] })
] }) })
] }),
/* @__PURE__ */ o(t.Item, { value: "Responsive", children: [
/* @__PURE__ */ e(t.Trigger, { className: "p-4", children: "Responsive" }),
/* @__PURE__ */ o(t.Content, { className: "px-4", children: [
/* @__PURE__ */ e(f, { className: "text-xs font-semibold text-gray-800", children: "Visibility" }),
/* @__PURE__ */ e(d, { children: "Responsive visibility will take effect only on preview mode or live page, and not while editing." }),
/* @__PURE__ */ e(
s,
{
type: l.ADVANCED,
fieldName: "hideOnDesktop",
label: "Hide On Desktop"
}
),
/* @__PURE__ */ e(
s,
{
type: l.ADVANCED,
fieldName: "hideOnTablet",
label: "Hide On Tablet"
}
),
/* @__PURE__ */ e(
s,
{
type: l.ADVANCED,
fieldName: "hideOnMobile",
label: "Hide On Mobile"
}
)
] })
] }),
/* @__PURE__ */ o(t.Item, { value: "Attributes", children: [
/* @__PURE__ */ e(t.Trigger, { className: "p-4", children: "Attributes" }),
/* @__PURE__ */ e(t.Content, { className: "px-4", children: /* @__PURE__ */ e(D, {}) })
] }),
/* @__PURE__ */ o(t.Item, { value: "CustomCSS", children: [
/* @__PURE__ */ e(t.Trigger, { className: "px-4", children: "Custom CSS" }),
/* @__PURE__ */ e(t.Content, { className: "px-4", children: /* @__PURE__ */ e(
h,
{
type: l.ADVANCED,
fieldName: "customCss",
label: "Add your own custom CSS"
}
) })
] })
] });
export {
W as AdvancedSettingsControl,
W as default
};
//# sourceMappingURL=advance-settings.control.js.map