@saltcorn/builder 1.6.0-alpha.1 → 1.6.0-alpha.11

package/src/components/elements/Container.js

@@ -3,10 +3,13 @@
  * @module components/elements/Container
  * @subcategory components / elements
  */
+/* globals $, validate_expression_elem */
 
 import React, { useContext, Fragment } from "react";
 
 import { Element, useNode } from "@craftjs/core";
+import { Column } from "./Column";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import {
   Accordion,
@@ -83,6 +86,7 @@ export /**
  */
 const Container = ({
   children,
+  contents,
   minHeight,
   height,
   width,
@@ -111,18 +115,59 @@ const Container = ({
   style,
   htmlElement,
   transform,
+  showForRole,
+  bgField,
+  maxScreenWidth,
+  imgResponsiveWidths,
+  click_action,
+  animateName,
+  animateDelay,
+  animateDuration,
+  animateInitialHide,
+  url,
+  hoverColor,
+  overflow,
+  show_for_owner,
+  showIfFormula,
+  isFormula,
+  minRole,
 }) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
-  //console.log("container style", style);
+  const { previewDevice } = useContext(previewCtx);
+
+  const BP_MIN = { "": 0, sm: 576, md: 768, lg: 992, xl: 1200 };
+  const DEVICE_W = { desktop: Infinity, tablet: 768, mobile: 375 };
+  {
+    const dw = DEVICE_W[previewDevice] || Infinity;
+    if (minScreenWidth && dw < (BP_MIN[minScreenWidth] || 0)) {
+      return <div ref={(dom) => connect(drag(dom))} style={{ display: "none" }} />;
+    }
+    if (maxScreenWidth && dw >= (BP_MIN[maxScreenWidth] || Infinity)) {
+      return <div ref={(dom) => connect(drag(dom))} style={{ display: "none" }} />;
+    }
+  }
+
+  const actualChildren = contents || children;
+
+  const renderChildren = () => {
+    if (!actualChildren) return null;
+    if (React.isValidElement(actualChildren)) return actualChildren;
+    if (Array.isArray(actualChildren)) return actualChildren;
+    if (typeof actualChildren === 'object' && actualChildren !== null && 'children' in actualChildren) {
+      return actualChildren.children;
+    }
+    return actualChildren;
+  };
+
   return React.createElement(
     htmlElement,
     {
       ref: (dom) => connect(drag(dom)),
       id: customId || "",
-      className: `${customClass || ""} kontainer canvas text-${hAlign} ${
+      className: `${customClass || ""} kontainer text-${hAlign} ${
         vAlign === "middle" ? "d-flex align-items-center" : ""
       } ${
         vAlign === "middle" && hAlign === "center" && "justify-content-center"
@@ -131,8 +176,6 @@ const Container = ({
         ...parseStyles(customCSS || ""),
         ...reactifyStyles(style, transform, rotate),
         display,
-        //padding: padding.map((p) => p + "px").join(" "),
-        //margin: margin.map((p) => p + "px").join(" "),
         minHeight: minHeight ? `${minHeight}${minHeightUnit || "px"}` : null,
         ...(bgType === "Image" && bgFileId
           ? {
@@ -176,7 +219,9 @@ const Container = ({
           : {}),
       },
     },
-    children
+    <Element canvas id="container-canvas" is={Column}>
+      {renderChildren()}
+    </Element>
   );
 };
 
@@ -188,6 +233,7 @@ export /**
  * @subcategory components
  */
 const ContainerSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     minHeight: node.data.props.minHeight,
     height: node.data.props.height,
@@ -287,15 +333,15 @@ const ContainerSettings = () => {
       value={currentSettingsTab}
       onChange={(ix) => setProp((prop) => (prop.currentSettingsTab = ix))}
     >
-      <div accordiontitle="Box" className="w-100">
+      <div accordiontitle={t("Box")} className="w-100">
         <BoxModelEditor setProp={setProp} node={node} />
       </div>
-      <table className="w-100" accordiontitle="Display">
+      <table className="w-100" accordiontitle={t("Display")}>
         <tbody>
           <SettingsRow
             field={{
               name: "display",
-              label: "Display",
+              label: t("Display"),
               type: "select",
               options: [
                 "block",
@@ -312,7 +358,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "htmlElement",
-              label: "HTML element",
+              label: t("HTML element"),
               type: "select",
               options: [
                 "div",
@@ -346,19 +392,19 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "overflow",
-              label: "Overflow",
+              label: t("Overflow"),
               type: "btn_select",
               options: [
-                { value: "visible", title: "Visible", label: <EyeFill /> },
-                { value: "hidden", title: "Hidden", label: <EyeSlashFill /> },
+                { value: "visible", title: t("Visible"), label: <EyeFill /> },
+                { value: "hidden", title: t("Hidden"), label: <EyeSlashFill /> },
                 {
                   value: "scroll",
-                  title: "Scroll",
+                  title: t("Scroll"),
                   label: <FontAwesomeIcon icon={faScroll} />,
                 },
                 {
                   value: "auto",
-                  title: "Auto",
+                  title: t("Auto"),
                   label: <FontAwesomeIcon icon={faRobot} />,
                 },
               ],
@@ -369,7 +415,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "opacity",
-              label: "Opacity",
+              label: t("Opacity"),
               type: "Float",
               attributes: { min: 0, max: 1 },
             }}
@@ -380,7 +426,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "position",
-              label: "Position",
+              label: t("Position"),
               type: "select",
               options: ["static", "relative", "fixed", "absolute", "sticky"],
             }}
@@ -393,7 +439,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "top",
-                  label: "Top",
+                  label: t("Top"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -403,7 +449,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "right",
-                  label: "Right",
+                  label: t("Right"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -413,7 +459,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "bottom",
-                  label: "Bottom",
+                  label: t("Bottom"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -423,7 +469,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "left",
-                  label: "Left",
+                  label: t("Left"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -443,34 +489,34 @@ const ContainerSettings = () => {
                   onChange={setAProp("fullPageWidth", { checked: true })}
                 />
                 <label className="form-check-label">
-                  Expand to full page width
+                  {t("Expand to full page width")}
                 </label>
               </div>
             </td>
           </tr>
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Contents">
+      <table className="w-100" accordiontitle={t("Contents")}>
         <tbody>
           <SettingsRow
             field={{
               name: "rotate",
-              label: "Rotate °",
+              label: t("Rotate °"),
               type: "Integer",
             }}
             node={node}
             setProp={setProp}
           />
-          <SettingsSectionHeaderRow title="Align" />
+          <SettingsSectionHeaderRow title={t("Align")} />
           <SettingsRow
             field={{
               name: "vAlign",
-              label: "Vertical",
+              label: t("Vertical"),
               type: "btn_select",
               options: [
-                { value: "top", title: "All", label: <AlignTop /> },
-                { value: "middle", title: "All", label: <AlignMiddle /> },
-                { value: "bottom", title: "All", label: <AlignBottom /> },
+                { value: "top", title: t("All"), label: <AlignTop /> },
+                { value: "middle", title: t("All"), label: <AlignMiddle /> },
+                { value: "bottom", title: t("All"), label: <AlignBottom /> },
               ],
             }}
             node={node}
@@ -479,22 +525,22 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "hAlign",
-              label: "Horizontal",
+              label: t("Horizontal"),
               type: "btn_select",
               options: [
-                { value: "start", title: "Left", label: <AlignStart /> },
-                { value: "center", title: "Center", label: <AlignCenter /> },
-                { value: "end", title: "Right", label: <AlignEnd /> },
+                { value: "start", title: t("Left"), label: <AlignStart /> },
+                { value: "center", title: t("Center"), label: <AlignCenter /> },
+                { value: "end", title: t("Right"), label: <AlignEnd /> },
               ],
             }}
             node={node}
             setProp={setProp}
           />
-          <SettingsSectionHeaderRow title="Background" />
+          <SettingsSectionHeaderRow title={t("Background")} />
           <SettingsRow
             field={{
               name: "bgType",
-              label: "Type",
+              label: t("Type"),
               type: "btn_select",
               options: [
                 { value: "None", label: <SlashCircle /> },
@@ -520,7 +566,7 @@ const ContainerSettings = () => {
           {bgType === "Gradient" && (
             <Fragment>
               <tr>
-                <td>Start</td>
+                <td>{t("Start")}</td>
                 <td>
                   <OrFormula
                     nodekey="gradStartColor"
@@ -536,7 +582,7 @@ const ContainerSettings = () => {
                 </td>
               </tr>
               <tr>
-                <td>End</td>
+                <td>{t("End")}</td>
                 <td>
                   <OrFormula
                     nodekey="gradEndColor"
@@ -552,7 +598,7 @@ const ContainerSettings = () => {
                 </td>
               </tr>
               <tr>
-                <td>Direction (&deg;)</td>
+                <td>{t("Direction (&deg;)")}</td>
                 <td>
                   <OrFormula
                     nodekey="gradDirection"
@@ -574,7 +620,7 @@ const ContainerSettings = () => {
           {bgType === "Image" && (
             <tr>
               <td>
-                <label>File</label>
+                <label>{t("File")}</label>
               </td>
               <td>
                 <select
@@ -599,7 +645,7 @@ const ContainerSettings = () => {
           {bgType === "Image Field" && (
             <tr>
               <td>
-                <label>File field</label>
+                <label>{t("File field")}</label>
               </td>
               <td>
                 <select
@@ -627,7 +673,7 @@ const ContainerSettings = () => {
             <Fragment>
               <tr>
                 <td>
-                  <label>Size</label>
+                  <label>{t("Size")}</label>
                 </td>
 
                 <td>
@@ -643,7 +689,7 @@ const ContainerSettings = () => {
               {imageSize !== "repeat" && (
                 <tr>
                   <td>
-                    <label>Responsive widths</label>
+                    <label>{t("Responsive widths")}</label>
                   </td>
 
                   <td>
@@ -656,8 +702,7 @@ const ContainerSettings = () => {
                     />
                     <small>
                       <i>
-                        List of widths to serve resized images, e.g. 300, 400,
-                        600
+                        {t("List of widths to serve resized images, e.g. 300, 400, 600")}
                       </i>
                     </small>
                   </td>
@@ -667,7 +712,7 @@ const ContainerSettings = () => {
           )}
           {bgType === "Color" && (
             <tr>
-              <td>Color</td>
+              <td>{t("Color")}</td>
               <td>
                 <OrFormula nodekey="bgColor" {...{ setProp, isFormula, node }}>
                   <input
@@ -680,11 +725,11 @@ const ContainerSettings = () => {
               </td>
             </tr>
           )}
-          <SettingsSectionHeaderRow title="Typography" />
+          <SettingsSectionHeaderRow title={t("Typography")} />
           <SettingsRow
             field={{
               name: "font-family",
-              label: "Font family",
+              label: t("Font family"),
               type: "Font",
             }}
             node={node}
@@ -694,7 +739,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "font-size",
-              label: "Font size",
+              label: t("Font size"),
               type: "DimUnits",
             }}
             node={node}
@@ -704,7 +749,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "font-weight",
-              label: "Weight",
+              label: t("Weight"),
               type: "Integer",
               min: 100,
               max: 900,
@@ -717,7 +762,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "line-height",
-              label: "Line height",
+              label: t("Line height"),
               type: "DimUnits",
             }}
             node={node}
@@ -727,7 +772,7 @@ const ContainerSettings = () => {
           <tr>
             <td colSpan="2">
               <label>
-                Set text color
+                {t("Set text color")}
                 <input
                   name="setTextColor"
                   type="checkbox"
@@ -740,7 +785,7 @@ const ContainerSettings = () => {
           {setTextColor && (
             <tr>
               <td>
-                <label>Text</label>
+                <label>{t("Text")}</label>
               </td>
               <td>
                 <input
@@ -754,39 +799,39 @@ const ContainerSettings = () => {
           )}
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Transform">
+      <table className="w-100" accordiontitle={t("Transform")}>
         <tbody>
           <SettingsRow
             field={{
               name: "rotate",
-              label: "Rotate°",
+              label: t("Rotate°"),
               type: "Integer",
             }}
             node={node}
             setProp={setProp}
           />
           <SettingsRow
-            field={{ name: "skewX", label: "SkewX°", type: "Integer" }}
+            field={{ name: "skewX", label: t("SkewX°"), type: "Integer" }}
             node={node}
             setProp={setProp}
             subProp="transform"
             valuePostfix="deg"
           />
           <SettingsRow
-            field={{ name: "skewY", label: "SkewY°", type: "Integer" }}
+            field={{ name: "skewY", label: t("SkewY°"), type: "Integer" }}
             node={node}
             setProp={setProp}
             subProp="transform"
             valuePostfix="deg"
           />
           <SettingsRow
-            field={{ name: "scaleX", label: "ScaleX", type: "Float" }}
+            field={{ name: "scaleX", label: t("ScaleX"), type: "Float" }}
             node={node}
             setProp={setProp}
             subProp="transform"
           />
           <SettingsRow
-            field={{ name: "scaleY", label: "ScaleY", type: "Float" }}
+            field={{ name: "scaleY", label: t("ScaleY"), type: "Float" }}
             node={node}
             setProp={setProp}
             subProp="transform"
@@ -794,7 +839,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "translateX",
-              label: "TranslateX",
+              label: t("TranslateX"),
               type: "DimUnits",
             }}
             node={node}
@@ -804,7 +849,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "translateY",
-              label: "TranslateY",
+              label: t("TranslateY"),
               type: "DimUnits",
             }}
             node={node}
@@ -813,28 +858,28 @@ const ContainerSettings = () => {
           />
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Flex properties">
+      <table className="w-100" accordiontitle={t("Flex properties")}>
         <tbody>
-          <SettingsSectionHeaderRow title="Flex item" />
+          <SettingsSectionHeaderRow title={t("Flex item")} />
           <SettingsRow
-            field={{ name: "flex-grow", label: "Grow", type: "Float" }}
+            field={{ name: "flex-grow", label: t("Grow"), type: "Float" }}
             node={node}
             setProp={setProp}
             isStyle={true}
           />
           <SettingsRow
-            field={{ name: "flex-shrink", label: "Shrink", type: "Float" }}
+            field={{ name: "flex-shrink", label: t("Shrink"), type: "Float" }}
             node={node}
             setProp={setProp}
             isStyle={true}
           />
           {display && display.includes("flex") && (
             <Fragment>
-              <SettingsSectionHeaderRow title="Flex container" />
+              <SettingsSectionHeaderRow title={t("Flex container")} />
               <SettingsRow
                 field={{
                   name: "flex-direction",
-                  label: "Direction",
+                  label: t("Direction"),
                   type: "select",
                   options: ["row", "row-reverse", "column", "column-reverse"],
                 }}
@@ -845,7 +890,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "flex-wrap",
-                  label: "Wrap",
+                  label: t("Wrap"),
                   type: "select",
                   options: ["nowrap", "wrap", "wrap-reverse"],
                 }}
@@ -856,7 +901,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "justify-content",
-                  label: "Justify content",
+                  label: t("Justify content"),
                   type: "select",
                   options: [
                     "flex-start",
@@ -878,7 +923,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "align-items",
-                  label: "Align items",
+                  label: t("Align items"),
                   type: "select",
                   options: [
                     "stretch",
@@ -901,7 +946,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "align-content",
-                  label: "Align content",
+                  label: t("Align content"),
                   type: "select",
                   options: [
                     "flex-start",
@@ -926,12 +971,12 @@ const ContainerSettings = () => {
           )}
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Animate">
+      <table className="w-100" accordiontitle={t("Animate")}>
         <tbody>
           <SettingsRow
             field={{
               name: "animateName",
-              label: "Animation",
+              label: t("Animation"),
               type: "select",
               options: ["None", ...(options.keyframes || [])],
             }}
@@ -941,21 +986,21 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "animateDuration",
-              label: "Duration (s)",
+              label: t("Duration (s)"),
               type: "Float",
             }}
             node={node}
             setProp={setProp}
           />
           <SettingsRow
-            field={{ name: "animateDelay", label: "Delay (s)", type: "Float" }}
+            field={{ name: "animateDelay", label: t("Delay (s)"), type: "Float" }}
             node={node}
             setProp={setProp}
           />
           <SettingsRow
             field={{
               name: "animateInitialHide",
-              label: "Initially hidden",
+              label: t("Initially hidden"),
               type: "Bool",
             }}
             node={node}
@@ -963,16 +1008,16 @@ const ContainerSettings = () => {
           />
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Show if...">
+      <table className="w-100" accordiontitle={t("Show if...")}>
         <tbody>
           {["show", "edit", "filter", "list"].includes(options.mode) && (
-            <SettingsSectionHeaderRow title="Formula - show if true" />
+            <SettingsSectionHeaderRow title={t("Formula - show if true")} />
           )}
           <tr>
             <td colSpan={2}>
               <input
                 type="text"
-                placeholder="Example: x === y"
+                placeholder={t("Example: x === y")}
                 className="form-control text-to-display"
                 value={showIfFormula}
                 spellCheck={false}
@@ -981,12 +1026,12 @@ const ContainerSettings = () => {
               />
               <div style={{ marginTop: "-5px" }}>
                 <small className="text-muted font-monospace">
-                  FORMULA <FormulaTooltip />
+                  {t("FORMULA")} <FormulaTooltip />
                 </small>
               </div>
             </td>
           </tr>
-          <SettingsSectionHeaderRow title="Role" />
+          <SettingsSectionHeaderRow title={t("Role")} />
           {options.roles.map(({ role, id }) => (
             <tr key={id}>
               <td colSpan="2">
@@ -1028,14 +1073,14 @@ const ContainerSettings = () => {
                     checked={show_for_owner}
                     onChange={setAProp("show_for_owner", { checked: true })}
                   />
-                  <label className="form-check-label">Owner</label>
+                  <label className="form-check-label">{t("Owner")}</label>
                 </div>
               </td>
             </tr>
           ) : null}
           <tr>
             <td>
-              <label>Min screen width</label>
+              <label>{t("Min screen width")}</label>
             </td>
             <td>
               <select
@@ -1050,7 +1095,7 @@ const ContainerSettings = () => {
           </tr>
           <tr>
             <td>
-              <label>Max screen width</label>
+              <label>{t("Max screen width")}</label>
             </td>
             <td>
               <select
@@ -1067,8 +1112,8 @@ const ContainerSettings = () => {
           </tr>
         </tbody>
       </table>
-      <div accordiontitle="Container link">
-        <label>URL</label>
+      <div accordiontitle={t("Container link")}>
+        <label>{t("URL")}</label>
         <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
           <input
             type="text"
@@ -1080,7 +1125,7 @@ const ContainerSettings = () => {
         </OrFormula>
         {options.triggerActions ? (
           <Fragment>
-            <label>Click action</label>
+            <label>{t("Click action")}</label>
             <select
               value={click_action}
               className="form-control form-select"
@@ -1101,7 +1146,7 @@ const ContainerSettings = () => {
             </select>
           </Fragment>
         ) : null}
-        <label>Hover color</label>
+        <label>{t("Hover color")}</label>
         <select
           value={hoverColor}
           className="form-control form-select"
@@ -1114,9 +1159,9 @@ const ContainerSettings = () => {
         </select>
       </div>
 
-      <div accordiontitle="Class, ID and CSS">
+      <div accordiontitle={t("Class, ID and CSS")}>
         <div>
-          <label>ID</label>
+          <label>{t("ID")}</label>
         </div>
         <OrFormula nodekey="customId" {...{ setProp, isFormula, node }}>
           <input
@@ -1128,7 +1173,7 @@ const ContainerSettings = () => {
           />
         </OrFormula>
         <div>
-          <label>Custom class</label>
+          <label>{t("Custom class")}</label>
         </div>
         <OrFormula nodekey="customClass" {...{ setProp, isFormula, node }}>
           <input
@@ -1140,7 +1185,7 @@ const ContainerSettings = () => {
           />
         </OrFormula>
         <div>
-          <label>Custom CSS</label>
+          <label>{t("Custom CSS")}</label>
         </div>
         <textarea
           rows="4"
@@ -1161,7 +1206,7 @@ const ContainerSettings = () => {
 Container.craft = {
   displayName: "Container",
   props: {
-    minHeight: 0,
+    minHeight: 20,
     vAlign: "top",
     hAlign: "left",
     bgFileId: 0,
@@ -1181,17 +1226,65 @@ Container.craft = {
     showIfFormula: "",
     showForRole: [],
     margin: [0, 0, 0, 0],
-    padding: [0, 0, 0, 0],
+    padding: [16, 16, 16, 16],
     minScreenWidth: "",
     display: "block",
     show_for_owner: false,
     style: {},
     htmlElement: "div",
+    contents: [],
   },
   rules: {
     canDrag: () => true,
   },
   related: {
     settings: ContainerSettings,
+    segment_type: "container",
+    fields: [
+      { label: "Contents", name: "contents", type: "Nodes", nodeID: "container-canvas" },
+      { name: "gradStartColor", canBeFormula: true },
+      { name: "gradEndColor", canBeFormula: true },
+      { name: "gradDirection", canBeFormula: true },
+      { name: "rotate", default: 0 },
+      { name: "animateName", },
+      { name: "animateDuration" },
+      { name: "animateDelay" },
+      { name: "animateInitialHide" },
+      { name: "customClass" },
+      { name: "customId" },
+      { name: "customCSS" },
+      { name: "overflow" },
+      { name: "margin", default: [0, 0, 0, 0] },
+      { name: "padding", default: [0, 0, 0, 0] },
+      { name: "minHeight", default: 20 },
+      { name: "height" },
+      { name: "width" },
+      { name: "click_action" },
+      { name: "url", canBeFormula: true },
+      { name: "hoverColor" },
+      { name: "minHeightUnit", default: "px" },
+      { name: "heightUnit", default: "px" },
+      { name: "widthUnit", default: "px" },
+      { name: "vAlign" },
+      { name: "hAlign" },
+      { name: "htmlElement", default: "div" },
+      { name: "display", default: "block" },
+      { name: "fullPageWidth", default: false },
+      { name: "bgFileId" },
+      { name: "bgField" },
+      { name: "imageSize", default: "contain" },
+      { name: "imgResponsiveWidths" },
+      { name: "bgType", default: "None" },
+      { name: "style", default: {} },
+      { name: "transform", default: {} },
+      { name: "bgColor", default: "#ffffff", canBeFormula: true },
+      { name: "setTextColor", default: false },
+      { name: "textColor", default: "#000000" },
+      { name: "showIfFormula", default: "" },
+      { name: "showForRole", default: [] },
+      { name: "minScreenWidth", default: "" },
+      { name: "maxScreenWidth", default: "" },
+      { name: "show_for_owner", default: false },
+    ],
   },
 };