From 20bf1fde4639f48ca7058e049f1953f4025e7072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 23 Mar 2021 15:38:05 +0300
Subject: [PATCH] AppDoc added

---
 src/views/elevation/ElevationDoc.vue |  111 +-
 src/views/grid/GridDoc.vue           | 1455 +++++++++++++++++---------
 src/views/spacing/SpacingDoc.vue     |  324 +++---
 src/views/text/TextDoc.vue           |  194 ++--
 4 files changed, 1369 insertions(+), 715 deletions(-)

diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue
index 3dcf875d5..aaad10ba0 100644
--- a/src/views/elevation/ElevationDoc.vue
+++ b/src/views/elevation/ElevationDoc.vue
@@ -1,38 +1,97 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Getting Started</h5>
-				<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
+	<AppDoc name="ElevationDemo" :sources="sources">
+		<h5>Getting Started</h5>
+		<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
 <pre v-code><code>
 &lt;div class="p-shadow-1" /&gt;
 
 </code></pre>
 
-                <h5>Levels</h5>
-                <p>There are 24 depths available varying from 1 to 24.</p>
+        <h5>Levels</h5>
+        <p>There are 24 depths available varying from 1 to 24.</p>
 <pre v-code><code>
 &lt;div class="p-shadow-1" /&gt;
 &lt;div class="p-shadow-24" /&gt;
 
 </code></pre>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/elevation" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
-<pre v-code><code><template v-pre>
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col" v-for="index in 24" :key="index"&gt;
-        &lt;div :class="['box', 'p-shadow-' + index]"&gt;
-            p-shadow-{{index}}
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
+	</AppDoc>
 </template>
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
-</template>
\ No newline at end of file
+
+<script>
+export default {
+	data() {
+		return {
+			sources: {
+				'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div>
+        <div class="p-grid">
+            <div class="p-col" v-for="index in 24" :key="index">
+                <div :class="['box', 'p-shadow-' + index]">
+                    p-shadow-{{index}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.box {
+    min-height: 100px;
+    min-width: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    margin: 2rem;
+    border-radius: 4px;
+}
+</style>                    
+`
+                },
+				'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div>
+        <div class="p-grid">
+            <div class="p-col" v-for="index in 24" :key="index">
+                <div :class="['box', 'p-shadow-' + index]">
+                    p-shadow-{{index}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.box {
+    min-height: 100px;
+    min-width: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    margin: 2rem;
+    border-radius: 4px;
+}
+</style>                    
+`
+                }
+			}
+		}
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/grid/GridDoc.vue b/src/views/grid/GridDoc.vue
index f1db3e804..44bffb660 100755
--- a/src/views/grid/GridDoc.vue
+++ b/src/views/grid/GridDoc.vue
@@ -1,10 +1,8 @@
 <template>
-	<div class="content-section documentation flexgrid-demo">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Getting Started</h5>
-				<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
-					a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
+	<AppDoc name="GridDemo" :sources="sources">
+		<h5>Getting Started</h5>
+		<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
+			a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
 <pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col"&gt;1&lt;/div&gt;
@@ -26,10 +24,10 @@
 	</div>
 </div>
 
-				<h5>12 Column Grid</h5>
-				<p>FlexGrid includes a 12 column based layout utility where width of a column is defined with the <i>p-col-&#123;number&#125;</i> style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.</p>
+		<h5>12 Column Grid</h5>
+		<p>FlexGrid includes a 12 column based layout utility where width of a column is defined with the <i>p-col-&#123;number&#125;</i> style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.</p>
 
-				<p>In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.</p>
+		<p>In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.</p>
 <pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-4"&gt;4&lt;/div&gt;
@@ -93,8 +91,8 @@
 	</div>
 </div>
 
-				<h5>MultiLine</h5>
-				<p>When the number of columns exceed 12, columns wrap to a new line.</p>
+		<h5>MultiLine</h5>
+		<p>When the number of columns exceed 12, columns wrap to a new line.</p>
 <pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-6"&gt;6&lt;/div&gt;
@@ -120,8 +118,8 @@
 	</div>
 </div>
 
-				<h5>Fixed Width Column</h5>
-				<p>A column can have a fixed width while siblings having auto width. Apply <i>p-col-fixed</i> class to fix a column width.</p>
+		<h5>Fixed Width Column</h5>
+		<p>A column can have a fixed width while siblings having auto width. Apply <i>p-col-fixed</i> class to fix a column width.</p>
 <pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-fixed" style="width:100px"&gt;Fixed&lt;/div&gt;
@@ -138,48 +136,48 @@
 		<div class="box">auto</div>
 	</div>
 </div>
-				<h5>Responsive</h5>
-				<p>Responsive layout is achieved by applying breakpoint specific classes to the columns whereas <i>p-col-*</i> define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-						<tr>
-							<th>Prefix</th>
-							<th>Devices</th>
-							<th>Media Query</th>
-							<th>Example</th>
-						</tr>
-						</thead>
-						<tbody>
-						<tr>
-							<td>p-sm-*</td>
-							<td>Small devices</td>
-							<td>min-width: 576px</td>
-							<td>p-sm-6, p-sm-4</td>
-						</tr>
-						<tr>
-							<td>p-md-*</td>
-							<td>Medium sized devices such as tablets</td>
-							<td>min-width: 768px</td>
-							<td>p-md-2, p-md-8</td>
-						</tr>
-						<tr>
-							<td>p-lg-*</td>
-							<td>Devices with large screen like desktops</td>
-							<td>min-width: 992px</td>
-							<td>p-lg-6, p-lg-12</td>
-						</tr>
-						<tr>
-							<td>p-xl-*</td>
-							<td>Big screen monitors</td>
-							<td>min-width: 1200px</td>
-							<td>p-xl-2, ui-xl-10</td>
-						</tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Responsive</h5>
+		<p>Responsive layout is achieved by applying breakpoint specific classes to the columns whereas <i>p-col-*</i> define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+				<tr>
+					<th>Prefix</th>
+					<th>Devices</th>
+					<th>Media Query</th>
+					<th>Example</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr>
+					<td>p-sm-*</td>
+					<td>Small devices</td>
+					<td>min-width: 576px</td>
+					<td>p-sm-6, p-sm-4</td>
+				</tr>
+				<tr>
+					<td>p-md-*</td>
+					<td>Medium sized devices such as tablets</td>
+					<td>min-width: 768px</td>
+					<td>p-md-2, p-md-8</td>
+				</tr>
+				<tr>
+					<td>p-lg-*</td>
+					<td>Devices with large screen like desktops</td>
+					<td>min-width: 992px</td>
+					<td>p-lg-6, p-lg-12</td>
+				</tr>
+				<tr>
+					<td>p-xl-*</td>
+					<td>Big screen monitors</td>
+					<td>min-width: 1200px</td>
+					<td>p-xl-2, ui-xl-10</td>
+				</tr>
+				</tbody>
+			</table>
+		</div>
 
-				<p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p>
+		<p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p>
 <pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;A&lt;/div&gt;
@@ -204,8 +202,8 @@
 		<div class="box">D</div>
 	</div>
 </div>
-				<h5>Offset</h5>
-				<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
+		<h5>Offset</h5>
+		<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
 <pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-6 p-offset-3"&gt;6&lt;/div&gt;
@@ -232,54 +230,54 @@
 		<div class="box">4</div>
 	</div>
 </div>
-				<p>The list of offset classes varying within a range of 1 to 12.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-						<tr>
-							<th>Prefix</th>
-							<th>Devices</th>
-							<th>Media Query</th>
-							<th>Example</th>
-						</tr>
-						</thead>
-						<tbody>
-						<tr>
-							<td>p-col-offset-*</td>
-							<td>All devices</td>
-							<td>All screens</td>
-							<td>p-col-offset-6, p-col-offset-4</td>
-						</tr>
-						<tr>
-							<td>p-sm-offset-*</td>
-							<td>Small devices</td>
-							<td>min-width: 576px</td>
-							<td>p-sm-offset-6, p-sm-offset-4</td>
-						</tr>
-						<tr>
-							<td>p-md-offset-*</td>
-							<td>Medium sized devices such as tablets</td>
-							<td>min-width: 768px</td>
-							<td>p-md-offset-6, p-md-offset-4</td>
-						</tr>
-						<tr>
-							<td>p-lg-offset-*</td>
-							<td>Devices with large screen like desktops</td>
-							<td>min-width: 992px</td>
-							<td>p-lg-offset-6, p-lg-offset-4</td>
-						</tr>
-						<tr>
-							<td>p-xl-offset-*</td>
-							<td>Big screen monitors</td>
-							<td>min-width: 1200px</td>
-							<td>p-xl-offset-6, p-xl-offset-4</td>
-						</tr>
-						</tbody>
-					</table>
-				</div>
+		<p>The list of offset classes varying within a range of 1 to 12.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+				<tr>
+					<th>Prefix</th>
+					<th>Devices</th>
+					<th>Media Query</th>
+					<th>Example</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr>
+					<td>p-col-offset-*</td>
+					<td>All devices</td>
+					<td>All screens</td>
+					<td>p-col-offset-6, p-col-offset-4</td>
+				</tr>
+				<tr>
+					<td>p-sm-offset-*</td>
+					<td>Small devices</td>
+					<td>min-width: 576px</td>
+					<td>p-sm-offset-6, p-sm-offset-4</td>
+				</tr>
+				<tr>
+					<td>p-md-offset-*</td>
+					<td>Medium sized devices such as tablets</td>
+					<td>min-width: 768px</td>
+					<td>p-md-offset-6, p-md-offset-4</td>
+				</tr>
+				<tr>
+					<td>p-lg-offset-*</td>
+					<td>Devices with large screen like desktops</td>
+					<td>min-width: 992px</td>
+					<td>p-lg-offset-6, p-lg-offset-4</td>
+				</tr>
+				<tr>
+					<td>p-xl-offset-*</td>
+					<td>Big screen monitors</td>
+					<td>min-width: 1200px</td>
+					<td>p-xl-offset-6, p-xl-offset-4</td>
+				</tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Nested</h5>
-				<p>Columns can be nested to create more complex layouts.</p>
+		<h5>Nested</h5>
+		<p>Columns can be nested to create more complex layouts.</p>
 <pre v-code><code>
 &lt;div class="p-grid nested-grid"&gt;
 	&lt;div class="p-col-8"&gt;
@@ -321,10 +319,10 @@
 	</div>
 </div>
 
-				<h5>Gutter</h5>
-				<p>A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply
-					<i>p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
-				</p>
+		<h5>Gutter</h5>
+		<p>A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply
+			<i>p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
+		</p>
 <pre v-code><code>
 &lt;div class="p-grid p-nogutter"&gt;
 	&lt;div class="p-col"&gt;1&lt;/div&gt;
@@ -333,404 +331,412 @@
 &lt;/div&gt;
 
 </code></pre>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/flexgrid" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
-<pre v-code><code><template v-pre>
-<h5>Basic</h5>
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;3&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Dynamic&lt;/h5&gt;
-&lt;Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" /&gt;
-&lt;Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" /&gt;
-
-&lt;div style="margin-top: .5em"&gt;
-	&lt;transition-group name="dynamic-box" tag="div" class="p-grid"&gt;
-		&lt;div v-for="col of columns" :key="col" class="p-col"&gt;
-			&lt;div class="box"&gt;{{col}}&lt;/div&gt;
-		&lt;/div&gt;
-	&lt;/transition-group&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Reverse Direction&lt;/h5&gt;
-&lt;div class="p-grid p-flex-row-reverse"&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;3&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Column Direction&lt;/h5&gt;
-&lt;div class="p-grid p-flex-column"&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;3&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Reverse Column Direction&lt;/h5&gt;
-&lt;div class="p-grid p-flex-column-reverse"&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;3&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;12 Column Grid&lt;/h5&gt;
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-2"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-6"&gt;
-		&lt;div class="box"&gt;6&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-8"&gt;
-		&lt;div class="box"&gt;8&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-2"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-2"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;MultiLine&lt;/h5&gt;
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-6"&gt;
-		&lt;div class="box"&gt;6&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-6"&gt;
-		&lt;div class="box"&gt;6&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-6"&gt;
-		&lt;div class="box"&gt;6&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-6"&gt;
-		&lt;div class="box"&gt;6&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Fixed Width Column&lt;/h5&gt;
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-fixed" style="width:100px"&gt;
-		&lt;div class="box"&gt;100px&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;auto&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Responsive&lt;/h5&gt;
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
-		&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
-		&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
-		&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
-		&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Horizontal Alignment - Start&lt;/h5&gt;
-&lt;div class="p-grid p-jc-start"&gt;
-	&lt;div class="p-col-2"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-1"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Horizontal Alignment - End&lt;/h5&gt;
-&lt;div class="p-grid p-jc-end"&gt;
-	&lt;div class="p-col-2"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-1"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Horizontal Alignment - Center&lt;/h5&gt;
-&lt;div class="p-grid p-jc-center"&gt;
-	&lt;div class="p-col-2"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-1"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Horizontal Alignment - Between&lt;/h5&gt;
-&lt;div class="p-grid p-jc-between"&gt;
-	&lt;div class="p-col-2"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-1"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Horizontal Alignment - Around&lt;/h5&gt;
-&lt;div class="p-grid p-jc-around"&gt;
-	&lt;div class="p-col-2"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-1"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Horizontal Alignment - Even&lt;/h5&gt;
-&lt;div class="p-grid p-jc-evenly"&gt;
-	&lt;div class="p-col-2"&gt;
-		&lt;div class="box"&gt;2&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-1"&gt;
-		&lt;div class="box"&gt;1&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Vertical Alignment - Start&lt;/h5&gt;
-&lt;div class="p-grid p-ai-start vertical-container"&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Vertical Alignment - End&lt;/h5&gt;
-&lt;div class="p-grid p-ai-end vertical-container"&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Vertical Alignment - Center&lt;/h5&gt;
-&lt;div class="p-grid p-ai-center vertical-container"&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Vertical Alignment - Stretch&lt;/h5&gt;
-&lt;div class="p-grid p-ai-stretch vertical-container"&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Vertical Alignment - Per Column&lt;/h5&gt;
-&lt;div class="p-grid vertical-container"&gt;
-	&lt;div class="p-col p-as-start"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col p-as-center"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col p-as-end"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Offset&lt;/h5&gt;
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-6 p-offset-3"&gt;
-		&lt;div class="box"&gt;6&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-4 p-offset-4"&gt;
-		&lt;div class="box"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Nested&lt;/h5&gt;
-&lt;div class="p-grid nested-grid"&gt;
-	&lt;div class="p-col-8"&gt;
-		&lt;div class="p-grid"&gt;
-			&lt;div class="p-col-6"&gt;
-				&lt;div class="box"&gt;6&lt;/div&gt;
-			&lt;/div&gt;
-			&lt;div class="p-col-6"&gt;
-				&lt;div class="box"&gt;6&lt;/div&gt;
-			&lt;/div&gt;
-			&lt;div class="p-col-12"&gt;
-				&lt;div class="box"&gt;12&lt;/div&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;
-		&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Panels&lt;/h5&gt;
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col"&gt;
-		&lt;Panel header="Header"&gt;
-			&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-			cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
-		&lt;/Panel&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;Panel header="Header"&gt;
-			&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-			cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
-		&lt;/Panel&gt;
-	&lt;/div&gt;
-	&lt;div class="p-col"&gt;
-		&lt;Panel header="Header"&gt;
-			&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-			cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
-		&lt;/Panel&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
+	</AppDoc>
 </template>
-</code></pre>
 
-<pre v-code.script><code>
+<script>
 export default {
 	data() {
 		return {
-			columns: [0, 1, 2, 3, 4, 5]
-		}
-	},
-	methods: {
-		addColumn() {
-			this.columns = [...this.columns, this.columns.length];
-		},
-		removeColumn() {
-			this.columns.pop();
-		}
-	}
+			sources: {
+				'options-api': {
+					tabName: 'Source',
+					content: `
+<template>
+    <div class="flexgrid-demo p-p-2">
+        <h5>Basic</h5>
+        <div class="p-grid">
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col">
+                <div class="box">3</div>
+            </div>
+        </div>
+
+        <h5>Dynamic</h5>
+        <Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
+        <Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
+
+        <div style="margin-top: .5em">
+            <transition-group name="dynamic-box" tag="div" class="p-grid">
+                <div v-for="col of columns" :key="col" class="p-col">
+                    <div class="box">{{col}}</div>
+                </div>
+            </transition-group>
+        </div>
+
+        <h5>Reverse Direction</h5>
+        <div class="p-grid p-flex-row-reverse">
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col">
+                <div class="box">3</div>
+            </div>
+        </div>
+
+        <h5>Column Direction</h5>
+        <div class="p-grid p-flex-column">
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col">
+                <div class="box">3</div>
+            </div>
+        </div>
+
+        <h5>Reverse Column Direction</h5>
+        <div class="p-grid p-flex-column-reverse">
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col">
+                <div class="box">3</div>
+            </div>
+        </div>
+
+        <h5>12 Column Grid</h5>
+        <div class="p-grid">
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+        </div>
+
+        <div class="p-grid">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <div class="p-grid">
+            <div class="p-col-8">
+                <div class="box">8</div>
+            </div>
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+        </div>
+
+        <h5>MultiLine</h5>
+        <div class="p-grid">
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+        </div>
+
+        <h5>Fixed Width Column</h5>
+        <div class="p-grid">
+            <div class="p-col-fixed" style="width:100px">
+                <div class="box">100px</div>
+            </div>
+            <div class="p-col">
+                <div class="box">auto</div>
+            </div>
+        </div>
+
+        <h5>Responsive</h5>
+        <div class="p-grid">
+            <div class="p-col-12 p-md-6 p-lg-3">
+                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            </div>
+            <div class="p-col-12 p-md-6 p-lg-3">
+                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            </div>
+            <div class="p-col-12 p-md-6 p-lg-3">
+                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            </div>
+            <div class="p-col-12 p-md-6 p-lg-3">
+                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Start</h5>
+        <div class="p-grid p-jc-start">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - End</h5>
+        <div class="p-grid p-jc-end">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Center</h5>
+        <div class="p-grid p-jc-center">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Between</h5>
+        <div class="p-grid p-jc-between">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Around</h5>
+        <div class="p-grid p-jc-around">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Even</h5>
+        <div class="p-grid p-jc-evenly">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - Start</h5>
+        <div class="p-grid p-ai-start vertical-container">
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - End</h5>
+        <div class="p-grid p-ai-end vertical-container">
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - Center</h5>
+        <div class="p-grid p-ai-center vertical-container">
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - Stretch</h5>
+        <div class="p-grid p-ai-stretch vertical-container">
+            <div class="p-col">
+                <div class="box box-stretched">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box box-stretched">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box box-stretched">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - Per Column</h5>
+        <div class="p-grid vertical-container">
+            <div class="p-col p-as-start">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col p-as-center">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col p-as-end">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Offset</h5>
+        <div class="p-grid">
+            <div class="p-col-6 p-offset-3">
+                <div class="box">6</div>
+            </div>
+        </div>
+
+        <div class="p-grid">
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col-4 p-offset-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Nested</h5>
+        <div class="p-grid nested-grid">
+            <div class="p-col-8">
+                <div class="p-grid">
+                    <div class="p-col-6">
+                        <div class="box">6</div>
+                    </div>
+                    <div class="p-col-6">
+                        <div class="box">6</div>
+                    </div>
+                    <div class="p-col-12">
+                        <div class="box">12</div>
+                    </div>
+                </div>
+            </div>
+            <div class="p-col-4">
+                <div class="box box-stretched">4</div>
+            </div>
+        </div>
+
+        <h5>Panels</h5>
+        <div class="p-grid">
+            <div class="p-col">
+                <Panel header="Header">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </Panel>
+            </div>
+            <div class="p-col">
+                <Panel header="Header">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </Panel>
+            </div>
+            <div class="p-col">
+                <Panel header="Header">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </Panel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            columns: [0, 1, 2, 3, 4, 5]
+        }
+    },
+    methods: {
+        addColumn() {
+            this.columns = [...this.columns, this.columns.length];
+        },
+        removeColumn() {
+            this.columns.pop();
+        }
+    }
 }
+<\\/script>
 
-</code></pre>
-
-<pre v-code.css><code>
+<style lang="scss">
 .flexgrid-demo {
+	background-color: var(--surface-b);
+  	color: var(--text-color);
+
     .box {
         background-color: var(--surface-e);
         text-align: center;
@@ -771,9 +777,454 @@ export default {
         margin: 0;
     }
 }
+</style>
 
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
-</template>
\ No newline at end of file
+`
+				},
+				'composition-api': {
+					tabName: 'Composition API',
+					content: `
+<template>
+    <div class="flexgrid-demo p-p-2">
+        <h5>Basic</h5>
+        <div class="p-grid">
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col">
+                <div class="box">3</div>
+            </div>
+        </div>
+
+        <h5>Dynamic</h5>
+        <Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
+        <Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
+
+        <div style="margin-top: .5em">
+            <transition-group name="dynamic-box" tag="div" class="p-grid">
+                <div v-for="col of columns" :key="col" class="p-col">
+                    <div class="box">{{col}}</div>
+                </div>
+            </transition-group>
+        </div>
+
+        <h5>Reverse Direction</h5>
+        <div class="p-grid p-flex-row-reverse">
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col">
+                <div class="box">3</div>
+            </div>
+        </div>
+
+        <h5>Column Direction</h5>
+        <div class="p-grid p-flex-column">
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col">
+                <div class="box">3</div>
+            </div>
+        </div>
+
+        <h5>Reverse Column Direction</h5>
+        <div class="p-grid p-flex-column-reverse">
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col">
+                <div class="box">3</div>
+            </div>
+        </div>
+
+        <h5>12 Column Grid</h5>
+        <div class="p-grid">
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+        </div>
+
+        <div class="p-grid">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <div class="p-grid">
+            <div class="p-col-8">
+                <div class="box">8</div>
+            </div>
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+        </div>
+
+        <h5>MultiLine</h5>
+        <div class="p-grid">
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+            <div class="p-col-6">
+                <div class="box">6</div>
+            </div>
+        </div>
+
+        <h5>Fixed Width Column</h5>
+        <div class="p-grid">
+            <div class="p-col-fixed" style="width:100px">
+                <div class="box">100px</div>
+            </div>
+            <div class="p-col">
+                <div class="box">auto</div>
+            </div>
+        </div>
+
+        <h5>Responsive</h5>
+        <div class="p-grid">
+            <div class="p-col-12 p-md-6 p-lg-3">
+                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            </div>
+            <div class="p-col-12 p-md-6 p-lg-3">
+                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            </div>
+            <div class="p-col-12 p-md-6 p-lg-3">
+                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            </div>
+            <div class="p-col-12 p-md-6 p-lg-3">
+                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Start</h5>
+        <div class="p-grid p-jc-start">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - End</h5>
+        <div class="p-grid p-jc-end">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Center</h5>
+        <div class="p-grid p-jc-center">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Between</h5>
+        <div class="p-grid p-jc-between">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Around</h5>
+        <div class="p-grid p-jc-around">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Horizontal Alignment - Even</h5>
+        <div class="p-grid p-jc-evenly">
+            <div class="p-col-2">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col-1">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - Start</h5>
+        <div class="p-grid p-ai-start vertical-container">
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - End</h5>
+        <div class="p-grid p-ai-end vertical-container">
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - Center</h5>
+        <div class="p-grid p-ai-center vertical-container">
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - Stretch</h5>
+        <div class="p-grid p-ai-stretch vertical-container">
+            <div class="p-col">
+                <div class="box box-stretched">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box box-stretched">4</div>
+            </div>
+            <div class="p-col">
+                <div class="box box-stretched">4</div>
+            </div>
+        </div>
+
+        <h5>Vertical Alignment - Per Column</h5>
+        <div class="p-grid vertical-container">
+            <div class="p-col p-as-start">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col p-as-center">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col p-as-end">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Offset</h5>
+        <div class="p-grid">
+            <div class="p-col-6 p-offset-3">
+                <div class="box">6</div>
+            </div>
+        </div>
+
+        <div class="p-grid">
+            <div class="p-col-4">
+                <div class="box">4</div>
+            </div>
+            <div class="p-col-4 p-offset-4">
+                <div class="box">4</div>
+            </div>
+        </div>
+
+        <h5>Nested</h5>
+        <div class="p-grid nested-grid">
+            <div class="p-col-8">
+                <div class="p-grid">
+                    <div class="p-col-6">
+                        <div class="box">6</div>
+                    </div>
+                    <div class="p-col-6">
+                        <div class="box">6</div>
+                    </div>
+                    <div class="p-col-12">
+                        <div class="box">12</div>
+                    </div>
+                </div>
+            </div>
+            <div class="p-col-4">
+                <div class="box box-stretched">4</div>
+            </div>
+        </div>
+
+        <h5>Panels</h5>
+        <div class="p-grid">
+            <div class="p-col">
+                <Panel header="Header">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </Panel>
+            </div>
+            <div class="p-col">
+                <Panel header="Header">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </Panel>
+            </div>
+            <div class="p-col">
+                <Panel header="Header">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </Panel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const columns = ref([0, 1, 2, 3, 4, 5]);
+		const addColumn = () => {
+            columns.value = [...columns.value, columns.value.length];
+        };
+        const removeColumn = () => {
+            columns.value.pop();
+        };
+
+		return { columns, addColumn, removeColumn }
+    }
+}
+<\\/script>
+
+<style lang="scss">
+.flexgrid-demo {
+	background-color: var(--surface-b);
+  	color: var(--text-color);
+
+    .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%;
+    }
+
+    .vertical-container {
+        margin: 0;
+        height: 200px;
+        background: var(--surface-d);
+        border-radius: 4px;
+    }
+
+    .nested-grid .p-col-4 {
+        padding-bottom: 1rem;
+    }
+
+    .dynamic-box-enter-active, .dynamic-box-leave-active {
+        transition: all .5s;
+    }
+
+    .dynamic-box-enter, .dynamic-box-leave-to {
+        opacity: 0;
+    }
+
+    .dynamic-box-enter, .dynamic-box-leave-to {
+        transform: translateX(30px);
+    }
+
+    p {
+        margin: 0;
+    }
+}
+</style>
+
+`
+				}
+			}
+		}
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue
index 7cc168aad..57e6a97af 100644
--- a/src/views/spacing/SpacingDoc.vue
+++ b/src/views/spacing/SpacingDoc.vue
@@ -1,54 +1,52 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-                <h5>Getting Started</h5>
-                <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
-                values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
+	<AppDoc name="SpacingDemo" :sources="sources">
+        <h5>Getting Started</h5>
+        <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
+        values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
 
-                <h5>Property</h5>
-                <p>Property can either be a margin or a padding.</p>
-                <ul>
-                    <li><b>m</b>: margin</li>
-                    <li><b>p</b>: padding</li>
-                </ul>
+        <h5>Property</h5>
+        <p>Property can either be a margin or a padding.</p>
+        <ul>
+            <li><b>m</b>: margin</li>
+            <li><b>p</b>: padding</li>
+        </ul>
 
-                <h5>Position</h5>
-                <p>Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.</p>
-                <ul>
-                    <li><b>t</b>: top</li>
-                    <li><b>b</b>: bottom</li>
-                    <li><b>l</b>: left</li>
-                    <li><b>r</b>: right</li>
-                    <li><b>x</b>: left and right</li>
-                    <li><b>y</b>: top and bottom</li>
-                    <li><b>blank</b>: all sides</li>
-                </ul>
+        <h5>Position</h5>
+        <p>Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.</p>
+        <ul>
+            <li><b>t</b>: top</li>
+            <li><b>b</b>: bottom</li>
+            <li><b>l</b>: left</li>
+            <li><b>r</b>: right</li>
+            <li><b>x</b>: left and right</li>
+            <li><b>y</b>: top and bottom</li>
+            <li><b>blank</b>: all sides</li>
+        </ul>
 
-                <h5>Value</h5>
-                <p>Value field varies from 0 to 6 where default value of the <i>$spacer</i> is 1rem. The special <i>auto</i> value is available to margins only and used to center elements.</p>
-                <ul>
-                    <li><b>0</b>: $spacer * 0</li>
-                    <li><b>1</b>: $spacer * .25</li>
-                    <li><b>2</b>: $spacer * .5</li>
-                    <li><b>3</b>: $spacer * 1</li>
-                    <li><b>4</b>: $spacer * 1.5</li>
-                    <li><b>5</b>: $spacer * 2</li>
-                    <li><b>6</b>: $spacer * 3</li>
-                    <li><b>auto</b>: auto margin</li>
-                </ul>
+        <h5>Value</h5>
+        <p>Value field varies from 0 to 6 where default value of the <i>$spacer</i> is 1rem. The special <i>auto</i> value is available to margins only and used to center elements.</p>
+        <ul>
+            <li><b>0</b>: $spacer * 0</li>
+            <li><b>1</b>: $spacer * .25</li>
+            <li><b>2</b>: $spacer * .5</li>
+            <li><b>3</b>: $spacer * 1</li>
+            <li><b>4</b>: $spacer * 1.5</li>
+            <li><b>5</b>: $spacer * 2</li>
+            <li><b>6</b>: $spacer * 3</li>
+            <li><b>auto</b>: auto margin</li>
+        </ul>
 
-                <h5>Breakpoint</h5>
-                <p>Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values
-                    can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.</p>
-                <ul>
-                    <li><b>sm</b>: small screens e.g. phones</li>
-                    <li><b>md</b>: medium screens e.g. tablets</li>
-                    <li><b>lg</b>: large screens e.g. notebooks</li>
-                    <li><b>xl</b>: larger screens .e.g monitors</li>
-                </ul>
+        <h5>Breakpoint</h5>
+        <p>Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values
+            can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.</p>
+        <ul>
+            <li><b>sm</b>: small screens e.g. phones</li>
+            <li><b>md</b>: medium screens e.g. tablets</li>
+            <li><b>lg</b>: large screens e.g. notebooks</li>
+            <li><b>xl</b>: larger screens .e.g monitors</li>
+        </ul>
 
-                <h5>Examples</h5>
+        <h5>Examples</h5>
 <pre v-code><code>
 &lt;div class="p-mb-2"&gt;Margin bottom with level 2&lt;/div&gt;
 &lt;div class="p-mt-4"&gt;Margin top with level 2&lt;/div&gt;
@@ -60,78 +58,168 @@
 
 </code></pre>
 
-                <h5>Customization</h5>
-                <p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/spacing" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
-<pre v-code><code><template v-pre>
-&lt;div class="card"&gt;
-    &lt;h5&gt;Margin&lt;/h5&gt;
-    &lt;h6&gt;Without Spacing&lt;/h6&gt;
-    &lt;Button type="button" label="Button 1" style="width:20rem" /&gt;
-    &lt;Button type="button" label="Button 2" style="width:20rem" /&gt;
-
-    &lt;h6&gt;With Spacing&lt;/h6&gt;
-    &lt;Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" /&gt;
-    &lt;Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/&gt;
-
-    &lt;h5&gt;Responsive Margin&lt;/h5&gt;
-    &lt;h6&gt;Without Spacing&lt;/h6&gt;
-    &lt;div class="p-grid p-formgrid p-fluid"&gt;
-        &lt;div class="p-col-12 p-lg-4"&gt;
-            &lt;InputText /&gt;
-        &lt;/div&gt;
-        &lt;div class="p-col-12 p-lg-4"&gt;
-            &lt;InputText /&gt;
-        &lt;/div&gt;
-        &lt;div class="p-col-12 p-lg-4"&gt;
-            &lt;InputText /&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;h6&gt;With Spacing&lt;/h6&gt;
-    &lt;div class="p-grid p-formgrid p-fluid"&gt;
-        &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
-            &lt;InputText /&gt;
-        &lt;/div&gt;
-        &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
-            &lt;InputText /&gt;
-        &lt;/div&gt;
-        &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
-            &lt;InputText /&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;h6&gt;Center&lt;/h6&gt;
-    &lt;div class="demo-container p-p-4"&gt;
-        &lt;Button type="button" label="Button" class="p-d-block p-mx-auto" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="card"&gt;
-    &lt;h5&gt;Padding&lt;/h5&gt;
-    &lt;h6&gt;Without Spacing&lt;/h6&gt;
-    &lt;div class="demo-container"&gt;
-        &lt;Button type="button" label="Button" /&gt;
-    &lt;/div&gt;
-
-    &lt;h6&gt;With Spacing&lt;/h6&gt;
-    &lt;div class="demo-container p-p-3"&gt;
-        &lt;Button type="button" label="Button" /&gt;
-    &lt;/div&gt;
-
-    &lt;h6&gt;Responsive Spacing&lt;/h6&gt;
-    &lt;div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3"&gt;
-        &lt;Button type="button" label="Button" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
+        <h5>Customization</h5>
+        <p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
+    </AppDoc>
 </template>
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+					tabName: 'Source',
+					content: `
+<template>
+    <div>
+        <div class="card">
+            <h5>Margin</h5>
+            <h6>Without Spacing</h6>
+            <Button type="button" label="Button 1" style="width:20rem" />
+            <Button type="button" label="Button 2" style="width:20rem" />
+
+            <h6>With Spacing</h6>
+            <Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
+            <Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
+
+            <h5>Responsive Margin</h5>
+            <h6>Without Spacing</h6>
+            <div class="p-grid p-formgrid p-fluid">
+                <div class="p-col-12 p-lg-4">
+                    <InputText />
+                </div>
+                <div class="p-col-12 p-lg-4">
+                    <InputText />
+                </div>
+                <div class="p-col-12 p-lg-4">
+                    <InputText />
+                </div>
+            </div>
+
+            <h6>With Spacing</h6>
+            <div class="p-grid p-formgrid p-fluid">
+                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <InputText />
+                </div>
+                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <InputText />
+                </div>
+                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <InputText />
+                </div>
+            </div>
+
+            <h6>Center</h6>
+            <div class="demo-container p-p-4">
+                <Button type="button" label="Button" class="p-d-block p-mx-auto" />
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Padding</h5>
+            <h6>Without Spacing</h6>
+            <div class="demo-container">
+                <Button type="button" label="Button" />
+            </div>
+
+            <h6>With Spacing</h6>
+            <div class="demo-container p-p-3">
+                <Button type="button" label="Button" />
+            </div>
+
+            <h6>Responsive Spacing</h6>
+            <div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
+                <Button type="button" label="Button" />
+            </div>
+        </div>
+    </div>    
 </template>
+
+<script>
+export default {
+
+}
+<\\/script>
+`
+				},
+                'composition-api': {
+					tabName: 'Composition API',
+					content: `
+<template>
+    <div>
+        <div class="card">
+            <h5>Margin</h5>
+            <h6>Without Spacing</h6>
+            <Button type="button" label="Button 1" style="width:20rem" />
+            <Button type="button" label="Button 2" style="width:20rem" />
+
+            <h6>With Spacing</h6>
+            <Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
+            <Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
+
+            <h5>Responsive Margin</h5>
+            <h6>Without Spacing</h6>
+            <div class="p-grid p-formgrid p-fluid">
+                <div class="p-col-12 p-lg-4">
+                    <InputText />
+                </div>
+                <div class="p-col-12 p-lg-4">
+                    <InputText />
+                </div>
+                <div class="p-col-12 p-lg-4">
+                    <InputText />
+                </div>
+            </div>
+
+            <h6>With Spacing</h6>
+            <div class="p-grid p-formgrid p-fluid">
+                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <InputText />
+                </div>
+                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <InputText />
+                </div>
+                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <InputText />
+                </div>
+            </div>
+
+            <h6>Center</h6>
+            <div class="demo-container p-p-4">
+                <Button type="button" label="Button" class="p-d-block p-mx-auto" />
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Padding</h5>
+            <h6>Without Spacing</h6>
+            <div class="demo-container">
+                <Button type="button" label="Button" />
+            </div>
+
+            <h6>With Spacing</h6>
+            <div class="demo-container p-p-3">
+                <Button type="button" label="Button" />
+            </div>
+
+            <h6>Responsive Spacing</h6>
+            <div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
+                <Button type="button" label="Button" />
+            </div>
+        </div>
+    </div>    
+</template>
+
+<script>
+export default {
+
+}
+<\\/script>
+`
+				}
+            }
+        }
+    }
+}
+</script>
diff --git a/src/views/text/TextDoc.vue b/src/views/text/TextDoc.vue
index e5a9d4230..512daf0b8 100644
--- a/src/views/text/TextDoc.vue
+++ b/src/views/text/TextDoc.vue
@@ -1,18 +1,16 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-                <h5>Getting Started</h5>
-                <p>The text classes use the <i>p-text-{value}</i> syntax.</p>
+	<AppDoc name="TextDemo" :sources="sources">
+        <h5>Getting Started</h5>
+        <p>The text classes use the <i>p-text-{value}</i> syntax.</p>
 
