Add demo actions and github props

src/AppDocumentation.vue

@@ -78,7 +78,7 @@ export default {
                 tabs.push(
                     <TabPanel key={sourceType} header={this.sources[sourceType].tabName}>
                         <pre v-code><code>
-                            {this.sources[sourceType].content.replace('<\\/script>', '<\\/script>')}
+                            {this.sources[sourceType].content.replace('<\\/script>', '<\/script>')}
                         </code></pre>
                     </TabPanel>
                 );

src/assets/styles/app/_content.scss

@@ -210,4 +210,17 @@
             justify-content: space-between;
         }
     }
+
+    .box {
+        background-color: var(--surface-e);
+        text-align: center;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        border-radius: 4px;
+        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+    }
+
+    .box-stretched {
+        height: 100%;
+    }
 }

src/views/accordion/AccordionDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Accordion</h1>
                 <p>Accordion groups a collection of contents in tabs.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/accordion/AccordionDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="AccordionDemo" :sources="sources">
+	<AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Accordion from 'primevue/accordion';

src/views/autocomplete/AutoCompleteDemo.vue

@@ -5,7 +5,7 @@
                 <h1>AutoComplete</h1>
                 <p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/autocomplete/AutoCompleteDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']">
+    <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import AutoComplete from 'primevue/autocomplete';

src/views/avatar/AvatarDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Avatar</h1>
                 <p>Avatar represents people using icons, labels and images.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/avatar/AvatarDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="AvatarDemo" :sources="sources">
+	<AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Avatar from 'primevue/avatar';

src/views/badge/BadgeDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Badge</h1>
                 <p>Badge is a small status indicator for another element.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/badge/BadgeDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="BadgeDemo" :sources="sources">
+	<AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
         <h5>Getting Started</h5>
         <p>Badge can either be used as a standalone component or as a directive.</p>
 

src/views/blockui/BlockUIDemo.vue

@@ -5,6 +5,7 @@
                 <h1>BlockUI</h1>
                 <p>BlockUI can either block other components or the whole page.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/blockui/BlockUIDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="BlockUIDemo" :sources="sources">
+	<AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import BlockUI from 'primevue/blockui';

src/views/breadcrumb/BreadcrumbDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Breadcrumb</h1>
                 <p>Breadcrumb provides contextual information about page hierarchy.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/breadcrumb/BreadcrumbDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="BreadcrumbDemo" :sources="sources">
+	<AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Breadcrumb from 'primevue/breadcrumb';

src/views/button/ButtonDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Button</h1>
                 <p>Button is an extension to standard button element with icons and theming.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/button/ButtonDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ButtonDemo" :sources="sources">
+	<AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
                 <h5>Import</h5>
 <pre v-code.script><code>
 import Button from 'primevue/button';

src/views/calendar/CalendarDemo.vue

@@ -5,7 +5,7 @@
                 <h1>Calendar</h1>
                 <p>Calendar is an input component to select a date.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/calendar/CalendarDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CalendarDemo" :sources="sources">
+	<AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Calendar from 'primevue/calendar';

src/views/card/CardDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Card</h1>
                 <p>Card is a flexible container component.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/card/CardDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CardDemo" :sources="sources">
+	<AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Card from 'primevue/card';

src/views/carousel/CarouselDemo.vue

@@ -5,6 +5,7 @@
 				<h1>Carousel</h1>
 				<p>Carousel is a content slider featuring various customization options.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">

src/views/carousel/CarouselDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
+	<AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Carousel from 'primevue/carousel';

src/views/cascadeselect/CascadeSelectDemo.vue

@@ -5,7 +5,7 @@
                 <h1>CascadeSelect</h1>
                 <p>CascadeSelect displays a nested structure of options.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/cascadeselect/CascadeSelectDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CascadeSelectDemo" :sources="sources">
+	<AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import CascadeSelect from 'primevue/cascadeselect';

src/views/chart/BarChartDemo.vue

@@ -5,6 +5,7 @@
                 <h1>BarChart</h1>
                 <p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/chart/BarChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/BarChartDemo.vue"/>
 </template>
 
 <script>

