csb for some form components

src/views/checkbox/CheckboxDoc.vue

@@ -113,9 +113,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <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="CheckboxDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -171,3 +174,74 @@ 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>Basic</h5>
+                <div class="p-field-checkbox">
+                    <Checkbox id="binary" v-model="checked" :binary="true" />
+                    <label for="binary">{{checked}}</label>
+                </div>
+
+                <h5>Multiple</h5>
+                <div class="p-field-checkbox">
+                    <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
+                    <label for="city1">Chicago</label>
+                </div>
+                <div class="p-field-checkbox">
+                    <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
+                    <label for="city2">Los Angeles</label>
+                </div>
+                <div class="p-field-checkbox">
+                    <Checkbox id="city3" name="city" value="New York" v-model="cities" />
+                    <label for="city3">New York</label>
+                </div>
+                <div class="p-field-checkbox">
+                    <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
+                    <label for="city4">San Francisco</label>
+                </div>
+
+                <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
+                <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
+                    <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+                    <label :for="category.key">{{category.name}}</label>
+                </div>
+            </div>
+        </div>
+    </div>                
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            cities: [],
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
+            selectedCategories: []
+        }
+    },
+    created() {
+        this.selectedCategories = this.categories.slice(1,3);
+    },
+}
+`
+
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/chips/ChipsDoc.vue

@@ -147,9 +147,12 @@ import Chips from 'primevue/chips';
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/chips" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="ChipsDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
@@ -187,3 +190,55 @@ 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 p-fluid">
+            <div class="card">
+                <h5>Basic</h5>
+                <Chips v-model="value1" />
+
+                <h5>Comma Separator</h5>
+                <Chips v-model="value2" separator="," />
+
+                <h5>Template</h5>
+                <Chips v-model="value3">
+                    <template #chip="slotProps">
+                        <div>
+                            <span>{{slotProps.value}} - (active) </span>
+                            <i class="pi pi-user-plus" style="font-size: 14px"></i>
+                        </div>
+                    </template>
+                </Chips>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/colorpicker/ColorPickerDoc.vue

@@ -168,9 +168,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <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="ColorPickerDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Inline&lt;/h3&gt;
@@ -197,3 +200,44 @@ 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>Inline</h5>
+                <ColorPicker v-model="color1" :inline="true" />
+
+                <h5>Overlay</h5>
+                <ColorPicker v-model="color2" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color1: null,
+            color2: '1976D2'
+        }
+    }
+}
+`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/dropdown/DropdownDoc.vue

