mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
add TextInputList component
This commit is contained in:
parent
bb72f01edd
commit
56b3190293
1 changed files with 47 additions and 0 deletions
47
components/TextInputList.vue
Normal file
47
components/TextInputList.vue
Normal file
|
@ -0,0 +1,47 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useFieldArray } from 'vee-validate'
|
||||||
|
import { formGroupExtras } from '@/composables/form'
|
||||||
|
// FIXME couldn't find a way to get the index of the invalid input so for now
|
||||||
|
// every inputs are flaged as invalid
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
name: string
|
||||||
|
type: HTMLInputElement['type']
|
||||||
|
placeholder?: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const { describedBy, invalid } = inject(formGroupExtras, {
|
||||||
|
describedBy: ref(undefined),
|
||||||
|
invalid: ref(false),
|
||||||
|
})
|
||||||
|
|
||||||
|
const { remove, push, fields } = useFieldArray(props.name)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-for="(field, idx) in fields" :key="field.key" class="flex mb-2 join">
|
||||||
|
<input
|
||||||
|
:id="name + '__' + idx"
|
||||||
|
v-model="field.value"
|
||||||
|
:name="name"
|
||||||
|
:type="type"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:aria-invalid="invalid"
|
||||||
|
:aria-describedby="describedBy"
|
||||||
|
class="input input-bordered join-item w-full"
|
||||||
|
:class="{ 'input-error': invalid }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<YButton
|
||||||
|
variant="error"
|
||||||
|
icon="mdi:delete-forever"
|
||||||
|
icon-size="2em"
|
||||||
|
icon-only
|
||||||
|
:text="$t('remove')"
|
||||||
|
class="join-item px-3"
|
||||||
|
@click="remove(idx)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<YButton :text="$t('add')" @click="push('')" />
|
||||||
|
</template>
|
Loading…
Reference in a new issue