ui/src/fields/json/settings.js - master - githubmirror/pocketbase

ui/src/fields/json/settings.js
142 строки7 KB
Gani Georgiev
prevent resetting number inputs with leading 0 while still typing
17 июл 2026, 22:00
17 июл 2026, 22:0009af56b
// {
//     originalCollection: undefined,
//     collection: undefined,
//     field
//     get fieldIndex: int/-1,
//     get originalField: undefined
// }
export function settings(props) {
    const uniqueId = "f_" + app.utils.randomString();

    const local = store({
        showInfo: false,
    });

    return app.components.fieldSettings(props, {
        content: () =>
            t.div(
                { className: "grid sm" },
                t.div(
                    { className: "col-sm-12" },
                    t.div(
                        { className: "field" },
                        t.label(
                            { htmlFor: uniqueId + ".maxSize" },
                            t.span(null, "Max size "),
                            t.small(null, "(bytes)"),
                        ),
                        t.input({
                            type: "number",
                            id: uniqueId + ".maxSize",
                            name: () => `fields.${props.fieldIndex}.maxSize`,
                            min: 0,
                            step: 1,
                            max: Number.MAX_SAFE_INTEGER,
                            placeholder: "Default to max ~1MB",
                            value: () => props.field.maxSize || "",
                            oninput: (e) => {
                                // temp skip invalid numbers with leading 0 while typing to avoid reseting the entire input
                                // (always normalized in onchange)
                                if (e.target.value?.length > 1 && e.target.value[0] == "0") {
                                    return;
                                }

                                props.field.maxSize = parseInt(e.target.value, 10);
                            },
                            onchange: (e) => {
                                props.field.maxSize = null; // reset reactivity
                                props.field.maxSize = parseInt(e.target.value, 10);
                            },
                        }),
                    ),
                ),
                t.div(
                    { className: "col-sm-12" },
                    t.div(
                        { className: "field" },
                        t.label({ htmlFor: uniqueId + ".help" }, "Help text"),
                        t.input({
                            type: "text",
                            id: uniqueId + ".help",
                            name: () => `fields.${props.fieldIndex}.help`,
                            value: () => props.field.help || "",
                            oninput: (e) => (props.field.help = e.target.value),
                        }),
                    ),
                ),
                t.div(
                    { className: "col-sm-12" },
                    t.button(
                        {
                            type: "button",
                            className: () => `btn sm secondary ${local.showInfo ? "" : "transparent"}`,
                            onclick: () => (local.showInfo = !local.showInfo),
                        },
                        t.span({ className: "txt" }, "String value normalizations"),
                        t.i({
                            className: () => (local.showInfo ? "ri-arrow-up-s-line" : "ri-arrow-down-s-line"),
                            ariaHidden: true,
                        }),
                    ),
                    app.components.slide(
                        () => local.showInfo,
                        t.div(
                            { className: "alert m-t-10 info" },
                            t.div(
                                { className: "content" },
                                "In order to support seamlessly both ",
                                t.code(null, "application/json"),
                                " and ",
                                t.code(null, "multipart/form-data"),
                                "requests, the following normalization rules are applied if the ",
                                t.code(null, "json"),
                                " field is a plain string:",
                                t.ul(
                                    null,
                                    t.li(null, `"true" is converted to the json `, t.code(null, "true")),
                                    t.li(null, `"false" is converted to the json `, t.code(null, "false")),
                                    t.li(null, `"null" is converted to the json `, t.code(null, "null")),
                                    t.li(null, `"[1,2,3]" is converted to the json `, t.code(null, "[1,2,3]")),
                                    t.li(
                                        null,
                                        `'{"a":1,"b":2}' is converted to the json `,
                                        t.code(null, `{"a":1,"b":2}`),
                                    ),
                                    t.li(null, `numeric strings are converted to json number`),
                                    t.li(
                                        null,
                                        `double quoted strings are left as they are (aka. without normalizations)`,
                                    ),
                                    t.li(null, `any other string (empty string too) is double quoted`),
                                ),
                                "Alternatively, if you want to avoid the string value normalizations, you can wrap your data inside an object, eg. ",
                                t.code(null, "{\"data\": anything}"),
                                ".",
                            ),
                        ),
                    ),
                ),
            ),
        footer: () => [
            t.div(
                { className: "field" },
                t.input({
                    className: "sm",
                    type: "checkbox",
                    id: uniqueId + ".required",
                    name: () => `fields.${props.fieldIndex}.required`,
                    checked: () => !!props.field.required,
                    onchange: (e) => (props.field.required = e.target.checked),
                }),
                t.label(
                    { htmlFor: uniqueId + ".required" },
                    t.span({ className: "txt" }, "Required"),
                    t.i({
                        className: "ri-information-line link-hint",
                        ariaDescription: app.attrs.tooltip("Requires the field value NOT to be null, '', [], {}."),
                    }),
                ),
            ),
        ],
    });
}