@@ -339,9 +339,12 @@ data() {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/dropdown" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="DropdownDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
@@ -407,3 +410,95 @@ 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>Basic</h5>
+                <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
+
+                <h5>Editable</h5>
+                <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
+
+                <h5>Advanced with Templating, Filtering and Clear Icon</h5>
+                <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
+                    <template #value="slotProps">
+                        <div class="country-item country-item-value" v-if="slotProps.value">
+                            <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                            <div>{{ slotProps.value.name }}</div>
+                        </div>
+                    </template>
+                    <template #option="slotProps">
+                      <div class="country-item">
+                        <div class="country-item">
+                            <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                            <div>{{ slotProps.option.name }}</div>
+                        </div>
+                      </div>
+                    </template>
+                </Dropdown>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity1: null,
+            selectedCity2: null,
+            selectedCountry: null,
+            cities: [
+                {name: 'New York', code: 'NY'},
+                {name: 'Rome', code: 'RM'},
+                {name: 'London', code: 'LDN'},
+                {name: 'Istanbul', code: 'IST'},
+                {name: 'Paris', code: 'PRS'}
+            ],
+            countries: [
+                {name: 'Australia', code: 'AU'},
+                {name: 'Brazil', code: 'BR'},
+                {name: 'China', code: 'CN'},
+                {name: 'Egypt', code: 'EG'},
+                {name: 'France', code: 'FR'},
+                {name: 'Germany', code: 'DE'},
+                {name: 'India', code: 'IN'},
+                {name: 'Japan', code: 'JP'},
+                {name: 'Spain', code: 'ES'},
+                {name: 'United States', code: 'US'}
+            ]
+        }
+    }
+}
+`,
+                    style: `<style lang="scss" scoped>
+.p-dropdown {
+    width: 14rem;
+}
+
+.country-item,
+.country-item-value {
+    img {
+        width: 17px;
+        margin-right: 0.5rem;
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/fullcalendar/FullCalendarDoc.vue

@@ -215,9 +215,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
+				<div class="p-d-flex p-jc-between">
 					<a href="https://github.com/primefaces/primevue/tree/master/src/views/fullcalendar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 						<span>View on GitHub</span>
 					</a>
+					<LiveEditor name="FullCalendarDemo" :sources="sources" service="EventService" data="events"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;FullCalendar :events="events" :options="options" /&gt;
@@ -261,3 +264,69 @@ 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">
+                <FullCalendar :events="events" :options="options" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import '@fullcalendar/core';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import EventService from '../service/EventService';
+
+export default {
+    data() {
+        return {
+            options: {
+                plugins:[dayGridPlugin, timeGridPlugin, interactionPlugin],
+                initialDate : '2017-02-01',
+                headerToolbar: {
+                    left: 'prev,next',
+                    center: 'title',
+                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
+                },
+                editable: true
+            },
+            events: null
+        };
+    },
+    eventService: null,
+    created() {
+        this.eventService = new EventService();
+    },
+    mounted() {
+        this.eventService.getEvents().then(data => this.events = data);
+    }
+}`,
+					style: `<style scoped>
+@media screen and (max-width: 960px) {
+    ::v-deep(.fc-header-toolbar) {
+        display: flex;
+        flex-wrap: wrap;
+    }
+}
+</style>`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>

src/views/inputmask/InputMaskDoc.vue

@@ -129,9 +129,12 @@ import InputMask from 'primevue/inputmask';
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <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="InputMaskDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="p-fluid p-formgrid p-grid"&gt;
@@ -188,3 +191,74 @@ 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">
+                <div class="p-fluid p-formgrid p-grid">
+                    <div class="p-field p-col-12 p-md-4">
+                        <label for="basic">Basic</label>
+                        <InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
+                    </div>
+
+                    <div class="p-field p-col-12 p-md-4">
+                        <label for="ssn">SSN</label>
+                        <InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
+                    </div>
+
+                    <div class="p-field p-col-12 p-md-4">
+                        <label for="date">Date</label>
+                        <InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
+                    </div>
+
+                    <div class="p-field p-col-12 p-md-4">
+                        <label for="Phone">Phone</label>
+                        <InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
+                    </div>
+
+                    <div class="p-field p-col-12 p-md-4">
+                        <label for="phoneext">Phone Ext</label>
+                        <InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
+                    </div>
+
+                    <div class="p-field p-col-12 p-md-4">
+                        <label for="serial">Serial</label>
+                        <InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            val1: null,
+            val2: null,
+            val3: null,
+            val4: null,
+            val5: null,
+            val6: null
+        }
+    }
+}
+`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/inputnumber/InputNumberDoc.vue

@@ -366,9 +366,12 @@ Vertical
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <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="InputNumberDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Numerals&lt;/h3&gt;
@@ -507,3 +510,156 @@ 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>Numerals</h5>
+                <div class="p-fluid p-grid p-formgrid">
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="integeronly">Integer Only</label>
+                        <InputNumber id="integeronly" v-model="value1" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="withoutgrouping">Without Grouping</label>
+                        <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="minmaxfraction">Min-Max Fraction Digits</label>
+                        <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="minmax">Min-Max Boundaries</label>
+                        <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
+                    </div>
+
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="locale-user">User Locale</label>
+                        <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="locale-us">United States Locale</label>
+                        <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="locale-german">German Locale</label>
+                        <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="locale-indian">Indian Locale</label>
+                        <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
+                    </div>
+                </div>
+
+                <h5>Currency</h5>
+                <div class="p-grid p-fluid">
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="currency-us">United States</label>
+                        <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="currency-germany">Germany</label>
+                        <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="currency-india">India</label>
+                        <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="currency-japan">Japan</label>
+                        <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
+                    </div>
+                </div>
+
+                <h5>Prefix and Suffix</h5>
+                <div class="p-grid p-fluid">
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="mile">Mile</label>
+                        <InputNumber id="mile" v-model="value13" suffix=" mi" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="percent">Percent</label>
+                        <InputNumber id="percent" v-model="value14" prefix="%" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="expiry">Expiry</label>
+                        <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="temperature">Temperature</label>
+                        <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
+                    </div>
+                </div>
+
+                <h5>Buttons</h5>
+                <div class="p-grid p-fluid">
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="stacked">Stacked</label>
+                        <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="horizontal">Horizontal with Step</label>
+                        <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
+                            decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="minmax-buttons">Min-Max Boundaries</label>
+                        <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
+                    </div>
+                </div>
+
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="vertical" style="display: block">Vertical</label>
+                    <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
+                        decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 42723,
+            value2: 58151,
+            value3: 2351.35,
+            value4: 50,
+            value5: 151351,
+            value6: 115744,
+            value7: 635524,
+            value8: 732762,
+            value9: 1500,
+            value10: 2500,
+            value11: 4250,
+            value12: 5002,
+            value13: 20,
+            value14: 50,
+            value15: 10,
+            value16: 20,
+            value17: 20,
+            value18: 10.50,
+            value19: 25,
+            value20: 50
+        }
+    }
+}
+`               }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/inputswitch/InputSwitchDoc.vue

@@ -101,9 +101,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
+				<div class="p-d-flex p-jc-between">
 					<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputswitch" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 						<span>View on GitHub</span>
 					</a>
+					<LiveEditor name="InputSwitchDemo" :sources="sources"/>
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -130,3 +133,44 @@ 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>Basic</h5>
+                <InputSwitch v-model="checked1" />
+
+                <h5>Preselection</h5>
+                <InputSwitch v-model="checked2" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: false,
+            checked2: true
+        }
+    }
+}
+`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>