src/views/chart/ComboChartDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Combo Chart</h1>
                 <p>Different chart types can be combined in the same graph.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/chart/ComboChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/ComboChartDemo.vue"/>
 </template>
 
 <script>

src/views/chart/DoughnutChartDemo.vue

@@ -5,6 +5,7 @@
                 <h1>DoughnutChart</h1>
                 <p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/chart/DoughnutChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/DoughnutChartDemo.vue" />
 </template>
 
 <script>

src/views/chart/LineChartDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Line Chart</h1>
                 <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/chart/LineChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/LineChartDemo.vue" />
 </template>
 
 <script>

src/views/chart/PieChartDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Pie Chart</h1>
                 <p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/chart/PieChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/PieChartDemo.vue" />
 </template>
 
 <script>

src/views/chart/PolarAreaChartDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Polar Area Chart</h1>
                 <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/chart/PolarAreaChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/PolarAreaChartDemo.vue" />
 </template>
 
 <script>

src/views/chart/RadarChartDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Radar Chart</h1>
                 <p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/chart/RadarChartDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/RadarChartDemo.vue" />
 </template>
 
 <script>

src/views/checkbox/CheckboxDemo.vue

@@ -5,7 +5,7 @@
                 <h1>Checkbox</h1>
                 <p>Checkbox is an extension to standard checkbox element with theming.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/checkbox/CheckboxDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="CheckboxDemo" :sources="sources">
+    <AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Checkbox from 'primevue/checkbox';

src/views/chip/ChipDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Chip</h1>
                 <p>Chip represents entities using icons, labels and images.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/chip/ChipDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChipDemo" :sources="sources">
+	<AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Chip from 'primevue/chip';

src/views/chips/ChipsDemo.vue

@@ -5,7 +5,7 @@
                 <h1>Chips</h1>
                 <p>Chips is used to enter multiple values on an input field.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation p-fluid">

src/views/chips/ChipsDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChipsDemo" :sources="sources">
+	<AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Chips from 'primevue/chips';

src/views/colorpicker/ColorPickerDemo.vue

@@ -5,6 +5,7 @@
                 <h1>ColorPicker</h1>
                 <p>ColorPicker is an input component to select a color.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/colorpicker/ColorPickerDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles">
+	<AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import ColorPicker from 'primevue/colorpicker';

src/views/confirmdialog/ConfirmDialogDemo.vue

@@ -5,6 +5,7 @@
                 <h1>ConfirmDialog</h1>
                 <p>ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/confirmdialog/ConfirmDialogDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ConfirmDialogDemo" :sources="sources">
+	<AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
         <h5>ConfirmationService</h5>
         <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
             instance is created.</p>

src/views/confirmpopup/ConfirmPopupDemo.vue

@@ -5,6 +5,7 @@
                 <h1>ConfirmPopup</h1>
                 <p>ConfirmPopup displays a confirmation overlay displayed relatively to its target.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/confirmpopup/ConfirmPopupDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ConfirmPopupDemo" :sources="sources">
+	<AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
         <h5>ConfirmationService</h5>
         <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
             instance is created.</p>

src/views/contextmenu/ContextMenuDemo.vue

@@ -5,6 +5,7 @@
                 <h1>ContextMenu</h1>
                 <p>ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the with context menu support.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/contextmenu/ContextMenuDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ContextMenuDemo" :sources="sources">
+	<AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import ContextMenu from 'primevue/contextmenu';

src/views/datatable/DataTableBasicDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Basic</span></h1>
 				<p>DataTable requires a collection to display along with column components for the representation of the data.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">

src/views/datatable/DataTableBasicDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+    <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
 </template>
 
 <script>

src/views/datatable/DataTableColGroupDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>ColumnGroup</span></h1>
 				<p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -58,7 +59,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableColGroupDemo" :sources="sources" />
+        <AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableColResizeDemo.vue

