Merge branch 'master' into issue-2948

.github/workflows/generate_api_doc.yml

@@ -12,6 +12,7 @@ permissions:
 
 jobs:
   build:
+    if: github.repository == 'primefaces/primevue' && github.ref == 'refs/heads/master'
     runs-on: ubuntu-latest
 
     strategy:

.github/workflows/node.js.yml

@@ -5,7 +5,7 @@ on:
         branches: [master]
 
 permissions:
-    contents: read
+    contents: write
 
 jobs:
     build:
@@ -16,10 +16,10 @@ jobs:
                 node-version: [16.x, 18.x]
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v3
 
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node-version }}
                   cache: 'npm'
@@ -31,19 +31,29 @@ jobs:
             - name: Lint Check
               if: ${{ success() }}
               run: |
-                  npm run format:check
+                  npm run lint
 
-            - name: Code Format
+            - name: Code Format Check
+              id: codeFormatCheck
               if: ${{ success() }}
               run: |
                   npm run format:check
 
+            - name: Code Format
+              if: always() && steps.codeFormatCheck.outcome == 'failure'
+              run: |
+                  npm run format
+                  git config user.name "GitHub Actions Bot"
+                  git config user.email "<>"
+                  git commit -a -m "Code Format"
+                  git push
+
             - name: Security Check
               if: ${{ success() }}
               run: |
                   npm run security:check
 
-            #- name: Test
+            - name: Unit Tests Check
-            #  if: ${{ success() }}
+              if: ${{ success() }}
-            #  run: |
+              run: |
-            #      npm run test:unit
+                  npm run test:unit

.github/workflows/pr-checker.yml

@@ -44,6 +44,14 @@ jobs:
         run: |
           npm run test:unit
 
+      - name: Lint
+        run: |
+          npm run lint
+
+      - name: Security
+        run: |
+          npm run security:check
+
       - name: Add Code Format Fail Comment
         if: always() && steps.codeFormat.outcome == 'failure'
         uses: thollander/actions-comment-pull-request@v1

CHANGELOG.md

@@ -1,5 +1,53 @@
 # Changelog
 