src/views/inputtext/InputTextDoc.vue

@@ -151,9 +151,12 @@ import InputText from 'primevue/inputtext';
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <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="InputTextDemo" :sources="sources" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="card"&gt;
@@ -225,3 +228,103 @@ 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>Basic</h5>
+                <InputText type="text" v-model="value1" />
+                <span :style="{marginLeft: '.5em'}">{{value1}}</span>
+
+                <h5>Floating Label</h5>
+                <span class="p-float-label">
+                    <InputText id="username" type="text" v-model="value2" />
+                    <label for="username">Username</label>
+                </span>
+
+                <h5>Left Icon</h5>
+                <span class="p-input-icon-left">
+                    <i class="pi pi-search" />
+                    <InputText type="text" v-model="value3" placeholder="Search" />
+                </span>
+
+                <h5>Right Icon</h5>
+                <span class="p-input-icon-right">
+                    <i class="pi pi-spin pi-spinner" />
+                    <InputText type="text" v-model="value4" />
+                </span>
+
+                <h5>Help Text</h5>
+                <div class="p-field">
+                    <label for="username1">Username</label>
+                    <InputText id="username1" type="username" aria-describedby="username1-help" />
+                    <small id="username1-help">Enter your username to reset your password.</small>
+                </div>
+
+                <h5>Invalid</h5>
+                <div class="p-field">
+                    <label for="username2">Username</label>
+                    <InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
+                    <small id="username2-help" class="p-invalid">Username is not available.</small>
+                </div>
+
+                <h5>Disabled</h5>
+                <InputText type="text" v-model="value5" disabled />
+
+                <h5>Sizes</h5>
+                <div class="sizes">
+                    <InputText type="text" class="p-inputtext-sm" placeholder="Small" />
+                    <InputText type="text" placeholder="Normal" />
+                    <InputText type="text" class="p-inputtext-lg"  placeholder="Large" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            value4: null,
+            value5: 'PrimeVue'
+        }
+    }
+}
+`,
+                    style: `<style lang="scss" scoped>
+.sizes {
+    .p-inputtext {
+        display: block;
+        margin-bottom: .5rem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.p-field * {
+    display: block;
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/knob/KnobDoc.vue

@@ -210,9 +210,12 @@ data() {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/knob" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="KnobDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="p-grid p-formgrid p-text-center"&gt;
@@ -279,3 +282,83 @@ 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">
+                <div class="p-grid p-formgrid p-text-center">
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5>Basic</h5>
+                        <Knob v-model="value1" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5>Readonly</h5>
+                        <Knob v-model="value2" readonly />
+                    </div>
+                     <div class="p-field p-col-12 p-md-4">
+                         <h5>Disabled</h5>
+                        <Knob v-model="value3" disabled />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Min/Max</h5>
+                        <Knob v-model="value4" :min="-50" :max="50" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Step</h5>
+                        <Knob v-model="value5" :step="10" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                         <h5 class="p-mt-3">Template</h5>
+                        <Knob v-model="value6" valueTemplate="{value}%" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Stroke</h5>
+                        <Knob v-model="value7" :strokeWidth="5" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Size</h5>
+                        <Knob v-model="value8" :size="200"/>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Color</h5>
+                        <Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise"  />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 0,
+            value2: 50,
+            value3: 75,
+            value4: 10,
+            value5: 40,
+            value6: 60,
+            value7: 40,
+            value8: 60,
+            value9: 50,
+        }
+    }
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/listbox/ListboxDoc.vue

@@ -236,9 +236,12 @@ data() {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/listbox" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="ListboxDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Single&lt;/h5&gt;
@@ -291,3 +294,69 @@ 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>Single</h5>
+                <Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
+
+                <h5>Advanced with Templating, Filtering and Multiple Selection</h5>
+                <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem">
+                    <template #option="slotProps">
+                        <div class="country-item">
+                            <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 18px; margin-right: .5rem;"/>
+                            <div>{{slotProps.option.name}}</div>
+                        </div>
+                    </template>
+                </Listbox>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            selectedCountries: null,
+            cities: [
+                {name: 'New York', code: 'NY'},
+                {name: 'Rome', code: 'RM'},
+                {name: 'London', code: 'LDN'},
+                {name: 'Istanbul', code: 'IST'},
+                {name: 'Paris', code: 'PRS'}
+            ],
+            countries: [
+                {name: 'Australia', code: 'AU'},
+                {name: 'Brazil', code: 'BR'},
+                {name: 'China', code: 'CN'},
+                {name: 'Egypt', code: 'EG'},
+                {name: 'France', code: 'FR'},
+                {name: 'Germany', code: 'DE'},
+                {name: 'India', code: 'IN'},
+                {name: 'Japan', code: 'JP'},
+                {name: 'Spain', code: 'ES'},
+                {name: 'United States', code: 'US'}
+            ]
+        }
+    }
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/multiselect/MultiSelectDoc.vue

@@ -328,9 +328,13 @@ data() {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/multiselect" class="btn-viewsource" target="_blank" rel="noopener noreferrer">                    		
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="MultiSelectDemo" :sources="sources"/>
+                </div>
+
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
@@ -424,3 +428,108 @@ 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>Basic</h5>
+                <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select a City" />
+
+                <h5>Chips</h5>
+                <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" placeholder="Select a City" display="chip" />
+
+                <h5>Advanced with Templating and Filtering</h5>
+                <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
+                    <template #value="slotProps">
+                        <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
+                            <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                            <div>{{option.name}}</div>
+                        </div>
+                        <template v-if="!slotProps.value || slotProps.value.length === 0">
+                            Select Countries
+                        </template>
+                    </template>
+                    <template #option="slotProps">
+                        <div class="country-item">
+                            <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                            <div>{{slotProps.option.name}}</div>
+                        </div>
+                    </template>
+                </MultiSelect>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities1: null,
+            selectedCities2: null,
+            selectedCountries: null,
+            cities: [
+                {name: 'New York', code: 'NY'},
+                {name: 'Rome', code: 'RM'},
+                {name: 'London', code: 'LDN'},
+                {name: 'Istanbul', code: 'IST'},
+                {name: 'Paris', code: 'PRS'}
+            ],
+            countries: [
+                {name: 'Australia', code: 'AU'},
+                {name: 'Brazil', code: 'BR'},
+                {name: 'China', code: 'CN'},
+                {name: 'Egypt', code: 'EG'},
+                {name: 'France', code: 'FR'},
+                {name: 'Germany', code: 'DE'},
+                {name: 'India', code: 'IN'},
+                {name: 'Japan', code: 'JP'},
+                {name: 'Spain', code: 'ES'},
+                {name: 'United States', code: 'US'}
+            ]
+        }
+    }
+}`,
+                    style: `<style lang="scss" scoped>
+.p-multiselect {
+    min-width: 15rem;
+}
+
+::v-deep(.multiselect-custom) {
+    .p-multiselect-label:not(.p-placeholder) {
+        padding-top: .25rem;
+        padding-bottom: .25rem;
+    }
+
+    .country-item-value {
+        padding: .25rem .5rem;
+        border-radius: 3px;
+        display: inline-flex;
+        margin-right: .5rem;
+        background-color: var(--primary-color);
+        color: var(--primary-color-text);
+    }
+
+    img {
+        width: 17px;
+        margin-right: 0.5rem;
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/password/PasswordDoc.vue

@@ -139,9 +139,12 @@ import Password from 'primevue/password';
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/password" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="PasswordDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code>
 &lt;Password v-model="value" /&gt;
@@ -163,3 +166,38 @@ 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">
+                <Password v-model="value" placeholder="Password"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/radiobutton/RadioButtonDoc.vue

@@ -109,9 +109,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/radiobutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="RadioButtonDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -160,3 +163,65 @@ 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>Basic</h5>
+                <div class="p-field-radiobutton">
+                    <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
+                    <label for="city1">Chicago</label>
+                </div>
+                <div class="p-field-radiobutton">
+                    <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
+                    <label for="city2">Los Angeles</label>
+                </div>
+                <div class="p-field-radiobutton">
+                    <RadioButton id="city3" name="city" value="New York" v-model="city" />
+                    <label for="city3">New York</label>
+                </div>
+                <div class="p-field-radiobutton">
+                    <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
+                    <label for="city4">San Francisco</label>
+                </div>
+
+                <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
+                <div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
+                    <RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
+                    <label :for="category.key">{{category.name}}</label>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            city: null,
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
+            selectedCategory: null
+        }
+    },
+    created() {
+        this.selectedCategory = this.categories[1];
+    }
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/selectbutton/SelectButtonDoc.vue

