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", "node-sass": "^4.12.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"axios": "^0.19.0", "axios": "^0.19.0",
"vuelidate": "^0.7.4",
"chart.js": "2.7.3", "chart.js": "2.7.3",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-concat": "^2.6.0", "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/daygrid/main.min.css';
import '@fullcalendar/timegrid/main.min.css'; import '@fullcalendar/timegrid/main.min.css';
import './assets/styles/flags.css'; import './assets/styles/flags.css';
//import Vuelidate from 'vuelidate';
//Vue.use(Vuelidate);
/*router.beforeEach(function (to, from, next) { /*router.beforeEach(function (to, from, next) {
window.scrollTo(0, 0); window.scrollTo(0, 0);
next(); next();

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

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

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

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

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

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