@@ -6,6 +6,7 @@
 				<p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
                     In "expand" mode, table width also changes along with the column width.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -30,7 +31,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableColToggleDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Column Toggle</span></h1>
 				<p>MultiSelect component can be used to implement column toggle functionality.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -22,7 +23,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableContextMenuDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>ContextMenu</span></h1>
 				<p>CDataTable has exclusive integration with ContextMenu.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -24,7 +25,7 @@
             <ContextMenu :model="menuModel" ref="cm" />
 		</div>
 
-        <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableCrudDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Crud</span></h1>
 				<p>This sample demonstrates a CRUD implementation using various PrimeVue components.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -158,7 +159,7 @@
             </Dialog>
 		</div>
 
-       <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" />
+       <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable</h1>
 				<p>DataTable displays data in tabular format.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">

src/views/datatable/DataTableDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="content-section documentation">
-        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']">
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableDemo.vue">
             <h5>Import</h5>
 			<pre v-code.script><code>
 import DataTable from 'primevue/datatable';

src/views/datatable/DataTableDynamicColumnsDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Dynamic Columns</span></h1>
 				<p>Columns can be defined dynamically using the v-for directive.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -15,7 +16,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
                     
 	</div>
 </template>

src/views/datatable/DataTableEditDemo.vue

@@ -7,6 +7,7 @@
                     so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.
                 </p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation p-fluid">
@@ -92,7 +93,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableExportDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Export</span></h1>
 				<p>DataTable can export its data to CSV format.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -23,7 +24,7 @@
             </div>
 		</div>
         
-        <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableFilterDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Filter</span></h1>
 				<p>Filtering feature provides advanced and flexible options to query the data.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -208,7 +209,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />
+        <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableFlexScrollDemo.vue

@@ -1,5 +1,8 @@
 <template>
 	<div>
+        <div class="content-section introduction">
+            <AppDemoActions />
+		</div>
         <div class="content-section implementation">
             <div class="card" style="height: calc(100vh - 143px)">
                 <DataTable :value="customers" :scrollable="true" scrollHeight="flex">
@@ -11,7 +14,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />    
+        <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" />    
 	</div>
 </template>
 

src/views/datatable/DataTableGridLinesDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>GridLines</span></h1>
 				<p>Enabling <b>showGridlines</b> displays borders between cells. Note: Some themes may always display gridlines by design.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -24,7 +25,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableLazyDemo.vue

@@ -8,6 +8,7 @@
                     so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.
                 </p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -39,7 +40,7 @@
             </div>
 		</div>
  
-        <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" />
+        <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTablePaginatorDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Paginator</span></h1>
 				<p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of rows per page.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -27,7 +28,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />
+        <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
                   
 	</div>
 </template>

src/views/datatable/DataTableReorderDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Reorder</span></h1>
 				<p>Order of the columns and rows can be changed using drag and drop.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -16,7 +17,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
 
 	</div>
 </template>

src/views/datatable/DataTableResponsiveDemo.vue

@@ -6,6 +6,7 @@
 				<p>DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens 
                     and second one is defining a breakpoint to display the cells of a row as stacked.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -54,7 +55,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
 
 	</div>
 </template>

src/views/datatable/DataTableRowExpandDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Row Expansion</span></h1>
 				<p>A row can be expanded to display additional content.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -69,7 +70,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" />
+        <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" />
             
 	</div>
 </template>

src/views/datatable/DataTableRowGroupDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Row Group</span></h1>
 				<p>Rows can either be grouped by a separate grouping row or using rowspan.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -105,7 +106,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" />
+        <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
 
 	</div>
 </template>

src/views/datatable/DataTableScrollDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Scroll</span></h1>
 				<p>Data scrolling is available horizontally, vertically or both with support for frozen rows and columns.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -125,7 +126,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" />
+        <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableSelectionDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Selection</span></h1>
 				<p>DataTable provides single and multiple selection modes based on row click or using radio button and checkbox elements.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -81,7 +82,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
                   
 	</div>
 </template>

src/views/datatable/DataTableSizeDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Size</span></h1>
 				<p>In addition to a regular table, alternatives with alternative sizes are available.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -45,7 +46,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
     
 	</div>
 </template>

