diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue index 0ae58a9e3a3..bd18f1f316a 100644 --- a/ui/src/components/inputs/Editor.vue +++ b/ui/src/components/inputs/Editor.vue @@ -466,6 +466,10 @@ box-shadow: 0 0 0 1px var(--bs-border-color) inset; padding-top: 7px; + &.custom-dark-vs-theme { + background-color: $input-bg; + } + html.dark & { background-color: var(--bs-gray-100); } diff --git a/ui/src/components/inputs/InputsForm.vue b/ui/src/components/inputs/InputsForm.vue index fb758208a33..232c65edb78 100644 --- a/ui/src/components/inputs/InputsForm.vue +++ b/ui/src/components/inputs/InputsForm.vue @@ -5,7 +5,7 @@ :key="input.id" :label="input.displayName ? input.displayName : input.id" :required="input.required !== false" - :rules="input.type === 'BOOLEAN' ? [requiredBooleanRule(input)] : undefined" + :rules="requiredRules(input)" :prop="input.id" :error="inputError(input.id)" :inline-message="true" @@ -397,15 +397,38 @@ }); } }, - requiredBooleanRule(input) { - return input.required !== false ? { - validator: (_, val, callback) => { - if(val === "undefined"){ - return callback(new Error(this.$t("is required", {field: input.displayName || input.id}))); + requiredRules(input) { + if(input.required === false) + return undefined + + if(input.type === "BOOLEAN"){ + return [{ + validator: (_, val, callback) => { + if(val === "undefined"){ + return callback(new Error(this.$t("is required", {field: input.displayName || input.id}))); + } + callback() + }, + }] + } + + if(["ENUM", "SELECT", "MULTISELECT"].includes(input.type)){ + return [ + { + required: true, + validator: (_, __, callback) => { + const val = input.type === "MULTISELECT" ? this.multiSelectInputs[input.id] : this.inputsValues[input.id] + if(!val?.length){ + return callback(new Error(this.$t("is required", {field: input.displayName || input.id}))); + } + callback() + }, + trigger: "change", } - callback() - }, - } : undefined + ] + } + + return undefined } }, watch: {