From 3aae1bf675cf1109fb6046bc3a4cb03ebce216e5 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 11 Jan 2024 16:46:09 +0300
Subject: [PATCH] MeterGroup docs added

---
 assets/menu/menu.json                  |   5 +
 doc/metergroup/AccessibilityDoc.vue    |   9 ++
 doc/metergroup/BasicDoc.vue            |  66 ++++++++++++
 doc/metergroup/ImportDoc.vue           |  18 ++++
 doc/metergroup/LabelDoc.vue            |  69 ++++++++++++
 doc/metergroup/MinMaxDoc.vue           |  54 ++++++++++
 doc/metergroup/TemplatingDoc.vue       | 140 +++++++++++++++++++++++++
 doc/metergroup/VerticalDoc.vue         |  66 ++++++++++++
 doc/metergroup/pt/PTImage.vue          |   8 ++
 doc/metergroup/pt/index.vue            |  35 +++++++
 doc/metergroup/theming/StyledDoc.vue   |  69 ++++++++++++
 doc/metergroup/theming/TailwindDoc.vue |   6 ++
 doc/metergroup/theming/index.vue       |  40 +++++++
 pages/metergroup/index.vue             |  61 +++++++++++
 14 files changed, 646 insertions(+)
 create mode 100644 doc/metergroup/AccessibilityDoc.vue
 create mode 100644 doc/metergroup/BasicDoc.vue
 create mode 100644 doc/metergroup/ImportDoc.vue
 create mode 100644 doc/metergroup/LabelDoc.vue
 create mode 100644 doc/metergroup/MinMaxDoc.vue
 create mode 100644 doc/metergroup/TemplatingDoc.vue
 create mode 100644 doc/metergroup/VerticalDoc.vue
 create mode 100644 doc/metergroup/pt/PTImage.vue
 create mode 100644 doc/metergroup/pt/index.vue
 create mode 100644 doc/metergroup/theming/StyledDoc.vue
 create mode 100644 doc/metergroup/theming/TailwindDoc.vue
 create mode 100644 doc/metergroup/theming/index.vue
 create mode 100644 pages/metergroup/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 6a9f47bd2..5bc2b1e2f 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -399,6 +399,11 @@
                             "name": "Inplace",
                             "to": "/inplace"
                         },
+                        {
+                            "name": "MeterGroup",
+                            "to": "/metergroup",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "ScrollTop",
                             "to": "/scrolltop"
diff --git a/doc/metergroup/AccessibilityDoc.vue b/doc/metergroup/AccessibilityDoc.vue
new file mode 100644
index 000000000..9dbdf98ce
--- /dev/null
+++ b/doc/metergroup/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>MeterGroup component uses <i>meter</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> prop.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/doc/metergroup/BasicDoc.vue b/doc/metergroup/BasicDoc.vue
new file mode 100644
index 000000000..3e7bc1a1a
--- /dev/null
+++ b/doc/metergroup/BasicDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>MeterGroup is used with the <i>value</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#239EF0', label: 'Mortgage', value: 25 },
+                { color: '#FAA419', label: 'Loan', value: 15 },
+                { color: '#EE5879', label: 'Credit Card', value: 20 }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#239EF0', label: 'Mortgage', value: 25 },
+                { color: '#FAA419', label: 'Loan', value: 15 },
+                { color: '#EE5879', label: 'Credit Card', value: 20 }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { color: '#239EF0', label: 'Mortgage', value: 25 },
+    { color: '#FAA419', label: 'Loan', value: 15 },
+    { color: '#EE5879', label: 'Credit Card', value: 20 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/ImportDoc.vue b/doc/metergroup/ImportDoc.vue
new file mode 100644
index 000000000..6000b25b8
--- /dev/null
+++ b/doc/metergroup/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import MeterGroup from 'primevue/metergroup';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/LabelDoc.vue b/doc/metergroup/LabelDoc.vue
new file mode 100644
index 000000000..81ac38166
--- /dev/null
+++ b/doc/metergroup/LabelDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Default layout of MeterGroup is <i>horizontal</i>, and also <i>orientation</i> property can be set as <i>vertical</i>.In addition, position of the label can be changed using <i>labelPosition</i> property that the default value is
+            <i>end</i> and also <i>start</i> option is available.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#239EF0', label: 'Mortgage', value: 25 },
+                { color: '#FAA419', label: 'Loan', value: 15 },
+                { color: '#EE5879', label: 'Credit Card', value: 20 }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#239EF0', label: 'Mortgage', value: 25 },
+                { color: '#FAA419', label: 'Loan', value: 15 },
+                { color: '#EE5879', label: 'Credit Card', value: 20 }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { color: '#239EF0', label: 'Mortgage', value: 25 },
+    { color: '#FAA419', label: 'Loan', value: 15 },
+    { color: '#EE5879', label: 'Credit Card', value: 20 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/MinMaxDoc.vue b/doc/metergroup/MinMaxDoc.vue
new file mode 100644
index 000000000..12a1076bf
--- /dev/null
+++ b/doc/metergroup/MinMaxDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" :min="-50" :max="50" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [{ label: 'Space used', value: 15 }],
+            code: {
+                basic: `
+<MeterGroup :value="value" :min="-50" :max="50" />
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" :min="-50" :max="50" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [{ label: 'Space used', value: 15 }],
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" :min="-50" :max="50" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([{ label: 'Space used', value: 15 }]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/TemplatingDoc.vue b/doc/metergroup/TemplatingDoc.vue
new file mode 100644
index 000000000..93c456eab
--- /dev/null
+++ b/doc/metergroup/TemplatingDoc.vue
@@ -0,0 +1,140 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            MeterGroup offers meter customization with the <i>meter</i> template that receives the meter instance from the value as a parameter and also <i>label</i> template receives value instance. In addition, the <i>start</i> and <i>end</i> slots
+            are available to define the start and end templating for MeterGroup respectively.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start">
+            <template #label="{ value }">
+                <div class="flex flex-column text-sm gap-2">
+                    <template v-for="(val, i) of value" :key="i">
+                        <span :style="{ color: val.color }" class="flex gap-2">
+                            <i :class="val.icon" />
+                            {{ val.label }} ({{ val.value }}%)</span
+                        >
+                    </template>
+                </div>
+            </template>
+            <template #start="{ totalPercent }">
+                <div class="flex mt-3 mb-2 justify-content-between">
+                    <span>Total spent: {{ totalPercent }}</span>
+                    <span>Savings: 1000$ </span>
+                </div>
+            </template>
+            <template #meter="slotProps">
+                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
+            </template>
+        </MeterGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#239EF0', label: 'Mortgage', value: 25, icon: 'pi pi-home' },
+                { color: '#FAA419', label: 'Loan', value: 15, icon: 'pi pi-money-bill' },
+                { color: '#EE5879', label: 'Credit Card', value: 20, icon: 'pi pi-credit-card' }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" labelPosition="start">
+    <template #label="{ value }">
+        <div class="flex flex-column text-sm">
+            <template v-for="(val, i) of value" :key="i">
+                <span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span>
+            </template>
+        </div>
+    </template>
+    <template #start="{ totalPercent }">
+        <div class="flex mt-3 mb-2 justify-content-between">
+            <span>Total spent: {{ totalPercent }}</span>
+            <span>Savings: 1000$ </span>
+        </div>
+    </template>
+    <template #meter="slotProps">
+        <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
+    </template>
+</MeterGroup>
+`,
+                options: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start">
+            <template #label="{ value }">
+                <div class="flex flex-column text-sm">
+                    <template v-for="(val, i) of value" :key="i">
+                        <span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span>
+                    </template>
+                </div>
+            </template>
+            <template #start="{ totalPercent }">
+                <div class="flex mt-3 mb-2 justify-content-between">
+                    <span>Total spent: {{ totalPercent }}</span>
+                    <span>Savings: 1000$ </span>
+                </div>
+            </template>
+            <template #meter="slotProps">
+                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
+            </template>
+        </MeterGroup>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#239EF0', label: 'Mortgage', value: 25 },
+                { color: '#FAA419', label: 'Loan', value: 15 },
+                { color: '#EE5879', label: 'Credit Card', value: 20 }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <MeterGroup :value="value" labelPosition="start">
+            <template #label="{ value }">
+                <div class="flex flex-column text-sm">
+                    <template v-for="(val, i) of value" :key="i">
+                        <span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span>
+                    </template>
+                </div>
+            </template>
+            <template #start="{ totalPercent }">
+                <div class="flex mt-3 mb-2 justify-content-between">
+                    <span>Total spent: {{ totalPercent }}</span>
+                    <span>Savings: 1000$ </span>
+                </div>
+            </template>
+            <template #meter="slotProps">
+                <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
+            </template>
+        </MeterGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { color: '#239EF0', label: 'Mortgage', value: 25 },
+    { color: '#FAA419', label: 'Loan', value: 15 },
+    { color: '#EE5879', label: 'Credit Card', value: 20 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/VerticalDoc.vue b/doc/metergroup/VerticalDoc.vue
new file mode 100644
index 000000000..2e9b01707
--- /dev/null
+++ b/doc/metergroup/VerticalDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
+    </DocSectionText>
+    <div class="card flex" style="height: 350px">
+        <MeterGroup :value="value" orientation="vertical" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#4ADE81', label: 'E-mails', value: 17 },
+                { color: '#FB923C', label: 'Messages', value: 36 },
+                { color: '#C084FC', label: 'Other', value: 24 }
+            ],
+            code: {
+                basic: `
+<MeterGroup :value="value" orientation="vertical" />
+`,
+                options: `
+<template>
+    <div class="card flex" style="height: 350px">
+        <MeterGroup :value="value" orientation="vertical" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: [
+                { color: '#4ADE81', label: 'E-mails', value: 17 },
+                { color: '#FB923C', label: 'Messages', value: 36 },
+                { color: '#C084FC', label: 'Other', value: 24 }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex" style="height: 350px">
+        <MeterGroup :value="value" orientation="vertical" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref([
+    { color: '#4ADE81', label: 'E-mails', value: 17 },
+    { color: '#FB923C', label: 'Messages', value: 36 },
+    { color: '#C084FC', label: 'Other', value: 24 }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/pt/PTImage.vue b/doc/metergroup/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/metergroup/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/metergroup/pt/index.vue b/doc/metergroup/pt/index.vue
new file mode 100644
index 000000000..5dfd3d120
--- /dev/null
+++ b/doc/metergroup/pt/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>MeterGroup Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.metergroup',
+                    label: 'MeterGroup PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('MeterGroup')
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/metergroup/theming/StyledDoc.vue b/doc/metergroup/theming/StyledDoc.vue
new file mode 100644
index 000000000..177885499
--- /dev/null
+++ b/doc/metergroup/theming/StyledDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-metergroup</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-horizontal</td>
+                    <td>Container element when orientation mode is horizontal.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-vertical</td>
+                    <td>Container element when orientation mode is vertical.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-meter-container</td>
+                    <td>Container of the meters.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-meter</td>
+                    <td>Content of a meter.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-label-list</td>
+                    <td>Container element of the list of labels.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-label-list-start</td>
+                    <td>Container element when label position is start.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-label-list-end</td>
+                    <td>Container element when label position is end.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-label-list-horizontal</td>
+                    <td>Container element when label orientation is horizontal.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-label-list-vertical</td>
+                    <td>Container element when label orientation is vertical.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-label-list-item</td>
+                    <td>Container element of a list item.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-label-list-type</td>
+                    <td>Container element of a list type.</td>
+                </tr>
+                <tr>
+                    <td>p-metergroup-label</td>
+                    <td>Content of a label.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/doc/metergroup/theming/TailwindDoc.vue b/doc/metergroup/theming/TailwindDoc.vue
new file mode 100644
index 000000000..fe4aadc26
--- /dev/null
+++ b/doc/metergroup/theming/TailwindDoc.vue
@@ -0,0 +1,6 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
+        Tailwind CSS.
+    </DocSectionText>
+</template>
diff --git a/doc/metergroup/theming/index.vue b/doc/metergroup/theming/index.vue
new file mode 100644
index 000000000..71e5aca44
--- /dev/null
+++ b/doc/metergroup/theming/index.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>MeterGroup Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'theming.unstyled',
+                    label: 'Unstyled',
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'theming.tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/metergroup/index.vue b/pages/metergroup/index.vue
new file mode 100644
index 000000000..a511ed3ab
--- /dev/null
+++ b/pages/metergroup/index.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocComponent title="Vue MeterGroup Component" header="MeterGroup" description="MeterGroup is a group of process status indicators." :componentDocs="docs" :apiDocs="['MeterGroup']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/metergroup/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/metergroup/BasicDoc.vue';
+import ImportDoc from '@/doc/metergroup/ImportDoc.vue';
+import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
+import LabelDoc from '@/doc/metergroup/LabelDoc.vue';
+import TemplatingDoc from '@/doc/metergroup/TemplatingDoc.vue';
+import MinMaxDoc from '@/doc/metergroup/MinMaxDoc.vue';
+import PTComponent from '@/doc/metergroup/pt/index.vue';
+import ThemingDoc from '@/doc/metergroup/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'vertical',
+                    label: 'Vertical',
+                    component: VerticalDoc
+                },
+                {
+                    id: 'label',
+                    label: 'Label',
+                    component: LabelDoc
+                },
+                {
+                    id: 'minmax',
+                    label: 'Min-Max',
+                    component: MinMaxDoc
+                },
+                {
+                    id: 'templating',
+                    label: 'Templating',
+                    component: TemplatingDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>