@saltcorn/server 1.6.0-alpha.8 → 1.6.0-beta.1

package/public/saltcorn-builder.css

@@ -110,6 +110,24 @@ div.toolbar-row:nth-child(1) {
   border-top: none;
 }
 
+div.wrap-builder-elem {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.dnd-poly-drag-image {
+  opacity: 0.5 !important;
+}
+
+.dnd-poly-drag-image.dnd-poly-snapback {
+  transition-property: transform, -webkit-transform !important;
+  transition-duration: 250ms !important;
+  transition-timing-function: ease-out !important;
+}
+
 div.wrap-builder-elem label {
   position: absolute;
   bottom: -1px;
@@ -123,7 +141,9 @@ div.wrap-builder-elem label {
 
 #builder-main-canvas {
   height: calc(100vh - 70px);
-  overflow-y: auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 #builder-main-canvas .is-text a {
@@ -155,6 +175,32 @@ div.wrap-builder-elem label {
   outline: 1px dashed #808080;
 }
 
+.kontainer > div {
+  display: inherit;
+  flex-wrap: inherit;
+  flex-direction: inherit;
+  gap: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  width: 100%;
+}
+.kontainer > div > .canvas {
+  display: inherit;
+  flex-wrap: inherit;
+  flex-direction: inherit;
+  gap: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+}
+
+#builder-main-canvas .builder-columns {
+  padding: 4px;
+  outline: 1px dashed transparent;
+}
+#builder-main-canvas .builder-columns:hover {
+  outline-color: #b0b0b0;
+}
+
 #builder-main-canvas div.root-canvas {
   margin-top: 1px;
   padding: 2px;
@@ -227,6 +273,9 @@ div.componets-and-library-accordion {
   max-height: calc(45vh - 50px);
   overflow-y: scroll;
 }
+.layer-name h2 {
+  margin-bottom: 0px;
+}
 
 .builder-library .dropdown {
   overflow: visible;
@@ -745,9 +794,58 @@ body.builder-dark .builder-select__menu-notice,
 }
 
 /* Ensure selected nodes maintain visibility */
-.builder-layer-node.selected-node {
-  outline: 1px dashed #2680eb; /* Example: blue dashed outline */
-  outline-offset: -2px;
+.builder-layer-node.selected {
+  background-color: #cce5ff;
+  border-left: 3px solid #2680eb;
+}
+
+.builder-dark-panel .builder-layer-node.selected,
+[data-bs-theme="dark"] .builder-layer-node.selected {
+  background-color: #1a3a5c;
+  border-left: 3px solid #4da3ff;
+}
+
+.builder-layers .craft-layer-node > div {
+  font-size: 13px;
+  background: transparent !important;
+}
+
+.builder-layers .craft-layer-node > div > div:first-child:hover {
+  background-color: #e0e0e0;
+}
+.builder-dark-panel .builder-layers .craft-layer-node > div > div:first-child:hover,
+[data-bs-theme="dark"] .builder-layers .craft-layer-node > div > div:first-child:hover {
+  background-color: #343a40;
+}
+
+.builder-layers .craft-layer-node > div > div > div:first-child {
+  /* display: none; */
+  /* padding-left:2px; */
+}
+
+.craft-layer-node > div > div {
+  padding-left:2px;
+}
+
+.builder-layers .craft-layer-node > div > div .inner {
+  flex: 1;
+}
+
+.builder-layers .craft-layer-node > div > div .layer-name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.builder-dark-panel .builder-layers .craft-layer-node > div,
+[data-bs-theme="dark"] .builder-layers .craft-layer-node > div {
+  color: #f8f9fa;
+}
+
+.builder-dark-panel .builder-layers .craft-layer-node > div > div svg,
+[data-bs-theme="dark"] .builder-layers .craft-layer-node > div > div svg {
+  fill: #f8f9fa;
 }
 
 .code-modal {
@@ -756,4 +854,32 @@ body.builder-dark .builder-select__menu-notice,
 
 .code-modal-form {
   min-height: 70vh;
-}
+}
+
+.device-preview-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  gap: 4px;
+  padding: 5px 0;
+  flex-shrink: 0;
+}
+
+.device-preview-btn {
+}
+
+.device-preview-scroll-area {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.device-preview-canvas-wrapper {
+  transition: max-width 0.3s ease;
+  margin: 0 auto;
+}
+
+.device-preview-constrained {
+  border-left: 1px dashed #adb5bd;
+  border-right: 1px dashed #adb5bd;
+}
+

package/public/saltcorn-common.js

@@ -1105,6 +1105,96 @@ function validate_expression_elem(targetOrVal, ref = null) {
   }
 }
 
+/**
+ * Like validate_expression_elem but also checks the expression returns a boolean.
+ * @param {any|string} targetOrVal either the target or the string to validate
+ * @param {any} ref the target when targetOrVal is a string (see builder/MonacoEditor)
+ */
+function validate_bool_expression_elem(targetOrVal, ref = null) {
+  let val = null;
+  let target = null;
+  if (typeof targetOrVal === "string") {
+    val = targetOrVal;
+    target = $(ref);
+  } else {
+    target = targetOrVal;
+    val = target.val();
+  }
+
+  const next = target.next();
+  if (next.hasClass("expr-error")) next.remove();
+  if (!val) return;
+  try {
+    const AsyncFunction = Object.getPrototypeOf(
+      async function () {}
+    ).constructor;
+    AsyncFunction("return " + val);
+  } catch (error) {
+    target.after(`<small class="text-danger font-monospace d-block expr-error">
+    ${error.message}
+  </small>`);
+    return;
+  }
+  // For constant expressions (no runtime variables), check the result is boolean
+  try {
+    const result = Function("return " + val)();
+    if (typeof result !== "boolean") {
+      target.after(`<small class="text-danger font-monospace d-block expr-error">
+    Expression must return a boolean
+  </small>`);
+    }
+  } catch (e) {
+    // Expression uses runtime variables — skip bool type check
+  }
+}
+
+/**
+ * Like validate_expression_elem but also checks the expression returns a plain object.
+ * @param {any|string} targetOrVal either the target or the string to validate
+ * @param {any} ref the target when targetOrVal is a string (see builder/MonacoEditor)
+ */
+function validate_object_expression_elem(targetOrVal, ref = null) {
+  let val = null;
+  let target = null;
+  if (typeof targetOrVal === "string") {
+    val = targetOrVal;
+    target = $(ref);
+  } else {
+    target = targetOrVal;
+    val = target.val();
+  }
+
+  const next = target.next();
+  if (next.hasClass("expr-error")) next.remove();
+  if (!val) return;
+  try {
+    const AsyncFunction = Object.getPrototypeOf(
+      async function () {}
+    ).constructor;
+    AsyncFunction("return " + val);
+  } catch (error) {
+    target.after(`<small class="text-danger font-monospace d-block expr-error">
+    ${error.message}
+  </small>`);
+    return;
+  }
+  // For constant expressions (no runtime variables), check the result is a plain object
+  try {
+    const result = Function("return " + val)();
+    if (
+      typeof result !== "object" ||
+      result === null ||
+      Array.isArray(result)
+    ) {
+      target.after(`<small class="text-danger font-monospace d-block expr-error">
+    Expression must return an object
+  </small>`);
+    }
+  } catch (e) {
+    // Expression uses runtime variables — skip object type check
+  }
+}
+
 function initialize_page() {
   if (window._sc_locale && window.dayjs) dayjs.locale(window._sc_locale);
   const isNode = getIsNode();
@@ -1563,31 +1653,69 @@ ${value}`;
           });
         editor.onDidChangeModelContent(
           $.debounce(
-            function (e) {
+            async function (e) {
               const txtval = editor.getValue();
+              const dispatchNativeEvents = () => {
+                if (!el || typeof el.dispatchEvent !== "function") return;
+                ["input", "change"].forEach((eventName) => {
+                  try {
+                    el.dispatchEvent(
+                      new Event(eventName, {
+                        bubbles: true,
+                        cancelable: true,
+                      })
+                    );
+                  } catch (err) {
+                    const fallbackEvt = document.createEvent("Event");
+                    fallbackEvt.initEvent(eventName, true, true);
+                    el.dispatchEvent(fallbackEvt);
+                  }
+                });
+              };
               if ($(el).hasClass("validate-statements")) {
-                try {
-                  let AsyncFunction = Object.getPrototypeOf(
-                    async function () {}
-                  ).constructor;
-                  AsyncFunction(txtval);
-                  $(el).val(txtval);
-                  $(el).trigger("change");
-                } catch (e) {
+                const doStrip = $(el).hasClass("strip-types");
+                const mkError = (errMsg) => {
                   const form = $(el).closest("form");
                   const errorArea = form.parent().find(".full-form-error");
-                  if (errorArea.length) errorArea.text(e.message);
+                  if (errorArea.length) errorArea.text(errMsg);
                   else
                     form
                       .parent()
                       .append(
-                        `<p class="text-danger full-form-error">${e.message}</p>`
+                        `<p class="text-danger full-form-error">${errMsg}</p>`
                       );
-                  return;
-                }
+                };
+                const clientValidator = (txtval1) => {
+                  try {
+                    let AsyncFunction = Object.getPrototypeOf(
+                      async function () {}
+                    ).constructor;
+                    AsyncFunction(txtval1);
+                    $(el).val(txtval);
+                    $(el).trigger("change");
+                    dispatchNativeEvents();
+                  } catch (e) {
+                    mkError(e.message);
+                    return;
+                  }
+                };
+                if (doStrip) {
+                  const res = await fetch("/admin/strip-types", {
+                    method: "POST",
+                    body: JSON.stringify({ code: txtval }),
+                    headers: {
+                      "Content-Type": "application/json",
+                      "CSRF-Token": _sc_globalCsrf,
+                    },
+                  });
+                  const jres = await res.json();
+                  if (jres.error) mkError(jres.error);
+                  else clientValidator(jres.code);
+                } else clientValidator(txtval);
               } else {
                 $(el).val(txtval);
                 $(el).trigger("change");
+                dispatchNativeEvents();
               }
             },
             500,
@@ -1664,6 +1792,15 @@ ${value}`;
         });
       }
     });
+    if (window.mermaid) {
+      $(e.target)
+        .find(".mermaid[mm-src]")
+        .each(function () {
+          $(this).html($(this).attr("mm-src"));
+        })
+        .removeAttr("data-processed");
+      mermaid.init(undefined, $(e.target).find(".mermaid"));
+    }
   };
   $(".lazy-accoordion").on("show.bs.collapse", lazyAccHandler);
   $(".lazy-tabs").on("show.bs.tab", function (e) {
@@ -1677,6 +1814,28 @@ ${value}`;
     $elem.removeClass("file-has-existing");
     $elem.parent().find("span.file-upload-exising").remove();
   });
+  if (window._sc_is_admin) {
+    $("[data-sc-embed-viewname]").each(function () {
+      const $this = $(this);
+      const viewname = $this.attr("data-sc-embed-viewname");
+      const outermost = !$this.parents("[data-sc-embed-viewname]").length;
+      const in_modal = $this.parents("#scmodal").length;
+      if ((outermost && !in_modal) || $this.parents("#saltcorn-builder").length)
+        return;
+      const url = `/viewedit/config/${viewname}`;
+
+      $(this).popover({
+        html: true,
+        content: `<a href="${url}" target="_blank">Configure ${viewname}<i class="ms-2 fas fa-external-link-alt"></i></a>`,
+        trigger: "hover",
+        placement: "auto",
+        delay: { show: 0, hide: 250 },
+        container: this,
+        offset: "0, 0",
+      });
+      $this.addClass("admin-cfglink-popover");
+    });
+  }
 } //initialize_page
 
 $(initialize_page);
@@ -2094,6 +2253,7 @@ function buildToast(txt, type, spin, title, set_id) {
     <div 
       class="toast show"
       id="${rndid}"
+      toast-title="${escapeHtml(title || "")}"
       rendered="client-side",
       role="alert"
       aria-live="assertive"

package/public/saltcorn.css

@@ -1,3 +1,27 @@
+
+.admin-cfglink-popover .popover {
+  background-color: #5f9eec;
+  border: none;
+  border-radius: 1px;
+  padding: 4px 10px;
+  min-width: auto;
+  margin: 0;
+}
+
+.admin-cfglink-popover .popover .popover-body {
+  padding: 0;
+}
+
+.admin-cfglink-popover .popover .popover-body a {
+  color: #ffffff;
+  text-decoration: underline;
+}
+
+.admin-cfglink-popover .popover .arrow,
+.admin-cfglink-popover .popover .popover-arrow {
+  display: none !important;
+}
+
 .table-valign-middle > tbody > tr > td,
 .table-valign-middle > thead > tr > th {
   vertical-align: middle;
@@ -1005,4 +1029,54 @@ input[type="file"].file-has-existing {
   overflow: auto;
   display: flex;
   flex-direction: column-reverse;
-}
+}
+
+span.copy-to-clipboard {
+  position: relative;
+  cursor: pointer;
+}
+
+span.copy-to-clipboard::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 2em;
+  background: linear-gradient(to right, transparent, #fff);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+span.copy-to-clipboard:hover::before {
+  opacity: 1;
+}
+
+span.copy-to-clipboard::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.9em;
+  line-height: 1;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+span.copy-to-clipboard:hover::after {
+  content: "📋";
+  opacity: 1;
+}
+
+span.copy-to-clipboard.copied::before {
+  opacity: 1;
+}
+
+span.copy-to-clipboard.copied::after {
+  content: "✔";
+  color: #2a9d5c;
+  opacity: 1;
+}

package/public/saltcorn.js

@@ -620,6 +620,7 @@ function saveAndContinue(e, k, event) {
     },
     data: form_data,
     success: function (res) {
+      $(`[toast-title="Save error"]`).removeClass("show");
       ajax_indicator(false);
       form.removeAttr("data-unsaved-changes");
       form.parent().find(".full-form-error").text("");
@@ -637,7 +638,11 @@ function saveAndContinue(e, k, event) {
       var ct = request.getResponseHeader("content-type") || "";
       if (checkNetworkError(request)) {
       } else if (ct.startsWith && ct.startsWith("application/json")) {
-        notifyAlert({ type: "danger", text: request.responseJSON.error });
+        notifyAlert({
+          type: "danger",
+          text: request.responseJSON.error,
+          toast_title: "Save error",
+        });
       } else {
         $("#page-inner-content").html(request.responseText);
         initialize_page();
@@ -1229,7 +1234,7 @@ function check_ios_build_deps() {
   $.ajax("/admin/mobile-app/check-ios-build-tools", {
     type: "GET",
     success: function (res) {
-      const { xcodebuild, cocoapods, isMac } = res;
+      const { xcodebuild, cocoapods, iosRuntime, isMac } = res;
       if (isMac) {
         // update xcodebuild status
         if (xcodebuild.installed) {
@@ -1260,6 +1265,17 @@ function check_ios_build_deps() {
             `not available<i class="p-2 fas fa-times text-danger"></i>`
           );
         }
+
+        // update iOS runtime status
+        if (iosRuntime && iosRuntime.available) {
+          $("#iosRuntimeStatusId").html(
+            `${iosRuntime.version}<i class="p-2 fas fa-check text-success"></i>`
+          );
+        } else {
+          $("#iosRuntimeStatusId").html(
+            `not available<i class="p-2 fas fa-times text-danger"></i>`
+          );
+        }
       }
     },
   });
@@ -1561,6 +1577,18 @@ function cfu_translate(that) {
   }
 }
 
+$(document).on("click", "span.copy-to-clipboard", function () {
+  var $el = $(this);
+  var text = $el.text().trim();
+
+  navigator.clipboard.writeText(text).then(function () {
+    $el.addClass("copied");
+    setTimeout(function () {
+      $el.removeClass("copied");
+    }, 1000);
+  });
+});
+
 function ensure_script_loaded(src, callback) {
   //https://stackoverflow.com/questions/26331600/load-js-script-only-when-it-has-not-been-loaded-already-and-then-only-once
   let scripts = Array.from(document.querySelectorAll("script")).map(
@@ -1668,14 +1696,14 @@ function ensure_css_loaded(src) {
         l = function (a, b) {
           d = setTimeout(function () {
             d = !1;
-            if (h || c) e.apply(a, b), c && (j = +new Date());
+            if (h || c) (e.apply(a, b), c && (j = +new Date()));
             i && g.apply(a, b);
           }, f);
         },
         k = function () {
           if (!d || a) {
             if (!d && !h && (!c || +new Date() - j > f))
-              e.apply(this, arguments), c && (j = +new Date());
+              (e.apply(this, arguments), c && (j = +new Date()));
             (a || !c) && clearTimeout(d);
             l(this, arguments);
           }