diff --git a/packages/node_modules/@node-red/nodes/core/function/10-function.html b/packages/node_modules/@node-red/nodes/core/function/10-function.html index 208aef991..4305f055b 100644 --- a/packages/node_modules/@node-red/nodes/core/function/10-function.html +++ b/packages/node_modules/@node-red/nodes/core/function/10-function.html @@ -7,36 +7,53 @@ padding: 0px; } #node-input-libs-container-row .red-ui-editableList-container li { - padding:5px; + padding:0px; } #node-input-libs-container-row .red-ui-editableList-item-remove { right: 5px; } + + #node-input-libs-container-row .red-ui-editableList-header { + display: flex; + background: var(--red-ui-tertiary-background); + padding-right: 75px; + } + #node-input-libs-container-row .red-ui-editableList-header > div { + flex-grow: 1; + } + .node-libs-entry { display: flex; } - .node-libs-entry .node-input-libs-var, .node-libs-entry .red-ui-typedInput-container { - flex-grow: 1; - } - .node-libs-entry > code,.node-libs-entry > span { - line-height: 30px; - } - .node-libs-entry > input[type=text] { - border-radius: 0; - border-left: none; - border-top: none; - border-right: none; - padding-top: 2px; - padding-bottom: 2px; - margin-top: 4px; - margin-bottom: 2px; - height: 26px; - } - .node-libs-entry > span > i { + .node-libs-entry .red-ui-typedInput-container { + border-radius: 0; + border: none; + } + .node-libs-entry .red-ui-typedInput-type-select { + border-radius: 0 !important; + height: 34px; + } + .node-libs-entry > span > input[type=text] { + border-radius: 0; + border-top-color: var(--red-ui-form-background); + border-bottom-color: var(--red-ui-form-background); + border-right-color: var(--red-ui-form-background); + } + .node-libs-entry > span > input[type=text].input-error { + } + .node-libs-entry > span { + flex-grow: 1; + width: 50%; + position: relative; + } + .node-libs-entry span .node-input-libs-var, .node-libs-entry span .red-ui-typedInput-container { + width: 100%; + } + .node-libs-entry > span > span > i { display: none; } - .node-libs-entry > span.input-error > i { + .node-libs-entry > span > span.input-error > i { display: inline; } @@ -209,47 +226,24 @@ }) var libList = $("#node-input-libs-container").css('min-height','100px').css('min-width','450px').editableList({ + header: $('
'), addItem: function(container,i,opt) { var parent = container.parent(); var row0 = $("
").addClass("node-libs-entry").appendTo(container); - var fieldWidth = "260px"; - $('const ').appendTo(row0); - var fvar = $("", { - class: "node-input-libs-var red-ui-font-code", - placeholder: RED._("node-red:function.require.var"), - type: "text" - }).css({ - width: "120px", - "margin-left": "5px" - }).appendTo(row0).val(opt.var); - var vnameWarning = $('').appendTo(row0); - RED.popover.tooltip(vnameWarning.find("i"),function() { - var val = fvar.val(); - if (invalidModuleVNames.indexOf(val) !== -1) { - return RED._("node-red:function.error.moduleNameReserved",{name:val}) - } else { - return RED._("node-red:function.error.moduleNameError",{name:val}) - } - }) - - $(' = require(').appendTo(row0); + var fmoduleSpan = $("").appendTo(row0); var fmodule = $("", { class: "node-input-libs-val", placeholder: RED._("node-red:function.require.module"), type: "text" }).css({ - width: "180px", - }).appendTo(row0).typedInput({ + }).appendTo(fmoduleSpan).typedInput({ types: typedModules, default: usedModules.indexOf(opt.module) > -1 ? opt.module : "_custom_" }); if (usedModules.indexOf(opt.module) === -1) { fmodule.typedInput('value', opt.module); } - - $(')').appendTo(row0); - - var moduleWarning = $('').appendTo(row0); + var moduleWarning = $('').appendTo(fmoduleSpan); RED.popover.tooltip(moduleWarning.find("i"),function() { var val = fmodule.typedInput("type"); if (val === "_custom_") { @@ -264,6 +258,26 @@ } }) + var fvarSpan = $("").appendTo(row0); + + var fvar = $("", { + class: "node-input-libs-var red-ui-font-code", + placeholder: RED._("node-red:function.require.var"), + type: "text" + }).css({ + }).appendTo(fvarSpan).val(opt.var); + var vnameWarning = $('').appendTo(fvarSpan); + RED.popover.tooltip(vnameWarning.find("i"),function() { + var val = fvar.val(); + if (invalidModuleVNames.indexOf(val) !== -1) { + return RED._("node-red:function.error.moduleNameReserved",{name:val}) + } else { + return RED._("node-red:function.error.moduleNameError",{name:val}) + } + }) + + + fvar.on("change keyup paste", function (e) { var v = $(this).val().trim(); if (v === "" || / /.test(v) || invalidModuleVNames.indexOf(v) !== -1) { @@ -280,7 +294,7 @@ if (val === "_custom_") { val = $(this).val(); } - var varName = val.trim().replace(/^@/,"").replace(/@.*$/,"").replace(/[-_/]./g, function(v) { return v[1].toUpperCase() }); + var varName = val.trim().replace(/^@/,"").replace(/@.*$/,"").replace(/[-_/].?/g, function(v) { return v[1]?v[1].toUpperCase():"" }); fvar.val(varName); fvar.trigger("change"); diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json index f2ca607da..375faf5e0 100755 --- a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json +++ b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json @@ -226,7 +226,9 @@ }, "require": { "var": "variable", - "module": "module" + "module": "module", + "moduleName": "Module name", + "importAs": "Import as" }, "error": { "externalModuleNotAllowed": "Function node not allowed to load external modules",