+## [3.28.0](https://github.com/primefaces/primevue/tree/3.28.0) (2023-05-02)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.27.0...3.28.0)
+
+**Implemented New Features and Enhancements:**
+
+- New passthrough\(pt\) property implementation for Chart & FileUpload & Message Components  [\#3911](https://github.com/primefaces/primevue/issues/3911)
+- New passthrough\(pt\) property implementation for Menu Components [\#3907](https://github.com/primefaces/primevue/issues/3907)
+- Button: No label [\#3905](https://github.com/primefaces/primevue/issues/3905)
+- Add global `pt` option to PrimeVue config [\#3902](https://github.com/primefaces/primevue/issues/3902)
+- New passthrough\(pt\) property implementation for Button Components [\#3889](https://github.com/primefaces/primevue/issues/3889)
+- New passthrough\(pt\) property implementation for Overlay Components  [\#3885](https://github.com/primefaces/primevue/issues/3885)
+- New passthrough\(pt\) property implementation for Misc Components  [\#3879](https://github.com/primefaces/primevue/issues/3879)
+
+**Fixed bugs:**
+
+- Message: wrong close icon size [\#3908](https://github.com/primefaces/primevue/issues/3908)
+- Panel: Header accessibility issue [\#3904](https://github.com/primefaces/primevue/issues/3904)
+- Calendar: Material theme icons not visible [\#3903](https://github.com/primefaces/primevue/issues/3903)
+- Password: Incorrect onClick property as scope for custom icons [\#3900](https://github.com/primefaces/primevue/issues/3900)
+- AutoComplete: class style and click event refactor on `removetokenicon` scoped slot [\#3899](https://github.com/primefaces/primevue/issues/3899)
+- Dropdown: Selection is not working correctly with falsy values [\#3891](https://github.com/primefaces/primevue/issues/3891)
+
+## [3.27.0](https://github.com/primefaces/primevue/tree/3.27.0) (2023-04-19)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.26.1...3.27.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add icon templating support to components [\#3833](https://github.com/primefaces/primevue/issues/3833)
+- Improve icon implementation in core [\#3832](https://github.com/primefaces/primevue/issues/3832)
+- Add new Icon components [\#3829](https://github.com/primefaces/primevue/issues/3829)
+- Panel: Footer Templating [\#3820](https://github.com/primefaces/primevue/issues/3820)
+- AutoComplete: NumpadEnter is not recognised [\#3816](https://github.com/primefaces/primevue/issues/3816)
+- Calendar: Emit year-change event via navBackward and navForward [\#3811](https://github.com/primefaces/primevue/issues/3811)
+- New passthrough\(pt\) property implementation for Panel Components [\#3797](https://github.com/primefaces/primevue/issues/3797)
+- Galleria: Play and Pause [\#3619](https://github.com/primefaces/primevue/issues/3619)
+
+**Fixed bugs:**
+
+- TabView: Scrollable Starting/Ending Nav Arrow Blocks First/Last Tab [\#3849](https://github.com/primefaces/primevue/issues/3849)
+- DataTable Filter with Calendar is not showing in proper location [\#3632](https://github.com/primefaces/primevue/issues/3632)
+
+**Deprecated:**
+
+- Deprecated `indicator` slot [\#3871](https://github.com/primefaces/primevue/issues/3871)
+- FullCalendar: Deprecated component [\#3827](https://github.com/primefaces/primevue/issues/3827)
+
 ## [3.26.1](https://github.com/primefaces/primevue/tree/3.26.1) (2023-03-27)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.26.0...3.26.1)

README.md

@@ -15,10 +15,10 @@ PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
 
 ````
 // with npm
-npm install primevue primeicons
+npm install primevue
 
 // with yarn
-yarn add primevue primeicons
+yarn add primevue
 ````
 
 ## Plugin
@@ -44,16 +44,13 @@ import 'primevue/resources/themes/lara-light-blue/theme.css';
 
 // core
 import 'primevue/resources/primevue.min.css';
-
-// icons
-import 'primeicons/primeicons.css';
 ```
 
 Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.
 
 ```
 body {
-    font-family: (--font-family);
+    font-family: var(--font-family);
 }
 ```
 
@@ -96,12 +93,11 @@ Open the nuxt configuration file and add the css dependencies.
 export default defineNuxtConfig({
     css: [
         "primevue/resources/themes/lara-light-blue/theme.css",
-        "primevue/resources/primevue.css",
+        "primevue/resources/primevue.css"
-        "primeicons/primeicons.css"
     ],
-	build: {
+    build: {
-		transpile: ["primevue"]
+      transpile: ["primevue"]
-	}
+    }
 })
 ```
 

api-generator/components/autocomplete.js

@@ -250,6 +250,12 @@ const AutoCompleteProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/avatar.js

@@ -28,6 +28,19 @@ const AvatarProps = [
         type: 'string',
         default: 'square',
         description: 'Shape of the element, valid options are "square" and "circle".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const AvatarSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
     }
 ];
 
@@ -43,6 +56,7 @@ module.exports = {
         name: 'Avatar',
         description: 'Avatar represents people using icons, labels and images.',
         props: AvatarProps,
+        slots: AvatarSlots,
         events: AvatarEvents
     }
 };

api-generator/components/avatargroup.js

@@ -1,7 +1,47 @@
+const AvatarGroupProps = [
+    {
+        name: 'label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the text to display.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the icon to display.'
+    },
+    {
+        name: 'image',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the image to display.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Size of the element, valid options are "large" and "xlarge".'
+    },
+    {
+        name: 'shape',
+        type: 'string',
+        default: 'square',
+        description: 'Shape of the element, valid options are "square" and "circle".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 module.exports = {
     avatargroup: {
         name: 'AvatarGroup',
         'doc-url': 'avatar',
-        description: 'A set of Avatars can be displayed together using the AvatarGroup component.'
+        description: 'A set of Avatars can be displayed together using the AvatarGroup component.',
+        props: AvatarGroupProps
     }
 };

api-generator/components/badge.js

@@ -16,6 +16,12 @@ const BadgeProps = [
         type: 'string',
         default: 'null',
         description: 'Size of the badge, valid options are "large" and "xlarge".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/blockui.js

@@ -22,6 +22,12 @@ const BlockUIProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/breadcrumb.js

@@ -16,6 +16,12 @@ const BreadcrumbProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -27,6 +33,10 @@ const BreadcrumbSlots = [
     {
         name: 'separator',
         description: 'Custom separator template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

api-generator/components/button.js

@@ -94,6 +94,25 @@ const ButtonProps = [
         type: 'boolean',
         default: 'false',
         description: 'Add a plain textual class to the button without a background initially.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const ButtonEvents = [];
+
+const ButtonSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
     }
 ];
 
@@ -101,6 +120,8 @@ module.exports = {
     button: {
         name: 'Button',
         description: 'Button is an extension to standard button element with icons and theming.',
-        props: ButtonProps
+        props: ButtonProps,
+        events: ButtonEvents,
+        slots: ButtonSlots
     }
 };

api-generator/components/calendar.js

@@ -316,6 +316,12 @@ const CalendarProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -462,11 +468,11 @@ const CalendarSlots = [
         description: 'Custom content for the calendar decade.'
     },
     {
-        name: 'triggericon',
+        name: 'dropdownicon',
-        description: 'Custom trigger icon template.'
+        description: 'Custom dropdown icon template.'
     },
     {
-        name: 'previcon',
+        name: 'previousicon',
         description: 'Custom previous icon template.'
     },
     {

api-generator/components/carousel.js

@@ -82,10 +82,20 @@ const CarouselProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to display indicator container.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
 const CarouselSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
     {
         name: 'header',
         description: 'Custom content for the component header.'
@@ -99,7 +109,7 @@ const CarouselSlots = [
         description: 'Custom content for the component item.'
     },
     {
-        name: 'previcon',
+        name: 'previousicon',
         description: 'Custom previous icon template.'
     },
     {

api-generator/components/cascadeselect.js

@@ -184,6 +184,12 @@ const CascadeSelectProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -284,6 +290,14 @@ const CascadeSelectSlots = [
         name: 'indicator',
         description: 'Custom content for the dropdown indicator.'
     },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
     {
         name: 'optiongroupicon',
         description: 'Custom content for the option group icon.'

api-generator/components/chart.js

@@ -34,6 +34,12 @@ const ChartProps = [
         type: 'number',
         default: '150',
         description: 'Height of the chart in non-responsive mode.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/checkbox.js

@@ -88,6 +88,12 @@ const CheckboxProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/chip.js

@@ -28,6 +28,12 @@ const ChipProps = [
         type: 'string',
         default: 'pi pi-times-circle',
         description: 'Icon of the remove element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -45,11 +51,23 @@ const ChipEvents = [
     }
 ];
 
+const ChipSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template of chip component.'
+    },
+    {
+        name: 'removeicon',
+        description: 'Custom remove icon template of chip component.'
+    }
+];
+
 module.exports = {
     chip: {
         name: 'Chip',
         description: 'Chip represents entities using icons, labels and images',
         props: ChipProps,
-        events: ChipEvents
+        events: ChipEvents,
+        slots: ChipSlots
     }
 };

api-generator/components/chips.js

@@ -64,6 +64,12 @@ const ChipsProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/colorpicker.js

@@ -70,6 +70,12 @@ const ColorPickerProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/column.js

@@ -250,6 +250,12 @@ const ColumnProps = [
         type: 'boolean',
         default: 'false',
         description: 'Whether the column is rendered.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -289,6 +295,62 @@ const ColumnSlots = [
     {
         name: 'filterapply',
         description: "Custom content for the filter menu's apply section"
+    },
+    {
+        name: 'loading',
+        description: 'Custom loading template.'
+    },
+    {
+        name: 'rowtogglericon',
+        description: 'Custom row toggler icon template.'
+    },
+    {
+        name: 'rowtogglericon',
+        description: 'Custom row toggler icon template.'
+    },
+    {
+        name: 'rowcheckboxicon',
+        description: 'Custom row checkbox icon template.'
+    },
+    {
+        name: 'roweditoriniticon',
+        description: 'Custom row editor init icon template.'
+    },
+    {
+        name: 'roweditorsaveicon',
+        description: 'Custom row editor save icon template.'
+    },
+    {
+        name: 'roweditorcancelicon',
+        description: 'Custom row editor cancel icon template.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
+    },
+    {
+        name: 'filterclearicon',
+        description: 'Custom filter clear icon template.'
+    },
+    {
+        name: 'filterremoveicon',
+        description: 'Custom filter remove icon template.'
+    },
+    {
+        name: 'filteraddicon',
+        description: 'Custom filter add icon template.'
+    },
+    {
+        name: 'sorticon',
+        description: 'Custom sort icon template.'
+    },
+    {
+        name: 'headercheckboxicon',
+        description: 'Custom header checkbox icon template.'
+    },
+    {
+        name: 'rowreordericon',
+        description: 'Custom row reorder icon template.'
     }
 ];
 

api-generator/components/columngroup.js

@@ -1,7 +1,23 @@
+const ColumnGroupProps = [
+    {
+        name: 'type',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the type of the group.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 module.exports = {
     columngroup: {
         name: 'ColumnGroup',
         description: 'Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns',
-        'doc-url': 'datatable'
+        'doc-url': 'datatable',
+        props: ColumnGroupProps
     }
 };

api-generator/components/confirmdialog.js

@@ -16,13 +16,31 @@ const ConfirmDialogProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether the dialog can be relocated by dragging.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
 const ConfirmDialogSlots = [
     {
         name: 'message',
-        description: 'Custom content for the component.'
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'accepticon',
+        description: 'Custom accept icon template.'
+    },
+    {
+        name: 'rejecticon',
+        description: 'Custom reject icon template.'
     }
 ];
 

api-generator/components/confirmpopup.js

@@ -4,6 +4,12 @@ const ConfirmPopupProps = [
         type: 'string',
         default: 'null',
         description: 'Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -11,6 +17,18 @@ const ConfirmPopupSlots = [
     {
         name: 'message',
         description: 'Custom content for the component.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'accepticon',
+        description: 'Custom accept icon template.'
+    },
+    {
+        name: 'rejecticon',
+        description: 'Custom reject icon template.'
     }
 ];
 

api-generator/components/contextmenu.js

@@ -34,6 +34,12 @@ const ContextMenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -45,6 +51,10 @@ const ContextMenuSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

api-generator/components/datatable.js

@@ -377,6 +377,12 @@ const DataTableProps = [
         type: 'string',
         default: 'null',
         description: 'Style class of the table element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -1120,31 +1126,67 @@ const DataTableEvents = [
 const DataTableSlots = [
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'paginatorstart',
-        description: "Custom content for the component paginator's left side"
+        description: "Custom content for the component paginator's left side."
     },
     {
         name: 'paginatorend',
-        description: "Custom content for the component paginator's right side"
+        description: "Custom content for the component paginator's right side."
     },
     {
         name: 'footer',
-        description: "Custom content for the component's footer"
+        description: "Custom content for the component's footer."
     },
     {
         name: 'groupheader',
-        description: "Custom content for the component's subgroup header"
+        description: "Custom content for the component's subgroup header."
     },
     {
         name: 'groupfooter',
-        description: "Custom content for the component's subgroup footer"
+        description: "Custom content for the component's subgroup footer."
     },
     {
-        name: 'expansion',
+        name: 'loading',
-        description: "Custom content for the component's expanded content"
+        description: 'Custom loading template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'reorderindicatorupicon',
+        description: 'Custom reorder indicator up icon template.'
+    },
+    {
+        name: 'reorderindicatordownicon',
+        description: 'Custom reorder indicator down icon template.'
+    },
+    {
+        name: 'rowgrouptogglericon',
+        description: 'Custom rowgroup toggler icon template.'
+    },
+    {
+        name: 'paginatorfirstpagelinkicon',
+        description: 'Custom paginator first page link icon template.'
+    },
+    {
+        name: 'paginatorprevpagelinkicon',
+        description: 'Custom paginator prev page link icon template.'
+    },
+    {
+        name: 'paginatornextpagelinkicon',
+        description: 'Custom paginator next page link icon template.'
+    },
+    {
+        name: 'paginatorlastpagelinkicon',
+        description: 'Custom paginator last page link icon template.'
+    },
+    {
+        name: 'empty',
+        description: 'Custom empty template.'
     }
 ];
 

api-generator/components/dataview.js

@@ -94,6 +94,12 @@ const DataViewProps = [
         type: 'string',
         default: 'null',
         description: 'Name of the data that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/dataviewlayoutoptions.js

@@ -4,6 +4,12 @@ const DataViewLayoutOptionsProps = [
         type: 'string',
         default: 'null',
         description: 'Value of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/dialog.js

@@ -130,6 +130,12 @@ const DialogProps = [
         type: 'string',
         default: 'body',
         description: 'A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -189,6 +195,14 @@ const DialogSlots = [
     {
         name: 'footer',
         description: "Custom content for the component's footer"
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'maximizeicon',
+        description: 'Custom maximizeicon icon template of dialog.'
     }
 ];
 

api-generator/components/dock.js

@@ -34,6 +34,12 @@ const DockProps = [
         type: 'object',
         default: 'null',
         description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/dropdown.js

@@ -256,6 +256,12 @@ const DropdownProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -372,6 +378,22 @@ const DropdownSlots = [
     {
         name: 'loader',
         description: 'Custom content for the virtual scroller loader items'
+    },
+    {
+        name: 'clearicon',
+        description: 'Custom clear icon template.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
     }
 ];
 

api-generator/components/editor.js

@@ -34,6 +34,12 @@ const EditorProps = [
         type: 'object',
         default: 'null',
         description: 'Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/fileupload.js

@@ -142,6 +142,12 @@ const FileUploadProps = [
         type: 'string',
         default: 'null',
         description: 'Style class of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -276,9 +282,33 @@ const FileUploadEvents = [
 ];
 
 const FileUploadSlots = [
+    {
+        name: 'header',
+        description: 'Custom header template.'
+    },
+    {
+        name: 'content',
+        description: 'Custom content template.'
+    },
     {
         name: 'empty',
         description: 'Custom content when there is no selected file'
+    },
+    {
+        name: 'chooseicon',
+        description: 'Custom choose icon template.'
+    },
+    {
+        name: 'uploadicon',
+        description: 'Custom upload icon template.'
+    },
+    {
+        name: 'cancelicon',
+        description: 'Custom cancel icon template.'
+    },
+    {
+        name: 'fileremoveicon',
+        description: 'Custom remove icon template for each file.'
     }
 ];
 

api-generator/components/galleria.js

@@ -142,6 +142,12 @@ const GalleriaProps = [
         type: 'any',
         default: 'null',
         description: "Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -175,7 +181,7 @@ const GalleriaSlots = [
         description: 'Custom close icon template.'
     },
     {
-        name: 'previtemicon',
+        name: 'previousitemicon',
         description: 'Custom navigator previous item icon template.'
     },
     {
@@ -183,7 +189,7 @@ const GalleriaSlots = [
         description: 'Custom navigator next item icon template.'
     },
     {
-        name: 'prevthumbnailicon',
+        name: 'previousthumbnailicon',
         description: 'Custom thumbnail previous icon template.'
     },
     {

api-generator/components/image.js

@@ -22,6 +22,12 @@ const ImageProps = [
         type: 'boolean',
         default: 'false',
         description: 'Disable the zoom-out button'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -64,6 +70,14 @@ const ImageSlots = [
     {
         name: 'close',
         description: 'Custom content for the component close.'
+    },
+    {
+        name: 'image',
+        description: 'Custom content for the component image.'
+    },
+    {
+        name: 'preview',
+        description: 'Custom content for the component preview.'
     }
 ];
 

api-generator/components/inlinemessage.js

@@ -10,13 +10,19 @@ const InlineMessageProps = [
         type: 'string',
         default: 'undefined',
         description: 'Display a custom icon for the message.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
 const MessageSlots = [
     {
-        name: 'messageicon',
+        name: 'icon',
-        description: 'Custom message icon template.'
+        description: 'Custom icon template.'
     }
 ];
 

api-generator/components/inplace.js

@@ -16,6 +16,12 @@ const InplaceProps = [
         type: 'boolean',
         default: 'false',
         description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -47,11 +53,15 @@ const InplaceEvents = [
 const InplaceSlots = [
     {
         name: 'display',
-        description: 'Output content'
+        description: 'Custom display template.'
     },
     {
         name: 'content',
-        description: 'Actual content'
+        description: 'Custom content template.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
     }
 ];
 

api-generator/components/inputmask.js

@@ -28,6 +28,12 @@ const InputMaskProps = [
         type: 'boolean',
         default: 'false',
         description: 'Defines if model sets the raw unmasked value to bound value or the formatted mask value.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/inputnumber.js

@@ -182,6 +182,12 @@ const InputNumberProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/inputswitch.js

@@ -40,6 +40,12 @@ const InputSwitchProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/inputtext.js

@@ -4,6 +4,12 @@ const InputTextProps = [
         type: 'any',
         default: 'null',
         description: 'Value of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/knob.js

@@ -94,6 +94,12 @@ const KnobProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/listbox.js

@@ -173,6 +173,12 @@ const ListboxProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/megamenu.js

@@ -16,6 +16,12 @@ const MegaMenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -35,6 +41,10 @@ const MegaMenuSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

api-generator/components/menu.js

@@ -34,6 +34,12 @@ const MenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -60,6 +66,10 @@ const MenuSlots = [
     {
         name: 'item',
         description: 'Template of a menuitem.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

api-generator/components/menubar.js

@@ -10,6 +10,12 @@ const MenubarProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -33,6 +39,10 @@ const MenubarSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

api-generator/components/message.js

@@ -34,6 +34,12 @@ const MessageProps = [
         type: 'string',
         default: 'undefined',
         description: 'Display a custom close icon for the message.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/multiselect.js

@@ -292,6 +292,12 @@ const MultiSelectProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -448,6 +454,14 @@ const MultiSelectSlots = [
     {
         name: 'itemcheckboxicon',
         description: 'Custom item checkbox icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
     }
 ];
 

api-generator/components/orderlist.js

@@ -47,6 +47,12 @@ const OrderListProps = [
         type: 'boolean',
         default: 'false',
         description: 'Whether to displays rows with alternating colors.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/organizationchart.js

@@ -28,6 +28,12 @@ const OrganizationChartProps = [
         type: 'object',
         default: 'null',
         description: 'A map instance of key-value pairs to represented the collapsed nodes.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/overlaypanel.js

@@ -46,6 +46,12 @@ const OverlayPanelProps = [
         type: 'string',
         default: 'undefined',
         description: 'Display a custom close icon for the message.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/paginator.js

@@ -46,6 +46,12 @@ const PaginatorProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to show the paginator even there is only one page.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -80,11 +86,11 @@ const PaginatorEvents = [
 
 const PaginatorSlots = [
     {
-        name: 'left',
+        name: 'start',
         description: "Custom content for the component's left side."
     },
     {
-        name: 'right',
+        name: 'end',
         description: "Custom content for the component's right side."
     },
     {

api-generator/components/panelmenu.js

@@ -16,6 +16,12 @@ const PanelMenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -27,6 +33,14 @@ const PanelMenuSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'headericon',
+        description: 'Custom header icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

api-generator/components/password.js

@@ -136,6 +136,12 @@ const PasswordProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/picklist.js

@@ -59,6 +59,12 @@ const PickListProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to show buttons of target list.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -172,6 +178,10 @@ const PickListEvents = [
 ];
 
 const PickListSlots = [
+    {
+        name: 'header',
+        description: 'Custom header template.'
+    },
     {
         name: 'sourceheader',
         description: "Custom content for the component's source header."

api-generator/components/progressbar.js

@@ -16,6 +16,12 @@ const ProgressbarProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to display the progress bar value.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/progressspinner.js

@@ -16,6 +16,12 @@ const ProgressSpinnerProps = [
         type: 'string',
         default: '2s',
         description: 'Duration of the rotate animation.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/radiobutton.js

@@ -58,6 +58,12 @@ const RadioButtonProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/rating.js

@@ -46,6 +46,27 @@ const RatingProps = [
         type: 'string',
         default: 'null',
         description: 'Icon for the cancelable state.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const RatingSlots = [
+    {
+        name: 'cancelicon',
+        description: 'Custom cancel icon template.'
+    },
+    {
+        name: 'onicon',
+        description: 'Custom on icon template.'
+    },
+    {
+        name: 'officon',
+        description: 'Custom off icon template.'
     }
 ];
 
@@ -73,6 +94,7 @@ module.exports = {
         name: 'rating',
         description: 'Rating component is a star based selection input.',
         props: RatingProps,
+        slots: RatingSlots,
         events: RatingEvents
     }
 };

api-generator/components/row.js

@@ -1,7 +1,23 @@
+const RowProps = [
+    {
+        name: 'type',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the type of the group.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 module.exports = {
     row: {
         name: 'Row',
         description: 'DataTable can be grouped by defining a Row component with nested columns',
-        'doc-url': 'datatable'
+        'doc-url': 'datatable',
+        props: RowProps
     }
 };

api-generator/components/scrolltop.js

@@ -22,6 +22,12 @@ const ScrollTopProps = [
         type: 'string',
         default: 'smooth',
         description: 'Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/selectbutton.js

@@ -58,6 +58,12 @@ const SelectButtonProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/sidebar.js

@@ -58,6 +58,12 @@ const SidebarProps = [
         type: 'string',
         default: 'undefined',
         description: 'Icon to display in the sidebar close button.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -80,6 +86,10 @@ const SidebarSlots = [
     {
         name: 'header',
         description: 'Custom content for the component header.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
     }
 ];
 

api-generator/components/skeleton.js

@@ -34,6 +34,12 @@ const SkeletonProps = [
         type: 'string',
         default: 'wave',
         description: 'Type of the animation, valid options are "wave" and "none".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/slider.js

@@ -58,6 +58,12 @@ const SliderProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/speeddial.js

@@ -106,6 +106,12 @@ const SpeedDialProps = [
         type: 'object',
         default: 'null',
         description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -137,8 +143,12 @@ const SpeedDialSlots = [
         description: 'Custom content for the item'
     },
     {
-        name: 'toggle',
+        name: 'button',
-        description: 'toggle: toggle metadata'
+        description: 'Custom button template.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
     }
 ];
 

api-generator/components/splitbutton.js

@@ -100,6 +100,12 @@ const SplitButtonProps = [
         type: 'boolean',
         default: 'false',
         description: 'Add a plain textual class to the button without a background initially.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -117,11 +123,23 @@ const SplitButtonEvents = [
     }
 ];
 
+const SplitButtonSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'menubuttonicon',
+        description: 'Custom menu button icon template.'
+    }
+];
+
 module.exports = {
     splitbutton: {
         name: 'SplitButton',
         description: 'SplitButton groups a set of commands in an overlay with a default command.',
         props: SplitButtonProps,
-        events: SplitButtonEvents
+        events: SplitButtonEvents,
+        slots: SplitButtonSlots
     }
 };

api-generator/components/steps.js

@@ -22,6 +22,12 @@ const StepsProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/tabmenu.js

@@ -16,6 +16,12 @@ const TabMenuProps = [
         type: 'number',
         default: '0',
         description: 'Active index of menuitem.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -42,6 +48,10 @@ const TabMenuSlots = [
     {
         name: 'item',
         description: 'Template of a menuitem.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

api-generator/components/tabview.js

@@ -41,6 +41,18 @@ const TabViewProps = [
         default: 'null',
         description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
     },
+    {
+        name: 'prevIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Prev icon of the scrollable tabview.'
+    },
+    {
+        name: 'nextIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Next icon of the scrollable tabview.'
+    },
     {
         name: 'pt',
         type: 'any',

api-generator/components/tag.js

@@ -22,6 +22,19 @@ const TagProps = [
         type: 'string',
         default: 'null',
         description: 'Icon of the tag to display next to the value.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const TagSlots = [
+    {
+        name: 'icon',
+        description: 'custom icon template.'
     }
 ];
 
@@ -29,6 +42,7 @@ module.exports = {
     tag: {
         name: 'Tag',
         description: 'Tag component is used to categorize content.',
-        props: TagProps
+        props: TagProps,
+        slots: TagSlots
     }
 };

api-generator/components/terminal.js

@@ -10,6 +10,12 @@ const TerminalProps = [
         type: 'string',
         default: 'null',
         description: 'Prompt text for each command.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/textarea.js

@@ -10,6 +10,12 @@ const TextareaProps = [
         type: 'boolean',
         default: 'false',
         description: 'When present, height of textarea changes as being typed.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/tieredmenu.js

@@ -34,6 +34,12 @@ const TieredMenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -45,6 +51,10 @@ const TieredMenuSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

api-generator/components/timeline.js

@@ -22,6 +22,12 @@ const TimelineProps = [
         type: 'string',
         default: 'null',
         description: 'Name of the field that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/toast.js

@@ -28,6 +28,12 @@ const ToastProps = [
         type: 'object',
         default: 'null',
         description: 'Object literal to define widths per screen size.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -60,6 +66,14 @@ const ToastSlots = [
     {
         name: 'message',
         description: 'Custom content for the toast message'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
     }
 ];
 

api-generator/components/togglebutton.js

@@ -70,6 +70,12 @@ const ToggleButtonProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -109,11 +115,19 @@ const ToggleButtonEvents = [
     }
 ];
 
+const ToggleButtonSlots = [
+    {
+        name: 'icon',
+        description: 'custom icon template.'
+    }
+];
+
 module.exports = {
     togglebutton: {
         name: 'ToggleButton',
         description: 'ToggleButton is used to select a boolean value using a button.',
         props: ToggleButtonProps,
+        slots: ToggleButtonSlots,
         events: ToggleButtonEvents
     }
 };

api-generator/components/toolbar.js

@@ -21,6 +21,10 @@ const ToolbarSlots = [
     {
         name: 'end',
         description: "Custom content for the component's right side"
+    },
+    {
+        name: 'center',
+        description: "Custom content for the component's center"
     }
 ];
 

api-generator/components/tree.js

@@ -77,6 +77,12 @@ const TreeProps = [
         type: 'string',
         default: 'null',
         description: 'Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/treeselect.js

@@ -101,6 +101,12 @@ const TreeSelectProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -196,8 +202,16 @@ const TreeSelectSlots = [
         description: 'Custom content when there is no data to display'
     },
     {
-        name: 'indicator',
+        name: 'triggericon',
         description: 'Custom content for the dropdown indicator'
+    },
+    {
+        name: 'itemtogglericon',
+        description: 'Custom item toggler icon template.'
+    },
+    {
+        name: 'itemcheckboxicon',
+        description: 'Custom item checkbox icon template.'
     }
 ];
 

api-generator/components/treetable.js

@@ -221,6 +221,12 @@ const TreeTableProps = [
         type: 'string',
         default: 'null',
         description: 'Defines the responsive mode, currently only option is scroll.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -443,23 +449,55 @@ const TreeTableEvents = [
 const TreeTableSlots = [
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'paginatorstart',
-        description: "Custom content for the component paginator's left side"
+        description: "Custom content for the component paginator's left side."
     },
     {
         name: 'paginatorend',
-        description: "Custom content for the component paginator's right side"
+        description: "Custom content for the component paginator's right side."
     },
     {
         name: 'empty',
-        description: 'Custom content when there is no data to display'
+        description: 'Custom content when there is no data to display.'
     },
     {
         name: 'footer',
-        description: "Custom content for the component's footer"
+        description: "Custom content for the component's footer."
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'togglericon',
+        description: 'Custom toggler icon template.'
+    },
+    {
+        name: 'checkboxicon',
+        description: 'Custom checkbox icon template.'
+    },
+    {
+        name: 'sorticon',
+        description: 'Custom sort icon template.'
+    },
+    {
+        name: 'paginatorfirstpagelinkicon',
+        description: 'Custom paginator first page link icon template.'
+    },
+    {
+        name: 'paginatorprevpagelinkicon',
+        description: 'Custom paginator prev page link icon template.'
+    },
+    {
+        name: 'paginatornextpagelinkicon',
+        description: 'Custom paginator next page link icon template.'
+    },
+    {
+        name: 'paginatorlastpagelinkicon',
+        description: 'Custom paginator last page link icon template.'
     }
 ];
 

api-generator/components/tristatecheckbox.js

@@ -40,6 +40,12 @@ const TriStateCheckboxProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/virtualscroller.js

@@ -101,6 +101,12 @@ const VirtualScrollerProps = [
         type: 'number|string',
         default: '0',
         description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

assets/data/news.json

@@ -1,8 +1,8 @@
 {
-    "id": 36,
+    "id": 37,
-    "content": "Introducing the all-new Apollo Vite Template",
+    "content": "Unstyled mode preview featuring Tailwind.",
-    "linkText": "View Demo",
+    "linkText": "Learn More",
-    "linkHref": "https://www.primefaces.org/apollo-vue",
+    "linkHref": "https://youtu.be/JpYIX3V96gs",
     "backgroundStyle": "background-color:#4f8ff7",
     "textStyle": "color:#ffffff;font-weight:500",
     "linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"

assets/menu/menu.json

@@ -455,9 +455,18 @@
             "to": "/uikit"
         },
         {
-            "name": "PrimeIcons",
+            "name": "Icons",
             "icon": "pi pi-eye",
-            "to": "/icons"
+            "children": [
+                {
+                    "name": "Prime Icons",
+                    "to": "/icons"
+                },
+                {
+                    "name": "Custom Icons",
+                    "to": "/customicons"
+                }
+            ]
         },
         {
             "name": "Templates",

build-meta.js

@@ -14,7 +14,7 @@ function copyDependencies(inFolder, outFolder) {
 }
 
 copyDependencies('./components/lib/', 'dist/');
-copyDependencies('./components/lib/icon/', 'dist/icon/');
+copyDependencies('./components/lib/icons/', 'dist/icons/');
 
 fs.copySync(path.resolve(__dirname, './components/lib/ts-helpers.d.ts'), 'dist/ts-helpers.d.ts');
 fs.copySync(path.resolve(__dirname, './package-build.json'), 'dist/package.json');

components/doc/DocComponent.vue

@@ -49,7 +49,7 @@ export default {
         };
     },
     mounted() {
-        this.tab = this.$route.hash.includes('api') ? 1 : 0;
+        this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 2 : 0;
     }
 };
 </script>

components/doc/codeeditor/templates.js

@@ -2,7 +2,7 @@ import pkg from '../../../package.json';
 import { services } from './services';
 
 const PrimeVue = {
-    version: '^3.26.1',
+    version: '^3.28.0',
     description:
         'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ 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.'
 };

components/lib/accordion/Accordion.vue

@@ -43,8 +43,8 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
-import ChevronRightIcon from 'primevue/icon/chevronright';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 

components/lib/accordiontab/AccordionTab.d.ts

@@ -37,19 +37,19 @@ export interface AccordionTabPassThroughOptions {
     /**
      * Uses to pass attributes to the headeraction's DOM element.
      */
-    headeraction?: AccordionTabPassThroughOptionType;
+    headerAction?: AccordionTabPassThroughOptionType;
     /**
      * Uses to pass attributes to the headericon's DOM element.
      */
-    headericon?: AccordionTabPassThroughOptionType;
+    headerIcon?: AccordionTabPassThroughOptionType;
     /**
      * Uses to pass attributes to the headertitle's DOM element.
      */
-    headertitle?: AccordionTabPassThroughOptionType;
+    headerTitle?: AccordionTabPassThroughOptionType;
     /**
      * Uses to pass attributes to the toggleablecontent's DOM element.
      */
-    toggleablecontent?: AccordionTabPassThroughOptionType;
+    toggleableContent?: AccordionTabPassThroughOptionType;
     /**
      * Uses to pass attributes to the content's DOM element.
      */

components/lib/autocomplete/AutoComplete.d.ts

@@ -8,8 +8,20 @@
  *
  */
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
+import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughAttributes | ((options: AutoCompletePassThroughMethodOptions) => AutoCompletePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AutoCompletePassThroughMethodOptions {
+    props: AutoCompleteProps;
+    state: AutoCompleteState;
+    context: AutoCompleteContext;
+}
 
 /**
  * Custom change event.
@@ -78,6 +90,141 @@ export interface AutoCompleteCompleteEvent {
     query: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AutoCompleteProps.pt}
+ */
+export interface AutoCompletePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token' DOM element.
+     */
+    token?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    dropdownButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the search result message's DOM element.
+     */
+    searchResultMessage?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptionType}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the selected message's DOM element.
+     */
+    selectedMessage?: AutoCompletePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AutoCompletePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in AutoComplete component.
+ */
+export interface AutoCompleteState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedMultipleOptionIndex: number;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current search state as a boolean.
+     * @defaultValue false
+     */
+    searching: boolean;
+}
+
+/**
+ * Defines current options in AutoComplete component.
+ */
+export interface AutoCompleteContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current focus state of the item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in AutoComplete component.
  */
@@ -206,6 +353,7 @@ export interface AutoCompleteProps {
     panelProps?: HTMLAttributes | undefined;
     /**
      * Icon to display in the dropdown.
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     dropdownIcon?: string | undefined;
     /**
@@ -214,10 +362,12 @@ export interface AutoCompleteProps {
     dropdownClass?: string | object | undefined;
     /**
      * Icon to display in loading state.
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
      * Icon to display in chip remove action.
+     * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -271,6 +421,11 @@ export interface AutoCompleteProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AutoCompletePassThroughOptions}
+     */
+    pt?: AutoCompletePassThroughOptions;
 }
 
 /**
@@ -410,7 +565,16 @@ export interface AutoCompleteSlots {
     /**
      * Custom remove token icon template in multiple mode.
      */
-    removetokenicon(): VNode[];
+    removetokenicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+        /**
+         * Remove token icon function.
+         */
+        onClick: void;
+    }): VNode[];
     /**
      * Custom loading icon template.
      */

components/lib/autocomplete/AutoComplete.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="containerClass" @click="onContainerClick">
+    <div ref="container" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
         <input
             v-if="!multiple"
             ref="focusInput"
@@ -25,7 +25,7 @@
             @keydown="onKeyDown"
             @input="onInput"
             @change="onChange"
-            v-bind="inputProps"
+            v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <ul
             v-if="multiple"
@@ -38,6 +38,7 @@
             @focus="onMultipleContainerFocus"
             @blur="onMultipleContainerBlur"
             @keydown="onMultipleContainerKeyDown"
+            v-bind="ptm('container')"
         >
             <li
                 v-for="(option, i) of modelValue"
@@ -49,15 +50,16 @@
                 :aria-selected="true"
                 :aria-setsize="modelValue.length"
                 :aria-posinset="i + 1"
+                v-bind="ptm('token')"
             >
                 <slot name="chip" :value="option">
-                    <span class="p-autocomplete-token-label">{{ getOptionLabel(option) }}</span>
+                    <span class="p-autocomplete-token-label" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
                 </slot>
-                <slot name="removetokenicon">
+                <slot name="removetokenicon" class="p-autocomplete-token-icon" :onClick="(event) => removeOption(event, i)">
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-autocomplete-token-icon', removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" />
+                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-autocomplete-token-icon', removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>
-            <li class="p-autocomplete-input-token" role="option">
+            <li class="p-autocomplete-input-token" role="option" v-bind="ptm('token')">
                 <input
                     ref="focusInput"
                     :id="inputId"
@@ -81,30 +83,48 @@
                     @keydown="onKeyDown"
                     @input="onInput"
                     @change="onChange"
-                    v-bind="inputProps"
+                    v-bind="{ ...inputProps, ...ptm('input') }"
                 />
             </li>
         </ul>
         <slot v-if="searching" name="loadingicon">
-            <component :is="loadingIcon ? 'i' : 'SpinnerIcon'" :class="['p-autocomplete-loader', loadingIcon]" spin aria-hidden="true" />
+            <i v-if="loadingIcon" :class="['p-autocomplete-loader pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
+            <SpinnerIcon v-else class="p-autocomplete-loader" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
         </slot>
-        <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick">
+        <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" :pt="ptm('dropdownButton')">
-            <slot name="dropdownicon">
+            <template #icon>
-                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" />
+                <slot name="dropdownicon">
-            </slot>
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" />
+                </slot>
+            </template>
         </Button>
-        <span role="status" aria-live="polite" class="p-hidden-accessible">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" :class="panelStyleClass" :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
+                <div
+                    v-if="overlayVisible"
+                    :ref="overlayRef"
+                    :class="panelStyleClass"
+                    :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
+                    @click="onOverlayClick"
+                    @keydown="onOverlayKeyDown"
+                    v-bind="{ ...panelProps, ...ptm('panel') }"
+                >
                     <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                    <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
                         <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
+                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
                                 <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-autocomplete-item-group" role="option">
+                                    <li
+                                        v-if="isOptionGroup(option)"
+                                        :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                        :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                        class="p-autocomplete-item-group"
+                                        role="option"
+                                        v-bind="ptm('itemGroup')"
+                                    >
                                         <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                     </li>
                                     <li
@@ -121,13 +141,14 @@
                                         :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                         @click="onOptionSelect($event, option)"
                                         @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                        v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                                     >
                                         <slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         <slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         <!--TODO: Deprecated since v3.16.0-->
                                     </li>
                                 </template>
-                                <li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option">
+                                <li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option" v-bind="ptm('emptyMessage')">
                                     <slot name="empty">{{ searchResultMessageText }}</slot>
                                 </li>
                             </ul>
@@ -137,7 +158,7 @@
                         </template>
                     </VirtualScroller>
                     <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
                         {{ selectedMessageText }}
                     </span>
                 </div>
@@ -147,10 +168,11 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
-import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
-import SpinnerIcon from 'primevue/icon/spinner';
+import SpinnerIcon from 'primevue/icons/spinner';
-import TimesCircleIcon from 'primevue/icon/timescircle';
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -159,6 +181,7 @@ import VirtualScroller from 'primevue/virtualscroller';
 
 export default {
     name: 'AutoComplete',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
     props: {
         modelValue: null,
@@ -386,6 +409,15 @@ export default {
         getOptionRenderKey(option, index) {
             return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
         },
+        getPTOptions(option, itemOptions, index, key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.isSelected(option),
+                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
+                    disabled: this.isOptionDisabled(option)
+                }
+            });
+        },
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },

components/lib/avatar/Avatar.d.ts

@@ -9,6 +9,45 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AvatarPassThroughMethodOptions {
+    props: AvatarProps;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AvatarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AvatarProps.pt}
+ */
+export interface AvatarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AvatarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: AvatarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: AvatarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: AvatarPassThroughOptionType;
+}
+
 /**
  * Defines valid properties in Avatar component.
  */
@@ -19,6 +58,7 @@ export interface AvatarProps {
     label?: string | undefined;
     /**
      * Defines the icon to display.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
     /**
@@ -43,6 +83,11 @@ export interface AvatarProps {
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarPassThroughOptions}
+     */
+    pt?: AvatarPassThroughOptions;
 }
 
 /**
@@ -53,6 +98,10 @@ export interface AvatarSlots {
      * Content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
 }
 
 /**

components/lib/avatar/Avatar.vue

@@ -1,16 +1,20 @@
 <template>
-    <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
+    <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')">
         <slot>
-            <span v-if="label" class="p-avatar-text">{{ label }}</span>
+            <span v-if="label" class="p-avatar-text" v-bind="ptm('label')">{{ label }}</span>
-            <span v-else-if="icon" :class="iconClass"></span>
+            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-avatar-icon" v-bind="ptm('icon')" />
-            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" />
+            <span v-else-if="icon" :class="['p-avatar-icon', icon]" v-bind="ptm('icon')" />
+            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
         </slot>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Avatar',
+    extends: BaseComponent,
     emits: ['error'],
     props: {
         label: {
@@ -58,9 +62,6 @@ export default {
                     'p-avatar-xl': this.size === 'xlarge'
                 }
             ];
-        },
-        iconClass() {
-            return ['p-avatar-icon', this.icon];
         }
     }
 };

components/lib/avatargroup/AvatarGroup.d.ts

@@ -9,10 +9,36 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | null | undefined;
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AvatarGroupPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AvatarGroupProps.pt}
+ */
+export interface AvatarGroupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AvatarGroupPassThroughOptionType;
+}
+
 /**
  * Defines valid properties in AvatarGroup component.
  */
-export interface AvatarGroupProps {}
+export interface AvatarGroupProps {
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarGroupPassThroughOptions}
+     */
+    pt?: AvatarGroupPassThroughOptions;
+}
 
 /**
  * Defines valid slots in AvatarGroup component.

components/lib/avatargroup/AvatarGroup.vue

@@ -1,12 +1,15 @@
 <template>
-    <div class="p-avatar-group p-component">
+    <div class="p-avatar-group p-component" v-bind="ptm('root')">
         <slot></slot>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
-    name: 'AvatarGroup'
+    name: 'AvatarGroup',
+    extends: BaseComponent
 };
 </script>
 

components/lib/badge/Badge.d.ts

@@ -10,6 +10,33 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type BadgePassThroughOptionType = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BadgePassThroughMethodOptions {
+    props: BadgeProps;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface BadgePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BadgeProps.pt}
+ */
+export interface BadgePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: BadgePassThroughOptionType;
+}
+
 /**
  * Defines valid properties in Badge component.
  */
@@ -26,6 +53,11 @@ export interface BadgeProps {
      * Size of the badge, valid options are 'large' and 'xlarge'.
      */
     size?: 'large' | 'xlarge' | null | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BadgePassThroughOptions}
+     */
+    pt?: BadgePassThroughOptions;
 }
 
 /**

components/lib/badge/Badge.vue

@@ -1,14 +1,16 @@
 <template>
-    <span :class="badgeClass">
+    <span :class="badgeClass" v-bind="ptm('root')">
         <slot>{{ value }}</slot>
     </span>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Badge',
+    extends: BaseComponent,
     props: {
         value: {
             type: [String, Number],

components/lib/basecomponent/BaseComponent.vue

@@ -1,25 +1,46 @@
 <script>
 import { ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
 
 export default {
     name: 'BaseComponent',
     props: {
         pt: {
             type: Object,
-            value: {}
+            default: undefined
         }
     },
     methods: {
-        getPTItem(obj = {}, key = '') {
+        getOption(obj = {}, key = '') {
             const fKey = ObjectUtils.convertToFlatCase(key);
 
             return obj[Object.keys(obj).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''];
         },
+        getPTValue(obj = {}, key = '', params = {}) {
+            const self = ObjectUtils.getItemValue(this.getOption(obj, key), params);
+            const globalPT = ObjectUtils.getItemValue(this.getOption(this.defaultPT, key), params);
+            const merged = mergeProps(self, globalPT);
+
+            return merged;
+            /*
+             * @todo: The 'class' option in self can always be more powerful to style the component easily.
+             *
+             * return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
+             */
+        },
         ptm(key = '', params = {}) {
-            return ObjectUtils.getItemValue(this.getPTItem(this.pt, key), { props: this.$props, state: this.$data, ...params });
+            return this.getPTValue(this.pt, key, { props: this.$props, state: this.$data, ...params });
         },
         ptmo(obj = {}, key = '', params = {}) {
-            return ObjectUtils.getItemValue(this.getPTItem(obj, key), params);
+            return this.getPTValue(obj, key, params);
+        }
+    },
+    computed: {
+        defaultPT() {
+            return ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt, this.$.type.name), this.defaultsParams);
+        },
+        defaultsParams() {
+            return { instance: this.$ };
         }
     }
 };

components/lib/baseicon/BaseIcon.vue

@@ -6,11 +6,11 @@ export default {
     props: {
         label: {
             type: String,
-            value: undefined
+            default: undefined
         },
         spin: {
             type: Boolean,
-            value: false
+            default: false
         }
     },
     methods: {
@@ -33,11 +33,8 @@ export default {
 };
 </script>
 <style>
-/* Theme */
 .p-icon {
     display: inline-block;
-    width: 1rem;
-    height: 1rem;
 }
 
 .p-icon-spin {