Merge branch 'master' into PV4113

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,8 +101,7 @@ 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: {
       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/build-apidoc.js

@@ -378,16 +378,27 @@ if (project) {
                                                     const childSinature = child.signatures[0];
                                                     const parameters = childSinature.parameters.reduce((acc, { name, type }, index) => (index === 0 ? `${name}: ${type.name}` : `${acc}, ${name}: ${type.name}`), '');
 
-                                                    type += ` \t <b>${childSinature.name}(${parameters})</b>: ${childSinature.type?.name}, // ${childSinature.comment?.summary[0]?.text}\n `;
+                                                    type += ` \t <span class="font-medium">${childSinature.name}(${parameters})</span>: ${childSinature.type?.name}, // ${childSinature.comment?.summary[0]?.text}\n `;
                                                 } else {
-                                                    const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
+                                                    if (child.type?.declaration?.signatures) {
+                                                        let functionParameters = '';
 
-                                                    type += ` \t <b>${child.name}</b>: ${childType}, // ${child.comment?.summary[0]?.text}\n `;
+                                                        child.type?.declaration?.signatures[0]?.parameters.map((param, index) => {
+                                                            if (index !== 0) functionParameters += `, `;
+                                                            functionParameters += `${param.name}: ${param.type?.name}`;
+                                                        });
+
+                                                        type += `\t <span class="font-medium">${child.name}</span>: (${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}, // ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}\n`;
+                                                    } else {
+                                                        const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
+
+                                                        type += ` \t <span class="font-medium">${child.name}</span>: ${childType}, // ${child.comment?.summary[0]?.text}\n `;
+                                                    }
                                                 }
                                             });
                                         }
 
