Merge branch 'v4' of https://github.com/primefaces/primevue into v4

.gitignore

@@ -11,3 +11,4 @@ dist
 .vscode
 .idea
 .eslintcache
+api-generator/typedoc.json

api-generator/build-apidoc.js

@@ -454,6 +454,53 @@ if (project) {
                 };
             });
 
+        const module_enumerations_group = module.groups?.find((g) => g.title === 'Enumerations');
+
+        module_enumerations_group &&
+            module_enumerations_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+
+                !doc[name]['enumerations'] &&
+                    (doc[name]['enumerations'] = {
+                        description: staticMessages['enumerations'],
+
+                        values: {}
+                    });
+
+                const members = [];
+
+                if (event.groups) {
+                    const event_members_group = event.groups.find((g) => g.title === 'Enumeration Members');
+
+                    event_members_group &&
+                        event_members_group.children.forEach((prop) => {
+                            members.push({
+                                name: prop.name,
+                                optional: prop.flags.isOptional,
+                                readonly: prop.flags.isReadonly,
+                                value: prop.type.toString(),
+                                description:
+                                    prop.comment &&
+                                    prop.comment.summary
+                                        .map((s) => {
+                                            if (s.text.indexOf('[here]') > -1) {
+                                                return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
+                                            }
+
+                                            return s.text || '';
+                                        })
+                                        .join(' '),
+                                deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
+                            });
+                        });
+                }
+
+                doc[name]['enumerations'].values[event.name] = {
+                    description: event_props_description,
+                    members
+                };
+            });
+
         const module_types_group = module.groups?.find((g) => g.title === 'Type Aliases');
 
         module_types_group &&
@@ -516,5 +563,5 @@ if (project) {
     !fs.existsSync(outputPath) && fs.mkdirSync(outputPath);
     fs.writeFileSync(path.resolve(outputPath, 'index.json'), typedocJSON);
 
-    /*  app.generateJson(project, `./api-generator/typedoc.json`); */
+    // app.generateJson(project, `./api-generator/typedoc.json`);
 }

components/lib/accordion/style/AccordionStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * Accordion groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ *
+ * @module accordionstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum AccordionClasses {
+    root = 'p-accordion'
+}
+
 export interface AccordionStyle extends BaseStyle {}

components/lib/accordioncontent/style/AccordionContentStyle.d.ts

@@ -1,3 +1,17 @@
+/**
+ *
+ * AccordionContent is a helper component for Accordion component.
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ *
+ * @module accordioncontentstyle
+ *
+ */
 import { BaseStyle } from '../../base/style/BaseStyle';
 
+export enum AccordionContentClasses {
+    root = 'p-accordioncontent',
+    content = 'p-accordioncontent-content'
+}
+
 export interface AccordionContentStyle extends BaseStyle {}

components/lib/accordionheader/style/AccordionHeaderStyle.d.ts

@@ -1,3 +1,17 @@
+/**
+ *
+ * AccordionHeader is a helper component for Accordion component.
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ *
+ * @module accordionheaderstyle
+ *
+ */
 import { BaseStyle } from '../../base/style/BaseStyle';
 
+export enum AccordionHeaderClasses {
+    root = 'p-accordionheader',
+    toggleicon = 'p-accordionheader-toggle-icon'
+}
+
 export interface AccordionHeaderStyle extends BaseStyle {}

components/lib/accordionpanel/style/AccordionPanelStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * AccordionPanel is a helper component for Accordion component.
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ *
+ * @module accordionpanelstyle
+ *
+ */
 import { BaseStyle } from '../../base/style/BaseStyle';
 
+export enum AccordionPanelClasses {
+    root = 'p-accordionpanel'
+}
+
 export interface AccordionPanelStyle extends BaseStyle {}

components/lib/accordiontab/style/AccordionTabStyle.d.ts

@@ -1,3 +1,15 @@
+/**
+ * @deprecated since v4. Use the new structure of Accordion instead.
+ *
+ * AccordionTab is a helper component for Accordion.
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ *
+ * @module accordiontabstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum AccordionTabClasses {}
+
 export interface AccordionTabStyle extends BaseStyle {}

components/lib/animateonscroll/style/AnimateOnScrollStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ *  AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.
+ *
+ * [Live Demo](https://primevue.org/animateonscroll)
+ *
+ * @module animateonscrollstyle
+ *
+ */
 import { BaseStyle } from '../../base/style/BaseStyle';
 
+export enum AnimateOnScrollClasses {}
+
 export interface AnimateOnScrollStyle extends BaseStyle {}

components/lib/autocomplete/style/AutoCompleteStyle.d.ts

@@ -1,3 +1,29 @@
+/**
+ *
+ * AutoComplete is an input component that provides real-time suggestions while being typed.
+ *
+ * [Live Demo](https://www.primevue.org/autocomplete/)
+ *
+ * @module autocompletestyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum AutoCompleteClasses {
+    root = 'p-autocomplete',
+    pcInput = 'p-autocomplete-input',
+    inputMultiple = 'p-autocomplete-input-multiple',
+    chip = 'p-autocomplete-chip',
+    pcChipLabel = 'p-autocomplete-chip-label',
+    chipIcon = 'p-autocomplete-chip-icon',
+    inputChip = 'p-autocomplete-input-chip',
+    loader = 'p-autocomplete-loader',
+    dropdown = 'p-autocomplete-dropdown',
+    panel = 'p-autocomplete-overlay',
+    list = 'p-autocomplete-list',
+    optionGroup = 'p-autocomplete-option-group',
+    option = 'p-autocomplete-option',
+    emptyMessage = 'p-autocomplete-empty-message'
+}
+
 export interface AutoCompleteStyle extends BaseStyle {}

components/lib/avatar/style/AvatarStyle.d.ts

@@ -1,3 +1,18 @@
+/**
+ *
+ * Avatar represents people using icons, labels and images.
+ *
+ * - [Live Demo](https://primevue.org/avatar)
+ *
+ * @module avatarstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum AvatarClasses {
+    root = 'p-avatar',
+    label = 'p-avatar-label',
+    icon = 'p-avatar-icon'
+}
+
 export interface AvatarStyle extends BaseStyle {}

components/lib/avatargroup/style/AvatarGroupStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * A set of Avatars can be displayed together using the AvatarGroup component.
+ *
+ * [Live Demo](https://www.primevue.org/avatar/)
+ *
+ * @module avatargroupstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum AvatarGroupClasses {
+    root = 'p-avatar-group'
+}
+
 export interface AvatarGroupStyle extends BaseStyle {}

components/lib/badge/style/BadgeStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * Badge represents people using icons, labels and images.
+ *
+ * [Live Demo](https://www.primevue.org/badge)
+ *
+ * @module badgestyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum BadgeClasses {
+    root = 'p-badge'
+}
+
 export interface BadgeStyle extends BaseStyle {}

components/lib/badgedirective/style/BadgeDirectiveStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * Badge directive is a small status indicator for another element.
+ *
+ * [Live Demo](https://primevue.org/badge)
+ *
+ * @module badgedirectivestyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum BadgeDirectiveClasses {
+    root = 'p-badge'
+}
+
 export interface BadgeDirectiveStyle extends BaseStyle {}

components/lib/base/style/BaseStyle.d.ts

@@ -1,5 +1,14 @@
+/**
+ *
+ * [Live Demo](https://primevue.org/)
+ *
+ * @module basestyle
+ *
+ */
 import { Style, StyleOptions } from '../../usestyle';
 
+export enum BaseClasses {}
+
 export declare interface BaseStyle {
     name?: string | undefined;
     css?: string | undefined;

components/lib/basecomponent/BaseComponent.d.ts

@@ -1,3 +1,10 @@
+/**
+ *
+ * [Live Demo](https://primevue.org/)
+ *
+ * @module basecomponent
+ *
+ */
 export interface ComponentHooks {
     onBeforeCreate?(): void;
     onCreated?(): void;

components/lib/basecomponent/style/BaseComponentStyle.d.ts

@@ -1,3 +1,12 @@
+/**
+ *
+ * [Live Demo](https://primevue.org/)
+ *
+ * @module basecomponentstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum BaseComponentClasses {}
+
 export interface BaseComponentStyle extends BaseStyle {}

components/lib/basedirective/BaseDirective.d.ts

@@ -1,3 +1,10 @@
+/**
+ *
+ * [Live Demo](https://primevue.org/)
+ *
+ * @module basedirective
+ *
+ */
 import { DirectiveBinding, VNode } from 'vue';
 
 export interface DirectiveInstance<T = any, V = any> {

components/lib/baseicon/style/BaseIconStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * [Live Demo](https://primevue.org/)
+ *
+ * @module baseiconstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum BaseIconClasses {
+    root = 'p-icon'
+}
+
 export interface BaseIconStyle extends BaseStyle {}

components/lib/blockui/style/BlockUIStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * BlockUI represents people using icons, labels and images.
+ *
+ * [Live Demo](https://www.primevue.org/blockui)
+ *
+ * @module blockuistyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum BlockUIClasses {
+    root = 'p-blockui'
+}
+
 export interface BlockUIStyle extends BaseStyle {}

components/lib/breadcrumb/style/BreadcrumbStyle.d.ts

@@ -1,3 +1,23 @@
+/**
+ *
+ * Breadcrumb provides contextual information about page hierarchy.
+ *
+ * [Live Demo](https://www.primevue.org/breadcrumb/)
+ *
+ * @module breadcrumbstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum BreadcrumbClasses {
+    root = 'p-breadcrumb',
+    list = 'p-breadcrumb-list',
+    homeItem = 'p-breadcrumb-home-item',
+    separator = 'p-breadcrumb-separator',
+    item = 'p-breadcrumb-item',
+    itemLink = 'p-breadcrumb-item-link',
+    itemIcon = 'p-breadcrumb-item-icon',
+    itemLabel = 'p-breadcrumb-item-label'
+}
+
 export interface BreadcrumbStyle extends BaseStyle {}

components/lib/button/style/ButtonStyle.d.ts

@@ -1,3 +1,19 @@
+/**
+ *
+ * Button is an extension to standard button element with icons and theming.
+ *
+ * [Live Demo](https://www.primevue.org/button/)
+ *
+ * @module buttonstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ButtonClasses {
+    root = 'p-button',
+    loadingIcon = 'p-button-loading-icon',
+    icon = 'p-button-icon',
+    label = 'p-button-label'
+}
+
 export interface ButtonStyle extends BaseStyle {}

components/lib/buttongroup/style/ButtonGroupStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * A set of Buttons can be displayed together using the ButtonGroup component.
+ *
+ * [Live Demo](https://www.primevue.org/button/)
+ *
+ * @module buttongroupstyle
+ *
+ */
 import { BaseStyle } from '../../base/style/BaseStyle';
 
+export enum ButtonGroupClasses {
+    root = 'p-buttongroup'
+}
+
 export interface ButtonGroupStyle extends BaseStyle {}

components/lib/calendar/style/CalendarStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * Calendar also known as DatePicker, is a form component to work with dates.
+ *
+ * [Live Demo](https://www.primevue.org/datepicker/)
+ *
+ * @module calendarstyle
+ *
+ */
 import { DatePickerStyle } from '../../datepicker/style/DatePickerStyle';
 
+export enum CalendarClasses {}
+
 export interface CalendarStyle extends DatePickerStyle {}

components/lib/card/style/CardStyle.d.ts

@@ -1,3 +1,23 @@
+/**
+ *
+ * Card is a flexible container component.
+ *
+ * [Live Demo](https://www.primevue.org/card/)
+ *
+ * @module cardstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum CardClasses {
+    root = 'p-card',
+    header = 'p-card-header',
+    body = 'p-card-body',
+    caption = 'p-card-caption',
+    title = 'p-card-title',
+    subtitle = 'p-card-subtitle',
+    content = 'p-card-content',
+    footer = 'p-card-footer'
+}
+
 export interface CardStyle extends BaseStyle {}

components/lib/carousel/style/CarouselStyle.d.ts

@@ -1,3 +1,29 @@
+/**
+ *
+ * Carousel is a content slider featuring various customization options.
+ *
+ * [Live Demo](https://www.primevue.org/carousel/)
+ *
+ * @module carouselstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum CarouselClasses {
+    root = 'p-carousel',
+    header = 'p-carousel-header',
+    contentContainer = 'p-carousel-content-container',
+    content = 'p-carousel-content',
+    pcPreviousButton = 'p-carousel-prev-button',
+    viewport = 'p-carousel-viewport',
+    itemList = 'p-carousel-item-list',
+    itemClone = 'p-carousel-item-clone',
+    item = 'p-carousel-item',
+    pcNextButton = 'p-carousel-next-button',
+    indicatorList = 'p-carousel-indicator-list',
+    indicator = 'p-carousel-indicator',
+    indicatorButton = 'p-carousel-indicator-button',
+    footer = 'p-carousel-footer'
+}
+
 export interface CarouselStyle extends BaseStyle {}

components/lib/cascadeselect/style/CascadeSelectStyle.d.ts

@@ -1,3 +1,28 @@
+/**
+ *
+ * CascadeSelect is a form component to select a value from a nested structure of options.
+ *
+ * [Live Demo](https://www.primevue.org/cascadeselect/)
+ *
+ * @module cascadeselectstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum CascadeSelectClasses {
+    root = 'p-cascadeselect',
+    label = 'p-cascadeselect-label',
+    dropdown = 'p-cascadeselect-dropdown',
+    loadingIcon = 'p-cascadeselect-loading-icon',
+    dropdownIcon = 'p-cascadeselect-dropdown-icon',
+    overlay = 'p-cascadeselect-overlay',
+    listContainer = 'p-cascadeselect-list-container',
+    list = 'p-cascadeselect-list',
+    item = 'p-cascadeselect-item',
+    itemContent = 'p-cascadeselect-item-content',
+    itemText = 'p-cascadeselect-item-text',
+    groupIcon = 'p-cascadeselect-group-icon',
+    itemList = 'p-cascadeselect-item-list'
+}
+
 export interface CascadeSelectStyle extends BaseStyle {}

components/lib/chart/style/ChartStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * Chart groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/chart/)
+ *
+ * @module chartstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ChartClasses {
+    root = 'p-chart'
+}
+
 export interface ChartStyle extends BaseStyle {}

components/lib/checkbox/style/CheckboxStyle.d.ts

@@ -1,3 +1,19 @@
+/**
+ *
+ * Checkbox is an extension to standard checkbox element with theming.
+ *
+ * [Live Demo](https://www.primevue.org/checkbox/)
+ *
+ * @module checkboxstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum CheckboxClasses {
+    root = 'p-checkbox',
+    box = 'p-checkbox-box',
+    input = 'p-checkbox-input',
+    icon = 'p-checkbox-icon'
+}
+
 export interface CheckboxStyle extends BaseStyle {}

components/lib/chip/style/ChipStyle.d.ts

@@ -1,3 +1,20 @@
+/**
+ *
+ * Chip represents people using icons, labels and images.
+ *
+ * [Live Demo](https://www.primevue.org/chip)
+ *
+ * @module chipstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ChipClasses {
+    root = 'p-chip',
+    image = 'p-chip-image',
+    icon = 'p-chip-icon',
+    label = 'p-chip-label',
+    removeIcon = 'p-chip-remove-icon'
+}
+
 export interface ChipStyle extends BaseStyle {}

components/lib/chips/style/ChipsStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * Chips groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/inputchips/)
+ *
+ * @module chipsstyle
+ *
+ */
 import { InputChipsStyle } from '../../inputchips/style/InputChipsStyle';
 
+export enum ChipsClasses {}
+
 export interface ChipsStyle extends InputChipsStyle {}

components/lib/colorpicker/style/ColorPickerStyle.d.ts

@@ -1,3 +1,23 @@
+/**
+ *
+ * ColorPicker groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/colorpicker/)
+ *
+ * @module colorpickerstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ColorPickerClasses {
+    root = 'p-colorpicker',
+    preview = 'p-colorpicker-preview',
+    panel = 'p-colorpicker-panel',
+    colorSelector = 'p-colorpicker-color-selector',
+    colorBackground = 'p-colorpicker-color-background',
+    colorHandle = 'p-colorpicker-color-handle',
+    hue = 'p-colorpicker-hue',
+    hueHandle = 'p-colorpicker-hue-handle'
+}
+
 export interface ColorPickerStyle extends BaseStyle {}

components/lib/column/Column.d.ts

@@ -8,7 +8,6 @@
  * @module column
  *
  */
-
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';

components/lib/column/style/ColumnStyle.d.ts

@@ -1,3 +1,15 @@
+/**
+ *
+ * Column component defines various options to specify corresponding features.
+ * It is a helper component for DataTable and TreeTable.
+ *
+ * [Live Demo](https://www.primevue.org/datatable/)
+ *
+ * @module columnstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ColumnClasses {}
+
 export interface ColumnStyle extends BaseStyle {}

components/lib/columngroup/ColumnGroup.d.ts

@@ -1,9 +1,11 @@
 /**
+ *
  * Columns can be grouped at header and footer sections by defining a ColumnGroup component.
  * It is a helper component for DataTable.
  *
  * [Live Demo](https://www.primevue.org/datatable/)
  * @module columngroup
+ *
  */
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';

components/lib/columngroup/style/ColumnGroupStyle.d.ts

@@ -1,3 +1,15 @@
+/**
+ *
+ * Columns can be grouped at header and footer sections by defining a ColumnGroup component.
+ * It is a helper component for DataTable.
+ *
+ * [Live Demo](https://www.primevue.org/datatable/)
+ *
+ * @module columngroupstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ColumnGroupClasses {}
+
 export interface ColumnGroupStyle extends BaseStyle {}

components/lib/confirmdialog/style/ConfirmDialogStyle.d.ts

@@ -1,3 +1,20 @@
+/**
+ *
+ * ConfirmDialog uses a Dialog UI with confirmDialog method or <ConfirmDialog> tag.
+ *
+ * [Live Demo](https://www.primevue.org/confirmdialog)
+ *
+ * @module confirmdialogstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ConfirmDialogClasses {
+    root = 'p-confirmdialog',
+    icon = 'p-confirmdialog-icon',
+    message = 'p-confirmdialog-message',
+    pcRejectButton = 'p-confirmdialog-reject-button',
+    pcAcceptButton = 'p-confirmdialog-accept-button'
+}
+
 export interface ConfirmDialogStyle extends BaseStyle {}

components/lib/confirmpopup/style/ConfirmPopupStyle.d.ts

@@ -1,3 +1,22 @@
+/**
+ *
+ * ConfirmPopup displays a confirmation overlay displayed relatively to its target.
+ *
+ * [Live Demo](https://www.primevue.org/confirmpopup)
+ *
+ * @module confirmpopupstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ConfirmPopupClasses {
+    root = 'p-confirmpopup',
+    content = 'p-confirmpopup-content',
+    icon = 'p-confirmpopup-icon',
+    message = 'p-confirmpopup-message',
+    footer = 'p-confirmpopup-footer',
+    pcRejectButton = 'p-confirmpopup-reject-button',
+    pcAcceptButton = 'p-confirmpopup-accept-button'
+}
+
 export interface ConfirmPopupStyle extends BaseStyle {}

components/lib/contextmenu/style/ContextMenuStyle.d.ts

@@ -1,3 +1,26 @@
+/**
+ *
+ * ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu.
+ * Refer to documentation of the individual documentation of the with context menu support.
+ *
+ * [Live Demo](https://www.primevue.org/contextmenu/)
+ *
+ * @module contextmenustyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ContextMenuClasses {
+    root = 'p-contextmenu',
+    rootList = 'p-contextmenu-root-list',
+    item = 'p-contextmenu-item',
+    itemContent = 'p-contextmenu-item-content',
+    itemLink = 'p-contextmenu-item-link',
+    itemIcon = 'p-contextmenu-item-icon',
+    itemLabel = 'p-contextmenu-item-label',
+    submenuIcon = 'p-contextmenu-submenu-icon',
+    submenu = 'p-contextmenu-submenu',
+    separator = 'p-contextmenu-separator'
+}
+
 export interface ContextMenuStyle extends BaseStyle {}

components/lib/datatable/style/DataTableStyle.d.ts

@@ -1,3 +1,63 @@
+/**
+ *
+ * DataTable displays data in tabular format.
+ *
+ * [Live Demo](https://www.primevue.org/datatable/)
+ *
+ * @module datatablestyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum DataTableClasses {
+    root = 'p-datatable',
+    mask = 'p-datatable-mask',
+    loadingIcon = 'p-datatable-loading-icon',
+    header = 'p-datatable-header',
+    pcPaginator = 'p-datatable-paginator-[position]',
+    tableContainer = 'p-datatable-table-container',
+    table = 'p-datatable-table',
+    thead = 'p-datatable-thead',
+    columnResizer = 'p-datatable-column-resizer',
+    columnHeaderContent = 'p-datatable-column-header-content',
+    columnTitle = 'p-datatable-column-title',
+    sortIcon = 'p-datatable-sort-icon',
+    sortBadge = 'p-datatable-sort-badge',
+    filter = 'p-datatable-filter',
+    filterElementContainer = 'p-datatable-filter-element-container',
+    pcColumnFilterButton = 'p-datatable-column-filter-button',
+    pcColumnFilterClearButton = 'p-datatable-column-filter-clear-button',
+    filterOverlay = 'p-datatable-filter-overlay',
+    filterConstraintList = 'p-datatable-filter-constraint-list',
+    filterConstraint = 'p-datatable-filter-constraint',
+    filterConstraintSeparator = 'p-datatable-filter-constraint-separator',
+    filterOperator = 'p-datatable-filter-operator',
+    pcFilterOperatorDropdown = 'p-datatable-filter-operator-dropdown',
+    filterRuleList = 'p-datatable-filter-rule-list',
+    filterRule = 'p-datatable-filter-rule',
+    pcFilterConstraintDropdown = 'p-datatable-filter-constraint-dropdown',
+    pcFilterRemoveRuleButton = 'p-datatable-filter-remove-rule-button',
+    pcFilterAddButton = 'p-column-filter-add-button',
+    filterButtonbar = 'p-datatable-filter-buttonbar',
+    pcFilterClearButton = 'p-datatable-filter-clear-button',
+    pcFilterApplyButton = 'p-datatable-filter-apply-button',
+    tbody = 'p-datatable-tbody',
+    rowGroupHeader = 'p-datatable-row-group-header',
+    rowToggleButton = 'p-datatable-row-toggle-button',
+    rowToggleIcon = 'p-datatable-row-toggle-icon',
+    rowExpansion = 'p-datatable-row-expansion',
+    rowGroupFooter = 'p-datatable-row-group-footer',
+    emptyMessage = 'p-datatable-empty-message',
+    reorderableRowHandle = 'p-datatable-reorderable-row-handle',
+    pcRowEditorInit = 'p-datatable-row-editor-init',
+    pcRowEditorSave = 'p-datatable-row-editor-save',
+    pcRowEditorCancel = 'p-datatable-row-editor-cancel',
+    tfoot = 'p-datatable-tfoot',
+    virtualScrollerSpacer = 'p-datatable-virtualscroller-spacer',
+    footer = 'p-datatable-footer',
+    columnResizeIndicator = 'p-datatable-column-resize-indicator',
+    rowReorderIndicatorUp = 'p-datatable-row-reorder-indicator-up',
+    rowReorderIndicatorDown = 'p-datatable-row-reorder-indicator-down'
+}
+
 export interface DataTableStyle extends BaseStyle {}

components/lib/dataview/style/DataViewStyle.d.ts

@@ -1,3 +1,21 @@
+/**
+ *
+ * DataView displays data in grid or list layout with pagination and sorting features.
+ *
+ * [Live Demo](https://www.primevue.org/dataview/)
+ *
+ * @module dataviewstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum DataViewClasses {
+    root = 'p-dataview',
+    header = 'p-dataview-header',
+    pcPaginator = 'p-dataview-paginator-[position]',
+    content = 'p-dataview-content',
+    emptyMessage = 'p-dataview-empty-message', // TODO: remove?
+    footer = 'p-dataview-footer'
+}
+
 export interface DataViewStyle extends BaseStyle {}

components/lib/datepicker/style/DatePickerStyle.d.ts

@@ -1,3 +1,53 @@
+/**
+ *
+ * DatePicker is a form component to work with dates.
+ *
+ * [Live Demo](https://www.primevue.org/datepicker/)
+ *
+ * @module datepickerstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum DatePickerClasses {
+    root = 'p-datepicker',
+    pcInput = 'p-datepicker-input',
+    dropdown = 'p-datepicker-dropdown',
+    inputIconContainer = 'p-datepicker-input-icon-container',
+    inputIcon = 'p-datepicker-input-icon',
+    panel = 'p-datepicker-panel',
+    calendarContainer = 'p-datepicker-calendar-container',
+    calendar = 'p-datepicker-calendar',
+    header = 'p-datepicker-header',
+    pcPreviousButton = 'p-datepicker-prev-button',
+    title = 'p-datepicker-title',
+    viewMonth = 'p-datepicker-view-month',
+    viewYear = 'p-datepicker-view-year',
+    decade = 'p-datepicker-decade',
+    pcNextButton = 'p-datepicker-next-button',
+    dayView = 'p-datepicker-day-view',
+    weekHeader = 'p-datepicker-weekheader',
+    weekNumber = 'p-datepicker-weeknumber',
+    weekLabelContainer = 'p-disabled',
+    weekDayCell = 'p-datepicker-weekday-cell',
+    weekDay = 'p-date-picker-weekday',
+    dayCell = 'p-datepicker-day-cell',
+    day = 'p-datepicker-day',
+    monthView = 'p-datepicker-month-view',
+    month = 'p-datepicker-month',
+    yearView = 'p-datepicker-year-view',
+    year = 'p-datepicker-year',
+    timePicker = 'p-datepicker-time-picker',
+    hourPicker = 'p-datepicker-hour-picker',
+    pcIncrementButton = 'p-datepicker-increment-button',
+    pcDecrementButton = 'p-datepicker-decrement-button',
+    separator = 'p-datepicker-separator',
+    minutePicker = 'p-datepicker-minute-picker',
+    secondPicker = 'p-datepicker-second-picker',
+    ampmPicker = 'p-datepicker-ampm-picker',
+    buttonbar = 'p-datepicker-buttonbar',
+    pcTodayButton = 'p-datepicker-today-button',
+    pcClearButton = 'p-datepicker-clear-button'
+}
+
 export interface DatePickerStyle extends BaseStyle {}

components/lib/deferredcontent/style/DeferredContentStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.
+ *
+ * [Live Demo](https://www.primevue.org/deferredcontent/)
+ *
+ * @module deferredcontentstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum DeferredContentClasses {}
+
 export interface DeferredContentStyle extends BaseStyle {}

components/lib/dialog/style/DialogStyle.d.ts

@@ -1,3 +1,24 @@
+/**
+ *
+ * Dialog is a container to display content in an overlay window.
+ *
+ * [Live Demo](https://www.primevue.org/dialog)
+ *
+ * @module dialogstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum DialogClasses {
+    mask = 'p-dialog-mask',
+    root = 'p-dialog',
+    header = 'p-dialog-header',
+    title = 'p-dialog-title',
+    headerActions = 'p-dialog-header-actions',
+    pcMaximizeButton = 'p-dialog-maximize-button',
+    pcCloseButton = 'p-dialog-close-button',
+    content = 'p-dialog-content',
+    footer = 'p-dialog-footer'
+}
+
 export interface DialogStyle extends BaseStyle {}

components/lib/dialogservice/DialogService.d.ts

@@ -1,6 +1,7 @@
 /**
  *
  * [Live Demo](https://www.primevue.org/dynamicdialog/)
+ *
  * @module dialogservice-usedialog
  */
 import { Plugin } from 'vue';

components/lib/divider/style/DividerStyle.d.ts

@@ -1,3 +1,17 @@
+/**
+ *
+ * Divider is used to separate contents.
+ *
+ * [Live Demo](https://primevue.org/divider)
+ *
+ * @module dividerstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum DividerClasses {
+    root = 'p-divider',
+    content = 'p-divider-content'
+}
+
 export interface DividerStyle extends BaseStyle {}

components/lib/dock/style/DockStyle.d.ts

@@ -1,3 +1,22 @@
+/**
+ *
+ * Dock is a navigation component consisting of menuitems.
+ *
+ * [Live Demo](https://www.primevue.org/dock/)
+ *
+ * @module dockstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum DockClasses {
+    root = 'p-dock',
+    listContainer = 'p-dock-list-container',
+    list = 'p-dock-list',
+    item = 'p-dock-item',
+    itemContent = 'p-dock-item-content',
+    itemLink = 'p-dock-item-link',
+    itemIcon = 'p-dock-item-icon'
+}
+
 export interface DockStyle extends BaseStyle {}

components/lib/drawer/style/DrawerStyle.d.ts

@@ -1,3 +1,21 @@
+/**
+ *
+ * Drawer is a panel component displayed as an overlay at the edges of the screen.
+ *
+ * [Live Demo](https://primevue.org/drawer)
+ *
+ * @module drawerstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum DrawerClasses {
+    mask = 'p-drawer-mask',
+    root = 'p-drawer',
+    header = 'p-drawer-header',
+    title = 'p-drawer-title',
+    pcCloseButton = 'p-drawer-close-button',
+    content = 'p-drawer-content'
+}
+
 export interface DrawerStyle extends BaseStyle {}

components/lib/dropdown/style/DropdownStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * Dropdown also known as Select, is used to choose an item from a collection of options.
+ *
+ * [Live Demo](https://www.primevue.org/select/)
+ *
+ * @module dropdownstyle
+ *
+ */
 import { SelectStyle } from '../../select/style/SelectStyle';
 
+export enum DropdownClasses {}
+
 export interface DropdownStyle extends SelectStyle {}

components/lib/dynamicdialog/style/DynamicDialogStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * DynamicDialogs can be created dynamically with any component as the content using a DialogService.
+ *
+ * [Live Demo](https://primevue.org/dynamicdialog)
+ *
+ * @module dynamicdialogstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum DynamicDialogClasses {}
+
 export interface DynamicDialogStyle extends BaseStyle {}

components/lib/editor/style/EditorStyle.d.ts

@@ -1,3 +1,18 @@
+/**
+ *
+ * Editor groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/editor/)
+ *
+ * @module editorstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum EditorClasses {
+    root = 'p-editor',
+    toolbar = 'p-editor-toolbar',
+    content = 'p-editor-content'
+}
+
 export interface EditorStyle extends BaseStyle {}

components/lib/fieldset/style/FieldsetStyle.d.ts

@@ -1,3 +1,21 @@
+/**
+ *
+ * Fieldset is a grouping component with the optional content toggle feature.
+ *
+ * [Live Demo](https://www.primevue.org/fieldset/)
+ *
+ * @module fieldsetstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum FieldsetClasses {
+    root = 'p-fieldset',
+    legend = 'p-fieldset-legend',
+    legendLabel = 'p-fieldset-legend-label',
+    toggleIcon = 'p-fieldset-toggle-icon',
+    contentContainer = 'p-fieldset-content-container',
+    content = 'p-fieldset-content'
+}
+
 export interface FieldsetStyle extends BaseStyle {}

components/lib/fileupload/style/FileUploadStyle.d.ts

@@ -1,3 +1,30 @@
+/**
+ *
+ * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
+ *
+ * [Live Demo](https://www.primevue.org/fileupload/)
+ *
+ * @module fileuploadstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum FileUploadClasses {
+    root = 'p-fileupload',
+    header = 'p-fileupload-header',
+    pcChooseButton = 'p-fileupload-choose-button',
+    pcUploadButton = 'p-fileupload-upload-button',
+    pcCancelButton = 'p-fileupload-cancel-button',
+    content = 'p-fileupload-content',
+    fileList = 'p-fileupload-file-list',
+    file = 'p-fileupload-file',
+    fileThumbnail = 'p-fileupload-file-thumbnail',
+    fileInfo = 'p-fileupload-file-info',
+    fileName = 'p-fileupload-file-name',
+    fileSize = 'p-fileupload-file-size',
+    pcFileBadge = 'p-fileupload-file-badge',
+    fileActions = 'p-fileupload-file-actions',
+    pcFileRemoveButton = 'p-fileupload-file-remove-button'
+}
+
 export interface FileUploadStyle extends BaseStyle {}

components/lib/floatlabel/style/FloatLabelStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * FloatLabel appears on top of the input field when focused.
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ *
+ * @module floatlabelstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum FloatLabelClasses {
+    root = 'p-float-label'
+}
+
 export interface FloatLabelStyle extends BaseStyle {}

components/lib/focustrap/FocusTrap.d.ts

@@ -5,6 +5,7 @@
  * [Live Demo](https://primevue.org/focustrap)
  *
  * @module focustrap
+ *
  */
 import { DirectiveBinding, ObjectDirective } from 'vue';
 import { DirectiveHooks } from '../basedirective';

components/lib/focustrap/style/FocusTrapStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * Focus Trap keeps focus within a certain DOM element while tabbing.
+ *
+ * [Live Demo](https://primevue.org/focustrap)
+ *
+ * @module focustrapstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum FocusTrapClasses {}
+
 export interface FocusTrapStyle extends BaseStyle {}

components/lib/galleria/style/GalleriaStyle.d.ts

@@ -1,3 +1,43 @@
+/**
+ *
+ * Galleria is an advanced content gallery component.
+ *
+ * [Live Demo](https://www.primevue.org/galleria/)
+ *
+ * @module galleriastyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum GalleriaClasses {
+    mask = 'p-galleria-mask',
+    root = 'p-galleria',
+    closeButton = 'p-galleria-close-button',
+    closeIcon = 'p-galleria-close-icon',
+    header = 'p-galleria-header',
+    content = 'p-galleria-content',
+    footer = 'p-galleria-footer',
+    itemsContainer = 'p-galleria-items-container',
+    items = 'p-galleria-items',
+    previousItemButton = 'p-galleria-prev-button',
+    previousItemIcon = 'p-galleria-prev-icon',
+    item = 'p-galleria-item',
+    nextItemButton = 'p-galleria-next-button',
+    nextItemIcon = 'p-galleria-next-icon',
+    caption = 'p-galleria-caption',
+    indicatorList = 'p-galleria-indicator-list',
+    indicator = 'p-galleria-indicator',
+    indicatorButton = 'p-galleria-indicator-button',
+    thumbnails = 'p-galleria-thumbnails',
+    thumbnailContent = 'p-galleria-thumbnails-content',
+    previousThumbnailButton = 'p-galleria-thumbnail-prev-button',
+    previousThumbnailIcon = 'p-galleria-thumbnail-prev-icon',
+    thumbnailsViewport = 'p-galleria-thumbnails-viewport',
+    thumbnailItems = 'p-galleria-thumbnail-items',
+    thumbnailItem = 'p-galleria-thumbnail-item',
+    thumbnail = 'p-galleria-thumbnail',
+    nextThumbnailButton = 'p-galleria-thumbnail-next-button',
+    nextThumbnailIcon = 'p-galleria-thumbnail-next-icon'
+}
+
 export interface GalleriaStyle extends BaseStyle {}

components/lib/iconfield/style/IconField.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * IconField wraps an input and an icon.
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ *
+ * @module iconfieldstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum IconFieldClasses {
+    root = 'p-iconfield'
+}
+
 export interface IconFieldStyle extends BaseStyle {}

components/lib/image/style/ImageStyle.d.ts

@@ -1,3 +1,26 @@
+/**
+ *
+ * Displays an image with preview and tranformation options. For multiple image, see Galleria.
+ *
+ * [Live Demo](https://www.primevue.org/image/)
+ *
+ * @module imagestyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ImageClasses {
+    root = 'p-image',
+    previewMask = 'p-image-preview-mask',
+    previewIcon = 'p-image-preview-icon',
+    mask = 'p-image-mask',
+    toolbar = 'p-image-toolbar',
+    rotateRightButton = 'p-image-rotate-right-button',
+    rotateLeftButton = 'p-image-rotate-left-button',
+    zoomOutButton = 'p-image-zoom-out-button',
+    zoomInButton = 'p-image-zoom-in-button',
+    closeButton = 'p-image-close-button',
+    original = 'p-image-original'
+}
+
 export interface ImageStyle extends BaseStyle {}

components/lib/inlinemessage/style/InlineMessageStyle.d.ts

@@ -1,3 +1,18 @@
+/**
+ *
+ * InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, severity of the message.
+ *
+ * [Live Demo](https://www.primevue.org/inlinemessage/)
+ *
+ * @module inlinemessagestyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum InlineMessageClasses {
+    root = 'p-inline-message',
+    icon = 'p-inline-message-icon',
+    text = 'p-inline-message-text'
+}
+
 export interface InlineMessageStyle extends BaseStyle {}

components/lib/inplace/Inplace.d.ts

@@ -7,7 +7,6 @@
  * @module inplace
  *
  */
-
 import { HTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';

components/lib/inplace/style/InplaceStyle.d.ts

@@ -1,3 +1,18 @@
+/**
+ *
+ * Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
+ *
+ * [Live Demo](https://www.primevue.org/inplace)
+ *
+ * @module inplacestyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum InplaceClasses {
+    root = 'p-inplace',
+    display = 'p-inplace-display',
+    content = 'p-inplace-content'
+}
+
 export interface InplaceStyle extends BaseStyle {}

components/lib/inputchips/style/InputChipsStyle.d.ts

@@ -1,3 +1,21 @@
+/**
+ *
+ * InputChips groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/inputchips/)
+ *
+ * @module inputchipsstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum InputChipsClasses {
+    root = 'p-inputchips',
+    input = 'p-inputchips-input',
+    chip = 'p-inputchips-chip',
+    pcChipLabel = 'p-inputchips-chip-label',
+    chipIcon = 'p-inputchips-chip-icon',
+    inputItem = 'p-inputchips-input-item'
+}
+
 export interface InputChipsStyle extends BaseStyle {}

components/lib/inputgroup/style/InputGroupStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * InputGroup displays text, icon, buttons and other content can be grouped next to an input.
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ *
+ * @module inputgroupstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum InputGroupClasses {
+    root = 'p-inputgroup'
+}
+
 export interface InputGroupStyle extends BaseStyle {}

components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input.
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ *
+ * @module inputgroupaddonstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum InputGroupAddonClasses {
+    root = 'p-inputgroup-addon'
+}
+
 export interface InputGroupAddonStyle extends BaseStyle {}

components/lib/inputicon/style/InputIconStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * InputIcon displays an icon.
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ *
+ * @module inputiconstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum InputIconClasses {
+    root = 'p-inputicon'
+}
+
 export interface InputIconStyle extends BaseStyle {}

components/lib/inputmask/style/InputMaskStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.
+ *
+ * [Live Demo](https://www.primevue.org/inputmask/)
+ *
+ * @module inputmaskstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum InputMaskClasses {
+    root = 'p-inputmask'
+}
+
 export interface InputMaskStyle extends BaseStyle {}

components/lib/inputnumber/style/InputNumberStyle.d.ts

@@ -1,3 +1,20 @@
+/**
+ *
+ * InputNumber is an input component to provide numerical input.
+ *
+ * [Live Demo](https://www.primevue.org/inputnumber/)
+ *
+ * @module inputnumberstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum InputNumberClasses {
+    root = 'p-inputnumber',
+    pcInput = 'p-inputnumber-input',
+    buttonGroup = 'p-inputnumber-button-group',
+    incrementButton = 'p-inputnumber-increment-button',
+    decrementButton = 'p-inputnumber-decrement-button'
+}
+
 export interface InputNumberStyle extends BaseStyle {}

components/lib/inputotp/style/InputOtpStyle.d.ts

@@ -1,3 +1,17 @@
+/**
+ *
+ * InputOtp is used to enter one time passwords.
+ *
+ * [Live Demo](https://www.primevue.org/inputotp/)
+ *
+ * @module inputotpstyle
+ *
+ */
 import { BaseStyle } from '../../base/style/BaseStyle';
 
+export enum InputOtpClasses {
+    root = 'p-inputotp',
+    pcInput = 'p-inputotp-input'
+}
+
 export interface InputOtpStyle extends BaseStyle {}

components/lib/inputswitch/style/InputSwitchStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * InputSwitch is used to select a boolean value.
+ *
+ * [Live Demo](https://www.primevue.org/toggleswitch/)
+ *
+ * @module inputswitchstyle
+ *
+ */
 import { ToggleSwitchStyle } from '../../toggleswitch/style/ToggleSwitchStyle';
 
+export enum InputSwitchClasses {}
+
 export interface InputSwitchStyle extends ToggleSwitchStyle {}

components/lib/inputtext/style/InputTextStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * InputText renders a text field to enter data.
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ *
+ * @module inputtext
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum InputTextClasses {
+    root = 'p-inputtext'
+}
+
 export interface InputTextStyle extends BaseStyle {}

components/lib/knob/style/KnobStyle.d.ts

@@ -1,3 +1,19 @@
+/**
+ *
+ * Knob is a form component to define number inputs with a dial.
+ *
+ * [Live Demo](https://www.primevue.org/knob/)
+ *
+ * @module knobstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum KnobClasses {
+    root = 'p-knob',
+    range = 'p-knob-range',
+    value = 'p-knob-value',
+    text = 'p-knob-text'
+}
+
 export interface KnobStyle extends BaseStyle {}

components/lib/listbox/style/ListboxStyle.d.ts

@@ -1,3 +1,23 @@
+/**
+ *
+ * ListBox is used to select one or more values from a list of items.
+ *
+ * [Live Demo](https://www.primevue.org/listbox/)
+ *
+ * @module listboxstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ListboxClasses {
+    root = 'p-listbox',
+    header = 'p-listbox-header',
+    pcFilter = 'p-listbox-filter',
+    listContainer = 'p-listbox-list-container',
+    list = 'p-listbox-list',
+    optionGroup = 'p-listbox-option-group',
+    option = 'p-listbox-option',
+    emptyMessage = 'p-listbox-empty-message'
+}
+
 export interface ListboxStyle extends BaseStyle {}

components/lib/megamenu/style/MegaMenuStyle.d.ts

@@ -1,3 +1,32 @@
+/**
+ *
+ * MegaMenu is navigation component that displays submenus together.
+ *
+ * [Live Demo](https://www.primevue.org/megamenu/)
+ *
+ * @module megamenustyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum MegaMenuClasses {
+    root = 'p-megamenu',
+    start = 'p-megamenu-start',
+    button = 'p-megamenu-button',
+    rootList = 'p-megamenu-root-list',
+    submenuItem = 'p-megamenu-submenu-item',
+    item = 'p-megamenu-item',
+    itemContent = 'p-megamenu-item-content',
+    itemLink = 'p-megamenu-item-link',
+    itemIcon = 'p-megamenu-item-icon',
+    itemLabel = 'p-megamenu-item-label',
+    submenuIcon = 'p-megamenu-submenu-icon',
+    panel = 'p-megamenu-panel',
+    grid = 'p-megamenu-grid',
+    submenu = 'p-megamenu-submenu',
+    submenuItemLabel = 'p-megamenu-submenu-item-label',
+    separator = 'p-megamenu-separator',
+    end = 'p-megamenu-end'
+}
+
 export interface MegaMenuStyle extends BaseStyle {}

components/lib/menu/style/MenuStyle.d.ts

@@ -1,3 +1,26 @@
+/**
+ *
+ * Menu is a navigation / command component that supports dynamic and static positioning.
+ *
+ * [Live Demo](https://www.primevue.org/menu/)
+ *
+ * @module menustyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum MenuClasses {
+    root = 'p-menu',
+    start = 'p-menu-start',
+    list = 'p-menu-list',
+    submenuItem = 'p-menu-submenu-item',
+    separator = 'p-menu-separator',
+    end = 'p-menu-end',
+    item = 'p-menu-item',
+    itemContent = 'p-menu-item-content',
+    itemLink = 'p-menu-item-link',
+    itemIcon = 'p-menu-item-icon',
+    itemLabel = 'p-menu-item-label'
+}
+
 export interface MenuStyle extends BaseStyle {}

components/lib/menubar/style/MenubarStyle.d.ts

@@ -1,3 +1,28 @@
+/**
+ *
+ * Menubar is a horizontal menu component.
+ *
+ * [Live Demo](https://www.primevue.org/menubar/)
+ *
+ * @module menubarstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum MenubarClasses {
+    root = 'p-menubar',
+    start = 'p-menubar-start',
+    button = 'p-menubar-button',
+    rootList = 'p-menubar-root-list',
+    item = 'p-menubar-item',
+    itemContent = 'p-menubar-item-content',
+    itemLink = 'p-menubar-item-link',
+    itemIcon = 'p-menubar-item-icon',
+    itemLabel = 'p-menubar-item-label',
+    submenuIcon = 'p-menubar-submenu-icon',
+    submenu = 'p-menubar-submenu',
+    separator = 'p-menubar-separator',
+    end = 'p-menubar-end'
+}
+
 export interface MenubarStyle extends BaseStyle {}

components/lib/message/style/MessageStyle.d.ts

@@ -1,3 +1,21 @@
+/**
+ *
+ * Message groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/message/)
+ *
+ * @module messagestyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum MessageClasses {
+    root = 'p-message',
+    content = 'p-message-content',
+    icon = 'p-message-icon',
+    text = 'p-message-text',
+    closeButton = 'p-message-close-button',
+    closeIcon = 'p-message-close-icon'
+}
+
 export interface MessageStyle extends BaseStyle {}

components/lib/metergroup/MeterGroup.d.ts

@@ -7,7 +7,6 @@
  * @module metergroup
  *
  */
-
 import { VNode } from 'vue';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';

components/lib/metergroup/style/MeterGroupStyle.d.ts

@@ -1,3 +1,23 @@
+/**
+ *
+ * MeterGroup is a group of process status indicators.
+ *
+ * [Live Demo](https://primevue.org/metergroup)
+ *
+ * @module metergroupstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum MeterGroupClasses {
+    root = 'p-metergroup',
+    meters = 'p-metergroup-meters',
+    meter = 'p-metergroup-meter',
+    labelList = 'p-metergroup-label-list',
+    label = 'p-metergroup-label',
+    labelIcon = 'p-metergroup-label-icon',
+    labelMarker = 'p-metergroup-label-marker',
+    labelText = 'p-metergroup-label-text'
+}
+
 export interface MeterGroupStyle extends BaseStyle {}

components/lib/multiselect/style/MultiSelectStyle.d.ts

@@ -1,3 +1,33 @@
+/**
+ *
+ * MultiSelect is used to select multiple items from a collection.
+ *
+ * [Live Demo](https://www.primevue.org/multiselect/)
+ *
+ * @module multiselectstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum MultiSelectClasses {
+    root = 'p-multiselect',
+    labelContainer = 'p-multiselect-label-container',
+    label = 'p-multiselect-label',
+    chip = 'p-multiselect-chip',
+    pcChipLabel = 'p-multiselect-chip-label',
+    chipIcon = 'p-multiselect-chip-icon',
+    dropdown = 'p-multiselect-dropdown',
+    loadingIcon = 'p-multiselect-loading-icon',
+    dropdownIcon = 'p-multiselect-dropdown-icon',
+    overlay = 'p-multiselect-overlay',
+    header = 'p-multiselect-header',
+    pcFilterContainer = 'p-multiselect-filter-container',
+    pcFilter = 'p-multiselect-filter',
+    listContainer = 'p-multiselect-list-container',
+    list = 'p-multiselect-list',
+    optionGroup = 'p-multiselect-option-group',
+    option = 'p-multiselect-option',
+    emptyMessage = 'p-multiselect-empty-message'
+}
+
 export interface MultiSelectStyle extends BaseStyle {}

components/lib/orderlist/style/OrderListStyle.d.ts

@@ -1,3 +1,17 @@
+/**
+ *
+ * OrderList is used to managed the order of a collection.
+ *
+ * [Live Demo](https://primevue.org/orderlist)
+ *
+ * @module orderliststyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum OrderListClasses {
+    root = 'p-orderlist',
+    controls = 'p-orderlist-controls'
+}
+
 export interface OrderListStyle extends BaseStyle {}

components/lib/organizationchart/style/OrganizationChartStyle.d.ts

@@ -1,3 +1,25 @@
+/**
+ *
+ * OrganizationChart visualizes hierarchical organization data.
+ *
+ * [Live Demo](https://primevue.org/organizationchart)
+ *
+ * @module organizationchartstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum OrganizationChartClasses {
+    root = 'p-organizationchart',
+    table = 'p-organizationchart-table',
+    node = 'p-organizationchart-node',
+    nodeToggleButton = 'p-organizationchart-node-toggle-button',
+    nodeToggleButtonIcon = 'p-organizationchart-node-toggle-button-icon',
+    connectors = 'p-organizationchart-connectors',
+    connectorDown = 'p-organizationchart-connector-down',
+    connectorLeft = 'p-organizationchart-connector-left',
+    connectorRight = 'p-organizationchart-connector-right',
+    nodeChildren = 'p-organizationchart-node-children'
+}
+
 export interface OrganizationChartStyle extends BaseStyle {}

components/lib/overlaypanel/style/OverlayPanelStyle.d.ts

@@ -1,3 +1,12 @@
+/**
+ *
+ * OverlayPanel is a container component positioned as connected to its target.
+ *
+ * [Live Demo](https://primevue.org/popover)
+ *
+ * @module overlaypanelstyle
+ *
+ */
 import { PopoverStyle } from '../../popover/style/PopoverStyle';
 
 export interface OverlayPanelStyle extends PopoverStyle {}

components/lib/paginator/style/PaginatorStyle.d.ts

@@ -1,3 +1,32 @@
+/**
+ *
+ * Paginator is a generic component to display content in paged format.
+ *
+ * [Live Demo](https://primevue.org/paginator)
+ *
+ * @module paginatorstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum PaginatorClasses {
+    paginator = 'p-paginator',
+    contentStart = 'p-paginator-content-start',
+    contentEnd = 'p-paginator-content-end',
+    first = 'p-paginator-first',
+    firstIcon = 'p-paginator-first-icon',
+    prev = 'p-paginator-prev',
+    prevIcon = 'p-paginator-prev-icon',
+    next = 'p-paginator-next',
+    nextIcon = 'p-paginator-next-icon',
+    last = 'p-paginator-last',
+    lastIcon = 'p-paginator-last-icon',
+    pages = 'p-paginator-pages',
+    page = 'p-paginator-page',
+    current = 'p-paginator-current',
+    pcRowPerPageDropdown = 'p-paginator-rpp-dropdown',
+    pcJumpToPageDropdown = 'p-paginator-jtp-dropdown',
+    pcJumpToPageInput = 'p-paginator-jtp-input'
+}
+
 export interface PaginatorStyle extends BaseStyle {}

components/lib/panel/style/PanelStyle.d.ts

@@ -1,3 +1,23 @@
+/**
+ *
+ * Panel is a container with the optional content toggle feature.
+ *
+ * [Live Demo](https://www.primevue.org/panel/)
+ *
+ * @module panelstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum PanelClasses {
+    root = 'p-panel',
+    header = 'p-panel-header',
+    title = 'p-panel-title',
+    headerActions = 'p-panel-header-actions',
+    pcToggleButton = 'p-panel-toggle-button',
+    contentContainer = 'p-panel-content-container',
+    content = 'p-panel-content',
+    footer = 'p-panel-footer'
+}
+
 export interface PanelStyle extends BaseStyle {}

components/lib/panelmenu/style/PanelMenuStyle.d.ts

@@ -1,3 +1,33 @@
+/**
+ *
+ * PanelMenu is a hybrid of Accordion and Tree components.
+ *
+ * [Live Demo](https://www.primevue.org/panelmenu/)
+ *
+ * @module panelmenustyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum PanelMenuClasses {
+    root = 'p-panelmenu',
+    panel = 'p-panelmenu-panel',
+    header = 'p-panelmenu-header',
+    headerContent = 'p-panelmenu-header-content',
+    headerLink = 'p-panelmenu-header-link',
+    headerIcon = 'p-panelmenu-header-icon',
+    headerLabel = 'p-panelmenu-header-label',
+    contentContainer = 'p-panelmenu-content-container',
+    content = 'p-panelmenu-content',
+    rootList = 'p-panelmenu-root-list',
+    item = 'p-panelmenu-item',
+    itemContent = 'p-panelmenu-item-content',
+    itemLink = 'p-panelmenu-item-link',
+    itemIcon = 'p-panelmenu-item-icon',
+    itemLabel = 'p-panelmenu-item-label',
+    submenuIcon = 'p-panelmenu-submenu-icon',
+    submenu = 'p-panelmenu-submenu',
+    separator = 'p-menuitem-separator'
+}
+
 export interface PanelMenuStyle extends BaseStyle {}

components/lib/password/style/PasswordStyle.d.ts

@@ -1,3 +1,23 @@
+/**
+ *
+ * Password displays strength indicator for password fields.
+ *
+ * [Live Demo](https://www.primevue.org/password/)
+ *
+ * @module passwordstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum PasswordClasses {
+    root = 'p-password',
+    ptInput = 'p-password-input',
+    maskIcon = 'p-password-mask-icon',
+    unmaskIcon = 'p-password-unmask-icon',
+    overlay = 'p-password-overlay',
+    meter = 'p-password-meter',
+    meterLabel = 'p-password-meter-label',
+    meterText = 'p-password-meter-text'
+}
+
 export interface PasswordStyle extends BaseStyle {}

components/lib/password/style/PasswordStyle.js

@@ -11,17 +11,16 @@ const theme = ({ dt }) => `
 }
 
 .p-password-meter {
-    height: 10px;
-    margin-bottom: 0.75rem;
+    height: ${dt('password.meter.height')};
     background: ${dt('password.meter.border.color')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('password.meter.border.radius')};
 }
 
 .p-password-meter-label {
     height: 100%;
     width: 0;
     transition: width 1s ease-in-out;
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('password.meter.border.radius')};
 }
 
 .p-password-meter-weak {
@@ -46,26 +45,29 @@ const theme = ({ dt }) => `
 }
 
 .p-password-overlay {
-    padding: 0.75rem;
+    padding: ${dt('password.overlay.padding')};
     background: ${dt('password.overlay.background')};
     color: ${dt('password.overlay.color')};
     border: 1px solid ${dt('password.overlay.border.color')};
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    border-radius: ${dt('border.radius.md')};
+    box-shadow: ${dt('password.overlay.shadow')};
+    border-radius: ${dt('password.overlay.border.radius')};
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('password.overlay.gap')}
 }
 
 .p-password-toggle-mask-icon {
-    right: 0.75rem;
+    right: ${dt('form.field.padding.x')};
     color: ${dt('password.icon.color')};
     position: absolute;
     top: 50%;
-    margin-top: -0.5rem;
-    width: 1rem;
-    height: 1rem;
+    margin-top: calc(-1 * calc(${dt('icon.size')} / 2));
+    width: ${dt('icon.size')};
+    height: ${dt('icon.size')};
 }
 
 .p-password:has(.p-password-toggle-mask-icon) .p-password-input {
-    padding-right: 2.5rem;
+    padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
 }
 `;
 

components/lib/picklist/style/PickListStyle.d.ts

@@ -1,3 +1,21 @@
+/**
+ *
+ * PickList is used to reorder items between different lists.
+ *
+ * [Live Demo](https://primevue.org/picklist)
+ *
+ * @module pickliststyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum PickListClasses {
+    root = 'p-picklist',
+    sourceControls = 'p-picklist-source-controls',
+    sourceListContainer = 'p-picklist-source-list-container',
+    transferControls = 'p-picklist-transfer-controls',
+    targetListContainer = 'p-picklist-target-list-container',
+    targetControls = 'p-picklist-target-controls'
+}
+
 export interface PickListStyle extends BaseStyle {}

components/lib/popover/style/PopoverStyle.d.ts

@@ -1,3 +1,17 @@
+/**
+ *
+ * Popover is a container component positioned as connected to its target.
+ *
+ * [Live Demo](https://primevue.org/popover)
+ *
+ * @module popoverstyle
+ *
+ */
 import { BaseStyle } from '../../base/style/BaseStyle';
 
+export enum PopoverClasses {
+    root = 'p-popover',
+    content = 'p-popover-content'
+}
+
 export interface PopoverStyle extends BaseStyle {}

components/lib/portal/style/PortalStyle.d.ts

@@ -1,3 +1,12 @@
+/**
+ *
+ * [Live Demo](https://primevue.org/)
+ *
+ * @module portalstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum PortalClasses {}
+
 export interface PortalStyle extends BaseStyle {}

components/lib/progressbar/style/ProgressBarStyle.d.ts

@@ -1,3 +1,19 @@
+/**
+ *
+ * ProgressBar is a process status indicator.
+ *
+ * [Live Demo](https://www.primevue.org/progressbar)
+ *
+ * @module progressbarstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ProgressBarClasses {
+    root = 'p-progressbar',
+    indeterminateContainer = 'p-progressbar-indeterminate-container',
+    value = 'p-progressbar-value',
+    label = 'p-progressbar-label'
+}
+
 export interface ProgressBarStyle extends BaseStyle {}

components/lib/progressspinner/style/ProgressSpinnerStyle.d.ts

@@ -1,3 +1,18 @@
+/**
+ *
+ * ProgressSpinner is a process status indicator.
+ *
+ * [Live Demo](https://www.primevue.org/progressspinner)
+ *
+ * @module progressspinnerstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ProgressSpinnerClasses {
+    root = 'p-progressspinner',
+    spin = 'p-progressspinner-spin',
+    circle = 'p-progressspinner-circle'
+}
+
 export interface ProgressSpinnerStyle extends BaseStyle {}

components/lib/radiobutton/style/RadioButtonStyle.d.ts

@@ -1,3 +1,19 @@
+/**
+ *
+ * RadioButton is an extension to standard radio button element with theming.
+ *
+ * [Live Demo](https://www.primevue.org/radiobutton/)
+ *
+ * @module radiobuttonstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum RadioButtonClasses {
+    root = 'p-radiobutton',
+    box = 'p-radiobutton-box',
+    input = 'p-radiobutton-input',
+    icon = 'p-radiobutton-icon'
+}
+
 export interface RadioButtonStyle extends BaseStyle {}

components/lib/rating/style/RatingStyle.d.ts

@@ -1,3 +1,19 @@
+/**
+ *
+ * Rating component is a star based selection input.
+ *
+ * [Live Demo](https://www.primevue.org/rating/)
+ *
+ * @module ratingstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum RatingClasses {
+    root = 'p-rating',
+    option = 'p-rating-option',
+    onIcon = 'p-rating-on-icon',
+    offIcon = 'p-rating-off-icon'
+}
+
 export interface RatingStyle extends BaseStyle {}

components/lib/ripple/Ripple.d.ts

@@ -5,6 +5,7 @@
  * [Live Demo](https://primevue.org/ripple)
  *
  * @module ripple
+ *
  */
 import { DirectiveBinding, ObjectDirective } from 'vue';
 import { DirectiveHooks } from '../basedirective';

components/lib/ripple/style/RippleStyle.d.ts

@@ -1,3 +1,16 @@
+/**
+ *
+ * Ripple directive adds ripple effect to the host element.
+ *
+ * [Live Demo](https://primevue.org/ripple)
+ *
+ * @module ripplestyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
-export interface AccordionStyle extends BaseStyle {}
+export enum RippleClasses {
+    root = 'p-ink'
+}
+
+export interface RippleStyle extends BaseStyle {}

components/lib/row/Row.d.ts

@@ -1,9 +1,11 @@
 /**
+ *
  * Row component is a helper component used to create grouping structures in DataTable.
  *
  * [Live Demo](https://www.primevue.org/datatable/)
  *
  * @module row
+ *
  */
 import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';

components/lib/row/style/RowStyle.d.ts

@@ -1,3 +1,14 @@
+/**
+ *
+ * Row component is a helper component used to create grouping structures in DataTable.
+ *
+ * [Live Demo](https://www.primevue.org/datatable/)
+ *
+ * @module rowstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum RowClasses {}
+
 export interface RowStyle extends BaseStyle {}

components/lib/scrollpanel/style/ScrollPanelStyle.d.ts

@@ -1,3 +1,20 @@
+/**
+ *
+ * ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.
+ *
+ * [Live Demo](https://www.primevue.org/scrollpanel/)
+ *
+ * @module scrollpanelstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ScrollPanelClasses {
+    root = 'p-scrollpanel',
+    contentContainer = 'p-scrollpanel-content-container',
+    content = 'p-scrollpanel-content',
+    barX = 'p-scrollpanel-bar-x',
+    barY = 'p-scrollpanel-bar-y'
+}
+
 export interface ScrollPanelStyle extends BaseStyle {}

components/lib/scrolltop/style/ScrollTopStyle.d.ts

@@ -1,3 +1,17 @@
+/**
+ *
+ * ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.
+ *
+ * [Live Demo](https://www.primevue.org/scrolltop/)
+ *
+ * @module scrolltopstyle
+ *
+ */
 import { BaseStyle } from '../../base/style';
 
+export enum ScrollTopClasses {
+    root = 'p-scrolltop',
+    icon = 'p-scrolltop-icon'
+}
+
 export interface ScrollTopStyle extends BaseStyle {}