mirror of https://github.com/wg-easy/wg-easy
Bernd Storath
5 months ago
12 changed files with 105 additions and 25 deletions
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<div class="flex flex-col gap-2"> |
|||
<div v-if="data === null"> |
|||
{{ emptyText || $t('form.nullNoItems') }} |
|||
</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)" |
|||
/> |
|||
<BaseButton |
|||
as="input" |
|||
type="button" |
|||
class="rounded-lg" |
|||
value="-" |
|||
@click="del(i)" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="mt-2"> |
|||
<BaseButton |
|||
as="input" |
|||
type="button" |
|||
class="rounded-lg" |
|||
:value="$t('form.add')" |
|||
@click="add" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
const data = defineModel<string[] | null>(); |
|||
defineProps<{ emptyText?: string[]; name: string }>(); |
|||
|
|||
function update(e: Event, i: number) { |
|||
const v = (e.target as HTMLInputElement).value; |
|||
if (!data.value) { |
|||
return; |
|||
} |
|||
data.value[i] = v; |
|||
} |
|||
|
|||
function add() { |
|||
if (data.value === undefined) { |
|||
return; |
|||
} |
|||
if (data.value === null) { |
|||
data.value = ['']; |
|||
} else { |
|||
data.value.push(''); |
|||
} |
|||
} |
|||
|
|||
function del(i: number) { |
|||
if (!data.value) { |
|||
return; |
|||
} |
|||
data.value.splice(i, 1); |
|||
if (data.value.length === 0) { |
|||
data.value = null; |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue