@dndbuilder.com/react
Version:
Drag and drop builder for React
75 lines (74 loc) • 1.91 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 { classNames as m } from "../../../../../../utils.js";
import { SelectControl as u } from "../../../components/controls/select.control.js";
import { SpacingControl as a } from "../../../components/controls/spacing.control.js";
import { ColorControl as p } from "../../../components/controls/color.control.js";
const g = ({
fieldName: o,
mode: r,
type: t,
className: s
}) => {
const [l] = d(
r ? `${o}.type.${r}` : `${o}.type`,
t
);
return /* @__PURE__ */ i("div", { className: m(s), 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(
a,
{
type: t,
fieldName: `${o}.width`,
label: "Border Width",
mode: r,
min: 0
}
),
/* @__PURE__ */ e(
p,
{
type: t,
label: "Border Color",
fieldName: `${o}.color`,
mode: r
}
)
] }),
/* @__PURE__ */ e(
a,
{
type: t,
fieldName: `${o}.radius`,
label: "Border Radius",
mode: r,
min: 0,
units: [n.PX, n.PERCENTAGE, n.REM, n.EM]
}
)
] });
};
export {
g as TabsBorderControl,
g as default
};
//# sourceMappingURL=tabs-border.control.js.map