-                                        type = `{\n ${type} }`;
+                                        type = `{\n ${type}}`;
                                     }
 
                                     return {

api-generator/components/accordion.js

@@ -45,7 +45,7 @@ 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',

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,7 @@ 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',

api-generator/components/avatar.js

@@ -33,7 +33,7 @@ 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',
@@ -53,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,7 @@ 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',

api-generator/components/badge.js

@@ -21,7 +21,7 @@ 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',

api-generator/components/blockui.js

@@ -27,7 +27,7 @@ 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',

api-generator/components/breadcrumb.js

@@ -21,7 +21,7 @@ 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',

api-generator/components/button.js

@@ -99,7 +99,7 @@ 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',

api-generator/components/calendar.js

@@ -243,7 +243,7 @@ const CalendarProps = [
         name: 'manualInput',
         type: 'boolean',
         default: 'true',
-        description: 'Wheter to allow prevents entering the date manually via typing.'
+        description: 'Whether to allow entering the date manually via typing.'
     },
     {
         name: 'appendTo',
@@ -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,13 @@ 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',

api-generator/components/card.js

@@ -3,7 +3,7 @@ const CardProps = [
         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',

api-generator/components/carousel.js

@@ -87,7 +87,7 @@ 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',

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,7 @@ 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',

api-generator/components/chart.js

@@ -39,7 +39,7 @@ 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',

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,7 @@ 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',

api-generator/components/chip.js

@@ -33,7 +33,7 @@ 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',

api-generator/components/chips.js

@@ -63,13 +63,13 @@ 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',

api-generator/components/colorpicker.js

@@ -75,7 +75,7 @@ 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',

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

@@ -9,7 +9,7 @@ const ColumnGroupProps = [
         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/confirmdialog.js

@@ -21,7 +21,7 @@ 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',

api-generator/components/confirmpopup.js

@@ -9,7 +9,7 @@ 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',

api-generator/components/contextmenu.js

@@ -39,7 +39,7 @@ 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',

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,7 @@ 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',

api-generator/components/dataview.js

@@ -99,7 +99,7 @@ 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',

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,7 @@ 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',

api-generator/components/dialog.js

@@ -135,7 +135,7 @@ 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',

api-generator/components/divider.js

@@ -21,7 +21,7 @@ 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',

api-generator/components/dock.js

@@ -39,7 +39,7 @@ 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',

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,7 @@ 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',

api-generator/components/editor.js

@@ -39,7 +39,7 @@ 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',

api-generator/components/fieldset.js

@@ -21,13 +21,13 @@ 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',

api-generator/components/fileupload.js

@@ -147,7 +147,7 @@ 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',

api-generator/components/galleria.js

@@ -147,7 +147,7 @@ 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',

api-generator/components/image.js

@@ -27,7 +27,7 @@ const ImageProps = [
         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',

api-generator/components/inlinemessage.js

@@ -15,7 +15,7 @@ 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',

api-generator/components/inplace.js

@@ -21,7 +21,7 @@ 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',

api-generator/components/inputmask.js

@@ -33,7 +33,7 @@ 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',

api-generator/components/inputnumber.js

@@ -169,25 +169,25 @@ 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',

api-generator/components/inputswitch.js

@@ -39,13 +39,13 @@ 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',

api-generator/components/inputtext.js

@@ -15,7 +15,7 @@ const InputTextProps = [
         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',

api-generator/components/knob.js

@@ -99,7 +99,7 @@ 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',

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,7 @@ 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',

api-generator/components/megamenu.js

@@ -21,7 +21,7 @@ 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',

api-generator/components/menu.js

@@ -39,7 +39,7 @@ 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',
@@ -71,11 +71,15 @@ const MenuSlots = [
     },
     {
         name: 'item',
-        description: 'Template of a menuitem.'
+        description: 'Custom item template.'
     },
     {
         name: 'itemicon',
         description: 'Custom item icon template.'
+    },
+    {
+        name: 'submenuheader',
+        description: 'Custom submenuheader template.'
     }
 ];
 

api-generator/components/menubar.js

@@ -15,7 +15,7 @@ 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',

api-generator/components/message.js

@@ -39,7 +39,7 @@ 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',

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,7 @@ 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',

api-generator/components/orderlist.js

@@ -52,7 +52,7 @@ 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',

api-generator/components/organizationchart.js

@@ -33,7 +33,7 @@ const OrganizationChartProps = [
         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',

api-generator/components/overlaypanel.js

@@ -51,7 +51,7 @@ 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',

api-generator/components/paginator.js

@@ -51,7 +51,7 @@ 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',

api-generator/components/panel.js

@@ -21,13 +21,13 @@ 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',

api-generator/components/panelmenu.js

@@ -21,7 +21,7 @@ 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',

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,13 @@ 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',
@@ -174,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,7 @@ 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',

api-generator/components/progressbar.js

@@ -21,7 +21,7 @@ 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',

api-generator/components/progressspinner.js

@@ -21,7 +21,7 @@ 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',

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,7 @@ 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',

api-generator/components/rating.js

@@ -51,7 +51,7 @@ 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',

api-generator/components/row.js

@@ -9,7 +9,7 @@ const RowProps = [
         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/scrollpanel.js

@@ -9,7 +9,7 @@ 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',

api-generator/components/scrolltop.js

@@ -27,7 +27,7 @@ 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',

api-generator/components/selectbutton.js

@@ -63,7 +63,7 @@ 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',

api-generator/components/sidebar.js

@@ -63,7 +63,7 @@ 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',

api-generator/components/skeleton.js

@@ -39,7 +39,7 @@ 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',

api-generator/components/slider.js

@@ -63,7 +63,7 @@ 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',

api-generator/components/speeddial.js

@@ -111,7 +111,7 @@ 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',

api-generator/components/splitbutton.js

@@ -105,7 +105,7 @@ 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',
@@ -137,6 +137,10 @@ const SplitButtonSlots = [
     {
         name: 'menubuttonicon',
         description: 'Custom menu button icon template.'
+    },
+    {
+        name: 'menuitemicon',
+        description: 'Custom menu item icon template.'
     }
 ];
 

api-generator/components/splitter.js

@@ -33,7 +33,7 @@ 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',

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,7 @@ 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',

api-generator/components/tabmenu.js

@@ -21,7 +21,7 @@ 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',

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,7 @@ 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',

api-generator/components/tag.js

@@ -27,7 +27,7 @@ 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',

api-generator/components/terminal.js

@@ -15,7 +15,7 @@ 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',

api-generator/components/textarea.js

@@ -15,7 +15,7 @@ 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',

api-generator/components/tieredmenu.js

@@ -39,7 +39,7 @@ 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',

api-generator/components/timeline.js

@@ -27,7 +27,7 @@ const TimelineProps = [
         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',

api-generator/components/toast.js

@@ -33,7 +33,7 @@ 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',

api-generator/components/togglebutton.js

@@ -69,13 +69,13 @@ 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',

api-generator/components/toolbar.js

@@ -9,7 +9,7 @@ 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',

api-generator/components/tree.js

@@ -82,7 +82,7 @@ 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',

api-generator/components/treeselect.js

@@ -106,7 +106,7 @@ 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',

api-generator/components/treetable.js

@@ -222,11 +222,17 @@ const TreeTableProps = [
         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: 'Uses to pass attributes to DOM elements inside the component.'
+        description: 'Used to pass attributes to DOM elements inside the component.'
     },
     {
         name: 'unstyled',

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,7 @@ 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',

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": 39,
+    "id": 42,
-    "content": "Unstyled Mode with Tailwind Preview",
+    "content": "Introducing Tailwind CSS Support",
     "linkText": "Learn More",
-    "linkHref": "https://youtu.be/JpYIX3V96gs",
+    "linkHref": "https://primevue.org/tailwind",
     "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",
@@ -483,6 +510,11 @@
             "icon": "pi pi-table",
             "href": "https://primeflex.org"
         },
+        {
+            "name": "Accessibility",
+            "icon": "pi pi-users",
+            "to": "/accessibility"
+        },
         {
             "name": "Support",
             "icon": "pi pi-question",

assets/styles/layout/_code.scss

@@ -26,7 +26,7 @@ pre[class*="language-"] {
     position: relative;
     margin: .5em 0;
     overflow: visible;
-    padding: 1px;
+    padding: 0;
 }
 
 pre[class*="language-"] > code {
@@ -402,7 +402,8 @@ pre[class*="language-"] {
         margin: 0;
         color: var(--surface-900);
         font-size: 14px;
-        border-radius: 10px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
     }
     }
 

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);
                 }
@@ -199,6 +205,18 @@
     }
 }
 
+.doc-section-code-buttons {
+    gap: .75rem;
+    padding: .75rem 0 0;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+
+    .p-button-label {
+        font-weight: normal;
+        font-size: 0.875rem;
+    }
+}
+
 .doc-section-code-tooltip .p-tooltip-text {
     padding: 0.5rem;
     font-size: 11px;
@@ -211,19 +229,8 @@
         }
     }
 
-    .p-button-label {
-        font-weight: normal;
-        font-size: 0.875rem;
-    }
-
-    .doc-section-code-active {
-        .p-button-label {
-            font-weight: bold;
-        }
-    }
-
     pre {
-        margin: 0 0 1.5rem 0;
+        margin: 0;
     }
 }
 
@@ -269,6 +276,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 +298,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;
@@ -316,6 +331,10 @@
                     }
                 }
             }
