InputText Vee-Validate demo added

doc/inputtext/form/VeeValidateDoc.vue

@@ -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>

package.json

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

pages/inputtext/index.vue

@@ -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',