@saltcorn/builder 0.8.7-beta.0 → 0.8.7-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.8.7-beta.0",
+  "version": "0.8.7-beta.2",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/Builder.js

@@ -24,6 +24,7 @@ import { HTMLCode } from "./elements/HTMLCode";
 import { Action } from "./elements/Action";
 import { Image } from "./elements/Image";
 import { Tabs } from "./elements/Tabs";
+import { Table } from "./elements/Table";
 import { Empty } from "./elements/Empty";
 import { DropDownFilter } from "./elements/DropDownFilter";
 import { DropMenu } from "./elements/DropMenu";
@@ -454,6 +455,7 @@ const Builder = ({ options, layout, mode }) => {
                       DropDownFilter,
                       DropMenu,
                       Tabs,
+                      Table,
                       ToggleFilter,
                     }}
                   >

package/src/components/Toolbox.js

@@ -21,6 +21,7 @@ import { ToggleFilter } from "./elements/ToggleFilter";
 import { Empty } from "./elements/Empty";
 import { Card } from "./elements/Card";
 import { Tabs } from "./elements/Tabs";
+import { Table } from "./elements/Table";
 import { Container } from "./elements/Container";
 import { Image } from "./elements/Image";
 import { View } from "./elements/View";
@@ -130,7 +131,7 @@ const ColumnsElem = ({ connectors }) => (
     title="Split into columns"
     label="Columns"
   >
-    <Columns contents={[]} />
+    <Columns contents={[]} setting_col_n={1} />
   </WrapElem>
 );
 /**
@@ -360,7 +361,7 @@ const DropMenuElem = ({ connectors }) => (
   </WrapElem>
 );
 
-const PageElem = ({connectors, pages}) => (
+const PageElem = ({ connectors, pages }) => (
   <WrapElem
     connectors={connectors}
     icon="fa-fw far fa-file"
@@ -368,9 +369,7 @@ const PageElem = ({connectors, pages}) => (
     label="Page"
     disable={pages.length <= 1}
   >
-    <Page 
-      page={pages.length > 0 ? pages[0].name : "page"}
-    />
+    <Page page={pages.length > 0 ? pages[0].name : "page"} />
   </WrapElem>
 );
 
@@ -500,6 +499,18 @@ const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => (
   </WrapElem>
 );
 
+const TableElem = ({ connectors }) => (
+  <WrapElem
+    connectors={connectors}
+    innerClass="mt-m1px"
+    icon="fas fa-table"
+    title="Table"
+    label="Table"
+  >
+    <Table contents={[[], []]} rows={2} columns={2} />
+  </WrapElem>
+);
+
 export /**
  * @returns {Fragment}
  * @category saltcorn-builder
@@ -559,6 +570,9 @@ const ToolboxShow = () => {
         <HTMLElem connectors={connectors} />
         <DropMenuElem connectors={connectors} />
       </div>
+      <div className="toolbar-row">
+        <TableElem connectors={connectors} />
+      </div>
     </Fragment>
   );
 };
@@ -608,6 +622,9 @@ const ToolboxFilter = () => {
         <HTMLElem connectors={connectors} />
         <LinkElem connectors={connectors} />
       </div>
+      <div className="toolbar-row">
+        <TableElem connectors={connectors} />
+      </div>
     </Fragment>
   );
 };
@@ -656,6 +673,9 @@ const ToolboxEdit = () => {
         <JoinFieldElem connectors={connectors} options={options} />
         <DropMenuElem connectors={connectors} />
       </div>
+      <div className="toolbar-row">
+        <TableElem connectors={connectors} />
+      </div>
     </Fragment>
   );
 };
@@ -700,6 +720,9 @@ const ToolboxPage = () => {
         <DropMenuElem connectors={connectors} />
         <PageElem connectors={connectors} pages={pages} />
       </div>
+      <div className="toolbar-row">
+        <TableElem connectors={connectors} />
+      </div>
     </Fragment>
   );
 };

package/src/components/elements/Columns.js

@@ -8,9 +8,22 @@ import React, { Fragment } from "react";
 import { Column } from "./Column";
 
 import { Element, useNode } from "@craftjs/core";
-import { Accordion, reactifyStyles } from "./utils";
+import {
+  Accordion,
+  ConfigField,
+  SettingsRow,
+  reactifyStyles,
+  SettingsSectionHeaderRow,
+} from "./utils";
 import { BoxModelEditor } from "./BoxModelEditor";
-
+import {
+  AlignTop,
+  AlignMiddle,
+  AlignStart,
+  AlignEnd,
+  AlignCenter,
+  AlignBottom,
+} from "react-bootstrap-icons";
 export /**
  *
  * @param {number} n
@@ -60,19 +73,35 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Columns = ({ widths, contents, ncols, style }) => {
+const Columns = ({
+  widths,
+  contents,
+  ncols,
+  style,
+  gx,
+  gy,
+  aligns,
+  vAligns,
+}) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
   return (
     <div
-      className={`row ${selected ? "selected-node" : ""}`}
+      className={`row ${selected ? "selected-node" : ""} ${
+        typeof gx !== "undefined" && gx !== null ? `gx-${gx}` : ""
+      } ${typeof gy !== "undefined" && gy !== null ? `gy-${gy}` : ""}`}
       ref={(dom) => connect(drag(dom))}
       style={reactifyStyles(style || {})}
     >
       {ntimes(ncols, (ix) => (
-        <div key={ix} className={`split-col col-sm-${getWidth(widths, ix)}`}>
+        <div
+          key={ix}
+          className={`split-col col-sm-${getWidth(widths, ix)} text-${
+            aligns?.[ix]
+          } align-items-${vAligns?.[ix]}`}
+        >
           <Element canvas id={`Col${ix}`} is={Column}>
             {contents[ix]}
           </Element>
@@ -94,6 +123,11 @@ const ColumnsSettings = () => {
     ncols: node.data.props.ncols,
     breakpoints: node.data.props.breakpoints,
     style: node.data.props.style,
+    setting_col_n: node.data.props.setting_col_n,
+    gx: node.data.props.gx,
+    gy: node.data.props.gy,
+    vAligns: node.data.props.vAligns,
+    aligns: node.data.props.aligns,
   }));
   const {
     actions: { setProp },
@@ -101,7 +135,14 @@ const ColumnsSettings = () => {
     ncols,
     breakpoints,
     style,
+    setting_col_n,
+    vAligns,
+    aligns,
   } = node;
+  const colSetsNode = {
+    vAlign: vAligns?.[setting_col_n - 1],
+    hAlign: aligns?.[setting_col_n - 1],
+  };
   return (
     <Accordion>
       <table accordiontitle="Column properties">
@@ -183,6 +224,91 @@ const ColumnsSettings = () => {
           ))}
         </tbody>
       </table>
+      <div accordiontitle="Column settings">
+        Settings for column #
+        <ConfigField
+          field={{
+            name: "setting_col_n",
+            label: "Column number",
+            type: "btn_select",
+            options: ntimes(ncols, (i) => ({
+              value: i + 1,
+              title: `${i + 1}`,
+              label: `${i + 1}`,
+            })),
+          }}
+          node={node}
+          setProp={setProp}
+          props={node}
+        ></ConfigField>
+        <table>
+          <tbody>
+            <SettingsSectionHeaderRow title="Align" />
+            <SettingsRow
+              field={{
+                name: "vAlign",
+                label: "Vertical",
+                type: "btn_select",
+                options: [
+                  { value: "start", title: "All", label: <AlignTop /> },
+                  { value: "center", title: "All", label: <AlignMiddle /> },
+                  { value: "end", title: "All", label: <AlignBottom /> },
+                ],
+              }}
+              node={colSetsNode}
+              setProp={setProp}
+              onChange={(k, v) =>
+                setProp((prop) => {
+                  if (!prop.vAligns) prop.vAligns = [];
+                  prop.vAligns[setting_col_n - 1] = v;
+                })
+              }
+            />
+            <SettingsRow
+              field={{
+                name: "hAlign",
+                label: "Horizontal",
+                type: "btn_select",
+                options: [
+                  { value: "start", title: "Left", label: <AlignStart /> },
+                  { value: "center", title: "Center", label: <AlignCenter /> },
+                  { value: "end", title: "Right", label: <AlignEnd /> },
+                ],
+              }}
+              node={colSetsNode}
+              setProp={setProp}
+              onChange={(k, v) =>
+                setProp((prop) => {
+                  if (!prop.aligns) prop.aligns = [];
+                  prop.aligns[setting_col_n - 1] = v;
+                })
+              }
+            />
+          </tbody>
+        </table>
+      </div>
+      <table className="w-100" accordiontitle="Gutters">
+        <tbody>
+          <SettingsRow
+            field={{
+              name: "gx",
+              label: "Horizontal 0-5",
+              type: "Integer",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{
+              name: "gy",
+              label: "Vertical 0-5",
+              type: "Integer",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+        </tbody>
+      </table>
       <div accordiontitle="Box" className="w-100">
         <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
       </div>
@@ -200,6 +326,7 @@ Columns.craft = {
     ncols: 2,
     style: {},
     breakpoints: ["sm", "sm"],
+    setting_col_n: 1,
   },
   related: {
     settings: ColumnsSettings,

package/src/components/elements/Container.js

@@ -389,9 +389,9 @@ const ContainerSettings = () => {
               label: "Horizontal",
               type: "btn_select",
               options: [
-                { value: "left", title: "Left", label: <AlignStart /> },
+                { value: "start", title: "Left", label: <AlignStart /> },
                 { value: "center", title: "Center", label: <AlignCenter /> },
-                { value: "right", title: "Right", label: <AlignEnd /> },
+                { value: "end", title: "Right", label: <AlignEnd /> },
               ],
             }}
             node={node}
@@ -488,12 +488,12 @@ const ContainerSettings = () => {
                     onChange={setAProp("bgFileId")}
                   >
                     {options.images.map((f, ix) => (
-                      <option key={ix} value={f.location}>
+                      <option key={ix} value={f.id}>
                         {f.filename}
                       </option>
                     ))}
                     {(uploadedFiles || []).map((uf, ix) => (
-                      <option key={ix} value={uf.location}>
+                      <option key={ix} value={uf.id}>
                         {uf.filename}
                       </option>
                     ))}{" "}

package/src/components/elements/Table.js

@@ -0,0 +1,130 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Table
+ * @subcategory components / elements
+ */
+
+import React, { Fragment, useState, useContext, useEffect } from "react";
+import { ntimes } from "./Columns";
+import { Column } from "./Column";
+import optionsCtx from "../context";
+import { setAPropGen, SettingsFromFields } from "./utils";
+
+import { Element, useNode } from "@craftjs/core";
+
+export /**
+ * @param {object} props
+ * @param {string[]} props.contents
+ * @param {string[]} props.titles
+ * @param {string} props.tabsStyle
+ * @param {number} props.ntabs
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const Table = ({
+  contents,
+  rows,
+  columns,
+  bs_style,
+  bs_small,
+  bs_striped,
+  bs_bordered,
+  bs_borderless,
+}) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <table
+      className={`${selected ? "selected-node" : ""} ${
+        bs_style ? "table" : ""
+      } ${bs_style && bs_small ? "table-sm" : ""} ${
+        bs_style && bs_striped ? "table-striped" : ""
+      } ${bs_style && bs_bordered ? "table-bordered" : ""} ${
+        bs_style && bs_borderless ? "table-borderless" : ""
+      }`}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <tbody>
+        {ntimes(rows, (ri) => (
+          <tr key={ri}>
+            {ntimes(columns, (ci) => (
+              <td key={ci}>
+                <Element canvas id={`cell_${ri}_${ci}`} is={Column}>
+                  {contents?.[ri]?.[ci]}
+                </Element>
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+const fields = [
+  {
+    label: "Rows",
+    name: "rows",
+    type: "Integer",
+    attributes: { min: 0 },
+  },
+  {
+    label: "Columns",
+    name: "columns",
+    type: "Integer",
+    attributes: { min: 0 },
+  },
+  {
+    label: "Bootstrap style",
+    name: "bs_style",
+    type: "Bool",
+  },
+  {
+    label: "Small",
+    name: "bs_small",
+    type: "Bool",
+    showIf: { bs_style: true },
+  },
+  {
+    label: "Striped",
+    name: "bs_striped",
+    type: "Bool",
+    showIf: { bs_style: true },
+  },
+  {
+    label: "Bordered",
+    name: "bs_bordered",
+    type: "Bool",
+    showIf: { bs_style: true },
+  },
+  {
+    label: "Borderless",
+    name: "bs_borderless",
+    type: "Bool",
+    showIf: { bs_style: true },
+  },
+];
+
+/**
+ * @type {object}
+ */
+Table.craft = {
+  displayName: "Table",
+  related: {
+    settings: SettingsFromFields(fields, {
+      onChange(fnm, v, setProp) {
+        if (fnm === "rows")
+          setProp((prop) => {
+            ntimes(v, (i) => {
+              if (!prop.contents[i]) prop.contents[i] = [];
+            });
+          });
+      },
+    }),
+    fields,
+  },
+};

