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

Migrates Steps to V3

pull/496/head
Cagatay Civici 2020-09-23 14:28:25 +03:00
parent 98c20dbf3c
commit 32cc3b0357
5 changed files with 99 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -41,7 +41,6 @@
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"axios": "^0.19.0",
"vuelidate": "^0.7.4",
"chart.js": "2.7.3",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",

2
src/main.js
View File

@ -88,9 +88,7 @@ import '@fullcalendar/core/main.min.css';
import '@fullcalendar/daygrid/main.min.css';
import '@fullcalendar/timegrid/main.min.css';
import './assets/styles/flags.css';
//import Vuelidate from 'vuelidate';
//Vue.use(Vuelidate);
/*router.beforeEach(function (to, from, next) {
window.scrollTo(0, 0);
next();

53
src/views/steps/PersonalDemo.vue
View File

@ -11,25 +11,24 @@
<div class="p-fluid">
<div class="p-field">
<label for="firstname">Firstname</label>
<InputText id="firstname" v-model="$v.firstname.$model" :class="{'p-invalid':$v.firstname.$invalid && submitted}" />
<small v-show="$v.firstname.$invalid && submitted" class="p-error">Firstname is required.</small>
<InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" />
<small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
</div>
<div class="p-field">
<label for="lastname">Lastname</label>
<InputText v-model="$v.lastname.$model" :class="{'p-invalid':$v.lastname.$invalid && submitted}" />
<small v-show="$v.lastname.$invalid && submitted" class="p-error">Lastname is required.</small>
<InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" />
<small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
</div>
<div class="p-field">
<label for="age">Age</label>
<InputText id="age" v-model="$v.age.$model" :class="{'p-invalid':$v.age.$error && submitted}" />
<small v-show="$v.age.$invalid && submitted" class="p-error">Age should be a number.</small>
<InputNumber id="age" v-model="age" />
</div>
</div>
</template>
<template v-slot:footer>
<div class="p-grid p-nogutter p-justify-between">
<i></i>
<Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
</div>
</template>
</Card>
@ -37,38 +36,36 @@
</template>
<script>
import {required, integer} from 'vuelidate/lib/validators';
export default {
data () {
return {
firstname: '',
lastname: '',
age: '',
submitted: false
}
},
validations: {
firstname: {
required
},
lastname: {
required
},
age: {
integer
age: null,
submitted: false,
validationErrors: {}
}
},
methods: {
nextPage(isFormValid) {
nextPage() {
this.submitted = true;
if (!isFormValid) {
return;
}
if (this.validateForm() ) {
this.$emit('next-page', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
}
},
validateForm() {
if (!this.firstname.trim())
this.validationErrors['firstname'] = true;
else
delete this.validationErrors['firstname'];
if (!this.lastname.trim())
this.validationErrors['lastname'] = true;
else
delete this.validationErrors['lastname'];
return !Object.keys(this.validationErrors).length;
}
}
}
</script>

4
src/views/steps/StepsDemo.vue
View File

@ -12,9 +12,11 @@
<Steps :model="items" :readonly="true" />
</div>
<router-view v-slot="{Component}" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
<keep-alive>
<router-view :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete" />
<component :is="Component" />
</keep-alive>
</router-view>
</div>
<StepsDoc />

75
src/views/steps/StepsDoc.vue
View File

@ -125,10 +125,15 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;Steps :model="items" :readonly="true" style="margin-bottom: 1rem" /&gt;
&lt;div class="card"&gt;
&lt;Steps :model="items" :readonly="true" /&gt;
&lt;/div&gt;
&lt;router-view v-slot="{Component}" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete"&gt;
&lt;keep-alive&gt;
&lt;router-view :formData="formObject" @prevPage="prev-page($event)" @next-page="nextPage($event)" @complete="complete" /&gt;
&lt;component :is="Component" /&gt;
&lt;/keep-alive&gt;
&lt;/router-view&gt;
</template>
</CodeHighlight>
@ -182,36 +187,34 @@ export default {
<template v-pre>
&lt;div class="stepsdemo-content"&gt;
&lt;Card&gt;
&lt;template slot="title"&gt;
&lt;template v-slot:title&gt;
Personal Information
&lt;/template&gt;
&lt;template slot="subtitle"&gt;
Enter your information
&lt;template v-slot:subtitle&gt;
Enter your personal information
&lt;/template&gt;
&lt;template slot="content"&gt;
&lt;p class="p-text-secondary"&gt;Enter your information&lt;/p&gt;
&lt;template v-slot:content&gt;
&lt;div class="p-fluid"&gt;
&lt;div class="p-field"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" v-model="$v.firstname.$model" :class="{'p-invalid':$v.firstname.$invalid && submitted}" /&gt;
&lt;small v-show="$v.firstname.$invalid && submitted" class="p-error"&gt;Firstname is required.&lt;/small&gt;
&lt;InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" /&gt;
&lt;small v-show="validationErrors.firstname && submitted" class="p-error"&gt;Firstname is required.&lt;/small&gt;
&lt;/div&gt;
&lt;div class="p-field"&gt;
&lt;label for="lastname"&gt;Lastname&lt;/label&gt;
&lt;InputText v-model="$v.lastname.$model" :class="{'p-invalid':$v.lastname.$invalid && submitted}" /&gt;
&lt;small v-show="$v.lastname.$invalid && submitted" class="p-error"&gt;Lastname is required.&lt;/small&gt;
&lt;InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" /&gt;
&lt;small v-show="validationErrors.lastname && submitted" class="p-error"&gt;Lastname is required.&lt;/small&gt;
&lt;/div&gt;
&lt;div class="p-field"&gt;
&lt;label for="age"&gt;Age&lt;/label&gt;
&lt;InputText id="age" v-model="$v.age.$model" :class="{'p-invalid':$v.age.$error && submitted}" /&gt;
&lt;small v-show="$v.age.$invalid && submitted" class="p-error"&gt;Age should be a number.&lt;/small&gt;
&lt;InputNumber id="age" v-model="age" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template slot="footer"&gt;
&lt;template v-slot:footer&gt;
&lt;div class="p-grid p-nogutter p-justify-between"&gt;
&lt;i&gt;&lt;/i&gt;
&lt;Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" /&gt;
&lt;Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Card&gt;
@ -220,42 +223,41 @@ export default {
</CodeHighlight>
<CodeHighlight lang="javascript">
import {required, integer} from 'vuelidate/lib/validators';
export default {
data () {
return {
firstname: '',
lastname: '',
age: '',
submitted: false
}
},
validations: {
firstname: {
required
},
lastname: {
required
},
age: {
integer
age: null,
submitted: false,
validationErrors: {}
}
},
methods: {
nextPage(isFormValid) {
nextPage() {
this.submitted = true;
if (!isFormValid) {
return;
}
if (this.validateForm() ) {
this.$emit('next-page', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
}
},
validateForm() {
if (!this.firstname.trim())
this.validationErrors['firstname'] = true;
else
delete this.validationErrors['firstname'];
if (!this.lastname.trim())
this.validationErrors['lastname'] = true;
else
delete this.validationErrors['lastname'];
return !Object.keys(this.validationErrors).length;
}
}
}
</CodeHighlight>
</TabPanel>
<TabPanel header="Seat">
<CodeHighlight>
<template v-pre>
@ -406,6 +408,7 @@ export default {
}
</CodeHighlight>
</TabPanel>
<TabPanel header="Confirmation">
<CodeHighlight>
<template v-pre>