@dndbuilder.com/react
Version:
Drag and drop builder for React
70 lines (69 loc) • 1.81 kB
JavaScript
"use client";
import { jsxs as i, jsx as e, Fragment as c } from "react/jsx-runtime";
import { useSettings as d } from "../../hooks/use-settings.js";
import { Unit as n } from "../../types/style.js";
import { ColorControl as m } from "./color.control.js";
import { SelectControl as u } from "./select.control.js";
import { SpacingControl as s } from "./spacing.control.js";
import { classNames as p } from "../../../../../utils.js";
const g = ({ fieldName: o, mode: r, type: t, className: a }) => {
const [l] = d(
r ? `${o}.type.${r}` : `${o}.type`,
t
);
return /* @__PURE__ */ i("div", { className: p(a), children: [
/* @__PURE__ */ e(
u,
{
type: t,
options: [
{ content: "None", value: "none" },
{ content: "Solid", value: "solid" },
{ content: "Double", value: "double" },
{ content: "Dotted", value: "dotted" },
{ content: "Groove", value: "groove" }
],
fieldName: `${o}.type`,
label: "Border Type",
mode: r
}
),
l && l !== "none" && /* @__PURE__ */ i(c, { children: [
/* @__PURE__ */ e(
s,
{
type: t,
fieldName: `${o}.width`,
label: "Border Width",
mode: r,
responsive: !0,
min: 0
}
),
/* @__PURE__ */ e(
m,
{
type: t,
label: "Border Color",
fieldName: `${o}.color`,
mode: r
}
)
] }),
/* @__PURE__ */ e(
s,
{
type: t,
fieldName: `${o}.radius`,
label: "Border Radius",
mode: r,
min: 0,
units: [n.PX, n.PERCENTAGE, n.REM, n.EM]
}
)
] });
};
export {
g as BorderControl
};
//# sourceMappingURL=border.control.js.map