@saltcorn/builder 0.8.8-beta.1 → 0.8.8-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.8.8-beta.1",
+  "version": "0.8.8-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/Toolbox.js

@@ -625,6 +625,7 @@ const ToolboxFilter = () => {
       </div>
       <div className="toolbar-row">
         <TableElem connectors={connectors} />
+        <DropMenuElem connectors={connectors} />
       </div>
     </Fragment>
   );
@@ -676,6 +677,7 @@ const ToolboxEdit = () => {
       </div>
       <div className="toolbar-row">
         <TableElem connectors={connectors} />
+        <ViewLinkElem connectors={connectors} options={options} />
       </div>
     </Fragment>
   );

package/src/components/elements/DropDownFilter.js

@@ -30,9 +30,13 @@ const DropDownFilter = ({ name, block, full_width }) => {
       {...blockProps(block)}
       ref={(dom) => connect(drag(dom))}
     >
-      <select disabled={true} className={full_width ? "w-100" : ""}>
-        <option>{name}</option>
-      </select>
+      <input
+        readOnly
+        value={name}
+        className={`${
+          full_width ? "w-100" : "w-unset"
+        } form-control form-select ${!block ? "d-inline" : ""}`}
+      />
     </span>
   );
 };

package/src/components/elements/SearchBar.js

@@ -48,7 +48,7 @@ const SearchBar = ({ has_dropdown, children, show_badges }) => {
         type="text"
         className="form-control bg-light"
         placeholder="Search..."
-        disabled
+        readOnly={true}
       />
 
       {show_badges && (

package/src/components/elements/Tabs.js

@@ -44,7 +44,10 @@ const Tabs = ({
   );
   if (tabsStyle === "Accordion")
     return (
-      <div className="accordion">
+      <div
+        className={`accordion ${selected ? "selected-node" : ""}`}
+        ref={(dom) => connect(drag(dom))}
+      >
         {ntimes(ntabs, (ix) => (
           <div key={ix} className="card">
             <div className="card-header">
@@ -173,6 +176,8 @@ const TabsSettings = () => {
     independent: node.data.props.independent,
     startClosed: node.data.props.startClosed,
     deeplink: node.data.props.deeplink,
+    serverRendered: node.data.props.serverRendered,
+    tabId: node.data.props.tabId,
     titles: node.data.props.titles,
     field: node.data.props.field,
   }));
@@ -185,6 +190,8 @@ const TabsSettings = () => {
     startClosed,
     ntabs,
     field,
+    serverRendered,
+    tabId,
   } = node;
   const options = useContext(optionsCtx);
   useEffect(() => {
@@ -306,20 +313,53 @@ const TabsSettings = () => {
                 </td>
               </tr>
             ) : (
-              <tr>
-                <td colSpan="2">
-                  <div className="form-check">
-                    <input
-                      className="form-check-input"
-                      name="block"
-                      type="checkbox"
-                      checked={deeplink}
-                      onChange={setAProp("deeplink", { checked: true })}
-                    />
-                    <label className="form-check-label">Deep link</label>
-                  </div>
-                </td>
-              </tr>
+              <Fragment>
+                <tr>
+                  <td colSpan="2">
+                    <div className="form-check">
+                      <input
+                        className="form-check-input"
+                        name="block"
+                        type="checkbox"
+                        checked={deeplink}
+                        onChange={setAProp("deeplink", { checked: true })}
+                      />
+                      <label className="form-check-label">Deep link</label>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td colSpan="2">
+                    <div className="form-check">
+                      <input
+                        className="form-check-input"
+                        name="block"
+                        type="checkbox"
+                        checked={serverRendered}
+                        onChange={setAProp("serverRendered", { checked: true })}
+                      />
+                      <label className="form-check-label">
+                        Server rendering
+                      </label>
+                    </div>
+                  </td>
+                </tr>
+                {serverRendered ? (
+                  <tr>
+                    <th>
+                      <label>Identifier</label>
+                    </th>
+                    <td>
+                      <input
+                        type="text"
+                        className="form-control"
+                        value={tabId}
+                        onChange={setAProp("tabId")}
+                      />
+                    </td>
+                  </tr>
+                ) : null}
+              </Fragment>
             )}
             {tabsStyle === "Accordion" ? (
               <tr>
@@ -357,6 +397,8 @@ Tabs.craft = {
     independent: false,
     startClosed: false,
     deeplink: true,
+    serverRendered: false,
+    tabId: "",
   },
   displayName: "Tabs",
   related: {

package/src/components/elements/utils.js

@@ -421,7 +421,7 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
         .attr("onclick", "return false");
 
       //.attr("disabled", true);
-      $(".preview-scratchpad").find("textarea").attr("disabled", true);
+      $(".preview-scratchpad").find("textarea").attr("readonly", true);
       $(".preview-scratchpad .full-page-width").removeClass("full-page-width");
       if (isView) {
         $(".preview-scratchpad").find("input").attr("readonly", true);
@@ -1436,8 +1436,9 @@ export const buildOptions = (
   options,
   { valAttr, keyAttr, capitalize } = {}
 ) => {
-  return options.map((option) => (
+  return options.map((option, ix) => (
     <option
+      key={ix}
       {...(valAttr ? { value: option } : {})}
       {...(keyAttr ? { key: option } : {})}
     >
@@ -1453,7 +1454,9 @@ export const buildBootstrapOptions = (values) => {
     lg: "large",
     xl: "x-large",
   };
-  return values.map((option) => (
-    <option value={option}>{mappings[option]}</option>
+  return values.map((option, ix) => (
+    <option key={ix} value={option}>
+      {mappings[option]}
+    </option>
   ));
 };

package/src/components/storage.js

@@ -248,6 +248,8 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           independent={segment.independent}
           startClosed={segment.startClosed}
           deeplink={segment.deeplink}
+          serverRendered={segment.serverRendered}
+          tabId={segment.tabId}
           field={segment.field}
           tabsStyle={segment.tabsStyle}
           contents={contents}
@@ -507,6 +509,8 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         independent: node.props.independent,
         startClosed: node.props.startClosed,
         deeplink: node.props.deeplink,
+        serverRendered: node.props.serverRendered,
+        tabId: node.props.tabId,
         ntabs: node.props.ntabs,
       };
     }