Bernd Storath
70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-2">
|
|
<div
|
|
v-if="overridden"
|
|
class="flex items-center gap-2 rounded-lg bg-amber-50 p-2 text-sm text-amber-700 dark:bg-amber-900/20 dark:text-amber-400"
|
|
>
|
|
<IconsWarning class="size-4" />
|
|
<span>This field is overridden by an environment variable</span>
|
|
</div>
|
|
<div v-if="data?.length === 0">
|
|
{{ emptyText || $t('form.noItems') }}
|
|
</div>
|
|
<div v-for="(item, i) in data" v-else :key="i">
|
|
<div class="mt-1 flex flex-row gap-1">
|
|
<input
|
|
:value="item"
|
|
:name="name"
|
|
type="text"
|
|
class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
|
|
@input="update($event, i)"
|
|
/>
|
|
<BaseSecondaryButton
|
|
as="input"
|
|
type="button"
|
|
class="rounded-lg"
|
|
value="-"
|
|
@click="del(i)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<BasePrimaryButton
|
|
as="input"
|
|
type="button"
|
|
class="rounded-lg"
|
|
:value="$t('form.add')"
|
|
@click="add"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const data = defineModel<string[]>();
|
|
defineProps<{
|
|
emptyText?: string[];
|
|
name: string;
|
|
overridden?: boolean;
|
|
}>();
|
|
|
|
function update(e: Event, i: number) {
|
|
const v = (e.target as HTMLInputElement).value;
|
|
if (!data.value) {
|
|
return;
|
|
}
|
|
data.value[i] = v;
|
|
}
|
|
|
|
function add() {
|
|
data.value?.push('');
|
|
}
|
|
|
|
function del(i: number) {
|
|
if (!data.value) {
|
|
return;
|
|
}
|
|
data.value.splice(i, 1);
|
|
}
|
|
</script>
|