-                <h5>Alignment</h5>
-                <p>Four options are available for alignment.</p>
-                <ul>
-                    <li>left</li>
-                    <li>center</li>
-                    <li>right</li>
-                    <li>justify</li>
-                </ul>
+        <h5>Alignment</h5>
+        <p>Four options are available for alignment.</p>
+        <ul>
+            <li>left</li>
+            <li>center</li>
+            <li>right</li>
+            <li>justify</li>
+        </ul>
 <pre v-code><code><template v-pre>
 &lt;div class="p-text-left"&gt;Left&lt;/div&gt;
 &lt;div class="p-text-center"&gt;Center&lt;/div&gt;
@@ -21,13 +19,13 @@
 </template>
 </code></pre>
 
-                <h5>Wrap</h5>
-                <p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
-                <ul>
-                    <li>nowrap</li>
-                    <li>wrap</li>
-                    <li>truncate</li>
-                </ul>
+        <h5>Wrap</h5>
+        <p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
+        <ul>
+            <li>nowrap</li>
+            <li>wrap</li>
+            <li>truncate</li>
+        </ul>
 <pre v-code><code><template v-pre>
 &lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
 &lt;div class="p-text-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
@@ -35,13 +33,13 @@
 </template>
 </code></pre>
 
-                <h5>Transform</h5>
-                <p>Transform property changes the case of the text.</p>
-                <ul>
-                    <li>lowercase</li>
-                    <li>uppercase</li>
-                    <li>capitalize</li>
-                </ul>
+        <h5>Transform</h5>
+        <p>Transform property changes the case of the text.</p>
+        <ul>
+            <li>lowercase</li>
+            <li>uppercase</li>
+            <li>capitalize</li>
+        </ul>
 <pre v-code><code><template v-pre>
 &lt;div class="p-text-lowercase"&gt;LOWERCASE&lt;/div&gt;
 &lt;div class="p-text-uppercase"&gt;uppercase&lt;/div&gt;
