vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

InputText Vee-Validate demo added

pull/3758/head
Tuğçe Küçükoğlu 2023-03-15 17:50:39 +03:00
parent 732474485b
commit 4f0b15f39a
4 changed files with 355 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
doc/inputtext/form/VeeValidateDoc.vue Normal file
View File

@ -0,0 +1,133 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2 w-16rem">
<span class="p-float-label">
<InputText id="value" v-model="value" @input="onInput" type="text" :class="{ 'p-invalid': errors.value }" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errors.value || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleChange } = useField();
const { errors, useFieldModel, handleSubmit } = useForm();
const value = useFieldModel('value');
const onInput = (e) => {
handleChange('e.target.value');
};
const onSubmit = handleSubmit((values, actions) => {
if (values.value === null || values.value === undefined || values.value === '') {
actions.setErrors({ value: 'Name - Surname is required.' });
} else {
actions.setErrors({});
}
});
return { value, errors, handleSubmit, onInput, onSubmit };
},
data() {
return {
code: {
basic: `
<template>
<div class="card flex justify-content-center p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2 w-16rem">
<span class="p-float-label">
<InputText id="value" v-model="value" @input="onInput" type="text" :class="{ 'p-invalid': errors.value }" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errors.value || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
</form>
</div>
</template>`,
options: `
<template>
<div class="card flex justify-content-center p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2 w-16rem">
<span class="p-float-label">
<InputText id="value" v-model="value" @input="onInput" type="text" :class="{ 'p-invalid': errors.value }" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errors.value || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
</form>
</div>
</template>
<script>
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleChange } = useField();
const { errors, useFieldModel, handleSubmit } = useForm();
const value = useFieldModel('value');
const onInput = (e) => {
handleChange('e.target.value');
};
const onSubmit = handleSubmit((values, actions) => {
if (values.value === null || values.value === undefined || values.value === '') {
actions.setErrors({ value: 'Name - Surname is required.' });
} else {
actions.setErrors({});
}
});
return { value, errors, handleSubmit, onInput, onSubmit };
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2 w-16rem">
<span class="p-float-label">
<InputText id="value" v-model="value" @input="onInput" type="text" :class="{ 'p-invalid': errors.value }" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error">{{ errors.value || '&nbsp;' }}</small>
<Button type="submit" label="Submit" @click="onSubmit" />
</form>
</div>
</template>
<script setup>
import { useField, useForm } from 'vee-validate';
const { handleChange } = useField();
const { errors, useFieldModel, handleSubmit } = useForm();
const value = useFieldModel('value');
const onInput = (e) => {
handleChange('e.target.value');
};
const onSubmit = handleSubmit((values, actions) => {
if (values.value === null || values.value === undefined || values.value === '') {
actions.setErrors({ value: 'Name - Surname is required.' });
} else {
actions.setErrors({});
}
});
<\/script>
`
}
};
}
};
</script>

436
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -77,6 +77,7 @@
"vitest": "^0.23.2"
},
"dependencies": {
"@docsearch/js": "^3.3.3"
"@docsearch/js": "^3.3.3",
"vee-validate": "^4.8.2"
}
}

13
pages/inputtext/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/inputtext/AccessibilityDoc.vue';
import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue';
import VeeValidateDoc from '@/doc/inputtext/form/VeeValidateDoc.vue';
import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';
import IconsDoc from '@/doc/inputtext/IconsDoc.vue';
import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
@ -58,6 +59,18 @@ export default {
label: 'Disabled',
component: DisabledDoc
},
{
id: 'form',
label: 'Form',
description: 'Compatibility with popular Vue form libraries.',
children: [
{
id: 'veevalidate',
label: 'VeeValidate',
component: VeeValidateDoc
}
]
},
{
id: 'style',
label: 'Style',