From 29f82af241f1811d92b35d9730eb4f31defe87be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 31 Mar 2021 15:28:30 +0300
Subject: [PATCH] Vuelidate form added

---
 package.json                               |   2 +
 src/assets/menu/menu.json                  |  11 +
 src/router/index.js                        |   5 +
 src/views/validation/VuelidateFormDemo.vue | 563 +++++++++++++++++++++
 4 files changed, 581 insertions(+)
 create mode 100644 src/views/validation/VuelidateFormDemo.vue

diff --git a/package.json b/package.json
index 9a5666848..cf2cb4459 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,8 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
+    "@vuelidate/core": "^2.0.0-alpha.14",
+    "@vuelidate/validators": "^2.0.0-alpha.12",
     "axios": "^0.19.0",
     "babel-eslint": "^10.1.0",
     "chart.js": "2.7.3",
diff --git a/src/assets/menu/menu.json b/src/assets/menu/menu.json
index d20d07355..dfca0bc66 100644
--- a/src/assets/menu/menu.json
+++ b/src/assets/menu/menu.json
@@ -749,6 +749,17 @@
                 }
             ]
         },
+        {
+            "name": "Validation",
+            "meta": ["validation"],
+            "children": [
+                {
+                    "name": "Vuelidate",
+                    "to": "/vuelidate",
+                    "badge": "New"
+                }
+            ]
+        },
         {
             "name": "Misc",
             "meta": ["misc"],
diff --git a/src/router/index.js b/src/router/index.js
index c5b7aa18a..e2d828d0b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -815,6 +815,11 @@ const routes = [
         path: '/galleria/advanced',
         name: 'galleriaadvvanced',
         component: () => import('../views/galleria/GalleriaAdvancedDemo.vue')
+    },
+    {
+        path: '/vuelidate',
+        name: 'vuelidateform',
+        component: () => import('../views/validation/VuelidateFormDemo.vue')
     }
 ];
 
