mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { useFieldArray } from 'vee-validate'
|
|
|
|
const props = defineProps<{
|
|
name: string
|
|
label: string
|
|
inputLabel: string
|
|
type: HTMLInputElement['type']
|
|
placeholder?: string
|
|
}>()
|
|
|
|
const group: Ref<HTMLElement | null> = ref(null)
|
|
const { remove, push, fields } = useFieldArray(props.name)
|
|
|
|
function onAdd() {
|
|
push('')
|
|
nextTick(() => {
|
|
// auto focus new input
|
|
const inputs = group.value?.querySelectorAll('input')
|
|
if (inputs && inputs.length) {
|
|
inputs[inputs.length - 1].focus()
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<fieldset ref="group">
|
|
<legend class="text-xl mb-3">{{ label }}</legend>
|
|
|
|
<FormField
|
|
v-for="(field, idx) in fields"
|
|
:key="field.key"
|
|
:name="`${name}[${idx}]`"
|
|
:label="inputLabel"
|
|
class="mb-3"
|
|
sr-hide-label
|
|
>
|
|
<div class="join w-full">
|
|
<TextInput
|
|
:name="`${name}[${idx}]`"
|
|
:type="type"
|
|
:placeholder="placeholder"
|
|
class="join-item w-full"
|
|
/>
|
|
<YButton
|
|
variant="error"
|
|
icon="mdi:delete-forever"
|
|
icon-size="2em"
|
|
icon-only
|
|
:text="$t('remove')"
|
|
class="join-item px-3"
|
|
@click="remove(idx)"
|
|
/>
|
|
</div>
|
|
</FormField>
|
|
|
|
<YButton :text="$t('add')" @click="onAdd" />
|
|
</fieldset>
|
|
</template>
|