@saltcorn/builder 0.9.4-beta.10 → 0.9.4-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.4-beta.10",
+  "version": "0.9.4-beta.11",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +20,7 @@
     "@babel/preset-react": "7.9.4",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
-    "@saltcorn/common-code": "0.9.4-beta.10",
+    "@saltcorn/common-code": "0.9.4-beta.11",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

package/src/components/Library.js

@@ -124,7 +124,10 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
         });
       })
       .catch((e) => {
-        const text = e || "Unable to save";
+        const text =
+          e.message === "Failed to fetch"
+            ? "Network connection lost"
+            : e || "Unable to save";
         // don't log duplicates
         if (savingState.error) setSavingState({ isSaving: false, error: text });
         else {

package/src/components/elements/BoxModelEditor.js

@@ -61,7 +61,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                   onClick={() => setCatAndDir("margin", "top")}
                 >
                   <input
-                    disabled
+                    readOnly={true}
                     type="text"
                     autoComplete="off"
                     name="boxmodel-ex-1_top_margin"
@@ -92,7 +92,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                       onClick={() => setCatAndDir("border", "top")}
                     >
                       <input
-                        disabled
+                        readOnly={true}
                         type="text"
                         autoComplete="off"
                         name="boxmodel-ex-1_top_border"
@@ -125,7 +125,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                           onClick={() => setCatAndDir("padding", "top")}
                         >
                           <input
-                            disabled
+                            readOnly={true}
                             type="text"
                             autoComplete="off"
                             name="boxmodel-ex-1_top_padding"
@@ -140,7 +140,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                           onClick={() => setSelectedCategory("size")}
                         >
                           <input
-                            disabled
+                            readOnly={true}
                             type="text"
                             autoComplete="off"
                             name="boxmodel-ex-1_width"
@@ -155,7 +155,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                           />
                           x
                           <input
-                            disabled
+                            readOnly={true}
                             type="text"
                             autoComplete="off"
                             name="boxmodel-ex-1_height"
@@ -174,7 +174,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                           onClick={() => setCatAndDir("padding", "bottom")}
                         >
                           <input
-                            disabled
+                            readOnly={true}
                             type="text"
                             autoComplete="off"
                             name="boxmodel-ex-1_bottom_padding"
@@ -199,7 +199,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                       onClick={() => setCatAndDir("border", "bottom")}
                     >
                       <input
-                        disabled
+                        readOnly={true}
                         type="text"
                         autoComplete="off"
                         name="boxmodel-ex-1_bottom_border"
@@ -228,7 +228,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                   onClick={() => setCatAndDir("margin", "bottom")}
                 >
                   <input
-                    disabled
+                    readOnly={true}
                     type="text"
                     autoComplete="off"
                     name="boxmodel-ex-1_bottom_margin"

package/src/components/elements/Columns.js

@@ -259,9 +259,9 @@ const ColumnsSettings = () => {
                 label: "Vertical",
                 type: "btn_select",
                 options: [
-                  { value: "start", title: "All", label: <AlignTop /> },
-                  { value: "center", title: "All", label: <AlignMiddle /> },
-                  { value: "end", title: "All", label: <AlignBottom /> },
+                  { value: "start", title: "Start", label: <AlignTop /> },
+                  { value: "center", title: "Center", label: <AlignMiddle /> },
+                  { value: "end", title: "End", label: <AlignBottom /> },
                 ],
               }}
               node={colSetsNode}

package/src/components/elements/Container.js

@@ -222,6 +222,7 @@ const ContainerSettings = () => {
     display: node.data.props.display,
     style: node.data.props.style,
     imgResponsiveWidths: node.data.props.imgResponsiveWidths,
+    click_action: node.data.props.click_action,
   }));
   const {
     actions: { setProp },
@@ -251,6 +252,7 @@ const ContainerSettings = () => {
     overflow,
     htmlElement,
     imgResponsiveWidths,
+    click_action,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles } = useContext(previewCtx);
@@ -844,7 +846,29 @@ const ContainerSettings = () => {
             onChange={setAProp("url")}
           />
         </OrFormula>
-
+        {options.triggerActions ? (
+          <Fragment>
+            <label>Click action</label>
+            <select
+              value={click_action}
+              className="form-control form-select"
+              onChange={(e) => {
+                if (!e.target) return;
+                const value = e.target.value;
+                setProp((prop) => {
+                  prop.click_action = value;
+                });
+              }}
+            >
+              <option value="">None</option>
+              {options.triggerActions.map((f, ix) => (
+                <option key={ix} value={f}>
+                  {f}
+                </option>
+              ))}
+            </select>
+          </Fragment>
+        ) : null}
         <label>Hover color</label>
         <select
           value={hoverColor}

package/src/components/elements/DropMenu.js

@@ -8,7 +8,11 @@ import React, { Fragment, useState } from "react";
 import { Element, useNode } from "@craftjs/core";
 import { Column } from "./Column";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCaretDown,
+  faCaretSquareLeft,
+  faCaretSquareRight,
+} from "@fortawesome/free-solid-svg-icons";
 import {
   SettingsRow,
   BlockSetting,
@@ -36,6 +40,7 @@ const DropMenu = ({
   action_textcol,
   block,
   label,
+  menu_direction,
 }) => {
   const {
     selected,
@@ -72,7 +77,7 @@ const DropMenu = ({
       <div
         className={`dropdown-menu dropmenu-dropdown ${
           showDropdown ? "show" : ""
-        }`}
+        } ${menu_direction === "end" ? "dropdown-menu-end" : ""}`}
       >
         <div className="canvas d-flex flex-column">{children}</div>
       </div>
@@ -96,6 +101,7 @@ const DropMenuSettings = () => {
     action_bgcol: node.data.props.action_bgcol,
     action_bordercol: node.data.props.action_bordercol,
     action_textcol: node.data.props.action_textcol,
+    menu_direction: node.data.props.menu_direction,
   }));
   const {
     actions: { setProp },
@@ -118,12 +124,34 @@ const DropMenuSettings = () => {
           setProp={setProp}
           keyPrefix="action_"
           values={node}
+          allowRunOnLoad={false}
         />
         <tr>
           <td colSpan="2">
             <BlockSetting block={block} setProp={setProp} />
           </td>
         </tr>
+        <SettingsRow
+          field={{
+            label: "Drop direction",
+            name: "menu_direction",
+            type: "btn_select",
+            options: [
+              {
+                value: "end",
+                title: "End",
+                label: <FontAwesomeIcon icon={faCaretSquareLeft} />,
+              },
+              {
+                value: "start",
+                title: "Start",
+                label: <FontAwesomeIcon icon={faCaretSquareRight} />,
+              },
+            ],
+          }}
+          node={node}
+          setProp={setProp}
+        />
       </tbody>
     </table>
   );
@@ -151,6 +179,7 @@ DropMenu.craft = {
       "action_bgcol",
       "action_bordercol",
       "action_textcol",
+      "menu_direction",
     ],
   },
 };

package/src/components/elements/Link.js

@@ -281,6 +281,7 @@ const LinkSettings = () => {
             values={node}
             linkFirst={true}
             linkIsBlank={true}
+            allowRunOnLoad={false}
           />
         </tbody>
       </table>

package/src/components/elements/Tabs.js

@@ -185,6 +185,7 @@ const TabsSettings = () => {
     titles: node.data.props.titles,
     showif: node.data.props.showif,
     field: node.data.props.field,
+    acc_init_opens: node.data.props.acc_init_opens,
   }));
   const {
     actions: { setProp },
@@ -200,6 +201,7 @@ const TabsSettings = () => {
     tabId,
     showif,
     setting_tab_n,
+    acc_init_opens,
   } = node;
   const use_setting_tab_n = setting_tab_n || 0;
   const options = useContext(optionsCtx);
@@ -450,6 +452,29 @@ const TabsSettings = () => {
                 </tr>
               </Fragment>
             ) : null}
+            {tabsStyle === "Accordion" ? (
+              <tr>
+                <td colSpan="2">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      name="block"
+                      type="checkbox"
+                      checked={acc_init_opens?.[use_setting_tab_n] || false}
+                      onChange={(e) => {
+                        if (!e.target) return;
+                        const value = e.target.checked;
+                        setProp((prop) => {
+                          if (!prop.acc_init_opens) prop.acc_init_opens = [];
+                          prop.acc_init_opens[use_setting_tab_n] = value;
+                        });
+                      }}
+                    />
+                    <label className="form-check-label">Initially open</label>
+                  </div>
+                </td>
+              </tr>
+            ) : null}
           </Fragment>
         )}
       </tbody>
@@ -464,6 +489,7 @@ Tabs.craft = {
   props: {
     titles: ["Tab1", "Tab2"],
     showif: [],
+    acc_init_opens: [],
     ntabs: 2,
     tabsStyle: "Tabs",
     independent: false,

package/src/components/elements/View.js

@@ -339,7 +339,7 @@ const ViewSettings = () => {
             )}
         </Fragment>
       )}
-      {(state === "shared" || options.mode === "page") && (
+      {
         <Fragment>
           <label>
             Extra state Formula
@@ -357,7 +357,7 @@ const ViewSettings = () => {
             </small>
           ) : null}
         </Fragment>
-      )}
+      }
       {view ? (
         <a
           className="d-block mt-2"

package/src/components/elements/ViewLink.js

@@ -323,6 +323,7 @@ const ViewLinkSettings = () => {
             values={node}
             linkFirst={true}
             linkIsBlank={true}
+            allowRunOnLoad={false}
           />
         </tbody>
       </table>

package/src/components/elements/utils.js

@@ -1270,7 +1270,7 @@ const ButtonOrLinkSettingsRows = ({
           {!linkFirst ? (
             <option value={addBtnClass("btn-link")}>Link</option>
           ) : null}
-          {!linkFirst ? (
+          {!linkFirst && allowRunOnLoad ? (
             <option value="on_page_load">Run on Page Load</option>
           ) : null}
         </select>

package/src/components/storage.js

@@ -200,6 +200,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           minHeight={segment.minHeight}
           height={segment.height}
           width={segment.width}
+          click_action={segment.click_action}
           url={segment.url}
           hoverColor={segment.hoverColor}
           minHeightUnit={segment.minHeightUnit || "px"}
@@ -258,6 +259,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           independent={segment.independent}
           startClosed={segment.startClosed}
           deeplink={segment.deeplink}
+          acc_init_opens={segment.acc_init_opens}
           disable_inactive={segment.disable_inactive}
           serverRendered={segment.serverRendered}
           tabId={segment.tabId}
@@ -458,6 +460,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
           gradStartColor: node.props.gradStartColor,
           gradEndColor: node.props.gradEndColor,
           gradDirection: node.props.gradDirection,
+          click_action: node.props.click_action,
           rotate: node.props.rotate,
           style: node.props.style,
         };
@@ -535,6 +538,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         field: node.props.field,
         independent: node.props.independent,
         startClosed: node.props.startClosed,
+        acc_init_opens: node.props.acc_init_opens,
         deeplink: node.props.deeplink,
         disable_inactive: node.props.disable_inactive,
         serverRendered: node.props.serverRendered,