@saltcorn/builder 0.9.4-beta.2 → 0.9.4-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.4-beta.2",
+  "version": "0.9.4-beta.3",
   "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

@@ -53,6 +53,10 @@ import {
   faTrashAlt,
   faSave,
 } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCaretSquareLeft,
+  faCaretSquareRight,
+} from "@fortawesome/free-regular-svg-icons";
 import {
   Accordion,
   ErrorBoundary,
@@ -391,6 +395,7 @@ const Builder = ({ options, layout, mode }) => {
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const nodekeys = useRef([]);
   const [isSaving, setIsSaving] = useState(false);
+  const [isEnlarged, setIsEnlarged] = useState(false);
   const [relationsCache, setRelationsCache] = useState({});
 
   return (
@@ -472,13 +477,19 @@ const Builder = ({ options, layout, mode }) => {
                   </div>
                 </div>
                 <div className="col-sm-auto builder-sidebar">
-                  <div style={{ width: "16rem" }}>
+                  <div style={{ width: isEnlarged ? "28rem" : "16rem" }}>
                     <NextButton layout={layout} />
                     <HistoryPanel />
                     <FontAwesomeIcon
                       icon={faSave}
                       className={isSaving ? "d-inline" : "d-none"}
                     />
+                    <FontAwesomeIcon
+                      icon={isEnlarged ? faCaretSquareRight : faCaretSquareLeft}
+                      className={"float-end me-2 mt-1 fa-lg"}
+                      onClick={() => setIsEnlarged(!isEnlarged)}
+                    />
+
                     <SettingsPanel />
                   </div>
                 </div>

package/src/components/elements/Container.js

@@ -738,7 +738,7 @@ const ContainerSettings = () => {
           )}
           {["show", "edit", "filter"].includes(options.mode) && (
             <tr>
-              <td>
+              <td colSpan={2}>
                 <input
                   type="text"
                   className="form-control text-to-display"

package/src/components/elements/Tabs.js

@@ -8,7 +8,7 @@ import React, { Fragment, useState, useContext, useEffect } from "react";
 import { ntimes } from "./Columns";
 import { Column } from "./Column";
 import optionsCtx from "../context";
-import { setAPropGen, buildOptions } from "./utils";
+import { setAPropGen, buildOptions, ConfigField } from "./utils";
 
 import { Element, useNode } from "@craftjs/core";
 
@@ -31,14 +31,16 @@ const Tabs = ({
   independent,
   startClosed,
   field,
+  setting_tab_n,
 }) => {
   const {
     selected,
     connectors: { connect, drag },
+    actions: { setProp },
   } = useNode((node) => ({ selected: node.events.selected }));
-  const [showTab, setShowTab] = useState(
-    tabsStyle === "Accordion" && startClosed ? false : 0
-  );
+
+  const showTab = setting_tab_n;
+  const setShowTab = (n) => setProp((prop) => (prop.setting_tab_n = n));
   const [showTabs, setShowTabs] = useState(
     tabsStyle === "Accordion" && startClosed ? [] : [true]
   );
@@ -178,8 +180,10 @@ const TabsSettings = () => {
     deeplink: node.data.props.deeplink,
     disable_inactive: node.data.props.disable_inactive,
     serverRendered: node.data.props.serverRendered,
+    setting_tab_n: node.data.props.setting_tab_n,
     tabId: node.data.props.tabId,
     titles: node.data.props.titles,
+    showif: node.data.props.showif,
     field: node.data.props.field,
   }));
   const {
@@ -194,7 +198,10 @@ const TabsSettings = () => {
     field,
     serverRendered,
     tabId,
+    showif,
+    setting_tab_n,
   } = node;
+  const use_setting_tab_n = setting_tab_n || 0;
   const options = useContext(optionsCtx);
   useEffect(() => {
     if (field)
@@ -263,42 +270,6 @@ const TabsSettings = () => {
           </Fragment>
         ) : (
           <Fragment>
-            <tr>
-              <th>
-                <label>Number of sections</label>
-              </th>
-              <td>
-                <input
-                  type="number"
-                  className="form-control"
-                  value={ntabs}
-                  step="1"
-                  min="0"
-                  max="20"
-                  onChange={setAProp("ntabs")}
-                />
-              </td>
-            </tr>
-            <tr>
-              <th colSpan="2">Titles</th>
-            </tr>
-            {ntimes(ntabs, (ix) => (
-              <tr key={ix}>
-                <th>{ix + 1}</th>
-                <td>
-                  <input
-                    type="text"
-                    className="form-control text-to-display"
-                    value={titles[ix]}
-                    onChange={(e) => {
-                      if (!e.target) return;
-                      const value = e.target.value;
-                      setProp((prop) => (prop.titles[ix] = value));
-                    }}
-                  />
-                </td>
-              </tr>
-            ))}
             {tabsStyle === "Accordion" ? (
               <tr>
                 <td colSpan="2">
@@ -401,6 +372,82 @@ const TabsSettings = () => {
                 </td>
               </tr>
             ) : null}
+            <tr>
+              <th>
+                <label>Number of sections</label>
+              </th>
+              <td>
+                <input
+                  type="number"
+                  className="form-control"
+                  value={ntabs}
+                  step="1"
+                  min="1"
+                  max="20"
+                  onChange={setAProp("ntabs")}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td colSpan={2}>
+                <ConfigField
+                  field={{
+                    name: "setting_tab_n",
+                    label: "Tab number",
+                    type: "btn_select",
+                    options: ntimes(ntabs, (i) => ({
+                      value: i,
+                      title: `${i + 1}`,
+                      label: `${i + 1}`,
+                    })),
+                  }}
+                  node={node}
+                  setProp={setProp}
+                  props={node}
+                ></ConfigField>
+              </td>
+            </tr>
+            <tr>
+              <th colSpan="2">Title</th>
+            </tr>
+            <tr>
+              <td colSpan={2}>
+                <input
+                  type="text"
+                  className="form-control text-to-display"
+                  value={titles[use_setting_tab_n] || ""}
+                  onChange={(e) => {
+                    if (!e.target) return;
+                    const value = e.target.value;
+                    setProp((prop) => (prop.titles[use_setting_tab_n] = value));
+                  }}
+                />
+              </td>
+            </tr>
+            {options.mode === "show" ? (
+              <Fragment>
+                <tr>
+                  <th colSpan="2">Show if formula</th>
+                </tr>
+                <tr>
+                  <td colSpan={2}>
+                    <input
+                      type="text"
+                      className="form-control text-to-display"
+                      value={showif?.[use_setting_tab_n] || ""}
+                      onChange={(e) => {
+                        if (!e.target) return;
+                        const value = e.target.value;
+                        setProp((prop) => {
+                          if (!prop.showif) prop.showif = [];
+                          prop.showif[use_setting_tab_n] = value;
+                        });
+                      }}
+                    />
+                  </td>
+                </tr>
+              </Fragment>
+            ) : null}
           </Fragment>
         )}
       </tbody>
@@ -414,6 +461,7 @@ const TabsSettings = () => {
 Tabs.craft = {
   props: {
     titles: ["Tab1", "Tab2"],
+    showif: [],
     ntabs: 2,
     tabsStyle: "Tabs",
     independent: false,
@@ -421,8 +469,10 @@ Tabs.craft = {
     deeplink: true,
     disable_inactive: false,
     serverRendered: false,
+    setting_tab_n: 0,
     tabId: "",
   },
+  defaultProps: { setting_tab_n: 0, ntabs: 2 },
   displayName: "Tabs",
   related: {
     settings: TabsSettings,

package/src/components/elements/utils.js

@@ -1245,12 +1245,20 @@ const ButtonOrLinkSettingsRows = ({
           <option value={addBtnClass("btn-secondary")}>Secondary button</option>
           <option value={addBtnClass("btn-success")}>Success button</option>
           <option value={addBtnClass("btn-danger")}>Danger button</option>
+          <option value={addBtnClass("btn-warning")}>Warning button</option>
+          <option value={addBtnClass("btn-info")}>Info button</option>
           <option value={addBtnClass("btn-outline-primary")}>
             Primary outline button
           </option>
           <option value={addBtnClass("btn-outline-secondary")}>
             Secondary outline button
           </option>
+          <option value={addBtnClass("btn-outline-warning")}>
+            Warning outline button
+          </option>{" "}
+          <option value={addBtnClass("btn-outline-info")}>
+            Info outline button
+          </option>
           <option value={addBtnClass("btn-custom-color")}>
             Button custom color
           </option>

package/src/components/storage.js

@@ -253,6 +253,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
         <Tabs
           key={ix}
           titles={segment.titles}
+          showif={segment.showif}
           ntabs={segment.ntabs}
           independent={segment.independent}
           startClosed={segment.startClosed}
@@ -529,6 +530,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         type: "tabs",
         contents,
         titles: node.props.titles,
+        showif: node.props.showif,
         tabsStyle: node.props.tabsStyle,
         field: node.props.field,
         independent: node.props.independent,