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