diff --git a/src/views/validation/VuelidateFormDemo.vue b/src/views/validation/VuelidateFormDemo.vue
new file mode 100644
index 000000000..fe1e8c861
--- /dev/null
+++ b/src/views/validation/VuelidateFormDemo.vue
@@ -0,0 +1,563 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Vuelidate</h1>
+                <p>PrimeVue components can be easily used/integrated with <a href="https://vuelidate.js.org/">Vuelidate</a>. In this example, a register panel is simulated using Vuelidate.</p>
+            </div>
+            <AppInputStyleSwitch />
+        </div>
+
+        <div class="content-section implementation form-demo">
+            <Dialog v-model:visible="showMessage" :breakpoints="{ '960px': '80vw' }" :style="{ width: '30vw' }" position="top">
+                <div class="p-d-flex p-ai-center p-dir-col p-pt-6 p-px-3">
+                    <i class="pi pi-check-circle" :style="{fontSize: '5rem', color: 'var(--green-500)' }"></i>
+                    <h5>Registration Successful!</h5>
+                    <p :style="{lineHeight: 1.5, textIndent: '1rem'}">
+                        Your account is registered under name <b>{{name}}</b> ; it'll be valid next 30 days without activation. Please check <b>{{email}}</b> for activation instructions.
+                    </p>
+                </div>
+                <template #footer>
+                    <div class="p-d-flex p-jc-center">
+                        <Button label="OK" @click="toggleDialog" class="p-button-text" />
+                    </div>
+                </template>
+            </Dialog>
+
+            <div class="p-d-flex p-jc-center">
+                <div class="card">
+                    <h5 class="p-text-center">Register</h5>
+                    <form @submit.prevent="handleSubmit(!v$.$invalid)" class="p-fluid">
+                        <div class="p-field">
+                            <div class="p-float-label">
+                                <InputText id="name" v-model="v$.name.$model" :class="{'p-invalid':v$.name.$invalid && submitted}" />
+                                <label for="name" :class="{'p-error':v$.name.$invalid && submitted}">Name*</label>
+                            </div>
+                            <small v-if="(v$.name.$invalid && submitted) || v$.name.$pending.$response" class="p-error">{{v$.name.required.$message.replace('Value', 'Name')}}</small>
+                        </div>
+                        <div class="p-field">
+                            <div class="p-float-label p-input-icon-right">
+                                <i class="pi pi-envelope" />
+                                <InputText id="email" v-model="v$.email.$model" :class="{'p-invalid':v$.email.$invalid && submitted}" aria-describedby="email-error"/>
+                                <label for="email" :class="{'p-error':v$.email.$invalid && submitted}">Email*</label>
+                            </div>
+                            <span v-if="v$.email.$error && submitted">
+                                <span id="email-error" v-for="(error, index) of v$.email.$errors" :key="index">
+                                <small class="p-error">{{error.$message}}</small>
+                                </span>
+                            </span>
+                            <small v-else-if="(v$.email.$invalid && submitted) || v$.email.$pending.$response" class="p-error">{{v$.email.required.$message.replace('Value', 'Email')}}</small>
+                        </div>
+                        <div class="p-field">
+                            <div class="p-float-label">
+                                <Password id="password" v-model="v$.password.$model" :class="{'p-invalid':v$.password.$invalid && submitted}" toggleMask>
+                                    <template #header>
+                                        <h6>Pick a password</h6>
+                                    </template>
+                                    <template #footer="sp">
+                                        {{sp.level}}
+                                        <Divider />
+                                        <p class="p-mt-2">Suggestions</p>
+                                        <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                                            <li>At least one lowercase</li>
+                                            <li>At least one uppercase</li>
+                                            <li>At least one numeric</li>
+                                            <li>Minimum 8 characters</li>
+                                        </ul>
+                                    </template>
+                                </Password>
+                                <label for="password" :class="{'p-error':v$.password.$invalid && submitted}">Password*</label>
+                            </div>
+                            <small v-if="(v$.password.$invalid && submitted) || v$.password.$pending.$response" class="p-error">{{v$.password.required.$message.replace('Value', 'Password')}}</small>
+                        </div>
+                        <div class="p-field">
+                            <div class="p-float-label">
+                                <Calendar id="date" v-model="date" :showIcon="true" />
+                                <label for="date">Birthday</label>
+                            </div>
+                        </div>
+                        <div class="p-field">
+                            <div class="p-float-label">
+                                <Dropdown id="country" v-model="country" :options="countries" optionLabel="name" />
+                                <label for="country">Country</label>
+                            </div>
+                        </div>
+                        <div class="p-field-checkbox">
+                            <Checkbox id="accept" name="accept" value="Accept" v-model="v$.accept.$model" :class="{'p-invalid':v$.accept.$invalid && submitted}" />
+                            <label for="accept" :class="{'p-error': v$.accept.$invalid && submitted}">I agree to the terms and conditions*</label>
+                        </div>
+                        <Button type="submit" label="Submit" class="p-mt-2" />
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <AppDoc name="VuelidateFormDemo" :sources="sources" :service="['CountryService']" :data="['countries']" :dependencies="{'@vuelidate/core': '^2.0.0-alpha.14', '@vuelidate/validators': '^2.0.0-alpha.12'}"/>
+
+    </div>
+</template>
+
+<script>
+import { email, required } from "@vuelidate/validators";
+import { useVuelidate } from "@vuelidate/core";
+import CountryService from '../../service/CountryService';
+
+export default {
+    setup: () => ({ v$: useVuelidate() }),
+    data() {
+        return {
+            name: '',
+            email: '',
+            password: '',
+            date: null,
+            country: null,
+            accept: null,
+            submitted: false,
+            countries: null,
+            showMessage: false,
+            sources: {
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div class="form-demo">
+        <Dialog v-model:visible="showMessage" :breakpoints="{ '960px': '80vw' }" :style="{ width: '30vw' }" position="top">
+            <div class="p-d-flex p-ai-center p-dir-col p-pt-6 p-px-3">
+                <i class="pi pi-check-circle" :style="{fontSize: '5rem', color: 'var(--green-500)' }"></i>
+                <h5>Registration Successful!</h5>
+                <p :style="{lineHeight: 1.5, textIndent: '1rem'}">
+                    Your account is registered under name <b>{{name}}</b> ; it'll be valid next 30 days without activation. Please check <b>{{email}}</b> for activation instructions.
+                </p>
+            </div>
+            <template #footer>
+                <div class="p-d-flex p-jc-center">
+                    <Button label="OK" @click="toggleDialog" class="p-button-text" />
+                </div>
+            </template>
+        </Dialog>
+
+        <div class="p-d-flex p-jc-center">
+            <div class="card">
+                <h5 class="p-text-center">Register</h5>
+                <form @submit.prevent="handleSubmit(!v$.$invalid)" class="p-fluid">
+                    <div class="p-field">
+                        <div class="p-float-label">
+                            <InputText id="name" v-model="v$.name.$model" :class="{'p-invalid':v$.name.$invalid && submitted}" />
+                            <label for="name" :class="{'p-error':v$.name.$invalid && submitted}">Name*</label>
+                        </div>
+                        <small v-if="(v$.name.$invalid && submitted) || v$.name.$pending.$response" class="p-error">{{v$.name.required.$message.replace('Value', 'Name')}}</small>
+                    </div>
+                    <div class="p-field">
+                        <div class="p-float-label p-input-icon-right">
+                            <i class="pi pi-envelope" />
+                            <InputText id="email" v-model="v$.email.$model" :class="{'p-invalid':v$.email.$invalid && submitted}" aria-describedby="email-error"/>
+                            <label for="email" :class="{'p-error':v$.email.$invalid && submitted}">Email*</label>
+                        </div>
+                        <span v-if="v$.email.$error && submitted">
+                            <span id="email-error" v-for="(error, index) of v$.email.$errors" :key="index">
+                            <small class="p-error">{{error.$message}}</small>
+                            </span>
+                        </span>
+                        <small v-else-if="(v$.email.$invalid && submitted) || v$.email.$pending.$response" class="p-error">{{v$.email.required.$message.replace('Value', 'Email')}}</small>
+                    </div>
+                    <div class="p-field">
+                        <div class="p-float-label">
+                            <Password id="password" v-model="v$.password.$model" :class="{'p-invalid':v$.password.$invalid && submitted}" toggleMask>
+                                <template #header>
+                                    <h6>Pick a password</h6>
+                                </template>
+                                <template #footer="sp">
+                                    {{sp.level}}
+                                    <Divider />
+                                    <p class="p-mt-2">Suggestions</p>
+                                    <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                                        <li>At least one lowercase</li>
+                                        <li>At least one uppercase</li>
+                                        <li>At least one numeric</li>
+                                        <li>Minimum 8 characters</li>
+                                    </ul>
+                                </template>
+                            </Password>
+                            <label for="password" :class="{'p-error':v$.password.$invalid && submitted}">Password*</label>
+                        </div>
+                        <small v-if="(v$.password.$invalid && submitted) || v$.password.$pending.$response" class="p-error">{{v$.password.required.$message.replace('Value', 'Password')}}</small>
+                    </div>
+                    <div class="p-field">
+                        <div class="p-float-label">
+                            <Calendar id="date" v-model="date" :showIcon="true" />
+                            <label for="date">Birthday</label>
+                        </div>
+                    </div>
+                    <div class="p-field">
+                        <div class="p-float-label">
+                            <Dropdown id="country" v-model="country" :options="countries" optionLabel="name" />
+                            <label for="country">Country</label>
+                        </div>
+                    </div>
+                    <div class="p-field-checkbox">
+                        <Checkbox id="accept" name="accept" value="Accept" v-model="v$.accept.$model" :class="{'p-invalid':v$.accept.$invalid && submitted}" />
+                        <label for="accept" :class="{'p-error': v$.accept.$invalid && submitted}">I agree to the terms and conditions*</label>
+                    </div>
+                    <Button type="submit" label="Submit" class="p-mt-2" />
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { email, required } from "@vuelidate/validators";
+import { useVuelidate } from "@vuelidate/core";
+import CountryService from './service/CountryService';
+
+export default {
+    setup: () => ({ v$: useVuelidate() }),
+    data() {
+        return {
+            name: '',
+            email: '',
+            password: '',
+            date: null,
+            country: null,
+            accept: null,
+            submitted: false,
+            countries: null,
+            showMessage: false
+        }
+    },
+    countryService: null,
+    validations() {
+        return {
+            name: {
+                required
+            },
+            email: {
+                required,
+                email
+            },
+            password: {
+                required
+            },
+            accept: {
+                required
+            }
+        }
+    },
+    created() {
+        this.countryService = new CountryService();
+    },
+    mounted() {
+        this.countryService.getCountries().then(data => this.countries = data);
+    },
+    methods: {
+        handleSubmit(isFormValid) {
+            this.submitted = true;
+
+            if (!isFormValid) {
+                return;
+            }
+
+            this.toggleDialog();
+        },
+        toggleDialog() {
+            this.showMessage = !this.showMessage;
+        
+            if(!this.showMessage) {
+                this.resetForm();
+            }
+        },
+        resetForm() {
+            this.name = '';
+            this.email = '';
+            this.password = '';
+            this.date = null;
+            this.country = null;
+            this.accept = null;
+            this.submitted = false;
+        }
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.form-demo {
+    .card {
+        min-width: 450px;
+
+        form {
+            margin-top: 2rem;
+        }
+
+        .p-field {
+            margin-bottom: 1.5rem;
+        }
+    }
+
+    @media screen and (max-width: 960px) {
+        .card {
+            width: 80%;
+        }
+    }
+}
+
+</style>
+`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div class="form-demo">
+        <Dialog v-model:visible="showMessage" :breakpoints="{ '960px': '80vw' }" :style="{ width: '30vw' }" position="top">
+            <div class="p-d-flex p-ai-center p-dir-col p-pt-6 p-px-3">
+                <i class="pi pi-check-circle" :style="{fontSize: '5rem', color: 'var(--green-500)' }"></i>
+                <h5>Registration Successful!</h5>
+                <p :style="{lineHeight: 1.5, textIndent: '1rem'}">
+                    Your account is registered under name <b>{{state.name}}</b> ; it'll be valid next 30 days without activation. Please check <b>{{state.email}}</b> for activation instructions.
+                </p>
+            </div>
+            <template #footer>
+                <div class="p-d-flex p-jc-center">
+                    <Button label="OK" @click="toggleDialog" class="p-button-text" />
+                </div>
+            </template>
+        </Dialog>
+
+        <div class="p-d-flex p-jc-center">
+            <div class="card">
+                <h5 class="p-text-center">Register</h5>
+                <form @submit.prevent="handleSubmit(!v$.$invalid)" class="p-fluid">
+                    <div class="p-field">
+                        <div class="p-float-label">
+                            <InputText id="name" v-model="v$.name.$model" :class="{'p-invalid':v$.name.$invalid && submitted}" />
+                            <label for="name" :class="{'p-error':v$.name.$invalid && submitted}">Name*</label>
+                        </div>
+                        <small v-if="(v$.name.$invalid && submitted) || v$.name.$pending.$response" class="p-error">{{v$.name.required.$message.replace('Value', 'Name')}}</small>
+                    </div>
+                    <div class="p-field">
+                        <div class="p-float-label p-input-icon-right">
+                            <i class="pi pi-envelope" />
+                            <InputText id="email" v-model="v$.email.$model" :class="{'p-invalid':v$.email.$invalid && submitted}" aria-describedby="email-error"/>
+                            <label for="email" :class="{'p-error':v$.email.$invalid && submitted}">Email*</label>
+                        </div>
+                        <span v-if="v$.email.$error && submitted">
+                            <span id="email-error" v-for="(error, index) of v$.email.$errors" :key="index">
+                            <small class="p-error">{{error.$message}}</small>
+                            </span>
+                        </span>
+                        <small v-else-if="(v$.email.$invalid && submitted) || v$.email.$pending.$response" class="p-error">{{v$.email.required.$message.replace('Value', 'Email')}}</small>
+                    </div>
+                    <div class="p-field">
+                        <div class="p-float-label">
+                            <Password id="password" v-model="v$.password.$model" :class="{'p-invalid':v$.password.$invalid && submitted}" toggleMask>
+                                <template #header>
+                                    <h6>Pick a password</h6>
+                                </template>
+                                <template #footer="sp">
+                                    {{sp.level}}
+                                    <Divider />
+                                    <p class="p-mt-2">Suggestions</p>
+                                    <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                                        <li>At least one lowercase</li>
+                                        <li>At least one uppercase</li>
+                                        <li>At least one numeric</li>
+                                        <li>Minimum 8 characters</li>
+                                    </ul>
+                                </template>
+                            </Password>
+                            <label for="password" :class="{'p-error':v$.password.$invalid && submitted}">Password*</label>
+                        </div>
+                        <small v-if="(v$.password.$invalid && submitted) || v$.password.$pending.$response" class="p-error">{{v$.password.required.$message.replace('Value', 'Password')}}</small>
+                    </div>
+                    <div class="p-field">
+                        <div class="p-float-label">
+                            <Calendar id="date" v-model="date" :showIcon="true" />
+                            <label for="date">Birthday</label>
+                        </div>
+                    </div>
+                    <div class="p-field">
+                        <div class="p-float-label">
+                            <Dropdown id="country" v-model="country" :options="countries" optionLabel="name" />
+                            <label for="country">Country</label>
+                        </div>
+                    </div>
+                    <div class="p-field-checkbox">
+                        <Checkbox id="accept" name="accept" value="Accept" v-model="v$.accept.$model" :class="{'p-invalid':v$.accept.$invalid && submitted}" />
+                        <label for="accept" :class="{'p-error': v$.accept.$invalid && submitted}">I agree to the terms and conditions*</label>
+                    </div>
+                    <Button type="submit" label="Submit" class="p-mt-2" />
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { reactive, ref, onMounted } from 'vue';
+import { email, required } from "@vuelidate/validators";
+import { useVuelidate } from "@vuelidate/core";
+import CountryService from './service/CountryService';
+
+export default {
+    setup() {
+        onMounted(() => {
+            countryService.value.getCountries().then(data => countries.value = data);
+        })
+
+        const state = reactive({
+            name: '',
+            email: '',
+            password: '',
+            accept: null
+        });
+
+        const rules = {
+            name: { required },
+            email: { required, email },
+            password: { required },
+            accept: { required }
+        };
+
+        const countryService = ref(new CountryService());
+        const submitted = ref(false);
+        const countries = ref();
+        const showMessage = ref(false);
+        const date = ref();
+        const country = ref();
+
+        const v$ = useVuelidate(rules, state);
+
+        const handleSubmit = (isFormValid) => {
+            submitted.value = true;
+
+            if (!isFormValid) {
+                return;
+            }
+
+            toggleDialog();
+        }
+        const toggleDialog = () => {
+            showMessage.value = !showMessage.value;
+        
+            if(!showMessage.value) {
+                resetForm();
+            }
+        }
+        const resetForm = () => {
+            state.name = '';
+            state.email = '';
+            state.password = '';
+            state.date = null;
+            state.country = null;
+            state.accept = null;
+            submitted.value = false;
+        }
+
+        return { state, v$, handleSubmit, toggleDialog, submitted, countries, showMessage, date, country }
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.form-demo {
+    .card {
+        min-width: 450px;
+
+        form {
+            margin-top: 2rem;
+        }
+
+        .p-field {
+            margin-bottom: 1.5rem;
+        }
+    }
+
+    @media screen and (max-width: 960px) {
+        .card {
+            width: 80%;
+        }
+    }
+}
+
+</style>
+`
+                }
+            }
+        }
+    },
+    countryService: null,
+    validations() {
+        return {
+            name: {
+                required
+            },
+            email: {
+                required,
+                email
+            },
+            password: {
+                required
+            },
+            accept: {
+                required
+            }
+        }
+    },
+    created() {
+        this.countryService = new CountryService();
+    },
+    mounted() {
+        this.countryService.getCountries().then(data => this.countries = data);
+    },
+    methods: {
+        handleSubmit(isFormValid) {
+            this.submitted = true;
+
+            if (!isFormValid) {
+                return;
+            }
+
+            this.toggleDialog();
+        },
+        toggleDialog() {
+            this.showMessage = !this.showMessage;
+
+            if(!this.showMessage) {
+                this.resetForm();
+            }
+        },
+        resetForm() {
+            this.name = '';
+            this.email = '';
+            this.password = '';
+            this.date = null;
+            this.country = null;
+            this.accept = null;
+            this.submitted = false;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.form-demo {
+    .card {
+        min-width: 450px;
+
+        form {
+            margin-top: 2rem;
+        }
+
+        .p-field {
+            margin-bottom: 1.5rem;
+        }
+    }
+
+    @media screen and (max-width: 960px) {
+        .card {
+            width: 80%;
+        }
+    }
+}
+
+</style>
\ No newline at end of file