package/src/components/elements/View.js

@@ -208,6 +208,7 @@ const ViewSettings = () => {
             >
               <option value="shared">Shared</option>
               <option value="fixed">Fixed</option>
+              <option value="local">Local</option>
             </select>
           </div>
           {state === "fixed" &&

package/src/components/elements/utils.js

@@ -711,7 +711,7 @@ const ConfigField = ({
         prop.style[field.name] = v;
       } else prop[field.name] = v;
     });
-    onChange && onChange(field.name, v);
+    onChange && onChange(field.name, v, setProp);
   };
   const value = or_if_undef(
     configuration
@@ -937,30 +937,49 @@ export /**
  * @namespace
  * @returns {table}
  */
-const SettingsFromFields = (fields) => () => {
-  const node = useNode((node) => {
-    const ps = {};
-    fields.forEach((f) => {
-      ps[f.name] = node.data.props[f.name];
+const SettingsFromFields =
+  (fields, opts = {}) =>
+  () => {
+    const node = useNode((node) => {
+      const ps = {};
+      fields.forEach((f) => {
+        ps[f.name] = node.data.props[f.name];
+      });
+      if (fields.some((f) => f.canBeFormula))
+        ps.isFormula = node.data.props.isFormula;
+      return ps;
     });
-    if (fields.some((f) => f.canBeFormula))
-      ps.isFormula = node.data.props.isFormula;
-    return ps;
-  });
-  const {
-    actions: { setProp },
-  } = node;
-
-  return (
-    <table className="w-100">
-      <tbody>
-        {fields.map((f, ix) => (
-          <SettingsRow field={f} key={ix} node={node} setProp={setProp} />
-        ))}
-      </tbody>
-    </table>
-  );
-};
+    const {
+      actions: { setProp },
+    } = node;
+    const noop = () => {};
+    return (
+      <table className="w-100">
+        <tbody>
+          {fields.map((f, ix) => {
+            if (f.showIf) {
+              let noshow = false;
+              Object.entries(f.showIf).forEach(([nm, value]) => {
+                if (Array.isArray(value))
+                  noshow = noshow || value.includes(node[nm]);
+                else noshow = noshow || value !== node[nm];
+              });
+              if (noshow) return null;
+            }
+            return (
+              <SettingsRow
+                field={f}
+                key={ix}
+                node={node}
+                onChange={opts.onChange || noop}
+                setProp={setProp}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  };
 
 export /**
  * @param {object} props