@saltcorn/builder 0.9.1-beta.1 → 0.9.1-beta.10

package/package.json

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

package/src/components/elements/Container.js

@@ -733,10 +733,10 @@ const ContainerSettings = () => {
       </table>
       <table className="w-100" accordiontitle="Show if...">
         <tbody>
-          {["show", "edit"].includes(options.mode) && (
+          {["show", "edit", "filter"].includes(options.mode) && (
             <SettingsSectionHeaderRow title="Formula - show if true" />
           )}
-          {["show", "edit"].includes(options.mode) && (
+          {["show", "edit", "filter"].includes(options.mode) && (
             <tr>
               <td>
                 <input

package/src/components/elements/Link.js

@@ -307,6 +307,30 @@ const LinkSettings = () => {
 
       <BlockSetting block={block} setProp={setProp} />
       <TextStyleSetting textStyle={textStyle} setProp={setProp} />
+      <table>
+        <tbody>
+          {(link_src === "Page" && url && url.startsWith("/page/")) ||
+          (link_src === "View" && url && url.startsWith("/view/")) ? (
+            <tr>
+              <td colSpan="2">
+                <a
+                  className="d-block mt-2"
+                  target="_blank"
+                  href={
+                    link_src === "Page"
+                      ? url.replace("/page/", `/pageedit/edit/`)
+                      : link_src === "View"
+                      ? url.replace("/view/", `/viewedit/config/`)
+                      : ""
+                  }
+                >
+                  Configure this {link_src}
+                </a>
+              </td>
+            </tr>
+          ) : null}
+        </tbody>
+      </table>
     </div>
   );
 };

package/src/components/elements/Tabs.js

@@ -176,6 +176,7 @@ const TabsSettings = () => {
     independent: node.data.props.independent,
     startClosed: node.data.props.startClosed,
     deeplink: node.data.props.deeplink,
+    disable_inactive: node.data.props.disable_inactive,
     serverRendered: node.data.props.serverRendered,
     tabId: node.data.props.tabId,
     titles: node.data.props.titles,
@@ -186,6 +187,7 @@ const TabsSettings = () => {
     titles,
     tabsStyle,
     deeplink,
+    disable_inactive,
     independent,
     startClosed,
     ntabs,
@@ -239,24 +241,44 @@ const TabsSettings = () => {
           </td>
         </tr>
         {tabsStyle === "Value switch" ? (
-          <tr>
-            <td>
-              <label>Field</label>
-            </td>
-            <td>
-              <select
-                value={field}
-                className="form-control form-select"
-                onChange={setAProp("field")}
-              >
-                {options.fields.map((f, ix) => (
-                  <option key={ix} value={f.name}>
-                    {f.label}
-                  </option>
-                ))}
-              </select>
-            </td>
-          </tr>
+          <Fragment>
+            <tr>
+              <td>
+                <label>Field</label>
+              </td>
+              <td>
+                <select
+                  value={field}
+                  className="form-control form-select"
+                  onChange={setAProp("field")}
+                >
+                  {options.fields.map((f, ix) => (
+                    <option key={ix} value={f.name}>
+                      {f.label}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+            {options.mode === "edit" && !serverRendered ? (
+              <tr>
+                <td colSpan="2">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      name="block"
+                      type="checkbox"
+                      checked={disable_inactive}
+                      onChange={setAProp("disable_inactive", { checked: true })}
+                    />
+                    <label className="form-check-label">
+                      Disable inactive inputs
+                    </label>
+                  </div>
+                </td>
+              </tr>
+            ) : null}
+          </Fragment>
         ) : (
           <Fragment>
             <tr>
@@ -379,6 +401,24 @@ const TabsSettings = () => {
                 </td>
               </tr>
             ) : null}
+            {options.mode === "edit" && !serverRendered ? (
+              <tr>
+                <td colSpan="2">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      name="block"
+                      type="checkbox"
+                      checked={disable_inactive}
+                      onChange={setAProp("disable_inactive", { checked: true })}
+                    />
+                    <label className="form-check-label">
+                      Disable inactive inputs
+                    </label>
+                  </div>
+                </td>
+              </tr>
+            ) : null}
           </Fragment>
         )}
       </tbody>
@@ -397,6 +437,7 @@ Tabs.craft = {
     independent: false,
     startClosed: false,
     deeplink: true,
+    disable_inactive: false,
     serverRendered: false,
     tabId: "",
   },

package/src/components/elements/Text.js

@@ -297,6 +297,16 @@ const TextSettings = () => {
             setProp={setProp}
             isStyle={true}
           />
+          <SettingsRow
+            field={{
+              name: "color",
+              label: "Color",
+              type: "Color",
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
         </tbody>
       </table>
       <BlockOrInlineSetting

package/src/components/elements/ViewLink.js

@@ -268,6 +268,19 @@ const ViewLinkSettings = () => {
       <table>
         <tbody>
           <MinRoleSettingRow minRole={minRole} setProp={setProp} />
+          {use_view_name ? (
+            <tr>
+              <td colSpan="2">
+                <a
+                  className="d-block mt-2"
+                  target="_blank"
+                  href={`/viewedit/config/${use_view_name}`}
+                >
+                  Configure this view
+                </a>
+              </td>
+            </tr>
+          ) : null}
         </tbody>
       </table>
     </div>

package/src/components/elements/utils.js

@@ -431,6 +431,7 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
     })
     .then(function (html) {
       $(".preview-scratchpad").html(html);
+      $(".preview-scratchpad").find("iframe").css("pointer-events", "none");
       $(".preview-scratchpad").find("a").attr("href", "#");
       $(".preview-scratchpad")
         .find("[onclick], button, a, input, select")
@@ -812,11 +813,13 @@ const ConfigField = ({
         onBlur={(e) => e.target && myOnChange(e.target.value)}
       >
         <option value={""}></option>
-        {Object.entries(options.fonts || {}).map(([nm, ff], ix) => (
-          <option key={ix} value={ff}>
-            {nm}
-          </option>
-        ))}
+        {Object.entries(options.fonts || {})
+          .sort()
+          .map(([nm, ff], ix) => (
+            <option key={ix} value={ff}>
+              {nm}
+            </option>
+          ))}
       </select>
     ),
     Integer: () => (

package/src/components/storage.js

@@ -248,6 +248,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           independent={segment.independent}
           startClosed={segment.startClosed}
           deeplink={segment.deeplink}
+          disable_inactive={segment.disable_inactive}
           serverRendered={segment.serverRendered}
           tabId={segment.tabId}
           field={segment.field}
@@ -515,6 +516,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         independent: node.props.independent,
         startClosed: node.props.startClosed,
         deeplink: node.props.deeplink,
+        disable_inactive: node.props.disable_inactive,
         serverRendered: node.props.serverRendered,
         tabId: node.props.tabId,
         ntabs: node.props.ntabs,