@@ -49,14 +47,14 @@
 </template>
 </code></pre>
 
-                <h5>Style</h5>
-                <p>Text styling applies to font weight and style.</p>
-                <ul>
-                    <li>bold</li>
-                    <li>normal</li>
-                    <li>light</li>
-                    <li>italic</li>
-                </ul>
+        <h5>Style</h5>
+        <p>Text styling applies to font weight and style.</p>
+        <ul>
+            <li>bold</li>
+            <li>normal</li>
+            <li>light</li>
+            <li>italic</li>
+        </ul>
 <pre v-code><code><template v-pre>
 &lt;div class="p-text-bold"&gt;Bold&lt;/div&gt;
 &lt;div class="p-text-normal"&gt;Normal&lt;/div&gt;
@@ -64,38 +62,96 @@
 &lt;div class="p-text-italic"&gt;Italic&lt;/div&gt;
 </template>
 </code></pre>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/text" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
-<pre v-code><code><template v-pre>
-&lt;div class="card"&gt;
-    &lt;h5&gt;Alignment&lt;/h5&gt;
-    &lt;div class="p-mb-3 p-text-left"&gt;Left&lt;/div&gt;
-    &lt;div class="p-mb-3 p-text-center"&gt;Center&lt;/div&gt;
-    &lt;div class="p-text-right"&gt;Right&lt;/div&gt;
-
-    &lt;h5&gt;Wrap&lt;/h5&gt;
-    &lt;div class="p-mb-3 demo-container" style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
-    &lt;div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
-    &lt;div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
-
-    &lt;h5&gt;Transform&lt;/h5&gt;
-    &lt;div class="p-mb-3 p-text-lowercase"&gt;LOWERCASE&lt;/div&gt;
-    &lt;div class="p-mb-3 p-text-uppercase"&gt;uppercase&lt;/div&gt;
-    &lt;div class="p-text-capitalize"&gt;capitalize&lt;/div&gt;
-
-    &lt;h5&gt;Style&lt;/h5&gt;
-    &lt;div class="p-mb-3 p-text-bold"&gt;Bold&lt;/div&gt;
-    &lt;div class="p-mb-3 p-text-normal"&gt;Normal&lt;/div&gt;
-    &lt;div class="p-mb-3 p-text-light"&gt;Light&lt;/div&gt;
-    &lt;div class="p-mb-3 p-text-italic"&gt;Italic&lt;/div&gt;
-&lt;/div&gt;
+    </AppDoc>
 </template>
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
-</template>
\ No newline at end of file
+
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div>
+        <h5>Alignment</h5>
+        <div class="p-mb-3 p-text-left">Left</div>
+        <div class="p-mb-3 p-text-center">Center</div>
+        <div class="p-text-right">Right</div>
+
+        <h5>Wrap</h5>
+        <div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
+        <div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+        <div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+
+        <h5>Transform</h5>
+        <div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
+        <div class="p-mb-3 p-text-uppercase">uppercase</div>
+        <div class="p-text-capitalize">capitalize</div>
+
+        <h5>Style</h5>
+        <div class="p-mb-3 p-text-bold">Bold</div>
+        <div class="p-mb-3 p-text-normal">Normal</div>
+        <div class="p-mb-3 p-text-light">Light</div>
+        <div class="p-mb-3 p-text-italic">Italic</div>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>
+
+<style scoped>
+.demo-container {
+    border: 2px solid var(--surface-d);
+}
+</style>                    
+`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div>
+        <h5>Alignment</h5>
+        <div class="p-mb-3 p-text-left">Left</div>
+        <div class="p-mb-3 p-text-center">Center</div>
+        <div class="p-text-right">Right</div>
+
+        <h5>Wrap</h5>
+        <div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
+        <div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+        <div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+
+        <h5>Transform</h5>
+        <div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
+        <div class="p-mb-3 p-text-uppercase">uppercase</div>
+        <div class="p-text-capitalize">capitalize</div>
+
+        <h5>Style</h5>
+        <div class="p-mb-3 p-text-bold">Bold</div>
+        <div class="p-mb-3 p-text-normal">Normal</div>
+        <div class="p-mb-3 p-text-light">Light</div>
+        <div class="p-mb-3 p-text-italic">Italic</div>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>
+
+<style scoped>
+.demo-container {
+    border: 2px solid var(--surface-d);
+}
+</style>                    
+`
+                }
+            }
+        }
+    }
+}
+</script>
\ No newline at end of file