global pt doc

doc/passthrough/BasicDoc.vue

@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <div class="card">
+        <Panel header="Header" :pt="{ header: { class: 'bg-primary' }, title: { class: 'text-white' }, toggler: { class: 'text-white hover:bg-primary-reverse' } }" toggleable>
+            <p class="m-0">
+                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>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Panel header="Header" toggleable
+    :pt="{
+        header: { class: 'bg-primary' },
+        title: { class: 'text-white' },
+        toggler: { class: 'text-white hover:bg-primary-reverse' }
+    }">
+    <p class="m-0">
+        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>`,
+                options: `
+<template>
+    <div class="card">
+        <Panel header="Header" toggleable
+            :pt="{
+                header: { class: 'bg-primary' },
+                title: { class: 'text-white' },
+                toggler: { class: 'text-white hover:bg-primary-reverse' }
+            }">
+            <p class="m-0">
+                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>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Panel header="Header" toggleable
+            :pt="{
+                header: { class: 'bg-primary' },
+                title: { class: 'text-white' },
+                toggler: { class: 'text-white hover:bg-primary-reverse' }
+            }">
+            <p class="m-0">
+                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>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/passthrough/GlobalPTDoc.vue

@@ -0,0 +1,34 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue components can be globally managed through a single location using the global <i>pt</i> object. Before using the pt state from <i>PrimeVueContext</i>, it is essential to encapsulate your application with <i>PrimeVueProvider</i>.
+            For more details, <PrimeVueNuxtLink to="/installation/#plugin">click</PrimeVueNuxtLink> here.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+// main.js
+const pt = {
+    panel: {
+        header: { class: 'bg-primary' }
+    },
+    autocomplete: {
+        input: { root: { class: 'w-16rem' } }
+    }
+}
+
+const app = createApp(App);
+app.use(PrimeVue, { pt });
+`
+            }
+        };
+    }
+};
+</script>

pages/passthrough/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <DocComponent
+        title="PrimeVue PassThrough"
+        header="PassThrough"
+        description="The Pass Through feature enables direct implementation of all relevant attributes (e.g., style, class) within the respective HTML tag."
+        :componentDocs="docs"
+        :apiDocs="['Config']"
+    />
+</template>
+
+<script>
+import BasicDoc from '@/doc/passthrough/BasicDoc.vue';
+import GlobalPTDoc from '@/doc/passthrough/GlobalPTDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'globalpt',
+                    label: 'Global PassThrough Options',
+                    component: GlobalPTDoc
+                }
+            ]
+        };
+    }
+};
+</script>

plugins/primeVue.js

@@ -107,8 +107,166 @@ import DocSectionText from '@/components/doc/DocSectionText';
 import CodeHighlight from '@/components/layout/CodeHighlight';
 import DevelopmentSection from '@/components/layout/DevelopmentSection';
 
+const pt = {
+    avatargroup: {
+        root: {
+            class: 'flex'
+        }
+    },
+    avatar: {
+        root: ({ parent }) => ({
+            style: parent.instance !== undefined ? 'margin-left: -1rem' : null
+        })
+    },
+    button: {
+        root: ({ context }) => {
+            // context.disabled
+        }
+    },
+    checkbox: {
+        root: ({ context }) => {
+            // context.checked
+            // context.focused
+            // context.disabled
+        }
+    },
+    datatable: {
+        root: { class: 'ddddd1' },
+        columnGroup: {
+            root: { class: 'deneme88' }
+        },
+        headerRow: { class: 'xxx' },
+        row: {
+            root: ({ row }) => ({ class: row.context.index === 1 ? 'xxxx4' : 'xxxx5' })
+        },
+        column: {
+            root: { class: 'column333' }
+        }
+    },
+    accordion: {
+        root:
+            // console.log(instance),
+            {
+                class: 'root'
+            },
+        tab: {
+            root: {
+                class: 'tab-root'
+            },
+            header: {
+                class: 'tab-header'
+            },
+            headerAction: {
+                class: 'tab-header-action'
+            }
+        }
+        // header: {
+        //     class: 'header-class'
+        // },
+        // headerAction: ({ instance }) => {
+        //     console.log('jwkdhuv');
+        //     console.log(instance);
+        // }
+    },
+    // accordiontab: {
+    //     root: {
+    //         class: 'tab-root'
+    //     },
+    //     header: {
+    //         class: 'root-header'
+    //     }
+    // },
+    directives: {
+        ripple: {
+            css: {
+                root: {
+                    class: 'deneme',
+                    style: {
+                        // display: 'block',
+                        // position: 'absolute',
+                        background: 'rgba(75, 175, 80, 0.9)'
+                        // borderRadius: '100%',
+                        // transform: 'scale(0)',
+                        // pointerEvents: 'none'
+                    }
+                }
+            },
+            hooks: {
+                mounted: ($el, el, binding) => {
+                    // console.log('mounted', $el);
+                },
+                unmounted: (el) => {
+                    // console.log('unmounted', el);
+                }
+            }
+        },
+        badge: {
+            css: {
+                root: {
+                    class: 'bg-cyan-500'
+                }
+            },
+            hooks: {
+                mounted: ($el) => {
+                    // console.log($el);
+                },
+                updated: ($el) => {
+                    // console.log($el);
+                }
+            }
+        },
+        tooltip: {
+            hooks: {
+                beforeMount: (el, binding) => {},
+                unmounted: (el) => {
+                    // console.log('unmounted');
+                },
+                beforeUpdate() {
+                    // console.log('before update');
+                },
+                updated: (el, options) => {
+                    // console.log('global updated');
+                }
+            },
+            css: {
+                // root: {
+                //     class: 'deneme',
+                //     style: {
+                //         position: 'absolute'
+                //     }
+                // },
+                text: {
+                    class: 'text-2xl'
+                }
+            }
+        },
+        focustrap: {
+            css: {
+                root: {
+                    class: 'xxxxxx'
+                },
+                firstFocusableElement: {
+                    class: 'yyyyyy'
+                }
+            },
+            hooks: {
+                mounted: ($el) => {
+                    // console.log($el);
+                }
+            }
+        },
+        styleclass: {
+            hooks: {
+                mounted(a, b, c, d, e) {
+                    // console.log(e);
+                }
+            }
+        }
+    }
+};
+
 export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.vueApp.use(PrimeVue, { ripple: true });
+    nuxtApp.vueApp.use(PrimeVue, { ripple: true, pt });
 
     nuxtApp.vueApp.use(ToastService);
     nuxtApp.vueApp.use(ConfirmationService);