TabView & TabPanel pt tab added

doc/tabview/pt/PTDoc.vue

@@ -0,0 +1,124 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <TabView>
+            <TabPanel
+                v-for="(tab, index) in scrollableTabs"
+                :key="tab.title"
+                :header="tab.title"
+                :pt="{
+                    headeraction: ({ props, parent }) => ({
+                        class: panelClass(props, parent, index)
+                    })
+                }"
+            >
+                <p>{{ tab.content }}</p>
+            </TabPanel>
+        </TabView>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            scrollableTabs: Array.from({ length: 3 }, (_, i) => ({
+                title: `Header ${i + 1}`,
+                content: `Tab ${i + 1} Content`
+            })),
+            code: {
+                basic: `
+<TabView>
+    <TabPanel v-for="(tab, index) in scrollableTabs" :key="tab.title" :header="tab.title"
+        :pt="{
+            headeraction: ({ props, parent }) => ({
+                class: panelClass(props, parent, index)
+            })
+        }">
+        <p>{{ tab.content }}</p>
+    </TabPanel>
+</TabView>`,
+                options: `
+<template>
+    <div class="card">
+        <TabView>
+            <TabPanel v-for="(tab, index) in scrollableTabs" :key="tab.title" :header="tab.title"
+                :pt="{
+                    headeraction: ({ props, parent }) => ({
+                        class: panelClass(props, parent, index)
+                    })
+                }">
+                <p>{{ tab.content }}</p>
+            </TabPanel>
+        </TabView>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            scrollableTabs: Array.from({ length: 3 }, (_, i) => ({
+                title: \`Header \${i + 1}\`,
+                content: \`Tab \${i + 1} Content\`
+            }))
+        }
+    },
+    methods: {
+        panelClass(props, parent, index) {
+            return [
+                {
+                    'bg-primary': parent.state.d_activeIndex === index
+                }
+            ];
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <TabView>
+            <TabPanel v-for="(tab, index) in scrollableTabs" :key="tab.title" :header="tab.title"
+                :pt="{
+                    headeraction: ({ props, parent }) => ({
+                        class: panelClass(props, parent, index)
+                    })
+                }">
+                <p>{{ tab.content }}</p>
+            </TabPanel>
+        </TabView>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const scrollableTabs = ref(Array.from({ length: 3 }, (_, i) => ({
+    title: \`Header \${i + 1}\`,
+    content: \`Tab \${i + 1} Content\`
+})));
+
+const panelClass = (props, parent, index) => {
+    return [
+        {
+            'bg-primary': parent.state.d_activeIndex === index
+        }
+    ];
+};
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        panelClass(props, parent, index) {
+            return [
+                {
+                    'bg-primary': parent.state.d_activeIndex === index
+                }
+            ];
+        }
+    }
+};
+</script>

doc/tabview/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div>
+        <img class="w-full" src="/images/pt/tabview.jpg" />
+    </div>
+</template>

doc/tabview/pt/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Panel 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 PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Image',
+                    description: 'Pass Through Image',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.accordion',
+                    label: 'TabView PT Options',
+                    description: 'Pass Through TabView',
+                    component: DocApiTable,
+                    data: getPTOption('TabView')
+                },
+                {
+                    id: 'pt.doc.tab',
+                    label: 'TabPanel PT Options',
+                    description: 'Pass Through TabPanel',
+                    component: DocApiTable,
+                    data: getPTOption('TabPanel')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    description: 'Pass Through Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/toolbar/pt/PTDoc.vue

@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
+            <template #start>
+                <span>PrimeVue</span>
+            </template>
+            <template #end>
+                <Button label="Logout" />
+            </template>
+        </Toolbar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<TabView>
+    <Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
+        <template #start>
+            <span>PrimeVue</span>
+        </template>
+        <template #end>
+            <Button label="Logout" />
+        </template>
+    </Toolbar>
+</TabView>`,
+                options: `
+<template>
+    <div class="card">
+        <Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
+            <template #start>
+                <span>PrimeVue</span>
+            </template>
+            <template #end>
+                <Button label="Logout" />
+            </template>
+        </Toolbar>
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card">
+        <Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
+            <template #start>
+                <span>PrimeVue</span>
+            </template>
+            <template #end>
+                <Button label="Logout" />
+            </template>
+        </Toolbar>
+    </div>
+</template>`
+            }
+        };
+    },
+    methods: {
+        panelClass(props, parent, index) {
+            return [
+                {
+                    'bg-primary': parent.state.d_activeIndex === index
+                }
+            ];
+        }
+    }
+};
+</script>

doc/toolbar/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div>
+        <img class="w-full" src="/images/pt/toolbar.jpg" />
+    </div>
+</template>

doc/toolbar/pt/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Toolbar 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 PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Image',
+                    description: 'Pass Through Image',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc',
+                    label: 'Toolbar Elements',
+                    component: DocApiTable,
+                    data: getPTOption('Toolbar')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    description: 'Pass Through Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>

pages/tabview/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Tabs Component" header="TabView" description="TabView is a container component to group content with tabs." :componentDocs="docs" :apiDocs="['TabView', 'TabPanel']" />
+    <DocComponent title="Vue Tabs Component" header="TabView" description="TabView is a container component to group content with tabs." :componentDocs="docs" :apiDocs="['TabView', 'TabPanel']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -12,6 +12,8 @@ import ImportDoc from '@/doc/tabview/ImportDoc.vue';
 import ScrollableDoc from '@/doc/tabview/ScrollableDoc.vue';
 import StyleDoc from '@/doc/tabview/StyleDoc.vue';
 import TemplateDoc from '@/doc/tabview/TemplateDoc.vue';
+import PTComponent from '@/doc/tabview/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -61,7 +63,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };

pages/toolbar/index.vue

@@ -1,11 +1,13 @@
 <template>
-    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" />
+    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/toolbar/AccessibilityDoc';
 import BasicDoc from '@/doc/toolbar/BasicDoc';
 import ImportDoc from '@/doc/toolbar/ImportDoc';
 import StyleDoc from '@/doc/toolbar/StyleDoc';
+import PTComponent from '@/doc/toolbar/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -30,7 +32,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };