veevalidate demo added to tristatecheckbox component

doc/tristatecheckbox/form/VeeValidateDoc.vue

@@ -0,0 +1,136 @@
+<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">
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+            <div class="my-2">* I've read and accept the terms & conditions.</div>
+            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+
+        const toast = useToast();
+
+        function validateField(value) {
+            if (typeof value === 'undefined' || value === null) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<div class="card flex justify-content-center">
+    <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+        <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+        <div class="my-2">* I've read and accept the terms & conditions.</div>
+        <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+        <Button type="submit" label="Submit" />
+    </form>
+</div>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+            <div class="my-2">* I've read and accept the terms & conditions.</div>
+            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (typeof value === 'undefined' || value === null) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+            <div class="my-2">* I've read and accept the terms & conditions.</div>
+            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+function validateField(value) {
+    if (typeof value === 'undefined' || value === null) {
+        return 'Value is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>

pages/tristatecheckbox/index.vue

@@ -9,6 +9,7 @@ import DisabledDoc from '@/doc/tristatecheckbox/DisabledDoc';
 import ImportDoc from '@/doc/tristatecheckbox/ImportDoc';
 import InvalidDoc from '@/doc/tristatecheckbox/InvalidDoc';
 import StyleDoc from '@/doc/tristatecheckbox/StyleDoc';
+import VeeValidateDoc from '@/doc/tristatecheckbox/form/VeeValidateDoc.vue';
 
 export default {
     data() {
@@ -34,6 +35,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',