From 754131d09e8f1c190862c8a2e16d50f56c28911a 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: Fri, 8 Jan 2021 18:08:42 +0300
Subject: [PATCH] some csb for components

---
 src/views/card/CardDoc.vue               |  73 ++++++++++-
 src/views/editor/EditorDoc.vue           |  60 ++++++++-
 src/views/fieldset/FieldsetDoc.vue       |  68 +++++++++-
 src/views/scrollpanel/ScrollPanelDoc.vue | 132 +++++++++++++++++++-
 src/views/timeline/TimelineDoc.vue       | 151 ++++++++++++++++++++++-
 src/views/toolbar/ToolbarDoc.vue         |  51 +++++++-
 6 files changed, 512 insertions(+), 23 deletions(-)

diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue
index 61a491402..d75828f93 100755
--- a/src/views/card/CardDoc.vue
+++ b/src/views/card/CardDoc.vue
@@ -72,9 +72,12 @@ import Card from 'primevue/card';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/card" 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/card" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+						<span>View on GitHub</span>
+					</a>
+					<LiveEditor name="CardDemo" :sources="sources" :components="['Card', 'Button']"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;Card style="width: 25rem; margin-bottom: 2em"&gt;
@@ -111,4 +114,66 @@ import Card from 'primevue/card';
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+	data() {
+		return {
+			sources: {
+				'template': {
+					content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <Card style="width: 25rem; margin-bottom: 2em">
+                <template #title>
+                    Simple Card
+                </template>
+                <template #content>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+                </template>
+            </Card>
+
+            <Card style="width: 25em">
+                <template #header>
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                </template>
+                <template #title>
+                    Advanced Card
+                </template>
+                <template #subtitle>
+                    Card subtitle
+                </template>
+                <template #content>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+                </template>
+                <template #footer>
+                    <Button icon="pi pi-check" label="Save" />
+                    <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
+                </template>
+            </Card>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+}`,
+					style: `<style lang="scss" scoped>
+p {
+    line-height: 1.5;
+    margin: 0;
+}
+</style>`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue
index 55898b2f7..d088f20b0 100755
--- a/src/views/editor/EditorDoc.vue
+++ b/src/views/editor/EditorDoc.vue
@@ -147,9 +147,12 @@ npm install quill --save
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" 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/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="EditorDemo" :sources="sources" :directives="['Tooltip']"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Default&lt;/h3&gt;
@@ -183,4 +186,53 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</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">
+                <h5>Default</h5>
+                <Editor v-model="value1" editorStyle="height: 320px"/>
+
+                <h5>Customized</h5>
+                <Editor v-model="value2" editorStyle="height: 320px">
+                    <template v-slot:toolbar>
+                        <span class="ql-formats">
+                            <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
+                            <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
+                            <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
+                        </span>
+                    </template>
+                </Editor>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>',
+            value2: ''
+        }
+    }
+}
+`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue
index ef2310957..c21cab83c 100755
--- a/src/views/fieldset/FieldsetDoc.vue
+++ b/src/views/fieldset/FieldsetDoc.vue
@@ -161,9 +161,12 @@ import Fieldset from 'primevue/fieldset';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/fieldset" 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/fieldset" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="FieldsetDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Regular&lt;/h5&gt;
@@ -200,4 +203,61 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</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">
+                <h5>Regular</h5>
+                <Fieldset legend="Header">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </Fieldset>
+
+                <h5>Toggleable</h5>
+                <Fieldset legend="Header" :toggleable="true">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </Fieldset>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: 'PrimeVue'
+        }
+    }
+}`,
+                    style: `<style lang="scss" scoped>
+.p-fieldset p {
+    line-height: 1.5;
+    margin: 0;
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index e492bb553..2de783266 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -94,9 +94,12 @@ import ScrollPanel from 'primevue/scrollpanel';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/scrollpanel" 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/scrollpanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="ScrollPanelDemo" :sources="sources"/>
+                </div>
 
 <pre v-code>
 <code><template v-pre>
@@ -208,4 +211,125 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</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">
+                <div class="p-grid">
+                    <div class="p-col-12 p-md-4 p-p-5">
+                        <ScrollPanel style="width: 100%; height: 200px">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                Vitae et leo duis ut diam.
+                                Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                                Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                                Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                                Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                                Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                                Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                                Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                                Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                                Mattis aliquam faucibus purus in massa tempor nec.
+                            </p>
+                        </ScrollPanel>
+                    </div>
+                    <div class="p-col-12 p-md-4 p-p-5">
+                        <ScrollPanel style="width: 100%; height: 200px" class="custombar1">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                Vitae et leo duis ut diam.
+                                Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                                Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                                Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                                Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                                Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                                Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                                Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                                Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                                Mattis aliquam faucibus purus in massa tempor nec.
+                            </p>
+                        </ScrollPanel>
+                    </div>
+                    <div class="p-col-12 p-md-4 p-p-5">
+                        <ScrollPanel style="width: 100%; height: 200px" class="custombar2">
+                            <p style="width: 600px">
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                Vitae et leo duis ut diam.
+                                Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                                Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                                Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                                Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                                Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                                Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                                Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                                Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                                Mattis aliquam faucibus purus in massa tempor nec.
+                            </p>
+                        </ScrollPanel>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}`,
+                    style: `<style lang="scss" scoped>
+::v-deep(.p-scrollpanel) {
+    p {
+        padding: .5rem;
+        line-height: 1.5;
+        margin: 0;
+    }
+
+    &.custombar1 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--surface-b);
+        }
+
+        .p-scrollpanel-bar {
+            background-color: var(--primary-color);
+            opacity: 1;
+            transition: background-color .2s;
+
+            &:hover {
+                background-color: #007ad9;
+            }
+        }
+    }
+
+    &.custombar2 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--surface-b);
+            border-bottom: 9px solid var(--surface-b);
+        }
+
+        .p-scrollpanel-bar {
+            background-color: var(--surface-d);
+            border-radius: 0;
+            opacity: 1;
+            transition: background-color .2s;
+        }
+    }  
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/timeline/TimelineDoc.vue b/src/views/timeline/TimelineDoc.vue
index bd15bb802..4a86b214c 100644
--- a/src/views/timeline/TimelineDoc.vue
+++ b/src/views/timeline/TimelineDoc.vue
@@ -238,9 +238,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/timeline" 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/timeline" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+						<span>View on GitHub</span>
+					</a>
+					<LiveEditor name="TimelineDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="card"&gt;
@@ -361,3 +364,145 @@ 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">
+                <h5>Left Align</h5>
+                <Timeline :value="events1">
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                </Timeline>
+            </div>
+
+            <div class="card">
+                <h5>Right Align</h5>
+                <Timeline :value="events1" align="right">
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                </Timeline>
+            </div>
+
+            <div class="card">
+                <h5>Alternate Align</h5>
+                <Timeline :value="events1" align="alternate">
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                </Timeline>
+            </div>
+
+            <div class="card">
+                <h5>Opposite Content</h5>
+                <Timeline :value="events1">
+                    <template #opposite="slotProps">
+                        <small class="p-text-secondary">{{slotProps.item.date}}</small>
+                    </template>
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                </Timeline>
+            </div>
+
+            <div class="card">
+                <h5>Horizontal</h5>
+                <h6>Top Align</h6>
+                <Timeline :value="events2" layout="horizontal" align="top">
+                    <template #content="slotProps">
+                        {{slotProps.item}}
+                    </template>
+                </Timeline>
+
+                <h6>Bottom Align</h6>
+                <Timeline :value="events2" layout="horizontal" align="bottom">
+                    <template #content="slotProps">
+                        {{slotProps.item}}
+                    </template>
+                </Timeline>
+
+                <h6>Alternate Align</h6>
+                <Timeline :value="events2" layout="horizontal" align="alternate">
+                    <template #opposite>
+                        &nbsp;
+                    </template>
+                    <template #content="slotProps">
+                        {{slotProps.item}}
+                    </template>
+                </Timeline>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events1: [
+                {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+            ],
+            events2: [
+                "2020", "2021", "2022", "2023"
+            ]
+        }
+    }
+}`,
+					style: `<style lang="scss" scoped>
+.custom-marker {
+    display: flex;
+    width: 2rem;
+    height: 2rem;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+::v-deep(.p-timeline-event-content)
+::v-deep(.p-timeline-event-opposite) {
+    line-height: 1;
+}
+
+@media screen and (max-width: 960px) {
+    ::v-deep(.customized-timeline) {
+            .p-timeline-event:nth-child(even) {
+                flex-direction: row !important;
+                
+                .p-timeline-event-content {
+                    text-align: left !important;
+                }
+            }
+
+            .p-timeline-event-opposite {
+                flex: 0;
+            }
+
+            .p-card {
+                margin-top: 1rem;
+            }
+        }
+}
+</style>`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index 44bc0e6a1..f492251aa 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -62,9 +62,12 @@ import Toolbar from 'primevue/toolbar';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/toolbar" 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/toolbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="ToolbarDemo" :sources="sources" :components="['Button']"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;Toolbar&gt;
@@ -120,4 +123,44 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+    data() {
+        return {
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <Toolbar>
+                <template #left>
+                    <Button label="New" icon="pi pi-plus" class="p-mr-2" />
+                    <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
+                    <i class="pi pi-bars p-toolbar-separator p-mr-2" />
+                </template>
+
+                <template #right>
+                    <Button icon="pi pi-search" class="p-mr-2" />
+                    <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
+                    <Button icon="pi pi-times" class="p-button-danger" />
+                </template>
+            </Toolbar>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file