Merge branch 'master' into issue-3940

.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
         }
     },
     plugins: ['prettier'],
-    ignorePatterns: ['**/public/**'],
+    ignorePatterns: ['**/public/**', '**/dist/**'],
     rules: {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
@@ -92,7 +92,8 @@ module.exports = {
             { blankLine: 'always', prev: 'block', next: '*' },
             { blankLine: 'always', prev: '*', next: 'block' },
             { blankLine: 'always', prev: 'block-like', next: '*' },
-            { blankLine: 'always', prev: '*', next: 'block-like' }
+            { blankLine: 'always', prev: '*', next: 'block-like' },
+            { blankLine: 'always', prev: ['import'], next: ['const', 'let', 'var'] }
         ]
     }
 };

.github/workflows/node.js.yml

@@ -53,7 +53,7 @@ jobs:
               run: |
                   npm run security:check
 
-            - name: Unit Tests Check
+            # - name: Unit Tests Check
-              if: ${{ success() }}
+            #   if: ${{ success() }}
-              run: |
+            #   run: |
-                  npm run test:unit
+            #       npm run test:unit

README.md

@@ -33,17 +33,16 @@ const app = createApp(App);
 app.use(PrimeVue);
 ```
 
-## Styles
+## Theming
+PrimeVue has two theming has modes; styled or unstyled.
 
-Theme, core and icons are the necessary css files of the components, visit the [Themes](https://primevue.org/theming) section for the complete list of available themes to choose from.
+**Styled Mode**
 
+Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the [Themes](https://primevue.org/theming) section for the complete list of available themes to choose from.
 
 ```javascript
 // theme
 import 'primevue/resources/themes/lara-light-blue/theme.css';
-
-// core
-import 'primevue/resources/primevue.min.css';
 ```
 
 Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.
@@ -54,7 +53,17 @@ body {
 }
 ```
 
+**Unstyled Mode**
 
+Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set `unstyled` as true to enable it globally. Visit the [Unstyled mode](https://primevue.org/unstyled) documentation for more information and examples.
+
+```javascript
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { unstyled: true });
+```
 
 ## Usage
 
@@ -92,12 +101,11 @@ Open the nuxt configuration file and add the css dependencies.
 ```javascript
 export default defineNuxtConfig({
     css: [
-        "primevue/resources/themes/lara-light-blue/theme.css",
+        "primevue/resources/themes/lara-light-blue/theme.css"
-        "primevue/resources/primevue.css"
     ],
-	build: {
+    build: {
-		transpile: ["primevue"]
+      transpile: ["primevue"]
-	}
+    }
 })
 ```
 
@@ -145,4 +153,4 @@ We've created various samples for the popular options in the Vue ecosystem. Visi
 
 <a href="https://github.com/primefaces/primevue/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=primefaces/primevue" />
-</a>
+</a>

api-generator/components/accordion.js

@@ -45,7 +45,13 @@ const AccordionProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/accordiontab.js

@@ -21,13 +21,13 @@ const AccordionTabProps = [
         name: 'headerProps',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLDivElement to the tab header.'
+        description: 'Used to pass all properties of the HTMLDivElement to the tab header.'
     },
     {
         name: 'headerActionProps',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
+        description: 'Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
     },
     {
         name: 'contentStyle',
@@ -45,7 +45,7 @@ const AccordionTabProps = [
         name: 'contentProps',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLDivElement to the tab content.'
+        description: 'Used to pass all properties of the HTMLDivElement to the tab content.'
     },
     {
         name: 'disabled',
@@ -57,7 +57,7 @@ const AccordionTabProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/autocomplete.js

@@ -77,6 +77,12 @@ const AutoCompleteProps = [
         default: 'null',
         description: 'Default text to display when no option is selected.'
     },
+    {
+        name: 'loading',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the multiselect is in loading state.'
+    },
     {
         name: 'disabled',
         type: 'boolean',
@@ -141,7 +147,7 @@ const AutoCompleteProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
     },
     {
         name: 'panelStyle',
@@ -159,7 +165,7 @@ const AutoCompleteProps = [
         name: 'panelProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
     },
     {
         name: 'dropdownIcon',
@@ -255,7 +261,13 @@ const AutoCompleteProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/avatar.js

@@ -33,7 +33,13 @@ const AvatarProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 
@@ -47,7 +53,14 @@ const AvatarSlots = [
 const AvatarEvents = [
     {
         name: 'error',
-        description: 'Triggered when an error occurs while loading an image file.'
+        description: 'Triggered when an error occurs while loading an image file.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
     }
 ];
 

api-generator/components/avatargroup.js

@@ -33,7 +33,13 @@ const AvatarGroupProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/badge.js

@@ -21,7 +21,13 @@ const BadgeProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/blockui.js

@@ -27,7 +27,13 @@ const BlockUIProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/breadcrumb.js

@@ -21,7 +21,13 @@ const BreadcrumbProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/button.js

@@ -99,7 +99,13 @@ const ButtonProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/calendar.js

@@ -297,7 +297,7 @@ const CalendarProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
     },
     {
         name: 'panelClass',
@@ -315,13 +315,19 @@ const CalendarProps = [
         name: 'panelProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+        description: 'Used 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.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/card.js

@@ -1,3 +1,18 @@
+const CardProps = [
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
 const CardSlots = [
     {
         name: 'header',
@@ -25,6 +40,7 @@ module.exports = {
     card: {
         name: 'Card',
         description: 'Card is a flexible container component.',
+        props: CardProps,
         slots: CardSlots
     }
 };

api-generator/components/carousel.js

@@ -87,7 +87,13 @@ const CarouselProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/cascadeselect.js

@@ -75,7 +75,7 @@ const CascadeSelectProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
     },
     {
         name: 'panelStyle',
@@ -93,7 +93,7 @@ const CascadeSelectProps = [
         name: 'panelProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
     },
     {
         name: 'appendTo',
@@ -189,7 +189,13 @@ const CascadeSelectProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/chart.js

@@ -39,7 +39,13 @@ const ChartProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/checkbox.js

@@ -75,7 +75,7 @@ const CheckboxProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
     },
     {
         name: 'aria-labelledby',
@@ -93,7 +93,13 @@ const CheckboxProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/chip.js

@@ -33,7 +33,13 @@ const ChipProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/chips.js

@@ -63,13 +63,19 @@ const ChipsProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used 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.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/colorpicker.js

@@ -75,7 +75,13 @@ const ColorPickerProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/column.js

@@ -255,7 +255,7 @@ const ColumnProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
     }
 ];
 

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: 'Used 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

@@ -21,7 +21,13 @@ const ConfirmDialogProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/confirmpopup.js

@@ -9,7 +9,13 @@ const ConfirmPopupProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/contextmenu.js

@@ -39,7 +39,13 @@ const ContextMenuProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/datatable.js

@@ -366,6 +366,12 @@ const DataTableProps = [
         default: 'false',
         description: 'Whether to displays rows with alternating colors.'
     },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the table.'
+    },
     {
         name: 'tableStyle',
         type: 'object',
@@ -382,7 +388,13 @@ const DataTableProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/dataview.js

@@ -99,7 +99,13 @@ const DataViewProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/dataviewlayoutoptions.js

@@ -9,7 +9,7 @@ const DataViewLayoutOptionsProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/deferredcontent.js

@@ -3,7 +3,13 @@ const DeferredContentProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/dialog.js

@@ -135,7 +135,13 @@ const DialogProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/divider.js

@@ -21,7 +21,13 @@ const DividerProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/dock.js

@@ -39,7 +39,13 @@ const DockProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/dropdown.js

@@ -129,7 +129,7 @@ const DropdownProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
     },
     {
         name: 'panelStyle',
@@ -147,19 +147,19 @@ const DropdownProps = [
         name: 'panelProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
     },
     {
         name: 'filterInputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the filter input inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the component.'
     },
     {
         name: 'clearIconProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLElement to the clear icon inside the component.'
+        description: 'Used to pass all properties of the HTMLElement to the clear icon inside the component.'
     },
     {
         name: 'appendTo',
@@ -261,7 +261,13 @@ const DropdownProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/editor.js

@@ -39,7 +39,13 @@ const EditorProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/fieldset.js

@@ -21,13 +21,19 @@ const FieldsetProps = [
         name: 'toggleButtonProps',
         type: 'string',
         default: 'null',
-        description: 'Uses to pass the custom value to read for the AnchorHTMLAttributes inside the component.'
+        description: 'Used to pass the custom value to read for the AnchorHTMLAttributes inside the component.'
     },
     {
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/fileupload.js

@@ -147,7 +147,13 @@ const FileUploadProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/galleria.js

@@ -147,7 +147,13 @@ const GalleriaProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/image.js

@@ -11,11 +11,29 @@ const ImageProps = [
         default: 'pi pi-eye',
         description: 'Custom indicator icon.'
     },
+    {
+        name: 'zoomInDisabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Disable the zoom-in button'
+    },
+    {
+        name: 'zoomOutDisabled',
+        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.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/inlinemessage.js

@@ -15,7 +15,13 @@ const InlineMessageProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/inplace.js

@@ -21,7 +21,13 @@ const InplaceProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/inputmask.js

@@ -33,7 +33,13 @@ const InputMaskProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/inputnumber.js

@@ -169,25 +169,31 @@ const InputNumberProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
     },
     {
         name: 'incrementButtonProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLButtonElement to increment button inside the component.'
+        description: 'Used to pass all properties of the HTMLButtonElement to increment button inside the component.'
     },
     {
         name: 'decrementButtonProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.'
+        description: 'Used 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.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/inputswitch.js

@@ -39,13 +39,19 @@ const InputSwitchProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used 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.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/inputtext.js

@@ -5,11 +5,23 @@ const InputTextProps = [
         default: 'null',
         description: 'Value of the component.'
     },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the component, valid values are "small" and "large".'
+    },
     {
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/knob.js

@@ -99,7 +99,13 @@ const KnobProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/listbox.js

@@ -106,7 +106,7 @@ const ListboxProps = [
         name: 'filterInputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the filter input inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the component.'
     },
     {
         name: 'virtualScrollerOptions',
@@ -178,7 +178,13 @@ const ListboxProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/megamenu.js

@@ -21,7 +21,13 @@ const MegaMenuProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/menu.js

@@ -39,7 +39,13 @@ const MenuProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/menubar.js

@@ -15,7 +15,13 @@ const MenubarProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/message.js

@@ -39,7 +39,13 @@ const MessageProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/multiselect.js

@@ -69,7 +69,7 @@ const MultiSelectProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
     },
     {
         name: 'panelStyle',
@@ -87,19 +87,19 @@ const MultiSelectProps = [
         name: 'panelProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel.'
+        description: 'Used to pass all properties of the HTMLDivElement to the overlay panel.'
     },
     {
         name: 'filterInputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.'
+        description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.'
     },
     {
         name: 'closeButtonProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLButtonElement to the close button inside the overlay panel.'
+        description: 'Used to pass all properties of the HTMLButtonElement to the close button inside the overlay panel.'
     },
     {
         name: 'dataKey',
@@ -297,7 +297,13 @@ const MultiSelectProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/orderlist.js

@@ -52,7 +52,13 @@ const OrderListProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/organizationchart.js

@@ -28,6 +28,18 @@ 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: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/overlaypanel.js

@@ -51,7 +51,13 @@ const OverlayPanelProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/paginator.js

@@ -51,7 +51,13 @@ const PaginatorProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/panel.js

@@ -21,13 +21,19 @@ const PanelProps = [
         name: 'toggleButtonProps',
         type: 'string',
         default: 'null',
-        description: 'Uses to pass the custom value to read for the anchor inside the component.'
+        description: 'Used to pass the custom value to read for the anchor inside the component.'
     },
     {
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/panelmenu.js

@@ -21,7 +21,13 @@ const PanelMenuProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/password.js

@@ -111,7 +111,7 @@ const PasswordProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
     },
     {
         name: 'panelId',
@@ -135,13 +135,19 @@ const PasswordProps = [
         name: 'panelProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+        description: 'Used 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.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 
@@ -168,11 +174,26 @@ const PasswordSlots = [
     }
 ];
 
+const PasswordEmits = [
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.',
+        arguments: [
+            {
+                name: 'event',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    }
+];
+
 module.exports = {
     password: {
         name: 'Password',
         description: 'Password displays strength indicator for password fields.',
         props: PasswordProps,
-        slots: PasswordSlots
+        slots: PasswordSlots,
+        events: PasswordEmits
     }
 };

api-generator/components/picklist.js

@@ -64,7 +64,13 @@ const PickListProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/progressbar.js

@@ -21,7 +21,13 @@ const ProgressbarProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/progressspinner.js

@@ -21,7 +21,13 @@ const ProgressSpinnerProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/radiobutton.js

@@ -45,7 +45,7 @@ const RadioButtonProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
     },
     {
         name: 'aria-labelledby',
@@ -63,7 +63,13 @@ const RadioButtonProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/rating.js

@@ -51,7 +51,13 @@ const RatingProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

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: 'Used 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/scrollpanel.js

@@ -9,7 +9,13 @@ const ScrollPanelProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/scrolltop.js

@@ -27,7 +27,13 @@ const ScrollTopProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/selectbutton.js

@@ -63,7 +63,13 @@ const SelectButtonProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/sidebar.js

@@ -63,7 +63,13 @@ const SidebarProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/skeleton.js

@@ -39,7 +39,13 @@ const SkeletonProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/slider.js

@@ -63,7 +63,13 @@ const SliderProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/speeddial.js

@@ -111,7 +111,13 @@ const SpeedDialProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/splitbutton.js

@@ -105,7 +105,13 @@ const SplitButtonProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/splitter.js

@@ -33,7 +33,13 @@ const SplitterProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/splitterpanel.js

@@ -15,7 +15,7 @@ const SplitterPanelProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/steps.js

@@ -27,7 +27,13 @@ const StepsProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/tabmenu.js

@@ -21,7 +21,13 @@ const TabMenuProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/tabpanel.js

@@ -21,13 +21,13 @@ const TabPanelProps = [
         name: 'headerProps',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLLiElement to the tab header.'
+        description: 'Used to pass all properties of the HTMLLiElement to the tab header.'
     },
     {
         name: 'headerActionProps',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
+        description: 'Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
     },
     {
         name: 'contentStyle',
@@ -45,7 +45,7 @@ const TabPanelProps = [
         name: 'contentProps',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLDivElement to the tab content.'
+        description: 'Used to pass all properties of the HTMLDivElement to the tab content.'
     },
     {
         name: 'disabled',
@@ -57,7 +57,7 @@ const TabPanelProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/tabview.js

@@ -33,13 +33,13 @@ const TabViewProps = [
         name: 'previousButtonProps',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLButtonElement to the previous button.'
+        description: 'Used to pass all properties of the HTMLButtonElement to the previous button.'
     },
     {
         name: 'nextButtonProps',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
+        description: 'Used to pass all properties of the HTMLButtonElement to the next button.'
     },
     {
         name: 'prevIcon',
@@ -57,7 +57,13 @@ const TabViewProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/tag.js

@@ -27,7 +27,13 @@ const TagProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/terminal.js

@@ -15,7 +15,13 @@ const TerminalProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/textarea.js

@@ -15,7 +15,13 @@ const TextareaProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/tieredmenu.js

@@ -39,7 +39,13 @@ const TieredMenuProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/timeline.js

@@ -22,6 +22,18 @@ 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: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/toast.js

@@ -33,7 +33,13 @@ const ToastProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/togglebutton.js

@@ -69,13 +69,19 @@ const ToggleButtonProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used 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.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/toolbar.js

@@ -9,7 +9,13 @@ const ToolbarProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/tree.js

@@ -82,7 +82,13 @@ const TreeProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/treeselect.js

@@ -106,7 +106,13 @@ const TreeSelectProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/treetable.js

@@ -221,6 +221,24 @@ const TreeTableProps = [
         type: 'string',
         default: 'null',
         description: 'Defines the responsive mode, currently only option is scroll.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the table.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/tristatecheckbox.js

@@ -27,7 +27,7 @@ const TriStateCheckboxProps = [
         name: 'inputProps',
         type: 'object',
         default: 'null',
-        description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
     },
     {
         name: 'aria-labelledby',
@@ -45,7 +45,13 @@ const TriStateCheckboxProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
     }
 ];
 

api-generator/components/virtualscroller.js

@@ -106,7 +106,7 @@ const VirtualScrollerProps = [
         name: 'pt',
         type: 'any',
         default: 'null',
-        description: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
     }
 ];
 

assets/data/news.json

@@ -1,8 +1,8 @@
 {
-    "id": 37,
+    "id": 41,
-    "content": "Unstyled mode preview featuring Tailwind.",
+    "content": "Summer Sale | Up to 50% Off",
     "linkText": "Learn More",
-    "linkHref": "https://youtu.be/JpYIX3V96gs",
+    "linkHref": "https://www.primefaces.org/store",
     "backgroundStyle": "background-color:#4f8ff7",
     "textStyle": "color:#ffffff;font-weight:500",
     "linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"

assets/menu/menu.json

@@ -11,10 +11,6 @@
                 {
                     "name": "Configuration",
                     "to": "/configuration"
-                },
-                {
-                    "name": "Accessibility",
-                    "to": "/accessibility"
                 }
             ]
         },
@@ -432,23 +428,54 @@
             "icon": "pi pi-palette",
             "children": [
                 {
-                    "name": "Overview",
+                    "name": "Styled Mode",
-                    "to": "/theming"
+                    "children": [
+                        {
+                            "name": "Overview",
+                            "to": "/theming"
+                        },
+                        {
+                            "name": "Visual Editor",
+                            "href": "https://designer.primevue.org"
+                        },
+                        {
+                            "name": "Colors",
+                            "to": "/colors"
+                        },
+                        {
+                            "name": "SASS API",
+                            "href": "https://www.primefaces.org/designer/api/primevue/3.9.0"
+                        }
+                    ]
                 },
                 {
-                    "name": "Visual Editor",
+                    "name": "Unstyled Mode",
-                    "href": "https://designer.primevue.org"
+                    "children": [
-                },
+                        {
-                {
+                            "name": "Overview",
-                    "name": "Colors",
+                            "to": "/unstyled"
-                    "to": "/colors"
+                        },
-                },
+                        {
-                {
+                            "name": "Tailwind",
-                    "name": "SASS API",
+                            "to": "/tailwind"
-                    "href": "https://www.primefaces.org/designer/api/primevue/3.9.0"
+                        },
+                        {
+                            "name": "Bootstrap",
+                            "to": "/bootstrap"
+                        },
+                        {
+                            "name": "Bulma",
+                            "to": "/bulma"
+                        }
+                    ]
                 }
             ]
         },
+        {
+            "name": "Pass Through",
+            "icon": "pi pi-directions",
+            "to": "/passthrough"
+        },
         {
             "name": "Figma UI Kit",
             "icon": "pi pi-pencil",
@@ -481,7 +508,12 @@
         {
             "name": "PrimeFlex CSS",
             "icon": "pi pi-table",
-            "href": "https://www.primefaces.org/primeflex"
+            "href": "https://primeflex.org"
+        },
+        {
+            "name": "Accessibility",
+            "icon": "pi pi-users",
+            "to": "/accessibility"
         },
         {
             "name": "Support",

assets/styles/layout/_core.scss

@@ -73,4 +73,27 @@ input[type="number"] {
 .p-toast.p-toast-top-right,
 .p-toast.p-toast-top-left {
     top: 7rem;
+}
+
+.px-link {
+    font-size: 1rem;
+    font-family: var(--font-family);
+    border-radius: var(--border-radius);
+    text-align: left;
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: none;
+    cursor: pointer;
+    user-select: none;
+}
+
+.px-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: var(--focus-ring);
+}
+
+.px-link:disabled {
+	cursor: default;
 }

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);
@@ -42,6 +44,10 @@
             }
         }
     }
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
 }
 
 .doc-tabpanel,
@@ -160,7 +166,7 @@
         > .navbar-item-content {
             display: flex;
 
-            .p-link {
+            .px-link {
                 padding: 0.25rem 1rem 0.25rem 1rem;
                 color: var(--text-color);
                 white-space: nowrap;
@@ -178,7 +184,7 @@
             > .navbar-item-content {
                 border-color: var(--primary-color);
 
-                .p-link {
+                .px-link {
                     font-weight: 700;
                     color: var(--primary-color);
                 }
@@ -269,6 +275,14 @@
                         text-decoration: underline;
                     }
                 }
+
+                .doc-option-type-options-container {
+                    display: flex;
+                    align-items: center;
+                }
+                span.doc-option-type-options {
+                    color: var(--primary-700);
+                }
             }
 
             &.doc-option-default {
@@ -283,7 +297,7 @@
             }
 
             .doc-option-name,
-            > i {
+            > i:not(.pi) {
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 position: relative;
                 scroll-margin-top: 6.5rem;

assets/styles/layout/_topbar.scss

@@ -6,7 +6,7 @@
     left: 250px;
     width: calc(100% - 250px);
     z-index: 1100;
-    border-bottom: 1px solid var(--surface-border);
+    transition: background-color 1s;
 
     .layout-topbar-inner {
         height: 100%;
@@ -40,4 +40,21 @@
             font-size: 1.5rem;
         }
     }
+}
+
+
+.layout-wrapper-light {
+    .layout-topbar {
+        &.layout-topbar-sticky {
+            background-color: rgba(255,255,255,.7);
+        }
+    }
+}
+
+.layout-wrapper-dark {
+    .layout-topbar {
+        &.layout-topbar-sticky {
+            background-color: rgba(0,0,0,.3);
+        }
+    }
 }

assets/styles/primevue.css

@@ -1,9 +1,3 @@
-@import '../../components/lib/common/Common.css';
+/**
-@import '../../components/lib/badge/Badge.css';
+ * The primevue[.min].css has been deprecated. In order not to break existing projects, it is currently included in the build as an empty file.
-@import '../../components/lib/button/Button.css';
+ */
-@import '../../components/lib/checkbox/Checkbox.css';
-@import '../../components/lib/colorpicker/ColorPicker.css';
-@import '../../components/lib/inputtext/InputText.css';
-@import '../../components/lib/radiobutton/RadioButton.css';
-@import '../../components/lib/ripple/Ripple.css';
-@import '../../components/lib/tooltip/Tooltip.css';

build-meta.js

@@ -15,6 +15,7 @@ function copyDependencies(inFolder, outFolder) {
 
 copyDependencies('./components/lib/', 'dist/');
 copyDependencies('./components/lib/icons/', 'dist/icons/');
+copyDependencies('./components/lib/passthrough/', 'dist/passthrough/');
 
 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');