mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
44 lines
1,003 B
Vue
44 lines
1,003 B
Vue
|
<script setup lang="ts">
|
||
|
|
import { useField } from 'vee-validate'
|
||
|
|
import { formGroupExtras } from '@/composables/form'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
name: string
|
||
|
|
type: HTMLInputElement['type']
|
||
|
|
placeholder?: string
|
||
|
|
}>()
|
||
|
|
const attrs = useAttrs()
|
||
|
|
const { describedBy, invalid } = inject(formGroupExtras, {
|
||
|
|
describedBy: ref(undefined),
|
||
|
|
invalid: ref(false),
|
||
|
|
})
|
||
|
|
const { value, handleBlur, handleChange, errorMessage } = useField(
|
||
|
|
() => props.name,
|
||
|
|
{
|
||
|
|
validateOnValueUpdate: false,
|
||
|
|
},
|
||
|
|
)
|
||
|
|
|
||
|
|
const validationListeners = {
|
||
|
|
blur: (e: FocusEvent) => handleBlur(e, true),
|
||
|
|
change: handleChange,
|
||
|
|
input: (e: InputEvent) => handleChange(e, !!errorMessage.value),
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<input
|
||
|
|
:id="name"
|
||
|
|
:value="value"
|
||
|
|
:name="name"
|
||
|
|
:type="type"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:aria-invalid="invalid"
|
||
|
|
:aria-describedby="describedBy"
|
||
|
|
class="input input-bordered"
|
||
|
|
:class="{ 'input-error': invalid }"
|
||
|
|
v-bind="attrs"
|
||
|
|
v-on="validationListeners"
|
||
|
|
/>
|
||
|
|
</template>
|