wip

frontend/src/components/ArrayInput.vue

@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <ul v-if="isArrayInited" class="list-group">
+            <li v-for="(value, index) in array" :key="index" class="list-group-item">
+                <input v-model="array[index]" type="text" class="no-bg domain-input" :placeholder="placeholder" />
+                <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="remove(index)" />
+            </li>
+        </ul>
+
+        <button class="btn btn-normal btn-sm mt-3" @click="addField">{{ $t("addListItem", [ displayName ]) }}</button>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        placeholder: {
+            type: String,
+            default: "",
+        },
+        displayName: {
+            type: String,
+            required: true,
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {
+        array() {
+            // Create the array if not exists, it should be safe.
+            if (!this.service[this.name]) {
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+                this.service[this.name] = [];
+            }
+            return this.service[this.name];
+        },
+
+        /**
+         * Check if the array is inited before called v-for.
+         * Prevent empty arrays inserted to the YAML file.
+         * @return {boolean}
+         */
+        isArrayInited() {
+            return this.service[this.name] !== undefined;
+        },
+
+        service() {
+            return this.$parent.$parent.service;
+        },
+
+    },
+    created() {
+
+    },
+    methods: {
+        addField() {
+            this.array.push("");
+        },
+        remove(index) {
+            this.array.splice(index, 1);
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars.scss";
+
+.list-group {
+    background-color: $dark-bg2;
+
+    li {
+        display: flex;
+        align-items: center;
+        padding: 10px 0 10px 10px;
+
+        .domain-input {
+            flex-grow: 1;
+            background-color: $dark-bg2;
+            border: none;
+            color: $dark-font-color;
+            outline: none;
+
+            &::placeholder {
+                color: #1d2634;
+            }
+        }
+    }
+}
+</style>