From 26b76c023cc4988477bae023fe567fb06d706cbe 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: Tue, 26 Jan 2021 13:48:46 +0300
Subject: [PATCH] router for csb

---
 src/views/steps/StepsDoc.vue     | 378 ++++++++++++++++++++++++++++++-
 src/views/tabmenu/TabMenuDoc.vue | 143 +++++++++++-
 2 files changed, 515 insertions(+), 6 deletions(-)

diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index 34cf8fdc0..f1edf5448 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -128,9 +128,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+                <div class="p-d-flex p-jc-between">
+                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="StepsDemo" :sources="sources" :toastService="true" :router="true" :components="['Card', 'InputText', 'InputNumber', 'Button', 'Dropdown', 'InputMask', 'Checkbox']" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="card"&gt;
@@ -503,3 +506,372 @@ export default {
 		</TabView>
 	</div>
 </template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+    data() {
+        return {
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <Toast />
+        <div class="content-section implementation">
+            <div class="card">
+                <Steps :model="items" :readonly="true" />
+            </div>
+
+            <router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
+                <keep-alive>
+                    <component :is="Component" />
+                </keep-alive>
+            </router-view>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [{
+                label: 'Personal',
+                to: "/"
+            },
+            {
+                label: 'Seat',
+                to: "/seat",
+            },
+            {
+                label: 'Payment',
+                to: "/payment",
+            },
+            {
+                label: 'Confirmation',
+                to: "/confirmation",
+            }],
+            formObject: {}
+        }
+    },
+    methods: {
+        nextPage(event) {
+            for (let field in event.formData) {
+                this.formObject[field] = event.formData[field];
+            }
+
+            this.$router.push(this.items[event.pageIndex + 1].to);
+        },
+        prevPage(event) {
+            this.$router.push(this.items[event.pageIndex - 1].to);
+        },
+        complete() {
+            this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.'});
+        }
+    }
+}`
+                },
+                'pages': [
+                    {
+                        'name': 'PersonalDemo',
+                        'template': `<template>
+    <div class="stepsdemo-content">
+        <Card>
+            <template v-slot:title>
+                Personal Information
+            </template>
+            <template v-slot:subtitle>
+                Enter your personal information
+            </template>
+            <template v-slot:content>
+                <div class="p-fluid">
+                    <div class="p-field">
+                        <label for="firstname">Firstname</label>
+                        <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 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>
+                        <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()" icon="pi pi-angle-right" iconPos="right" />
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            firstname: '',
+            lastname: '',
+            age: null,
+            submitted: false,
+            validationErrors: {}
+        }
+    },
+    methods: {
+        nextPage() {
+            this.submitted = true;
+            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;
+        }
+    }
+}
+`
+                    },
+                    {
+                        'name': 'SeatDemo',
+                        'template': `<template>
+    <div class="stepsdemo-content">
+        <Card>
+           <template v-slot:title>
+                Seat Information
+            </template>
+            <template v-slot:subtitle>
+                Choose your seat
+            </template>
+            <template v-slot:content>
+                <div class="p-fluid p-formgrid p-grid">
+                    <div class="p-field p-col-12 p-md-6">
+                        <label for="class">Class</label>
+                        <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <label for="lastname">Wagon</label>
+                        <Dropdown inputId="wagon" v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
+                    </div>
+                    <div class="p-field p-col-12">
+                        <label for="seat">Seat</label>
+                        <Dropdown inputId="seat" v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="Select a Seat" />
+                    </div>
+                </div>
+            </template>
+            <template v-slot:footer>
+                <div class="p-grid p-nogutter p-justify-between">
+                    <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
+                    <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            selectedClass: '',
+            classes: [
+                {name: 'First Class', code: 'A', factor: 1},
+                {name: 'Second Class', code: 'B', factor: 2},
+                {name: 'Third Class', code: 'C', factor: 3}
+            ],
+            vagons: [],
+            selectedVagon: '',
+            seats: [],
+            selectedSeat: ''
+        }
+    },
+    methods: {
+        setVagons(event) {
+            if (this.selectedClass && event.value) {
+                this.vagons = [];
+                this.seats = [];
+                for (let i = 1; i < 3 * event.value.factor; i++) {
+                    this.vagons.push({vagon: i + event.value.code, type: event.value.name, factor: event.value.factor});
+                }
+            }
+        },
+        setSeats(event) {
+            if (this.selectedVagon && event.value) {
+                this.seats = [];
+                for (let i = 1; i < 10 * event.value.factor; i++) {
+                    this.seats.push({seat: i, type: event.value.type});
+                }
+            }
+        },
+        nextPage() {
+            this.$emit('next-page', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
+        },
+        prevPage() {
+            this.$emit('prev-page', {pageIndex: 1});
+        }
+    }
+}
+`
+                    },
+                    {
+                        'name': 'PaymentDemo',
+                        'template': `<template>
+    <div class="stepsdemo-content">
+        <Card>
+            <template v-slot:title>
+                Payment Information
+            </template>
+            <template v-slot:subtitle>
+                Enter your card details
+            </template>
+            <template v-slot:content>
+                <div class="p-fluid p-formgrid p-grid">
+                    <div class="p-field p-col-12">
+                        <label for="class">Card Holder Name</label>
+                        <InputText type="text" v-model="cardholderName" />
+                    </div>
+                    <div class="p-field p-col-8">
+                        <label id="number" for="lastname">Number</label>
+                        <InputMask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber" />
+                    </div>
+                    <div class="p-field p-col-2">
+                        <label id="date" for="date">Date</label>
+                        <InputMask id="date" mask="99/99" v-model="date" />
+                    </div>
+                    <div class="p-field p-col-2">
+                        <label for="cvv">CVV</label>
+                        <InputMask id="cvv" mask="999" v-model="cvv" />
+                    </div>
+                    <div class="p-field-checkbox p-col-12">
+                        <Checkbox id="remember" v-model="remember" :binary="true" />
+                        <label for="remember" class="p-checkbox-label">Save credit card information for future</label>
+                    </div>
+                </div>
+            </template>
+            <template v-slot:footer>
+                <div class="p-grid p-nogutter p-justify-between">
+                    <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
+                    <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            cardholderName:'',
+            cardholderNumber:'',
+            date:'',
+            cvv:'',
+            remember:false
+        }
+    },
+    methods: {
+        nextPage() {
+            this.$emit('next-page', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
+        },
+        prevPage() {
+            this.$emit('prev-page', {pageIndex: 2});
+        }
+    }
+}
+`
+                    },
+                    {
+                        'name': 'ConfirmationDemo',
+                        'template': `<template>
+    <div class="stepsdemo-content">
+        <Card>
+            <template v-slot:title>
+                Confirmation
+            </template>
+            <template v-slot:content>
+                <div class="p-field p-col-12">
+                    <label for="class">Name</label>
+                    <b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Age</label>
+                    <b>{{formData.age ? formData.age : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Seat Class</label>
+                    <b>{{formData.class ? formData.class : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Wagon Number</label>
+                    <b>{{formData.vagon ? formData.vagon : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Seat</label>
+                    <b>{{formData.seat ? formData.seat : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Cardholder Name</label>
+                    <b>{{formData.cardholderName ? formData.cardholderName : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Card Number</label>
+                    <b>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Date</label>
+                    <b>{{formData.date ? formData.date : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">CVV</label>
+                    <b>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</b>
+                </div>
+            </template>
+            <template v-slot:footer>
+                <div class="p-grid p-nogutter p-justify-between">
+                    <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
+                    <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/>
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        formData: Object
+    },
+    methods: {
+        prevPage() {
+            this.$emit('prev-page', {pageIndex: 3});
+        },
+        complete() {
+            this.$emit('complete');
+        }
+    }
+}
+`
+                    }
+                ]
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index ecefc9505..de62431fe 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -106,9 +106,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+                <div class="p-d-flex p-jc-between">
+                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="TabMenuDemo" :sources="sources" :router="true" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;TabMenu :model="items" /&gt;
@@ -137,3 +140,137 @@ export default {
 		</TabView>
 	</div>
 </template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+    data() {
+        return {
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <TabMenu :model="items" />
+                <router-view />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Home', 
+                    icon: 'pi pi-fw pi-home', 
+                    to: '/'
+                },
+                {
+                    label: 'Calendar', 
+                    icon: 'pi pi-fw pi-calendar', 
+                    to: '/calendar'
+                },
+                {
+                    label: 'Edit', 
+                    icon: 'pi pi-fw pi-pencil', 
+                    to: '/edit'
+                },
+                {
+                    label: 'Documentation', 
+                    icon: 'pi pi-fw pi-file', 
+                    to: '/documentation'
+                },
+                {
+                    label: 'Settings', 
+                    icon: 'pi pi-fw pi-cog', 
+                    to: '/settings'
+                }
+            ]
+        }
+    }
+}`,
+                    style: `<style scoped lang="scss">
+::v-deep(.tabmenudemo-content) {
+    padding: 2rem 1rem;
+}
+</style>`
+                },
+                'pages': [
+                    {
+                        'name': 'HomeDemo',
+                        'template': `<template>
+    <div class="tabmenudemo-content">
+        <h5>Home Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}`
+                    },
+                    {
+                        'name': 'CalendarDemo',
+                        'template': `<template>
+    <div class="tabmenudemo-content">
+        <h5>Calendar Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}`
+                    },
+                    {
+                        'name': 'EditDemo',
+                        'template': `<template>
+    <div class="tabmenudemo-content">
+        <h5>Edit Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}`
+                    },
+                    {
+                        'name': 'DocumentationDemo',
+                        'template': `<template>
+    <div class="tabmenudemo-content">
+        <h5>Documentation Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}`
+                    },
+                    {
+                        'name': 'SettingsDemo',
+                        'template': `<template>
+    <div class="tabmenudemo-content">
+        <h5>Settings Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}`
+                    }
+                ]
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>