src/views/datatable/DataTableSortDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Sort</span></h1>
 				<p>Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and used with metaKey.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -70,7 +71,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
 
 	</div>
 </template>

src/views/datatable/DataTableStateDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>State</span></h1>
 				<p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -127,7 +128,7 @@
             </div>
 		</div>
               
-        <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" />
+        <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
 
 	</div>
 </template>

src/views/datatable/DataTableStripedDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Striped Rows</span></h1>
 				<p>Adding <i>stripedRows</i> displays rows with alternating colors.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -18,7 +19,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
 
 	</div>
 </template>

src/views/datatable/DataTableStyleDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Style</span></h1>
 				<p>Certain rows or cells can easily be styled based on conditions.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -24,7 +25,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
 	</div>
 </template>
 

src/views/datatable/DataTableTemplatingDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Templating</span></h1>
 				<p>Custom content at header, body and footer sections are supported via templating.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -44,7 +45,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
 
 	</div>
 </template>

src/views/dataview/DataViewDemo.vue

@@ -5,6 +5,7 @@
 				<h1>DataView</h1>
 				<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
 			</div>
+			<AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">

src/views/dataview/DataViewDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']">
+	<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
         <h5>Import</h5>
 
 <pre v-code.script><code>

src/views/deferredcontent/DeferredContentDemo.vue

@@ -5,6 +5,7 @@
                 <h1>DeferredContent</h1>
                 <p>DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/deferredcontent/DeferredContentDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
+	<AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import DeferredContent from 'primevue/deferredcontent';

src/views/dialog/DialogDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Dialog</h1>
                 <p>Dialog is a container to display content in an overlay window.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/dialog/DialogDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DialogDemo" :sources="sources">
+	<AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Dialog from 'primevue/dialog';

src/views/display/DisplayDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Display</h1>
                 <p>Efficiently configure the display of the component with <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> display utilities.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/display/DisplayDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DisplayDemo" :sources="sources">
+	<AppDoc name="DisplayDemo" :sources="sources" github="display/DisplayDemo.vue">
         <h5>Getting Started</h5>
         <p>The display classes use the <i>p-d-{value}</i> format and <i>p-d-{breakpoint}-{value}</i> format for responsive design.</p>
 

src/views/divider/DividerDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Divider</h1>
                 <p>Divider is used to separate contents.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/divider/DividerDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DividerDemo" :sources="sources">
+	<AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Divider from 'primevue/divider';

src/views/dropdown/DropdownDemo.vue

@@ -5,7 +5,7 @@
                 <h1>Dropdown</h1>
                 <p>Dropdown is used to select an item from a list of options.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/dropdown/DropdownDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DropdownDemo" :sources="sources">
+	<AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Dropdown from 'primevue/dropdown';
@@ -577,7 +577,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Options API Source',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>

src/views/editor/EditorDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Editor</h1>
                 <p>Editor is rich text editor component based on Quill.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/editor/EditorDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="EditorDemo" :sources="sources" :dependencies="{'quill': '^1.3.7'}" component="Editor">
+	<AppDoc name="EditorDemo" :sources="sources" :dependencies="{'quill': '^1.3.7'}" component="Editor" github="editor/EditorDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Editor from 'primevue/editor';

src/views/elevation/ElevationDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Elevation</h1>
                 <p>Elevation is an add-on utility of <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> and used to specify the separation between surfaces and elements along the z-axis.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/elevation/ElevationDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ElevationDemo" :sources="sources">
+	<AppDoc name="ElevationDemo" :sources="sources" github="elevation/ElevationDemo.vue">
 		<h5>Getting Started</h5>
 		<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
 <pre v-code><code>

src/views/fieldset/FieldsetDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Fieldset</h1>
                 <p>Fieldset is a grouping component with the optional content toggle feature.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">

src/views/fieldset/FieldsetDoc.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="FieldsetDemo" :sources="sources">
+	<AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Fieldset from 'primevue/fieldset';

src/views/fileupload/FileUploadDemo.vue

@@ -5,6 +5,7 @@
                 <h1>FileUpload</h1>
                 <p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">