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

CHANGELOG.md

@@ -1,11 +1,74 @@
 # Changelog
 
+## [3.40.1](https://github.com/primefaces/primevue/tree/3.40.1) (2023-11-09)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.40.0...3.40.1)
+
+**Fixed bugs:**
+
+-   InputGroupAddon esm broken [\#4788](https://github.com/primefaces/primevue/issues/4788)
+
+## [3.40.0](https://github.com/primefaces/primevue/tree/3.40.0) (2023-11-09)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.39.0...3.40.0)
+
+**Breaking Changes:**
+
+-   AccordionTab: isTabActive property is deprecated [\#4783](https://github.com/primefaces/primevue/issues/4783)
+-   Remove vue-router support from Menu components [\#4739](https://github.com/primefaces/primevue/issues/4739)
+-   Tooltip: escape should be false by default [\#4738](https://github.com/primefaces/primevue/issues/4738)
+
+**Fixed bugs:**
+
+-   DataTable/TreeTable: Frozen column improvements [\#4786](https://github.com/primefaces/primevue/issues/4786)
+-   Table row is not highlighted with context menu [\#4785](https://github.com/primefaces/primevue/issues/4785)
+-   core: Error BaseStyle\_\_default.default is undefined [\#4648](https://github.com/primefaces/primevue/issues/4648)
+-   DataTable: editingRows watcher implementation defect [\#4757](https://github.com/primefaces/primevue/issues/4757)
+-   MultiSelect Name: prop overshadowing [\#4743](https://github.com/primefaces/primevue/issues/4743)
+-   SpeedDial: unstyled implementation defect breaks the calculations [\#4740](https://github.com/primefaces/primevue/issues/4740)
+-   Tooltip: autoHide does not work properly [\#4737](https://github.com/primefaces/primevue/issues/4737)
+-   Calendar: Console.Error/Crash when pressing Escape key using Inline Calendar [\#4732](https://github.com/primefaces/primevue/issues/4732)
+-   Calendar does not show the right month (for the minimal departure date) when it's dynamically set [\#4157](https://github.com/primefaces/primevue/issues/4157)
+
+**Implemented New Features and Enhancements:**
+
+-   Collision Enhancements [\#4784](https://github.com/primefaces/primevue/issues/4784)
+-   TabMenu/Steps: active option for item templating [\#4780](https://github.com/primefaces/primevue/issues/4780)
+-   PanelMenu: root option for item templating [\#4779](https://github.com/primefaces/primevue/issues/4779)
+-   Steps: new activeStep property [\#4778](https://github.com/primefaces/primevue/issues/4778)
+-   ContextMenu: hasSubmenu options for item templating [\#4764](https://github.com/primefaces/primevue/issues/4764)
+-   TieredMenu: New start and end templating [\#4760](https://github.com/primefaces/primevue/issues/4760)
+-   PanelMenu: active options for item templating [\#4750](https://github.com/primefaces/primevue/issues/4750)
+-   New InputGroup Component [\#4742](https://github.com/primefaces/primevue/issues/4742)
+
+## [3.39.0](https://github.com/primefaces/primevue/tree/3.39.0) (2023-11-01)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.38.1...3.39.0)
+
+**Breaking Changes:**
+
+-   Change slot parameter function name on* to *CallBack [\#4728](https://github.com/primefaces/primevue/issues/4728)
+
+**Fixed bugs:**
+
+-   ConfirmPopup: arrow defect [\#4730](https://github.com/primefaces/primevue/issues/4730)
+-   Overlaypanel: Overlaypanel closes when any key is pressed [\#4712](https://github.com/primefaces/primevue/issues/4712)
+-   Steps: Property 'step' does not exist on type 'StepsRouterBindProps'. [\#4703](https://github.com/primefaces/primevue/issues/4703)
+-   Datatable: Cannot set properties of null (setting 'tabIndex') [\#4498](https://github.com/primefaces/primevue/issues/4498)
+-   Menubar: Custom locale config overwriting default untouched config properties [\#4270](https://github.com/primefaces/primevue/issues/4270)
+
+**Implemented New Features and Enhancements:**
+
+-   SplitButton: new buttoncontent and item slots [\#4729](https://github.com/primefaces/primevue/issues/4729)
+-   Datatable: Lara Dark Theme Color Inconsistencies [\#4714](https://github.com/primefaces/primevue/issues/4714)
+
 ## [3.38.1](https://github.com/primefaces/primevue/tree/3.38.1) (2023-10-26)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.38.0...3.38.1)
 
 **Fixed bugs:**
-- The package was not published correctly [\#4697](https://github.com/primefaces/primevue/issues/4697)
+
+-   The package was not published correctly [\#4697](https://github.com/primefaces/primevue/issues/4697)
 
 ## [3.38.0](https://github.com/primefaces/primevue/tree/3.38.0) (2023-10-26)
 

api-generator/build-apidoc.js

@@ -398,7 +398,11 @@ if (project) {
                                                             functionParameters += `<span class="text-primary-700">${param.name}</span>: ${param.type?.name}`;
                                                         });
 
-                                                        type += `\t <span class="ml-3 text-primary-700">${child.name}</span>: <span class="text-primary-500">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-primary-300">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
+                                                        if (child.type?.declaration?.signatures[0]?.comment?.getTag('@deprecated')?.content[0]?.text) {
+                                                            type += `\t <span class="ml-3 text-primary-700 line-through">${child.name}</span>: <span class="text-primary-500 line-through">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-primary-300 line-through">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
+                                                        } else {
+                                                            type += `\t <span class="ml-3 text-primary-700">${child.name}</span>: <span class="text-primary-500">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-primary-300">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
+                                                        }
                                                     } else {
                                                         const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
 

api-generator/components/breadcrumb.js

@@ -11,12 +11,6 @@ const BreadcrumbProps = [
         default: 'null',
         description: 'Configuration for the home icon.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
-    },
     {
         name: 'pt',
         type: 'any',

api-generator/components/contextmenu.js

@@ -29,12 +29,6 @@ const ContextMenuProps = [
         default: 'false',
         description: 'Attaches the menu to document instead of a particular item.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
-    },
     {
         name: 'pt',
         type: 'any',

api-generator/components/dock.js

@@ -23,12 +23,6 @@ const DockProps = [
         default: 'null',
         description: 'Inline style of the element.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
-    },
     {
         name: 'tooltipOptions',
         type: 'object',

api-generator/components/megamenu.js

@@ -11,12 +11,6 @@ const MegaMenuProps = [
         default: 'horizontal',
         description: 'Defines the orientation, valid values are horizontal and vertical.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
-    },
     {
         name: 'pt',
         type: 'any',

api-generator/components/menu.js

@@ -29,12 +29,6 @@ const MenuProps = [
         default: 'true',
         description: 'Whether to automatically manage layering.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
-    },
     {
         name: 'pt',
         type: 'any',
@@ -63,11 +57,11 @@ const MenuEvents = [
 const MenuSlots = [
     {
         name: 'start',
-        description: 'Custom content before the content'
+        description: 'Custom start content.'
     },
     {
         name: 'end',
-        description: 'Custom content after the content'
+        description: 'Custom end content.'
     },
     {
         name: 'item',
@@ -79,7 +73,7 @@ const MenuSlots = [
     },
     {
         name: 'submenuheader',
-        description: 'Custom submenuheader template.'
+        description: 'Custom submenu header template.'
     }
 ];
 

api-generator/components/menubar.js

@@ -5,12 +5,6 @@ const MenubarProps = [
         default: 'null',
         description: 'An array of menuitems.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
-    },
     {
         name: 'pt',
         type: 'any',

api-generator/components/panelmenu.js

@@ -11,12 +11,6 @@ const PanelMenuProps = [
         default: 'null',
         description: 'A map of keys to represent the expansion state in controlled mode.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
-    },
     {
         name: 'pt',
         type: 'any',

api-generator/components/steps.js

@@ -11,18 +11,18 @@ const StepsProps = [
         default: 'null',
         description: 'An array of menuitems.'
     },
+    {
+        name: 'activeStep',
+        type: 'number',
+        default: '0',
+        description: 'Active step index of menuitem.'
+    },
     {
         name: 'readonly',
         type: 'boolean',
         default: 'true',
         description: 'Whether the items are clickable or not.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
-    },
     {
         name: 'pt',
         type: 'any',

api-generator/components/tabmenu.js

@@ -5,12 +5,6 @@ const TabMenuProps = [
         default: 'null',
         description: 'An array of menuitems.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: 'Defines if active route highlight should match the exact route path.'
-    },
     {
         name: 'activeIndex',
         type: 'number',

api-generator/components/tieredmenu.js

@@ -29,12 +29,6 @@ const TieredMenuProps = [
         default: 'true',
         description: 'Whether to automatically manage layering.'
     },
-    {
-        name: 'exact',
-        type: 'boolean',
-        default: 'true',
-        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
-    },
     {
         name: 'pt',
         type: 'any',
@@ -50,6 +44,14 @@ const TieredMenuProps = [
 ];
 
 const TieredMenuSlots = [
+    {
+        name: 'start',
+        description: 'Custom start content.'
+    },
+    {
+        name: 'end',
+        description: 'Custom end content.'
+    },
     {
         name: 'item',
         description: 'Template of a menuitem.'

assets/styles/layout/_code.scss

@@ -119,10 +119,6 @@ pre[class*="language-"] {
         .token.entity {
             cursor: help;
         }
-
-        .token.namespace {
-            opacity: .7;
-        }
     }
 }
 

components/doc/DocApiTable.vue

@@ -107,7 +107,7 @@ export default {
             }
 
             return value?.split('|').map((item) => {
-                return item.replace(/(\[|\]|<|>).*$/gm, '').trim();
+                return item.replace(/(\|\|<|>).*$/gm, '').trim();
             });
         },
         isLinkType(value) {

components/doc/codeeditor/templates.js

@@ -2,7 +2,7 @@ import pkg from '../../../package.json';
 import { services } from './services';
 
 const PrimeVue = {
-    version: '^3.38.0',
+    version: '^3.40.0',
     description:
         'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.'
 };
@@ -148,6 +148,7 @@ import PrimeVue from "primevue/config";
 import AutoComplete from 'primevue/autocomplete';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
+import AnimateOnScroll from 'primevue/animateonscroll';
 import Avatar from 'primevue/avatar';
 import AvatarGroup from 'primevue/avatargroup';
 import Badge from 'primevue/badge';
@@ -256,6 +257,7 @@ app.directive('badge', BadgeDirective);
 app.directive('ripple', Ripple);
 app.directive('styleclass', StyleClass);
 app.directive('focustrap', FocusTrap);
+app.directive('animateonscroll', AnimateOnScroll);
 
 app.component('Accordion', Accordion);
 app.component('AccordionTab', AccordionTab);

components/lib/accordion/Accordion.d.ts

@@ -85,7 +85,7 @@ export interface AccordionPassThroughOptions {
      */
     accordiontab?: AccordionTabPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/accordion/Accordion.vue

@@ -20,7 +20,7 @@
                     @keydown="onTabKeyDown($event, tab, i)"
                     v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
                 >
-                    <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
+                    <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :active="isTabActive(i)" :index="i"></component>
                     <component
                         v-else-if="isTabActive(i)"
                         :is="$slots.collapseicon ? $slots.collapseicon : collapseIcon ? 'span' : 'ChevronDownIcon'"

components/lib/accordiontab/AccordionTab.d.ts

@@ -194,8 +194,14 @@ export interface AccordionTabSlots {
         /**
          * Whether the tab is active
          * @param {number} index - Index of the tab
+         * @deprecated since v3.40.0. Use 'active' property instead.
          */
         isTabActive: (index: number) => void;
+        /**
+         * Whether the tab is active
+         * @param {number} index - Index of the tab
+         */
+        active: (index: number) => void;
     }): VNode[];
 }
 

components/lib/animateonscroll/AnimateOnScroll.d.ts

@@ -40,7 +40,7 @@ export interface AnimateOnScrollOptions {
  */
 export interface AnimateOnScrollDirectivePassThroughOptions {
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseDirective.DirectiveHooks}
      */
     hooks?: DirectiveHooks;
@@ -66,7 +66,7 @@ export interface AnimateOnScrollDirectiveBinding extends Omit<DirectiveBinding,
      */
     value?: AnimateOnScrollOptions | undefined;
     /**
-     * Modifiers of the tooltip.
+     * Modifiers of the AnimateOnScroll.
      * @type {AnimateOnScrollDirectiveModifiers}
      */
     modifiers?: AnimateOnScrollDirectiveModifiers | undefined;

components/lib/autocomplete/AutoComplete.d.ts

@@ -186,7 +186,7 @@ export interface AutoCompletePassThroughOptions {
      */
     selectedMessage?: AutoCompletePassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -631,8 +631,14 @@ export interface AutoCompleteSlots {
         /**
          * Remove token icon function.
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'removeCallback' property instead.
          */
         onClick: (event: Event, index: number) => void;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         */
+        removeCallback: (event: Event, index: number) => void;
     }): VNode[];
     /**
      * Custom loading icon template.

components/lib/autocomplete/AutoComplete.vue

@@ -55,7 +55,7 @@
                 <slot name="chip" :value="option">
                     <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
                 </slot>
-                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeOption(event, i)">
+                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeOption(event, i)" :removeCallback="(event) => removeOption(event, i)">
                     <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>

components/lib/avatar/Avatar.d.ts

@@ -65,7 +65,7 @@ export interface AvatarPassThroughOptions {
      */
     image?: AvatarPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/avatargroup/AvatarGroup.d.ts

@@ -30,7 +30,7 @@ export interface AvatarGroupPassThroughOptions {
      */
     root?: AvatarGroupPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/badge/Badge.d.ts

@@ -49,7 +49,7 @@ export interface BadgePassThroughOptions {
      */
     root?: BadgePassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/badgedirective/BadgeDirective.d.ts

@@ -55,7 +55,7 @@ export interface BadgeDirectivePassThroughOptions {
      */
     root?: BadgeDirectivePassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseDirective.DirectiveHooks}
      */
     hooks?: DirectiveHooks;

components/lib/blockui/BlockUI.d.ts

@@ -50,7 +50,7 @@ export interface BlockUIPassThroughOptions {
      */
     mask?: BlockUIPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/breadcrumb/BaseBreadcrumb.vue

@@ -13,10 +13,6 @@ export default {
         home: {
             type: null,
             default: null
-        },
-        exact: {
-            type: Boolean,
-            default: true
         }
     },
     style: BreadcrumbStyle,

components/lib/breadcrumb/Breadcrumb.d.ts

@@ -75,7 +75,7 @@ export interface BreadcrumbPassThroughOptions {
      */
     separatorIcon?: BreadcrumbPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -134,6 +134,7 @@ export interface BreadcrumbProps {
     home?: MenuItem | undefined;
     /**
      * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
+     * @deprecated since v3.40.0.
      * @defaultValue true
      */
     exact?: boolean | undefined;

components/lib/breadcrumb/Breadcrumb.vue

@@ -1,14 +1,14 @@
 <template>
     <nav :class="cx('root')" v-bind="ptm('root')" data-pc-name="breadcrumb">
         <ol :class="cx('menu')" v-bind="ptm('menu')">
-            <BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :exact="exact" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
+            <BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
             <template v-for="(item, i) of model" :key="item.label + '_' + i">
                 <li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
                     <slot name="separator">
                         <ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
                     </slot>
                 </li>
-                <BreadcrumbItem :item="item" :index="i" :templates="$slots" :exact="exact" :pt="pt" :unstyled="unstyled" />
+                <BreadcrumbItem :item="item" :index="i" :templates="$slots" :pt="pt" :unstyled="unstyled" />
             </template>
         </ol>
     </nav>
@@ -22,11 +22,6 @@ import BreadcrumbItem from './BreadcrumbItem.vue';
 export default {
     name: 'Breadcrumb',
     extends: BaseBreadcrumb,
-    beforeMount() {
-        if (!this.$slots.item) {
-            console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
-        }
-    },
     components: {
         BreadcrumbItem: BreadcrumbItem,
         ChevronRightIcon: ChevronRightIcon

components/lib/breadcrumb/BreadcrumbItem.vue

@@ -1,14 +1,7 @@
 <template>
     <li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem', ptmOptions)">
         <template v-if="!templates.item">
-            <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+            <a :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action', ptmOptions)">
-                <a :href="href" :class="cx('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action', ptmOptions)">
-                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
-                    <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
-                    <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
-                </a>
-            </router-link>
-            <a v-else :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action', ptmOptions)">
                 <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon', ptmOptions)" />
                 <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
                 <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
@@ -29,7 +22,6 @@ export default {
     props: {
         item: null,
         templates: null,
-        exact: null,
         index: null
     },
     methods: {
@@ -40,10 +32,6 @@ export default {
                     item: this.item
                 });
             }
-
-            if (this.item.to && navigate) {
-                navigate(event);
-            }
         },
         visible() {
             return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;

components/lib/breadcrumb/style/BreadcrumbStyle.js

@@ -42,13 +42,7 @@ const classes = {
     home: 'p-breadcrumb-home',
     separator: 'p-menuitem-separator',
     menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
-    action: ({ props, isActive, isExactActive }) => [
+    action: 'p-menuitem-link',
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
     icon: 'p-menuitem-icon',
     label: 'p-menuitem-text'
 };

components/lib/button/Button.d.ts

@@ -66,7 +66,7 @@ export interface ButtonPassThroughOptions {
      */
     badge?: ButtonPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/calendar/Calendar.d.ts

@@ -305,7 +305,7 @@ export interface CalendarPassThroughOptions {
      */
     hiddenYear?: CalendarPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/calendar/Calendar.vue

@@ -554,6 +554,12 @@ export default {
         showTime() {
             this.updateCurrentMetaData();
         },
+        minDate() {
+            this.updateCurrentMetaData();
+        },
+        maxDate() {
+            this.updateCurrentMetaData();
+        },
         months() {
             if (this.overlay) {
                 if (!this.focused) {
@@ -2646,8 +2652,11 @@ export default {
         onOverlayKeyDown(event) {
             switch (event.code) {
                 case 'Escape':
-                    this.input.focus();
+                    if (!this.inline) {
-                    this.overlayVisible = false;
+                        this.input.focus();
+                        this.overlayVisible = false;
+                    }
+
                     break;
 
                 default:

components/lib/card/Card.d.ts

@@ -48,7 +48,7 @@ export interface CardPassThroughOptions {
      */
     footer?: CardPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/carousel/Carousel.d.ts

@@ -110,7 +110,7 @@ export interface CarouselPassThroughOptions {
      */
     footer?: CarouselPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/cascadeselect/CascadeSelect.d.ts

@@ -121,7 +121,7 @@ export interface CascadeSelectPassThroughOptions {
      */
     hiddenSearchResult?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/cascadeselect/CascadeSelectSub.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
+    <ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
         <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
             <li
                 :id="getOptionId(processedOption)"
@@ -45,6 +45,7 @@
                     @option-change="onOptionChange"
                     :pt="pt"
                     :unstyled="unstyled"
+                    :isParentMount="mounted"
                 />
             </li>
         </template>
@@ -62,6 +63,7 @@ export default {
     hostName: 'CascadeSelect',
     extends: BaseComponent,
     emits: ['option-change'],
+    container: null,
     props: {
         selectId: String,
         focusedOptionId: String,
@@ -74,12 +76,25 @@ export default {
         optionGroupChildren: Array,
         activeOptionPath: Array,
         level: Number,
-        templates: null
+        templates: null,
+        isParentMount: Boolean
+    },
+    data() {
+        return {
+            mounted: false
+        };
+    },
+    watch: {
+        isParentMount: {
+            handler(newValue) {
+                newValue && DomHandler.nestedPosition(this.container, this.level);
+            }
+        }
     },
     mounted() {
-        if (ObjectUtils.isNotEmpty(this.parentKey)) {
+        // entering order correction when an item is selected
-            this.position();
+        (this.isParentMount || this.level === 0) && DomHandler.nestedPosition(this.container, this.level);
-        }
+        this.mounted = true;
     },
     methods: {
         getOptionId(processedOption) {
@@ -121,16 +136,8 @@ export default {
         onOptionChange(event) {
             this.$emit('option-change', event);
         },
-        position() {
+        containerRef(el) {
-            const parentItem = this.$el.parentElement;
+            this.container = el;
-            const containerOffset = DomHandler.getOffset(parentItem);
-            const viewport = DomHandler.getViewport();
-            const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
-            const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-
-            if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
-                this.$el.style.left = '-100%';
-            }
         }
     },
     directives: {

components/lib/cascadeselect/style/CascadeSelectStyle.js

@@ -82,6 +82,15 @@ const css = `
         left: 100%;
         top: 0;
     }
+
+    .p-cascadeselect-enter-from,
+    .p-cascadeselect-leave-active {
+        opacity: 0;
+    }
+
+    .p-cascadeselect-enter-active {
+        transition: opacity 150ms;
+    }
 }
 `;
 

components/lib/chart/Chart.d.ts

@@ -46,7 +46,7 @@ export interface ChartPassThroughOptions {
      */
     canvas?: ChartPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/checkbox/Checkbox.d.ts

@@ -66,7 +66,7 @@ export interface CheckboxPassThroughOptions {
      */
     hiddenInput?: CheckboxPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/chip/Chip.d.ts

@@ -62,7 +62,7 @@ export interface ChipPassThroughOptions {
      */
     removeIcon?: ChipPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -150,13 +150,25 @@ export interface ChipSlots {
         /**
          * Remove icon click event
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'removeCallback' property instead.
          */
         onClick: (event: Event) => void;
         /**
          * Remove icon keydown event
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'keydownCallback' property instead.
          */
         onKeydown: (event: Event) => void;
+        /**
+         * Remove icon click event
+         * @param {Event} event - Browser event
+         */
+        removeCallback: (event: Event) => void;
+        /**
+         * Remove icon keydown event
+         * @param {Event} event - Browser event
+         */
+        keydownCallback: (event: Event) => void;
     }): VNode[];
 }
 

components/lib/chip/Chip.vue

@@ -6,7 +6,7 @@
             <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
             <div v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</div>
         </slot>
-        <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
+        <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown" :removeCallback="close" :keydownCallback="onKeydown">
             <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="[cx('removeIcon'), removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
         </slot>
     </div>

components/lib/chips/Chips.d.ts

@@ -92,7 +92,7 @@ export interface ChipsPassThroughOptions {
      */
     input?: ChipsPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -238,8 +238,14 @@ export interface ChipsSlots {
         /**
          * Remove token icon function.
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'removeCallback' property instead.
          */
         onClick: (event: Event, index: number) => void;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         */
+        removeCallback: (event: Event, index: number) => void;
     }): VNode[];
 }
 /**

components/lib/chips/Chips.vue

@@ -31,7 +31,7 @@
                 <slot name="chip" :class="cx('label')" :value="val">
                     <span :class="cx('label')" v-bind="ptm('label')">{{ val }}</span>
                 </slot>
-                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)">
+                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)" :removeCallback="(event) => removeItem(event, i)">
                     <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>

components/lib/colorpicker/ColorPicker.d.ts

@@ -95,7 +95,7 @@ export interface ColorPickerPassThroughOptions {
      */
     hueHandle: ColorPickerPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/column/Column.d.ts

@@ -337,7 +337,7 @@ export interface ColumnPassThroughOptions {
      */
     hiddenInput?: ColumnPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/columngroup/ColumnGroup.d.ts

@@ -48,7 +48,7 @@ export interface ColumnGroupPassThroughOptions {
      */
     root?: ColumnGroupPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/confirmdialog/ConfirmDialog.d.ts

@@ -94,7 +94,7 @@ export interface ConfirmDialogPassThroughOptions {
      */
     acceptButton?: ButtonPassThroughOptions;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -222,16 +222,31 @@ export interface ConfirmDialogSlots {
         message: any;
         /**
          * Close dialog function.
+         * @deprecated since v3.39.0. Use 'closeCallback' property instead.
          */
         onClose: () => void;
         /**
          * Accept function of the component
+         * @deprecated since v3.39.0. Use 'acceptCallback' property instead.
          */
         onAccept: () => void;
         /**
          * Reject function of the component
+         * @deprecated since v3.39.0. Use 'rejectCallback' property instead.
          */
         onReject: () => void;
+        /**
+         * Close dialog function.
+         */
+        closeCallback: () => void;
+        /**
+         * Accept function of the component
+         */
+        acceptCallback: () => void;
+        /**
+         * Reject function of the component
+         */
+        rejectCallback: () => void;
     }): VNode[];
 }
 

components/lib/confirmdialog/ConfirmDialog.vue

@@ -15,7 +15,7 @@
         :unstyled="unstyled"
     >
         <template v-if="$slots.container" #container="slotProps">
-            <slot name="container" :message="confirmation" :onClose="slotProps.onClose" :onAccept="accept" :onReject="reject" />
+            <slot name="container" :message="confirmation" :onClose="slotProps.onClose" :onAccept="accept" :onReject="reject" :closeCallback="slotProps.onclose" :acceptCallback="accept" :rejectCallback="reject" />
         </template>
         <template v-if="!$slots.container">
             <template v-if="!$slots.message">

components/lib/confirmpopup/ConfirmPopup.d.ts

@@ -76,7 +76,7 @@ export interface ConfirmPopupPassThroughOptions {
      */
     acceptButton?: ButtonPassThroughOptions;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -176,12 +176,22 @@ export interface ConfirmPopupSlots {
         message: any;
         /**
          * Accept function of the component
+         * @deprecated since v3.39.0. Use 'acceptCallback' property instead.
          */
         onAccept: () => void;
         /**
          * Reject function of the component
+         * @deprecated since v3.39.0. Use 'rejectCallback' property instead.
          */
         onReject: () => void;
+        /**
+         * Accept function of the component
+         */
+        acceptCallback: () => void;
+        /**
+         * Reject function of the component
+         */
+        rejectCallback: () => void;
     }): VNode[];
 }
 

components/lib/confirmpopup/ConfirmPopup.vue

@@ -2,7 +2,7 @@
     <Portal>
         <transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
             <div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="cx('root')" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
-                <slot v-if="$slots.container" name="container" :message="confirmation" :onAccept="accept" :onReject="reject"></slot>
+                <slot v-if="$slots.container" name="container" :message="confirmation" :onAccept="accept" :onReject="reject" :acceptCallback="accept" :rejectCallback="reject"></slot>
                 <template v-else>
                     <template v-if="!$slots.message">
                         <div :class="cx('content')" v-bind="ptm('content')">

components/lib/contextmenu/BaseContextMenu.vue

@@ -26,10 +26,6 @@ export default {
             type: Boolean,
             default: false
         },
-        exact: {
-            type: Boolean,
-            default: true
-        },
         tabindex: {
             type: Number,
             default: 0

components/lib/contextmenu/ContextMenu.d.ts

@@ -90,7 +90,7 @@ export interface ContextMenuPassThroughOptions {
      */
     submenu?: ContextMenuPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -241,6 +241,7 @@ export interface ContextMenuProps {
     global?: boolean | undefined;
     /**
      * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
+     * @deprecated since v3.40.0.
      * @defaultValue true
      */
     exact?: boolean | undefined;
@@ -290,6 +291,10 @@ export interface ContextMenuSlots {
          * Label property of the menuitem
          */
         label: string | ((...args: any) => string) | undefined;
+        /**
+         * Whether or not there is a submenu
+         */
+        hasSubmenu: boolean;
         /**
          * Binding properties of the menuitem
          */

components/lib/contextmenu/ContextMenu.spec.js

@@ -122,7 +122,7 @@ describe('ContextMenu.vue', () => {
                                 ]
                             },
                             {
-                                label: 'Archieve',
+                                label: 'Archive',
                                 icon: 'pi pi-fw pi-calendar-times',
                                 items: [
                                     {

components/lib/contextmenu/ContextMenu.vue

@@ -16,7 +16,6 @@
                     :items="processedItems"
                     :templates="$slots"
                     :activeItemPath="activeItemPath"
-                    :exact="exact"
                     :aria-labelledby="ariaLabelledby"
                     :aria-label="ariaLabel"
                     :level="0"
@@ -77,11 +76,6 @@ export default {
             }
         }
     },
-    beforeMount() {
-        if (!this.$slots.item) {
-            console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
-        }
-    },
     mounted() {
         this.id = this.id || UniqueComponentId();
 

components/lib/contextmenu/ContextMenuSub.vue

@@ -22,14 +22,7 @@
                 >
                     <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
                         <template v-if="!templates.item">
-                            <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
+                            <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
-                                <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action', processedItem, index)">
-                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
-                                    <span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
-                                </a>
-                            </router-link>
-                            <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
                                 <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
                                 <span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
@@ -39,7 +32,7 @@
                                 </template>
                             </a>
                         </template>
-                        <component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
+                        <component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="getItemProp(processedItem, 'items')" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
                     </div>
                     <ContextMenuSub
                         v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -51,7 +44,6 @@
                         :items="processedItem.items"
                         :templates="templates"
                         :activeItemPath="activeItemPath"
-                        :exact="exact"
                         :level="level + 1"
                         :visible="isItemActive(processedItem) && isItemGroup(processedItem)"
                         :pt="pt"
@@ -115,10 +107,6 @@ export default {
             type: Object,
             default: null
         },
-        exact: {
-            type: Boolean,
-            default: true
-        },
         activeItemPath: {
             type: Object,
             default: null
@@ -174,9 +162,6 @@ export default {
         onItemMouseEnter(event, processedItem) {
             this.$emit('item-mouseenter', { originalEvent: event, processedItem });
         },
-        onItemActionClick(event, navigate) {
-            navigate && navigate(event);
-        },
         getAriaSetSize() {
             return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
         },
@@ -184,22 +169,7 @@ export default {
             return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
         },
         onEnter() {
-            this.position();
+            DomHandler.nestedPosition(this.$refs.container, this.level);
-        },
-        position() {
-            const parentItem = this.$refs.container.parentElement;
-            const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement);
-            const viewport = DomHandler.getViewport();
-            const sublistWidth = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container);
-            const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-
-            this.$refs.container.style.top = '0px';
-
-            if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
-                this.$refs.container.style.left = -1 * sublistWidth + 'px';
-            } else {
-                this.$refs.container.style.left = itemOuterWidth + 'px';
-            }
         },
         getMenuItemProps(processedItem, index) {
             return {

components/lib/contextmenu/style/ContextMenuStyle.js

@@ -35,7 +35,8 @@ const css = `
         margin-left: auto;
     }
 
-    .p-contextmenu-enter-from {
+    .p-contextmenu-enter-from,
+    .p-contextmenu-leave-active {
         opacity: 0;
     }
 
@@ -63,13 +64,7 @@ const classes = {
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
+    action: 'p-menuitem-link',
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
     icon: 'p-menuitem-icon',
     label: 'p-menuitem-text',
     submenuIcon: 'p-submenu-icon',

components/lib/datatable/BodyCell.vue

@@ -450,7 +450,7 @@ export default {
 
                 if (align === 'right') {
                     let right = 0;
-                    let next = this.$el.nextElementSibling;
+                    let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@@ -459,7 +459,7 @@ export default {
                     this.styleObject.right = right + 'px';
                 } else {
                     let left = 0;
-                    let prev = this.$el.previousElementSibling;
+                    let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

components/lib/datatable/DataTable.d.ts

@@ -685,7 +685,7 @@ export interface DataTablePassThroughOptions {
      */
     column?: ColumnPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/datatable/DataTable.vue

@@ -402,7 +402,7 @@ export default {
             }
         },
         editingRows: {
-            deep: true,
+            immediate: true,
             handler(newValue) {
                 if (this.dataKey) {
                     this.updateEditingRowKeys(newValue);

components/lib/datatable/FooterCell.vue

@@ -1,5 +1,5 @@
 <template>
-    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }">
+    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" :data-p-frozen-column="columnProp('frozen')">
         <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
         {{ columnProp('footer') }}
     </td>
@@ -68,7 +68,7 @@ export default {
 
                 if (align === 'right') {
                     let right = 0;
-                    let next = this.$el.nextElementSibling;
+                    let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@@ -77,7 +77,7 @@ export default {
                     this.styleObject.right = right + 'px';
                 } else {
                     let left = 0;
-                    let prev = this.$el.previousElementSibling;
+                    let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

components/lib/datatable/HeaderCell.vue

@@ -270,7 +270,7 @@ export default {
 
                 if (align === 'right') {
                     let right = 0;
-                    let next = this.$el.nextElementSibling;
+                    let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@@ -279,7 +279,7 @@ export default {
                     this.styleObject.right = right + 'px';
                 } else {
                     let left = 0;
-                    let prev = this.$el.previousElementSibling;
+                    let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

components/lib/dataview/DataView.d.ts

@@ -98,7 +98,7 @@ export interface DataViewPassThroughOptions {
      */
     footer?: DataViewPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

@@ -67,7 +67,7 @@ export interface DataViewLayoutOptionsPassThroughOptions {
      */
     gridIcon?: DataViewLayoutOptionsPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/deferredcontent/DeferredContent.d.ts

@@ -46,7 +46,7 @@ export interface DeferredContentPassThroughOptions {
      */
     root?: DeferredContentPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/dialog/Dialog.d.ts

@@ -88,7 +88,7 @@ export interface DialogPassThroughOptions {
      */
     mask?: DialogPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -339,13 +339,24 @@ export interface DialogSlots {
     container(scope: {
         /**
          * Close dialog function.
+         * @deprecated since v3.39.0. Use 'closeCallback' property instead.
          */
         onClose: () => void;
         /**
          * Maximize/minimize dialog function.
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'maximizeCallback' property instead.
          */
         onMaximize: (event: Event) => void;
+        /**
+         * Close dialog function.
+         */
+        closeCallback: () => void;
+        /**
+         * Maximize/minimize dialog function.
+         * @param {Event} event - Browser event
+         */
+        maximizeCallback: (event: Event) => void;
     }): VNode[];
 }
 

components/lib/dialog/Dialog.vue

@@ -3,7 +3,7 @@
         <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
-                    <slot v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)"></slot>
+                    <slot v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)" :closeCallback="close" :maximizeCallback="(event) => maximize(event)"></slot>
                     <template v-else>
                         <div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
                             <slot name="header" :class="cx('headerTitle')">

components/lib/divider/Divider.d.ts

@@ -46,7 +46,7 @@ export interface DividerPassThroughOptions {
      */
     content?: DividerPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/dock/BaseDock.vue

@@ -14,10 +14,6 @@ export default {
         class: null,
         style: null,
         tooltipOptions: null,
-        exact: {
-            type: Boolean,
-            default: true
-        },
         menuId: {
             type: String,
             default: null

components/lib/dock/Dock.d.ts

@@ -75,7 +75,7 @@ export interface DockPassThroughOptions {
      */
     icon?: DockPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -188,6 +188,7 @@ export interface DockProps {
     style?: any;
     /**
      * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
+     * @deprecated since v3.40.0.
      * @defaultValue true
      */
     exact?: boolean | undefined;

components/lib/dock/Dock.vue

@@ -1,18 +1,6 @@
 <template>
     <div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="dock">
-        <DockSub
+        <DockSub :model="model" :templates="$slots" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt" :unstyled="unstyled"></DockSub>
-            :model="model"
-            :templates="$slots"
-            :exact="exact"
-            :tooltipOptions="tooltipOptions"
-            :position="position"
-            :menuId="menuId"
-            :aria-label="ariaLabel"
-            :aria-labelledby="ariaLabelledby"
-            :tabindex="tabindex"
-            :pt="pt"
-            :unstyled="unstyled"
-        ></DockSub>
     </div>
 </template>
 
@@ -23,11 +11,6 @@ import DockSub from './DockSub.vue';
 export default {
     name: 'Dock',
     extends: BaseDock,
-    beforeMount() {
-        if (!this.$slots.item) {
-            console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
-        }
-    },
     computed: {
         containerClass() {
             return [this.class, this.cx('root')];

components/lib/dock/DockSub.vue

@@ -31,25 +31,7 @@
                 >
                     <div :class="cx('content')" v-bind="getPTOptions('content', processedItem, index)">
                         <template v-if="!templates['item']">
-                            <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
-                                <a
-                                    v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
-                                    :href="href"
-                                    :class="cx('action', { isActive, isExactActive })"
-                                    :target="processedItem.target"
-                                    tabindex="-1"
-                                    aria-hidden="true"
-                                    @click="onItemActionClick($event, processedItem, navigate)"
-                                    v-bind="getPTOptions('action', processedItem, index)"
-                                >
-                                    <template v-if="!templates['icon']">
-                                        <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
-                                    </template>
-                                    <component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
-                                </a>
-                            </router-link>
                             <a
-                                v-else
                                 v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
                                 :href="processedItem.url"
                                 :class="cx('action')"
@@ -97,10 +79,6 @@ export default {
             type: null,
             default: null
         },
-        exact: {
-            type: Boolean,
-            default: true
-        },
         tooltipOptions: null,
         menuId: {
             type: String,
@@ -163,9 +141,6 @@ export default {
         onItemMouseEnter(index) {
             this.currentIndex = index;
         },
-        onItemActionClick(event, navigate) {
-            navigate && navigate(event);
-        },
         onItemClick(event, processedItem) {
             if (this.isSameMenuItem(event)) {
                 const command = this.getItemProp(processedItem, 'command');

components/lib/dock/style/DockStyle.js

@@ -127,13 +127,7 @@ const classes = {
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
+    action: 'p-dock-link',
-        'p-dock-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
     icon: 'p-dock-icon'
 };
 

components/lib/dropdown/Dropdown.d.ts

@@ -164,7 +164,7 @@ export interface DropdownPassThroughOptions {
      */
     hiddenLastFocusableEl?: DropdownPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -592,8 +592,14 @@ export interface DropdownSlots {
         /**
          * Clear icon click function.
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'clearCallback' property instead.
          */
         onClick: (event: Event) => void;
+        /**
+         * Clear icon click function.
+         * @param {Event} event - Browser event
+         */
+        clearCallback: (event: Event) => void;
     }): VNode[];
     /**
      * Custom dropdown icon template.

components/lib/dropdown/Dropdown.vue

@@ -47,7 +47,7 @@
         >
             <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
         </span>
-        <slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick">
+        <slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick" :clearCallback="onClearClick">
             <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" data-pc-section="clearicon" />
         </slot>
         <div :class="cx('trigger')" v-bind="ptm('trigger')">

components/lib/editor/Editor.d.ts

@@ -177,7 +177,7 @@ export interface EditorPassThroughOptions {
      */
     content?: EditorPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/fieldset/Fieldset.d.ts

@@ -87,7 +87,7 @@ export interface FieldsetPassThroughOptions {
      */
     content?: FieldsetPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/fileupload/FileUpload.d.ts

@@ -264,7 +264,7 @@ export interface FileUploadPassThroughOptions {
      */
     uploadIcon?: FileUploadPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/focustrap/FocusTrap.d.ts

@@ -57,7 +57,7 @@ export interface FocusTrapDirectivePassThroughOptions {
      */
     lastFocusableElement?: FocusTrapDirectivePassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseDirective.DirectiveHooks}
      */
     hooks?: DirectiveHooks;

components/lib/galleria/Galleria.d.ts

@@ -171,7 +171,7 @@ export interface GalleriaPassThroughOptions {
      */
     mask?: GalleriaPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/image/Image.d.ts

@@ -116,7 +116,7 @@ export interface ImagePassThroughOptions {
      */
     preview?: ImagePassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
@@ -251,8 +251,13 @@ export interface ImageSlots {
         style: any;
         /**
          * Image error function.
+         * @deprecated since v3.39.0. Use 'errorCallback' property instead.
          */
         onError: () => void;
+        /**
+         * Preview click function.
+         */
+        errorCallback: () => void;
     }): VNode[];
     /**
      * Custom preview template.
@@ -269,8 +274,13 @@ export interface ImageSlots {
         style: any;
         /**
          * Preview click function.
+         * @deprecated since v3.39.0. Use 'previewCallback' property instead.
          */
         onClick: () => void;
+        /**
+         * Preview click function.
+         */
+        previewCallback: () => void;
     }): VNode[];
 }
 

components/lib/image/Image.vue

@@ -1,6 +1,6 @@
 <template>
     <span :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="image">
-        <slot name="image" :onError="onError">
+        <slot name="image" :onError="onError" :errorCallback="onError">
             <img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>
         <button v-if="preview" ref="previewButton" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
@@ -43,7 +43,7 @@
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
                     <div v-if="previewVisible" v-bind="ptm('previewContainer')">
-                        <slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
+                        <slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
                             <img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
                         </slot>
                     </div>

components/lib/inlinemessage/InlineMessage.d.ts

@@ -54,7 +54,7 @@ export interface InlineMessagePassThroughOptions {
      */
     text?: InlineMessagePassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/inplace/Inplace.d.ts

@@ -61,7 +61,7 @@ export interface InplacePassThroughOptions {
      */
     closeButton?: ButtonPassThroughOptions;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;

components/lib/inputgroup/BaseInputGroup.vue

@@ -0,0 +1,15 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import InputGroupStyle from 'primevue/inputgroup/style';
+
+export default {
+    name: 'BaseInputGroup',
+    extends: BaseComponent,
+    style: InputGroupStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/inputgroup/InputGroup.d.ts

@@ -0,0 +1,114 @@
+/**
+ *
+ * InputGroup displays text, icon, buttons and other content can be grouped next to an input.
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ *
+ * @module inputgroup
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type InputGroupPassThroughOptionType = InputGroupPassThroughAttributes | ((options: InputGroupPassThroughMethodOptions) => InputGroupPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputGroupPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputGroupProps.pt}
+ */
+export interface InputGroupPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: InputGroupPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputGroupPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in InputGroup component.
+ */
+export interface InputGroupProps {
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {InputGroupPassThroughOptions}
+     */
+    pt?: PassThrough<InputGroupPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in InputGroup component.
+ */
+export interface InputGroupSlots {
+    /**
+     * Custom default template.
+     */
+    default(): VNode[];
+    /**
+     * Dynamic content template.
+     * @todo
+     */
+    [key: string]: (node: any) => VNode[];
+}
+
+/**
+ * Defines valid emits in InputGroup component.
+ */
+export interface InputGroupEmits {}
+
+/**
+ * **PrimeVue - InputGroup**
+ *
+ * _InputGroup displays text, icon, buttons and other content can be grouped next to an input._
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class InputGroup extends ClassComponent<InputGroupProps, InputGroupSlots, InputGroupEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        InputGroup: GlobalComponentConstructor<InputGroup>;
+    }
+}
+
+export default InputGroup;

components/lib/inputgroup/InputGroup.vue

@@ -0,0 +1,14 @@
+<template>
+    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputgroup">
+        <slot />
+    </div>
+</template>
+
+<script>
+import BaseInputGroup from './BaseInputGroup.vue';
+
+export default {
+    name: 'InputGroup',
+    extends: BaseInputGroup
+};
+</script>

components/lib/inputgroup/package.json

@@ -0,0 +1,9 @@
+{
+    "main": "./inputgroup.cjs.js",
+    "module": "./inputgroup.esm.js",
+    "unpkg": "./inputgroup.min.js",
+    "types": "./InputGroup.d.ts",
+    "browser": {
+        "./sfc": "./InputGroup.vue"
+    }
+}

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

@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface InputGroupStyle extends BaseStyle {}

components/lib/inputgroup/style/InputGroupStyle.js

@@ -0,0 +1,10 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-inputgroup'
+};
+
+export default BaseStyle.extend({
+    name: 'inputgroup',
+    classes
+});

components/lib/inputgroup/style/package.json

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

components/lib/inputgroupaddon/BaseInputGroupAddon.vue

@@ -0,0 +1,15 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import InputGroupAddonStyle from 'primevue/inputgroupaddon/style';
+
+export default {
+    name: 'BaseInputGroupAddon',
+    extends: BaseComponent,
+    style: InputGroupAddonStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/inputgroupaddon/InputGroupAddon.d.ts

@@ -0,0 +1,114 @@
+/**
+ *
+ * InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input.
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ *
+ * @module inputgroupaddon
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type InputGroupAddonPassThroughOptionType = InputGroupAddonPassThroughAttributes | ((options: InputGroupAddonPassThroughMethodOptions) => InputGroupAddonPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputGroupAddonPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputGroupAddonProps.pt}
+ */
+export interface InputGroupAddonPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: InputGroupAddonPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputGroupAddonPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in InputGroupAddon component.
+ */
+export interface InputGroupAddonProps {
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {InputGroupAddonPassThroughOptions}
+     */
+    pt?: PassThrough<InputGroupAddonPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in InputGroupAddon component.
+ */
+export interface InputGroupAddonSlots {
+    /**
+     * Custom default template.
+     */
+    default(): VNode[];
+    /**
+     * Dynamic content template.
+     * @todo
+     */
+    [key: string]: (node: any) => VNode[];
+}
+
+/**
+ * Defines valid emits in InputGroupAddon component.
+ */
+export interface InputGroupAddonEmits {}
+
+/**
+ * **PrimeVue - InputGroupAddon**
+ *
+ * _InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input._
+ *
+ * [Live Demo](https://www.primevue.org/inputgroupaddon/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class InputGroupAddon extends ClassComponent<InputGroupAddonProps, InputGroupAddonSlots, InputGroupAddonEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        InputGroupAddon: GlobalComponentConstructor<InputGroupAddon>;
+    }
+}
+
+export default InputGroupAddon;

components/lib/inputgroupaddon/InputGroupAddon.vue

@@ -0,0 +1,14 @@
+<template>
+    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputgroupaddon">
+        <slot />
+    </div>
+</template>
+
+<script>
+import BaseInputGroupAddon from './BaseInputGroupAddon.vue';
+
+export default {
+    name: 'InputGroupAddon',
+    extends: BaseInputGroupAddon
+};
+</script>

components/lib/inputgroupaddon/package.json

@@ -0,0 +1,9 @@
+{
+    "main": "./inputgroupaddon.cjs.js",
+    "module": "./inputgroupaddon.esm.js",
+    "unpkg": "./inputgroupaddon.min.js",
+    "types": "./InputGroupAddon.d.ts",
+    "browser": {
+        "./sfc": "./InputGroupAddon.vue"
+    }
+}

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

@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface InputGroupAddonStyle extends BaseStyle {}

components/lib/inputgroupaddon/style/InputGroupAddonStyle.js

@@ -0,0 +1,10 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-inputgroup-addon'
+};
+
+export default BaseStyle.extend({
+    name: 'inputgroupaddon',
+    classes
+});

components/lib/inputgroupaddon/style/package.json

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

components/lib/inputmask/InputMask.d.ts

@@ -45,7 +45,7 @@ export interface InputMaskPassThroughOptions {
      */
     root?: InputMaskPassThroughOptionType;
     /**
-     * Used to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;