+
+            .doc-option-link {
+                color: var(--primary-color);
+            }
         }
     }
 }

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');

components/doc/DocApiTable.vue

@@ -19,7 +19,7 @@
             </thead>
             <tbody>
                 <tr v-for="prop in data" :key="prop">
-                    <td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type', 'doc-option-default': k === 'defaultValue' }">
+                    <td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-default': k === 'defaultValue' }">
                         <template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
                             <span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name" :class="{ 'line-through cursor-pointer': !!prop.deprecated }" :title="prop.deprecated">
                                 {{ v
@@ -34,8 +34,16 @@
                                 </template>
                             </template>
 
+                            <template v-else-if="k === 'options'">
+                                <template v-for="val in v" :key="val.name">
+                                    <div class="doc-option-type-options-container">
+                                        {{ val.name }}: <span class="doc-option-type-options">{{ val.type }}</span>
+                                    </div>
+                                </template>
+                            </template>
+
                             <template v-else-if="k === 'parameters'">
-                                <span v-if="v.name" :class="{ 'parameter-bold': label === 'Slots' }"> {{ v.name }} : </span>
+                                <span v-if="v.name" :class="{ 'font-bold': label === 'Slots' }"> {{ v.name }} : </span>
                                 <template v-for="(value, i) in getType(v.type)" :key="value">
                                     {{ i !== 0 ? ' |' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link"> {{ value }} </NuxtLink>
                                     <span v-else v-html="value"> </span>
@@ -156,9 +164,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-.parameter-bold {
-    font-weight: bold;
-}
-</style>

components/doc/DocComponent.vue

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