Merge branch 'master' of https://github.com/primefaces/primevue into radio-button-pt-fix

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [3.31.0](https://github.com/primefaces/primevue/tree/3.31.0) (2023-07-25)
+
+**Implemented New Features and Enhancements:**
+
+- Tailwind Theme for Unstyled Mode [\#4205](https://github.com/primefaces/primevue/issues/4205)
+- PT context improvements  [\#4196](https://github.com/primefaces/primevue/issues/4196)
+- Add item parameter to menuitem options for pt property [\#4190](https://github.com/primefaces/primevue/issues/4190)
+
+**Fixed bugs:**
+
+- Bootstrap: Breadcrumb icon fix [\#4195](https://github.com/primefaces/primevue/issues/4195)
+- CascadeSelect unstyled mode defect [\#4192](https://github.com/primefaces/primevue/issues/4192)
+- InputSwitch: pt prop has incorrect type [\#4187](https://github.com/primefaces/primevue/issues/4187)
+- TabView: ID used in aria-controls does not exist on panel content div [\#4181](https://github.com/primefaces/primevue/issues/4181)
+- Dropdown: default optionLabel and default optionValue are null \(but doc say, default to label and value\) [\#4174](https://github.com/primefaces/primevue/issues/4174)
+- Image: Preview not closing on escape click [\#4089](https://github.com/primefaces/primevue/issues/4089)
+
 ## [3.30.2](https://github.com/primefaces/primevue/tree/3.30.2) (2023-07-20)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.30.1...3.30.2)

assets/styles/layout/_doc.scss

@@ -1,10 +1,11 @@
 .doc-tabmenu {
     list-style: none;
     margin: 0 17rem 0 0;
-    padding: 0;
+    padding: 0 0 1px 0;
     display: flex;
     margin-bottom: 2rem;
     border-bottom: 1px solid var(--surface-border);
+    overflow: auto;
 
     li {
         margin-bottom: -1px;
@@ -13,7 +14,7 @@
             background-color: transparent;
             border: 0 none;
             display: block;
-            padding: 1rem 0;
+            padding: 1rem 2rem;
             min-width: 12rem;
             text-align: center;
             color: var(--text-color-secondary);
@@ -25,6 +26,7 @@
             border-bottom: 1px solid transparent;
             border-top-right-radius: var(--border-round);
             border-top-left-radius: var(--border-round);
+            white-space: nowrap;
 
             &:hover {
                 border-bottom-color: var(--text-color);

components/doc/DocComponent.vue

@@ -12,8 +12,11 @@
             <li :class="{ 'doc-tabmenu-active': tab === 1 }">
                 <button type="button" @click="tab = 1">API</button>
             </li>
-            <li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 2 }">
+            <li :class="{ 'doc-tabmenu-active': tab === 2 }">
-                <button type="button" @click="tab = 2">PASS THROUGH</button>
+                <button type="button" @click="tab = 2">THEMING</button>
+            </li>
+            <li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 3 }">
+                <button type="button" @click="tab = 3">PASS THROUGH</button>
             </li>
         </ul>
 
@@ -34,6 +37,10 @@
             </div>
 
             <div v-if="tab === 2" class="doc-tabpanel">
+                <component :is="{ ...themingDocs }" />
+            </div>
+
+            <div v-if="tab === 3" class="doc-tabpanel">
                 <component :is="{ ...ptTabComponent }" />
             </div>
         </div>
@@ -42,14 +49,14 @@
 
 <script>
 export default {
-    props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent'],
+    props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent', 'themingDocs'],
     data() {
         return {
             tab: 0
         };
     },
     mounted() {
-        this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 2 : 0;
+        this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 3 : 0;
     }
 };
 </script>

components/doc/DocSectionCode.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative doc-section-code">
+    <div v-if="!embedded" class="relative doc-section-code">
         <div class="flex surface-card align-items-center justify-content-end absolute z-1" :style="{ right: '.75rem', top: '.75rem', gap: '.75rem' }">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <Button
@@ -111,6 +111,7 @@
 </code></pre>
         </template>
     </div>
+    <div v-else id="embed"></div>
 </template>
 
 <script>
@@ -154,6 +155,10 @@ export default {
         importCode: {
             type: Boolean,
             default: false
+        },
+        embedded: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -162,6 +167,9 @@ export default {
             codeLang: this.code['options'] ? 'composition' : 'basic'
         };
     },
+    mounted() {
+        this.embedded && useStackBlitz(this.codeLang, this.code['composition'], this.service, this.code.pages, this.dependencies, this.component, this.extFiles, this.embedded);
+    },
     methods: {
         toggleCodeMode(content) {
             this.codeMode = this.codeMode === 'basic' ? content : 'basic';

components/doc/codeeditor/index.js

@@ -28,9 +28,9 @@ const useCodeSandbox = (language, code, service, extPages, dependencies, compone
         .then((data) => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));
 };
 
-const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles) => {
+const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles, embedded = false) => {
     const getStackBlitzParameters = (sourceType) => {
-        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles }, sourceType);
+        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles, embedded }, sourceType);
 
         return { files, dependenciesDemo, sourceFileName };
     };
@@ -41,20 +41,28 @@ const useStackBlitz = (language, code, service, extPages, dependencies, componen
 
     Object.entries(stackBlitzParameters.files).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content));
 
-    sdk.openProject(
+    const primevueproject = {
-        {
+        title: embedded ? 'PrimeVue Tailwind Demo' : 'PrimeVue Demo',
-            title: 'PrimeVue Demo',
+        template: 'node',
-            template: 'node',
+        description: embedded
-            description:
+            ? "This example demonstrates how to style components with Tailwind CSS using PrimeVue's unstyled property. As mentioned in the PrimeVue documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
-                '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
+            : '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
-            dependencies: stackBlitzParameters.dependencies,
+        dependencies: stackBlitzParameters.dependencies,
-            files
+        files
-        },
+    };
-        {
+
+    if (embedded) {
+        sdk.embedProject('embed', primevueproject, {
+            openFile: 'src/main.js',
+            view: 'default',
+            height: '800px'
+        });
+    } else {
+        sdk.openProject(primevueproject, {
             newWindow: true,
             openFile: [stackBlitzParameters.sourceFileName]
-        }
+        });
-    );
+    }
 };
 
 export { useCodeSandbox, useStackBlitz };

components/lib/dock/Dock.d.ts

@@ -104,6 +104,10 @@ export interface DockContext {
      * Current index of the menuitem.
      */
     index: number;
+    /**
+     * Current menuitem
+     */
+    item: any;
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false

components/lib/dock/Dock.vue

@@ -1,6 +1,18 @@
 <template>
     <div :class="cx('root')" :style="style" v-bind="ptm('root')" data-pc-name="dock">
-        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt"></DockSub>
+        <DockSub
+            :model="model"
+            :templates="$slots"
+            :exact="exact"
+            :tooltipOptions="tooltipOptions"
+            :position="position"
+            :menuId="menuId"
+            :aria-label="ariaLabel"
+            :aria-labelledby="ariaLabelledby"
+            :tabindex="tabindex"
+            :pt="pt"
+            :unstyled="unstyled"
+        ></DockSub>
     </div>
 </template>
 

components/lib/dock/DockSub.vue

@@ -25,11 +25,11 @@
                     :aria-disabled="disabled(processedItem)"
                     @click="onItemClick($event, processedItem)"
                     @mouseenter="onItemMouseEnter(index)"
-                    v-bind="getPTOptions('menuitem', index)"
+                    v-bind="getPTOptions('menuitem', processedItem, index)"
                     :data-p-focused="isItemActive(getItemId(index))"
                     :data-p-disabled="disabled(processedItem) || false"
                 >
-                    <div :class="cx('content')" v-bind="getPTOptions('content', index)">
+                    <div :class="cx('content')" v-bind="getPTOptions('content', processedItem, index)">
                         <template v-if="!templates['item']">
                             <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
                                 <a
@@ -40,10 +40,10 @@
                                     tabindex="-1"
                                     aria-hidden="true"
                                     @click="onItemActionClick($event, processedItem, navigate)"
-                                    v-bind="getPTOptions('action', index)"
+                                    v-bind="getPTOptions('action', processedItem, index)"
                                 >
                                     <template v-if="!templates['icon']">
-                                        <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
+                                        <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
                                     </template>
                                     <component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
                                 </a>
@@ -56,10 +56,10 @@
                                 :target="processedItem.target"
                                 tabindex="-1"
                                 aria-hidden="true"
-                                v-bind="getPTOptions('action', index)"
+                                v-bind="getPTOptions('action', processedItem, index)"
                             >
                                 <template v-if="!templates['icon']">
-                                    <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
+                                    <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
                                 </template>
                                 <component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
                             </a>
@@ -141,10 +141,11 @@ export default {
         getItemProp(processedItem, name) {
             return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
         },
-        getPTOptions(key, index) {
+        getPTOptions(key, item, index) {
             return this.ptm(key, {
                 context: {
                     index,
+                    item,
                     active: this.isItemActive(this.getItemId(index))
                 }
             });

components/lib/inputmask/InputMask.d.ts

@@ -10,7 +10,16 @@
 import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | null | undefined;
+export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | ((options: InputMaskPassThroughMethodOptions) => InputMaskPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputMaskPassThroughMethodOptions {
+    instance: any;
+    props: InputMaskProps;
+    context: InputMaskContext;
+}
 
 /**
  * Custom passthrough(pt) options.
@@ -35,6 +44,22 @@ export interface InputMaskPassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines current options in InputMask component.
+ */
+export interface InputMaskContext {
+    /**
+     * Current filled state of the component as a boolean.
+     * @defaultValue false
+     */
+    filled: boolean;
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in InputMask component.
  */
@@ -79,6 +104,9 @@ export interface InputMaskProps {
     unstyled?: boolean;
 }
 
+/**
+ * Defines valid slots in InputMask component.
+ */
 export interface InputMaskSlots {}
 
 /**

components/lib/inputmask/InputMask.vue

@@ -1,5 +1,5 @@
 <template>
-    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root')" data-pc-name="inputmask" />
+    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root', ptmParams)" data-pc-name="inputmask" />
 </template>
 
 <script>
@@ -496,6 +496,14 @@ export default {
     computed: {
         filled() {
             return this.modelValue != null && this.modelValue.toString().length > 0;
+        },
+        ptmParams() {
+            return {
+                context: {
+                    filled: this.filled,
+                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
+                }
+            };
         }
     }
 };

components/lib/megamenu/MegaMenu.d.ts

@@ -154,6 +154,14 @@ export interface MegaMenuState {
  * Defines current options in MegaMenu component.
  */
 export interface MegaMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false

components/lib/megamenu/MegaMenuSub.vue

@@ -15,27 +15,27 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, 'menuitem')"
+                v-bind="getPTOptions(processedItem, index, 'menuitem')"
                 :data-p-highlight="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                                <span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
                             <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                            <span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="isItemGroup(processedItem)">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
-                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -58,6 +58,7 @@
                                 :exact="exact"
                                 :level="level + 1"
                                 :pt="pt"
+                                :unstyled="unstyled"
                                 @item-click="$emit('item-click', $event)"
                                 @item-mouseenter="$emit('item-mouseenter', $event)"
                             />
@@ -150,9 +151,11 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
-        getPTOptions(processedItem, key) {
+        getPTOptions(processedItem, index, key) {
             return this.ptm(key, {
                 context: {
+                    item: processedItem,
+                    index,
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }

components/lib/menu/Menu.d.ts

@@ -119,6 +119,14 @@ export interface MenuState {
  * Defines current options in Menu component.
  */
 export interface MenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
     /**
      * Current focused state of menuitem as a boolean.
      * @defaultValue false

components/lib/menu/Menu.vue

@@ -30,7 +30,7 @@
                             </template>
                         </template>
                         <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="[cx('separator'), item.class]" :style="item.style" role="separator" v-bind="ptm('separator')"></li>
-                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
+                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :index="i" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
                     </template>
                 </ul>
                 <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">

components/lib/menu/Menuitem.vue

@@ -47,7 +47,8 @@ export default {
         templates: null,
         exact: null,
         id: null,
-        focusedOptionId: null
+        focusedOptionId: null,
+        index: null
     },
     methods: {
         getItemProp(processedItem, name) {
@@ -56,6 +57,8 @@ export default {
         getPTOptions(key) {
             return this.ptm(key, {
                 context: {
+                    item: this.item,
+                    index: this.index,
                     focused: this.isItemFocused()
                 }
             });

components/lib/menubar/Menubar.d.ts

@@ -151,6 +151,14 @@ export interface MenubarState {
  * Defines current options in Menubar component.
  */
 export interface MenubarContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false

components/lib/menubar/MenubarSub.vue

@@ -14,27 +14,27 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, 'menuitem')"
+                v-bind="getPTOptions(processedItem, index, 'menuitem')"
                 :data-p-highlight="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
                             <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
                                 <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
-                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -53,6 +53,7 @@
                     :exact="exact"
                     :level="level + 1"
                     :pt="pt"
+                    :unstyled="unstyled"
                     @item-click="$emit('item-click', $event)"
                     @item-mouseenter="$emit('item-mouseenter', $event)"
                 />
@@ -137,9 +138,11 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
-        getPTOptions(processedItem, key) {
+        getPTOptions(processedItem, index, key) {
             return this.ptm(key, {
                 context: {
+                    item: processedItem,
+                    index,
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }

components/lib/panelmenu/PanelMenu.d.ts

@@ -134,6 +134,10 @@ export interface PanelMenuState {
  * Defines current options in PanelMenu component.
  */
 export interface PanelMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
     /**
      * Index of the menuitem.
      */

components/lib/panelmenu/PanelMenuSub.vue

@@ -130,6 +130,7 @@ export default {
         getPTOptions(key, processedItem, index) {
             return this.ptm(key, {
                 context: {
+                    item: processedItem,
                     index,
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)

components/lib/speeddial/SpeedDial.d.ts

@@ -112,6 +112,11 @@ export interface SpeedDialContext {
      * @defaultValue false
      */
     active: boolean;
+    /**
+     * Current hidden state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    hidden: boolean;
 }
 
 /**

components/lib/speeddial/SpeedDial.vue

@@ -111,7 +111,8 @@ export default {
         getPTOptions(id, key) {
             return this.ptm(key, {
                 context: {
-                    active: this.isItemActive(id)
+                    active: this.isItemActive(id),
+                    hidden: !this.d_visible
                 }
             });
         },

components/lib/splitterpanel/SplitterPanel.d.ts

@@ -19,6 +19,7 @@ export declare type SplitterPanelPassThroughOptionType = SplitterPanelPassThroug
 export interface SplitterPanelPassThroughMethodOptions {
     instance: any;
     props: SplitterPanelProps;
+    context: SplitterPanelContext;
 }
 
 /**
@@ -44,6 +45,16 @@ export interface SplitterPanelPassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines options in SplitterPanel component.
+ */
+export interface SplitterPanelContext {
+    /**
+     * Current nested state of the panel.
+     */
+    nested?: boolean;
+}
+
 /**
  * Defines valid properties in SplitterPanel component.
  */

components/lib/splitterpanel/SplitterPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" v-bind="ptm('root')" data-pc-name="splitterpanel">
+    <div ref="container" :class="cx('root')" v-bind="ptm('root', getPTOptions)" data-pc-name="splitterpanel">
         <slot></slot>
     </div>
 </template>
@@ -15,6 +15,13 @@ export default {
             return this.$slots.default().some((child) => {
                 return child.type.name === 'Splitter';
             });
+        },
+        getPTOptions() {
+            return {
+                context: {
+                    nested: this.isNested
+                }
+            };
         }
     }
 };

components/lib/steps/Steps.d.ts

@@ -70,6 +70,10 @@ export interface StepsPassThroughAttributes {
  * Defines current options in Steps component.
  */
 export interface StepsContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
     /**
      * Index of the menuitem.
      */

components/lib/steps/Steps.vue

@@ -46,6 +46,7 @@ export default {
         getPTOptions(key, item, index) {
             return this.ptm(key, {
                 context: {
+                    item,
                     index,
                     active: this.isActive(item),
                     disabled: this.isItemDisabled(item)

components/lib/tabmenu/TabMenu.d.ts

@@ -86,6 +86,10 @@ export interface TabMenuState {
  * Defines current options in TabMenu component.
  */
 export interface TabMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
     /**
      * Index of the menuitem
      */

components/lib/tabmenu/TabMenu.vue

@@ -9,7 +9,7 @@
                         :class="[cx('menuitem', { item, isActive, isExactActive }), item.class]"
                         :style="item.style"
                         role="presentation"
-                        v-bind="getPTOptions('menuitem', i)"
+                        v-bind="getPTOptions('menuitem', item, i)"
                         :data-p-highlight="exact ? isExactActive : isActive"
                         :data-p-disabled="disabled(item)"
                     >
@@ -25,11 +25,11 @@
                                 :tabindex="-1"
                                 @click="onItemClick($event, item, i, navigate)"
                                 @keydown="onKeydownItem($event, item, i, navigate)"
-                                v-bind="getPTOptions('action', i)"
+                                v-bind="getPTOptions('action', item, i)"
                             >
                                 <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
-                                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
+                                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
-                                <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
+                                <span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item" :index="i"></component>
@@ -42,15 +42,15 @@
                     role="presentation"
                     @click="onItemClick($event, item, i)"
                     @keydown="onKeydownItem($event, item, i)"
-                    v-bind="getPTOptions('menuitem', i)"
+                    v-bind="getPTOptions('menuitem', item, i)"
                     :data-p-highlight="d_activeIndex === i"
                     :data-p-disabled="disabled(item)"
                 >
                     <template v-if="!$slots.item">
-                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('action', i)">
+                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('action', item, i)">
                             <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
-                            <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
+                            <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
-                            <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
+                            <span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :index="i"></component>
@@ -98,9 +98,10 @@ export default {
         clearTimeout(this.timeout);
     },
     methods: {
-        getPTOptions(key, index) {
+        getPTOptions(key, item, index) {
             return this.ptm(key, {
                 context: {
+                    item,
                     index
                 }
             });

components/lib/tailwind/Tailwind.d.ts

@@ -0,0 +1,5 @@
+import { PrimeVuePTOptions } from '../config';
+
+interface Tailwind extends PrimeVuePTOptions {}
+
+export default Tailwind;

components/lib/tailwind/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./tailwind.cjs.js",
+    "module": "./tailwind.esm.js",
+    "unpkg": "./tailwind.min.js",
+    "types": "./Tailwind.d.ts"
+}

components/lib/tieredmenu/TieredMenu.d.ts

@@ -135,6 +135,14 @@ export interface TieredMenuState {
  * Defines current options in TieredMenu component.
  */
 export interface TieredMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Index of the menuitem.
+     */
+    index: number;
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false

components/lib/tieredmenu/TieredMenuSub.vue

@@ -14,27 +14,27 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, 'menuitem')"
+                v-bind="getPTOptions(processedItem, index, 'menuitem')"
                 :data-p-highlight="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
                             <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
-                                <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -127,9 +127,11 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
-        getPTOptions(processedItem, key) {
+        getPTOptions(processedItem, index, key) {
             return this.ptm(key, {
                 context: {
+                    item: processedItem,
+                    index,
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }

components/lib/toolbar/Toolbar.vue

@@ -1,12 +1,12 @@
 <template>
     <div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')" data-pc-name="toolbar">
-        <div :class="cx('start')" data-pc-section="start" v-bind="ptm('start')">
+        <div :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
-        <div :class="cx('center')" data-pc-section="center" v-bind="ptm('center')">
+        <div :class="cx('center')" v-bind="ptm('center')">
             <slot name="center"></slot>
         </div>
-        <div :class="cx('end')" data-pc-section="end" v-bind="ptm('end')">
+        <div :class="cx('end')" v-bind="ptm('end')">
             <slot name="end"></slot>
         </div>
     </div>

doc/accordion/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/accordion/theming/UnstyledDoc.vue

@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Accordion :activeIndex="0">
+            <AccordionTab header="Header I">
+                <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>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/accordion/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Accordion Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/autocomplete/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/autocomplete/theming/UnstyledDoc.vue

@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>

doc/autocomplete/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>AutoComplete Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/avatar/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="stylingofavatar" label="Styling of Avatar" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
@@ -42,4 +42,21 @@
             </tbody>
         </table>
     </div>
+    <DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-avatar-group</td>
+                    <td>Container element.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>

doc/avatar/theming/UnstyledDoc.vue

@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-5">
+            <div>
+                <h5>Image</h5>
+                <div class="flex">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                </div>
+            </div>
+
+            <div>
+                <h5>Badge</h5>
+                <Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+            </div>
+
+            <div>
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+            </div>
+        </div>
+    </div>
+    <div class="card flex justify-content-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+            <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
+        </AvatarGroup>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/avatar/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Avatar Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/badge/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/badge/theming/UnstyledDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="12" severity="warning"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/badge/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Badge Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/blockui/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/blockui/theming/UnstyledDoc.vue

@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <div class="mb-3">
+            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+            <Button label="Unblock" @click="blocked = false"></Button>
+        </div>
+        <BlockUI :blocked="blocked">
+            <Panel header="Basic">
+                <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>
+        </BlockUI>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const blocked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/blockui/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>BlockUI Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/breadcrumb/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/breadcrumb/theming/UnstyledDoc.vue

@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Breadcrumb requires a collection of menuitems as its <i>model</i>.</p>
+    </DocSectionText>
+
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home',
+                to: '/'
+            },
+            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const home = ref({
+    icon: 'pi pi-home',
+    to: '/',
+});
+const items = ref([
+    {label: 'Computer'},
+    {label: 'Notebook'},
+    {label: 'Accessories'},
+    {label: 'Backpacks'},
+    {label: 'Item'}
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/breadcrumb/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Breadcrumb Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/button/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/button/theming/UnstyledDoc.vue

@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-3">
+        <Button label="Primary" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warning" severity="warning" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>

doc/button/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Button Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/calendar/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/calendar/theming/UnstyledDoc.vue

@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Calendar v-model="date" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/calendar/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Calendar Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/card/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/card/theming/UnstyledDoc.vue

@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex align-items-center justify-content-center">
+        <Card style="width: 25em">
+            <template #header>
+                <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
+            </template>
+            <template #title> Advanced Card </template>
+            <template #subtitle> Card subtitle </template>
+            <template #content>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+            <template #footer>
+                <Button icon="pi pi-check" label="Save" />
+                <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/card/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Card Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/carousel/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">

doc/carousel/theming/UnstyledDoc.vue

@@ -0,0 +1,85 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+            <template #item="slotProps">
+                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                    <div class="mb-3">
+                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                    </div>
+                    <div>
+                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
+                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
+                        <div class="mt-5">
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Carousel>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
+})
+
+const products = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1199px',
+        numVisible: 3,
+        numScroll: 3
+    },
+    {
+        breakpoint: '991px',
+        numVisible: 2,
+        numScroll: 2
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 1,
+        numScroll: 1
+    }
+]);
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/carousel/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Carousel Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/cascadeselect/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/cascadeselect/theming/UnstyledDoc.vue

@@ -0,0 +1,179 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/cascadeselect/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>CascadeSelect Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/chart/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/checkbox/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">

doc/checkbox/theming/UnstyledDoc.vue

@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" :binary="true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/checkbox/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Checkbox Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/chip/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/chip/theming/StyledDoc.vue

@@ -0,0 +1,33 @@
+<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-chip</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-chip-image</td>
+                    <td>Container element in image mode.</td>
+                </tr>
+                <tr>
+                    <td>p-chip-text</td>
+                    <td>Text of the chip.</td>
+                </tr>
+                <tr>
+                    <td>pi-chip-remove-icon</td>
+                    <td>Remove icon.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

doc/chip/theming/UnstyledDoc.vue

@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Apple" icon="pi pi-apple" />
+        <Chip label="Facebook" icon="pi pi-facebook" />
+        <Chip label="Google" icon="pi pi-google" />
+        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+    </div>
+</template>
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/chip/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Chip Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/chips/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">

doc/chips/theming/UnstyledDoc.vue

@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Chips v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/chips/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Chips Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/colorpicker/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">

doc/colorpicker/theming/UnstyledDoc.vue

@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const color = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/colorpicker/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ColorPicker Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/common/apidoc/index.json

@@ -12408,7 +12408,8 @@
                             "default": ""
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedBy": "default"
                 },
                 "PrimeVueLocaleAriaOptions": {
                     "relatedProp": "",
@@ -19093,6 +19094,14 @@
                             "default": "",
                             "description": "Current index of the menuitem."
                         },
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
                         {
                             "name": "active",
                             "optional": false,
@@ -24170,6 +24179,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "InputMaskPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": ""
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputMaskProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputMaskContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "InputMaskPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
                     "relatedProp": "InputMaskProps.pt",
@@ -24206,6 +24243,29 @@
                     ],
                     "methods": []
                 },
+                "InputMaskContext": {
+                    "description": "Defines current options in InputMask component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current filled state of the component as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the component as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "InputMaskProps": {
                     "description": "Defines valid properties in InputMask component.",
                     "relatedProp": "",
@@ -24278,6 +24338,7 @@
                     "methods": []
                 },
                 "InputMaskSlots": {
+                    "description": "Defines valid slots in InputMask component.",
                     "relatedProp": "",
                     "props": [],
                     "methods": []
@@ -24366,7 +24427,7 @@
             "description": "Defines the custom types used by the module.",
             "values": {
                 "InputMaskPassThroughOptionType": {
-                    "values": "InputMaskPassThroughAttributes | null | undefined"
+                    "values": "InputMaskPassThroughAttributes | (options: InputMaskPassThroughMethodOptions) => undefined | string | null | undefined"
                 }
             }
         }
@@ -26808,6 +26869,22 @@
                     "description": "Defines current options in MegaMenu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of the menuitem."
+                        },
                         {
                             "name": "active",
                             "optional": false,
@@ -27262,6 +27339,22 @@
                     "description": "Defines current options in Menu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of the menuitem."
+                        },
                         {
                             "name": "focused",
                             "optional": false,
@@ -27731,6 +27824,22 @@
                     "description": "Defines current options in Menubar component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of the menuitem."
+                        },
                         {
                             "name": "active",
                             "optional": false,
@@ -32126,6 +32235,14 @@
                     "description": "Defines current options in PanelMenu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
                         {
                             "name": "index",
                             "optional": false,
@@ -36956,6 +37073,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "Current active state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "hidden",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current hidden state of menuitem as a boolean."
                         }
                     ],
                     "methods": []
@@ -37966,6 +38091,13 @@
                             "readonly": false,
                             "type": "SplitterPanelProps",
                             "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SplitterPanelContext",
+                            "default": ""
                         }
                     ],
                     "methods": []
@@ -38006,6 +38138,21 @@
                     ],
                     "methods": []
                 },
+                "SplitterPanelContext": {
+                    "description": "Defines options in SplitterPanel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "nested",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Current nested state of the panel."
+                        }
+                    ],
+                    "methods": []
+                },
                 "SplitterPanelProps": {
                     "description": "Defines valid properties in SplitterPanel component.",
                     "relatedProp": "",
@@ -38200,6 +38347,14 @@
                     "description": "Defines current options in Steps component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
                         {
                             "name": "index",
                             "optional": false,
@@ -38603,6 +38758,14 @@
                     "description": "Defines current options in TabMenu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
                         {
                             "name": "index",
                             "optional": false,
@@ -39647,6 +39810,660 @@
             }
         }
     },
+    "tailwind/Tailwind": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "default": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "accordion",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AccordionPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "accordiontab",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AccordionTabPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "autocomplete",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AutoCompletePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "avatar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AvatarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "avatargroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AvatarGroupPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "badge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<BadgePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "blockui",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<BlockUIPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "breadcrumb",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<BreadcrumbPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "calendar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CalendarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "card",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CardPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "carousel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CarouselPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "cascadeselect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CascadeSelectPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "chart",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ChartPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CheckboxPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "chip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ChipPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "chips",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ChipsPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "colorpicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ColorPickerPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "column",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ColumnPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "columngroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ColumnGroupPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "confirmdialog",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ConfirmDialogPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "confirmpopup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ConfirmPopupPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "contextmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ContextMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "datatable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DataTablePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dataview",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DataViewPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dataviewlayoutoptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DataViewLayoutOptionsPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "deferredcontent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DeferredContentPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "divider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DividerPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dialog",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DialogPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dock",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DockPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DropdownPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dynamicdialog",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DialogPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "editor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<EditorPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "fieldset",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<FieldsetPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "fileupload",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<FileUploadPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "galleria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<GalleriaPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ImagePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlinemessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InlineMessagePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inplace",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InplacePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inputmask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InputMaskPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inputnumber",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InputNumberPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inputswitch",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InputSwitchPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inputtext",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InputTextPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "knob",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<KnobPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "listbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ListboxPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "megamenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MegaMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "menubar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MenubarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MessagePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "multiselect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MultiSelectPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "orderlist",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<OrderListPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "organizationchart",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<OrganizationChartPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "overlaypanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<OverlayPanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PaginatorPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "panelmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PanelMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "password",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PasswordPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "picklist",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PickListPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "progressbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ProgressBarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "progressspinner",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ProgressSpinnerPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "radiobutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<RadioButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "rating",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<RatingPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "row",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<RowPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "scrollpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ScrollPanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "scrolltop",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ScrollTopPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "sidebar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SidebarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "skeleton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SkeletonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "slider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SliderPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "speeddial",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SpeedDialPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "selectbutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SelectButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "splitbutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SplitButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "splitter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SplitterPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "splitterpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SplitterPanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "steps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<StepsPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tabmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TabMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tabpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TabPanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tabview",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TabViewPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tag",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TagPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "terminal",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TerminalPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "textarea",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TextareaPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tieredmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TieredMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "timeline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TimelinePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "toast",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ToastPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "togglebutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ToggleButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "toolbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ToolbarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tree",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TreePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "treeselect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TreeSelectPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tristatecheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TriStateCheckboxPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "treetable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TreeTablePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "virtualscroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<VirtualScrollerPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "directives",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "PrimeVuePTOptions"
+                }
+            }
+        }
+    },
     "terminal": {
         "description": "Terminal is a text based user interface.\n\n[Live Demo](https://www.primevue.org/terminal)",
         "components": {
@@ -40369,6 +41186,22 @@
                     "description": "Defines current options in TieredMenu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the menuitem."
+                        },
                         {
                             "name": "active",
                             "optional": false,

doc/confirmdialog/StyleDoc.vue

@@ -1,21 +0,0 @@
-<template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
-    </DocSectionText>
-    <div class="doc-tablewrapper">
-        <table class="doc-table">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Element</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>p-confirm-dialog</td>
-                    <td>Container element.</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>

doc/confirmdialog/theming/StyledDoc.vue

@@ -1,5 +1,7 @@
 <template>
-    <DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
+    <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>
@@ -10,7 +12,7 @@
             </thead>
             <tbody>
                 <tr>
-                    <td>p-avatar-group</td>
+                    <td>p-confirm-dialog</td>
                     <td>Container element.</td>
                 </tr>
             </tbody>

doc/confirmdialog/theming/UnstyledDoc.vue

@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <Toast />
+    <ConfirmDialog></ConfirmDialog>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm1 = () => {
+    confirm.require({
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+
+const confirm2 = () => {
+    confirm.require({
+        message: 'Do you want to delete this record?',
+        header: 'Delete Confirmation',
+        icon: 'pi pi-info-circle',
+        acceptClass: 'p-button-danger',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/confirmdialog/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmDialog Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/confirmpopup/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/confirmpopup/theming/UnstyledDoc.vue

@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <Toast />
+    <ConfirmPopup></ConfirmPopup>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm1 = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+
+const confirm2 = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Do you want to delete this record?',
+        icon: 'pi pi-info-circle',
+        acceptClass: 'p-button-danger',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/confirmpopup/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmPopup Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/contextmenu/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/contextmenu/theming/UnstyledDoc.vue

@@ -0,0 +1,48 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using the <i>contextmenu</i> event of the target to display the menu.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'View', icon: 'pi pi-fw pi-search' },
+                { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
+        <ContextMenu ref="menu" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const menu = ref();
+const items = ref([
+    { label: 'View', icon: 'pi pi-fw pi-search' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+]);
+
+const onImageRightClick = (event) => {
+    menu.value.show(event);
+};
+
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.menu.show(event);
+        }
+    }
+};
+</script>

doc/contextmenu/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ContextMenu Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/datatable/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/datatable/theming/UnstyledDoc.vue

@@ -0,0 +1,298 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :service="['CustomerService']" embedded />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from 'primevue/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            filters: null,
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
+            loading: true,
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
+                filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+            <template #header>
+                <div class="flex justify-between">
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                    <span class="p-input-icon-left">
+                        <i class="pi pi-search" />
+                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                    </span>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <template #loading> Loading customers data. Please wait. </template>
+            <Column field="name" header="Name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                </template>
+                <template #filterclear="{ filterCallback }">
+                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
+                </template>
+                <template #filterapply="{ filterCallback }">
+                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
+                </template>
+                <template #filterfooter>
+                    <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
+                </template>
+            </Column>
+            <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatDate(data.date) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+                </template>
+            </Column>
+            <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                </template>
+            </Column>
+            <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Dropdown>
+                </template>
+            </Column>
+            <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                </template>
+                <template #filter="{ filterModel }">
+                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                    <div class="flex items-center justify-between px-2">
+                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
+                <template #body="{ data }">
+                    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
+                </template>
+                <template #filter="{ filterModel }">
+                    <label for="verified-filter" class="font-bold"> Verified </label>
+                    <TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from 'primevue/api';
+
+const customers = ref();
+const filters = ref();
+const representatives = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const loading = ref(true);
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => {
+        customers.value = getCustomers(data);
+        loading.value = false;
+    });
+});
+
+
+const initFilters = () => {
+    filters.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    };
+};
+
+initFilters();
+
+const formatDate = (value) => {
+    return value.toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+};
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+const clearFilter = () => {
+    initFilters();
+};
+const getCustomers = (data) => {
+    return [...(data || [])].map((d) => {
+        d.date = new Date(d.date);
+
+        return d;
+    });
+};
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warning';
+
+        case 'renewal':
+            return null;
+    }
+};
+<\/script>`
+            }
+        };
+    },
+    created() {
+        this.initFilters();
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => {
+            this.customers = this.getCustomers(data);
+            this.loading = false;
+        });
+    },
+    methods: {
+        formatDate(value) {
+            return value.toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        clearFilter() {
+            this.initFilters();
+        },
+        initFilters() {
+            this.filters = {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+            };
+        },
+        getCustomers(data) {
+            return [...(data || [])].map((d) => {
+                d.date = new Date(d.date);
+
+                return d;
+            });
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warning';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+</script>

doc/datatable/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>DataTable Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/dataview/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">

doc/dataview/theming/UnstyledDoc.vue

@@ -0,0 +1,148 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :service="['ProductService']" embedded />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            layout: 'grid',
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <DataView :value="products" :layout="layout">
+            <template #header>
+                <div class="flex justify-end">
+                    <DataViewLayoutOptions v-model="layout" />
+                </div>
+            </template>
+
+            <template #list="slotProps">
+                <div class="flex-initial shrink-0 w-full">
+                    <div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4">
+                        <img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                        <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4">
+                            <div class="flex flex-col items-center sm:items-start gap-3">
+                                <div class="text-2xl font-bold text-900">
+                                    {{ slotProps.data.name }}
+                                </div>
+                                <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                                <div class="flex items-center gap-3">
+                                    <span class="flex items-center gap-2">
+                                        <i class="pi pi-tag"></i>
+                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                                    </span>
+                                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                                </div>
+                            </div>
+                            <div class="flex sm:flex-col items-center sm:align-end gap-3 sm:gap-2">
+                                <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid="slotProps">
+                <div class="flex-initial shrink-0 w-full sm:w-1/2 lg:w-full xl:w-1/3 p-2">
+                    <div class="p-4 border surface-border surface-card rounded">
+                        <div class="flex flex-wrap items-center justify-between gap-2">
+                            <div class="flex items-center gap-2">
+                                <i class="pi pi-tag"></i>
+                                <span class="font-semibold">{{ slotProps.data.category }}</span>
+                            </div>
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                        </div>
+                        <div class="flex flex-col items-center gap-3 py-5">
+                            <img class="w-3/4 shadow-md rounded" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                            <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
+                            <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProducts().then((data) => (products.value = data.slice(0, 12)));
+});
+
+const products = ref();
+const layout = ref('grid');
+
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+}
+
+<\/script>`,
+                data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProducts().then((data) => (this.products = data.slice(0, 12)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warning';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>

doc/dataview/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>DataView Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/deferredcontent/StyleDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
         <p>Component does not apply any styling.</p>
     </DocSectionText>
 </template>

doc/dialog/theming/StyledDoc.vue

@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">