@saltcorn/markup - npm Package Compare versions

Comparing version 0.7.2-beta.0 to 0.7.2-beta.2

dist/form.js

@@ -12,2 +12,3 @@ "use strict";
 const abstract_field_1 = require("@saltcorn/types/model-abstracts/abstract_field");
+const isNode = typeof window === "undefined";
 /**
@@ -18,2 +19,3 @@ * @param {string} s
 const rmInitialDot = (s) => s && s[0] === "." ? s.replace(".", "") : s;
+const buildActionAttribute = (form) => isNode && !form.req?.smr ? form.action : "javascript:void(0)";
 /**
@@ -173,2 +175,8 @@ * @param {object} sIf
 };
+const repeater_icons = div({ class: "float-end" }, span({ onclick: "rep_up(this)" }, i({ class: "fa fa-arrow-up pull-right" })), " ", span({ onclick: "rep_del(this)" }, i({ class: "fa fa-times pull-right" })), " ", span({ onclick: "rep_down(this)" }, i({ class: "fa fa-arrow-down pull-right" })));
+const repeater_adder = (form_name) => a({
+    class: "btn btn-sm btn-outline-primary mb-3",
+    href: `javascript:add_repeater('${form_name}')`,
+    title: "Add",
+}, i({ class: "fas fa-plus" }));
 /**
@@ -183,8 +191,3 @@ * @param {object[]} v
 const mkFormRowForRepeat = (v, errors, formStyle, labelCols, hdr) => {
-    const adder = a({
-        class: "btn btn-sm btn-outline-primary mb-3",
-        href: `javascript:add_repeater('${hdr.form_name}')`,
-        title: "Add",
-    }, i({ class: "fas fa-plus" }));
-    const icons = div({ class: "float-end" }, span({ onclick: "rep_up(this)" }, i({ class: "fa fa-arrow-up pull-right" })), " ", span({ onclick: "rep_del(this)" }, i({ class: "fa fa-times pull-right" })), " ", span({ onclick: "rep_down(this)" }, i({ class: "fa fa-arrow-down pull-right" })));
+    const adder = repeater_adder(hdr.form_name);
     if (Array.isArray(v[hdr.form_name]) && v[hdr.form_name].length > 0) {
@@ -198,3 +201,3 @@ return div(hdr.showIf
         }, v[hdr.form_name].map((vi, ix) => {
-            return div({ class: `form-repeat form-namespace repeat-${hdr.form_name}` }, icons, hdr.fields.map((f) => {
+            return div({ class: `form-repeat form-namespace repeat-${hdr.form_name}` }, repeater_icons, hdr.fields.map((f) => {
                 return mkFormRowForField(vi, errors, formStyle, labelCols, "_" + ix)(f);
@@ -211,3 +214,3 @@ }));
             class: `repeats-${hdr.form_name}`,
-        }, div({ class: `form-repeat form-namespace repeat-${hdr.form_name}` }, icons, hdr.fields.map((f) => {
+        }, div({ class: `form-repeat form-namespace repeat-${hdr.form_name}` }, repeater_icons, hdr.fields.map((f) => {
             return mkFormRowForField(v, errors, formStyle, labelCols, "_0")(f);
@@ -295,4 +298,32 @@ }))), adder);
         },
+        field_repeat({ field_repeat }, go) {
+            const hdr = field_repeat;
+            return div(hdr.showIf
+                ? {
+                    "data-show-if": mkShowIf(hdr.showIf),
+                }
+                : {}, div({
+                class: `repeats-${hdr.form_name}`,
+            }, field_repeat.metadata?.rows && field_repeat.metadata?.rows.length > 0
+                ? field_repeat.metadata.rows.map((row, ix) => {
+                    field_repeat.metadata.current_row = row;
+                    field_repeat.metadata.current_ix = ix;
+                    return div({
+                        class: `form-repeat form-namespace repeat-${hdr.form_name}`,
+                    }, repeater_icons, go(field_repeat.layout), field_repeat.fields
+                        .filter((f) => f.input_type === "hidden" && f.name)
+                        .map((f) => innerField(row, [], `_${ix}`)(f)));
+                })
+                : div({ class: `form-repeat form-namespace repeat-${hdr.form_name}` }, repeater_icons, go(field_repeat.layout))), repeater_adder(hdr.form_name));
+            //mkFormRowForRepeat({}, [], "", 3, field_repeat)
+        },
         field(segment) {
-            const field0 = form.fields.find((f) => f.name === segment.field_name);
+            const [repeat_name, field_name] = segment.field_name.split(".");
+            const in_repeat = !!field_name;
+            const field0 = segment.field_name.includes(".")
+                ? form.fields.find((f) => f.name === repeat_name)?.fields.find((f) => f.name === field_name)
+                : form.fields.find((f) => f.name === segment.field_name);
+            const repeater = in_repeat
+                ? form.fields.find((f) => f.name === repeat_name)
+                : null;
             const field = { ...field0 };
@@ -310,3 +341,7 @@ if ((0, abstract_field_1.instanceOfField)(field) && field.input_type !== "hidden") {
                 field.attributes = { ...field.attributes, ...segment.configuration };
-                return innerField(form.values, form.errors)(field) + errorFeedback;
+                return (innerField(in_repeat
+                    ? repeater?.metadata?.current_row || {}
+                    : form.values, form.errors, in_repeat
+                    ? `_${repeater?.metadata?.current_ix || 0}`
+                    : undefined)(field) + errorFeedback);
             }
@@ -317,5 +352,7 @@ else
         action({ action_name, action_label, action_url, confirm, action_style, action_size, action_icon, configuration, action_bgcol, action_bordercol, action_textcol, }) {
+            const isMobile = !isNode || form.req?.smr;
             let style = action_style === "btn-custom-color"
                 ? `background-color: ${action_bgcol || "#000000"};border-color: ${action_bordercol || "#000000"}; color: ${action_textcol || "#000000"}`
                 : null;
+            const confirmStr = confirm ? `if(confirm('${"Are you sure?"}'))` : "";
             if (action_name && action_name.startsWith("Login with ")) {
@@ -339,3 +376,8 @@ const method_label = action_name.replace("Login with ", "");
                     const dest = (configuration && configuration.after_delete_url) || "/";
-                    return mkBtn(`onClick="ajax_post('${action_url}', {success:()=>window.location.href='${dest}'})" type="button"`);
+                    if (isNode && !form.req?.smr) {
+                        return mkBtn(`onClick="${confirmStr}ajax_post('${action_url}', {success:()=>window.location.href='${dest}'})" type="button"`);
+                    }
+                    else {
+                        return mkBtn(`onClick="${confirmStr}local_post('${action_url}', {after_delete_url:'${dest}'})" type="button"`);
+                    }
                 }
@@ -346,11 +388,18 @@ else
             if (action_name === "Reset") {
-                return mkBtn(`onClick="$(this).closest('form').trigger('reset')" type="button"`);
+                return mkBtn(`onClick="${confirmStr}$(this).closest('form').trigger('reset')" type="button"`);
             }
             if (action_name === "GoBack") {
+                const isWeb = isNode && !form.req?.smr;
                 const reload = configuration.reload_after ? "reload_on_init();" : "";
-                const doNav = !configuration.steps || configuration.steps !== 1
-                    ? "history.back()"
-                    : `history.go(${-1 * configuration.steps})`;
-                if (configuration.save_first)
-                    return mkBtn(`onClick="${reload}saveAndContinue(this,()=>${doNav})" type="button"`);
+                const doNav = !configuration.steps || configuration.steps === 1
+                    ? isWeb
+                        ? "history.back()"
+                        : "parent.goBack()"
+                    : isWeb
+                        ? `history.go(${-1 * configuration.steps})`
+                        : `parent.goBack(${configuration.steps})`;
+                if (configuration.save_first) {
+                    const complete = `()=>${doNav}`;
+                    return mkBtn(`onClick="${reload}saveAndContinue(this,${isMobile ? `'${form.action}', ${complete}` : complete})" type="button"`);
+                }
                 else
@@ -360,3 +409,3 @@ return mkBtn(`onClick="${reload}${doNav}" type="button"`);
             if (action_name === "SaveAndContinue") {
-                return (mkBtn('onClick="saveAndContinue(this)" type="button"') +
+                return (mkBtn(`onClick="saveAndContinue(this,${isMobile ? `'${form.action}'` : undefined})" type="button"`) +
                     script(
@@ -369,3 +418,3 @@ // cant use currentScript in callback
                 e.preventDefault();
-                saveAndContinue(myScript);
+                saveAndContinue(myScript,${isMobile ? `'${form.action}'` : undefined});
                 return false;
@@ -376,6 +425,9 @@ }
             }
-            const submitAttr = form.xhrSubmit
-                ? 'onClick="ajaxSubmitForm(this)" type="button"'
-                : 'type="submit"';
-            return mkBtn(submitAttr);
+            if (isNode && !form.req?.smr) {
+                const submitAttr = form.xhrSubmit
+                    ? 'onClick="ajaxSubmitForm(this)" type="button"'
+                    : 'type="submit"';
+                return mkBtn(submitAttr);
+            }
+            return mkBtn('type="submit"');
         },
@@ -434,3 +486,3 @@ };
     const csrfField = `<input type="hidden" name="_csrf" value="${csrfToken}">`;
-    const top = `<form action="${form.action}"${form.onChange ? ` onchange="${form.onChange}"` : ""} class="form-namespace ${form.class || ""}" method="${form.methodGET ? "get" : "post"}"${hasFile ? ' encType="multipart/form-data"' : ""}>`;
+    const top = `<form action="${buildActionAttribute(form)}"${form.onSubmit ? ` onsubmit="${form.onSubmit}" ` : ""}${form.onChange ? ` onchange="${form.onChange}"` : ""} class="form-namespace ${form.class || ""}" method="${form.methodGET ? "get" : "post"}"${hasFile ? ' encType="multipart/form-data"' : ""}>`;
     const blurbp = form.blurb
@@ -479,3 +531,3 @@ ? Array.isArray(form.blurb)
         : `<input type="hidden" name="_csrf" value="${csrfToken}">`;
-    const top = `<form ${form.id ? `id="${form.id}" ` : ""}action="${form.action}" ${form.onChange ? ` onchange="${form.onChange}"` : ""}class="form-namespace ${form.isStateForm ? "stateForm" : ""} ${form.class || ""}" method="${form.methodGET ? "get" : "post"}"${hasFile ? ' encType="multipart/form-data"' : ""}>`;
+    const top = `<form ${form.id ? `id="${form.id}" ` : ""}action="${buildActionAttribute(form)}"${form.onSubmit ? ` onsubmit="${form.onSubmit}"` : ""} ${form.onChange ? ` onchange="${form.onChange}"` : ""}class="form-namespace ${form.isStateForm ? "stateForm" : ""} ${form.class || ""}" method="${form.methodGET ? "get" : "post"}"${hasFile ? ' encType="multipart/form-data"' : ""}>`;
     //console.log(form.fields);
@@ -482,0 +534,0 @@ const flds = form.fields

dist/index.d.ts

@@ -15,4 +15,7 @@ import mkTable = require("./table");
     localeDateTime: (date: Date, options?: any) => string;
+    div: any;
+    a: any;
+    i: any;
 };
 export = _default;
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -11,3 +11,3 @@ "use strict";
 const tags = require("./tags");
-const { a, text, div, button, time } = tags;
+const { a, text, div, button, time, i } = tags;
 /**
@@ -19,2 +19,9 @@ * @param {string} href
 const link = (href, s) => a({ href: text(href) }, text(s));
+const buildButtonCallback = (reload_on_done, reload_delay) => {
+    const isNode = typeof window === "undefined";
+    if (isNode)
+        return `ajax_post_btn(this, ${reload_on_done}, ${reload_delay})`;
+    else
+        return "local_post_btn(this)";
+};
 /**
@@ -45,5 +52,5 @@ * @param href
     : ajax && confirm
-        ? `onclick="if(confirm('${req.__("Are you sure?")}')) {${spinner ? "press_store_button(this);" : ""}ajax_post_btn(this, ${reload_on_done}, ${reload_delay})}"`
+        ? `onclick="if(confirm('${req.__("Are you sure?")}')) {${spinner ? "press_store_button(this);" : ""}${buildButtonCallback(reload_on_done, reload_delay)}}"`
         : ajax
-            ? `onclick="${spinner ? "press_store_button(this);" : ""}ajax_post_btn(this, ${reload_on_done}, ${reload_delay})"`
+            ? `onclick="${spinner ? "press_store_button(this);" : ""}${buildButtonCallback(reload_on_done, reload_delay)}"`
             : confirm
@@ -146,3 +153,6 @@ ? `onclick="return confirm('${req.__("Are you sure?")}')"`
     localeDateTime,
+    div,
+    a,
+    i,
 };
 //# sourceMappingURL=index.js.map

dist/layout.js

@@ -233,3 +233,5 @@ "use strict";
                 href: segment.in_modal
-                    ? `javascript:ajax_modal('${segment.url}');`
+                    ? typeof window === "undefined" ?
+                        `javascript:ajax_modal('${segment.url}');` :
+                        `javascript:mobile_modal('${segment.url}');`
                     : segment.url,
@@ -236,0 +238,0 @@ class: [segment.link_style || "", segment.link_size || ""],

package.json

 {
   "name": "@saltcorn/markup",
-  "version": "0.7.2-beta.0",
+  "version": "0.7.2-beta.2",
   "description": "Markup for Saltcorn, open-source no-code platform",
@@ -10,3 +10,4 @@ "homepage": "https://saltcorn.com",
     "tsc": "tsc -p tsconfig.json",
-    "clean": "rm -rf ./dist/*"
+    "clean": "rm -rf ./dist/*",
+    "build": "webpack --mode development"
   },
@@ -36,3 +37,3 @@ "author": "Tom Nielsen",
   "devDependencies": {
-    "@saltcorn/types": "0.7.2-beta.0",
+    "@saltcorn/types": "0.7.2-beta.2",
     "@types/escape-html": "^1.0.1",
@@ -43,3 +44,5 @@ "@types/jest": "^27.0.3",
     "ts-jest": "^27.1.0",
-    "typescript": "^4.4.4"
+    "typescript": "^4.4.4",
+    "webpack": "5.68.0",
+    "webpack-cli": "4.9.2"
   },
@@ -46,0 +49,0 @@ "jest": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

304536

increased by47.71%

Number of package files

70

increased by27.27%

Lines of code

3264

increased by35.21%

Worsened metrics

Dev dependency count

9

increased by28.57%

No dependency changes