@@ -158,9 +158,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/selectbutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="SelectButtonDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Single Selection&lt;/h5&gt;
@@ -206,3 +209,62 @@ 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>Single Selection</h5>
+                <SelectButton v-model="value1" :options="options" />
+
+                <h5>Multiple Selection</h5>
+                <SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple />
+
+                <h5>Custom Content</h5>
+                <SelectButton v-model="value3" :options="justifyOptions" dataKey="value">
+                    <template #option="slotProps">
+                        <i :class="slotProps.option.icon"></i>
+                    </template>
+                </SelectButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 'Off',
+            value2: null,
+            value3: null,
+            options: ['Off', 'On'],
+            paymentOptions: [
+                {name: 'Option 1', value: 1},
+                {name: 'Option 2', value: 2},
+                {name: 'Option 3', value: 3}
+            ],
+            justifyOptions: [
+                {icon: 'pi pi-align-left', value: 'left'},
+                {icon: 'pi pi-align-right', value: 'Right'},
+                {icon: 'pi pi-align-center', value: 'Center'},
+                {icon: 'pi pi-align-justify', value: 'Justify'}]
+        }
+    }
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/slider/SliderDoc.vue

@@ -183,9 +183,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/slider" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="SliderDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic: {{value1}}&lt;/h3&gt;
@@ -237,3 +240,60 @@ 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>Basic: {{value1}}</h5>
+                <Slider v-model="value1" />
+
+                <h5>Step: {{value3}}</h5>
+                <Slider v-model="value3" :step="20" />
+
+                <h5>Range: {{value4}}</h5>
+                <Slider v-model="value4" :range="true" />
+
+                <h5>Vertical: {{value5}}</h5>
+                <Slider v-model="value5" orientation="vertical" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: 50,
+            value3: 20,
+            value4: [20,80],
+            value5: 50
+        }
+    }
+}`,
+                    style: `<style scoped>
+.p-slider-horizontal, .p-inputtext {
+    width: 14rem;
+}
+.p-slider-vertical {
+     height: 14rem;
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/textarea/TextareaDoc.vue

@@ -81,9 +81,12 @@ import Textarea from 'primevue/textarea';
 			</TabPanel>
 
 			<TabPanel header="Source">
+				<div class="p-d-flex p-jc-between">
 					<a href="https://github.com/primefaces/primevue/tree/master/src/views/textarea" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 						<span>View on GitHub</span>
 					</a>
+					<LiveEditor name="TextareaDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -114,3 +117,47 @@ 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>Basic</h5>
+                <Textarea v-model="value1" rows="5" cols="30" />
+
+                <h5>Auto Resize</h5>
+                <Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
+
+                <h5>Disabled</h5>
+                <Textarea v-model="value3" disabled rows="5" cols="30" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: ''
+        }
+    }
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>

src/views/togglebutton/ToggleButtonDoc.vue

@@ -143,9 +143,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/togglebutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="ToggleButtonDemo" :sources="sources"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -172,3 +175,43 @@ 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>Basic</h5>
+                <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
+
+                <h5>Customized</h5>
+                <ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: false,
+            checked2: true
+        }
+    }
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/tristatecheckbox/TriStateCheckboxDoc.vue

@@ -79,9 +79,12 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
 			</TabPanel>
 
 			<TabPanel header="Source">
+				<div class="p-d-flex p-jc-between">
 					<a href="https://github.com/primefaces/primevue/tree/master/src/views/tristatecheckbox" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 						<span>View on GitHub</span>
 					</a>
+					<LiveEditor name="TriStateCheckboxDemo" :sources="sources"/>
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="p-field-checkbox p-m-0"&gt;
@@ -106,3 +109,41 @@ 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">
+                <div class="p-field-checkbox p-m-0">
+                    <TriStateCheckbox v-model="value" />
+                    <label>{{value == null ? 'null' : value}}</label>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>